html{background:#0a111e}body[data-hero]{--accent:#f2cf5a;--signal:#f8df81;--ink:#e5eaf1;--cream:#e8ecf1;--green:#f2cf5a;--orange:#f2cf5a;--back:#0a111e;--panel:#121e30;--muted:#94a6be;background:radial-gradient(ellipse at 60% 10%,#1e3045,#090f1b 75%);color:var(--ink);min-height:100dvh}
body[data-hero=spider-man]{--accent:#ff7271;--signal:#ffaaa5;--green:#ff7271;--orange:#ff7271;--back:#10182e;--panel:#192641;--muted:#9caecb;background:radial-gradient(ellipse at 65% 10%,#2f3d62,#10162c 75%)}
body[data-hero] .brand-mark{background:var(--accent);color:var(--back)}body[data-hero] .brand-mark span,body[data-hero] .game-topline b{color:var(--signal)}body[data-hero] .edition,body[data-hero] .game-bottomline,body[data-hero] footer{color:var(--muted)}body[data-hero] .game-topline{color:#c2cfdf}body[data-hero] .live-dot{background:var(--accent);box-shadow:0 0 12px color-mix(in srgb,var(--accent),transparent 65%)}body[data-hero] #arcade{background:var(--back);border-color:#080f1c;box-shadow:0 25px 70px #0007,0 0 0 1px #9ab1d035;border-radius:6px}body[data-hero] #loading{background:var(--back);color:var(--accent)}body[data-hero] .loader-block{background:var(--accent)}body[data-hero] #overlay{background:#080f20a8}body[data-hero] #overlay.menu-overlay{background:linear-gradient(90deg,#09121ff5 0%,#0a1523df 35%,#0b14251a 78%)!important}body[data-hero] .menu-panel{width:65%;color:#eef1f5}body[data-hero] .menu-tag{color:var(--accent);font-size:10px;letter-spacing:2px;margin-bottom:25px}body[data-hero] .menu-tag:before{color:var(--signal);content:'◆';font-size:11px}body[data-hero] .menu-title{font-size:clamp(42px,6.4vw,86px);line-height:.95;letter-spacing:-3.5px;text-shadow:3px 5px 0 #0007;font-weight:1000;color:#f1f2eb}body[data-hero] .menu-title span{font-size:25px;letter-spacing:7px;color:var(--accent);font-weight:650;margin-top:18px;line-height:1.2}body[data-hero=spider-man] .menu-title{font-size:clamp(38px,5.7vw,78px);font-style:italic;letter-spacing:-4px}body[data-hero=spider-man] .menu-title span{font-size:21px;letter-spacing:4px;font-style:normal}body[data-hero] .menu-description{color:#b0bfd1;line-height:1.9;margin:25px 0;max-width:320px}body[data-hero] .button.primary{background:var(--accent);color:#101827;box-shadow:0 4px 0 #0006}body[data-hero] .button.primary:hover{background:var(--signal)}body[data-hero] .button.secondary{background:#26354c;color:#d4dfec;border-color:#6983a266;box-shadow:0 3px 0 #050d1a55}body[data-hero] .menu-footnote{color:#8195b0;font-size:8px;letter-spacing:1px;margin-top:29px}body[data-hero] .scene-stamp{color:#d9e2ed;text-shadow:2px 2px #000;font-size:8px}body[data-hero] .scene-stamp b{color:var(--accent)}body[data-hero] .dialog{background:var(--panel);border-color:#7085a955;color:#e4ebf4;box-shadow:0 10px 0 #03081366;border-radius:7px}body[data-hero] .dialog .eyebrow{color:var(--accent)}body[data-hero] .dialog p,body[data-hero] .how-list{color:#afc0d8}body[data-hero] .result-stats{border-color:#7487a133}body[data-hero] .result-stats small{color:#8c9fbb}body[data-hero] .result-stats strong{color:var(--accent)}body[data-hero] .world-button{background:#23324b;color:#dbe6f5;border-color:#617a9f66}body[data-hero] .world-button:hover:not(:disabled){background:#30415d}body[data-hero] .world-number{color:var(--accent)}body[data-hero] #hud{background:linear-gradient(#080f21cc,transparent);color:#f2f3ed;text-shadow:1px 2px #000}body[data-hero] .hud-right #health{color:#ff9a9a}body[data-hero] .hud-right .icon-button{background:#071126b0}body[data-hero] .gold{color:var(--signal)}body[data-hero] .progress-track{background:#182a4566}body[data-hero] .progress-track i{background:var(--accent)}body[data-hero] #power-status{background:#11263ce6;color:var(--signal)}body[data-hero] #toast{background:#101e35ec;color:#f1f1e9;border-color:var(--accent);max-width:90%;white-space:normal;text-align:center}body[data-hero] .game-bottomline i{background:var(--accent)}body[data-hero] .game-bottomline b{color:#d0dcec}body[data-hero] .instruction-intro .eyebrow{color:var(--accent)}body[data-hero] .instruction-intro{max-width:390px}body[data-hero] .instruction-intro p,body[data-hero] .control-guide small{color:#8fa4c2}body[data-hero] kbd{color:#d0dbea;border-color:#a8bdd944;background:#5e769517}body[data-hero] #touch-controls button{background:#11213bbd;color:#e7edf5;border-color:#c8d6f680;border-bottom-color:#071127b3}body[data-hero] #touch-controls button.held{background:var(--accent);color:#111b29}body[data-hero] #touch-controls .jump-button{background:var(--accent);color:#13213a;border-color:#f9f1c699}
@media(max-width:1000px){body[data-hero] .menu-title{font-size:clamp(44px,6.5vw,76px)}body[data-hero=spider-man] .menu-title{font-size:clamp(38px,5.9vw,68px)}body[data-hero] .menu-title span{font-size:20px;letter-spacing:5px;margin-top:14px}body[data-hero] .menu-description{margin:19px 0}body[data-hero] .menu-tag{font-size:8px;margin-bottom:19px}}
@media(max-width:650px){body[data-hero] #overlay.menu-overlay{background:linear-gradient(#0a1422f5,#0b1727c9 50%,#0b142512 85%)!important}body[data-hero] .menu-panel{width:100%;padding:9% 7%}body[data-hero] .menu-tag{font-size:7px;letter-spacing:1.5px;margin-bottom:22px}body[data-hero] .menu-title{font-size:clamp(45px,16vw,72px);letter-spacing:-2px}body[data-hero=spider-man] .menu-title{font-size:clamp(33px,10.9vw,48px);letter-spacing:-2px}body[data-hero] .menu-title span{font-size:15px;letter-spacing:4px;margin-top:13px}body[data-hero=spider-man] .menu-title span{font-size:12px;letter-spacing:2.4px}body[data-hero] .menu-description{font-size:11px;margin:21px 0;max-width:260px}body[data-hero] .menu-footnote{font-size:7px;gap:13px;margin-top:24px;letter-spacing:.6px}body[data-hero] .scene-stamp{font-size:6px;right:7%;bottom:6%}body[data-hero] .instruction-intro h2{font-size:19px}body[data-hero] .game-bottomline{font-size:5px;letter-spacing:.5px}body[data-hero] .dialog h1{font-size:27px}body[data-hero] #toast{font-size:9px;top:20%}}
@media(max-height:500px) and (orientation:landscape){body[data-hero] .menu-panel{padding:3% 5%;width:65%;justify-content:center}body[data-hero] #overlay.menu-overlay{background:linear-gradient(90deg,#09121ff5,#0b142500 85%)!important}body[data-hero] .menu-title{font-size:55px}body[data-hero=spider-man] .menu-title{font-size:48px}body[data-hero] .menu-title span{font-size:15px;letter-spacing:4px;margin-top:10px}body[data-hero] .menu-tag{margin-bottom:14px;font-size:8px}body[data-hero] .menu-description{margin:14px 0;font-size:10px}body[data-hero] .menu-footnote{margin-top:15px;font-size:7px}}