:root{
  --kx-nin:0em;--ky-nin:-.06em;--kx-mi:0em;--ky-mi:-.06em;
  /* Layout: full-bleed pixel canvas underneath; HUD and menus float above it inside a safe side gutter */
  --night:#0c0b16;
  --ink:#16142a;
  --panel:rgba(14,12,28,.82);
  --line:#3b3558;
  --paper:#f3ead6;
  --dim:#a8a1c2;
  --sodium:#ffae42;
  --sodium-deep:#a5621c;
  --tail:#ff2d55;
  --tail-deep:#7d1029;
  --mist:#7fe0ff;
  --text:#cdc8dc;
  --gold:#ffd34d;
  --f-display:"Press Start 2P", ui-monospace, "Courier New", monospace;
  --f-body:"DotGothic16", "Hiragino Kaku Gothic ProN", "Yu Gothic", ui-monospace, monospace;
  color-scheme:dark;
}
html,body{height:100%;margin:0;background:var(--night);color:var(--paper);overflow:hidden;overscroll-behavior:none}
body{font-family:var(--f-body);font-size:16px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
#app{position:fixed;inset:0;overflow:hidden;touch-action:none;background:var(--night)}
#cv{position:absolute;left:0;top:0;image-rendering:pixelated;image-rendering:crisp-edges}

/* HUD */
#hud{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;gap:8px;padding-top:calc(env(safe-area-inset-top,0px) + 10px);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));pointer-events:none}
.xpbar{position:relative;height:14px;padding:3px;background:rgba(12,11,24,.85);box-shadow:inset 0 0 0 2px var(--line);box-sizing:border-box}
.xpbar i{display:block;height:100%;width:0;background:var(--mist)}
.xpbar b{position:absolute;right:6px;top:3px;font:8px/1 var(--f-display);font-weight:400;color:var(--paper);text-shadow:1px 1px 0 var(--night)}
/* HUD row: night clock left, FAME centred on the screen, pause right (the map name moved to the pause title) */
.hrow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.hrow .time{justify-self:start}
.hrow .kills{justify-self:center;white-space:nowrap}
#pauseBtn{justify-self:end}
/* narrow phones: a slightly smaller clock and FAME so a seven-digit FAME still sits centred with room either side */
@media (max-width:359px){.hrow .time{font-size:11px}.hrow .kills{font-size:9px}.hrow .kills small{font-size:6px}}
.time{font:13px/1 var(--f-display);font-variant-numeric:tabular-nums;text-shadow:2px 2px 0 var(--night)}
.time.boss{color:var(--tail)}
.kills{font:10px/1 var(--f-display);text-shadow:2px 2px 0 var(--night);font-variant-numeric:tabular-nums}
.kills small{font-size:7px;color:var(--dim);margin-right:4px}
#pauseBtn{pointer-events:auto;width:38px;height:38px;border:0;background:rgba(12,11,24,.85);box-shadow:inset 0 0 0 2px var(--line);font:10px/1 var(--f-display);cursor:pointer;padding:0}
#pauseBtn{display:grid;place-items:center;width:44px;height:44px;color:var(--paper);box-shadow:inset 0 0 0 2px var(--dim)}
#bossWrap{display:grid;gap:5px}
#bossName{font:8px/1 var(--f-display);color:var(--tail);letter-spacing:.1em;text-shadow:1px 1px 0 var(--night)}
.bossbar{height:10px;padding:2px;box-sizing:border-box;background:rgba(12,11,24,.85);box-shadow:inset 0 0 0 2px var(--tail-deep)}
.bossbar i{display:block;height:100%;width:100%;background:var(--tail)}

/* Touch controls */
#boost{position:absolute;right:calc(max(16px,env(safe-area-inset-right,0px)) + 6px);bottom:calc(env(safe-area-inset-bottom,0px) + 30px);width:86px;height:86px;border:0;border-radius:50%;padding:0;background:conic-gradient(var(--mist) calc(var(--cd,1) * 360deg), rgba(59,53,88,.9) 0);cursor:pointer;touch-action:none}
#boost span{position:absolute;inset:5px;border-radius:50%;background:var(--ink);display:grid;place-items:center;font:9px/1 var(--f-display);color:var(--dim);letter-spacing:.05em}
#boost.ready span{background:var(--mist);color:var(--night)}
#joy{position:absolute;width:100px;height:100px;margin:-50px 0 0 -50px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(243,234,214,.28);pointer-events:none}
#knob{position:absolute;left:50%;top:50%;width:42px;height:42px;margin:-21px;border-radius:50%;background:rgba(255,174,66,.4);box-shadow:inset 0 0 0 2px var(--sodium)}
#banner{position:absolute;left:0;right:0;top:30%;text-align:center;font:13px/1.5 var(--f-display);color:var(--sodium);text-shadow:2px 2px 0 var(--night);pointer-events:none;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
#banner.warn{color:var(--tail);animation:blink .3s steps(2) 6}
@keyframes blink{50%{opacity:.15}}

/* Screens */
.screen{position:absolute;inset:0;display:flex;overflow-y:auto;touch-action:pan-y;background:linear-gradient(to bottom,rgba(12,11,22,.45),rgba(12,11,22,.9) 70%);padding-block:calc(env(safe-area-inset-top,0px) + 24px) calc(env(safe-area-inset-bottom,0px) + 24px);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));box-sizing:border-box}
.wrap{margin:auto;width:100%;max-width:400px;display:flex;flex-direction:column;gap:16px}
.jp{font-family:var(--f-body);font-style:normal;font-size:1.45em;line-height:1;letter-spacing:.04em;position:relative;top:-.09em}
.tagline{display:flex;align-items:flex-end;gap:12px;text-wrap:wrap}
.tagline>span:last-child{padding-bottom:7px;min-width:0}
/* title: the tagline clears the sound button by sitting below it, so it can use the full width */
/* the title fills the screen: content centred, version pinned to the bottom (its gap shrinks to the normal 16px on short phones) */
#s-title .wrap{padding-top:20px;margin:0 auto;min-height:100%;box-sizing:border-box}
#s-title .tagline{margin-top:auto}
#s-title .wrap>.tagline{padding-right:0}
/* title in three chunks: sign + label / logo + description / buttons. Wide gaps between chunks, a tight one inside */
#s-title .hero{margin-top:12px}
#s-title .lede{margin:-4px 0 20px}
@media (max-height:740px){#s-title .hero{margin-top:10px}#s-title .lede{margin:-4px 0 14px}}
@media (max-width:339px){.tagline{gap:10px}.tagline>span:last-child{font-size:8px}}
.sign{flex:none;display:grid;justify-items:center;transform-origin:50% 1px;animation:sway 5s ease-in-out infinite}
.sign .str{display:block;margin-bottom:-1px}
.plate{display:block;padding:5px 8px 6px;background:linear-gradient(#2a1d16,#1a120e);box-shadow:inset 0 0 0 2px #6b4330,0 3px 0 rgba(0,0,0,.45);font:15px/1 var(--f-body);color:#f3ead6;letter-spacing:.14em;white-space:nowrap}
@keyframes sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
@media (prefers-reduced-motion: reduce){.sign{animation:none}}
.eyebrow:has(.jp),.eyebrow{margin:0;font:9px/1.7 var(--f-display);letter-spacing:.14em;color:var(--dim)}
h1,h2{margin:0;font-weight:400;text-wrap:balance}
h2{font:15px/1.5 var(--f-display)}
p{margin:0;line-height:1.55;text-wrap:pretty}
.big,.bigkanji,.lede,.chname,.eyebrow,.howlist b{text-wrap:balance}
.btn{appearance:none;border:0;cursor:pointer;font:12px/1 var(--f-display);letter-spacing:.06em;padding:19px 16px 17px;background:var(--sodium);color:var(--night);box-shadow:0 4px 0 var(--sodium-deep);text-align:center}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--sodium-deep)}
.btn.ghost{background:rgba(22,20,42,.92);color:var(--paper);box-shadow:inset 0 0 0 2px var(--line),0 4px 0 #2a2540}
.btn.ghost:active{transform:translateY(3px);box-shadow:inset 0 0 0 2px var(--line),0 1px 0 #2a2540}
.btn.small{font-size:9px;padding:12px 14px}
.btn:focus-visible,.car:focus-visible,.up:focus-visible,#boost:focus-visible,#pauseBtn:focus-visible{outline:2px solid var(--mist);outline-offset:3px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.backbar{position:sticky;bottom:calc(-24px - env(safe-area-inset-bottom,0px));z-index:5;display:grid;margin-top:auto;padding:28px 0 calc(env(safe-area-inset-bottom,0px) + 20px);margin-bottom:calc(-24px - env(safe-area-inset-bottom,0px));background:linear-gradient(to bottom,rgba(12,11,22,0),rgba(12,11,22,.92) 42%,rgba(12,11,22,.98))}
.row>.btn{flex:1 1 0}
.row>.btn{flex:1 1 120px}

.hero{display:flex;flex-direction:column;gap:4px}
.kanji{font:clamp(80px,30vw,132px)/1 var(--f-body);color:var(--sodium);text-shadow:5px 5px 0 var(--tail-deep),0 0 34px rgba(255,174,66,.35)}
.logo{font:clamp(16px,5.4vw,22px)/1.55 var(--f-display);color:var(--paper);text-shadow:3px 3px 0 var(--night)}
.lede{font-size:17px;max-width:40ch}
.menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.btn.back{display:flex;align-items:center;justify-content:center;gap:10px}
.btn.wide{display:flex;align-items:center;justify-content:center;gap:12px}
.btn.wide .mi{width:auto;height:auto}
.btn.wide .mi.q{font-size:14px}
.menu .btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:17px 6px 15px;font-size:10px;line-height:1.4}
.mi{width:22px;height:20px;display:grid;place-items:center;flex:none}
#miParts{transform:translateY(-1.5px)}
.menu .minihanko{transform:translateY(-.5px) rotate(-8deg)}
/* narrow phones: the three side buttons drop to 9px together so STAMPCARD fits on one line */
@media (max-width:359px){.menu .btn{font-size:9px}.menu .btn{gap:8px}}
.mi.q{font:22px/1 var(--f-display);color:var(--sodium)}
.mi img{image-rendering:pixelated}
.minihanko{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;box-sizing:border-box;font:12px/1 var(--f-body);font-style:normal;color:var(--tail);box-shadow:inset 0 0 0 2px var(--tail);transform:rotate(-8deg);filter:url(#ink)}
.best{text-align:center}
/* version on the title (bottom); "PREVIEW" on branch preview links */
.ver{margin:auto 0 0;text-align:center;font:8px/1 var(--f-display);letter-spacing:.1em;color:var(--dim);opacity:.7}
.iconbtn{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:max(14px,env(safe-area-inset-right,0px));width:36px;height:36px;display:grid;place-items:center;padding:0;border:0;cursor:pointer;background:rgba(22,20,42,.85);color:var(--paper);box-shadow:inset 0 0 0 2px var(--line)}
.iconbtn[aria-pressed="false"]{color:var(--dim)}
.iconbtn.open{color:var(--night);background:var(--sodium);box-shadow:inset 0 0 0 2px var(--sodium-deep)}
.iconbtn.inline{position:static;flex:none}
#sndPanel{position:fixed;z-index:30;width:min(300px,calc(100% - 28px));box-sizing:border-box;padding:16px;display:grid;gap:14px;background:rgba(14,12,28,.97);box-shadow:inset 0 0 0 2px var(--line),0 12px 30px rgba(0,0,0,.5)}
.srow{display:grid;gap:8px}
.srow.vib .slab{margin:0}
.slab{display:grid;grid-template-columns:minmax(0,1fr) 52px;gap:12px;align-items:center}
.slab span{font:8px/1 var(--f-display);color:var(--paper);letter-spacing:.08em}
.slab b{font:8px/1 var(--f-display);font-weight:400;color:var(--dim);font-variant-numeric:tabular-nums}
.sline{display:grid;grid-template-columns:20px minmax(0,1fr) 20px;gap:10px;align-items:center}
.soft,.loud{display:grid;place-items:center;color:var(--dim)}
.sw{position:relative;width:52px;height:28px;padding:0;border:0;cursor:pointer;background:var(--sodium);box-shadow:inset 0 0 0 2px var(--sodium-deep)}
.sw i{position:absolute;top:4px;left:28px;width:20px;height:20px;background:var(--night);transition:left .12s steps(3)}
.sw[aria-checked="false"]{background:#2a2640;box-shadow:inset 0 0 0 2px var(--line)}
.sw[aria-checked="false"] i{left:4px;background:var(--dim)}
.srow.off input[type=range]{opacity:.45}
.sline input[type=range]{width:100%;margin:0;accent-color:var(--sodium)}
/* Garage: PICKUPS and VEHICLES tabs (list + card styles) */
.howsec{display:grid;gap:12px;align-content:start;min-height:min(420px,58vh)}
.howsec .glabel{display:flex;align-items:center;gap:10px;margin:22px 0 4px;font-size:8px;color:var(--paper);letter-spacing:.14em}
.howsec .glabel::after{content:"";flex:1;height:1px;background:rgba(168,161,194,.18)}
.howsec .glabel:first-child{margin-top:6px}
.rivgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.rv{position:relative;display:grid;align-content:start;padding:0 16px 18px;background:rgba(22,20,42,.8);box-shadow:inset 0 0 0 2px var(--line);font-size:14px;line-height:1.5;color:var(--text);min-width:0;overflow:hidden}
.rvi{display:grid;place-items:center;height:124px;margin:0 -16px 4px;background:radial-gradient(closest-side at 50% 55%,color-mix(in srgb,var(--fc) 30%,transparent),color-mix(in srgb,var(--fc) 20%,transparent) 25%,color-mix(in srgb,var(--fc) 10%,transparent) 50%,color-mix(in srgb,var(--fc) 4%,transparent) 72%,color-mix(in srgb,var(--fc) 1%,transparent) 88%,transparent)}
.rvi img{image-rendering:pixelated;filter:drop-shadow(0 3px 0 rgba(0,0,0,.45))}
.rvi img.unmet{filter:brightness(0) invert(.2)}
.rvi>span{font:30px/1 var(--f-body);color:var(--fc)}
.rtag{font:6px/1 var(--f-display);font-style:normal;letter-spacing:.14em;color:var(--fc);margin-bottom:8px}
.rv b{display:block;font:8px/1.5 var(--f-display);font-weight:400;letter-spacing:.06em;color:var(--paper);margin-bottom:6px}
.rv .where{display:block;margin-top:8px;font:6px/1.3 var(--f-display);font-style:normal;letter-spacing:.12em;color:var(--dim)}
.rivgrid>li:last-child:nth-child(odd){grid-column:1/-1;grid-template-columns:112px minmax(0,1fr);column-gap:16px;padding:16px 16px 16px 0}
.rivgrid>li:last-child:nth-child(odd) .rvi{grid-row:1/span 3;height:auto;min-height:96px;margin:-16px 0}
.rivgrid>li:last-child:nth-child(odd) .rtag{align-self:end}
/* challengers are special: one per row */
.rivgrid.solo>li{grid-column:1/-1;grid-template-columns:112px minmax(0,1fr);column-gap:16px;padding:16px 16px 16px 0}
.rivgrid.solo .rvi{grid-row:1/span 3;height:auto;min-height:96px;margin:-16px 0}
.rivgrid.solo .rtag{align-self:end}
/* an unmet vehicle's real text sits invisibly under its hint, so the card keeps its revealed height */
.rtx.stack,.hl-tx.stack{display:grid}
.hl-tx.stack>*{grid-area:1/1}
.hl-tx.stack .ghost{visibility:hidden}
.howlist .hi img.unmet{filter:brightness(0) invert(.2)}
.rtx.stack>*{grid-area:1/1}
.rtx.stack .ghost{visibility:hidden}
/* every look a vehicle type can have, side by side */
.rvi .looks{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;padding:0 8px}
.howlist .where{display:block;margin-top:4px;font:6px/1.3 var(--f-display);font-style:normal;letter-spacing:.1em;color:var(--dim)}
#catTabs .tab{padding:12px 4px;font-size:9px}
#catCombos{margin-top:10px}
#s-cat .wrap,#s-stamps .wrap,#s-select .wrap,#s-map .wrap{margin:0 auto;min-height:100%;align-self:flex-start}
/* toolbox and level-up: BOLT IT ON / SKIP pinned at the bottom like other pages; the cards stay centred in the space above */
#s-box .wrap,#s-level .wrap{margin:0 auto;min-height:100%;align-self:flex-start}
/* toolbox "woah": big toolbox shakes, bursts open (flash + sparks), slow gold rays stay behind the cards; a combo adds a second flash and a shake */
.boxfx{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
#s-box .wrap{position:relative;z-index:1;transition:opacity .2s}
.boxfx:not(.open)~.wrap{opacity:0}
.boxfx .rays{position:absolute;left:50%;top:42%;width:240vmax;height:240vmax;margin:-120vmax 0 0 -120vmax;background:repeating-conic-gradient(rgba(255,211,77,.13) 0 7deg,transparent 7deg 20deg);-webkit-mask-image:radial-gradient(closest-side,#000 8%,transparent 32%);mask-image:radial-gradient(closest-side,#000 8%,transparent 32%);opacity:0;transition:opacity .5s;animation:raySpin 60s linear infinite}
.boxfx.open .rays{opacity:1}
.boxfx.jackpot .rays{background:repeating-conic-gradient(rgba(255,211,77,.24) 0 7deg,transparent 7deg 20deg)}
.boxfx .flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(255,211,77,.55),rgba(255,211,77,0) 55%);opacity:0}
.boxfx.open .flash{animation:boxFlash .5s ease-out}
.boxfx.jackpot .flash{animation:boxFlash .8s ease-out}
.boxfx.nf .flash{display:none} /* Reduce flashing */
.boxfx .bigbox{position:absolute;left:50%;top:42%;width:84px;height:60px;margin:-30px 0 0 -42px;image-rendering:pixelated;animation:boxShake .65s steps(1) both}
.boxfx.open .bigbox{animation:boxPop .22s ease-out forwards}
.boxfx .sp{position:absolute;left:50%;top:42%;width:6px;height:6px;margin:-3px;background:var(--gold);animation:spark .9s ease-out forwards}
.boxfx .sp:nth-child(3n){background:#fff}
#s-box .up.reel{animation:cardIn .28s ease-out both}
#s-box .wrap.shake{animation:wrapShake .3s steps(1)}
@keyframes raySpin{to{transform:rotate(360deg)}}
@keyframes boxFlash{from{opacity:1}to{opacity:0}}
@keyframes boxShake{0%{transform:none}12%{transform:translate(-4px,0) rotate(-6deg)}24%{transform:translate(4px,-2px) rotate(6deg)}36%{transform:translate(-6px,0) rotate(-8deg)}48%{transform:translate(6px,-4px) rotate(8deg)}60%{transform:translate(-8px,-2px) rotate(-10deg) scale(1.05)}72%{transform:translate(8px,-6px) rotate(10deg) scale(1.1)}86%{transform:translateY(-8px) scale(1.15)}100%{transform:translateY(-8px) scale(1.15)}}
@keyframes boxPop{from{transform:translateY(-8px) scale(1.15);opacity:1}to{transform:translateY(-16px) scale(2.4);opacity:0}}
@keyframes spark{from{transform:none;opacity:1}to{transform:translate(var(--dx),var(--dy));opacity:0}}
@keyframes cardIn{from{opacity:0;transform:translateY(-28px) scale(.85)}to{opacity:1;transform:none}}
@keyframes wrapShake{0%{transform:translate(-4px,2px)}33%{transform:translate(4px,-2px)}66%{transform:translate(-2px,0)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.boxfx .bigbox,.boxfx .sp{display:none}.boxfx .rays{animation:none;transition:none}.boxfx .flash{animation:none!important}#s-box .up.reel,#s-box .wrap.shake{animation:none}}
#s-box .wrap>.eyebrow,#s-level .wrap>.eyebrow{margin-top:auto}
/* screen label with its icon: icon box and text centred on the same line */
.boxeye{display:flex;align-items:center;gap:8px;line-height:1}
.boxeye>span{display:grid;place-items:center;width:24px;height:24px;flex:none}
.boxeye img{display:block;image-rendering:pixelated}
/* Menu page layout standard (Which Car?, Where To?, Garage, Stampcard):
   header pinned at the top; the body is centred between the header and BACK when it's short, scrolls when long.
   Spacing: 24px between sections, 12px between a list's items and between a label and what it heads. */
#s-cat .wrap,#s-stamps .wrap,#s-select .wrap,#s-map .wrap{gap:24px}
#s-cat .gsec{margin-top:auto}
/* a divider under a page title (Where To?: between the title and the chapter), same line as the Stampcard scoreboard's */
.rule{flex:none;width:100%;height:1px;margin:0;border:0;background:rgba(168,161,194,.18)}
/* the Stampcard's scoreboard belongs to its header: a fixed 24px under the title; the chapter row and cards are the centred body */
#scCount{margin:0 0 -12px;font-size:8px;letter-spacing:.14em;color:var(--paper)}
#scCount span{color:var(--dim)}
.maps{gap:12px}
.howsec h3{margin:0;font:10px/1.5 var(--f-display);color:var(--sodium);letter-spacing:.08em}
.howlist{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.howlist li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:center;padding:16px;background:rgba(22,20,42,.8);box-shadow:inset 0 0 0 2px var(--line);font-size:15px;line-height:1.45;color:var(--text)}
.howlist li b{display:block;color:var(--paper);font-weight:400;font-family:var(--f-display);font-size:9px;letter-spacing:.06em;margin-bottom:6px}
.howlist .hi{width:44px;height:44px;display:grid;place-items:center;background:radial-gradient(closest-side,rgba(255,174,66,.15),rgba(255,174,66,.09) 35%,rgba(255,174,66,.03) 70%,transparent)}
.howlist .hi img{image-rendering:pixelated}
.howlist .hi:has(img+img){display:flex;align-items:center;justify-content:center;gap:3px}
.howlist .hi span{font:20px/1 var(--f-body);color:var(--sodium)}
/* first-run hint */
#hint{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 150px);display:grid;justify-items:center;gap:6px;pointer-events:none;text-align:center;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
#hint b{font:11px/1.6 var(--f-display);color:var(--paper);text-shadow:2px 2px 0 var(--night);letter-spacing:.06em}
#hint span{font-size:14px;color:var(--text);text-shadow:1px 1px 0 var(--night)}
#hint i{width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--sodium);animation:hintDrag 1.6s ease-in-out infinite}
#hint.out{opacity:0;transition:opacity .5s}
@keyframes hintDrag{0%,100%{transform:translateX(-30px)}50%{transform:translateX(30px)}}
/* stamp card */
.cardlist{display:grid;gap:12px}
.scs{display:grid;justify-items:center;align-content:start;gap:12px}
/* a location seal and its CLEARED caption, stamped as one impression (same ink, same tilt) */
button.stamp,button.sealmark{appearance:none;-webkit-appearance:none;border:0;padding:0;background:none;font:inherit;cursor:pointer}
button.stamp:focus-visible,button.sealmark:focus-visible{outline:2px solid var(--mist);outline-offset:3px}
.sealmark{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--tail);transform:rotate(var(--tilt));transform-origin:50% 40%;filter:url(#inkL)}
.sealmark.dawn{color:#e9b63c}
.sealmark .seal{display:block;overflow:visible}
.stag{font:7px/1 var(--f-display);letter-spacing:.1em;white-space:nowrap}
.sc.stamped{background:rgba(64,28,52,.72)}
@keyframes foil{from{background-position:0 0}to{background-position:300% 0}}
.sc{display:grid;grid-template-columns:78px minmax(0,1fr);gap:14px;align-items:center;padding:22px 14px;background:rgba(22,20,42,.72)}
.sc .stamp{width:72px;height:72px;font-size:30px}
/* the printed slot: the same faint dashed circle on every card, under the seal once it's stamped */
.scs{position:relative}
.scs .sslot{position:absolute;top:0;left:50%;width:72px;height:72px;margin-left:-36px;border-radius:50%;outline:2px dashed rgba(168,161,194,.3);outline-offset:-2px;pointer-events:none}
.sc .stamp.empty{outline:0;background:none;font-size:28px}
.sc .nobest{margin:10px 0 0;font:14px/1.2 var(--f-body);color:rgba(168,161,194,.55)}
.sc{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:filter .08s}
.sc:active{filter:brightness(1.25)}
.sc>*:not(.ghost){position:relative}
.sc .ghost{position:absolute;right:-52px;top:-10px;width:184px;height:98px;image-rendering:pixelated;opacity:.58;pointer-events:none}
/* small phones: smaller cars, so they stay clear of the location names */
@media (max-width:374px){.sc .ghost{right:-40px;top:-6px;width:130px;height:69px}}
.sc .ghost.unmet{opacity:1;background:#332e52;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.stamp.empty{color:rgba(168,161,194,.35);box-shadow:none;outline:2px dashed rgba(168,161,194,.45);outline-offset:-2px;font-size:22px}
/* card type system: DotGothic for content, Press Start only for small caps labels */
.sc .jp{font:22px/1.1 var(--f-body);color:var(--sodium)}
.sc .sub{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:6px;font:7px/1 var(--f-display);letter-spacing:.1em;color:var(--dim)}
.sc .sub .nm{color:var(--paper)}
.sc .meta{margin-top:8px;font:14px/1.4 var(--f-body);color:var(--dim)}
.sc .meta b{font-weight:400;color:var(--paper)}
.sc .nil{color:rgba(168,161,194,.4)}
.sc .bests{display:flex;align-items:center;gap:6px;margin:20px 0 0;font:8px/1 var(--f-display);letter-spacing:.14em;color:var(--paper)}
.sc .bests::after{content:"";flex:1;height:1px;background:rgba(168,161,194,.2)}
.sc .bests .tro{flex:none;color:var(--paper)}
/* labels on one row and values on the next, so values line up even when a label wraps */
.sc dl{display:grid;grid-template-columns:repeat(3,auto);grid-template-rows:auto auto;grid-auto-flow:column;justify-content:start;column-gap:28px;margin:10px 0 0}
.sc dl>div{display:contents}
.sc dt{align-self:end;font:6px/1.3 var(--f-display);color:var(--dim);letter-spacing:.08em}
.sc dd{align-self:start;margin:6px 0 0;font:14px/1 var(--f-body);font-variant-numeric:tabular-nums;color:var(--paper);white-space:nowrap}
/* night-clock icons sit on the number's baseline */
.sc dd .clk,.sc .dawnchip{display:inline-flex;align-items:baseline;gap:5px}
.sc .dawnchip{color:var(--gold)}
.sc .vic{align-self:baseline}
.progress{display:grid;gap:8px;padding-bottom:16px;border-bottom:1px solid rgba(168,161,194,.2)}
.progress p{margin:0;font-size:15px;color:var(--text)}
.pcount{display:flex;align-items:baseline;gap:8px}
.ptitle{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:0 0 -8px;font:15px/1.3 var(--f-display);color:var(--paper);letter-spacing:.04em}
.ptitle .jp{font-size:1.5em;color:var(--sodium);top:-.06em}
.pcounts{display:flex;flex-wrap:wrap;gap:8px 28px}
.pcount b{font:10px/1 var(--f-display);font-weight:400;color:var(--paper)}
.pcount b span{color:var(--dim)}
.pcount em{font:8px/1 var(--f-display);font-style:normal;color:var(--dim);letter-spacing:.12em}
.pbar{height:8px;background:rgba(59,53,88,.6)}
.pbar i{display:block;height:100%;background:var(--tail)}
/* night timeline on results */
.nightline{display:grid;gap:12px;padding:16px 14px;background:rgba(22,20,42,.72)}
.nightline .cap{font:7px/1 var(--f-display);color:var(--dim);letter-spacing:.08em}
.nightline .cap b{display:block;margin-top:8px;font:16px/1 var(--f-display);font-weight:400;color:var(--paper);font-variant-numeric:tabular-nums}
.nightline .cap b{display:flex;align-items:center;gap:6px;line-height:16px}
.nightline .cap b.dawn .vic{color:var(--gold)} /* the sun carries the gold; the time stays paper */
.nightline .cap .vic{flex:none;position:relative;top:-1px;width:auto;height:16px}
.nends{position:relative;display:flex;justify-content:space-between;margin-top:6px;font:7px/1 var(--f-display);color:var(--dim)}
/* the challenger-beaten moment: gold time above a gold tick, BEAT CHALLENGER under it */
.nends .beat{position:absolute;bottom:0;transform:translateX(-50%);color:var(--paper);white-space:nowrap}
.nends{margin-bottom:-6px} /* the hours sit close over the line */
.nline .tick{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:var(--gold)}
.nline.dawn .tick{background:var(--paper)}
.nbeat{position:relative;height:17px;margin-top:0;font:7px/10px var(--f-display);letter-spacing:.04em;color:var(--paper)}
.nbeat span{position:absolute;white-space:nowrap}
.nbeat .c{transform:translateX(-50%);text-align:center}
.nbeat .l{margin-left:-1px}
.nbeat .r{transform:translateX(-100%);margin-left:1px;text-align:right}
/* a small pixel pointer above the label, aimed at the moment on the line */
.nbeat span::before{content:"";position:absolute;bottom:calc(100% + 3px);width:9px;height:5px;background:currentColor;clip-path:polygon(50% 0,100% 100%,0 100%)}
.nbeat .c::before{left:calc(50% - 4.5px)} .nbeat .l::before{left:-3.5px} .nbeat .r::before{right:-5.5px}
/* the night as a line: the part you drove lit, the rest faintly night-to-dawn; gold all the way when you reach dawn */
.nline{position:relative;height:8px;margin:0;background:linear-gradient(90deg,#3b3558,#24346a 70%,#c46a6a 92%,#ffae42)}
.nline::before{content:"";position:absolute;inset:0;background:rgba(12,11,22,.5)}
.nline .lit{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#a8a1c2,#f3ead6)}
.nline .me{position:absolute;top:-5px;bottom:-5px;width:2px;margin-left:-1px;background:var(--paper)} /* where you got to: a tick like the challenger's, a little taller */
.nline.dawn .lit{background:linear-gradient(90deg,#c9a33a,var(--gold));overflow:hidden}
/* where you got to: a small pointer above the end of the lit part */
.nline .you{position:absolute;top:calc(100% + 4px);width:9px;height:5px;margin-left:-4.5px;background:var(--paper);clip-path:polygon(50% 0,100% 100%,0 100%)} /* under the line, like the challenger's */
.nline.dawn .you{background:var(--gold)}
.nends .dawnlab{display:flex;align-items:flex-end;gap:5px;color:var(--gold)}
.nends .dawnlab .vic{width:auto;height:9px}
/* after the challenger falls the rest of your night is in stamp red (Overtime), and so is your end pointer */
.nline .ot{position:absolute;top:0;bottom:0;background:linear-gradient(90deg,#c8243f,var(--tail))}
.nline .you.red{background:var(--tail)}
/* at dawn the bar is all gold, so a thin white dashed cut marks where you beat the challenger */
.nline .dash{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:repeating-linear-gradient(to bottom,var(--paper) 0 2px,transparent 2px 4px)}
/* the gold bar glints: a soft highlight swooshes across once, then rests */
.nline.dawn .lit::after{content:"";position:absolute;top:-2px;bottom:-2px;left:-45%;width:40%;background:linear-gradient(90deg,transparent,rgba(255,248,220,.25) 30%,rgba(255,252,236,.9) 50%,rgba(255,248,220,.25) 70%,transparent);animation:glint 3.6s infinite}
/* one soft swoosh: eases in, rushes across, eases out; then rests */
@keyframes glint{0%{transform:translateX(0);animation-timing-function:cubic-bezier(.55,0,.35,1)}28%,100%{transform:translateX(370%)}}
.best{font:8px/1.7 var(--f-display);color:var(--dim);letter-spacing:.08em}

.cars,.ups{display:flex;flex-direction:column;gap:10px}
.btn.skip{margin-top:16px;width:100%}
.car{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:center;text-align:left;padding:12px;background:var(--panel);border:0;box-shadow:inset 0 0 0 2px var(--line);cursor:pointer}
.car[aria-pressed="true"]{box-shadow:inset 0 0 0 3px var(--sodium);background:rgba(40,28,18,.85)}
.car canvas{width:36px;height:60px;image-rendering:pixelated;justify-self:center}
.car .nm{font:12px/1.3 var(--f-display)}
.car .kana{font-size:13px;color:var(--dim);margin-left:6px;font-family:var(--f-body)}
.car .ds{font-size:14px;color:var(--dim);margin:6px 0 10px;line-height:1.4}
.stats{display:grid;grid-template-columns:auto 1fr;gap:5px 10px;align-items:center}
.stats span{font:7px/1 var(--f-display);color:var(--dim);letter-spacing:.08em}
.pips{display:flex;gap:3px}
.pips i{width:12px;height:6px;background:var(--line)}
.pips i.on{background:var(--sodium)}
.start{font-size:14px;margin-top:10px;color:var(--text)}

.bigkanji{font:clamp(64px,22vw,104px)/1 var(--f-body);color:var(--sodium);text-shadow:4px 4px 0 var(--tail-deep)}
.obj{display:grid;gap:6px;padding:12px 14px;box-shadow:inset 0 0 0 2px var(--line);background:var(--panel)}
.obj span{font:7px/1 var(--f-display);color:var(--dim);letter-spacing:.12em}
.obj b{font-weight:400;font-size:16px}
.tip{font-size:15px;color:var(--text)}
.routemap{position:relative;background:rgba(22,20,42,.8);box-shadow:inset 0 0 0 2px var(--line);padding:2px}
.routemap canvas{display:block;width:100%;aspect-ratio:2/1;image-rendering:pixelated}
.routemap i{position:absolute;font:7px/1 var(--f-display);font-style:normal;letter-spacing:.1em;color:var(--paper);text-shadow:1px 1px 0 var(--night),-1px -1px 0 var(--night),1px -1px 0 var(--night),-1px 1px 0 var(--night);white-space:nowrap;pointer-events:none}
.routemap i.c{transform:translate(-50%,-50%)}
.routemap i.jp{font:11px/1 var(--f-body);letter-spacing:.04em}
.gorow{display:flex;gap:10px;margin-top:10px}
#inNight{display:flex;align-items:center;gap:8px;font:9px/1.7 var(--f-display);letter-spacing:.14em;color:var(--dim)}
#inNight .pips{display:flex;gap:3px}
#inNight .pips i{width:10px;height:6px;background:var(--line)}
#inNight .pips i.on{background:var(--tail)}
.gorow .btn.sq{flex:0 0 56px;padding-left:0;padding-right:0}
.gorow #btnGo{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:12px;font-size:14px}
#btnGo svg{width:18px;height:18px;margin-top:-2px}

.up{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center;text-align:left;padding:12px;background:var(--panel);border:0;box-shadow:inset 0 0 0 2px var(--line);cursor:pointer}
.up:active{box-shadow:inset 0 0 0 3px var(--sodium)}
.badge{width:44px;height:44px;display:grid;place-items:center;font:10px/1 var(--f-display);background:var(--night);box-shadow:inset 0 0 0 2px var(--tail);color:var(--paper)}
.badge.p{box-shadow:inset 0 0 0 2px var(--mist)}
.badge.h{box-shadow:inset 0 0 0 2px var(--sodium)}
.badge .glyph{font:24px/1 var(--f-body);font-weight:400}
.badge.fame{box-shadow:inset 0 0 0 2px var(--gold);color:var(--gold)}
.badge.prov{box-shadow:inset 0 0 0 2px var(--tail);color:var(--tail);background:#2a0e18}
.badge.evo{box-shadow:inset 0 0 0 2px var(--gold),0 0 14px rgba(255,211,77,.45);background:#2a2110}
.ico{width:36px;height:36px;image-rendering:pixelated;display:block}
.up.reel.evo{box-shadow:inset 0 0 0 3px var(--gold)}
.icons{display:flex;flex-wrap:wrap;gap:3px}
.icons i{display:block;width:20px;height:20px;padding:2px;box-sizing:border-box;background:rgba(12,11,24,.85);box-shadow:inset 0 0 0 1px var(--tail)}
.icons i.p{box-shadow:inset 0 0 0 1px var(--mist)}
.icons i.evo{box-shadow:inset 0 0 0 1px var(--gold);background:#2a2110}
.icons .ico{width:16px;height:16px}
.build .ico{width:20px;height:20px;flex:none}
.build div span{flex:1;min-width:0}
.build div.evo{box-shadow:inset 0 0 0 2px var(--gold)}
.up:disabled{opacity:.35;cursor:default}
.up.picked{box-shadow:inset 0 0 0 3px var(--sodium);opacity:1}
.nights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.night{position:relative;display:grid;gap:7px;justify-items:start;align-content:start;text-align:left;padding:10px;background:var(--panel);border:0;box-shadow:inset 0 0 0 2px var(--line);cursor:pointer;min-width:0}
.night .k{font:clamp(19px,6vw,26px)/1 var(--f-body);color:var(--sodium);white-space:nowrap}
.night .n{font:7px/1.5 var(--f-display);color:var(--paper);letter-spacing:.04em}
.night .s{font:7px/1.5 var(--f-display);color:var(--dim)}
.night.next{box-shadow:inset 0 0 0 3px var(--sodium);background:rgba(40,28,18,.88)}
.night.next .s{color:var(--sodium)}
.night.done::after{content:"認";position:absolute;right:7px;top:7px;font:16px/1 var(--f-body);color:var(--tail);transform:rotate(-10deg)}
.night:disabled{opacity:.42;cursor:not-allowed}
.night:disabled .k{color:var(--dim)}
.night:focus-visible{outline:2px solid var(--mist);outline-offset:3px}
.up.reel{cursor:default}
.maps{display:flex;flex-direction:column;gap:10px}
.map{position:relative;display:grid;gap:7px;justify-items:start;text-align:left;padding:20px 124px 20px 16px;background:var(--panel);border:0;box-shadow:inset 0 0 0 2px var(--line);cursor:pointer}
.map:active,.car:active{box-shadow:inset 0 0 0 3px var(--sodium)}
.map:focus-visible,.tab:focus-visible,.tile:focus-visible{outline:2px solid var(--mist);outline-offset:3px}
.map .k{font:34px/1 var(--f-body);color:var(--sodium);text-shadow:3px 3px 0 var(--tail-deep)}
.map .nm{font:11px/1.4 var(--f-display)}
.map .diff{display:flex;align-items:center;gap:8px;font:7px/1 var(--f-display);color:var(--dim);letter-spacing:.1em}
.map .pips{display:flex;gap:3px}
.map .pips i{width:10px;height:6px;background:var(--line)}
.map .pips i.on{background:var(--tail)}
.pips.d1 i.on{background:#4fd17a!important}.pips.d2 i.on{background:#f2e04a!important}.pips.d3 i.on{background:var(--tail)!important}
/* the place on top, then a divider, then who's waiting there: a small CHALLENGER label over the name (kanji + English, one line) */
.map .diff{width:100%;padding-bottom:10px;margin-bottom:3px;border-bottom:1px solid rgba(168,161,194,.18)}
.map .chal,.sc .chal{display:grid;gap:6px;max-width:100%}
.map .chal .cl,.sc .chal .cl{font:6px/1 var(--f-display);letter-spacing:.08em;color:var(--dim)}
.sc .chal{margin-top:16px}
.rv .jpn{font:1.4em/1 var(--f-body);color:var(--paper);vertical-align:-.1em}
.map .chal b,.sc .chal b{font:14px/1.2 var(--f-body);font-weight:400;color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* small phones: a slightly smaller map (so the name keeps one line) and a smaller stamp to match */
@media (max-width:359px){.map{padding-right:100px}.map .mini{width:72px;height:72px;margin-top:-36px}.mapseal{right:6px;top:calc(50% - 44px)}.mapseal .seal{width:34px;height:34px}}
.map .cl{font:7px/1.4 var(--f-display);color:var(--tail);letter-spacing:.08em}
.map .mini{position:absolute;right:16px;top:50%;width:96px;height:96px;margin-top:-48px;image-rendering:pixelated;box-shadow:0 0 0 2px var(--line)}
.mapseal{position:absolute;right:8px;top:calc(50% - 58px);z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;transform-origin:50% 40%;color:var(--tail);transform:rotate(var(--tilt));filter:url(#inkL) drop-shadow(0 0 1.5px #0c0b16) drop-shadow(0 0 1.5px #0c0b16);pointer-events:none}
.mapseal .seal{display:block;overflow:visible}
.map.done.dawn .mapseal{color:#e9b63c}
.mapseal .stag{display:none}
.ichal{font-size:15px;color:var(--tail)}
.tabs{display:flex;gap:8px}
.tab{flex:1;padding:12px;border:0;background:transparent;box-shadow:inset 0 0 0 2px var(--line);font:9px/1 var(--f-display);color:var(--dim);cursor:pointer;letter-spacing:.08em}
.tab[aria-selected="true"]{box-shadow:inset 0 0 0 2px var(--sodium);color:var(--sodium);background:rgba(40,28,18,.85)}
#catParts{display:grid;gap:12px}
.grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.tile{aspect-ratio:1;border:0;padding:0;display:grid;place-items:center;background:var(--panel);box-shadow:inset 0 0 0 2px var(--tail);cursor:pointer;min-width:0}
.tile.p{box-shadow:inset 0 0 0 2px var(--mist)}
.tile.unk{box-shadow:inset 0 0 0 2px var(--line)}
.tile.unk span{font:12px/1 var(--f-display);color:var(--line)}
.tile.sel{outline:2px solid var(--sodium);outline-offset:2px}
.tile .ico{width:70%;height:70%}
.detail{min-height:120px;padding:14px;background:var(--panel);box-shadow:inset 0 0 0 2px var(--line);display:grid;align-content:start;gap:8px;font-size:15px}
.detail .nm{font:11px/1.5 var(--f-display)}
.k-atk{color:#ff6b86!important;font-style:normal}
.k-tun{color:var(--mist)!important;font-style:normal}
.glabel{margin:4px 0 -4px;font:7px/1 var(--f-display);letter-spacing:.12em}
.glabel span{color:var(--dim)}
.k-gold{color:var(--gold)}
.k-stamp{color:var(--tail)}
/* chapter row: on Where To? between ‹ › arrows; on the Stampcard a plain section header over that chapter's cards */
.pager{display:flex;align-items:center;gap:10px;margin:0 0 -6px}
.pager .pg{flex:none;position:relative;width:36px;height:36px;border:0;padding:0;display:grid;place-items:center;background:rgba(22,20,42,.8);box-shadow:inset 0 0 0 2px var(--line);color:var(--paper);cursor:pointer}
.pager .pg svg{width:14px;height:14px}
/* small square controls (sound, chapter arrows): drawn at 36px, tapped at 44px through an invisible 4px ring */
.iconbtn::after,.pager .pg::after{content:"";position:absolute;inset:-4px}
/* the chapter name sits centred between the arrows, in paper; the stamps on the cards show progress, so no count.
   Same row on the Stampcard and Where To? */
.pager .chap{flex:1;flex-direction:column;justify-content:center;gap:8px;margin:0;font-size:12px;letter-spacing:.14em;color:var(--paper)}
.pager .chap::after{display:none}
.pager .chap small{position:relative;font:14px/1.2 var(--f-body);letter-spacing:0;color:var(--dim)}
/* the chapter badge hangs off the left of the name, so the name itself stays centred under CHAPTER n */
.pager .chap .lmark{position:absolute;right:100%;top:50%;margin-right:8px;transform:translateY(-50%)}
/* no chapter that way: hide the arrow but keep its space, so the chapter name stays centered */
.pager .pg[disabled]{visibility:hidden}
/* dialogue box: the speaker's portrait stands on the box; text types out at the bottom */
#dlg{position:absolute;inset:0;z-index:30;background:rgba(6,5,14,.6);cursor:pointer;outline:none;--bc:#dff3ff}
#dlg .d-stage{position:absolute;left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 24px);max-width:400px;margin:0 auto}
#dlg .d-actor{position:relative;height:128px;margin-bottom:-6px;pointer-events:none}
#dlg .d-glow{position:absolute;left:-40px;top:-30px;width:320px;height:190px;background:radial-gradient(closest-side,rgba(255,211,77,.3),rgba(255,211,77,0))}
#dlg .d-pic{position:absolute;left:0;bottom:0;width:240px;height:128px;image-rendering:pixelated;transform:scaleX(-1)}
#dlg .d-sil{background:#2b2744;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
#dlg .d-box{position:relative;min-height:104px;padding:24px 16px 14px;background:#16142a;box-shadow:inset 0 0 0 2px var(--line),0 4px 0 #2a2540;box-sizing:border-box}
#dlg .d-name{position:absolute;left:12px;top:-12px;display:flex;align-items:baseline;gap:8px;padding:6px 10px;background:#16142a;box-shadow:inset 0 0 0 2px var(--line)}
#dlg .d-name .jp{font:14px/1 var(--f-body);color:var(--bc)}
#dlg .d-name b{font:8px/1 var(--f-display);font-weight:400;letter-spacing:.1em;color:#fff}
#dlg .d-skip{position:absolute;right:12px;top:-12px;display:flex;align-items:center;gap:6px;padding:6px 10px;border:0;background:#16142a;box-shadow:inset 0 0 0 2px var(--line);color:var(--dim);font:8px/1 var(--f-display);letter-spacing:.14em;cursor:pointer}
#dlg.last .d-skip{visibility:hidden}
#dlg .d-text{margin:0;min-height:3.1em;font:17px/1.55 var(--f-body);color:#fff}
#dlg .d-text .rest{visibility:hidden}
#dlg .d-foot{display:flex;justify-content:flex-end;align-items:center;margin-top:8px}
#dlg .d-next{width:10px;height:6px;background:var(--sodium);clip-path:polygon(0 0,100% 0,50% 100%);visibility:hidden}
#dlg .ready .d-next{visibility:visible;animation:dlgNext .8s steps(2) infinite}
/* last line: a square instead of the arrow, so you know the next tap closes the box */
#dlg.last .d-next{width:7px;height:7px;clip-path:none}
#dlg.in{animation:dlgFade .18s steps(3)}
#dlg.in .d-actor{animation:dlgSlide .32s steps(6)}
@keyframes dlgFade{from{opacity:0}}
@keyframes dlgSlide{from{transform:translateX(-90px);opacity:0}}
@keyframes dlgNext{50%{transform:translateY(3px)}}
#dlg .d-car{position:absolute;inset:0}
#dlg.roar .d-car{animation:dlgRoar .07s steps(1) 0s var(--shakes,14)}
#dlg.roar .d-glow{animation:dlgGlow var(--roar,1s) steps(8)}
@keyframes dlgRoar{0%{transform:translate(0,0)}25%{transform:translate(-2px,1px)}50%{transform:translate(1px,-1px)}75%{transform:translate(2px,1px)}}
@keyframes dlgGlow{40%{transform:scale(1.15);opacity:1}0%,100%{opacity:.7}}
@media (prefers-reduced-motion: reduce){#dlg.in,#dlg.in .d-actor,#dlg .ready .d-next,#dlg.roar .d-car,#dlg.roar .d-glow{animation:none}}
#catCombos .glabel{margin-bottom:8px}
#catParts{display:grid;gap:12px}
.detail .hint{color:var(--dim)}
#catCombos{display:grid;gap:8px}
.ci{width:36px;height:36px;display:grid;place-items:center;background:var(--night);box-shadow:inset 0 0 0 1px var(--tail)}
.ci .ico{width:28px;height:28px}
/* part detail: name with its kind on the right, one row per level (combos are left for the list below: finding them is the fun) */
.detail .dh{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.detail .kind{flex:none;font-size:7px;letter-spacing:.12em}
.lvls{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:6px;align-items:baseline}
.lvls dt{font:7px/1 var(--f-display);letter-spacing:.08em;white-space:nowrap}
.lvls dd{margin:0;font-size:14px;line-height:1.4;color:var(--text)}
/* combo recipe: [attack LV5] + [tuning] = [combo]; the combo tile glows gold (gold = combos and rewards) */
.recipe{display:flex;align-items:center;gap:8px;flex:none}
.rt{position:relative;flex:none;width:40px;height:40px;display:grid;place-items:center;background:var(--night);box-shadow:inset 0 0 0 2px var(--tail)}
.rt.p{box-shadow:inset 0 0 0 2px var(--mist)}
.rt.e{box-shadow:inset 0 0 0 2px var(--line);background:var(--night)}
.rt.e.made{box-shadow:inset 0 0 0 2px var(--gold);background:radial-gradient(closest-side,rgba(255,211,77,.45),rgba(255,211,77,0)),var(--night)}
.rt.unk{box-shadow:inset 0 0 0 2px var(--line);background:var(--night)}
.rt .ico{width:30px;height:30px}
.rt .q{font:10px var(--f-display);color:var(--line)}
.rt .lv{position:absolute;right:-5px;bottom:-5px;padding:2px 2px 1px;background:var(--tail);color:#fff;font:6px/1 var(--f-display);font-style:normal}
.op{flex:none;width:10px;height:10px;color:var(--dim)}
.chint{margin:0 0 4px;font-size:14px;line-height:1.4;color:var(--dim)}
.rx{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;padding:12px;background:var(--panel);box-shadow:inset 0 0 0 2px var(--line)}
.rx .recipe{gap:6px}.rx .rt{width:32px;height:32px}.rx .rt .ico{width:24px;height:24px}.rx .rt .lv{right:-4px;bottom:-4px}
.ct{display:grid;gap:4px;min-width:0}
.ct .nm{font:9px/1.4 var(--f-display)}
.rx.made .nm{color:var(--gold)}
.ct .ds{font-size:13px;color:var(--dim);line-height:1.35}
/* narrow phones: smaller recipe tiles so the description keeps room */
/* narrow phones: text goes under the recipe instead of being squeezed beside it */
@media (max-width:359px){.rx{grid-template-columns:1fr;gap:14px;padding:16px 14px}.rx .ct{gap:6px}}
#s-pause{background:rgba(12,11,22,.9)}
#s-pause .wrap{gap:12px}
/* pause: centred block (icon label, title, MY CAR / SOUND tabs, pane) above the pinned QUIT RUN / RESUME.
   Both panes take MY CAR's height, so the tabs never move when you switch. 24 between sections, 12 inside. */
#s-pause .wrap{margin:0 auto;min-height:100%;align-self:flex-start;gap:0}
#s-pause .wrap>.eyebrow{margin-top:auto;margin-bottom:8px}
.pwhere{margin:6px 0 0;font-size:15px;color:var(--sodium)}
#pauseTabs{margin:20px 0 24px}
#paneCar{display:grid;gap:24px}
#buildList{display:grid;gap:12px}
#buildList .glabel{margin:0}
#buildList .slots+.glabel{margin-top:12px}
#paneSnd #sndPanel{position:static;width:auto;padding:16px;background:rgba(22,20,42,.8);box-shadow:inset 0 0 0 2px var(--line)}
#paneSnd #sndPanel>.eyebrow:not(.sub){display:none}
/* part tiles like the tray: icon over five level dots (red attack, cyan tuning, gold combo); empty slots dashed.
   Six per row, or four bigger ones per row on narrow phones */
.slots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
/* six tiles need 328px; narrower phones get four bigger tiles per row instead */
@media (max-width:359px){.slots{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}}
.slot2{aspect-ratio:1;display:grid;justify-items:center;align-content:center;gap:6px;background:var(--night);box-shadow:inset 0 0 0 2px var(--tail)}
.slot2.p{box-shadow:inset 0 0 0 2px var(--mist)}
.slot2.evo{box-shadow:inset 0 0 0 2px var(--gold);background:radial-gradient(closest-side,rgba(255,211,77,.4),rgba(255,211,77,0)),var(--night)}
.slot2.empty{box-shadow:none;outline:2px dashed var(--line);outline-offset:-2px;background:transparent}
.slot2 .ico{width:30px;height:30px}
.slot2 .pp2{display:flex;gap:2px;width:72%}
.slot2 .pp2 u{flex:1;height:4px;background:var(--line);text-decoration:none}
.slot2 .pp2 u.on{background:var(--tail)}
.slot2.p .pp2 u.on{background:var(--mist)}
.slot2.evo .pp2 u{background:var(--gold)}
/* PARTS & COMBOS: a row that opens the Garage's MY CAR tab */
.gcard{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;padding:12px;border:0;background:var(--panel);box-shadow:inset 0 0 0 2px var(--line);text-align:left;color:var(--text);cursor:pointer}
.gcard b{display:block;font:9px/1.5 var(--f-display);font-weight:400;color:var(--paper)}
.gcard span span{font-size:14px;color:var(--dim)}
.gcard .gi{display:grid;place-items:center;height:40px}
.gcard .gi img{display:block;image-rendering:pixelated}
.gcard .chev{display:grid;color:var(--text)}
#bossIntro{position:absolute;inset:0;z-index:20;overflow:hidden;background:rgba(6,5,14,.6);--bc:#dff3ff;cursor:pointer}
#bossIntro .bi-band{position:absolute;left:-15%;right:-15%;top:26%;height:46%;transform:skewY(-9deg);background:linear-gradient(180deg,#0c0a1a 0%,#151129 55%,color-mix(in srgb,var(--bc) 22%,#151129) 100%);box-shadow:inset 0 4px 0 var(--bc),inset 0 -4px 0 var(--bc),0 0 60px color-mix(in srgb,var(--bc) 35%,transparent);overflow:hidden}
#bossIntro .bi-lines{position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0 13px,color-mix(in srgb,var(--bc) 30%,transparent) 13px 15px,transparent 15px 31px,rgba(255,255,255,.08) 31px 32px);background-size:100% 64px;-webkit-mask:linear-gradient(90deg,transparent,#000 40%,#000);mask:linear-gradient(90deg,transparent,#000 40%,#000)}
#bossIntro .bi-streak{position:absolute;height:2px;background:linear-gradient(90deg,transparent,var(--bc));opacity:.7}
#bossIntro .bi-text{position:absolute;left:max(18px,env(safe-area-inset-left,0px));right:max(18px,env(safe-area-inset-right,0px));top:calc(26% + 28px);display:grid;gap:6px;max-width:330px}
#bossIntro .bi-eye{margin:0;font:9px/1.6 var(--f-display);letter-spacing:.16em;color:var(--tail)}
#bossIntro .bi-jp{font:44px/1 var(--f-body);color:var(--bc);text-shadow:3px 3px 0 #06050c}
#bossIntro .bi-name{font:17px/1.35 var(--f-display);color:#fff;text-shadow:3px 3px 0 #06050c}
#bossIntro .bi-car{margin:0;font-size:13px;color:var(--dim)}
#bossIntro .bi-tip{margin:0;font-size:14px;color:var(--text)}
#biPic{position:absolute;right:-2%;top:calc(26% + 46% - 10px);transform:translateY(-100%);width:min(96vw,560px);image-rendering:pixelated;filter:drop-shadow(0 0 18px color-mix(in srgb,var(--bc) 55%,transparent))}
#bossIntro .bi-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
#bossIntro .bi-skip{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 28px);margin:0;text-align:center;font:8px/1 var(--f-display);letter-spacing:.14em;color:var(--dim)}
#bossIntro.run .bi-band{animation:biBand .16s steps(4) both}
#bossIntro.run .bi-lines{animation:biLines .35s linear infinite}
#bossIntro.run .bi-flash{animation:biFlash .5s steps(5) both}
#bossIntro.run{animation:biShake .12s steps(3) 2,biShake .12s steps(3) .38s 2}
#bossIntro.run .bi-text{animation:biL .22s steps(5) .38s both}
#bossIntro.run #biPic{animation:biR .26s cubic-bezier(.2,1.5,.4,1) .38s both}
#bossIntro.run .bi-streak{animation:biStreak .5s linear infinite}
#bossIntro.out .bi-band,#bossIntro.out .bi-text,#bossIntro.out #biPic{animation:biOut .25s steps(5) both}
#bossIntro.out{background:transparent;transition:background .25s}
@keyframes biBand{from{transform:skewY(-9deg) scaleY(0)}to{transform:skewY(-9deg) scaleY(1)}}
@keyframes biLines{to{background-position:0 64px}}
@keyframes biFlash{0%{opacity:.9}30%{opacity:0}70%{opacity:0}76%{opacity:.75}100%{opacity:0}}
@keyframes biShake{0%{transform:translate(4px,-3px)}50%{transform:translate(-4px,3px)}100%{transform:none}}
@keyframes biL{from{transform:translateX(-110%)}to{transform:none}}
@keyframes biR{from{transform:translate(110%,-100%)}to{transform:translateY(-100%)}}
@keyframes biStreak{from{transform:translateX(120vw)}to{transform:translateX(-140vw)}}
@keyframes biOut{to{transform:translateX(-120%);opacity:0}}
@media (max-height:760px){#bossIntro .bi-band{top:15%;height:64%}#bossIntro .bi-text{top:calc(15% + 22px)}#bossIntro .bi-jp{font-size:36px}#bossIntro .bi-car{display:none}#biPic{top:calc(15% + 64% - 8px);width:min(84vw,520px)}}
@media (prefers-reduced-motion: reduce){#bossIntro.run,#bossIntro.run *{animation:none!important}}
.up.reel.done:not(.evo){box-shadow:inset 0 0 0 2px var(--line)}
.up .nm{font:10px/1.5 var(--f-display)}
/* every card in a list is as tall as the tallest; content centred; the status chip stays pinned top-right */
#upList,#boxList{display:grid;grid-auto-rows:1fr}
.up{position:relative}
.up .hd{display:block;padding-right:52px}
.up .lv{position:absolute;top:12px;right:12px;font:7px/1 var(--f-display);padding:3px 4px 2px;background:var(--line);color:#fff}
.up .lv:empty{display:none}
.up .lv.lvl{background:#a8a2bb;color:#0c0b16}
.up .lv.gold{background:var(--gold);color:#0c0b16}
.up .lv.new{background:#7d98ff;color:#0c0b16}
.up .ds{font-size:14px;color:var(--dim);margin-top:4px;line-height:1.4}

.build{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.build div{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;background:var(--panel);box-shadow:inset 0 0 0 2px var(--line);font-size:14px;min-width:0}
.build b{font:7px/1.6 var(--f-display);color:var(--sodium);font-weight:400;white-space:nowrap}
.empty{font-size:14px;color:var(--dim)}

.stamps{display:flex;gap:14px}
.stamp{position:relative;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;box-sizing:border-box;font:30px/1 var(--f-body);color:transparent;box-shadow:inset 0 0 0 2px var(--line);--ink:var(--tail)}
.k{display:block;width:max-content;height:1em;line-height:1em;text-align:center}
.k.nin{transform:translate(var(--kx-nin),var(--ky-nin))}
.k.mi{transform:translate(var(--kx-mi),var(--ky-mi))}
.stamp.on{color:var(--ink);box-shadow:inset 0 0 0 4px var(--ink);transform:rotate(-8deg);filter:url(#ink)}
.stamp.on,.minihanko,#bossIntro .bi-hanko{-webkit-mask-image:var(--grain);mask-image:var(--grain);-webkit-mask-size:40px 40px;mask-size:40px 40px}
.stamp.dawn{--ink:#e9b63c;overflow:hidden}
@keyframes sheen{from{background-position:120% 0}to{background-position:-120% 0}}
.stampwrap{position:relative}
.stamp.on:has(.seal){overflow:visible;border-radius:0;box-shadow:none;transform:rotate(var(--tilt));filter:url(#inkL);-webkit-mask-image:none;mask-image:none}
.stamp .seal{display:block;overflow:visible}
.stamp.new{animation:inkIn 1s linear .3s both}
.stamp.new:has(.seal){animation:sealIn 1s linear .3s both}
@keyframes sealIn{0%,46%{opacity:0;transform:rotate(var(--tilt))}48%{opacity:1;transform:rotate(var(--tilt)) scale(1.08)}60%,100%{opacity:1;transform:rotate(var(--tilt))}}
.stamp.new+.tool,.tool{position:absolute;left:50%;top:50%;width:40px;height:58px;margin:-62px 0 0 -20px;border-radius:7px 7px 3px 3px;background:linear-gradient(90deg,#24140f,#6b4330 38%,#3a2219 70%,#1c0f0b);box-shadow:inset 0 -7px 0 var(--ink,#ff2d55),inset 0 3px 0 rgba(255,255,255,.18);pointer-events:none;animation:toolDrop 1s cubic-bezier(.5,0,.6,1) .3s both}
@keyframes toolDrop{0%{transform:translateY(-70px);opacity:0}15%{opacity:1}45%{transform:translateY(34px) scaleY(1)}52%{transform:translateY(34px) scaleY(.92)}62%{transform:translateY(34px)}100%{transform:translateY(-90px);opacity:0}}
@keyframes inkIn{0%,46%{color:transparent;box-shadow:inset 0 0 0 4px transparent;transform:rotate(-8deg)}48%{color:var(--ink);box-shadow:inset 0 0 0 4px var(--ink);transform:rotate(-8deg) scale(1.08)}60%,100%{color:var(--ink);box-shadow:inset 0 0 0 4px var(--ink);transform:rotate(-8deg)}}
@keyframes stamp{from{transform:scale(2.2) rotate(-20deg);opacity:0}to{transform:rotate(-8deg);opacity:1}}
.stats2{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
.stats2 div{padding:10px;background:rgba(22,20,42,.72);display:grid;gap:8px;min-width:0;align-content:space-between}
.stats2 span{font:7px/1.4 var(--f-display);color:var(--dim);letter-spacing:.03em}
.stats2 b{font:13px/1 var(--f-display);font-weight:400;font-variant-numeric:tabular-nums}
.stats2 em{display:block;margin-top:6px;font:6px/1 var(--f-display);font-style:normal;color:var(--tail);letter-spacing:.08em}
.stats2 em.nb{color:var(--gold)}
.stats2 b:has(em.none){align-self:end} .stats2 em.none{margin:0;font:12px/1.3 var(--f-body);letter-spacing:0;color:var(--dim)} /* a note, not a number: body font */
/* result screens: buttons pinned at the bottom like BACK; the content sits centered in the space above */
#s-clear .wrap,#s-over .wrap{margin:0 auto;min-height:100%;align-self:flex-start}
#s-clear .wrap>:first-child,#s-over .wrap>:first-child{margin-top:auto}
/* the result's own stamp, big, pressed into the open space above the title */
#clStamps,#ovStamps{display:flex;justify-content:flex-end;margin:0 6px 4px 0;position:relative;top:-44px;margin-bottom:-40px}
#s-clear .wrap>#clStats,#s-over .wrap>#ovStats{margin-bottom:56px} /* lifts the centered block so stamp and content sit higher */
/* short phones: the page scrolls, so keep the stamp below the sound button instead of rising into it */
@media (max-height:740px){#s-clear .wrap>#clStamps,#s-over .wrap>#ovStamps{margin-top:40px;top:0;margin-bottom:12px}}
/* stamp and CLEARED are one impression: the wrapper carries the tilt, the ink filter and the press */
#clStamps .stampwrap,#ovStamps .stampwrap{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ink);transform:rotate(var(--tilt));transform-origin:50% 40%;filter:url(#inkL)}
#clStamps .stamp,#clStamps .stamp.on:has(.seal),#ovStamps .stamp,#ovStamps .stamp.on:has(.seal){width:96px;height:96px;transform:none;filter:none}
#clStamps .stamp.new:has(.seal),#ovStamps .stamp.new:has(.seal){animation:pressIn 1s linear .3s both}
#clStamps .stag,#ovStamps .stag{font-size:10px;letter-spacing:.12em;animation:pressIn 1s linear .3s both}
@keyframes pressIn{0%,46%{opacity:0;transform:scale(1)}48%{opacity:1;transform:scale(1.08)}60%,100%{opacity:1;transform:none}}
#clStamps .tool,#ovStamps .tool{width:50px;height:72px;margin:-80px 0 0 -25px}
.big{font:clamp(26px,9vw,40px)/1.2 var(--f-display);color:var(--tail);text-shadow:4px 4px 0 var(--night)}
.big.gold{color:var(--sodium)}
/* end screens: how it ended sits on the location line, the time you reached is the headline */
.madeit{display:block}
.eyebrow .loc{color:var(--paper)} /* the place reads first; MADE IT TO stays quiet */
/* not stamped yet: the same dashed 未 circle as the Stampcard, untilted; the hidden label keeps the layout the same as a clear */
#ovStamps .stampwrap{transform:none;filter:none}
#ovStamps .stamp.empty{width:96px;height:96px;font-size:40px}
#ovStamps .stag{visibility:hidden}
/* sunrise: the sky behind the result turns to morning */
/* dawn sky: still dark at the top (so the gold stamp holds), warm at the horizon behind the time, dark again under the stats */
#s-clear.day{background:linear-gradient(to bottom,rgba(30,32,70,.72),rgba(150,110,140,.4) 22%,rgba(255,176,110,.5) 38%,rgba(120,90,130,.55) 56%,rgba(12,11,22,.92) 78%)}
#app:has(#s-clear.day:not([hidden])) #cv{filter:brightness(1.3) saturate(.8)}
#s-clear.day .eyebrow{color:var(--paper);text-shadow:2px 2px 0 rgba(12,11,22,.6)}
.madeit .mi-time{display:flex;align-items:center;gap:12px;font:clamp(26px,9vw,40px)/1 var(--f-display);color:var(--paper);font-variant-numeric:tabular-nums;text-shadow:4px 4px 0 var(--night)}
.madeit .vic{flex:none;color:var(--paper);filter:drop-shadow(3px 3px 0 var(--night))}
.madeit .mi-time.dawn .vic{color:var(--gold)}
@media (prefers-reduced-motion: reduce){.nline.dawn .lit::after{display:none}#banner.warn,.stamp.new,.stamp.new:has(.seal),#clStamps .stamp.new:has(.seal),#clStamps .stag,.tool{animation:none}.tool{display:none}}
.map .rec{font:7px/1.6 var(--f-display);color:var(--paper);letter-spacing:.06em}
.map .rec em{font-style:normal;color:var(--gold)}
/* build tray: fixed slots, 6 weapons over 4 passives */
.tray{display:grid;gap:3px;justify-items:start}
.trow{display:flex;gap:3px}
.slot{position:relative;display:block;width:21px;height:25px;padding:2px 2px 7px;box-sizing:border-box;background:rgba(12,11,24,.85);box-shadow:inset 0 0 0 1px var(--tail)}
.slot .ico{display:block;width:17px;height:16px;object-fit:contain}
.slot.p{width:18px;height:22px;box-shadow:inset 0 0 0 1px var(--mist)}
.slot.p .ico{width:14px;height:13px}
.slot.evo{box-shadow:inset 0 0 0 1px var(--gold);background:#2a2110}
.slot.empty{background:rgba(12,11,24,.35);box-shadow:inset 0 0 0 1px rgba(168,161,194,.22)}
.pp{position:absolute;left:3px;right:3px;bottom:2px;height:3px;display:flex;gap:1px}
.pp u{flex:1;background:#3b3558;text-decoration:none}
.pp u.on{background:var(--tail)}
.slot.p .pp u.on{background:var(--mist)}
.slot.evo .pp u{background:var(--gold)}
.slot.new{animation:slotNew .7s steps(7)}
@keyframes slotNew{0%,30%{background:#fff;transform:scale(1.3)}100%{transform:none}}
/* night clock */
.time{display:flex;align-items:center;justify-content:center;gap:6px}
#sky{display:block;width:10px;height:10px;border-radius:50%;box-shadow:inset -3px -1px 0 0 #f3ead6;transition:all .6s}
#sky.rise{height:5px;margin-top:5px;border-radius:10px 10px 0 0;background:#ffae42;box-shadow:0 0 8px #ffae42}
.time.boss #timeTxt{color:var(--tail)}
/* defeat card extras on the challenger overlay */
#bossIntro .bi-hanko,#bossIntro .bi-actions{display:none}
#bossIntro.defeat .bi-hanko{display:grid}
#bossIntro.defeat .bi-actions{display:grid}
#bossIntro.defeat .bi-skip{display:none}
#bossIntro.defeat #biPic{filter:saturate(.55) brightness(.85) drop-shadow(0 0 14px color-mix(in srgb,var(--bc) 40%,transparent))}
#bossIntro .bi-hanko{position:absolute;right:max(22px,env(safe-area-inset-right,0px));top:calc(26% + 34px);width:92px;height:92px;place-items:center;box-sizing:border-box;border:6px solid #e0242f;border-radius:14px;color:#e0242f;background:rgba(224,36,47,.1);font:34px/1.05 var(--f-body);writing-mode:vertical-rl;text-orientation:upright;letter-spacing:.05em;transform:rotate(-12deg);text-shadow:0 0 1px #e0242f}
#bossIntro .bi-hanko{filter:url(#ink)}
#bossIntro.defeat.run .bi-hanko{animation:hanko .5s linear .7s both}
/* the defeat card stamps the location's own seal (drawn by sealSVG) */
#bossIntro .bi-hanko{border:0;border-radius:0;background:none;text-shadow:none;color:var(--tail);transform:rotate(var(--tilt,-8deg));-webkit-mask-image:none;mask-image:none}
#bossIntro .bi-hanko{height:auto;gap:7px;transform-origin:50% 40%}
#bossIntro.defeat .bi-hanko{display:flex;flex-direction:column;align-items:center;writing-mode:horizontal-tb;font:9px/1 var(--f-display)}
#bossIntro .bi-hanko .seal{display:block;width:100%;height:auto;aspect-ratio:1;overflow:visible}
#bossIntro .bi-hanko .stag{font-size:9px;text-align:center}
@media (max-height:760px){#bossIntro.defeat .bi-tip{padding-right:92px}} /* short phones: the seal sits beside this line, keep clear of it */
#bossIntro.defeat .bi-hanko{filter:url(#inkL)}
#bossIntro.defeat.run .bi-hanko{animation-name:sealSlam}
@keyframes sealSlam{0%{opacity:0;transform:rotate(var(--tilt)) scale(1)}10%{opacity:1;transform:rotate(var(--tilt)) scale(1.07)}40%,100%{opacity:1;transform:rotate(var(--tilt))}}
@keyframes hanko{0%{opacity:0;transform:rotate(-12deg) scale(1)}10%{opacity:1;transform:rotate(-12deg) scale(1.07)}40%,100%{opacity:1;transform:rotate(-12deg)}}
#bossIntro .bi-tool{display:none;position:absolute;right:calc(max(22px,env(safe-area-inset-right,0px)) + 10px);top:calc(26% + 34px - 96px);width:72px;height:120px;border-radius:12px 12px 5px 5px;background:linear-gradient(90deg,#24140f,#6b4330 38%,#3a2219 70%,#1c0f0b);box-shadow:inset 0 -10px 0 #e0242f,inset 0 4px 0 rgba(255,255,255,.18),0 10px 24px rgba(0,0,0,.5);transform:rotate(-12deg);pointer-events:none}
#bossIntro.defeat .bi-tool{display:block}
#bossIntro.defeat.run .bi-tool{animation:biTool 1.05s cubic-bezier(.5,0,.6,1) .25s both}
@keyframes biTool{0%{transform:translateY(-260px) rotate(-12deg);opacity:0}12%{opacity:1}43%{transform:translateY(96px) rotate(-12deg)}50%{transform:translateY(96px) rotate(-12deg) scaleY(.9)}62%{transform:translateY(96px) rotate(-12deg)}100%{transform:translateY(-300px) rotate(-12deg);opacity:0}}
#bossIntro.defeat.run{animation:biThud .14s steps(3) .73s 1}
@keyframes biThud{0%{transform:translate(0,4px)}50%{transform:translate(2px,-2px)}100%{transform:none}}
#bossIntro .bi-actions{position:absolute;left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 22px);margin-inline:auto;max-width:420px;gap:12px}
#bossIntro .bi-note{margin:0;font-size:14px;line-height:1.45;color:var(--paper);text-align:center;text-wrap:balance}
#bossIntro .bi-actions .row{display:grid;grid-template-columns:auto 1fr;gap:10px}
.bi-actions .btn{white-space:nowrap;padding-inline:12px}
@media (max-width:374px){.bi-actions .btn{font-size:10px;padding-inline:8px}}
#bossIntro.defeat.run .bi-actions{animation:biUp .3s steps(5) 1.1s both}
@keyframes biUp{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
@media (max-height:760px){#bossIntro .bi-hanko{top:calc(15% + 26px);width:76px;height:76px;font-size:28px}#bossIntro .bi-tool{top:calc(15% + 26px - 96px);width:60px;height:110px;right:calc(max(22px,env(safe-area-inset-right,0px)) + 8px)}}
/* dawn finish */
#dawnFx{position:absolute;inset:0;z-index:21;display:grid;place-content:center;justify-items:center;gap:10px;text-align:center;background:radial-gradient(120% 90% at 85% 0%,#fff3d6 0%,#ffb877 35%,rgba(255,120,90,.75) 65%,rgba(40,30,70,.6) 100%);pointer-events:none}
#dawnFx.run{animation:dawnIn 1.6s ease-out both}
#dawnFx .dclock{font:40px/1 var(--f-display);color:#2a1630;text-shadow:3px 3px 0 #fff3d6}
#dawnFx .dkanji{font:64px/1 var(--f-body);color:#7d1029}
#dawnFx .dword{font:13px/1 var(--f-display);letter-spacing:.3em;color:#2a1630}
@keyframes dawnIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){#bossIntro .bi-tool{display:none!important}#dawnFx.run,#bossIntro.defeat.run,#bossIntro.defeat.run .bi-hanko,#bossIntro.defeat.run .bi-actions,.slot.new{animation:none}}

/* sound button: the same corner of every menu screen (show() moves it into the open screen so it scrolls with it) */
.screen .ptitle{padding-right:56px}
/* Menu pages: the title row (or the small page label, .pin) and the tabs (or the Stampcard's chapter row) stay pinned while the page scrolls; the one-line description scrolls away.
   Bands span the full screen width; the last pinned band fades out like the BACK bar. --hh = title band height (set in show()). */
.screen{overflow-x:hidden}
.screen .wrap>:is(.ptitle,.pin){position:sticky;top:calc(-24px - env(safe-area-inset-top,0px));z-index:7;margin-top:calc(-24px - env(safe-area-inset-top,0px));padding-top:calc(24px + env(safe-area-inset-top,0px));padding-bottom:12px;margin-bottom:-20px}
.screen .wrap>:is(.ptitle,.pin)::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);background:rgba(12,11,22,.985)}
.screen .wrap>:is(.tabs,.pager){position:sticky;top:calc(var(--hh,60px) - 24px - env(safe-area-inset-top,0px));z-index:6}
.screen .wrap>:is(.tabs,.pager)::before{content:"";position:absolute;z-index:-1;top:-16px;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);background:rgba(12,11,22,.985)}
/* the bands only show once the page has scrolled (.stuck, set in menus.js); at rest the page looks as before */
.screen .wrap>:is(.ptitle,.pin)::before,.screen .wrap>:is(.tabs,.pager)::before{opacity:0;transition:opacity .15s}
.screen.stuck .wrap>:is(.ptitle,.pin)::before,.screen.stuck .wrap>:is(.tabs,.pager)::before{opacity:1}
@media (prefers-reduced-motion: reduce){.screen .wrap>:is(.ptitle,.pin)::before,.screen .wrap>:is(.tabs,.pager)::before{transition:none}}
/* and the lowest pinned band fades out over the content */
.screen.stuck .wrap:not(:has(>.tabs,>.pager))>.ptitle::before,.screen.stuck .wrap>:is(.tabs,.pager)::before{bottom:-22px;background:linear-gradient(to bottom,rgba(12,11,22,.985) calc(100% - 22px),rgba(12,11,22,0))}
/* small page labels (WHICH CAR?, WHERE TO?): same pinned band, spaced so the page looks as before at rest */
.screen .wrap>.eyebrow.pin{padding-top:0;margin-top:0;margin-bottom:-12px;top:0}
.screen .wrap>.eyebrow.pin::before{top:calc(-24px - env(safe-area-inset-top,0px))}
#btnSound{position:fixed;z-index:8}
/* the sound button is a setting for the whole game, not page content: no box, quieter icon; same 36px button and 44px tap area */
#btnSound:not(.open){background:transparent;box-shadow:none;color:var(--dim)}
.screen .wrap>.eyebrow:first-child{padding-right:56px}
/* a car's starting part on WHICH CAR?, under the divider: a quiet footnote, never bigger than the description */
.car .crec{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(168,161,194,.2)}
.car .crec .ci{width:26px;height:26px;flex:none}
.car .crec .ci .ico{width:18px;height:18px}
.car .crec .cl{display:grid;gap:5px}
.car .crec .cl span{font:6px/1 var(--f-display);color:var(--dim);letter-spacing:.08em}
.car .crec .cl b{font:14px/1.2 var(--f-body);font-weight:400;color:var(--text)}
/* car card spacing: more room around the car, stat bars stretch to the card */
.car{grid-template-columns:76px minmax(0,1fr);gap:12px;padding:16px 16px 16px 8px}
.car .stats{grid-template-columns:auto minmax(0,1fr);gap:6px 14px}
.car .pips{gap:4px}
.car .pips i{flex:1 1 0;max-width:34px;height:7px}
.car .ds{color:var(--text)}
/* your cars glow in the player color (cyan = you: XP, boost, your car), the way each rival kind glows in its own color */
.car{--fc:var(--mist)}
.car .cgl{display:grid;place-items:center;align-self:stretch;margin:-16px 0 -16px -8px;background:radial-gradient(circle 54px at 50% 50%,color-mix(in srgb,var(--fc) 30%,transparent),color-mix(in srgb,var(--fc) 20%,transparent) 25%,color-mix(in srgb,var(--fc) 10%,transparent) 50%,color-mix(in srgb,var(--fc) 4%,transparent) 72%,color-mix(in srgb,var(--fc) 1%,transparent) 88%,transparent)}
.car .cgl canvas{filter:drop-shadow(0 3px 0 rgba(0,0,0,.45))}
/* stamp card summary: one bar */
/* stats are information, not buttons: no box, just a scoreboard row between two thin rules */
.sbar{display:flex;align-items:stretch;justify-content:space-between;padding:14px 0;border-top:1px solid rgba(168,161,194,.18);border-bottom:1px solid rgba(168,161,194,.18)}
.sbar>div{display:grid;gap:9px;min-width:0;flex:1 1 auto;padding:0 10px}
.sbar>div+div{border-left:1px solid rgba(168,161,194,.18)}
.sbar>div:first-child{padding-left:0}
.sbar>div:last-child{padding-right:0}
@media (max-width:374px){.sbar b{font-size:11px}.sbar>div{padding:0 7px}}
.sbar span{font:6px/1 var(--f-display);color:var(--dim);letter-spacing:.08em;white-space:nowrap}
.sbar b{font:14px/1 var(--f-display);font-weight:400;color:var(--paper);font-variant-numeric:tabular-nums;white-space:nowrap}
.sbar b small{font-size:inherit;color:var(--dim)}
.sbar .t-st span{color:var(--tail)}
.sbar .t-gd span{color:#e9b63c}
.sbar .t-fm span{color:var(--gold)}
.sbar .t-total{flex:2 1 auto}
/* The 300 Run: full card on the Stamp Card, compact strip on WHERE TO? */
.run300{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;align-items:center;padding:14px 16px;background:rgba(22,20,42,.8);box-shadow:inset 0 0 0 2px var(--line)}
.run300 .n{grid-row:1/span 3;font:30px/1 var(--f-display);color:var(--sodium);text-shadow:3px 3px 0 var(--tail-deep)}
.run300 .nm{font:10px/1.4 var(--f-display);color:var(--paper)}
.run300 .ds{font-size:14px;line-height:1.4;color:var(--text)}
.run300 .st{display:flex;align-items:center;gap:8px;font:7px/1.4 var(--f-display);letter-spacing:.1em;color:var(--dim)}
.run300.noticed .st{color:var(--tail)}
.run300.locked .n{color:var(--line);text-shadow:none}
.run300.strip{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:4px 14px;padding:16px;background:rgba(12,11,22,.92);box-shadow:none}
.run300.strip .sign{grid-row:1/span 2;animation:none}
.run300.strip .sign .str{width:22px;height:10px}
.run300.strip .plate{padding:4px 6px 5px;font-size:11px;letter-spacing:.12em;box-shadow:inset 0 0 0 2px #6b4330,0 2px 0 rgba(0,0,0,.45)}
.run300.strip .lk{grid-row:1/span 2;grid-column:3;display:grid;place-items:center;color:var(--dim)}
.run300.strip .lk path[fill="#16142a"]{fill:#0c0b16}
.run300.strip .n{grid-row:1/span 2;font-size:14px}
.run300.strip .st{grid-row:1/span 2;grid-column:3}
.run300.strip .st span{display:none}
.chap{display:flex;align-items:center;gap:8px}
.chap::after{content:"";flex:1;height:1px;background:rgba(168,161,194,.18)}