:root{--night:#1E1A5C;--deep:#16124A;--raised:#2A2470;--moon:#FFD36E;--ink:#FFF8EC;--soft:#CFC8F0}
*{box-sizing:border-box}
html,body{margin:0;background:var(--night);color:var(--ink);font-family:'Nunito',system-ui,sans-serif}
body{min-height:100svh;display:flex;flex-direction:column;align-items:center;padding:14px max(16px,env(safe-area-inset-left)) 28px}
.bar{width:100%;max-width:640px}
.back{color:var(--soft);text-decoration:none;font-weight:800}
.back:hover{color:var(--moon)}
h1{font-family:'Fredoka',sans-serif;font-size:clamp(1.5rem,6vw,2.2rem);margin:14px 0 4px;text-align:center}
.sub{color:var(--soft);text-align:center;margin:0 0 10px;max-width:36ch}
.stage{width:100%;max-width:600px;border-radius:24px;overflow:hidden;background:var(--raised);touch-action:manipulation}
.stage svg{display:block;width:100%;height:auto}
.status{margin-top:14px;font-weight:800;min-height:1.6em;text-align:center;color:var(--moon);font-size:1.1rem;max-width:36ch}
.row{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;justify-content:center}
.btn{font:inherit;font-weight:800;font-size:1.05rem;border:0;border-radius:999px;padding:13px 24px;background:var(--moon);color:var(--deep);cursor:pointer}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid rgba(255,243,196,.3)}
.win{display:none;align-items:center;gap:14px;background:var(--raised);border-radius:22px;padding:12px 18px;margin-top:12px;max-width:560px}
.win.show{display:flex}
.win img{width:72px;height:72px;border-radius:50%;flex:0 0 72px}
.win p{margin:0}
.win b{font-family:'Fredoka',sans-serif;font-size:1.4rem;color:var(--moon);display:block}
.tap{cursor:pointer}
.tap:focus,svg [tabindex]:focus{outline:none}
.tap:focus-visible > *{stroke:#FFD36E;stroke-width:4}
@keyframes wiggle{50%{transform:rotate(4deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}