*{box-sizing:border-box}html,body,canvas{width:100%;height:100%;margin:0;overflow:hidden}body{--ink:#2a1f4a;--pink:#ff4fa3;--yellow:#ffd23f;--purple:#7b5cff;--good:#2ecc71;--bad:#ff4d5e;color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:linear-gradient(#6fc6ff 0%,#ffe3f1 100%);font-family:"Baloo 2",Nunito,Arial Rounded MT Bold,ui-rounded,system-ui,sans-serif}canvas{touch-action:none;display:block}h1,h2,p{margin:0}button{border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);color:var(--ink);font:inherit;cursor:pointer;background:#fff;border-radius:14px;padding:10px 16px;font-weight:800;transition:transform 80ms,box-shadow 80ms}button:hover:not(:disabled){box-shadow:0 6px 0 var(--ink);transform:translateY(-2px)}button:active:not(:disabled){box-shadow:0 1px 0 var(--ink);transform:translateY(3px)}button:disabled{cursor:not-allowed;opacity:.45}button.big{background:var(--yellow);letter-spacing:.04em;text-transform:uppercase;padding:14px 20px;font-size:26px}input,select{border:3px solid var(--ink);color:var(--ink);font:inherit;background:#fff;border-radius:12px;padding:8px 12px;font-weight:700}.screens{z-index:10;pointer-events:none;justify-content:flex-end;align-items:center;padding:24px 6vw;display:flex;position:fixed;inset:0}.screens[data-screen=match]{display:none}.menu{border:4px solid var(--ink);width:min(420px,100%);max-height:100%;box-shadow:0 10px 0 var(--ink);text-align:center;pointer-events:auto;background:#ffffffe8;border-radius:28px;flex-direction:column;gap:12px;padding:24px;animation:.25s ease-out pop-in;display:flex;position:relative;overflow-y:auto}.screens[data-redraw] .menu{animation:none}@media (width<=800px){.screens{padding:12px 12px calc(72px + env(safe-area-inset-bottom,0px));justify-content:center;align-items:flex-end}.menu{max-height:62vh}}.menu h1{font-size:34px;line-height:1}.menu h2{text-align:left;text-transform:uppercase;margin-top:4px;font-size:16px}.menu p{line-height:1.35}.logo{object-fit:contain;width:100%;max-height:150px}.logo.alt{color:var(--pink);-webkit-text-stroke:2px var(--ink);font-size:54px;font-weight:900;line-height:1}.credits{z-index:20;border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);color:var(--ink);white-space:nowrap;pointer-events:auto;cursor:pointer;background:#fff;border-radius:999px;align-items:center;gap:8px;padding:5px 14px 5px 5px;font-size:14px;font-weight:700;text-decoration:none;display:flex;position:fixed;bottom:14px;left:50%;translate:-50%}.credits:hover{background:var(--yellow)}.credits img{background:#fff;border-radius:50%;width:30px;height:30px}.tagline{font-weight:700}.row{gap:10px;display:flex}.row>*{flex:1}.name{justify-content:center;align-items:center;gap:6px;display:flex}.name input{text-align:center;width:60%}.name span,.players small{opacity:.55;font-weight:700}.wins{font-weight:800}.warn{color:#b0172a;background:#ffe0e3;border-radius:10px;padding:6px;font-weight:700}.test{background:#e6ddff;border-radius:10px;padding:6px;font-weight:700}.help{opacity:.75;font-size:14px}.field{justify-content:center;align-items:center;gap:10px;font-weight:700;display:flex}.join input{letter-spacing:.15em;text-align:center;text-transform:uppercase;flex:1 1 0;min-width:0;padding:8px 6px;font-size:20px}.join button{flex:none;padding:8px 14px}.code{background:var(--yellow);letter-spacing:.12em;border-radius:10px;padding:0 10px}.players{text-align:left;grid-template-columns:1fr 1fr;gap:4px 12px;max-height:200px;margin:0;padding:0;font-weight:700;list-style:none;display:grid;overflow-y:auto}.bigtext{font-size:48px;font-weight:900}.rounds{text-align:left;margin:0;padding-left:22px;line-height:1.4}.toggles{gap:6px;display:flex;position:absolute;top:10px;right:10px}.toggles button{box-shadow:none;border-width:2px;padding:4px 8px;font-size:18px;position:relative}.row.three{gap:8px}.row.three button{padding:10px 6px}.audio{flex-direction:column;gap:10px;display:flex}.level{text-align:left;grid-template-columns:auto 1fr;grid-template-areas:"toggle label""toggle slider";align-items:center;column-gap:12px;font-weight:800;display:grid}.level button{box-shadow:none;border-width:2px;grid-area:toggle;padding:6px 10px;font-size:20px;position:relative}.level span{grid-area:label}.level input{width:100%;min-width:0;accent-color:var(--pink);background:0 0;border:none;grid-area:slider;padding:0}.level output{font-variant-numeric:tabular-nums;opacity:.7;grid-area:label;justify-self:end}:is(.level:has(button[aria-pressed=false]) input,.level:has(button[aria-pressed=false]) output){opacity:.4}.options-layer{z-index:45;background:#2a1f4a66;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.toggles [data-act=music][aria-pressed=false],.level [data-act=music][aria-pressed=false]{color:#0000;text-shadow:0 0 #2a1f4a73}.toggles [data-act=music][aria-pressed=false]:after,.level [data-act=music][aria-pressed=false]:after{background:var(--ink);content:"";height:2px;position:absolute;top:50%;left:6px;right:6px;transform:rotate(-45deg)}.swatches{flex-wrap:wrap;gap:8px;display:flex}.swatch{background:var(--c);border-radius:50%;width:40px;height:40px;padding:0}.swatch[aria-pressed=true],.hat[aria-pressed=true]{outline:4px solid var(--pink);outline-offset:2px}.hats{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;display:grid}.hat{text-transform:capitalize;flex-direction:column;align-items:center;gap:2px;padding:6px;display:flex}.hat img,.hat .alt{width:64px;height:64px}.hat .alt{opacity:.5;place-items:center;font-size:12px;display:grid}.consent{bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:50;border:4px solid var(--ink);width:min(460px,100vw - 24px);box-shadow:0 8px 0 var(--ink);text-align:center;background:#fff;border-radius:22px;flex-direction:column;gap:10px;padding:16px 18px;font-weight:700;line-height:1.35;animation:.25s ease-out pop-in;display:flex;position:fixed;left:50%;translate:-50%}.consent p{font-size:15px}.consent-now{opacity:.7}body[data-screen=match] .consent{display:none}.cookie-link{box-shadow:none;opacity:.6;background:0 0;border:none;align-self:center;padding:2px 8px;font-size:13px;font-weight:700;text-decoration:underline}.cookie-link:hover:not(:disabled),.cookie-link:active:not(:disabled){box-shadow:none;opacity:1;transform:none}.hud-layer{z-index:20;pointer-events:none;position:fixed;inset:0}.hud-layer button{pointer-events:auto}.topbar{align-items:center;gap:10px;padding:14px;display:flex}.pill{border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);background:#fff;border-radius:999px;padding:6px 14px;font-weight:800}.topbar .quit{padding:6px 14px}.topbar .gear{margin-left:auto;padding:6px 12px}.spectate{border:3px solid var(--ink);pointer-events:auto;background:#fff;border-radius:999px;align-items:center;gap:12px;padding:8px;font-weight:700;display:flex;position:absolute;bottom:24px;left:50%;translate:-50%}.spectate button{box-shadow:none;border-radius:999px;padding:4px 12px}.touch{align-items:flex-end;gap:14px;display:flex;position:absolute;bottom:24px;right:20px}.touch button{background:var(--yellow);touch-action:none;border-radius:50%;width:84px;height:84px}.touch button[data-press=dive]{background:var(--pink);color:#fff;width:68px;height:68px}.stick{z-index:15;pointer-events:none;background:#2a1f4a33;border:3px solid #fffa;border-radius:50%;width:110px;height:110px;margin:-55px 0 0 -55px;display:none;position:fixed}.stick i{background:#fff;border-radius:50%;width:50px;height:50px;position:absolute;top:30px;left:30px;box-shadow:0 2px 6px #0005}.labels span{z-index:12;color:#fff;white-space:nowrap;pointer-events:none;background:#2a1f4a99;border-radius:8px;padding:1px 8px;font-size:13px;font-weight:700;position:fixed;top:0;left:0}.labels span.focus{background:var(--pink)}.countdown{z-index:30;color:var(--yellow);-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;text-shadow:0 8px 0 var(--ink);pointer-events:none;font-size:min(22vw,180px);font-weight:900;line-height:1;position:fixed;top:38%;left:50%;translate:-50% -50%}.countdown.pop{animation:.6s ease-out count-pop}.toasts{z-index:40;pointer-events:none;flex-direction:column;align-items:center;gap:8px;display:flex;position:fixed;top:90px;left:50%;translate:-50%}.toast{border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);background:#fff;border-radius:16px;padding:10px 22px;font-size:22px;font-weight:900;animation:.25s ease-out pop-in}.toast.good{background:var(--good);color:#fff}.toast.bad{background:var(--bad);color:#fff}.round-card,.results,.winner{z-index:35;border:5px solid var(--ink);width:min(560px,100vw - 32px);max-height:calc(100vh - 32px);box-shadow:0 12px 0 var(--ink);text-align:center;background:#fff;border-radius:32px;padding:28px;animation:.35s cubic-bezier(.2,1.6,.5,1) card-in;position:fixed;top:50%;left:50%;overflow-y:auto;translate:-50% -50%}.round-card{background:linear-gradient(160deg, var(--yellow), #ffb3d6);pointer-events:none;transition:opacity .6s,scale .6s}.round-card.gone{opacity:0;scale:.8}.round-card h1,.winner h1{font-size:48px;line-height:1}.round-no{letter-spacing:.1em;text-transform:uppercase;opacity:.7;font-weight:800}.goal{margin-top:10px;font-size:22px;font-weight:800}.tip{opacity:.8;margin-top:6px}.quota{background:var(--ink);color:#fff;border-radius:999px;margin-top:14px;padding:6px 16px;font-weight:800;display:inline-block}.results h1{font-size:40px}.results h1.good{color:var(--good)}.results h1.bad{color:var(--bad)}.results .cols{text-align:left;grid-template-columns:1fr 1fr;gap:16px;margin:12px 0;display:grid}.results h2{text-transform:uppercase;font-size:16px}.results ul{columns:2;max-height:240px;margin:4px 0 0;padding:0;font-size:14px;font-weight:700;list-style:none;overflow-y:auto}.results li.you{color:var(--pink)}.results button,.winner button{margin-top:14px}.winner{background:linear-gradient(160deg, var(--yellow), #fff3b0)}.round-card+.winner,.winner{padding:14px 22px;top:16px;translate:-50%}.winner h1{font-size:clamp(28px,5vw,40px)}.victory-labels span b{background:var(--yellow);min-width:1.5em;color:var(--ink);text-align:center;border-radius:6px;margin-right:2px;display:inline-block}@keyframes pop-in{0%{opacity:0;scale:.9}}@keyframes card-in{0%{opacity:0;scale:.6}}@keyframes count-pop{0%{opacity:0;scale:1.8}40%{opacity:1;scale:.95}}
