:root { --ink:#281c24; --paper:#fff8ef; --red:#a62e31; --gold:#f4b942; --teal:#236b6b; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:#17151a; color:var(--ink); font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif; }
body { display:grid; place-items:center; padding:18px; }
#app { width:min(1280px,100%); }
.game-shell { position:relative; aspect-ratio:16/9; min-height:560px; overflow:hidden; background:#3b1e32; border:4px solid #f5d8ac; box-shadow:0 18px 55px #0009, inset 0 0 0 2px #6f3941; }
canvas { display:block; width:100%; height:100%; }
.layer { position:absolute; inset:0; }
.hidden { display:none !important; }
.screen { display:grid; place-items:center; padding:36px; background:linear-gradient(135deg,#251b2be8,#6a2d3be8); }
.panel { width:min(720px,100%); max-height:100%; overflow:auto; padding:32px; border:2px solid #f4c979; background:#fff8efee; box-shadow:0 12px 30px #1b101699; text-align:center; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:10px; color:var(--red); font-size:clamp(42px,7vw,76px); line-height:.92; letter-spacing:2px; text-shadow:3px 3px 0 var(--gold); }
h2 { color:#4c2630; font-size:32px; margin-bottom:10px; }
h3 { color:var(--red); }
.eyebrow { color:var(--red); font-weight:900; letter-spacing:2px; }
.tagline { color:var(--teal); font-size:20px; font-weight:900; }
.fine-print, .select-hint { color:#674e50; font-size:13px; }
button { border:0; padding:13px 22px; margin:7px; color:#fff8ef; background:var(--red); font:800 16px inherit; cursor:pointer; box-shadow:0 4px 0 #681d27; transition:transform .12s,filter .12s; }
button:hover { filter:brightness(1.12); transform:translateY(-2px); }
button:active { transform:translateY(2px); box-shadow:0 2px 0 #681d27; }
button.secondary { background:var(--teal); box-shadow:0 4px 0 #164545; }
button.ghost { padding:8px 13px; background:transparent; color:var(--teal); box-shadow:none; }
button.ghost.dark { color:var(--red); }
button:disabled { cursor:not-allowed; filter:grayscale(1); opacity:.45; transform:none; }
.button-row { display:flex; flex-wrap:wrap; justify-content:center; gap:2px; }
.fighter-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:22px 0; }
.fighter-card { position:relative; min-height:260px; border:3px solid #d9b27a; padding:12px; background:#fffdf8; color:var(--ink); cursor:pointer; box-shadow:none; }
.fighter-card.selected { border-color:var(--red); box-shadow:0 0 0 4px var(--gold); }
.fighter-card img { display:block; width:100%; height:190px; object-fit:contain; object-position:center center; filter:drop-shadow(0 8px 5px #30151a55); }
.fighter-card strong { display:block; color:var(--red); font-size:20px; }
.fighter-card small { display:block; margin-top:3px; color:#5d4c50; }
.selection-badge { display:block; min-height:20px; color:var(--teal); font-size:13px; font-weight:900; }
.selection-status { min-height:20px; color:var(--teal); font-size:14px; font-weight:800; }
.control-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; text-align:left; max-width:500px; margin:20px auto; }
.control-grid > div { padding:16px; background:#fffdf8; border:1px solid #d9b27a; }
.control-grid p { font-size:14px; }
kbd { display:inline-block; min-width:25px; padding:2px 5px; margin-right:3px; border:1px solid #ad8b70; border-bottom-width:3px; border-radius:3px; background:#fff; text-align:center; font:700 12px monospace; }
.hud { pointer-events:none; padding:16px 22px; display:flex; justify-content:space-between; align-items:flex-start; color:#fff; text-shadow:1px 2px 0 #28131a; }
.hud-side { width:35%; }
.hud-side.right { text-align:right; }
.name-row { font-size:19px; font-weight:900; }
.health-track { height:22px; margin-top:4px; padding:3px; background:#251b2b; border:2px solid #fff0cf; }
.health-fill { height:100%; width:100%; background:linear-gradient(#ff7152,#c62e35); transition:width .15s; }
.health-fill.p2 { margin-left:auto; background:linear-gradient(#62d8ba,#1f8b7d); }
.center-hud { text-align:center; width:22%; }
#timer { font-size:36px; line-height:1; font-weight:1000; color:#ffe0a1; }
#score { margin-top:6px; font-size:15px; font-weight:900; }
.cooldown { margin-top:7px; font-size:12px; color:#ffe0a1; }
.controls-hint { margin-top:14px; padding:10px 12px; background:rgba(0,0,0,0.55); border:1px solid rgba(255,224,161,0.35); border-radius:6px; font-size:12px; line-height:1.7; color:#ffe0a1; text-shadow:none; }
.hint-title { font-weight:900; font-size:13px; margin-bottom:4px; color:#fff; }
.hint-row { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.hint-row kbd { min-width:20px; padding:1px 4px; font-size:11px; border-color:rgba(255,224,161,0.5); background:rgba(255,255,255,0.12); color:#ffe0a1; }
.left-controls { text-align:left; }
.right-controls { text-align:right; }
.right-controls .hint-row { justify-content:flex-end; }
.pause-button { pointer-events:auto; position:absolute; top:90px; left:50%; min-width:72px; padding:7px 12px; margin:0; transform:translateX(-50%); background:#251b2bcc; border:1px solid #ffe0a1; color:#ffe0a1; box-shadow:0 3px 0 #120b12; font-size:13px; }
.pause-button:hover { transform:translate(-50%,-2px); }
.pause-button:active { transform:translate(-50%,2px); }
.announcement { display:grid; place-items:center; color:#fff; font-size:clamp(36px,7vw,88px); font-weight:1000; text-align:center; text-shadow:4px 4px 0 #8e2633; pointer-events:none; white-space:nowrap; }
.result-screen { display:grid; place-items:center; background:#17121bbd; color:#fff; text-align:center; }
.result-card { padding:32px 46px; border:3px solid #f4c979; background:var(--paper); color:var(--ink); box-shadow:0 14px 40px #0009; }
.result-card h2 { color:var(--red); font-size:42px; }
.pause-screen { display:grid; place-items:center; background:#17121bcc; color:#fff; text-align:center; }
.pause-screen h2 { color:#ffe0a1; }
@media (max-width:700px) { body { padding:0; } .game-shell { min-height:0; border-width:2px; } .panel { padding:18px; } .fighter-choices { gap:8px; } .fighter-card { min-height:200px; padding:6px; } .fighter-card img { height:130px; } .control-grid { gap:6px; } .control-grid p { font-size:10px; } .hud { padding:8px; } .name-row { font-size:12px; } #timer { font-size:24px; } #score,.cooldown { font-size:10px; } .health-track { height:14px; } }