/* v7.1 lobby: the live 3D stadium fills the screen behind the menu; two glass panels and one Play button.
   Garage state only (body without .playing). Loaded last. */
:root{--glass:rgba(11,15,19,.78);--glass-line:rgba(255,255,255,.08);--cut:16px}
body:not(.playing){background:#0a0f15}
body:not(.playing) #viewport{position:fixed!important;inset:0!important;width:100vw!important;max-width:none!important;height:100vh!important;height:100dvh!important;border:0!important;border-radius:0!important;z-index:-2;background:#0a0f15}
body:not(.playing) #viewport::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(90deg,rgba(8,11,15,.94) 0,rgba(8,11,15,.62) 27%,rgba(8,11,15,.08) 45%,rgba(8,11,15,.08) 58%,rgba(8,11,15,.66) 74%,rgba(8,11,15,.94) 100%),linear-gradient(0deg,rgba(8,11,15,.85) 0,rgba(8,11,15,0) 28%),linear-gradient(180deg,rgba(8,11,15,.8) 0,rgba(8,11,15,0) 16%)}
body:not(.playing) #viewport :is(.viewport-top,#arena-caption,.arena-watermark,.model-status){display:none!important}
body:not(.playing) :is(.garage-intro,footer,.loadout-heading,#mode-kicker,.arena-badge,.hero-index,.hero-orbit,#match-help,#online-setup-note,.control-legend){display:none!important}
/* No stacking contexts on #viewport's ancestors: it and the panel glass sit on negative layers under all content. */
body:not(.playing) .launch-strip{z-index:5}
body:not(.playing) header{background:linear-gradient(180deg,rgba(8,11,15,.9),rgba(8,11,15,0))!important;border-bottom:0!important}

/* Mode switch: one big segmented control. */
body:not(.playing) .modebar{max-width:none!important;margin:6px 0 18px!important;padding:0 max(28px,calc((100vw - 1500px)/2))!important;align-items:center!important}
body:not(.playing) .mode-tabs{display:flex;flex:0 0 auto!important;gap:0;background:rgba(8,11,15,.7);border:1px solid var(--glass-line);padding:4px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
body:not(.playing) .mode-tabs button{min-width:210px;border:0!important;background:transparent!important;padding:10px 18px!important;border-radius:0!important;opacity:.62;transition:opacity .15s,background .15s}
body:not(.playing) .mode-tabs button.active{opacity:1;background:#d5ed83!important;color:#0d1216!important;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
body:not(.playing) .mode-tabs button.active :is(b,small,.mode-icon){color:#0d1216!important}
body:not(.playing) .mode-tabs b{font:700 italic 22px/1 "Barlow Condensed",Barlow,sans-serif;letter-spacing:.02em;text-transform:uppercase}
body:not(.playing) .mode-tabs small{font-size:12px;opacity:.8}
body:not(.playing) #install{margin-left:auto}

/* Glass panels with the house cut corner. */
/* Glass lives on ::before: a filter or clip-path on the panel itself would trap the fixed #viewport inside it. */
body:not(.playing) :is(.loadout,.arena-panel){position:relative;z-index:auto;background:none!important;border:0!important;border-radius:0!important}
body:not(.playing) :is(.loadout,.arena-panel)::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}

/* Spinner column. */
body:not(.playing) .spinner-showcase{min-height:0!important;padding:4px 0 8px!important;display:grid;grid-template-columns:1fr 132px;align-items:center;background:none!important}
body:not(.playing) #hero-image{width:132px!important;height:132px!important;grid-column:2;grid-row:1;filter:drop-shadow(0 12px 24px rgba(0,0,0,.6))}
body:not(.playing) .hero-caption{grid-column:1;grid-row:1;position:static!important}
body:not(.playing) #hero-name{font:700 italic 46px/.9 "Barlow Condensed",Barlow,sans-serif;letter-spacing:.01em;text-transform:uppercase;margin:6px 0 0}
body:not(.playing) #hero-type{font-size:11px;letter-spacing:.14em}
body:not(.playing) .spinner-list{grid-template-columns:repeat(6,1fr)!important;gap:6px!important;margin:6px 0 12px}
body:not(.playing) .spinner-card{padding:6px 2px 7px!important;min-height:0!important;border-radius:0!important;background:rgba(255,255,255,.035)!important;border:1px solid transparent!important;position:relative}
body:not(.playing) .spinner-card img{width:46px!important;height:46px!important;margin:0 auto 3px}
body:not(.playing) .spinner-card strong{font-size:10.5px!important;line-height:1.1;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body:not(.playing) .spinner-card small{display:none!important}
body:not(.playing) .spinner-card.active{background:rgba(213,237,131,.1)!important;border-color:var(--spinner,#d5ed83)!important;box-shadow:inset 0 -3px 0 var(--spinner,#d5ed83)}
body:not(.playing) .spinner-card.active::after{display:none}
body:not(.playing) .build-details>summary{display:none}
body:not(.playing) .build-details{border:0!important;padding:0!important;margin:0!important}
body:not(.playing) .spinner-description{font-size:13px;line-height:1.45;color:#b9c4cc;margin:0 0 12px}
body:not(.playing) .stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px 18px;margin-bottom:12px}
body:not(.playing) .stat{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 8px}
body:not(.playing) .stat span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8f9ba5}
body:not(.playing) .stat b{font:700 italic 16px/1 "Barlow Condensed",Barlow,sans-serif}
body:not(.playing) .stat b small{font-size:10px;opacity:.5}
body:not(.playing) .stat-track{grid-column:1/-1;height:5px;background:rgba(255,255,255,.07);transform:skewX(-20deg)}
body:not(.playing) .stat-track i{display:block;height:100%;background:linear-gradient(90deg,#6f9a34,#d5ed83)}
body:not(.playing) .signature-description{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;background:rgba(213,237,131,.06);border-left:3px solid #d5ed83}
body:not(.playing) .signature-description b{font:700 italic 18px/1.1 "Barlow Condensed",Barlow,sans-serif;text-transform:uppercase}
body:not(.playing) .signature-description p{font-size:12px;margin:3px 0 0;color:#b9c4cc}
body:not(.playing) .signature-description small{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#8f9ba5}

/* Match column. */
body:not(.playing) .arena-title{margin-bottom:4px!important}
body:not(.playing) #arena-name{font:700 italic 34px/.95 "Barlow Condensed",Barlow,sans-serif;text-transform:uppercase}
body:not(.playing) #arena-description{font-size:13px;color:#b9c4cc;margin:4px 0 12px!important}
body:not(.playing):not(.wilds) .stadium-picker{display:grid!important;grid-template-columns:1fr 1fr!important;max-height:236px;overflow:auto;gap:6px!important;margin-bottom:14px}
body:not(.playing) .stadium-picker button{min-height:0!important;padding:9px 10px!important;border-radius:0!important;background:rgba(255,255,255,.035)!important;border:1px solid transparent!important;text-align:left}
body:not(.playing) .stadium-picker button.active{border-color:#d5ed83!important;background:rgba(213,237,131,.1)!important}
body:not(.playing) .stadium-picker button :is(svg,img,.stadium-icon){display:none}
body:not(.playing):not(.wilds) .match-options{display:grid!important;grid-template-columns:1fr 1fr;gap:10px!important}
body:not(.playing) .match-options label{font-size:10px;letter-spacing:.12em;color:#8f9ba5}
body:not(.playing) .match-options label:has(#rival){grid-column:1/-1}
body:not(.playing) .match-options select,body:not(.playing) #wilds-party{border-radius:0!important;background-color:rgba(255,255,255,.05)!important;border:1px solid var(--glass-line)!important;min-height:42px}

/* Launch: one unmistakable Play button. */
body:not(.playing) .launch-strip{background:var(--glass)!important;border:1px solid var(--glass-line)!important;border-radius:0!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
body:not(.playing) #launch{font:700 italic 30px/1 "Barlow Condensed",Barlow,sans-serif!important;letter-spacing:.04em;text-transform:uppercase;min-height:62px!important;min-width:220px;border-radius:0!important;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);box-shadow:0 0 30px rgba(213,237,131,.28)}
body:not(.playing) #launch:hover{filter:brightness(1.08)}
body:not(.playing) #modes{border-radius:0!important;min-height:62px!important}

@media (min-width:900px){
 body:not(.playing) main{display:grid!important;grid-template-columns:minmax(330px,390px) minmax(0,1fr) minmax(320px,370px)!important;gap:24px!important;max-width:none!important;padding:0 max(28px,calc((100vw - 1500px)/2)) 150px!important;align-items:start}
 body:not(.playing) .loadout{grid-column:1}
 body:not(.playing) .arena-panel{grid-column:3}
 body:not(.playing) .launch-strip{position:fixed!important;right:max(28px,calc((100vw - 1500px)/2));left:auto!important;bottom:26px!important;margin:0!important;max-width:none!important;width:auto;padding:10px!important;display:flex;gap:10px;align-items:center;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
 body:not(.playing) .launch-selection{display:none!important}
 body:not(.playing) .spinner-card strong{display:none}
 body:not(.playing) .spinner-card img{width:50px!important;height:50px!important;margin:2px auto!important}
 body:not(.playing) #launch-copy{text-align:right;padding:0 8px}
}
@media (max-width:899px){
 body:not(.playing) #viewport::after{background:linear-gradient(180deg,rgba(8,11,15,.55) 0,rgba(8,11,15,.1) 12%,rgba(8,11,15,.35) 30%,rgba(8,11,15,.92) 44%)}
 body:not(.playing) .modebar{padding:0 12px!important;margin:4px 0 10px!important}
 body:not(.playing) .mode-tabs{flex:1 1 auto!important;min-width:0}
 body:not(.playing) #install{flex:0 0 auto}
 body:not(.playing) .mode-tabs button{min-width:0;flex:1;padding:8px 10px!important}
 body:not(.playing) .mode-tabs b{font-size:19px}
 body:not(.playing) .mode-tabs small{display:none}
 body:not(.playing) .garage-switch{margin-top:24vh!important;background:rgba(8,11,15,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
 body:not(.playing) main{padding-bottom:110px!important}
 body:not(.playing) #hero-name{font-size:38px}
 body:not(.playing) .spinner-list{grid-template-columns:repeat(3,1fr)!important}
 body:not(.playing) .spinner-card strong{font-size:12px!important}
 body:not(.playing) .launch-strip{position:fixed!important;left:0;right:0;bottom:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))!important;border-left:0!important;border-right:0!important}
 body:not(.playing) #launch{min-width:0;flex:1;font-size:26px!important}
 body:not(.playing) #launch-copy,body:not(.playing) .launch-selection{display:none!important}
 body:not(.playing) #modes{min-height:52px!important;padding:0 12px!important}
 body:not(.playing) #launch{min-height:52px!important}
 /* The stadium lives inside the match panel; keep it painting while the spinner tab is open. */
 body:not(.playing)[data-garage-panel="spinner"] .arena-panel{display:block!important;padding:0!important;height:0;overflow:visible}
 body:not(.playing)[data-garage-panel="spinner"] .arena-panel>:not(#viewport){display:none!important}
 body:not(.playing)[data-garage-panel="spinner"] .arena-panel::before{display:none}
}

/* Survival lobby: party choice + the three-step brief instead of stadium/CPU setup. */
body.wilds:not(.playing) #wilds-brief{margin-top:4px}
body.wilds:not(.playing) .survival-steps{list-style:none;padding:0;margin:12px 0 0;display:grid!important;grid-template-columns:1fr!important;gap:8px;counter-reset:s}
body.wilds:not(.playing) .survival-steps li>*{min-width:0}
body.wilds:not(.playing) .survival-steps li{display:grid;grid-template-columns:30px 1fr;gap:2px 10px;padding:10px 12px;background:rgba(255,255,255,.035);border-left:3px solid #d5ed83;counter-increment:s}
body.wilds:not(.playing) .survival-steps li::before{content:counter(s);grid-row:span 2;font:700 italic 28px/1 "Barlow Condensed",Barlow,sans-serif;color:#d5ed83}
body.wilds:not(.playing) .survival-steps b{font:700 italic 17px/1.1 "Barlow Condensed",Barlow,sans-serif;text-transform:uppercase}
body.wilds:not(.playing) .survival-steps span{font-size:12px;color:#b9c4cc}
body.wilds:not(.playing) #wilds-party-note{display:block;font-size:12px;color:#8f9ba5;margin-top:10px}
body.wilds:not(.playing) #wilds-party-label{font-size:10px;letter-spacing:.12em;color:#8f9ba5}

/* v7.3 decluttered home: one compact Match panel replaces the stadium grid, dropdowns and extra copy. */
body:not(.playing) :is(#device-status,#launch-copy){display:none!important}
body:not(.playing):not(.wilds) :is(.stadium-picker,.match-options,.arena-title,#arena-description){display:none!important}
body.wilds:not(.playing) #quick-setup,body:not(.wilds):not(.playing) #gauntlet-home{display:none}
body.wilds:not(.playing) :is(#wilds-party-label,#arena-description){display:none!important}
body.wilds:not(.playing) .survival-steps span{display:none}
body.wilds:not(.playing) .survival-steps li{grid-template-columns:26px 1fr;padding:9px 12px}
body.wilds:not(.playing) .survival-steps li::before{font-size:22px;grid-row:auto}
#quick-setup{display:grid;gap:14px}
.qs-title{font:700 italic 34px/.95 "Barlow Condensed",Barlow,sans-serif;text-transform:uppercase;margin:0}
.qs-row{display:grid;gap:6px}
.qs-row>small{font:700 10px/1 Barlow,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8f9ba5}
.qs-seg{display:flex;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:3px;gap:3px}
.qs-seg button{flex:1;min-height:42px;border:0!important;border-radius:0!important;background:transparent!important;color:#c4ced5;font:700 italic 17px/1 "Barlow Condensed",Barlow,sans-serif;text-transform:uppercase;letter-spacing:.03em;cursor:pointer}
.qs-seg button[aria-pressed="true"]{background:#d5ed83!important;color:#0d1216!important}
.qs-seg button:disabled{opacity:.35;cursor:default}
.qs-cycle{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);min-height:58px}
.qs-cycle>button{height:100%;min-height:52px;border:0!important;border-radius:0!important;background:transparent!important;color:#d5ed83;font-size:30px;line-height:1;cursor:pointer}
.qs-cycle>button:hover{background:rgba(213,237,131,.1)!important}
.qs-cycle>span{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;justify-items:start;min-width:0;padding:6px 0}
.qs-cycle img{grid-row:span 2;width:40px;height:40px}
.qs-cycle b{font:700 italic 20px/1.05 "Barlow Condensed",Barlow,sans-serif;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.qs-cycle em{font-style:normal;font-size:12px;color:#8f9ba5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.qs-cycle>span:not(:has(img)){grid-template-columns:1fr}
.qs-note{font-size:12px;color:#8f9ba5;margin:0}
#gauntlet-home{display:grid;gap:10px;margin-top:12px}
#qs-shop{min-height:46px;border-radius:0!important}
/* Spinner column: keep what helps you choose, drop the rest. */
body:not(.playing) .signature-description small{display:none}
body:not(.playing) .signature-description{padding:8px 12px}
body:not(.playing) #modes{min-width:0;padding:0 14px!important;font-size:13px!important;background:transparent!important;border:1px solid rgba(255,255,255,.14)!important}