/* Showroom Edition: one responsive presentation layer for both dealerships. */
:root{--ink:#0a1016;--ink-2:#14202a;--paper:#f0f4f5;--line:#2a3b49;--gold:#f5c562;--green:#82dfb2;--muted:#a1b1be;--red:#ea2645;--cyan:#8ddded}
button,input,select{font-family:inherit}
button{cursor:pointer;touch-action:manipulation}
button:disabled{cursor:default}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--cyan)!important;outline-offset:3px}
[hidden]{display:none!important}
/* A native game lobby. All character imagery comes from the supplied art pack. */
html #mainMenu{background:#080e14;overflow:auto;overscroll-behavior:contain}
.lobby{isolation:isolate;position:relative;width:min(1240px,100%);min-height:min(850px,100dvh);padding:28px 5%;display:flex;flex-direction:column;overflow:hidden}
.lobby-map{position:absolute;z-index:-2;width:100%;height:100%;inset:0;object-fit:cover;opacity:.085;filter:saturate(.3);mask-image:linear-gradient(90deg,transparent,#000)}
.lobby::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 72% 42%,#24465066,transparent 58%),linear-gradient(0deg,#080e14,transparent 45%)}
.lobby-top,.lobby-foot{display:flex;justify-content:space-between;align-items:center;gap:12px}
.lobby-top{padding-bottom:23px;border-bottom:1px solid #c9e6ef20}
.lobby-brand{display:flex;align-items:center;gap:10px;color:#e6edf1;font-size:12px;font-weight:850;letter-spacing:.15em}
.lobby-brand i{width:6px;height:25px;background:var(--red);transform:skew(-12deg)}
.edition{font-size:12px;color:#93a8b5;letter-spacing:.09em;text-align:right}
.lobby-main{display:grid;grid-template-columns:1fr 1.08fr;align-items:center;min-height:490px;flex:1;position:relative}
.lobby-copy{position:relative;z-index:3;padding:45px 0}
.lobby-eyebrow{font-size:12px;letter-spacing:.26em;color:var(--gold);font-weight:850;margin-bottom:20px}
.lobby h1{font-size:clamp(40px,5.3vw,72px);line-height:.98;letter-spacing:-.055em;font-weight:950;margin:0;color:#f1f5f6}
.lobby h1 span{color:var(--gold)}
.lobby-line{font-size:19px;line-height:1.5;margin:22px 0;color:#b5c2cc}
.lobby-career{display:flex;flex-direction:column;gap:7px;margin:24px 0;color:#a2b1bc}
.lobby-career>span{font-size:12px;font-weight:750;letter-spacing:.14em;color:#77919f}
.lobby-career strong{font-size:14px;font-weight:600;line-height:1.45}
.lobby #menuPlay{position:relative;inset:auto;width:min(350px,100%);height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border:1px solid #ffd891;border-radius:6px;background:linear-gradient(115deg,#f7cd76,#eeb557);box-shadow:0 5px 0 #7d5427,0 12px 45px #e9aa3920;color:#171b20;font-size:17px;letter-spacing:.08em;font-weight:900;transition:transform .16s,filter .16s}
.lobby #menuPlay:hover{filter:brightness(1.07);transform:translateY(-2px)}
.lobby #menuPlay:active{transform:translateY(3px)}
.lobby #menuPlay b{font-size:27px;font-weight:500}
.lobby-secondary{display:flex;gap:24px;margin-top:19px}
.lobby-secondary button{position:static;width:auto;height:44px;border:0;padding:0;background:transparent;font-size:14px;color:#aabcc8;text-align:left}
.lobby-secondary button:hover{color:#fff}
.lobby-cast{height:470px;position:relative;align-self:center;margin-left:-65px;pointer-events:none}
.cast-orbit{position:absolute;width:85%;height:85%;left:7.5%;top:2%;border:1px solid #7dcddd20;border-radius:50%;box-shadow:0 0 0 32px #8bdded05,0 0 0 66px #8bdded03;background:radial-gradient(circle,#6cd6e914,transparent 68%)}
.cast-person{position:absolute;object-fit:contain;filter:drop-shadow(0 20px 16px #0007);width:68%;height:84%;bottom:44px}
.cast-left{left:-3%;transform:rotate(-6deg);opacity:.87}
.cast-right{right:-6%;transform:rotate(6deg);opacity:.87}
.cast-center{left:18%;width:72%;height:92%;z-index:2;bottom:25px}
.cast-caption{position:absolute;bottom:0;left:12%;right:0;text-align:center;z-index:3;padding-top:20px;background:linear-gradient(transparent,#0b131bdd 48%);display:flex;flex-direction:column;gap:8px}
.cast-caption span{font-size:12px;letter-spacing:.22em;color:#84adbb}
.cast-caption b{font-size:14px;letter-spacing:.08em;color:#bdcbd2}
.lobby-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;position:relative;z-index:4}
.lobby-nav button{position:static;width:auto;height:auto;min-height:104px;background:#12212bcc;border:1px solid #aecede29;border-radius:6px;display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:16px;text-align:left;color:#eef4f6;transition:background .15s,border-color .15s}
.lobby-nav button:hover{background:#1c313ddd;border-color:#9cd9e970}
.lobby-nav .nav-num{font-size:12px;color:var(--gold);font-variant-numeric:tabular-nums}
.lobby-nav strong{font-size:15px;font-weight:750}
.lobby-nav button>span:last-child{font-size:12px;color:#90a8b7;line-height:1.3}
.lobby-foot{margin-top:20px;font-size:12px;color:#668393;letter-spacing:.06em}
.lobby-foot button{border:0;background:transparent;color:#9aafbd;min-height:44px;font-size:12px;padding:0}
.lobby-foot strong{margin-left:8px;color:#d4e2e8}
html #menuModal{position:fixed;inset:0;width:100%;transform:none;z-index:30;padding:16px}
html .menu-card{background:linear-gradient(150deg,#1b2d38,#0e1821 70%);border-color:#6e99b544;border-radius:16px;padding:22px;max-height:92dvh;scrollbar-color:#476574 #101b23}
.menu-card-head{position:sticky;top:-22px;z-index:4;padding:8px 0 12px;background:#192a35}
html .menu-card-head h2{font-size:23px;letter-spacing:-.02em;text-transform:none}
html .menu-close{min-width:44px;height:44px;border-radius:50%;background:#263e4b}
html .menu-lead{font-size:16px;line-height:1.55}
html .menu-info{padding:15px;background:#09151e88;border-color:#52788e44;border-radius:10px}
html .menu-info b{font-size:16px}
html .menu-info span{font-size:14px;line-height:1.5;color:#b2c3cf}
html .menu-info em{font-size:12px;line-height:1.4}
html .menu-action{font-size:14px;letter-spacing:.02em;text-transform:none;min-height:48px;height:auto;padding:12px;background:#213c4e;border-color:#608aa344;line-height:1.3}
html .menu-action.primary{background:var(--gold);border-color:#ffdb92;color:#16202a;box-shadow:0 3px 0 #896437}
html .menu-action.on{border-color:var(--gold);color:var(--gold)}
html .fx-debug-note{font-size:13px;line-height:1.5;color:#9ab0bf}
html .map-choice{min-height:195px;padding:18px;overflow:hidden;background:#172a36}
.map-choice .map-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.23;mask-image:linear-gradient(90deg,transparent,#000);pointer-events:none}
.map-choice>*:not(.map-preview){position:relative;z-index:1}
html .map-choice>b{font-size:23px;letter-spacing:-.02em}
html .map-choice>span:not(.map-num),html .map-choice>em{font-size:14px;line-height:1.5;max-width:85%}
html .map-choice .mc-kicker,html .map-choice .mc-title,html .map-choice .mc-desc,html .map-choice .mc-save{position:relative;z-index:1}
html .map-choice .mc-title{font-size:23px;letter-spacing:-.02em}
html .map-choice .mc-desc,html .map-choice .mc-save{font-size:14px;line-height:1.5;max-width:80%}
html .map-choice .mc-kicker,html .map-select-note{font-size:12px;line-height:1.5}
html .leaderboard-map-tab{font-size:14px;text-transform:none}
/* Live HUD. Big, stable numeric readouts; every frequent action is thumb-sized. */
html #topbar{display:flex;gap:12px;padding:max(10px,env(safe-area-inset-top)) 14px 10px;min-height:74px;background:linear-gradient(#0a111bf5,#0a111beb);border-bottom:1px solid #7fa5bc33;z-index:12}
html .brand{border-left:3px solid var(--red);padding:3px 0 3px 10px;flex:0 1 230px}
html .brand b{font-size:12px;letter-spacing:.08em;line-height:1.2}
html .brand span{display:block;font-size:12px;letter-spacing:.03em;line-height:1.3;color:#98aebd;margin-top:5px}
html #homeBtn{position:static;min-width:52px;height:48px;margin:0;border:1px solid #385061;background:#162631;color:#c0d2de;border-radius:8px;font-size:13px;letter-spacing:0}
html .stats{display:grid;grid-template-columns:repeat(3,minmax(66px,1fr));gap:6px;flex:1;margin-left:auto;max-width:395px}
html .chip{padding:5px 8px 6px;border:1px solid #66869b33;border-top:2px solid #8199a8;background:#15232c;border-radius:8px;min-width:0}
html .chip.hp{border-top-color:#ff6f86}html .chip.cash{border-top-color:#7fdcb2}html .chip.wave{border-top-color:var(--gold)}
html .chip .k{font-size:12px;letter-spacing:.01em;text-transform:none;color:#96adbc}
html .chip .v{font-size:22px;line-height:1.15;letter-spacing:0}
html .chip.cash .v{color:var(--green)}
html #waveActions{display:flex;flex:0 0 auto;gap:7px;margin:0;align-items:center}
html #waveBtn{font-size:14px;letter-spacing:.01em;text-transform:none;min-width:164px;height:52px;padding:0 14px;border-radius:8px;background:var(--gold);color:#17212a;box-shadow:0 3px 0 #7f5d2c;border:0;line-height:1.2}
html #waveBtn.running{background:#182a37;color:#b8d0de;box-shadow:none;border:1px solid #3b586b}
html #repairBtn{font-size:12px;letter-spacing:0;min-width:108px;height:46px;border-radius:8px}
html #controls{z-index:15;right:14px;bottom:max(12px,env(safe-area-inset-bottom));left:auto;gap:8px;display:flex;width:auto}
html .grp{background:#0c1721f2;border:1px solid #45617677;border-radius:11px;padding:5px;gap:3px;box-shadow:0 5px 20px #0005}
html .grp .cap{display:none}
html .sp{min-width:44px;width:44px;height:44px;font-size:14px;border-radius:6px;background:#1a2c39;color:#a8c2d3}
html .sp.on{background:var(--gold);color:#17222d;border-color:var(--gold)}
html .sp.pause.on{background:#d3e9f3;color:#17222d;border-color:#e2f7ff}
html .zb{width:44px;height:44px;font-size:22px;background:#1a2c39;border-radius:6px}
html .zb.fit{font-size:13px;width:48px}
html #zoomPct{font-size:13px;min-width:46px}
html #tacticalToggle{position:absolute;right:14px;bottom:80px;height:44px;min-width:72px;padding:0 14px;border:1px solid #6a9eaf77;border-radius:9px;background:#142a36ec;color:#c2e8f4;z-index:14;font-size:14px;box-shadow:0 4px 14px #0004}
html #tacticalToggle[aria-pressed=true]{background:#b8e8ee;color:#142b36;border-color:#d1faff}
/* The roster is one consistent card layout, rather than a stack of size patches. */
html #dock{left:14px;top:94px;width:292px;max-height:calc(100dvh - 175px);gap:8px;z-index:14}
html #dock.shut{width:auto;max-width:292px}
html #hireToggle{min-height:48px;border-radius:9px;background:#dc2845;box-shadow:0 3px 0 #812436;padding:0 15px}
html #hireToggle .lbl{font-size:14px;letter-spacing:.07em}
html #hireToggle .who{font-size:12px;letter-spacing:0;text-transform:none}
html #dock.shut #hireToggle{min-width:152px;width:100%}
html #hireTools{gap:8px;padding:9px;background:#0c1722ed;border-radius:9px;border:1px solid #39556966}
html #dock.shut #hireTools{display:none}
html #hireFilters{gap:5px;touch-action:pan-x}
html .hire-filter{height:40px;min-height:40px;font-size:12px;padding:0 11px;letter-spacing:0;text-transform:none}
html .hire-filter.on{background:#284a60;border-color:#79b1d0;color:#f1fcff}
html #hireSort{font-size:13px;height:42px;letter-spacing:0;text-transform:none}
html #hireBar{max-height:none!important;gap:8px;padding:0 3px 8px 0}
html .staff{min-height:128px!important;padding:12px 46px 12px 80px!important;border:1px solid #48718a66;border-left:3px solid #4c758c;border-radius:9px;background:linear-gradient(125deg,#1d303e,#0e1d28)!important}
html .staff canvas{width:60px!important;height:80px!important;left:9px!important;top:56px!important;border:0!important;box-shadow:none!important;background:transparent!important}
html .staff .txt{position:static;min-height:100px;gap:4px}
html .staff .nm{font-size:17px!important;line-height:1.15;letter-spacing:0}
html .staff .ability-name{font-size:12px!important;color:#92d6e9;letter-spacing:0;line-height:1.3;margin:0}
html .staff .bl{font-size:12px!important;line-height:1.4!important;letter-spacing:0;text-transform:none;color:#a0b7c7;margin:0}
html .staff .pr{position:static!important;font-size:16px!important;line-height:1.3;letter-spacing:0;display:block;margin:3px 0 0!important;color:var(--green)}
html .staff-meta{display:flex!important;gap:4px;flex-wrap:wrap;margin:2px 0}
html .staff-meta i{font-size:10px!important;line-height:1.3;padding:2px 5px;font-style:normal}
html .staff-counters{display:none}
html .staff-rec{display:none}
html .staff-info{right:4px;top:4px;min-width:38px;width:38px;height:38px;font-size:16px;z-index:3}
html .staff.on{border-color:var(--gold)!important;background:linear-gradient(120deg,#3b3524,#22291f)!important}
html .staff.broke{opacity:.73}
html .staff-wrap{margin:0}
html .staff-skin-row{padding:4px 3px 1px;gap:4px}
html .staff-skin-chip{font-size:12px;min-height:40px}
html #placementStrip{padding:9px;max-width:292px}
html .placement-strip-line{white-space:normal;flex-wrap:wrap}
html .placement-strip-line b{font-size:14px}
html .placement-strip-line span{font-size:12px}
html .placement-strip-summary{display:none}
html .placement-strip-meta{font-size:12px;line-height:1.35}
html #placementHint{top:90px;max-width:min(500px,55vw);z-index:16;padding:8px 8px 8px 12px}
html #placementHint b{font-size:14px;letter-spacing:0}
html #placementHint span{font-size:12px;letter-spacing:0;margin-top:4px}
html #placementCancel{height:40px;font-size:12px;min-width:64px;letter-spacing:0}
html #panel{background:#101f2bee;border-color:#496b8266;z-index:40}
html .p-id h2{font-size:26px;letter-spacing:-.02em}
html .p-role,html .p-sub,html .p-zone{font-size:12px;line-height:1.4;letter-spacing:.02em}
html .p-line{font-size:14px;line-height:1.5}
html .p-info-card h3,html .p-col h3{font-size:12px;line-height:1.4;letter-spacing:.04em}
html .p-info-card p,html .p-info-card b,html .p-note{font-size:14px;line-height:1.5}
html .p-close{min-width:44px;height:44px}
html .p-actions button{font-size:13px;line-height:1.3;letter-spacing:.01em}
html #zoneMenu{background:linear-gradient(150deg,#1b3140,#0d1b27);border-color:#668ea755;z-index:36}
html .zone-menu-title b{font-size:18px}
html .zone-menu-title span{font-size:13px;line-height:1.45}
html .zone-menu-head button{width:44px;height:44px;min-width:44px}
html #inspectClose{width:44px;height:44px;font-size:24px}
html .inspect-id h2{font-size:26px}
html .inspect-id>span{font-size:12px}
html .inspect-id p,html #inspectCost{font-size:14px;line-height:1.4}
html .inspect-card h3,html .inspect-tier h4{font-size:14px;line-height:1.4}
html .inspect-card p,html .inspect-tier,html .inspect-tier div,html .inspect-combo b{font-size:14px;line-height:1.5}
html .inspect-counter-row{font-size:12px}
html .inspect-combo span{font-size:12px}
/* Wave information expands in place; never steals a battlefield tap. */
#shiftIntel{position:absolute;top:92px;right:14px;width:280px;max-width:calc(100vw - 28px);z-index:13;background:#0b1923ef;border:1px solid #526f8655;border-radius:10px;overflow:hidden;box-shadow:0 8px 24px #0003}
html.placing #shiftIntel{display:none}
#intelToggle{width:100%;min-height:62px;padding:10px 13px;border:0;background:none;color:#e7f3f8;display:grid;grid-template-columns:1fr auto;gap:4px;text-align:left;position:relative}
#intelKicker{font-size:10px;color:#8ab2c6;letter-spacing:.12em;grid-column:1}
#intelTitle{font-size:15px;grid-column:1;font-variant-numeric:tabular-nums}
#intelCount{font-size:12px;color:#aac3d1;grid-column:2;grid-row:2;margin-right:17px}
#intelToggle>b{position:absolute;right:12px;top:10px;color:var(--gold);font-size:20px}
#intelBody{padding:0 12px 12px;max-height:50dvh;overflow:auto;touch-action:pan-y;overscroll-behavior:contain}
.intel-row{display:flex;align-items:center;gap:9px;padding:8px 0;border-top:1px solid #7795a622;font-size:13px;line-height:1.4;color:#b5cbd9}
.intel-row img{width:34px;height:42px;object-fit:cover;object-position:50% 15%;border-radius:5px;background:#192b37}
.intel-row b{color:#eef5f8;display:block;font-size:14px}
.intel-note{font-size:12px;line-height:1.5;color:#8eadbd;margin:9px 0 0}
.shift-progress{height:3px;background:#213544}
.shift-progress i{display:block;background:var(--gold);width:0;height:100%;transition:width .2s linear}
#waveRecap{position:absolute;left:50%;bottom:88px;transform:translate(-50%,18px);opacity:0;pointer-events:none;z-index:32;width:max-content;max-width:calc(100vw - 24px);padding:15px 24px;border-radius:12px;border:1px solid #eac67866;background:linear-gradient(120deg,#192c34f5,#10232df5);box-shadow:0 14px 50px #0007;transition:opacity .2s,transform .2s;text-align:center}
#waveRecap.show{opacity:1;transform:translate(-50%,0)}
#waveRecap .recap-label{font-size:12px;letter-spacing:.16em;color:#89b4bf}
#waveRecap strong{display:block;font-size:24px;letter-spacing:-.025em;color:var(--gold);margin:5px 0 9px}
.recap-stats{display:flex;justify-content:center;gap:21px;font-size:12px;color:#93b0be}
.recap-stats b{display:block;color:#e4f3f7;font-size:17px;margin-bottom:3px}
#pauseNotice{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:39;padding:14px 18px;display:flex;align-items:center;gap:20px;background:#0d1c28ed;border:1px solid #678ca8;border-radius:12px;box-shadow:0 12px 48px #0007;white-space:nowrap}
#pauseNotice>span{font-size:14px;letter-spacing:.08em;color:#d7eaf6;font-weight:800}
#quickResume{height:44px;padding:0 18px;border:0;border-radius:7px;background:var(--gold);color:#162432;font-size:14px;font-weight:800}
html #toast{z-index:1700;top:90px;font-size:14px;line-height:1.5;letter-spacing:0;max-width:90vw;padding:11px 17px;background:#152d3bec;border:1px solid #7ca4bd77}
html #brianCoach{z-index:34}
html #cloudCareerStatus{font-size:11px!important;letter-spacing:0!important;text-transform:none!important;bottom:4px!important;padding:3px 8px!important;z-index:2001!important;opacity:.84!important}
html .achievement-copy b{font-size:15px;line-height:1.3}
html .achievement-copy p{font-size:13px;line-height:1.5}
html .achievement-copy em{font-size:12px;line-height:1.4;letter-spacing:.03em}
html .leaderboard-note,html .leaderboard-empty{font-size:14px;line-height:1.5}
html .tutorial-version-stamp{display:none}
.showroom-setting{grid-column:1/-1}
.showroom-setting .menu-actions{margin-top:10px}
.showroom-setting .menu-action{flex-basis:120px}
@media(max-width:980px){
  html .brand{flex-basis:165px}
  html .brand b{font-size:11px}
  html #topbar{gap:8px;padding-left:10px;padding-right:10px}
  html #dock{left:10px;top:90px;width:275px}
  html #waveBtn{min-width:145px;font-size:13px}
  html #repairBtn{min-width:96px}
  #shiftIntel{right:10px;top:88px;width:245px}
  .lobby{padding:22px 4%}
}
@media(max-width:760px) and (orientation:portrait){
  .lobby{padding:18px 22px 12px;min-height:100dvh}
  .lobby-top{padding-bottom:15px}
  .lobby-brand{font-size:10px;letter-spacing:.08em;gap:7px}
  .edition{font-size:10px;max-width:93px;line-height:1.5}
  .lobby-main{min-height:0;display:flex;flex-direction:column-reverse;align-items:stretch;justify-content:flex-end}
  .lobby-cast{height:clamp(160px,27dvh,260px);width:100%;margin:6px 0 -30px;align-self:stretch;opacity:.97;z-index:0}
  .cast-person{height:106%;bottom:0;width:62%}
  .cast-left{left:-2%;height:96%;bottom:5px}
  .cast-right{right:-2%;height:96%;bottom:5px}
  .cast-center{height:115%;left:20%;width:62%;bottom:-9px}
  .cast-orbit{width:70%;height:95%;left:15%;top:0}
  .cast-caption{display:none}
  .lobby-copy{padding:20px 0 15px;background:linear-gradient(transparent,#09121be0 25%);text-align:center}
  .lobby-eyebrow{font-size:11px;letter-spacing:.20em;margin-bottom:10px}
  .lobby h1{font-size:clamp(39px,10vw,62px);line-height:.98}
  .lobby-line{display:none}
  .lobby-career{margin:14px 0 16px;gap:0}
  .lobby-career>span{display:none}
  .lobby-career strong{font-size:12px}
  .lobby #menuPlay{width:100%;height:54px;font-size:15px}
  .lobby-secondary{justify-content:center;margin-top:10px;gap:30px}
  .lobby-secondary button{font-size:13px;height:40px}
  .lobby-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .lobby-nav button{min-height:72px;padding:11px 12px;gap:5px;position:relative}
  .lobby-nav .nav-num{position:absolute;right:10px;top:10px;font-size:10px}
  .lobby-nav strong{font-size:14px}
  .lobby-nav button>span:last-child{font-size:11px}
  .lobby-foot{margin-top:8px;gap:10px;font-size:9px}
  .lobby-foot button{font-size:11px}
  html #topbar{display:flex!important;min-height:66px;padding:max(8px,env(safe-area-inset-top)) 8px 8px;gap:7px;align-items:center}
  html #topbar .brand{display:none}
  html #homeBtn{width:44px;min-width:44px;height:44px;font-size:12px;padding:0}
  html .stats{flex:1;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));width:auto;max-width:none;gap:4px;margin:0}
  html .chip{padding:4px 3px 5px;border-radius:6px}
  html .chip .k{font-size:10px}
  html .chip .v{font-size:18px;margin-top:3px}
  html #waveActions{display:flex;flex-direction:column;width:116px;gap:4px}
  html #waveBtn{min-width:0;width:100%;height:44px;min-height:44px;font-size:12px;padding:0 8px;letter-spacing:0}
  html #repairBtn{height:32px;min-height:32px;width:100%;min-width:0;font-size:11px;padding:0 4px}
  html #dock,html #dock.shut{top:auto!important;bottom:78px!important;left:8px!important;right:8px!important;width:auto!important;max-height:min(56dvh,480px)!important;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
  html #dock:not(.shut){padding:10px;background:#0b1721f5;border:1px solid #6a8aa055;border-radius:15px;box-shadow:0 15px 60px #0009}
  html #dock.shut{right:auto!important;max-width:calc(100vw - 96px)!important;bottom:78px!important}
  html #dock.shut #hireToggle{width:auto;min-width:140px}
  html #dock #hireToggle{width:100%;min-height:46px}
  html #hireToggle .who{max-width:120px}
  html #hireTools{padding:0;background:none;border:0}
  html #hireFilters{min-height:40px}
  html #hireSort{height:40px;flex-shrink:0}
  html #hireBar{display:flex!important;flex-direction:column;max-height:none!important;min-height:0;overflow-y:auto;gap:7px}
  html #dock.shut #hireBar{display:none!important}
  html .staff{min-height:115px!important;padding:10px 46px 10px 82px!important}
  html .staff .txt{min-height:92px}
  html .staff .bl{font-size:12px!important}
  html #placementStrip{max-width:calc(100vw - 96px);padding:8px;margin:0}
  html .placement-strip-meta{display:none}
  html #placementHint{top:76px;left:8px;right:8px;transform:none;max-width:none;min-height:48px;padding:6px 7px 6px 10px}
  html #placementHint .ph-copy{flex:1}
  html #placementHint b{font-size:13px}
  html #placementHint span{font-size:11px}
  html #controls{left:8px;right:8px;bottom:max(10px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;gap:6px;align-items:center}
  html .grp{padding:4px;gap:3px;border-radius:10px}
  html .sp{min-width:40px;width:40px;height:44px;font-size:13px}
  html .zb{width:40px;height:44px}
  html .zb.fit{width:44px;font-size:13px}
  html #zoomPct{display:none}
  html #tacticalToggle{bottom:78px;right:8px;min-width:70px;height:46px;padding:0 12px}
  #shiftIntel{top:78px;right:8px;width:205px;max-width:56vw}
  #intelToggle{min-height:53px;padding:8px 10px;gap:3px}
  #intelKicker{font-size:9px}
  #intelTitle{font-size:13px}
  #intelCount{font-size:11px}
  #shiftIntel.expanded{max-width:calc(100vw - 16px);width:290px}
  html.placing #shiftIntel{display:none}
  html #panel{left:8px;right:8px;bottom:0;top:auto;width:auto;max-height:80dvh;border-radius:17px 17px 0 0}
  html .p-body{padding:10px}
  html .p-actions{margin:8px 10px max(12px,env(safe-area-inset-bottom));gap:6px}
  html .p-actions button{height:52px;font-size:12px}
  html #zoneMenu{left:8px;right:8px;width:auto;bottom:0;max-height:76dvh;border-radius:17px 17px 0 0}
  html .inspect-tiers{grid-template-columns:1fr}
  html .inspect-combos{grid-template-columns:1fr}
  html .menu-card{padding:16px}
  html .menu-card-head{top:-16px}
  html .menu-card-head h2{font-size:21px}
  html .menu-grid{grid-template-columns:1fr}
  #waveRecap{bottom:144px;padding:13px 18px}
  #waveRecap strong{font-size:22px}
  html #toast{top:76px;font-size:13px}
}
@media(max-width:420px) and (orientation:portrait){
  html #zOut,html #zIn{display:none}
  html .zb.fit{width:64px}
  html .sp{width:44px;min-width:44px}
  html #waveActions{width:104px}
  html .chip .v{font-size:16px}
  html .chip .k{font-size:9px}
  .lobby{padding:13px 18px 8px}
  .lobby-top{padding-bottom:11px}
  .lobby-cast{height:24dvh}
}
@media(orientation:landscape) and (max-height:580px){
  .lobby{padding:12px 4%;min-height:100dvh}
  .lobby-top{padding-bottom:10px}
  .lobby-main{min-height:220px}
  .lobby-copy{padding:14px 0}
  .lobby h1{font-size:40px}
  .lobby-eyebrow{margin-bottom:10px;font-size:10px}
  .lobby-line{display:none}
  .lobby-career{margin:12px 0}
  .lobby-career>span{display:none}
  .lobby-career strong{font-size:12px}
  .lobby #menuPlay{height:46px;font-size:14px;width:300px}
  .lobby-secondary{margin-top:5px}
  .lobby-secondary button{height:34px;font-size:12px}
  .lobby-cast{height:265px}
  .cast-caption{display:none}
  .lobby-nav button{min-height:70px;padding:9px 12px;gap:5px}
  .lobby-nav .nav-num{display:none}
  .lobby-foot{margin-top:4px;font-size:10px}
  .lobby-foot button{min-height:34px}
  html #topbar{min-height:59px;padding:6px 8px;gap:8px}
  html .brand{display:none}
  html #homeBtn{height:44px;min-width:48px}
  html .stats{max-width:340px;margin:0 auto;grid-template-columns:repeat(3,minmax(65px,1fr))}
  html .chip .k{font-size:10px}
  html .chip .v{font-size:17px}
  html #waveBtn{height:44px;min-width:151px;font-size:12px}
  html #repairBtn{height:42px;font-size:11px}
  html #dock{top:69px;left:8px;width:270px;max-height:calc(100dvh - 135px)}
  html #hireToggle{min-height:44px}
  html #hireTools{padding:6px;gap:5px}
  html #hireSort{height:36px}
  html #controls{bottom:8px;right:8px}
  html .sp,html .zb{height:40px;width:40px;min-width:40px}
  html #tacticalToggle{bottom:66px;right:8px;height:40px}
  #shiftIntel{top:69px;right:8px;width:224px}
  #intelToggle{min-height:50px}
  html #placementHint{top:69px;left:50%;max-width:45vw}
  #waveRecap{bottom:70px;padding:10px 18px}
  #waveRecap strong{font-size:20px}
  html #panel{max-height:96dvh;width:min(440px,53vw)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
html.reduced-motion *,html.reduced-motion *::before,html.reduced-motion *::after{animation:none!important;transition:none!important}

/* ========================================================================
   V9.0.1 — targeted mobile layout corrections
   Presentation only. No gameplay, map, balance, save, or leaderboard logic.
   ======================================================================== */

/* The Showroom lobby reuses IDs from the legacy art-driven menu. Reset the
   legacy absolute hit-target geometry so the new cards participate in normal
   grid/flex flow on every viewport. */
html #mainMenu .lobby-nav #menuTeam,
html #mainMenu .lobby-nav #menuCustomers,
html #mainMenu .lobby-nav #menuAchievements,
html #mainMenu .lobby-nav #menuLeaderboard{
  position:relative!important;
  inset:auto!important;
  left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  width:auto!important;height:auto!important;
  min-width:0!important;max-width:none!important;
  min-height:104px;
  margin:0!important;
  padding:16px!important;
  border:1px solid #aecede29!important;
  border-radius:6px!important;
  background:#12212bcc!important;
  box-shadow:none!important;
  color:#eef4f6!important;
  overflow:hidden!important;
  opacity:1!important;
}
html #mainMenu .lobby-nav #menuLeaderboard::before,
html #mainMenu .lobby-nav #menuLeaderboard::after{display:none!important;content:none!important}
html #mainMenu .lobby-nav #menuLeaderboard span,
html #mainMenu .lobby-nav #menuLeaderboard strong{display:block!important;color:inherit}
html #mainMenu .lobby-nav #menuLeaderboard .nav-num{color:var(--gold)!important}
html #mainMenu .lobby-nav #menuLeaderboard>span:last-child{color:#90a8b7!important}

/* The legacy Wardrobe control used to live as an absolute header hotspot.
   In Showroom it belongs in the footer; keep it there instead of letting it
   float over the edition label. */
html #mainMenu .lobby-foot #menuVisualPacks{
  position:relative!important;
  inset:auto!important;
  left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  width:auto!important;height:auto!important;
  min-width:0!important;max-width:none!important;min-height:44px!important;
  margin:0!important;padding:0!important;
  border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;
  color:#9aafbd!important;overflow:visible!important;opacity:1!important;
}
html #mainMenu .lobby-foot #menuVisualPacks::before,
html #mainMenu .lobby-foot #menuVisualPacks::after{display:none!important;content:none!important}
html #mainMenu .lobby-foot #menuVisualPacks strong{display:inline!important;margin-left:8px!important;color:#d4e2e8!important}

/* Secondary lobby controls also carry old absolute IDs. Keep them in the
   Showroom flex row instead of depending on legacy percentages. */
html #mainMenu .lobby-secondary #menuHow,
html #mainMenu .lobby-secondary #menuSettings{
  position:relative!important;inset:auto!important;
  left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  width:auto!important;height:44px!important;margin:0!important;
}

@media(max-width:760px) and (orientation:portrait){
  /* Give the four lobby cards a deterministic two-column flow. */
  html #mainMenu .lobby-nav{
    width:100%;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:minmax(76px,auto);
    gap:8px;
    align-items:stretch;
  }
  html #mainMenu .lobby-nav #menuTeam,
  html #mainMenu .lobby-nav #menuCustomers,
  html #mainMenu .lobby-nav #menuAchievements,
  html #mainMenu .lobby-nav #menuLeaderboard{
    width:100%!important;
    min-height:76px!important;
    padding:11px 12px!important;
  }
  html #mainMenu .lobby-foot{position:relative;z-index:4;clear:both}

  /* The legacy <=620px rules leave the stat strip/chips only ~31px tall.
     Showroom uses larger readable type, so explicitly restore enough height
     for both label and numeric value instead of clipping the value. */
  html #topbar .stats{
    height:52px!important;
    min-height:52px!important;
    align-self:center;
    overflow:visible;
  }
  html #topbar .chip{
    height:48px!important;
    min-height:48px!important;
    padding:5px 5px 6px!important;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  html #topbar .chip .k{
    display:block;
    font-size:10px;
    line-height:1.05;
    margin:0;
    white-space:nowrap;
  }
  html #topbar .chip .v{
    display:block;
    font-size:18px;
    line-height:1.05;
    margin:4px 0 0;
    white-space:nowrap;
  }
  html #topbar{min-height:68px!important;overflow:visible}
}

@media(max-width:420px) and (orientation:portrait){
  html #topbar{gap:6px!important;padding-left:7px!important;padding-right:7px!important}
  html #topbar .stats{height:50px!important;min-height:50px!important;gap:3px!important}
  html #topbar .chip{height:46px!important;min-height:46px!important;padding:4px 4px 5px!important}
  html #topbar .chip .k{font-size:9px!important;letter-spacing:0!important}
  html #topbar .chip .v{font-size:17px!important;margin-top:3px!important}
  html #waveActions{width:104px!important;flex:0 0 104px!important}
  html #waveBtn{font-size:11px!important;padding:0 6px!important}
  html #mainMenu .lobby-nav{gap:7px}
}

@media(max-width:350px) and (orientation:portrait){
  /* Extremely narrow phones: keep stats readable by moving the wave action
     below the first row rather than shrinking the values into illegibility. */
  html #topbar{
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr)!important;
    grid-template-rows:50px auto!important;
    min-height:106px!important;
    align-items:center!important;
  }
  html #homeBtn{grid-column:1;grid-row:1;width:44px!important;min-width:44px!important}
  html #topbar .stats{grid-column:2;grid-row:1;width:100%!important;min-width:0!important}
  html #waveActions{grid-column:1/-1;grid-row:2;width:100%!important;flex-direction:row!important}
  html #waveBtn{height:42px!important;flex:1 1 auto!important}
  html #repairBtn{height:42px!important;flex:0 0 102px!important}
  html #placementHint{top:114px!important}
  #shiftIntel{top:116px!important}
}

/* ============================================================
   V9.0.2 — HUD VALUE CLIPPING FIX
   Applied at ALL gameplay viewport widths. The previous correction lived
   only in narrow portrait media queries, so foldable/tablet-width layouts
   could still inherit the compact legacy 40px chip height and clip 20/$650/1.
   ============================================================ */
html #topbar{
  min-height:72px!important;
  overflow:visible!important;
}
html #topbar .stats{
  height:54px!important;
  min-height:54px!important;
  align-self:center!important;
  overflow:visible!important;
}
html #topbar .chip{
  height:50px!important;
  min-height:50px!important;
  padding:4px 7px 5px!important;
  overflow:visible!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}
html #topbar .chip .k{
  display:block!important;
  font-size:10px!important;
  line-height:1.05!important;
  margin:0!important;
  white-space:nowrap!important;
}
html #topbar .chip .v{
  display:block!important;
  font-size:20px!important;
  line-height:1.05!important;
  margin:3px 0 0!important;
  white-space:nowrap!important;
}

/* Preserve the deliberately tighter phone layout while still giving both
   lines enough real height. */
@media(max-width:420px) and (orientation:portrait){
  html #topbar{min-height:68px!important}
  html #topbar .stats{height:50px!important;min-height:50px!important}
  html #topbar .chip{height:46px!important;min-height:46px!important;padding:4px!important}
  html #topbar .chip .k{font-size:9px!important}
  html #topbar .chip .v{font-size:17px!important;line-height:1!important;margin-top:2px!important}
}
@media(max-width:350px) and (orientation:portrait){
  html #topbar{min-height:106px!important}
}