/* Playforia Minigolf — browser port. Visual goal: pixel-faithful match to the
   original Java AWT client (light-green background #99FF99, pastel buttons,
   serif titles, AWT-style 3D-bevel widgets). */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #2a2d33;
  color: #000;
  font-family: "Verdana", Tahoma, Geneva, sans-serif;
  font-size: 12px;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

#app {
  width: 735px;
  height: 525px;
  background: #99ff99; /* GolfGameFrame.colourGameBackground */
  border: 1px solid #000;
  position: relative;
  overflow: hidden;
}

/* ---------- AWT-style controls ---------- */

input[type="text"],
input[type="password"],
select {
  background: #fff;
  color: #000;
  border: 1px solid #000;
  border-top-color: #7a7a7a;
  border-left-color: #7a7a7a;
  padding: 2px 4px;
  font-family: "Dialog", "Verdana", Tahoma, sans-serif;
  font-size: 12px;
  border-radius: 0;
  outline: none;
}

input[type="text"]:focus,
select:focus {
  outline: 1px dotted #000;
  outline-offset: -3px;
}

button {
  background: #d9d9d9; /* Dialog grey — matches AWT default */
  color: #000;
  border: 2px outset #d9d9d9;
  padding: 3px 12px;
  font-family: "Dialog", "Verdana", Tahoma, sans-serif;
  font-size: 12px;
  cursor: pointer;
  border-radius: 0;
  min-height: 22px;
}

button:active:not(:disabled) {
  border-style: inset;
}

button:disabled {
  color: #888;
  cursor: not-allowed;
}

/* Coloured AWT buttons: green / yellow / red / blue */
button.btn-green  { background: #90e090; border-color: #90e090; }
button.btn-yellow { background: #e0e090; border-color: #e0e090; }
button.btn-red    { background: #e09090; border-color: #e09090; }
button.btn-blue   { background: #9090e0; border-color: #9090e0; }

/* AWT-style checkbox */
.awt-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  user-select: none;
}
.awt-check input[type="checkbox"] {
  margin: 0;
}

/* ---------- Loading ---------- */

.panel-loading {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #99ff99;
  color: #000;
}

.panel-loading h1 {
  font-family: "Times New Roman", "Liberation Serif", serif;
  font-size: 26px;
  font-weight: bold;
  margin: 0 0 16px 0;
}

.progress {
  width: 320px;
  height: 14px;
  background: #fff;
  border: 1px solid #000;
  border-top-color: #7a7a7a;
  border-left-color: #7a7a7a;
  position: relative;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: #408040;
  transition: width 200ms linear;
}

/* ---------- Login ---------- */

.panel-login {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #99ff99;
  gap: 12px;
}

.panel-login h1 {
  font-family: "Times New Roman", "Liberation Serif", serif;
  font-size: 26px;
  font-weight: bold;
  margin: 0 0 8px 0;
  color: #000;
}

.form-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.form-row label {
  width: 90px;
  text-align: right;
  color: #000;
  font-family: "Dialog", "Verdana", Tahoma, sans-serif;
}

/* ---------- Lobby select ---------- */

.panel-lobbyselect {
  width: 100%;
  height: 100%;
  background: #99ff99 url("/picture/agolf/bg-lobbyselect.gif") no-repeat top left;
  position: relative;
  font-family: "Dialog", "Verdana", Tahoma, sans-serif;
  color: #000;
}

.panel-lobbyselect .lobby-titles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 130px;
  pointer-events: none;
}

.panel-lobbyselect .lobby-title {
  position: absolute;
  font-family: "Times New Roman", "Liberation Serif", serif;
  font-weight: bold;
  font-size: 26px;
  text-align: center;
  transform: translateX(-50%);
  top: 50px;
  white-space: nowrap;
}

.panel-lobbyselect .lobby-count {
  position: absolute;
  font-family: "Dialog", "Verdana", sans-serif;
  font-size: 12px;
  text-align: center;
  transform: translateX(-50%);
  top: 100px;
}

/* Three columns of buttons at the bottom of the bg image. Anchored in pixels
   to the bg image's 735px-wide thirds (0, 245, 490). #app has a 1px border
   with box-sizing: border-box, so a percent-based layout would resolve
   against 733px of content and slip the right two columns ~1px left of the
   image's divider lines. Pixel anchors match the image grid exactly. */
.panel-lobbyselect .col {
  position: absolute;
  bottom: 0;
  width: 245px;
  height: 165px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 14px;
}

.panel-lobbyselect .col.col-1 { left: 0; }
.panel-lobbyselect .col.col-2 { left: 245px; }
.panel-lobbyselect .col.col-3 { left: 490px; }

.panel-lobbyselect .col button {
  width: 150px;
  font-weight: bold;
}

.panel-lobbyselect .col .btn-quick {
  width: 100px;
  font-weight: normal;
}

.panel-lobbyselect .footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  font-size: 12px;
}

.panel-lobbyselect .footer select {
  min-width: 180px;
}

/* ---------- Single-player lobby ---------- */

.panel-lobby {
  width: 100%;
  height: 100%;
  background: #99ff99 url("/picture/agolf/bg-lobby-single.gif") no-repeat top left;
  position: relative;
  font-family: "Dialog", "Verdana", Tahoma, sans-serif;
  color: #000;
}

.panel-lobby .nameplate {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Times New Roman", "Liberation Serif", serif;
  font-size: 16px;
  font-weight: bold;
  color: #000;
}

.panel-lobby .controls {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 0 18px;
}

.panel-lobby .control-group {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.55);
  padding: 4px 8px;
  border: 1px solid #000;
}

/* ---------- Game ---------- */

.panel-game {
  width: 100%;
  height: 100%;
  background: #99ff99;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  font-family: "Dialog", "Verdana", Tahoma, sans-serif;
  color: #000;
}

/* Scoreboard above the canvas. Auto-sizes to its rows so 2-player rooms don't
   waste 40+px above the canvas; capped at 75px so a crowded room can't push the
   canvas off-screen. */
.panel-game .scoreboard {
  flex: 0 0 auto;
  max-height: 75px;
  width: 100%;
  padding: 2px 8px;
  font-size: 12px;
  font-family: "Dialog", "Verdana", Tahoma, sans-serif;
  color: #000;
  overflow: hidden;
}

.panel-game .scoreboard .row {
  display: grid;
  grid-template-columns: 16px 140px 1fr 64px 80px;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
  font-weight: bold;
}

.panel-game .scoreboard .row.you {
  color: #000080;
}
.panel-game .scoreboard .row.them {
  color: #406040;
}

.panel-game .canvas-frame {
  margin: 0 auto;
  /* Light-green tinted border around the playfield, mirroring the original. */
  padding: 3px;
  background: #c4f0c4;
  border: 1px solid #000;
}

.panel-game canvas {
  display: block;
  background: #99ff99;
  image-rendering: pixelated;
  cursor: crosshair;
}

.panel-game .trackinfo {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 4px 8px;
  font-size: 11px;
  color: #000;
  gap: 8px;
}

.panel-game .trackinfo .left,
.panel-game .trackinfo .right {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.panel-game .trackinfo .right {
  text-align: right;
  align-items: flex-end;
}

.panel-game .trackinfo .center {
  text-align: center;
  font-weight: bold;
}

.panel-game .hud-status {
  font-size: 11px;
  color: #406040;
  font-style: italic;
  text-align: center;
}

/* ---------- Game-over overlay ---------- */

.game-end-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: "Times New Roman", "Liberation Serif", serif;
  font-size: 22px;
  font-weight: bold;
  z-index: 20;
}

.game-end-overlay button {
  font-family: "Dialog", "Verdana", Tahoma, sans-serif;
  font-size: 12px;
  font-weight: normal;
}

/* ---------- Error banner ---------- */

.error-banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: #c04040;
  color: #fff;
  padding: 4px 10px;
  font-size: 12px;
  text-align: center;
  z-index: 100;
}

/* Non-fatal "we're trying to recover" banner — distinct from .error-banner so
   it can sit alongside other UI without screaming red and is removed cleanly
   on `reconnected`. */
.reconnect-banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: #c08040;
  color: #fff;
  padding: 4px 10px;
  font-size: 12px;
  text-align: center;
  z-index: 100;
}

/* ---------- Daily replay viewer ---------- */

.replay-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  gap: 6px;
  height: 100%;
  background: #99ff99;
}

.replay-header {
  text-align: center;
  font-family: "Times New Roman", Times, serif;
}

.replay-title {
  font-size: 16px;
  font-weight: bold;
}

.replay-meta {
  font-size: 12px;
  color: #333;
}

.replay-canvas {
  border: 1px solid #000;
  background: #000;
  image-rendering: pixelated;
}

.replay-controls {
  display: flex;
  gap: 6px;
  align-items: center;
  font-family: "Verdana", sans-serif;
}

.replay-stroke {
  font-size: 12px;
  margin-left: 8px;
}

.replay-status {
  font-size: 11px;
  color: #444;
  text-align: center;
}

/* Valikko button — visual pressed state mirrors a sunken Win98 toolbar
 * toggle. `is-active` is added while the popover is open so the button
 * shows it's the source of the current menu. */
.panel-game .btn-yellow.is-active {
  background: #c8a020;
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.4);
  transform: translateY(1px);
}

/* -----------------------------------------------------------------------
 * Win98/XP-style range input. Used by the in-game Valikko's volume slider.
 * The track is a thin sunken groove; the thumb is a tall narrow gray
 * rectangle with a 3D raised border and three horizontal grip lines on its
 * face. Cross-browser styling needs separate -webkit and -moz pseudo-element
 * blocks because each engine ships its own slider primitives.
 * --------------------------------------------------------------------- */
input[type="range"].win98-slider {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 18px;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

input[type="range"].win98-slider:focus {
  outline: none;
}

/* WebKit / Blink */
input[type="range"].win98-slider::-webkit-slider-runnable-track {
  height: 4px;
  background: #c0c0c0;
  /* Inset 3D groove: dark on top/left, light on bottom/right. */
  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  box-shadow: inset 1px 1px 0 #404040;
}

input[type="range"].win98-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 18px;
  margin-top: -8px; /* center thumb on the 4px track */
  background-color: #c0c0c0;
  /* Three horizontal grip lines (#808080) at y=6/8/10 within the 18px-tall
   * thumb, rendered with stacked linear-gradients so we don't need a sprite. */
  background-image:
    linear-gradient(#808080, #808080),
    linear-gradient(#808080, #808080),
    linear-gradient(#808080, #808080);
  background-size: 6px 1px, 6px 1px, 6px 1px;
  background-position: 2px 6px, 2px 9px, 2px 12px;
  background-repeat: no-repeat;
  /* Raised 3D bevel: white top/left, dark gray bottom/right. */
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #404040;
  border-bottom: 1px solid #404040;
  box-shadow: inset -1px -1px 0 #808080;
  border-radius: 0;
}

input[type="range"].win98-slider::-webkit-slider-thumb:active {
  background-color: #b0b0b0;
}

/* Firefox */
input[type="range"].win98-slider::-moz-range-track {
  height: 4px;
  background: #c0c0c0;
  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  box-shadow: inset 1px 1px 0 #404040;
}

input[type="range"].win98-slider::-moz-range-thumb {
  width: 10px;
  height: 18px;
  background-color: #c0c0c0;
  background-image:
    linear-gradient(#808080, #808080),
    linear-gradient(#808080, #808080),
    linear-gradient(#808080, #808080);
  background-size: 6px 1px, 6px 1px, 6px 1px;
  background-position: 2px 6px, 2px 9px, 2px 12px;
  background-repeat: no-repeat;
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #404040;
  border-bottom: 1px solid #404040;
  box-shadow: inset -1px -1px 0 #808080;
  border-radius: 0;
}