/* Servo -- overlay chrome. The play field itself is canvas; everything here
   is the screens layered on top of it. Palette is shared with the art
   direction so DOM and canvas cannot drift apart. */

:root {
  --bg-deep: #06090f;
  --bg-warm: #141326;
  --dirt: #3b2a1b;
  --hole: #150c07;
  --rim: #8a5a34;
  --amber: #ff9a3c;
  --cream: #f7f1e4;
  --ink: #160d0a;
  --pink: #f06fa8;
  --danger: #e0452b;
  --display: Impact, "Arial Black", "Haettenschweiler", system-ui, sans-serif;
  --body: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-warm) 100%);
  color: var(--cream);
  font-family: var(--body);
  /* The whole point is tapping fast; none of the browser's touch gestures help. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
}

#game-root { position: fixed; inset: 0; }

.game-canvas { display: block; width: 100%; height: 100%; }

/* Hide the native cursor over the play field -- the mallet sprite is the cursor. */
body[data-state="playing"] .game-canvas,
body[data-state="countdown"] .game-canvas { cursor: none; }

#overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}

.screen {
  pointer-events: auto;
  width: min(560px, 92vw);
  max-height: 92vh;
  overflow-y: auto;
  text-align: center;
  padding: clamp(18px, 4vw, 32px);
  border-radius: 20px;
  background: rgba(21, 12, 7, 0.88);
  border: 3px solid var(--rim);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 154, 60, 0.18);
  backdrop-filter: blur(6px);
  animation: rise 220ms ease-out;
}

.screen[hidden] { display: none; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* The logo is drawn on the canvas, in the upper half of the play field. The
   menu therefore anchors to the BOTTOM of the viewport instead of centring,
   or the panel lands straight on top of it. Every other screen still centres. */
body[data-screen="menu"] #overlay { align-items: end; }

.wordmark {
  font-family: var(--display);
  font-size: clamp(52px, 12vw, 96px);
  letter-spacing: 4px;
  margin: 0 0 20px;
  color: var(--amber);
  text-shadow: 0 4px 0 var(--ink), 0 0 34px rgba(255, 154, 60, 0.4);
}

.screen-title {
  font-family: var(--display);
  font-size: clamp(30px, 7vw, 46px);
  letter-spacing: 3px;
  margin: 0 0 12px;
  color: var(--amber);
  text-shadow: 0 3px 0 var(--ink);
}

.tagline { font-size: clamp(15px, 3.6vw, 19px); margin: 0 0 22px; color: var(--cream); }
.muted { color: #c8b49b; font-size: 14px; margin: 8px 0; }

/* --- buttons ---------------------------------------------------------- */

.btn-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 18px 0 6px; }

.btn {
  font-family: var(--display);
  font-size: clamp(17px, 3.6vw, 21px);
  letter-spacing: 2px;
  padding: 14px 26px;
  min-height: 52px; /* comfortable touch target on a 375px phone */
  border-radius: 12px;
  border: 3px solid var(--ink);
  background: #4a2c17;
  color: var(--cream);
  cursor: pointer;
  transition: transform 90ms ease, filter 120ms ease;
}
.btn:hover { filter: brightness(1.16); }
.btn:active { transform: translateY(2px); }
.btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.btn:disabled { opacity: 0.6; cursor: progress; }

.btn-primary {
  background: linear-gradient(180deg, #ff9a3c 0%, #d4661a 100%);
  color: var(--ink);
  box-shadow: 0 5px 0 #8a3d0c;
}
.btn-primary:active { box-shadow: 0 2px 0 #8a3d0c; }

/* Quit: only exists while a round is running, mirrored opposite the mute
   toggle so neither can be hit by accident while aiming at the back row. */
.btn-quit {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 10;
  display: none;
  pointer-events: auto;
  font-size: 13px;
  letter-spacing: 1px;
  padding: 9px 14px;
  min-height: 44px;
  opacity: 0.82;
}

body[data-state="playing"] .btn-quit,
body[data-state="countdown"] .btn-quit { display: inline-block; }

.btn-mute {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 10;
  pointer-events: auto;
  font-size: 13px;
  letter-spacing: 1px;
  padding: 9px 14px;
  min-height: 44px;
  opacity: 0.82;
}

/* --- menu rules ------------------------------------------------------- */

.rules {
  list-style: none;
  margin: 18px 0 0;
  padding: 16px;
  text-align: left;
  font-size: 14px;
  line-height: 1.55;
  border-radius: 12px;
  background: rgba(255, 154, 60, 0.07);
  border: 1px solid rgba(255, 154, 60, 0.22);
}
.rules li + li { margin-top: 8px; }
.rules strong { color: var(--pink); }

/* Inline SVG rather than CSS shapes: an octagon needs clip-path, which would
   take the border away with the corners, and neither an octagon nor an
   hourglass reads correctly as a styled box at 18px. */
.rule-icon {
  width: 18px;
  height: 18px;
  vertical-align: -4px;
  margin-right: 2px;
}

/* --- loading ---------------------------------------------------------- */

.loading-track {
  width: 100%; height: 14px;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid var(--rim);
  border-radius: 8px;
  overflow: hidden;
}
.loading-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #d4661a, var(--amber));
  transition: width 180ms ease;
}

/* --- game over -------------------------------------------------------- */

.final-score-label { font-size: 13px; letter-spacing: 3px; color: var(--amber); margin: 6px 0 0; }
.final-score {
  font-family: var(--display);
  font-size: clamp(56px, 15vw, 90px);
  margin: 0;
  line-height: 1;
  text-shadow: 0 4px 0 var(--ink);
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 20px 0 4px;
}
.stats > div {
  padding: 10px 4px;
  border-radius: 10px;
  background: rgba(255, 154, 60, 0.08);
  border: 1px solid rgba(255, 154, 60, 0.2);
}
.stats dt { font-size: 11px; letter-spacing: 1px; color: #c8b49b; text-transform: uppercase; }
.stats dd { margin: 4px 0 0; font-family: var(--display); font-size: 22px; }

/* --- name entry ------------------------------------------------------- */

.name-slots { display: flex; gap: 10px; justify-content: center; margin: 20px 0 14px; }

.name-slot {
  width: clamp(52px, 15vw, 68px);
  height: clamp(64px, 18vw, 84px);
  font-family: var(--display);
  font-size: clamp(30px, 8vw, 42px);
  color: var(--cream);
  background: #2a180d;
  border: 3px solid var(--rim);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 120ms ease, transform 90ms ease;
}
.name-slot:hover { border-color: var(--amber); }
.name-slot:active { transform: translateY(2px); }
.name-slot:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.name-slot.is-empty { color: #6a5340; }

.name-input {
  width: min(280px, 80%);
  padding: 12px;
  font-family: var(--display);
  font-size: 30px;
  letter-spacing: 10px;
  text-align: center;
  text-transform: uppercase;
  color: var(--cream);
  background: #2a180d;
  border: 3px solid var(--rim);
  border-radius: 10px;
}
.name-input:focus { outline: none; border-color: var(--amber); }

.name-error { color: var(--danger); font-size: 14px; margin: 12px 0 0; font-weight: bold; }

/* --- leaderboard ------------------------------------------------------ */

.leaderboard { list-style: none; margin: 14px 0; padding: 0; }

.lb-row {
  display: grid;
  grid-template-columns: 44px 1fr auto 92px;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 15px;
  background: rgba(255, 255, 255, 0.03);
}
.lb-row + .lb-row { margin-top: 5px; }
.lb-row.is-you {
  background: rgba(255, 154, 60, 0.2);
  border: 2px solid var(--amber);
  box-shadow: 0 0 18px rgba(255, 154, 60, 0.3);
}
.lb-rank { font-family: var(--display); color: var(--amber); font-size: 18px; }
.lb-name { font-family: var(--display); letter-spacing: 3px; font-size: 19px; text-align: left; }
.lb-points { font-family: var(--display); font-size: 19px; }
.lb-date { font-size: 11px; color: #a89076; text-align: right; }
.lb-empty { padding: 22px; color: #c8b49b; }

.offline-note {
  font-size: 12.5px;
  color: #ffcf9a;
  background: rgba(255, 154, 60, 0.13);
  border: 1px solid rgba(255, 154, 60, 0.32);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 0 0 10px;
}

.your-score { font-size: 14px; color: var(--amber); margin: 10px 0 0; font-weight: bold; }

/* --- misc ------------------------------------------------------------- */

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Hitting PIP flashes the whole frame pink -- unmissable even mid-wave. */
body.penalty-flash::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: rgba(240, 111, 168, 0.28);
  animation: penaltyFade 220ms ease-out forwards;
  z-index: 5;
}
@keyframes penaltyFade { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .screen { animation: none; }
  body.penalty-flash::after { animation: none; opacity: 0.28; }
  .btn { transition: none; }
}

/* Phones: the play field needs the room, so the chrome tightens up. */
@media (max-width: 420px) {
  .screen { width: 94vw; padding: 16px 14px; border-width: 2px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .lb-row { grid-template-columns: 34px 1fr auto; font-size: 14px; }
  .lb-date { display: none; }
}

/* Short landscape (a phone turned sideways) -- vertical space is the constraint. */
@media (max-height: 520px) {
  .rules { display: none; }
  .screen { padding: 12px 14px; }
}