/* Compatibility styles for the original art, cards and tutorial.
   The unlayered Showroom stylesheet owns current layout and component sizing. */
@layer legacy {

/* ============================================================
   UI SHELL  (all gameplay drawing happens on the canvas)
   ============================================================ */
:root{
  --ink:#12151a;
  --ink-2:#1b2027;
  --line:#2c333d;
  --paper:#f4f1e7;
  --red:#e4002b;
  --gold:#f2b441;
  --green:#4ea25f;
  --muted:#9aa4b2;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{
  margin:0;padding:0;height:100%;width:100%;
  overflow:hidden;background:var(--ink);
  font-family:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  color:var(--paper);
  user-select:none;-webkit-user-select:none;
  overscroll-behavior:none;
}
#wrap{position:fixed;inset:0;touch-action:none}
#cv{display:block;position:absolute;inset:0;touch-action:none}   /* the game surface only — never all canvases */

/* ---------- top bar : styled like a window sticker ---------- */
#topbar{
  position:absolute;top:0;left:0;right:0;
  padding:max(6px,env(safe-area-inset-top)) 10px 6px 10px;
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,rgba(9,11,14,.92) 0%,rgba(9,11,14,.72) 70%,rgba(9,11,14,0) 100%);
  pointer-events:none;
}
#topbar > *{pointer-events:auto}
.brand{
  display:flex;flex-direction:column;line-height:1;flex:0 0 auto;
  padding-left:2px;border-left:4px solid var(--red);padding:2px 0 2px 8px;
}
.brand b{font-size:14px;letter-spacing:.14em;font-weight:800;text-transform:uppercase}
.brand span{font-size:9.5px;letter-spacing:.22em;color:var(--muted);text-transform:uppercase;margin-top:3px}
.stats{display:flex;gap:8px;margin-left:auto}
.chip{
  min-width:78px;background:var(--ink-2);border:1px solid var(--line);
  border-top:3px solid var(--line);border-radius:8px;padding:5px 10px 6px;text-align:center;
  transition:transform .12s ease;
}
.chip .k{display:block;font-size:8.5px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase}
.chip .v{display:block;font-size:19px;font-weight:800;letter-spacing:.02em;margin-top:1px;font-variant-numeric:tabular-nums}
.chip.hp{border-top-color:var(--red)}
.chip.cash{border-top-color:var(--green)}
.chip.wave{border-top-color:var(--gold)}
.chip.bump{transform:scale(1.12)}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.chip.deny{animation:shake .3s}

#waveBtn{
  font:800 14px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--red);border:0;border-radius:10px;
  padding:0 16px;height:52px;min-width:150px;
  box-shadow:0 3px 0 #9c001e, 0 6px 16px rgba(0,0,0,.4);
  transition:transform .08s ease, box-shadow .08s ease, background .2s;
}
#waveBtn:active{transform:translateY(3px);box-shadow:0 0 0 #9c001e,0 3px 10px rgba(0,0,0,.4)}
#waveBtn.running{background:var(--ink-2);border:1px solid var(--line);box-shadow:none;color:var(--muted)}

/* ---------- hire rail : collapses to a single button so the lot is reachable -- */
#dock{
  position:absolute;left:10px;top:82px;
  width:236px;display:flex;flex-direction:column;gap:8px;
  max-height:calc(100% - 100px);
}
#dock.shut{width:auto}
#dock.shut #hireBar{display:none}

#hireToggle{
  display:flex;align-items:center;gap:10px;width:100%;
  min-height:56px;padding:0 14px;border-radius:12px;
  background:var(--red);border:0;color:#fff;text-align:left;
  box-shadow:0 3px 0 #9c001e, 0 6px 16px rgba(0,0,0,.4);
}
#hireToggle:active{transform:translateY(3px);box-shadow:0 0 0 #9c001e}
#hireToggle .lbl{font:800 14px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase}
#hireToggle .who{
  flex:1;font-size:10px;letter-spacing:.1em;color:rgba(255,255,255,.75);
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#hireToggle .chev{font-size:13px;font-weight:800;opacity:.9;transition:transform .2s}
#dock.shut #hireToggle{width:auto;min-width:150px}
#dock.shut #hireToggle .chev{transform:rotate(180deg)}

#hireBar{
  display:flex;flex-direction:column;gap:8px;
  flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;
  padding-right:4px;padding-bottom:8px;scrollbar-width:thin;
  max-height:calc(100vh - 190px);max-height:calc(100dvh - 190px);
}
#hireBar::-webkit-scrollbar{width:6px}
#hireBar::-webkit-scrollbar-thumb{background:#46515f;border-radius:8px}
#hireBar::-webkit-scrollbar-track{background:rgba(0,0,0,.12)}

/* Hire UX: compact filtering/sorting keeps the 17-person roster usable on phones. */
#hireTools{display:flex;flex-direction:column;gap:5px;padding:1px 1px 0}
#hireFilters{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
#hireFilters::-webkit-scrollbar{display:none}
.hire-filter{flex:0 0 auto;height:27px;padding:0 8px;border-radius:7px;border:1px solid rgba(95,136,166,.25);background:rgba(13,20,27,.92);color:#9eb0bf;font:800 7px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.hire-filter.on{background:rgba(63,122,158,.28);border-color:rgba(111,191,235,.60);color:#e7f6ff}
.hire-filter.brian-advice{border-color:#f2b441;color:#fff0af;background:rgba(112,82,18,.42);box-shadow:0 0 0 1px rgba(242,180,65,.18),0 0 14px rgba(242,180,65,.42);animation:brianFilterPulse 1.45s ease-in-out infinite}
@keyframes brianFilterPulse{0%,100%{box-shadow:0 0 0 1px rgba(242,180,65,.15),0 0 10px rgba(242,180,65,.28)}50%{box-shadow:0 0 0 2px rgba(242,180,65,.28),0 0 19px rgba(242,180,65,.58)}}
#hireSort{width:100%;height:29px;padding:0 8px;border-radius:7px;border:1px solid rgba(95,136,166,.25);background:#111a23;color:#d9e4ec;font:800 8px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.05em;text-transform:uppercase;outline:none}
.hire-group{display:flex;align-items:center;gap:7px;padding:5px 5px 1px;color:#8096a8;font:900 7px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.hire-group::after{content:'';height:1px;flex:1;background:rgba(108,153,184,.20)}
.staff-rec{position:absolute;right:5px;top:5px;padding:3px 5px;border-radius:5px;background:rgba(126,208,140,.14);border:1px solid rgba(126,208,140,.32);color:#8fe2a1;font:900 5.8px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.07em;text-transform:uppercase;pointer-events:none}
.staff.on .staff-rec{right:27px}
.staff-range{color:#78bce4;border-color:rgba(85,157,202,.30);background:rgba(49,108,145,.14)}

/* Explicit placement/move mode banner. Tapping grass no longer silently cancels. */
#placementHint{position:absolute;left:50%;top:72px;transform:translateX(-50%);z-index:13;display:none;align-items:center;gap:8px;max-width:min(620px,72vw);min-height:38px;padding:5px 6px 5px 12px;border-radius:10px;background:rgba(7,12,18,.95);border:1px solid rgba(88,164,211,.46);box-shadow:0 8px 24px rgba(0,0,0,.38);color:#dce9f2;pointer-events:auto}
#placementHint.show{display:flex}
#placementHint .ph-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
#placementHint b{font:900 9px/1.05 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#placementHint span{font:700 7px/1.1 "Helvetica Neue",Helvetica,Arial,sans-serif;color:#90a9ba;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#placementCancel{height:28px;min-width:60px;padding:0 8px;border-radius:7px;border:1px solid rgba(214,87,105,.42);background:rgba(69,24,31,.72);color:#ffadb8;font:900 7px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}

/* Card layout: text down the left, character pinned to the right edge.
   The canvas is positioned absolutely rather than flexed — a <button> is a
   replaced-ish element and some mobile engines quietly ignore flex ordering
   inside one, which is what put the artwork back on the left. padding-right
   reserves the character's lane so text can never run underneath it. */
.staff{
  --art: 76px;                     /* character lane width */
  --gutter: 12px;                  /* gap between text and character */
  position:relative;display:block;width:100%;text-align:left;
  background:var(--ink-2);border:1.5px solid var(--line);border-left:4px solid #333c47;
  border-radius:12px;min-height:94px;color:var(--paper);
  padding:11px calc(var(--art) + var(--gutter)) 11px 12px;
  transition:border-color .15s, background .15s, transform .08s;
}
.staff .txt{display:block;min-width:0}
.staff canvas{
  position:absolute;left:auto;right:8px;top:50%;transform:translateY(-50%);
  width:var(--art);height:var(--art);display:block;pointer-events:none;
}
.staff .nm{display:block;font-size:14px;font-weight:800;letter-spacing:.02em;line-height:1.15}
.staff .bl{
  display:block;font-size:9px;letter-spacing:.11em;color:var(--muted);
  text-transform:uppercase;margin-top:5px;line-height:1.3;
}
.staff .pr{
  display:block;font-size:16px;font-weight:800;color:var(--green);
  font-variant-numeric:tabular-nums;margin-top:6px;
}
.staff.broke{opacity:.72}
.staff.broke .pr{color:#ff6a7d}
.staff.on{border-color:var(--gold);border-left-color:var(--gold);background:#292a21}
.staff.on::after{
  content:'\2713';position:absolute;top:-1px;left:-1px;
  width:24px;height:24px;display:grid;place-items:center;
  background:var(--gold);color:#12151a;font-size:13px;font-weight:800;
  border-radius:10px 0 10px 0;
}
.staff:active{transform:translateY(2px)}


/* ---------- panel action buttons ---------- */
.p-actions{
  flex:0 0 auto;display:flex;gap:9px;
  margin:12px 14px max(14px,env(safe-area-inset-bottom));
}
.p-actions button{
  height:60px;border:0;border-radius:12px;
  font:800 14px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;
}
#upBtn{flex:1.35;color:#12151a;background:var(--gold);box-shadow:0 4px 0 #b07f19}
#upBtn:active{transform:translateY(4px);box-shadow:none}
#upBtn.off{background:#2c333d;color:#6d7887;box-shadow:none}
#upBtn.max{background:#2c333d;color:var(--gold);box-shadow:none}
#recycleBtn{
  flex:1;background:#241a1d;color:#ff9aa8;border:1.5px solid #5d2b33;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
}
#recycleBtn small{font-size:11px;letter-spacing:.02em;color:#7ed08c;font-weight:800}
#recycleBtn:active{background:#312126}
#moveBtn{flex:.92;background:rgba(21,45,62,.82);color:#9fd9ff;border:1.5px solid rgba(77,154,203,.46);box-shadow:none}
#moveBtn:active{background:rgba(30,62,84,.92)}
#moveBtn.off{opacity:.42;color:#6b8799;border-color:rgba(77,116,139,.25)}

/* ---------- recycle confirmation ---------- */
.confirm-card{
  width:min(400px,86vw);background:#1b2027;border:1px solid var(--line);
  border-radius:16px;padding:22px;text-align:left;box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.confirm-card h1{
  margin:0 0 4px;font-size:20px;letter-spacing:.06em;text-transform:uppercase;color:var(--paper);
}
.confirm-card .rc-who{font-size:13px;color:var(--muted);margin-bottom:16px;letter-spacing:.04em}
.rc-rows{background:#11161c;border:1px solid #232a33;border-radius:11px;padding:11px 13px;margin-bottom:18px}
.rc-rows div{display:flex;justify-content:space-between;padding:4px 0;font-size:13.5px}
.rc-rows .k{color:#93a0b0}
.rc-rows .v{font-weight:800;font-variant-numeric:tabular-nums;color:#e9edf3}
.rc-rows .refund .v{color:#7ed08c}
.rc-btns{display:flex;gap:10px}
.rc-btns button{
  flex:1;height:58px;border-radius:12px;border:0;
  font:800 14px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;
}
#rcCancel{background:#2c333d;color:#dbe2ea}
#rcGo{background:var(--red);color:#fff;box-shadow:0 4px 0 #9c001e}
#rcGo:active{transform:translateY(4px);box-shadow:none}
#rcCancel:active{background:#38414c}

/* ---------- control strip : speed + zoom ---------- */
#controls{
  position:absolute;right:10px;bottom:max(10px,env(safe-area-inset-bottom));
  display:flex;gap:10px;align-items:flex-end;
}
.grp{
  display:flex;align-items:center;gap:4px;
  background:rgba(9,11,14,.86);border:1px solid var(--line);border-radius:12px;padding:5px;
}
.grp .cap{
  font-size:8.5px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase;
  padding:0 6px 0 4px;writing-mode:horizontal-tb;
}
.sp{
  min-width:50px;height:50px;border-radius:9px;border:1px solid transparent;background:#20252c;
  color:#c3ccd8;font:800 14px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.02em;
  transition:background .12s,color .12s,border-color .12s;
}
.sp.on{background:var(--gold);color:#12151a;border-color:#ffd67a}
.sp.pause{font-size:15px;padding:0 10px}
.sp.pause.on{background:linear-gradient(180deg,#e4002b,#b40022);border-color:#ff7c92;color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.sp:active{transform:translateY(2px)}
.zb{
  width:50px;height:50px;border-radius:9px;border:1px solid var(--line);background:#20252c;
  color:var(--paper);font:700 22px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;
}
.zb.fit{font-size:11px;font-weight:800;letter-spacing:.08em}
.zb:active{transform:translateY(2px);background:#2b323b}
.zb[disabled]{opacity:.35}
#zoomPct{
  min-width:44px;text-align:center;font-size:11px;font-weight:800;color:var(--muted);
  font-variant-numeric:tabular-nums;
}

/* ---------- character card ---------- */
#panel{
  position:absolute;right:0;top:50%;transform:translate(110%,-50%);
  width:min(400px,44vw);max-height:78vh;
  background:linear-gradient(180deg,#1b2027 0%,#141920 100%);
  border:1px solid var(--line);border-right:0;border-radius:16px 0 0 16px;
  box-shadow:calc(-9px - 9px) 0 50px rgba(0,0,0,.6);overflow:hidden;
  transition:transform .26s cubic-bezier(.2,.85,.3,1);
  display:flex;flex-direction:column;
}
#panel.open{transform:translate(0,-50%)}

.p-hero{
  position:relative;display:flex;align-items:flex-end;gap:14px;
  padding:14px 14px 0;background:radial-gradient(120% 90% at 30% 0%,#2c3540 0%,#191e25 70%);
  border-bottom:1px solid var(--line);
}
#pArt{display:block;position:static;width:150px;height:172px;flex:0 0 auto;filter:drop-shadow(0 8px 14px rgba(0,0,0,.5))}
.p-id{flex:1;min-width:0;padding-bottom:16px}
.p-role{
  display:inline-block;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  background:#2c3742;color:#9fd4e6;border-radius:4px;padding:4px 8px;margin-bottom:8px;
}
.p-id h2{
  margin:0;font-size:26px;line-height:1;font-weight:800;letter-spacing:.01em;
  text-transform:uppercase;word-break:break-word;
}
.p-sub{font-size:11px;color:var(--muted);margin-top:6px;letter-spacing:.04em}
.p-zone{
  display:inline-block;margin-top:8px;padding:4px 9px;border-radius:5px;
  background:#20303a;color:#9fd4e6;font-size:10px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;
}
.p-pips{display:flex;gap:5px;margin-top:10px}
.p-pips i{width:22px;height:5px;border-radius:3px;background:#333c47;display:block}
.p-pips i.lit{background:var(--gold)}
.p-close{
  position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:11px;
  border:1px solid var(--line);background:rgba(10,13,17,.75);color:#c7cedb;
  font-size:22px;line-height:1;
}
.p-close:active{background:#2b323b}

.p-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 14px 0}
.p-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.p-col{background:#11161c;border:1px solid #232a33;border-radius:11px;padding:9px 11px 11px}
.p-col.next{border-color:#3d3520;background:#161510}
.p-col h3{
  margin:0 0 8px;font-size:9px;letter-spacing:.19em;text-transform:uppercase;font-weight:800;color:var(--muted);
}
.p-col.next h3{color:var(--gold)}
.p-line{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:3.5px 0;font-size:12.5px}
.p-line .k{color:#93a0b0}
.p-line .v{font-weight:800;font-variant-numeric:tabular-nums;color:#e9edf3}
.p-col.next .p-line .v{color:var(--gold)}
.p-note{font-size:11px;color:#8d99a8;line-height:1.5;margin:11px 2px 0}
#upBtn{
  flex:0 0 auto;margin:12px 14px max(14px,env(safe-area-inset-bottom));height:60px;
  border:0;border-radius:12px;
  font:800 15px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;
  color:#12151a;background:var(--gold);box-shadow:0 4px 0 #b07f19;
}
#upBtn:active{transform:translateY(4px);box-shadow:none}
#upBtn.off{background:#2c333d;color:#6d7887;box-shadow:none}
#upBtn.max{background:#2c333d;color:var(--gold);box-shadow:none}

/* ---------- toast ---------- */
#toast{
  position:absolute;left:50%;top:76px;transform:translate(-50%,-14px);
  background:var(--red);color:#fff;font-size:13px;font-weight:700;letter-spacing:.06em;
  padding:10px 18px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;
  text-transform:uppercase;
}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- overlays ---------- */
.overlay{
  position:absolute;inset:0;display:none;place-items:center;text-align:center;
  background:rgba(6,8,11,.88);backdrop-filter:blur(3px);padding:24px;
}
.overlay.show{display:grid}
#recycleConfirm{position:fixed;z-index:6200;pointer-events:auto}
#recycleConfirm .confirm-card{position:relative;z-index:6201}
.over-card{max-width:420px}
.over-card h1{
  margin:0 0 6px;font-size:clamp(28px,6vw,46px);letter-spacing:.06em;text-transform:uppercase;
  font-weight:800;color:var(--red);
}
.over-card p{margin:0 0 20px;color:#c3ccd8;font-size:14px;letter-spacing:.04em;line-height:1.6}
.over-card .num{color:#fff;font-weight:800}
.big-btn{
  height:58px;padding:0 30px;border:0;border-radius:12px;background:var(--paper);color:#12151a;
  font:800 15px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 4px 0 #b3ada0;
}
.big-btn:active{transform:translateY(4px);box-shadow:none}
#rotate .over-card h1{color:var(--gold)}


/* ===== VISUAL FIDELITY PASS ===== */
#cv{filter:saturate(1.03) contrast(1.02)}
#topbar{backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.chip,.staff,#panel,.grp{box-shadow:0 10px 26px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.035)}
.staff{background:linear-gradient(145deg,#20262d 0%,#171c22 100%)}
.staff.on{background:linear-gradient(145deg,#33301f 0%,#232219 100%)}
#panel{background:linear-gradient(165deg,#222a33 0%,#11161c 72%)}
.p-hero{background:radial-gradient(130% 115% at 24% 4%,#3a4652 0%,#20262e 45%,#141920 100%)}
.p-col{box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}


/* ============================================================
   RESPONSIVE MOBILE / FOLDABLE PASS
   Keeps the same game but adapts the HUD for conventional phones,
   tall portrait screens, landscape phones and foldables.
   ============================================================ */
:root{
  --safe-top:max(6px,env(safe-area-inset-top));
  --safe-bottom:max(6px,env(safe-area-inset-bottom));
}

/* Medium / conventional landscape phones */
@media (max-width: 980px){
  #topbar{gap:6px;padding:var(--safe-top) 6px 5px}
  .brand{padding-left:6px}
  .brand b{font-size:11px;letter-spacing:.10em}
  .brand span{font-size:7.5px;letter-spacing:.15em}
  .stats{gap:4px}
  .chip{min-width:58px;padding:3px 6px 4px;border-radius:7px}
  .chip .k{font-size:7px}
  .chip .v{font-size:15px}
  #waveBtn{height:44px;min-width:116px;padding:0 10px;font-size:11px;border-radius:8px}

  #dock{left:6px;top:68px;width:216px;max-height:calc(100dvh - 138px)}
  #hireToggle{min-height:48px;padding:0 11px;border-radius:10px}
  #hireToggle .lbl{font-size:12px}
  #hireToggle .who{font-size:8.5px}
  #hireBar{max-height:calc(100dvh - 134px)}
  .staff{--art:66px;min-height:82px;padding-top:8px;padding-bottom:8px}
  .staff .nm{font-size:12px}.staff .bl{font-size:8px}.staff .pr{font-size:14px}

  #controls{right:6px;bottom:var(--safe-bottom);gap:5px}
  .grp{gap:2px;padding:3px;border-radius:10px}
  .grp .cap{font-size:7px;padding:0 3px}
  .sp{min-width:42px;height:44px;font-size:12px;border-radius:8px}
  .zb{width:42px;height:44px;font-size:18px;border-radius:8px}
  .zb.fit{font-size:9.5px}
  #zoomPct{min-width:38px;font-size:10px}

  #panel{width:min(370px,54vw);max-height:84dvh}
  #pArt{width:125px;height:143px}
  .p-id h2{font-size:22px}
}

/* Narrow portrait phones: use two-row HUD and bottom-sheet details. */
@media (max-width: 620px) and (orientation: portrait){
  #topbar{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto auto;column-gap:6px;row-gap:5px;
    align-items:center;
    padding:var(--safe-top) 6px 6px;
    background:linear-gradient(180deg,rgba(9,11,14,.96) 0%,rgba(9,11,14,.90) 82%,rgba(9,11,14,.12) 100%);
  }
  .brand{grid-column:1;grid-row:1;min-width:0}
  .brand b{font-size:10.5px;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .brand span{font-size:6.8px;letter-spacing:.13em}
  #waveBtn{grid-column:2;grid-row:1;height:40px;min-width:108px;font-size:10px;padding:0 8px}
  .stats{
    grid-column:1 / -1;grid-row:2;margin:0;width:100%;display:grid;
    grid-template-columns:repeat(3,1fr);gap:5px;
  }
  .chip{min-width:0;padding:3px 4px 4px}
  .chip .k{font-size:6.8px}.chip .v{font-size:15px}

  #dock{top:104px;left:6px;width:min(220px,64vw);max-height:calc(100dvh - 176px)}
  #dock.shut #hireToggle{min-width:120px}
  #hireToggle{min-height:46px}
  #hireBar{max-height:calc(100dvh - 166px)}

  #controls{
    left:6px;right:6px;bottom:var(--safe-bottom);width:auto;
    display:flex;justify-content:space-between;gap:4px;align-items:center;
  }
  #controls .grp{min-width:0}
  .grp .cap{display:none}
  .sp{min-width:38px;width:38px;height:42px;font-size:11px}
  .zb{width:38px;height:42px;font-size:17px}
  .zb.fit{font-size:8.5px}
  #zoomPct{min-width:34px;font-size:9px}

  #panel{
    left:6px;right:6px;top:auto;bottom:0;width:auto;max-height:min(78dvh,650px);
    transform:translateY(110%);border:1px solid var(--line);border-bottom:0;
    border-radius:16px 16px 0 0;
  }
  #panel.open{transform:translateY(0)}
  .p-hero{padding:10px 10px 0;gap:9px}
  #pArt{width:100px;height:115px}
  .p-id{padding-bottom:10px}
  .p-id h2{font-size:19px}
  .p-role{font-size:7px;margin-bottom:5px}.p-sub{font-size:9px}.p-zone{font-size:8px;margin-top:5px}
  .p-pips{margin-top:6px}.p-pips i{width:17px}
  .p-cols{grid-template-columns:1fr 1fr;gap:6px}
  .p-col{padding:7px 8px}.p-line{font-size:10.5px}.p-note{font-size:9.5px}
  .p-actions{margin:8px 10px max(8px,env(safe-area-inset-bottom));gap:6px}
  .p-actions button{height:48px;font-size:11px}
  .p-close{width:38px;height:38px;font-size:19px}

  #toast{top:100px;max-width:88vw;font-size:10px;padding:8px 12px}
  #rotate{display:none}
}

/* Very narrow phones (older/smaller devices). */
@media (max-width: 390px){
  .brand b{font-size:9.5px}.brand span{display:none}
  #waveBtn{min-width:102px;font-size:9.5px}
  #dock{top:92px}
  .sp{min-width:34px;width:34px;height:40px}
  .zb{width:34px;height:40px}
  #zoomPct{display:none}
  #controls{gap:2px}
  #controls .grp{padding:2px}
}

/* Short landscape phones: compress vertical chrome aggressively. */
@media (orientation: landscape) and (max-height: 520px){
  #topbar{padding:3px 5px;gap:4px}
  .brand span{display:none}.brand b{font-size:10px}
  .chip{min-width:52px;padding:2px 4px}.chip .v{font-size:14px}.chip .k{font-size:6.5px}
  #waveBtn{height:38px;min-width:106px;font-size:9.5px}
  #dock{top:50px;left:5px;width:200px;max-height:calc(100dvh - 58px)}
  #hireToggle{min-height:42px}
  #hireBar{max-height:calc(100dvh - 100px)}
  #controls{right:5px;bottom:5px}
  .sp,.zb{height:38px}.sp{min-width:36px}.zb{width:36px}
  #panel{max-height:94dvh;width:min(350px,48vw)}
}

/* Foldable/tablet widths: allow a little more breathing room without becoming huge. */
@media (min-width: 981px) and (max-width: 1450px){
  #dock{width:250px}
  #panel{width:min(410px,38vw)}
}



/* ============================================================
   MAIN MENU / FRONT END
   17-person roster splash composition
   The artwork is decorative; real HTML hit targets and modal panels sit above it.
   ============================================================ */
#mainMenu{
  position:fixed;inset:0;z-index:2000;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 35%,#122235 0%,#060b12 55%,#020407 100%);
  overflow:hidden;touch-action:manipulation;
}
#mainMenu.off{display:none}
.menu-stage{
  position:relative;
  width:min(100vw,calc(100dvh * 893 / 1536));
  aspect-ratio:893 / 1536;
  max-height:100dvh;
  background-image:url("../assets/51e46dd482f4a13e38af.webp");
  background-size:100% 100%;background-position:center;background-repeat:no-repeat;
  filter:saturate(1.02) contrast(1.01);
  box-shadow:0 0 80px rgba(0,0,0,.72);
}
.menu-hit{
  position:absolute;border:0;background:transparent;color:transparent;border-radius:12px;
  cursor:pointer;outline:none;touch-action:manipulation;
}
.menu-hit::after{
  content:'';position:absolute;inset:2px;border-radius:inherit;opacity:0;
  border:2px solid rgba(126,210,255,.9);box-shadow:0 0 18px rgba(39,168,255,.75),inset 0 0 18px rgba(39,168,255,.25);
  transition:opacity .08s ease,transform .08s ease;
}
.menu-hit:active::after,.menu-hit:focus-visible::after{opacity:1;transform:scale(.985)}
#menuPlay{left:19.8%;top:69.6%;width:59.6%;height:8.4%}
#menuHow{left:20.2%;top:79.1%;width:58.4%;height:4.0%}
#menuTeam{left:20.2%;top:83.25%;width:58.4%;height:4.0%}
#menuCustomers{left:20.2%;top:87.4%;width:58.4%;height:4.0%}
#menuSettings{left:20.2%;top:91.55%;width:58.4%;height:4.0%}
#menuDaily{left:1.8%;top:90.1%;width:14.6%;height:7.6%}
#menuAchievements{left:83.0%;top:90.1%;width:15.3%;height:7.6%}

#menuModal{
  position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);display:none;align-items:center;justify-content:center;
  padding:max(16px,env(safe-area-inset-top)) 14px max(16px,env(safe-area-inset-bottom));
  background:rgba(2,5,9,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  z-index:20;
}
#menuModal.show{display:flex}
.menu-card{
  width:min(620px,94vw);max-height:88dvh;overflow:auto;overscroll-behavior:contain;
  background:linear-gradient(165deg,#1c2631,#0d131a 75%);border:1px solid #25445e;border-radius:18px;
  box-shadow:0 24px 70px rgba(0,0,0,.7),0 0 30px rgba(0,120,220,.12);
  padding:18px;color:#eef5fb;
}
.menu-card-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.menu-card-head h2{margin:0;flex:1;font-size:22px;letter-spacing:.08em;text-transform:uppercase}
.menu-close{
  width:42px;height:42px;border-radius:10px;border:1px solid #35516a;background:#172330;color:#dceeff;
  font-size:24px;font-weight:800;
}
.menu-lead{color:#b8c8d8;font-size:13px;line-height:1.55;margin:0 0 14px}
.menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.menu-info{
  background:#111922;border:1px solid #273746;border-radius:12px;padding:11px 12px;
}
.menu-info b{display:block;color:#fff;font-size:13px;margin-bottom:4px}
.menu-info span{display:block;color:#9fb0c1;font-size:11px;line-height:1.4}
.menu-info em{display:block;color:#63c4ff;font-style:normal;font-size:10px;letter-spacing:.08em;text-transform:uppercase;margin-top:5px}
.menu-actions{display:flex;gap:9px;margin-top:15px;flex-wrap:wrap}
.menu-action{
  flex:1 1 150px;height:50px;border-radius:11px;border:1px solid #225c86;background:#11334b;color:#eaf7ff;
  font:800 12px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:.09em;text-transform:uppercase;
}
.menu-action.primary{background:#e4002b;border-color:#ff3155;box-shadow:0 3px 0 #92001b}
.menu-action:active{transform:translateY(2px)}

/* Visual Pack API v1 — menu selector. The baked main-menu artwork remains untouched. */
.visual-pack-quick{
  position:absolute;right:2.4%;top:2.0%;z-index:12;min-width:118px;max-width:36%;
  padding:8px 10px;border-radius:12px;border:1px solid rgba(111,201,255,.58);
  background:linear-gradient(165deg,rgba(15,35,53,.94),rgba(8,16,25,.94));color:#dff4ff;
  box-shadow:0 8px 22px rgba(0,0,0,.42),inset 0 0 18px rgba(36,158,230,.08);
  font:800 9px/1.05 "Helvetica Neue",Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;
  text-align:left;touch-action:manipulation;cursor:pointer;
}
.visual-pack-quick span{display:block;color:#78cfff;font-size:8px;margin-bottom:4px}
.visual-pack-quick strong{display:block;color:#fff;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.visual-pack-quick:active{transform:translateY(1px)}
/* Online leaderboard quick access — HTML overlay; no baked menu art changes. */
.leaderboard-quick{
  position:absolute;left:2.4%;top:2.0%;z-index:12;min-width:118px;max-width:36%;
  padding:8px 10px;border-radius:12px;border:1px solid rgba(242,180,65,.62);
  background:linear-gradient(165deg,rgba(47,38,14,.95),rgba(18,16,9,.95));color:#fff2c7;
  box-shadow:0 8px 22px rgba(0,0,0,.42),inset 0 0 18px rgba(242,180,65,.08);
  font:800 9px/1.05 "Helvetica Neue",Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;
  text-align:left;touch-action:manipulation;cursor:pointer;
}
.leaderboard-quick span{display:block;color:#f2b441;font-size:8px;margin-bottom:4px}
.leaderboard-quick strong{display:block;color:#fff;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leaderboard-quick:active{transform:translateY(1px)}
/* V8.2.17 — clean header utility panels.
   These opaque HTML/CSS controls fully cover the obsolete corner counters in the
   baked menu art and visually frame the Toyota crest without modifying the image. */
.menu-stage::before,.menu-stage::after{display:none}
.leaderboard-quick,.visual-pack-quick{
  top:.34%;
  width:43.6%;
  height:6.55%;
  min-width:0;
  max-width:none;
  min-height:0;
  padding:0;
  border:0;
  border-radius:0;
  overflow:hidden;
  position:absolute;
  display:flex;
  flex-direction:column;
  justify-content:center;
  isolation:isolate;
  background:linear-gradient(180deg,#f2f4f5 0%,#9ca6ad 19%,#505b63 49%,#c2c8cc 77%,#656f76 100%);
  box-shadow:none;
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.58));
  color:#fff;
  font-family:"Helvetica Neue",Arial,sans-serif;
  text-transform:uppercase;
  touch-action:manipulation;
  cursor:pointer;
}
.leaderboard-quick{
  left:.28%;right:auto;
  align-items:flex-start;text-align:left;
  clip-path:polygon(0 0,100% 0,87.2% 100%,0 100%);
}
.visual-pack-quick{
  right:.28%;left:auto;
  align-items:flex-end;text-align:right;
  clip-path:polygon(0 0,100% 0,100% 100%,12.8% 100%);
}
.leaderboard-quick::before,.visual-pack-quick::before{
  content:'';position:absolute;z-index:0;inset:3px;clip-path:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 -12px 18px rgba(0,0,0,.16);
}
.leaderboard-quick::before{
  background:linear-gradient(155deg,#3a3d40 0%,#202326 56%,#111315 100%);
}
.visual-pack-quick::before{
  background:linear-gradient(155deg,#123653 0%,#0a253b 56%,#061624 100%);
}
.leaderboard-quick::after,.visual-pack-quick::after{
  content:'';position:absolute;z-index:1;top:4px;height:1px;width:78%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.74),transparent);opacity:.52;
}
.leaderboard-quick::after{left:4%}
.visual-pack-quick::after{right:4%}
.leaderboard-quick span,.leaderboard-quick strong,.visual-pack-quick span,.visual-pack-quick strong{
  position:relative;z-index:2;display:block;white-space:nowrap;
  overflow:visible;text-overflow:clip;text-shadow:0 2px 3px rgba(0,0,0,.78);
}
.leaderboard-quick span,.leaderboard-quick strong{margin-left:9.5%}
.visual-pack-quick span,.visual-pack-quick strong{margin-right:9.5%}
.leaderboard-quick span,.visual-pack-quick span{
  margin-bottom:4px;font-size:8.7px;line-height:1;
  font-weight:900;letter-spacing:.11em;
}
.leaderboard-quick span{color:#f3c45b}
.visual-pack-quick span{color:#8edbff}
.leaderboard-quick strong,.visual-pack-quick strong{
  color:#fff;font-size:12.4px;line-height:1;
  font-weight:900;letter-spacing:.035em;
}
.leaderboard-quick:active,.visual-pack-quick:active{transform:translateY(1px)}
@media(max-width:520px){
  .leaderboard-quick,.visual-pack-quick{height:6.6%}
  .leaderboard-quick span,.visual-pack-quick span{font-size:7.1px;margin-bottom:3px}
  .leaderboard-quick strong,.visual-pack-quick strong{font-size:10.3px}
}
.leaderboard-wrap{overflow-x:auto;border:1px solid #263b4c;border-radius:12px;background:#091017}
.leaderboard-table{width:100%;min-width:560px;border-collapse:collapse;font:800 11px/1.25 "Helvetica Neue",Arial,sans-serif}
.leaderboard-table th{position:sticky;top:0;background:#13212d;color:#77cef7;text-align:left;padding:9px 10px;font-size:9px;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid #294459}
.leaderboard-table td{padding:10px;border-bottom:1px solid rgba(72,99,120,.28);color:#d9e7f2;white-space:nowrap}
.leaderboard-table tr:last-child td{border-bottom:0}.leaderboard-table tr.you{background:rgba(242,180,65,.12)}
.leaderboard-table tr.you td{color:#fff3c6}.leaderboard-rank{color:#f2b441;font-size:13px}.leaderboard-name{max-width:180px;overflow:hidden;text-overflow:ellipsis}
.leaderboard-empty{padding:18px 12px;text-align:center;color:#9eb1c1;font-size:12px;line-height:1.5}
.leaderboard-you-tag{display:inline-block;margin-left:6px;padding:2px 5px;border-radius:5px;background:#f2b441;color:#111;font-size:7px;letter-spacing:.07em;vertical-align:1px}
.leaderboard-note{margin:10px 0 0;color:#7890a3;font-size:9px;line-height:1.45}
.visual-pack-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.visual-pack-tab{
  flex:1 1 150px;min-height:58px;padding:9px 11px;text-align:left;border-radius:12px;
  border:1px solid #2e4f68;background:#101b25;color:#e8f6ff;cursor:pointer;
}
.visual-pack-tab b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.visual-pack-tab span{display:block;color:#8fa8ba;font-size:10px;line-height:1.35;margin-top:4px}
.visual-pack-tab.on{border-color:#f2b441;box-shadow:0 0 0 1px rgba(242,180,65,.32),0 0 20px rgba(242,180,65,.12);background:#282216}
.visual-pack-tab.on b{color:#ffd76d}
.visual-pack-status{padding:10px 12px;border:1px solid #263b4c;border-radius:12px;background:#0d151d;color:#a9bed0;font-size:11px;line-height:1.45}
.visual-pack-status strong{color:#fff}
.visual-pack-api-note{margin-top:10px;color:#71889b;font-size:10px;line-height:1.4}

.menu-tip{padding:9px 11px;margin:8px 0;border-left:3px solid #2baeff;background:#0f1821;color:#c6d6e5;font-size:12px;line-height:1.48}

/* Sales Team dossier: portrait crops come directly from the supplied character cards. */
.menu-card.team-wide{width:min(1080px,96vw)}
.team-roster-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.team-member-card{display:grid;grid-template-columns:92px 1fr;gap:11px;background:linear-gradient(145deg,#101a24,#0a1118);border:1px solid #294158;border-radius:14px;padding:10px;min-width:0;box-shadow:inset 0 1px rgba(255,255,255,.025)}
.team-member-art{width:92px;height:92px;object-fit:cover;border-radius:11px;border:1px solid #365f7c;background:#071018;align-self:start}
.team-member-main{min-width:0}.team-member-head{display:flex;align-items:flex-start;gap:8px}.team-member-head strong{color:#fff;font-size:15px;line-height:1.1;letter-spacing:.04em}.team-member-cost{margin-left:auto;color:#76d3ff;font:900 10px/1.1 Helvetica,Arial,sans-serif;white-space:nowrap}
.team-member-role{display:block;color:#94aabd;font-size:10px;line-height:1.35;margin-top:4px}
.team-combos{grid-column:1/-1;display:grid;gap:6px;margin-top:1px}.team-combo{display:grid;grid-template-columns:27px 1fr;gap:7px;align-items:center;border-left:3px solid #d7a83b;background:#121c25;border-radius:8px;padding:6px 7px}.team-combo img{width:27px;height:27px;object-fit:cover;border-radius:50%;border:1px solid #44667e}.team-combo b{display:block;color:#ffd56d;font-size:10px;letter-spacing:.04em}.team-combo span{display:block;color:#aab9c7;font-size:9px;line-height:1.28;margin-top:1px}
.team-triples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 14px}.team-triple{border:1px solid #5e4b24;background:linear-gradient(145deg,rgba(95,68,18,.24),rgba(14,20,27,.9));border-radius:10px;padding:9px}.team-triple b{display:block;color:#ffd86f;font-size:11px}.team-triple span{display:block;color:#aab8c5;font-size:9.5px;line-height:1.35;margin-top:3px}
@media(max-width:720px){.team-roster-grid{grid-template-columns:1fr}.team-member-card{grid-template-columns:78px 1fr}.team-member-art{width:78px;height:78px}.team-triples{grid-template-columns:1fr}}

#homeBtn{
  height:36px;min-width:58px;padding:0 9px;border-radius:8px;border:1px solid #35414e;background:rgba(18,24,31,.92);
  color:#d8e5f2;font:800 9px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:.10em;text-transform:uppercase;
}
#homeBtn:active{background:#26313d;transform:translateY(1px)}
@media(max-width:620px){
  #homeBtn{grid-column:1;grid-row:1;justify-self:end;margin-right:4px;min-width:42px;width:42px;padding:0;font-size:0}
  #homeBtn::before{content:'☰';font-size:18px;line-height:1;color:#dce8f3}
  .brand{padding-right:50px}
  .menu-grid{grid-template-columns:1fr}
  .menu-card{width:94vw;max-height:82dvh;padding:14px}
  .menu-card-head h2{font-size:18px}
}
@media(orientation:landscape) and (max-height:620px){
  .menu-stage{height:100dvh;width:auto}
  .menu-card{max-height:92dvh;width:min(720px,84vw)}
  .menu-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Canonical customer-card gallery. The supplied card images are rendered unmodified. */
.customer-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.customer-card-tile{appearance:none;border:1px solid #27445d;background:#0b1118;border-radius:14px;padding:6px;overflow:hidden;cursor:zoom-in;box-shadow:0 8px 22px rgba(0,0,0,.24)}
.customer-card-tile:active{transform:translateY(1px)}
.customer-card-img{display:block;width:100%;height:auto;border-radius:10px;background:#fff}
.customer-card-img.expanded{position:fixed;z-index:10000;inset:3dvh 3vw;width:94vw;height:94dvh;object-fit:contain;border-radius:16px;background:rgba(0,0,0,.94);padding:10px;box-shadow:0 0 0 9999px rgba(0,0,0,.82);cursor:zoom-out}
.customer-card-note{margin:12px 0 0;color:#8ea4b8;font-size:11px;line-height:1.45}
@media(max-width:620px){.customer-card-grid{grid-template-columns:1fr 1fr;gap:8px}.customer-card-tile{padding:4px;border-radius:10px}}
@media(max-width:430px){.customer-card-grid{grid-template-columns:1fr 1fr}}


/* ========================================================================
   FINAL COMMERCIAL UI / VISUAL POLISH PASS — V22
   Presentation only. Gameplay and simulation values are untouched.
   ======================================================================== */
:root{
  --ui-bg:#0a0e13;
  --ui-bg2:#111820;
  --ui-card:rgba(17,24,32,.96);
  --ui-card2:rgba(11,17,24,.94);
  --ui-line:rgba(112,157,194,.28);
  --ui-line-strong:rgba(105,184,235,.58);
  --ui-blue:#6dc4f2;
  --ui-blue-soft:rgba(109,196,242,.16);
  --ui-shadow:0 12px 34px rgba(0,0,0,.38);
  --ui-radius:12px;
  --ui-radius-sm:9px;
  --ui-gap:8px;
}
html,body,#wrap{background:#05080c}
#cv{background:radial-gradient(circle at 50% 42%,#111821 0%,#070b10 66%,#030508 100%);filter:saturate(1.025) contrast(1.02)}

/* unified top navigation / HUD */
#topbar{
  top:8px;left:8px;right:8px;height:62px;padding:6px 8px;gap:7px;
  border:1px solid var(--ui-line);border-radius:14px;
  background:linear-gradient(180deg,rgba(12,17,23,.97),rgba(7,11,16,.93));
  box-shadow:var(--ui-shadow),inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
}
.brand{height:48px;min-width:178px;justify-content:center;border-left:3px solid var(--red);padding:0 10px}
.brand b{font-size:14px;letter-spacing:.105em;line-height:1.1;color:#f4f7fa}
.brand span{font-size:8px;letter-spacing:.20em;color:#93a7b8;margin-top:4px}
#homeBtn,.chip,#waveBtn,.sp,.zb,.menu-close,.menu-action,.p-close,.p-actions button,.rc-btns button,.big-btn{
  border-radius:var(--ui-radius-sm);border:1px solid var(--ui-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 5px 14px rgba(0,0,0,.18);
  transition:transform .12s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease,opacity .15s ease;
}
#homeBtn{height:48px;min-width:62px;padding:0 10px;background:#101820;color:#d9e8f3;border-color:rgba(105,184,235,.30);font-size:9px}
#homeBtn:hover,#homeBtn:focus-visible{border-color:var(--ui-line-strong);background:#14212c}
.stats{height:48px;gap:6px;margin-left:auto}
.chip{height:48px;min-width:82px;padding:5px 10px 4px;background:#0d141b;border-top-width:1px;text-align:left;position:relative;overflow:hidden}
.chip::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:#617282}
.chip.hp::before{background:var(--red)}.chip.cash::before{background:#55b86a}.chip.wave::before{background:var(--gold)}
.chip .k{font-size:7.5px;letter-spacing:.14em;color:#8293a3}.chip .v{font-size:18px;line-height:1.08;margin-top:3px;color:#fff}
#waveBtn{height:48px;min-width:148px;padding:0 13px;font-size:11px;background:linear-gradient(180deg,#ed173f,#c90026);border-color:#ff4160;box-shadow:0 3px 0 #820019,0 8px 18px rgba(0,0,0,.25)}
#waveBtn:not(.running){animation:waveReady 2.4s ease-in-out infinite}
#waveBtn.running{background:#10161d;color:#758493;border-color:#273544;animation:none}
@keyframes waveReady{0%,100%{box-shadow:0 3px 0 #820019,0 8px 18px rgba(0,0,0,.25)}50%{box-shadow:0 3px 0 #820019,0 8px 20px rgba(228,0,43,.32),0 0 0 2px rgba(228,0,43,.08)}}

/* roster drawer */
#dock{left:8px;top:78px;width:254px;gap:6px;max-height:calc(100dvh - 44px - 44px);filter:drop-shadow(0 14px 30px rgba(0,0,0,.30))}
#dock.shut{width:auto}
#hireToggle{height:48px;min-height:48px;padding:0 11px;background:linear-gradient(180deg,rgba(21,29,38,.98),rgba(11,17,24,.98));border:1px solid var(--ui-line-strong);border-left:3px solid var(--red);color:#f2f6fa;box-shadow:var(--ui-shadow);border-radius:11px}
#hireToggle:active{transform:translateY(1px);box-shadow:0 8px 20px rgba(0,0,0,.30)}
#hireToggle .lbl{font-size:11px;letter-spacing:.15em;color:#fff}
#hireToggle .who{font-size:8px;color:#8fa3b4;letter-spacing:.08em}
#hireToggle .chev{font-size:11px;color:#8dcaf0}
#hireBar{gap:5px;max-height:calc(100dvh - 145px);padding:0 3px 18px 0;scrollbar-width:thin;scrollbar-color:rgba(106,174,218,.46) rgba(8,12,17,.15);overscroll-behavior:contain;touch-action:pan-y;background:linear-gradient(180deg,rgba(6,10,14,.26),rgba(6,10,14,.10));border-radius:10px}
#hireBar::-webkit-scrollbar{width:4px}#hireBar::-webkit-scrollbar-thumb{background:rgba(106,174,218,.46);border-radius:10px}#hireBar::-webkit-scrollbar-track{background:rgba(7,12,17,.25)}
.staff{
  --art:54px;min-height:68px;height:68px;padding:7px 52px 7px 66px;
  border-radius:10px;border:1px solid rgba(104,142,171,.22);border-left:2px solid rgba(104,142,171,.32);
  background:linear-gradient(145deg,rgba(19,27,35,.97),rgba(10,15,21,.97));
  box-shadow:0 5px 14px rgba(0,0,0,.21),inset 0 1px 0 rgba(255,255,255,.025);
  overflow:hidden;
}
.staff:hover{border-color:rgba(106,190,239,.46);background:linear-gradient(145deg,rgba(23,34,44,.98),rgba(12,19,25,.98))}
.staff canvas{left:7px;right:auto;top:50%;width:54px;height:54px;border-radius:9px;background:radial-gradient(circle at 50% 35%,rgba(67,95,120,.35),rgba(10,15,21,.92));border:1px solid rgba(110,170,210,.24)}
.staff .txt{display:block;min-width:0;height:100%;position:relative}
.staff .nm{font-size:12.5px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f4f7fa}
.staff .bl{font-size:7.4px;line-height:1.1;letter-spacing:.085em;color:#8fa2b2;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.staff-meta{display:flex;gap:3px;margin-top:4px;max-width:112px;overflow:hidden}
.staff-meta i{font-style:normal;font-size:6.2px;font-weight:800;line-height:1;padding:3px 4px;border-radius:4px;color:#91b7d0;background:rgba(65,121,158,.15);border:1px solid rgba(80,150,194,.18);white-space:nowrap}
.staff-meta i.lang{color:#84dda2;border-color:rgba(79,176,110,.24);background:rgba(52,128,76,.14)}
.staff .pr{position:absolute;right:-46px;bottom:7px;font-size:14px;line-height:1;color:#71d488;margin:0;text-align:right}
.staff.on{border-color:rgba(242,180,65,.78);border-left-color:var(--gold);background:linear-gradient(145deg,rgba(43,38,23,.98),rgba(20,20,16,.98));box-shadow:0 0 0 1px rgba(242,180,65,.10),0 6px 18px rgba(0,0,0,.28),0 0 18px rgba(242,180,65,.09)}
.staff.on::after{content:'✓';top:5px;right:5px;left:auto;width:18px;height:18px;border-radius:50%;background:var(--gold);color:#15130c;font-size:10px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.staff.broke{opacity:.64;filter:saturate(.72)}.staff.broke .pr{color:#df7080}.staff.broke:hover{opacity:.78}
#dock:not(.shut)::after{content:'⌄';position:absolute;left:50%;bottom:1px;transform:translateX(-50%);width:32px;height:15px;border-radius:8px 8px 0 0;display:grid;place-items:center;color:rgba(135,190,226,.65);font-size:12px;pointer-events:none;background:linear-gradient(180deg,rgba(7,11,16,0),rgba(7,11,16,.88))}

/* controls */
#controls{right:8px;bottom:max(8px,env(safe-area-inset-bottom));gap:7px;align-items:center}
.grp{height:48px;padding:3px;gap:3px;background:rgba(9,14,20,.94);border:1px solid var(--ui-line);border-radius:11px;box-shadow:var(--ui-shadow);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.grp .cap{font-size:7px;letter-spacing:.14em;color:#788b9b;padding:0 5px}
.sp,.zb{height:40px;min-width:40px;width:auto;border-radius:8px;background:#111a23;color:#c7d2dc;border-color:rgba(91,131,163,.22);font-size:11px}
.sp{padding:0 9px}.sp.on{background:linear-gradient(180deg,#f4c259,#dca22a);color:#15120b;border-color:#ffe093;box-shadow:inset 0 1px 0 rgba(255,255,255,.32)}
.zb{width:40px;font-size:18px}.zb.fit{width:44px;font-size:8px;letter-spacing:.06em}
#zoomPct{min-width:46px;font-size:9px;color:#aebcc8;font-variant-numeric:tabular-nums}

/* detail panel */
#panel{width:min(420px,40vw);max-height:84dvh;border:1px solid var(--ui-line-strong);border-right:0;border-radius:16px 0 0 16px;background:linear-gradient(165deg,rgba(18,27,36,.985),rgba(7,12,17,.985) 74%);box-shadow:-20px 0 55px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.035)}
.p-hero{padding:12px 12px 0;gap:11px;background:radial-gradient(130% 120% at 24% 0%,#314252 0%,#1b2732 47%,#0e151c 100%);border-bottom:1px solid rgba(102,154,191,.22)}
#pArt{width:124px;height:142px}.p-id{padding-bottom:12px}.p-id h2{font-size:23px;letter-spacing:.02em}.p-role{font-size:7px;letter-spacing:.16em;color:#acd9f1;background:rgba(65,123,161,.18);border:1px solid rgba(82,154,199,.22);padding:4px 7px}.p-sub{font-size:9px}.p-zone{font-size:8px;background:rgba(41,104,143,.17);color:#9ecfea;border:1px solid rgba(73,146,190,.19)}
.p-body{padding:10px 11px 0}.p-cols{gap:7px}.p-col{padding:8px 9px;border-radius:9px;background:rgba(7,12,17,.78);border-color:rgba(89,130,160,.18)}.p-col.next{border-color:rgba(242,180,65,.25);background:rgba(32,27,14,.48)}.p-col h3,.p-info-card h3{font-size:7px;letter-spacing:.16em}.p-line{font-size:10.5px;padding:3px 0}.p-line .k{color:#8799a8}.p-line .v{color:#eff4f8}
.p-info-stack{display:grid;grid-template-columns:1fr;gap:6px;margin-top:8px}.p-info-card{padding:8px 9px;border-radius:9px;background:rgba(9,15,21,.72);border:1px solid rgba(93,139,173,.18)}.p-info-card h3{margin:0 0 5px;color:#7d92a3;text-transform:uppercase}.p-info-card b{display:block;color:#eaf4fb;font-size:11px;margin-bottom:3px}.p-info-card p{margin:0;color:#9cadbb;font-size:9.5px;line-height:1.38}.p-info-card.ability{border-left:3px solid #5caedf}.p-info-card.synergy{border-left:3px solid var(--gold)}
.p-note{display:none}.p-actions{margin:8px 11px max(10px,env(safe-area-inset-bottom));gap:7px}.p-actions button{height:50px;font-size:11px}.p-close{width:40px;height:40px;background:rgba(6,11,16,.78);border-color:rgba(105,169,207,.25)}
#upBtn{background:linear-gradient(180deg,#f5c65e,#dc9f26);border-color:#f8d581;color:#17130b;box-shadow:0 3px 0 #936811}#recycleBtn{background:rgba(54,20,27,.66);border-color:rgba(178,67,86,.42)}

/* overlays/menu inherit same design system */
.menu-card,.confirm-card{background:linear-gradient(165deg,rgba(19,29,38,.99),rgba(7,12,17,.99));border-color:var(--ui-line-strong);box-shadow:0 24px 70px rgba(0,0,0,.58),0 0 30px rgba(76,164,220,.08)}
.menu-info,.menu-tip,.rc-rows{background:rgba(8,14,20,.80);border-color:rgba(92,139,175,.22)}
.menu-action{background:#10202d;border-color:rgba(84,156,202,.42)}

/* placement presentation */
#toast{background:rgba(197,0,37,.95);border:1px solid rgba(255,88,117,.42);box-shadow:0 10px 24px rgba(0,0,0,.28)}

/* responsive Fold/tablet */
@media (min-width:981px) and (max-width:1450px){#dock{width:246px}#panel{width:min(400px,39vw)}}
@media (max-width:980px){
  #topbar{top:5px;left:5px;right:5px;height:54px;padding:4px 5px;gap:4px;border-radius:11px}
  .brand{height:44px;min-width:142px;padding:0 6px}.brand b{font-size:11px}.brand span{font-size:6.8px}.stats{height:44px;gap:3px}.chip{height:44px;min-width:59px;padding:4px 5px}.chip .k{font-size:6.4px}.chip .v{font-size:15px}#homeBtn{height:44px;min-width:50px}#waveBtn{height:44px;min-width:114px;font-size:9.5px;padding:0 7px}
  #dock{top:65px;left:5px;width:222px;max-height:calc(100dvh - 72px)}#hireToggle{height:44px;min-height:44px}#hireBar{max-height:calc(100dvh - 126px)}.staff{height:62px;min-height:62px;--art:48px;padding:6px 47px 6px 59px}.staff canvas{width:48px;height:48px}.staff .nm{font-size:11.5px}.staff .bl{font-size:6.9px}.staff-meta{margin-top:3px}.staff-meta i{font-size:5.7px}.staff .pr{font-size:12.5px;right:-42px;bottom:6px}
  #controls{right:5px;bottom:5px;gap:4px}.grp{height:44px;padding:2px}.sp,.zb{height:38px;min-width:36px}.zb{width:36px}.zb.fit{width:40px}.sp{padding:0 7px}
  #panel{width:min(380px,53vw);max-height:90dvh}#pArt{width:108px;height:124px}.p-id h2{font-size:20px}
}

/* narrow portrait: top HUD becomes compact 2-row navigation, detail panel a bottom sheet */
@media (max-width:620px) and (orientation:portrait){
  #topbar{height:auto;min-height:91px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:42px 39px;padding:4px;column-gap:4px;row-gap:3px}
  .brand{grid-column:1;grid-row:1;height:42px;min-width:0;padding-left:7px;padding-right:46px}.brand b{font-size:10px}.brand span{font-size:6px}
  #homeBtn{grid-column:1;grid-row:1;justify-self:end;height:38px;width:38px;min-width:38px;margin-right:1px;padding:0;font-size:0}#homeBtn::before{content:'☰';font-size:17px;color:#dce8f3}
  #waveBtn{grid-column:2;grid-row:1;height:42px;min-width:108px}
  .stats{grid-column:1/-1;grid-row:2;height:39px;display:grid;grid-template-columns:repeat(3,1fr);gap:3px}.chip{height:39px;min-width:0;padding:3px 5px}.chip .k{font-size:6px}.chip .v{font-size:14px;margin-top:1px}
  #dock{top:101px;left:5px;width:min(218px,70vw);max-height:calc(100dvh - 154px)}#hireBar{max-height:calc(100dvh - 210px)}#dock.shut #hireToggle{min-width:124px}
  #controls{left:5px;right:5px;bottom:max(5px,env(safe-area-inset-bottom));justify-content:space-between}.grp .cap{display:none}.sp,.zb{min-width:38px;width:38px;height:42px;padding:0}.zb.fit{width:42px}#zoomPct{min-width:34px}
  #panel{left:5px;right:5px;top:auto;bottom:0;width:auto;max-height:min(82dvh,700px);border:1px solid var(--ui-line-strong);border-bottom:0;border-radius:15px 15px 0 0;transform:translateY(110%)}#panel.open{transform:translateY(0)}.p-hero{padding:8px 8px 0}#pArt{width:94px;height:108px}.p-id h2{font-size:18px}.p-body{padding:7px 8px 0}.p-cols{grid-template-columns:1fr 1fr;gap:5px}.p-line{font-size:9.3px}.p-info-card p{font-size:8.8px}.p-actions{margin:6px 8px max(7px,env(safe-area-inset-bottom))}.p-actions button{height:46px}
}
@media(max-width:390px){#placementHint{top:91px;max-width:94vw}#placementHint span{max-width:250px}.hire-filter{height:25px;padding:0 6px;font-size:6.3px}#hireSort{height:27px;font-size:7px}#dock{width:min(205px,73vw)}.staff{height:59px;min-height:59px;--art:45px;padding-left:55px}.staff canvas{width:45px;height:45px}.staff-meta i:nth-child(n+2){display:none}.staff .pr{font-size:12px}.sp,.zb{width:34px;min-width:34px}.zb.fit{width:38px}#zoomPct{display:none}}
@media(orientation:landscape) and (max-height:520px){
  #topbar{top:4px;left:4px;right:4px;height:45px;padding:3px}.brand{height:37px;min-width:132px}.brand span{display:none}.brand b{font-size:10px}#homeBtn,.chip,#waveBtn{height:37px}.chip{min-width:52px}.chip .v{font-size:13px}#waveBtn{min-width:104px;font-size:8.8px}
  #dock{top:55px;left:4px;width:205px;max-height:calc(100dvh - 60px)}#hireToggle{height:40px;min-height:40px}#hireBar{max-height:calc(100dvh - 107px)}.staff{height:57px;min-height:57px;--art:43px;padding:5px 42px 5px 52px}.staff canvas{width:43px;height:43px}.staff-meta{display:none}.staff .pr{font-size:11px;right:-37px}
  #controls{right:4px;bottom:4px}.grp{height:40px}.sp,.zb{height:34px;min-width:34px}.zb{width:34px}.zb.fit{width:38px}.sp{padding:0 6px}
  #panel{max-height:96dvh;width:min(360px,49vw)}
}



/* ========================================================================
   GAMEPLAY UI REFINEMENT — compact HUD, clearer hierarchy, more visible lot
   Presentation only: existing IDs/events remain untouched.
   ======================================================================== */
#topbar{
  top:7px;left:7px;right:7px;height:50px;padding:0;gap:6px;
  background:transparent;border:0;border-radius:0;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.brand,#homeBtn,.stats,#waveBtn{
  box-shadow:0 8px 24px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.045);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.brand{
  height:46px;min-width:164px;padding:0 10px;border:1px solid rgba(105,184,235,.24);
  border-left:3px solid var(--red);border-radius:11px;
  background:linear-gradient(180deg,rgba(14,21,28,.96),rgba(7,12,17,.94));
}
.brand b{font-size:12px;letter-spacing:.095em}.brand span{font-size:7px;letter-spacing:.18em;margin-top:3px}
#homeBtn{height:46px;min-width:54px;padding:0 9px;border-radius:11px;background:rgba(12,19,26,.95);font-size:8px}
.stats{
  height:46px;margin-left:auto;gap:0;padding:3px;border:1px solid rgba(105,184,235,.23);
  border-radius:11px;background:rgba(8,13,19,.94);
}
.chip{height:40px;min-width:70px;padding:4px 9px;border:0;border-radius:8px;background:transparent;box-shadow:none}
.chip+.chip{border-left:1px solid rgba(111,151,182,.18);border-radius:0}
.chip::before{width:2px;top:6px;bottom:6px;border-radius:2px}
.chip .k{font-size:6.6px;letter-spacing:.13em}.chip .v{font-size:16px;margin-top:2px}
#waveBtn{
  height:46px;min-width:138px;padding:0 12px;border-radius:11px;font-size:10px;letter-spacing:.08em;
  box-shadow:0 3px 0 #820019,0 8px 22px rgba(0,0,0,.32)
}

#dock{left:7px;top:64px;width:232px;gap:5px;max-height:calc(100dvh - 72px);filter:drop-shadow(0 12px 26px rgba(0,0,0,.28))}
#hireToggle{height:44px;min-height:44px;padding:0 10px;border-radius:10px}
#hireToggle .lbl{font-size:10px}#hireToggle .who{font-size:7px}
#hireBar{gap:4px;max-height:calc(100dvh - 122px);padding-right:2px}
.staff{--art:48px;height:61px;min-height:61px;padding:6px 44px 6px 58px;border-radius:9px}
.staff canvas{left:5px;width:48px;height:48px;border-radius:8px}.staff .nm{font-size:11px}.staff .bl{font-size:6.6px;margin-top:2px}
.staff-meta{margin-top:3px}.staff-meta i{font-size:5.4px;padding:2px 3px}.staff .pr{right:-38px;bottom:6px;font-size:12px}

#controls{right:7px;bottom:max(7px,env(safe-area-inset-bottom));gap:5px}
.grp{height:42px;padding:2px;gap:2px;border-radius:10px;background:rgba(8,13,19,.92)}
.grp .cap{font-size:6.5px;padding:0 4px}.sp,.zb{height:36px;min-width:36px;border-radius:7px;font-size:10px}.sp{padding:0 7px}.zb{width:36px;font-size:17px}.zb.fit{width:39px;font-size:7px}#zoomPct{min-width:39px;font-size:8px}

#panel{width:min(386px,36vw);max-height:calc(100dvh - 78px);top:calc(50% + 28px);border-radius:14px 0 0 14px}
.p-hero{padding:9px 9px 0;gap:9px}#pArt{width:104px;height:120px}.p-id{padding-bottom:9px}.p-id h2{font-size:20px}
.p-role{font-size:6.5px;padding:3px 6px;margin-bottom:5px}.p-sub{font-size:8px}.p-zone{font-size:7px}
.p-body{padding:7px 8px 0}.p-cols{gap:5px}.p-col{padding:6px 7px}.p-line{font-size:9.5px;padding:2px 0}
.p-info-stack{gap:5px;margin-top:6px}.p-info-card{padding:6px 7px}.p-info-card b{font-size:10px}.p-info-card p{font-size:8.5px;line-height:1.32}
.p-actions{margin:6px 8px max(8px,env(safe-area-inset-bottom));gap:5px}.p-actions button{height:44px;font-size:9.5px}.p-close{width:34px;height:34px}

@media (min-width:981px) and (max-width:1450px){
  .brand{min-width:146px}.brand span{display:none}#dock{width:222px}#panel{width:min(370px,35vw)}.grp .cap{display:none}
}
@media (max-width:980px){
  #topbar{top:5px;left:5px;right:5px;height:44px;gap:4px}
  .brand{height:40px;min-width:128px;padding:0 6px}.brand b{font-size:9.5px}.brand span{display:none}
  #homeBtn{height:40px;min-width:44px}.stats{height:40px;padding:2px}.chip{height:36px;min-width:54px;padding:3px 5px}.chip .v{font-size:13px}.chip .k{font-size:5.5px}
  #waveBtn{height:40px;min-width:104px;font-size:8.5px;padding:0 6px}
  #dock{top:55px;left:5px;width:205px;max-height:calc(100dvh - 61px)}#hireToggle{height:40px;min-height:40px}#hireBar{max-height:calc(100dvh - 106px)}
  .staff{height:55px;min-height:55px;--art:43px;padding:5px 40px 5px 51px}.staff canvas{width:43px;height:43px}.staff .nm{font-size:10.5px}.staff-meta{display:none}.staff .pr{font-size:11px;right:-35px}
  #controls{right:5px;bottom:5px}.grp{height:39px}.sp,.zb{height:33px;min-width:33px}.zb{width:33px}.zb.fit{width:36px}.sp{padding:0 5px}
  #panel{width:min(355px,48vw);max-height:calc(100dvh - 61px);top:calc(50% + 22px)}
}
@media (max-width:620px) and (orientation:portrait){
  #topbar{height:auto;min-height:82px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:38px 35px;column-gap:4px;row-gap:3px}
  .brand{grid-column:1;grid-row:1;height:38px;min-width:0;padding-left:7px;padding-right:42px}.brand b{font-size:9px}
  #homeBtn{grid-column:1;grid-row:1;justify-self:end;height:34px;width:34px;min-width:34px;font-size:0}#homeBtn::before{content:'☰';font-size:15px}
  #waveBtn{grid-column:2;grid-row:1;height:38px;min-width:100px}
  .stats{grid-column:1/-1;grid-row:2;height:35px;display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:2px}.chip{height:31px;min-width:0}.chip .v{font-size:12px}
  #dock{top:92px;width:min(202px,68vw);max-height:calc(100dvh - 139px)}#hireBar{max-height:calc(100dvh - 184px)}
  #controls{left:5px;right:5px;justify-content:space-between}.grp .cap{display:none}
  #panel{left:5px;right:5px;top:auto;bottom:0;width:auto;max-height:min(76dvh,650px);transform:translateY(110%)}#panel.open{transform:translateY(0)}
}
@media(orientation:landscape) and (max-height:520px){
  #topbar{height:39px}.brand,#homeBtn,#waveBtn{height:35px}.stats{height:35px}.chip{height:31px}.brand span{display:none}
  #dock{top:49px;width:194px}.staff{height:50px;min-height:50px;--art:39px;padding-left:47px}.staff canvas{width:39px;height:39px}
  #controls .grp{height:36px}.sp,.zb{height:30px;min-width:30px}.zb{width:30px}
  #panel{max-height:calc(100dvh - 48px);width:min(335px,46vw);top:calc(50% + 18px)}
}

/* Interaction/UX pass — final specificity overrides. */
#dock.shut #hireTools{display:none}
#hireTools{flex:0 0 auto}
#hireBar{min-height:0}
.p-actions{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr) minmax(0,1fr)}
.p-actions #upBtn,.p-actions #moveBtn,.p-actions #recycleBtn{width:100%;min-width:0}
@media(max-width:980px){#hireTools{gap:3px}#hireFilters{gap:3px}.hire-filter{height:23px;padding:0 5px;font-size:5.9px}#hireSort{height:25px;font-size:6.6px}.staff-rec{font-size:5px;padding:2px 4px}#placementHint{top:54px;max-width:min(590px,80vw)}}
@media(max-width:620px) and (orientation:portrait){#placementHint{top:91px;max-width:95vw}.p-actions{grid-template-columns:1.18fr .9fr .92fr}.p-actions button{letter-spacing:.045em}}
@media(max-height:520px) and (orientation:landscape){#placementHint{top:50px;max-width:70vw}.hire-filter{height:21px}#hireSort{height:23px}}


/* ---------- between-wave service / expansion shop ---------- */
#zoneMenu{position:absolute;right:10px;top:76px;z-index:14;display:none;width:min(340px,38vw);max-height:calc(100dvh - 154px);overflow:auto;border:1px solid rgba(112,145,171,.48);border-radius:14px;background:linear-gradient(165deg,rgba(18,27,36,.985),rgba(7,12,17,.985) 78%);box-shadow:0 18px 46px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.035);color:#eef5fa;overscroll-behavior:contain}
#zoneMenu.show{display:block}
.zone-menu-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;padding:9px 10px;background:rgba(12,18,25,.97);border-bottom:1px solid rgba(112,145,171,.28)}
.zone-menu-title{min-width:0;flex:1}.zone-menu-title b{display:block;font:900 13px/1.05 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.045em;text-transform:uppercase;color:#fff}.zone-menu-title span{display:block;margin-top:3px;font:700 8px/1.1 "Helvetica Neue",Helvetica,Arial,sans-serif;color:#8fa9ba;letter-spacing:.04em}
#zoneMenuClose{width:32px;height:32px;border-radius:8px;border:1px solid #374654;background:#1d2630;color:#dce9f2;font-size:19px;line-height:1}
#zoneMenuBody{padding:7px;display:flex;flex-direction:column;gap:6px}
.zone-empty{padding:16px 10px;text-align:center;border:1px dashed rgba(123,153,176,.28);border-radius:10px;color:#8fa6b6;font:700 9px/1.35 "Helvetica Neue",Helvetica,Arial,sans-serif}
.zone-staff-row{display:grid;grid-template-columns:52px minmax(0,1fr);gap:7px;padding:6px;border:1px solid rgba(102,133,157,.25);border-radius:10px;background:rgba(28,38,48,.76)}
.zone-staff-art{width:52px;height:52px;border-radius:8px;background:radial-gradient(circle at 50% 45%,rgba(90,121,148,.25),rgba(8,12,17,.2));cursor:pointer}
.zone-staff-main{min-width:0}.zone-staff-name{display:flex;align-items:baseline;justify-content:space-between;gap:6px;cursor:pointer}.zone-staff-name b{font:900 10px/1.05 "Helvetica Neue",Helvetica,Arial,sans-serif;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.zone-staff-name span{font:800 7px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;color:#f2c45c;white-space:nowrap}.zone-staff-meta{margin-top:3px;font:700 7.2px/1.15 "Helvetica Neue",Helvetica,Arial,sans-serif;color:#8fa9ba;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.zone-staff-actions{display:grid;grid-template-columns:1fr .78fr;gap:5px;margin-top:6px}.zone-staff-actions button{height:30px;border-radius:7px;border:1px solid #415366;background:#202b36;color:#eef6fb;font:900 7.2px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.045em;text-transform:uppercase}.zone-staff-actions .zone-up.can{border-color:rgba(126,208,140,.55);background:rgba(26,58,38,.9)}.zone-staff-actions .zone-sell{border-color:rgba(228,90,107,.38);background:rgba(63,25,32,.78);color:#ffb7c1}.zone-staff-actions button:disabled{opacity:.38}
@media(max-width:780px){#zoneMenu{right:7px;left:7px;top:auto;bottom:72px;width:auto;max-height:min(54dvh,470px);border-radius:13px}.zone-staff-row{grid-template-columns:48px minmax(0,1fr)}.zone-staff-art{width:48px;height:48px}}
@media(max-height:560px) and (orientation:landscape){#zoneMenu{right:7px;left:auto;top:54px;bottom:64px;width:min(320px,43vw);max-height:none}.zone-menu-head{padding:6px 8px}#zoneMenuBody{padding:5px}.zone-staff-row{padding:4px}.zone-staff-actions button{height:26px}}


/* ============================================================
   ACHIEVEMENTS — persistent career + secret discovery system
   ============================================================ */
.achievement-summary{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 14px;
}
.achievement-stat{
  border:1px solid #284155;background:#0e171f;border-radius:11px;padding:10px;text-align:center;
}
.achievement-stat b{display:block;color:#fff;font-size:18px}
.achievement-stat span{display:block;color:#8fa7ba;font-size:9px;letter-spacing:.07em;text-transform:uppercase;margin-top:3px}
.achievement-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.achievement-card{
  min-width:0;display:grid;grid-template-columns:72px 1fr;gap:11px;align-items:center;
  border:1px solid #2a3d4d;border-radius:13px;padding:10px;background:linear-gradient(145deg,#111a23,#0a1117);
}
.achievement-card.locked{filter:saturate(.45);opacity:.66}
.achievement-card.secret.unlocked{
  border-color:#b88a2d;background:radial-gradient(circle at 15% 20%,rgba(29,174,255,.14),transparent 42%),linear-gradient(145deg,#181710,#0a1117);
  box-shadow:inset 0 0 24px rgba(26,184,255,.06);
}
.achievement-art{
  width:72px;height:72px;object-fit:contain;display:block;border-radius:10px;
}
.achievement-glyph{
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:auto;
  border:2px solid #38566f;background:radial-gradient(circle,#1c3448,#0a1118 72%);
  color:#dff6ff;font:900 17px/1 Helvetica,Arial,sans-serif;letter-spacing:-.03em;
}
.achievement-card.unlocked .achievement-glyph{border-color:#d4a842;color:#ffe08a;box-shadow:0 0 16px rgba(242,180,65,.16)}
.achievement-copy{min-width:0}
.achievement-copy b{display:block;color:#f5f9fc;font-size:12px;line-height:1.2;letter-spacing:.035em}
.achievement-copy p{margin:4px 0 0;color:#91a5b6;font-size:10px;line-height:1.35}
.achievement-copy em{display:block;margin-top:6px;color:#668094;font:800 8.5px/1 Helvetica,Arial,sans-serif;letter-spacing:.10em;text-transform:uppercase;font-style:normal}
.achievement-card.unlocked .achievement-copy em{color:#66d6ff}
.achievement-card.secret.unlocked .achievement-copy b{color:#ffd96c}
.achievement-progress{height:4px;background:#1a2934;border-radius:4px;overflow:hidden;margin-top:7px}
.achievement-progress i{display:block;height:100%;background:linear-gradient(90deg,#2fb4ff,#f2b441);border-radius:inherit}
#achievementToast{
  position:fixed;left:50%;top:max(92px,calc(env(safe-area-inset-top) + 74px));z-index:4000;
  width:min(430px,90vw);display:grid;grid-template-columns:58px 1fr;gap:10px;align-items:center;
  padding:10px 12px;transform:translate(-50%,calc(-9px - 9px));opacity:0;pointer-events:none;
  border:1px solid rgba(242,180,65,.75);border-radius:14px;
  background:linear-gradient(155deg,rgba(18,27,36,.98),rgba(6,11,16,.98));
  box-shadow:0 14px 44px rgba(0,0,0,.58),0 0 25px rgba(47,180,255,.14);
  transition:opacity .18s ease,transform .18s ease;
}
#achievementToast.show{opacity:1;transform:translate(-50%,0)}
#achievementToast img{width:58px;height:58px;object-fit:contain}
#achievementToast .ach-toast-glyph{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:2px solid #d5aa43;
  background:#111a22;color:#ffe29a;font:900 14px/1 Helvetica,Arial,sans-serif;
}
#achievementToast b{display:block;color:#ffd86f;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
#achievementToast strong{display:block;color:#fff;font-size:14px;line-height:1.15;margin-top:3px}
@media(max-width:620px){
  .achievement-grid{grid-template-columns:1fr}
  .achievement-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
  .achievement-card{grid-template-columns:62px 1fr}
  .achievement-art{width:62px;height:62px}
  .achievement-glyph{width:56px;height:56px}
}


/* V6.0 Brian tutorial cards + coaching bubble */
#tutorialOverlay{z-index:3100}
.tutorial-card{position:relative;overflow:visible;width:min(590px,92vw);display:grid;grid-template-columns:132px 1fr;gap:18px;align-items:center;text-align:left;padding:clamp(42px,calc(10vw + 10px),68px) 20px 20px;border-radius:18px;background:linear-gradient(155deg,#202933,#10151b);border:1px solid #44515f;box-shadow:0 24px 70px rgba(0,0,0,.68)}
.tutorial-brian-slot{position:relative;width:132px;height:154px;display:grid;place-items:end center;align-self:center;z-index:2}
.tutorial-brian-slot>img.tutorial-bust{display:block;width:132px;height:154px;object-fit:contain;object-position:center bottom;border-radius:0;background:transparent}
.tutorial-copy{position:relative;z-index:2;min-width:0}.tutorial-copy h1{margin:0;color:#f5f1e7;font-size:22px;line-height:1.05}.tutorial-kicker{font:900 8px/1 Arial,sans-serif;letter-spacing:.18em;color:#f2b441;text-transform:uppercase;text-align:left;margin:0 0 8px}.tutorial-copy p{margin:8px 0 0;color:#d9e1e9;font-size:14px;line-height:1.38}.tutorial-copy p.tutorial-brian-line{padding:8px 10px;border-left:3px solid #e4002b;background:rgba(228,0,43,.08);color:#fff;font-weight:750}.tutorial-copy p.counter{color:#8fd2ff;font-weight:800}.tutorial-copy button{margin-top:14px;height:46px;padding:0 22px;border:0;border-radius:10px;background:#f2b441;color:#12151a;font:900 12px/1 Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.tutorial-subject{display:flex;align-items:center;gap:9px;min-height:72px}.tutorial-subject-thumb-crop{flex:0 0 56px;width:56px;height:72px;overflow:visible;border-radius:8px;background:rgba(6,9,12,.55);border:1px solid rgba(255,255,255,.12)}.tutorial-subject-thumb-crop[hidden]{display:none}.tutorial-subject-thumb{position:static;display:block;width:100%;height:100%;object-fit:contain;object-position:bottom center;max-width:none;border:0;border-radius:0;background:transparent}.tutorial-subject-thumb[hidden]{display:none}
.tutorial-grant{display:flex;align-items:center;gap:8px;margin-top:9px;color:#8ff0a4;font:900 16px/1 Arial,sans-serif}.tutorial-grant[hidden]{display:none}.tutorial-grant img{display:block;width:48px;height:40px;object-fit:contain;background:transparent;border-radius:0}.tutorial-badge{position:absolute;left:3px;bottom:0;width:58px;height:44px;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(0,0,0,.45));background:transparent;border-radius:0}.tutorial-badge[hidden]{display:none}
.tutorial-name-prompt{margin-top:11px;padding:10px;border:1px solid rgba(143,210,255,.28);border-radius:10px;background:rgba(8,14,20,.68)}
.tutorial-name-prompt[hidden]{display:none}
.tutorial-name-prompt label{display:block;margin-bottom:6px;color:#9fdcff;font:900 8px/1 Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.tutorial-name-row{display:flex;gap:7px;align-items:center}
.tutorial-name-row input{min-width:0;flex:1;height:44px;padding:0 11px;border-radius:9px;border:1px solid #405467;background:#0d141b;color:#fff;font:800 14px/1 Arial,sans-serif;outline:none;user-select:text;-webkit-user-select:text}
.tutorial-name-row input:focus{border-color:#72c6f4;box-shadow:0 0 0 2px rgba(114,198,244,.14)}
.tutorial-name-row button{flex:0 0 auto;margin:0;height:44px;padding:0 13px;font-size:9px}
@media(max-width:620px){.tutorial-name-row{align-items:stretch}.tutorial-name-row input{height:42px;font-size:13px}.tutorial-name-row button{height:42px;padding:0 10px;font-size:8px}}
.tutorial-frame-top{position:absolute;z-index:1;left:0;right:0;top:0;width:100%;aspect-ratio:2137/207;min-height:28px;background-repeat:no-repeat;background-position:left top;background-size:auto 100%;opacity:.96;pointer-events:none}
  .tutorial-frame-corner{
    position:absolute;
    z-index:5;
    width:56px;
    height:56px;
    object-fit:contain;
    pointer-events:none;
  }
  .tutorial-frame-corner.tl{ top:-4px; left:-4px; }
  .tutorial-frame-corner.tr{ top:-4px; right:-4px; transform:scaleX(-1); }
  .tutorial-frame-corner.bl{ bottom:-4px; left:-4px; }
  .tutorial-frame-corner.br{ bottom:-4px; right:-4px; transform:scaleX(-1); }

  @media(max-width:620px){
    .tutorial-frame-corner{ width:42px; height:42px; }
  }


#brianCoach{position:absolute;z-index:3060;left:50%;bottom:max(78px,calc(env(safe-area-inset-bottom) + 70px));transform:translate(-50%,14px);display:flex;align-items:center;gap:9px;width:min(470px,88vw);min-height:50px;padding:7px 12px 7px 8px;border:1px solid rgba(242,180,65,.42);border-left:4px solid #e4002b;border-radius:12px;background:rgba(11,16,22,.95);box-shadow:0 12px 36px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .16s ease,transform .16s ease}#brianCoach.show{opacity:1;transform:translate(-50%,0)}#brianCoach img{width:32px;height:40px;object-fit:contain;background:transparent;border-radius:0;flex:0 0 auto}#brianCoach span{font:800 11px/1.3 "Helvetica Neue",Arial,sans-serif;color:#f2f5f7;letter-spacing:.01em}
#tutorialHudBadge{position:fixed;z-index:3150;left:max(10px,env(safe-area-inset-left));right:auto;top:max(68px,calc(env(safe-area-inset-top) + 64px));width:80px;height:80px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 5px 9px rgba(0,0,0,.52));transform-origin:center;transition:opacity .18s ease,transform .22s ease;opacity:1}#tutorialHudBadge[hidden]{display:none}#tutorialHudBadge.fly-in{animation:tutorialBadgeFly .62s cubic-bezier(.2,.8,.2,1)}#tutorialHudBadge.swap-earned{animation:tutorialBadgeEarned .62s cubic-bezier(.2,.8,.2,1)}
@keyframes tutorialBadgeFly{0%{transform:translate(var(--badge-fly-x,0px),var(--badge-fly-y,0px)) scale(1.25) rotate(-8deg);opacity:.18}72%{transform:translate(0,0) scale(1.12) rotate(2deg);opacity:1}100%{transform:none;opacity:1}}
@keyframes tutorialBadgeEarned{0%{transform:scale(1) rotate(0)}45%{transform:scale(1.28) rotate(-7deg)}72%{transform:scale(.94) rotate(3deg)}100%{transform:scale(1) rotate(0)}}
@media(max-width:620px){#tutorialHudBadge{width:64px;height:64px}}
@media(max-width:620px){.tutorial-card{grid-template-columns:92px 1fr;gap:12px;padding:clamp(42px,calc(10vw + 10px),64px) 14px 14px}.tutorial-brian-slot{width:92px;height:118px}.tutorial-brian-slot>img.tutorial-bust{width:92px;height:118px}.tutorial-copy h1{font-size:18px}.tutorial-copy p{font-size:12px}.tutorial-badge{width:48px;height:37px}.tutorial-grant img{width:42px;height:34px}.tutorial-subject{min-height:58px}.tutorial-subject-thumb-crop{flex:0 0 44px;width:44px;height:58px}}
@media(orientation:landscape) and (max-height:520px){.tutorial-card{width:min(650px,94vw);grid-template-columns:92px 1fr;padding-top:clamp(52px,calc(10vw + 10px),76px)}.tutorial-brian-slot{height:96px}.tutorial-brian-slot>img.tutorial-bust{height:96px}.tutorial-copy p{margin-top:5px;line-height:1.25}.tutorial-copy button{height:38px;margin-top:8px}#brianCoach{bottom:58px}}

/* V7.6 — floor-zones spoken lines only: compact map-first caption mode. */
#tutorialOverlay.zone-compact{
  background:rgba(6,8,11,.06);backdrop-filter:none;padding:0 12px max(78px,calc(env(safe-area-inset-bottom) + 70px));place-items:end center;
}
#tutorialOverlay.zone-compact .tutorial-card{
  width:min(720px,calc(100vw - 24px));min-height:0;display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:center;
  padding:8px 10px;border-radius:13px;background:rgba(11,16,22,.78);border:1px solid rgba(242,180,65,.46);border-left:4px solid #e4002b;
  box-shadow:0 10px 30px rgba(0,0,0,.42);overflow:hidden;
}
#tutorialOverlay.zone-compact .tutorial-frame-top,
#tutorialOverlay.zone-compact .tutorial-frame-corner,
#tutorialOverlay.zone-compact .tutorial-version-stamp,
#tutorialOverlay.zone-compact .tutorial-kicker,
#tutorialOverlay.zone-compact .tutorial-subject,
#tutorialOverlay.zone-compact #tutorialMechanic,
#tutorialOverlay.zone-compact #tutorialCounter,
#tutorialOverlay.zone-compact #tutorialGrant,
#tutorialOverlay.zone-compact .tutorial-badge{display:none}
#tutorialOverlay.zone-compact .tutorial-brian-slot{width:48px;height:48px;align-self:center;place-items:center;overflow:hidden;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(6,9,12,.48)}
#tutorialOverlay.zone-compact .tutorial-brian-slot>img.tutorial-bust{width:48px;height:48px;object-fit:cover;object-position:50% 22%;border-radius:50%}
#tutorialOverlay.zone-compact .tutorial-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;min-width:0}
#tutorialOverlay.zone-compact .tutorial-copy p.tutorial-brian-line{grid-column:1;margin:0;padding:5px 8px;background:rgba(228,0,43,.055);font-size:13px;line-height:1.28}
#tutorialOverlay.zone-compact .tutorial-copy button{grid-column:2;margin:0;min-width:78px;height:40px;padding:0 14px;border-radius:9px}
@media(max-width:620px){
  #tutorialOverlay.zone-compact{padding-left:8px;padding-right:8px;padding-bottom:max(72px,calc(env(safe-area-inset-bottom) + 64px))}
  #tutorialOverlay.zone-compact .tutorial-card{width:calc(100vw - 16px);grid-template-columns:44px minmax(0,1fr);gap:8px;padding:7px 8px}
  #tutorialOverlay.zone-compact .tutorial-brian-slot,#tutorialOverlay.zone-compact .tutorial-brian-slot>img.tutorial-bust{width:42px;height:42px}
  #tutorialOverlay.zone-compact .tutorial-copy{gap:8px}
  #tutorialOverlay.zone-compact .tutorial-copy p.tutorial-brian-line{font-size:12px;line-height:1.25;padding:4px 7px}
  #tutorialOverlay.zone-compact .tutorial-copy button{min-width:68px;height:40px;padding:0 10px;font-size:11px}
}


/* V5.5 money sinks + FX controls */
#waveActions{display:flex;align-items:center;gap:5px;flex:0 0 auto}
#repairBtn{height:46px;min-width:116px;padding:0 9px;border-radius:11px;border:1px solid rgba(83,181,113,.48);background:linear-gradient(180deg,rgba(30,91,51,.96),rgba(16,56,31,.96));color:#c8ffd6;font:900 8px/1.05 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.055em;text-transform:uppercase;box-shadow:0 3px 0 #173c24,0 8px 22px rgba(0,0,0,.30);white-space:nowrap}
#repairBtn:not(:disabled):active{transform:translateY(2px);box-shadow:0 1px 0 #173c24,0 4px 12px rgba(0,0,0,.28)}
#repairBtn:disabled{opacity:.38;filter:saturate(.55);box-shadow:0 5px 14px rgba(0,0,0,.18)}
@keyframes repairHealthPulse{0%{transform:scale(1)}35%{transform:scale(1.13);box-shadow:0 0 0 2px rgba(105,235,139,.28),0 0 20px rgba(105,235,139,.38)}100%{transform:scale(1)}}
.chip.hp.repair-pulse{animation:repairHealthPulse .42s ease-out}
.zone-desk-card{padding:8px;border:1px solid rgba(83,181,113,.30);border-radius:9px;background:rgba(20,54,31,.42)}
.zone-desk-card b{display:block;font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:#a9f2bb}.zone-desk-card span{display:block;margin-top:3px;font-size:8px;line-height:1.3;color:#8fa998}
.zone-desk-btn{width:100%;height:34px;margin-top:7px;border-radius:8px;border:1px solid rgba(83,181,113,.45);background:rgba(29,84,47,.78);color:#caffd6;font:900 8px/1 Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase}.zone-desk-btn:disabled{opacity:.42}
.fx-setting-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.fx-setting-row .menu-action.on{border-color:#f2b441;background:#382f17;color:#ffe6a0}.fx-debug-note{margin:8px 0 0;color:#8299aa;font-size:9px;line-height:1.35}
@media(max-width:980px){#waveActions{gap:3px}#repairBtn{height:40px;min-width:100px;padding:0 6px;font-size:7px}}
@media(max-width:620px) and (orientation:portrait){#waveActions{grid-column:2;grid-row:1;gap:2px}#waveActions #waveBtn{height:38px;min-width:96px}#repairBtn{height:38px;min-width:92px;padding:0 4px;font-size:6.3px;letter-spacing:.02em}}
@media(max-width:390px) and (orientation:portrait){#waveActions #waveBtn{min-width:calc(44px + 44px);font-size:7.8px}#repairBtn{min-width:82px;font-size:5.8px}}
@media(orientation:landscape) and (max-height:520px){#waveActions{gap:3px}#waveActions #waveBtn,#repairBtn{height:35px}#repairBtn{min-width:91px;font-size:6.2px}}



/* ========================================================================
   V5.6 SALESPERSON INFORMATION LAYER
   ======================================================================== */
.staff-wrap{position:relative;display:block;width:100%}
.staff-wrap>.staff{width:100%}
.staff{
  height:auto;min-height:112px;overflow:visible;
  padding-top:8px;padding-bottom:8px;padding-right:58px;
}
.staff .txt{height:auto;min-height:94px}
.staff .ability-name{display:block;margin-top:3px;color:#82cfff;font:900 8.5px/1.12 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.075em;text-transform:uppercase;white-space:normal}
.staff .bl{
  display:-webkit-box;font-size:9.5px;line-height:1.25;letter-spacing:.025em;text-transform:none;
  margin-top:4px;white-space:normal;overflow:hidden;text-overflow:clip;-webkit-box-orient:vertical;-webkit-line-clamp:2;
}
.staff-meta{display:flex;flex-wrap:wrap;max-width:none;overflow:visible;margin-top:5px;padding-right:3px}
.staff-meta i{font-size:5.9px}
.staff-counters{display:flex;align-items:center;gap:3px;margin-top:5px;min-height:19px}
.staff-counters .counter-label{font:900 5.8px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.08em;color:#f2c45c;text-transform:uppercase;margin-right:2px;white-space:nowrap}
.counter-glyph{width:18px;height:18px;object-fit:cover;border-radius:4px;border:1px solid rgba(242,180,65,.46);background:#0b1118;box-shadow:0 2px 5px rgba(0,0,0,.25)}
.staff-info{position:absolute;z-index:3;right:5px;top:29px;width:24px;height:24px;border-radius:50%;border:1px solid rgba(112,194,239,.55);background:rgba(15,35,49,.96);color:#a8dcff;font:900 12px/1 Arial,sans-serif;padding:0;display:grid;place-items:center;box-shadow:0 3px 10px rgba(0,0,0,.28)}
.staff-info:focus-visible{outline:2px solid #8ed8ff;outline-offset:2px}
.staff-skin-row{display:flex;align-items:center;gap:5px;margin:5px 4px 0;padding:4px 5px;border-radius:9px;border:1px solid rgba(84,146,184,.25);background:rgba(8,19,27,.72)}
.staff-skin-row::before{content:'SKIN';flex:0 0 auto;color:#80b7d7;font:900 8px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.08em}
.staff-skin-chip,.inspect-skin-chip,.placement-skin-chip{min-height:40px;border-radius:8px;border:1px solid rgba(91,166,208,.42);background:rgba(17,39,53,.94);color:#c9e8f8;font:900 9px/1.05 "Helvetica Neue",Helvetica,Arial,sans-serif;padding:0 9px;white-space:nowrap}
.staff-skin-chip.on,.inspect-skin-chip.on,.placement-skin-chip.on{border-color:#f1b63f;background:rgba(112,76,15,.72);color:#ffd978;box-shadow:inset 0 0 0 1px rgba(255,211,107,.18)}
.staff-skin-chip:focus-visible,.inspect-skin-chip:focus-visible,.placement-skin-chip:focus-visible{outline:2px solid #8ed8ff;outline-offset:2px}
.inspect-skin-row{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:7px}
.inspect-skin-row[hidden]{display:none}
.inspect-skin-row::before{content:'SKIN';color:#80b7d7;font:900 8px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.08em}
#placementSkinRow{display:flex;align-items:center;gap:4px;flex:0 0 auto;pointer-events:auto}
#placementSkinRow[hidden]{display:none}
.placement-skin-chip{min-height:40px;padding:0 8px;font-size:8px}
.staff .pr{right:-48px;bottom:7px}

#placementStrip{display:none;align-items:center;gap:7px;width:100%;padding:7px 8px;border-radius:10px;border:1px solid rgba(92,174,222,.46);background:linear-gradient(145deg,rgba(13,29,41,.98),rgba(7,15,22,.98));box-shadow:0 7px 18px rgba(0,0,0,.3);color:#ecf7ff;pointer-events:none}
#placementStrip.show{display:flex}
#placementStripPortrait{width:28px;height:28px;object-fit:cover;border-radius:6px;border:1px solid rgba(117,195,240,.45);flex:0 0 auto}
.placement-strip-copy{min-width:0;flex:1}.placement-strip-line{display:flex;align-items:baseline;gap:5px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.placement-strip-line b{font:900 9px/1.05 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#fff}.placement-strip-line span{min-width:0;overflow:hidden;text-overflow:ellipsis;color:#80cff9;font:900 7px/1.05 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.045em;text-transform:uppercase}.placement-strip-summary{margin-top:3px;font:700 7.7px/1.18 "Helvetica Neue",Helvetica,Arial,sans-serif;color:#b8cbd8;white-space:normal}.placement-strip-meta{display:flex;align-items:center;gap:6px;margin-top:4px;color:#8fb1c6;font:900 6.4px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.045em;text-transform:uppercase}.placement-strip-strong{display:flex;align-items:center;gap:2px;min-width:0}.placement-strip-strong .counter-glyph{width:14px;height:14px}
#dock.shut #placementStrip.show{display:flex}

#inspectOverlay{z-index:1600;padding:14px;background:rgba(5,9,13,.82);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
#inspectOverlay.show{display:grid}
.inspect-sheet{width:min(760px,94vw);max-height:min(88dvh,820px);overflow:hidden;display:flex;flex-direction:column;text-align:left;border-radius:16px;border:1px solid rgba(101,165,205,.5);background:linear-gradient(160deg,#182431,#0b1219 72%);box-shadow:0 25px 80px rgba(0,0,0,.65)}
.inspect-head{position:relative;display:grid;grid-template-columns:108px minmax(0,1fr) 40px;gap:12px;align-items:center;padding:12px;border-bottom:1px solid rgba(103,151,184,.25);background:radial-gradient(120% 130% at 12% 0%,rgba(74,119,151,.32),rgba(13,22,30,.35) 58%)}
#inspectPortrait{width:108px;height:108px;object-fit:cover;border-radius:12px;border:1px solid rgba(115,190,234,.38);background:#081119}
.inspect-id{min-width:0}.inspect-id>span{display:inline-block;color:#8ed6ff;background:rgba(38,93,128,.23);border:1px solid rgba(78,154,201,.28);border-radius:5px;padding:4px 7px;font:900 7px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.09em;text-transform:uppercase}.inspect-id h2{margin:6px 0 2px;color:#fff;font-size:25px;line-height:1;text-transform:uppercase}.inspect-id #inspectCost{color:#7ed895;font-weight:900;font-size:14px}.inspect-id p{margin:6px 0 0;color:#b8cbd7;font-size:11px;line-height:1.3}.inspect-head #inspectClose{align-self:start;width:38px;height:38px;border-radius:9px;border:1px solid #3b4b59;background:#17222c;color:#dce9f2;font-size:22px}
.inspect-body{overflow:auto;padding:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.inspect-card{min-width:0;padding:9px 10px;border:1px solid rgba(83,121,151,.24);border-radius:11px;background:rgba(8,14,20,.68)}.inspect-card.ability{border-color:rgba(76,154,202,.42);background:rgba(17,37,51,.68)}.inspect-card h3{margin:0 0 5px;color:#8ecff5;font:900 8px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase}.inspect-card p{margin:0;color:#c8d4dc;font-size:10.5px;line-height:1.42}.inspect-card:nth-last-child(-n+2){grid-column:1/-1}
.inspect-counter-list{display:flex;flex-wrap:wrap;gap:5px}.inspect-counter-row{display:flex;align-items:center;gap:5px;padding:4px 6px;border-radius:7px;background:rgba(45,61,73,.58);color:#e8f2f8;font:800 8px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase}.inspect-counter-row .counter-glyph{width:24px;height:24px}
.inspect-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.inspect-tier{min-width:0;border:1px solid rgba(98,135,162,.25);border-radius:9px;background:#0c141b;padding:7px}.inspect-tier h4{margin:0 0 5px;color:#fff;font-size:9px;line-height:1.25;text-transform:uppercase}.inspect-tier h4 span{display:block;margin-top:2px;color:#78d493;font-size:7px}.inspect-tier .p-line{font-size:8.5px;padding:2px 0}.inspect-tier .p-line .k{color:#8ea4b4}.inspect-tier .p-line .v{color:#e8f0f5}
.inspect-combos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.inspect-combo{display:flex;align-items:center;gap:6px;min-width:0;padding:5px;border-radius:8px;background:rgba(18,27,35,.82);border:1px solid rgba(82,124,155,.22)}.inspect-combo img{width:32px;height:32px;border-radius:6px;object-fit:cover}.inspect-combo div{min-width:0}.inspect-combo b{display:block;color:#f2c45c;font-size:7.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inspect-combo span{display:block;color:#9fb2c1;font-size:7px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-counter-row{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:6px}.p-counter-row:empty{display:none}.p-counter-row::before{content:'STRONG VS';color:#e9bc54;font:900 6.5px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.08em;margin-right:2px}.p-counter-row .counter-glyph{width:22px;height:22px}

@media(max-width:620px) and (orientation:portrait){
  .staff{min-height:118px;padding-left:57px;padding-right:52px}.staff .bl{font-size:10px}.staff canvas{top:35px}.staff .pr{right:-42px}.staff-info{right:4px;top:30px}
  #hireBar{max-height:calc(100dvh - 256px)}
  .inspect-sheet{width:96vw;max-height:88dvh}.inspect-head{grid-template-columns:82px minmax(0,1fr) 34px;gap:8px;padding:9px}#inspectPortrait{width:82px;height:82px}.inspect-id h2{font-size:19px}.inspect-body{grid-template-columns:1fr;padding:7px}.inspect-card:nth-last-child(-n+2){grid-column:auto}.inspect-tiers{grid-template-columns:1fr}.inspect-combos{grid-template-columns:1fr}
}
@media(max-width:390px){.staff{min-height:122px}.staff-meta i:nth-child(n+2){display:inline-block}.counter-glyph{width:17px;height:17px}#hireBar{max-height:calc(100dvh - 262px)}}
@media(orientation:landscape) and (max-height:520px){
  .staff{min-height:96px;padding-left:50px}.staff .bl{font-size:9.5px}.staff canvas{top:34px}.staff-counters{margin-top:3px}.staff-counters .counter-glyph{width:15px;height:15px}.staff-meta{display:flex}#hireBar{max-height:calc(100dvh - 146px)}
  #placementStrip.show{padding:5px 7px}.placement-strip-summary,.placement-strip-meta,#placementStripPortrait{display:none}.placement-strip-line{gap:4px}.placement-strip-line b,.placement-strip-line span{font-size:7.4px}.placement-strip-line span::after{content:' · ' attr(data-summary);text-transform:none;color:#b8cbd8;font-weight:700}
  .inspect-sheet{width:min(780px,95vw);max-height:92dvh}.inspect-head{grid-template-columns:70px minmax(0,1fr) 32px;padding:7px}#inspectPortrait{width:70px;height:70px}.inspect-id h2{font-size:18px}.inspect-body{padding:6px;gap:5px}.inspect-card{padding:6px 7px}.inspect-card p{font-size:8.5px}.inspect-tiers .p-line{font-size:7.4px}
}



/* ===== V5.8 HIRE PORTRAIT FRAMING ===== */
.staff{padding-left:78px;min-height:112px}
.staff canvas{position:absolute;left:8px;right:auto;top:50%;transform:translateY(-50%);width:60px;height:80px;border-radius:9px;object-fit:initial;display:block;background:linear-gradient(180deg,rgba(32,44,55,.54),rgba(12,18,24,.30));}
.staff .txt{min-height:80px;display:flex;flex-direction:column;justify-content:center}
#placementStripPortrait{display:block;width:24px;height:32px;flex:0 0 24px;border-radius:5px;border:1px solid rgba(117,195,240,.45);background:#081119}
#inspectPortrait{display:block;width:90px;height:120px;border-radius:11px;border:1px solid rgba(115,190,234,.38);background:#081119}
.inspect-head{grid-template-columns:90px minmax(0,1fr) auto}
#pArt{width:120px;height:160px;flex:0 0 auto;border-radius:12px}
@media (max-width:620px) and (orientation:portrait){
  .staff{padding-left:78px}.staff canvas{width:60px;height:80px}
  #inspectPortrait{width:72px;height:96px}.inspect-head{grid-template-columns:72px minmax(0,1fr) auto}
  #pArt{width:105px;height:140px}
}
@media (orientation:landscape) and (max-height:520px){
  .staff{padding-left:78px}.staff canvas{width:60px;height:80px}
  #inspectPortrait{width:66px;height:calc(44px + 44px)}.inspect-head{grid-template-columns:66px minmax(0,1fr) auto}
  #pArt{width:96px;height:128px}
  /* V5.6 intentionally reduces the placement strip to text-only in short landscape. */
  #placementStripPortrait{display:none}
}



/* ========================================================================
   V8.2.1 MATCHUP CLARITY + BALANCE HOTFIX
   Readability first: counter information is text-forward and tutorial-led.
   ======================================================================== */
.tutorial-card{max-height:92dvh;overflow:auto}
.tutorial-matchup{margin-top:11px;padding:10px;border-radius:11px;border:2px solid rgba(242,180,65,.72);background:linear-gradient(145deg,rgba(73,54,18,.72),rgba(20,26,32,.88));box-shadow:inset 0 0 0 1px rgba(255,220,135,.08)}
.tutorial-matchup[hidden]{display:none}
.tutorial-matchup-title{color:#ffd978;font:950 10px/1.05 "Helvetica Neue",Arial,sans-serif;letter-spacing:.11em;text-transform:uppercase;margin-bottom:8px}
.tutorial-matchup-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.tutorial-matchup-pick{min-width:0;padding:7px 8px;border-radius:8px;border:1px solid rgba(112,194,239,.36);background:rgba(10,21,29,.88)}
.tutorial-matchup-pick strong{display:block;color:#fff;font:950 12px/1.08 "Helvetica Neue",Arial,sans-serif;text-transform:uppercase;letter-spacing:.025em}
.tutorial-matchup-pick span{display:block;margin-top:3px;color:#a9d9f4;font:750 9.5px/1.25 "Helvetica Neue",Arial,sans-serif}
.tutorial-matchup-none{grid-column:1/-1;color:#dbe7ef;font:800 11px/1.35 "Helvetica Neue",Arial,sans-serif;padding:6px 2px}
#tutorialOverlay.zone-compact .tutorial-matchup{display:none}

.staff-counters{gap:5px;min-height:22px;flex-wrap:wrap}
.staff-counters .counter-label{font-size:7.5px;letter-spacing:.07em}
.staff-counter-name{display:inline-flex;align-items:center;min-height:20px;padding:3px 6px;border-radius:6px;border:1px solid rgba(242,180,65,.42);background:rgba(83,63,21,.34);color:#ffe189;font:900 8.2px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:.025em;text-transform:uppercase;white-space:nowrap}
.staff.matchup-recommended{border-color:#ffd15a;border-left-color:#ffd15a;box-shadow:0 0 0 2px rgba(242,180,65,.24),0 0 22px rgba(242,180,65,.24)}
.matchup-rec{position:absolute;z-index:4;right:5px;top:5px;max-width:116px;padding:4px 6px;border-radius:6px;background:#f2b441;color:#12151a;font:950 7px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:.055em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 3px 8px rgba(0,0,0,.28)}
.staff.matchup-recommended .staff-rec{display:none}

#inspectCountersCard{grid-column:1/-1;border:2px solid rgba(242,180,65,.55);background:linear-gradient(145deg,rgba(70,52,17,.43),rgba(9,16,22,.78))}
#inspectCountersCard h3{color:#ffd978;font-size:10.5px}
.inspect-counter-list{gap:9px}
.inspect-counter-row{gap:10px;padding:8px 11px;border-radius:10px;color:#fff;font-size:13px;letter-spacing:.025em;background:rgba(29,45,57,.92);border:1px solid rgba(242,180,65,.25)}
.inspect-counter-row .counter-glyph{width:46px;height:46px;border-radius:8px}
.p-counter-row{gap:7px;margin-top:9px}
.p-counter-row::before{font-size:8.5px}
.p-counter-row .inspect-counter-row{font-size:10.5px;padding:5px 8px;gap:7px}
.p-counter-row .inspect-counter-row .counter-glyph{width:34px;height:34px}
.placement-strip-strong{gap:4px;flex-wrap:wrap}.placement-strip-strong .staff-counter-name{font-size:7px;min-height:18px;padding:2px 5px}

.menu-matchup-guide{margin-top:12px;padding:11px;border:1px solid rgba(242,180,65,.36);border-radius:12px;background:rgba(25,20,10,.38)}
.menu-matchup-guide>h3{margin:0 0 8px;color:#ffd978;font-size:12px;letter-spacing:.07em;text-transform:uppercase}
.menu-matchup-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.menu-matchup-row{padding:8px;border-radius:8px;background:rgba(9,16,22,.88);border:1px solid rgba(84,129,158,.26)}
.menu-matchup-row b{display:block;color:#fff;font-size:11px;text-transform:uppercase}
.menu-matchup-row span{display:block;margin-top:3px;color:#9fd7f4;font-size:9.5px;line-height:1.3}

@media(max-width:620px){
  .tutorial-matchup-list,.menu-matchup-grid{grid-template-columns:1fr}
  .tutorial-matchup-pick strong{font-size:11px}.tutorial-matchup-pick span{font-size:9px}
  .inspect-counter-row{font-size:12px}.inspect-counter-row .counter-glyph{width:42px;height:42px}
}


/* V8.2.9 one-time What's New card — existing approved character portraits only. */
#patch829Backdrop{position:fixed;inset:0;z-index:5200;display:grid;place-items:center;padding:18px;background:rgba(3,7,11,.78);backdrop-filter:blur(7px)}
#patch829Backdrop[hidden]{display:none}
.patch829{width:min(540px,94vw);max-height:min(720px,90vh);overflow:auto;border:1px solid rgba(85,197,255,.58);border-radius:22px;background:linear-gradient(155deg,rgba(20,30,40,.985),rgba(6,11,16,.99));box-shadow:0 24px 80px rgba(0,0,0,.72),0 0 36px rgba(50,180,255,.18);padding:18px}
.patch829-kicker{color:#79ddff;font:900 10px/1 Helvetica,Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;text-align:center}
.patch829 h2{margin:8px 0 4px;text-align:center;color:#fff;font:900 clamp(24px,7vw,38px)/.98 Helvetica,Arial,sans-serif;letter-spacing:-.035em}
.patch829-sub{text-align:center;margin:0 0 15px;color:#aabcca;font:700 12px/1.35 Helvetica,Arial,sans-serif}
.patch829-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.patch829-card{overflow:hidden;border:1px solid rgba(255,255,255,.13);border-radius:16px;background:rgba(255,255,255,.035)}
.patch829-card img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#0b1218}
.patch829-copy{padding:10px}
.patch829-copy b{display:block;color:#fff;font:900 16px/1 Helvetica,Arial,sans-serif;letter-spacing:.04em}
.patch829-copy span{display:block;margin-top:5px;color:#79ddff;font:850 9px/1 Helvetica,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.patch829-note{margin:14px 0 0;text-align:center;color:#8ea5b6;font:700 10.5px/1.4 Helvetica,Arial,sans-serif}
.patch829 button{display:block;width:100%;margin-top:14px;padding:13px;border:0;border-radius:13px;background:linear-gradient(135deg,#2fb4ff,#217fd8);color:#fff;font:900 12px/1 Helvetica,Arial,sans-serif;letter-spacing:.10em;text-transform:uppercase;box-shadow:0 8px 24px rgba(47,180,255,.22)}
@media(max-width:420px){.patch829{padding:14px}.patch829-grid{gap:8px}.patch829-copy{padding:8px}.patch829-copy b{font-size:14px}}




/* V8.2.20 — exact-reference menu header.
   The accepted user-supplied screenshot header is used verbatim as a visual
   overlay. The production menu artwork underneath remains unchanged. */
.menu-stage::before{
  content:"";
  display:block;
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:25.390625%; /* 390 / 1536 */
  z-index:10;
  pointer-events:none;
  background:url("../assets/menu_header_exact_v82120.png") top center / 100% 100% no-repeat;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 94%,rgba(0,0,0,.92) 97%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 94%,rgba(0,0,0,.92) 97%,transparent 100%);
}
.menu-stage::after{display:none}

/* The screenshot supplies the visuals. These remain real, accessible,
   full-size tap targets above it with no duplicate rendered chrome/text. */
#menuLeaderboard,#menuVisualPacks{
  position:absolute;
  top:.25%;
  height:6.45%;
  z-index:12;
  min-width:0;
  max-width:none;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  filter:none;
  clip-path:none;
  outline:none;
  color:transparent;
  text-shadow:none;
  overflow:visible;
  cursor:pointer;
  touch-action:manipulation;
}
#menuLeaderboard{
  left:.55%;
  right:auto;
  width:38.8%;
}
#menuVisualPacks{
  right:.55%;
  left:auto;
  width:38.8%;
}
#menuLeaderboard::before,#menuLeaderboard::after,
#menuVisualPacks::before,#menuVisualPacks::after{
  display:none;
  content:none;
}
#menuLeaderboard span,#menuLeaderboard strong,
#menuVisualPacks span,#menuVisualPacks strong{
  display:none;
}

/* Only if a non-Original global visual pack is selected do we replace the
   baked ORIGINAL value with the live pack label. Original stays pixel-exact
   to the accepted reference. */
#menuVisualPacks.pack-name-override::after{
  content:"";
  display:block;
  position:absolute;
  z-index:1;
  right:4.5%;
  top:42%;
  width:72%;
  height:42%;
  background:linear-gradient(90deg,rgba(6,22,35,0),rgba(7,28,44,.96) 18%,rgba(8,31,49,.98) 100%);
  pointer-events:none;
}
#menuVisualPacks.pack-name-override strong{
  display:flex;
  position:absolute;
  z-index:2;
  right:5%;
  top:43%;
  width:72%;
  height:39%;
  align-items:center;
  justify-content:flex-end;
  color:#fff;
  font:900 clamp(6px,1.25vw,11px)/1.05 "Helvetica Neue",Arial,sans-serif;
  letter-spacing:.035em;
  text-transform:uppercase;
  text-align:right;
  white-space:normal;
  overflow:hidden;
  text-shadow:0 2px 3px rgba(0,0,0,.8);
}

/* Keep touch feedback subtle without disturbing the exact header artwork. */
#menuLeaderboard:active,#menuVisualPacks:active{opacity:.88;transform:none}
#menuLeaderboard:focus-visible,#menuVisualPacks:focus-visible{
  outline:2px solid rgba(126,210,255,.9);
  outline-offset:-3px;
}



/* V8.2.21 — two-map production selection + leaderboard tabs. */
.map-select-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0 4px}
.map-choice{appearance:none;position:relative;min-height:142px;padding:17px 16px;text-align:left;border-radius:15px;border:1px solid rgba(76,154,205,.48);background:linear-gradient(155deg,#122231,#09131c 72%);color:#edf8ff;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 10px 26px rgba(0,0,0,.26);cursor:pointer}
.map-choice.current{border-color:rgba(242,180,65,.72);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 0 1px rgba(242,180,65,.18),0 10px 26px rgba(0,0,0,.28)}
.map-choice:active{transform:translateY(2px)}
.map-choice .map-num{display:block;color:#75d0ff;font:900 10px/1 Helvetica,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px}
.map-choice.current .map-num{color:#ffd66d}
.map-choice b{display:block;color:#fff;font-size:19px;letter-spacing:.035em;text-transform:uppercase;line-height:1.05}
.map-choice span{display:block;color:#9fb3c4;font-size:11px;line-height:1.4;margin-top:7px}
.map-choice em{display:inline-block;margin-top:11px;padding:5px 8px;border-radius:7px;background:rgba(94,190,126,.12);border:1px solid rgba(94,190,126,.28);color:#90e1a4;font:900 8px/1 Helvetica,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;font-style:normal}
.map-choice.current::after{content:'CURRENT';position:absolute;right:10px;top:10px;padding:4px 6px;border-radius:6px;background:rgba(242,180,65,.14);border:1px solid rgba(242,180,65,.30);color:#ffd66d;font:900 7px/1 Helvetica,Arial,sans-serif;letter-spacing:.09em}
.leaderboard-map-tabs{display:flex;gap:8px;margin:0 0 12px}
.leaderboard-map-tab{flex:1;height:44px;border-radius:10px;border:1px solid #2e4f68;background:#101b25;color:#a8bed0;font:900 10px/1 Helvetica,Arial,sans-serif;letter-spacing:.09em;text-transform:uppercase;cursor:pointer}
.leaderboard-map-tab.on{border-color:#f2b441;background:#282216;color:#ffd76d;box-shadow:0 0 0 1px rgba(242,180,65,.25)}
.leaderboard-map-tab:active{transform:translateY(1px)}
.map-select-note{margin-top:10px;color:#71889b;font-size:10px;line-height:1.45}
@media(max-width:560px){.map-select-grid{grid-template-columns:1fr}.map-choice{min-height:118px}}

}