/* The Vault (/heart/vault/): a character-select screen. Dark stage, spotlight and haze in the suit palette (bronze, ember, oxblood, gunmetal); each hero's accent only on small UI (name, emblem).
   Type: Oswald + Barlow Semi Condensed (SIL OFL, vendored in /fonts, shared with /coalition/). Motion is slow: fog drifts over 40 s, the spotlight sways over 18 s,
   and the reveal is one pass (no repeats, no flashing). */
@font-face{font-family:"Oswald";src:url(/fonts/oswald-var.woff2) format("woff2");font-weight:200 700;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow SC";src:url(/fonts/barlowsc-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow SC";src:url(/fonts/barlowsc-medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow SC";src:url(/fonts/barlowsc-semibold.woff2) format("woff2");font-weight:600;font-display:swap}
:root{--p:#f2efea;--ink:#e2ded8;--mute:#aaa59e;--dim:#7f7b76;--hot:#ff2a3c;--edge:rgba(255,255,255,.12);
 --disp:"Oswald","Arial Narrow","Roboto Condensed",Impact,sans-serif;--sans:"Barlow SC","Barlow Semi Condensed","Roboto Condensed",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
 --cut:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));--cut-s:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
 --grit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;min-height:100vh;min-height:100dvh;background:#060607;color:var(--ink);font:400 17px/1.5 var(--sans);overflow-x:hidden}
body::after{content:'';position:fixed;inset:0;z-index:50;pointer-events:none;background:var(--grit),repeating-linear-gradient(0deg,rgba(0,0,0,.24) 0 1px,transparent 1px 3px);opacity:.65;mix-blend-mode:overlay}
body.dos-on{overflow:hidden}
a{color:#ff6a5e}
/* the HQ */
#hq{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
#hq .ph{position:absolute;inset:0;background:#060607 url(/heart/art/vault/hq.webp?v=hv1) 50% 62%/cover no-repeat;filter:brightness(.78) contrast(1.08) saturate(.9)}
#hq .ph::after{content:'';position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 40%,transparent 35%,rgba(0,0,0,.75) 100%),linear-gradient(180deg,rgba(0,0,0,.55),transparent 28%,transparent 62%,rgba(0,0,0,.8))}
#hq .fog{position:absolute;left:-30%;right:-30%;bottom:-10%;height:55%;background:radial-gradient(50% 50% at 40% 60%,rgba(180,180,190,.10),transparent 70%),radial-gradient(40% 40% at 75% 70%,rgba(160,160,170,.08),transparent 70%);animation:fog 40s ease-in-out infinite alternate}
#hq .fog.b{bottom:auto;top:10%;height:45%;opacity:.6;animation-duration:52s;animation-direction:alternate-reverse}
#hq .beam{position:absolute;left:50%;top:-10%;width:70vmin;height:95%;margin-left:-35vmin;background:linear-gradient(180deg,rgba(255,240,225,.12),rgba(255,240,225,.03) 70%,transparent);clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);transform-origin:50% 0;animation:sway 18s ease-in-out infinite alternate;filter:blur(6px)}
@keyframes fog{to{transform:translateX(12%)}}@keyframes sway{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
@media (max-aspect-ratio:3/4){#hq .ph{background-image:url(/heart/art/vault/hq-m.webp?v=hv1);background-position:50% 55%}}

:root{--brz:#c08a4a;--emb:#ff9a4a;--ox:#5a1a1c;--gun:#2a2c30;--acc:#c08a4a}
body[data-mode="night"]{background:#030304}
body[data-mode="night"] #hq .ph{filter:brightness(.5) contrast(1.1) saturate(.8)}
#sel{position:relative;z-index:1;display:flex;flex-direction:column;min-height:100vh;min-height:100svh;padding:calc(8px + env(safe-area-inset-top)) 0 0}
/* header */
.top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:0 46px 0 14px}
.top .eye{margin:0 0 2px;font:600 11px/1.2 var(--disp);letter-spacing:.3em;text-transform:uppercase;color:var(--mute)}
.top .eye a{color:inherit;text-decoration:none}
h1{margin:0;font:700 26px/1 var(--disp);letter-spacing:.08em;text-transform:uppercase;color:var(--p);text-shadow:0 2px 0 #000}
h1 span{display:block;margin-top:3px;font:600 11px/1 var(--disp);letter-spacing:.34em;color:var(--brz)}
.ctl{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:7px 11px;border:0;clip-path:var(--cut-s);background:linear-gradient(180deg,#24262a,#121316);box-shadow:inset 0 0 0 1px var(--edge);color:var(--ink);font:600 12px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.chip svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.chip[aria-pressed="true"]{color:#fff;background:linear-gradient(180deg,#8a5a2b,#4a2a14);box-shadow:inset 0 0 0 1px rgba(255,190,120,.5),0 0 14px rgba(255,140,60,.22)}
.chip:focus-visible{outline:2px solid var(--emb);outline-offset:2px}
/* arena */
.arena{position:relative;flex:1;display:grid;grid-template-columns:100%;grid-template-areas:"stage" "roster" "panel"}
.stage{grid-area:stage;position:relative;height:calc(100svh - 64px - 104px - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:440px;overflow:hidden;isolation:isolate}
.spot{position:absolute;left:50%;top:-8%;width:130%;height:112%;transform:translateX(-50%);background:radial-gradient(38% 60% at 50% 22%,rgba(255,214,170,.20),rgba(255,170,110,.06) 55%,transparent 75%);pointer-events:none;z-index:-1}
.spot::before{content:'';position:absolute;left:50%;top:0;width:46%;height:100%;transform:translateX(-50%);background:linear-gradient(180deg,rgba(255,226,190,.16),rgba(255,200,150,.03) 75%,transparent);clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);filter:blur(8px)}
body[data-mode="night"] .spot{background:radial-gradient(34% 56% at 50% 24%,rgba(255,170,110,.16),rgba(120,30,30,.07) 55%,transparent 75%)}
.haze{position:absolute;inset:auto -20% 0 -20%;height:46%;z-index:-1;pointer-events:none;background:radial-gradient(40% 50% at 35% 80%,rgba(200,170,140,.10),transparent 70%),radial-gradient(40% 45% at 70% 85%,rgba(170,120,90,.09),transparent 70%);animation:fog 36s ease-in-out infinite alternate}
.floor{position:absolute;left:50%;bottom:1.5%;width:min(80%,520px);height:7%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,150,80,.28),rgba(120,40,20,.12) 60%,transparent);z-index:-1;filter:blur(3px)}
.fig{position:absolute;left:50%;bottom:0;height:100%;aspect-ratio:1212/1800;transform:translateX(-50%);transition:opacity .2s ease,transform .2s ease}
.stage.out .fig,.stage.out .plate{opacity:0}.stage.out .fig{transform:translateX(-48%)}
.plate{transition:opacity .2s ease}
.svb,.evb{position:absolute;transition:opacity .7s ease-in-out}
.svb{inset:0}
.evb{bottom:.67%;left:50%;height:calc(var(--es) * 100%);aspect-ratio:var(--ear);transform:translateX(-50%)}
.svb img,.evb img{position:absolute;inset:0;width:100%;height:100%;display:block;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.evb img{filter:drop-shadow(0 0 12px color-mix(in srgb,var(--acc) 40%,transparent))}
body.suited .evb,body:not(.suited) .svb,body:not(.suited) .hots,body:not(.suited) .hint{opacity:0;pointer-events:none}
body:not(.suited) .hots{visibility:hidden}
/* breathing: the upper body breathes on its own layer (feathered at the waist), the legs stay planted */
.br{position:absolute;inset:0;display:block;--wy:calc(var(--w) * 100%);-webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(var(--wy) - 8%),transparent calc(var(--wy) + 1%));mask-image:linear-gradient(180deg,#000 0,#000 calc(var(--wy) - 8%),transparent calc(var(--wy) + 1%));transform-origin:50% var(--wy);animation:breath 4.6s ease-in-out infinite;will-change:transform}
.evb .br{--wy:44%}
@keyframes breath{0%,100%{transform:scale(1,1)}42%{transform:scale(1.011,1.017)}58%{transform:scale(1.011,1.017)}}
.light{position:absolute;left:var(--lx);top:var(--ly);width:15%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--glow) 90%,#fff) 0,color-mix(in srgb,var(--glow) 55%,transparent) 30%,transparent 72%);mix-blend-mode:screen;opacity:.55;animation:suitlight 4.6s ease-in-out infinite;pointer-events:none}
@keyframes suitlight{0%,100%{opacity:.42}50%{opacity:.95}}
/* hotspots */
.hots{position:absolute;inset:0;transition:opacity .4s}
/* tap points: small solid dot + thin ring + soft pulse; the button itself is a generous invisible tap area (44px, 40px on wide screens). Global: suit + RIDE. */
.hs{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;display:grid;place-items:center}
.hs i{position:relative;display:block;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 40% 38%,#ffe6c4 0,#ffa860 70%,#e98a44 100%);box-shadow:0 0 0 1px rgba(16,8,4,.6),0 0 4px rgba(255,140,60,.45);pointer-events:none}
.hs i::before{content:'';position:absolute;inset:-3.5px;border-radius:50%;border:1px solid rgba(255,196,140,.62)}
.hs i::after{content:'';position:absolute;inset:-4px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,150,70,.42),rgba(255,150,70,0));animation:ring 3.2s ease-in-out infinite;pointer-events:none}
.hs:nth-child(2) i::after{animation-delay:.6s}.hs:nth-child(3) i::after{animation-delay:1.2s}.hs:nth-child(4) i::after{animation-delay:1.8s}.hs:nth-child(5) i::after{animation-delay:2.4s}
@keyframes ring{0%,100%{transform:scale(.85);opacity:.35}50%{transform:scale(1.25);opacity:.85}}
.hs:hover i::before{border-color:rgba(255,226,190,.95)}
.hs:focus-visible{outline:none}.hs:focus-visible i,.hs.open i{box-shadow:0 0 0 1px rgba(16,8,4,.6),0 0 6px rgba(255,150,70,.7)}.hs:focus-visible i::before,.hs.open i::before{inset:-4px;border:1.5px solid #fff}
.pop{position:absolute;z-index:7;width:min(270px,calc(100% - 20px));padding:13px 36px 13px 14px;clip-path:var(--cut-s);background:linear-gradient(165deg,rgba(32,24,20,.96),rgba(10,9,10,.97));box-shadow:inset 0 0 0 1px rgba(255,190,120,.35),0 12px 30px rgba(0,0,0,.6);text-align:left;animation:popin .22s ease-out}
.pop::before{content:'';position:absolute;left:0;top:0;right:0;height:2px;background:linear-gradient(90deg,var(--emb),transparent)}
@keyframes popin{from{opacity:0;transform:translateY(4px)}}
.pop h3{margin:0 0 5px;font:700 15px/1.15 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:#ffd7a8;outline:none}
.pop p{margin:0;font:500 14.5px/1.42 var(--sans);color:var(--ink)}
.pop-x{position:absolute;top:4px;right:4px;width:36px;height:36px;display:grid;place-items:center;padding:0;border:0;background:none;color:var(--mute);cursor:pointer}
.pop-x svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.8;fill:none}.pop-x:focus-visible{outline:2px solid var(--emb);outline-offset:-4px}
.hint{position:absolute;right:10px;bottom:8px;margin:0;font:600 10px/1 var(--disp);letter-spacing:.24em;text-transform:uppercase;color:var(--dim);transition:opacity .4s}
/* name plate */
.plate{position:absolute;left:12px;top:6px;max-width:58%;text-align:left;pointer-events:none}
.pf{margin:0;font:600 10.5px/1 var(--disp);letter-spacing:.3em;text-transform:uppercase;color:var(--brz)}
.plate h2{margin:4px 0 0;font:700 clamp(34px,10.5vw,74px)/.9 var(--disp);letter-spacing:.03em;text-transform:uppercase;color:var(--p);text-shadow:0 3px 0 #000,0 0 26px rgba(0,0,0,.8),0 0 30px color-mix(in srgb,var(--acc) 30%,transparent);-webkit-text-stroke:.5px rgba(255,255,255,.12)}
.plate .pw{display:flex;align-items:center;gap:7px;margin:7px 0 0;font:600 13px/1.1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.bd{flex:none;width:24px;height:24px;display:grid;place-items:center}
.bd svg{width:22px;height:22px;fill:none;stroke:var(--acc);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.who{margin:5px 0 0;font:500 13.5px/1.25 var(--sans);color:var(--mute);text-shadow:0 1px 2px #000}
/* ride */
.stage.riding .fig,.stage.riding .hint{opacity:0;pointer-events:none}.stage.riding .fig .hots{visibility:hidden}
.ride{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:0 0 1%}
.ride[hidden]{display:none}
.ride{container-type:size}.rb{position:relative;width:min(100%,calc(86cqh * 4 / 3));aspect-ratio:1800/1350;height:auto}
.rb img{display:block;width:100%;height:100%;object-fit:contain}
/* roster */
.roster{grid-area:roster;position:sticky;bottom:0;z-index:8;display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(6,6,7,.6),rgba(6,6,7,.96) 40%);border-top:1px solid rgba(192,138,74,.25);scrollbar-width:none}
.roster::-webkit-scrollbar{display:none}
.tile{position:relative;flex:0 0 auto;width:64px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer;scroll-snap-align:center;-webkit-tap-highlight-color:transparent;touch-action:manipulation;text-align:center}
.tile .ph{position:relative;display:block;width:100%;aspect-ratio:240/276;overflow:hidden;clip-path:var(--cut-s);background:radial-gradient(80% 70% at 50% 35%,rgba(192,138,74,.22),transparent 70%),linear-gradient(170deg,#1d1c1e,#09090a);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s,filter .3s;filter:brightness(.72) saturate(.85)}
.tile .te{object-position:50% 6%;transform:scale(2.6);transform-origin:50% 6%;opacity:0}
body:not(.suited) .tile .ts{opacity:0}body:not(.suited) .tile .te{opacity:1}
.tile b{display:block;margin-top:4px;font:600 9.5px/1.05 var(--disp);letter-spacing:.06em;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .no{position:absolute;top:3px;left:5px;font:700 9px/1 var(--disp);font-style:normal;color:rgba(255,255,255,.45)}
.tile:hover img,.tile:focus-visible img{filter:none}
.tile.on .ph{box-shadow:inset 0 0 0 2px #e0a35c,0 0 0 1px rgba(255,150,70,.4)}
.tile.on .ph::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#8a4a1e,#ffb062,#8a4a1e);box-shadow:0 0 10px #ff9a4a}
.tile.on img{filter:brightness(1.06)}.tile.on b{color:#ffd7a8}
.tile:focus-visible{outline:none}.tile:focus-visible .ph{box-shadow:inset 0 0 0 2px #fff}
/* panel */
.panel{grid-area:panel;padding:16px 16px calc(24px + env(safe-area-inset-bottom));text-align:left;background:linear-gradient(180deg,#0a0a0b,#060607)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
.st{display:grid;grid-template-columns:72px 1fr 18px;align-items:center;gap:8px;font:600 11px/1 var(--disp);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.st i{position:relative;height:8px;clip-path:polygon(0 0,100% 0,calc(100% - 4px) 100%,0 100%);background:rgba(255,255,255,.08)}
.st i b{position:absolute;inset:0 auto 0 0;width:calc(var(--v) * 100%);background:linear-gradient(90deg,#6a2e12,#d27a3a 60%,#ffc27a);box-shadow:0 0 8px rgba(255,140,60,.35);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.st i::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 2px),#08080a calc(10% - 2px) 10%)}
.st em{font-style:normal;color:var(--p);text-align:right}
.st-note{margin:8px 0 0;font:500 11.5px/1 var(--sans);color:var(--dim)}
.tabs{display:flex;gap:4px;margin:16px 0 12px;border-bottom:1px solid rgba(192,138,74,.3)}
.tabs [role=tab]{min-height:44px;padding:10px 16px;border:0;background:none;color:var(--mute);font:700 14px/1 var(--disp);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs [role=tab][hidden]{display:none}
.tabs [role=tab][aria-selected="true"]{color:#ffd7a8;border-bottom-color:#ff9a4a}
.tabs [role=tab]:focus-visible{outline:2px solid var(--emb);outline-offset:-3px}
#tab-origin{color:#e3a0a0}#tab-origin[aria-selected="true"]{color:#ffc7b0;border-bottom-color:#a8302c}
.o-k{margin:0;font:600 11px/1 var(--disp);letter-spacing:.3em;text-transform:uppercase;color:var(--brz)}
.o-t{margin:6px 0 10px;font:700 24px/1.05 var(--disp);letter-spacing:.04em;text-transform:uppercase;color:var(--p)}
.o-p p{margin:0 0 9px;font-size:16.5px;line-height:1.55;color:var(--ink)}
.o-how{margin:12px 0 0;padding:10px 12px;border-left:2px solid #ff9a4a;background:linear-gradient(90deg,rgba(255,154,74,.08),transparent);font-size:16px;line-height:1.5;color:var(--p)}
.o-how b{display:block;margin-bottom:3px;font:600 11px/1.2 var(--disp);letter-spacing:.24em;text-transform:uppercase;color:#ffb062}
#p-ride p{font-size:16.5px;line-height:1.5}.r-tip{color:var(--mute)}
.d-dl{margin:10px 0 0;display:grid;gap:14px}
.d-dl div{padding-left:12px;border-left:2px solid rgba(255,255,255,.12)}
.d-dl .pw{border-left-color:var(--acc)}
.d-dl dt{margin:0 0 3px;font:600 12px/1.2 var(--disp);letter-spacing:.26em;text-transform:uppercase;color:var(--acc)}
.d-dl dt span{color:var(--p);letter-spacing:.14em}
.d-dl dd{margin:0;font-size:16.5px;line-height:1.5;color:var(--ink)}
.d-dl .kr dt{color:#c9c4bd}.d-dl .kr{border-left:2px solid transparent;border-image:repeating-linear-gradient(180deg,var(--acc) 0 6px,transparent 6px 12px) 1}
.d-tags{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px}
.d-tags i{font-style:normal;padding:6px 10px;clip-path:var(--cut-s);background:linear-gradient(180deg,#25272c,#141518);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 55%,transparent);font:500 14px/1.1 var(--sans);color:var(--p)}
.d-rule{margin:18px 0 0;padding-top:12px;border-top:1px solid var(--edge);font:500 14px/1.4 var(--sans);color:var(--mute)}
.d-nav{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.d-nav .b{width:100%;min-height:52px;font-size:14px;letter-spacing:.1em;text-align:center}
.d-body .crisis{text-align:center}
.b{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:12px 18px;clip-path:var(--cut-s);border:0;background:linear-gradient(180deg,#24262a,#121316);box-shadow:inset 0 0 0 1px var(--edge);color:var(--ink);font:600 14px/1.1 var(--disp);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;text-align:center;cursor:pointer}
.b:hover,.b:focus-visible{filter:brightness(1.2);outline:none}.b:focus-visible{box-shadow:0 0 0 2px #fff inset}
.crisis{margin-top:16px;font-size:13.5px;color:var(--dim);text-align:center}.crisis a{color:var(--ink)}
/* lineup */
.lineup{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:radial-gradient(70% 60% at 50% 30%,rgba(120,70,30,.25),transparent 70%),#050506;padding:calc(14px + env(safe-area-inset-top)) 10px calc(14px + env(safe-area-inset-bottom))}
.lineup[hidden]{display:none}body.lu-on{overflow:hidden}
.lu-x{position:absolute;top:calc(8px + env(safe-area-inset-top));right:48px;width:44px;height:44px;display:grid;place-items:center;border:0;background:rgba(255,255,255,.06);color:var(--p);clip-path:var(--cut-s);cursor:pointer}
.lu-x svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none}
.lu-k{margin:6px 0 0;font:600 12px/1.2 var(--disp);letter-spacing:.3em;text-transform:uppercase;color:var(--brz);text-align:center}
.lu-row{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;align-items:end;margin-top:14px}
.lu-h{position:relative;display:flex;flex-direction:column;align-items:center;height:100%;padding:0;border:0;background:none;cursor:pointer;color:var(--ink)}
.lu-f{position:relative;flex:1;width:100%}
.lu-f>img.sv{position:absolute;left:50%;bottom:0;height:100%;width:auto;transform:translateX(-50%)}
.lu-e{position:absolute;left:50%;bottom:.67%;height:calc(var(--es) * 100%);aspect-ratio:var(--ear);transform:translateX(-50%);opacity:0}
.lu-e img{width:100%;height:100%}
body:not(.suited) .lu-f>img.sv{opacity:0}body:not(.suited) .lu-e{opacity:1}
.lu-h b{margin-top:4px;font:600 10.5px/1 var(--disp);letter-spacing:.08em;color:var(--mute)}
.lu-h:focus-visible{outline:2px solid var(--emb)}
@media (max-width:979px){.lu-row{grid-template-rows:repeat(3,1fr)}}
/* desktop: roster grid at left, the hero huge in the middle, the file at right */
@media (min-width:980px){
 #sel{height:100vh;height:100dvh;min-height:0}
 .top{padding:6px 56px 8px 24px}
 h1{font-size:30px}
 .arena{grid-template-columns:268px minmax(0,1fr) 380px;grid-template-areas:"roster stage panel";min-height:0;flex:1}
 .stage{height:auto;min-height:0}
 .roster{position:relative;bottom:auto;align-self:center;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;overflow:visible;padding:14px 14px 14px 24px;background:none;border:0}
 .tile{width:auto}.tile b{font-size:10.5px}
 .panel{overflow-y:auto;padding:22px 26px 22px 10px;background:none;scrollbar-width:thin;scrollbar-color:rgba(192,138,74,.3) transparent}
 .stats{grid-template-columns:1fr;gap:9px}
 .plate{left:16px;top:10px}
 .plate h2{font-size:clamp(48px,5vw,76px)}
 .lu-row{grid-template-columns:repeat(9,1fr);grid-template-rows:1fr;gap:0}
 .hs{width:40px;height:40px;margin:-20px 0 0 -20px}
}
@media (min-width:980px) and (max-height:620px){.tile b{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.light{opacity:.75}.br{transform:none}}
@media (max-width:599px){
 .top{align-items:center;padding-right:44px}
 .top .eye{font-size:9.5px;letter-spacing:.24em}
 h1{font-size:21px}h1 span{font-size:9.5px;letter-spacing:.28em}
 .ctl{flex-wrap:nowrap;gap:5px}
 .chip{width:38px;min-height:38px;padding:0;justify-content:center}
 .chip span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .stage{height:calc(100svh - 58px - 100px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
}
.lu-f>img.sv{height:min(100%,calc((100vw - 20px) / 9 * 2.3 / .673))}
.lu-e{height:calc(var(--es) * min(100%,calc((100vw - 20px) / 9 * 2.3 / .673)))}
@media (max-width:979px){.lu-f>img.sv{height:min(100%,calc((100vw - 20px) / 3 * 1.5 / .673))}.lu-e{height:calc(var(--es) * min(100%,calc((100vw - 20px) / 3 * 1.5 / .673)))}.lu-row{overflow:hidden}}
/* hr8: Day / Night (the Inversion). Day: warm daylight version of the room, everyone as themselves. Night: the same room flipped, oxblood and bronze, embers. */
body[data-mode="day"]{background:#17120d}
body[data-mode="day"] #hq .ph{filter:brightness(1.35) contrast(.92) saturate(.75) sepia(.45);transform:none}
body[data-mode="day"] #hq .ph::after{background:radial-gradient(120% 90% at 50% 30%,rgba(255,226,180,.20),transparent 55%,rgba(40,24,12,.55) 100%),linear-gradient(180deg,rgba(255,236,200,.10),transparent 40%,rgba(30,18,8,.6))}
body[data-mode="day"] #hq .beam{background:linear-gradient(180deg,rgba(255,236,200,.22),rgba(255,226,180,.06) 70%,transparent)}
body[data-mode="day"] .spot{background:radial-gradient(45% 70% at 50% 25%,rgba(255,226,180,.24),rgba(255,200,140,.08) 55%,transparent 78%)}
body[data-mode="day"] .floor{background:radial-gradient(closest-side,rgba(255,210,150,.28),rgba(140,90,40,.1) 60%,transparent)}
body[data-mode="day"] .roster{background:linear-gradient(180deg,rgba(23,18,13,.6),rgba(23,18,13,.96) 40%);border-top-color:rgba(255,210,150,.25)}
body[data-mode="day"] .panel{background:linear-gradient(180deg,#17120d,#100c09)}
@media (min-width:980px){body[data-mode="day"] .panel{background:none}}
body[data-mode="day"] .evb img{filter:drop-shadow(0 10px 18px rgba(0,0,0,.5))}
body[data-mode="day"] .stats,body[data-mode="day"] .st-note,body[data-mode="day"] .plate .pw,body[data-mode="day"] .embers,body[data-mode="day"] .inv{display:none}
body[data-mode="night"] #hq .ph{transform:scaleX(-1);filter:brightness(.42) contrast(1.15) saturate(.7) sepia(.35) hue-rotate(-18deg)}
body[data-mode="night"] #hq .ph::after{background:radial-gradient(110% 80% at 50% 40%,rgba(90,20,22,.25),transparent 45%,rgba(0,0,0,.85) 100%),linear-gradient(180deg,rgba(40,8,10,.5),transparent 30%,transparent 60%,rgba(0,0,0,.85))}
.embers{position:absolute;inset:0;overflow:hidden}
.embers i{position:absolute;left:var(--x);bottom:-4%;width:3px;height:3px;border-radius:50%;background:#ffb070;box-shadow:0 0 6px 1px rgba(255,120,50,.8);opacity:0;animation:ember var(--t) linear var(--d) infinite}
.embers i:nth-child(3n){width:2px;height:2px;background:#d9c4b0;box-shadow:0 0 4px rgba(220,200,180,.5)}
@keyframes ember{0%{opacity:0;transform:translate(0,0)}10%{opacity:.85}60%{opacity:.5}100%{opacity:0;transform:translate(36px,-96vh)}}
.inv{margin:10px 0 0;font:600 10px/1 var(--disp);letter-spacing:.42em;text-transform:uppercase;color:rgba(214,120,96,.75)}
.inv::before{content:'';display:inline-block;width:18px;height:1px;margin:0 8px 3px 0;background:currentColor;vertical-align:middle}
.chip.mode .moon,body[data-mode="night"] .chip.mode .sun{display:none}
body[data-mode="night"] .chip.mode .moon{display:block}
.chip.mode[aria-pressed="false"]{color:#2a1a08;background:linear-gradient(180deg,#f4d9a6,#c99a58);box-shadow:inset 0 0 0 1px rgba(255,240,210,.6),0 0 14px rgba(255,210,140,.3)}
.xo{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,#000 0,#000 60%,#000 100%);transition:opacity .36s ease}
.xo.on{opacity:1}
body.xing .fig,body.xing .plate{transition:none}
body.xing #hq .ph{transition:transform .01s .36s}
img.led{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;opacity:.5;animation:suitlight 4.6s ease-in-out infinite;pointer-events:none}
img.led[hidden]{display:none}
.d-dl .why{border-left-color:#ffb062}.d-dl .why dt{color:#ffb062}
@media (prefers-reduced-motion:reduce){.embers{display:none}img.led{opacity:.75}.xo{display:none}}
body[data-mode="day"] #hots,body[data-mode="day"] #pop,body[data-mode="day"] .hint,body[data-mode="day"] .light,body[data-mode="day"] img.led{display:none!important}
/* hr10: prev/next arrows on the stage edges (48px+ thumb targets), styled per mode */
.stage{touch-action:pan-y pinch-zoom}
.arw{position:absolute;top:52%;z-index:5;width:52px;height:64px;margin-top:-32px;display:grid;place-items:center;padding:0;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);background:linear-gradient(180deg,rgba(40,20,16,.82),rgba(12,8,8,.88));box-shadow:inset 0 0 0 1px rgba(255,150,80,.45);color:#ffb070;transition:background .2s,color .2s,transform .15s}
.arw.prev{left:6px}.arw.next{right:6px}
.arw svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(255,120,50,.7))}
.arw:hover{color:#ffd2a0;background:linear-gradient(180deg,rgba(90,34,22,.9),rgba(24,10,8,.92))}
.arw:active{transform:scale(.94)}
.arw:focus-visible{outline:2px solid var(--emb);outline-offset:2px}
body[data-mode="day"] .arw{background:linear-gradient(180deg,rgba(255,236,206,.88),rgba(214,170,112,.88));box-shadow:inset 0 0 0 1px rgba(255,248,230,.8),0 4px 14px rgba(60,30,10,.35);color:#4a2a10}
body[data-mode="day"] .arw svg{filter:none}
body[data-mode="day"] .arw:hover{background:linear-gradient(180deg,#fff2dc,#e2b77c)}
.stage.riding .arw{top:auto;bottom:10px;margin-top:0}
@media (min-width:980px){.arw{width:56px;height:76px;margin-top:-38px}.arw.prev{left:10px}.arw.next{right:10px}}
/* hr10: the Day/Night switch, big and labeled, at the top right of the stage */
.top .ctl{min-height:36px}
.dnw{position:absolute;right:10px;top:10px;z-index:6;display:flex;flex-direction:column;align-items:center;gap:5px}
.dn{position:relative;display:grid;grid-template-columns:1fr 1fr;width:168px;height:52px;padding:0;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);background:linear-gradient(180deg,#1b1415,#0b0809);box-shadow:inset 0 0 0 1px rgba(255,160,90,.5);font:700 13px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;isolation:isolate}
.dn-o{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:6px;color:rgba(241,234,216,.55);transition:color .3s}
.dn-o svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dn-o b{font-weight:700}
.dn-k{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);transition:transform .32s cubic-bezier(.4,.1,.2,1),background .32s}
.dn[aria-pressed="false"] .dn-k{transform:translateX(0);background:linear-gradient(180deg,#ffe7b8,#d9a25a)}
.dn[aria-pressed="false"] .dn-d{color:#3a2208}
.dn[aria-pressed="true"] .dn-k{transform:translateX(calc(100% - 0px));background:linear-gradient(180deg,#a2401f,#4a160c)}
.dn[aria-pressed="true"] .dn-n{color:#fff}
.dn[aria-pressed="true"]{box-shadow:inset 0 0 0 1px rgba(255,140,70,.6),0 0 22px rgba(255,90,40,.35)}
.dn[aria-pressed="false"]{background:linear-gradient(180deg,#3a2c22,#1d1611);box-shadow:inset 0 0 0 1px rgba(255,226,180,.65),0 0 22px rgba(255,210,140,.35);animation:dnpulse 2.6s ease-in-out infinite}
@keyframes dnpulse{0%,100%{box-shadow:inset 0 0 0 1px rgba(255,226,180,.65),0 0 14px rgba(255,210,140,.25)}50%{box-shadow:inset 0 0 0 1px rgba(255,236,200,.9),0 0 30px rgba(255,170,90,.6)}}
.dn:focus-visible{outline:2px solid var(--emb);outline-offset:3px}
.dn-h{margin:0;font:600 10px/1 var(--disp);letter-spacing:.26em;text-transform:uppercase;color:#ffd9a0;text-shadow:0 1px 6px rgba(0,0,0,.8);animation:dnhint 2.6s ease-in-out infinite}
@keyframes dnhint{0%,100%{opacity:.55}50%{opacity:1}}
body[data-mode="night"] .dn-h{display:none}
@media (min-width:980px){.dnw{right:14px;top:12px}.dn{width:200px;height:58px;font-size:14px}.dn-o svg{width:22px;height:22px}}
@media (max-width:379px){.dn{width:150px}}
@media (prefers-reduced-motion:reduce){.dn,.dn-h{animation:none!important}.dn-k{transition:none}}
.stage{overflow:clip}
/* hr13: Night vehicle scenes (vault-scene.js). Only heroes with a scene; everyone else keeps the Night room. */
.scn-bg,.scn-st,.scn-rain.a{display:none}
body.scn[data-mode="night"] .scn-bg,body.scn[data-mode="night"] .scn-st,body.scn[data-mode="night"] .scn-rain.a{display:block}
body.scn[data-mode="night"] #hq .ph,body.scn[data-mode="night"] #hq .embers,body.scn[data-mode="night"] #hq .fog,body.scn[data-mode="night"] #hq .beam,body.scn[data-mode="night"] .stage.scn .spot,body.scn[data-mode="night"] .stage.scn .haze,body.scn[data-mode="night"] .stage.scn .floor{display:none}
.scn-bg{position:absolute;inset:0;overflow:hidden}
.scn-plate{position:absolute;inset:0;background:#07080a var(--plate) 50% 72%/cover no-repeat}
@media (max-width:599px){.scn-plate{background-image:var(--plate-m);background-position:22% 100%}}
.scn-vig{position:absolute;inset:0;background:radial-gradient(120% 90% at 55% 55%,transparent 45%,rgba(0,0,0,.6) 100%),linear-gradient(180deg,rgba(0,0,0,.45),transparent 22%)}
.scn-fog{position:absolute;left:0;height:62%;aspect-ratio:8/1;background:var(--img) 0 0/50% 100% repeat-x;pointer-events:none;will-change:transform;animation:scnfog linear infinite}
.scn-fog.b{bottom:12%;opacity:.55;animation-duration:150s}
.scn-st{position:absolute;inset:0;z-index:0;pointer-events:none}
.scn-fogw{position:absolute;left:0;right:0;top:40%;height:60%;overflow:hidden;-webkit-mask-image:radial-gradient(var(--er,120px) calc(var(--er,120px) * .8) at var(--ex,0px) var(--ey,0px),rgba(0,0,0,.3),#000);mask-image:radial-gradient(var(--er,120px) calc(var(--er,120px) * .8) at var(--ex,0px) var(--ey,0px),rgba(0,0,0,.3),#000)}
.scn-fog.a{top:0;height:100%;opacity:.6;animation-duration:70s}
@keyframes scnfog{to{transform:translate3d(-50%,0,0)}}
.scn-bike{position:absolute}
.scn-bike img{position:absolute;inset:0;width:100%;height:100%;display:block}
.scn-bike .hl{mix-blend-mode:screen;opacity:.6}
.scn-bike .bl{mix-blend-mode:screen;opacity:.8;animation:scnbrake 3s ease-in-out infinite}
@keyframes scnbrake{0%,100%{opacity:.45}50%{opacity:1}}
.scn-rip{position:absolute;left:0;right:0;height:9%}
.scn-rip i{position:absolute;width:96px;height:36px;background:var(--img) 0 0/800% 100% no-repeat;opacity:.18;mix-blend-mode:screen;animation:scnrip var(--t) steps(8) var(--d) infinite}
.scn-rip i:nth-child(1){left:6%;top:30%}.scn-rip i:nth-child(2){left:21%;top:75%}.scn-rip i:nth-child(3){left:34%;top:15%}.scn-rip i:nth-child(4){left:47%;top:60%}.scn-rip i:nth-child(5){left:60%;top:85%}.scn-rip i:nth-child(6){left:72%;top:25%}.scn-rip i:nth-child(7){left:84%;top:65%}.scn-rip i:nth-child(8){left:12%;top:95%}.scn-rip i:nth-child(9){left:90%;top:5%}
@keyframes scnrip{to{background-position:100% 0}}
.scn-rain{position:absolute;left:0;right:0;bottom:0;top:calc(var(--T) * -1);background:var(--img) 0 0/var(--T) var(--T) repeat;pointer-events:none;mix-blend-mode:screen;will-change:transform;animation:scnrain linear infinite}
.scn-rain.b{--T:384px;opacity:.32;animation-duration:.62s}
.scn-rain.a{--T:512px;opacity:.38;animation-duration:.45s;z-index:1}
@keyframes scnrain{to{transform:translate3d(0,var(--T),0)}}
body.scn-pause .scn-fog,body.scn-pause .scn-rain,body.scn-pause .scn-rip i,body.scn-pause .scn-bike .bl{animation-play-state:paused}
.stage.scn .fig{height:80%}
.stage.riding .scn-st,.stage.riding .scn-rain.a{opacity:0}
@media (max-width:599px){.stage.scn .arw{top:auto;bottom:10px;margin-top:0}}
@media (prefers-reduced-motion:reduce){.scn-bike .bl{opacity:.85}.scn-rip{display:none}}
/* optional orb layer (vault-scene.js scene.orb): procedural light canvases on the street and the RIDE tab, and its light on the suit */
.scn-orb,.scn-orim{display:none}
body.scn-o[data-mode="night"] .scn-orb,body.scn-o[data-mode="night"] .scn-orim{display:block}
.scn-orb{position:absolute;pointer-events:none}
.scn-orb.t{inset:0;width:100%;height:100%}
.scn-orim{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:0;background:radial-gradient(circle var(--or) at var(--ox) var(--oy),var(--oa),color-mix(in srgb,var(--oc) 70%,transparent) 32%,color-mix(in srgb,var(--oc) 30%,transparent) 58%,transparent 80%);-webkit-mask-image:var(--sm);mask-image:var(--sm);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.scn-orim.e{-webkit-mask-image:var(--sm),var(--sm);mask-image:var(--sm),var(--sm);-webkit-mask-position:0 0,var(--sh) 0;mask-position:0 0,var(--sh) 0;-webkit-mask-composite:source-out;mask-composite:subtract}
/* hr16: the code-name title stays clear of the Day/Night switch (TRUE NORTH ran under it at 390px; long names wrap instead) */
.plate{max-width:min(58%,calc(100% - 198px))}
@media (max-width:379px){.plate{max-width:calc(100% - 180px)}}
@media (max-width:599px){.plate h2{font-size:clamp(28px,9vw,41px)}}
@media (min-width:980px){.plate{max-width:min(58%,calc(100% - 238px))}}
/* side info (Oct 22, v2): the main points of the file beside the hero (vault-side.js). Left card hangs under the name plate, right card under the
   Day/Night switch; small-caps labels (STRUGGLE / POWER / ORIGIN / HOW HE HEALS), warm cream glass in Day, dark glass in Night. The full file stays below. */
.sinfo{position:absolute;top:100%;pointer-events:none;text-align:left;margin-top:8px;padding:6px 8px 7px;clip-path:var(--cut-s);background:linear-gradient(170deg,rgba(16,12,12,.74),rgba(8,7,9,.80));box-shadow:inset 0 0 0 1px rgba(255,180,110,.24);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--ink);transition:opacity .2s ease;text-shadow:none}
.sinfo.l{left:0}
.sinfo.r{right:0;margin-top:6px}
.sinfo.p{display:none}
.sinfo p{margin:0}
.si-b:empty{display:none}
.si-s+.si-s{margin-top:5px;padding-top:4px;border-top:1px solid rgba(255,190,130,.16)}
.si-h{font:600 11px/1.15 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:#ffc58e}
.si-x{margin-top:2px!important;font:500 11.5px/1.25 var(--sans);color:var(--p)}
.si-x b{font-weight:600;color:#ffe2bf}
.si-l{margin:2px 0 0;padding:0;list-style:none;font:500 11.5px/1.2 var(--sans);color:var(--p)}
.si-l li{position:relative;padding-left:9px;margin-top:2px}
.si-l li::before{content:'';position:absolute;left:0;top:.48em;width:4px;height:4px;transform:rotate(45deg);background:var(--acc)}
.si-st{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;margin-top:3px}
.si-st p{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;font:600 11px/1.15 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.si-st i{flex:0 0 100%;position:relative;height:4px;margin-top:2px;background:rgba(255,255,255,.12);clip-path:polygon(0 0,100% 0,calc(100% - 3px) 100%,0 100%)}
.si-st i::before{content:'';position:absolute;inset:0 auto 0 0;width:calc(var(--v) * 100%);background:linear-gradient(90deg,#6a2e12,#d27a3a 60%,#ffc27a)}
.si-st em{font-style:normal;color:var(--p);order:0}
.si-more{pointer-events:auto;display:inline-flex;align-items:center;gap:3px;margin:3px 0 -5px -4px;min-height:28px;padding:4px;border:0;background:none;color:#ffc58e;font:600 11px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;position:relative}
.si-more::after{content:'';position:absolute;inset:-6px -6px -4px}
.si-more svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.si-more:focus-visible{outline:2px solid var(--emb);outline-offset:1px}
.stage.out .sinfo{opacity:0}
/* Day: warm cream glass, dark ink (matches the Day arrows) */
body[data-mode="day"] .sinfo{background:linear-gradient(170deg,rgba(255,245,226,.90),rgba(236,210,168,.88));box-shadow:inset 0 0 0 1px rgba(255,250,236,.8),0 4px 14px rgba(40,22,8,.28)}
body[data-mode="day"] .si-h,body[data-mode="day"] .si-more{color:#8a4614}
body[data-mode="day"] .si-x,body[data-mode="day"] .si-l{color:#2a1a0c}
body[data-mode="day"] .si-x b{color:#5a2c0c}
body[data-mode="day"] .si-s+.si-s{border-top-color:rgba(120,70,30,.22)}
body[data-mode="day"] .si-l li::before{background:#b06a2a}
/* widths. Day: two narrow columns beside the figure. Night: the hero stands right of center in the street, so the left card is wide and the right one sits above his head */
.sinfo{width:clamp(100px,27vw,130px)}
body[data-mode="night"] .sinfo.l{width:min(205px,calc(100vw - 185px))}
body[data-mode="night"] .sinfo.r{width:150px}
.sinfo[data-k="ride"].l{width:min(196px,calc(100vw - 194px))}
.sinfo[data-k="ride"].r{width:168px}
@media (max-width:379px){.sinfo[data-k="ride"].r{width:150px}}
/* Night (phone): the power name, the Inversion tag and the file number leave the plate (the POWER card names the power), so the cards start higher */
@media (max-width:979px){body[data-mode="night"] .plate .pw,body[data-mode="night"] .plate .inv,body[data-mode="night"] .plate .pf{display:none}}
/* the prev/next arrows go to the bottom corners so the side columns can run down beside the hero */
.arw{top:auto;bottom:10px;margin-top:0}
.hint{pointer-events:none;right:auto;left:50%;transform:translateX(-50%);bottom:6px;white-space:nowrap}
/* tablets and big screens: a little more room */
@media (min-width:600px){.si-x,.si-l{font-size:12.5px}.si-h,.si-st p,.si-more{font-size:11.5px}.sinfo{width:clamp(130px,24vw,190px)}body[data-mode="night"] .sinfo.l{width:240px}body[data-mode="night"] .sinfo.r{width:190px}.sinfo[data-k="ride"].l{width:240px}.sinfo[data-k="ride"].r{width:190px}}
@media (min-width:980px){.si-more{display:none}}
@media (min-width:1200px){.si-x,.si-l{font-size:13px}.sinfo{width:190px}body[data-mode="night"] .sinfo.l{width:300px}body[data-mode="night"] .sinfo.r{width:200px}.sinfo[data-k="ride"].r{width:200px}.sinfo[data-k="ride"].l{width:260px}}
/* 980-1199px: the stage between the roster and the file is narrow; a smaller code name and switch keep names clear of it */
@media (min-width:980px) and (max-width:1199px){
 .plate h2{font-size:clamp(34px,calc((100vw - 648px) * .105),60px)}
 .dnw{right:10px}.dn{width:150px;height:50px;font-size:12px}.dn-o svg{width:18px;height:18px}
 .plate{max-width:calc(100% - 184px)}
 .sinfo.l,.sinfo.r{display:none}
 .sinfo.p{display:block;position:static;width:auto;margin:0 0 14px;padding:8px 10px 9px}
 .sinfo.p .si-b{display:grid;grid-template-columns:1fr 1fr;gap:12px}
 .sinfo.p .si-s+.si-s{margin-top:0;padding-top:0;border-top:0}
 .sinfo.p .si-x{font-size:13px}
 .sinfo.p .sx-hl{grid-column:1/-1}.sinfo.p .sx-hl .si-l{display:flex;flex-wrap:wrap;gap:0 14px}.sinfo.p .si-l{font-size:13px}
}
/* RIDE: the ride and power lines clamp to three lines so the card stays above the vehicle; on desktop the ride picture is a little smaller to leave room above it */
.sinfo[data-k="ride"] .si-x{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (min-width:980px){.stage.riding .rb{width:min(100%,calc(60cqh * 4 / 3))}.stage.riding .plate .inv{display:none}}
/* desktop Night: the stats already head the file beside the stage, so the right card only carries HOW HE HEALS when it fits above the hero (else it hides);
   the Inversion tag gives its line to the cards */
@media (min-width:1200px){.sinfo[data-k="night"].r .sx-sb{display:none}.sinfo[data-k="night"].r:not(:has(.sx-hl)){display:none}.sinfo[data-k="night"].r .sx-hl{margin-top:0;padding-top:0;border-top:0}body[data-mode="night"] .plate .inv{display:none}}

/* hr18 draft: portal scene (Elias). Through the opening: deep space, a slow star drift and the Gym ship's gentle bob (clipped to the opening);
   a faint swirl turns over them, sparks drift off the rim; brake.webp's breath is the rim pulse. */
.scn-pt{display:none;position:absolute;inset:0;pointer-events:none}
.scn-bike.pt .scn-pt{display:block}
.scn-pt .pv,.scn-pt .pw{position:absolute;border-radius:50%;overflow:hidden;-webkit-mask-image:radial-gradient(closest-side,#000 82%,transparent);mask-image:radial-gradient(closest-side,#000 82%,transparent)}
.scn-pt .pv[hidden]{display:none}
.scn-pt .pv .sf{position:absolute;top:0;left:0;height:200%;aspect-ratio:1;background:0 0/50% 50% repeat;will-change:transform;animation:scndrift 240s linear infinite}
@keyframes scndrift{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
.scn-bike .scn-pt img.gs{position:absolute;inset:auto;display:block;will-change:transform;animation:scnbob 8s ease-in-out infinite alternate}
@keyframes scnbob{from{transform:translate3d(0,0,0) rotate(-.4deg)}to{transform:translate3d(0,-6%,0) rotate(.4deg)}}
.scn-pt .pw{mix-blend-mode:screen;opacity:.26}
.scn-pt .ps{position:absolute;top:0;left:50%;height:100%;aspect-ratio:1;transform:translateX(-50%) scaleX(var(--sx,1))}
.scn-pt .ps img{position:static;width:100%;height:100%;display:block;will-change:transform;animation:scnspin 60s linear infinite}
@keyframes scnspin{to{transform:rotate(360deg)}}
.scn-pt i{position:absolute;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:#bfe6ff;box-shadow:0 0 6px 2px rgba(120,190,255,.7);mix-blend-mode:screen;opacity:0;will-change:transform,opacity;animation:scnspk var(--t) ease-out var(--d) infinite}
.scn-pt i.g{background:#ffd9a0;box-shadow:0 0 6px 2px rgba(255,170,80,.65)}
@keyframes scnspk{0%{opacity:0;transform:translate3d(0,0,0)}20%{opacity:.9}100%{opacity:0;transform:translate3d(var(--dx),-70px,0)}}
body.scn-pause .scn-pt img,body.scn-pause .scn-pt i,body.scn-pause .scn-pt .sf{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.scn-pt i{display:none}.scn-pt .ps img,.scn-pt .sf,.scn-bike .scn-pt img.gs{animation:none}.scn-pt .sf{transform:translate3d(-25%,0,0)}}

/* side info v3 (Oct 22, Baseer: "I want to see their mental health struggles as well as their superpower more clearly"):
   STRUGGLE and POWER head every card: icon + label, the struggle/power named big, one short line. Struggle reads in a cool blue,
   power in the hero's own light color (--hc, set by vault-side.js). Origin and how he heals sit smaller underneath; on phones they open
   the file panel right under the roster instead (16px minimum there; "Full file" jumps there), so the cards stay off the face. */
.sinfo{background:linear-gradient(170deg,rgba(12,12,16,.86),rgba(6,6,9,.9))}
.si-hd{padding:4px 0 5px 9px;border-left:3px solid #6aa8ff;background:linear-gradient(90deg,rgba(90,150,230,.16),rgba(90,150,230,0) 85%)}
.sx-pw.si-hd{border-left-color:var(--hc,#ffc58e);background:linear-gradient(90deg,color-mix(in srgb,var(--hc,#ffc58e) 20%,transparent),transparent 85%)}
.si-s+.si-hd,.si-hd+.si-s{margin-top:7px;padding-top:5px;border-top:0}
.si-hd .si-h{display:flex;align-items:center;gap:5px;font:600 13px/1.1 var(--disp);letter-spacing:.12em}
.si-i{flex:none;width:17px;height:17px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sx-st .si-h{color:#9cc8ff}.sx-st .si-i{stroke:#9cc8ff}
.sx-pw .si-h{color:var(--hc,#ffc58e)}.sx-pw .si-i{fill:var(--hc,#ffc58e);stroke:none}
.si-n{margin:3px 0 0!important;font:600 22px/1.08 var(--disp);letter-spacing:.01em;color:#e6f0ff;overflow-wrap:break-word}
.si-n.lg{font-size:19px}
.sx-pw .si-n{color:var(--hc,#ffc58e);text-shadow:0 0 14px color-mix(in srgb,var(--hc,#ffc58e) 45%,transparent)}
.si-hd .si-x{margin-top:3px!important;font:600 15px/1.25 var(--sans);color:#fff}
.si-sm .si-h{font-size:12px;color:#d9b48c}
.si-sm .si-x,.si-sm .si-l{font-size:13px;font-weight:500;color:#d8d3cc}
.si-sm .si-x b{color:#efe3d2}
/* Day: same cream glass, dark ink; deep blue for the struggle, the hero color mixed down to ink for the power (the raw glow colors are too pale on cream) */
body[data-mode="day"] .si-hd{border-left-color:#3f7cc0;background:linear-gradient(90deg,rgba(63,124,192,.16),rgba(63,124,192,0) 85%)}
body[data-mode="day"] .sx-pw.si-hd{border-left-color:color-mix(in srgb,var(--hc,#c08a4a) 70%,#3a1a06);background:linear-gradient(90deg,color-mix(in srgb,var(--hc,#c08a4a) 34%,transparent),transparent 85%)}
body[data-mode="day"] .sx-st .si-h{color:#1d4a80}body[data-mode="day"] .sx-st .si-i{stroke:#2a62a3}
body[data-mode="day"] .sx-st .si-n{color:#0f2f57}
body[data-mode="day"] .sx-pw .si-h,body[data-mode="day"] .sx-pw .si-n{color:#5a2c0c;color:color-mix(in srgb,var(--hc,#c08a4a) 36%,#1c0d03);text-shadow:none}
body[data-mode="day"] .sx-pw .si-i{fill:var(--hc,#c08a4a);stroke:color-mix(in srgb,var(--hc,#c08a4a) 40%,#1c0d03);stroke-width:1.4}
body[data-mode="day"] .si-hd .si-x{color:#1e1208}
body[data-mode="day"] .si-sm .si-h{color:#8a4614}
body[data-mode="day"] .si-sm .si-x,body[data-mode="day"] .si-sm .si-l{color:#3a2614}
body[data-mode="day"] .si-sm .si-x b{color:#5a2c0c}
/* phones: headlines only in the cards, 16px minimum; origin + how he heals open the file panel */
@media (max-width:599px){
 .sinfo{padding:6px 7px 7px}
 body[data-mode="day"] .sinfo{width:calc(50vw - 75px)}
 .sinfo .si-sm{display:none}
 .si-hd{padding:3px 0 5px 7px}
 .si-hd .si-h{font-size:16px;letter-spacing:.08em;gap:4px}
 .si-i{width:16px;height:16px}
 .si-n{font-size:22px}.si-n.lg{font-size:19px}
 .si-hd .si-x{font-size:16px;line-height:1.22}
 .si-more{font-size:16px;letter-spacing:.1em;margin:4px 0 -4px -4px}
 .si-st{grid-template-columns:1fr;gap:3px}.si-st p{font-size:16px;letter-spacing:.04em}
 .sinfo.p,body[data-mode] .sinfo.p{display:block;position:static;width:auto;margin:0 0 16px;padding:10px 12px 12px}
 .sinfo.p .si-hd{display:none}
 .sinfo.p .si-sm{display:block}
 .sinfo.p .si-hd+.si-sm{margin-top:0;padding-top:0}
 .sinfo.p .si-sm+.si-sm{margin-top:10px;padding-top:8px}
 .sinfo.p .si-sm .si-h{font-size:16px}
 .sinfo.p .si-sm .si-x,.sinfo.p .si-sm .si-l{font-size:16px;line-height:1.3}
 .sinfo.p .si-l li{padding-left:12px}.sinfo.p .si-l li::before{top:.5em;width:5px;height:5px}
 .sinfo.p:not(:has(.si-sm)){display:none}
}
@media (min-width:600px){.si-hd .si-h{font-size:13px}.si-n{font-size:22px}.si-n.lg{font-size:19px}.si-hd .si-x{font-size:15px}.si-sm .si-x,.si-sm .si-l{font-size:13px}.si-sm .si-h{font-size:12px}}
@media (min-width:1280px){body[data-mode="day"] .sinfo{width:220px}}
@media (min-width:1200px){.si-hd .si-h{font-size:14px}.si-n{font-size:26px}.si-n.lg{font-size:22px}.si-hd .si-x{font-size:16px}.si-sm .si-x,.si-sm .si-l{font-size:13.5px}}
/* 980-1199px: the panel block opens with STRUGGLE | POWER, then ORIGIN | HOW HE HEALS */
@media (min-width:980px) and (max-width:1199px){
 .sinfo.p .si-b{gap:10px 12px}
 .sinfo.p .sx-hl{grid-column:auto}.sinfo.p .sx-hl .si-l{display:block}
 .sinfo.p .si-hd .si-x{font-size:15px}.sinfo.p .si-n{font-size:22px}.sinfo.p .si-n.lg{font-size:19px}
 .sinfo.p .si-sm .si-x,.sinfo.p .si-sm .si-l{font-size:13px}
}
/* Night: on short phones the stats leave the right card when they would reach the head (vault-side.js fit() sets .tight) */
.sinfo.r.tight .sx-sb{display:none}
/* desktop Night: the right card shows when it carries HOW HE HEALS and/or ORIGIN (fit() moves them there when they clear the head) */
@media (min-width:1200px){.sinfo[data-k="night"].r:has(.si-sm){display:block}.sinfo[data-k="night"].r .sx-sb+.si-sm{margin-top:0;padding-top:0;border-top:0}}
/* RIDE: the ride itself is in the file panel, so the left card drops "Full file" and the names run a size smaller to stay above the vehicle */
.sinfo[data-k="ride"] .si-more{display:none}
.sinfo[data-k="ride"] .si-n{font-size:20px}.sinfo[data-k="ride"] .si-n.lg{font-size:18px}
.sinfo[data-k="ride"].l{margin-top:4px;padding-bottom:5px}.sinfo[data-k="ride"] .si-hd{padding-top:2px;padding-bottom:3px}

/* comic lettering options for the side cards (Oct 22, Baseer: "Look up Batman comics and Spawn comics"). vault-side.js adds body.vf-a|b|c.
   Free fonts only: Big Shoulders Display (OFL), Special Elite (Apache 2.0), New Rocker (OFL), Comic Neue (OFL), Bangers (OFL), Patrick Hand (OFL).
   They evoke the comics' lettering; no logo artwork is copied. */
@font-face{font-family:"VF Shoulders";src:url(/fonts/vf-bigshouldersdisplay.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"VF Elite";src:url(/fonts/vf-specialelite.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"VF Rocker";src:url(/fonts/vf-newrocker.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"VF Comic";src:url(/fonts/vf-comicneue-bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"VF Bangers";src:url(/fonts/vf-bangers.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"VF Hand";src:url(/fonts/vf-patrickhand.woff2) format("woff2");font-weight:400;font-display:swap}
body[class*="vf-"] .sinfo .si-st p{font-family:var(--disp)}

/* A. BATMAN (The Dark Knight Returns / Year One / the classic heavy logo letters): heavy, sharp, condensed display caps for labels and names;
   narration lines in a worn typewriter face, like a noir case file. Night: black caption boxes with a hard white rule; Day: the classic yellow caption box. */
body.vf-a .sinfo .si-h,body.vf-a .sinfo .si-more{font-family:"VF Shoulders",var(--disp);font-weight:900;letter-spacing:.1em}
body.vf-a .si-n{font-family:"VF Shoulders",var(--disp);font-weight:900;text-transform:uppercase;letter-spacing:.02em;line-height:.98}
body.vf-a .sinfo .si-x,body.vf-a .sinfo .si-l{font-family:"VF Elite","Courier New",monospace;font-weight:400;letter-spacing:0}
body.vf-a .sinfo:not(.p){clip-path:none;border-radius:0;background:#050506;box-shadow:inset 0 0 0 2px #e9e6df,4px 4px 0 rgba(0,0,0,.55);-webkit-backdrop-filter:none;backdrop-filter:none}
body.vf-a .sinfo.p{clip-path:none;background:#050506;box-shadow:inset 0 0 0 2px #e9e6df}
body.vf-a .si-hd{background:none}
body[data-mode="day"].vf-a .sinfo{background:#f4dd62;box-shadow:inset 0 0 0 2px #111,4px 4px 0 rgba(20,12,4,.45)}
body[data-mode="day"].vf-a .si-hd .si-x,body[data-mode="day"].vf-a .si-sm .si-x,body[data-mode="day"].vf-a .si-sm .si-l{color:#111}
body[data-mode="day"].vf-a .si-sm .si-h,body[data-mode="day"].vf-a .si-more{color:#111}
body[data-mode="day"].vf-a .si-s+.si-s{border-top-color:rgba(0,0,0,.35)}

/* B. SPAWN (Todd McFarlane / Tom Orzechowski era): spiky gothic display for labels and names; the lines in square, even comic capitals
   (Orzechowski's letters are famously square and uniform). Torn black caption boxes with a hellfire-red edge; Day: bone paper, black ink. */
body.vf-b .sinfo .si-h,body.vf-b .sinfo .si-more{font-family:"VF Rocker",var(--disp);font-weight:400;letter-spacing:.06em}
body.vf-b .si-n{font-family:"VF Rocker",var(--disp);font-weight:400;letter-spacing:.01em;line-height:1.05}
body.vf-b .sinfo .si-x,body.vf-b .sinfo .si-l{font-family:"VF Comic","Comic Neue",var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1.22}
body.vf-b .sinfo .si-x b{font-weight:700}
body.vf-b .sinfo{--tear:polygon(0 0,100% 0,100% calc(100% - 9px),94% 100%,86% calc(100% - 6px),76% 100%,64% calc(100% - 7px),52% 100%,40% calc(100% - 5px),28% 100%,16% calc(100% - 8px),7% 100%,0 calc(100% - 6px));clip-path:var(--tear);padding-bottom:14px;background:linear-gradient(175deg,#0b0a0a,#030303);box-shadow:inset 0 0 0 1.5px rgba(200,30,30,.75),inset 0 0 18px rgba(170,20,20,.35);-webkit-backdrop-filter:none;backdrop-filter:none}
body.vf-b .si-hd{background:none}
body[data-mode="day"].vf-b .sinfo{background:linear-gradient(175deg,#f3ecdc,#e3d7bd);box-shadow:inset 0 0 0 2px #121010,inset 0 0 16px rgba(120,20,20,.18)}
body[data-mode="day"].vf-b .si-hd .si-x,body[data-mode="day"].vf-b .si-sm .si-x,body[data-mode="day"].vf-b .si-sm .si-l{color:#121010}
body[data-mode="day"].vf-b .si-sm .si-h,body[data-mode="day"].vf-b .si-more{color:#7a1010}

/* C. CLASSIC COMIC LETTERING, ALL CAPS (the Silver Age Batman covers and the hand-lettered caption boxes both books grew from): punchy comic display
   for labels and names, hand-lettered capitals for every line. Yellow caption boxes, black outline and a hard offset shadow, in Day and Night alike. */
body.vf-c .sinfo .si-h,body.vf-c .sinfo .si-more{font-family:"VF Bangers",var(--disp);font-weight:400;letter-spacing:.08em}
body.vf-c .si-n{font-family:"VF Bangers",var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:.03em;line-height:1}
body.vf-c .sinfo .si-x,body.vf-c .sinfo .si-l{font-family:"VF Hand",var(--sans);font-weight:400;text-transform:uppercase;letter-spacing:.02em;line-height:1.18}
body.vf-c .sinfo .si-x b{font-weight:400;color:inherit}
body.vf-c .sinfo,body.vf-c[data-mode="day"] .sinfo{clip-path:none;background:#ffe45c;box-shadow:inset 0 0 0 2.5px #0a0a0a,4px 4px 0 #0a0a0a;-webkit-backdrop-filter:none;backdrop-filter:none}
body.vf-c .sinfo:not(.p){margin-right:4px}
body.vf-c .si-hd{background:none}
body.vf-c .sx-st.si-hd{border-left-color:#1f5fb0}
body.vf-c .sx-pw.si-hd{border-left-color:color-mix(in srgb,var(--hc,#c08a4a) 70%,#3a1a06)}
body.vf-c .sx-st .si-h,body.vf-c .sx-st .si-n{color:#0f3a75}body.vf-c .sx-st .si-i{stroke:#0f3a75}
body.vf-c .sx-pw .si-h,body.vf-c .sx-pw .si-n{color:#5a2c0c;color:color-mix(in srgb,var(--hc,#c08a4a) 34%,#160a02);text-shadow:none}
body.vf-c .sx-pw .si-i{fill:var(--hc,#c08a4a);stroke:#160a02;stroke-width:1.4}
body.vf-c .si-hd .si-x,body.vf-c .si-sm .si-x,body.vf-c .si-sm .si-l,body.vf-c .si-sm .si-x b{color:#0a0a0a}
body.vf-c .si-sm .si-h,body.vf-c .si-more{color:#8a2a0a}
body.vf-c .si-s+.si-s{border-top-color:rgba(0,0,0,.3)}
body.vf-c .si-st p,body.vf-c .si-st em{color:#0a0a0a}body.vf-c .si-st i{background:rgba(0,0,0,.18)}
body.vf-c .si-l li::before{background:#0a0a0a}
/* phones: hold every option at 16px or more (the hand and typewriter faces run small, so their lines go to 17px) */
@media (max-width:599px){
 body.vf-a .si-n,body.vf-c .si-n{font-size:24px}body.vf-a .si-n.lg,body.vf-c .si-n.lg{font-size:21px}
 body.vf-b .si-n{font-size:22px}body.vf-b .si-n.lg{font-size:19px}
 body.vf-a .si-hd .si-x,body.vf-c .si-hd .si-x,body.vf-a .sinfo.p .si-x,body.vf-a .sinfo.p .si-l,body.vf-c .sinfo.p .si-x,body.vf-c .sinfo.p .si-l{font-size:17px}
 body.vf-b .si-hd .si-x{font-size:16px}
 body.vf-a .sinfo .si-h,body.vf-c .sinfo .si-h{font-size:17px}
 body.vf-b .sinfo .si-h{font-size:16px;letter-spacing:.02em}body.vf-b .si-hd .si-h{gap:3px}
}
/* narrow phones: the Day cards are ~110-120px wide, so labels tighten, the label icon shrinks (Spawn's wide gothic label drops it; the colored bar stays),
   and a long word in a line hyphenates instead of running out of the card */
@media (max-width:599px){
 .si-hd .si-x{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
 body[data-mode="day"] .si-hd .si-h{letter-spacing:.02em;gap:3px}
 body[data-mode="day"] .si-hd .si-i{width:14px;height:14px}
 body[data-mode="day"].vf-a .si-hd .si-h{font-size:16px;letter-spacing:.03em}
 body[data-mode="day"].vf-b .si-hd .si-i{display:none}
 body[data-mode="day"].vf-c .si-hd .si-h{font-size:16px;letter-spacing:.03em}
}
/* the comic faces run taller: keep the 980-1199 panel block above the fold and the RIDE cards above the vehicle */
@media (min-width:980px) and (max-width:1199px){body[class*="vf-"] .sinfo.p .si-n{font-size:20px}body[class*="vf-"] .sinfo.p .si-n.lg{font-size:18px}body[class*="vf-"] .sinfo.p .si-hd .si-x,body[class*="vf-"] .sinfo.p .si-sm .si-x,body[class*="vf-"] .sinfo.p .si-sm .si-l{font-size:13px}}
@media (min-width:600px){body[class*="vf-"] .sinfo[data-k="ride"] .si-n{font-size:19px}body[class*="vf-"] .sinfo[data-k="ride"] .si-hd .si-x{font-size:14px}}
@media (min-width:980px) and (max-width:1199px){body.vf-b .sinfo.p{padding-bottom:10px;clip-path:none}body.vf-b .sinfo.p .si-n{font-size:18px}body.vf-b .sinfo.p .si-n.lg{font-size:17px}}
@media (min-width:980px){body[class*="vf-"] .sinfo[data-k="ride"] .si-n{font-size:18px}body[class*="vf-"] .sinfo[data-k="ride"] .si-hd .si-x{font-size:13px}body.vf-b .sinfo[data-k="ride"].l{padding-bottom:9px;margin-top:2px}}