/* Today's Line — arcade edition.
   Fonts: TeX Gyre Heros Cn Bold Italic (GUST Font License) and Poppins (SIL OFL 1.1),
   self-hosted in /static/fonts with their licenses. */

@font-face { font-family: "TL Display"; src: url("/static/fonts/texgyreheroscn-bolditalic.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/static/fonts/Poppins-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/static/fonts/Poppins-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/static/fonts/Poppins-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --bg: #0a0e27; --bg-2: #0e1336; --surface: #121943; --surface-2: #1a2358; --map: #070a1f;
  --ink: #f5f7ff; --muted: #a3acd6; --line: #2b357a;
  --hot: #ff2e93; --cyan: #1fe4ff; --volt: #d4ff2a; --orange: #ff8a1f;
  --green: #2fe07a; --blue: #3d8bff; --blackline: #eef1ff; --black: #05060d;
  --display: "TL Display", "Arial Narrow", Impact, system-ui, sans-serif;
  --body: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cut: 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); font: 400 15.5px/1.55 var(--body);
  background:
    radial-gradient(900px 520px at 0% -8%, rgba(160, 60, 255, .28), transparent 62%),
    radial-gradient(800px 480px at 105% 4%, rgba(31, 228, 255, .16), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  background-color: var(--bg);
  min-height: 100vh; position: relative; overflow-x: hidden;
}
/* Speed lines */
body::before {
  content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(-18deg, transparent 0 46px, rgba(255, 255, 255, .028) 46px 48px, transparent 48px 120px, rgba(31, 228, 255, .035) 120px 121px);
  animation: speed 18s linear infinite;
}
@keyframes speed { to { transform: translate3d(-240px, 80px, 0); } }

a { color: inherit; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; line-height: .95; margin: 0 0 .35em; }
h1 { font-size: clamp(2.3rem, 7.5vw, 4rem); }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.3rem; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }
.hl {
  background: linear-gradient(95deg, var(--volt) 0%, var(--cyan) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(3px 3px 0 var(--hot));
  padding-right: .08em;
}
.wrap { max-width: 800px; margin: 0 auto; padding: 0 16px; }
.wrap.wide { max-width: 1080px; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inline { display: inline; }
.eyebrow { display: block; margin: 0 0 8px; font: 700 .72rem/1.2 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); }
.eyebrow a { text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }
.textlink { color: var(--cyan); font-weight: 700; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 10; background: rgba(8, 11, 32, .86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--hot), var(--cyan) 50%, var(--volt)); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; }
.brand { text-decoration: none; }
.logo { display: inline-flex; align-items: flex-end; gap: 6px; transform: skewX(-10deg); line-height: .8; }
.logo-icon { display: block; width: 30px; height: 30px; margin-right: 2px; transform: skewX(10deg); image-rendering: pixelated; } /* undo the wordmark's slant so the pixels stay square */
.logo-a { font: 700 .72rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); margin-bottom: 3px; }
.logo-b { font: 700 1.9rem/.8 var(--display); text-transform: uppercase; color: var(--volt); text-shadow: 2px 2px 0 var(--hot); }
nav { display: flex; gap: 16px; align-items: center; font-weight: 500; font-size: .92rem; }
nav a { text-decoration: none; }
nav a:hover { color: var(--volt); }
main.wrap { padding-top: 28px; padding-bottom: 48px; }
footer.wrap { padding-bottom: 40px; color: var(--muted); font-size: .78rem; }

/* ---------- buttons ---------- */
.btn, button:not(.link) {
  appearance: none; border: 0; cursor: pointer; text-decoration: none; display: inline-block;
  font: 700 1.1rem/1 var(--display); text-transform: uppercase; letter-spacing: .04em;
  color: var(--bg); background: var(--volt); padding: 13px 24px;
  transform: skewX(-12deg); box-shadow: 5px 5px 0 var(--hot);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn > span, button:not(.link) > span { display: inline-block; transform: skewX(12deg); }
.btn:hover, button:not(.link):hover { transform: skewX(-12deg) translate(-2px, -2px); box-shadow: 7px 7px 0 var(--hot); }
.btn:active, button:not(.link):active { transform: skewX(-12deg) translate(3px, 3px); box-shadow: 1px 1px 0 var(--hot); }
.btn.ghost { background: transparent; color: var(--cyan); box-shadow: inset 0 0 0 2px var(--cyan), 5px 5px 0 rgba(31, 228, 255, .25); }
button.link { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 22px; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

/* ---------- hero & select screen ---------- */
.hero { margin: 6px 0 22px; }
.hero h1 span { display: inline; }
.hero.small { margin-bottom: 14px; }
.lede { font-size: 1.05rem; color: var(--muted); max-width: 58ch; margin: 10px 0 0; }
.select { margin: 0 0 18px; }
.mtns { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); }
.mtn {
  position: relative; display: grid; gap: 2px; padding: 12px 14px 12px; text-decoration: none; min-height: 96px;
  background: linear-gradient(155deg, var(--surface-2), var(--surface)); border: 2px solid var(--line);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  transition: border-color .12s, transform .12s;
}
.mtn:hover, .mtn:focus-visible { border-color: var(--cyan); transform: translateY(-3px); }
.mtn-no { font: 700 1.9rem/1 var(--display); color: transparent; -webkit-text-stroke: 1.2px var(--cyan); }
.mtn-name { font: 700 1.25rem/1 var(--display); text-transform: uppercase; }
.mtn-live { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mtn-live.on { color: var(--volt); }
.mtn-live.on::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--volt); margin-right: 6px; box-shadow: 0 0 8px var(--volt); animation: blink 1.4s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

/* ---------- level chips & badges ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 6px 4px 14px; margin: 0 -4px 6px; }
.chip { flex: none; text-decoration: none; padding: 7px 14px; font: 700 .95rem/1 var(--display); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border: 2px solid var(--line); transform: skewX(-12deg); }
.chip > span { display: inline-block; transform: skewX(12deg); }
.chip b { font-weight: 400; }
.chip.green b { color: var(--green); } .chip.blue b { color: var(--blue); } .chip.black b, .chip.dbl b { color: var(--blackline); }
.chip:hover { border-color: var(--cyan); color: var(--ink); }
.chip.on { background: var(--volt); color: var(--bg); border-color: var(--volt); box-shadow: 4px 4px 0 var(--hot); }
.chip.on b { color: var(--bg); }
.lvl { display: inline-flex; align-items: center; gap: 6px; font: 700 .95rem/1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.lvl .mark { font-size: .85em; letter-spacing: -2px; }
.lvl.green .mark { color: var(--green); } .lvl.blue .mark { color: var(--blue); } .lvl.black .mark, .lvl.dbl .mark { color: var(--blackline); }
.meter { display: inline-flex; gap: 2px; margin-left: 4px; }
.meter i { width: 6px; height: 11px; background: var(--line); transform: skewX(-14deg); }
.lvl.green .meter i.on { background: var(--green); } .lvl.blue .meter i.on { background: var(--blue); }
.lvl.black .meter i.on { background: var(--blackline); } .lvl.dbl .meter i.on { background: var(--hot); }

/* ---------- plan cards ---------- */
.group { margin: 18px 0 30px; }
.group h2 a { text-decoration: none; }
.group h2 a:hover { color: var(--volt); }
.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.card {
  position: relative; display: block; text-decoration: none; padding: 16px 16px 20px 20px;
  background: linear-gradient(160deg, var(--surface-2), var(--surface)); border: 2px solid var(--line);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  transition: transform .12s ease, border-color .12s ease;
}
.card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--blue); }
.card.lvl-green::before { background: var(--green); } .card.lvl-black::before { background: var(--blackline); } .card.lvl-dbl::before { background: var(--hot); }
.card:hover, .card:focus-visible { transform: translateY(-3px); border-color: var(--cyan); }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.stars { color: var(--volt); }
.sess { white-space: nowrap; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.card h3 { margin-bottom: 6px; }
.card p { margin: 0; }
.melt { color: var(--volt); font-weight: 700; font-size: .85rem; margin-top: 10px !important; }
.melt.gone { color: var(--muted); text-decoration: line-through; }
.timebar { display: block; height: 5px; margin-top: 10px; background: rgba(255, 255, 255, .08); transform: skewX(-20deg); overflow: hidden; }
.timebar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--cyan), var(--volt)); transition: width .6s ease; }
.timebar i.low { background: var(--hot); animation: pulse 1s ease-in-out infinite alternate; }
@keyframes pulse { from { opacity: 1; } to { opacity: .45; } }

/* ---------- plan page ---------- */
.plan h1 { margin-bottom: 12px; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.meta .lvl { color: var(--ink); font-size: 1.05rem; }
.hud {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 4px 0 18px;
  border: 2px solid var(--cyan); background: rgba(31, 228, 255, .06);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.hud-cell { padding: 10px 14px 12px; border-right: 1px solid rgba(31, 228, 255, .3); }
.hud-cell:nth-child(4) { border-right: 0; }
.hud-k { display: block; font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
.hud-v { display: block; font: 700 1.7rem/1.05 var(--display); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.hud .timeleft .hud-v { color: var(--volt); text-shadow: 0 0 14px rgba(212, 255, 42, .45); }
.hud.gone .timeleft .hud-v { color: var(--hot); }
.hud .timebar { grid-column: 1 / -1; margin: 0; height: 6px; transform: none; }
@media (max-width: 560px) {
  .hud { grid-template-columns: 1fr 1fr; }
  .hud-cell:nth-child(2) { border-right: 0; }
  .hud-cell:nth-child(-n+2) { border-bottom: 1px solid rgba(31, 228, 255, .3); }
}
.conditions { position: relative; padding: 12px 16px; margin: 16px 0; background: rgba(212, 255, 42, .06); border-left: 4px solid var(--volt); }
.conditions .eyebrow { color: var(--volt); margin-bottom: 4px; }
.conditions p { margin: 0; }
.summary { font-size: 1.02rem; }

/* ---------- course map (OpenStreetMap) ---------- */
.terrain, .route { margin: 18px 0 8px; }
.terrain-frame, .route-scroll {
  position: relative; background: var(--map); border: 2px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.terrain-frame::before, .route-scroll::before {
  content: "Course map"; position: absolute; left: 12px; top: 10px; z-index: 1;
  font: 700 .95rem/1 var(--display); text-transform: uppercase; letter-spacing: .06em; color: var(--volt);
}
.route-scroll::before { content: "Run profile"; }
.terrain svg { display: block; width: 100%; height: auto; }
/* Zoomable course map. The SVG's viewBox is the camera: it opens on the whole mountain and
   zooms down to the route and beyond. --s (set by static/app.js) is how many map units one
   "route view" unit is right now, so lines keep the same on-screen width at any zoom. */
.terrain-frame { overflow: hidden; }
.terrain-frame[data-zoomable] svg { --s: 1; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; aspect-ratio: 720 / 460; }
.terrain-frame.zoomed svg { touch-action: none; }
.terrain-frame.dragging svg { cursor: grabbing; }
.terrain-frame[data-zoomable] .tm-run { stroke-width: calc(1.2px * var(--s)); }
.terrain-frame[data-zoomable] .tm-run.area { stroke-width: calc(.6px * var(--s)); }
.terrain-frame[data-zoomable] .tm-lift { stroke-width: calc(1px * var(--s)); stroke-dasharray: calc(2px * var(--s)) calc(4px * var(--s)); }
.terrain-frame[data-zoomable] .tm-hike { stroke-width: calc(1.4px * var(--s)); stroke-dasharray: calc(1px * var(--s)) calc(4px * var(--s)); }
.terrain-frame[data-zoomable] .tm-route-glow { stroke-width: calc(12px * var(--s)); }
.terrain-frame[data-zoomable] .tm-route-run { stroke-width: calc(4.5px * var(--s)); }
.terrain-frame[data-zoomable] .tm-route-lift { stroke-width: calc(3px * var(--s)); stroke-dasharray: calc(7px * var(--s)) calc(5px * var(--s)); }
.terrain-frame[data-zoomable] .tm-route-hike { stroke-width: calc(3.5px * var(--s)); stroke-dasharray: calc(1px * var(--s)) calc(7px * var(--s)); }
.terrain-frame[data-zoomable] .tm-rider { stroke-width: calc(2.5px * var(--s)); }
.terrain-frame .tm-compass, .terrain-frame .tm-attrib { position: absolute; bottom: 8px; z-index: 1; pointer-events: none; }
.terrain-frame span.tm-compass { left: 14px; font: 700 .62rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: #0a86a8; }
.terrain-frame span.tm-attrib { right: 10px; font: 400 .62rem/1 var(--body); color: #7d879b; background: rgba(247, 249, 252, .8); padding: 2px 4px; }
.tm-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; margin-top: 8px; }
.tm-tools .tm-speed { margin-top: 0; }
.tm-zoom-ctl { display: flex; gap: 6px; margin-left: auto; }
.tm-zoom-ctl button {
  min-width: 32px; height: 32px; padding: 0 8px !important; display: grid; place-items: center;
  font: 700 1.2rem/1 var(--body) !important; color: var(--ink) !important; background: transparent !important;
  border: 2px solid var(--line) !important; box-shadow: none !important; transform: none !important; cursor: pointer;
}
.tm-zoom-ctl button.wide { font: 700 .72rem/1 var(--display) !important; letter-spacing: .06em; text-transform: uppercase; }
.tm-zoom-ctl button:hover:not(:disabled) { border-color: var(--cyan) !important; color: var(--cyan) !important; }
.tm-zoom-ctl button:disabled { opacity: .35; cursor: default; }
.tm-run { fill: none; stroke-width: 1.2; opacity: .5; stroke-linecap: round; stroke-linejoin: round; }
.tm-run.green { stroke: var(--green); } .tm-run.blue { stroke: var(--blue); } .tm-run.black, .tm-run.dbl { stroke: var(--blackline); opacity: .35; } .tm-run.unknown { stroke: var(--muted); opacity: .3; }
.tm-run.area { fill: rgba(255, 255, 255, .04); stroke-width: .6; }
.tm-lift { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 4; opacity: .55; }
.tm-route-glow { fill: none; stroke: var(--cyan); stroke-width: 11; opacity: .22; stroke-linecap: round; stroke-linejoin: round; }
.tm-route-run { fill: none; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.tm-route-run.green { stroke: var(--green); } .tm-route-run.blue { stroke: var(--blue); } .tm-route-run.black, .tm-route-run.dbl { stroke: var(--blackline); }
.tm-route-lift { fill: none; stroke: var(--hot); stroke-width: 3; stroke-dasharray: 7 5; stroke-linecap: round; }
.tm-badge rect { stroke: var(--map); stroke-width: 2.5; }
.tm-badge.green rect { fill: var(--green); } .tm-badge.blue rect { fill: var(--blue); } .tm-badge.black rect, .tm-badge.dbl rect { fill: var(--black); stroke: var(--blackline); stroke-width: 2; }
.tm-badge text { fill: #fff; font: 700 13px var(--display); }
.tm-badge.green text { fill: var(--black); }
.tm-lift-label { fill: var(--hot); font: 700 12.5px var(--display); text-transform: uppercase; letter-spacing: .03em; paint-order: stroke; stroke: var(--map); stroke-width: 4px; stroke-linejoin: round; }
.tm-attrib { fill: var(--muted); font: 400 9.5px var(--body); opacity: .8; }
.tm-compass { fill: var(--cyan); font: 700 10px var(--display); letter-spacing: .12em; }
.tm-rider { fill: var(--volt); stroke: var(--map); stroke-width: 2; opacity: 0; filter: drop-shadow(0 0 6px var(--volt)); transition: opacity .2s; }
.tm-rider.on { opacity: 1; }
.tm-rider.lift { fill: var(--hot); filter: drop-shadow(0 0 6px var(--hot)); }
.tm-marks .waiting { opacity: 0; }
.tm-marks .shown { opacity: 1; transition: opacity .25s ease; }
.tm-badge.shown rect { animation: pop .35s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes pop { 0% { transform: scale(.2); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
.tm-replay {
  position: absolute; right: 26px; top: 8px; z-index: 2; font-size: .85rem !important; padding: 7px 14px !important;
  box-shadow: 3px 3px 0 var(--hot) !important;
}
.tm-replay[hidden] { display: none; }

/* ---------- run profile (fallback diagram) ---------- */
.route-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-top: 18px; }
.route svg { display: block; width: 100%; min-width: 560px; height: auto; font-family: var(--body); }
.rd-guide { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.rd-axis { fill: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rd-axis.strong { fill: var(--volt); }
.rd-lift { stroke: var(--hot); stroke-width: 2.5; stroke-dasharray: 5 5; stroke-linecap: round; }
.rd-lift-label { fill: var(--hot); font: 700 11px var(--display); text-transform: uppercase; }
.rd-run { stroke-width: 5; stroke-linecap: round; }
.rd-run.green { stroke: var(--green); } .rd-run.blue { stroke: var(--blue); } .rd-run.black, .rd-run.dbl { stroke: var(--blackline); }
.rd-run-inner { stroke: var(--map); stroke-width: 1.5; }
.rd-run-label { fill: var(--ink); font: 700 12px var(--display); text-transform: uppercase; paint-order: stroke; stroke: var(--map); stroke-width: 3.5px; stroke-linejoin: round; }
.rd-badge circle { stroke: var(--map); stroke-width: 2; }
.rd-badge.green circle { fill: var(--green); } .rd-badge.blue circle { fill: var(--blue); } .rd-badge.black circle, .rd-badge.dbl circle { fill: var(--black); stroke: var(--blackline); }
.rd-badge text { fill: #fff; font: 700 11px var(--display); }
.rd-node { fill: var(--map); stroke: var(--volt); stroke-width: 2; }
.rd-node.end { fill: var(--volt); }
.rd-break circle { fill: var(--map); stroke: var(--orange); stroke-width: 1.5; }
.rd-break text { font-size: 9px; }
.rd-break-label { fill: var(--orange); font: 700 11px var(--display); text-transform: uppercase; paint-order: stroke; stroke: var(--map); stroke-width: 3px; }
.route figcaption { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .78rem; color: var(--muted); margin-top: 8px; align-items: center; }
.route figcaption > span { display: inline-flex; align-items: center; gap: 6px; }
.rd-key { display: inline-block; width: 18px; height: 0; border-top: 4px solid currentColor; }
.rd-key.lift { border-top: 2px dashed var(--hot); }
.rd-key.run.green { color: var(--green); } .rd-key.run.blue { color: var(--blue); } .rd-key.run.black, .rd-key.run.dbl { color: var(--blackline); }

/* ---------- run list ---------- */
.stops { list-style: none; padding: 0; margin: 18px 0; }
.stops li { display: flex; gap: 14px; align-items: flex-start; padding: 8px 0; }
.stops .num {
  flex: 0 0 38px; height: 34px; display: grid; place-items: center; transform: skewX(-12deg);
  font: 700 1.3rem/1 var(--display); background: var(--blue); color: #fff;
}
.stops li.green .num { background: var(--green); color: var(--black); }
.stops li.black .num, .stops li.dbl .num { background: var(--black); color: var(--blackline); box-shadow: inset 0 0 0 2px var(--blackline); }
.stops li.dbl .num { box-shadow: inset 0 0 0 2px var(--blackline), 3px 3px 0 var(--hot); }
.stops li.run > div { padding-top: 2px; }
.stops strong { font: 700 1.35rem/1.05 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.stops p { margin: 3px 0 0; color: var(--muted); }
.rate { font-size: .85rem; margin-left: 4px; }
.rate.green { color: var(--green); } .rate.blue { color: var(--blue); } .rate.black, .rate.dbl { color: var(--blackline); }
.stops li.lift, .stops li.break { padding: 3px 0; font-size: .88rem; color: var(--muted); }
.stops li.lift .num, .stops li.break .num { height: 24px; font-size: .95rem; background: transparent; color: var(--hot); box-shadow: inset 0 0 0 1.5px var(--hot); }
.stops li.break .num { color: var(--orange); box-shadow: inset 0 0 0 1.5px var(--orange); }
.stops li.lift > div, .stops li.break > div { padding-top: 2px; }
.stops .tag { font: 700 .95rem/1 var(--display); text-transform: uppercase; letter-spacing: .05em; color: var(--hot); }
.stops li.break .tag { color: var(--orange); }
.byline { color: var(--muted); margin: 14px 0 4px; }
.byline strong { color: var(--ink); }
.maplink { margin: 4px 0 16px; }
.sponsor {
  margin: 22px 0; padding: 14px 18px; border: 2px dashed var(--volt); background: rgba(212, 255, 42, .05);
}
.sponsor .eyebrow { color: var(--volt); margin-bottom: 2px; }
.sponsor a { font: 700 1.5rem/1.1 var(--display); text-transform: uppercase; color: var(--ink); }
.sponsor p { margin: 4px 0 0; color: var(--muted); }

/* ---------- empty, game over, get ready ---------- */
.empty { text-align: center; padding: 30px 0 18px; }
.empty .big { font: 700 1.6rem/1.1 var(--display); text-transform: uppercase; margin: 0 0 4px; }
.gameover {
  margin: 0 0 6px; font: 700 clamp(3.2rem, 15vw, 7rem)/.9 var(--display); text-transform: uppercase;
  background: linear-gradient(180deg, var(--hot), var(--orange)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(4px 4px 0 rgba(31, 228, 255, .6));
  animation: flicker 2.4s steps(1) infinite;
}
.gameover.ready { background: linear-gradient(180deg, var(--cyan), var(--volt)); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(4px 4px 0 var(--hot)); }
@keyframes flicker { 0%, 92%, 100% { opacity: 1; } 94% { opacity: .35; } 96% { opacity: 1; } 98% { opacity: .6; } }
.melted h1, .ready h1 { font-size: clamp(1.6rem, 5vw, 2.4rem); }
.continue { margin-top: 28px; color: var(--volt); }
.melted .cards { text-align: left; margin-top: 12px; }

/* ---------- forms & panels ---------- */
input, select, textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--bg); border: 2px solid var(--line);
  padding: 10px 12px; margin-top: 5px; border-radius: 0;
}
input::placeholder, textarea::placeholder { color: #6f79a8; }
input[type=checkbox] { width: auto; margin: 0; accent-color: var(--volt); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(31, 228, 255, .25); }
textarea { resize: vertical; }
label { display: block; font-weight: 700; font-size: .85rem; letter-spacing: .04em; }
label .muted { font-weight: 400; display: block; letter-spacing: 0; }
.stack > * + * { margin-top: 16px; }
.grid2, .grid3 { display: grid; gap: 14px; }
@media (min-width: 560px) { .grid2 { grid-template-columns: 1fr 1fr; } .grid3 { grid-template-columns: 1fr 1fr 1fr; } }
.row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.row input { flex: 1 1 240px; margin-top: 0; }
.panel {
  background: linear-gradient(160deg, var(--surface-2), var(--surface)); border: 2px solid var(--line); padding: 22px; margin: 26px 0;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.panel.narrow { max-width: 460px; margin: 10px auto; }
.subscribe form { display: grid; gap: 14px; }
.subscribe .eyebrow { color: var(--hot); }
.checks { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.checks label { display: flex; align-items: center; gap: 7px; font-weight: 500; letter-spacing: 0; font-size: .92rem; }
.subscribe button { justify-self: start; }
.flash { background: rgba(212, 255, 42, .1); border-left: 4px solid var(--volt); padding: 10px 14px; }
.flash a { font-weight: 700; color: var(--volt); }
.errors { background: rgba(255, 46, 147, .12); border-left: 4px solid var(--hot); padding: 10px 14px 10px 32px; }
.danger { margin-top: 28px; color: var(--hot); }
.headrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---------- tables, admin ---------- */
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; margin-top: 12px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--cyan); font-weight: 700; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.off { opacity: .5; }
.pill { font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; padding: 3px 8px; background: var(--surface-2); color: var(--muted); }
.pill.live { background: var(--volt); color: var(--bg); }
.pill.scheduled { background: var(--cyan); color: var(--bg); }
code.copy { cursor: pointer; background: var(--bg); border: 1px solid var(--line); padding: 2px 6px; word-break: break-all; color: var(--cyan); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.stats div { background: var(--surface); border: 2px solid var(--line); padding: 14px 16px; }
.stats .n { display: block; font: 700 2.4rem/1 var(--display); color: var(--volt); font-variant-numeric: tabular-nums; }
.stats span:not(.n) { color: var(--muted); font-size: .85rem; }

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

/* ---------- route builder (plan editor) ---------- */
.builder[hidden] { display: none; }
.builder { margin: 22px 0 8px; }
.builder-head h2 { margin-bottom: 4px; }
.builder-head p { margin: 0 0 12px; max-width: 70ch; }
.builder-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 820px) { .builder-grid { grid-template-columns: 1fr; } }
.builder-map { position: relative; background: var(--map); border: 2px solid var(--line); }
.bm-svg { display: block; width: 100%; height: min(68vh, 620px); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.bm-svg:active { cursor: grabbing; }
.bm-svg.loading { opacity: .3; }
.bm-bg path { fill: rgba(255, 255, 255, .03); stroke: var(--muted); stroke-width: .6; opacity: .35; }
.bm-f { cursor: pointer; }
.bm-line { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: .75; }
.bm-hit { fill: none; stroke: transparent; stroke-width: 18; vector-effect: non-scaling-stroke; }
.bm-run.green .bm-line { stroke: var(--green); } .bm-run.blue .bm-line { stroke: var(--blue); }
.bm-run.black .bm-line, .bm-run.double .bm-line { stroke: var(--blackline); } .bm-run.unknown .bm-line { stroke: var(--muted); }
.bm-lift .bm-line { stroke: var(--hot); stroke-dasharray: 4 4; opacity: .8; }
.bm-f:hover .bm-line { stroke-width: 4; opacity: 1; }
.bm-route { pointer-events: none; }
.bm-route path { vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.bm-route-glow { stroke: #ffd43b; stroke-width: 13; opacity: .7; }
.bm-route-run { stroke-width: 5; }
.bm-route-run.green { stroke: var(--green); } .bm-route-run.blue { stroke: var(--blue); }
.bm-route-run.black, .bm-route-run.double { stroke: var(--blackline); }
.bm-route-lift { stroke: var(--hot); stroke-width: 3.5; stroke-dasharray: 7 5; filter: drop-shadow(0 0 2px #ffd43b); }
.bm-badge circle { stroke: var(--map); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.bm-badge.green circle { fill: var(--green); } .bm-badge.blue circle { fill: var(--blue); }
.bm-badge.black circle, .bm-badge.double circle { fill: var(--black); stroke: var(--blackline); }
.bm-badge text { fill: #fff; font: 700 15px var(--display); pointer-events: none; }
.bm-badge.green text { fill: var(--black); }
.bm-badge { pointer-events: none; }
.bm-attrib { fill: var(--muted); font: 400 11px var(--body); }
.bm-tools { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; gap: 8px; }
.bm-tools button { font-size: .95rem !important; padding: 6px 12px !important; box-shadow: 3px 3px 0 var(--hot) !important; }
.bm-status { position: absolute; left: 12px; bottom: 10px; margin: 0; padding: 6px 12px; background: var(--volt); color: var(--bg); font: 700 .95rem/1 var(--display); text-transform: uppercase; transform: skewX(-10deg); }
.bm-status[hidden], .bm-tip[hidden] { display: none; }
.bm-tip { position: absolute; z-index: 3; pointer-events: none; padding: 4px 9px; background: var(--bg); border: 1.5px solid var(--cyan); font: 700 .95rem/1.2 var(--display); text-transform: uppercase; white-space: nowrap; }
.builder-list { background: linear-gradient(160deg, var(--surface-2), var(--surface)); border: 2px solid var(--line); padding: 14px; max-height: calc(min(68vh, 620px) + 4px); overflow-y: auto; }
.bl-stops { list-style: none; margin: 0 0 12px; padding: 0; }
.bl-item { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: start; padding: 8px 6px; border-bottom: 1px dashed var(--line); background: transparent; }
.bl-item.dragging { opacity: .4; }
.bl-item.drop-before { box-shadow: inset 0 3px 0 var(--volt); }
.bl-item[draggable="true"] { cursor: grab; }
.bl-num { height: 28px; display: grid; place-items: center; transform: skewX(-12deg); font: 700 1.05rem/1 var(--display); background: var(--blue); color: #fff; }
.bl-item.green .bl-num { background: var(--green); color: var(--black); }
.bl-item.black .bl-num, .bl-item.double .bl-num { background: var(--black); color: var(--blackline); box-shadow: inset 0 0 0 2px var(--blackline); }
.bl-item.lift .bl-num { background: transparent; color: var(--hot); box-shadow: inset 0 0 0 1.5px var(--hot); height: 22px; }
.bl-item.break .bl-num { background: transparent; color: var(--orange); box-shadow: inset 0 0 0 1.5px var(--orange); height: 22px; }
.bl-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bl-top strong { font: 700 1.1rem/1.1 var(--display); text-transform: uppercase; }
.bl-item.lift .bl-top strong { color: var(--hot); font-size: .95rem; }
.bl-top strong.missing { text-decoration: underline dotted var(--hot); }
.bl-rating { width: auto; margin: 0; padding: 3px 6px; font-size: .78rem; }
.bl-note, .bl-name-input { margin-top: 5px; padding: 6px 9px; font-size: .85rem; border-width: 1px; }
.bl-tools { display: flex; gap: 8px; padding-top: 2px; }
.bl-tools .link { text-decoration: none; font-size: 1rem; color: var(--muted); }
.bl-tools .link:hover { color: var(--volt); }
.bl-tools .link:disabled { opacity: .25; cursor: default; }
.bl-tools .bl-del:hover { color: var(--hot); }
.bl-add { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; }
.bl-add select, .bl-add input { margin: 0; padding: 8px; font-size: .88rem; }
.bl-add .btn { font-size: .95rem; padding: 9px 14px; }
.stops-text { margin-top: 10px; }
.stops-text summary { cursor: pointer; font-weight: 700; color: var(--cyan); margin-bottom: 8px; }
@media (max-width: 560px) {
  .bm-svg { height: 56vh; }
  nav { gap: 12px; font-size: .85rem; }
  nav a, nav button.link { white-space: nowrap; }
  .logo-b { font-size: 1.6rem; }
}

/* ---------- light maps ----------
   Trail maps are read on snow-white paper, so every map (course map, run profile,
   route builder) uses a light palette inside its dark arcade frame. */
.terrain-frame, .route-scroll, .builder-map {
  --map: #f7f9fc; --ink: #11141c; --muted: #7d879b; --line: #cfd6e2;
  --green: #138a3a; --blue: #1a5fd6; --blackline: #14161c; --black: #14161c;
  --hot: #d4176c; --orange: #c75a00; --cyan: #0a86a8;
  color-scheme: light;
  background: var(--map);
  border-color: #2b357a;
  color: var(--ink);
}
.terrain-frame::before, .route-scroll::before {
  background: #0a0e27; color: #d4ff2a; padding: 5px 9px; transform: skewX(-10deg);
}
/* course map */
.terrain-frame .tm-run { opacity: .55; }
.terrain-frame .tm-run.black, .terrain-frame .tm-run.dbl { opacity: .45; }
.terrain-frame .tm-run.area { fill: rgba(20, 30, 60, .045); stroke-width: .6; }
.terrain-frame .tm-lift { stroke: #8a93a6; opacity: .8; }
.terrain-frame .tm-route-glow { stroke: #ffd43b; opacity: .75; stroke-width: 12; }
.terrain-frame .tm-badge rect { stroke: #fff; }
.terrain-frame .tm-rider { fill: #ffd43b; stroke: #11141c; stroke-width: 2.5; filter: drop-shadow(0 0 4px rgba(255, 190, 0, .9)); }
.terrain-frame .tm-rider.lift { fill: #ff4f9a; filter: drop-shadow(0 0 4px rgba(212, 23, 108, .8)); }
.terrain-frame .tm-lift-label { stroke: #fff; }
.terrain-frame .tm-compass { fill: #0a86a8; }
/* run profile */
.route-scroll .rd-axis.strong { fill: var(--ink); }
.route-scroll .rd-node { stroke: var(--ink); }
.route-scroll .rd-node.end { fill: var(--ink); }
.route-scroll .rd-run-label, .route-scroll .rd-lift-label, .route-scroll .rd-break-label { stroke: #fff; }
.route-scroll .rd-badge circle { stroke: #fff; }
/* route builder */
.builder-map .bm-bg path { fill: rgba(20, 30, 60, .045); stroke: #9aa3b5; opacity: .6; }
.builder-map .bm-line { opacity: .55; }
.builder-map .bm-run.black .bm-line, .builder-map .bm-run.double .bm-line { opacity: .4; }
.builder-map .bm-f:hover .bm-line { opacity: 1; }
.builder-map .bm-lift .bm-line { stroke: #d4176c; opacity: .75; }
.builder-map .bm-badge circle { stroke: #fff; }
.builder-map .bm-attrib { fill: #7d879b; }

/* ---------- hikes and restaurants ---------- */
.tm-hike { fill: none; stroke: #c75a00; stroke-width: 1.4; stroke-dasharray: 1 4; stroke-linecap: round; opacity: .8; }
.tm-route-hike { fill: none; stroke: #c75a00; stroke-width: 3.5; stroke-dasharray: 1 7; stroke-linecap: round; }
.tm-hike-label { fill: #c75a00; font: 700 12.5px var(--display); text-transform: uppercase; letter-spacing: .03em; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.tm-place circle { fill: #fff; stroke: #c75a00; stroke-width: 1.2; opacity: .9; }
.tm-place text { font-size: 7px; }
.tm-stop circle { fill: #fff; stroke: #c75a00; stroke-width: 2.5; }
.tm-stop text { font-size: 11px; }
.tm-stop .tm-stop-label { fill: #c75a00; font: 700 12px var(--display); text-transform: uppercase; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.stops li.hike .num { color: var(--orange); box-shadow: inset 0 0 0 1.5px var(--orange); background: transparent; height: 24px; font-size: .9rem; }
.stops li.hike { padding: 3px 0; font-size: .88rem; color: var(--muted); }
.stops li.hike .tag { color: var(--orange); }
.bm-hike .bm-line { stroke: #c75a00; stroke-dasharray: 1 4; stroke-linecap: round; }
.bm-route-hike { stroke: #c75a00; stroke-width: 4; stroke-dasharray: 1 7; filter: drop-shadow(0 0 2px #ffd43b); }
.bm-place { cursor: pointer; }
.bm-place .bm-place-icon { font-size: 10px; pointer-events: none; }
.bm-place:hover .bm-place-dot, .bm-place.in-route .bm-place-dot { stroke-width: 3; filter: drop-shadow(0 0 3px #ffd43b); }
.bl-item.hike .bl-num { background: transparent; color: var(--orange); box-shadow: inset 0 0 0 1.5px var(--orange); height: 22px; }
.bl-item.hike .bl-top strong { color: var(--orange); font-size: .95rem; }

/* ---------- roles & gifting ---------- */
.role { font: 700 .8rem/1 var(--display); text-transform: uppercase; letter-spacing: .05em; padding: 5px 9px; transform: skewX(-10deg); white-space: nowrap; }
.role.god { background: var(--volt); color: var(--bg); box-shadow: 3px 3px 0 var(--hot); }
.role.guide { background: transparent; color: var(--cyan); box-shadow: inset 0 0 0 1.5px var(--cyan); }
.role-banner { font-size: .9rem; }
.gift h2 { margin-bottom: 4px; }
.gift form label select { margin-bottom: 6px; }
@media (max-width: 560px) { .role { font-size: .7rem; padding: 4px 6px; } }

/* ---------- mountain report (weather) ---------- */
.report { margin: 16px 0; padding: 12px 16px 10px; background: rgba(31, 228, 255, .06); border: 2px solid rgba(31, 228, 255, .35); }
.report .eyebrow { color: var(--cyan); margin: 0 0 8px; }
.report-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 18px; }
.report-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.report-v { font: 700 1.25rem/1.15 var(--display); letter-spacing: .01em; }
.report-src { margin: 10px 0 0; font-size: .7rem; color: var(--muted); }
.mtn-snow { display: block; margin-top: 4px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; color: var(--cyan); }

/* ---------- unlock and pricing ---------- */
.locked .teaser { font-style: italic; color: var(--muted); max-width: 40em; margin: 10px auto 0; }
.unlock h2 { margin-top: 0; }
.credit-use { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.buy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 10px 0 14px; }
.buy-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--surface); border: 2px solid var(--line); }
.buy-card.pass { border-color: var(--hot); box-shadow: 0 0 0 1px var(--hot), 0 0 22px rgba(255, 46, 147, .25); }
.buy-card .btn { margin-top: auto; align-self: flex-start; }
.buy-name { font: 700 1.05rem/1.1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.buy-price { font: 700 2.2rem/1 var(--display); color: var(--volt); margin: 2px 0; }
.sim-checkout .buy-price { display: block; margin: 4px 0 14px; }
.faq ul { margin: 0; padding-left: 1.2em; }
.faq li { margin: 6px 0; }
.access-tag { margin: 6px 0 0; color: var(--volt); font-weight: 700; }
.flash.access { border-color: var(--green); }
.follow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 16px; }
.follow-grid label { display: flex; flex-direction: column; gap: 4px; }
label.check { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; }
label.check input { margin-top: 5px; width: auto; flex: none; }
.err { color: var(--hot); }

.card .stars { margin-right: 8px; }
/* Direction chevrons on the route builder, and the flip toggle */
.bm-arrow { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.bl-tools .bl-flip.on { color: var(--volt); }

/* Staging banner (APP_ENV=staging) */
.env-banner { position: sticky; top: 0; z-index: 50; padding: 6px 16px; text-align: center; font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  color: #111; background: repeating-linear-gradient(-45deg, #ffcf1f 0 14px, #ffb300 14px 28px); }

/* Plans for later in the week */
.coming-up .day-head { margin: 18px 0 8px; font: 700 1rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .06em; color: var(--cyan); }
.melt.later { color: var(--cyan); }
.inline-pair { display: flex; gap: 8px; }
.inline-pair input { min-width: 0; }

/* ---------- Phones ---------- */
/* Long links and codes (invite and gift links) break instead of pushing the page wide. */
code, .copy { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  td, .muted, .flash { overflow-wrap: anywhere; }
  /* Header: logo on top, links wrap underneath instead of running off the screen. */
  .top .wrap { height: auto; min-height: 56px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 10px; row-gap: 6px; }
  nav { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; column-gap: 14px; margin-left: auto; }
  /* Plan cards: badge and session stack when there's no room. */
  .card-top { flex-wrap: wrap; row-gap: 6px; }
  .sess { white-space: normal; }
  /* 16px inputs stop iPhones zooming in when you tap a field. */
  input, select, textarea { font-size: 16px; max-width: 100%; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats .n { font-size: 1.9rem; }
  .headrow > * { max-width: 100%; }
  .headrow form.inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .panel { padding-left: 14px; padding-right: 14px; }
  /* Tables become one card per row, each value labeled with its column. */
  .tablewrap { overflow-x: visible; }
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  table.stack td { border: 0; padding: 3px 0; text-align: left; }
  table.stack td[data-label] { position: relative; padding-left: 6.5rem; text-align: left; min-height: 1.6em; }
  table.stack td[data-label]::before { content: attr(data-label); position: absolute; left: 0; top: 6px; width: 6rem; font-size: .66rem; line-height: 1.2; text-transform: uppercase; letter-spacing: .1em; color: var(--cyan); font-weight: 700; }
  table.stack td:first-child { display: block; text-align: left; font-size: 1rem; }
  table.stack td:first-child::before { display: none; }
  table.stack td:empty { display: none; }
  table.stack td.num { text-align: left; }
}
@media (max-width: 380px) {
  .stats { grid-template-columns: 1fr; }
  .buy-grid { grid-template-columns: 1fr; }
}

/* Course map playback speed */
.tm-speed { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.tm-speed-k { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.tm-speed button { font: 700 .82rem/1 var(--display); letter-spacing: .04em; padding: 6px 10px; color: var(--muted); background: transparent; border: 2px solid var(--line); cursor: pointer; transform: skewX(-12deg); }
.tm-speed button:hover { color: var(--ink); border-color: var(--cyan); }
.tm-speed button[aria-pressed="true"] { color: var(--bg); background: var(--volt); border-color: var(--volt); }

/* Plan form: how long a plan is good for */
.validity { border: 2px solid var(--line); padding: 10px 14px 4px; margin: 4px 0; }
.validity legend { padding: 0 6px; font-weight: 700; font-size: .85rem; }
.validity-opts { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 6px; }
[data-for][hidden] { display: none !important; }
.season-plans .muted { margin-top: -6px; }
.stars.milk { color: var(--cyan); }

/* ---------- Melted plan: the route drips away ---------- */
.melted .terrain { max-width: 760px; margin: 18px auto 12px; text-align: left; }
.terrain.melting .terrain-frame::before { content: "Melted"; color: var(--hot); }
.terrain.melting .terrain-frame { cursor: pointer; }
.terrain.melting .tm-route { transition: opacity .2s; }
.terrain.melting .tm-pixels rect { shape-rendering: crispEdges; }
.terrain.melting .tm-pixels rect.dripping { fill: #4fc3ff; transition: fill .6s; }
.terrain.melting .tm-pixels rect.landed { fill: #1fa6e8; opacity: .85; }
.tm-gameover { font: 700 64px var(--display); fill: var(--hot); letter-spacing: .04em; opacity: 0; paint-order: stroke; stroke: #fff; stroke-width: 6px; stroke-linejoin: round; }
.terrain.melting.done .tm-gameover { opacity: 1; animation: gameover-blink 1s steps(2, start) 3, gameover-in .4s ease-out; }
@keyframes gameover-blink { to { visibility: hidden; } }
@keyframes gameover-in { from { transform: translateY(-20px); } to { transform: none; } }
.tm-decoy-ridge { fill: #e3e8f2; stroke: #c6cede; stroke-width: 2; }
.tm-decoy-snow { fill: #fff; }
@media (max-width: 640px) { .terrain.melting svg { width: 100%; } .tm-gameover { font-size: 56px; } }
.route-toggle { margin: 10px 0 18px; }
.route-toggle > summary { display: inline-block; cursor: pointer; list-style: none; font: 700 .9rem/1 var(--display); text-transform: uppercase; letter-spacing: .05em; color: var(--cyan); border: 2px solid var(--cyan); padding: 8px 14px; transform: skewX(-12deg); }
.route-toggle > summary::-webkit-details-marker { display: none; }
.route-toggle[open] > summary span { display: none; }
.route-toggle[open] > summary::after { content: "Hide the route"; }

/* Signed-in "player" chip in the header */
.who { display: inline-flex; align-items: center; gap: 7px; max-width: 220px; padding: 3px 10px 3px 3px; border: 1.5px solid var(--line); border-radius: 999px; text-decoration: none; background: rgba(255, 255, 255, .04); }
.who:hover { border-color: var(--volt); }
.who-av { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--volt); color: var(--bg); font: 700 .8rem/1 var(--display); box-shadow: 0 0 8px rgba(212, 255, 42, .5); }
.who-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
@media (max-width: 640px) { .who { max-width: 160px; } }
@media (max-width: 400px) { .who-name { display: none; } .who { padding-right: 3px; } }

/* Outbox status chips (what happened to each email) */
.status { display: inline-block; font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; padding: 3px 8px; border: 1px solid currentColor; white-space: nowrap; }
.status.sent { color: var(--volt); }
.status.failed { color: var(--hot); }
.status.held { color: var(--orange); }
.status.saved { color: var(--muted); }
table.outbox form { margin: 0; }
table.outbox .btn.small { font-size: .72rem; padding: 6px 10px; white-space: nowrap; }

/* Admin stats: visitors-per-day bars */
.st-chart { margin: 18px 0 0; }
.st-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.st-grid { stroke: var(--line); stroke-width: 1; opacity: .6; }
.st-axis { fill: var(--muted); font: 500 11px var(--body); }
.st-hit { fill: transparent; }
.st-bar path { fill: var(--cyan); }
.st-bar:hover path { fill: var(--volt); }
.st-bar:hover .st-hit { fill: rgba(255, 255, 255, .04); }
.panel h3 { margin: 18px 0 6px; font-size: .95rem; }