/* Graffiti, neon and asphalt: the Bronx street edition. */
:root{--yellow:#e6ff57;--cream:#f4f3e8;--ink:#10151b;--muted:#9cabb8}body{background:radial-gradient(ellipse at 70% 0%,#193438 0,#111920 40%,#080d12 100%)}.masthead{height:78px}.brand-mark{background:#e6ff57;transform:rotate(-4deg);border-radius:1px}.brand b{color:#8e9d93}.header-right button{background:#1b2421;border-color:#47534b;border-radius:2px}#cabinet{border:1px solid #55646b;border-radius:3px;background:#0b100f;box-shadow:0 25px 100px #000b}.vignette{box-shadow:inset 0 0 90px #03050370}.screen{background:linear-gradient(90deg,#080d0cf7,#080d0cce 33%,#080d0c36 69%,#080d0c10)}h1{font-family:'Barlow Condensed',Impact,'Arial Narrow',sans-serif;font-weight:700;font-size:clamp(50px,6.6vw,94px);letter-spacing:-4px;line-height:.95;color:#f6f3e2;text-shadow:0 3px 1px #000,0 0 25px #cba35920}h1>span:first-child{letter-spacing:2px;font-size:.4em;line-height:1.5}.subtitle{background:none;color:#e6ff57;font-size:.27em;letter-spacing:9px;transform:none;padding:0;margin:16px 0 0;text-shadow:0 1px #000}.menu-copy p{color:#bbbfae}.eyebrow{color:#e6ff57;font-size:10px;letter-spacing:2.2px}.eyebrow i{background:#e6ff57}.primary{border-radius:2px;background:linear-gradient(110deg,#e6ff57,#b9e545);border:1px solid #edff9d;box-shadow:4px 4px 0 #050c10;color:#171a14;font-family:'Barlow Condensed',Impact,sans-serif;font-size:15px;font-weight:bold;padding:16px 20px;letter-spacing:1.2px;gap:20px}.primary:hover:not(:disabled){background:linear-gradient(110deg,#f4ffa5,#d9ff58)}.primary:disabled{filter:saturate(.15);opacity:.36;cursor:not-allowed}.secondary{background:#192630;border-color:#506b78;border-radius:2px;color:#cec8b4}.settings select{border-color:#536b75}.menu-links button{color:#b8bca9;border-color:#646951}.edition{font-family:'Barlow Condensed',Impact,sans-serif}.edition strong{font-size:12px;letter-spacing:1.5px}.edition span{color:#a5aa94;font-size:9px}.hero-card{background:#111a16e8;border:1px solid #697061;border-radius:2px;transform:none}.hero-card.active{border-color:var(--hero-color);box-shadow:inset 0 -2px var(--hero-color);background:#303628e6}.hero-card small{color:var(--hero-color)}.hero-card b{background:var(--hero-color)}.panel{background:linear-gradient(135deg,#1f333d,#111b24);border-color:#597785;border-radius:3px;box-shadow:0 18px 90px #000b}.panel h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:29px}.panel p{color:#bac3b4}.panel .primary{font-family:'Barlow Condensed',Impact,sans-serif;font-size:13px}.modal{background:#050907dc}.hud-center b,.hud-score{color:#e0cf9f}#stageFlash{font-family:'Barlow Condensed',Impact,sans-serif;font-size:44px;font-weight:normal;letter-spacing:3px;text-shadow:0 3px 5px #000}#toast{background:#141d17ef;border-color:#8b8769;border-radius:2px}.legal{color:#86958a}.controls-strip{border-color:#344039;color:#a0ada2}
#selection{position:absolute;inset:0;z-index:4;background:linear-gradient(#040b12b0 0%,#040b1230 32%,#040b1210 67%,#040b12f5 91%) center/cover;overflow:hidden}.camp-haze{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 66%,#40b8de12,transparent 52%),linear-gradient(90deg,#02050480,transparent 20%,transparent 80%,#02050480)}.selection-heading{position:absolute;top:4.2%;width:100%;text-align:center}.selection-heading h2{font-family:'Barlow Condensed',Impact,'Arial Narrow',sans-serif;font-size:clamp(22px,2.4vw,37px);letter-spacing:5px;color:#eaf1db;margin:10px 0 8px;text-shadow:0 2px 5px #000;font-weight:normal}.selection-heading p{color:#c1c7b5;font-family:'Barlow Condensed',Impact,sans-serif;font-size:12px;letter-spacing:1px;margin:0}#heroInfo{position:absolute;top:20%;left:25%;right:25%;text-align:center;z-index:3;pointer-events:none;text-shadow:0 2px 5px #000}#heroName{font-family:'Barlow Condensed',Impact,sans-serif;color:var(--hero-color);font-weight:normal;font-size:23px;letter-spacing:3px;margin:0 0 5px}#heroTitle{font-size:8px;letter-spacing:1.8px;color:#ddd6bd;text-transform:uppercase}#heroDetail{font-size:11px;line-height:1.5;max-width:440px;margin:8px auto 5px;color:#c1c8bb}.hero-equipment{font-size:8px;color:#babba7;display:flex;justify-content:center;gap:15px}.hero-equipment b{color:var(--hero-color);font-weight:500}#heroStats{display:flex;justify-content:center;gap:18px;margin-top:9px}#heroStats>span{font-size:7px;text-transform:uppercase;letter-spacing:1px;color:#a5b19f}#heroStats i{display:block;position:relative;height:2px;width:50px;background:#ffffff28;margin-top:4px}#heroStats i:after{content:'';display:block;width:var(--stat);height:100%;background:var(--hero-color)}#lineup{position:absolute;left:3%;right:3%;top:35%;height:40%;display:flex;align-items:end}.camp-actor{position:relative;display:block;width:12.5%;height:100%;background:none;padding:0;isolation:isolate;outline-offset:-2px;-webkit-tap-highlight-color:transparent;cursor:pointer}.actor-sprite{position:absolute;left:-12%;width:124%;bottom:29px;height:100%;transform-origin:50% 100%;filter:brightness(.25) saturate(.45);transition:filter .3s,transform .4s;pointer-events:none;animation:breathe 4s ease-in-out infinite}.actor-sprite img{position:absolute;width:100%;height:100%;object-fit:contain;object-position:center bottom;left:0;bottom:0;filter:drop-shadow(0 8px 5px #000a);transition:opacity .22s}.actor-sprite .pose{opacity:0}.camp-actor.inspected{z-index:3}.camp-actor.inspected .actor-sprite,.camp-actor.chosen .actor-sprite{filter:brightness(1.04) saturate(.95);transform:translateY(-4px) scale(1.06)}.camp-actor.inspected .idle,.camp-actor.chosen .idle{opacity:0}.camp-actor.inspected .pose,.camp-actor.chosen .pose{opacity:1}.spotlight{position:absolute;inset:-20% -23% 20px;background:radial-gradient(ellipse at 50% 70%,color-mix(in srgb,var(--hero-color) 22%,transparent),transparent 66%);opacity:0;transition:opacity .35s;pointer-events:none}.camp-actor.inspected .spotlight,.camp-actor.chosen .spotlight{opacity:1}.actor-name{position:absolute;left:-10%;right:-10%;bottom:8px;font-family:'Barlow Condensed',Impact,sans-serif;font-size:10px;letter-spacing:1px;color:#a1a99a;text-shadow:0 2px 3px #000;transition:color .2s}.camp-actor.chosen .actor-name,.camp-actor.inspected .actor-name{color:#eaff96}.crew-number{position:absolute;bottom:29px;left:calc(50% - 9px);width:18px;height:18px;line-height:17px;border:1px solid var(--hero-color);border-radius:50%;font:11px/17px 'Barlow Condensed',Impact,sans-serif;color:#f1e7c9;background:#141b14;opacity:0;box-shadow:0 0 12px #d8bc5844;pointer-events:none}.camp-actor.chosen .crew-number{opacity:1}.selection-bottom{position:absolute;bottom:4%;left:4%;right:4%;z-index:4}#teamSlots{display:flex;justify-content:center;gap:13px;margin:0 auto 18px;width:70%}.team-slot{flex:1;display:flex;align-items:center;gap:12px;background:linear-gradient(90deg,#172831d9,#101b24e6);border:1px solid #52636d;border-radius:2px;padding:10px 13px;min-width:0;text-align:left}.team-slot b{color:#7b826e;font:20px 'Barlow Condensed',Impact,sans-serif;font-weight:normal}.team-slot span{font-size:9px;letter-spacing:1px;color:#9aab94;white-space:nowrap}.team-slot small{display:block;font-size:8px;letter-spacing:0;color:#6f7e6e;margin-top:4px}.team-slot i{margin-left:auto;color:#b4b69e;font-size:15px;font-style:normal}.team-slot.filled{border-color:color-mix(in srgb,var(--hero-color) 65%,#1e241b)}.team-slot.filled b,.team-slot.filled span{color:var(--hero-color)}.team-slot.filled small{color:#aab39e}.team-slot:disabled{cursor:default}.selection-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}.selection-actions .secondary{margin:0;font-size:10px;min-height:44px}.selection-actions>div{text-align:center}#selectionStatus{color:#e5efcd;font-size:10px;margin:0 0 5px}.selection-key-hint{font-size:8px;color:#929c8b;letter-spacing:1px}.selection-actions .primary{font-size:12px;min-height:44px;padding:11px 15px}.selection-actions .primary span{font-size:18px}button:focus-visible,a:focus-visible{outline:2px solid #eee1ba;outline-offset:4px}@keyframes breathe{0%,100%{translate:0 0}50%{translate:0 -2px}}
@media(max-width:1100px){.selection-heading{top:3%}.selection-heading .eyebrow{font-size:7px}.selection-heading h2{font-size:24px;margin:7px 0}.selection-heading p{font-size:10px}#heroInfo{top:20%;left:22%;right:22%}#heroName{font-size:18px}#heroDetail{font-size:9px;margin:5px auto}#heroStats{display:none}.actor-name{font-size:8px}.selection-bottom{bottom:3%}#teamSlots{margin-bottom:11px;width:76%}.team-slot{padding:7px 9px;gap:8px}.team-slot b{font-size:15px}.team-slot span{font-size:8px}.team-slot small{font-size:7px}.selection-actions .primary{font-size:10px;padding:8px 12px}.selection-key-hint{font-size:7px}#selectionStatus{font-size:9px}.menu-copy{top:8%}.menu-copy p{font-size:12px}.panel h2{font-size:23px}}
@media(max-width:680px) and (orientation:portrait){#cabinet:has(#selection:not([hidden])){height:620px;aspect-ratio:auto}#selection{background-position:center}.selection-heading{top:5%}.selection-heading h2{font-size:23px;letter-spacing:2px;margin-top:12px}.selection-heading .eyebrow{font-size:7px;letter-spacing:1.5px}.selection-heading p{font-size:11px}#heroInfo{top:22%;left:10%;right:10%}#heroName{font-size:22px}#heroTitle{font-size:7px}#heroDetail{font-size:11px;margin:9px auto}.hero-equipment{flex-direction:column;gap:5px;font-size:8px}#lineup{left:1%;right:1%;top:44%;height:28%}.actor-sprite{left:-30%;width:160%;bottom:26px;transform-origin:50% 100%}.actor-name{font-size:5.5px;letter-spacing:0;bottom:10px}.crew-number{width:14px;height:14px;font-size:8px;line-height:13px;left:calc(50% - 7px);bottom:28px}.selection-bottom{left:4%;right:4%;bottom:4%}#teamSlots{width:100%;gap:5px;margin-bottom:16px}.team-slot{padding:9px 5px;gap:5px;min-height:47px}.team-slot b{font-size:12px}.team-slot span{font-size:6.5px;letter-spacing:.4px}.team-slot small{font-size:6px}.team-slot i{font-size:12px}.selection-actions{display:grid;grid-template-columns:70px 1fr;gap:10px}.selection-actions>div{grid-column:1/-1;grid-row:1}.selection-actions .primary{justify-content:center}.selection-key-hint{display:none}#selectionStatus{font-size:10px;margin:0}.selection-actions .secondary{font-size:8px;padding:8px 5px}.menu-copy{width:88%;top:7%}h1{font-size:62px;letter-spacing:-3px}.menu-copy p{font-size:12px}#menu.screen{background:linear-gradient(180deg,#0b110ef0 0%,#0b110ee8 50%,#0b110e44 88%)}.ctas .primary{font-size:11px}.panel h2{font-size:21px}.panel .primary{font-size:11px}}
@media(pointer:coarse) and (orientation:landscape){.masthead{height:43px}.selection-heading{top:2%}.selection-heading .eyebrow,.selection-heading p,#heroDetail,.hero-equipment{display:none}.selection-heading h2{font-size:21px;margin:5px}#heroInfo{top:14%}#heroName{font-size:16px;margin-bottom:2px}#heroTitle{font-size:7px}#lineup{top:27%;height:43%}.selection-bottom{bottom:2%}.actor-name{font-size:7px}.team-slot{padding:4px 8px}.team-slot small{display:none}#teamSlots{margin-bottom:7px}.selection-actions .primary,.selection-actions .secondary{min-height:34px;padding:6px 10px}.selection-actions .primary{font-size:9px}.selection-key-hint{display:none}#selectionStatus{font-size:8px}.menu-copy{top:5%}h1{font-size:clamp(45px,7vw,74px)}.menu-copy p{display:none}.settings{margin:10px 0}.ctas .primary{font-size:11px}}
@media(prefers-reduced-motion:reduce){.actor-sprite{animation:none}.camp-actor.inspected .actor-sprite,.camp-actor.chosen .actor-sprite{transform:none}}

/* Painted lettering and screen-printed labels. */
h1{font-weight:900;font-style:italic;letter-spacing:-3px;line-height:.84;text-shadow:3px 3px 0 #071119,5px 5px 0 #35cbd055;transform:rotate(-3deg);font-size:clamp(58px,7.8vw,110px)}h1>span:first-child{font-size:.45em;letter-spacing:1.6px;line-height:1.2}.subtitle{font-weight:900;font-style:normal;letter-spacing:7px;font-size:.3em;margin-top:17px;color:#e6ff57;text-shadow:2px 2px #071119;border-bottom:3px solid #e6ff57;padding-bottom:8px;width:max-content}.primary{font-weight:900;font-style:italic;font-size:20px;letter-spacing:1px;clip-path:polygon(0 0,100% 0,100% 82%,96% 100%,0 100%)}.eyebrow{font-size:10px;letter-spacing:1.8px}.menu-copy p{font-size:15px;color:#c6d0cf}.menu-links button{color:#bad0d5;border-color:#66818d}.edition span{color:#a5c6c9}.edition strong{font-weight:800;font-size:14px;color:#e4f2ed}.selection-heading h2{font-size:42px;font-weight:900;font-style:italic;letter-spacing:2px;line-height:1;text-shadow:3px 3px 0 #06131b,5px 5px 0 #16c9d344;transform:rotate(-2deg)}.selection-heading p{font-family:Barlow,Arial,sans-serif;font-size:11px;color:#c5dadc}.selection-heading .eyebrow{background:#e6ff57;color:#132029;padding:4px 9px;font-size:8px;letter-spacing:1.5px;display:inline-block;transform:rotate(-2deg)}#heroName{font-size:29px;font-weight:900;font-style:italic;letter-spacing:1.2px;margin-bottom:3px}#heroTitle{font-size:8px;color:#d9e5e4}.hero-equipment b{color:var(--hero-color)}.actor-name{font-family:'Barlow Condensed',Impact,sans-serif;font-size:13px;font-weight:800;letter-spacing:1.2px}.actor-sprite{transition:filter .25s,transform .25s;filter:brightness(.23) saturate(.5)}.actor-sprite img{transition:none}.actor-motion{display:block;position:absolute;inset:0;transform-origin:50% 92%}.actor-motion .ready,.actor-motion .walk{opacity:0}.camp-actor.performing{z-index:5}.camp-actor.inspected .actor-sprite,.camp-actor.chosen .actor-sprite{filter:brightness(1.08) saturate(1.08);transform:translateY(-3px) scale(1.05)}.spotlight{background:radial-gradient(ellipse at 50% 70%,color-mix(in srgb,var(--hero-color) 24%,transparent),transparent 67%)}.street-sigil{position:absolute;bottom:27px;left:15%;right:15%;height:10px;border:2px solid var(--hero-color);border-radius:50%;box-shadow:0 0 12px var(--hero-color);opacity:0;transform:rotate(-5deg);pointer-events:none}.camp-actor.chosen .street-sigil{opacity:.55}.crew-number{border-radius:2px;font:900 12px/17px 'Barlow Condensed',Impact,sans-serif;background:var(--hero-color);color:#0d1820;box-shadow:2px 2px #051016;bottom:29px}.team-slot b{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:900;font-size:25px}.team-slot span{font-size:10px;font-weight:800;color:#9db1b5}.team-slot small{font-size:9px;font-weight:400;color:#7e979f}.team-slot.filled small{color:#a7bec2}.selection-actions .primary{font-size:16px}.selection-actions .secondary{font-size:10px;font-weight:800}#selectionStatus{font-size:11px}.selection-key-hint{color:#9ab3b9}.panel h2{font-weight:900;font-style:italic;font-size:35px}.panel .primary{font-size:18px}.controls-strip{border-color:#2f444e}.hero-card.active{background:#243640ed}.hero-card span{color:#d7e7e7}#stageFlash{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:900;font-style:italic;font-size:58px;letter-spacing:1px}.action-trail{position:absolute;left:28%;top:45%;width:58%;height:32%;border-top:4px solid var(--hero-color);border-right:2px solid var(--hero-color);border-radius:50%;filter:drop-shadow(0 0 7px var(--hero-color));opacity:0;pointer-events:none}.camp-actor[data-hero="1"] .action-trail{width:32%;height:21%;left:39%;top:50%;border:3px solid #b3a2ff}.camp-actor[data-hero="2"] .action-trail{width:23%;height:16%;left:70%;top:47%;border:0;border-radius:0;background:#ffe297;clip-path:polygon(0 40%,35% 0,48% 29%,100% 25%,72% 52%,100% 85%,45% 72%,20% 100%)}.camp-actor[data-hero="3"] .action-trail{border:3px solid var(--hero-color);width:54%;height:32%;top:44%;left:25%}.camp-actor[data-hero="4"] .action-trail{border-top:3px solid #a2f8ed;border-bottom:2px solid #a2f8ed;transform:rotate(-30deg)}.camp-actor[data-hero="5"] .action-trail{border:0;border-radius:0;background:#95eaff;width:65%;height:34%;top:30%;clip-path:polygon(0 55%,35% 40%,20% 25%,66% 30%,47% 0,100% 40%,62% 46%,80% 72%,43% 57%,50% 100%,22% 65%)}.camp-actor[data-hero="6"] .action-trail{border:0;background:radial-gradient(ellipse,#ffe36b 0,#ff796c99 40%,#ee5bbd00 70%);width:55%;height:45%;top:24%;left:46%}.camp-actor[data-hero="7"] .action-trail{top:90%;left:5%;width:90%;height:10%;border:4px solid #f2d56d}
@media(max-width:1100px){.selection-heading h2{font-size:31px}.selection-heading .eyebrow{font-size:6px}#heroName{font-size:23px}#heroDetail{font-size:10px}.actor-name{font-size:10px}.team-slot b{font-size:19px}.team-slot span{font-size:8px}.team-slot small{font-size:7px}.selection-actions .primary{font-size:13px}#selectionStatus{font-size:9px}.menu-copy p{font-size:12px}.ctas .primary{font-size:18px}h1{font-size:clamp(58px,8.1vw,100px)}}
@media(max-width:680px) and (orientation:portrait){h1{font-size:69px;letter-spacing:-2px}.menu-copy p{font-size:12px}.ctas .primary{font-size:15px;padding:11px 13px}.selection-heading h2{font-size:30px;letter-spacing:1px}.selection-heading .eyebrow{font-size:6px;letter-spacing:1px}.selection-heading p{font-size:10px}#heroName{font-size:29px}#heroDetail{font-size:11px}.actor-name{font-size:7px;letter-spacing:.3px}.team-slot span{font-size:8px}.team-slot small{font-size:6px}.team-slot b{font-size:16px}.selection-actions .primary{font-size:14px}.crew-number{font-size:10px;line-height:13px}.panel h2{font-size:29px}.panel .primary{font-size:16px}#stageFlash{font-size:36px}.menu-copy{top:7%}}
@media(pointer:coarse) and (orientation:landscape){.selection-heading h2{font-size:27px}#heroName{font-size:21px}.selection-actions .primary{font-size:12px}.actor-name{font-size:9px}h1{font-size:clamp(45px,8vw,80px)}.ctas .primary{font-size:14px}}
@media(prefers-reduced-motion:reduce){.actor-motion{transform:none!important}.action-trail{display:none}}
/* Keep motion effects aligned to the actual 3:4 sprite on narrow displays. */
.actor-motion{inset:auto 0 0;width:100%;height:auto;aspect-ratio:3/4;transform-origin:50% 97.5%}

/* Landscape play uses the whole browser viewport, including short phone screens. */
body.in-game,body.portrait-blocked{overflow:hidden;overscroll-behavior:none}
body.in-game .masthead,body.in-game .controls-strip,body.in-game .legal{display:none}
body.in-game main{max-width:none;padding:0;margin:0}
body.in-game #cabinet{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;max-width:none;max-height:none;aspect-ratio:auto;margin:0;border:0;border-radius:0;box-shadow:none}
body.in-game #game{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
body.in-game #hud{padding: max(12px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 12px max(18px,env(safe-area-inset-left))}
body.in-game #touch{left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom))}
body.in-game #joystick{width:98px;height:98px}
body.in-game #joystick i{width:38px;height:38px;left:50%;top:50%;margin:-19px 0 0 -19px}
body.in-game .touch-actions{grid-template-columns:repeat(4,clamp(44px,8dvh,58px));gap:8px}
body.in-game .touch-actions button{width:100%;height:clamp(44px,8dvh,54px);font-size:9px;letter-spacing:.3px}
body.in-game #pause{min-width:44px;min-height:44px}
body.in-game #toast{bottom:22px;max-width:50%;font-size:11px;pointer-events:none}
body.in-game .modal{padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
body.in-game .panel{max-height:100%}
#orientationGate{position:fixed;inset:0;z-index:100;min-height:100vh;min-height:100dvh;padding:40px max(24px,env(safe-area-inset-right)) 40px max(24px,env(safe-area-inset-left));display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:radial-gradient(ellipse at 50% 36%,#24484a,#0a151c 68%);outline:0}
#orientationGate h2{font:italic 900 clamp(32px,9vw,52px)/.98 'Barlow Condensed',Impact,sans-serif;margin:20px 0 12px;letter-spacing:.5px}
#orientationGate p{font-size:15px;line-height:1.6;color:#bfd3d5;margin:0 0 25px}
#orientationGate small{max-width:280px;font-size:12px;line-height:1.6;color:#8aa3ad}
.rotate-phone{position:relative;width:62px;height:100px;border:3px solid #e6ff57;border-radius:12px;transform:rotate(90deg);margin:0 0 45px;box-shadow:0 0 35px #c5ff5719}
.rotate-phone:after{content:'';position:absolute;bottom:6px;left:22px;width:12px;height:3px;background:#e6ff57;border-radius:3px}
.rotate-phone span{position:absolute;inset:0;display:grid;place-items:center;font-size:43px;color:#e6ff57;transform:rotate(-90deg)}
@media(orientation:portrait){body{overflow:hidden}#orientationGate[hidden]{display:flex!important}}
@media(orientation:landscape) and (max-height:600px){
 body{overflow:hidden;overscroll-behavior:none}
 main{max-width:none;margin:0;padding:0}
 #cabinet{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;max-width:none;max-height:none;aspect-ratio:auto;margin:0;border:0;border-radius:0;box-shadow:none}
 #game{width:100%;height:100%;object-fit:fill}
 .masthead{position:fixed;top:0;left:0;right:0;z-index:10;height:44px;padding:0 max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left));background:linear-gradient(#06131bcc,transparent)}
 body:has(#selection:not([hidden])) .masthead,.controls-strip,.legal,.build{display:none}
 .brand{font-size:9px}.brand b{font-size:7px}.brand-mark{font-size:17px;padding:4px 6px}.header-right button{height:30px;min-width:32px;font-size:10px}
 .menu-copy{top:51px;left:max(5%,env(safe-area-inset-left));width:52%}
 .menu-copy .eyebrow{font-size:8px}.menu-copy p{display:none}
 h1{font-size:clamp(42px,13dvh,76px);letter-spacing:-1.5px;margin:10px 0 12px}
 .subtitle{margin-top:9px;font-size:.32em;letter-spacing:5px;padding-bottom:5px}
 .settings{gap:14px;margin:8px 0}.settings label{font-size:7px;gap:2px}.settings select{font-size:10px;padding:4px 16px 4px 0;max-width:150px}
 .ctas{flex-wrap:nowrap;gap:9px}.ctas .primary{font-size:14px;padding:9px 12px;gap:14px}.ctas .secondary{font-size:9px;padding:11px 9px;white-space:nowrap}
 .menu-links{margin-top:12px;gap:18px}.menu-links button{font-size:8px}.edition{display:none}
 .selection-heading{top:max(10px,env(safe-area-inset-top))}.selection-heading h2{font-size:28px;letter-spacing:1px;margin:0}.selection-heading .eyebrow,.selection-heading p,#heroDetail,.hero-equipment,#heroStats{display:none}
 #heroInfo{top:15%;left:25%;right:25%}#heroName{font-size:23px;margin:0}#heroTitle{font-size:8px;letter-spacing:1px}
 #lineup{top:27%;height:43%;left:max(3%,env(safe-area-inset-left));right:max(3%,env(safe-area-inset-right))}
 .actor-sprite{width:31.5dvh;max-width:124%;height:42dvh;left:50%;translate:-50% 0;bottom:26px;animation:none}.actor-name{font-size:10px;bottom:6px}.crew-number{bottom:24px}.street-sigil{bottom:23px}
 .selection-bottom{left:max(3%,env(safe-area-inset-left));right:max(3%,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom))}
 #teamSlots{width:68%;margin-bottom:7px;gap:8px}.team-slot{padding:4px 8px;min-height:32px;gap:8px}.team-slot small{display:none}.team-slot b{font-size:19px}.team-slot span{font-size:9px}
 .selection-actions{gap:12px}.selection-actions .primary,.selection-actions .secondary{min-height:40px;padding:7px 12px}.selection-actions .primary{font-size:14px}.selection-actions .secondary{font-size:10px}.selection-key-hint{display:none}#selectionStatus{font-size:10px;margin:0}
 body.in-game #hud{padding-top:max(10px,env(safe-area-inset-top))}
 #heroes{gap:6px}.hero-card{min-width:62px;padding:5px 7px}.hero-card span{font-size:9px}.hero-card small{font-size:10px;letter-spacing:2px}
 .hud-center{display:block;padding-top:3px}.hud-center span{font-size:8px;letter-spacing:1px}.hud-center b{font-size:10px;margin-top:4px}.hud-score{gap:12px}.hud-score>span b{font-size:19px}
 #bossHud{top:65px;width:36%;left:32%}#bossHud span{font-size:9px}#stageFlash{font-size:40px;top:29%}
 .panel{padding:16px 24px}.panel h2{font-size:29px;margin:5px 0 10px}.panel .primary{font-size:16px}.panel p{font-size:12px}#dialogActions{margin-top:14px}
}
@media(orientation:landscape) and (max-height:360px){.menu-copy{top:45px}h1{margin:8px 0}.menu-links{margin-top:8px}.selection-heading h2{font-size:24px}#heroName{font-size:20px}#heroTitle{font-size:7px}#teamSlots{margin-bottom:5px}.selection-actions .primary,.selection-actions .secondary{min-height:36px}.actor-name{font-size:9px}.hud-center{display:none}body.in-game #joystick{width:88px;height:88px}body.in-game #toast{font-size:10px;max-width:40%;padding:7px 9px}#stageFlash{font-size:32px}}

/* Signature crew: atlas poses, a single attack, and independent cooldowns. */
.pose-frame{position:absolute;inset:0;display:block;background-size:200% 200%;background-repeat:no-repeat;filter:drop-shadow(0 8px 5px #000a)}
.actor-name{text-transform:uppercase;letter-spacing:.65px;font-size:clamp(9px,1vw,13px)}
.hero-card{min-width:112px;transform:none;border-radius:3px;border-width:1px;padding-bottom:15px}
.hero-card span{text-transform:uppercase;letter-spacing:.5px}
.hero-card em{display:block;font:700 9px Barlow,Arial,sans-serif;color:var(--hero-color);font-style:normal;margin-top:5px;letter-spacing:1px}
.hero-card i{display:block;position:absolute;left:7px;right:7px;bottom:5px;height:3px;background:#ffffff18}
.hero-card i:after{content:'';display:block;height:100%;width:var(--charge);background:var(--hero-color)}
#ability{--hero-color:#dfff69;position:absolute;z-index:5;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));width:196px;min-height:92px;padding:18px 14px 12px;background:#10232eeb;color:var(--hero-color);border:1px solid var(--hero-color);text-align:left;box-shadow:0 0 30px #0007;touch-action:manipulation}
#ability .ability-key{font:800 9px Barlow,Arial;letter-spacing:1px;white-space:nowrap;color:#dae9df;display:block;margin-bottom:5px}
#ability strong{display:block;font:italic 900 21px/.98 'Barlow Condensed',Impact,sans-serif;text-transform:uppercase;letter-spacing:.5px}
#abilityState{display:block;font-size:10px;font-weight:800;letter-spacing:1px;margin-top:7px}
#ability>i{position:absolute;top:0;left:0;right:0;height:5px;background:#ffffff19}#abilityFill{display:block;height:100%;background:var(--hero-color)}
#ability:disabled{cursor:default;border-color:#6b808c;color:#a9bcc3;background:#10212de8}#ability:disabled:hover{filter:none}
#ability:not(:disabled){box-shadow:0 0 20px color-mix(in srgb,var(--hero-color) 18%,transparent)}
#ability:not(:disabled):active{transform:scale(.96)}
body.in-game .touch-actions{grid-template-columns:repeat(2,52px);margin-right:145px;gap:8px}
body.in-game .touch-actions button{height:50px;min-width:44px}
body.in-game #touch{bottom:max(24px,env(safe-area-inset-bottom))}
body:has(#dialog:not([hidden])) #ability{visibility:hidden}
.power-guide{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}.power-guide p{margin:5px 0}
@media(pointer:coarse){#ability{width:126px;min-height:82px;right:max(18px,env(safe-area-inset-right))}#ability strong{font-size:19px}#ability .ability-key{font-size:7.5px;letter-spacing:.5px}}
@media(orientation:landscape) and (max-height:600px){
 .hero-card{min-width:89px;padding:5px 7px 13px}.hero-card span{font-size:9px;letter-spacing:.1px}.hero-card small{font-size:9px;letter-spacing:1px}.hero-card em{font-size:8px;margin-top:3px}
 #hud .hud-center{max-width:25%}#ability{width:126px;min-height:76px;padding:9px 10px 13px;right:max(18px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom))}#ability strong{font-size:18px}#abilityState{font-size:9px}
 #bossHud{top:83px}.actor-name{font-size:clamp(8px,1.15vw,10px);letter-spacing:.1px}.team-slot span{font-size:8px}#heroTitle{font-size:9px}#heroInfo{left:15%;right:15%}
 .power-guide{grid-template-columns:1fr}
}
@media(orientation:landscape) and (max-width:750px){.hud-center{display:none!important}.hero-card{min-width:79px}.hero-card span{font-size:8px}.hud-score>span:first-child{display:none}body.in-game .touch-actions{grid-template-columns:repeat(2,44px);gap:6px;margin-right:136px}}
.camp-actor[data-hero] .action-trail{left:24%;top:40%;width:60%;height:32%;border:0;border-top:3px solid var(--hero-color);border-right:2px solid var(--hero-color);border-radius:50%;background:none;clip-path:none}
/* Alhambra title: preserve the complete title on narrow landscape displays. */
.menu-copy h1{font-size:clamp(38px,5.8vw,78px);line-height:.98;white-space:nowrap}
.menu-copy h1>span:first-child{font-size:.68em;letter-spacing:.08em}
.menu-copy h1 .subtitle{font-size:.32em;letter-spacing:.14em}
/* Each chapter's boss gets an unmistakable entrance beside their street stamp. */
#stageFlash.boss-intro{left:5%;top:24%;width:43%;text-align:left;font-size:clamp(27px,4vw,56px);line-height:.95;transform:rotate(-3deg);color:#fff0b3;text-shadow:3px 4px 0 #0a1626,0 0 20px #f15b4e88}
#stageFlash.boss-intro small{display:block;font:800 11px Barlow,Arial;letter-spacing:3px;line-height:1.5;color:#f7b991;margin-bottom:12px}
#stageFlash.boss-intro em{display:block;font:800 15px Barlow,Arial;letter-spacing:2px;line-height:1.4;color:#e3edf2;margin-top:12px}
@media(orientation:landscape) and (max-height:450px){#stageFlash.boss-intro{top:30%;font-size:27px}#stageFlash.boss-intro small{font-size:8px;letter-spacing:1px;margin-bottom:6px}#stageFlash.boss-intro em{font-size:10px;letter-spacing:1px;margin-top:6px}}

@media(orientation:landscape) and (max-height:600px){#ability .ability-key{font-size:7.5px;letter-spacing:.5px}}

/* Preserve automatic mobile zoom protection without an extra control. */
html{touch-action:manipulation}
body.in-game #cabinet,body.in-game #game,body.in-game #ability{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* Loading feedback remains light and does not block the menu. */
#assetStatus{font-size:11px;color:#b8ccc8;min-height:15px;margin:8px 0 0}.load-progress{width:100%;height:7px;accent-color:#e6ff57}.load-caption{color:#b8ccc8;font-size:13px}

/* Koast celebrates with a raised bottle and peace sign; no combat trail in the lineup. */
.camp-actor[data-hero="4"] .action-trail{display:none}
.camp-actor[data-hero="0"] .action-trail{display:none}
.selection-bill{position:absolute;left:0;top:0;width:12px;height:6px;border:1px solid #66846c;background:#c6d7a1;color:#3e6342;font:700 6px/5px Georgia,serif;text-align:center;opacity:0;pointer-events:none;box-shadow:0 1px 2px #0005}

/* Full crew portrait below a compact, readable home-screen header. */
#menu.screen{background:linear-gradient(180deg,#07131beb 0%,#07131ba0 38%,#07131b08 57%,#07131b18 88%,#07131b88 100%)}
#menu .menu-copy{left:5%;top:7%;width:90%;display:grid;grid-template-columns:1.12fr 1fr;gap:7%;align-items:center}
#menu .menu-copy h1{font-size:clamp(38px,5.3vw,73px);margin:14px 0 10px}
#menu .menu-copy h1 .subtitle{margin-top:8px;padding-bottom:5px}
#menu .menu-copy p{font-size:12px;line-height:1.5;margin:10px 0}
#menu .menu-controls{padding-top:15px}
#menu .settings{margin:0 0 14px;gap:22px}
#menu .ctas{gap:8px}
#menu .ctas .primary{font-size:18px;padding:13px 18px;gap:22px}
#menu .ctas .secondary{font-size:10px;padding:10px}
#menu .menu-links{margin-top:14px;gap:18px}
#menu .menu-links button{font-size:9px}
#menu .edition{left:0;right:0;bottom:3%;text-align:center}
#menu .edition span{display:none}
#menu #assetStatus{position:absolute;top:100%;right:0;font-size:10px;color:#c5d6db}
.selection-bill{width:clamp(25px,2.6vw,38px);height:clamp(13px,1.3vw,19px);border:2px solid #66846c;outline:1px solid #dce8c6;outline-offset:-4px;background:#c6d7a1;font:700 clamp(10px,1.1vw,15px)/1 Georgia,serif;box-shadow:0 2px 4px #0008}
@media(orientation:landscape) and (max-height:600px){
 #menu .menu-copy{top:50px;left:4%;width:92%;gap:4%;grid-template-columns:1.12fr 1fr;align-items:start}
 #menu .menu-copy .eyebrow,#menu .menu-copy p{display:none}
 #menu .menu-copy h1{font-size:clamp(28px,10.2dvh,55px);margin:0;line-height:.94}
 #menu .menu-copy h1 .subtitle{margin-top:5px;padding-bottom:3px}
 #menu .menu-controls{padding-top:0}
 #menu .settings{margin:0 0 7px;gap:14px}
 #menu .ctas{gap:6px;flex-wrap:wrap}
 #menu .ctas .primary{font-size:12px;padding:9px 12px;gap:12px}
 #menu .ctas .secondary{font-size:8px;padding:7px}
 #menu .menu-links{margin-top:6px;gap:14px}
 #menu .menu-links button{font-size:7px}
 #menu .edition{display:none}
 #menu #assetStatus{display:block;margin:3px 0;font-size:8px}
}

/* V6.5.9: reserve separate bands for controls and the mobile crew portraits.
   Short Safari viewports include the address/tab bars; do not size from width. */
@media (orientation:landscape) and (max-height:600px){
 .masthead{height:36px}
 #menu .menu-copy{top:max(42px,env(safe-area-inset-top));left:max(4%,env(safe-area-inset-left));right:max(4%,env(safe-area-inset-right));width:auto;gap:4%}
 #menu .settings{margin-bottom:5px}
 #menu .ctas{flex-wrap:nowrap}
 #menu .ctas .primary{font-size:12px;padding:8px 10px;gap:8px;white-space:nowrap}
 #menu .ctas .secondary{font-size:8px;padding:6px;white-space:nowrap}
 #menu .menu-links{position:fixed;left:0;right:0;bottom:max(5px,env(safe-area-inset-bottom));justify-content:center;margin:0;gap:22px}
 #menu .menu-links button{font-size:8px;padding-bottom:2px;letter-spacing:.8px}
 #menu #assetStatus{position:fixed;top:auto;bottom:max(23px,env(safe-area-inset-bottom));right:max(4%,env(safe-area-inset-right));margin:0;min-height:0}

 #selection{--roster-top:max(54px,calc(env(safe-area-inset-top) + 46px));--roster-bottom:max(76px,calc(env(safe-area-inset-bottom) + 68px));--portrait-height:calc(100dvh - var(--roster-top) - var(--roster-bottom) - 22px)}
 .selection-heading{top:max(10px,env(safe-area-inset-top));left:max(4%,env(safe-area-inset-left));width:43%;text-align:left}
 .selection-heading h2{font-size:clamp(20px,3vw,28px);line-height:1.1;letter-spacing:.5px;transform:none}
 #heroInfo{top:max(7px,env(safe-area-inset-top));left:48%;right:max(4%,env(safe-area-inset-right));text-align:right}
 #heroName{font-size:21px;line-height:1.05;margin:0 0 2px}
 #heroTitle{display:block;font-size:8px;letter-spacing:.6px;line-height:1.2}
 #lineup{top:var(--roster-top);bottom:var(--roster-bottom);height:auto;left:max(3%,env(safe-area-inset-left));right:max(3%,env(safe-area-inset-right))}
 .actor-sprite{bottom:20px;width:min(124%,calc(var(--portrait-height) * .75));max-width:none;height:var(--portrait-height);left:50%;translate:-50% 0}
 .actor-motion{aspect-ratio:3/4;height:auto}
 .actor-name{bottom:2px;left:-8%;right:-8%;font-size:clamp(8px,1.2vw,11px);line-height:1.1;white-space:nowrap}
 .crew-number{bottom:19px;left:auto;right:4%;width:15px;height:16px;font-size:10px;line-height:15px}
 .street-sigil{bottom:19px;height:7px}
 .selection-bottom{bottom:max(6px,env(safe-area-inset-bottom));left:max(3%,env(safe-area-inset-left));right:max(3%,env(safe-area-inset-right));display:grid;grid-template-columns:64px minmax(0,1fr) 146px;grid-template-rows:40px 14px;gap:5px 10px;align-items:stretch}
 #teamSlots{grid-column:2;grid-row:1;width:100%;margin:0;gap:6px}
 .team-slot{padding:4px 6px;gap:5px;min-height:36px}
 .team-slot b{font-size:18px}.team-slot span{font-size:8px;letter-spacing:.3px;overflow:hidden;text-overflow:ellipsis}.team-slot i{font-size:13px}
 .selection-actions{display:contents}
 .selection-actions .secondary{grid-column:1;grid-row:1;padding:6px;font-size:10px;min-height:40px}
 .selection-actions .primary{grid-column:3;grid-row:1;min-height:40px;padding:7px 10px;font-size:13px;gap:8px;justify-content:space-between}
 .selection-actions>div{grid-column:1/-1;grid-row:2;align-self:center}
 #selectionStatus{font-size:9px;line-height:14px;margin:0}
 #bossHud{top:max(66px,calc(env(safe-area-inset-top) + 56px));left:50%;width:26%;max-width:210px;transform:translateX(-50%);line-height:1}
 #bossHud span{display:block;font-size:8px;line-height:1.2;letter-spacing:.7px}
 #bossHud>div{height:5px;margin-top:3px;border-width:1px}
}
@media (orientation:landscape) and (max-height:300px){
 #menu .menu-copy{top:max(39px,env(safe-area-inset-top));grid-template-columns:.85fr 1.15fr;gap:3%}
 #menu .menu-copy h1{font-size:28px}
 #menu .menu-copy h1 .subtitle{font-size:9px;letter-spacing:3px}
 #menu .settings label{font-size:6px;letter-spacing:1px}
 #menu .settings select{padding:2px 14px 3px 0;font-size:10px}
 #menu .ctas .primary{padding:7px 9px;font-size:11px}
 #menu .ctas .secondary{font-size:7px;padding:5px}
 #bossHud{top:max(64px,calc(env(safe-area-inset-top) + 54px));width:24%;max-width:190px}
 #bossHud span{font-size:7px;letter-spacing:.5px}
 #bossHud>div{height:4px}
}

/* V6.5.10: intrinsic canvas dimensions register all eight portraits consistently.
   No percentage-transformed atlas backgrounds or empty aspect-ratio parents. */
.actor-motion{inset:auto 0 0;width:100%;height:auto;aspect-ratio:auto}
.actor-portrait{display:block;width:100%;height:auto;max-width:none;pointer-events:none}
@media (orientation:landscape) and (max-height:600px){
 .actor-motion{height:auto;aspect-ratio:auto}
 #selection{--roster-top:max(45px,calc(env(safe-area-inset-top) + 37px));--roster-bottom:max(72px,calc(env(safe-area-inset-bottom) + 64px));--portrait-height:calc(100dvh - var(--roster-top) - var(--roster-bottom) - 16px)}
 .actor-sprite{bottom:14px}
}