/* blinchi.com: look A (Midnight), the game's own tokens (docs/design/2026-10-16-look-a-midnight.md).
   Single dark theme by choice: the site is the game's start screen and help desk.
   Layout: full-bleed arena hero on the landing; help pages are a 68ch reading column with a sticky contents rail. */
:root{
  --ground:#11131b;        /* page, and play.blinchi.com's loader */
  --panel:#161a25;         /* blocks on the page */
  --plate:rgba(14,17,26,.86); /* HUD plates over the arena */
  --line:#1f2431;
  --line-strong:#2e3547;
  --text:#f2f4f8;
  --quiet:#c9cfdb;
  --muted:#8a94ab;
  --red:#ff2e4d;
  --teal:#3ee3c0;
  --amber:#ffb347;
  --f-hud:"Chakra Petch","Arial Narrow",system-ui,sans-serif;
  --f-jp:"Dela Gothic One","Hiragino Sans","Yu Gothic",sans-serif;
  --gutter-l:max(16px,env(safe-area-inset-left,0px));
  --gutter-r:max(16px,env(safe-area-inset-right,0px));
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-padding-top:24px}
body{margin:0;background:var(--ground);color:var(--text);font:17px/1.6 var(--f-hud);-webkit-font-smoothing:antialiased}
img{max-width:100%}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:3px}
.wrap{max-width:1180px;margin:0 auto;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lbl{font:700 11px/1 var(--f-hud);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.plate{background:var(--plate);border-radius:5px;box-shadow:0 6px 24px rgba(0,0,0,.28)}
.key{display:inline-block;min-width:26px;text-align:center;padding:3px 7px;border:1px solid #3a4256;border-bottom-width:2px;border-radius:4px;font:700 12.5px/1.2 var(--f-hud);color:#fff;margin:1px 4px 1px 0;white-space:nowrap}
code,.mono{font:500 .92em/1.4 ui-monospace,"SF Mono",Menlo,Consolas,monospace}
code{background:#1d2230;padding:2px 6px;border-radius:4px;color:var(--text)}

/* ---------- header / footer ---------- */
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.brand{font:italic 700 22px/1 var(--f-hud);letter-spacing:.01em;text-decoration:none;white-space:nowrap}
.brand span{color:var(--red)}
.nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;font:700 12px/1 var(--f-hud);letter-spacing:.22em;text-transform:uppercase;color:var(--quiet)}
.nav ul a{text-decoration:none}
.nav ul a:hover,.nav ul a[aria-current="page"]{color:#fff}
.nav ul a[aria-current="page"]{box-shadow:0 2px 0 var(--red)}
.nav .navplay{font:italic 700 15px/1 var(--f-hud);letter-spacing:.08em;padding:10px 14px;background:var(--red);color:#fff;border-radius:4px;text-decoration:none}
@media (max-width:820px){.nav ul{display:none}}
.foot{margin-top:96px;border-top:1px solid var(--line)}
.foot .wrap{padding-block:28px 40px;display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;font:600 13.5px/1.5 var(--f-hud);color:var(--muted)}
.foot nav{display:flex;gap:18px;flex-wrap:wrap}
.foot a{text-decoration:none} .foot a:hover{color:#fff}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:4px;border:1px solid var(--line-strong);background:transparent;color:#fff;font:700 13px/1 var(--f-hud);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--quiet)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.red{background:var(--red);border-color:var(--red)}

/* ---------- landing hero: the start screen ---------- */
.hero{position:relative;overflow:hidden;border-block:1px solid var(--line)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:220px 1fr 220px;grid-template-rows:auto auto auto;gap:28px 20px;padding:18px var(--gutter-r) 18px var(--gutter-l)}
.hud{transition:transform .6s cubic-bezier(.6,0,.8,.3),opacity .5s}
.top5{grid-column:1;grid-row:1;align-self:start;padding:10px 12px}
.top5 h2{display:flex;justify-content:space-between;align-items:center}
.top5 h2 .jp{font:16px/1 var(--f-jp);color:var(--quiet);letter-spacing:.08em;text-transform:none}
.top5 ol{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:3px;font:600 13px/1.25 var(--f-hud);font-variant-numeric:tabular-nums}
.top5 li{display:grid;grid-template-columns:14px 10px 1fr auto;gap:6px;align-items:center;padding:3px 5px;border-radius:3px}
.top5 li i{width:8px;height:8px;border-radius:50%}
.top5 li.you{background:linear-gradient(90deg,rgba(255,46,77,.55),rgba(255,46,77,0))}
.scorep{grid-column:2;grid-row:1;justify-self:center;align-self:start;padding:9px 20px 10px;text-align:center}
.scorep b{display:block;font:italic 700 40px/1 var(--f-hud);font-variant-numeric:tabular-nums;margin-top:6px}
.scorep small{display:block;margin-top:6px;font:600 11.5px/1 var(--f-hud);color:var(--muted)}
.feed{grid-column:3;grid-row:1;align-self:start;display:grid;gap:5px;justify-items:end}
.feed div{padding:6px 10px;font:600 12.5px/1 var(--f-hud);color:var(--quiet);white-space:nowrap}
.feed div b{color:#fff}
.card{grid-column:1/-1;grid-row:2;justify-self:center;width:min(580px,100%);padding:32px 34px 24px;text-align:center;transition:opacity .45s,transform .6s}
.card h1 .w{display:block;font:italic 700 clamp(46px,8vw,66px)/1 var(--f-hud);letter-spacing:-.01em}
.card h1 .d{display:block;margin-top:12px;font:700 14px/1 var(--f-hud);letter-spacing:.5em;padding-left:.5em;color:var(--red)}
.card h1 .k{display:block;margin-top:10px;font:16px/1 var(--f-jp);letter-spacing:.3em;padding-left:.3em;color:var(--quiet)}
.card p{margin:18px auto 0;max-width:44ch;color:var(--quiet);font-size:16px}
.play{margin-top:22px;width:100%;display:flex;justify-content:space-between;align-items:center;padding:15px 18px;background:var(--red);color:#fff;border:0;border-radius:5px;font:italic 700 24px/1 var(--f-hud);letter-spacing:.06em;cursor:pointer;text-decoration:none;transition:filter .15s,transform .15s}
.play:hover{filter:brightness(1.08)} .play:active{transform:translateY(1px)}
.play kbd{font:700 11px/1 var(--f-hud);letter-spacing:.2em;padding:6px 8px;border:1px solid rgba(255,255,255,.55);border-radius:3px}
.card .ctl{margin-top:14px;font:600 13px/1.5 var(--f-hud);color:var(--muted)}
.card .ctl a{color:var(--quiet)}
/* Touch controls don't exist yet: say so on phones instead of sending them into a game they can't drive. */
.touch-note{display:none;margin-top:12px;padding:10px 12px;border-radius:4px;background:rgba(255,179,71,.12);color:var(--amber);font:600 13.5px/1.45 var(--f-hud)}
@media (hover:none) and (pointer:coarse){.touch-note{display:block}}
.speedo{grid-column:1/-1;grid-row:3;justify-self:center;display:flex;align-items:center;gap:14px;padding:10px 16px}
.speedo .kmh{font:italic 700 34px/1 var(--f-hud);font-variant-numeric:tabular-nums;min-width:2.2ch;text-align:right}
.leds{display:grid;grid-template-columns:repeat(20,7px);gap:3px}
.leds i{height:14px;border-radius:1.5px;background:#232838}
.leds i.on{background:var(--teal)} .leds i.on.amber{background:var(--amber)} .leds i.on.redl{background:var(--red)}
.speedo .ang{font:italic 700 22px/1 var(--f-hud);color:var(--teal);font-variant-numeric:tabular-nums;min-width:3ch}
/* Side plates span both top rows, so row 1 is only as tall as the Score plate and the card sits
   the same distance under it as the speedo sits under the card. Below 1100px there's no room beside the card. */
.top5,.feed{grid-row:1 / span 2}
@media (max-width:1099px){.top5,.feed{display:none}}
@media (max-width:820px){
  .hero-grid{grid-template-columns:1fr}
  .scorep,.card,.speedo{grid-column:1}
  .leds{grid-template-columns:repeat(20,4px);gap:2px}
}
.leaving .top5{transform:translateX(-140%)} .leaving .feed{transform:translateX(140%)}
.leaving .scorep{transform:translateY(-180%)} .leaving .speedo{transform:translateY(220%)}
.leaving .card{opacity:0;transform:scale(.97)}
.leaving .hero canvas{transition:filter .65s;filter:brightness(.12)}

/* ---------- landing sections ---------- */
.blk{padding-block:76px 0}
.blk h2.h{font:italic 700 clamp(28px,4vw,40px)/1.05 var(--f-hud)}
.blk .intro{margin-top:12px;max-width:62ch;color:var(--quiet)}
.rules{margin-top:28px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rule{padding:20px 20px 22px;background:var(--panel);border-radius:5px}
.rule .n{font:italic 700 46px/1 var(--f-hud);color:var(--teal);font-variant-numeric:tabular-nums}
.rule .n.r{color:var(--red)}
.rule h3{margin-top:14px;font:700 19px/1.2 var(--f-hud)}
.rule p{margin-top:8px;color:var(--quiet);font-size:15.5px}
@media (max-width:820px){.rules{grid-template-columns:1fr}}
.modes{margin-top:24px;display:grid;gap:2px;border-radius:5px;overflow:hidden}
.mode{display:grid;grid-template-columns:200px 1fr auto;gap:18px;align-items:center;padding:18px 20px;background:var(--panel)}
.mode h3{font:italic 700 24px/1 var(--f-hud)}
.mode p{color:var(--quiet);font-size:15.5px}
.tag{font:700 11px/1 var(--f-hud);letter-spacing:.22em;text-transform:uppercase;padding:6px 8px;border-radius:3px;background:rgba(62,227,192,.14);color:var(--teal);white-space:nowrap}
.tag.soon{background:#232838;color:var(--muted)}
.tag.bad{background:rgba(255,46,77,.16);color:#ff6b80}
.tag.warn{background:rgba(255,179,71,.15);color:var(--amber)}
@media (max-width:700px){.mode{grid-template-columns:1fr auto}.mode p{grid-column:1/-1}}
.tbl{margin-top:22px;overflow-x:auto}
table{width:100%;border-collapse:collapse;font:600 14.5px/1.35 var(--f-hud)}
.tbl table{min-width:560px}
th{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line-strong);font:700 11px/1.2 var(--f-hud);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
td{padding:11px 12px;border-bottom:1px solid var(--line);color:var(--quiet);vertical-align:top}
td:first-child{color:#fff}
.help{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.help a{display:grid;gap:8px;align-content:start;padding:22px;border-radius:5px;background:var(--panel);text-decoration:none;border:1px solid transparent;transition:border-color .15s}
.help a:hover{border-color:var(--red)}
.help h3{font:700 21px/1.2 var(--f-hud)}
.help p{color:var(--quiet);font-size:15.5px}
.help .url{font:600 12.5px/1 var(--f-hud);color:var(--muted)}
@media (max-width:760px){.help{grid-template-columns:1fr}}
.faq{margin-top:20px;max-width:780px}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;padding:16px 0;font:700 17.5px/1.35 var(--f-hud);list-style-position:inside}
summary::marker{color:var(--red)}
details p{padding-bottom:16px;color:var(--quiet);max-width:64ch}

/* ---------- help pages: reading column + contents rail ---------- */
.crumbs{font:600 13px/1 var(--f-hud);color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;padding-top:28px}
.crumbs a{text-decoration:none} .crumbs a:hover{color:#fff}
.doc-head{padding-block:18px 8px;max-width:820px}
.doc-head h1{font:italic 700 clamp(34px,5.4vw,56px)/1.02 var(--f-hud);letter-spacing:-.01em}
.doc-head .lead{margin-top:16px;max-width:62ch;color:var(--quiet);font-size:18.5px}
.doc-head .meta{margin-top:14px;font:600 13px/1 var(--f-hud);color:var(--muted)}
.doc{display:grid;grid-template-columns:220px minmax(0,1fr);gap:48px;margin-top:36px}
.rail{position:sticky;top:calc(20px + env(safe-area-inset-top,0px));align-self:start;display:grid;gap:4px}
.rail .lbl{margin-bottom:8px}
.rail a{font:600 14px/1.35 var(--f-hud);color:var(--muted);text-decoration:none;padding:5px 0 5px 12px;border-left:2px solid var(--line)}
.rail a:hover{color:#fff}
.rail a.on{color:#fff;border-left-color:var(--red)}
@media (max-width:900px){.doc{grid-template-columns:1fr}.rail{display:none}}
.prose{max-width:68ch;display:grid;gap:18px}
.prose > section{display:grid;gap:14px;padding-top:30px}
.prose h2{font:italic 700 30px/1.1 var(--f-hud);padding-top:8px}
.prose h3{font:700 19px/1.3 var(--f-hud);margin-top:6px}
.prose p,.prose li{color:var(--quiet)}
.prose strong{color:#fff;font-weight:700}
.prose ol,.prose ul{margin:0;padding-left:22px;display:grid;gap:8px}
.prose ol li::marker{color:var(--red);font-weight:700}
.prose .wide{max-width:none}
.note{padding:14px 16px;background:var(--panel);border-radius:5px;color:var(--quiet);font-size:15.5px}
.note b{color:#fff}
.steps{counter-reset:s;list-style:none;padding:0!important}
.steps > li{counter-increment:s;display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start}
.steps > li::before{content:counter(s);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#232838;color:#fff;font:italic 700 15px/1 var(--f-hud)}
.platforms{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.platforms > div{padding:18px;background:var(--panel);border-radius:5px;display:grid;gap:10px;align-content:start}
.platforms h3{margin:0}
@media (max-width:700px){.platforms{grid-template-columns:1fr}}

/* copy-paste address (browsers block links to chrome:// pages) */
.addr{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.addr code{font-size:15px;padding:7px 10px;background:#0b0d13;border:1px solid var(--line-strong)}
.addr .btn{padding:8px 11px}

/* ---------- live tools ---------- */
.tool{padding:20px;background:var(--panel);border-radius:6px;border:1px solid var(--line-strong);display:grid;gap:16px}
.tool-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.tool-top h2{font:italic 700 24px/1.1 var(--f-hud);padding:0}
.status{display:flex;align-items:center;gap:10px;font:700 15px/1.3 var(--f-hud)}
.status .dot{width:10px;height:10px;border-radius:50%;background:#3a4256;flex:none}
.status.ok .dot{background:var(--teal);box-shadow:0 0 0 4px rgba(62,227,192,.15)}
.status.bad .dot{background:var(--red);box-shadow:0 0 0 4px rgba(255,46,77,.15)}
.status.wait .dot{animation:blink 1.2s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;font:600 14px/1.45 var(--f-hud)}
.kv dt{color:var(--muted)} .kv dd{margin:0;color:var(--text);overflow-wrap:anywhere}
.pad{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:620px){.pad{grid-template-columns:1fr}}
.btns{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
.btns span{display:grid;place-items:center;gap:2px;padding:7px 4px;border-radius:4px;background:#0f121a;border:1px solid var(--line-strong);font:700 12.5px/1 var(--f-hud);color:var(--quiet);transition:background .06s}
.btns span small{font:600 10px/1 var(--f-hud);color:var(--muted)}
.btns span.down{background:var(--red);border-color:var(--red);color:#fff}
.btns span.down small{color:rgba(255,255,255,.8)}
.axes{display:grid;gap:12px}
.sticks{display:flex;gap:14px}
.stick{position:relative;width:86px;height:86px;border-radius:50%;background:#0f121a;border:1px solid var(--line-strong)}
.stick i{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--teal);transform:translate(0,0)}
.stick small{position:absolute;bottom:-20px;left:0;right:0;text-align:center;font:600 11px/1 var(--f-hud);color:var(--muted)}
.trig{display:grid;grid-template-columns:28px 1fr 40px;gap:8px;align-items:center;font:700 12px/1 var(--f-hud);color:var(--muted);font-variant-numeric:tabular-nums}
.trig b{height:8px;border-radius:4px;background:#0f121a;border:1px solid var(--line-strong);position:relative;overflow:hidden}
.trig b i{position:absolute;inset:0;width:0;background:var(--red)}
.tool-actions{display:flex;gap:8px;flex-wrap:wrap}
.toast{font:600 13px/1 var(--f-hud);color:var(--teal);align-self:center}

/* ---------- PLAY hand-off: the exact first frame of play.blinchi.com ---------- */
.handoff{position:fixed;inset:0;z-index:100;background:#11131b;opacity:0;pointer-events:none;transition:opacity .28s ease}
.handoff.on{opacity:1;pointer-events:auto}
.handoff img{position:absolute;inset:0;width:100%;height:100%;max-width:100%;object-fit:contain}
.handoff .bar{position:absolute;top:63%;left:0;right:0;margin:0 auto;width:min(320px,50vw);height:4px;border-radius:2px;background:linear-gradient(90deg,#262c3b 0%,#ff2e4d 50%,#262c3b 100%);background-size:200% 100%;animation:sweep 1.2s linear infinite}
@keyframes sweep{from{background-position:100% 0}to{background-position:-100% 0}}

@media (prefers-reduced-motion:reduce){
  .hud,.card,.handoff,.leaving .hero canvas{transition:none!important}
  .status.wait .dot{animation:none}
}

/* ---------- 404: the results card's WRECKED ---------- */
.lost{padding-block:12vh 80px;display:grid;gap:18px;justify-items:start}
.lost h1{font:italic 700 clamp(56px,11vw,96px)/1 var(--f-hud);color:var(--red)}
.lost h1 span{font:.4em/1 var(--f-jp);color:var(--quiet);font-style:normal;vertical-align:middle}
.lost p{color:var(--quiet);font-size:18px}
.lost-links{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.lost .play{width:auto;margin:0;gap:18px;font-size:20px;padding:12px 18px}

/* ---------- credits: one entry per work, its role on the left ---------- */
.credits{display:grid;grid-template-columns:160px 1fr;gap:14px 20px;margin:6px 0 0}
.credits dt{font:700 11px/1.6 var(--f-hud);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.credits dd{margin:0;display:grid;gap:4px}
.credits .lic{font-size:15px;color:var(--muted)}
@media (max-width:620px){.credits{grid-template-columns:1fr;gap:4px 0}.credits dd{margin-bottom:12px}}