/* 404: "Hold the lane", a 40-second mini tower defense (agent B, v3 AAA).
   Scene: js/scenes/td404.js (engine board, the game's own towers and monsters).
   Layout: the page head and the tower picker in a side column, the board beside them;
   one column below 1100px (head, title, board, picker). No JS / no WebGL2: the game hides. */

.is-404 .page { min-height: 0; padding-bottom: clamp(4rem, 8vw, 6rem); }
.nf {
  position: relative;
  display: grid;
  grid-template-columns: minmax(18rem, 23rem) minmax(0, 1fr);
  grid-template-areas: "head stage" "tdh stage" ". stage";
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(2rem, 4vw, 3.5rem);
  max-width: 1500px; margin: 0 auto;
  padding: calc(var(--head-h) + clamp(1.5rem, 4vw, 3rem)) var(--gutter) 0;
}
.nf-head { grid-area: head; max-width: none; margin: 0; padding: 0; }
.nf-head .page-ghost {
  left: calc(-1 * var(--gutter) * 0.5); right: auto; top: -0.25em;
  font-size: clamp(8rem, 26vw, 26rem);
  -webkit-text-stroke-color: rgba(var(--monster-rgb), 0.12);
}
.nf-head h1 { font-size: clamp(3rem, 5.4vw, 4.8rem); line-height: 0.9; }
.nf-head .page-lede { margin-top: 1.2rem; font-size: 1.08rem; }
.nf-head .notfound-links { margin-top: 1.8rem; gap: 1rem 1.6rem; }

.td { display: contents; }
.no-js .td, .td.is-off { display: none; }
.no-js .nf, .nf:has(> .td.is-off) { grid-template-columns: minmax(0, 1fr); }
.td-head { grid-area: tdh; margin-top: clamp(2.2rem, 4vw, 3.2rem); padding-top: 1.6rem; border-top: 1px solid var(--hair); }
.td-head .kicker { margin-bottom: 0.9rem; }
.td-head .kicker-idx { color: var(--magenta); }
.td-head h2 { font-size: clamp(2rem, 3.2vw, 2.8rem); }
.td-lede { margin-top: 0.8rem; color: var(--ink-2); font-size: 1rem; line-height: 1.55; }

/* ---- the board */
.td-stage { grid-area: stage; align-self: start; position: relative; }
.td-frame {
  position: relative; aspect-ratio: 20 / 11; overflow: hidden;
  border: 1px solid var(--hair-2);
  background:
    linear-gradient(rgba(var(--star-rgb), 0.05) 1px, transparent 1px) 0 0 / 5% 9.09%,
    linear-gradient(90deg, rgba(var(--star-rgb), 0.05) 1px, transparent 1px) 0 0 / 5% 9.09%,
    radial-gradient(ellipse 70% 70% at 50% 50%, rgba(var(--nebula-violet-rgb), 0.5), transparent 80%),
    var(--void-2);
  outline-offset: 4px;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
.td-frame:focus-visible { outline: 2px solid var(--amber); }
.td-frame::after {                                /* HUD corner ticks */
  content: ""; position: absolute; inset: -1px; pointer-events: none; z-index: 6; --tk: 14px;
  background:
    linear-gradient(var(--tick), var(--tick)) left top / var(--tk) 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) left top / 1px var(--tk) no-repeat,
    linear-gradient(var(--tick), var(--tick)) right top / var(--tk) 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) right top / 1px var(--tk) no-repeat,
    linear-gradient(var(--tick), var(--tick)) left bottom / var(--tk) 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) left bottom / 1px var(--tk) no-repeat,
    linear-gradient(var(--tick), var(--tick)) right bottom / var(--tk) 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) right bottom / 1px var(--tk) no-repeat;
}
.td-scene { position: absolute; inset: 0; background: transparent; cursor: crosshair; }
.td-scene > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* HUD strip over the top of the board */
.td-hud {
  position: absolute; z-index: 3; left: 0; right: 0; top: 0;
  display: flex; align-items: flex-start; gap: clamp(1rem, 2.4vw, 2.2rem);
  padding: 0.85rem 1rem 1.6rem;
  background: linear-gradient(180deg, rgba(var(--void-rgb), 0.78), transparent);
  pointer-events: none;
}
.td-stat { display: grid; gap: 0.1rem; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(var(--star-rgb), 0.6); }
.td-stat strong { font-family: var(--font-display); font-size: clamp(1.15rem, 1.8vw, 1.6rem); line-height: 1; letter-spacing: 0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.td-stat--time strong { color: var(--amber); min-width: 3.2ch; }
.td-stat--time.is-low strong { color: var(--magenta); }
.td-stat--leak strong { color: var(--magenta); }
.td-stat--towers { margin-left: auto; text-align: right; }
.td-stat.is-bump strong { animation: td-bump 360ms var(--ease-out); }
@keyframes td-bump { 30% { transform: scale(1.25); } }

/* the first-tower prompt */
.td-prompt {
  position: absolute; z-index: 3; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.7rem; white-space: nowrap;
  padding: 0.6rem 1rem;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink); background: rgba(var(--void-rgb), 0.72); border: 1px solid rgba(var(--machine-rgb), 0.5);
  pointer-events: none; transition: opacity 400ms var(--ease-out);
}
.td-prompt-dot { width: 7px; height: 7px; background: var(--amber); box-shadow: 0 0 10px rgba(var(--machine-rgb), 0.9); animation: td-blink 1.1s steps(1) infinite; }
@keyframes td-blink { 50% { opacity: 0.2; } }
.td-frame.is-playing .td-prompt, .td-frame.is-over .td-prompt { opacity: 0; }

/* the end screen */
.td-end {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center; padding: 1.2rem;
  background: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(var(--void-rgb), 0.82), rgba(var(--void-rgb), 0.93));
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: td-in 700ms var(--ease-out) both;
}
.td-end[hidden] { display: none; }
@keyframes td-in { from { opacity: 0; } }
.td-end-inner { max-width: 34rem; text-align: center; }
.td-end-kicker { display: inline-flex; align-items: center; color: rgba(var(--star-rgb), 0.8); }
.td-end-title {
  margin-top: 0.8rem;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; line-height: 0.92;
  font-size: clamp(2rem, 5vw, 4rem); color: var(--ink); text-wrap: balance;
}
.td-result { margin-top: 1rem; font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--star-rgb), 0.85); }
.td-result span[data-td] { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0; color: var(--ink); vertical-align: -0.1em; }
.td-r { white-space: nowrap; }
.td-result .sep { color: rgba(var(--star-rgb), 0.35); margin: 0 0.4em; }
.td-end-note { margin: 0.9rem auto 0; max-width: 28rem; color: var(--ink-2); font-size: 0.98rem; }
.td-end-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem 1rem; margin-top: 1.6rem; }
.td-again {
  min-height: 3.25rem; padding: 0.9rem 1.5rem; border: 1px solid var(--hair-2);
  font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); transition: border-color var(--t-micro) ease, color var(--t-micro) ease;
}
.td-again:hover { border-color: var(--star); color: var(--star); }
.td-end-home { margin-top: 1.2rem; }

/* ---- the tower picker */
.td-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin-top: 0.8rem; }
.td-pick {
  --el: var(--star);
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "key name type" "key stats stats" "key fx fx";
  column-gap: 0.9rem; row-gap: 0.15rem; align-items: baseline;
  padding: 0.85rem 1rem; text-align: left;
  border: 1px solid var(--hair);
  background: rgba(var(--void-rgb), 0.45);
  transition: border-color var(--t-micro) ease, background-color var(--t-micro) ease;
}
.td-pick[data-tower="archer_tower"] { --el: var(--td-pierce); }
.td-pick[data-tower="lightning_tower"] { --el: var(--td-arc); }
.td-pick[data-tower="fire_tower"] { --el: var(--td-fire); }
.td-pick::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 2px; background: var(--el); opacity: 0; transition: opacity var(--t-micro) ease; box-shadow: 0 0 10px var(--el); }
.td-pick:hover { border-color: var(--hair-2); }
.td-pick[aria-checked="true"] { border-color: color-mix(in srgb, var(--el) 60%, transparent); background: color-mix(in srgb, var(--el) 7%, rgba(5, 6, 10, 0.5)); }
.td-pick[aria-checked="true"]::before { opacity: 1; }
.td-pick-key { grid-area: key; align-self: center; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border: 1px solid var(--hair-2);
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; color: rgba(var(--star-rgb), 0.8); }
.td-pick[aria-checked="true"] .td-pick-key { border-color: var(--el); color: var(--el); }
.td-pick-name { grid-area: name; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.td-pick-type { grid-area: type; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--el); }
.td-pick-stats { grid-area: stats; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(var(--star-rgb), 0.7); }
.td-pick-stats .sep { color: rgba(var(--star-rgb), 0.3); margin: 0 0.3em; }
.td-pick-fx { grid-area: fx; font-size: 0.9rem; color: var(--ink-2); }

:root { --td-pierce: #4df2ff; --td-arc: #ffd94d; --td-fire: #ff802e; }

/* ---- one column */
@media (max-width: 1099px) {
  .nf { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "tdh" "stage"; grid-template-rows: none; }
  .nf-head .page-ghost { right: 0; left: auto; }
  .td-stage { margin-top: 1.6rem; }
  .td-pick { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "key name" "key type" "stats stats" "fx fx"; }
}
@media (max-width: 699px) {
  .td-frame { aspect-ratio: 11 / 17; }
  .td-hud { gap: 0.9rem; padding: 0.7rem 0.75rem 1.4rem; }
  .td-stat { font-size: 0.54rem; letter-spacing: 0.1em; }
  .td-stat strong { font-size: 1.1rem; }
  .td-pick { padding: 0.65rem 0.6rem; grid-template-areas: "key name" "type type"; column-gap: 0.5rem; }
  .td-pick-name { font-size: 0.82rem; letter-spacing: 0.02em; line-height: 1.15; }
  .td-pick-stats, .td-pick-fx { display: none; }
  .td-pick-key { width: 1.4rem; height: 1.4rem; font-size: 0.6rem; }
  .td-prompt { font-size: 0.6rem; letter-spacing: 0.1em; bottom: 0.8rem; }
  .td-end-title { font-size: 2rem; }
  .td-end-note { display: none; }
}
@media (max-width: 380px) {
  .td-stat--towers span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .td-prompt-dot { animation: none; }
}