:root{--sky: #eee6fa;--wave-1: #cfe0f7;--wave-2: #d6c6f3;--wave-3: #c4ecd9;--wave-4: #f8de8c;--wave-5: #f5cbdd;--wave-6: #c9b8f0;--cream: #fff6e3;--cream-edge: #efe3c9;--clay-shade: rgba(142, 118, 196, .14);--ink: #6d4fc2;--ink-deep: #4b3a85;--ink-soft: #8b78be;--ink-muted: #a99ccf;--brand: #8e6cdb;--sun: #f5c543;--mint: #79e2da;--cyan: #62d9e9;--glow: #9ff6f0;--correct: #5cb85c;--wrong: #e57373;--warning: #f4a259;--pos-0: #5b9be6;--pos-1: #f4a259;--pos-2: #8cc26a;--pos-3: #a98be0;--yes: #86c48a;--no: #e98c8c;--draw-purple: #a98be0;--draw-pink: #f6a5c0;--draw-mint: #86d6a6;--draw-yellow: #f5c543;--draw-blue: #7fb3f5;--pastel-1: #ddf5ea;--pastel-2: #e4daf8;--pastel-3: #fbd9c4;--pastel-4: #c8ddf7;--pastel-5: #fff0a8;--pastel-6: #f9c5d8;--radius-card: 26px;--radius-tile: 22px;--radius-pill: 999px;--clay: inset 0 4px 0 rgba(255, 255, 255, .75), inset 0 -8px 0 rgba(142, 118, 196, .14), 0 14px 28px rgba(95, 75, 150, .18);--clay-soft: inset 0 3px 0 rgba(255, 255, 255, .7), inset 0 -6px 0 rgba(142, 118, 196, .12), 0 10px 20px rgba(95, 75, 150, .16);--glow-ring: 0 0 0 6px var(--glow), 0 0 26px 6px rgba(159, 246, 240, .9);--puffy-shadow: 0 3px 0 rgba(75, 58, 133, .28), 0 10px 18px rgba(95, 75, 150, .18);--tap: 88px;--gap: 14px;--pad: 18px;--font: "Fredoka", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;color-scheme:light}*,*:before,*:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;height:100%;min-height:100%;background:var(--sky);color:var(--ink-deep);font-family:var(--font);font-weight:600;line-height:1.2;overscroll-behavior:none;touch-action:manipulation;-webkit-text-size-adjust:100%;user-select:none;-webkit-user-select:none}.clay-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--sky)}.wave{position:absolute;left:-12%;width:124%;display:block;will-change:transform}.wave-1{bottom:46%;height:42vh;fill:var(--wave-1)}.wave-2{bottom:36%;height:40vh;fill:var(--wave-2)}.wave-3{bottom:26%;height:38vh;fill:var(--wave-3)}.wave-4{bottom:16%;height:34vh;fill:var(--wave-4)}.wave-5{bottom:7%;height:30vh;fill:var(--wave-5)}.wave-6{bottom:-2%;height:26vh;fill:var(--wave-6)}@keyframes drift-left{0%{transform:translate3d(-5%,0,0)}50%{transform:translate3d(5%,-7px,0)}to{transform:translate3d(-5%,0,0)}}@keyframes drift-right{0%{transform:translate3d(5%,-4px,0)}50%{transform:translate3d(-5%,5px,0)}to{transform:translate3d(5%,-4px,0)}}@media(prefers-reduced-motion:no-preference){.wave-1{animation:drift-left 26s ease-in-out infinite}.wave-2{animation:drift-right 23s ease-in-out infinite}.wave-3{animation:drift-left 21s ease-in-out infinite}.wave-4{animation:drift-right 19s ease-in-out infinite}.wave-5{animation:drift-left 18s ease-in-out infinite}.wave-6{animation:drift-right 17s ease-in-out infinite}}#app{position:relative;z-index:1;min-height:100%;min-height:100dvh;width:100%;max-width:560px;margin:0 auto;display:flex;flex-direction:column;padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0)}.screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--gap);padding:var(--pad);min-height:0}.screen-answer{justify-content:flex-start;gap:12px}[hidden]{display:none!important}.clay-card{width:100%;background:var(--cream);border-radius:var(--radius-card);box-shadow:var(--clay);padding:20px 18px}.clay-panel{width:100%;background:var(--cream);border-radius:var(--radius-card);box-shadow:var(--clay);padding:14px}.title{margin:0;font-size:clamp(2rem,9vw,2.8rem);font-weight:700;letter-spacing:.01em;text-align:center;color:var(--ink)}.puffy{color:var(--ink);text-shadow:var(--puffy-shadow)}.title-caps{text-transform:uppercase;letter-spacing:.04em;font-size:clamp(2.4rem,12vw,3.2rem)}.subtitle{margin:0;font-size:1.05rem;font-weight:600;color:var(--ink-soft);text-align:center}.card-label{display:block;margin:0 0 12px;font-size:.95rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-align:center}.pack-note{margin:0;font-size:.9rem;font-weight:600;color:var(--ink-muted);text-align:center}.score{margin:0;font-size:1.15rem;font-weight:700;color:var(--ink)}.mascot{display:block;width:108px;height:108px;object-fit:contain;margin-bottom:-26px;filter:drop-shadow(0 10px 14px rgba(95,75,150,.22));pointer-events:none;z-index:1}.screen-join .mascot{margin-bottom:-4px}.pill-button{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:var(--tap);padding:16px 24px;border:0;border-radius:var(--radius-pill);background:var(--cream);color:var(--ink);font:inherit;font-size:1.5rem;font-weight:700;box-shadow:var(--clay);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease}.pill-button:active:not(:disabled){transform:translateY(3px) scale(.99);box-shadow:inset 0 3px #fff9,inset 0 -4px #8e76c42e,0 6px 12px #5f4b962e}.pill-button:disabled{opacity:.5;cursor:default}.join-button{background:var(--mint);color:#fff;text-shadow:0 2px 0 rgba(75,58,133,.18)}.join-button:focus-visible,.join-button:active:not(:disabled){outline:none;box-shadow:var(--glow-ring),var(--clay);transform:scale(1.04)}.command-button{margin-top:8px}.pack-list{display:flex;flex-direction:column;gap:10px;width:100%;max-height:42vh;overflow-y:auto;padding:6px 0}.pack-list>.card-label{text-align:center}.pack-button{flex-direction:column;gap:2px;min-height:66px;padding:10px 18px;font-size:1.15rem}.pack-count{font-size:.85rem;font-weight:600;color:var(--ink-muted)}.clear-button{background:var(--cyan);color:var(--ink);max-width:320px}.clear-button:focus-visible{outline:none;box-shadow:var(--glow-ring),var(--clay)}.again-button{max-width:340px;font-size:1.25rem}.screen-join{justify-content:center}.join-form{width:100%;max-width:420px;display:flex;flex-direction:column;gap:14px;background:var(--cream);border-radius:var(--radius-card);box-shadow:var(--clay);padding:20px 18px}.code-field{position:relative}.code-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.code-tile{position:relative;aspect-ratio:1;display:grid;place-items:center;background:var(--cream);border-radius:var(--radius-tile);box-shadow:var(--clay-soft);color:var(--ink);font-size:clamp(1.8rem,9vw,2.4rem);font-weight:700;text-shadow:var(--puffy-shadow)}.code-tile:empty:after{content:"";width:16px;height:16px;border-radius:50%;background:var(--ink-muted);opacity:.55}.code-tile.caret{box-shadow:var(--glow-ring),var(--clay-soft)}.code-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;margin:0;background:transparent;color:transparent;font:inherit;letter-spacing:1em;text-align:center;caret-color:transparent}.pill-input{width:100%;min-height:60px;padding:14px 22px;border:0;border-radius:var(--radius-pill);background:var(--cream);box-shadow:var(--clay-soft);color:var(--ink);font:inherit;font-size:1.15rem;font-weight:600;text-align:center;outline:none}.pill-input::placeholder{color:var(--ink-muted);font-weight:600}.pill-input:focus{box-shadow:var(--glow-ring),var(--clay-soft)}.note{margin:0;padding:10px 16px;border-radius:var(--radius-pill);background:#e98c8c29;color:#c96a6a;font-size:1rem;font-weight:700;text-align:center}.waiting-card{max-width:420px;display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 20px 22px}.dots{display:flex;gap:10px;padding:4px 0 2px}.dot{width:14px;height:14px;border-radius:50%;background:var(--brand);box-shadow:inset 0 2px #ffffff80}@keyframes dot-bounce{0%,70%,to{transform:translateY(0)}35%{transform:translateY(-9px)}}@media(prefers-reduced-motion:no-preference){.dot{animation:dot-bounce 1.3s ease-in-out infinite}.dot:nth-child(2){animation-delay:.16s}.dot:nth-child(3){animation-delay:.32s}}.player-chip{display:inline-flex;align-items:center;gap:12px;max-width:100%;padding:10px 22px 10px 10px;border-radius:var(--radius-pill);background:var(--cream);box-shadow:var(--clay);margin-top:-6px}.avatar{flex:0 0 auto;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--pastel-2);box-shadow:inset 0 3px #ffffffb3,inset 0 -4px #8e76c424;color:var(--ink);font-size:1.4rem;font-weight:700;text-transform:uppercase}.chip-text{display:flex;flex-direction:column;min-width:0}.chip-name{font-size:1.15rem;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chip-sub{font-size:.9rem;font-weight:600;color:var(--ink-muted)}.banner{width:100%;margin:0;padding:14px 22px;border-radius:var(--radius-pill);background:var(--cream);box-shadow:var(--clay);color:var(--ink);font-size:clamp(1.15rem,5vw,1.5rem);font-weight:700;text-align:center;text-shadow:0 2px 0 rgba(75,58,133,.18)}.locked-banner{align-self:center;margin:0;padding:8px 20px;border-radius:var(--radius-pill);background:#5cb85c2e;color:#4a9a4a;font-size:1.05rem;font-weight:700}.answer-panel{flex:1;display:flex;min-height:0;align-items:stretch}.choices{flex:1;width:100%;display:grid;gap:12px;min-height:0}.choice-label{display:block}.choices.quad{grid-template-columns:1fr 1fr;grid-auto-rows:1fr}.choices.halves{grid-template-columns:1fr;grid-auto-rows:1fr}.choices.yesno{grid-auto-rows:minmax(120px,168px);align-content:center;gap:18px}.choices.flow{grid-template-columns:1fr 1fr;grid-auto-rows:minmax(var(--tap),auto)}.choices.tiles{flex:0 0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:10px}.choice{appearance:none;-webkit-appearance:none;position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:var(--tap);padding:14px 12px;border:6px solid var(--card-color, var(--pos-0));border-radius:var(--radius-tile);background:var(--cream);color:var(--card-color, var(--pos-0));font:inherit;font-size:clamp(1.2rem,5.5vw,1.7rem);font-weight:700;line-height:1.1;text-align:center;word-break:break-word;box-shadow:var(--clay);cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,opacity .18s ease}.choice.pos-0{--card-color: var(--pos-0)}.choice.pos-1{--card-color: var(--pos-1)}.choice.pos-2{--card-color: var(--pos-2)}.choice.pos-3{--card-color: var(--pos-3)}.choice.yes{--card-color: var(--yes)}.choice.no{--card-color: var(--no)}.choice.yes,.choice.no{border-radius:var(--radius-pill);font-size:clamp(2rem,11vw,3rem);letter-spacing:.06em;text-transform:uppercase;text-shadow:0 3px 0 rgba(75,58,133,.14)}.choices.tiles .choice{flex:1 1 0;width:auto;min-width:64px;max-width:110px;height:var(--tap);padding:0;border-color:transparent;color:var(--ink);font-size:clamp(1.8rem,9vw,2.4rem);text-transform:uppercase;text-shadow:var(--puffy-shadow)}.choice:active:not(:disabled){transform:translateY(2px)}.choice.tentative,.choice.locked{box-shadow:var(--glow-ring),var(--clay);transform:scale(1.04);z-index:1}.choices:has(.choice.locked) .choice:not(.locked),.choice:disabled{opacity:.6}.check-badge{position:absolute;top:-12px;right:-10px;width:34px;height:34px;border-radius:50%;background:var(--correct);box-shadow:inset 0 2px #ffffff73,0 4px 8px #5f4b9638;display:grid;place-items:center}.check-badge:after{content:"";width:9px;height:15px;margin-top:-3px;border:solid #fff;border-width:0 4px 4px 0;border-radius:2px;transform:rotate(45deg)}.blank-area{flex:1;width:100%;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:26px}.word-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:100%}.word-tile{min-width:56px;height:68px;padding:0 8px;display:grid;place-items:center;border-radius:16px;background:var(--cream);box-shadow:var(--clay-soft);color:var(--ink);font-size:2rem;font-weight:700;text-transform:uppercase;text-shadow:var(--puffy-shadow)}.word-tile.blank{background:#fff6e38c;border:3px dashed var(--ink-muted);box-shadow:none;color:transparent;text-shadow:none}.draw-area{flex:1;display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:420px;margin:0 auto;min-height:0}.color-row{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;max-width:340px;padding:0 10px;border-radius:var(--radius-pill);background:var(--cream);box-shadow:var(--clay)}.color-dot{appearance:none;-webkit-appearance:none;flex:1 1 0;min-width:0;height:var(--tap);display:grid;place-items:center;padding:0;border:0;background:transparent;cursor:pointer}.color-dot>span{display:block;width:46px;height:46px;border-radius:50%;background:var(--dot-color, var(--draw-purple));box-shadow:inset 0 3px #ffffff8c,inset 0 -4px #5f4b962e,0 4px 8px #5f4b9633;transition:transform .14s ease,box-shadow .14s ease}.color-dot[aria-pressed=true]>span{transform:scale(1.04);box-shadow:var(--glow-ring),inset 0 3px #ffffff8c}.mic-button{appearance:none;-webkit-appearance:none;width:72px;height:72px;padding:0;border:0;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;box-shadow:inset 0 3px #ffffff59,inset 0 -4px #4b3a8559,0 6px 12px #5f4b9647;cursor:pointer;transition:transform .14s ease,box-shadow .14s ease;z-index:1}.mic-button:active{transform:scale(.94)}.mic-button.listening{box-shadow:var(--glow-ring),inset 0 3px #ffffff59}@media(prefers-reduced-motion:no-preference){.mic-button.listening{animation:mic-pulse 1.1s ease-in-out infinite}}@keyframes mic-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.answer-panel{position:relative}.answer-panel>.mic-button{position:absolute;inset:0;margin:auto}.choices.yesno.with-mic{grid-template-rows:minmax(110px,160px) auto minmax(110px,160px)}.choices.yesno>.mic-button{justify-self:center;align-self:center}.blank-area>.mic-button{align-self:center}.draw-slot{width:100%;aspect-ratio:1;max-height:58vh;display:grid;place-items:center;background:var(--cream);border-radius:var(--radius-card);box-shadow:var(--clay);overflow:hidden}.draw-canvas{display:block;touch-action:none;border-radius:18px}.draw-slot>.draw-canvas,.draw-slot>.draw-outline,.draw-slot>.draw-backdrop{grid-area:1 / 1}.draw-backdrop{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-select:none;user-select:none}.draw-outline{width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none}.result-card{max-width:420px;display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px 22px}.ring{position:relative;width:104px;height:104px;border-radius:50%;border:10px solid var(--ink-muted);display:grid;place-items:center;flex:0 0 auto}.ring.ok{border-color:var(--correct)}.ring.ok:after{content:"";width:24px;height:44px;margin-top:-8px;border:solid var(--correct);border-width:0 11px 11px 0;border-radius:3px;transform:rotate(45deg)}.ring.bad{border-color:var(--wrong)}.ring.bad:before,.ring.bad:after{content:"";position:absolute;width:54px;height:11px;border-radius:6px;background:var(--wrong)}.ring.bad:before{transform:rotate(45deg)}.ring.bad:after{transform:rotate(-45deg)}.screen-result .title,.screen-over .title{font-size:clamp(1.9rem,8.5vw,2.5rem)}.screen-result.right .title{color:var(--correct);text-shadow:0 3px 0 rgba(58,120,58,.24),0 10px 18px rgba(95,75,150,.16)}.screen-result.wrong .title{color:var(--wrong);text-shadow:0 3px 0 rgba(150,70,70,.22),0 10px 18px rgba(95,75,150,.16)}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}