/* Radardle. One working column: the course is the stage, three roadside
   signs sit under it, and the guess desk under those. */

@font-face{font-family:"Overpass";src:url("../fonts/Overpass.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Overpass Mono";src:url("../fonts/OverpassMono.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  --bg:#eceeed; --surface:#f8f9f8; --ink:#141c19; --muted:#56635d; --line:#cbd2ce;
  --accent:#00694a; --accent-ink:#ffffff; --amber:#a85600;
  --road:#2b3034; --road-edge:#1c2023; --road-line:#f0c12a; --road-ink:#f1f3f2; --road-dim:#9aa3a7;
  --sign:#ffffff; --sign-ink:#101010; --warn:#f0c12a;
  --good:#1a7a40; --bad:#b3261e; --veh:#ffffff;
  --display:"Overpass","Arial Narrow",Arial,sans-serif;
  --body:"Overpass",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Overpass Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){ :root{
  color-scheme:dark;
  --bg:#0f1513; --surface:#172019; --ink:#e7ede9; --muted:#94a29b; --line:#2b3832;
  --accent:#45c493; --accent-ink:#05130d; --amber:#f0a63a;
  --road:#20262a; --road-edge:#394247; --road-line:#f0c12a; --road-ink:#f1f3f2; --road-dim:#8d979b;
  --good:#5bd08a; --bad:#ff8a80 } }

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.45}
img{max-width:100%}
a{color:var(--accent)}
.wrap{max-width:860px;margin:0 auto;padding-inline:16px;padding-block:20px 40px;display:flex;flex-direction:column;gap:20px}
main,.screen{display:flex;flex-direction:column;gap:20px}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.label{font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
h2{font-family:var(--display);font-weight:900;font-size:26px;line-height:1.1;margin:0;text-transform:uppercase}
h3{font-family:var(--display);font-weight:800;font-size:18px;margin:0}

/* header */
.top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.brand{color:inherit;text-decoration:none}
.masthead{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.support{font-size:14px;font-weight:600}
.logo{font-family:var(--display);font-weight:900;font-size:clamp(30px,7vw,44px);line-height:1;letter-spacing:-.01em;text-transform:uppercase;display:flex;align-items:center;gap:.22em}
.logo .word span{color:var(--accent)}
.logo .mark{height:.82em;width:auto;flex:none;margin-top:-.08em}
.logo .waves{stroke:var(--accent)}
.nav{display:flex;flex-wrap:wrap;gap:6px 18px;font-weight:800}
.nav a{color:var(--ink);text-decoration:none;border-bottom:2px solid transparent;padding-bottom:1px}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--accent)}
.banner{margin:0;background:var(--surface);border:1.5px solid var(--line);border-left:5px solid var(--accent);border-radius:6px;padding:10px 12px}
.banner.err{border-left-color:var(--bad)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;border-top:1.5px solid var(--line);padding-top:12px;color:var(--muted);font-size:14px}
.noscript{max-width:860px;margin:0 auto;padding:0 16px 40px}

/* buttons */
.btn{display:inline-block;border:2px solid var(--ink);background:transparent;border-radius:6px;padding:8px 14px 6px;font-weight:800;cursor:pointer;line-height:1.2;color:var(--ink);text-decoration:none}
.btn:hover:not(:disabled){background:var(--ink);color:var(--bg)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover:not(:disabled){filter:brightness(1.1);background:var(--accent);color:var(--accent-ink)}
.btn.small{padding:5px 10px 3px;font-size:14px;border-width:1.5px}
.btn[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.btn.danger{border-color:var(--bad);color:var(--bad)}
.btn.danger:hover:not(:disabled){background:var(--bad);color:var(--bg)}
.seg{display:inline-flex;border:2px solid var(--ink);border-radius:6px;overflow:hidden}
.seg button{border:0;background:transparent;padding:6px 12px 4px;font-weight:800;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.seg button:disabled{cursor:not-allowed;opacity:.5}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.row.spread{justify-content:space-between}
.row.end{justify-content:flex-end;margin-top:12px}
.row.gap-top{margin-top:12px}
.note{margin:0;color:var(--muted);font-size:14px;max-width:65ch}
.msg{margin:0;min-height:1.45em;color:var(--muted)}
.msg.err{color:var(--bad);font-weight:600}
.neg{color:var(--amber)}

/* landing */
.lede{margin:0;color:var(--muted);font-size:18px;max-width:46ch}
.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.mode,.panel{background:var(--surface);border:1.5px solid var(--line);border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:10px}
.mode p{margin:0;color:var(--muted);flex:1}
.panel .seg{align-self:flex-start}

/* seed entry and codes */
.seedrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--surface);border:1.5px solid var(--line);border-radius:8px;padding:10px 12px}
.seedrow input,.codein{font-family:var(--mono);font-weight:700;font-size:18px;text-transform:uppercase;width:9.5ch;box-sizing:content-box;background:var(--bg);border:2px solid var(--ink);border-radius:6px;padding:5px 8px 3px}
.codein{width:7.5ch}
.code{font-size:26px;letter-spacing:.12em}

#screen-game.loading{visibility:hidden}

/* status strip */
.strip{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between;border-block:2px solid var(--ink);padding-block:8px}
.strip b{font-family:var(--mono);font-size:20px}
.strip .soon{color:var(--amber)}
.strip .urgent{color:var(--bad)}
.pips{display:flex;gap:6px;align-items:center}
.pip{width:22px;height:8px;border:1.5px solid var(--ink);border-radius:2px}
.pip.done{background:var(--ink)}
.pip.now{background:var(--accent);border-color:var(--accent)}

/* the course */
.stage{position:relative;background:var(--road);border:2px solid var(--road-edge);border-radius:8px;height:170px;overflow:hidden;color:var(--road-ink)}
.caption{position:absolute;left:12px;top:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:13px}
.caption .num{font-size:15px;color:var(--road-line);letter-spacing:0}
.scenery{position:absolute;left:0;right:0}
.gate{position:absolute;top:44px;bottom:0;width:0;border-left:3px dashed var(--road-dim)}
.gate.lit{border-left-color:var(--road-line);border-left-style:solid}
.gate i{position:absolute;top:-4px;left:-14px;width:25px;height:25px;border-radius:50%;background:var(--road-ink);color:var(--road);font-style:normal;font-weight:900;display:grid;place-items:center;font-size:14px;line-height:1;padding-top:2px}
.gate.lit i{background:var(--road-line)}
#gateA{left:8%} #gateB{left:92%}
.radar{position:absolute;left:-31px;bottom:5px;width:28px;height:30px;overflow:visible}
.radar .body{fill:var(--road-ink)} .radar .pole{fill:var(--road-dim)}
.radar .lens{fill:var(--road-dim)} .radar .beam{fill:none;stroke:var(--road-dim);stroke-width:1.6;stroke-linecap:round;opacity:.55}
.gate.lit .radar .lens{fill:var(--road-line)} .gate.lit .radar .beam{stroke:var(--road-line);opacity:1}
.radar .flash{fill:var(--road-line);opacity:0;transform-origin:17px 9px}
@media (prefers-reduced-motion:no-preference){ .gate.lit .radar .flash{animation:radarflash .55s ease-out} }
@keyframes radarflash{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(2.6)}}
.dist{position:absolute;top:44px;left:8%;width:84%;text-align:center;font-family:var(--mono);font-weight:700;font-size:15px}
.dist::before,.dist::after{content:"";position:absolute;top:50%;height:1.5px;background:var(--road-dim);width:calc(50% - 74px)}
.dist::before{left:22px}.dist::after{right:22px}
#veh{position:absolute;left:0;top:80px;width:64px;height:32px;will-change:transform;color:var(--veh)}
#veh svg{display:block;width:64px;height:32px;overflow:visible}
#veh .dot{position:absolute;top:-13px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--road-line);box-shadow:0 0 0 2px var(--road)}

/* Environments. Each one sets the stage colour, which the vehicle drawings also
   use for their cut-outs, and draws its fixed reference marks. The radar unit
   at B takes a form that suits the environment. */
.radar .r-buoy,.radar .r-box,.radar .r-station{display:none}

.stage.env-road .near{top:118px;height:3px;background:repeating-linear-gradient(90deg,var(--road-line) 0 26px,transparent 26px 52px);opacity:.75}
.stage.env-road .far{top:140px;height:2px;background:var(--road-dim);opacity:.5}

.stage.env-track{--road:#5b2e24;--road-edge:#3f1f18}
.stage.env-track .near{top:114px;height:2px;background:var(--road-ink);opacity:.7}
.stage.env-track .far{top:116px;height:26px;border-bottom:2px solid var(--road-ink);background:repeating-linear-gradient(90deg,var(--road-ink) 0 2px,transparent 2px 60px);opacity:.45}

.stage.env-water{--road:#123a4c;--road-edge:#0b2733}
.stage.env-water .near{top:108px;height:3px;background:repeating-linear-gradient(90deg,#9fd3e6 0 34px,transparent 34px 50px);opacity:.6}
.stage.env-water .far{top:128px;height:22px;background:repeating-linear-gradient(90deg,transparent 0 22px,#9fd3e6 22px 46px,transparent 46px 70px) 0 0/100% 2px no-repeat,repeating-linear-gradient(90deg,#9fd3e6 0 18px,transparent 18px 64px) 0 100%/100% 2px no-repeat;opacity:.35}
.stage.env-water .radar .r-post{display:none}
.stage.env-water .radar .r-buoy{display:inline}
.stage.env-water .radar{bottom:14px}

.stage.env-rail{--road:#27292c;--road-edge:#17181a}
.stage.env-rail .near{top:112px;height:3px;background:var(--road-dim)}
.stage.env-rail .far{top:115px;height:7px;background:repeating-linear-gradient(90deg,#7a5a3c 0 10px,transparent 10px 30px);opacity:.9}
.stage.env-rail .radar .r-post{display:none}
.stage.env-rail .radar .r-box{display:inline}

.stage.env-sky{--road:#1d3552;--road-edge:#12233a}
.stage.env-sky .near{top:150px;bottom:0;background:#14263c;border-top:2px solid var(--road-dim)}
.stage.env-sky .far{top:68px;height:74px;opacity:.22;background:
  radial-gradient(ellipse 46px 9px at 12% 30%,#fff 98%,transparent),
  radial-gradient(ellipse 30px 7px at 31% 78%,#fff 98%,transparent),
  radial-gradient(ellipse 52px 10px at 52% 22%,#fff 98%,transparent),
  radial-gradient(ellipse 34px 7px at 70% 70%,#fff 98%,transparent),
  radial-gradient(ellipse 44px 9px at 88% 34%,#fff 98%,transparent)}
.stage.env-sky .radar .r-post{display:none}
.stage.env-sky .radar .r-station{display:inline}
.stage.env-sky .radar{bottom:0}

/* signs */
.signs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.signs.blind{grid-template-columns:minmax(0,1fr)}
.post{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.sign{width:min(100%,104px);background:var(--sign);color:var(--sign-ink);border-radius:8px;padding:4px;box-shadow:0 0 0 1.5px var(--line)}
.sign>div{border:2.5px solid var(--sign-ink);border-radius:5px;padding:6px 2px 3px;font-family:var(--display);font-weight:800;line-height:1}
.sign small{display:block;font-size:10px;letter-spacing:.08em}
.sign strong{display:block;font-size:34px;font-weight:900;padding-block:3px 0}
.sign.mystery{background:var(--road);color:var(--road-ink);box-shadow:0 0 0 1.5px var(--road-edge)}
.sign.mystery>div{border-color:var(--road-line)}
.sign.mystery small{font-size:9px}
.sign.mystery strong{color:var(--road-line);font-family:var(--mono);font-weight:700}
.post.active .sign{box-shadow:0 0 0 4px var(--accent)}
.post .label{min-height:1em}

/* desk */
.desk{background:var(--surface);border:1.5px solid var(--line);border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:12px}
#phaseGuess{display:flex;flex-direction:column;gap:14px}
#phaseDone{display:flex;flex-direction:column;gap:8px}
.guessrow{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.field{display:flex;align-items:center;border:2px solid var(--ink);border-radius:6px;background:var(--bg);padding-inline:12px;gap:8px;flex:1 1 180px;min-width:0}
.field input{border:0;background:transparent;font-family:var(--mono);font-size:26px;font-weight:700;width:100%;min-width:0;padding:8px 0 6px;outline:none}
.field:focus-within{outline:3px solid var(--accent);outline-offset:2px}
.field span{font-weight:800;color:var(--muted)}
.ledger{display:grid;grid-template-columns:1fr auto;gap:4px 16px;margin:0}
.ledger dt{color:var(--muted)} .ledger dd{margin:0;text-align:right;font-family:var(--mono);font-weight:700}
.ledger .tot{border-top:2px solid var(--ink);padding-top:6px;font-size:20px;color:var(--ink);font-weight:800}
.verdict{font-family:var(--display);font-weight:900;font-size:24px;margin:0;line-height:1.15;text-wrap:balance}
.chart{width:100%;overflow-x:auto}
.chart svg{display:block;width:100%;min-width:300px;height:auto}
.chart .area{fill:var(--accent);opacity:.16}
.chart .curve{fill:none;stroke:var(--accent);stroke-width:2.5}
.chart .axis{stroke:var(--ink);stroke-width:2}
.chart .target{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:4 4}
.chart .guess{stroke:var(--amber);stroke-width:2.5}
.chart .guess-dot{fill:var(--amber)}
.chart text{font-family:var(--mono);font-size:17px}
.chart .t-label,.chart .g-label{text-anchor:middle}
.chart .end{fill:var(--muted)}
.chart .t-label{fill:var(--ink);font-weight:700}
.chart .g-label{fill:var(--amber);font-weight:700}

/* tables */
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:right;padding:5px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
th:first-child,td:first-child{text-align:left}
td{font-family:var(--mono);font-variant-numeric:tabular-nums}
td:first-child{font-family:var(--body)}
textarea{width:100%;min-height:150px;font-family:var(--mono);font-size:12px;background:var(--bg);color:var(--ink);border:1.5px solid var(--line);border-radius:6px;padding:8px}
.streak{display:flex;flex-wrap:wrap;gap:8px 32px;border-block:2px solid var(--ink);padding-block:8px}
.streak b{font-size:20px}

/* text screens */
.prose{gap:10px;max-width:68ch}
.prose h3{margin-top:10px}
.prose p,.prose ol,.prose ul{margin:0}
.prose ol,.prose ul{padding-left:1.3em;display:flex;flex-direction:column;gap:4px}

@media (max-width:460px){ .sign strong{font-size:28px} .stage{height:160px} }