:root{--bg1:#bfe9ff;--bg2:#fff6c9;--ink:#2b2250;--c1:#ff5a5f;--c2:#ffb400;--c3:#2bb673;--c4:#2f8fff;--c5:#9b5de5;--card:#fff}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%}
body{font-family:"Baloo 2","Trebuchet MS","Segoe UI Rounded",system-ui,sans-serif;font-weight:700;color:var(--ink);background:linear-gradient(180deg,var(--bg1),var(--bg2));overflow-x:hidden}
#app{max-width:560px;margin:0 auto;min-height:100%;padding:12px 16px 24px;display:flex;flex-direction:column;gap:14px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:56px}
.bar .title{font-size:1.35rem;flex:1;text-align:center}
.ib{width:56px;height:56px;border-radius:50%;border:0;background:#fff;color:var(--ink);font-size:1.6rem;box-shadow:0 3px 0 rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;font-family:inherit;font-weight:800}
.ib:active,.big:active,.choice:active{transform:translateY(2px);box-shadow:none}
.stars{background:#fff;border-radius:28px;padding:8px 14px;font-size:1.2rem;box-shadow:0 3px 0 rgba(0,0,0,.12);white-space:nowrap}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.big{border:0;border-radius:26px;padding:18px 10px;font-family:inherit;font-weight:800;font-size:1.3rem;color:#fff;box-shadow:0 6px 0 rgba(0,0,0,.2);display:flex;flex-direction:column;align-items:center;gap:6px;min-height:132px;justify-content:center;text-align:center;line-height:1.1}
.big svg{width:64px;height:64px}
.big.wide{grid-column:1/-1;min-height:84px;flex-direction:row;font-size:1.4rem}
.big.wide svg{width:52px;height:52px}
.k1{background:var(--c1)}.k2{background:var(--c2);color:#3b2b00}.k3{background:var(--c3)}.k4{background:var(--c4)}.k5{background:var(--c5)}.k6{background:#ff7a2f}
.prompt{background:#fff;border-radius:24px;padding:14px 16px;font-size:1.4rem;text-align:center;box-shadow:0 4px 0 rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;gap:10px;min-height:64px}
.stage{display:flex;align-items:center;justify-content:center;min-height:130px;gap:6px;flex-wrap:wrap;font-size:5rem;line-height:1;background:rgba(255,255,255,.7);border-radius:24px;padding:10px}
.stage svg{width:130px;height:130px}.stage .o svg{width:52px;height:52px}
.stage .o{display:inline-flex}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choices.c3{grid-template-columns:1fr 1fr 1fr}
.choice{border:0;border-radius:24px;background:#fff;color:var(--ink);font-family:inherit;font-weight:800;font-size:2.6rem;min-height:104px;box-shadow:0 6px 0 rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;padding:8px;text-align:center;line-height:1.05;transition:transform .1s}
.choice svg{width:84px;height:84px}
.choice.txt{font-size:1.5rem}
.choice.bad{animation:shake .4s;opacity:.45;pointer-events:none}
.choice.good{background:#c8f7d0;box-shadow:0 6px 0 #2bb673}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.praise{position:fixed;left:0;right:0;top:34%;text-align:center;font-size:2.4rem;color:#fff;pointer-events:none;z-index:9;animation:pop 1.1s ease forwards;text-shadow:0 3px 0 rgba(0,0,0,.3)}
.praise .st{font-size:5rem;display:block}
.praise.soft{color:var(--ink);text-shadow:none;font-size:1.6rem;top:40%}
@keyframes pop{0%{transform:scale(.3);opacity:0}25%{transform:scale(1.15);opacity:1}80%{opacity:1}100%{transform:scale(1) translateY(-30px);opacity:0}}
.center{text-align:center}.mid{font-size:1.5rem}
.letter{font-size:5.5rem}
.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.tile{border:0;border-radius:16px;background:#fff;font-family:inherit;font-weight:800;font-size:1.7rem;min-height:60px;color:var(--ink);box-shadow:0 4px 0 rgba(0,0,0,.15)}
.card{background:#fff;border-radius:24px;padding:16px;font-size:1.1rem;box-shadow:0 4px 0 rgba(0,0,0,.1);line-height:1.35;font-weight:600}
.card h2{margin:0 0 6px;font-size:1.3rem}
.seg{display:flex;gap:8px}.seg button{flex:1;border:3px solid var(--c4);background:#fff;color:var(--c4);border-radius:18px;padding:12px 6px;font-family:inherit;font-weight:800;font-size:1.1rem}
.seg button.on{background:var(--c4);color:#fff}
.btn{border:0;border-radius:18px;background:var(--c3);color:#fff;font-family:inherit;font-weight:800;font-size:1.1rem;padding:13px 18px;box-shadow:0 4px 0 rgba(0,0,0,.2);text-decoration:none;display:inline-block}
.btn.alt{background:#fff;color:var(--ink)}
.pad{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.pad button{border:0;border-radius:14px;background:#fff;font-family:inherit;font-weight:800;font-size:1.6rem;min-height:56px}
.trace{touch-action:none;background:#fff;border-radius:24px;box-shadow:0 4px 0 rgba(0,0,0,.12);align-self:center}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.slots{display:flex;gap:8px;justify-content:center;min-height:64px;flex-wrap:wrap}
.slot{min-width:64px;min-height:64px;border:3px dashed #9aa;border-radius:16px;background:#fff;font-size:1.6rem;display:flex;align-items:center;justify-content:center;padding:0 8px}
.slot.f{border-style:solid;border-color:var(--c3);background:#c8f7d0}
.drop{border-radius:24px;border:4px solid;min-height:110px;display:flex;align-items:center;justify-content:center;background:#fff}
.drop svg{width:70px;height:70px}
.tag{font-size:.8rem;opacity:.7;font-weight:600}
.v{font-size:.8rem;text-align:center;opacity:.6;font-weight:600}
@media (max-height:640px){.stage{min-height:96px}.choice{min-height:84px}}

.ib.back{width:68px;height:68px;font-size:2.4rem;background:#ff5a5f;color:#fff;box-shadow:0 4px 0 rgba(0,0,0,.2)}
.hero{text-align:center}.hero img{border-radius:24px;box-shadow:0 4px 0 rgba(0,0,0,.2)}.hname{font-size:2rem;color:#ff5a5f;text-shadow:0 2px 0 #fff}
.big.sel{box-shadow:0 0 0 6px #fff,0 8px 0 rgba(0,0,0,.25);transform:scale(1.03)}.big.sel::after{content:"✓";position:absolute;top:6px;right:12px;font-size:1.6rem}
.big{position:relative}.grid .big:not(.sel){opacity:.8}.big.start{opacity:1!important;font-size:1.8rem;min-height:96px}
.btn.quit{align-self:center;margin-top:6px}