:root{--ink:#1e1440;--purple:#4b2a8a;--gold:#f2b632;--bg:#faf7ff}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--bg);line-height:1.5}
header{background:var(--ink);color:#fff}header .w{display:flex;align-items:center;gap:12px;padding:10px 16px;max-width:900px;margin:auto;flex-wrap:wrap}
header img{width:48px;height:48px;border-radius:50%;object-fit:cover;background:transparent}header a{color:#fff;text-decoration:none;font-weight:700}header nav{margin-left:auto;display:flex;gap:14px}header nav a{font-weight:500}
main{max-width:900px;margin:auto;padding:16px}h1{color:var(--purple);margin:.3em 0}
.card{background:#fff;border:2px solid #e4dbf7;border-radius:16px;padding:16px;margin:12px 0}
canvas{width:100%;max-width:520px;display:block;margin:auto;background:#f3eeff;border-radius:14px;touch-action:manipulation}
.opts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0}
button{font:inherit;font-weight:700;border:0;border-radius:999px;padding:10px 16px;background:var(--purple);color:#fff;cursor:pointer;min-height:44px}
button.alt{background:#fff;color:var(--purple);border:2px solid var(--purple)}button.sel{background:var(--gold);color:var(--ink)}
button:disabled{opacity:.5}.msg{min-height:3em;text-align:center;font-size:1.05rem}.score{text-align:center;font-weight:700;color:var(--purple)}
.real{background:var(--ink);color:#fff;border-radius:16px;padding:16px;text-align:center}.real a{display:inline-block;background:var(--gold);color:var(--ink);padding:10px 18px;border-radius:999px;font-weight:800;text-decoration:none;margin-top:6px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}.grid a{text-decoration:none;color:inherit}.grid .card:hover{border-color:var(--gold)}
footer{text-align:center;font-size:.85rem;padding:20px;color:#665}
.tag{display:inline-block;background:var(--gold);color:var(--ink);font-weight:800;font-size:.8rem;padding:4px 10px;border-radius:999px}
.hud{display:flex;justify-content:space-between;font-weight:800;color:var(--purple);flex-wrap:wrap;gap:6px}
.stars{font-size:2rem;text-align:center;letter-spacing:4px}
.fb{border-radius:12px;padding:10px;margin:8px 0;text-align:center;min-height:2.6em}.fb.ok{background:#e3f8e6}.fb.no{background:#ffe6e6}
.big{font-size:3.4rem;text-align:center;margin:6px}.pop{animation:pop .35s}.shake{animation:shake .4s}
@keyframes pop{0%{transform:scale(.6)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes shake{25%{transform:translateX(-8px)}50%{transform:translateX(8px)}75%{transform:translateX(-4px)}}
.conf{position:fixed;pointer-events:none;font-size:22px;animation:fall 1.2s ease-in forwards;z-index:9}
@keyframes fall{to{transform:translateY(60vh) rotate(540deg);opacity:0}}
.q{background:#fff;border:2px solid #e4dbf7;border-radius:14px;padding:12px;margin:10px 0}.q button{display:block;width:100%;margin:6px 0;text-align:left}
.bins{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.bins button{border-radius:14px;padding:12px 6px;font-size:.95rem}
.bar{height:10px;background:#e4dbf7;border-radius:9px;overflow:hidden}.bar i{display:block;height:100%;background:var(--gold);transition:width .3s}
input[type=range]{width:100%;accent-color:#4b2a8a}
.tray{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.tray button{font-size:.9rem;padding:8px 12px}
.ks h2{border-bottom:3px solid var(--gold);display:inline-block}