:root{--sky:#d7eef0;--panel:rgba(255,255,255,.9);--ink:#5a4f6b;--accent:#ff9fb2;--accent-soft:#ffd6de;--shadow:0 8px 22px rgba(90,79,107,.2);color-scheme:light}*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden;background:linear-gradient(#a9d7ee,#cdeaf1 20%,#e4f3ee 34% 100%) fixed;color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}#game{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}.bar{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:30px;padding:0 16px calc(20px + env(safe-area-inset-bottom,0px));pointer-events:none}.btn{pointer-events:auto;width:88px;height:88px;border-radius:50%;border:0;background:radial-gradient(circle at 35% 30%,#fff 0 45%,#f6f1fa);box-shadow:var(--shadow),inset 0 -4px #5a4f6b14;display:grid;place-items:center;cursor:pointer;touch-action:manipulation;position:relative;transition:transform .18s cubic-bezier(.3,1.6,.5,1),background .25s}.btn:active{transform:scale(.92)}.btn:focus-visible{outline:4px solid var(--accent);outline-offset:3px}.btn svg{width:48px;height:48px;transition:transform .3s ease}.btn.on{background:radial-gradient(circle at 35% 30%,#ffd0da 0,#ff9fb2)}.btn.on svg{transform:rotate(-14deg)}#home:after{content:"";position:absolute;inset:-7px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--p,0)*1turn),transparent 0);-webkit-mask:radial-gradient(circle,transparent 47px,#000 48px);mask:radial-gradient(circle,transparent 47px,#000 48px);pointer-events:none}.tray{position:fixed;left:50%;width:max-content;bottom:calc(126px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;gap:12px;padding:12px 16px;border-radius:52px;background:#ffffff8c;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transform:translate(-50%);transition:transform .32s cubic-bezier(.3,1.4,.5,1),opacity .25s;max-width:calc(100% - 32px);flex-wrap:wrap}.tray.closed{transform:translate(-50%,40px) scale(.85);opacity:0;pointer-events:none}.pick{width:74px;height:74px;border-radius:50%;border:4px solid transparent;background:var(--panel);box-shadow:0 4px 10px #5a4f6b26;font-size:42px;line-height:1;display:grid;place-items:center;cursor:pointer;touch-action:manipulation;transition:transform .2s cubic-bezier(.3,1.6,.5,1),border-color .2s,background .2s;padding:0;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}.pick.sel{border-color:var(--accent);background:#fff5f7;transform:scale(1.12) translateY(-4px)}.pick:focus-visible{outline:4px solid var(--accent);outline-offset:3px}#loading{position:fixed;inset:0;display:grid;place-items:center;background:linear-gradient(#cfe9f2,#e9f6ef);transition:opacity .8s ease;z-index:5}#loading.gone{opacity:0;pointer-events:none}#loading svg{width:120px;height:120px;animation:bob 2.4s ease-in-out infinite}@keyframes bob{0%,to{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-10px) rotate(4deg)}}.songs{position:fixed;left:50%;bottom:calc(126px + env(safe-area-inset-bottom,0px));display:flex;gap:14px;padding:14px 18px;border-radius:60px;background:#fff8f0cc;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:3;transform:translate(-50%);transition:transform .32s cubic-bezier(.3,1.4,.5,1),opacity .25s}.songs.closed{transform:translate(-50%,40px) scale(.85);opacity:0;pointer-events:none}.songs .pick{width:84px;height:84px;font-size:46px}.songs .pick.sleep{background:#e7e3f7}#wipe{position:fixed;inset:0;pointer-events:none;z-index:4;display:none}@media (prefers-reduced-motion:reduce){.btn,.pick,.tray,.btn svg{transition:none}#loading svg{animation:none}}.pick.pot{background:radial-gradient(circle at 35% 30%,#fff 0,var(--pot) 55%,var(--pot) 100%)}.pick.pot.rainbow{background:conic-gradient(#ff9fc4,#ffbe8f,#ffe27a,#9fe3b6,#94cdfb,#c6a6ff,#ff9fc4)}.pick{position:relative}body.words-on .btn[data-word]:before,body.words-on .pick[data-word]:before{content:attr(data-word);position:absolute;left:50%;transform:translate(-50%);white-space:nowrap;font:700 15px/1 ui-rounded,SF Pro Rounded,system-ui,sans-serif;color:var(--ink);background:#ffffffd9;padding:3px 8px;border-radius:10px;pointer-events:none}body.words-on .btn[data-word]:before{top:-26px}body.words-on .pick[data-word]:before{bottom:-22px;font-size:13px}body.words-on .tray{padding-bottom:26px;bottom:calc(156px + env(safe-area-inset-bottom,0px))}body.reduce-motion .btn,body.reduce-motion .pick,body.reduce-motion .tray,body.reduce-motion .btn svg{transition:none}.parent{position:fixed;inset:0;z-index:10;display:grid;place-items:center;background:#5a4f6b59;font:16px/1.4 ui-rounded,SF Pro Rounded,system-ui,sans-serif;color:var(--ink)}.parent.closed{display:none}.parent-box{background:#fff;border-radius:24px;padding:24px 28px;min-width:300px;max-width:min(92vw,460px);max-height:90vh;overflow:auto;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px}.parent-box h2{margin:0 0 4px;font-size:22px;text-align:center}.parent-box button{font:inherit;border:0;border-radius:14px;padding:12px 16px;cursor:pointer;background:#f3eefa;color:var(--ink)}.pin-dots{text-align:center;font-size:28px;letter-spacing:10px}.parent-msg{margin:0;min-height:1.4em;text-align:center;font-size:14px}.pin-pad{display:grid;grid-template-columns:repeat(3,72px);gap:12px;justify-content:center}.parent-box .pin-key{height:72px;font-size:26px;font-weight:700;border-radius:50%}.parent-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:6px 0;border-bottom:1px solid #f0eaf6}.parent-row input[type=checkbox]{width:26px;height:26px}.parent-row select{font:inherit;padding:6px 8px;border-radius:10px}.parent-row input:disabled{opacity:.4}.parent-box .parent-danger{background:#ffe2e2;margin-top:8px}.parent-box .parent-link{background:none;text-decoration:underline;padding:6px}.parent-box .parent-close{background:var(--accent);color:#fff;font-weight:700}.parent-level{display:flex;align-items:center;gap:10px}.parent-box .pin-step{width:40px;height:40px;padding:0;border-radius:50%;font-size:22px;font-weight:700}#ghost-hand{position:fixed;z-index:6;font-size:64px;line-height:1;pointer-events:none;opacity:0;transform:translate(-30%,-10%);font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;filter:drop-shadow(0 4px 6px rgba(90,79,107,.25))}#ghost-hand.show{animation:ghost-tap 3.2s ease-in-out both}@keyframes ghost-tap{0%{opacity:0;transform:translate(-30%,10%)}15%{opacity:.8;transform:translate(-30%,-10%)}30%{transform:translate(-30%,-10%) scale(.86)}40%{transform:translate(-30%,-10%) scale(1)}55%{transform:translate(-30%,-10%) scale(.86)}65%{transform:translate(-30%,-10%) scale(1)}85%{opacity:.8}to{opacity:0}}body.reduce-motion #ghost-hand.show{animation:ghost-fade 3.2s ease-in-out both}@keyframes ghost-fade{0%,to{opacity:0}20%,80%{opacity:.8}}@media (prefers-reduced-motion:reduce){#ghost-hand.show{animation:ghost-fade 3.2s ease-in-out both}}.gap-tiles{position:fixed;left:50%;bottom:calc(126px + env(safe-area-inset-bottom,0px));display:flex;gap:18px;padding:14px 18px;border-radius:44px;background:#ffffff8c;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transform:translate(-50%);transition:transform .32s cubic-bezier(.3,1.4,.5,1),opacity .25s}.gap-tiles.closed{transform:translate(-50%,40px) scale(.85);opacity:0;pointer-events:none}.gap-tile{width:118px;height:118px;border-radius:30px;border:4px solid transparent;background:var(--panel);box-shadow:0 4px 10px #5a4f6b26;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;cursor:pointer;touch-action:manipulation;color:var(--ink);font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;transition:transform .2s cubic-bezier(.3,1.6,.5,1),opacity .3s}.gap-tile .pic{font-size:56px;line-height:1;display:grid;place-items:center;min-height:64px}.gap-tile .swatch{width:58px;height:58px;border-radius:50%;box-shadow:inset 0 -6px #0000000f}.gap-tile .word{font:700 22px ui-rounded,SF Pro Rounded,system-ui,sans-serif;letter-spacing:.5px}.gap-tiles.words-only .gap-tile .word{font-size:30px}.gap-tile.dim{opacity:.4}.gap-tile.pressed{transform:scale(1.1) translateY(-4px);border-color:var(--accent)}.gap-tile.shake{animation:gap-shake .5s}@keyframes gap-shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}body.reduce-motion .gap-tile,body.reduce-motion .gap-tiles{transition:none;animation:none}.mirror{position:fixed;inset:0;z-index:3;pointer-events:none}.mirror.closed{display:none}.mirror-stage{position:absolute;left:0;top:0;bottom:0;width:54%;pointer-events:auto}.mirror-panel{position:absolute;right:16px;top:16px;bottom:calc(126px + env(safe-area-inset-bottom,0px));width:min(46%,520px);display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:32px;pointer-events:auto;background:#fff9;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.mirror-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.mirror-tiles{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:16px;align-items:center;padding:6px 0 4px;-webkit-overflow-scrolling:touch}.mrow{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.mtab,.mtile{position:relative;border:4px solid transparent;border-radius:24px;background:var(--panel);padding:4px;cursor:pointer;box-shadow:0 4px 10px #5a4f6b26;touch-action:manipulation;transition:transform .2s cubic-bezier(.3,1.6,.5,1),border-color .2s}.mtab canvas{width:56px;height:56px;display:block}.mtile canvas{width:96px;height:96px;display:block}.mtile.small{border-radius:50%}.mtile.small canvas{width:52px;height:52px;border-radius:50%}.mtab.sel{border-color:var(--accent);background:#fff5f7}.mtile.sel{border-color:var(--accent);background:#fff5f7;transform:scale(1.08)}.mtab:active,.mtile:active{transform:scale(.93)}.mirror-done{position:absolute;left:calc(27% - 44px);bottom:calc(20px + env(safe-area-inset-bottom,0px));width:88px;height:88px;border-radius:50%;border:0;background:radial-gradient(circle at 35% 30%,#ffd0da 0,var(--accent) 100%);box-shadow:var(--shadow);display:grid;place-items:center;pointer-events:auto;cursor:pointer;touch-action:manipulation}.mirror-done svg{width:48px;height:48px}.mirror-done:active{transform:scale(.92)}body.mirror-open .bar{display:none}body.words-on .mtab[data-word]:before,body.words-on .mtile[data-word]:before,body.words-on .mirror-done[data-word]:before{content:attr(data-word);position:absolute;left:50%;bottom:-18px;transform:translate(-50%);white-space:nowrap;font:700 12px/1 ui-rounded,SF Pro Rounded,system-ui,sans-serif;color:var(--ink);background:#ffffffd9;padding:2px 6px;border-radius:8px;pointer-events:none}body.words-on .mrow{row-gap:24px}@media (max-width:700px){.mtile canvas{width:72px;height:72px}.mtab canvas{width:44px;height:44px}}body.words-on .mtile.small:before{display:none}
