:root{color-scheme:dark;--bg:#101219;--panel:#1b1f2b;--gold:#e6b85c;--cream:#f3e8d0;--muted:#9298a8;--red:#d75d50;--blue:#58a9c9;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(ellipse at 50% 0%,#25293a 0,#11131a 60%);color:var(--cream)}body{padding:clamp(8px,2vw,24px);display:grid;place-items:center}.game-shell{width:min(1200px,100%);margin:auto}.game-topbar{height:68px;display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;padding:0 4px}.guild-return{color:var(--gold);font-size:13px;font-weight:800;letter-spacing:.14em;text-decoration:none}.brand-lockup{text-align:center;display:grid;gap:2px}.brand-kicker{font-size:9px;letter-spacing:.28em;color:var(--gold)}.brand-lockup strong{font-size:17px;letter-spacing:.16em}.top-actions{display:flex;justify-content:flex-end;align-items:center;gap:12px}.build-tag,.hud-sub{font-size:9px;letter-spacing:.18em;color:var(--muted)}.icon-button{border:1px solid #42485a;background:#1b1f2b;color:var(--cream);border-radius:8px;width:38px;height:36px;font-size:22px;cursor:pointer}.arena-wrap{position:relative;overflow:hidden;border:1px solid #45404a;border-radius:12px;background:#171923;box-shadow:0 22px 70px #0009}.hud{position:absolute;z-index:2;top:0;left:0;right:0;height:91px;padding:14px 22px;display:grid;grid-template-columns:1fr 90px 1fr;gap:20px;background:linear-gradient(#11131aee,#11131a99,transparent)}.fighter-name{font-size:15px;font-weight:900;letter-spacing:.18em;margin-bottom:7px}.right-hud{text-align:right}.health-track,.meter-track{height:15px;border:2px solid #d4c7a5;background:#25232a;padding:2px;transform:skewX(-12deg)}.health-fill{height:100%;width:100%;background:linear-gradient(90deg,#e6b85c,#f4e2a4);transition:width .12s}.right-hud .health-fill{margin-left:auto;background:linear-gradient(90deg,#58a9c9,#b4e6ee)}.meter-track{height:6px;margin-top:4px;border:1px solid #6b7180;padding:1px}.meter-fill{height:100%;width:0;background:linear-gradient(90deg,#69a8c8,#c6e9ed)}.right-hud .meter-fill{margin-left:auto}.round-center{text-align:center;display:grid;align-content:start;gap:0}.round-center div,.round-center small{font-size:8px;letter-spacing:.15em;color:var(--gold)}.round-center strong{font-size:34px;line-height:1.05;font-variant-numeric:tabular-nums}.round-center small{color:var(--muted)}canvas{display:block;width:100%;height:auto;aspect-ratio:16/9;touch-action:none}.round-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#0b0d14a8;text-align:center;pointer-events:none;transition:opacity .2s}.round-overlay.hidden{opacity:0}.round-overlay strong{font-size:clamp(24px,5vw,48px);letter-spacing:.18em;color:var(--gold);text-shadow:0 4px 20px #000}.round-overlay span{font-size:12px;letter-spacing:.2em;font-weight:800}.game-footer{display:flex;justify-content:space-between;gap:16px;padding:14px 4px;color:var(--muted);font-size:9px;letter-spacing:.12em}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#77c58d;margin-right:7px}.footer-divider{padding:0 8px;color:#555b6b}.bottom-note{text-align:center;color:#5d6372;font-size:8px;letter-spacing:.2em;padding:10px}.mobile-controls{display:none;justify-content:space-between;gap:16px;padding:12px 0}.touch-dpad,.touch-attacks{display:grid;grid-template-columns:repeat(3,42px);gap:5px}.mobile-controls button{min-height:40px;border:1px solid #555b6b;border-radius:8px;background:#292e3d;color:var(--cream);font-weight:800;touch-action:none}.touch-attacks{grid-template-columns:repeat(3,42px)}@media(max-width:720px){body{padding:4px}.game-topbar{height:54px}.brand-kicker{font-size:7px}.brand-lockup strong{font-size:12px}.build-tag{display:none}.hud{height:72px;padding:9px 10px;grid-template-columns:1fr 54px 1fr;gap:8px}.fighter-name{font-size:11px}.health-track{height:12px}.round-center strong{font-size:25px}.round-center div,.round-center small{font-size:7px}.game-footer{font-size:7px;flex-wrap:wrap}.footer-controls{display:none}.mobile-controls{display:flex}.touch-side{flex:1}.touch-dpad{grid-template-columns:repeat(4,1fr)}.touch-attacks{grid-template-columns:repeat(4,1fr)}.guild-return span{display:none}}:fullscreen{background:#101219;padding:2vw;display:grid;align-content:center}.game-shell:fullscreen{width:100%;max-width:1600px}.game-shell:fullscreen .arena-wrap{max-height:85vh}.game-shell:fullscreen canvas{max-height:78vh;object-fit:contain}
.hidden{display:none!important}
.menu-screen{position:fixed;z-index:20;inset:0;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 50% 38%,#30384b 0,#11131a 70%);overflow:auto}
.menu-screen.hidden{display:none}
.menu-panel{width:min(680px,100%);padding:clamp(24px,5vw,56px);border:1px solid #766342;border-radius:18px;background:linear-gradient(145deg,#242a39f5,#11141df5);box-shadow:0 30px 100px #000b;text-align:center}
.menu-kicker{color:var(--gold);font-size:10px;font-weight:900;letter-spacing:.3em}
.menu-panel h1{margin:14px 0 18px;color:var(--cream);font-size:clamp(30px,7vw,58px);letter-spacing:.13em;text-shadow:0 5px 24px #000}
.menu-panel p{color:#c5c9d2;font-size:12px;line-height:1.7;letter-spacing:.06em}
.menu-panel small{display:block;margin-top:16px;color:var(--muted);font-size:10px;letter-spacing:.16em}
.menu-actions{display:grid;gap:10px;width:min(390px,100%);margin:24px auto 0}
.menu-panel button{min-height:46px;padding:10px 18px;border:1px solid #8d754d;border-radius:8px;background:linear-gradient(180deg,#3c3a3a,#252832);color:var(--cream);font-weight:900;letter-spacing:.12em;cursor:pointer;transition:transform .12s,border-color .12s,background .12s}
.menu-panel button:hover,.menu-panel button:focus-visible{outline:2px solid var(--gold);outline-offset:2px;background:#55452e;transform:translateY(-1px)}
.settings-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin:16px 0}
.settings-row span{width:100%;color:var(--muted);font-size:10px;letter-spacing:.16em}
.settings-row button{min-width:68px;min-height:38px}
.menu-device-status{position:fixed;bottom:14px;left:12px;right:12px;text-align:center;color:#8e96a6;font-size:10px;letter-spacing:.12em}
.mobile-controls{flex-wrap:wrap}
.touch-p2{display:none}
@media(max-width:720px){.menu-panel{padding:24px 18px}.menu-panel p{font-size:10px}.mobile-controls{display:flex;gap:8px}.touch-side{min-width:0}.touch-dpad{grid-template-columns:repeat(4,minmax(28px,1fr))}.touch-attacks{grid-template-columns:repeat(3,minmax(28px,1fr))}.mobile-controls button{min-width:0;padding:4px 2px;font-size:10px}.touch-p2{display:block;flex:1}.touch-p2 .touch-dpad{margin-bottom:5px}.touch-p2 .touch-attacks{grid-template-columns:repeat(3,minmax(28px,1fr))}}
@media(max-width:420px){.touch-side{flex-basis:100%}.touch-p2{display:block}.mobile-controls{max-height:38vh;overflow:auto}}

@media(pointer:coarse){.mobile-controls{display:flex}.touch-p2{display:block}}
\n.select-grid,.stage-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0}.select-grid section{display:grid;gap:8px;padding:12px;border:1px solid #5e5b55;border-radius:10px}.select-grid h2{color:var(--gold);font-size:12px;letter-spacing:.12em}.menu-panel button.choice.selected,.menu-panel button.stage-choice.selected{border-color:#e8c66f;background:linear-gradient(180deg,#65502e,#393024);box-shadow:inset 0 0 0 1px #e8c66f}.stage-choice{display:grid;gap:8px;text-align:left}.stage-choice strong{font-size:12px}.stage-choice small{color:#c5c9d2;font-size:10px;line-height:1.4;letter-spacing:0}.menu-panel button:disabled{opacity:.35;cursor:not-allowed;transform:none}@media(max-width:520px){.select-grid,.stage-grid{grid-template-columns:1fr}.select-grid section{grid-template-columns:repeat(2,minmax(0,1fr))}.select-grid h2{grid-column:1/-1}}
.versus-intro{display:grid;gap:16px;text-align:center;padding:22px 8px}.versus-fighters{display:flex;align-items:center;justify-content:center;gap:clamp(12px,4vw,42px);flex-wrap:wrap}.versus-fighters strong{font-size:clamp(22px,4vw,38px);letter-spacing:.12em;color:var(--cream)}.versus-fighters span{font-size:18px;color:var(--gold);font-weight:900}.versus-intro p{color:var(--gold);letter-spacing:.16em;font-weight:800}.versus-intro small{color:var(--muted);letter-spacing:.14em}.versus-intro button{justify-self:center;min-width:170px}

/* Procedural visual-alpha polish */
.arena-wrap{isolation:isolate}
.hud{backdrop-filter:blur(3px)}
.health-track{box-shadow:0 0 14px #e6b85c22}
.meter-fill{box-shadow:0 0 9px #8eeaff88}
.menu-panel{position:relative;overflow:hidden}
.menu-panel:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 25%,#e6b85c0b 48%,transparent 70%);transform:translateX(-100%);animation:menu-sheen 8s ease-in-out infinite}
@keyframes menu-sheen{0%,65%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.menu-panel>*{position:relative}
.menu-kicker{text-shadow:0 0 18px #e6b85c55}
@media(prefers-reduced-motion:reduce){.menu-panel:before{animation:none}.menu-panel button{transition:none}}

/* Responsive in-arena touch controls: Player 1 only */
.game-shell{width:min(1200px,100%);min-width:0}
.arena-wrap{position:relative}
.mobile-controls{display:none;position:absolute;z-index:5;left:0;right:0;bottom:0;align-items:flex-end;justify-content:space-between;gap:clamp(8px,2vw,22px);padding:clamp(8px,2vw,18px);pointer-events:none}
.mobile-controls.active{display:flex}
.touch-movement,.touch-actions{pointer-events:auto;display:grid;gap:clamp(5px,1.2vw,10px)}
.touch-movement{grid-template-columns:repeat(3,clamp(34px,7vw,58px));grid-template-rows:repeat(2,clamp(34px,7vw,58px))}
.touch-movement button,.touch-actions button,.touch-pause{min-width:0;min-height:0;aspect-ratio:1;border:1px solid #e6c77d99;border-radius:14px;background:#151b28d9;color:#fff2d3;font-size:clamp(10px,2vw,15px);font-weight:900;backdrop-filter:blur(6px);touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 3px 12px #0008}
.touch-movement button:nth-child(1){grid-column:1;grid-row:2}
.touch-movement button:nth-child(2){grid-column:2;grid-row:1}
.touch-movement button:nth-child(3){grid-column:2;grid-row:2}
.touch-movement button:nth-child(4){grid-column:3;grid-row:2}
.touch-actions{grid-template-columns:repeat(3,clamp(34px,7vw,58px))}
.touch-actions button{aspect-ratio:1}
.touch-actions button:nth-child(7),.touch-actions button:nth-child(8),.touch-actions button:nth-child(9){font-size:clamp(8px,1.6vw,11px);background:#5a4328e8}
.touch-pause{pointer-events:auto;position:absolute;right:12px;top:12px;width:38px;height:38px;aspect-ratio:1;border-radius:10px;font-size:18px}
@media(pointer:coarse){.mobile-controls.active{display:flex}}
@media(max-width:720px){
 body{display:block;padding:0;min-height:100dvh;overflow:hidden}
 .game-shell{width:100%;height:100dvh;max-width:none;margin:0;display:flex;flex-direction:column;justify-content:center;gap:0;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
 .game-topbar{height:42px;min-height:42px;padding:0 10px;grid-template-columns:1fr 2fr 1fr}
 .arena-wrap{width:100%;border-left:0;border-right:0;border-radius:0;flex:0 0 auto}
 canvas{width:100%;height:auto;aspect-ratio:16/9}
 .hud{height:clamp(48px,13vw,70px);padding:7px 9px;grid-template-columns:1fr 48px 1fr;gap:7px}
 .fighter-name{font-size:clamp(9px,2.8vw,12px);margin-bottom:4px}
 .health-track{height:10px}
 .round-center strong{font-size:clamp(20px,6vw,28px)}
 .round-center div,.round-center small{font-size:6px}
 .game-footer,.bottom-note{display:none}
 .mobile-controls{padding:8px 10px max(10px,env(safe-area-inset-bottom))}
 .touch-movement{grid-template-columns:repeat(3,clamp(34px,10vw,52px));grid-template-rows:repeat(2,clamp(34px,10vw,52px))}
 .touch-actions{grid-template-columns:repeat(3,clamp(34px,10vw,52px))}
 .touch-movement button,.touch-actions button{border-radius:12px}
 .game-shell:fullscreen{height:100dvh;width:100vw;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
 .game-shell:fullscreen .arena-wrap{max-height:none}
 .game-shell:fullscreen canvas{max-height:none;object-fit:contain}
 .menu-screen{padding:12px;overflow-y:auto}
 .menu-panel{max-height:calc(100dvh - 24px);overflow-y:auto}
}
@media(max-width:380px){
 .touch-movement{grid-template-columns:repeat(3,34px);grid-template-rows:repeat(2,34px)}
 .touch-actions{grid-template-columns:repeat(3,34px)}
 .touch-movement button,.touch-actions button{font-size:9px;border-radius:9px}
 .mobile-controls{padding:6px}
}
@media(orientation:landscape) and (max-height:520px){
 .game-topbar{height:30px;min-height:30px}
 .game-shell{height:100dvh}
 .arena-wrap{max-height:calc(100dvh - 30px)}
 canvas{max-height:calc(100dvh - 30px);object-fit:contain}
 .mobile-controls{padding:4px 12px}
 .touch-movement{grid-template-columns:repeat(3,38px);grid-template-rows:repeat(2,38px)}
 .touch-actions{grid-template-columns:repeat(3,38px)}
}
.controller-prompt{color:var(--gold)!important;font-weight:800}
.single-player-select{grid-template-columns:minmax(0,1fr);max-width:380px;margin:18px auto}

/* Touch overlays are intentionally absent on desktop; local Player 2 has no touch/keyboard panel. */
.mobile-controls.active{display:none}
@media(pointer:coarse),(max-width:720px){.mobile-controls.active{display:flex}}
