/* Layout: game screen on top, control deck at the bottom, like a handheld console. */
:root {
  --bg: #14102b;
  --deck: #1d1740;
  --deck-edge: #0b0919;
  --ink: #fff7e8;
  --muted: #9b94c9;
  --gold: #ffd23f;
  --font-pixel: "Press Start 2P", ui-monospace, Menlo, monospace;
  --font-body: "Pixelify Sans", ui-rounded, system-ui, sans-serif;
  --deck-height: 34vh;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  display: flex; flex-direction: column;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.game {
  position: relative;
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding-top: env(safe-area-inset-top, 0px);
  overflow: hidden;
}
#screen { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }

.deck {
  height: var(--deck-height); min-height: 190px;
  background: var(--deck);
  border-top: 4px solid var(--deck-edge);
  padding: 16px max(16px, env(safe-area-inset-left, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-right, 0px));
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}

/* left half: floating joystick (appears where the thumb lands) */
.stick-zone { position: relative; touch-action: none; }
.stick {
  position: absolute; width: 108px; height: 108px;
  transform: translate(-50%, -50%);
  border: 4px solid #3a3170; border-radius: 50%;
  background: rgba(255, 255, 255, .03);
  pointer-events: none;
  transition: border-color .1s steps(2);
}
.stick.active { border-color: var(--gold); }
.knob {
  position: absolute; left: 50%; top: 50%;
  width: 48px; height: 48px; margin: -24px 0 0 -24px;
  border-radius: 50%;
  background: #4a3f8f; box-shadow: inset 0 -5px 0 #2d2660;
}
.stick.active .knob { background: var(--gold); box-shadow: inset 0 -5px 0 #b8921a; }

/* right half: shot buttons, VUR big and lower-right, LOB smaller above-left */
.shot-zone { position: relative; }
.shot {
  position: absolute;
  appearance: none; border: 0; border-radius: 50%;
  font-family: var(--font-pixel); color: #14102b;
  touch-action: none; cursor: pointer;
}
/* VUR big at the bottom right, LOB up top, KES (drop shot) bottom left */
.shot.vur { right: 2%; bottom: 24%; width: 92px; height: 92px; font-size: 13px; background: #5fd068; box-shadow: inset 0 -7px 0 #2f8a3a; }
.shot.lob { left: 8%; top: 4%; width: 66px; height: 66px; font-size: 10px; background: #3ec7e0; box-shadow: inset 0 -6px 0 #1f7f91; }
.shot.kes { left: 2%; bottom: 8%; width: 60px; height: 60px; font-size: 10px; background: #ff9a3c; box-shadow: inset 0 -6px 0 #b8621a; }
.shot.down { transform: translateY(3px); filter: brightness(1.15); }
.shot.vur.down { box-shadow: inset 0 -3px 0 #2f8a3a; }
.shot.lob.down { box-shadow: inset 0 -3px 0 #1f7f91; }
.shot.kes.down { box-shadow: inset 0 -3px 0 #b8621a; }

/* credit line: centered at the very bottom of the controls, same size as the labels */
.deck { grid-template-rows: 1fr auto; }
.credit {
  grid-column: 1 / -1;
  margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-family: var(--font-pixel); font-size: 7px; line-height: 1; letter-spacing: .06em;
  color: var(--muted); text-align: center;
  pointer-events: none;
}
.credit span { display: inline-flex; align-items: center; gap: 5px; }
.credit span:first-child { color: var(--gold); }
.px-icon { display: inline-block; image-rendering: pixelated; flex: none; }

.zone-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  text-align: center; pointer-events: none;
  font-family: var(--font-pixel); font-size: 7px; letter-spacing: .08em; color: var(--muted);
}

/* on-screen texts over the court */
.hud { position: absolute; inset: 0; pointer-events: none; font-family: var(--font-pixel); }
.score {
  position: absolute; top: calc(8px + env(safe-area-inset-top, 0px)); right: 8px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  font-size: 9px; color: var(--ink); text-shadow: 2px 2px 0 #000;
}
.score #best { color: var(--gold); font-size: 7px; }
.speed {
  position: absolute; top: calc(8px + env(safe-area-inset-top, 0px)); left: 8px;
  padding: 5px 7px; background: #14102b; color: var(--gold); font-size: 8px;
}
.msg {
  position: absolute; left: 0; right: 0; top: 42%;
  text-align: center; font-size: 18px; color: var(--gold);
  text-shadow: 3px 3px 0 #b52a5e, 5px 5px 0 #000;
  opacity: 0;
}
.msg.show { animation: msg 1.4s steps(6) forwards; }
@keyframes msg { 0% { opacity: 1; transform: scale(1.4); } 20% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
.hint {
  position: absolute; left: 0; right: 0; bottom: 10px;
  text-align: center; font-size: 9px; color: var(--ink);
  text-shadow: 2px 2px 0 #000;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .msg.show, .hint { animation: none; opacity: 1; } }

/* broadcast-style scoreboard (match mode) */
.board {
  position: absolute; top: calc(8px + env(safe-area-inset-top, 0px)); left: 8px;
  background: #14102b; padding: 5px 6px; display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 0 0 2px #0b0919;
}
.board .row { display: grid; grid-template-columns: 8px 66px 16px 16px 24px; align-items: center; gap: 4px; font-size: 8px; }
.board .nm { overflow: hidden; white-space: nowrap; }
.board .st { color: #8dff9a; text-align: center; }
.board.one-set .row { grid-template-columns: 8px 66px 16px 24px; }

/* player name on the menu */
.name-row { display: flex; align-items: center; gap: 10px; }
.name-row span { font-family: var(--font-pixel); font-size: 9px; color: var(--gold); }
.name-row input {
  flex: 1; min-width: 0;
  font-family: var(--font-pixel); font-size: 16px; letter-spacing: .1em; text-align: center;
  padding: 10px 8px; border: 0; border-radius: 0; outline: none;
  background: #0b0919; color: var(--ink); box-shadow: 0 0 0 3px #3a3170;
  user-select: text; -webkit-user-select: text; touch-action: manipulation;
}
.name-row input:focus { box-shadow: 0 0 0 3px var(--gold); }
.name-row input::placeholder { color: var(--muted); opacity: .6; }
.board.one-set .st { display: none; }

/* match length picker */
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.menu-list .seg button { padding: 11px 4px 13px; font-size: 9px; background: #3a3170; color: var(--ink); box-shadow: inset 0 -4px 0 #241d4a, 0 0 0 3px #0b0919; }
.menu-list .seg button.on { background: var(--gold); color: #14102b; box-shadow: inset 0 -4px 0 #b8921a, 0 0 0 3px #0b0919; }
.format-note { margin: 0; text-align: center; font-size: 13px; line-height: 1.3; color: var(--muted); }
.board .nm { color: var(--ink); }
.board .gm { color: var(--muted); text-align: center; }
.board .pt { color: var(--gold); text-align: right; }
.board .srv { width: 6px; height: 6px; background: transparent; }
.board .srv.on { background: var(--gold); }
.hud.match .speed { top: auto; bottom: 30px; left: 8px; }

/* menu, level picker and match-end card */
.overlay {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: rgba(20, 16, 43, .78);
  padding: 16px;
}
.logo {
  margin: 0; text-align: center;
  font-family: var(--font-pixel); font-size: 26px; line-height: 1.5; color: var(--ink);
  text-shadow: 3px 3px 0 #000;
}
.logo span { color: #e8ff4f; }
.menu-list { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: min(260px, 100%); }
.menu-list button {
  appearance: none; border: 0; cursor: pointer;
  font-family: var(--font-pixel); font-size: 11px; padding: 14px 10px 17px;
  background: #5fd068; color: #14102b;
  box-shadow: inset 0 -5px 0 #2f8a3a, 0 0 0 3px #0b0919;
}
.menu-list button:active { transform: translateY(2px); }
.menu-list button.ghost { background: #3a3170; color: var(--ink); box-shadow: inset 0 -5px 0 #241d4a, 0 0 0 3px #0b0919; }
.menu-list button:focus-visible { outline: 3px dashed var(--gold); outline-offset: 4px; }
.menu-q, .soon { margin: 0; text-align: center; font-family: var(--font-pixel); font-size: 9px; line-height: 1.6; color: var(--gold); }
.soon { color: var(--muted); font-size: 8px; }
.end-title { margin: 0; font-family: var(--font-pixel); font-size: 20px; color: var(--gold); text-shadow: 3px 3px 0 #b52a5e, 5px 5px 0 #000; text-align: center; line-height: 1.5; }
.end-score { margin: 0; font-family: var(--font-pixel); font-size: 14px; color: var(--ink); }
.end-call { margin: 0; text-align: center; font-family: var(--font-pixel); font-size: 10px; line-height: 1.7; color: var(--ink); text-shadow: 2px 2px 0 #000; }
.end-call:empty { display: none; }
.msg.long { font-size: 12px; line-height: 1.7; padding: 0 12px; }

/* online lobby */
.join-row { display: flex; gap: 10px; }
.join-row input {
  flex: 1; min-width: 0;
  font-family: var(--font-pixel); font-size: 16px; text-transform: uppercase; text-align: center; letter-spacing: .2em;
  padding: 12px 8px; border: 0; border-radius: 0; outline: none;
  background: #0b0919; color: var(--gold); box-shadow: 0 0 0 3px #3a3170;
  user-select: text; -webkit-user-select: text; touch-action: manipulation;
}
.join-row input:focus { box-shadow: 0 0 0 3px var(--gold); }
.join-row button { flex: 0 0 auto; }
.lobby-err { margin: 0; min-height: 12px; text-align: center; font-family: var(--font-pixel); font-size: 8px; line-height: 1.6; color: #ff8a8a; }
.net-mode { margin: 0; text-align: center; font-family: var(--font-pixel); font-size: 7px; line-height: 1.6; color: #8dff9a; }
.room-code { margin: 0; text-align: center; font-family: var(--font-pixel); font-size: 34px; letter-spacing: .25em; color: var(--gold); text-shadow: 3px 3px 0 #000; text-transform: uppercase; }
.lobby-note { margin: 0; text-align: center; font-size: 14px; color: var(--muted); }
.room-link { margin: 0; text-align: center; font-size: 13px; color: var(--ink); overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.waiting { margin: 0; text-align: center; font-family: var(--font-pixel); font-size: 9px; color: var(--ink); animation: blink 1s steps(1) infinite; }

.ping {
  position: absolute; top: calc(8px + env(safe-area-inset-top, 0px)); right: 8px;
  font-family: var(--font-pixel); font-size: 7px; color: var(--muted); text-shadow: 2px 2px 0 #000;
}
.ping.slow { color: #ffd23f; }
.ping.bad { color: #ff4f6d; }

.lag {
  position: absolute; z-index: 5; right: 6px; top: 26px;
  background: rgba(0, 0, 0, .75); padding: 6px 8px; display: flex; flex-direction: column; gap: 4px;
  font: 10px/1.3 ui-monospace, Menlo, monospace; color: #8dff9a;
}
.lag p { margin: 0; }
.lag label { display: flex; align-items: center; gap: 4px; }
.lag input { width: 80px; }

/* challenge button + line camera replay */
.challenge-btn {
  position: absolute; z-index: 2; left: 50%; top: 56%;
  transform: translateX(-50%);
  appearance: none; border: 0; cursor: pointer;
  font-family: var(--font-pixel); font-size: 10px; padding: 11px 12px 13px;
  background: var(--gold); color: #14102b;
  box-shadow: inset 0 -4px 0 #b8921a, 0 0 0 3px #0b0919;
  animation: pulse .8s steps(2) infinite;
}
.challenge-btn span { display: inline-block; margin-left: 6px; padding: 2px 4px; background: #14102b; color: var(--gold); font-size: 8px; }
@keyframes pulse { 50% { transform: translateX(-50%) scale(1.06); } }
.replay {
  position: absolute; z-index: 4; left: 50%; top: 18%;
  transform: translateX(-50%);
  background: #14102b; padding: 8px 8px 10px;
  box-shadow: 0 0 0 3px #0b0919, 0 0 0 6px var(--gold);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.replay-title { margin: 0; font-family: var(--font-pixel); font-size: 8px; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.rec { width: 6px; height: 6px; background: #ff4f6d; animation: blink 1s steps(1) infinite; }
#replayCanvas { width: 240px; height: 168px; image-rendering: pixelated; display: block; }
.replay-verdict { margin: 0; min-height: 18px; font-family: var(--font-pixel); font-size: 15px; }
.replay-verdict.in { color: #5fd068; text-shadow: 2px 2px 0 #000; }
.replay-verdict.out { color: #ff4f6d; text-shadow: 2px 2px 0 #000; }

.sound-btn {
  position: absolute; z-index: 4;
  bottom: 8px; left: 8px;
  appearance: none; border: 0; cursor: pointer;
  font-family: var(--font-pixel); font-size: 7px; padding: 6px 7px;
  background: #14102b; color: var(--muted); box-shadow: 0 0 0 2px #0b0919;
}
.hud.match .speed { bottom: 34px; }

.menu-btn {
  position: absolute; z-index: 2;
  bottom: 8px; right: 8px;
  appearance: none; border: 0; cursor: pointer;
  font-family: var(--font-pixel); font-size: 7px; padding: 6px 7px;
  background: #14102b; color: var(--muted); box-shadow: 0 0 0 2px #0b0919;
}

.debug {
  position: absolute; top: calc(8px + env(safe-area-inset-top, 0px)); left: 8px;
  margin: 0; padding: 6px 8px;
  font: 11px/1.4 ui-monospace, Menlo, monospace;
  color: #8dff9a; background: rgba(0, 0, 0, .6);
  pointer-events: none;
}