@font-face{font-family:SF Cartoonist Hand;src:url(../fonts/SFCartoonistHand.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:SF Cartoonist Hand;src:url(../fonts/SFCartoonistHand-Bold.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:SF Cartoonist Hand;src:url(../fonts/SFCartoonistHand-Italic.ttf) format("truetype");font-weight:400;font-style:italic;font-display:swap}:root{--bg: #ffffff;--ink: #111111;--text-2: #444444;--muted: #666666;--primary: #0a8cff;--primary-dark: #0070d6;--primary-tint: #e6f3ff;--primary-ink: #00549e;--on-primary: #ffffff;--secondary: #ffffff;--danger: #f23b3b;--danger-tint: #ffe9e9;--danger-ink: #b42323;--success: #16a34a;--success-dark: #12853c;--success-tint: #e3f7ea;--success-ink: #0d5f2b;--bubble: var(--danger);--table: var(--primary);--font: "SF Cartoonist Hand", "Comic Sans MS", "Chalkboard SE", system-ui, sans-serif;--serif: var(--font);--sans: var(--font);--t-hero: 80px;--t-title: 56px;--t-heading: 32px;--t-subtitle: 24px;--t-body: 20px;--t-label: 16px;--t-caption: 14px;--btn-h: 48px;--btn-font: 18px;--press-in: .06s ease-out;--press-out: .32s cubic-bezier(.34, 1.9, .64, 1)}*{box-sizing:border-box}html,body,body *{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}input,textarea{user-select:text;-webkit-user-select:text;-webkit-touch-callout:default}html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-text-size-adjust:100%;overscroll-behavior:none}body{position:fixed;inset:0;width:100%;height:100%}canvas#game{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}.icon{--icon: 24px;display:inline-flex;flex:none;width:var(--icon);height:var(--icon);line-height:0}.icon svg{width:100%;height:100%;display:block}.controls{position:fixed;top:calc(16px + env(safe-area-inset-top));left:calc(16px + env(safe-area-inset-left));right:calc(16px + env(safe-area-inset-right));display:flex;align-items:center;justify-content:space-between;gap:8px;z-index:5;pointer-events:none}.controls[hidden]{display:none}.controls-side{display:flex;align-items:center;gap:8px}.controls .chip{pointer-events:auto}.chip{appearance:none;display:inline-flex;align-items:center;justify-content:center;height:var(--btn-h);border:2px solid var(--ink);background:#fff;color:var(--ink);border-radius:999px;padding:0 16px;font:700 var(--btn-font)/1 var(--font);cursor:pointer;box-shadow:0 4px 0 var(--ink);transition:transform var(--press-out),box-shadow var(--press-out),background .12s,opacity .2s}.chip[hidden]{display:none}.chip-icon{width:var(--btn-h);padding:0}.chip-icon .icon{--icon: 24px}.chip-icon .mute-x,.chip-icon[aria-pressed=true] .wave{display:none}.chip-icon[aria-pressed=true] .mute-x{display:block}.chip-static{cursor:default}:is(.btn,.chip,.option,.avatar):is(:active,.is-pressed):not(:disabled){transform:translateY(4px);box-shadow:0 0 0 var(--ink);transition:transform var(--press-in),box-shadow var(--press-in),background .12s}.chip.chip-static,.chip.chip-static:is(:active,.is-pressed):not(:disabled){transform:none;box-shadow:none}:is(.btn,.chip,.option):not(.primary):not(.chip-static):focus-visible{background:var(--primary-tint)}.overlay{position:fixed;inset:0;overflow-y:auto;display:flex;align-items:center;justify-content:center;padding:16px;background:#ffffffb8;z-index:10;animation:overlay-in .25s ease both}.overlay[hidden]{display:none}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}.card{--tilt: -.6deg;position:relative;width:min(440px,100%);background:#fff;border:3px solid var(--ink);border-radius:24px;padding:32px 24px 24px;text-align:center;box-shadow:8px 8px 0 var(--ink);transform:rotate(var(--tilt));animation:card-in .35s cubic-bezier(.34,1.56,.64,1) both}@keyframes card-in{0%{transform:rotate(var(--tilt)) scale(.9) translateY(12px);opacity:0}to{transform:rotate(var(--tilt)) scale(1) translateY(0);opacity:1}}@media (max-width: 600px),(orientation: landscape) and (max-height: 520px){.card{--tilt: 0deg;box-shadow:0 8px 0 var(--ink)}}.card h1{font:700 var(--t-title)/1 var(--font);margin:0 0 8px;letter-spacing:-.01em}.card .sub{font:400 var(--t-body)/1.4 var(--font);color:var(--text-2);margin:0 0 16px}.card .hint{font:400 var(--t-caption)/1.4 var(--font);color:var(--muted);margin:16px 0 0}.home{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;overflow-y:auto;background:var(--bg);text-align:center;padding-top:env(safe-area-inset-top)}.home[hidden]{display:none}.home-body{flex:1 0 auto;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;gap:24px;padding:24px 16px}.hero{width:100%;display:flex;flex-direction:column;align-items:center}.home h1{font:700 var(--t-hero)/1 var(--font);margin:0;letter-spacing:-.01em;color:var(--ink)}.home .sub{font:700 var(--t-subtitle)/1.3 var(--font);color:var(--text-2);margin:0 0 12px}.hero-table{display:block;width:min(100%,440px);height:auto;aspect-ratio:380 / 118;overflow:visible}.t-net{fill:var(--ink)}.r-ball{fill:#fff;stroke:var(--ink);stroke-width:1.6}.r-shadow{fill:#00285a4d}.paddle-red{--face: #d23b3b;--face-dark: #b02e2e}.paddle-blue{--face: #3f78be;--face-dark: #2f5f9a}.p-handle,.p-edge,.p-face{stroke:var(--ink);stroke-width:4;stroke-linejoin:round}.p-handle{fill:#fff}.p-edge{fill:var(--face-dark)}.p-face{fill:var(--face)}.p-shade{fill:var(--face-dark);opacity:.5}.p-grip,.p-glint{fill:none;stroke-linecap:round}.p-grip{stroke:#0000001f;stroke-width:2}.p-glint{stroke:#fff;stroke-width:4.4}.p-shadow{fill:#00285a38}.t-top{fill:var(--table)}.t-line{fill:none;stroke:#fff;stroke-width:2.5;stroke-linejoin:round}.t-edge{fill:var(--primary-ink)}.home-main{width:min(440px,100%);display:flex;flex-direction:column}.home .mp-divider{margin:12px 0 8px}.home .net-status{margin-top:8px}.home .footer{padding:0 16px calc(16px + env(safe-area-inset-bottom))}@media (orientation: landscape) and (max-height: 520px){.home{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;grid-template-areas:"top top" "hero main" "foot foot";align-items:center;column-gap:24px}.home-body{display:contents}.home-top{grid-area:top}.hero{grid-area:hero;padding-left:16px}.hero-table{width:min(100%,384px)}.home-main{grid-area:main;justify-self:center;width:min(400px,100%);padding-right:16px}.home .footer{grid-area:foot}}.options{display:grid;gap:16px;margin:0 0 16px;text-align:left}.option{appearance:none;display:flex;align-items:center;gap:16px;width:100%;padding:16px;border:2.5px solid var(--ink);border-radius:16px;background:var(--secondary);color:var(--ink);box-shadow:0 4px 0 var(--ink);cursor:pointer;text-align:left;transition:transform var(--press-out),box-shadow var(--press-out),background .12s}.option:hover,.option:focus-visible{outline:none;background:var(--primary-tint)}.option-icon{--icon: 48px;transition:transform .15s cubic-bezier(.34,1.56,.64,1)}.option:hover .option-icon,.option:focus-visible .option-icon{transform:rotate(-8deg) scale(1.1)}.option-text{display:flex;flex-direction:column;gap:4px;min-width:0}.option-name{font:700 var(--t-subtitle)/1.2 var(--font)}.option-desc{font:400 var(--t-label)/1.3 var(--font);color:var(--text-2)}.dialog-card{width:min(480px,100%);margin:auto}.dialog-card .btn-quiet{width:100%}.howto{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:16px;text-align:left}.howto li{display:flex;gap:16px;align-items:flex-start}.howto-icon{flex:none;width:32px;height:32px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:50%;background:var(--primary-tint);color:var(--primary-ink);font:700 var(--t-label)/1 var(--font)}.howto p{margin:0;display:flex;flex-direction:column;gap:4px}.howto strong{font:700 var(--t-body)/1.2 var(--font)}.howto span:not(.howto-icon){font:400 var(--t-label)/1.4 var(--font);color:var(--text-2)}.play{width:100%}.actions{display:flex;flex-direction:column;gap:16px}.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;height:var(--btn-h);border:2.5px solid var(--ink);background:#fff;color:var(--ink);border-radius:999px;padding:0 16px;font:700 var(--btn-font)/1 var(--font);cursor:pointer;box-shadow:0 4px 0 var(--ink);transition:transform var(--press-out),box-shadow var(--press-out),background .12s;width:100%;white-space:nowrap;text-align:center}.btn.primary{background:#d61a28;color:#fff}.btn.primary:hover,.btn.primary:focus-visible{background:#b3141f}.info-badge{display:inline-flex;align-self:center;align-items:center;gap:8px;margin:24px 0 0;padding:8px 16px;background:var(--primary-tint);color:var(--primary-ink);border:2px solid var(--primary-ink);border-radius:999px;font:400 var(--t-caption)/1.2 var(--font);text-align:left}@media (max-width: 420px){.card{padding:24px 16px;border-radius:20px}}@media (prefers-reduced-motion: reduce){.overlay,.card{animation:none}.option-icon{transition:none}:root{--press-out: .12s ease-out}}@media (max-width: 600px),(orientation: landscape) and (max-height: 520px){:root{--t-hero: 56px;--t-title: 40px;--t-heading: 28px;--t-subtitle: 20px;--t-body: 18px}}.home-top{width:100%;display:flex;justify-content:center;padding:16px 16px 0}.link-btn{appearance:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:0;border-radius:12px;background:none;color:var(--ink);font:700 var(--btn-font)/1.2 var(--font);cursor:pointer}.link-btn .icon{--icon: 24px}.link-btn:hover .dotted{color:var(--primary-dark)}.link-btn:focus-visible{outline:none;background:var(--primary-tint)}.link-btn:active{transform:translateY(1px)}.profile-btn{min-height:40px;margin-top:4px}@media (max-height: 600px){.home-top{padding-top:8px}.home-body{gap:16px;padding-block:16px}}.profile-btn .profile-face{width:28px;height:28px}.profile-btn-name{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-btn .icon[data-icon=pencil]{--icon: 20px}.avatars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.avatar{appearance:none;padding:8px;display:flex;flex-direction:column;align-items:center;gap:8px;border:2.5px solid var(--ink);border-radius:16px;background:var(--secondary);color:var(--ink);box-shadow:0 4px 0 var(--ink);cursor:pointer;transition:transform var(--press-out),box-shadow var(--press-out),background .12s}.avatar svg{width:64px;height:64px;display:block;overflow:visible}.avatar-name{font:700 var(--t-label)/1.2 var(--font)}.avatar:focus-visible{outline:none;background:var(--primary-tint)}.avatar[aria-checked=true]{background:var(--primary-tint);color:var(--primary-ink);box-shadow:inset 0 0 0 3px var(--primary),0 4px 0 var(--ink)}.actions.single{margin-top:24px}.dialog-card .mp-label{margin:16px 0 8px}.dialog-card .mp-label:first-of-type{margin-top:0}.name-count{float:right;font:400 var(--t-caption)/1 var(--font);color:var(--text-2)}.dock{position:fixed;left:50%;translate:-50% 0;bottom:calc(16px + env(safe-area-inset-bottom));z-index:5;width:min(560px,calc(100vw - 32px));display:flex;align-items:center;gap:16px}.dock[hidden]{display:none}.dock>.chip,.chat{flex:none}.chat{position:relative;width:var(--btn-h);height:var(--btn-h)}.power{--power: 0;flex:1;min-width:0;height:var(--btn-h);display:flex;align-items:center;gap:16px;padding:0 6px 0 16px;border:2px solid var(--ink);border-radius:999px;background:#fff;box-shadow:0 4px 0 var(--ink);cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}.power:focus-visible{outline:none;background:var(--primary-tint)}.power-label{flex:none;font:700 var(--t-label)/1 var(--font)}.power-state{flex:none;width:96px;height:32px;display:grid;place-items:center;border-radius:999px;background:var(--primary-tint);color:var(--primary-ink);font:700 var(--t-caption)/1 var(--font);white-space:nowrap;transition:background .15s,color .15s}.power.sweet .power-state{background:var(--success-tint);color:var(--success-ink)}.power.risky .power-state{background:var(--danger-tint);color:var(--danger-ink)}.power-track{position:relative;flex:1;min-width:0;height:24px;border:2px solid var(--ink);border-radius:999px;background:#fff}.power-fill,.power-sweet,.power-risk{position:absolute;top:0;bottom:0}.power-fill{left:0;right:0;z-index:1;border-radius:999px;background:linear-gradient(90deg,var(--primary-tint) 0%,var(--primary) 40%,var(--success) 70%,var(--danger) 92%);clip-path:inset(0 calc((1 - var(--power)) * 100%) 0 0)}.power-sweet{left:60%;width:20%;z-index:2;background:#16a34a29;border-left:2px dashed var(--ink);border-right:2px dashed var(--ink)}.power-risk{left:85%;right:0;z-index:2;border-radius:0 999px 999px 0;background:repeating-linear-gradient(-45deg,rgba(17,17,17,.22) 0 2px,transparent 2px 6px)}.power-thumb{position:absolute;top:-8px;bottom:-8px;left:calc(4px + var(--power) * (100% - 8px));z-index:3;width:8px;translate:-50% 0;border:2px solid var(--ink);border-radius:999px;background:#fff;opacity:min(1,calc(var(--power) * 100))}@media (max-width: 480px){.dock{gap:8px}.power{gap:8px;padding-left:16px}.power-label{display:none}.power-state{width:80px}}@media (orientation: landscape) and (max-height: 520px){.dock{left:calc(16px + env(safe-area-inset-left));translate:none;width:320px;gap:8px}.power{gap:8px}.power-label{display:none}.power-state{width:80px}}.profile-face{flex:none;width:32px;height:32px;border-radius:50%;background:var(--primary-tint);overflow:hidden;line-height:0}.profile-face svg{width:100%;height:100%;display:block;transform:scale(1.1)}@media (orientation: landscape) and (max-height: 520px){.avatar-card{width:min(560px,100%)}.avatars{grid-template-columns:repeat(6,1fr);gap:8px}.avatar svg{width:48px;height:48px}}.footer{flex:none;width:100%;display:flex;justify-content:center;padding:16px 16px calc(24px + env(safe-area-inset-bottom))}.footer p{margin:0;text-align:center;font:400 var(--t-label)/1.4 var(--font);color:var(--text-2)}.dotted{color:var(--ink);font-weight:700;text-decoration:none;padding-bottom:5px;background:radial-gradient(circle,currentColor 0 1.25px,transparent 1.75px) 0 100% / 6px 4px;background-repeat:round no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}a.dotted{cursor:pointer}a.dotted:hover{color:var(--primary-dark)}:root{--mp-text: #444;--mp-line: #d9d9d9;--mp-you: #d23b3b;--mp-them: #3f78be}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}:is(.btn,.chip,.level,.avatar,.mp-link,.mp-field,.code-input,.mp-name-btn):focus,:is(.btn,.chip,.level,.avatar,.mp-link,.mp-field,.code-input,.mp-name-btn):focus-visible{outline:none}.mp-entry{margin-top:0}.mp-divider{display:flex;align-items:center;gap:16px;margin:24px 0 16px;font:400 var(--t-caption)/1 var(--font);color:var(--mp-text)}.mp-divider:before,.mp-divider:after{content:"";flex:1;height:2px;border-radius:2px;background:var(--mp-line)}.net-status{display:flex;justify-content:center;align-items:center;gap:4px;margin:16px 0 0;font:400 var(--t-caption)/1 var(--font);color:var(--text-2)}.net-status[hidden]{display:none}.net-status b{font-weight:700;color:var(--ink)}.net-status[data-level=good] b{color:var(--success-ink)}.net-status[data-level=weak] b,.net-status[data-level=offline] b{color:var(--danger-ink)}.mp-name{margin:8px 0 0;display:flex;justify-content:center;align-items:center;gap:8px;font:400 var(--t-label)/1 var(--font);color:var(--mp-text)}.mp-name-btn{appearance:none;background:none;border:0;min-height:48px;padding:0 8px;display:inline-flex;align-items:center;gap:8px;max-width:224px;font:700 var(--t-body)/1 var(--font);color:var(--ink);cursor:pointer;border-radius:12px}.mp-name-btn #btn-name-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:2px dashed var(--ink);padding-bottom:2px}.mp-name-btn .icon{transition:transform .12s ease}.mp-name-btn:hover .icon{transform:rotate(-12deg)}.mp-entry+.info-badge{margin-top:16px}#mp-root,#mp-name-dialog{--mp-pad: 16px}#mp-root{position:fixed;inset:0;z-index:8;display:flex;padding:var(--mp-pad);overflow:auto;background:#ffffffd9}#mp-root[hidden]{display:none}#mp-root.fresh{animation:overlay-in .25s ease both}#mp-root[data-screen=countdown]{background:none;pointer-events:none}#mp-root>.card,#mp-root>.mp-count{margin:auto}.mp-card .mp-h,.card h1.mp-h{font:700 var(--t-heading)/1.15 var(--font);letter-spacing:0;margin:0 0 8px;text-wrap:balance}.mp-card .sub{color:var(--mp-text);margin:0 0 16px}.mp-card .hint,.mp-eyebrow{font:400 var(--t-caption)/1.4 var(--font);color:var(--mp-text)}.mp-eyebrow{margin:0 0 8px;font-size:var(--t-label);font-weight:700}.mp-card.still{animation:none}.mp-warn{margin:16px 0 0;min-height:0;font:700 var(--t-body)/1.2 var(--font);color:var(--danger)}.mp-warn:empty{display:none}.mp-actions{display:flex;flex-direction:column;gap:16px;margin-top:16px}.btn:disabled{opacity:.45;cursor:default;transform:none;box-shadow:0 4px 0 var(--ink)}.code-card,.mp-code{display:flex;justify-content:center;gap:8px;margin:8px 0}.code-tile,.code-input{width:64px;height:80px;display:grid;place-items:center;border:2.5px solid var(--ink);border-radius:16px;background:#fff;color:var(--ink);box-shadow:0 4px 0 var(--ink);font:700 var(--t-title)/1 var(--font);text-transform:uppercase;padding:0}.code-tile{animation:tile-pop .45s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--i, 0) * 70ms)}.code-tile:nth-child(odd){rotate:-2deg}.code-tile:nth-child(2n){rotate:1.5deg}.code-card.small .code-tile{width:48px;height:56px;font-size:var(--t-heading);border-radius:12px}.code-input{text-align:center;caret-color:var(--primary);transition:transform .08s ease,box-shadow .08s ease}.code-input:focus{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink);outline:none}.mp-expiry{margin:8px 0;font:700 var(--t-label)/1.2 var(--font);color:var(--mp-text)}.mp-expiry.urgent{font-size:var(--t-body);color:var(--danger);animation:urgent-pulse 1s ease-in-out infinite}.mp-spacer{height:8px}.mp-link-field{width:100%;margin:8px 0 0}.mp-label{display:block;text-align:left;margin:16px 0 8px;font:700 var(--t-label)/1 var(--font);color:var(--mp-text)}.mp-field{width:100%;height:var(--btn-h);border:2.5px solid var(--ink);border-radius:999px;padding:0 24px;background:#fff;color:var(--ink);text-align:center;font:700 var(--t-body)/1.2 var(--font);box-shadow:0 4px 0 var(--ink);transition:transform .08s ease,box-shadow .08s ease}.mp-field:focus{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink);outline:none}.mp-field[aria-invalid=true]{border-color:var(--danger)}.info-badge.mp-joined{margin:8px 0;font-size:var(--t-label);font-weight:700;background:var(--success-tint);color:var(--success-ink);border-color:var(--success);animation:tile-pop .4s cubic-bezier(.34,1.56,.64,1) both}.info-badge.mp-joined .mini-face{margin:-4px 0 -4px -8px}.info-badge.mp-joined .icon{color:var(--success)}.mini-face{flex:none;display:inline-block;width:32px;height:32px;border:2px solid var(--ink);border-radius:50%;background:var(--primary-tint);overflow:hidden;line-height:0}.mini-face svg{width:100%;height:100%;display:block}.mini-face.unknown{display:inline-grid;place-items:center;border-style:dashed;background:#fff;color:var(--muted);font:700 var(--t-label)/1 var(--font)}.mp-score .mini-face{width:48px;height:48px}.mp-score .you .mini-face{background:var(--danger-tint)}.card h1.win{color:var(--success-ink)}.mp-duo{display:flex;align-items:flex-start;justify-content:center;gap:8px;margin:8px 0 16px}.mp-duo .who{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;max-width:128px}.mp-duo .who-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 var(--t-label)/1 var(--font)}.duo-face{position:relative;width:80px;height:80px;border:3px solid var(--ink);border-radius:50%;background:var(--primary-tint);line-height:0}.duo-face svg{width:100%;height:100%;display:block;border-radius:50%}.who.you .duo-face{background:var(--danger-tint)}.duo-face.unknown{display:grid;place-items:center;border-style:dashed;background:#fff;color:var(--muted);font:700 var(--t-heading)/1 var(--font)}.duo-face .tick{position:absolute;right:-8px;bottom:-8px;width:32px;height:32px;display:grid;place-items:center;border:2.5px solid var(--ink);border-radius:50%;background:var(--success);color:#fff}.duo-face .tick .icon{--icon: 16px}.duo-link{align-self:flex-start;margin-top:40px;width:40px;height:4px;background:radial-gradient(circle,var(--ink) 0 1.5px,transparent 2px) 0 50% / 7px 4px repeat-x}.mp-status{display:inline-flex;align-items:center;gap:8px;margin:0 0 8px;padding:4px 16px;border:2px solid var(--success);border-radius:999px;background:var(--success-tint);color:var(--success-ink);font:700 var(--t-label)/1.2 var(--font)}.mp-status .icon{--icon: 20px;color:var(--success)}.mp-wait{margin:8px 0;color:var(--mp-text);font:400 var(--t-body)/1.4 var(--font)}.mp-room{display:inline-flex;align-items:center;gap:8px;margin:8px 0 0;font:400 var(--t-caption)/1 var(--font);color:var(--mp-text)}.mp-room b{padding:4px 16px;border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font:700 var(--t-label)/1 var(--font);letter-spacing:2px}.mp-dots{display:inline-flex;gap:4px;margin-left:8px;vertical-align:middle}.mp-dots i{width:8px;height:8px;border-radius:50%;background:var(--ink);animation:dot-bounce 1.1s ease-in-out infinite}.mp-dots i:nth-child(2){animation-delay:.15s}.mp-dots i:nth-child(3){animation-delay:.3s}.mp-ball{--hop: 32px;position:relative;height:64px;margin:0 auto 8px;width:64px}.mp-ball span{position:absolute;left:calc(50% - 12px);bottom:8px;width:24px;height:24px;border-radius:50%;border:2.5px solid var(--ink);background:#fff;transform-origin:50% 100%;will-change:transform;animation:ball-bounce .9s linear infinite}.mp-ball:after{content:"";position:absolute;left:16px;bottom:4px;width:32px;height:8px;border-radius:50%;background:var(--mp-line);will-change:transform,opacity;animation:ball-shadow .9s linear infinite}.mp-glyph{display:block;margin:0 auto 8px;color:var(--ink)}.mp-score{display:flex;justify-content:center;align-items:flex-start;gap:16px;margin:8px 0;font:700 var(--t-heading)/1 var(--font)}.mp-score .side{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;max-width:128px}.mp-score{--mp-num: var(--t-title)}.mp-score .num{font-size:var(--mp-num);line-height:1}.mp-score .you .num{color:var(--mp-you)}.mp-score .them .num{color:var(--mp-them)}.mp-score .who{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 var(--t-label)/1 var(--font);color:var(--mp-text)}.mp-score .dot{display:flex;align-items:center;height:var(--mp-num);color:var(--mp-text);font-size:var(--t-heading)}.mp-count{position:relative;width:144px;height:144px;display:grid;place-items:center;border:3px solid var(--ink);border-radius:50%;background:#fff;box-shadow:4px 4px 0 var(--ink)}.mp-count svg{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);transform:rotate(-90deg)}.mp-count circle{fill:none;stroke:var(--primary);stroke-width:7;stroke-linecap:round;stroke-dasharray:377;stroke-dashoffset:0}.mp-count.tick circle{animation:ring-drain 1s linear forwards}.mp-count h1{margin:0;font:700 var(--t-title)/1 var(--font)}.mp-count.tick h1{animation:count-pop .5s cubic-bezier(.34,1.56,.64,1) both}.chip-conn{gap:0;padding:0 16px;box-shadow:none}.chip.chip-conn:is(:active,.is-pressed):not(:disabled){transform:none;box-shadow:none}.chip-conn .bars .bar{fill:var(--success);stroke:var(--ink);stroke-width:1.6}.bars[data-bars="2"] .b3,.bars[data-bars="1"] .b3,.bars[data-bars="1"] .b2{fill:#fff}.chip-conn.weak .bars .bar,.chip-conn .bars[data-bars="1"] .b1{fill:var(--danger)}.chip-conn.weak .bars[data-bars="2"] .b3,.chip-conn.weak .bars[data-bars="1"] .b3,.chip-conn.weak .bars[data-bars="1"] .b2{fill:#fff}#conn-ping{display:inline-block;max-width:0;margin-left:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .2s ease,opacity .2s ease,margin-left .2s ease}.chip-conn:hover #conn-ping,.chip-conn:focus-visible #conn-ping,.chip-conn[aria-expanded=true] #conn-ping{max-width:80px;margin-left:8px;opacity:1}#emotes{position:absolute;right:0;bottom:calc(100% + 16px);display:flex;flex-direction:column;align-items:stretch;gap:8px;width:128px;animation:emotes-in .22s cubic-bezier(.34,1.56,.64,1) both;transform-origin:bottom right}#emotes[hidden]{display:none}#emotes .chip{width:100%;padding:0 16px}#btn-chat[aria-expanded=true]{background:var(--primary-tint)}@keyframes emotes-in{0%{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:none}}.toast{position:fixed;left:50%;translate:-50% 0;top:calc(80px + env(safe-area-inset-top));z-index:12;width:max-content;max-width:calc(100vw - 32px);height:var(--btn-h);display:block;padding:0 24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:2.5px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);box-shadow:none;font:700 var(--t-label) / calc(var(--btn-h) - 5px) var(--font);text-align:center;pointer-events:none;animation:toast-in .3s cubic-bezier(.34,1.56,.64,1) both}.toast[hidden]{display:none}.toast.out{animation:toast-out .3s ease forwards}.toast.warn:before,.toast.success:before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;vertical-align:middle;border-radius:50%;background:var(--danger)}.toast.warn{background:var(--danger-tint);border-color:var(--danger-ink);color:var(--danger-ink)}.toast.success{background:var(--success-tint);border-color:var(--success-ink);color:var(--success-ink)}.toast.success:before{background:var(--success)}@media (min-width: 640px){.toast{top:calc(16px + env(safe-area-inset-top))}.toast[hidden]{display:none}}@media (max-width: 420px){.code-tile,.code-input{width:56px;height:72px;border-radius:16px}}@media (max-width: 340px){.code-tile,.code-input{width:48px;height:64px}}@media (orientation: landscape) and (max-height: 520px){.mp-card{padding:16px 24px}.mp-card h1,.mp-card .mp-h{font-size:var(--t-heading)}.mp-actions{margin-top:16px}.code-tile,.code-input{height:64px;width:56px;font-size:var(--t-heading)}.mp-score{--mp-num: var(--t-heading)}.mp-split{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:24px;align-items:center;width:min(660px,100%)}.mp-split>.mp-actions{grid-column:2;grid-row:1 / span 4;margin-top:0}.mp-split>:not(.mp-actions){grid-column:1}.mp-ball{--hop: 16px;height:48px}}@keyframes tile-pop{0%{opacity:0;scale:.6;translate:0 8px}to{opacity:1;scale:1;translate:0 0}}@keyframes ring-drain{0%{stroke-dashoffset:0}to{stroke-dashoffset:377}}@keyframes count-pop{0%{scale:.4;opacity:0}55%{scale:1.15;opacity:1}to{scale:1;opacity:1}}@keyframes dot-bounce{0%,60%,to{translate:0 0;opacity:.45}30%{translate:0 -8px;opacity:1}}@keyframes ball-bounce{0%,to{transform:translateZ(0) scale(1.18,.82);animation-timing-function:ease-out}8%{transform:translateZ(0) scale(1);animation-timing-function:cubic-bezier(.33,.67,.67,1)}50%{transform:translate3d(0,calc(-1 * var(--hop)),0) scale(1);animation-timing-function:cubic-bezier(.33,0,.67,.33)}92%{transform:translateZ(0) scale(1);animation-timing-function:ease-in}}@keyframes ball-shadow{0%,to{transform:scale(1.08);opacity:1;animation-timing-function:ease-out}8%{transform:scale(1);opacity:1;animation-timing-function:cubic-bezier(.33,.67,.67,1)}50%{transform:scale(.55);opacity:.45;animation-timing-function:cubic-bezier(.33,0,.67,.33)}92%{transform:scale(1);opacity:1;animation-timing-function:ease-in}}@keyframes urgent-pulse{0%,to{scale:1}50%{scale:1.06}}@keyframes toast-in{0%{opacity:0;translate:-50% -12px}to{opacity:1;translate:-50% 0}}@keyframes toast-out{to{opacity:0;translate:-50% -8px}}@media (prefers-reduced-motion: reduce){#mp-root.fresh,.code-tile,.info-badge.mp-joined,.mp-count.tick circle,.mp-count.tick h1,.mp-expiry.urgent,.toast,.toast.out,#emotes{animation:none}.mp-count.tick circle{stroke-dashoffset:0}.toast.out{opacity:0}#conn-ping,.code-input,.mp-field,.mp-name-btn svg{transition:none}}.vs-layer{position:fixed;inset:0;z-index:20}.vs-layer[hidden]{display:none}.vs{position:fixed;inset:0;overflow:hidden;background:var(--primary);color:#fff;font-family:var(--font);z-index:9}.vs-layer .vs{z-index:auto}.vs-bg{position:absolute;inset:0}.vs-bg.blue{background:linear-gradient(135deg,#b7d9ff 0%,#2a8dff 28%,var(--primary) 100%);clip-path:polygon(0 0,100% 0,0 100%);animation:vs-from-tl .45s cubic-bezier(.22,1,.36,1) both}.vs-bg.red{background:linear-gradient(135deg,var(--danger) 0%,#ff4a4a 60%,#ff8a8a 100%);clip-path:polygon(100% 0,100% 100%,0 100%);animation:vs-from-br .45s cubic-bezier(.22,1,.36,1) both}.vs-side{position:absolute;display:flex;flex-direction:column;align-items:center;gap:16px;max-width:44vw;translate:-50% -50%}.vs-side.them{left:28%;top:28%;animation:vs-slide-l .55s .12s cubic-bezier(.34,1.3,.64,1) both}.vs-side.you{left:72%;top:72%;animation:vs-slide-r .55s .12s cubic-bezier(.34,1.3,.64,1) both}.vs-face{width:clamp(96px,24vmin,192px);height:clamp(96px,24vmin,192px);border-radius:50%;border:4px solid var(--ink);background:var(--primary-tint);box-shadow:0 6px 0 var(--ink);overflow:hidden;line-height:0}.vs-face svg{width:100%;height:100%;display:block;transform:scale(1.1)}.vs-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 var(--t-heading) / 1.1 var(--font);text-transform:uppercase;letter-spacing:.02em;text-shadow:0 3px 0 rgba(17,17,17,.35)}.vs-mark{position:absolute;left:50%;top:50%;translate:-50% -50%;font:700 clamp(88px,26vmin,200px) / 1 var(--font);color:#fff;-webkit-text-stroke:0;paint-order:stroke fill;text-shadow:0 6px 0 rgba(17,17,17,.4);animation:vs-pop .5s .3s cubic-bezier(.34,1.9,.64,1) both}.vs-count{position:absolute;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));translate:-50% 0;width:88px;height:88px;pointer-events:none}.vs-count h1{font-size:var(--t-heading);color:var(--ink)}@keyframes vs-from-tl{0%{translate:-30% -30%;opacity:0}to{translate:0 0;opacity:1}}@keyframes vs-from-br{0%{translate:30% 30%;opacity:0}to{translate:0 0;opacity:1}}@keyframes vs-slide-l{0%{opacity:0;transform:translate(-80px)}to{opacity:1;transform:none}}@keyframes vs-slide-r{0%{opacity:0;transform:translate(80px)}to{opacity:1;transform:none}}@keyframes vs-pop{0%{opacity:0;transform:scale(.3) rotate(-8deg)}to{opacity:1;transform:none}}@media (prefers-reduced-motion: reduce){.vs-bg,.vs-side,.vs-mark{animation:none}}