:root{
  --font-body:'Consolas','Lucida Console','Courier New',monospace;
  --font-display:'Trebuchet MS','Arial Narrow','Segoe UI',sans-serif;
  --font-mono-display:'Consolas','Lucida Console','Courier New',monospace;
  --p:#00ffcc;   --p2:rgba(0,255,200,.12);  --p3:rgba(0,255,200,.22);
  --e:#ff3322;   --e2:rgba(255,50,30,.12);  --e3:rgba(255,50,30,.22);
  --glass:rgba(6,8,20,.72);
  --border:rgba(255,255,255,.07);
}

*{margin:0;padding:0;box-sizing:border-box}
body{background:#000;overflow:hidden;font-family:var(--font-body);
  color:#aaa;user-select:none;-webkit-user-select:none}
#gc{position:fixed;inset:0;cursor:crosshair}

#storage-notice{
  position:fixed;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  z-index:140;
  max-width:min(92vw,760px);
  padding:8px 14px;
  border:1px solid rgba(255,170,80,.28);
  border-radius:999px;
  background:rgba(40,18,8,.88);
  color:rgba(255,214,168,.96);
  text-align:center;
  font:700 10px var(--font-display);
  letter-spacing:1.6px;
  box-shadow:0 0 22px rgba(255,140,60,.14);
  pointer-events:none;
}


#hud{position:fixed;inset:0;pointer-events:none;z-index:20}


.hud-panel{
  position:absolute;
  bottom:max(16px,env(safe-area-inset-bottom,16px));
  width:178px;
  background:var(--glass);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--border);
  border-radius:10px;
  padding:0;
  overflow:hidden;
}
#p-panel{left:14px}
#e-panel{right:14px}
.hud-panel.danger-hp{
  box-shadow:0 0 20px rgba(255,80,40,.2);
  border-color:rgba(255,100,70,.2);
}
.hud-panel.danger-spin{
  box-shadow:0 0 20px rgba(255,180,0,.16);
}


.hud-panel .id-bar{
  height:3px;width:100%;
}
#p-panel .id-bar{background:linear-gradient(90deg,var(--p),transparent)}
#e-panel .id-bar{background:linear-gradient(270deg,var(--e),transparent)}


.hud-inner{padding:9px 10px 10px}


.hud-who{
  display:flex;align-items:center;gap:6px;
  margin-bottom:8px;
}
#e-panel .hud-who{flex-direction:row-reverse}

.hud-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
}
#p-panel .hud-dot{background:var(--p);box-shadow:0 0 6px var(--p)}
#e-panel .hud-dot{background:var(--e);box-shadow:0 0 6px var(--e)}

.hud-who-labels{display:flex;flex-direction:column}
#e-panel .hud-who-labels{align-items:flex-end}

.hud-top-name{
  font-family:var(--font-display);font-size:10px;font-weight:700;
  letter-spacing:1.5px;line-height:1;
}
#p-panel .hud-top-name{color:var(--p)}
#e-panel .hud-top-name{color:var(--e)}

.hud-role{
  font-size:8px;letter-spacing:2px;
  margin-top:1px;line-height:1;
}
#p-panel .hud-role{color:var(--p);opacity:.5}
#e-panel .hud-role{color:var(--e);opacity:.5}


.hud-hp-section{margin-bottom:7px}
.hud-hp-header{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:3px;
}
.hud-hp-lbl{font-size:8px;letter-spacing:1.5px;opacity:.4}
.hud-hp-num{font-size:9px;font-weight:700;font-family:var(--font-display)}
#p-panel .hud-hp-num{color:var(--p)}
#e-panel .hud-hp-num{color:var(--e)}

.hud-hp-track{
  height:12px;
  background:rgba(255,255,255,.04);
  border-radius:3px;overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
  position:relative;
}
.hud-hp-fill{
  height:100%;border-radius:2px;
  transition:width .1s linear,background .5s;
}


.hud-sub-bars{display:flex;flex-direction:column;gap:5px}
.hud-sub-row{display:flex;align-items:center;gap:6px}
#e-panel .hud-sub-row{flex-direction:row-reverse}
.hud-sub-lbl{font-size:7px;opacity:.3;letter-spacing:1px;width:20px;flex-shrink:0;line-height:1}
#e-panel .hud-sub-lbl{text-align:right}
.hud-sub-track{flex:1;height:4px;background:rgba(255,255,255,.04);border-radius:2px;overflow:hidden}
.hud-sub-fill{height:100%;border-radius:2px;transition:width .08s linear}
.sp-fill{background:linear-gradient(90deg,#0077dd,#00aaff)}
.bu-fill{background:linear-gradient(90deg,#cc6600,#ffaa00)}


#skill-panel{
  position:absolute;
  left:calc(14px + 178px + 8px);
  bottom:max(16px,env(safe-area-inset-bottom,16px));
  display:flex;flex-direction:column;gap:6px;
  pointer-events:auto;z-index:30;
}

.sk-btn{
  width:56px;height:56px;border-radius:10px;
  position:relative;cursor:pointer;
  pointer-events:auto;-webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;
  background:var(--glass);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1.5px solid rgba(255,255,255,.1);
  transition:transform .1s;
}
.sk-btn:active{transform:scale(.88)}
.sk-btn .sk-icon{font-size:17px;line-height:1;z-index:2;position:relative}
.sk-btn .sk-name{font-size:6.5px;letter-spacing:.5px;opacity:.6;margin-top:2px;
  z-index:2;position:relative;font-family:var(--font-display)}
.sk-btn .sk-key{font-size:7px;opacity:.28;z-index:2;position:relative;margin-top:1px}
.sk-btn .sk-cd-mask{position:absolute;bottom:0;left:0;width:100%;
  background:rgba(0,0,0,.78);pointer-events:none;z-index:3;transition:height .08s linear}
.sk-btn .sk-cd-txt{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--font-display);font-size:13px;font-weight:700;
  color:#fff;z-index:4;opacity:0;pointer-events:none}
.sk-btn .sk-burst-ring{position:absolute;inset:0;z-index:1;pointer-events:none}


.sk-btn.dash-ready{border-color:rgba(0,220,200,.7);
  box-shadow:0 0 10px rgba(0,200,180,.4),inset 0 0 8px rgba(0,200,180,.08)}

.sk-btn.dash-cooldown{border-color:rgba(0,80,70,.5);color:#224444}
.sk-btn.dash-cooldown .sk-cd-txt{opacity:1}

.sk-btn.guard-ready{
  border-color:rgba(110,180,255,.68);
  box-shadow:0 0 10px rgba(90,150,255,.34),inset 0 0 8px rgba(120,180,255,.08)
}

.sk-btn.guard-cooldown{border-color:rgba(55,70,96,.55);color:#324055}
.sk-btn.guard-cooldown .sk-cd-txt{opacity:1}

.sk-btn.guard-active{
  border-color:rgba(180,225,255,.94);
  box-shadow:0 0 22px rgba(110,180,255,.7),inset 0 0 14px rgba(140,210,255,.2);
  animation:guardPulse 0.95s ease-in-out infinite;
}

@keyframes guardPulse{
  0%,100%{box-shadow:0 0 12px rgba(100,170,255,.46),inset 0 0 10px rgba(140,210,255,.16)}
  50%{box-shadow:0 0 24px rgba(130,210,255,.88),inset 0 0 18px rgba(170,230,255,.24)}
}

.sk-btn.state-ready{
  border-color:rgba(255,200,0,.9);
  box-shadow:0 0 20px rgba(255,170,0,.7),inset 0 0 14px rgba(255,150,0,.14);
  animation:skPulse 1.1s ease-in-out infinite;
}
@keyframes skPulse{
  0%,100%{box-shadow:0 0 12px rgba(255,170,0,.5),inset 0 0 8px rgba(255,150,0,.08)}
  50%{box-shadow:0 0 26px rgba(255,200,0,.9),inset 0 0 18px rgba(255,180,0,.2)}
}

.sk-btn.state-need-energy{border-color:rgba(255,200,0,.18);color:#665500}

.sk-btn.state-cooldown{border-color:rgba(80,80,80,.4);color:#444}
.sk-btn.state-cooldown .sk-cd-txt{opacity:1}


#score-area{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  text-align:center;
}
.score-label-txt{font-size:8px;letter-spacing:4px;opacity:.28;margin-bottom:4px}
.pips-row{display:flex;align-items:center;gap:4px;justify-content:center}
.pip{width:11px;height:11px;border-radius:50%;border:1.5px solid rgba(255,255,255,.15);transition:all .3s}
.pip.p-won{background:var(--p);border-color:var(--p);box-shadow:0 0 8px var(--p)}
.pip.e-won{background:var(--e);border-color:var(--e);box-shadow:0 0 8px var(--e)}
.vs-txt{font-size:8px;opacity:.2;padding:0 3px}
#round-lbl{font-size:8px;opacity:.22;margin-top:3px;letter-spacing:2px}

#timer-txt{
  position:absolute;top:62px;left:50%;transform:translateX(-50%);
  font-family:var(--font-display);font-size:24px;font-weight:900;
  color:rgba(255,255,255,.55);letter-spacing:4px;text-align:center;
}
#timer-txt.urgent{color:#ff4444!important;text-shadow:0 0 16px rgba(255,50,50,.6)}


#msg-txt{
  position:absolute;top:36%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--font-display);font-size:18px;font-weight:700;
  color:#fff;text-shadow:0 0 24px rgba(0,200,255,.8);
  opacity:0;transition:opacity .22s;letter-spacing:2px;
  pointer-events:none;text-align:center;white-space:nowrap;
}
#msg-txt.tone-round{font-size:20px;letter-spacing:4px}
#msg-txt.tone-major{font-size:24px;letter-spacing:5px;text-shadow:0 0 26px rgba(255,220,120,.45)}
#msg-txt.tone-impact{font-size:26px;letter-spacing:5px;text-shadow:0 0 30px rgba(255,110,40,.58)}
#hint-bar{
  position:absolute;
  bottom:max(88px,calc(env(safe-area-inset-bottom,16px)+72px));
  left:50%;transform:translateX(-50%);
  font-size:10px;opacity:.28;letter-spacing:1px;text-align:center;pointer-events:none;
}


#skill-flash{
  position:fixed;inset:0;pointer-events:none;z-index:19;opacity:0;
  border:3px solid transparent;transition:opacity .07s;
}
#skill-flash.instant{border-color:#ff6600;box-shadow:inset 0 0 50px rgba(255,80,0,.3)}
#skill-flash.sustained{border-color:#00aaff;box-shadow:inset 0 0 50px rgba(0,160,255,.2)}


#act-swap{
  display:none;position:absolute;right:14px;top:14px;
  width:40px;height:40px;border-radius:8px;
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.35);font-family:var(--font-display);
  align-items:center;justify-content:center;flex-direction:column;
  cursor:pointer;pointer-events:auto;z-index:30;touch-action:manipulation;
  background:var(--glass);backdrop-filter:blur(8px);
  -webkit-tap-highlight-color:transparent;transition:border-color .2s,color .2s;
}
#act-swap:hover,#act-swap:active{border-color:var(--p);color:var(--p)}
#act-swap.visible{display:flex}
#act-swap span{font-size:15px;line-height:1}
#act-swap small{font-size:5.5px;opacity:.45;letter-spacing:.5px;margin-top:1px}


.ov{
  position:fixed;inset:0;z-index:100;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(2,3,14,.96);
  transition:opacity .3s;
}
.ov.hide{opacity:0;pointer-events:none}

#ov-title{
  padding-top:max(70px,calc(env(safe-area-inset-top,0px) + 58px));
  padding-right:24px;
  padding-bottom:20px;
  padding-left:24px;
  box-sizing:border-box;
  overflow-y:auto;
}

#ov-loadout{
  padding-top:max(78px,calc(env(safe-area-inset-top,0px) + 66px));
  padding-right:24px;
  padding-bottom:16px;
  padding-left:24px;
  box-sizing:border-box;
  justify-content:flex-start;
  overflow-y:auto;
  overflow-x:hidden;
}


#ov-title h1{
  font-family:var(--font-display);font-size:clamp(28px,8vw,52px);
  font-weight:900;letter-spacing:8px;color:var(--p);
  text-shadow:0 0 40px rgba(0,255,200,.4);margin-bottom:4px;
}
#ov-title .sub{font-size:10px;letter-spacing:10px;opacity:.28;color:#aaa;margin-bottom:20px}
#ov-title .tagline{font-size:11px;opacity:.4;margin-bottom:48px;letter-spacing:1px;
  max-width:380px;text-align:center;line-height:1.8}
.locale-switcher{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.locale-btn{
  min-width:56px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.02);
  color:rgba(220,235,245,.7);
  cursor:pointer;
  font:700 9px var(--font-display);
  letter-spacing:1px;
  transition:all .2s;
}
.locale-btn:hover{
  border-color:rgba(255,255,255,.32);
  color:#fff;
  background:rgba(255,255,255,.05);
}
.locale-btn.active{
  border-color:var(--p);
  color:var(--p);
  background:rgba(0,255,200,.07);
}
.title-locale-switcher{
  margin-bottom:18px;
}
.title-status{
  width:min(520px,92vw);
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:20px;
}
.title-status-line{
  padding:10px 14px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  font-size:10px;
  letter-spacing:2px;
  color:rgba(230,245,255,.82);
  text-align:left;
}
.home-top-panel{
  width:min(720px,94vw);
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 42px;
  grid-template-areas:
    'prev stage next'
    'copy copy copy';
  column-gap:12px;
  row-gap:14px;
  align-items:stretch;
  margin-bottom:18px;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid rgba(0,255,200,.14);
  background:linear-gradient(135deg,rgba(0,255,200,.06),rgba(255,255,255,.025));
}
.home-top-stage-shell{
  grid-area:stage;
  position:relative;
  min-width:0;
  min-height:300px;
}
.home-top-stage-shell::before{
  content:none;
}
.home-top-stage-shell.locked-preview::before{
  content:none;
}
.home-top-stage{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  min-height:300px;
}
.home-top-stage canvas{
  width:100%!important;
  height:100%!important;
  display:block;
}
.home-top-stage-shell.locked-preview .home-top-stage canvas{
  filter:saturate(.02) brightness(.24) contrast(.82) blur(.42px);
}
.home-top-copy{
  grid-area:copy;
  min-width:0;
  max-width:560px;
  margin:0 auto;
  text-align:center;
}
.home-top-kicker{
  font:700 9px var(--font-display);
  letter-spacing:3px;
  color:rgba(190,255,240,.66);
}
.home-top-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:center;
  gap:8px;
  margin-top:6px;
}
.home-top-name{
  font:700 21px var(--font-display);
  letter-spacing:3px;
  color:#f4fffd;
}
.home-top-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:20px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  font:700 8px var(--font-display);
  letter-spacing:2px;
  color:rgba(255,220,150,.76);
}
.home-top-count.unlocked{
  border-color:rgba(0,255,200,.12);
  background:rgba(0,255,200,.03);
  color:rgba(170,238,226,.76);
}
.home-top-count.locked{
  border-color:rgba(255,200,120,.18);
  background:rgba(255,180,0,.06);
  color:rgba(255,220,150,.9);
}
.home-top-type{
  margin-top:4px;
  font-size:9px;
  letter-spacing:3px;
  color:rgba(255,220,150,.82);
}
.home-top-type.is-hidden{
  display:none;
}
.home-top-stage-shell.locked-preview + .home-top-copy .home-top-type{
  color:rgba(255,214,148,.72);
}
.home-top-skill{
  margin-top:8px;
  font-size:9px;
  line-height:1.7;
  color:rgba(235,245,255,.88);
}
.home-top-traits{
  margin-top:6px;
  font-size:9px;
  line-height:1.7;
  letter-spacing:1px;
  color:rgba(255,255,255,.62);
  max-width:520px;
  margin-left:auto;
  margin-right:auto;
}
.home-top-stage-shell.locked-preview + .home-top-copy .home-top-skill{
  color:rgba(255,232,190,.82);
}
.home-top-stage-shell.locked-preview + .home-top-copy .home-top-traits{
  color:rgba(220,228,238,.54);
}
.home-top-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:center;
  width:30px;
  height:84px;
  min-height:84px;
  padding:0;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.015);
  color:rgba(220,235,245,.58);
  cursor:pointer;
  font:700 12px var(--font-display);
  transition:all .2s;
}
#btn-home-top-prev{grid-area:prev}
#btn-home-top-next{grid-area:next}
.home-top-nav:hover{
  border-color:rgba(255,255,255,.24);
  color:#fff;
  background:rgba(255,255,255,.04);
}
.home-top-nav:disabled{
  cursor:default;
  opacity:.45;
  border-color:rgba(255,255,255,.08);
  color:rgba(220,235,245,.32);
  background:rgba(255,255,255,.01);
}
.deco-line{width:160px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,255,200,.25),transparent);margin-bottom:28px}
.title-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:min(320px,90vw);
}
.title-actions .big-btn{
  width:100%;
  margin-top:0;
}
.title-alt-btn{
  width:100%;
  padding:11px 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.02);
  color:rgba(220,235,245,.72);
  cursor:pointer;
  letter-spacing:3px;
  font:700 10px var(--font-display);
  transition:all .2s;
}
.title-alt-btn:hover{
  border-color:rgba(255,255,255,.36);
  color:#fff;
  background:rgba(255,255,255,.06);
}
.title-alt-btn:disabled,
.title-alt-btn.is-disabled,
.title-actions .big-btn:disabled,
.title-actions .big-btn.is-disabled{
  cursor:not-allowed;
  opacity:.46;
  border-color:rgba(255,180,120,.16);
  color:rgba(255,210,150,.58);
  background:rgba(255,180,120,.04);
  box-shadow:none;
}
.title-actions .big-btn:disabled:hover,
.title-actions .big-btn.is-disabled:hover{
  background:rgba(255,180,120,.04);
  color:rgba(255,210,150,.58);
}


#ov-loadout h2{font-family:var(--font-display);font-size:18px;font-weight:700;
  letter-spacing:5px;color:var(--p);margin-bottom:2px}
#ov-loadout .sub2{font-size:9px;letter-spacing:4px;opacity:.25;margin-bottom:18px}
.loadout-locale-switcher{
  margin-bottom:10px;
}
.currency-bar{
  margin-bottom:12px;padding:7px 14px;border-radius:999px;
  border:1px solid rgba(255,180,0,.18);background:rgba(255,180,0,.05);
  color:rgba(255,210,120,.9);font:700 10px var(--font-display);letter-spacing:2px;
}
.featured-top-panel{
  width:min(720px,94vw);
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:14px;
  margin-bottom:12px;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid rgba(0,255,200,.14);
  background:linear-gradient(135deg,rgba(0,255,200,.07),rgba(255,255,255,.025));
}
.featured-top-title,.featured-traits-title{
  font:700 9px var(--font-display);
  letter-spacing:3px;
  color:rgba(190,255,240,.66);
}
.featured-top-name{
  margin-top:6px;
  font:700 21px var(--font-display);
  letter-spacing:3px;
  color:#f4fffd;
}
.featured-top-type{
  margin-top:4px;
  font-size:9px;
  letter-spacing:3px;
  color:rgba(255,220,150,.82);
}
.featured-top-skill{
  margin-top:10px;
  font-size:10px;
  line-height:1.7;
  color:rgba(235,245,255,.88);
}
.featured-top-meta{
  padding-left:14px;
  border-left:1px solid rgba(255,255,255,.07);
}
.featured-top-traits{
  margin-top:8px;
  font-size:9px;
  line-height:1.8;
  letter-spacing:1px;
  color:rgba(255,255,255,.62);
}
.quick-battle-panel{
  width:min(720px,94vw);
  margin-bottom:14px;
}
.quick-battle-panel.hide{display:none}
.quick-arena-panel{
  display:grid;
  grid-template-columns:30px minmax(0,1fr) 30px;
  gap:12px;
  align-items:stretch;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid rgba(0,255,200,.14);
  background:linear-gradient(135deg,rgba(0,255,200,.07),rgba(255,255,255,.025));
}
.quick-arena-stage-shell{
  min-width:0;
}
.quick-arena-stage{
  width:100%;
  min-height:260px;
  height:260px;
}
.quick-arena-stage canvas,
.quick-selected-top-stage canvas{
  width:100%!important;
  height:100%!important;
  display:block;
}
.quick-arena-copy{
  margin-top:4px;
  text-align:center;
}
.quick-arena-kicker,
.quick-selected-top-kicker{
  font:700 9px var(--font-display);
  letter-spacing:3px;
  color:rgba(190,255,240,.66);
}
.quick-arena-head{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:baseline;
  gap:8px;
  margin-top:6px;
}
.quick-arena-name,
.quick-selected-top-name{
  font:700 20px var(--font-display);
  letter-spacing:3px;
  color:#f4fffd;
}
.quick-arena-status,
.quick-selected-top-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:20px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  font:700 8px var(--font-display);
  letter-spacing:2px;
}
.quick-arena-status.unlocked,
.quick-selected-top-status.unlocked{
  border-color:rgba(0,255,200,.12);
  background:rgba(0,255,200,.03);
  color:rgba(170,238,226,.76);
}
.quick-arena-status.locked,
.quick-selected-top-status.locked{
  border-color:rgba(255,200,120,.18);
  background:rgba(255,180,0,.06);
  color:rgba(255,220,150,.9);
}
.quick-arena-desc{
  margin-top:8px;
  font-size:9px;
  line-height:1.7;
  color:rgba(235,245,255,.84);
}
.quick-arena-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:center;
  width:30px;
  height:84px;
  min-height:84px;
  padding:0;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.015);
  color:rgba(220,235,245,.58);
  cursor:pointer;
  font:700 12px var(--font-display);
  transition:all .2s;
}
.quick-arena-nav:hover{
  border-color:rgba(255,255,255,.24);
  color:#fff;
  background:rgba(255,255,255,.04);
}
.quick-arena-nav:disabled{
  cursor:default;
  opacity:.45;
  border-color:rgba(255,255,255,.08);
  color:rgba(220,235,245,.32);
  background:rgba(255,255,255,.01);
}
.quick-ready-panel{
  display:grid;
  grid-template-columns:minmax(220px,280px) minmax(240px,320px);
  justify-content:center;
  align-items:stretch;
  gap:14px;
  margin-top:12px;
}
.quick-selected-top-panel,
.quick-start-panel{
  min-width:0;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.quick-selected-top-panel{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  gap:10px;
}
.quick-selected-top-stage{
  width:118px;
  height:108px;
}
.quick-selected-top-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.quick-selected-top-name{
  margin-top:0;
  font-size:18px;
}
.quick-selected-top-status{
  display:none;
}
.quick-start-panel{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.quick-start-hint{
  font-size:9px;
  line-height:1.7;
  letter-spacing:1px;
  color:rgba(235,245,255,.76);
}
#btn-fight{
  width:100%;
  margin-top:14px;
}
#btn-fight.danger-disabled{
  border-color:rgba(255,96,84,.42);
  color:rgba(255,146,136,.96);
  background:rgba(110,20,14,.18);
  box-shadow:none;
}
#btn-fight.danger-disabled:hover{
  background:rgba(110,20,14,.18);
  color:rgba(255,146,136,.96);
}
#btn-fight.danger-disabled:disabled{
  cursor:not-allowed;
}
#btn-fight.arena-locked{
  border-color:rgba(255,190,120,.34);
  color:rgba(255,224,164,.96);
}
#btn-fight.cta-unlock{
  border-color:rgba(255,190,120,.38);
  color:rgba(255,228,176,.98);
  background:linear-gradient(180deg, rgba(120,74,18,.22), rgba(70,32,10,.24));
}
#btn-fight.cta-unlock:hover{
  background:linear-gradient(180deg, rgba(140,86,22,.28), rgba(82,38,12,.3));
}
#btn-fight.cta-trial{
  border-color:rgba(116,220,255,.34);
  color:rgba(200,244,255,.98);
  background:linear-gradient(180deg, rgba(18,68,92,.22), rgba(10,36,56,.24));
}
#btn-fight.cta-trial:hover{
  background:linear-gradient(180deg, rgba(24,84,112,.28), rgba(12,44,68,.3));
}
.path-fight-btn{
  width:min(320px,92vw);
}
.shell-route-bar{
  width:min(720px,94vw);
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  margin-bottom:12px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.route-back-btn,
.route-chip-btn{
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.02);
  color:rgba(220,235,245,.72);
  cursor:pointer;
  letter-spacing:2px;
  font:700 9px var(--font-display);
  transition:all .2s;
}
.route-back-btn:hover,
.route-chip-btn:hover{
  border-color:rgba(255,255,255,.36);
  color:#fff;
  background:rgba(255,255,255,.06);
}
.shell-route-copy{
  min-width:0;
}
.shell-route-title{
  font:700 11px var(--font-display);
  letter-spacing:3px;
  color:#f4fffd;
}
.shell-route-context{
  margin-top:4px;
  font-size:8px;
  line-height:1.6;
  letter-spacing:1px;
  color:rgba(255,255,255,.56);
}
.shell-route-actions{
  display:flex;
  gap:6px;
  justify-content:flex-end;
}
.mode-tabs{display:flex;gap:8px;margin-bottom:10px}
.mode-tab{
  min-width:148px;padding:8px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.02);
  color:rgba(255,255,255,.45);cursor:pointer;letter-spacing:2px;
  font:700 10px var(--font-display);transition:all .2s;
}
.mode-tab.active{border-color:var(--p);color:var(--p);background:rgba(0,255,200,.06)}
.mode-hint{font-size:9px;letter-spacing:1px;opacity:.45;margin-bottom:12px;max-width:520px;text-align:center}
.challenge-panel{
  width:min(520px,92vw);margin-bottom:14px;padding:10px 14px;border-radius:8px;
  border:1px solid rgba(0,255,200,.14);background:rgba(0,255,200,.04);text-align:center;
}
.challenge-panel.hide{display:none}
.challenge-line{font-size:9px;letter-spacing:2px;opacity:.75}
.challenge-line + .challenge-line{margin-top:5px}
.challenge-route-strip{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:5px;
  margin-top:10px;
}
.route-node{
  position:relative;
  width:28px;
  height:28px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.45);
  font:700 9px var(--font-display);
  letter-spacing:1px;
}
.route-node.cleared{
  border-color:rgba(0,255,200,.28);
  background:rgba(0,255,200,.08);
  color:var(--p);
}
.route-node.current{
  border-color:rgba(255,220,140,.42);
  background:rgba(255,180,0,.12);
  color:rgba(255,232,175,.96);
}
.route-node.locked{
  opacity:.42;
}
.route-node.boss{
  box-shadow:0 0 0 1px rgba(255,120,80,.12) inset;
}
.route-node.final{
  box-shadow:0 0 0 1px rgba(255,220,120,.16) inset;
}
.route-node.checkpoint::after{
  content:'';
  width:5px;
  height:5px;
  border-radius:50%;
  background:rgba(255,255,255,.72);
  position:absolute;
  transform:translateY(15px);
}
.challenge-rank-title{
  margin-top:10px;
  font:700 9px var(--font-display);
  letter-spacing:3px;
  color:rgba(190,255,240,.82);
}
.challenge-rank-strip{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
  margin-top:8px;
}
.challenge-rank-btn{
  min-width:96px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.02);
  color:rgba(255,255,255,.5);
  cursor:pointer;
  letter-spacing:2px;
  font:700 8px var(--font-display);
  transition:all .2s;
}
.challenge-rank-btn:hover{
  border-color:rgba(0,255,200,.35);
  color:rgba(190,255,240,.88);
  background:rgba(0,255,200,.05);
}
.challenge-rank-btn.active{
  border-color:var(--p);
  color:var(--p);
  background:rgba(0,255,200,.09);
}
.challenge-rank-btn.locked,
.challenge-rank-btn:disabled{
  cursor:default;
  border-color:rgba(255,180,0,.14);
  color:rgba(255,210,120,.62);
  background:rgba(255,180,0,.05);
}
.challenge-rank-note{
  margin-top:8px;
  font-size:8px;
  letter-spacing:1px;
  opacity:.55;
  line-height:1.5;
}
.workshop-panel{
  width:min(720px,94vw);
  margin-bottom:14px;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(255,180,0,.14);
  background:rgba(255,180,0,.04);
}
.workshop-panel.hide{display:none}
.settings-panel{
  width:min(720px,94vw);
  margin-bottom:14px;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
}
.settings-panel.hide{display:none}
.settings-title{
  font:700 10px var(--font-display);
  letter-spacing:3px;
  color:rgba(220,240,255,.92);
  text-align:center;
}
.settings-hint{
  margin-top:6px;
  font-size:9px;
  letter-spacing:1px;
  opacity:.58;
  text-align:center;
}
.settings-line{
  margin-top:10px;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
  font-size:9px;
  letter-spacing:1px;
  color:rgba(230,245,255,.82);
}
.settings-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.settings-toggle-btn{
  min-width:148px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(0,255,200,.22);
  background:rgba(0,255,200,.05);
  color:rgba(190,255,240,.88);
  cursor:pointer;
  letter-spacing:2px;
  font:700 9px var(--font-display);
  transition:all .2s;
}
.settings-toggle-btn:hover{
  border-color:rgba(0,255,200,.4);
  background:rgba(0,255,200,.09);
  color:#f4fffd;
}
.settings-toggle-btn.off{
  border-color:rgba(255,180,0,.18);
  background:rgba(255,180,0,.05);
  color:rgba(255,220,150,.84);
}
.workshop-title{
  font:700 10px var(--font-display);
  letter-spacing:3px;
  color:rgba(255,224,160,.95);
  text-align:center;
}
.workshop-hint{
  margin-top:6px;
  margin-bottom:12px;
  font-size:9px;
  letter-spacing:1px;
  opacity:.52;
  text-align:center;
}
.research-track{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.015);
}
.research-track + .research-track{margin-top:8px}
.research-track.locked{
  border-color:rgba(255,180,0,.12);
  background:rgba(255,180,0,.03);
}
.research-track.maxed{
  border-color:rgba(0,255,200,.18);
  background:rgba(0,255,200,.04);
}
.research-copy{min-width:0}
.research-name{
  font:700 10px var(--font-display);
  letter-spacing:2px;
  color:#eee;
}
.research-desc{
  margin-top:4px;
  font-size:8px;
  letter-spacing:.8px;
  opacity:.5;
  line-height:1.6;
}
.research-meta{
  min-width:0;
  text-align:left;
}
.research-level,.research-bonus,.research-next{
  font-size:8px;
  letter-spacing:1.3px;
}
.research-level{color:rgba(255,220,150,.92)}
.research-bonus{margin-top:4px;color:rgba(180,255,235,.88)}
.research-next{margin-top:4px;opacity:.5}
.research-buy{
  min-width:118px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,180,0,.18);
  background:rgba(255,180,0,.08);
  color:rgba(255,220,150,.94);
  cursor:pointer;
  letter-spacing:2px;
  font:700 9px var(--font-display);
  transition:all .2s;
}
.research-buy:hover{
  border-color:rgba(255,220,150,.38);
  background:rgba(255,180,0,.13);
}
.research-buy:disabled{
  cursor:default;
  border-color:rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.32);
}

.arena-sel{display:flex;gap:6px;margin-bottom:18px}
.arena-opt{
  padding:6px 16px;
  border:1px solid rgba(255,255,255,.1);font-size:9px;letter-spacing:2px;
  cursor:pointer;color:rgba(255,255,255,.3);
  transition:all .2s;font-family:var(--font-display);border-radius:4px;
}
.arena-opt.sel,.arena-opt:hover{border-color:var(--p);color:var(--p);background:rgba(0,255,200,.03)}
.arena-opt.locked{
  border-color:rgba(255,180,0,.14);color:rgba(255,210,120,.7);background:rgba(255,180,0,.04);
}
.arena-opt.locked:hover{border-color:rgba(255,210,120,.35);color:rgba(255,225,150,.92);background:rgba(255,180,0,.08)}

.cards{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.card{
  width:138px;padding:16px 12px 12px;
  border:1px solid rgba(255,255,255,.08);
  cursor:pointer;transition:all .22s;text-align:center;
  position:relative;background:rgba(255,255,255,.01);border-radius:8px;
}
.card:hover{border-color:rgba(0,255,200,.3);background:rgba(0,255,200,.02)}
.card.sel{border-color:var(--p);background:rgba(0,255,200,.04);
  box-shadow:0 0 20px rgba(0,255,200,.1)}
.card.locked{
  border-color:rgba(255,180,0,.16);
  background:rgba(255,180,0,.04);
}
.card.locked:hover{border-color:rgba(255,210,120,.35);background:rgba(255,180,0,.07)}
.card.locked h3,.card.locked .card-type,.card.locked .card-stats{color:rgba(255,220,160,.78)}
.card-icon{width:48px;height:48px;border-radius:50%;margin:0 auto 10px;
  display:flex;align-items:center;justify-content:center;font-size:18px}
.card h3{font-family:var(--font-display);font-size:11px;font-weight:700;
  margin-bottom:1px;letter-spacing:1px;color:#ddd}
.card-type{font-size:8px;letter-spacing:3px;opacity:.3;margin-bottom:9px}
.card-stats{font-size:8.5px;line-height:1.85;opacity:.45;text-align:left;padding:0 2px}
.card-skill-tag{font-size:8px;margin-top:9px;padding:4px 7px;
  background:rgba(255,200,0,.06);color:rgba(255,200,0,.75);
  letter-spacing:.5px;border:1px solid rgba(255,200,0,.15);border-radius:3px}
.card.locked .card-skill-tag{
  background:rgba(255,180,0,.12);
  color:rgba(255,225,150,.95);
  border-color:rgba(255,200,0,.22);
}
.card.sel::after{content:'OK';position:absolute;top:8px;right:10px;
  color:var(--p);font-size:10px}
.card.locked::after{content:'LOCK';position:absolute;top:8px;right:10px;
  color:rgba(255,210,120,.95);font-size:9px}

.big-btn{
  font-family:var(--font-display);font-size:12px;letter-spacing:4px;
  padding:13px 44px;background:transparent;
  border:1.5px solid var(--p);color:var(--p);
  cursor:pointer;transition:all .22s;margin-top:24px;border-radius:4px;
}
.big-btn:hover{background:var(--p);color:#000;box-shadow:0 0 30px rgba(0,255,200,.3)}

.battle-intro{
  position:fixed;
  top:110px;
  left:50%;
  transform:translateX(-50%);
  z-index:55;
  width:min(420px,86vw);
  padding:12px 16px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(4,8,20,.86);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  text-align:center;
  pointer-events:none;
  opacity:1;
  transition:opacity .18s ease;
}
.battle-intro.hide{opacity:0}
.battle-intro-title{
  font:700 18px var(--font-display);
  letter-spacing:3px;
  color:#f6fffd;
}
.battle-intro-meta{
  margin-top:6px;
  font-size:9px;
  letter-spacing:2px;
  color:rgba(255,230,170,.82);
}


#ov-round h2{font-family:var(--font-display);font-size:34px;font-weight:900;
  letter-spacing:4px;text-shadow:0 0 30px rgba(255,255,255,.2)}
#ov-round .rd-detail{font-size:10px;letter-spacing:3px;opacity:.4;margin-top:10px}
#ov-round .rd-next{font-size:9px;opacity:.2;margin-top:36px;letter-spacing:2px}

#ov-match h2{font-family:var(--font-display);font-size:32px;font-weight:900;letter-spacing:4px}
#ov-match .mt-sub{font-family:var(--font-display);font-size:20px;font-weight:400;
  opacity:.4;margin-top:10px;margin-bottom:18px;letter-spacing:5px}
#ov-match .mt-meta{font-size:10px;letter-spacing:2px;opacity:.5;margin-top:8px;margin-bottom:14px;text-align:center;max-width:560px;line-height:1.7}
#ov-match .mt-breakdown{
  max-width:560px;
  margin-bottom:12px;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  font-size:10px;
  letter-spacing:1.6px;
  line-height:1.7;
  text-align:center;
  color:rgba(240,246,255,.86);
}
#ov-match .mt-wallet{font-size:10px;letter-spacing:2px;opacity:.72;margin-top:0;margin-bottom:12px;text-align:center;color:rgba(255,210,120,.92)}
#ov-match .mt-next{
  margin-bottom:20px;
  font-size:10px;
  letter-spacing:2px;
  color:rgba(190,255,240,.82);
}

.sec-btn{
  font-family:var(--font-display);font-size:10px;letter-spacing:3px;
  padding:10px 28px;background:transparent;
  border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.4);
  cursor:pointer;transition:all .2s;border-radius:4px;
}
.sec-btn:hover{border-color:rgba(255,255,255,.6);color:#ddd}


@keyframes hpBeat{0%,100%{opacity:1}50%{opacity:.4}}


@media(max-height:900px){
  #ov-title{
    padding-top:max(62px,calc(env(safe-area-inset-top,0px) + 48px));
    padding-bottom:8px;
  }
  #ov-loadout{
    padding-top:max(68px,calc(env(safe-area-inset-top,0px) + 54px));
    padding-bottom:10px;
  }
  #ov-title .sub{margin-bottom:16px}
  #ov-title .tagline{
    font-size:10px;
    margin-bottom:22px;
  }
  .title-locale-switcher{margin-bottom:14px}
  .title-status{margin-bottom:10px}
  .title-status-line{
    padding:8px 12px;
    font-size:9px;
  }
  .home-top-panel{
    row-gap:10px;
    margin-bottom:8px;
    padding:10px 12px;
  }
  .home-top-stage-shell,
  .home-top-stage{
    height:220px;
    max-height:220px;
    min-height:180px;
  }
  .home-top-name{font-size:19px}
  .home-top-skill{
    margin-top:6px;
    font-size:8.5px;
    line-height:1.55;
  }
  .home-top-traits{
    margin-top:4px;
    font-size:8.5px;
    line-height:1.55;
  }
  .deco-line{margin-bottom:18px}
  .title-actions{gap:6px}
  .title-actions .big-btn{
    padding:11px 36px;
    font-size:11px;
  }
  .title-alt-btn{
    padding:8px 18px;
    font-size:9px;
  }
}


@media(max-width:540px) and (orientation:portrait){
  #storage-notice{
    top:8px;
    padding:7px 10px;
    font-size:8px;
    line-height:1.5;
    border-radius:14px;
  }
  .hud-panel{width:calc(47vw - 60px);min-width:114px}
  #skill-panel{left:calc(47vw - 46px);bottom:max(14px,env(safe-area-inset-bottom,14px))}
  .sk-btn{width:44px;height:44px}
  .sk-btn .sk-key{display:none}
  .hud-hp-track{height:10px}

  .ov{justify-content:flex-start;padding:14px 14px 0;overflow-y:auto;-webkit-overflow-scrolling:touch}
  #ov-loadout h2{font-size:14px;margin-top:4px}
  .arena-sel{margin-bottom:10px;gap:5px}
  .arena-opt{padding:5px 11px;font-size:8.5px}
  .mode-tabs{width:100%;flex-direction:column;gap:6px}
  .mode-tab{width:100%;min-width:0}
  .challenge-panel{width:100%;padding:9px 12px}
  .challenge-rank-btn{flex:1 1 30%;min-width:0}
  .currency-bar{width:100%;text-align:center}
  .featured-top-panel{width:100%;grid-template-columns:1fr;gap:10px;padding:12px 14px}
  .featured-top-meta{padding-left:0;border-left:none;border-top:1px solid rgba(255,255,255,.07);padding-top:10px}
  .quick-battle-panel{width:100%}
  .quick-arena-panel{
    width:100%;
    grid-template-columns:26px minmax(0,1fr) 26px;
    gap:10px;
    padding:12px 14px;
  }
  .quick-arena-stage{min-height:222px;height:222px}
  .quick-ready-panel{grid-template-columns:1fr;gap:10px}
  .quick-selected-top-panel{gap:8px}
  .quick-selected-top-stage{width:96px;height:92px}
  .quick-arena-nav{width:26px;height:72px;min-height:72px}
  .shell-route-bar{width:100%;grid-template-columns:1fr;justify-items:stretch}
  .shell-route-actions{width:100%;justify-content:stretch}
  .route-back-btn,.route-chip-btn{width:100%}
  .workshop-panel{width:100%;padding:10px 12px}
  .settings-panel{width:100%;padding:10px 12px}
  .settings-toggle-btn{width:100%}
  .research-track{
    grid-template-columns:1fr;
    gap:8px;
  }
  .research-meta{text-align:left}
  .research-buy{width:100%}

  .cards{flex-direction:column;gap:7px;width:100%}
  .card{
    width:100%;border-radius:7px;
    display:grid;
    grid-template-columns:46px 1fr auto;
    grid-template-rows:auto auto;
    align-items:center;column-gap:10px;row-gap:2px;
    padding:10px 12px;text-align:left;
  }
  .card-icon{width:46px;height:46px;margin:0;grid-row:1/3;font-size:17px}
  .card h3{font-size:11px;grid-column:2;grid-row:1;margin-bottom:0}
  .card-type{font-size:8px;grid-column:2;grid-row:2;margin-bottom:0}
  .card-stats{display:none}
  .card-skill-tag{grid-column:3;grid-row:1/3;font-size:8px;padding:3px 7px;
    white-space:nowrap;margin-top:0;align-self:center}
  .card.sel::after{top:6px;right:7px}

  .big-btn{padding:12px 32px;font-size:11px;margin-top:16px;margin-bottom:max(20px,env(safe-area-inset-bottom,20px))}
  .title-actions{width:100%}
  .title-status{width:100%}
  .home-top-panel{
    width:100%;
    grid-template-columns:36px minmax(0,1fr) 36px;
    column-gap:10px;
    row-gap:12px;
    padding:12px 14px;
  }
  .home-top-stage-shell,
  .home-top-stage{
    min-height:232px;
  }
  .home-top-head{
    flex-direction:column;
    align-items:center;
  }
  .home-top-nav{
    width:26px;
    height:72px;
    min-height:72px;
    padding:0;
    border-radius:999px;
  }
  .locale-switcher{width:100%}
  .locale-btn{flex:1 1 0;min-width:0}
  .battle-intro{top:86px}
}


@media(max-height:500px) and (orientation:landscape){
  #storage-notice{
    top:6px;
    padding:6px 10px;
    font-size:8px;
  }
  .hud-panel{bottom:max(5px,env(safe-area-inset-bottom,5px));width:138px}
  .hud-inner{padding:6px 8px 7px}
  #skill-panel{
    left:calc(14px + 138px + 7px);
    bottom:max(5px,env(safe-area-inset-bottom,5px));gap:5px;
  }
  .sk-btn{width:40px;height:40px}
  .sk-btn .sk-key,.sk-btn .sk-name{display:none}
  .hud-hp-track{height:9px}
  #score-area{top:4px}
  #timer-txt{top:40px;font-size:19px}

  .ov{
    flex-direction:row;flex-wrap:wrap;gap:6px;
    justify-content:center;align-content:flex-start;
    padding:8px max(10px,env(safe-area-inset-right,10px))
             max(8px,env(safe-area-inset-bottom,8px))
             max(10px,env(safe-area-inset-left,10px));
    overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  #ov-loadout h2{font-size:13px;width:100%;text-align:center;margin-bottom:2px;margin-top:0}
  #ov-loadout .sub2{width:100%;text-align:center;margin-bottom:6px}
  .arena-sel{margin-bottom:4px;gap:5px}
  .arena-opt{padding:4px 10px;font-size:8px}
  .mode-tabs{width:100%;justify-content:center;margin-bottom:6px}
  .mode-tab{min-width:126px;padding:7px 12px}
  .locale-switcher{width:100%}
  .locale-btn{flex:1 1 0;min-width:0}
  .mode-hint{width:100%;margin-bottom:8px}
  .challenge-panel{margin-bottom:8px}
  .challenge-rank-btn{min-width:82px;padding:5px 9px}
  .currency-bar{margin-bottom:8px}
  .featured-top-panel{
    width:100%;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding:12px 14px;
  }
  .quick-battle-panel{width:100%}
  .quick-arena-panel{
    width:100%;
    grid-template-columns:26px minmax(0,1fr) 26px;
    gap:10px;
    padding:12px 14px;
  }
  .quick-arena-stage{min-height:196px;height:196px}
  .quick-ready-panel{width:100%;grid-template-columns:minmax(180px,240px) minmax(220px,280px);justify-content:center;gap:10px}
  .quick-selected-top-panel{gap:8px}
  .quick-selected-top-stage{width:86px;height:82px}
  .quick-arena-nav{width:24px;height:64px;min-height:64px}
  .shell-route-bar{
    width:100%;
    margin-bottom:8px;
    grid-template-columns:auto minmax(0,1fr);
  }
  .shell-route-actions{
    grid-column:1/3;
  }
  .workshop-panel{margin-bottom:8px;padding:10px 12px}
  .settings-panel{margin-bottom:8px;padding:10px 12px}
  .research-track{
    grid-template-columns:1fr auto;
    gap:8px;
  }
  .research-copy{grid-column:1/3}
  .research-meta{grid-column:1/2}
  .research-buy{
    min-width:96px;
    padding:8px 12px;
    align-self:center;
  }
  .cards{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:7px}
  .card{width:104px;padding:9px 8px}
  .card-icon{width:34px;height:34px;font-size:14px;margin-bottom:6px}
  .card h3{font-size:9px}
  .card-type{font-size:7px;margin-bottom:6px}
  .card-stats{font-size:7.5px;line-height:1.65}
  .card-skill-tag{font-size:7px;padding:3px 5px;margin-top:6px}
  .big-btn{
    padding:9px 22px;font-size:10px;margin-top:4px;
    margin-bottom:max(5px,env(safe-area-inset-bottom,5px));width:100%;
  }
}