:root { color-scheme: dark; --header:#18272a; --line:#3b5558; --text:#f2f3ec; --muted:#9fb1af; --red:#e76557; --gold:#efbd51; --green:#69d2aa; }
* { box-sizing:border-box; }
html,body { width:100%; min-width:320px; height:100%; margin:0; overflow:hidden; }
body,button { color:var(--text); font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif; letter-spacing:0; }
button,a { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
button svg,a svg { display:block; width:20px; height:20px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.9; }
[hidden] { display:none!important; }
.game-app { display:grid; width:100%; height:100dvh; grid-template-rows:72px minmax(0,1fr); background:#33484a; user-select:none; }
.topbar { position:relative; z-index:20; display:grid; grid-template-columns:42px minmax(170px,1fr) minmax(520px,760px) minmax(98px,1fr); align-items:center; gap:12px; padding:0 18px; border-bottom:1px solid var(--line); background:var(--header); }
.icon-button { display:grid; width:38px; height:38px; place-items:center; border:1px solid var(--line); border-radius:5px; color:#e1e9e7; background:#21363a; cursor:pointer; text-decoration:none; }
.icon-button:disabled { opacity:.4; cursor:default; }
.icon-button .play-icon,.icon-button.is-paused .pause-icon,.mute-line { display:none; }
.icon-button.is-paused .play-icon,.icon-button.is-muted .mute-line { display:block; }
.icon-button.is-muted .sound-wave { display:none; }
.brand { display:flex; min-width:0; align-items:center; gap:10px; }
.brand>span:last-child { display:grid; gap:2px; }
.brand strong { font-size:16px; }
.brand small,.scoreboard span,.screen-content>p,.round-banner small { color:var(--muted); font-family:"SFMono-Regular",Consolas,monospace; font-size:9px; font-weight:700; }
.brand-mark { display:grid; width:34px; height:34px; place-items:center; border:2px solid var(--gold); border-radius:50%; color:var(--gold); font-weight:900; }
.scoreboard { display:grid; height:100%; grid-template-columns:1fr 76px 1fr; border-right:1px solid var(--line); border-left:1px solid var(--line); }
.fighter-status { display:grid; grid-template-columns:1fr auto; align-content:center; gap:5px 10px; padding:0 14px; }
.fighter-status strong { font-family:"SFMono-Regular",Consolas,monospace; font-size:18px; }
.enemy-status { text-align:right; }
.health-bar { grid-column:1/3; display:block; width:100%; height:12px; border:1px solid #617476; background:#2b3d3f; }
.health-bar i { display:block; width:100%; height:100%; background:var(--green); transition:width 100ms linear; }
.enemy-status .health-bar i { margin-left:auto; background:var(--red); }
.round-value { display:grid; place-items:center; align-content:center; gap:2px; border-right:1px solid var(--line); border-left:1px solid var(--line); }
.round-value strong { font-family:"SFMono-Regular",Consolas,monospace; font-size:20px; }
.actions { display:flex; justify-content:flex-end; gap:8px; }
.arena { position:relative; min-width:0; min-height:0; overflow:hidden; background:#6f8f91; isolation:isolate; }
#gameCanvas { display:block; width:100%; height:100%; }
.screen-layer { position:absolute; inset:0; z-index:10; display:grid; place-items:center; background:rgba(22,36,39,.68); }
.screen-layer.is-hidden { pointer-events:none; opacity:0; transition:opacity 180ms ease; }
.screen-content { display:grid; width:min(440px,calc(100% - 32px)); justify-items:center; text-align:center; }
.screen-content>p { margin:0 0 13px; color:#f2cb6e; }
.screen-content h1 { margin:0; font-size:clamp(46px,8vh,72px); line-height:1; }
.screen-content>span { margin:14px 0 23px; color:#d9e1dc; font-size:14px; }
.result { display:grid; width:min(300px,100%); margin-bottom:20px; grid-template-columns:1fr 1fr; border-top:1px solid #718083; border-bottom:1px solid #718083; }
.result div { display:grid; gap:3px; padding:12px; }
.result div+div { border-left:1px solid #657578; }
.result small { color:#b6c5c2; }
.result strong { font-family:"SFMono-Regular",Consolas,monospace; font-size:20px; }
.primary-button { display:flex; height:46px; align-items:center; gap:9px; padding:0 22px; border:1px solid #ad8030; border-radius:5px; color:#281f0d; background:var(--gold); font-weight:800; cursor:pointer; }
.round-banner { position:absolute; top:28px; left:50%; z-index:7; display:grid; min-width:120px; justify-items:center; padding:9px 18px; border:1px solid rgba(255,222,139,.5); border-radius:4px; background:rgba(26,42,45,.8); transform:translateX(-50%); }
.round-banner strong { font-family:"SFMono-Regular",Consolas,monospace; font-size:27px; }
.mobile-controls { position:absolute; right:22px; bottom:20px; left:22px; z-index:8; display:flex; align-items:flex-end; justify-content:space-between; pointer-events:none; }
.move-controls,.attack-controls { display:flex; align-items:flex-end; gap:10px; pointer-events:auto; }
.control-button,.attack-button { display:grid; place-items:center; border:1px solid rgba(235,244,239,.5); color:#f0f5f1; background:rgba(23,48,52,.72); cursor:pointer; touch-action:none; }
.control-button { width:54px; height:54px; border-radius:5px; }
.jump-button { height:72px; }
.attack-button { width:72px; height:72px; border-radius:50%; }
.attack-button strong { font-size:24px; line-height:1; }
.attack-button small { font-size:10px; }
.punch-button { border-color:#eab94e; background:rgba(190,132,39,.85); }
.kick-button { border-color:#e77668; background:rgba(182,70,59,.86); }
.sweep-button { border-color:#65d4bd; background:rgba(35,128,112,.88); }
.block-button { border-color:#83b9d4; background:rgba(48,104,132,.9); }
.control-button.is-active,.attack-button.is-active { filter:brightness(1.35); transform:scale(.96); }
@media (hover:hover) and (min-width:901px) { .mobile-controls { opacity:.45; } .mobile-controls:hover { opacity:1; } }
@media (max-width:900px) {
  .game-app { grid-template-rows:112px minmax(0,1fr); }
  .topbar { grid-template-columns:38px minmax(0,1fr) auto; grid-template-rows:58px 54px; gap:0 9px; padding:0 12px; }
  .scoreboard { grid-area:2/1/3/4; width:calc(100% + 24px); height:54px; margin-left:-12px; }
  .brand-mark { display:none; } .brand strong { font-size:15px; }
  .fighter-status { padding:0 8px; } .health-bar { height:10px; }
}
@media (max-width:520px) {
  .brand small { display:none; } .round-value { width:60px; }
  .fighter-status span:first-child { font-size:8px; }
  .mobile-controls { right:12px; bottom:max(12px,env(safe-area-inset-bottom)); left:12px; }
  .control-button { width:48px; height:48px; } .jump-button { height:64px; }
  .attack-controls { gap:6px; }
  .attack-controls { display:grid; grid-template-columns:repeat(2,54px); }
  .attack-button { width:54px; height:54px; } .screen-content h1 { font-size:44px; }
}