: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 6px;max-width:34ch}
svg.rb{width:100%;max-width:560px;height:auto;display:block}
.drops{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:560px;margin-top:8px}
.drop{font:inherit;border:0;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--ink);font-weight:800;font-size:.95rem;padding:4px;border-radius:16px;min-width:64px}
.drop span.dot{width:58px;height:58px;border-radius:50%;display:block;border:4px solid rgba(255,255,255,.85);box-shadow:0 6px 0 rgba(0,0,0,.25)}
.drop:focus-visible{outline:4px solid var(--moon);outline-offset:2px}
.drop.used{visibility:hidden}
.drop.no{animation:no .4s}
.drop.hint span.dot{animation:pulse 1s infinite}
@keyframes no{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
@keyframes pulse{50%{transform:scale(1.15);box-shadow:0 0 0 8px rgba(255,211,110,.45)}}
.status{margin-top:14px;font-weight:800;min-height:1.6em;text-align:center;color:var(--soft)}
.row{display:flex;gap:10px;margin-top:10px;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:520px}
.win.show{display:flex}
.win img{width:72px;height:72px;border-radius:50%}
.win p{margin:0}
.win b{font-family:'Fredoka',sans-serif;font-size:1.4rem;color:var(--moon);display:block}
@media (prefers-reduced-motion:reduce){.drop.no,.drop.hint span.dot{animation:none}}