:root{
  --bg:#07111f;
  --panel:rgba(15,27,47,.94);
  --panel2:rgba(255,255,255,.065);
  --line:#35547a;
  --text:#eef7ff;
  --sub:#b8cbe3;
  --accent:#68ddff;
  --accent2:#ffd36a;
  --danger:#ff6f7b;
  --ok:#78ffb4;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Segoe UI",sans-serif;overscroll-behavior:none}
body{background:radial-gradient(circle at top,#24446c,#07111f 70%)}
button,a{font:inherit}
button{touch-action:manipulation}
#app{min-height:100vh}
.screen{min-height:100vh;padding:16px;display:flex;justify-content:center;align-items:center}
.card{width:min(1120px,100%);background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:20px;box-shadow:0 18px 60px rgba(0,0,0,.34)}
.badge{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:6px 10px;color:var(--accent);font-size:13px;font-weight:900;background:rgba(255,255,255,.05);margin-bottom:10px}
h1{font-size:clamp(34px,9vw,68px);line-height:1.02;margin:8px 0 12px;letter-spacing:.02em}
h2{font-size:clamp(24px,6vw,42px);line-height:1.1;margin:8px 0 12px}
h3{margin:8px 0;font-size:20px}
p{color:var(--sub);line-height:1.7}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{appearance:none;border:0;text-decoration:none;color:#07111f;background:linear-gradient(135deg,var(--accent),var(--ok));font-weight:900;font-size:20px;border-radius:18px;padding:16px 20px;min-height:56px;box-shadow:0 10px 30px rgba(104,221,255,.22);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.btn:active{transform:translateY(1px)}
.btn.secondary{background:rgba(255,255,255,.08);color:var(--text);border:1px solid var(--line);box-shadow:none}
.title-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:center}
.hero-stage{height:360px;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025));position:relative;border:1px solid rgba(255,255,255,.08)}
.hero-stage:after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(transparent,rgba(0,0,0,.5))}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:14px}
.char-card{border:1px solid var(--line);border-radius:18px;background:var(--panel2);padding:12px;cursor:pointer;min-height:250px;display:flex;flex-direction:column;gap:8px}
.char-card.selected{outline:3px solid var(--accent);background:rgba(104,221,255,.12)}
.char-img-wrap{height:120px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.015));display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.char-img-wrap img{max-height:132px;max-width:100%;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(0,0,0,.4))}
.char-card b{font-size:18px}
.char-card span{font-size:13px;color:var(--sub);line-height:1.45}
.detail{border-left:5px solid var(--accent2);background:rgba(255,211,106,.08);padding:12px;border-radius:12px;margin:12px 0}
.detail-flex{display:grid;grid-template-columns:1.5fr 260px;gap:16px;align-items:center}
.detail-preview-wrap{text-align:center}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:8px}
.stat small{display:block;color:var(--sub);font-size:11px}
.stat b{font-size:18px}
.vs-layout{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center}
.vs-side{min-height:380px;border:1px solid var(--line);border-radius:20px;background:var(--panel2);padding:14px;text-align:center;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.vs-mark{font-size:clamp(34px,8vw,66px);font-weight:1000;color:var(--accent2);text-align:center;text-shadow:0 0 24px rgba(255,211,106,.45)}
.sprite-preview{image-rendering:pixelated;image-rendering:crisp-edges;display:block;margin:0 auto;background:transparent}
.detail-preview{border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.vs-canvas{width:min(100%,220px);height:auto;aspect-ratio:auto;background:transparent}
.game-card{width:min(1260px,100%);padding:12px}
.game-layout{display:grid;grid-template-columns:1fr 300px;gap:12px;align-items:start}
.canvas-wrap{position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#06101d}
canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges}
.canvas-wrap canvas{width:100%;height:auto;aspect-ratio:16/9;background:#102033}
.hud{position:absolute;left:10px;right:10px;top:10px;display:grid;grid-template-columns:1fr 86px 1fr;gap:10px;align-items:center;pointer-events:none}
.hpbox{background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:8px}
.name{font-weight:900;font-size:14px;margin-bottom:5px;text-shadow:0 2px 4px rgba(0,0,0,.6)}
.meter{height:14px;background:#1a2638;border-radius:999px;overflow:hidden}
.meter.energy{height:7px;margin-top:4px;background:#24324a}
.meter.energy i{background:linear-gradient(90deg,#ffd36a,#fff2a8)}
.enemy .meter.enemy-energy i{background:linear-gradient(90deg,#fff2a8,#ffd36a)}
.meter.special-meter{height:8px;margin-top:4px;background:#2b203e}
.meter.special-meter i{background:linear-gradient(90deg,#ff5de4,#ffe47a,#ffffff)}
.enemy .meter.enemy-special i{background:linear-gradient(90deg,#ffffff,#ffe47a,#ff5de4)}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#fff)}
.enemy .meter i{background:linear-gradient(90deg,#fff,var(--danger))}
.timer{height:58px;border-radius:16px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:1000}
.side-panel{border:1px solid var(--line);border-radius:18px;background:var(--panel2);padding:12px}
.debug{font-size:12px;color:var(--sub);border-top:1px solid rgba(255,255,255,.1);padding-top:8px;margin-top:8px}
.controls{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.ctl{padding:16px 6px;border-radius:14px;text-align:center;background:rgba(255,255,255,.1);border:1px solid var(--line);font-weight:900;color:var(--text);touch-action:none;cursor:pointer;min-height:54px;user-select:none}
.ctl.active,.ctl:active{background:rgba(104,221,255,.28)}
.result-hero{height:300px;display:flex;align-items:flex-end;justify-content:center;background:rgba(255,255,255,.05);border-radius:20px;border:1px solid var(--line);overflow:hidden}
.result-canvas{width:min(100%,280px);height:auto}
.small{font-size:12px;color:var(--sub)}
@media(max-width:860px){
  .screen{padding:10px;align-items:flex-start}
  .card{padding:14px;border-radius:20px}
  .title-grid,.game-layout,.vs-layout,.detail-flex{grid-template-columns:1fr}
  .hero-stage{height:260px}
  .hero-canvas{width:100%;height:100%}
  .grid{grid-template-columns:1fr}
  .char-card{min-height:auto;display:grid;grid-template-columns:110px 1fr;align-items:center}
  .char-img-wrap{height:112px}
  .char-img-wrap img{max-height:120px}
  .vs-mark{font-size:36px}
  .vs-side{min-height:220px}
  .hud{grid-template-columns:1fr 58px 1fr;gap:5px;top:6px;left:6px;right:6px}
  .hpbox{padding:5px;border-radius:10px}
  .name{font-size:11px;margin-bottom:3px}
  .meter{height:10px}.meter.energy{height:5px;margin-top:3px}
  .timer{height:42px;font-size:22px}
  .side-panel{font-size:13px}
  .controls{position:sticky;bottom:calc(8px + env(safe-area-inset-bottom));grid-template-columns:repeat(4,1fr);background:rgba(7,17,31,.92);border:1px solid var(--line);border-radius:18px;padding:8px;z-index:10}
  .ctl{padding:14px 4px;min-height:50px}
  .btn{width:100%;font-size:18px}
}
body.game-active{overflow-y:auto;overscroll-behavior:none}
body.game-active .screen{min-height:100vh;align-items:flex-start}

@media(min-width:861px){
  body.game-active{
    overflow:hidden;
  }
  body.game-active .screen{
    height:100vh;
    min-height:100vh;
    padding:16px;
    overflow:hidden;
  }
  body.game-active .game-card{
    height:calc(100vh - 32px);
    max-height:calc(100vh - 32px);
    overflow:hidden;
  }
  body.game-active .game-layout{
    height:100%;
  }
  body.game-active .side-panel{
    max-height:100%;
    overflow:auto;
  }
  body.game-active .side-panel{
    padding:10px;
  }
  body.game-active .story-box{
    margin:8px 0;
    padding:9px 10px;
  }
  body.game-active .controls{
    gap:6px;
  }
  body.game-active .ctl{
    min-height:44px;
    padding:9px 4px;
  }
}


/* v7 controls */
.control-help{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.055);
  border-radius:14px;
  padding:10px 12px;
  margin:10px 0;
}
.control-help h4{
  margin:0 0 6px;
  color:var(--accent2);
}
.ctl{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  line-height:1.1;
}
.ctl b{
  display:block;
  font-size:16px;
}
.ctl small{
  display:block;
  color:var(--sub);
  font-size:10px;
  font-weight:700;
}
.ctl.attack{border-color:rgba(255,211,106,.65)}
.ctl.projectile{border-color:rgba(104,221,255,.70)}
.ctl.special{border-color:rgba(255,139,209,.70)}
.ctl.guard{border-color:rgba(120,255,180,.55)}
.ctl.active,.ctl:active{
  transform:translateY(1px);
  box-shadow:0 0 18px rgba(104,221,255,.24) inset;
}
canvas:focus{
  outline:2px solid rgba(104,221,255,.45);
  outline-offset:2px;
}
@media(max-width:860px){
  .controls{
    grid-template-columns:repeat(5,1fr);
  }
  .ctl b{font-size:14px}
  .ctl small{font-size:9px}
}


/* v8: punch / kick / special gauge */
.ctl.punch{border-color:rgba(255,211,106,.75)}
.ctl.kick{border-color:rgba(255,150,90,.75)}
.ctl.dash{border-color:rgba(120,255,180,.65)}
.ctl.special b::after{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-left:4px;
  border-radius:50%;
  background:#ff5de4;
  box-shadow:0 0 8px #ff5de4;
}
@media(max-width:860px){
  .controls{grid-template-columns:repeat(5,1fr)}
  .ctl{min-height:48px}
}


/* v9: safer explicit restart button */
.btn.danger-lite{
  background:rgba(255,111,123,.12);
  color:#ffdce0;
  border:1px solid rgba(255,111,123,.55);
  box-shadow:none;
}
.btn.danger-lite:active{
  background:rgba(255,111,123,.22);
}


/* v10 gameplay progression */
.level-pill{
  display:inline-block;
  font-size:14px;
  vertical-align:middle;
  color:#07111f;
  background:linear-gradient(135deg,#ffd36a,#fff1a6);
  border-radius:999px;
  padding:4px 10px;
  margin-left:8px;
  font-weight:900;
  white-space:nowrap;
}


/* v11 UI / story / clipping fixes */
.hud{
  top:8px;
  left:8px;
  right:8px;
  grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);
}
.hpbox{
  min-width:0;
  overflow:hidden;
}
.name{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.canvas-wrap{
  min-height:0;
}
.story-box{
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:10px 12px;
  margin:10px 0;
}
.story-box h4{
  margin:0 0 6px;
  color:var(--accent2);
}
.story-box p{
  margin:0;
  font-size:13px;
}
.char-card{
  min-height:290px;
}
.char-img-wrap{
  height:170px;
}
.char-img-wrap img{
  max-height:165px;
  object-fit:contain;
}
.detail-preview{
  width:260px;
  height:260px;
}
.title-grid .hero-stage{
  border:2px solid rgba(104,221,255,.28);
  box-shadow:inset 0 0 30px rgba(104,221,255,.12);
}
.card{
  border-color:rgba(104,221,255,.30);
}
@media(max-width:860px){
  .hud{
    grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr);
    gap:4px;
  }
  .hpbox{padding:4px}
  .name{font-size:10px}
  .char-card{
    min-height:auto;
    grid-template-columns:130px 1fr;
  }
  .char-img-wrap{
    height:140px;
  }
  .char-img-wrap img{
    max-height:138px;
  }
  .detail-preview{
    width:220px;
    height:220px;
  }
}


/* arcade character select */
.select-screen{
  align-items:flex-start;
  background:
    linear-gradient(180deg,rgba(104,221,255,.10),transparent 32%),
    radial-gradient(circle at 50% 0,rgba(255,211,106,.10),transparent 36%);
}
.select-card{
  width:min(1240px,100%);
  background:
    linear-gradient(180deg,rgba(18,34,58,.98),rgba(8,18,32,.98)),
    var(--panel);
  border-color:rgba(104,221,255,.38);
}
.select-header{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:8px 14px;
  align-items:center;
}
.select-header .badge{margin:0}
.select-header h2{margin:0}
.select-header p{
  grid-column:1/-1;
  margin:0;
}
.select-showcase{
  margin-top:14px;
  padding:12px;
  border:1px solid rgba(104,221,255,.20);
  border-radius:18px;
  background:
    linear-gradient(90deg,rgba(104,221,255,.08),transparent 25%,transparent 75%,rgba(255,111,123,.08)),
    rgba(0,0,0,.18);
}
.select-showcase .vs-side{
  min-height:330px;
  justify-content:center;
  gap:6px;
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 18px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.select-showcase .vs-canvas{
  width:min(100%,260px);
}
.select-showcase .vs-side h3{
  margin:6px 0 0;
  color:var(--accent2);
  font-size:26px;
  letter-spacing:.08em;
}
.select-showcase .vs-side b{
  font-size:22px;
}
.select-detail{
  display:grid;
  grid-template-columns:minmax(0,1fr) 230px;
  margin:12px 0;
  background:rgba(0,0,0,.22);
}
.select-detail .detail-preview{
  width:230px;
  height:230px;
}
.roster-grid{
  grid-template-columns:repeat(9,minmax(0,1fr));
  gap:8px;
  margin-top:10px;
}
.roster-grid .char-card{
  min-height:0;
  padding:8px;
  border-radius:10px;
  gap:5px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025)),
    rgba(11,23,40,.92);
  border-color:rgba(104,221,255,.26);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);
}
.roster-grid .char-card.selected{
  outline:0;
  border-color:var(--accent);
  background:
    linear-gradient(180deg,rgba(104,221,255,.30),rgba(104,221,255,.08)),
    rgba(11,23,40,.92);
  box-shadow:0 0 0 3px rgba(104,221,255,.35),0 0 28px rgba(104,221,255,.18);
}
.roster-grid .char-img-wrap{
  height:92px;
  border-radius:8px;
  background:linear-gradient(180deg,rgba(5,14,25,.55),rgba(44,67,93,.36));
}
.char-card-canvas{
  width:100%;
  max-height:100%;
  height:auto;
}
.roster-grid .char-card b{
  font-size:14px;
  line-height:1.15;
}
.roster-grid .char-card span{
  font-size:11px;
  line-height:1.25;
}
.roster-grid .char-card span:last-child{
  color:var(--accent2);
}
.select-actions{
  margin-top:14px;
  justify-content:center;
}
@media(max-width:1100px){
  .roster-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:860px){
  .select-header{
    display:block;
  }
  .select-header h2{margin:12px 0}
  .select-showcase{
    padding:10px;
  }
  .select-showcase .vs-side{
    min-height:0;
    padding:12px;
  }
  .select-showcase .vs-canvas{
    width:min(100%,260px);
  }
  .select-detail{
    grid-template-columns:1fr;
  }
  .roster-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .roster-grid .char-card{
    display:flex;
    min-height:0;
  }
  .roster-grid .char-img-wrap{
    height:112px;
  }
}


/* VF-style versus select refinements */
.select-card{
  padding:14px 18px;
}
.select-header{
  grid-template-columns:auto 1fr auto;
}
.select-header h2{
  font-size:clamp(30px,4.7vw,52px);
}
.select-header p{
  font-size:15px;
  line-height:1.45;
}
.select-showcase{
  position:relative;
  grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr);
  gap:10px;
  min-height:330px;
  margin-top:10px;
  padding:10px;
  overflow:hidden;
}
.select-showcase:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(255,77,42,.20),transparent 30%,transparent 70%,rgba(255,50,153,.18)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 2px,transparent 2px 7px);
  pointer-events:none;
}
.select-showcase .vs-side{
  position:relative;
  min-height:306px;
  padding:10px 14px 12px;
  justify-content:flex-end;
  overflow:hidden;
}
.select-showcase .vs-side:first-child{
  background:
    linear-gradient(90deg,rgba(255,75,36,.34),rgba(255,255,255,.04) 48%,rgba(255,255,255,.02)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 20px),
    rgba(9,20,35,.90);
}
.select-showcase .vs-side:last-child{
  background:
    linear-gradient(270deg,rgba(255,54,151,.32),rgba(255,255,255,.04) 48%,rgba(255,255,255,.02)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 20px),
    rgba(9,20,35,.90);
}
.select-showcase .vs-canvas{
  width:min(100%,280px);
  filter:drop-shadow(0 18px 20px rgba(0,0,0,.36));
}
.fighter-label{
  margin-top:2px;
  color:var(--accent2);
  font-size:21px;
  font-weight:1000;
  letter-spacing:.13em;
}
.enemy-label{
  color:#ff9ed0;
}
.select-showcase .vs-side b{
  font-size:23px;
  line-height:1.1;
}
.select-showcase .vs-side span{
  color:#dcecff;
  font-size:15px;
  font-weight:800;
}
.fighter-history{
  width:100%;
  max-width:430px;
  min-height:34px;
  margin:5px auto 0;
  color:#c9dcf3;
  font-size:11px;
  line-height:1.4;
  text-align:left;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.select-showcase .vs-mark{
  position:relative;
  align-self:center;
  display:flex;
  min-height:160px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-block:2px solid rgba(255,211,106,.45);
}
.select-showcase .vs-mark span{
  color:#fff2a8;
  font-size:24px;
  font-weight:1000;
}
.select-showcase .vs-mark strong{
  color:var(--accent2);
  font-size:64px;
  line-height:1;
  text-shadow:0 0 24px rgba(255,211,106,.50);
}
.roster-grid{
  position:relative;
  z-index:1;
  grid-template-columns:repeat(9,minmax(0,1fr));
  margin-top:8px;
  padding:8px;
  border:1px solid rgba(104,221,255,.28);
  border-radius:10px;
  background:rgba(0,0,0,.38);
}
.roster-grid .char-card{
  padding:6px;
  border-radius:6px;
  text-align:center;
}
.roster-grid .char-img-wrap{
  height:76px;
  border-radius:4px;
}
.roster-grid .char-card b{
  font-size:13px;
}
.roster-grid .char-card span{
  font-size:10px;
}
.roster-grid .char-card span:last-child{
  display:none;
}
.select-detail{
  margin-top:10px;
}
@media(max-width:1100px){
  .select-showcase{
    grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr);
  }
  .select-showcase .vs-mark strong{
    font-size:46px;
  }
  .roster-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:860px){
  .select-card{
    padding:14px;
  }
  .select-showcase{
    grid-template-columns:1fr;
    min-height:0;
  }
  .select-showcase .vs-side{
    min-height:0;
  }
  .select-showcase .vs-canvas{
    width:min(100%,290px);
  }
  .select-showcase .vs-mark{
    min-height:76px;
    border:0;
  }
  .select-showcase .vs-mark strong{
    font-size:52px;
  }
  .fighter-history{
    -webkit-line-clamp:4;
  }
  .roster-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .roster-grid .char-card{
    display:flex;
  }
  .roster-grid .char-img-wrap{
    height:80px;
  }
}


/* stage select */
.stage-screen{
  align-items:flex-start;
  background:
    radial-gradient(circle at 50% 0,rgba(255,211,106,.16),transparent 34%),
    linear-gradient(180deg,rgba(104,221,255,.08),transparent 42%);
}
.stage-card-shell{
  width:min(1240px,100%);
  padding:14px;
  background:
    linear-gradient(180deg,rgba(17,32,54,.98),rgba(7,17,31,.98)),
    var(--panel);
}
.stage-topbar{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:8px 14px;
  align-items:center;
}
.stage-topbar .badge{margin:0}
.stage-topbar h2{
  margin:0;
  font-size:clamp(30px,4.7vw,52px);
}
.stage-topbar p{
  grid-column:1/-1;
  margin:0;
  font-size:15px;
  line-height:1.45;
}
.stage-hero{
  position:relative;
  height:360px;
  margin-top:12px;
  overflow:hidden;
  border:1px solid rgba(104,221,255,.32);
  border-radius:16px;
  background:#06101d;
}
.stage-hero img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  image-rendering:pixelated;
}
.stage-hero:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.62),transparent 46%,rgba(0,0,0,.25)),
    linear-gradient(0deg,rgba(0,0,0,.45),transparent 38%);
}
.stage-hero-info{
  position:absolute;
  left:20px;
  bottom:18px;
  z-index:1;
  width:min(520px,calc(100% - 40px));
  text-shadow:0 3px 12px rgba(0,0,0,.75);
}
.stage-hero-info small{
  display:block;
  color:var(--accent);
  font-size:13px;
  font-weight:1000;
  letter-spacing:.12em;
}
.stage-hero-info strong{
  display:block;
  margin-top:4px;
  color:#fff;
  font-size:clamp(30px,5vw,56px);
  line-height:1;
}
.stage-hero-info span{
  display:block;
  margin-top:6px;
  color:var(--accent2);
  font-size:20px;
  font-weight:900;
}
.stage-hero-info p{
  max-width:520px;
  margin:8px 0 0;
  color:#d9eaff;
  font-size:14px;
  line-height:1.5;
}
.stage-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  margin-top:10px;
  padding:8px;
  border:1px solid rgba(104,221,255,.24);
  border-radius:12px;
  background:rgba(0,0,0,.32);
}
.stage-card{
  appearance:none;
  min-width:0;
  padding:6px;
  border:1px solid rgba(104,221,255,.28);
  border-radius:8px;
  background:rgba(255,255,255,.055);
  color:var(--text);
  cursor:pointer;
}
.stage-card.selected{
  border-color:var(--accent);
  background:rgba(104,221,255,.18);
  box-shadow:0 0 0 3px rgba(104,221,255,.30),0 0 24px rgba(104,221,255,.18);
}
.stage-card img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:5px;
  image-rendering:pixelated;
}
.stage-card span{
  display:block;
  margin-top:5px;
  font-size:12px;
  font-weight:900;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.stage-actions{
  margin-top:12px;
  justify-content:center;
}
@media(max-width:1100px){
  .stage-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:860px){
  .stage-card-shell{
    padding:14px;
  }
  .stage-topbar{
    display:block;
  }
  .stage-topbar h2{
    margin:12px 0;
  }
  .stage-hero{
    height:260px;
  }
  .stage-hero-info{
    left:14px;
    bottom:12px;
    width:calc(100% - 28px);
  }
  .stage-hero-info p{
    display:none;
  }
  .stage-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* arcade shell polish */
.arcade-menu-screen,
.select-screen,
.stage-screen,
.result-screen,
.loading-screen{
  position:relative;
  min-height:100vh;
  align-items:center;
  padding:10px;
  overflow:hidden auto;
  background:#040914;
}
.arcade-menu-screen:before,
.select-screen:before,
.stage-screen:before,
.result-screen:before,
.loading-screen:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 5px),
    radial-gradient(circle at 50% 0,rgba(104,221,255,.18),transparent 38%),
    linear-gradient(180deg,#102641 0%,#07111f 46%,#030711 100%);
}
.arcade-menu-screen:after,
.select-screen:after,
.stage-screen:after,
.result-screen:after,
.loading-screen:after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 120px rgba(0,0,0,.85),inset 0 0 0 2px rgba(104,221,255,.10);
}
.title-card,
.select-card,
.stage-card-shell,
.result-card,
.loading-card{
  position:relative;
  z-index:1;
  width:min(1240px,100%);
  border-radius:4px;
  border:2px solid rgba(104,221,255,.55);
  background:
    linear-gradient(180deg,rgba(10,24,43,.96),rgba(3,8,17,.98)),
    #07111f;
  box-shadow:
    0 0 0 4px rgba(0,0,0,.55),
    0 0 32px rgba(104,221,255,.18),
    inset 0 0 0 1px rgba(255,255,255,.06);
}
.badge{
  border-radius:2px;
  border-color:rgba(104,221,255,.70);
  background:rgba(0,0,0,.60);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.btn.arcade-btn,
.arcade-menu .btn,
.select-actions .btn,
.stage-actions .btn,
.result-actions .btn{
  min-width:180px;
  min-height:58px;
  padding:10px 16px;
  border-radius:3px;
  border:2px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg,#ffee91,#ffb83d);
  color:#09111f;
  text-transform:uppercase;
  box-shadow:0 6px 0 rgba(0,0,0,.52),0 0 22px rgba(255,211,106,.20);
}
.btn.arcade-btn span,
.arcade-menu .btn span,
.result-actions .btn span{
  display:block;
  color:#402000;
  font-size:10px;
  letter-spacing:.14em;
  line-height:1;
}
.btn.arcade-btn b,
.arcade-menu .btn b,
.result-actions .btn b{
  display:block;
  font-size:19px;
  line-height:1.25;
}
.btn.secondary{
  background:linear-gradient(180deg,rgba(48,71,101,.98),rgba(20,33,55,.98));
  color:#eef7ff;
}
.btn.secondary span{color:#9cdfff}

.title-screen{
  overflow:hidden;
}
.title-card{
  min-height:min(720px,calc(100vh - 20px));
  padding:10px;
}
.title-frame{
  position:relative;
  min-height:calc(100vh - 56px);
  grid-template-columns:minmax(420px,.92fr) minmax(480px,1.08fr);
  gap:10px;
  padding:10px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(90deg,rgba(255,72,48,.12),transparent 36%,rgba(104,221,255,.11)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 22px);
}
.title-copy{
  display:flex;
  min-height:100%;
  flex-direction:column;
  justify-content:center;
  padding:14px 18px;
}
.title-copy h1{
  margin:12px 0 8px;
  color:#fff;
  font-size:clamp(54px,7vw,92px);
  line-height:.95;
  text-shadow:0 5px 0 #101928,0 0 24px rgba(104,221,255,.35);
}
.title-sub{
  color:var(--accent2);
  font-size:18px;
  font-weight:1000;
  letter-spacing:.12em;
}
.title-mode-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:4px;
  margin:18px 0 20px;
  border-block:2px solid rgba(104,221,255,.35);
  padding:8px 0;
}
.title-mode-strip span{
  color:#d9eaff;
  font-size:12px;
  font-weight:1000;
  text-align:center;
}
.arcade-menu{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  width:min(380px,100%);
}
.title-footer{
  margin-top:18px;
  color:#88a8c8;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
}
.title-hero-stage{
  height:auto;
  min-height:100%;
  border-radius:2px;
  border:1px solid rgba(104,221,255,.45);
  box-shadow:inset 0 0 40px rgba(0,0,0,.45);
}
.title-hero-stage:after{
  height:65%;
  background:linear-gradient(transparent,rgba(0,0,0,.72));
}

.select-header,
.stage-topbar{
  padding:8px 0 10px;
  border-bottom:2px solid rgba(104,221,255,.35);
}
.select-header .level-pill,
.stage-topbar .level-pill{
  justify-self:end;
  align-self:center;
  margin-left:0;
}
.select-header h2,
.stage-topbar h2,
.result-card h2{
  text-shadow:0 4px 0 #101928,0 0 20px rgba(104,221,255,.25);
}
.select-header p,
.stage-topbar p{
  color:#c8ddf5;
  font-weight:800;
}
.select-showcase,
.stage-hero,
.stage-grid,
.roster-grid,
.select-detail,
.result-layout{
  border-radius:3px;
}
.select-detail{
  border-left:0;
  border:1px solid rgba(255,211,106,.38);
  background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.22));
}
.select-detail .story-box,
.result-winner{
  border-radius:2px;
  background:rgba(0,0,0,.28);
}
.stage-hero{
  border-width:2px;
  border-color:rgba(255,211,106,.45);
}
.stage-card{
  border-radius:3px;
  background:linear-gradient(180deg,rgba(34,56,83,.95),rgba(9,19,33,.95));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.stage-card img{
  border-radius:1px;
}

.result-card{
  max-width:1040px;
  padding:16px;
}
.result-card h2{
  margin:8px 0 16px;
  color:var(--accent2);
  font-size:clamp(42px,8vw,86px);
  text-align:center;
  letter-spacing:.08em;
}
.result-layout{
  grid-template-columns:280px minmax(180px,.7fr) minmax(260px,1fr);
  padding:12px;
  border:1px solid rgba(104,221,255,.35);
  background:
    linear-gradient(90deg,rgba(255,211,106,.10),transparent 45%,rgba(104,221,255,.10)),
    rgba(0,0,0,.28);
}
.result-left{
  text-align:center;
}
.result-left strong{
  display:block;
  margin-top:8px;
  color:#fff;
  font-size:28px;
}
.result-center{
  align-self:center;
  text-align:center;
}
.result-center p{
  margin:7px 0;
  color:#d9eaff;
  line-height:1.45;
}
.result-winner{
  align-self:stretch;
  margin:0;
}
.result-actions{
  margin-top:14px;
  justify-content:center;
}
.loading-card{
  max-width:720px;
  padding:32px;
  text-align:center;
}
.loading-bar{
  height:18px;
  margin:20px 0 12px;
  border:1px solid rgba(104,221,255,.55);
  background:rgba(0,0,0,.55);
}
.loading-bar i{
  display:block;
  width:72%;
  height:100%;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
}
@media(max-width:860px){
  .arcade-menu-screen,
  .select-screen,
  .stage-screen,
  .result-screen,
  .loading-screen{
    align-items:flex-start;
    padding:10px;
    overflow:auto;
  }
  .title-card,
  .select-card,
  .stage-card-shell,
  .result-card{
    border-radius:4px;
  }
  .title-card{
    min-height:auto;
  }
  .title-frame{
    min-height:0;
    grid-template-columns:1fr;
  }
  .title-copy{
    padding:10px;
  }
  .title-copy h1{
    font-size:clamp(44px,14vw,72px);
  }
  .title-hero-stage{
    min-height:300px;
  }
  .arcade-menu{
    width:100%;
  }
  .result-layout{
    grid-template-columns:1fr;
  }
}

/* one-screen arcade select refresh */
.select-screen,
.stage-screen{
  align-items:center;
  padding:8px;
  overflow:hidden;
}
.select-card,
.stage-card-shell{
  height:min(748px,calc(100vh - 16px));
  max-height:calc(100vh - 16px);
  padding:10px 14px;
  display:grid;
  gap:8px;
  overflow:hidden;
}
.select-card{
  grid-template-rows:auto minmax(0,1fr) 34px 116px 54px;
}
.stage-card-shell{
  grid-template-rows:auto minmax(0,1fr) 54px;
}
.select-header,
.stage-topbar{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:4px 12px;
  align-items:center;
  padding:0 0 8px;
}
.select-header h2,
.stage-topbar h2{
  margin:0;
  font-size:clamp(34px,4.4vw,52px);
  line-height:.95;
}
.select-header p,
.stage-topbar p{
  grid-column:1/-1;
  margin:0;
  font-size:13px;
  line-height:1.25;
}
.select-showcase{
  display:grid;
  grid-template-columns:minmax(0,1fr) 82px minmax(0,1fr);
  gap:8px;
  min-height:0;
  margin:0;
  padding:8px;
}
.select-showcase .vs-side{
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  min-height:0;
  height:100%;
  padding:8px 12px;
  justify-content:stretch;
  align-items:end;
  border-radius:2px;
}
.select-showcase .vs-side.active-side{
  box-shadow:inset 0 0 0 2px rgba(255,211,106,.72),0 0 26px rgba(255,211,106,.18);
}
.select-portrait{
  align-self:stretch;
  width:min(100%,380px);
  max-height:100%;
}
.select-showcase .vs-side:first-child .select-portrait{
  justify-self:start;
}
.select-showcase .vs-side:last-child .select-portrait{
  justify-self:end;
}
.fighter-info{
  width:100%;
  padding:6px 8px 4px;
  background:linear-gradient(180deg,rgba(3,8,17,.12),rgba(3,8,17,.72));
  border-top:1px solid rgba(255,255,255,.12);
  text-align:left;
}
.fighter-label{
  margin:0;
  font-size:16px;
  line-height:1;
}
.select-showcase .vs-side b{
  display:block;
  margin-top:3px;
  font-size:24px;
}
.select-showcase .vs-side span{
  display:block;
  color:#fff;
  font-size:14px;
  line-height:1.2;
}
.fighter-history{
  max-width:none;
  min-height:0;
  margin:4px 0 0;
  font-size:11px;
  line-height:1.35;
  -webkit-line-clamp:3;
}
.fighter-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:3px;
  margin-top:5px;
}
.fighter-stats small{
  padding:3px 4px;
  border:1px solid rgba(104,221,255,.25);
  background:rgba(0,0,0,.34);
  color:#d9eaff;
  font-size:10px;
  font-weight:900;
  text-align:center;
}
.select-showcase .vs-mark{
  min-height:0;
}
.select-showcase .vs-mark strong{
  font-size:54px;
}
.select-status-strip{
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto auto;
  gap:8px;
  align-items:center;
  min-height:0;
  padding:5px 8px;
  border:1px solid rgba(255,211,106,.42);
  background:linear-gradient(90deg,rgba(255,211,106,.14),rgba(0,0,0,.24));
}
.select-status-strip span,
.select-status-strip b{
  color:#fff;
  font-size:14px;
  font-weight:1000;
  white-space:nowrap;
}
.select-status-strip b{
  color:var(--accent2);
}
.select-status-strip em,
.select-status-strip small{
  min-width:0;
  overflow:hidden;
  color:#cfe3fb;
  font-size:12px;
  font-style:normal;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.select-info-actions{
  display:flex;
  gap:5px;
  align-items:center;
}
.mini-btn{
  min-height:28px;
  padding:4px 9px;
  border:1px solid rgba(255,211,106,.58);
  border-radius:2px;
  background:linear-gradient(180deg,rgba(255,211,106,.18),rgba(0,0,0,.52));
  color:#fff;
  cursor:pointer;
  font:1000 12px/1 system-ui,sans-serif;
}
.mini-btn:hover,
.mini-btn:focus-visible{
  border-color:rgba(104,221,255,.86);
  outline:none;
  box-shadow:0 0 0 2px rgba(104,221,255,.18);
}
.roster-grid{
  grid-template-columns:repeat(9,minmax(0,1fr));
  gap:6px;
  min-height:0;
  margin:0;
  padding:6px;
  overflow:hidden;
}
.roster-grid .arcade-token{
  min-height:0;
  height:100%;
  padding:4px;
  gap:2px;
  border-radius:2px;
  text-align:center;
}
.roster-grid .arcade-token .char-card-canvas{
  width:100%;
  height:62px;
  border:1px solid rgba(255,255,255,.10);
  background:#07111f;
}
.roster-grid .arcade-token b{
  display:block;
  overflow:hidden;
  color:#fff;
  font-size:12px;
  line-height:1.05;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.roster-grid .arcade-token span{
  display:block;
  overflow:hidden;
  color:#9fbbd8;
  font-size:9px;
  line-height:1.15;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.select-actions,
.stage-actions{
  align-content:center;
  justify-content:center;
  margin:0;
}
.select-actions .btn,
.stage-actions .btn{
  min-width:180px;
  min-height:46px;
  border-radius:2px;
  padding:8px 16px;
  font-size:20px;
}

.stage-select-layout{
  display:grid;
  grid-template-rows:minmax(0,1fr) 150px;
  gap:8px;
  min-height:0;
}
.stage-hero{
  height:auto;
  min-height:0;
  margin:0;
  border-radius:2px;
}
.stage-hero-info{
  max-width:min(720px,calc(100% - 40px));
  width:auto;
}
.stage-hero-info strong{
  font-size:clamp(32px,4vw,52px);
  line-height:.98;
  white-space:nowrap;
}
.stage-hero-info p{
  max-width:480px;
  font-size:13px;
  line-height:1.35;
}
.stage-detail-btn{
  margin-top:8px;
}
.stage-grid{
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:6px;
  min-height:0;
  margin:0;
  padding:6px;
  overflow:hidden;
}
.stage-card.arcade-stage-token{
  min-height:0;
  padding:4px;
  border-radius:2px;
}
.stage-card.arcade-stage-token img{
  height:45px;
  aspect-ratio:auto;
  object-fit:cover;
  border-radius:1px;
}
.stage-card.arcade-stage-token span{
  margin-top:3px;
  font-size:10px;
  line-height:1.1;
}

@media(max-width:860px){
  .select-screen,
  .stage-screen{
    padding:6px;
    overflow:hidden;
  }
  .select-card,
  .stage-card-shell{
    height:calc(100vh - 12px);
    max-height:calc(100vh - 12px);
    padding:8px;
    gap:6px;
  }
  .select-card{
    grid-template-rows:auto 224px 38px minmax(0,1fr) 98px;
  }
  .select-header,
  .stage-topbar{
    grid-template-columns:1fr auto;
    gap:4px 8px;
  }
  .select-header h2,
  .stage-topbar h2{
    grid-column:1/-1;
    grid-row:2;
    font-size:26px;
    white-space:nowrap;
  }
  .select-header p,
  .stage-topbar p{
    grid-row:3;
    font-size:11px;
  }
  .level-pill{
    padding:4px 7px;
    font-size:11px;
  }
  .select-showcase{
    grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr);
    gap:4px;
    padding:5px;
  }
  .select-showcase .vs-side{
    padding:5px;
  }
  .select-portrait{
    width:100%;
  }
  .fighter-info{
    padding:4px;
  }
  .fighter-label{
    font-size:11px;
  }
  .select-showcase .vs-side b{
    font-size:15px;
  }
  .select-showcase .vs-side span,
  .fighter-history{
    font-size:9px;
  }
  .fighter-history{
    -webkit-line-clamp:2;
  }
  .fighter-stats{
    grid-template-columns:repeat(2,1fr);
  }
  .fighter-stats small{
    padding:2px;
    font-size:8px;
  }
  .select-showcase .vs-mark strong{
    font-size:30px;
  }
  .select-showcase .vs-mark span{
    font-size:13px;
  }
  .select-status-strip{
    grid-template-columns:auto minmax(0,1fr);
    gap:2px 6px;
    padding:4px 6px;
  }
  .select-status-strip em,
  .select-status-strip small{
    display:none;
  }
  .roster-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:4px;
    padding:4px;
  }
  .roster-grid .arcade-token .char-card-canvas{
    height:40px;
  }
  .roster-grid .arcade-token b{
    font-size:10px;
  }
  .roster-grid .arcade-token span{
    font-size:8px;
  }
  .select-actions,
  .stage-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:6px;
  }
  .select-actions .btn,
  .stage-actions .btn{
    width:100%;
    min-height:42px;
    font-size:17px;
  }
  .stage-card-shell{
    grid-template-rows:auto minmax(0,1fr) 92px;
  }
  .stage-select-layout{
    grid-template-rows:minmax(0,1fr) 250px;
  }
  .stage-hero-info{
    left:10px;
    bottom:10px;
    width:calc(100% - 20px);
  }
  .stage-hero-info strong{
    font-size:28px;
  }
  .stage-hero-info p{
    display:none;
  }
  .stage-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    overflow:hidden;
  }
  .stage-card.arcade-stage-token img{
    height:44px;
  }
}

/* dedicated start screen */
.title-screen{
  align-items:center;
  padding:8px;
  overflow:hidden;
}
.title-card.start-card{
  width:min(1240px,100%);
  height:min(748px,calc(100vh - 16px));
  min-height:0;
  padding:8px;
  overflow:hidden;
}
.title-start-frame{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  min-height:0;
  padding:0;
  overflow:hidden;
  border:2px solid rgba(104,221,255,.45);
  background:#02060d;
}
.title-splash-canvas{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.title-start-frame:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(2,6,13,.86),rgba(2,6,13,.22) 52%,rgba(2,6,13,.58)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 5px);
}
.title-start-frame:after{
  content:"";
  position:absolute;
  inset:10px;
  z-index:2;
  pointer-events:none;
  border:1px solid rgba(255,211,106,.35);
  box-shadow:inset 0 0 80px rgba(0,0,0,.72);
}
.title-start-copy{
  position:relative;
  z-index:3;
  width:min(560px,52%);
  height:100%;
  padding:52px 44px 42px;
  justify-content:center;
}
.title-start-copy .badge{
  width:max-content;
}
.title-start-copy h1{
  margin:18px 0 12px;
  font-size:clamp(66px,7vw,104px);
  line-height:.92;
  text-shadow:0 6px 0 #08111f,0 0 32px rgba(104,221,255,.36);
}
.title-start-copy .title-sub{
  width:max-content;
  padding:6px 10px;
  border-block:2px solid rgba(255,211,106,.48);
  background:rgba(0,0,0,.28);
  color:var(--accent2);
}
.title-start-copy .arcade-menu{
  margin-top:34px;
  width:min(420px,100%);
  display:grid;
  gap:10px;
}
.title-start-copy .arcade-btn{
  min-height:60px;
  border:2px solid rgba(255,255,255,.92);
  border-radius:2px;
  background:linear-gradient(180deg,#ffe894,#ffc44b);
  box-shadow:0 8px 0 #7a4617,0 0 36px rgba(255,211,106,.28);
}
.title-start-copy .arcade-btn.secondary-mode{
  background:linear-gradient(180deg,#dcecff,#8fc7ff);
  box-shadow:0 8px 0 #244463,0 0 30px rgba(104,221,255,.22);
}
.title-start-copy .arcade-btn span{
  color:#6c3c0e;
  font-size:13px;
}
.title-start-copy .arcade-btn b{
  font-size:28px;
}
.title-start-copy .title-footer{
  margin-top:24px;
  color:#d7e8ff;
  text-shadow:0 2px 8px rgba(0,0,0,.9);
}

@media(max-width:860px){
  .title-screen{
    padding:6px;
  }
  .title-card.start-card{
    height:calc(100vh - 12px);
    max-height:calc(100vh - 12px);
  }
  .title-start-frame:before{
    background:
      linear-gradient(180deg,rgba(2,6,13,.60),rgba(2,6,13,.38) 48%,rgba(2,6,13,.86)),
      repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 5px);
  }
  .title-start-copy{
    width:100%;
    padding:28px 22px 24px;
    justify-content:flex-start;
  }
  .title-start-copy h1{
    margin-top:16px;
    font-size:clamp(48px,17vw,72px);
  }
  .title-start-copy .title-sub{
    font-size:13px;
  }
  .title-start-copy .arcade-menu{
    position:absolute;
    left:22px;
    right:22px;
    bottom:86px;
    width:auto;
  }
  .title-start-copy .arcade-btn{
    min-height:54px;
  }
  .title-start-copy .title-footer{
    position:absolute;
    left:22px;
    right:22px;
    bottom:42px;
    margin:0;
  }
}

/* dedicated mobile flows */
.mobile-select-screen,
.mobile-stage-screen,
.mobile-battle-screen{
  min-height:100svh;
  height:100svh;
  padding:6px;
  align-items:center;
  overflow:hidden;
}
.mobile-select-card,
.mobile-stage-card{
  width:100%;
  height:calc(100svh - 12px);
  padding:8px;
  border-radius:4px;
  display:grid;
  gap:6px;
  overflow:hidden;
}
.mobile-select-card{
  grid-template-rows:auto minmax(0,1fr) 36px 322px 92px;
}
.mobile-stage-card{
  grid-template-rows:auto minmax(0,1fr) 104px 128px;
}
.mobile-select-head{
  display:grid;
  grid-template-columns:1fr auto;
  gap:4px 8px;
  align-items:center;
  min-height:0;
  border-bottom:2px solid rgba(104,221,255,.35);
  padding-bottom:6px;
}
.mobile-select-head h2{
  grid-column:1/-1;
  margin:0;
  font-size:26px;
  line-height:.95;
  white-space:nowrap;
}
.mobile-select-head p{
  grid-column:1/-1;
  margin:0;
  color:#d8eaff;
  font-size:11px;
  line-height:1.2;
}
.mobile-fighter-main{
  position:relative;
  min-height:0;
  overflow:hidden;
  border:2px solid rgba(255,211,106,.45);
  background:
    linear-gradient(90deg,rgba(255,76,48,.20),rgba(9,20,36,.74)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 20px);
}
.mobile-fighter-canvas{
  width:100%;
  height:100%;
  object-fit:contain;
  image-rendering:pixelated;
}
.mobile-fighter-info{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:7px 9px;
  background:linear-gradient(180deg,rgba(3,8,17,.18),rgba(3,8,17,.88));
  border-top:1px solid rgba(255,255,255,.14);
}
.mobile-fighter-info small{
  color:var(--accent2);
  font-weight:1000;
  letter-spacing:.12em;
}
.mobile-fighter-info strong{
  display:block;
  color:#fff;
  font-size:22px;
  line-height:1.05;
}
.mobile-fighter-info span{
  display:block;
  color:#e8f3ff;
  font-size:12px;
  font-weight:900;
}
.mobile-fighter-info p{
  display:-webkit-box;
  margin:4px 0 0;
  color:#d8eaff;
  font-size:10px;
  line-height:1.35;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.mobile-move-strip{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
}
.mobile-move-strip b,
.mobile-move-strip span{
  display:flex;
  min-width:0;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:1px solid rgba(255,211,106,.34);
  background:rgba(0,0,0,.38);
  color:#fff;
  font-size:12px;
  font-weight:1000;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mobile-move-strip span{
  color:var(--accent2);
}
.mobile-roster-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px;
  min-height:0;
  overflow:hidden;
  border:1px solid rgba(104,221,255,.28);
  padding:4px;
  background:rgba(0,0,0,.35);
}
.mobile-roster-grid .arcade-token{
  display:flex;
  flex-direction:column;
  min-height:0;
  height:100%;
  padding:4px;
  border-radius:2px;
}
.mobile-roster-grid .char-card-canvas{
  width:100%;
  height:42px;
  border:1px solid rgba(255,255,255,.10);
}
.mobile-roster-grid .arcade-token b{
  display:block;
  overflow:hidden;
  color:#fff;
  font-size:10px;
  line-height:1.1;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mobile-roster-grid .arcade-token span{
  display:none;
}
.mobile-select-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  align-content:center;
}
.mobile-select-actions .btn{
  width:100%;
  min-height:42px;
  border-radius:2px;
  padding:8px 12px;
  font-size:17px;
}
.mobile-select-actions .mini-action{
  min-height:34px;
  font-size:13px;
  padding:6px 8px;
}
.mobile-stage-card .mobile-select-actions{
  grid-template-columns:1fr 1fr;
}
.mobile-stage-card .mobile-select-actions #mobileStartMatch{
  grid-column:1/-1;
}
.mobile-stage-hero{
  position:relative;
  min-height:0;
  overflow:hidden;
  border:2px solid rgba(255,211,106,.45);
  background:#050b14;
}
.mobile-stage-hero img{
  width:100%;
  height:100%;
  object-fit:cover;
  image-rendering:pixelated;
}
.mobile-stage-hero:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(transparent 40%,rgba(0,0,0,.82));
  pointer-events:none;
}
.mobile-stage-hero div{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  z-index:1;
  text-shadow:0 3px 10px rgba(0,0,0,.85);
}
.mobile-stage-hero small{
  color:var(--accent);
  font-size:11px;
  font-weight:1000;
  letter-spacing:.12em;
}
.mobile-stage-hero strong{
  display:block;
  color:#fff;
  font-size:25px;
  line-height:1.04;
  overflow-wrap:anywhere;
}
.mobile-stage-hero span{
  color:var(--accent2);
  font-size:13px;
  font-weight:1000;
}
.mobile-stage-list{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:140px;
  gap:6px;
  overflow-x:auto;
  overflow-y:hidden;
  border:1px solid rgba(104,221,255,.28);
  padding:6px;
  background:rgba(0,0,0,.35);
  scrollbar-width:none;
}
.mobile-stage-list::-webkit-scrollbar{
  display:none;
}
.mobile-stage-list .stage-card{
  min-height:0;
  padding:4px;
  border-radius:2px;
}
.mobile-stage-list .stage-card img{
  height:64px;
  aspect-ratio:auto;
}
.mobile-stage-list .stage-card span{
  font-size:10px;
}

.story-card{
  position:relative;
  z-index:1;
  width:min(1120px,100%);
  max-height:calc(100vh - 20px);
  overflow:hidden;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto auto;
  gap:10px;
}
.story-screen{
  overflow:hidden;
}
.story-topbar{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:6px 12px;
  align-items:center;
  border-bottom:2px solid rgba(104,221,255,.30);
  padding-bottom:8px;
}
.story-topbar h2{
  grid-column:1/-1;
  margin:0;
  font-size:clamp(34px,5vw,56px);
  line-height:.95;
}
.story-topbar p{
  grid-column:1/-1;
  margin:0;
  color:#d8eaff;
  font-weight:800;
}
.story-layout{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
  gap:10px;
  min-height:0;
}
.story-stage-preview{
  position:relative;
  min-height:0;
  overflow:hidden;
  border:2px solid rgba(255,211,106,.42);
  background:#050b14;
}
.story-stage-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  image-rendering:pixelated;
}
.story-stage-preview:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(transparent 45%,rgba(0,0,0,.82));
}
.story-stage-preview div{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  z-index:1;
}
.story-stage-preview small,
.story-dialogue{
  color:var(--accent2);
  font-weight:1000;
}
.story-stage-preview strong{
  display:block;
  color:#fff;
  font-size:32px;
  line-height:1;
}
.story-stage-preview span{
  color:#d8eaff;
  font-weight:900;
}
.story-script{
  min-height:0;
  overflow:auto;
}
.story-dialogue{
  border:1px solid rgba(255,211,106,.34);
  background:rgba(0,0,0,.32);
  padding:12px;
  line-height:1.6;
}
.story-matchup{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:10px;
  align-items:center;
  padding:8px;
  border:1px solid rgba(104,221,255,.25);
  background:rgba(0,0,0,.24);
}
.story-matchup div{
  min-width:0;
}
.story-matchup b,
.story-matchup span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.story-matchup b{
  color:#fff;
  font-size:22px;
}
.story-matchup span{
  color:#cfe3fb;
  font-weight:800;
}
.story-matchup strong{
  color:var(--accent2);
  font-size:34px;
}
.story-actions{
  justify-content:center;
  margin:0;
}
.story-ending-card{
  grid-template-rows:auto minmax(0,1fr) auto;
}
.story-ending-text{
  display:flex;
  min-height:220px;
  flex-direction:column;
  justify-content:center;
}
.story-ending-text p{
  font-size:18px;
  line-height:1.7;
}
.story-dialogue-card{
  grid-template-rows:auto minmax(0,1fr) auto;
}
.story-dialogue-stage{
  position:relative;
  min-height:0;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:8px;
  padding:12px;
  border:2px solid rgba(255,211,106,.42);
  background:
    linear-gradient(180deg,rgba(3,9,18,.80),rgba(3,9,18,.36) 48%,rgba(3,9,18,.88)),
    var(--story-bg) center/cover no-repeat;
}
.story-dialogue-stage:before{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 5px);
  pointer-events:none;
}
.story-chapter-copy,
.story-portrait-row,
.story-dialogue-panel{
  position:relative;
  z-index:1;
}
.story-chapter-copy{
  max-width:900px;
  padding:8px 10px;
  border-left:4px solid var(--accent2);
  background:rgba(0,0,0,.45);
}
.story-chapter-copy small,
.story-versus-core small{
  color:var(--accent);
  font-size:11px;
  font-weight:1000;
  letter-spacing:.12em;
}
.story-chapter-copy strong{
  display:block;
  color:#fff;
  font-size:28px;
  line-height:1.05;
}
.story-chapter-copy p{
  margin:4px 0 0;
  color:#e8f4ff;
  font-size:14px;
  font-weight:800;
  line-height:1.45;
}
.story-portrait-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 190px minmax(0,1fr);
  gap:10px;
  align-items:end;
  min-height:0;
}
.story-portrait{
  position:relative;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
}
.story-portrait canvas{
  width:min(100%,240px);
  max-height:245px;
  height:auto;
  image-rendering:pixelated;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.55));
}
.story-portrait div{
  width:min(100%,320px);
  padding:6px 8px;
  border:1px solid rgba(104,221,255,.36);
  background:rgba(0,0,0,.58);
  text-align:center;
}
.story-portrait b,
.story-portrait span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.story-portrait b{
  color:#fff;
  font-size:20px;
}
.story-portrait span{
  color:#cfe3fb;
  font-size:12px;
  font-weight:900;
}
.story-versus-core{
  align-self:center;
  padding:10px 8px;
  border:1px solid rgba(255,211,106,.35);
  background:rgba(0,0,0,.48);
  text-align:center;
}
.story-versus-core strong,
.story-versus-core span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
}
.story-versus-core strong{
  color:#fff;
  font-size:22px;
  line-height:1.05;
}
.story-versus-core span{
  color:#d8eaff;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}
.story-versus-core em{
  display:block;
  margin-top:6px;
  color:var(--accent2);
  font-size:44px;
  font-style:normal;
  font-weight:1000;
  line-height:1;
}
.story-dialogue-panel{
  display:grid;
  gap:6px;
  align-content:start;
}
.story-context-strip{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:6px;
  align-self:start;
}
.story-context-strip div{
  min-width:0;
  padding:7px 9px;
  border:1px solid rgba(104,221,255,.28);
  background:rgba(0,0,0,.64);
}
.story-context-strip b,
.story-context-strip span{
  display:block;
}
.story-context-strip b{
  color:var(--accent);
  font-size:11px;
  font-weight:1000;
  letter-spacing:.08em;
}
.story-context-strip span{
  color:#f2f8ff;
  font-size:13px;
  font-weight:900;
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.story-dialogue-bubble{
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  gap:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(2,8,18,.86);
  box-shadow:0 10px 22px rgba(0,0,0,.26);
}
.story-dialogue-bubble.hero-line{
  border-left:5px solid var(--accent);
}
.story-dialogue-bubble.enemy-line{
  border-right:5px solid var(--accent2);
}
.story-dialogue-bubble.enemy-line .story-speaker{
  background:linear-gradient(180deg,rgba(255,211,106,.22),rgba(0,0,0,.52));
}
.story-speaker{
  display:flex;
  min-width:0;
  flex-direction:column;
  justify-content:center;
  padding:8px 9px;
  background:linear-gradient(180deg,rgba(104,221,255,.20),rgba(0,0,0,.52));
}
.story-speaker b,
.story-speaker span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.story-speaker b{
  color:#fff;
  font-size:15px;
  font-weight:1000;
}
.story-speaker span{
  color:#cfe3fb;
  font-size:10px;
  font-weight:900;
}
.story-dialogue-bubble p{
  margin:0;
  padding:10px 12px;
  color:#f5fbff;
  font-size:17px;
  font-weight:900;
  line-height:1.45;
  overflow-wrap:anywhere;
  text-shadow:0 2px 4px rgba(0,0,0,.72);
}
.story-dialogue-line{
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(2,8,18,.82);
  color:#f5fbff;
  font-size:16px;
  font-weight:900;
  line-height:1.45;
  overflow-wrap:anywhere;
  text-shadow:0 2px 4px rgba(0,0,0,.72);
}
.story-dialogue-line.hero-line{
  border-left:5px solid var(--accent);
}
.story-dialogue-line.enemy-line{
  border-left:5px solid var(--accent2);
}
.story-objective{
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:8px;
  align-items:center;
  padding:7px 10px;
  border:1px solid rgba(255,211,106,.34);
  background:rgba(0,0,0,.62);
}
.story-objective b{
  color:var(--accent2);
  font-size:14px;
  font-weight:1000;
}
.story-objective span{
  color:#e9f5ff;
  font-size:13px;
  font-weight:800;
  line-height:1.35;
}
.info-modal-backdrop{
  position:fixed;
  inset:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  background:rgba(0,0,0,.68);
}
.info-modal{
  width:min(760px,100%);
  max-height:min(82svh,680px);
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  overflow:hidden;
  border:2px solid rgba(255,211,106,.58);
  border-radius:4px;
  background:linear-gradient(180deg,rgba(9,20,36,.98),rgba(4,9,18,.98));
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.info-modal-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-bottom:1px solid rgba(104,221,255,.28);
  background:rgba(255,211,106,.10);
}
.info-modal-head strong{
  overflow:hidden;
  color:#fff;
  font-size:24px;
  font-weight:1000;
  line-height:1.1;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.icon-close{
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:2px;
  background:rgba(0,0,0,.42);
  color:#fff;
  cursor:pointer;
  font-size:24px;
  font-weight:1000;
  line-height:1;
}
.info-modal-body{
  min-height:0;
  overflow:auto;
  padding:12px;
  color:#eaf5ff;
  font-size:14px;
  font-weight:800;
  line-height:1.55;
}
.info-modal-body p{
  margin:0 0 10px;
}
.info-kv{
  display:grid;
  grid-template-columns:86px minmax(0,1fr);
  gap:8px;
  align-items:start;
  margin-bottom:8px;
  padding:7px 8px;
  border:1px solid rgba(104,221,255,.22);
  background:rgba(0,0,0,.24);
}
.info-kv b{
  color:var(--accent2);
  font-weight:1000;
}
.info-kv span{
  min-width:0;
  overflow-wrap:anywhere;
}
.timeline-list{
  display:grid;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}
.timeline-list li{
  display:grid;
  grid-template-columns:78px minmax(0,1fr);
  gap:10px;
  padding:9px 10px;
  border-left:4px solid var(--accent);
  background:rgba(0,0,0,.28);
}
.timeline-list time{
  color:var(--accent2);
  font-weight:1000;
}
.stage-detail-visual{
  height:180px;
  margin-bottom:10px;
  overflow:hidden;
  border:1px solid rgba(255,211,106,.38);
}
.stage-detail-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  image-rendering:pixelated;
}
.spot-list{
  display:grid;
  gap:5px;
  margin:8px 0 12px;
  padding-left:18px;
}
.detail-link{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:6px 10px;
  border:1px solid rgba(255,211,106,.5);
  color:#fff;
  font-weight:1000;
  text-decoration:none;
}
@media(min-width:861px){
  .story-dialogue-stage{
    grid-template-rows:minmax(0,1fr) auto;
    padding-top:112px;
  }
  .story-chapter-copy{
    position:absolute;
    top:12px;
    left:12px;
    right:12px;
    max-width:none;
    background:rgba(0,0,0,.78);
  }
}

@media(max-width:860px){
  .story-screen{
    min-height:100svh;
    height:100svh;
    padding:6px;
    align-items:center;
  }
  .story-card{
    height:calc(100svh - 12px);
    max-height:calc(100svh - 12px);
    padding:8px;
    gap:6px;
  }
  .story-layout{
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,1fr) auto;
  }
  .story-dialogue-stage{
    grid-template-rows:auto minmax(0,1fr) auto;
    gap:5px;
    padding:7px;
  }
  .story-topbar h2{
    font-size:29px;
  }
  .story-topbar p{
    font-size:12px;
    line-height:1.35;
  }
  .story-chapter-copy{
    padding:6px 8px;
  }
  .story-chapter-copy strong{
    font-size:20px;
  }
  .story-chapter-copy p{
    font-size:11px;
    line-height:1.35;
  }
  .story-portrait-row{
    grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr);
    gap:5px;
  }
  .story-portrait canvas{
    width:min(100%,150px);
  }
  .story-portrait div{
    padding:4px 5px;
  }
  .story-portrait b{
    font-size:13px;
  }
  .story-portrait span{
    font-size:9px;
  }
  .story-versus-core{
    padding:6px 4px;
  }
  .story-versus-core strong{
    display:none;
  }
  .story-versus-core span{
    display:none;
  }
  .story-versus-core em{
    margin-top:3px;
    font-size:25px;
  }
  .story-dialogue-line{
    padding:6px 7px;
    font-size:11px;
    line-height:1.34;
  }
  .story-context-strip{
    grid-template-columns:1fr;
  }
  .story-context-strip div{
    padding:5px 7px;
  }
  .story-context-strip b{
    font-size:9px;
  }
  .story-context-strip span{
    font-size:10px;
  }
  .story-dialogue-bubble{
    grid-template-columns:82px minmax(0,1fr);
  }
  .story-speaker{
    padding:5px 6px;
  }
  .story-speaker b{
    font-size:11px;
  }
  .story-speaker span{
    display:none;
  }
  .story-dialogue-bubble p{
    padding:6px 8px;
    font-size:12px;
    line-height:1.34;
  }
  .story-objective{
    grid-template-columns:44px minmax(0,1fr);
    padding:5px 7px;
  }
  .story-objective b,
  .story-objective span{
    font-size:10px;
  }
  .story-stage-preview{
    min-height:160px;
  }
  .story-script{
    max-height:none;
    overflow:visible;
  }
  .story-box{
    margin:6px 0;
    padding:8px;
  }
  .story-dialogue{
    padding:8px;
    font-size:11px;
    line-height:1.38;
  }
  .story-matchup{
    grid-template-columns:1fr 42px 1fr;
    gap:6px;
  }
  .story-matchup b{
    font-size:14px;
  }
  .story-matchup span{
    font-size:10px;
  }
  .story-matchup strong{
    font-size:22px;
  }
  .story-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:6px;
  }
}

@media(max-width:700px) and (orientation:portrait){
  .story-card{
    padding:6px;
    gap:5px;
  }
  .story-topbar{
    gap:4px 8px;
    padding-bottom:5px;
  }
  .story-topbar h2{
    font-size:28px;
  }
  .story-topbar p{
    display:none;
  }
  .story-dialogue-stage{
    grid-template-rows:auto 150px minmax(0,1fr);
    gap:4px;
    padding:6px;
  }
  .story-chapter-copy{
    padding:5px 7px;
  }
  .story-chapter-copy strong{
    font-size:19px;
  }
  .story-chapter-copy p{
    display:none;
  }
  .story-portrait-row{
    grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr);
    align-items:end;
  }
  .story-portrait canvas{
    width:min(100%,122px);
    max-height:130px;
  }
  .story-portrait b{
    font-size:12px;
  }
  .story-versus-core em{
    font-size:24px;
  }
  .story-context-strip div:nth-child(2){
    display:none;
  }
  .story-dialogue-bubble{
    grid-template-columns:82px minmax(0,1fr);
  }
  .story-dialogue-bubble p{
    font-size:12px;
    line-height:1.32;
  }
  .story-objective span{
    display:-webkit-box;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }
  .story-actions{
    grid-template-columns:1fr 1fr;
    gap:5px;
  }
  .story-actions .btn{
    min-height:48px;
    padding:7px 8px;
    font-size:18px;
    line-height:1.1;
  }
}

body.mobile-game-active{
  overflow:hidden;
}
.mobile-battle-screen{
  padding:0;
  background:#02060d;
}
.mobile-game-shell{
  width:100vw;
  height:100svh;
  overflow:hidden;
  background:#02060d;
}
.mobile-canvas-wrap{
  width:100%;
  height:100%;
  border:0;
  border-radius:0;
}
.mobile-canvas-wrap canvas{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  object-fit:cover;
}
@media(max-width:900px) and (orientation:landscape){
  .mobile-canvas-wrap canvas{
    object-fit:contain;
    background:#02060d;
  }
}
.mobile-touchpad{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
}
.mobile-touchpad button{
  pointer-events:auto;
}
.mobile-pad-left,
.mobile-pad-right{
  position:absolute;
  bottom:calc(18px + env(safe-area-inset-bottom));
  display:grid;
  gap:7px;
}
.mobile-pad-left{
  left:14px;
  grid-template-columns:repeat(3,54px);
  grid-template-rows:repeat(2,54px);
}
.mobile-pad-right{
  right:14px;
  grid-template-columns:repeat(3,52px);
  grid-template-rows:repeat(2,52px);
}
.touch-up{grid-column:2;grid-row:1}
.touch-left{grid-column:1;grid-row:2}
.touch-right{grid-column:3;grid-row:2}
.touch-guard{grid-column:2;grid-row:2}
.touch-btn,
.touch-menu-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:0;
  border:1px solid rgba(190,225,255,.56);
  border-radius:50%;
  background:rgba(9,18,33,.48);
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 8px 20px rgba(0,0,0,.28);
  touch-action:none;
  user-select:none;
  backdrop-filter:blur(3px);
}
.touch-btn b{
  font-size:19px;
  line-height:1;
}
.touch-btn small{
  margin-top:2px;
  font-size:8px;
  font-weight:900;
}
.touch-btn.active,
.touch-btn:active{
  background:rgba(104,221,255,.36);
  border-color:var(--accent);
  transform:translateY(1px);
}
.touch-btn.punch{border-color:#ffd36a}
.touch-btn.kick{border-color:#ff9b67}
.touch-btn.projectile{border-color:#68ddff}
.touch-btn.special{border-color:#ff72df}
.mobile-battle-tools{
  position:absolute;
  top:calc(10px + env(safe-area-inset-top));
  right:10px;
  display:flex;
  gap:6px;
}
.touch-menu-btn{
  min-width:58px;
  height:32px;
  border-radius:2px;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.08em;
}

@media(max-width:700px) and (orientation:portrait){
  .mobile-canvas-wrap canvas{
    position:absolute;
    top:34px;
    left:-52%;
    width:204%;
    height:auto;
    aspect-ratio:16/9;
    object-fit:fill;
    background:#02060d;
  }
  .mobile-pad-left{
    bottom:calc(190px + env(safe-area-inset-bottom));
    grid-template-columns:repeat(3,48px);
    grid-template-rows:repeat(2,48px);
  }
  .mobile-pad-right{
    bottom:calc(186px + env(safe-area-inset-bottom));
    grid-template-columns:repeat(3,46px);
    grid-template-rows:repeat(2,46px);
  }
  .touch-btn b{
    font-size:16px;
  }
}

@media(max-height:500px) and (orientation:landscape){
  .title-card.start-card{
    height:calc(100svh - 12px);
    max-height:calc(100svh - 12px);
  }
  .title-start-copy{
    width:100%;
    height:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(280px,360px);
    grid-template-rows:auto auto minmax(0,1fr) auto;
    gap:8px 18px;
    padding:18px 22px 16px;
    align-content:stretch;
  }
  .title-start-copy .badge{
    grid-column:1;
    grid-row:1;
    align-self:start;
    width:max-content;
  }
  .title-start-copy h1{
    grid-column:1;
    grid-row:2;
    margin:2px 0 0;
    font-size:clamp(36px,8vw,58px);
    line-height:.92;
  }
  .title-start-copy .title-sub{
    grid-column:1;
    grid-row:3;
    align-self:start;
    font-size:15px;
  }
  .title-start-copy .arcade-menu{
    position:static;
    grid-column:2;
    grid-row:1/4;
    align-self:center;
    width:100%;
    gap:8px;
  }
  .title-start-copy .arcade-btn{
    min-height:58px;
  }
  .title-start-copy .title-footer{
    position:static;
    grid-column:1/-1;
    grid-row:4;
    margin:0;
  }
  .story-screen{
    padding:6px;
  }
  .story-card{
    width:100%;
    height:calc(100svh - 12px);
    max-height:calc(100svh - 12px);
    grid-template-columns:minmax(0,1fr) 150px;
    grid-template-rows:42px minmax(0,1fr);
    gap:6px;
    padding:8px;
  }
  .story-topbar{
    grid-column:1/-1;
    grid-row:1;
    grid-template-columns:auto 1fr auto;
    gap:6px;
    padding-bottom:4px;
  }
  .story-topbar h2{
    grid-column:3;
    grid-row:1;
    margin:0;
    font-size:21px;
    white-space:nowrap;
  }
  .story-topbar p{
    display:none;
  }
  .story-dialogue-stage{
    grid-column:1;
    grid-row:2;
    grid-template-rows:auto minmax(0,1fr) auto;
    gap:4px;
    padding:5px;
  }
  .story-chapter-copy{
    padding:4px 6px;
  }
  .story-chapter-copy small{
    font-size:9px;
  }
  .story-chapter-copy strong{
    font-size:16px;
  }
  .story-chapter-copy p{
    display:-webkit-box;
    margin-top:2px;
    overflow:hidden;
    font-size:9px;
    line-height:1.22;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }
  .story-portrait-row{
    grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr);
    gap:4px;
  }
  .story-portrait canvas{
    width:min(100%,92px);
    max-height:104px;
  }
  .story-portrait div{
    padding:3px 4px;
  }
  .story-portrait b{
    font-size:11px;
  }
  .story-portrait span{
    font-size:8px;
  }
  .story-versus-core{
    padding:4px 3px;
  }
  .story-versus-core small{
    font-size:8px;
  }
  .story-versus-core strong,
  .story-versus-core span{
    display:none;
  }
  .story-versus-core em{
    margin-top:2px;
    font-size:22px;
  }
  .story-dialogue-panel{
    gap:3px;
  }
  .story-context-strip{
    grid-template-columns:1fr;
    gap:3px;
  }
  .story-context-strip div{
    padding:4px 6px;
  }
  .story-context-strip b{
    font-size:8px;
  }
  .story-context-strip span{
    font-size:9px;
    line-height:1.2;
  }
  .story-dialogue-bubble{
    grid-template-columns:70px minmax(0,1fr);
  }
  .story-speaker{
    padding:4px 5px;
  }
  .story-speaker b{
    font-size:9px;
  }
  .story-speaker span{
    display:none;
  }
  .story-dialogue-bubble p{
    padding:5px 7px;
    font-size:10px;
    line-height:1.28;
  }
  .story-dialogue-line{
    padding:4px 6px;
    font-size:9px;
    line-height:1.25;
  }
  .story-objective{
    grid-template-columns:36px minmax(0,1fr);
    gap:5px;
    padding:4px 6px;
  }
  .story-objective b,
  .story-objective span{
    font-size:9px;
    line-height:1.2;
  }
  .story-actions{
    grid-column:2;
    grid-row:2;
    display:grid;
    grid-template-columns:1fr;
    gap:6px;
    align-content:end;
    margin:0;
  }
  .story-actions .btn{
    width:100%;
    min-width:0;
    min-height:46px;
    padding:8px 10px;
    border-radius:3px;
    font-size:16px;
  }
  .mobile-select-card{
    grid-template-columns:150px minmax(0,1fr) 142px;
    grid-template-rows:42px minmax(0,1fr);
    gap:5px;
  }
  .mobile-select-head{
    grid-column:1/-1;
    grid-row:1;
    grid-template-columns:auto 1fr auto;
    padding-bottom:3px;
  }
  .mobile-select-head h2{
    grid-column:auto;
    grid-row:auto;
    font-size:20px;
  }
  .mobile-select-head p{
    display:none;
  }
  .mobile-fighter-main{
    grid-column:1;
    grid-row:2;
  }
  .mobile-fighter-canvas{
    object-fit:contain;
  }
  .mobile-fighter-info{
    padding:5px;
  }
  .mobile-fighter-info strong{
    font-size:15px;
  }
  .mobile-fighter-info span,
  .mobile-fighter-info p,
  .mobile-fighter-info .fighter-stats{
    display:none;
  }
  .mobile-move-strip{
    display:none;
  }
  .mobile-roster-grid{
    grid-column:2;
    grid-row:2;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:4px;
  }
  .mobile-roster-grid .char-card-canvas{
    height:38px;
  }
  .mobile-select-actions{
    grid-column:3;
    grid-row:2;
    align-content:end;
  }
  .mobile-stage-card{
    grid-template-columns:minmax(0,1fr) 232px;
    grid-template-rows:42px minmax(0,1fr) 106px;
    gap:5px;
  }
  .mobile-stage-card .mobile-select-head{
    grid-template-columns:auto 1fr auto;
  }
  .mobile-stage-card .mobile-select-head h2{
    grid-column:auto;
    grid-row:auto;
    font-size:20px;
  }
  .mobile-stage-hero{
    grid-column:1;
    grid-row:2/4;
  }
  .mobile-stage-list{
    grid-column:2;
    grid-row:2;
    grid-auto-flow:row;
    grid-auto-columns:auto;
    grid-template-columns:1fr;
    grid-auto-rows:48px;
    overflow-x:hidden;
    overflow-y:auto;
  }
  .mobile-stage-list{
    grid-auto-columns:136px;
  }
  .mobile-stage-list .stage-card img{
    height:38px;
  }
  .mobile-stage-list .stage-card{
    display:grid;
    grid-template-columns:72px minmax(0,1fr);
    gap:5px;
    align-items:center;
  }
  .mobile-stage-list .stage-card span{
    margin:0;
    text-align:left;
    white-space:normal;
  }
  .mobile-stage-card .mobile-select-actions{
    grid-column:2;
    grid-row:3;
  }
  .mobile-stage-card .mobile-select-actions .btn{
    min-height:30px;
    padding:4px 6px;
    font-size:14px;
    line-height:1.05;
    white-space:nowrap;
  }
  .mobile-stage-card .mobile-select-actions .mini-action{
    min-height:30px;
    font-size:12px;
  }
  .mobile-stage-card .mobile-select-actions #mobileStartMatch{
    grid-column:1/-1;
    min-height:36px;
    font-size:18px;
  }
  .mobile-stage-hero strong{
    font-size:22px;
  }
  .mobile-stage-hero span{
    font-size:11px;
  }
}