*{box-sizing:border-box}html,body,#app{height:100%;margin:0}body{font-family:Avenir Next,Trebuchet MS,Segoe UI,sans-serif;color:#24315c;background:#8fd4ff;overscroll-behavior:none}button{font:inherit;color:inherit}.frame{height:100dvh;max-width:480px;margin:0 auto;position:relative;overflow:hidden;background:radial-gradient(circle at 18% 22%,rgba(255,229,106,.95) 0 10px,transparent 11px),radial-gradient(circle at 84% 16%,rgba(255,143,184,.9) 0 8px,transparent 9px),radial-gradient(circle at 90% 64%,rgba(125,227,138,.85) 0 9px,transparent 10px),radial-gradient(circle at 10% 78%,rgba(179,136,255,.8) 0 7px,transparent 8px),linear-gradient(180deg,#8fd4ff,#e7f7ff 46%,#fff4c2 78%,#b6f0c8);box-shadow:0 0 0 1px #24315c0f}.hub{display:flex;flex-direction:column;height:100%;min-height:0}.hub.is-covered{visibility:hidden}.hub-sky{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.cloud{position:absolute;height:28px;border-radius:999px;background:#ffffffeb;box-shadow:18px 8px 0 -2px #ffffffeb,38px 2px 0 -6px #ffffffe0}.cloud-a{top:18%;left:-12px;width:54px}.cloud-b{top:8%;right:18px;width:42px;transform:scale(.85)}.hill{position:absolute;left:-10%;right:-10%;bottom:-8%;height:28%;border-radius:50% 50% 0 0;background:linear-gradient(180deg,#7ed68c8c,#7ed68c00)}.hub-header{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:calc(22px + env(safe-area-inset-top)) 16px 6px}.hub-title-wrap{position:relative;display:inline-block;padding:10px 58px 8px}.hub-header h1{margin:0;font-size:1.9rem;line-height:1.05;letter-spacing:-.03em;color:#2a4d8f;text-shadow:0 2px 0 #fff,0 5px 0 rgba(255,176,59,.35)}.hub-header p{margin:8px 0 0;padding:4px 12px;border-radius:999px;background:#fffdf8c7;color:#5a4a86;font-weight:700}.hub-icon{position:absolute;width:36px;height:36px;display:grid;place-items:center;filter:drop-shadow(0 3px 0 rgba(36,49,92,.12))}.hub-icon svg{width:34px;height:34px}.hub-icon-star{top:-2px;left:2px}.hub-icon-balloon{top:-8px;right:0}.hub-icon-pad{bottom:-6px;left:8px}.hub-icon-spark{right:6px;bottom:-4px}@media(prefers-reduced-motion:no-preference){.hub-icon-star,.hub-icon-spark{animation:hub-bob 2.8s ease-in-out infinite}.hub-icon-balloon,.hub-icon-pad{animation:hub-bob 3.2s ease-in-out infinite reverse}}@keyframes hub-bob{50%{transform:translateY(-4px)}}.hub-scroll{position:relative;z-index:1;flex:1;min-height:0}.hub-grid{height:100%;overflow-y:auto;padding:12px 16px calc(28px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:14px}.hub-fade{pointer-events:none;position:absolute;left:0;right:0;bottom:0;height:56px;background:linear-gradient(to bottom,#b6f0c800,#b6f0c8)}.cell{--lip: color-mix(in srgb, var(--accent) 32%, #d9cfc3);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:168px;padding:16px 12px 18px;border:0;border-radius:22px;background:#fffdf8;box-shadow:0 7px 0 var(--lip),0 12px 20px #46301414;text-align:center;cursor:pointer;touch-action:manipulation}.cell.is-pressing{animation:cell-press .32s cubic-bezier(.2,.7,.2,1) forwards}@media(prefers-reduced-motion:reduce){.cell.is-pressing{animation:none}}@keyframes cell-press{0%{transform:translateY(0);box-shadow:0 7px 0 var(--lip),0 12px 20px #46301414}42%{transform:translateY(7px);box-shadow:0 0 0 var(--lip),0 1px 2px #46301424}to{transform:translateY(5px);box-shadow:0 2px 0 var(--lip),0 4px 8px #4630141a}}.cell:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.cell-icon{width:64px;height:64px;display:grid;place-items:center;border-radius:18px;background:color-mix(in srgb,var(--accent) 16%,white);color:var(--accent)}.cell-icon svg{width:36px;height:36px}.cell-title{font-size:1.05rem;font-weight:700;letter-spacing:-.02em}.cell-sub{color:#6d6258;font-size:.82rem}.game{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#fff6e8,#d7eef8)}.game-loading{margin:0;padding:calc(64px + env(safe-area-inset-top)) 24px 24px;color:#6d6258}.back{position:absolute;z-index:3;top:calc(10px + env(safe-area-inset-top));left:12px;width:40px;height:40px;display:grid;place-items:center;padding:0;border:0;border-radius:999px;background:#fffdf8f0;box-shadow:0 2px 8px #241c161f;cursor:pointer;touch-action:manipulation}.back svg{width:22px;height:22px}.back:focus-visible{outline:3px solid #6d4aff;outline-offset:2px}.play{position:relative;height:100%}.play-view{position:absolute;top:0;right:0;bottom:0;left:0}.play-view canvas{display:block}.result{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:grid;place-items:center;padding:24px;background:#241c1647}.result[hidden]{display:none!important}.result-card{width:min(100%,280px);padding:28px 24px;border-radius:24px;background:#fffdf8;text-align:center;box-shadow:0 16px 40px #241c162e}.result-kicker{margin:0;color:#6d6258}.stars{display:flex;justify-content:center;gap:4px;margin:14px 0 0}.stars[hidden]{display:none!important}.star{position:relative;width:36px;height:36px}.star svg{position:absolute;left:0;top:0;width:36px;height:36px}.star-gold{position:absolute;left:0;top:0;height:100%;overflow:hidden}.result-score{margin:8px 0 20px;font-size:2rem;font-weight:750;letter-spacing:-.03em}.again{border:0;border-radius:999px;padding:12px 22px;background:#241c16;color:#fffdf8;font-weight:700;cursor:pointer;touch-action:manipulation}.again:focus-visible{outline:3px solid #6d4aff;outline-offset:2px}