/*
  Sleigh Run styles. Everything inside .stage is authored in 390 x 844 logical
  px; stage.js sets --scale and the stage is scaled with a transform.
*/

:root {
  --frame: #4b1d6e;         /* purple desktop surround */
  --frame-deep: #2e1046;
  --landing: #6b1326;       /* maroon landing screen */
  --landing-deep: #4d0c1b;
  --snow: #eef0f6;
  --snow-shade: #d9dde8;
  --ink: #2b2140;
  --ink-deep: #17112a;
  --lime: #c7d64a;
  --lime-deep: #8c9a2a;
  --sky-blue: #2f7fd6;
  --red: #d8323c;
  --text: #f4f1f8;
  --panel-bg: #f6f6fb;
  --dim: rgba(23, 17, 42, 0.42);

  --scale: 1;               /* unitless; written by stage.js on resize */
  --frame-pad: 0px;         /* desktop frame thickness; stage.js reads this */

  --font-pixel: "Press Start 2P", "Courier New", ui-monospace, monospace;
  --ease-screen: cubic-bezier(0.22, 0.8, 0.3, 1);
  --dur-screen: 520ms;
  --dur-panel: 420ms;
  --dur-fade: 180ms;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--frame);
  color: var(--text);
  font-family: var(--font-pixel);
  display: grid;
  place-items: center;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* Hide the stage until the pixel font is ready (or the boot timeout fires). */
.stage { transition: opacity 220ms ease; }
html.booting .stage { opacity: 0; }

/* ---------- Frame and stage ---------- */

.frame {
  width: calc(390px * var(--scale) + 2 * var(--frame-pad));
  height: calc(844px * var(--scale) + 2 * var(--frame-pad));
  padding: var(--frame-pad);
  background: var(--frame);
}

.stage-clip {
  position: relative;
  width: calc(390px * var(--scale));
  height: calc(844px * var(--scale));
  overflow: hidden;
  background: var(--landing);
}

.stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 390px;
  height: 844px;
  transform: scale(var(--scale));
  transform-origin: 0 0;
  overflow: hidden;
  background: var(--landing);
}

/* Desktop and tablets: a rounded purple phone frame around the stage. */
@media (min-width: 560px) and (min-height: 560px) {
  :root { --frame-pad: 14px; }

  .frame {
    border-radius: 34px;
    background: linear-gradient(160deg, #6a2d97 0%, var(--frame) 45%, var(--frame-deep) 100%);
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.08),
      0 24px 60px rgba(0, 0, 0, 0.45);
  }

  .stage-clip { border-radius: 22px; }
}

/* ---------- Screens ---------- */

.screen {
  position: absolute;
  inset: 0;
  transition: transform var(--dur-screen) var(--ease-screen);
  will-change: transform;
}

.screen-landing {
  transform: translateY(0);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, 0.08), transparent 60%),
    linear-gradient(var(--landing), var(--landing-deep));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 64px 28px 72px;
  text-align: center;
}

.screen-run {
  transform: translateY(100%);
  background: var(--snow);
}

.stage[data-screen="run"] .screen-landing { transform: translateY(-100%); }
.stage[data-screen="run"] .screen-run { transform: translateY(0); }

/* ---------- Landing content ---------- */

.title {
  margin: 0;
  display: grid;
  gap: 6px;
  font-weight: 400;
}

.title-line {
  font-size: 30px;
  line-height: 1.4;
  color: var(--text);
  text-shadow: 3px 3px 0 var(--ink-deep);
}

.title-year {
  margin-top: 14px;
  font-size: 58px;
  line-height: 1.2;
  color: var(--lime);
  /* Pixel outline plus a hard drop shadow, no blur. */
  text-shadow:
    -3px 0 0 var(--ink), 3px 0 0 var(--ink), 0 -3px 0 var(--ink), 0 3px 0 var(--ink),
    -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink), 3px 3px 0 var(--ink),
    5px 7px 0 var(--ink-deep);
}

.how-to {
  margin: 0;
  font-size: 11px;
  line-height: 2.1;
  color: var(--text);
  opacity: 0.92;
}

/* ---------- Buttons ---------- */

.btn {
  font: 400 16px/1 var(--font-pixel);
  letter-spacing: 1px;
  padding: 18px 28px;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text);
  background: var(--ink);
  box-shadow: 0 5px 0 var(--ink-deep);
  transition: transform 60ms ease, box-shadow 60ms ease;
  touch-action: manipulation;
}

.btn:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--ink-deep);
}

.btn:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 3px;
}

.btn-lime {
  background: var(--lime);
  color: var(--ink);
  box-shadow: 0 5px 0 var(--lime-deep);
}

.btn-lime:active { box-shadow: 0 1px 0 var(--lime-deep); }

.btn-start { padding: 20px 44px; font-size: 18px; }

/* ---------- Run overlays ---------- */

.run-canvas {
  position: absolute;
  inset: 0;
  width: 390px;
  height: 844px;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.hud {
  position: absolute;
  /* Safe-area insets are viewport px; the stage is scaled, so divide. */
  top: calc(22px + env(safe-area-inset-top, 0px) / var(--scale));
  left: calc(22px + env(safe-area-inset-left, 0px) / var(--scale));
  font-size: 22px;
  line-height: 1;
  color: var(--sky-blue);
  text-shadow: 2px 2px 0 rgba(43, 33, 64, 0.18);
  pointer-events: none;
}

.hud-distance { display: inline-block; transform-origin: 0 50%; }

.hud-distance.is-flash { animation: hud-flash 600ms steps(6, end); }

@keyframes hud-flash {
  0%   { transform: scale(1); color: var(--sky-blue); }
  30%  { transform: scale(1.5); color: var(--red); }
  100% { transform: scale(1); color: var(--sky-blue); }
}

.steer-hint {
  position: absolute;
  left: 0;
  right: 0;
  top: 55%;
  margin: 0;
  text-align: center;
  font-size: 16px;
  line-height: 1;
  color: var(--ink);
  opacity: 0.9;
  transition: opacity 300ms ease;
  pointer-events: none;
}

.steer-hint.is-hidden { opacity: 0; }

/* On-screen steering buttons (CONFIG.show_buttons). --steer-btn-opacity comes
   from CONFIG.button_opacity. */
.steer-buttons {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 18px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.steer-buttons[hidden] { display: none; }

.steer-btn {
  width: 104px;
  height: 84px;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--ink);
  border: 3px solid var(--ink-deep);
  border-radius: 0;
  opacity: var(--steer-btn-opacity, 0.35);
  pointer-events: auto;
  touch-action: none;
  cursor: pointer;
  transition: opacity 80ms linear, transform 80ms linear;
}
.steer-btn svg { width: 40px; height: 40px; fill: #fff; shape-rendering: crispEdges; }
.steer-btn:focus { outline: none; }
.steer-btn.is-active {
  opacity: min(1, calc(var(--steer-btn-opacity, 0.35) + 0.2));
  transform: translateY(2px);
}

.overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Countdown: 3 - 2 - 1 - GO above the start line; each step scales and fades. */
.countdown-step {
  position: absolute;
  left: 0;
  right: 0;
  top: 150px;
  text-align: center;
  font-size: 96px;
  line-height: 1;
  color: var(--lime);
  text-shadow:
    -4px 0 0 var(--ink), 4px 0 0 var(--ink), 0 -4px 0 var(--ink), 0 4px 0 var(--ink),
    -4px -4px 0 var(--ink), 4px -4px 0 var(--ink), -4px 4px 0 var(--ink), 4px 4px 0 var(--ink),
    6px 8px 0 var(--ink-deep);
  animation: countdown-step 700ms ease-out both;
}

.countdown-step.is-go { font-size: 80px; }

@keyframes countdown-step {
  0%   { transform: scale(1.7); opacity: 0; }
  25%  { transform: scale(1); opacity: 1; }
  70%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0; }
}

/* ---------- Pop-up panel shell ---------- */

.panel-backdrop {
  position: absolute;
  inset: 0;
  background: var(--dim);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-panel) ease;
}

.stage.panel-open .panel-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.panel {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 90px;
  bottom: 90px;
  display: flex;
  flex-direction: column;
  background: var(--panel-bg);
  border: 3px solid var(--ink);
  box-shadow:
    inset 0 0 0 3px #ffffff,
    0 10px 0 rgba(43, 33, 64, 0.18);
  transform: translateY(calc(100% + 120px));
  visibility: hidden;
  transition:
    transform var(--dur-panel) var(--ease-screen),
    visibility 0s linear var(--dur-panel);
  will-change: transform;
}

.stage.panel-open .panel {
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}

.panel-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 30px 22px 26px;
  overflow: hidden;
  transition: opacity var(--dur-fade) ease;
}

.panel-body.is-swapping { opacity: 0; }

.panel-title {
  margin: 0;
  font-size: 30px;
  line-height: 1.3;
  text-align: center;
  color: var(--lime);
  text-shadow:
    -3px 0 0 var(--ink), 3px 0 0 var(--ink), 0 -3px 0 var(--ink), 0 3px 0 var(--ink),
    -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink), 3px 3px 0 var(--ink);
}

.panel-copy {
  margin: 0;
  font-size: 11px;
  line-height: 2;
  text-align: center;
  color: var(--ink);
}

.panel-spacer { flex: 1; }

/* ---------- Crash ---------- */

.stage[data-state="crashed"] .run-canvas { animation: crash-shake 320ms steps(8, end); }

@keyframes crash-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-6px, 3px); }
  40% { transform: translate(5px, -4px); }
  60% { transform: translate(-4px, -2px); }
  80% { transform: translate(3px, 2px); }
}

/* ---------- Initials panel ---------- */

.initials-distance {
  margin: -6px 0 0;
  font-size: 14px;
  line-height: 1;
  color: var(--ink);
}

.initials-distance-num { font-size: 24px; color: var(--sky-blue); }

.initials-slots { display: flex; gap: 12px; }

.initials-slot {
  width: 56px;
  height: 60px;
  display: grid;
  place-items: center;
  font-size: 30px;
  line-height: 1;
  color: var(--ink);
  background: #ffffff;
  border: 3px solid var(--ink);
  box-shadow: inset 0 -5px 0 var(--snow-shade);
}

.initials-slot.is-cursor { border-color: var(--sky-blue); animation: slot-blink 900ms steps(2, start) infinite; }
.initials-slot.is-bad { border-color: var(--red); color: var(--red); }

@keyframes slot-blink {
  to { box-shadow: inset 0 -5px 0 var(--sky-blue); }
}

.initials-message {
  margin: -8px 0;
  min-height: 12px;
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
  color: var(--red);
}

.keypad {
  display: grid;
  grid-template-columns: repeat(7, 36px);
  gap: 5px;
}

.keypad.is-locked { pointer-events: none; opacity: 0.5; }

.key {
  height: 44px;
  padding: 0;
  font: 400 14px/1 var(--font-pixel);
  color: var(--ink);
  background: #ffffff;
  border: 2px solid var(--ink);
  border-radius: 3px;
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
  touch-action: manipulation;
}

.key:active { transform: translateY(3px); box-shadow: none; }
.key:focus-visible { outline: 3px solid var(--sky-blue); outline-offset: 1px; }
.key-wide { grid-column: span 2; font-size: 11px; }

.initials-submit { margin-top: 2px; }

.btn:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
}

/* ---------- Scoreboard panel ---------- */

.board {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  line-height: 1;
  color: var(--ink);
}

.board th {
  padding: 0 8px 10px;
  font-weight: 400;
  font-size: 10px;
  color: var(--sky-blue);
  text-align: left;
}

.board td { padding: 8px 8px 7px; }
.board th:first-child, .board td:first-child { width: 68px; }
.board th:last-child, .board td:last-child { text-align: right; }

.board tr.is-empty td { opacity: 0.3; }

.board tr.is-me td {
  background: var(--lime);
  box-shadow: inset 0 2px 0 var(--ink), inset 0 -2px 0 var(--ink);
}

.board tr.is-me td:first-child { box-shadow: inset 2px 2px 0 var(--ink), inset 0 -2px 0 var(--ink); }
.board tr.is-me td:last-child { box-shadow: inset -2px 2px 0 var(--ink), inset 0 -2px 0 var(--ink); }

.board-note {
  flex: 1;
  margin: -6px 0;
  min-height: 12px;
  font-size: 9px;
  line-height: 1.6;
  text-align: center;
  color: var(--red);
}

/* ---------- Rotate-device overlay (phones in landscape) ---------- */

.rotate {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: none;
  place-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  background: var(--frame);
  color: var(--text);
  font-size: 14px;
  line-height: 2;
}

.rotate p { margin: 0; }
.rotate-icon { font-size: 40px; line-height: 1; margin-bottom: 8px; }
.rotate-sub { font-size: 10px; opacity: 0.8; }

@media (orientation: landscape) and (pointer: coarse) and (max-height: 520px) {
  .rotate { display: grid; }
}

.boot-error { display: grid; z-index: 30; gap: 18px; justify-items: center; }
.boot-error[hidden] { display: none; }

/* ---------- Debug badge (?debug=1) ---------- */

.debug {
  position: fixed;
  left: 6px;
  bottom: 6px;
  z-index: 20;
  padding: 4px 6px;
  font: 10px/1.5 ui-monospace, Menlo, monospace;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
  white-space: pre;
}

.debug[hidden] { display: none; }

/* ---------- Motion preference ---------- */

@keyframes countdown-step-fade {
  0%, 70% { opacity: 1; }
  100%    { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-screen: 1ms;
    --dur-panel: 1ms;
    --dur-fade: 1ms;
  }

  .countdown-step { animation-name: countdown-step-fade; }
  .hud-distance.is-flash { animation: none; }
  .stage[data-state="crashed"] .run-canvas { animation: none; }
  .initials-slot.is-cursor { animation: none; }
}