:root{
  --bg:#e9edf3; --fg:#161a24; --muted:#5b6475; --panel:#ffffff; --line:#cfd6e2; --accent:#2f6bff; --accent-fg:#ffffff;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#10131b; --fg:#eef1f7; --muted:#9aa4b8; --panel:#1a1f2b; --line:#2b3345; --accent:#5b8cff; --accent-fg:#0b1020;
  }
}
:root[data-theme="dark"]{
  --bg:#10131b; --fg:#eef1f7; --muted:#9aa4b8; --panel:#1a1f2b; --line:#2b3345; --accent:#5b8cff; --accent-fg:#0b1020;
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:"Fredoka",ui-rounded,"Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-tap-highlight-color:transparent;
}
.wrap{max-width:1200px; margin:0 auto; padding:14px 14px 28px}
header{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
h1{margin:0; font-size:28px; font-weight:700; letter-spacing:.5px}
.btn:focus-visible, .pad button:focus-visible, .chipbtn:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.hud{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; align-items:center}
.chip{
  background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:4px 10px; font-size:14px; font-weight:600;
  display:flex; gap:6px; align-items:baseline;
}
.chip span.k{color:var(--muted); font-weight:500; font-size:12px}
.chipbtn{font:inherit; cursor:pointer; border:1px solid var(--line)}
.abilities{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; min-height:0}
.badge{
  background:var(--accent); color:var(--accent-fg); border-radius:8px; padding:3px 9px; font-size:12.5px; font-weight:700;
  display:flex; align-items:center; gap:5px;
}
.badge.vest{background:#ffd84a; color:#3a2b00}
.stage{position:relative; width:100%; aspect-ratio:16/9; border-radius:14px; overflow:hidden; border:1px solid var(--line); line-height:0; background:#000}
canvas{width:100%; height:100%; display:block; object-fit:contain; touch-action:none}
.stage-control{
  position:absolute; z-index:3; top:10px; right:10px; font:inherit; font-size:13px; font-weight:700;
  color:#fff; background:rgba(8,10,20,.72); border:1px solid rgba(255,255,255,.35);
  border-radius:9px; padding:7px 10px; cursor:pointer; line-height:1;
}
.stage-pause{right:106px}
.stage-control:disabled{opacity:.45; cursor:default}
.stage-control:focus-visible{outline:3px solid #ffcf3a; outline-offset:2px}
.toast{
  position:absolute; z-index:4; top:12px; left:50%; transform:translateX(-50%); line-height:1.2;
  color:#fff; background:rgba(8,10,20,.88); border:1px solid rgba(255,255,255,.3);
  border-radius:10px; padding:8px 13px; font-size:14px; font-weight:700; pointer-events:none;
}
.stage:fullscreen{
  width:100vw; height:100vh; border:0; border-radius:0; display:flex; align-items:center; justify-content:center;
}
.stage:fullscreen canvas{width:100%; height:100%; object-fit:contain}
.overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:rgba(8,10,20,.72); color:#fff; text-align:center; padding:20px; line-height:1.3;
}
.overlay.hide{display:none}
.hide{display:none!important}
.overlay h2{margin:0; font-size:clamp(34px,9vw,60px); font-weight:700; letter-spacing:1px}
.overlay p{margin:0; font-size:clamp(14px,3.6vw,18px); opacity:.9; max-width:38ch}
.btn{
  font:inherit; font-weight:700; font-size:18px; background:#ffcf3a; color:#2a1d00; border:0; border-radius:14px;
  padding:10px 26px; cursor:pointer; box-shadow:0 4px 0 #b88a00;
}
.btn:active{transform:translateY(2px); box-shadow:0 2px 0 #b88a00}
.btn.secondary{background:#fff; color:#202638; box-shadow:0 4px 0 #aab3c4}
.legend{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px 14px; margin:10px 2px 0; font-size:13px; color:var(--muted)}
.legend div{display:flex; align-items:center; gap:6px}
.legend b{color:var(--fg); font-weight:600}
.sw{display:inline-block; width:12px; height:12px; border-radius:50%; flex:none}
.touch{display:none; margin-top:14px; justify-content:space-between; align-items:center; user-select:none; -webkit-user-select:none; gap:10px}
@media (pointer:coarse), (max-width:700px){ .touch{display:flex} .keys{display:none} }
.pad{display:grid; grid-template-columns:repeat(3,56px); grid-template-rows:repeat(3,56px); gap:6px}
.pad button, .actionbtn{
  font:inherit; font-size:20px; font-weight:700; color:var(--fg); background:var(--panel); border:1px solid var(--line);
  border-radius:16px; touch-action:none; user-select:none; -webkit-user-select:none;
}
.pad button:active, .pad button.on, .actionbtn:active{background:var(--accent); color:var(--accent-fg)}
.pad .u{grid-column:2; grid-row:1} .pad .l{grid-column:1; grid-row:2} .pad .r{grid-column:3; grid-row:2} .pad .d{grid-column:2; grid-row:3}
.actions{display:flex; flex-direction:column; gap:8px}
.bombbtn{width:92px; height:92px; border-radius:50%; font-size:16px}
.detbtn{width:92px; height:46px; border-radius:14px; font-size:14px}
.keys{margin:8px 2px 0; font-size:13px; color:var(--muted)}
.credit{margin:18px 2px 0; text-align:center; font-size:13px; color:var(--muted)}
.credit span{color:#ff5c8a}
.mute{margin-left:auto}
@media (prefers-reduced-motion: reduce){ .btn:active{transform:none} }