/* ============ ASHFALL — Last Refuge ============ */
:root{
  --bg:#0e0c0a; --bg2:#161310; --panel:#1c1914; --panel2:#27221a; --line:#352f24;  /* warm wasteland greys (was cool blue-grey) — aligns chrome with the parchment text + rust/amber accents */
  --txt:#e7e3d8; --dim:#9aa3ad; --muted:#6b7480;
  --acc:#e0533a; --acc2:#f0c869; --good:#5fb878; --bad:#d8584e; --info:#4f9bd9;
  --cyber:#39d6e8; --cyber2:#7af0ff;
  --food:#e0a24a; --wood:#7fae5a; --steel:#9aa6b2; --crystal:#7ad0e6;
  --r:12px; --sh:0 6px 24px rgba(0,0,0,.45);
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden}
body{
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  background:var(--bg);color:var(--txt);
  -webkit-user-select:none;user-select:none;overscroll-behavior:none;
}
button{font-family:inherit;cursor:pointer;color:inherit;border:none;background:none}
input,select{font-family:inherit;font-size:16px}
.hidden{display:none!important}
.dim{color:var(--dim)}.muted{color:var(--muted)}.small{font-size:12px}
.good{color:var(--good)}.bad{color:var(--bad)}.acc{color:var(--acc2)}
.center{text-align:center}.row{display:flex;align-items:center;gap:8px}
.spread{display:flex;align-items:center;justify-content:space-between;gap:8px}
.wrap{flex-wrap:wrap}
.grow{flex:1}

/* ============ AUTH ============ */
.auth{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}
.auth-bg{position:absolute;inset:0;overflow:hidden;background:
  radial-gradient(120% 80% at 50% -10%,#23262d 0%,#0d0f12 60%),
  repeating-linear-gradient(45deg,rgba(224,83,58,.03) 0 2px,transparent 2px 16px)}
.auth-bg-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;filter:saturate(.85) brightness(.72)}
.auth-bg::after{content:'';position:absolute;inset:0;background:radial-gradient(120% 95% at 50% 0%,rgba(13,15,18,.5),rgba(8,9,11,.9))}
@media (prefers-reduced-motion:reduce){.auth-bg-vid{display:none}}
.auth-card{position:relative;width:100%;max-width:380px;background:linear-gradient(180deg,#191d24,#12151a);
  border:1px solid var(--line);border-radius:18px;padding:26px 22px;box-shadow:var(--sh)}
.logo{text-align:center;margin-bottom:18px;filter:drop-shadow(0 0 22px rgba(57,214,232,.18))}
.logo-mark{font-size:46px;line-height:1;filter:drop-shadow(0 0 16px rgba(57,214,232,.55))}
.logo h1{margin:6px 0 0;font-size:38px;letter-spacing:8px;font-weight:900;
  background:linear-gradient(180deg,#f3d98e,#d98a3d);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo-sub{color:var(--cyber);letter-spacing:5px;font-size:12px;margin-top:2px;text-shadow:0 0 12px rgba(57,214,232,.4)}
.auth-tabs{display:flex;gap:6px;background:#0e1116;border-radius:10px;padding:4px;margin-bottom:16px}
.atab{flex:1;padding:10px;border-radius:8px;color:var(--dim);font-weight:600;font-size:14px}
.atab.on{background:var(--panel2);color:var(--txt)}
.auth-form label{display:block;margin-bottom:12px;font-size:13px;color:var(--dim)}
.auth-form input,.auth-form select{width:100%;margin-top:5px;padding:12px;border-radius:10px;
  background:#0e1116;border:1px solid var(--line);color:var(--txt)}
.auth-form .hint{font-size:11px;color:var(--muted);margin-top:4px;display:block}
.auth-err{color:var(--bad);font-size:13px;min-height:18px;margin-bottom:6px;text-align:center}
.auth-foot{margin-top:16px;text-align:center;font-size:11px;color:var(--muted);line-height:1.5}
.reg-only{display:none}
.auth.mode-register .reg-only{display:block}

/* ============ APP SHELL ============ */
.app{position:relative;display:flex;flex-direction:column;height:100%}
.topbar{display:flex;align-items:center;gap:7px;padding:calc(var(--safe-t) + 5px) 8px 5px;
  background:linear-gradient(180deg,#15110b,#0f0c08);border-bottom:1px solid #2e2418;z-index:12}
.avatar-btn{flex:0 0 auto;width:48px;height:48px;position:relative}
.avatar-frame{display:block;width:48px;height:48px;border-radius:12px;overflow:hidden;position:relative;
  background:radial-gradient(70% 70% at 50% 25%,#3a2e18,#15110b);border:1.5px solid #c89a44;box-shadow:0 0 8px rgba(200,146,63,.25)}
.avatar-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 14%}
.avatar-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--acc2)}
.avatar-frame img[src]{z-index:1}
.res-bar{display:flex;gap:5px;flex:1;min-width:0}
/* world map: translucent overlay header (no black bar, no resource bar) so the map fills the view */
.app.on-world .topbar{position:absolute;top:0;left:0;right:0;background:linear-gradient(180deg,rgba(14,12,9,.55),rgba(14,12,9,0) 92%);border-bottom:none;pointer-events:none;z-index:21}
.app.on-world .topbar .avatar-btn{pointer-events:auto}
.app.on-world .res-bar{display:none}
.app.on-world .legend{display:none}
.res{flex:1;display:flex;align-items:center;gap:3px;background:#15110b;border:1px solid #322817;
  border-radius:8px;padding:5px 5px;font-size:12px;font-weight:700;min-width:0}
.res .ic{font-size:13px}
.res .v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res.pow{color:var(--acc2)}.res.food{color:var(--food)}.res.wood{color:var(--wood)}.res.steel{color:var(--steel)}.res.crystal{color:var(--crystal)}
.icon-btn{flex:0 0 auto;position:relative;font-size:18px;background:#15110b;border:1px solid #322817;border-radius:9px;width:38px;height:38px}
.badge{position:absolute;top:-6px;right:-6px;background:var(--acc);color:#fff;font-size:10px;font-weight:800;
  min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px;z-index:2}
.screen{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;position:relative}

/* side navigation columns */
.sidenav{position:absolute;z-index:22;display:flex;flex-direction:column;gap:9px}
.sidenav.left{left:6px;bottom:calc(86px + var(--safe-b));flex-direction:column-reverse}   /* bottom-anchored: Tasks at the bottom */
.sidenav.high{left:6px;top:calc(var(--safe-t) + 132px)}                                     /* upper-left VS/season/ranks cluster (right edge stays clear for radar + cars) */
.sidebtn{position:relative;width:50px;height:50px;border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  background:linear-gradient(180deg,rgba(30,24,14,.92),rgba(16,12,8,.92));border:1px solid #4a3a1e;box-shadow:0 2px 7px rgba(0,0,0,.5)}
.sidebtn span{font-size:21px;line-height:1}
.sidebtn i{font-size:8.5px;font-style:normal;font-weight:700;color:#cdbb92;letter-spacing:.3px}
/* themed icon art inside a sidebtn (Events / Shop) — transparent cutout over the button, emoji fallback */
.sidebtn .sb-ic{position:relative;width:31px;height:31px;display:flex;align-items:center;justify-content:center}
.sidebtn .sb-ic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
.sidebtn .sb-ic b{font-size:21px;font-weight:400}
.sidebtn:active{transform:scale(.93)}
.sidebtn.on{border-color:var(--acc2);box-shadow:0 0 12px rgba(240,200,105,.3)}
/* corner + flip buttons */
.corner-btn{position:absolute;bottom:calc(12px + var(--safe-b));z-index:24;width:66px;height:66px;border-radius:18px;
  overflow:hidden;display:flex;align-items:flex-end;justify-content:center;padding:0;
  background:#11141a;border:2px solid #c89a44;box-shadow:0 5px 14px rgba(0,0,0,.55), inset 0 0 22px rgba(0,0,0,.4)}
.corner-btn .cb-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%;z-index:1}
.corner-btn .cb-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:30px;z-index:0}
.corner-btn i{position:relative;z-index:2;width:100%;text-align:center;font-size:9.5px;font-style:normal;font-weight:800;color:#fff;letter-spacing:.04em;
  padding:7px 0 4px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.82));text-shadow:0 1px 2px rgba(0,0,0,.9)}
.corner-btn:active{transform:scale(.93)}
.heroes-btn{left:10px;border-color:#d8a93f;box-shadow:0 5px 14px rgba(0,0,0,.55),0 0 16px rgba(216,169,63,.35)}
.heroes-btn{background:radial-gradient(120% 90% at 50% 12%,#26201a,#11141a)}   /* warm backing for the transparent hero portrait */
.heroes-btn .cb-fallback{display:none}                                       /* hero art is bg-removed (transparent) — don't let the 🦸 emoji bleed through it */
.flip-btn{right:10px;border-color:#39a6d6;box-shadow:0 5px 14px rgba(0,0,0,.55),0 0 16px rgba(57,166,214,.35)}
/* see-through chat strip: a translucent shade spanning the whole bottom, flowing behind the
   Heroes/World corner buttons (which sit on top at the ends); shows the last 2 messages */
.chat-strip{position:absolute;left:8px;right:8px;bottom:calc(16px + var(--safe-b));z-index:23;min-height:42px;
  display:flex;align-items:center;gap:7px;padding:5px 80px;border-radius:15px;
  background:linear-gradient(90deg,rgba(9,11,15,.08),rgba(9,11,15,.4) 15%,rgba(9,11,15,.4) 85%,rgba(9,11,15,.08));border:none;color:#d6dbe1;font-size:11.5px;text-align:left;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.chat-strip .cs-ic{font-size:15px;flex:0 0 auto;align-self:flex-start;margin-top:1px}
.chat-strip .cs-txt{flex:1;min-width:0;overflow:hidden}
.chat-strip .cs-txt .cl{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.45}
.chat-strip .cs-txt .cl b{color:#7fc8ff;font-weight:700}
.chat-strip .badge{top:-6px;right:8px}
/* DWS-style march focus panel: pick 1 of your 4 cars, see its power/heroes/capacity/ETA vs the target, then march */
.mpanel-wrap{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding-right:74px;
  background:radial-gradient(ellipse at 45% 50%,rgba(9,11,15,.32),rgba(9,11,15,.8));animation:mpFade .16s ease}
@keyframes mpFade{from{opacity:0}to{opacity:1}}
.mpanel{width:min(78vw,300px);background:linear-gradient(180deg,rgba(30,25,21,.97),rgba(18,16,14,.985));
  border:1px solid var(--line);border-radius:18px;padding:14px 14px 16px;box-shadow:0 18px 50px rgba(0,0,0,.6);
  display:flex;flex-direction:column;gap:10px;animation:mpPop .18s cubic-bezier(.2,1.15,.4,1)}
@keyframes mpPop{from{transform:scale(.9);opacity:.4}to{transform:scale(1);opacity:1}}
.mp-heroes{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.mp-hero{width:50px;height:60px;border-radius:11px;overflow:hidden;position:relative;background:#0e1116;border:1px solid var(--line);flex:0 0 auto}
.mp-hero img{width:100%;height:100%;object-fit:cover;object-position:top}
.mp-hero span{position:absolute;bottom:0;left:0;right:0;font-size:9px;text-align:center;background:rgba(0,0,0,.62);padding:1px 0;font-weight:700}
.mp-caprow{display:flex;justify-content:space-between;font-size:12px;margin-top:2px}
.mp-caprow b{color:#ffd479}
.mp-capbar{height:8px;border-radius:5px;background:#0e1116;border:1px solid var(--line);overflow:hidden}
.mp-capbar i{display:block;height:100%;background:linear-gradient(90deg,#5fb96a,#9ad36a);border-radius:5px;transition:width .2s}
.mp-vs{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:700}
.mp-vs .mp-pow{color:#ff8a5c}
.mp-vs .mp-vstxt{color:#8a8a8a;font-size:11px}
.mp-vs .mp-tgt{color:#cfd4da}
.mp-eta{text-align:center;font-size:12px;color:#9aa4ad}
.mp-go{width:100%}
.mp-auto{width:100%;padding:7px;border-radius:10px;background:#0e1116;border:1px solid var(--line);color:#9aa4ad;font-size:12px;font-weight:600}
.mp-auto.on{border-color:#5fb96a;color:#bfe6c4;background:linear-gradient(180deg,#1e2a1e,#141d14)}
.mp-auto b{font-weight:800}
.mp-cars{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:9px}
.mp-car{width:58px;height:58px;border-radius:13px;background:linear-gradient(180deg,rgba(30,25,21,.95),rgba(16,14,12,.97));
  border:2px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;position:relative;color:var(--txt)}
.mp-car img{width:40px;height:34px;object-fit:contain}
.mp-car b{font-size:10px;opacity:.85}
.mp-car.on{border-color:var(--rig,#ffd479);box-shadow:0 0 0 2px var(--rig,#ffd479) inset,0 6px 16px rgba(0,0,0,.5)}
.mp-car.busy{opacity:.42;filter:grayscale(.7)}
.app.mpanel-on .heroes-btn,.app.mpanel-on .util-rail,.app.mpanel-on .rig-dock,.app.mpanel-on .chat-strip,
.app.mpanel-on .flip-btn,.app.mpanel-on .legend,.app.mpanel-on .topbar{display:none!important}
/* Step-1 radial: round quick-action buttons fanned over the tapped tile */
.radial-wrap{position:fixed;inset:0;z-index:58}
.radial{position:fixed;display:flex;gap:9px;align-items:flex-end;animation:radPop .15s cubic-bezier(.2,1.3,.5,1)}
@keyframes radPop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.rad-btn{display:flex;flex-direction:column;align-items:center;gap:3px;width:60px;padding:8px 4px 6px;border-radius:14px;
  background:linear-gradient(180deg,rgba(34,28,23,.97),rgba(20,17,14,.98));border:1px solid var(--line);color:var(--txt);
  box-shadow:0 8px 22px rgba(0,0,0,.5)}
.rad-btn .rad-ic{font-size:22px;line-height:1}
.rad-btn .rad-lb{font-size:10px;font-weight:700;opacity:.9}
.rad-btn:active{transform:translateY(1px) scale(.96)}
.rad-btn.atk{border-color:#c8553d;background:linear-gradient(180deg,#5a2a20,#3a1c16)}
.rad-btn.atk .rad-ic{filter:drop-shadow(0 0 4px rgba(240,120,80,.6))}
.rad-btn.go{border-color:#3d7fc8}
.rad-btn.info{opacity:.92}
.rad-dot{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:2px solid #ffd479;
  box-shadow:0 0 0 2px rgba(0,0,0,.4),0 0 14px rgba(255,212,121,.55);animation:radDot 1.1s ease-in-out infinite}
@keyframes radDot{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.18);opacity:.55}}
/* march-panel faction badge */
.mp-fac{text-align:center;font-size:11px;font-weight:700;color:#ffd479;margin:-2px 0 0}
/* car crew setup */
.crew-status{font-size:12.5px;padding:7px 10px;border-radius:9px;background:#0e1116;border:1px solid var(--line);margin-bottom:8px}
.crew-status .good{color:#7fd29a}
.crew-sub{font-size:11px;color:#9aa4ad;margin:2px 2px 5px}
.chip-row{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:6px 10px;border-radius:999px;background:#0e1116;border:1px solid var(--line);color:var(--txt);font-size:11.5px;font-weight:600}
.chip.on{background:linear-gradient(180deg,#3a3026,#241d16);border-color:#ffd479;color:#ffd479}
.chip.sug{border-color:#7fd29a}
.crew-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
.crewh{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 5px;border-radius:12px;background:linear-gradient(180deg,rgba(30,25,21,.9),rgba(18,16,14,.95));border:1px solid var(--line);color:var(--txt);text-align:center}
.crewh.on{border-color:#ffd479;box-shadow:0 0 0 1px #ffd479 inset}
.crewh .ch-img{position:relative;width:54px;height:54px;border-radius:10px;overflow:hidden;background:#0e1116}
.crewh .ch-img img{width:100%;height:100%;object-fit:cover;object-position:top}
.crewh .ch-num{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#ffd479;color:#1a140d;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;font-style:normal}
.crewh.busy{opacity:.5}
.crewh .ch-car{position:absolute;top:1px;right:1px;font-size:10px;font-weight:700;font-style:normal;background:rgba(13,16,20,.85);border-radius:6px;padding:0 3px;color:#9fd0f5}
.crewh .ch-n{font-size:11px;font-weight:700;line-height:1.15}
.crewh .ch-f{font-size:9.5px;color:#9aa4ad;text-transform:capitalize}
/* car Workshop (Vehicle Modification) */
.mod-cost{display:flex;gap:16px;justify-content:center;align-items:center;margin:8px 0 2px;font-size:14px;font-weight:800;color:#d8dde3}
.mod-cost .lack{color:#e0653a}
.mod-cost img{vertical-align:middle}
.soon-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.soon-card{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px;border-radius:12px;background:var(--panel2);border:1px dashed var(--line);font-size:22px;opacity:.72}
.soon-card b{font-size:12px;color:#cfd4da;font-weight:800}
.soon-card i{font-size:10px;color:#8a93a0;font-style:normal;text-transform:uppercase;letter-spacing:.04em}
.parts-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.part-cell{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:9px 9px 8px;display:flex;flex-direction:column;gap:4px}
.part-top{display:flex;align-items:center;gap:7px}
.part-ic{font-size:24px;line-height:1}
.part-btns{display:flex;gap:6px;margin-top:2px}
.part-btns .btn-2{flex:1;padding:6px 4px!important;font-size:12px}
.part-btns .disabled{opacity:.4}
/* shop: compact 4-column tiles */
.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:8px}
.shop-tile{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:3px;padding:9px 4px 7px;min-height:86px;
  border-radius:12px;background:linear-gradient(180deg,rgba(30,25,21,.92),rgba(18,16,14,.96));border:1px solid var(--line);color:var(--txt);text-align:center}
.shop-tile:active{transform:translateY(1px) scale(.97)}
.shop-tile:disabled{opacity:.45}
.shop-tile.q1{border-color:#8b95a1}.shop-tile.q2{border-color:#6ec25a}.shop-tile.q3{border-color:#5aa6e6}.shop-tile.q4{border-color:#b06ed0}.shop-tile.q5{border-color:#eaa24a}
.shop-tile .st-ic{font-size:25px;line-height:1}
.shop-tile .st-n{font-size:9.5px;font-weight:600;line-height:1.12;color:#cfd4da}
.shop-tile .st-p{font-size:10px;font-weight:800;color:#ffd479;background:#0e1116;border-radius:7px;padding:2px 4px;width:100%}
/* on full sub-screens: hide base/world-only controls, dock the flipper top-right */
.app.subscreen .heroes-btn,.app.subscreen .chat-strip,.app.subscreen .util-rail{display:none}
.app.subscreen .flip-btn{bottom:auto;top:calc(var(--safe-t) + 92px);right:8px;width:50px;height:50px}
.app.subscreen .flip-btn span{font-size:20px}
/* persistent bottom-right utility rail (from bottom: bag, mail, alliance) */
.util-rail{position:absolute;right:14px;bottom:calc(90px + var(--safe-b));z-index:24;display:flex;flex-direction:column-reverse;gap:9px}
.util-btn{position:relative;width:48px;height:48px;border-radius:50%;border:2px solid #3a4150;background:rgba(14,17,22,.92);
  display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 3px 9px rgba(0,0,0,.5);overflow:hidden}
.util-btn:active{transform:scale(.92)}
.util-btn.util-hero{border-color:#d8a93f;box-shadow:0 3px 9px rgba(0,0,0,.5),0 0 12px rgba(216,169,63,.4)}
.util-btn .cb-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 16%}
.util-btn .cb-fallback{position:relative;z-index:0;font-size:22px}
.util-btn .ub-art{position:absolute;inset:5px;width:calc(100% - 10px);height:calc(100% - 10px);object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.util-btn .ub-emoji{position:relative;font-size:22px}
.util-btn .badge{top:-4px;right:-2px}
/* car dock — a vertical column of car boxes above the right rail (bag/mail/alliance) */
.rig-dock{position:absolute;right:14px;bottom:calc(258px + var(--safe-b));z-index:24;display:none;flex-direction:column-reverse;gap:7px;align-items:center}
.app.on-world .rig-dock{display:flex}
.app.subscreen .rig-dock{display:none}
/* zoomed far out: clear the rails so the bare map + top-right radar read cleanly */
.app.map-far .sidenav,.app.map-far .rig-dock,.app.map-far .util-rail,.app.map-far .chat-strip{opacity:0;pointer-events:none;transition:opacity .2s}
/* left-edge recon bubbles — one per active scout, world only */
.scout-rail{position:absolute;left:6px;top:46%;transform:translateY(-50%);z-index:23;display:none;flex-direction:column;gap:7px}
.app.on-world .scout-rail{display:flex}
.app.map-far .scout-rail{opacity:0;pointer-events:none;transition:opacity .2s}
.scout-bubble{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 5px;border-radius:20px;background:rgba(12,20,26,.92);border:1.5px solid #2f6b78;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.scout-bubble:active{transform:scale(.94)}
.scout-bubble .sb-face{width:26px;height:26px;border-radius:50%;background:#0e1b22;border:1.5px solid #7af0ff;display:flex;align-items:center;justify-content:center;font-size:14px;flex:0 0 auto}
.scout-bubble .sb-meta{display:flex;flex-direction:column;line-height:1.05;text-align:left}
.scout-bubble .sb-st{font-size:8px;font-weight:700;color:#9fe6f0;text-transform:uppercase;letter-spacing:.04em}
.scout-bubble .sb-cd{font-size:12px;font-weight:800;color:#cdeef5;font-variant-numeric:tabular-nums}
.scout-bubble.arrived{border-color:#8fd86a;animation:scoutpop .45s ease}
@keyframes scoutpop{0%{transform:scale(.7)}60%{transform:scale(1.14)}100%{transform:scale(1)}}
.rig-chip{position:relative;width:48px;height:48px;border-radius:12px;border:1.5px solid var(--rig,#8a8466);background:rgba(13,16,20,.86);
  display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 3px 8px rgba(0,0,0,.5)}
.rig-chip .rig-hero{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 14%;border-radius:11px;z-index:0}
.rig-chip.busy{border-width:2px;box-shadow:0 0 9px rgba(240,200,105,.3)}
.rig-chip:active{transform:scale(.92)}
/* small car-tier badge in the chip corner (the chip itself shows the hero avatar) */
.rig-car-badge{position:absolute;left:-3px;bottom:-3px;width:22px;height:22px;border-radius:7px;background:rgba(11,13,17,.94);border:1px solid var(--rig,#8a8466);display:flex;align-items:center;justify-content:center;overflow:hidden}
.rig-car-badge .rcimg{position:absolute;inset:1px;width:calc(100% - 2px);height:calc(100% - 2px);object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
.rig-car-badge .rcemoji{font-size:12px}
.rig-eta{position:absolute;left:50%;transform:translateX(-50%);bottom:2px;min-width:28px;text-align:center;font-size:9.5px;font-weight:800;font-variant-numeric:tabular-nums;color:#ffe9a8;background:rgba(10,8,4,.88);border-radius:6px;padding:0 3px;text-shadow:0 1px 2px #000;z-index:3}
.rig-eta.dim{display:none}
.rig-tier{position:absolute;top:-5px;left:-4px;font-size:7.5px;font-weight:800;background:var(--rig,#8a8466);color:#11140f;border-radius:5px;padding:0 3px}
.rig-busy-dot{position:absolute;top:3px;right:3px;width:7px;height:7px;border-radius:50%;background:var(--acc2);box-shadow:0 0 5px var(--acc2)}
.rig-busy-dot.ret{background:var(--good);box-shadow:0 0 5px var(--good)}
.rig-busy-dot.dep{background:#ffae3a;box-shadow:0 0 5px #ffae3a}
.rig-eta.rig-deployed{color:#1a140d;background:#ffae3a}
.rig-eta.rig-fighting{color:#ffd0c0;background:#7a2a1c}
/* rig sheet stat strip */
.sheet-head .big-ic.rig-big{font-size:38px}
.rig-stats{display:flex;gap:8px;margin:6px 0 12px}
.rig-stat{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 4px;text-align:center}
.rig-stat span{font-size:18px;display:block}
.rig-stat b{display:block;font-size:15px;color:var(--acc2);font-weight:800}
.rig-stat i{font-style:normal;font-size:10px;color:#8a93a0;text-transform:uppercase;letter-spacing:.04em}
.btn-primary.disabled,.btn-2.disabled{opacity:.5;filter:grayscale(.3)}
/* Settings quick-links (VIP / Skins / Gear / Replay — features without their own rail button) */
.set-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0 4px}
.set-quick-btn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px;border-radius:11px;border:1px solid var(--line);background:var(--panel2);color:var(--txt)}
.set-quick-btn span{font-size:22px;line-height:1}
.set-quick-btn i{font-style:normal;font-size:10.5px;font-weight:700;text-align:center}
.set-quick-btn:active{transform:scale(.94)}
/* parked cars under the HQ in the base */
.refuge-cars{position:absolute;inset:0;pointer-events:none}
.refuge-car{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;display:flex;flex-direction:column;align-items:center;
  background:rgba(13,16,20,.85);border:1.5px solid var(--rig,#8a8466);border-radius:11px;padding:3px 7px;color:#fff;box-shadow:0 3px 8px rgba(0,0,0,.5)}
.refuge-car .rc-ic{position:relative;width:34px;height:26px;display:flex;align-items:center;justify-content:center}
.refuge-car .rc-ic .rcimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.refuge-car .rc-ic .rcemoji{font-size:21px;line-height:1}
.refuge-car .rc-t{font-size:8px;font-weight:800;color:var(--rig,#8a8466);letter-spacing:.02em}
.refuge-car.out{opacity:.4;filter:grayscale(.6);border-style:dashed}
.refuge-car:active{transform:translate(-50%,-50%) scale(.92)}
/* (shelter skin is now the Command Center's own building art — no separate floating centrepiece) */
/* tabbed bag */
.hero-sort{background:var(--panel2);border:1px solid var(--line);color:var(--txt);font-weight:700;font-size:13px;border-radius:9px;padding:7px 26px 7px 11px;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23c8923f' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center}
.bag-tabs{display:flex;gap:6px;margin:6px 0 10px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.bag-tab{flex:0 0 auto;padding:7px 13px;border-radius:9px;background:var(--panel2);border:1px solid var(--line);font-weight:700;font-size:13px;color:#aeb6c0}
.bag-tab.on{background:var(--acc);color:#fff;border-color:var(--acc)}
.bag-total{display:flex;justify-content:space-between;gap:8px;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:13px;margin-bottom:10px;color:#aeb6c0}
.bag-total b{color:var(--acc2);font-weight:800}
.bag-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:4px}
.bag-cell{position:relative;aspect-ratio:1/1;border-radius:14px;display:flex;align-items:center;justify-content:center;overflow:hidden;
  border:1.5px solid rgba(255,255,255,.16);background:linear-gradient(160deg,#6b7280,#363c45)}
.bag-cell.q1{background:linear-gradient(160deg,#6b7280,#363c45);border-color:#8b95a1}
.bag-cell.q2{background:linear-gradient(160deg,#4e9a3e,#274f22);border-color:#6ec25a}
.bag-cell.q3{background:linear-gradient(160deg,#3d7fc0,#1f456e);border-color:#5aa6e6}
.bag-cell.q4{background:linear-gradient(160deg,#8e4fb0,#46285c);border-color:#b06ed0}
.bag-cell.q5{background:linear-gradient(160deg,#d07f2a,#6f4012);border-color:#eaa24a}
.bag-cell:active{transform:scale(.94)}
.bag-ic{font-size:33px;line-height:1;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
.bag-badge{position:absolute;top:0;left:0;right:0;text-align:center;font-size:10.5px;font-weight:800;color:#fff;
  background:rgba(0,0,0,.34);padding:2px 0;letter-spacing:.02em}
.bag-ct{position:absolute;right:5px;bottom:3px;font-size:12.5px;font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.bag-ic .itm-img,.shop-tile .st-ic img{display:inline-block}
.bag-sec{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#cdd3da;margin:16px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--line)}
.bag-sec:first-of-type{margin-top:8px}
/* research / technologies grid */
.tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:6px}
.tech-tile{position:relative;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:11px 5px 9px;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:96px;justify-content:center}
.tech-tile:active{transform:scale(.95)}
.tech-tile.ready{border-color:var(--good);box-shadow:0 0 10px rgba(95,184,120,.28)}
.tech-tile.maxed{opacity:.75}
.tech-tile.locked{opacity:.55}
.tech-ic{font-size:26px;line-height:1}
.tech-nm{font-size:10px;color:#cdd3da;text-align:center;line-height:1.15;font-weight:700}
.tech-lv{font-size:10px;font-weight:800;color:var(--acc2)}
.tech-tile.maxed .tech-lv{color:var(--good)}
.tech-bar{width:80%;height:4px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.tech-bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.tech-lock{position:absolute;top:5px;right:7px;font-size:12px}
/* building level table */
.big-ic.bld-art{position:relative;width:46px;height:46px}
.big-ic.bld-art img{width:100%;height:100%;object-fit:contain}
.big-ic.bld-art span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:30px;z-index:-1}
.lvl-table{max-height:46vh;overflow-y:auto;border:1px solid var(--line);border-radius:10px;margin-top:6px}
.lvl-row{display:grid;grid-template-columns:46px 1fr 66px;gap:6px;padding:7px 11px;font-size:13px;border-bottom:1px solid var(--line)}
.lvl-row:last-child{border-bottom:0}
.lvl-row.lvl-head{font-weight:800;color:#8a93a0;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;position:sticky;top:0;background:var(--panel)}
.lvl-row.on{background:rgba(224,83,58,.16);font-weight:800}
.lvl-row span:last-child{text-align:right;color:var(--acc2)}
/* Alliance Center department grid */
.al-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:2px 0 10px}
.al-dept{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:9px 2px 7px}
.al-dept:active{transform:scale(.93)}
.ad-ic{font-size:21px;line-height:1}
.ad-lb{font-size:9px;color:#aeb6c0;font-weight:700;letter-spacing:.01em}
.mem-title{font-size:9px;font-weight:800;color:var(--acc2);background:rgba(240,200,105,.12);border:1px solid rgba(240,200,105,.32);border-radius:6px;padding:1px 5px;margin-left:5px}
/* Storm Arena */
.ar-group{font-size:13px;font-weight:800;border-radius:9px;padding:5px 11px}
.ar-group.gold{color:#1a1407;background:linear-gradient(135deg,#f0c869,#d8a93f)}
.ar-group.silver{color:#10141a;background:linear-gradient(135deg,#cfd6df,#9aa5b2)}
.ar-squad{display:flex;gap:10px;justify-content:center}
.ar-slot{width:62px;height:62px;border-radius:14px;border:2px solid var(--line);background:#0e1116;overflow:hidden;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ar-slot.sm{width:42px;height:42px;border-radius:10px;border-width:1.5px}
.ar-face{width:100%;height:100%;object-fit:cover;object-position:50% 16%}
.ar-empty{font-size:24px;color:#4a525e;font-weight:400}
.ar-pick{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:7px 3px 6px}
.ar-pick img{width:46px;height:46px;border-radius:9px;object-fit:cover;object-position:50% 16%}
.ar-pick:disabled{opacity:.4}
.ar-pick:active{transform:scale(.94)}
.mem-row.ar-me{background:rgba(240,200,105,.1);border-radius:9px}
.ar-page{padding-bottom:84px}
.ar-head{margin-bottom:4px}
.ar-toplist .mem-row.ar-rank{align-items:center}
.ar-rowbtn{flex:0 0 auto;margin-left:6px;padding:6px 11px!important;font-size:14px}
.ar-actionbar{position:sticky;bottom:0;z-index:5;display:flex;gap:8px;align-items:stretch;margin-top:12px;padding:10px 0 calc(10px + var(--safe-b));background:linear-gradient(180deg,rgba(15,18,22,0),var(--bg) 38%)}
.ar-actionbar .btn-primary{flex:2}
.ar-actionbar .btn-2{flex:1}
.ar-actionbar .ar-histbtn{flex:0 0 48px}
.ar-claim{border-color:#d8a93f;background:linear-gradient(180deg,rgba(216,169,63,.13),var(--panel2))}
.rk-pos{width:24px;text-align:center;font-weight:800;color:var(--acc2);font-size:14px;flex:0 0 auto}
/* Events Center */
.ev-active{border-color:var(--acc2);box-shadow:0 0 14px rgba(240,200,105,.2)}
.evc-ic{font-size:34px;line-height:1;flex:0 0 auto}
.evc-ic.sm{font-size:26px}
.ev-live{background:var(--good);color:#06140a;font-size:9px;font-weight:800}
.ev-on{border-color:var(--good)}
/* cinematic intro video splash */
.intro-vid-ov{position:fixed;inset:0;z-index:200;background:#000;display:flex;align-items:center;justify-content:center;transition:opacity .32s}
.intro-vid-ov.out{opacity:0}
.intro-vid{width:100%;height:100%;object-fit:cover}
.intro-vid-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 28%,transparent 58%,rgba(0,0,0,.65))}
.intro-vid-title{position:absolute;top:11%;left:0;right:0;text-align:center;color:#fff;text-shadow:0 3px 16px rgba(0,0,0,.85);animation:introFade 1.2s ease both}
.intro-vid-title .logo-mark{font-size:38px}
.intro-vid-title h1{font-size:44px;font-weight:900;letter-spacing:.12em;margin:2px 0}
.intro-vid-title .logo-sub{font-size:12px;letter-spacing:.32em;color:#cdd3da}
.intro-vid-skip{position:absolute;bottom:calc(28px + var(--safe-b));right:18px;background:rgba(14,17,22,.72);border:1px solid var(--line);color:#fff;padding:9px 16px;border-radius:11px;font-weight:700}
@keyframes introFade{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
/* missions cinematic header clip */
.mission-vid{position:relative;border-radius:12px;overflow:hidden;height:108px;margin-bottom:12px;border:1px solid var(--line)}
.mission-vid video{width:100%;height:100%;object-fit:cover;display:block}
.mv-grad{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(10,12,14,.85))}
.mv-cap{position:absolute;left:12px;bottom:8px;font-size:11px;font-weight:800;letter-spacing:.08em;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.85)}
/* daily activity milestone bar */
.mile-wrap{margin:4px 2px 16px}
.mile-track{position:relative;height:8px;background:rgba(255,255,255,.1);border-radius:5px;margin:20px 8px 28px}
.mile-fill{height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2));border-radius:5px;transition:width .4s}
.mile-node{position:absolute;top:50%;transform:translate(-50%,-50%);background:none;border:none;padding:0}
.mile-node .mile-ic{width:27px;height:27px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--panel2);border:2px solid var(--line);font-size:13px}
.mile-node.ready .mile-ic{border-color:var(--acc2);background:var(--acc);color:#fff;box-shadow:0 0 10px var(--acc2);animation:milePulse 1.3s ease-in-out infinite}
.mile-node.done .mile-ic{border-color:var(--good);color:var(--good)}
.mile-node:active{transform:translate(-50%,-50%) scale(.9)}
.mile-node .mile-at{position:absolute;top:30px;left:50%;transform:translateX(-50%);font-size:9px;color:#8a93a0;font-weight:700}
@keyframes milePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.13)}}
/* shelter skin picker (animated previews) */
.skin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.skin-card{background:var(--panel2);border:1.5px solid var(--line);border-radius:13px;padding:10px;text-align:center}
.skin-card.r-epic{border-color:#9c5fb0}
.skin-card.r-mythic{border-color:#c77dff}
.skin-card.on{border-color:var(--acc2);box-shadow:0 0 13px rgba(240,200,105,.28)}
.skin-stage{height:98px;display:flex;align-items:center;justify-content:center;margin-bottom:6px;border-radius:10px;background:radial-gradient(circle at 50% 72%,rgba(95,184,120,.1),transparent 70%)}
.skin-art{max-width:86px;max-height:92px;object-fit:contain;animation:skinBob 3.2s ease-in-out infinite;filter:drop-shadow(0 5px 9px rgba(0,0,0,.55))}
.skin-default{font-size:50px;animation:skinBob 3.2s ease-in-out infinite}
.skin-nm{font-weight:700;font-size:13px}
@keyframes skinBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ============ BUTTONS / CHIPS ============ */
.btn-primary{background:linear-gradient(180deg,#e0623a,#c4421f);color:#fff;font-weight:800;
  padding:10px 14px;border-radius:10px;letter-spacing:.4px;box-shadow:0 3px 0 #8c2c12}
.btn-primary:active{transform:translateY(2px);box-shadow:0 1px 0 #8c2c12}
.btn-primary.big{width:100%;padding:14px;font-size:16px;margin-top:8px}
.btn-primary[disabled]{opacity:.5;box-shadow:none;filter:grayscale(.5)}
.btn-2{background:var(--panel2);border:1px solid var(--line);padding:9px 12px;border-radius:9px;font-weight:700;font-size:13px}
.btn-2:active{background:#2b323c}
.btn-ghost{border:1px solid var(--line);padding:8px 12px;border-radius:9px;font-weight:600;font-size:13px;color:var(--dim)}
.btn-row{display:flex;gap:8px;margin-top:10px}
.btn-row>*{flex:1}
.tag{display:inline-flex;align-items:center;gap:3px;background:#0e1116;border:1px solid var(--line);
  border-radius:6px;padding:2px 7px;font-size:11px;font-weight:700}
.pill{border-radius:999px;padding:3px 9px;font-size:11px;font-weight:700;background:var(--panel2)}

/* ============ CARDS / SECTIONS ============ */
.pad{padding:12px}
.sec-title{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);
  margin:10px 4px 5px;font-weight:800}
.sec-title:first-child{margin-top:2px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px;margin-bottom:8px}
.card.tap:active{background:var(--panel2)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}

/* progress bars */
.bar{height:7px;background:#0c0f13;border-radius:5px;overflow:hidden;border:1px solid var(--line)}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2));border-radius:5px;transition:width .4s}
.bar.q>i{background:linear-gradient(90deg,#3f7fb5,#4f9bd9)}
.bar.g>i{background:linear-gradient(90deg,#3f9b5f,#5fb878)}

/* ============ BASE SCREEN ============ */
.base-yard{padding:10px 10px 16px;background:
  radial-gradient(120% 60% at 50% 0,#1c2027 0,#0d0f12 70%)}
.queues{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.qcard{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:9px 11px}
.qcard .qic{font-size:22px}
.qcard .qmid{flex:1;min-width:0}
.qcard .qname{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qcard .cd{font-size:12px;color:var(--acc2);font-variant-numeric:tabular-nums}
.build-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.b-tile{background:linear-gradient(180deg,#1b2028,#161a20);border:1px solid var(--line);border-radius:12px;
  padding:12px 10px;display:flex;flex-direction:column;align-items:center;gap:3px;position:relative;min-height:104px;justify-content:center}
.b-tile:active{transform:scale(.97)}
.b-tile .bic{font-size:34px;line-height:1}
.b-tile .bname{font-size:12px;font-weight:700;text-align:center}
.b-tile .blvl{font-size:11px;color:var(--acc2);font-weight:700}
.b-tile.locked{opacity:.5}
.b-tile .dot{position:absolute;top:7px;right:7px;width:9px;height:9px;border-radius:50%;background:var(--good);box-shadow:0 0 8px var(--good)}
.b-tile .busy{position:absolute;top:6px;right:7px;font-size:10px;color:var(--acc2);font-weight:700}

/* base camp map */
.base-map{position:relative;width:100%;min-height:520px;border-radius:16px;overflow:hidden;margin-top:6px;
  background:
    radial-gradient(120% 75% at 50% 32%, #1b222b 0%, #0c1015 72%),
    repeating-linear-gradient(0deg, rgba(57,214,232,.045) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(57,214,232,.045) 0 1px, transparent 1px 28px);
  border:1px solid var(--line);box-shadow:inset 0 0 70px rgba(0,0,0,.55)}
.base-ground{position:absolute;inset:9px;border:1px dashed rgba(57,214,232,.16);border-radius:13px;pointer-events:none}
.base-tag{position:absolute;top:10px;left:14px;font:700 10px ui-monospace,monospace;letter-spacing:2px;color:rgba(122,240,255,.45);pointer-events:none}
.b-pad{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;width:84px;z-index:1}
.b-pad:active{transform:translate(-50%,-50%) scale(.93)}
.b-pad.hq{width:98px;z-index:2}
.pad-plat{position:relative;width:58px;height:58px;border-radius:15px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#232c37,#151b22);border:1px solid #30404c;
  box-shadow:0 5px 11px rgba(0,0,0,.5), inset 0 0 12px rgba(57,214,232,.08)}
.pad-ic{font-size:30px;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.b-pad.hq .pad-plat{width:76px;height:76px;border-color:var(--acc2);
  box-shadow:0 7px 18px rgba(0,0,0,.55), 0 0 24px rgba(240,200,105,.28), inset 0 0 16px rgba(240,200,105,.12)}
.b-pad.hq .pad-ic{font-size:42px}
.pad-name{font-size:10px;font-weight:700;color:var(--dim);text-align:center;white-space:nowrap;text-shadow:0 1px 2px #000}
.pad-lvl{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;border-radius:9px;padding:0 4px;
  background:linear-gradient(180deg,#3a4250,#222831);border:1px solid var(--acc2);color:var(--acc2);
  font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 0 8px rgba(240,200,105,.3)}
.pad-busy{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);background:rgba(8,12,16,.94);border:1px solid var(--acc2);
  color:var(--acc2);font:800 9px ui-monospace,monospace;border-radius:6px;padding:1px 5px;white-space:nowrap}
.pad-ready{position:absolute;top:-5px;left:-5px;width:12px;height:12px;border-radius:50%;background:var(--good);
  box-shadow:0 0 10px var(--good);border:2px solid #0e1217}
.b-pad.locked{opacity:.4;filter:grayscale(.6)}
.b-pad.buildable .pad-plat{border:1px dashed var(--cyber);animation:padpulse 1.8s ease-in-out infinite}
@keyframes padpulse{0%,100%{box-shadow:0 0 12px rgba(57,214,232,.18), inset 0 0 12px rgba(57,214,232,.1)}
  50%{box-shadow:0 0 22px rgba(57,214,232,.42), inset 0 0 14px rgba(57,214,232,.2)}}

/* ============ REFUGE (isometric base) ============ */
.refuge-wrap{position:relative;display:flex;flex-direction:column;height:100%}
.refuge-queues{display:flex;gap:8px;overflow-x:auto;padding:8px 10px;background:linear-gradient(180deg,#1a140e,#120d09);
  border-bottom:1px solid #2e2418;flex:0 0 auto;-webkit-overflow-scrolling:touch}
.refuge-queues::-webkit-scrollbar{display:none}
.refuge-queues .qcard{min-width:210px}
.refuge-hint{font:600 12px ui-monospace,monospace;color:#9a8a6f;display:flex;align-items:center;padding:4px 6px;white-space:nowrap}
.refuge-scene{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;position:relative;background:#120d09}
.refuge-scene::-webkit-scrollbar{width:0;height:0}
.refuge-sizer{position:relative}
.refuge-world{position:relative;transform-origin:0 0;
  background:#1a1610 url(/buildings/terrain.webp) center/cover;box-shadow:inset 0 0 160px rgba(0,0,0,.55)}
.refuge-world::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 130px rgba(0,0,0,.5)}
.refuge-amb{position:absolute;inset:0;pointer-events:none;z-index:2}
.bird{position:absolute;width:24px;opacity:.5;animation-name:flyacross;animation-timing-function:linear;animation-iteration-count:infinite}
.bird svg{width:100%;height:auto;display:block;animation:flap .5s ease-in-out infinite;transform-origin:center}
@keyframes flyacross{from{transform:translate(-90px,0)}50%{transform:translate(540px,-22px)}to{transform:translate(1160px,0)}}
@keyframes flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.5)}}
.walker{position:absolute;width:22px;animation-name:strollx;animation-timing-function:linear;animation-iteration-count:infinite;will-change:transform,opacity}
.walker.rev{animation-name:strollx-rev}
.walker.rev .walker-svg{transform:scaleX(-1)}
.walker-svg{width:100%;height:auto;display:block;overflow:visible}
.walker-fig{transform-box:fill-box;transform-origin:50% 100%;animation:wkbob .9s ease-in-out infinite}
.wk-leg-a,.wk-leg-b,.wk-arm-a,.wk-arm-b{transform-box:fill-box;transform-origin:50% 10%}
.wk-leg-a{animation:wkswing .9s ease-in-out infinite}
.wk-leg-b{animation:wkswing .9s ease-in-out infinite;animation-delay:-.45s}
.wk-arm-a{animation:wkswing .9s ease-in-out infinite;animation-delay:-.45s}
.wk-arm-b{animation:wkswing .9s ease-in-out infinite}
.wk-sh{fill:rgba(0,0,0,.32);transform-box:fill-box;transform-origin:50% 50%;animation:wkshadow .9s ease-in-out infinite}
.wk-body{fill:#4a5340}.wk-hood{fill:#3f4736}.wk-pack{fill:#5b4733}.wk-face{fill:#b8916a}
.wk-leg-a rect,.wk-leg-b rect{fill:#2c2922}.wk-arm-a rect,.wk-arm-b rect{fill:#454c3a}
@keyframes strollx{0%{transform:translateX(-16px);opacity:0}8%{opacity:.92}88%{opacity:.92}100%{transform:translateX(230px);opacity:0}}
@keyframes strollx-rev{0%{transform:translateX(230px);opacity:0}8%{opacity:.92}88%{opacity:.92}100%{transform:translateX(-16px);opacity:0}}
@keyframes wkbob{0%,100%{transform:translateY(0)}25%{transform:translateY(-1.3px)}50%{transform:translateY(0)}75%{transform:translateY(-1.3px)}}
@keyframes wkswing{0%,100%{transform:rotate(20deg)}50%{transform:rotate(-20deg)}}
@keyframes wkshadow{0%,100%{transform:scaleX(1);opacity:.3}50%{transform:scaleX(.82);opacity:.22}}
.ashmote{position:absolute;width:4px;height:4px;border-radius:50%;background:rgba(202,198,188,.5);opacity:0;animation-name:ashfall;animation-timing-function:linear;animation-iteration-count:infinite;will-change:transform,opacity}
.cinder{position:absolute;width:3px;height:3px;border-radius:50%;background:radial-gradient(circle,#ffda8c,#ff7a2a);box-shadow:0 0 6px 1px rgba(255,150,60,.7);opacity:0;animation-name:cinderrise;animation-timing-function:ease-in;animation-iteration-count:infinite;will-change:transform,opacity}
@keyframes ashfall{0%{transform:translate(0,-12px) rotate(0);opacity:0}8%{opacity:.55}90%{opacity:.4}100%{transform:translate(46px,250px) rotate(200deg);opacity:0}}
@keyframes cinderrise{0%{transform:translate(0,0) scale(1);opacity:0}15%{opacity:.95}80%{opacity:.55}100%{transform:translate(24px,-210px) scale(.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.walker,.walker-fig,.wk-leg-a,.wk-leg-b,.wk-arm-a,.wk-arm-b,.wk-sh,.bird,.ashmote,.cinder{animation:none!important}.walker{opacity:.85}.ashmote,.cinder{opacity:0}}
.refuge-blds{position:absolute;inset:0;z-index:3}
.bld{position:absolute;transform:translate(-50%,-80%);width:154px;cursor:pointer;transition:transform .12s}
.bld:active{transform:translate(-50%,-80%) scale(.95)}
.bld.hq{width:190px}.bld.wide{width:204px}
.bld-img-wrap{position:relative;width:100%;line-height:0}
.bld-img{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 7px rgba(0,0,0,.5))}
.bld-fallback{position:absolute;inset:0;z-index:-1;display:flex;align-items:flex-end;justify-content:center}
.bld-fallback svg{width:66%;height:auto}
.bld-over{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;z-index:4}
.bld-tag{font-size:10.5px;font-weight:700;color:#f3ead2;text-shadow:0 1px 3px #000,0 0 4px #000;white-space:nowrap;background:rgba(10,12,8,.6);border:1px solid rgba(240,200,105,.25);border-radius:8px;padding:1px 8px}
.bld-tag b{color:var(--acc2)}
.bld-tag .bld-build{color:var(--cyber2)}
.bld-busy{position:absolute;top:4px;left:50%;transform:translateX(-50%);background:rgba(8,10,8,.92);border:1px solid var(--acc2);
  color:var(--acc2);font:800 10px ui-monospace,monospace;border-radius:6px;padding:1px 6px;white-space:nowrap;z-index:6}
.bld-ready{position:absolute;top:8px;right:20%;width:14px;height:14px;border-radius:50%;background:var(--good);
  box-shadow:0 0 12px var(--good);border:2px solid #0a120c;animation:readyb 1.4s ease-in-out infinite;z-index:6}
@keyframes readyb{0%,100%{transform:scale(1)}50%{transform:scale(1.28)}}
.bld.busy .bld-img{animation:bldwork 1.6s ease-in-out infinite}
@keyframes bldwork{0%,100%{filter:drop-shadow(0 6px 7px rgba(0,0,0,.5))}50%{filter:drop-shadow(0 6px 7px rgba(0,0,0,.5)) drop-shadow(0 0 12px rgba(240,200,105,.7))}}
/* upgrade-complete celebration: gold burst on the building + a rising "LV N!" */
.bld.leveled .bld-img-wrap{animation:bldlevelup 1.2s ease}
@keyframes bldlevelup{0%{filter:brightness(2.3) drop-shadow(0 0 14px #ffd86a)}35%{transform:scale(1.16)}100%{filter:none;transform:none}}
.bld-levelpop{position:absolute;left:50%;top:-4px;transform:translateX(-50%);font-size:13px;font-weight:800;color:#ffd86a;text-shadow:0 1px 3px #000,0 0 8px rgba(240,200,105,.7);white-space:nowrap;pointer-events:none;z-index:60;animation:bldpop 1.5s ease forwards}
@keyframes bldpop{0%{opacity:0;transform:translate(-50%,6px) scale(.6)}22%{opacity:1;transform:translate(-50%,-10px) scale(1.12)}100%{opacity:0;transform:translate(-50%,-34px) scale(1)}}
@media (prefers-reduced-motion:reduce){.bld.leveled .bld-img-wrap{animation:none}.bld-levelpop{animation:bldpop-rm 1.2s ease forwards}@keyframes bldpop-rm{0%{opacity:0}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-20px)}}}
/* car (rig) upgrade flash in the dock */
.rig-chip.rig-up{animation:rigup 1.2s ease}
@keyframes rigup{0%{box-shadow:0 0 0 0 rgba(240,200,105,.9)}35%{box-shadow:0 0 14px 3px rgba(240,200,105,.85);transform:scale(1.14)}100%{box-shadow:none;transform:none}}
.rig-uppop{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);font-size:9px;font-weight:800;color:#ffd86a;text-shadow:0 1px 2px #000;white-space:nowrap;pointer-events:none;z-index:60;animation:bldpop 1.5s ease forwards}
@media (prefers-reduced-motion:reduce){.rig-chip.rig-up{animation:none}.rig-uppop{animation:bldpop-rm 1.2s ease forwards}}
/* unbuilt construction plots */
.bld.plot{width:120px;transform:translate(-50%,-62%)}
.bld.plot:active{transform:translate(-50%,-62%) scale(.95)}
.plot-box{position:relative;width:100%;aspect-ratio:1.25/1;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg, rgba(57,214,232,.10) 0 11px, rgba(57,214,232,.02) 11px 22px);
  border:2px dashed rgba(57,214,232,.55);box-shadow:0 6px 10px rgba(0,0,0,.4), inset 0 0 18px rgba(57,214,232,.12)}
.plot-plus{font-size:30px;font-weight:800;color:var(--cyber2);text-shadow:0 0 10px rgba(57,214,232,.6)}
.bld.plot.buildable .plot-box{animation:plotpulse 1.8s ease-in-out infinite}
@keyframes plotpulse{0%,100%{box-shadow:0 6px 10px rgba(0,0,0,.4), inset 0 0 18px rgba(57,214,232,.12)}
  50%{box-shadow:0 6px 16px rgba(0,0,0,.4), inset 0 0 26px rgba(57,214,232,.3), 0 0 18px rgba(57,214,232,.4)}}
.bld.plot.locked .plot-box{border-color:rgba(150,160,170,.4);box-shadow:0 6px 10px rgba(0,0,0,.4);
  background:repeating-linear-gradient(45deg, rgba(120,130,140,.08) 0 11px, transparent 11px 22px)}
.bld.plot.locked .plot-plus{font-size:22px;text-shadow:none;color:#9aa6b2;filter:grayscale(1)}
.bld.plot .bld-over{position:static;transform:none;margin-top:5px}
/* zoom controls */
.refuge-zoom{position:absolute;right:10px;bottom:calc(90px + var(--safe-b));z-index:25;display:flex;flex-direction:column;gap:6px}
.refuge-zoom button{width:42px;height:42px;border-radius:11px;background:rgba(12,14,10,.85);border:1px solid var(--line);color:var(--acc2);font-size:24px;font-weight:800;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.refuge-zoom button:active{background:#1c241a}

/* ============ SHEETS / MODALS ============ */
.sheet-wrap,.modal-wrap{position:fixed;inset:0;z-index:40;display:flex}
.sheet-wrap{align-items:stretch}
.modal-wrap{align-items:center;justify-content:center;padding:18px}
.sheet-back,.modal-back{position:absolute;inset:0;background:rgba(0,0,0,.62)}  /* no backdrop-filter: blur() over the map canvas renders solid-black on many mobile GPUs */
/* full-screen panels (every sheet() opens full screen with a Back button at lower-left) */
.sheet{position:relative;width:100%;height:100%;max-height:100%;overflow-y:auto;background:linear-gradient(180deg,#1c2129,#0f1216);
  border:none;border-radius:0;padding:calc(var(--safe-t) + 14px) 14px calc(94px + var(--safe-b));
  animation:slideup .2s ease}
.sheet-back-btn{position:absolute;left:16px;bottom:calc(16px + var(--safe-b));z-index:6;width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#f3e2c0;cursor:pointer;
  background:radial-gradient(circle at 50% 36%,#444c5a,#222932);border:2px solid var(--acc,#c8923f);
  box-shadow:0 6px 18px rgba(0,0,0,.55);animation:pop .2s ease}
.sheet-back-btn:active{transform:scale(.91)}
.modal{position:relative;width:100%;max-width:360px;background:linear-gradient(180deg,#1a1e25,#13161b);
  border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--sh);animation:pop .2s ease;max-height:86%;overflow-y:auto}
@keyframes slideup{from{transform:translateY(100%)}to{transform:none}}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:none;opacity:1}}
.grip{width:40px;height:4px;border-radius:3px;background:var(--line);margin:4px auto 10px}
.sheet h2,.modal h2{margin:0 0 4px;font-size:18px}
.sheet h3{margin:11px 0 5px;font-size:13px;color:var(--muted);letter-spacing:1px;text-transform:uppercase}
.sheet-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.sheet-head .big-ic{font-size:40px}
.kv{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid #232a33;font-size:13px}
.kv:last-child{border:none}
.cost-row{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0;font-size:13px;font-weight:700}
.cost{display:flex;align-items:center;gap:3px}
.cost.lack{color:var(--bad)}
.lock-note{color:var(--bad);font-size:13px;font-weight:600;margin:8px 0;text-align:center}

/* ============ TROOP / SELECT ============ */
.seg{display:flex;gap:6px;background:#0e1116;border-radius:9px;padding:4px;margin:8px 0}
.seg button{flex:1;padding:8px;border-radius:7px;font-size:13px;font-weight:700;color:var(--dim)}
.seg button.on{background:var(--panel2);color:var(--txt)}
.tier-row{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid var(--line);border-radius:9px;margin-bottom:6px}
.tier-row.locked{opacity:.45}
.tier-row.on{border-color:var(--acc)}
.stepper{display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.stepper button{width:38px;height:38px;font-size:18px;font-weight:800;background:#0e1116}
.stepper input{width:62px;text-align:center;background:#0e1116;border:none;border-left:1px solid var(--line);
  border-right:1px solid var(--line);color:var(--txt);height:38px}
.troop-pick{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid #232a33}
.troop-pick .tp-ic{font-size:20px;width:26px}

/* ============ CHAT ============ */
.chat-screen{display:flex;flex-direction:column;height:100%}
.chat-tabs{display:flex;gap:6px;padding:8px 10px 4px;background:var(--bg2);border-bottom:1px solid var(--line)}
.chat-tabs button{flex:1;padding:8px;border-radius:8px;font-weight:700;font-size:13px;color:var(--dim);background:#0e1116}
.chat-tabs button.on{background:var(--panel2);color:var(--txt)}
.chat-log{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:9px}
.msg{max-width:84%;align-self:flex-start}
.msg.me{align-self:flex-end}
.msg .bub{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 11px;font-size:14px;line-height:1.35;word-wrap:break-word}
.msg.me .bub{background:#2a2118;border-color:#3a2e1f}
.msg.sys{align-self:center;max-width:92%}
.msg.sys .bub{background:transparent;border:none;color:var(--muted);font-size:12px;font-style:italic;text-align:center;padding:2px}
.msg .who{font-size:11px;color:var(--dim);margin:0 4px 3px;font-weight:700;display:flex;gap:5px;align-items:center}
.msg .who .lng{background:#0e1116;border:1px solid var(--line);border-radius:4px;padding:0 4px;font-size:9px;color:var(--muted)}
.msg .tr-line{font-size:11px;color:var(--info);margin:4px 4px 0;cursor:pointer}
.msg .orig{font-size:12px;color:var(--muted);margin-top:4px;border-top:1px dashed #333b45;padding-top:4px}
.chat-input{display:flex;gap:8px;padding:8px;border-top:1px solid var(--line);background:var(--bg2);padding-bottom:calc(8px + var(--safe-b))}
.chat-input input{flex:1;background:#0e1116;border:1px solid var(--line);border-radius:20px;padding:10px 14px;color:var(--txt)}
.chat-input button{width:44px;border-radius:50%;background:var(--acc);color:#fff;font-size:18px;font-weight:800}

/* ============ MAP ============ */
.map-screen{position:relative;height:100%;overflow:hidden;background:#0a0c0f;touch-action:none}
#mapcv{display:block;width:100%;height:100%}
#map3d{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}/* 3D character overlay: above map, below HUD (DOM order), taps fall through */
.map-hud{position:absolute;top:8px;left:8px;right:8px;display:flex;gap:8px;pointer-events:none}
.map-hud .coord{background:rgba(8,14,18,.82);border:1px solid rgba(57,214,232,.30);border-radius:8px;padding:5px 10px;
  font:700 12px ui-monospace,monospace;color:var(--cyber2);letter-spacing:1px;box-shadow:inset 0 0 12px rgba(57,214,232,.12)}
.map-hud .go-home{margin-left:auto;pointer-events:auto;background:rgba(8,14,18,.82);border:1px solid rgba(57,214,232,.30);
  border-radius:8px;padding:5px 10px;font-size:12px;font-weight:700;color:var(--cyber2)}
.map-marches{position:absolute;left:84px;right:84px;bottom:calc(20px + var(--safe-b));display:flex;flex-direction:column;gap:6px;pointer-events:none}
.mm{display:flex;align-items:center;gap:8px;background:rgba(14,17,22,.92);border:1px solid var(--line);
  border-radius:9px;padding:7px 10px;font-size:12px;pointer-events:auto}
.mm .cd{color:var(--acc2);font-weight:700;font-variant-numeric:tabular-nums;margin-left:auto}
.legend{position:absolute;right:8px;bottom:calc(92px + var(--safe-b));background:rgba(8,14,18,.82);border:1px solid rgba(57,214,232,.18);
  border-radius:8px;padding:6px 8px;font:10px ui-monospace,monospace;color:var(--dim);pointer-events:none;line-height:1.7;letter-spacing:.3px}

/* ============ HEROES ============ */
.hero-card{display:flex;gap:10px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:var(--panel)}
.hero-port{width:54px;height:54px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:30px;flex-shrink:0}
.r-R{background:linear-gradient(180deg,#3a4250,#2a313c);border:1px solid #4a5666}
.r-SR{background:linear-gradient(180deg,#3a4d7a,#293858);border:1px solid #4f6db0}
.r-SSR{background:linear-gradient(180deg,#7a5a2a,#5a3f1c);border:1px solid #c8923f}
.stars{color:var(--acc2);font-size:12px;letter-spacing:1px}
.rar{font-size:10px;font-weight:800;padding:1px 5px;border-radius:4px}
.rar.R{background:#3a4250}.rar.SR{background:#3a4d7a}.rar.SSR{background:#7a5a2a;color:var(--acc2)}
/* UR prestige tier (magenta-violet) */
.r-UR{background:linear-gradient(180deg,#7a2a6a,#3f1c5a);border:1px solid #d96fe0}
.rar.UR{background:linear-gradient(90deg,#c44fd6,#e0913f);color:#fff}
.hero-tile.r-UR{border-color:#d96fe0;box-shadow:0 0 18px rgba(210,90,220,.32)}
.hero-tile.r-UR .ht-art{background:radial-gradient(78% 72% at 50% 26%, #6a2a7a, #1a1020)}
.hero-hero.r-UR{background:radial-gradient(72% 84% at 24% 18%, #6a2a7a, #170f1d)}
.gacha-card.r-UR:not(.locked){background:linear-gradient(160deg,#f3acec,#c44fd6 46%,#6a2a7a)}
/* hero character cards (full-body art) */
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.hero-tile{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;background:#12151a}
.hero-tile:active{transform:scale(.97)}
.hero-tile.r-SR{border-color:#46689e}.hero-tile.r-SSR{border-color:#c8923f;box-shadow:0 0 16px rgba(200,146,63,.2)}
.ht-art{position:relative;height:140px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;font-size:54px}
.hero-tile.r-R .ht-art{background:radial-gradient(78% 72% at 50% 26%, #3c4654, #171b21)}
.hero-tile.r-SR .ht-art{background:radial-gradient(78% 72% at 50% 26%, #2f4f86, #131c28)}
.hero-tile.r-SSR .ht-art{background:radial-gradient(78% 72% at 50% 26%, #8a6526, #221910)}
.ht-art svg.h-svg{height:142px;width:auto;display:block;filter:drop-shadow(0 3px 7px rgba(0,0,0,.55))}
.ht-rar{position:absolute;top:6px;left:6px;z-index:2}
.ht-info{padding:7px 9px;background:rgba(8,10,14,.55)}
.ht-info b{font-size:13px}
.hero-hero{display:flex;gap:12px;align-items:flex-end;border-radius:14px;padding:10px 12px 8px;margin-bottom:6px;overflow:hidden;position:relative}
.hero-hero.r-R{background:radial-gradient(72% 84% at 24% 18%, #3c4654, #14171c)}
.hero-hero.r-SR{background:radial-gradient(72% 84% at 24% 18%, #2f4f86, #121a25)}
.hero-hero.r-SSR{background:radial-gradient(72% 84% at 24% 18%, #8a6526, #1d1610)}
.hh-art{flex:0 0 auto;font-size:60px}
.hh-art svg.h-svg{height:152px;width:auto;display:block;filter:drop-shadow(0 4px 9px rgba(0,0,0,.6))}
.hh-info{padding-bottom:8px}.hh-info h2{margin:0 0 4px}
/* big centered hero stage (detail view) — art is the star, details beneath */
.hero-stage{position:relative;height:380px;border-radius:16px;overflow:hidden;margin:2px 0 14px;display:flex;align-items:flex-end;justify-content:center;
  background:radial-gradient(72% 60% at 50% 22%, rgba(120,90,40,.28), #0d0f15 74%);box-shadow:inset 0 0 60px rgba(0,0,0,.5)}
.hero-stage.r-SR{background:radial-gradient(72% 60% at 50% 22%, rgba(60,90,160,.3), #0b1018 74%)}
.hero-stage.r-SSR{background:radial-gradient(72% 60% at 50% 22%, rgba(170,125,50,.32), #14100a 74%)}
.hero-stage.r-UR{background:radial-gradient(72% 60% at 50% 22%, rgba(165,70,165,.34), #120a16 74%)}
.hero-stage .hs-art{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center}
.hero-stage .hs-art .hero-img{height:100%;width:auto;max-width:none;object-fit:contain;transform-origin:50% 100%;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.6));animation:heroBreathe 4.6s ease-in-out infinite}
.hero-stage .hs-art video{height:100%;width:auto;object-fit:contain}
.hero-stage .hs-overlay{position:relative;z-index:2;width:100%;text-align:center;padding:42px 12px 14px;background:linear-gradient(180deg,transparent,rgba(8,9,13,.92))}
.hero-stage .hs-overlay h2{margin:0 0 5px;font-size:23px}
.hero-stage .hs-overlay .stars{font-size:16px;letter-spacing:2px}
@keyframes heroBreathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-1.1%) scale(1.015)}}
@media (prefers-reduced-motion:reduce){.hero-stage .hs-art .hero-img{animation:none}}
/* reference-matched hero detail: tall stage + flanking gear + switch arrows + tabs */
.hero-stage.big{height:430px}
.hs-gear{position:absolute;top:12px;right:10px;z-index:3;display:flex;flex-direction:column;gap:9px}
.hs-gear-cell{width:46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:22px;
  background:rgba(10,12,16,.66);border:1.5px solid #4a4030;box-shadow:0 2px 7px rgba(0,0,0,.45);backdrop-filter:blur(2px)}
.hs-gear-cell.filled{border-color:#c8923f}
.hs-gear-cell.filled.r-rare,.hs-gear-cell.filled.r-epic{border-color:#b46fd0}
.hs-nav{position:absolute;bottom:54px;z-index:3;width:34px;height:46px;border:none;border-radius:9px;background:rgba(10,12,16,.5);color:#fff;font-size:26px;line-height:1;display:flex;align-items:center;justify-content:center}
.hs-nav.left{left:8px}.hs-nav.right{right:8px}
.hero-power{display:flex;align-items:center;justify-content:center;gap:7px;margin:-2px 0 8px;font-size:21px}
.hero-power b{font-size:25px;color:#f0c869;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.hero-stats3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:12px}
.hero-stats3>div{background:#12151b;border:1px solid var(--line);border-radius:11px;padding:9px 4px;text-align:center}
.hero-stats3 .hs3-v{font-weight:800;font-size:15px}
.hero-stats3 .hs3-l{font-size:10px;color:var(--dim);margin-top:2px;letter-spacing:.04em;text-transform:uppercase}
.hero-tabs{display:flex;gap:6px;background:#0e1116;border:1px solid var(--line);border-radius:12px;padding:4px;margin-bottom:12px}
.hero-tabs .htab{flex:1;padding:9px 0;border:none;border-radius:9px;background:transparent;color:var(--dim);font-weight:700;font-size:13px}
.hero-tabs .htab.on{background:linear-gradient(180deg,#caa24a,#9a7327);color:#1a1206;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.star-big{text-align:center;font-size:34px;letter-spacing:5px;color:var(--acc2);margin:6px 0 12px;text-shadow:0 2px 8px rgba(240,200,105,.35)}
.rport svg.h-svg{height:118px;width:auto}
/* real generated portraits (cover the art area; SVG silhouette sits behind as fallback) */
.hero-img{display:block}
.ht-art .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 10%;z-index:1}
.hh-art{position:relative;width:122px;height:158px;overflow:hidden;border-radius:10px;flex:0 0 auto}
.hh-art .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 8%;z-index:1}
.hh-art svg.h-svg{height:158px}
.rport{position:relative;overflow:hidden}
.rport .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 6%;z-index:1}
/* gacha hero-list grid */
.gacha-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.gacha-card{background:linear-gradient(160deg,#f6e09a,#c89a44 50%,#8f6c2c);padding:3px;border-radius:14px;cursor:pointer;box-shadow:0 3px 9px rgba(0,0,0,.45)}
.gacha-card:active{transform:scale(.97)}
.gacha-card.locked{background:linear-gradient(160deg,#4c545e,#2b323c)}
.gc-art{position:relative;border-radius:11px;overflow:hidden;aspect-ratio:3/4;background:#19140e}
/* rarity shine — a soft diagonal glint sweeps across owned SSR/UR cards (gacha "shiny" feel) */
.gacha-card.r-SSR:not(.locked) .gc-art::after,.gacha-card.r-UR:not(.locked) .gc-art::after{content:'';position:absolute;top:-20%;left:-60%;width:38%;height:140%;z-index:2;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-18deg);animation:cardshine 5s ease-in-out infinite}
.gacha-card.r-UR:not(.locked) .gc-art::after{background:linear-gradient(90deg,transparent,rgba(255,225,255,.5),transparent)}
.gacha-card:nth-child(2n) .gc-art::after{animation-delay:1.3s}
.gacha-card:nth-child(3n) .gc-art::after{animation-delay:2.6s}
@keyframes cardshine{0%{left:-60%}16%{left:135%}100%{left:135%}}
@media (prefers-reduced-motion:reduce){.gc-art::after{animation:none!important;opacity:0}}
.gc-art .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.gc-art svg.h-svg{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:100%;width:auto}
.gc-class{position:absolute;top:5px;left:5px;width:25px;height:25px;border-radius:7px;background:rgba(10,14,20,.82);border:1px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-size:14px;z-index:3}
.gc-rar{position:absolute;top:6px;right:6px;z-index:3;font-size:10px;padding:1px 6px}
.gc-foot{position:absolute;left:0;right:0;bottom:0;padding:16px 6px 5px;background:linear-gradient(0deg,rgba(0,0,0,.82),transparent);z-index:2;text-align:center}
.gc-lv{font-size:13px;font-weight:800;color:#fff;text-shadow:0 1px 2px #000}
.gc-stars{font-size:11px;color:#f0c869;letter-spacing:1px}
.gacha-card.locked .gc-art .hero-img{filter:brightness(.22) grayscale(.85)}
.gacha-card.locked .gc-art svg.h-svg{filter:brightness(.3) grayscale(.85)}
.gc-lockwrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;z-index:3}
.gc-lock{font-size:26px;opacity:.85}
.gc-locktx{font-size:11px;color:#b6bec8;font-weight:700;text-shadow:0 1px 2px #000}

/* lists */
.lb-row{display:flex;align-items:center;gap:10px;padding:7px 4px;border-bottom:1px solid #232a33}
.lb-rank{width:26px;text-align:center;font-weight:800;color:var(--muted)}
.lb-rank.top{color:var(--acc2)}
.mem-row{display:flex;align-items:center;gap:9px;padding:9px 4px;border-bottom:1px solid #232a33}
.odot{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.odot.on{background:var(--good);box-shadow:0 0 7px var(--good)}
.role{font-size:10px;font-weight:800;padding:1px 6px;border-radius:4px;background:var(--panel2);color:var(--acc2)}

/* mail/report */
.mail-row{padding:9px 10px;border:1px solid var(--line);border-radius:10px;margin-bottom:7px;background:var(--panel)}
.mail-row.unread{border-left:3px solid var(--acc)}
.mail-row .mt{font-weight:700;font-size:14px;margin-bottom:2px;display:flex;justify-content:space-between;gap:8px}
.mail-row .mtime{font-size:11px;color:var(--muted);font-weight:400}
/* rich mail reports (scout / battle / defense cards) */
.rep-card{font-size:12px}
.rep-card .rep-line{font-size:12px;padding:1px 0;margin:1px 0}
.rep-card .dim{color:var(--muted)}
.rep-card .rep-head{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;margin-bottom:2px}
.rep-verdict{display:inline-block;font-size:15px;font-weight:800;letter-spacing:1px;padding:3px 14px;border-radius:8px;margin:2px 0 6px}
.rep-verdict.win{background:linear-gradient(90deg,#2a3f1e,#1c2a14);color:#9be08a;border:1px solid #3f6b2a}
.rep-verdict.lose{background:linear-gradient(90deg,#3f1e1e,#2a1414);color:#e08a8a;border:1px solid #6b2a2a}
.rep-sec{display:flex;justify-content:space-between;align-items:center;margin:8px 0 3px;font-weight:700;color:#cdbb92;font-size:11.5px}
.rep-sec b{font-weight:800;color:#e8dcc0}
.rep-ratio{font-size:10px;font-weight:700;color:#e0a060;background:#2a1f14;padding:1px 8px;border-radius:5px}
.rep-bar{height:9px;border-radius:5px;background:#2a2f38;overflow:hidden}
.rep-bar i{display:block;height:100%;background:linear-gradient(90deg,#5fb878,#8fd86a)}
.rep-res{display:flex;gap:14px;font-weight:700;color:#e8dcc0;margin-top:3px}
.rep-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(58px,1fr));gap:5px;margin:6px 0}
.rep-grid>div{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:5px 3px;text-align:center}
.rep-grid i{display:block;font-style:normal;font-size:9px;color:#8a93a0;text-transform:uppercase;letter-spacing:.03em}
.rep-grid b{display:block;font-size:14px;font-weight:800;margin-top:2px}
.rep-grid b.bad{color:var(--bad)}.rep-grid b.good{color:var(--good)}
.rep-loot{margin-top:5px;font-weight:700;color:#e8dcc0}
.rep-loot.bad{color:#e08a8a}

/* toasts */
.toasts{position:fixed;top:calc(var(--safe-t) + 8px);left:0;right:0;z-index:60;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.toast{background:rgba(26,30,37,.97);border:1px solid var(--line);border-left:4px solid var(--info);
  border-radius:10px;padding:10px 14px;font-size:13px;font-weight:600;box-shadow:var(--sh);max-width:90%;
  animation:tin .25s ease}
.toast.good{border-left-color:var(--good)}
.toast.bad{border-left-color:var(--bad)}
.toast.out{animation:tout .3s ease forwards}
@keyframes tin{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}
@keyframes tout{to{transform:translateY(-14px);opacity:0}}

.incoming-banner{position:fixed;top:calc(var(--safe-t) + 6px);left:8px;right:8px;z-index:55;background:linear-gradient(90deg,#5a1d15,#3a1410);
  border:1px solid var(--bad);border-radius:10px;padding:10px 12px;font-size:13px;font-weight:700;color:#ffd9d2;
  box-shadow:var(--sh);display:flex;align-items:center;gap:8px;animation:tin .25s}

/* recruit reveal */
.reveal{text-align:center;padding:10px}
.reveal .rport{width:120px;height:120px;border-radius:18px;margin:6px auto;display:flex;align-items:center;justify-content:center;font-size:70px;animation:pop .4s}
.reveal .rname{font-size:24px;font-weight:900;margin-top:6px}
.dupe-note{color:var(--acc2);font-weight:700;margin-top:6px}
/* summon-reveal FX — rarity-tiered gacha burst (rotating rays + flash + overshoot entrance) */
.reveal{position:relative;overflow:hidden}
.reveal::before,.reveal::after{content:'';position:absolute;left:50%;top:96px;pointer-events:none;z-index:0}
.reveal::before{width:340px;height:340px;transform:translate(-50%,-50%);background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.13) 0deg 5deg,transparent 5deg 23deg);-webkit-mask:radial-gradient(circle,#000 10%,transparent 62%);mask:radial-gradient(circle,#000 10%,transparent 62%);opacity:0;animation:revrays 9s linear infinite,revfadein .7s ease forwards}
.reveal::after{width:150px;height:150px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,255,255,.92),rgba(255,255,255,0) 70%);opacity:0;animation:revflash .6s ease-out forwards}
.reveal .rport{position:relative;z-index:1;animation:revpop .55s cubic-bezier(.2,.9,.25,1.3)}
.reveal.r-SR::before{background:repeating-conic-gradient(from 0deg,rgba(120,170,255,.16) 0deg 5deg,transparent 5deg 22deg)}
.reveal.r-SSR::before{background:repeating-conic-gradient(from 0deg,rgba(240,200,105,.20) 0deg 5deg,transparent 5deg 20deg)}
.reveal.r-UR::before{background:repeating-conic-gradient(from 0deg,rgba(216,111,224,.22) 0deg 4deg,transparent 4deg 18deg)}
.reveal.r-SSR::after{background:radial-gradient(circle,rgba(255,226,150,.95),rgba(255,226,150,0) 70%)}
.reveal.r-UR::after{background:radial-gradient(circle,rgba(235,150,240,.95),rgba(235,150,240,0) 70%)}
@keyframes revrays{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes revfadein{from{opacity:0}to{opacity:.7}}
@keyframes revflash{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}30%{opacity:.95}100%{opacity:0;transform:translate(-50%,-50%) scale(1.7)}}
@keyframes revpop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.reveal::before,.reveal::after,.reveal .rport{animation:none!important}.reveal::before{opacity:.35}.reveal::after{opacity:0}}

/* misc */
.empty{text-align:center;color:var(--muted);padding:40px 20px;font-size:14px}
.notice-box{background:#0e1116;border:1px solid var(--line);border-radius:10px;padding:10px;font-size:13px;color:var(--dim);line-height:1.5;font-style:italic}
.notice-box.good{color:#bfe8c8;border-color:rgba(95,184,120,.4);background:linear-gradient(180deg,rgba(63,155,95,.12),#0e1116);font-style:normal}
.mission-active{background:linear-gradient(150deg,rgba(240,200,105,.16),rgba(224,83,58,.10) 60%,#11141a);border:1px solid rgba(240,200,105,.42);border-radius:13px;padding:13px 14px;margin:4px 0 10px;box-shadow:0 4px 22px rgba(224,140,40,.14)}
.mission-active .ma-tag{font:700 10px/1 ui-monospace,monospace;letter-spacing:.12em;color:#f0c869;opacity:.92;margin-bottom:7px}
.mission-active .ma-text{font-size:15.5px;font-weight:700;color:#fff;line-height:1.3}
/* first-login intro / explainer */
.intro-ov{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:22px;background:radial-gradient(120% 90% at 50% 0%,rgba(40,18,12,.86),rgba(6,8,12,.96));backdrop-filter:blur(6px);animation:introIn .35s ease}
.intro-ov.out{animation:introOut .3s ease forwards}
@keyframes introIn{from{opacity:0}to{opacity:1}}
@keyframes introOut{to{opacity:0}}
.intro-card{width:100%;max-width:380px;text-align:center;animation:introCard .4s cubic-bezier(.2,.8,.3,1)}
@keyframes introCard{from{transform:translateY(14px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.intro-skip{position:absolute;top:16px;right:18px;background:none;border:none;color:var(--dim);font-size:13px;font-weight:600;padding:6px 10px;cursor:pointer}
.intro-art{position:relative;width:200px;height:200px;margin:0 auto 18px;border-radius:24px;overflow:hidden;background:radial-gradient(circle at 50% 40%,rgba(240,200,105,.16),rgba(14,17,22,.9));border:1px solid rgba(240,200,105,.32);box-shadow:0 14px 44px rgba(224,140,40,.2)}
.intro-art img{width:100%;height:100%;object-fit:cover;object-position:center top}
.intro-art .intro-emoji{position:absolute;left:0;right:0;bottom:8px;font-size:34px;filter:drop-shadow(0 2px 5px rgba(0,0,0,.6))}
.intro-title{font-size:23px;font-weight:800;color:#fff;letter-spacing:.2px;margin-bottom:9px}
.intro-body{font-size:14.5px;line-height:1.55;color:var(--dim);min-height:66px;padding:0 6px}
.intro-dots{display:flex;gap:7px;justify-content:center;margin:18px 0}
.intro-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22);transition:.25s}
.intro-dots i.on{background:#f0c869;width:20px;border-radius:4px}
.intro-next{width:100%}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
hr.sep{border:none;border-top:1px solid var(--line);margin:14px 0}

/* ============ CONQUEST / SEASON ============ */
.season-bar{display:flex;align-items:center;gap:8px;width:100%;padding:7px 12px;
  background:linear-gradient(90deg,#1a1410,#171a20);border:none;border-bottom:1px solid var(--line);
  font-size:12px;font-weight:700;color:var(--txt);text-align:left}
.season-bar:active{background:#20242c}
.season-bar .sb-ic{font-size:15px}
.season-bar .sb-ph{padding:1px 7px;border-radius:5px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.sb-ph.prep{background:#28425e;color:#9bc1e6}.sb-ph.war{background:#5e3a1e;color:#f0c869}
.sb-ph.siege{background:#5a1d15;color:#ff9d8f}.sb-ph.settle{background:#33384200;color:var(--muted)}
.season-bar .sb-cd{color:var(--acc2);font-variant-numeric:tabular-nums}
.season-bar .sb-cap{margin-left:auto;color:var(--dim);font-size:11px}
.season-bar .sb-go{color:var(--muted);font-size:16px;margin-left:2px}
.season-head .phase-chip{padding:5px 12px;border-radius:8px;font-weight:800;font-size:13px}
.phase-chip.prep{background:#28425e;color:#9bc1e6}.phase-chip.war{background:#5e3a1e;color:#f0c869}
.phase-chip.siege{background:#5a1d15;color:#ff9d8f}.phase-chip.settle{background:#2a2f38;color:var(--muted)}
.turret-dot{width:13px;height:13px;border-radius:3px;display:inline-block;margin-right:5px;border:1px solid #000}
.turret-dot.mine{background:var(--acc2)}.turret-dot.enemy{background:var(--bad)}.turret-dot.neutral{background:#3a424e}
.fort-row{display:flex;align-items:center;gap:10px;padding:9px;border:1px solid var(--line);border-radius:10px;margin-bottom:7px;background:var(--panel)}
.fort-row.mine{border-color:var(--acc2);background:#1c1810}
.fort-row .fort-ic{font-size:22px;width:28px;text-align:center}
.own-badge{font-weight:700;font-size:12px}
.own-badge.mine{color:var(--acc2)}.own-badge.enemy{color:var(--bad)}.own-badge.neutral{color:var(--muted)}
.lb-row.me-row{background:#1c1810;border-radius:8px}
.event-bar{display:flex;align-items:center;gap:8px;width:100%;padding:6px 12px;background:linear-gradient(90deg,#0f1f29,#12202a);
  border:none;border-bottom:1px solid var(--line);font-size:12px;font-weight:700;color:var(--txt);text-align:left}
.event-bar:active{background:#16242e}
.event-bar.boss{background:linear-gradient(90deg,#2a1410,#1d1410)}
.event-bar .ev-ic{font-size:15px}
.event-bar .ev-desc{color:var(--dim);font-weight:400;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.event-bar .ev-cd{margin-left:auto;color:var(--cyber2);font-variant-numeric:tabular-nums}
.event-bar .ev-hp{flex:1;height:9px;border-radius:5px;background:#0c0f13;border:1px solid var(--line);overflow:hidden;max-width:170px}
.event-bar .ev-hpfill{display:block;height:100%;background:linear-gradient(90deg,#d8584e,#f0c869)}
.event-bar .ev-pct{color:var(--acc2);font-variant-numeric:tabular-nums}
.skill-dots{display:flex;gap:5px;margin-top:8px}
.skill-dots .sd{width:22px;height:6px;border-radius:3px;background:#0c0f13;border:1px solid var(--line)}
.skill-dots .sd.on{background:linear-gradient(90deg,var(--acc),var(--acc2));border-color:var(--acc2)}
/* hero gear */
.gear-slots{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:6px}
.gear-slot{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 6px;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:78px;justify-content:center}
.gear-slot:active{background:var(--panel2)}
.gear-slot .gear-ic{font-size:26px;line-height:1}
.gear-slot.r-common{border-color:#5a6470}
.gear-slot.r-rare{border-color:#4f9bd9;box-shadow:0 0 10px rgba(79,155,217,.18)}
.gear-slot.r-epic{border-color:#c87fe0;box-shadow:0 0 12px rgba(200,127,224,.22)}
.gear-name.r-common{color:#aeb6c0}.gear-name.r-rare{color:#6fb6f0}.gear-name.r-epic{color:#d9a3ee}
.gear-card.r-rare{border-color:#33506a}.gear-card.r-epic{border-color:#553868}
.gear-card .gear-ic{width:32px;text-align:center}
.scrollx{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.scrollx::-webkit-scrollbar{display:none}