*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#2a1848;
  --ink:#1a1030;
  --text:#fff8ff;
  --muted:#d4b8e8;
  --card:#fff7ef;
  --line:#1a1030;
  --pink:#ff2d7b;
  --peach:#ff8a1f;
  --mint:#00c98a;
  --sky:#1e90ff;
  --lilac:#7c4dff;
  --st:env(safe-area-inset-top,0px);
  --sb:env(safe-area-inset-bottom,0px)
}
html,body{
  width:100%;height:100%;overflow:hidden;touch-action:none;overscroll-behavior:none;
  background:var(--bg);color:var(--ink);font-family:"Nunito",system-ui,sans-serif;-webkit-font-smoothing:antialiased
}
#app{position:fixed;inset:0}
#game{display:block;width:100%;height:100%;touch-action:none}
.hud{position:fixed;top:0;left:0;right:0;z-index:4;pointer-events:none;padding:calc(10px + var(--st)) 12px 0;display:flex;flex-direction:column;gap:8px;transition:opacity .25s}
.hud.hidden{opacity:0}
.row{display:grid;grid-template-columns:1fr auto 1fr;gap:8px}
.cell{
  padding:10px 12px;border-radius:16px;background:#fff7ef;border:3px solid #1a1030;
  box-shadow:0 4px 0 #1a1030;min-height:56px;display:flex;flex-direction:column;justify-content:center;gap:2px
}
.cell.c{align-items:center;min-width:84px}
.cell.r{align-items:flex-end}
.lbl{font-size:.68rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#6b3d88}
.num{font-size:1.45rem;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1;color:#1a1030}
.lives{display:flex;gap:5px;margin-top:4px}
.pip{width:18px;height:18px;border-radius:50%;border:2px solid #1a1030;background:radial-gradient(circle at 35% 30%,#fff,#ff2d7b 50%,#c4004f)}
.pip.off{opacity:.28;filter:grayscale(.5)}
.story-chip{
  align-self:center;max-width:94%;padding:8px 14px;border-radius:999px;font-size:.84rem;font-weight:800;
  color:#fff8ff;background:#7c4dff;border:3px solid #1a1030;text-align:center;line-height:1.25;
  box-shadow:0 3px 0 #1a1030
}
.bar{height:8px;border-radius:999px;background:#1a1030;overflow:hidden;border:2px solid #1a1030}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff8a1f,#ff2d7b,#7c4dff);transition:width .2s}
.combo{
  align-self:center;padding:6px 14px;border-radius:999px;font-size:.8rem;font-weight:900;
  color:#fff;background:#ff2d7b;border:3px solid #1a1030;box-shadow:0 3px 0 #1a1030
}
.combo.hidden{display:none}
.overlay{
  position:fixed;inset:0;z-index:6;display:flex;align-items:flex-end;justify-content:center;
  padding:16px;padding-bottom:calc(20px + var(--sb));
  background:linear-gradient(180deg,transparent 10%,rgba(26,16,48,.35) 42%,rgba(26,16,48,.88));
  transition:opacity .3s
}
.overlay.hidden{opacity:0;pointer-events:none}
.sheet{
  width:min(100%,400px);padding:18px 18px 20px;border-radius:24px;background:var(--card);
  border:4px solid #1a1030;box-shadow:0 8px 0 #1a1030
}
.hero-art{display:flex;justify-content:center;margin-bottom:6px}
#hero-canvas{width:160px;height:120px;border-radius:16px;border:3px solid #1a1030}
.mark{font-size:.72rem;letter-spacing:.22em;font-weight:900;color:#ff2d7b;margin-bottom:2px}
.sheet h1{font-size:clamp(2rem,9vw,2.5rem);font-weight:900;letter-spacing:-.03em;line-height:1.05;margin-bottom:8px;color:#1a1030}
.sub{color:#5a3d72;font-size:.98rem;line-height:1.45;margin-bottom:16px;font-weight:700}
.cta{
  width:100%;border:4px solid #1a1030;border-radius:16px;padding:15px;font:inherit;font-size:1.12rem;font-weight:900;
  color:#fff;background:linear-gradient(180deg,#ff5a9a,#ff2d7b);box-shadow:0 6px 0 #1a1030
}
.cta:active{transform:translateY(3px);box-shadow:0 3px 0 #1a1030}
.cta-secondary{
  margin-top:10px;color:#1a1030;background:linear-gradient(180deg,#ffe14a,#ffb000);box-shadow:0 6px 0 #1a1030
}
.cta.hidden{display:none}
.hint{margin-top:8px;min-height:1.1em;color:#7a5a92;font-size:.82rem;text-align:center;font-weight:700}
.best{margin-top:12px;color:#5a3d72;font-size:.9rem;text-align:center;font-weight:700}
.best b{color:#1a1030;font-weight:900}
.toast{
  position:fixed;left:50%;bottom:calc(16px + var(--sb));transform:translateX(-50%);z-index:5;max-width:88%;
  padding:10px 14px;border-radius:14px;font-size:.86rem;font-weight:800;color:#fff8ff;background:#7c4dff;
  border:3px solid #1a1030;pointer-events:none;transition:opacity .25s;text-align:center;box-shadow:0 4px 0 #1a1030
}
.toast.hidden{opacity:0}