:root{--vh:1dvh;--bg:#fdf6e3;--card:#fff;--line:#e8dcc0;--line-strong:#cdbf98;--ink:#3b3326;--ink-soft:#6b5d3d;--ink-faint:#8a7a5a;--hint:#b3a47f;--pop:cubic-bezier(.3, 1.6, .5, 1)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}html,body{overscroll-behavior:none;background:var(--bg);touch-action:none;-webkit-touch-callout:none;height:100%;margin:0;font-family:ui-rounded,SF Pro Rounded,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;overflow:hidden}body{width:100%;position:fixed;top:0;bottom:0;left:0;right:0}button{font:inherit;touch-action:none}#root{height:calc(var(--vh) * 100)}.corner-btn{border:4px solid var(--line);background:var(--card);cursor:pointer;opacity:.85;border-radius:50%;width:44px;height:44px;padding:0;font-size:18px;line-height:1}@keyframes pop{0%{transform:scale(0)}to{transform:scale(1)}}:root{--active-bg:#ffe38a;--active-line:#d9a400;--active-ink:#4a3a00}#app{height:calc(var(--vh) * 100);max-width:900px;padding:max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));flex-direction:column;gap:12px;margin:0 auto;display:flex}#top{flex:none;justify-content:center;align-items:center;height:56px;display:flex;position:relative}#chosen{justify-content:center;align-items:center;gap:10px;min-width:0;padding:0 52px;display:flex}.dot{width:44px;height:44px;animation:pop .35s var(--pop);border:4px solid #0000002e;border-radius:50%;flex:none}.hint{color:var(--hint);font-size:22px;font-weight:700}.rname{color:var(--ink);text-transform:capitalize;white-space:nowrap;font-size:24px;font-weight:900}#chosen.nudge{animation:.45s shake}#top .corner-btn{position:absolute;top:50%;transform:translateY(-50%)}#mute{left:0}#home{right:0}#top .corner-btn:active{transform:translateY(-50%)scale(.9)}#stage{background:var(--card);border:6px solid var(--line);border-radius:32px;flex:1;justify-content:center;align-items:center;min-height:0;display:flex;position:relative;overflow:hidden;container-type:size}#palette{flex:none;grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.sw{aspect-ratio:1;max-height:calc(var(--vh) * 10);cursor:pointer;width:100%;transition:transform .15s var(--pop), box-shadow .15s;border:5px solid #0000002e;border-radius:26px;justify-self:center;padding:0;position:relative;box-shadow:0 6px #0000002e}.sw:active{transform:scale(.92);box-shadow:0 2px #0000002e}.sw.on{box-shadow:0 0 0 6px #fff, 0 0 0 11px var(--ink);border-color:#00000040;transform:scale(.88)translateY(3px)}.sw .q,.sw .check{font-size:clamp(26px, calc(var(--vh) * 6), 54px);justify-content:center;align-items:center;font-weight:900;position:absolute;top:0;bottom:0;left:0;right:0}.sw .q{color:#fff;text-shadow:0 2px #00000059;display:flex}.sw.on .q,.sw .check{display:none}.sw.on .check{animation:pop .3s var(--pop);display:flex}#bar{flex:none;gap:10px;display:flex}.bb{border:5px solid var(--line-strong);background:var(--card);height:66px;color:var(--ink-soft);cursor:pointer;box-shadow:0 6px 0 var(--line-strong);border-radius:22px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:1px;padding:4px;font-size:15px;font-weight:800;line-height:1.05;display:flex;overflow:hidden}.bb .ic{align-items:center;height:24px;font-size:22px;display:flex}.bb .eraser{width:40px;height:25px}.bb:active{box-shadow:0 2px 0 var(--line-strong);transform:translateY(4px)}#app.compact #palette{gap:8px}#app.compact .sw{max-height:calc(var(--vh) * 6.5);border-width:4px;border-radius:18px;box-shadow:0 4px #0000002e}#app.compact .sw.on{box-shadow:0 0 0 4px #fff, 0 0 0 8px var(--ink);transform:scale(.92)translateY(2px)}#app.compact .sw .check,#app.compact .sw .q{font-size:26px}#app.compact .bb{height:56px}@media (min-aspect-ratio:5/4){#app{--sw:clamp(44px, calc(var(--vh) * 16), 104px);grid-template:"top side""stage side"minmax(0,1fr)"stage bar"/minmax(0,1fr) auto;gap:8px 14px;max-width:1400px;display:grid}#top{grid-area:top}#stage{grid-area:stage}#palette,#app.compact #palette{grid-area:side;grid-template-columns:repeat(3, var(--sw));place-self:center;gap:8px}.sw,#app.compact .sw{width:var(--sw);border-radius:calc(var(--sw) * .28);border-width:4px;max-height:none;box-shadow:0 5px #0000002e}.sw.on,#app.compact .sw.on{box-shadow:0 0 0 4px #fff, 0 0 0 8px var(--ink);transform:scale(.9)translateY(2px)}.sw .check,.sw .q,#app.compact .sw .check,#app.compact .sw .q{font-size:calc(var(--sw) * .45)}#bar{grid-area:bar}.bb,#app.compact .bb{height:clamp(44px, calc(var(--vh) * 14), 66px);border-width:4px;border-radius:18px;font-size:13px}}@media (min-aspect-ratio:5/4) and (max-height:520px){.bb{flex-direction:row;gap:6px}#top{height:44px}.dot{width:36px;height:36px}#top .corner-btn{width:38px;height:38px;font-size:15px}.rname{font-size:20px}}@media (hover:hover) and (pointer:fine){.sw,.bb,.corner-btn{transition:transform .15s var(--pop), box-shadow .15s, background-color .15s, filter .15s, opacity .15s}.sw:not(.on):hover{filter:brightness(1.06)saturate(1.08);transform:translateY(-4px)scale(1.03);box-shadow:0 10px #0000002e}.sw.on:hover{filter:brightness(1.06)}.bb:hover{box-shadow:0 9px 0 var(--line-strong);color:var(--ink);background:#fffaf0;transform:translateY(-3px)}#top .corner-btn:hover{opacity:1;border-color:var(--line-strong);transform:translateY(-50%)scale(1.1)}.sw:active,.sw:not(.on):active{transform:scale(.92);box-shadow:0 2px #0000002e}.bb:active{box-shadow:0 2px 0 var(--line-strong);transform:translateY(4px)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-9px)}40%{transform:translate(9px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}:root{--puddle:#f1ece0;--puddle-edge:#d8ccaa}.plus{color:var(--ink-faint);font-size:34px;font-weight:800}#chosen.small{gap:6px}#chosen.small .dot{border-width:3px;width:30px;height:30px}#chosen.small .plus{font-size:22px}#chosen.tiny{gap:3px}#chosen.tiny .dot{width:22px;height:22px}#chosen.tiny .plus{font-size:16px}#puddle{background:var(--puddle);border:5px dashed var(--puddle-edge);border-radius:46% 54% 50% 50%/52% 46% 54% 48%;flex:none;width:96cqw;height:94cqh;transition:background-color .7s,border-color .7s;animation:4s ease-in-out infinite wobble}#puddle.filled{border:0;box-shadow:inset -14px -18px #0000001a,inset 10px 12px #ffffff38}#puddle.bloop{animation:.5s bloop}#name{background:var(--card);border:5px solid var(--line);width:-moz-fit-content;width:fit-content;font-size:clamp(22px, min(calc(var(--vh) * 6), 6.5cqw), 52px);max-width:calc(100% - 20px);color:var(--ink);white-space:nowrap;text-transform:capitalize;z-index:2;border-radius:30px;margin:0 auto;padding:6px 28px;font-weight:900;transition:opacity .3s;position:absolute;bottom:10px;left:0;right:0}#name.hide{opacity:0}#name.swap{animation:pop .35s var(--pop)}#splats{pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0}.splat{width:100cqw;height:100cqh;margin:-50cqh 0 0 -50cqw;animation:1.1s ease-out forwards splat;position:absolute;top:50%;left:50%}.splat svg{width:100%;height:100%;overflow:visible}@keyframes wobble{0%,to{border-radius:46% 54% 50% 50%/52% 46% 54% 48%}50%{border-radius:54% 46% 48% 52%/46% 54%}}@keyframes bloop{0%{transform:scale(1)}35%{transform:scale(1.1,.92)}70%{transform:scale(.95,1.05)}to{transform:scale(1)}}@keyframes splat{0%{opacity:1;transform:scale(0)rotate(0)}25%{transform:scale(1.05) rotate(var(--r));opacity:1}55%{transform:scale(1) rotate(var(--r));opacity:1}to{transform:scale(1) rotate(var(--r));opacity:0}}@media (prefers-reduced-motion:reduce){#puddle{animation:none}}#theme{border-color:var(--active-line);box-shadow:0 6px 0 var(--active-line);color:var(--active-ink);background:#fff7e0;flex:1.2}#theme .ic{height:28px;font-size:26px}#theme .ic.spin{animation:theme-spin .45s var(--pop)}@keyframes theme-spin{0%{transform:scale(.3)rotate(-180deg)}to{transform:none}}@media (hover:hover) and (pointer:fine){#theme:hover{box-shadow:0 9px 0 var(--active-line);background:#fff1c4}}#pic{position:absolute;top:6px;bottom:44px;left:6px;right:6px}#pic svg{cursor:pointer;width:100%;height:100%;display:block}#pic svg.from-right{animation:.3s ease-out from-right}#pic svg.from-left{animation:.3s ease-out from-left}#pic .r{fill:#fff;stroke:var(--ink);stroke-width:5px;stroke-linejoin:round;cursor:pointer}#pic .r.pop{animation:.4s fillpop}#pic .ink{pointer-events:none}#pic .d{fill:none;stroke:var(--ink);stroke-width:5px;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}#pic .k{fill:var(--ink);pointer-events:none}.nav{border:4px solid var(--line);background:var(--card);width:48px;height:48px;color:var(--ink-soft);cursor:pointer;box-shadow:0 4px 0 var(--line);border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:22px;font-weight:900;display:flex;position:absolute;bottom:8px}.nav:active{box-shadow:0 1px 0 var(--line);transform:translateY(3px)}#prev{left:8px}#next{right:8px}#pages{pointer-events:none;justify-content:center;gap:10px;display:flex;position:absolute;bottom:20px;left:0;right:0}#pages i{background:var(--line);border-radius:50%;width:14px;height:14px;transition:background .2s,transform .2s}#pages i.on{background:var(--ink-soft);transform:scale(1.2)}#reset.restore{color:#2d5a22;animation:pop .35s var(--pop);background:#dff3d8;border-color:#6dbb5a;box-shadow:0 6px #6dbb5a}@media (min-aspect-ratio:5/4){#pic{top:6px;bottom:24px;left:62px;right:62px}.nav{top:calc(50% - 24px);bottom:auto}#pages{bottom:8px}}@media (hover:hover) and (pointer:fine){.nav,#pic .r{transition:transform .15s var(--pop), box-shadow .15s, background-color .15s, stroke-width .15s}.nav:hover{box-shadow:0 6px 0 var(--line);color:var(--ink);background:#fffaf0;transform:translateY(-2px)scale(1.08)}.nav:active{box-shadow:0 1px 0 var(--line);transform:translateY(3px)}#pic .r:hover{stroke-width:7px}#pic .r:not(.filled):hover{fill:color-mix(in srgb, var(--brush,#e8dcc0) 45%, #fff)}#reset.restore:hover{color:#2d5a22;background:#dff3d8;box-shadow:0 9px #6dbb5a}}@keyframes fillpop{0%{stroke-width:5px}40%{stroke-width:10px}to{stroke-width:5px}}@keyframes from-right{0%{opacity:0;transform:translate(40px)}to{opacity:1;transform:none}}@keyframes from-left{0%{opacity:0;transform:translate(-40px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){#pic svg.from-right,#pic svg.from-left{animation:none}}#ttt{height:100%;padding:max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));--ttt-x:#e62840;--ttt-o:#285adc;flex-direction:column;align-items:center;gap:10px;display:flex;overflow:hidden}#ttt-top{flex:none;justify-content:center;align-items:center;width:100%;height:60px;display:flex;position:relative}#ttt .corner-btn{position:absolute;top:50%;transform:translateY(-50%)}#ttt .corner-btn:active{transform:translateY(-50%)scale(.9)}#ttt-mute{left:0}#ttt-home{right:0}#ttt-status{background:var(--card);border:4px solid var(--line);border-radius:28px;justify-content:center;align-items:center;gap:6px;min-width:112px;height:56px;padding:0 18px;display:flex}#ttt-status .ttt-piece{width:40px;height:40px;animation:ttt-pop .35s var(--pop) both}#ttt-status .ttt-bot,#ttt-status .ttt-star{font-size:30px;line-height:1}#ttt-status.over{background:#fff3b0;border-color:#f5b800}#ttt-status.over .ttt-star{animation:.7s ease-in-out infinite ttt-bounce}#ttt-main{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;width:100%;min-height:0;display:flex}#ttt-board{--size:min(92vw, 640px, calc(var(--vh) * 100 - 270px));width:var(--size);height:var(--size);gap:calc(var(--size) * .035);grid-template:repeat(3,1fr)/repeat(3,1fr);display:grid}.ttt-cell{background:var(--card);border:5px solid var(--line);box-shadow:0 6px 0 var(--line-strong);cursor:pointer;transition:transform .12s var(--pop), box-shadow .12s, background-color .2s;border-radius:24px;padding:12%}.ttt-cell:active{box-shadow:0 2px 0 var(--line-strong);transform:translateY(4px)}.ttt-cell.win{background:#fff3b0;border-color:#f5b800;animation:.7s ease-in-out infinite ttt-bounce}.ttt-piece{fill:none;stroke-width:15px;stroke-linecap:round;width:100%;height:100%;animation:ttt-pop .35s var(--pop) both;display:block}.ttt-x{stroke:var(--ttt-x)}.ttt-o{stroke:var(--ttt-o)}#ttt-bar{flex:none;justify-content:center;align-items:center;gap:14px;display:flex}.ttt-mode,#ttt-again{border:5px solid var(--line);background:var(--card);cursor:pointer;box-shadow:0 5px 0 var(--line-strong);border-radius:50%;line-height:1}.ttt-mode{width:72px;height:72px;font-size:34px}.ttt-mode.on{background:#fff3b0;border-color:#f5b800;box-shadow:0 5px #c98f00}.ttt-mode:active,#ttt-again:active{box-shadow:0 2px 0 var(--line-strong);transform:translateY(3px)}#ttt-again{width:88px;height:88px;animation:ttt-pop .35s var(--pop) both;background:#7ddc8d;border-color:#3fa653;font-size:44px;display:none;box-shadow:0 6px #2f8a42}#ttt[data-phase=over] #ttt-again{display:block}#ttt[data-phase=playing] .ttt-mode{visibility:hidden}@media (min-aspect-ratio:5/4){#ttt-main{flex-direction:row;gap:28px}#ttt-board{--size:min(62vw, 640px, calc(var(--vh) * 100 - 112px))}#ttt-bar{flex-direction:column}}@media (max-height:520px){#ttt-top{height:48px}#ttt-status{min-width:96px;height:46px}#ttt-status .ttt-piece{width:32px;height:32px}#ttt .corner-btn{width:38px;height:38px;font-size:15px}.ttt-mode{width:60px;height:60px;font-size:28px}#ttt-again{width:72px;height:72px;font-size:36px}.ttt-cell{border-width:4px;border-radius:18px}}@media (hover:hover) and (pointer:fine){.ttt-cell:hover,.ttt-mode:hover,#ttt-again:hover{transform:translateY(-3px)}#ttt .corner-btn:hover{opacity:1;transform:translateY(-50%)scale(1.1)}}@keyframes ttt-pop{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes ttt-bounce{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}@media (prefers-reduced-motion:reduce){.ttt-piece,#ttt-status .ttt-star,.ttt-cell.win,#ttt-again{animation:none}}#home-screen{align-items:center;gap:clamp(16px, calc(var(--vh) * 4), 40px);height:100%;padding:max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));flex-direction:column;display:flex;overflow:hidden}#home-screen .title{margin:clamp(8px, calc(var(--vh) * 4), 48px) 0 0;font-size:clamp(34px, min(11vw, calc(var(--vh) * 10)), 84px);text-align:center;letter-spacing:.01em;font-weight:900;line-height:1.05}#home-screen .title .word{white-space:nowrap;display:inline-block}#home-screen .title .word span{text-shadow:0 4px #0000001f;animation:letter-in .5s var(--pop) both, bob 3s ease-in-out infinite;display:inline-block}#home-screen .tiles{flex-wrap:wrap;flex:1;place-content:flex-start center;gap:18px;width:100%;max-width:900px;min-height:0;display:flex}#home-screen .tile{width:min(42vw, 240px, calc(var(--vh) * 52));aspect-ratio:1;background:var(--tile);cursor:pointer;animation:pop .45s var(--pop) both;transition:transform .15s var(--pop), box-shadow .15s;border:6px solid #00000026;border-radius:32px;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:8px;display:flex;box-shadow:0 8px #0000002e;container-type:inline-size}#home-screen .tile .emoji{filter:drop-shadow(0 4px #00000026);font-size:42cqw;line-height:1.1}#home-screen .tile .name{color:#fff;text-shadow:0 2px #0000004d;font-size:clamp(16px,11cqw,26px);font-weight:900}#home-screen .tile:active{transform:translateY(6px)scale(.97);box-shadow:0 2px #0000002e}@media (hover:hover) and (pointer:fine){#home-screen .tile:hover{transform:translateY(-4px)rotate(-1.5deg);box-shadow:0 12px #0000002e}}@media (min-aspect-ratio:5/4) and (max-height:520px){#home-screen .title{font-size:clamp(30px, calc(var(--vh) * 11), 52px);margin-top:0}#home-screen .tile{width:min(240px, calc(var(--vh) * 60))}}@keyframes letter-in{0%{opacity:0;transform:translateY(-40px)scale(.4)}to{opacity:1;transform:none}}@keyframes bob{0%,to{translate:0}50%{translate:0 -4px}}@media (prefers-reduced-motion:reduce){#home-screen .title .word span{animation:none}}