:root{--ink: #1d2433;--ink-soft: #56607a;--panel: #ffffff;--panel-2: #eef3fb;--sun: #ffcf1f;--brick: #e3342f;--sky-top: #8fcdfb;--sky-bot: #e6f4ff;--ok: #2f9e44;--warn: #f08c00;--bad: #e03131;--display: "Lilita One", "Arial Rounded MT Bold", ui-rounded, system-ui, sans-serif;--body: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;color-scheme:light}*{box-sizing:border-box}[hidden]{display:none!important}html,body,#root{height:100%;margin:0}body{background:linear-gradient(var(--sky-top),var(--sky-bot));color:var(--ink);font-family:var(--body);font-weight:700;overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#app{position:fixed;top:0;right:0;bottom:0;left:0}#scene{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}.is-lobby #scene{filter:saturate(.9)}button{font:inherit;color:inherit;cursor:pointer}button:disabled{opacity:.55;cursor:default}button:focus-visible,input:focus-visible{outline:3px solid var(--ink);outline-offset:2px}.panel{background:var(--panel);border:2.5px solid var(--ink);border-radius:16px;box-shadow:0 4px 0 var(--ink)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:44px;padding:0 12px;background:var(--panel);border:2.5px solid var(--ink);border-radius:12px;box-shadow:0 3px 0 var(--ink);font-weight:900;font-size:14px;transition:transform .06s,box-shadow .06s;white-space:nowrap}.btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 0 0 var(--ink)}.btn svg{width:22px;height:22px;flex:none}.btn[aria-pressed=true],.btn.primary{background:var(--sun)}.btn.danger{background:var(--brick);color:#fff}.btn.big{height:54px;font-size:18px;width:100%}.topbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-top:calc(12px + env(safe-area-inset-top,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));pointer-events:none}.topbar>*{pointer-events:auto}.left{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1 1 0}.brand{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 8px;height:52px;align-self:flex-start}.brand-mark{width:40px;height:30px;flex:none}.brand h1{margin:0;font-family:var(--display);font-weight:400;font-size:24px;letter-spacing:.5px;line-height:1}.brand small{display:block;font-size:12px;color:var(--ink-soft);font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums;white-space:nowrap}.actions{display:flex;gap:8px;flex:1 1 0;justify-content:flex-end;flex-wrap:wrap}.players{display:flex;flex-wrap:wrap;gap:6px;max-width:520px}.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;background:var(--panel);border:2px solid var(--ink);border-radius:999px;box-shadow:0 2px 0 var(--ink);font-size:13px;font-weight:900;max-width:220px}.chip.me{background:var(--sun)}.chip i{width:12px;height:12px;border-radius:50%;border:2px solid var(--ink);flex:none}.chip small{color:var(--ink-soft);font-weight:800;white-space:nowrap}.chip.speaking{box-shadow:0 0 0 3px var(--sun),0 3px 0 var(--ink)}.chip-media{display:inline-flex;gap:2px}.chip-media svg{width:14px;height:14px}.callbar{display:flex;align-items:center;gap:6px;padding:6px;max-width:520px;align-self:flex-start}.callbar .btn{height:38px;padding:0 10px;font-size:13px;box-shadow:0 2px 0 var(--ink)}.callbar .btn svg{width:18px;height:18px}.call-status{font-size:12px;color:var(--ink-soft);padding:0 6px;max-width:220px;line-height:1.2}.timer{position:relative;display:flex;align-items:center;gap:6px;padding:4px;height:52px;flex:none}.timer-time{border:0;background:none;font-family:var(--display);font-size:32px;line-height:1;padding:0 10px;min-width:110px;font-variant-numeric:tabular-nums;letter-spacing:1px}.timer .btn{height:40px;min-width:40px;padding:0 8px;box-shadow:0 2px 0 var(--ink)}.timer-bar{position:absolute;left:12px;right:12px;bottom:-2.5px;height:5px;border-radius:3px;background:var(--panel-2);overflow:hidden}.timer-bar i{display:block;height:100%;width:100%;background:var(--ok);transform-origin:left;transition:transform .25s linear,background .3s}.timer.warn .timer-time{color:var(--warn)}.timer.warn .timer-bar i{background:var(--warn)}.timer.danger .timer-time{color:var(--bad);animation:pulse 1s infinite}.timer.danger .timer-bar i{background:var(--bad)}.timer.shake{animation:shake .4s}@keyframes pulse{50%{transform:scale(1.12)}}@keyframes shake{20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}.popover{position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%);width:min(300px,calc(100vw - 32px));padding:14px;z-index:20}.popover h2{margin:0 0 6px;font-family:var(--display);font-weight:400;font-size:20px}.pop-note{margin:0 0 10px;font-size:13px;color:var(--ink-soft)}.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.chips .btn{height:42px;font-size:16px}.stepper{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 0}.stepper output{font-family:var(--display);font-size:28px;font-variant-numeric:tabular-nums}.popover .row{display:flex;gap:8px}.popover .row .btn{flex:1}.dock{position:absolute;left:0;right:0;bottom:0;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:8px}.dock>*{pointer-events:auto}.hint{font-size:13px;font-weight:800;background:#fffc;padding:4px 12px;border-radius:999px;max-width:100%;text-align:center}.hint.blocked{background:var(--brick);color:#fff}.tray{display:flex;align-items:stretch;gap:12px;padding:10px 12px;max-width:min(1180px,100%);min-width:0}.group{display:flex;flex-direction:column;gap:6px;flex:none}.group-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);font-weight:900;padding-left:2px}.group-items{display:flex;gap:6px}.sep{width:2.5px;background:var(--panel-2);border-radius:2px;flex:none}.tool{flex-direction:column;height:56px;min-width:62px;gap:2px;font-size:12px;padding:0 8px}.tool svg{width:22px;height:22px}.current{display:flex;align-items:center;gap:8px;background:var(--panel-2);border-radius:12px;padding:6px 6px 6px 8px;max-width:250px}.current-pic{width:44px;height:34px;display:grid;place-items:center;flex:none}.current-pic svg{height:30px;width:auto;max-width:44px}.current-text{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.15}.current-text b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.current-text small{font-size:11px;color:var(--ink-soft)}.btn.turn{width:40px;min-width:40px;height:40px;padding:0;flex:none}.seg{display:flex;background:var(--panel-2);border-radius:10px;padding:3px;gap:3px}.seg button{flex:1;border:2px solid transparent;background:none;border-radius:8px;padding:4px 8px;font-size:12px;font-weight:900;color:var(--ink-soft);white-space:nowrap}.seg button[aria-checked=true]{background:var(--panel);border-color:var(--ink);color:var(--ink)}.move-pic svg{width:26px;height:26px}.pieces{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}.cats{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:4px 4px 7px;margin:-4px -4px -5px}.cat{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;flex:none;min-width:70px;padding:5px 8px 6px;border:2.5px solid transparent;border-radius:12px;background:none;font-size:12px;font-weight:900;color:var(--ink-soft)}.cat:hover{background:var(--panel-2);color:var(--ink)}.cat[aria-selected=true]{background:var(--panel-2);border-color:var(--ink);color:var(--ink);box-shadow:0 3px 0 var(--ink)}.cat[data-current]:after{content:"";position:absolute;top:4px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--sun);border:2px solid var(--ink)}.cat-pic{height:26px;display:grid;place-items:center}.cat-pic svg{height:24px;width:auto;max-width:42px}.cat-name{white-space:nowrap}.cat-about{margin:0;padding-left:4px;font-size:12px;color:var(--ink-soft)}.shapes{display:flex;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:thin;padding:2px 2px 6px}.shape{height:64px;min-width:60px;padding:4px 8px;flex-direction:column;gap:3px;font-size:11px;flex:none}.shape svg{height:30px;width:auto;max-width:56px}.palette{position:fixed;right:max(16px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);padding:10px;display:flex;flex-direction:column;gap:6px}.colors{display:grid;grid-template-columns:repeat(3,28px);grid-auto-rows:28px;gap:7px}.swatch{width:100%;height:100%;border-radius:8px;border:2.5px solid var(--ink);padding:0;box-shadow:0 2px 0 var(--ink);background:var(--c)}.swatch.clear{background:linear-gradient(color-mix(in srgb,var(--c) 70%,transparent),color-mix(in srgb,var(--c) 70%,transparent)),repeating-conic-gradient(#fff 0,#fff 25%,#c9d3e0 0,#c9d3e0 50%) 0 0 / 10px 10px}.swatch[aria-pressed=true]{outline:3px solid var(--ink);outline-offset:2px;transform:scale(1.08)}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#1d243373;display:grid;place-items:center;padding:16px;z-index:50}.dialog{width:min(520px,100%);padding:20px;text-align:center;max-height:100%;overflow:auto}.dialog h2{margin:0;font-family:var(--display);font-weight:400;font-size:44px;line-height:1.05;color:var(--brick);text-wrap:balance}.dialog p{margin:8px 0 14px;font-size:16px;color:var(--ink-soft);text-wrap:pretty}.dialog img{display:block;width:100%;border:2.5px solid var(--ink);border-radius:12px;margin:0 0 14px;background:var(--sky-bot)}.dialog .row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.dialog.small h2{font-size:30px;color:var(--ink)}.lobby{width:min(420px,100%);display:flex;flex-direction:column;gap:12px;text-align:left}.lobby h2,.lobby>p{text-align:center;margin:0}.lobby-mark{width:64px;height:48px;align-self:center}.lobby-hint{text-align:center;font-size:13px;font-weight:800;color:var(--ink-soft);margin-top:-4px}.field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:900;color:var(--ink-soft)}.lobby input{height:48px;padding:0 14px;border:2.5px solid var(--ink);border-radius:12px;font:inherit;font-size:18px;font-weight:800;color:var(--ink);background:var(--panel-2);min-width:0}.join-row{display:flex;gap:8px}.join-row input{flex:1;text-transform:uppercase;letter-spacing:.15em}.join-row .btn{height:48px}.linkish{background:none;border:0;padding:6px;font-weight:900;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;align-self:center}.err{color:var(--bad)!important;font-size:14px!important;text-align:center;margin:0!important}.toast{position:absolute;left:50%;top:calc(84px + env(safe-area-inset-top,0px));transform:translate(-50%);max-width:min(520px,calc(100vw - 32px));z-index:60;background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px;font-weight:800;font-size:14px;text-align:center;animation:toast-in .2s ease-out;user-select:text;-webkit-user-select:text}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,-8px)}}.locked-badge{position:absolute;left:50%;top:calc(84px + env(safe-area-inset-top,0px));transform:translate(-50%);background:var(--brick);color:#fff;padding:6px 14px;border-radius:999px;border:2.5px solid var(--ink);font-weight:900;font-size:14px;pointer-events:none;white-space:nowrap}@media (max-width: 900px){.actions .btn span{display:none}.actions .btn{min-width:42px;height:42px;padding:0 9px}}@media (max-width: 760px){.topbar{flex-wrap:wrap}.left{flex:1 1 100%;order:1}.brand{height:44px;padding:4px 10px 4px 6px}.brand h1{font-size:19px}.brand-mark{width:30px;height:24px}.actions{order:2;flex:1 1 auto;justify-content:flex-start}.timer{order:3;width:100%;justify-content:center;height:48px}.players{order:4}.callbar{order:5}.call-status,.chip small{display:none}.toast,.locked-badge{top:auto;bottom:calc(260px + env(safe-area-inset-bottom,0px))}.palette{position:static;transform:none;flex-direction:row;align-items:center;padding:8px 10px;max-width:100%}.palette .group-label{display:none}.colors{grid-template-columns:repeat(11,1fr);grid-auto-rows:24px;gap:5px;width:min(360px,calc(100vw - 56px))}.dock{gap:6px}.tray{flex-direction:column;gap:6px;padding:8px;width:100%}.tray .sep,.group-label{display:none}.tool{height:46px;flex:1;flex-direction:row;font-size:13px}.tools{width:100%}.shape{height:54px;min-width:52px}.tools-group{flex-direction:row;flex-wrap:wrap;gap:6px}.tools{flex:1 1 220px}.current{flex:1 1 100%;max-width:none;padding:4px 4px 4px 8px}.cat{min-width:62px;padding:4px 6px;font-size:11px}.cat-pic{height:20px}.cat-pic svg{height:18px}.cat-about{display:none}.toast,.locked-badge{bottom:calc(360px + env(safe-area-inset-bottom,0px))}.hint{font-size:12px}}@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}.lang{display:inline-flex;background:var(--panel-2);border-radius:10px;padding:3px;gap:2px}.lang button{border:2px solid transparent;background:none;border-radius:8px;padding:4px 7px;min-width:34px;font:inherit;font-size:12px;font-weight:900;color:var(--ink-soft);cursor:pointer}.lang button[aria-checked=true]{background:var(--panel);border-color:var(--ink);color:var(--ink)}.lobby-lang{align-self:flex-end;margin-bottom:-8px}.top-lang{align-self:center}html{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}body{-webkit-touch-callout:none}#scene{-webkit-touch-callout:none;-webkit-user-drag:none}input{-webkit-user-select:text;user-select:text}@media (pointer: coarse){.btn{min-width:48px;height:48px}.btn.turn{width:48px;min-width:48px;height:48px}.seg button{padding:8px 10px;font-size:13px}.lang button{min-width:42px;padding:8px 9px}.shape{min-width:64px}.tool{min-width:68px}}@media (pointer: coarse) and (min-width: 761px){.colors{grid-template-columns:repeat(3,36px);grid-auto-rows:36px;gap:8px}}.cats,.shapes{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}@media (min-width: 761px) and (max-height: 760px){.dock{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"hint hint" "tray palette";align-items:stretch}.dock .hint{grid-area:hint;justify-self:center}.tray{grid-area:tray;max-width:none}.palette{grid-area:palette;position:static;transform:none;justify-content:center}.palette .colors,.colors{grid-template-columns:repeat(7,30px);grid-auto-rows:30px;gap:6px}}@media (pointer: coarse){.lang button{min-height:40px}}