:root { --bg:#0e1726; --panel:#111827; --text:#ffffff; --primary:#2563eb; --secondary:#374151; --vh: 1vh; }
*{ box-sizing:border-box }
html,body{ height:100% }
body{ margin:0; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif; }
#app{ width:100vw; height:calc(var(--vh) * 100); display:grid; grid-template-rows:1fr }
.stage{ position:relative; width:100vw; height:calc(var(--vh) * 100) }
canvas#game{ background:#9dd6ff; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,0.35); width:100%; height:100%; display:block }

.hud-overlay{ position:absolute; left:12px; top:12px; background:rgba(0,0,0,0.72); color:#fff; border-radius:12px; padding:10px 12px; box-shadow:0 6px 18px rgba(0,0,0,0.45); font-weight:600; display:grid; gap:4px; z-index:5; pointer-events:none; min-width: clamp(140px, 20vw, 200px); }
.hud-overlay .row{ display:flex; align-items:center; gap:6px; font-size:clamp(12px, 2.2vw, 16px) }
.hud-overlay .label{ opacity:.9 }
.hud-overlay .sep{ opacity:.7 }
@keyframes coinPop{ 0%{ transform:scale(1) } 30%{ transform:scale(1.15) } 100%{ transform:scale(1) } }
@keyframes hitFlash{ 0%{ background:rgba(140,0,0,0.85) } 100%{ background:rgba(0,0,0,0.72) } }
.hud-overlay.pop .row:nth-child(2){ animation: coinPop .35s ease }
.hud-overlay.flash{ animation: hitFlash .25s ease }

.overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.6); display:none; align-items:center; justify-content:center; z-index:100; padding:16px }
.overlay.visible{ display:flex }
.panel{ background:var(--panel); border-radius:12px; padding:20px; width:min(92vw, 680px); max-height:90vh; overflow:auto; box-shadow:0 14px 40px rgba(0,0,0,0.45) }
.panel h1, .panel h2{ margin:0 0 12px 0 }
.panel .actions{ display:flex; gap:10px; margin-top:12px }
.muted{ opacity:.85; font-size:14px }
.board{ margin:0; padding-left:22px }
.save{ margin-top:12px; display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center }
.save input{ padding:10px; border-radius:8px; border:1px solid #243042; background:#0b1320; color:var(--text) }
.start-media{ width:100%; display:flex; justify-content:center; margin-bottom:12px }
.start-media img{ max-width:100%; max-height:40vh; object-fit:contain; border-radius:10px; display:none }
.placement{ margin-top:8px }
.hidden{ display:none !important; }