*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;overflow:hidden;font-family:"Baloo 2","Comic Sans MS","Trebuchet MS",system-ui,sans-serif;touch-action:manipulation}
#scene{position:fixed;inset:0;background:linear-gradient(180deg,#bfe6ff,#ffe3f0 70%);z-index:-1}
.sun{position:absolute;right:-30px;top:60px;width:130px;height:130px;border-radius:50%;background:radial-gradient(#fff6b0,#ffd54f);box-shadow:0 0 60px #ffe08a}
.cl{position:absolute;width:120px;height:40px;background:#fff;border-radius:40px;opacity:.9;animation:fl 30s linear infinite}.cl:before{content:"";position:absolute;width:60px;height:60px;border-radius:50%;background:#fff;left:22px;top:-28px}
.c1{top:130px;left:-130px}.c2{top:230px;left:-130px;animation-delay:-15s;transform:scale(.7)}@keyframes fl{to{left:110%}}
.hill{position:absolute;bottom:0;width:100%;height:140px}
#app{height:100%;display:flex;flex-direction:column;padding:10px 12px env(safe-area-inset-bottom)}
header{display:flex;gap:10px;align-items:center}
#guide{font-size:58px;width:76px;height:76px;display:grid;place-items:center;background:#fff;border-radius:50%;box-shadow:0 8px 18px #c2185b33;animation:bob 2.4s ease-in-out infinite}#guide.talk{animation:talk .4s ease-in-out infinite alternate}
@keyframes bob{50%{transform:translateY(-6px)}}@keyframes talk{to{transform:scale(1.08) rotate(-4deg)}}
#bubble{flex:1;background:#fff;border-radius:24px;padding:10px 16px;font-size:22px;font-weight:800;color:#8a2f63;min-height:70px;display:flex;align-items:center;box-shadow:0 8px 18px #c2185b22}
nav.top{display:flex;gap:8px;margin:10px 0;align-items:center}.sp1{flex:1}
.ib,.pill{border:0;border-radius:20px;background:#fff;font:800 26px "Baloo 2","Comic Sans MS",system-ui,sans-serif;min-width:58px;height:58px;box-shadow:0 5px 0 #f3b6cf;color:#8a2f63;padding:0 12px}
.pill{font-size:22px}.inst small{font-size:14px;margin-left:4px}
main{flex:1;overflow:auto;display:flex;flex-direction:column;justify-content:center}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:6px}
.t{border:0;border-radius:32px;background:#fff;min-height:140px;font-size:72px;box-shadow:0 8px 0 #f7c1d7,0 12px 24px #c2185b22;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:pop .4s ease both;color:#8a2f63}
.t small{font-size:20px;font-weight:800}.t:active{transform:scale(.94)}
.t.hl{animation:hl .6s ease-in-out 3}@keyframes hl{50%{transform:scale(1.12);box-shadow:0 0 0 8px #ffd54f}}
.t.ok{background:#fff6c7}@keyframes pop{from{transform:scale(.5);opacity:0}}
.sw{width:96px;height:96px;border-radius:50%}
.bub{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,#ffc1dc 40%,#b8a5ff);opacity:.85;width:90px;height:90px;border:0;animation:up 7s linear forwards}@keyframes up{to{transform:translateY(-120vh)}}
#play{position:relative;flex:1;overflow:hidden}
.credit{text-align:center;font-size:13px;color:#8a2f63;opacity:.75;padding:6px}
.praise{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);z-index:900;display:flex;align-items:center;gap:10px;padding:18px 26px;border-radius:999px;background:linear-gradient(135deg,#ff9ecf,#c39bff 55%,#8fd3ff);color:#fff;font:800 30px/1.15 "Baloo 2","Comic Sans MS",system-ui,sans-serif;text-align:center;text-shadow:0 2px 0 #a3367f88;max-width:88vw;pointer-events:none;animation:pz 2.6s ease both;box-shadow:0 14px 40px #b4479a55}
@keyframes pz{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}20%{transform:translate(-50%,-50%) scale(1)}85%{opacity:1}100%{opacity:0}}
#fx{position:fixed;inset:0;pointer-events:none;z-index:950}
#tapgo{position:fixed;inset:0;z-index:9999;border:0;background:rgba(255,235,245,.95);font:800 30px "Baloo 2","Comic Sans MS",system-ui,sans-serif;color:#c2185b}
#parent{position:fixed;inset:0;background:#0006;display:none;align-items:center;justify-content:center;z-index:999}#parent.on{display:flex}
.box{background:#fff;border-radius:20px;padding:18px;max-width:340px;font-size:16px;color:#4a2f45}.box button{margin:6px;padding:10px 14px;border:0;border-radius:12px;background:#ffd6e7;font:700 16px "Baloo 2","Comic Sans MS",system-ui,sans-serif}
#tip{position:fixed;left:12px;right:12px;bottom:20px;background:#fff;border-radius:16px;padding:14px;font-size:17px;display:none;z-index:998;box-shadow:0 8px 24px #0003}#tip.on{display:block}
.hide{font-size:110px;border:0;background:none;position:relative}.hide .cv{position:absolute;inset:-10px;background:#9be3a8;border-radius:40%;display:grid;place-items:center;font-size:90px;transition:transform .5s}.hide.open .cv{transform:translateY(120%)}