/* DETOUR — midnight courier.
   Deep asphalt with a green-black cast (never blue — the sibling game owns
   blue). Headlight amber is the only hot accent; dawn cyan appears exactly
   once, on the reveal. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-stretch: 125%;
  font-display: swap;
  src: url("../assets/fonts/archivo-expanded-700-latin.woff2") format("woff2");
}

:root {
  --asphalt: #0d1210;
  --asphalt-2: #111814;
  --asphalt-3: #16201b;
  --hairline: #26302a;
  --ink: #d9d6c9;          /* pale warm grey */
  --ink-dim: #8d9187;
  --ink-faint: #5c635b;
  --amber: #ffb020;
  --amber-hi: #ffc94d;
  --cyan: #7fd8d8;
  --danger: #e07856;
  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --body: system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html { height: 100%; }

body {
  min-height: 100%;
  background:
    radial-gradient(120% 90% at 50% -10%, #151d18 0%, var(--asphalt) 55%),
    var(--asphalt);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: max(10px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom));
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

/* ---- masthead ----------------------------------------------------------- */

.masthead {
  width: 100%;
  max-width: 560px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 6px 2px 0;
}

.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 125%;
  font-size: clamp(28px, 7vw, 36px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
}
.wordmark::first-letter { color: var(--amber); }

.day-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  margin-top: 5px;
  text-transform: uppercase;
}

.streak-chip {
  font-family: var(--display);
  font-stretch: 125%;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-hi);
  border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);
  border-radius: 999px;
  padding: 5px 11px;
  margin-top: 4px;
  white-space: nowrap;
}

/* ---- main column --------------------------------------------------------- */

main {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tagline {
  font-size: 13px;
  color: var(--ink-dim);
  text-align: center;
  max-width: 34em;
  margin: 10px 0 12px;
}

/* ---- the board ------------------------------------------------------------ */

.board-wrap {
  width: min(100%, 60svh);
  aspect-ratio: 1;
}

#board {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: crosshair;
}
#board:not(.armed) { cursor: default; }

.backdrop {
  fill: var(--asphalt-2);
  stroke: var(--hairline);
  stroke-width: 2;
}

.street { stroke: #e8f2e8; stroke-opacity: 0.05; stroke-width: 3; fill: none; }
.street.major { stroke-opacity: 0.06; stroke-width: 4; }
.street.minor { stroke-opacity: 0.035; stroke-width: 2; }

/* stops */
.dot .ring {
  fill: none;
  stroke: var(--ink-dim);
  stroke-width: 3.5;
  transition: stroke 160ms ease;
}
.dot .core { fill: transparent; transition: fill 160ms ease; }

.dot.captured .ring { stroke: var(--amber-hi); }
.dot.captured .core { fill: var(--amber); filter: url(#glow-amber); }

/* the group carries translate(), so the pop is scaled on the children */
.dot.captured .ring, .dot.captured .core { transform-box: fill-box; transform-origin: center; }
.dot.captured .ring { animation: ring-pop 300ms cubic-bezier(.2,.9,.3,1.5); }
@keyframes ring-pop {
  0% { transform: scale(0.7); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* the depot */
.dot.home .home-shape {
  fill: color-mix(in srgb, var(--amber) 10%, transparent);
  stroke: var(--amber-hi);
  stroke-width: 4;
  stroke-linejoin: round;
}
.dot.home .home-door {
  fill: none;
  stroke: var(--amber-hi);
  stroke-width: 3.5;
  stroke-linejoin: round;
}
.dot.home.captured .home-shape { fill: color-mix(in srgb, var(--amber) 28%, transparent); filter: url(#glow-amber); }

/* your route */
.route-line {
  fill: none;
  stroke: var(--amber);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#glow-amber);
}
.live-line {
  stroke: color-mix(in srgb, var(--amber-hi) 75%, transparent);
  stroke-width: 6;
  stroke-linecap: round;
}

/* ghost of your best */
.ghost-line {
  fill: none;
  stroke: var(--amber);
  stroke-opacity: 0.28;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2 16;
}

/* the perfect route — the only place cyan is allowed */
.optimal-line {
  stroke: var(--cyan);
  stroke-width: 6.5;
  stroke-linecap: round;
  filter: url(#glow-cyan);
}
.revealing .route-line { stroke-opacity: 0.85; }

/* ---- status + readout ------------------------------------------------------ */

.status {
  min-height: 2.6em;
  margin-top: 12px;
  font-size: 14px;
  color: var(--ink-dim);
  text-align: center;
  max-width: 32em;
  transition: color 200ms ease;
}
.status.mono { font-family: var(--mono); letter-spacing: 0.1em; color: var(--amber-hi); }
.status.reveal { color: var(--cyan); }
.status.perfect {
  font-family: var(--display);
  font-stretch: 125%;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--amber-hi);
}

.readout { text-align: center; margin-top: 2px; }

.score {
  font-family: var(--mono);
  font-size: clamp(44px, 13vw, 64px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--amber);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 22px color-mix(in srgb, var(--amber) 30%, transparent);
}
.score.empty { color: var(--ink-faint); text-shadow: none; }
.score.perfect { animation: perfect-pulse 1.6s ease-in-out infinite; }
@keyframes perfect-pulse {
  0%, 100% { text-shadow: 0 0 22px color-mix(in srgb, var(--amber) 30%, transparent); }
  50% { text-shadow: 0 0 44px color-mix(in srgb, var(--amber-hi) 75%, transparent); }
}

.score-label {
  font-family: var(--display);
  font-stretch: 125%;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 2px;
}

.pips {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 12px;
}
.pip {
  font-family: var(--mono);
  font-size: 12px;
  min-width: 58px;
  padding: 4px 8px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  color: var(--ink-faint);
}
.pip.used { color: var(--ink-dim); border-color: #333d36; }
.pip.best { color: var(--amber-hi); border-color: color-mix(in srgb, var(--amber) 50%, transparent); }

.standing {
  margin-top: 12px;
  font-size: 13px;
  color: var(--ink-dim);
}
.standing span { color: var(--ink); }
.standing a {
  color: var(--ink-faint);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: 8px;
}
.standing a:hover, .standing a:focus-visible { color: var(--cyan); }

/* ---- actions ---------------------------------------------------------------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 16px;
  width: 100%;
}

.btn {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--asphalt-3);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 12px 18px;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 80ms ease;
  touch-action: manipulation;
}
.btn:hover { border-color: #3a463e; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.btn.primary {
  background: var(--amber);
  border-color: var(--amber);
  color: #171204;
}
.btn.primary:hover { background: var(--amber-hi); border-color: var(--amber-hi); }

.btn.quiet {
  background: none;
  border-color: transparent;
  color: var(--ink-faint);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.btn.quiet small {
  font-family: var(--body);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink-faint);
}
.btn.quiet:hover { color: var(--ink-dim); text-decoration: underline; text-underline-offset: 3px; }

/* ---- footer ------------------------------------------------------------------ */

.colophon {
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  color: var(--ink-faint);
}
.colophon span:first-child {
  font-family: var(--mono);
  letter-spacing: 0.14em;
  color: var(--ink-dim);
}

/* ---- dialogs ------------------------------------------------------------------ */

.sheet {
  background: var(--asphalt-3);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 24px 22px;
  max-width: min(420px, calc(100vw - 40px));
  margin: auto;
}
.sheet::backdrop { background: rgba(6, 9, 8, 0.72); }
.sheet h2 {
  font-family: var(--display);
  font-stretch: 125%;
  font-size: 17px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.sheet p { font-size: 14px; color: var(--ink-dim); margin-bottom: 12px; }
.sheet-actions, .sheet form { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }

/* ---- toast --------------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  transform: translate(-50%, 16px);
  background: var(--asphalt-3);
  border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent);
  color: var(--ink);
  font-size: 13px;
  padding: 10px 16px;
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  white-space: pre-line;
  max-width: calc(100vw - 40px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.noscript {
  margin-top: 30px;
  color: var(--danger);
  text-align: center;
}

/* ---- reduced motion --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---- wider screens ----------------------------------------------------------------- */

@media (min-width: 720px) {
  .tagline { font-size: 14px; }
  .board-wrap { width: min(520px, 62svh); }
}