html,body{overscroll-behavior:none;background:#05030a;height:100%;margin:0;overflow:hidden}canvas#view{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;width:100%;height:100%;display:block;position:fixed;inset:0}body.playing,body.playing canvas#view{cursor:none}body.show-cursor.playing,body.show-cursor.playing canvas#view{cursor:crosshair}.screen{z-index:10;-webkit-overflow-scrolling:touch;padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));-webkit-backdrop-filter:blur(10px);letter-spacing:.08em;color:#9d8fd0;-webkit-tap-highlight-color:transparent;background:#03010a9e;font:600 13px/1.2 ui-sans-serif,system-ui,sans-serif;display:flex;position:fixed;inset:0;overflow-y:auto}.screen[hidden]{display:none}body.benchmarking .screen{-webkit-backdrop-filter:none;background:#03010ae6}.screen{transition:opacity .15s,background .15s}body.peek .screen{opacity:.5;-webkit-backdrop-filter:none;background:0 0}.menu{flex-direction:column;gap:16px;width:100%;max-width:440px;margin:auto;display:flex}.group{flex-direction:column;gap:6px;min-width:0;display:flex}.cap{letter-spacing:.14em;color:#7d70a8;padding-left:4px;font-size:11px}.pills{background:#0a06188c;border:1px solid #a078ff40;border-radius:14px;flex-wrap:wrap;gap:4px;padding:4px;display:flex}.pills button{all:unset;box-sizing:border-box;text-align:center;cursor:pointer;color:#7d70a8;border-radius:10px;flex:1 1 0;min-width:max-content;padding:11px 10px;transition:color .2s,background .2s,box-shadow .2s}.pills button:hover{color:#fff}.pills button[aria-pressed=true]{color:#05030a;background:linear-gradient(135deg,#00e5ff,#8c5aff);box-shadow:0 0 16px #00e5ff8c}.pills button[aria-pressed=true]:hover{color:#05030a}#colors,.swatches{flex-wrap:wrap;justify-content:center;gap:14px;padding:12px 8px;display:flex}#colors button,.swatches.pills button{all:unset;box-sizing:border-box;cursor:pointer;background:var(--c);opacity:.55;width:28px;min-width:0;height:28px;box-shadow:0 0 6px var(--c);border-radius:50%;flex:none;padding:0;transition:opacity .2s,box-shadow .2s,transform .2s}#colors button:hover,.swatches.pills button:hover:not(:disabled){opacity:.85}#colors button[aria-pressed=true],.swatches.pills button[aria-pressed=true]{opacity:1;box-shadow:0 0 10px var(--c), 0 0 24px var(--c), 0 0 38px var(--c);transform:scale(1.18)}#colors button:focus-visible,.swatches.pills button:focus-visible{outline-offset:3px;outline:2px solid #6ff}.slider{grid-template-columns:1fr auto;align-items:center;gap:8px 12px;display:grid}.slider output{color:#fff;font-variant-numeric:tabular-nums}.slider input{accent-color:#8c5aff;grid-column:1/-1;width:100%;margin:0}select{box-sizing:border-box;width:100%;font:inherit;letter-spacing:inherit;color:#fff;background:#0a0618bf;border:1px solid #a078ff59;border-radius:10px;padding:12px 14px}select option{background:#0a0618}.ghost{all:unset;box-sizing:border-box;text-align:center;cursor:pointer;color:#9d8fd0;letter-spacing:.14em;border:1px solid #a078ff4d;border-radius:999px;width:100%;padding:12px 24px;transition:color .2s,border-color .2s}.ghost:hover{color:#fff;border-color:#a078ffb3}.ghost:focus-visible{outline-offset:2px;outline:2px solid #6ff}#result{z-index:20;text-align:center;-webkit-backdrop-filter:blur(10px);letter-spacing:.14em;color:#9d8fd0;background:#03010ab8;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:16px;font:600 13px/1.2 ui-sans-serif,system-ui,sans-serif;display:flex;position:fixed;inset:0}#result[hidden]{display:none}#result h1{letter-spacing:.12em;color:var(--c);text-shadow:0 0 12px var(--c), 0 0 32px var(--c), 0 0 64px var(--c);margin:0;font-size:clamp(36px,11vw,72px)}#result.win{--c:#39ff6a}#result.lose{--c:#ff3b4e}#result .final{color:#fff;font-variant-numeric:tabular-nums;font-size:15px}#result .btns{flex-direction:column;gap:10px;width:100%;max-width:280px;margin-top:8px;display:flex}#result #again{all:unset;box-sizing:border-box;text-align:center;cursor:pointer;color:#fff;letter-spacing:.14em;background:#8c5aff47;border:1px solid #a078ff80;border-radius:999px;width:100%;padding:16px 24px;font-size:15px;box-shadow:0 0 22px #785aff8c}#result #again:hover{background:#8c5aff73}#result #again:focus-visible,.pills button:focus-visible,select:focus-visible{outline-offset:2px;outline:2px solid #6ff}[hidden],[x-cloak]{display:none!important}.swatches.pills button:disabled{opacity:.15;cursor:not-allowed;box-shadow:none}.mp-only{display:none!important}body.mp .mp-only{display:block!important}body.mp .sp-only{display:none!important}input[type=text]{box-sizing:border-box;width:100%;font:inherit;letter-spacing:inherit;color:#fff;background:#0a0618bf;border:1px solid #a078ff59;border-radius:10px;padding:12px 14px}input[type=text]:focus-visible{outline-offset:2px;outline:2px solid #6ff}h1.title{text-align:center;letter-spacing:.14em;color:#fff;text-shadow:0 0 12px #8c5aff,0 0 32px #00e5ff;margin:0 0 4px;font-size:clamp(26px,8vw,40px)}.primary{all:unset;box-sizing:border-box;text-align:center;cursor:pointer;color:#fff;letter-spacing:.14em;background:#8c5aff47;border:1px solid #a078ff80;border-radius:999px;width:100%;padding:16px 24px;font-size:15px;transition:background .2s,box-shadow .2s,opacity .2s;box-shadow:0 0 22px #785aff8c}.primary:hover{background:#8c5aff73;box-shadow:0 0 30px #8c64ffcc}.primary:disabled,.ghost:disabled{opacity:.4;cursor:default;box-shadow:none}.primary:focus-visible{outline-offset:2px;outline:2px solid #6ff}.screen[data-screen=home]{flex-direction:column}.links{letter-spacing:.14em;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 20px;padding-top:20px;font-size:11px;display:flex}.links a{color:#7d70a8;text-decoration:none;transition:color .2s}.links a:hover{color:#fff}.links a:focus-visible{outline-offset:3px;border-radius:4px;outline:2px solid #6ff}.links .follow{color:#9d8fd0;align-items:center;gap:7px;display:inline-flex}.links .sep{gap:20px;display:inline-flex}.links .credit{color:#5d5285}.links .credit a{color:#9d8fd0}.note{text-align:center;color:#7d70a8;min-height:1.4em;font-size:12px;line-height:1.4}.note.warn{color:#ff9a5c}.list{background:#0a06188c;border:1px solid #a078ff40;border-radius:14px;flex-direction:column;gap:6px;max-height:38vh;padding:4px;display:flex;overflow-y:auto}.row{color:#fff;background:#8c5aff14;border-radius:10px;align-items:center;gap:10px;min-width:0;padding:8px 10px;display:flex}.row .grow{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}.row .dim{color:#7d70a8;white-space:nowrap;font-size:11px}.row button{all:unset;cursor:pointer;color:#fff;background:#8c5aff40;border:1px solid #a078ff80;border-radius:999px;padding:7px 12px;font-size:11px}.row button:hover{background:#8c5aff80}.row button:focus-visible{outline-offset:2px;outline:2px solid #6ff}.empty{text-align:center;color:#7d70a8;padding:14px}.dot{background:var(--c);width:12px;height:12px;box-shadow:0 0 8px var(--c);border-radius:50%;flex:none}.badge{border:1px solid;border-radius:999px;padding:3px 8px;font-size:10px}.badge.ready{color:#39ff6a}.badge.off{color:#ff9a5c}.badge.you{color:#00e5ff}.badge.ai{color:#ffb400}.inline{align-items:stretch;gap:8px;display:flex}.inline>*{flex:1 1 0;min-width:0}.inline>.ghost{flex:none;width:auto;padding:11px 18px}.roomid{align-items:center;gap:8px;display:flex}.roomid code{color:#fff;letter-spacing:.2em;background:#0a0618bf;border:1px solid #a078ff59;border-radius:10px;flex:1;padding:11px 12px;font-size:15px}.roomid .ghost{width:auto;padding:11px 16px}.slider[aria-disabled=true] input{opacity:.5}.tabs{background:#0a06188c;border:1px solid #a078ff40;border-radius:14px;gap:4px;padding:4px;display:flex}.tabs button{all:unset;box-sizing:border-box;cursor:pointer;color:#9d8fd0;text-align:center;border-radius:10px;flex-direction:column;flex:1 1 0;align-items:center;gap:5px;min-width:0;padding:10px 8px;transition:color .2s,background .2s,box-shadow .2s;display:flex}.tabs button:hover{color:#fff}.tabs button:focus-visible{outline-offset:2px;outline:2px solid #6ff}.tabs button[aria-selected=true]{color:#fff;background:#8c5aff4d;box-shadow:inset 0 0 0 1px #00e5ffb3,0 0 16px #00e5ff59}.tabs .sub{letter-spacing:.08em;color:#7d70a8;font-size:10px;font-weight:600}.tabs button[aria-selected=true] .sub{color:#b9b0e0}.help{color:#c9c0ee;letter-spacing:.03em;background:#0a06188c;border:1px solid #a078ff40;border-radius:14px;padding:12px 14px;font-size:12px;font-weight:500;line-height:1.5}.help p{margin:0}.help ul{flex-direction:column;gap:4px;margin:8px 0;padding:0;list-style:none;display:flex}.help li:before{content:"✓ ";color:#39ff6a;font-weight:700}.help .small{color:#7d70a8;font-size:11px}.ping{white-space:nowrap;font-variant-numeric:tabular-nums;font-size:11px}.ping:before{content:"● "}.ping.good{color:#39ff6a}.ping.ok{color:#ffb400}.ping.bad{color:#ff3b4e}.ping.testing{color:#7d70a8}.ping.testing:before{content:""}.ping.fail{color:#ff9a5c}.ping.fail:before{content:"✕ "}#hud{z-index:5;top:max(10px, env(safe-area-inset-top));left:max(10px, env(safe-area-inset-left));pointer-events:none;letter-spacing:.06em;color:#d8d0ff;font:600 12px/1 ui-sans-serif,system-ui,sans-serif;display:none;position:fixed}body.playing #hud{display:block}#hudStats{z-index:5;pointer-events:none;box-sizing:border-box;height:30px;top:calc(max(10px, env(safe-area-inset-top)) + 8px);right:calc(max(10px, env(safe-area-inset-right)) + 56px);letter-spacing:.08em;color:#beffffd9;text-shadow:0 0 6px #00e5ff99;font-variant-numeric:tabular-nums;background:#05030eb3;border:1px solid #a078ff59;border-radius:999px;align-items:center;padding:0 12px;font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;display:none;position:fixed}body.playing #hudStats{display:flex}body.nohud #hudStats{display:none}#board{--row:42px;--cut:14px;box-sizing:border-box;-webkit-backdrop-filter:blur(8px);width:min(260px,48vw);clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));background:linear-gradient(160deg,#100926db,#04020ce6);padding:10px 12px 12px;position:relative}#board:before{content:"";pointer-events:none;clip-path:inherit;-webkit-mask-composite:xor;background:linear-gradient(135deg,#00e5ff,#8c5aff80 40%,#8c5aff26 70%,#ff2bd6);padding:1px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}#board:after{content:"";pointer-events:none;background:repeating-linear-gradient(0deg,#ffffff06 0 1px,#0000 1px 3px);position:absolute;inset:0}#board .head{letter-spacing:.22em;color:#7d70a8;border-bottom:1px dashed #a078ff4d;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:7px;padding:0 2px 7px;font-size:9px;display:flex}#board .head b{color:#bff;text-shadow:0 0 8px #00e5ffb3;font-weight:800}#board .rows{position:relative}#board .rowx{box-sizing:border-box;height:calc(var(--row) - 6px);border-left:3px solid var(--c);background:linear-gradient(90deg, color-mix(in srgb, var(--c) 14%, transparent), #ffffff05 75%);grid-template-rows:1fr 3px;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;column-gap:8px;padding:0 10px 0 8px;transition:transform .55s cubic-bezier(.2,.9,.25,1.15),background .3s,box-shadow .4s;display:grid;position:absolute;top:0;left:0;right:0}#board .rank{color:#7d70a8;text-align:center;grid-row:1/3;font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace}#board .name{align-items:center;gap:6px;min-width:0;padding-top:6px;display:flex}#board .name span{white-space:nowrap;text-overflow:ellipsis;padding:0 2px;line-height:1.6;overflow:hidden}#board .name span:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){letter-spacing:0}#seatNames .seatName:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){letter-spacing:0}#board .you{letter-spacing:.16em;color:#05030a;background:var(--c);box-shadow:0 0 8px var(--c);border-radius:3px;flex:none;padding:2px 5px;font-size:8px}#board .right{align-items:baseline;gap:7px;padding-top:6px;display:flex}#board .ms{color:#beffff73;font-variant-numeric:tabular-nums;font:600 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace}#board .score{text-align:right;color:#fff;font-variant-numeric:tabular-nums;min-width:1.4em;text-shadow:0 0 8px color-mix(in srgb, var(--c) 60%, transparent);font:800 17px/1 ui-monospace,SFMono-Regular,Menlo,monospace;display:inline-block}#board .score.pop{animation:.65s cubic-bezier(.2,1.4,.4,1) scorePop}@keyframes scorePop{0%{color:var(--c);text-shadow:0 0 10px var(--c), 0 0 24px var(--c);transform:scale(1.8)}to{transform:scale(1)}}#board .bar{background:#ffffff12;border-radius:2px;grid-column:2/4;align-self:start;height:3px;overflow:hidden}#board .bar i{background:var(--c);height:100%;box-shadow:0 0 6px var(--c);transition:width .5s ease-out;display:block}#board .rowx.me{background:linear-gradient(90deg, color-mix(in srgb, var(--c) 30%, transparent), #ffffff0d 80%);color:#fff}#board .rowx.lead{box-shadow:0 0 14px color-mix(in srgb, var(--c) 45%, transparent), inset 0 0 12px color-mix(in srgb, var(--c) 22%, transparent)}#board .rowx.lead .rank{color:var(--c);text-shadow:0 0 8px var(--c)}@media (prefers-reduced-motion:reduce){#board .rowx,#board .bar i{transition:none}#board .score.pop{animation:none}}#pauseBtn{all:unset;box-sizing:border-box;z-index:7;top:max(10px, env(safe-area-inset-top));right:max(10px, env(safe-area-inset-right));-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:#0a06188c;border:1px solid #a078ff80;border-radius:50%;justify-content:center;align-items:center;gap:6px;width:46px;height:46px;display:none;position:fixed;box-shadow:0 0 14px #785aff73}#pauseBtn:before,#pauseBtn:after{content:"";background:#fff;border-radius:2px;width:5px;height:17px;box-shadow:0 0 6px #00e5ff}body.playing #pauseBtn{cursor:pointer;display:flex}#pauseBtn:hover{background:#8c5aff66}#pauseBtn:focus-visible{outline-offset:2px;outline:2px solid #6ff}#countdown{z-index:6;pointer-events:none;color:#fff;text-shadow:0 0 18px #8c5aff,0 0 48px #00e5ff,0 0 90px #00e5ff;justify-content:center;align-items:center;font:800 clamp(96px,28vw,220px)/1 ui-sans-serif,system-ui,sans-serif;display:flex;position:fixed;inset:0}#countdown span{will-change:transform, opacity, filter;position:absolute}#countdown .in{animation:1s cubic-bezier(.2,.9,.3,1) both cdIn}#countdown .out{animation:.22s ease-in forwards cdOut}#countdown .go.in{animation:.4s cubic-bezier(.2,1.4,.4,1) both cdGoIn}#countdown .go.out{animation:.4s ease-in forwards cdGoOut}@keyframes cdIn{0%{opacity:0;filter:blur(8px);transform:scale(2.6)rotate(-35deg)}28%{opacity:1;filter:blur();transform:scale(1)rotate(0)}to{opacity:1;filter:blur();transform:scale(.88)rotate(5deg)}}@keyframes cdOut{0%{opacity:1;filter:blur();transform:scale(.88)rotate(5deg)}to{opacity:0;filter:blur(6px);transform:scale(.3)rotate(40deg)}}@keyframes cdGoIn{0%{opacity:0;transform:scale(.2)rotate(25deg)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes cdGoOut{0%{opacity:1;filter:blur();transform:scale(1)}to{opacity:0;filter:blur(10px);transform:scale(2.2)}}@media (prefers-reduced-motion:reduce){#countdown .in,#countdown .go.in{animation:.2s ease-out both cdFade}#countdown .out,#countdown .go.out{animation:.2s ease-in reverse forwards cdFade}@keyframes cdFade{0%{opacity:0}to{opacity:1}}}#seatNames{z-index:5;pointer-events:none;position:fixed;inset:0;overflow:hidden}#seatNames .seatName{white-space:nowrap;text-overflow:ellipsis;border:1px solid var(--c);letter-spacing:.12em;text-transform:uppercase;color:#fff;max-width:40vw;text-shadow:0 0 10px var(--c);box-shadow:0 0 12px color-mix(in srgb, var(--c) 45%, transparent);opacity:0;background:#0a0618b3;border-radius:999px;padding:1px 12px;font:800 clamp(12px,2.4vw,18px)/1.6 ui-sans-serif,system-ui,sans-serif;transition:opacity .25s ease-out;position:absolute;top:0;left:0;overflow:hidden}#seatNames .seatName.on{opacity:1}#countdown[hidden],#banner[hidden],#hint[hidden],#toast[hidden]{display:none}#banner{z-index:15;box-sizing:border-box;text-align:center;-webkit-backdrop-filter:blur(6px);letter-spacing:.14em;color:#fff;text-shadow:0 0 14px #8c5aff;background:#03010a99;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:16px;font:700 clamp(15px,4vw,22px)/1.3 ui-sans-serif,system-ui,sans-serif;display:flex;position:fixed;inset:0}#banner .btns{width:100%;max-width:280px;text-shadow:none;flex-direction:column;gap:10px;font-size:13px;display:flex}#banner .ghost{color:#fff;background:#0a0618b3}body.playing.waiting,body.playing.waiting canvas#view{cursor:auto}#hint,#toast{z-index:16;box-sizing:border-box;text-align:center;letter-spacing:.14em;color:#fff;background:#0a0618d9;border:1px solid #a078ff80;border-radius:999px;max-width:calc(100vw - 32px);padding:10px 18px;font:700 12px/1.2 ui-sans-serif,system-ui,sans-serif;position:fixed;left:50%;transform:translate(-50%)}#hint{pointer-events:none;bottom:18px}#toast{border-color:#ff9a5cb3;top:18px}#result .names{flex-direction:column;align-items:stretch;gap:6px;min-width:200px;display:flex}#result .names .row{background:#8c5aff1f;justify-content:space-between}#result .sub{color:#ff9a5c;font-size:12px}@media (max-width:400px){.pills button{letter-spacing:.04em;padding:10px 6px;font-size:12px}.menu{gap:12px}}@media (max-height:520px){.menu{gap:10px}.primary{padding:12px 24px}}