:root {
  --ui-white: #f3f4f5;
  --ui-muted: #a8abb1;
  --ui-red: #e11d2e;
  --ui-blue: #178ff5;
  --ui-gold: #ffc94a;
  --ui-cyan: #20d9f4;
  --frame-w: min(100vw, 177.7778vh);
  --frame-h: min(100vh, 56.25vw);
  --scale-x: calc(var(--frame-w) / 1672);
  --scale-y: calc(var(--frame-h) / 941);
  --font-display: 'Knewave', Impact, sans-serif;
}
@font-face {
  font-family:'Knewave';
  src:url(../fonts/knewave-latin.woff2?v=runtimeaudit20260926r1) format('woff2');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html, body { width: 100%; height: 100%; margin:0; overflow: hidden; }
body {
  color: var(--ui-white);
  background: #050609;
  font-family: Inter, system-ui, sans-serif;
  overscroll-behavior: none;
}
#app {
  position: fixed;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: var(--frame-w); height: var(--frame-h); max-width: none;
  aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate;
  background: #080b12 url(../../arenas/arena_2_v4.webp?v=runtimeaudit20260927r1) center / cover no-repeat;
  box-shadow: 0 0 0 1px #64717c, 0 18px 70px #000;
}
#app::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg,rgba(3,5,10,.78),rgba(5,8,15,.56) 48%,rgba(3,5,10,.76)),
              linear-gradient(0deg,rgba(2,3,6,.68),transparent 34%,rgba(2,3,6,.30));
}
.site-header {
  position: absolute; z-index: 20; top: 3.3%; left: 2.1%; right: 2.1%; height: 6.2%;
  display: grid; grid-template-columns: minmax(0, 25%) minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr); align-items: center; gap: 2%; min-height: 0;
}
.brand-home { display:flex; align-items:center; width:100%; height:100%; min-width:0; min-height:0; overflow:hidden; border:0; background:none; cursor:pointer; }
.site-brand { display: block; width: 100%; height: 100%; min-width:0; min-height:0; object-fit: contain; object-position: left center; cursor: pointer; }
.site-nav { display: flex; justify-content: center; align-items: center; gap: clamp(14px, 3vw, 52px); height: 100%; }
.nav-link {
  position: relative; height: 100%; padding: 0 3px; border: 0; background: none; color: #c3c5ca;
  font: 700 clamp(11px, 1vw, 17px)/1 Inter,system-ui,sans-serif; letter-spacing: .055em; cursor: pointer;
}
.nav-link:hover, .nav-link:focus-visible, .nav-link.is-current { color: #fff; text-shadow: 0 0 12px #e11d2e; }
.nav-link.is-current::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--ui-red); box-shadow: 0 0 12px #ff263a; }
.header-status { color: #d6d8dc; font-size: clamp(10px,.8vw,14px); letter-spacing: .08em; white-space: nowrap; }
.screen {
  position: absolute; inset: 0; z-index: 2; display: none; padding: 11% 2.1% 3.2%;
  text-align: initial; align-items: stretch; justify-content: stretch; gap: 0; overflow: hidden;
  background: linear-gradient(180deg,rgba(5,7,12,.14),rgba(4,6,11,.16) 46%,rgba(3,4,8,.72));
}
.screen.active { display: flex; }
.screen h1, .screen h2, .screen h3 { margin: 0; }
.screen-heading {
  font-family: 'Arial Narrow', Impact, sans-serif; font-size: clamp(22px,3.2vw,52px); font-weight: 900;
  letter-spacing: .015em; line-height: .93; text-transform: uppercase; text-shadow: 0 3px 18px #000;
}
.screen-heading .accent { color: var(--ui-red); }
.screen-kicker { color: #c1c4ca; font-size: clamp(10px,1vw,16px); font-style: italic; letter-spacing: .16em; text-transform: uppercase; }
.screen-title-row { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 0 0 1.8%; }
.screen-title-row .screen-heading { text-shadow: 2px 3px 0 #151820, 0 0 18px #000; }
.screen-title-row .screen-kicker { max-width: 30%; text-align: right; }
.brush-rule { height: 4px; width: min(100%,260px); margin-top: 9px; background: var(--ui-red); transform: skewX(-28deg); box-shadow: 0 0 16px #e11d2e77; }
.btn {
  min-width: 0; min-height: 48px; padding: 0 28px; border: 0; color: #fff; background: url(./buttons/primary_red.png?v=runtimeaudit20260926r1) center / 100% 100% no-repeat;
  clip-path: none; font: 800 clamp(15px,1.6vw,24px)/1 'Arial Narrow',Impact,sans-serif; letter-spacing: .09em; cursor: pointer;
  filter: drop-shadow(0 8px 14px #0009); transition: transform .14s ease, filter .14s ease;
}
.btn:hover { transform: translateY(-2px) scale(1.015); filter: drop-shadow(0 0 16px #e11d2e99); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.btn.ghost { background-image: url(./buttons/secondary_dark.png?v=runtimeaudit20260926r1); }
.btn.wide-accent { background-image: url(./buttons/wide_accent.png?v=runtimeaudit20260926r1); }
.site-header button { touch-action: manipulation; }

/* Home: same supplied night-alley art; controls remain live HTML. */
.home-screen { padding: 12% 2.1% 3.2%; }
.home-screen::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#03050bd9 0%,#03050b55 34%,#03050b30 67%,#03050bc9 100%),linear-gradient(0deg,#03050be8,transparent 31%,#03050b66); }
.home-copy { position: absolute; z-index: 1; top: 19%; left: 30.5%; width: 39%; display:flex; flex-direction:column; align-items:center; text-align:center; }
.home-title { display:grid; place-items:center; width:min(100%,640px,60dvh); aspect-ratio:3/1; margin:auto; line-height:1; transform:none; background:url(./announcements/brush_sweep-v2.webp?v=runtimeaudit20260928r1) center/100% 100% no-repeat; color:#fff; font:clamp(24px,4.6vw,78px)/1 var(--font-display); text-shadow:3px 4px 0 #141823,-3px -1px 0 #aa0d1c,0 0 20px #df263c88; white-space:nowrap; }
.home-tag { margin-top: 1.7%; font-size: clamp(10px,1.05vw,16px); font-weight: 700; letter-spacing: .22em; text-shadow: 0 2px 9px #000; }
.home-actions { width: 92%; margin-top: 6.5%; display:grid; gap: 10px; }
.home-actions .btn { width:100%; height: clamp(48px,8.5vh,78px); }
.home-notice { margin-top: 3%; color:#c2c5cb; font-size:clamp(10px,1vw,15px); line-height:1.5; }
.home-side-copy { position:absolute; left:2.2%; top:25%; max-width:12%; color:#c5c7cc; font: italic 700 clamp(13px,1.3vw,22px)/1.32 'Arial Narrow',Impact,sans-serif; letter-spacing:.045em; text-transform:uppercase; text-shadow:0 2px 9px #000; }
.home-side-copy::after { content:''; display:block; height:4px; width:80%; margin-top:12px; background:var(--ui-red); transform:rotate(-8deg); }
.home-side-copy-right { left:auto; right:2.2%; top:auto; bottom:30%; }
.home-features { height:12.5%; }
.home-features { position:absolute; left:2.1%; right:2.1%; bottom:8%; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.65%; }
.feature-card { min-height:10.2%; padding:1.1% 1.2%; display:grid; grid-template-columns:32px 1fr; align-items:center; gap:10px; border:1px solid #aab4c044; background:linear-gradient(135deg,#080b11df,#111621dc); box-shadow:0 8px 20px #0008; }
.feature-card img { width:30px; height:30px; object-fit:contain; }
.feature-card strong { display:block; font-size:clamp(9px,.85vw,14px); line-height:1.35; text-transform:uppercase; }
.feature-card span { display:block; margin-top:3px; color:#aeb2ba; font-size:clamp(8px,.72vw,12px); }
.home-footer { position:absolute; left:2.1%; bottom:2.1%; font:italic 700 clamp(10px,.95vw,15px) 'Arial Narrow',Impact,sans-serif; letter-spacing:.12em; color:#d3d5d9; }

/* Selection screens */
.select-screen { flex-direction:column; }
.fighter-grid { flex:1; min-height:0; width:min(100%,1120px); margin:0 auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:minmax(0,1fr); gap:1.4%; overflow:auto; padding:5px; }
.fighter-card {
  position:relative; min-height:0; padding:9%; display:flex; flex-direction:column; align-items:stretch; text-align:left;
  border:0; border-radius:0; background: url(./selection/card_neutral.png?v=runtimeaudit20260926r1) center / 100% 100% no-repeat;
  color:var(--ui-white); cursor:pointer; overflow:hidden; transition:transform .16s ease,filter .16s ease;
}
.fighter-card:hover { transform:translateY(-3px); filter:drop-shadow(0 0 12px #e11d2e66); }
.fighter-card.sel { background-image:url(./selection/card_selected_red.png?v=runtimeaudit20260926r1); }
.fighter-card.locked { background-image:url(./selection/card_locked.png?v=runtimeaudit20260926r1); opacity:.6; cursor:not-allowed; }
.fighter-top { display:flex; align-items:center; gap:8px; }
.fighter-portrait { width:35%; aspect-ratio:1/1; flex:0 0 35%; display:grid; place-items:center; overflow:hidden; background:#0b1019; border:1px solid #65717c; }
.fighter-portrait img { width:100%; height:100%; object-fit:cover; }
.fighter-name { font:800 clamp(14px,1.45vw,24px)/1 'Arial Narrow',Impact,sans-serif; letter-spacing:.04em; text-transform:uppercase; }
.fighter-role { margin-top:4px; color:#bfc2c9; font-size:clamp(8px,.75vw,12px); }
.fighter-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px 8px; margin-top:8px; color:#d4d7dc; font-size:clamp(8px,.72vw,11px); text-transform:capitalize; }
.fighter-animation,.fighter-meta { margin-top:6px; color:#aeb5c0; font-size:clamp(7px,.65vw,10px); }
.select-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:1%; }
.select-footer .btn { height:clamp(42px,6vh,58px); }
.arena-layout { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,24%); grid-template-rows:minmax(0,1fr) auto; gap:1.8%; }
.arena-preview { position:relative; min-height:0; overflow:hidden; border:1px solid #81909c; background:#090d15; box-shadow:0 8px 24px #000b; }
.arena-preview img { width:100%; height:100%; display:block; object-fit:cover; }
.arena-preview-empty { width:100%; height:100%; display:grid; place-items:center; background:radial-gradient(ellipse at 50% 45%,#202938,#080a0e 72%); color:#9097a1; font:700 clamp(16px,2vw,30px) 'Arial Narrow',Impact,sans-serif; letter-spacing:.1em; text-align:center; }
.arena-preview-title { position:absolute; left:3%; bottom:4%; max-width:72%; padding:1.1% 2.5% 1.3% 1%; background:linear-gradient(90deg,#06080ee8,#06080e99,transparent); }
.arena-preview-title h2 { font:900 clamp(24px,3.7vw,58px)/.95 'Arial Narrow',Impact,sans-serif; text-transform:uppercase; text-shadow:0 2px 12px #000; }
.arena-preview-title p { margin-top:7px; color:#d1d3d7; font-size:clamp(10px,1vw,15px); }
.arena-meta { align-self:end; padding:9%; border-left:2px solid var(--ui-red); background:linear-gradient(135deg,#10141de8,#06080edb); }
.arena-meta dl { display:grid; gap:12px; }
.arena-meta dt { color:#bfc4cc; font-size:clamp(9px,.9vw,13px); font-weight:700; letter-spacing:.1em; }
.arena-meta dd { margin:3px 0 0; color:#f3f4f5; font-size:clamp(11px,1vw,16px); }
.arena-grid { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1%; }
.arena-card { position:relative; display:flex; min-width:0; height:clamp(62px,12vh,112px); align-items:end; padding:0 3% 1.3%; overflow:hidden; border:1px solid #aeb8c177; background:#0a0d14; color:#fff; cursor:pointer; text-align:left; }
.arena-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.72; transition:transform .18s,opacity .18s; }
.arena-card:hover img,.arena-card.sel img { transform:scale(1.05); opacity:1; }
.arena-card::after { content:''; position:absolute; inset:35% 0 0; background:linear-gradient(transparent,#03050de8); }
.arena-card.sel { border:2px solid #ff263a; box-shadow:0 0 0 1px #ff263a,0 0 16px #e11d2e99; }
.arena-card span { position:relative; z-index:1; font:800 clamp(11px,1.2vw,18px) 'Arial Narrow',Impact,sans-serif; letter-spacing:.06em; text-transform:uppercase; }

.arena-actions { display:flex; grid-column:1/-1; justify-content:space-between; align-items:center; }
.arena-actions .btn { min-width:22%; height:clamp(42px,6vh,58px); }

/* Battle HUD: HTML values overlay art frames; render canvas stays 960x540. */
#stage { display:none; position:absolute; inset:0; width:100%; height:100%; flex:none; background:#05070b; overflow:hidden; }
#stage.on { display:block; }
#game { position:absolute; inset:0; width:100%; height:100%; touch-action:none; }
#hud { position:absolute; z-index:5; top:2.3%; left:1.4%; right:1.4%; height:17%; display:none; padding:0; gap:1.6%; align-items:start; }
#hud.on { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); }
.player-hud { min-width:0; height:100%; display:grid; grid-template-columns:clamp(46px,10vw,150px) minmax(0,1fr); gap:1.4%; align-items:start; }
.player-hud.player-two { grid-template-columns:minmax(0,1fr) clamp(46px,10vw,150px); }
.portrait-frame { position:relative; width:100%; aspect-ratio:1.16/1; overflow:hidden; background:#080c13; border:1px solid #687885; clip-path:polygon(0 0,90% 0,100% 12%,100% 100%,10% 100%,0 88%); }
.portrait-frame img { width:100%; height:100%; object-fit:cover; }
.player-readout { min-width:0; display:grid; grid-template-rows:auto minmax(18px,4.4vh) minmax(7px,1.4vh) auto; gap:4px; }
.player-two .player-readout { text-align:right; }
.player-meta { display:flex; gap:8px; align-items:center; font:700 clamp(10px,.95vw,16px) 'Arial Narrow',Impact,sans-serif; text-transform:uppercase; }
.player-two .player-meta { justify-content:flex-end; }
.player-tag { padding:3px 8px; color:#fff; background:url(./hud/player_tag_red.png?v=runtimeaudit20260926r1) center/100% 100% no-repeat var(--ui-red); font-weight:900; letter-spacing:.06em; }
.player-two .player-tag { background-image:url(./hud/player_tag_blue.png?v=runtimeaudit20260926r1); background-color:#087bd5; }
.hpbar { position:relative; height:100%; border:0; border-radius:0; overflow:visible; background:url(./hud/health_frame.png?v=runtimeaudit20260926r1) center/100% 100% no-repeat; padding:11% 2.5%; }
.hpbar::before { content:''; position:absolute; z-index:0; inset:22% 3.8%; background:#171a20; }
.hpbar>i { position:absolute; z-index:1; top:27%; left:4%; height:53%; width:100%; background:linear-gradient(90deg,#ffe171 0%,#ffc430 58%,#e11d2e 100%); transition:width .12s linear; }
.player-two .hpbar>i { left:auto; right:4%; background:linear-gradient(270deg,#ffe171 0%,#ffc430 58%,#e11d2e 100%); }
.exbar { position:relative; height:100%; margin:0; border-radius:0; overflow:visible; background:url(./hud/ex_frame.png?v=runtimeaudit20260926r1) center/100% 100% no-repeat; padding:12% 3%; }
.exbar::before { content:''; position:absolute; z-index:0; inset:25% 4%; background:#081923; }
.exbar>i { position:absolute; z-index:1; top:33%; left:5%; height:34%; width:0; background:linear-gradient(90deg,#11a8de,#6df5ff); transition:width .12s linear; }
.player-two .exbar>i { left:auto; right:5%; }
.round-dots { display:flex; gap:5px; align-items:center; height:14px; }
.player-two .round-dots { justify-content:flex-end; }
.round-dots i { display:block; width:clamp(8px,.9vw,14px); aspect-ratio:1; border:1px solid #b7c1c9; border-radius:50%; background:#0a1018; }
.round-dots i.is-won { border-color:#ffe28a; background:#ffc430; box-shadow:0 0 8px #ffc43099; }
.in-battle #site-nav { display:none; }
.center-clock { min-width:clamp(56px,8vw,120px); height:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding-top:.3%; background:url(./hud/timer_frame.png?v=runtimeaudit20260926r1) center top/100% auto no-repeat; }
#timer { min-width:0; margin-top:12%; color:#fff1ce; font:900 clamp(23px,4.2vw,66px)/1 'Arial Narrow',Impact,sans-serif; text-shadow:0 2px 0 #9f3200,0 0 15px #ffc43099; }
.round-label { color:#e8e9eb; font:700 clamp(8px,.95vw,14px) 'Arial Narrow',Impact,sans-serif; letter-spacing:.08em; }
#countdown { position:absolute; z-index:8; inset:0; display:none; align-items:center; justify-content:center; color:#fff; font:clamp(56px,12vw,150px)/1 var(--font-display); text-shadow:0 0 28px var(--ui-red),0 3px 20px #000; pointer-events:none; }
#countdown[data-state="loading"] { z-index:8; flex-direction:column; gap:clamp(8px,1.8vh,16px); background:linear-gradient(180deg,#05070d66,#05070d99),url(./announcements/loading-v4.webp?v=runtimeaudit20260928r1) center/cover no-repeat,#101923; font-size:clamp(14px,2.3vw,24px); letter-spacing:.06em; text-shadow:0 2px 10px #000; }
#loading-status,#loading-progress { display:none; }
#countdown[data-state="loading"] #loading-status { display:block; color:#fff; font:clamp(22px,5vw,48px)/1 var(--font-display); letter-spacing:.1em; text-shadow:3px 4px 0 #141823,-2px -1px 0 #aa0d1c,0 0 18px #000; }
#countdown[data-state="loading"] #loading-progress { display:block; padding:5px 16px; color:#ffe28a; background:#090d17c9; border:1px solid #e94353aa; font:900 clamp(13px,2vw,20px)/1.1 'Arial Narrow',Impact,sans-serif; letter-spacing:.12em; }
#countdown-text { position:absolute; left:50%; bottom:14%; transform:translateX(-50%); z-index:1; width:90%; text-align:center; }
#countdown:not([data-state="loading"]) #countdown-text { position:relative; inset:auto; transform:none; display:grid; place-items:center; width:min(92vw,700px); aspect-ratio:3/1; background:url(./announcements/brush_sweep-v2.webp?v=runtimeaudit20260928r1) center/100% 100% no-repeat; color:#fff; font:clamp(34px,10vw,112px)/1 var(--font-display); text-shadow:3px 4px 0 #141823,-3px -1px 0 #aa0d1c,0 0 20px #df263c88; }
#countdown[data-state="loading"] #countdown-text { display:none; }
.battle-announcement { position:absolute; z-index:9; left:50%; top:37%; display:grid; place-items:center; width:min(72%,700px); aspect-ratio:3/1; transform:translate(-50%,-50%); background:url(./announcements/brush_sweep-v2.webp?v=runtimeaudit20260928r1) center/100% 100% no-repeat; color:#fff; font:clamp(34px,8vw,92px)/1 var(--font-display); text-shadow:3px 4px 0 #141823,-3px -1px 0 #aa0d1c,0 0 20px #df263c88; white-space:nowrap; pointer-events:none; }
.battle-announcement[hidden] { display:none!important; }
#control-overlay { --control-guide-fade:0ms; --control-guide-opacity:0; position:absolute; z-index:9; inset:0; opacity:0; visibility:hidden; pointer-events:none; transition:opacity var(--control-guide-fade) ease,visibility 0s linear var(--control-guide-fade); }
#control-overlay.is-visible { opacity:1; visibility:visible; transition-delay:0s; }
.control-guide { position:absolute; box-sizing:border-box; left:max(14px,env(safe-area-inset-left)); top:23%; width:min(31%,310px); padding:14px; color:#fff; border:1px solid #95cfe8aa; background:linear-gradient(145deg,rgb(16 25 35 / var(--control-guide-opacity)),rgb(8 12 19 / var(--control-guide-opacity))); box-shadow:0 10px 28px #000b,inset 0 0 18px #23baff18; backdrop-filter:blur(8px); text-shadow:0 1px 2px #000; pointer-events:none; }
.control-guide h2 { margin:0 0 12px; color:#ffe28a; font:900 clamp(20px,4vw,30px)/1 'Arial Narrow',Impact,sans-serif; letter-spacing:.14em; text-align:center; }
.control-guide-list { display:grid; grid-template-columns:1fr 1fr; gap:6px 16px; }
.control-guide-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 8px; border-bottom:1px solid #ffffff1c; font:700 clamp(11px,2vw,15px)/1.15 system-ui,sans-serif; }
.control-guide-row strong { min-width:48px; color:#70dcff; font:900 clamp(13px,2.3vw,17px)/1 'Arial Narrow',Impact,sans-serif; text-align:center; }
.control-guide-row span { text-align:right; }
.control-guide-mobile .control-guide-row { min-height:40px; }
.control-guide-mobile { left:50%; top:auto; bottom:calc(env(safe-area-inset-bottom) + clamp(136px,36vh,156px)); transform:translateX(-50%); width:min(94%,460px); padding:10px 12px; }
.control-guide-mobile h2 { margin-bottom:7px; }
.control-guide-mobile .control-guide-list { gap:3px 12px; }
.control-guide-mobile .control-guide-row { min-height:28px; padding:3px 5px; }
#battle-load-failure { position:absolute; z-index:10; inset:0; display:none; align-items:center; justify-content:center; padding:24px; background:rgb(5 7 13 / 38%); text-align:center; }
.battle-load-failure-card { box-sizing:border-box; display:flex; flex-direction:column; align-items:center; gap:14px; width:min(92%,520px); padding:clamp(20px,4vw,36px); border:1px solid #e94353aa; background:linear-gradient(145deg,#101923f2,#090d17f5); box-shadow:0 16px 50px #000c,inset 0 0 22px #23baff12; }
#battle-load-failure.on { display:flex; }
#battle-load-failure strong { color:#ff707b; font:900 clamp(20px,3vw,42px) 'Arial Narrow',Impact,sans-serif; }
#battle-load-error { max-width:80%; padding:8px 12px; border:1px solid #ffffff22; background:#05070dcc; color:#d4d7dc; font:500 clamp(11px,1vw,15px) system-ui,sans-serif; overflow-wrap:anywhere; }
#battle-load-failure .btn { min-height:44px; }
#touch { position:absolute; z-index:7; inset:0; display:none; pointer-events:none; touch-action:none; user-select:none; -webkit-user-select:none; }
#touch.on { display:flex; }
.vc-left-zone { position:absolute; inset:0 42% 0 0; pointer-events:auto; touch-action:none; }
.vc-stick-base { position:absolute; z-index:1; width:clamp(84px,20vmin,164px); aspect-ratio:1; border:2px solid #d0dbe288; border-radius:50%; transform:translate(-50%,-50%); background:radial-gradient(circle,#8fa0b544 0 24%,#101a28bb 27% 59%,#060a12bb 61%); box-shadow:inset 0 0 0 7px #101720aa,0 5px 20px #000b; opacity:.7; pointer-events:none; transition:opacity .08s; }
.vc-stick-base.is-active { opacity:1; border-color:#c5efffff; box-shadow:inset 0 0 0 7px #15202fbb,0 0 18px #19baff99,0 5px 20px #000b; }
.vc-stick-handle { position:absolute; left:50%; top:50%; width:43%; height:43%; border:2px solid #f2f6faaa; border-radius:50%; background:radial-gradient(circle at 35% 28%,#bdc9d9ee,#586577ee 70%,#1b2532); box-shadow:0 0 12px #c4eaff66; transform:translate(0,0); margin:-21.5%; }
.vc-button-dock { position:absolute; right:max(10px,env(safe-area-inset-right)); bottom:max(9px,env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(3,clamp(46px,min(7vw,13vh),88px)); gap:clamp(4px,.8vw,12px); align-items:center; pointer-events:auto; touch-action:none; }
.vc-button { position:relative; display:grid; place-items:center; width:clamp(46px,min(7vw,13vh),88px); aspect-ratio:1; padding:5%; border:1px solid #dce7f077; border-radius:50%; color:#fff; background:radial-gradient(circle at 34% 25%,#354353ee,#101722f2 67%,#080d14f7); box-shadow:inset 0 0 0 3px #ffffff0d,0 4px 14px #000b; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; }
.vc-button img { width:76%; height:76%; object-fit:contain; filter:drop-shadow(0 2px 5px #000); pointer-events:none; }
.vc-button span { position:absolute; left:50%; bottom:-5px; transform:translateX(-50%); padding:2px 5px; border:1px solid #abb8c677; color:#f3f4f5; background:#080b12eb; font:800 clamp(8px,1.05vw,12px)/1 'Arial Narrow',Impact,sans-serif; letter-spacing:.04em; white-space:nowrap; }
.vc-punch { border-color:#27caffaa; box-shadow:inset 0 0 14px #078ad833,0 0 10px #078ad833,0 4px 14px #000b; }
.vc-kick { border-color:#ffc94aaa; box-shadow:inset 0 0 14px #d6921733,0 0 10px #d6921733,0 4px 14px #000b; }
.vc-special { border-color:#ff5366bb; box-shadow:inset 0 0 14px #e11d2e44,0 0 12px #e11d2e55,0 4px 14px #000b; }
.vc-block { border-color:#cbd4dc99; }
.vc-special { grid-column:2; grid-row:1; }
.vc-punch { grid-column:1; grid-row:2; }
.vc-kick { grid-column:3; grid-row:2; }
.vc-block { grid-column:2; grid-row:3; }
.vc-button.is-pressed { transform:scale(.92); filter:brightness(1.32); background-color:#364252; box-shadow:inset 0 0 20px #ffffff44,0 0 18px #bdeaff77; }
.vc-button[data-state="released"] { filter:brightness(1.12); box-shadow:inset 0 0 0 2px #ffffff33,0 0 12px #9deaff66; }
.vc-button[data-state="cooldown"] { opacity:.46; filter:grayscale(.85); }
.vc-button:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.rotate-hint { display:none; position:absolute; z-index:12; left:50%; top:1%; transform:translateX(-50%); padding:5px 12px; color:#fff; border:1px solid #ffffff55; background:#05070ddd; font-size:10px; letter-spacing:.08em; white-space:nowrap; pointer-events:none; }

.login-form { display:grid; gap:12px; width:min(92%,390px); margin:auto; }
.login-form input { min-height:48px; padding:12px 14px; color:#fff; border:1px solid #64717c; background:#090d15eF; font:500 15px Inter,sans-serif; }
.notice { max-width:560px; color:#b9bdc4; font-size:clamp(10px,1vw,15px); line-height:1.5; }
.err { min-height:20px; color:#ff7882; font-size:13px; }
#home-err { position:absolute; top:71%; left:35%; width:30%; text-align:center; }
.result-screen { align-items:center; justify-content:center; flex-direction:column; text-align:center; }
.result-announcement { display:grid; place-items:center; width:min(52vw,520px); aspect-ratio:3/1; background:url(./announcements/brush_sweep-v2.webp?v=runtimeaudit20260928r1) center/100% 100% no-repeat; color:#fff; font:clamp(34px,7vw,84px)/1 var(--font-display); text-shadow:3px 4px 0 #141823,-3px -1px 0 #aa0d1c,0 0 20px #df263c88; white-space:nowrap; }
.result-announcement[hidden] { display:none!important; }
.result-screen #result-title { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.result-screen .screen-heading { font-size:clamp(62px,12vw,160px); }
.result-actions { display:flex; gap:12px; margin-top:22px; }
.result-actions .btn { min-width:190px; height:58px; }

@media (orientation:portrait) and (max-width:900px) {
  .rotate-hint { display:block; }
  .site-header { top:2.5%; height:8%; grid-template-columns:minmax(0,22%) minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
  .site-brand { width:100%; }
  .site-nav { gap:clamp(8px,3vw,18px); }
  .nav-link { font-size:clamp(8px,2vw,11px); letter-spacing:0; }
  .header-status { display:none; }
  .screen { padding:13% 2.5% 4%; }
  .home-copy { left:27%; width:46%; top:18%; }
  .home-side-copy { display:none; }
  .home-features { bottom:7%; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
  .feature-card { min-height:0; padding:4px 6px; grid-template-columns:20px 1fr; gap:5px; }
  .feature-card img { width:18px; height:18px; }
  .feature-card span { display:none; }
  .home-footer { display:none; }
  .screen-title-row { margin-bottom:1%; }
  .fighter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:minmax(0,1fr); gap:1%; }
  .fighter-card { padding:5%; }
  .fighter-top { gap:5px; }
  .fighter-name { font-size:clamp(12px,2vw,17px); }
  .fighter-role { font-size:8px; }
  .fighter-stats { margin-top:4px; font-size:7px; }
  .fighter-animation,.fighter-meta { margin-top:3px; font-size:7px; }
  .arena-layout { grid-template-columns:minmax(0,1fr) minmax(88px,25%); gap:1%; }
  .arena-meta { padding:7%; }
  .arena-meta dl { gap:4px; }
  .arena-grid { gap:.6%; }
  .arena-card { height:clamp(42px,18%,70px); padding:0 2% 1%; }
  .arena-card span { font-size:clamp(8px,1.4vw,11px); }
  .arena-actions .btn { min-width:28%; height:36px; padding:0 14px; font-size:12px; }
  #hud { top:1.5%; left:1%; right:1%; height:21%; gap:.5%; }
  .player-hud { grid-template-columns:clamp(38px,10vw,70px) minmax(0,1fr); gap:1%; }
  .player-hud.player-two { grid-template-columns:minmax(0,1fr) clamp(38px,10vw,70px); }
  .portrait-frame { aspect-ratio:1/1; }
  .player-readout { grid-template-rows:auto minmax(13px,5vh) minmax(6px,1.4vh) auto; gap:2px; }
  .player-meta { font-size:clamp(7px,1.5vw,10px); gap:3px; }
  .player-tag { padding:2px 4px; }
  .center-clock { min-width:clamp(42px,12vw,64px); }
  #timer { font-size:clamp(20px,6vw,34px); }
  .round-label { font-size:7px; }
  .vc-left-zone { inset:0 40% 0 0; }
  .vc-button-dock { right:max(8px,env(safe-area-inset-right)); bottom:max(10px,env(safe-area-inset-bottom)); grid-template-columns:repeat(3,clamp(46px,min(12vw,11vh),68px)); gap:5px; }
  .vc-button { width:clamp(46px,min(12vw,11vh),68px); }
  .vc-button span { font-size:8px; }
}
@media (max-width:420px) and (orientation:portrait) {
  .site-header { grid-template-columns:60px minmax(0,1fr); }
  .nav-link { font-size:7px; }
  .home-copy { top:17%; }
  .home-features { display:none; }
  .home-title { width:min(86%,300px); font-size:clamp(24px,6.3vw,40px); }
  .home-actions { margin-top:3%; gap:4px; }
  .home-actions .btn { height:36px; min-height:36px; font-size:12px; }
  .home-notice { margin-top:1%; font-size:8px; }
  .feature-card strong { font-size:7px; }
  .fighter-grid { gap:.5%; }
  .fighter-card { padding:4%; }
  .fighter-portrait { width:30%; flex-basis:30%; }
  .fighter-animation { display:none; }
  .arena-meta dt { font-size:7px; }
  .arena-meta dd { font-size:8px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}

/* Responsive viewport architecture: the canvas keeps its 960×540 world and
   receives a centered, aspect-locked frame calculated by ViewportManager. */
:root { --game-width:100vw; --game-height:100dvh; --hud-scale:1; --menu-spacing:24px; --font-scale:1; }
html, body { width:100%; height:100%; min-height:100%; }
#app { inset:0; left:0; top:0; transform:none; width:100vw; height:100vh; height:100dvh; max-width:none; aspect-ratio:auto; box-shadow:none; background-size:cover; }
/* Letterbox gutters stay neutral during battle so the fitted canvas does not
   meet a differently scaled duplicate of its own arena background. */
#app.in-battle { background-image:none; background-color:#050609; }
.menu-shell, .battle-shell { position:absolute; inset:0; }
.menu-shell { z-index:2; }
.menu-shell.is-hidden { display:none; }
.menu-content { position:absolute; inset:0; }
.screen { padding-top:calc(11% + var(--menu-spacing) * .15); }
.battle-shell { display:none; z-index:3; pointer-events:none; }
.battle-shell.is-active { display:block; }
#stage { left:50%; top:50%; right:auto; bottom:auto; width:var(--game-width); height:var(--game-height); transform:translate(-50%,-50%); pointer-events:auto; }
#game { width:100%; height:100%; }
#hud { transform:scale(var(--hud-scale)); transform-origin:top center; }
:root[data-controller="hidden"] #touch { display:none!important; }
:root[data-controller="hidden"] .vc-button-dock { display:none!important; }
.utility-screen { flex-direction:column; align-items:center; justify-content:center; gap:var(--menu-spacing); text-align:center; }
.utility-screen p { color:#c1c4ca; font-size:calc(clamp(14px,1.3vw,20px) * var(--font-scale)); }
#orientation-gate { display:none; position:fixed; z-index:1000; inset:0; align-items:center; justify-content:center; padding:24px; background:#050609; text-align:center; }
.orientation-card { width:min(90vw,380px); display:grid; justify-items:center; gap:16px; }
.rotate-phone-mark { position:relative; width:54px; height:86px; border:3px solid #f3f4f5; border-radius:10px; box-shadow:inset 0 0 0 2px #151923,0 0 20px #20d9f477; animation:rotate-phone 1.8s ease-in-out infinite; }
.rotate-phone-mark::before { content:''; position:absolute; left:50%; bottom:6px; width:18px; height:2px; transform:translateX(-50%); background:#cbd4dc; }
.rotate-phone-mark::after { content:'↻'; position:absolute; right:-28px; bottom:-19px; color:var(--ui-red); font:42px/1 var(--font-display); text-shadow:0 2px 9px #000; }
.orientation-card h1 { font:900 clamp(25px,7vw,36px)/1.05 'Arial Narrow',Impact,sans-serif; text-transform:uppercase; }
.orientation-card p { color:#a8abb1; font-size:15px; }
@keyframes rotate-phone { 0%,20% { transform:rotate(0); } 70%,100% { transform:rotate(90deg); } }
@media (max-width:1100px), (max-height:820px) {
  #app::before { background:linear-gradient(90deg,#03050ba8,#05080f55 48%,#03050ba8),linear-gradient(0deg,#020306aa,transparent 34%,#02030655); }
  .site-header { top:2.5%; height:8%; grid-template-columns:minmax(90px,18%) minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
  .site-nav { gap:clamp(8px,2vw,22px); }
  .header-status { display:none; }
  .screen { padding:13% 2.5% 4%; }
  .fighter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #hud { transform:scale(calc(var(--hud-scale) * .95)); }
}
@media (max-width:900px) and (orientation:landscape) {
  .site-header { top:auto; left:0; right:0; bottom:0; height:clamp(46px,12vh,64px); padding:0 2vw; grid-template-columns:1fr; background:linear-gradient(0deg,#05070bf2,#05070bc9); }
  .brand-home, .header-status { display:none; }
  .site-nav { justify-content:space-around; gap:4px; }
  .nav-link { min-width:0; padding:0 10px; font-size:clamp(10px,2.3vw,14px); }
  .nav-link.is-current::after { bottom:3px; height:2px; }
  .screen { padding:3% 2.5% 13%; }
  .home-copy { top:10%; left:28%; width:44%; }
  .home-title { width:min(86%,clamp(220px,52vw,350px)); font-size:clamp(32px,8vh,60px); }
  .home-side-copy { display:none; }
  .home-features { bottom:14%; height:14%; }
  .home-footer { display:none; }
  .fighter-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .fighter-card { padding:2.5%; }
  .fighter-top { gap:5px; min-width:0; }
  .fighter-portrait { width:30%; flex-basis:30%; }
  .fighter-name { font-size:clamp(11px,2.2vh,15px); line-height:1.05; }
  .fighter-role { margin-top:3px; font-size:clamp(7px,1.5vh,10px); }
  .fighter-role { display:-webkit-box; max-width:100%; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; line-height:1.15; }
  .fighter-stats,.fighter-animation,.fighter-meta { display:none; }
  .screen-title-row { flex:0 0 auto; margin:0 0 1%; align-items:center; }
  .screen-title-row .screen-heading { font-size:clamp(22px,5vh,34px); }
  .screen-title-row > div:first-child { flex:1; min-width:0; }
  .screen-title-row > div:first-child .screen-kicker { max-width:none; text-align:left; font-size:clamp(8px,1.8vh,11px); }
  .screen-title-row > .screen-kicker { flex:0 0 42%; max-width:42%; font-size:clamp(8px,1.8vh,11px); }
  .select-screen { padding-top:2.5%; }
  .select-screen .select-footer { flex:0 0 auto; margin-top:1%; }
  .select-screen .select-footer .btn { min-height:36px; height:clamp(36px,8vh,42px); padding:0 16px; font-size:clamp(12px,2.3vh,16px); }
  .arena-layout {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(76px,1fr) auto clamp(40px,11vh,48px) auto;
    gap:1%;
  }
  .arena-preview { grid-column:1; grid-row:1; }
  .arena-preview-title { left:2%; bottom:2%; max-width:84%; padding:4px 12px 5px 4px; }
  .arena-preview-title h2 { font-size:clamp(18px,4.6vh,27px); }
  .arena-preview-title p { margin-top:3px; font-size:clamp(8px,1.7vh,11px); }
  .arena-meta {
    grid-column:1; grid-row:2; align-self:stretch; padding:4px 8px;
    border-left:2px solid var(--ui-red);
  }
  .arena-meta dl { grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; align-items:center; }
  .arena-meta dt { font-size:clamp(7px,1.45vh,9px); letter-spacing:.04em; }
  .arena-meta dd { margin-top:2px; font-size:clamp(8px,1.6vh,11px); }
  .arena-grid { grid-column:1; grid-row:3; gap:1%; min-height:0; }
  .arena-card { height:100%; min-height:0; padding:0 2% 4px; }
  .arena-card span { font-size:clamp(9px,1.9vh,12px); }
  .arena-actions { grid-column:1; grid-row:4; }
  .arena-actions .btn { min-width:24%; min-height:34px; height:clamp(34px,8vh,42px); padding:0 14px; font-size:clamp(12px,2.3vh,16px); }
  #hud { top:1%; height:23%; }
}
:root[data-layout="mobile"][data-orientation="portrait"] #menu-shell,
:root[data-layout="mobile"][data-orientation="portrait"] #battle-shell { display:none!important; }
:root[data-layout="mobile"][data-orientation="portrait"] #orientation-gate { display:flex; }
@media (min-width:901px) and (max-width:1100px) {
  .site-header { grid-template-columns:minmax(130px,20%) minmax(0,1fr); }
  .nav-link { font-size:clamp(11px,1.5vw,15px); }
  .home-copy { left:29%; width:42%; }
  .arena-layout { grid-template-columns:minmax(0,1fr) minmax(150px,24%); }
}

/* Home shell: keep the hero, actions, and feature cards in separate rows.
   Use viewport height units for vertical spacing (CSS percentage padding is
   based on width and caused the original hero to collide with the cards). */
html, body { overflow:hidden; }
#app { width:100%; height:100%; }
.home-screen.active {
  display:grid;
  grid-template-rows:minmax(0,1fr) auto auto;
  gap:clamp(8px,1.25dvh,14px);
  padding:clamp(72px,11dvh,132px) clamp(20px,2.1vw,40px) clamp(16px,2.4dvh,26px);
}
.home-copy {
  position:relative;
  inset:auto;
  justify-self:center;
  align-self:stretch;
  width:min(100%,640px);
  min-width:0;
  margin:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.home-title {
  width:min(100%,640px,60dvh);
  display:grid;
  place-items:center;
  margin:auto;
  aspect-ratio:3/1;
  line-height:1;
  transform:none;
}
.home-tag { margin-top:clamp(10px,1.6dvh,16px); font-size:clamp(10px,.95vw,15px); letter-spacing:.2em; }
.home-copy > .brush-rule { flex:0 0 auto; width:min(42%,240px); margin-top:10px; }
.home-actions {
  width:min(92%,540px);
  margin-top:clamp(14px,2.2dvh,22px);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(8px,1.2dvh,12px);
}
.home-actions .btn { height:clamp(48px,6.5dvh,66px); min-height:48px; }
.home-notice { margin-top:clamp(8px,1.3dvh,14px); font-size:clamp(10px,.95vw,14px); }
.home-side-copy { top:36%; left:2.1%; width:12%; max-width:180px; }
.home-side-copy-right { left:auto; right:2.1%; top:36%; bottom:auto; width:13%; max-width:190px; }
.home-features {
  position:relative;
  inset:auto;
  width:100%;
  height:auto;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(6px,.8vw,12px);
}
.feature-card {
  min-width:0;
  min-height:72px;
  padding:10px clamp(8px,1vw,16px);
  grid-template-columns:28px minmax(0,1fr);
  gap:clamp(6px,.8vw,12px);
}
.feature-card img { width:26px; height:26px; }
.feature-card strong { font-size:clamp(9px,.82vw,13px); }
.feature-card span { font-size:clamp(8px,.72vw,11px); }
.home-footer { position:relative; inset:auto; align-self:end; }
@media (max-width:1200px) {
  .home-side-copy { display:none; }
}
@media (max-height:700px) and (min-width:901px) {
  .home-screen.active { padding-top:72px; padding-bottom:16px; gap:8px; }
  .home-title { width:min(100%,52dvh,480px); }
  .home-tag { margin-top:8px; }
  .home-actions { margin-top:10px; gap:7px; }
  .home-actions .btn { height:46px; min-height:46px; }
  .home-notice { margin-top:6px; font-size:11px; }
  .home-features .feature-card { min-height:58px; padding-top:6px; padding-bottom:6px; }
}
@media (max-width:900px) and (orientation:landscape) {
  .home-screen.active {
    grid-template-rows:minmax(0,1fr);
    padding:12px 2.5% calc(clamp(46px,12vh,64px) + 10px);
  }
  .home-copy { width:min(100%,520px); }
  .home-title { width:min(100%,92dvh,440px); }
  .home-tag { margin-top:7px; font-size:9px; }
  .home-copy > .brush-rule { margin-top:6px; height:3px; }
  .home-actions { width:min(100%,460px); grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:12px; gap:7px; }
  .home-actions .btn { height:clamp(38px,10vh,44px); min-height:38px; padding:0 8px; font-size:clamp(11px,2.5vh,14px); letter-spacing:.04em; }
  .home-notice, .home-features, .home-footer { display:none; }
}
.nav-link, .screen-heading { font-family:var(--font-display); font-weight:400; }
@media (max-width:900px) and (orientation:landscape) {
  .result-screen { padding:5% 2.5% 13%; }
  .result-announcement { width:min(42vw,360px); }
  .result-screen .screen-heading { font-size:clamp(42px,8vh,72px); }
  .result-actions { gap:8px; margin-top:10px; }
  .result-actions .btn { min-width:130px; height:48px; }
}