*{box-sizing:border-box}html,body{height:100%}
:root{
  --bg:#111;
  --panel:#fff1f2;
  --stroke:#2b1d1f;
  --pill:#ffeef3;
  --accent:#ff3ea5;
  --accent2:#00ffa3;
  --text:#2b1d1f;
  --shadow: 0 8px 0 rgba(43,29,31,.35);
  --soft: 0 10px 30px rgba(0,0,0,.3);
}
body{margin:0;background:var(--bg);font-family:'Baloo 2', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;color:var(--text)}
.stage{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#0a0612}
canvas{display:block;width:100%;height:100%;background:#000 url('assets/bg.svg') center/cover no-repeat}

.hud-panel{position:absolute;left:12px;right:12px;top:12px;display:flex;justify-content:space-between;gap:12px;align-items:center;
  padding:10px 12px;background:var(--panel);border:4px solid var(--stroke);border-radius:18px;box-shadow:var(--soft);}
.hud-left,.hud-right{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--pill);border:4px solid var(--stroke);box-shadow:var(--shadow)}
.stat span{font-weight:800;font-size:1.2rem}
.stat small{font-size:.85rem;opacity:.9}
.ic{width:22px;height:22px}
.btn{cursor:pointer;font-weight:800;color:#2b1d1f;background:linear-gradient(#ffd3e1,#ffb9d1)}
.btn.primary{background:linear-gradient(#ff9bd5,#ff5fc3);}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(2px)}

.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.28)}
.overlay.hidden{display:none}
.modal{background:var(--panel);border:4px solid var(--stroke);border-radius:20px;box-shadow:var(--soft);padding:16px 18px;max-width:520px;width:92%;text-align:center}
.modal h1{margin:.25rem 0 .75rem;font-size:2.1rem;letter-spacing:.5px}
.modal p{opacity:.95;font-size:1.1rem}
.modal-actions{display:flex;justify-content:center;margin-top:.6rem}

.footer{position:relative;z-index:1;padding:.5rem 0 1rem;text-align:center;font-size:.9rem;opacity:.8;color:#fff}

.character-pop{position:absolute;left:50%;top:55%;transform:translate(-50%,-55%) scale(.85);width:min(42vmin,380px);height:auto;pointer-events:none;filter:drop-shadow(0 8px 24px rgba(0,0,0,.55));opacity:0}
.character-pop.show{animation: pop .5s ease-out both}
@keyframes pop{
  0%{opacity:0; transform:translate(-50%,-55%) scale(.7)}
  20%{opacity:1; transform:translate(-50%,-55%) scale(1.1)}
  60%{opacity:1; transform:translate(-50%,-55%) scale(1.0)}
  100%{opacity:0; transform:translate(-50%,-55%) scale(1.0)}
}
.flash{position:absolute;inset:0;pointer-events:none}
.flash.show{animation:flash .2s ease-out}
@keyframes flash{from{background:rgba(255,62,165,.22)}to{background:transparent}}

@media (max-width:720px){
  .hud-panel{left:8px;right:8px;top:8px;gap:8px}
  .pill{padding:6px 10px}
  .ic{width:18px;height:18px}
  .stat span{font-size:1.05rem}
}