.pp{border:0;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0;margin:0;padding:0;display:grid}.pp-legend{color:var(--pp-ink-2,#a9adbd);margin-bottom:4px;padding:0;font-size:13px;font-weight:700}.pp-pick{align-items:center;gap:16px;min-width:0;display:flex}.pp-pick-img{object-fit:contain;filter:drop-shadow(0 8px 18px #00000080);flex:none;width:120px;height:120px}.pp-pick-text{flex-direction:column;gap:4px;min-width:0;display:flex}.pp-pick-name{font:800 clamp(20px, 4vw, 28px)/1.1 var(--font-display,"Unbounded"), system-ui, sans-serif;color:var(--pp-ink,#f4f1ea)}.pp-pick-tagline{color:var(--pp-ink-2,#a9adbd);font-size:14px;line-height:1.4}.pp-grid{grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:8px;display:grid}.pp-face{aspect-ratio:1;cursor:pointer;background:radial-gradient(circle at 50% 35%,#ffffff1a,#ffffff05 70%);border-radius:12px;min-height:44px;transition:box-shadow .16s ease-out,background-color .16s ease-out;display:block;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff14}.pp-face img{object-fit:contain;object-position:bottom;width:92%;height:96%;transition:transform .18s ease-out;position:absolute;inset:4% 4% 0}.pp-radio{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.pp-face:hover{background-color:#f7931a1a}.pp-face:hover img{transform:scale(1.06)}.pp-face:has(:checked){background-color:#f7931a2e;box-shadow:inset 0 0 0 2px #f7931a,0 0 18px #f7931a59}.pp-face:has(:checked) img{transform:scale(1.1)}.pp-face:has(:focus-visible){outline-offset:2px;outline:2px solid #f7931a}.pp-lobby{width:100%;display:block}.pp-more{position:relative}.pp-sum{cursor:pointer;border-radius:8px;align-items:center;gap:16px;min-height:44px;padding:0 0 12px;list-style:none;display:flex}.pp-sum::-webkit-details-marker{display:none}.pp-sum:focus-visible{outline:2px solid var(--color-btc-hi,#f9b25f);outline-offset:4px}.pp-lobby .pp-pick{flex:auto;gap:12px}.pp-lobby .pp-pick-img{align-self:flex-end;width:72px;height:72px;margin-top:-28px}.pp-lobby .pp-pick-text{gap:2px;padding-top:8px}.pp-lobby .pp-pick-label{color:var(--color-ink-3,#8b8b90);font-size:12px}.pp-lobby .pp-pick-name{font-size:18px}.pp-lobby .pp-pick-tagline{-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:13px;display:-webkit-box;overflow:hidden}.pp-more-btn{min-height:44px;color:var(--color-ink,#fff);background:var(--color-well,#1a1a1e);box-shadow:inset 0 0 0 1px var(--color-line,#2a2a30);border-radius:6px;flex:none;align-items:center;gap:8px;padding:0 12px;font-size:13px;font-weight:700;transition:background-color .16s ease-out;display:inline-flex}.pp-more-short{display:none}.pp-more-btn svg{transition:transform .16s ease-out}.pp-more[open] .pp-more-btn svg{transform:rotate(180deg)}.pp-sum:hover .pp-more-btn,.pp-more[open] .pp-more-btn{background:var(--color-raised,#1e1e24)}.pp-pop{z-index:40;background:var(--color-card,#121215);width:min(22rem,100vw - 2rem);box-shadow:inset 0 0 0 1px var(--color-line,#2a2a30), 0 16px 40px #0009;border-radius:12px;padding:12px;position:absolute;top:calc(100% - 4px);right:0}.pp-pop .pp-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.pp-more[open] .pp-pop{animation:.16s ease-out pp-pop-in}@keyframes pp-pop-in{0%{opacity:0;transform:translateY(-4px)}}@media (width<640px){.pp-sum{gap:12px}.pp-lobby .pp-pick-img{width:56px;height:56px;margin-top:-16px}.pp-lobby .pp-pick-name{font-size:16px}.pp-lobby .pp-pick-tagline{-webkit-line-clamp:1}.pp-more-long{display:none}.pp-more-short{display:inline}}@media (width<400px){.pp-more-btn{justify-content:center;width:44px;padding:0}.pp-more-short{display:none}}.pp-compact{text-align:left;gap:8px;width:100%}.pp-compact .pp-legend{margin-bottom:0}.pp-compact .pp-pick{gap:10px}.pp-compact .pp-pick-img{width:64px;height:64px}.pp-compact .pp-pick-name{font-size:17px}.pp-compact .pp-pick-tagline{font-size:13px}.pp-compact .pp-grid{max-height:var(--pp-max,212px);overscroll-behavior:contain;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:6px;padding:2px;overflow-y:auto}@media (prefers-reduced-motion:reduce){.pp-face,.pp-face img,.pp-more-btn,.pp-more-btn svg{transition:none}.pp-more[open] .pp-pop{animation:none}}:root{--pong-bg:#04060d;--pong-ink:#f4f1ea;--pong-ink-2:#a9adbd;--pong-ink-3:#7c8296;--pong-btc:#f7931a;--pong-ice:#00b4cf;--pong-bot:#a78bfa;--pong-card:#0a0e1ce6;--pong-line:#ffffff14;--hud-h:56px;--font-display:var(--font-face-display,"Unbounded"), "Arial Black", system-ui, sans-serif;--font-mono:var(--font-face-mono,"JetBrains Mono"), ui-monospace, Menlo, monospace;--ease-out:cubic-bezier(.2, .8, .2, 1);--ease-pop:cubic-bezier(.2, 1.5, .4, 1)}[hidden]{display:none!important}*{box-sizing:border-box}html,body{background:var(--pong-bg);height:100%;color:var(--pong-ink);margin:0;overflow:hidden}body{-webkit-user-select:none;user-select:none;touch-action:none;overscroll-behavior:none;font:500 14px/1.4 system-ui,sans-serif}button,a.btn,select{font:inherit}.arena3d{z-index:0;display:block;position:fixed;top:0;left:0}body.gl #arena{display:none}.hud{z-index:2;height:var(--hud-h);padding:0 12px;padding-top:env(safe-area-inset-top);background:linear-gradient(#04060deb,#04060d99);grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;display:grid;position:fixed;inset:0 0 auto}.hud .side{align-items:center;gap:8px;min-width:0;display:flex}.hud .side.bot{justify-content:flex-end}.hud .face{object-fit:contain;object-position:center bottom;width:44px;height:44px;box-shadow:inset 0 0 0 2px var(--ring,var(--pong-btc)), 0 0 14px color-mix(in srgb, var(--ring,var(--pong-btc)) 45%, transparent);background:radial-gradient(circle at 50% 30%,#ffffff24,#ffffff08 70%);border-radius:12px;flex:none}.hud .who{flex-direction:column;min-width:0;line-height:1.2;display:flex}.hud .side.bot .who{text-align:right;align-items:flex-end}.hud .name{color:var(--pong-ink);white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:13px;font-weight:700;overflow:hidden}.hud .fig{color:var(--pong-ink-2);white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:12px;overflow:hidden}.hud .score{font:800 28px/1 var(--font-display);text-align:center;font-variant-numeric:tabular-nums;min-width:2ch}.hud .me .score{color:var(--side-0,var(--pong-btc));text-shadow:0 0 14px color-mix(in srgb, var(--side-0,var(--pong-btc)) 60%, transparent)}.hud .bot .score{color:var(--side-1,var(--pong-bot));text-shadow:0 0 14px color-mix(in srgb, var(--side-1,var(--pong-bot)) 60%, transparent)}.hud .score.pop{animation:score-pop .42s var(--ease-pop)}@keyframes score-pop{0%{transform:scale(1)}35%{filter:brightness(1.6);transform:scale(1.55)}to{transform:scale(1)}}.hud .mid{align-items:center;gap:8px;display:flex}.hud .mid-text{flex-direction:column;align-items:center;gap:4px;display:flex}.hud .title{font:800 12px/1 var(--font-display);letter-spacing:.08em;white-space:nowrap}.hud .title b{color:var(--pong-btc)}.hud .rally{font:500 12px/1 var(--font-mono);color:var(--pong-ink-2);white-space:nowrap}.hud .leave{white-space:nowrap;min-width:44px;height:44px;color:var(--pong-ink-2);cursor:pointer;background:#ffffff0f;border:0;border-radius:4px;flex:none;justify-content:center;align-items:center;gap:8px;padding:0 12px;font-size:14px;text-decoration:none;display:inline-flex}.hud .leave:hover,.hud .leave:focus-visible{color:var(--pong-ink);background:#ffffff1f}.hud .leave-t{display:none}@media (width>=64rem){.hud .leave-t{display:inline}}.hud .leave:focus-visible,.btn:focus-visible,.settings :focus-visible{outline:2px solid var(--pong-btc);outline-offset:2px}#stage{left:0;right:0;top:var(--hud-h);z-index:1;place-items:center;display:grid;position:fixed}#field{background:#070b18;border-radius:10px;position:relative;overflow:hidden;box-shadow:0 0 0 1px #f7931a59,0 0 40px #f7931a1f;container-type:size}body.gl #field{box-shadow:none;background:0 0;border-radius:0}#field canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.overlay{background:#03050c99;place-items:center;padding:16px;display:grid;position:absolute;inset:0}.card{background:var(--pong-card);max-width:min(420px,100%);max-height:100%;box-shadow:0 0 0 1px var(--pong-line), 0 24px 60px #00000080;text-align:center;touch-action:pan-y;border-radius:16px;flex-direction:column;align-items:center;gap:12px;padding:24px;display:flex;overflow:auto}.card.wide{max-width:min(560px,100%)}.card h2{font:800 clamp(20px, 4.5vw, 28px)/1.15 var(--font-display);margin:0}.card p{color:var(--pong-ink-2);margin:0}.card .big{font:800 48px/1 var(--font-display);font-variant-numeric:tabular-nums}.card .actions{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:4px;display:flex}.btn{cursor:pointer;min-height:44px;color:var(--pong-ink);background:#ffffff14;border:0;border-radius:10px;justify-content:center;align-items:center;padding:0 20px;font-weight:700;text-decoration:none;display:inline-flex}.btn:hover{background:#ffffff24}.btn.primary{background:var(--pong-btc);color:#140b00;box-shadow:0 0 24px #f7931a59}.btn.primary:hover{background:#ffa53a}.btn:disabled{cursor:default;opacity:.7}.card .pp{--pp-ink:var(--pong-ink);--pp-ink-2:var(--pong-ink-2)}.card .pp-compact .pp-grid{grid-template-columns:repeat(var(--pp-cols,5), minmax(0, 1fr))}@container (width>=600px){.card .pp-compact{--pp-cols:9}}@container (height>=600px){.card .pp-compact{--pp-max:400px}}@container (height<=700px){.card{gap:10px;padding:16px}.card.wide>p:not([class]){display:none}}.card .pp-grid{touch-action:pan-y}.card.end{padding-top:16px}.end-pose{aspect-ratio:1;object-fit:contain;width:clamp(120px,34cqmin,260px);height:auto;filter:drop-shadow(0 0 28px color-mix(in srgb, var(--tone,var(--pong-btc)) 55%, transparent));margin:-8px 0 -16px}.end-ticker{font:700 14px/1.3 var(--font-display);color:var(--pong-ice)!important}@container (height<=460px){.overlay{padding:8px}.card{gap:8px;padding:12px 16px}.card h2{font-size:18px}.card .big{font-size:34px}.card .pp-compact{--pp-max:100px;--pp-cols:9}.card .pp-compact .pp-pick-img{width:44px;height:44px}.card .pp-compact .pp-pick-tagline,.card .hint-desktop,.card .hint-touch,.card.wide>p{display:none!important}.end-pose{width:clamp(80px,30cqh,140px);margin:-4px 0 -8px}}.banner{--ev:var(--pong-ice);text-align:center;pointer-events:none;background:radial-gradient(ellipse at center, color-mix(in srgb, var(--ev) 26%, transparent), transparent 62%);flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:16px;display:flex;position:absolute;inset:0}.banner[data-event=halving]{--ev:#67e8f9}.banner[data-event=brrr]{--ev:#22c55e}.banner[data-event=pizza]{--ev:#fb923c}.banner[data-event=difficulty],.banner[data-event=tax]{--ev:#ef4444}.banner[data-event=controls]{--ev:#f97316}.banner[data-event=few]{--ev:#a78bfa}.banner[data-event=pow]{--ev:#facc15}.banner[data-event=arbeitsamt]{--ev:#fb7185}.banner img{aspect-ratio:1;object-fit:contain;width:clamp(88px,30cqmin,200px);height:auto;filter:drop-shadow(0 0 30px color-mix(in srgb, var(--ev) 70%, transparent))}.banner small{color:var(--ev);font-size:13px;font-weight:700;display:block}.banner b{font:800 clamp(26px, 9cqmin, 56px)/1.05 var(--font-display);text-shadow:0 0 24px color-mix(in srgb, var(--ev) 80%, transparent), 0 2px 0 #0009;display:block}.banner span{max-width:36ch;color:var(--pong-ink);text-shadow:0 1px 2px #000c;font-size:15px;display:block}.banner.in img{animation:event-icon .6s var(--ease-pop) both}.banner.in small,.banner.in b,.banner.in span{animation:rise .4s var(--ease-out) .2s both}.banner.out{animation:.4s ease-in both takeover-out}@keyframes takeover-out{to{opacity:0;transform:scale(.96)}}@keyframes event-icon{0%{opacity:0;transform:scale(.3)rotate(-24deg)}60%{opacity:1;transform:scale(1.12)rotate(4deg)}to{transform:scale(1)rotate(0)}}@keyframes rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.event-pin{--ev:var(--pong-ice);width:max-content;max-width:70cqw;box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--ev) 70%, transparent);pointer-events:none;background:#04060d8c;border-radius:10px;align-items:center;gap:8px;padding:4px 12px 4px 4px;display:flex;position:absolute;top:6px;left:50%;transform:translate(-50%)}.event-pin[data-event=halving]{--ev:#67e8f9}.event-pin[data-event=brrr]{--ev:#22c55e}.event-pin[data-event=pizza]{--ev:#fb923c}.event-pin[data-event=difficulty],.event-pin[data-event=tax]{--ev:#ef4444}.event-pin[data-event=controls]{--ev:#f97316}.event-pin[data-event=few]{--ev:#a78bfa}.event-pin[data-event=pow]{--ev:#facc15}.event-pin[data-event=arbeitsamt]{--ev:#fb7185}.event-pin img{object-fit:contain;width:32px;height:32px;filter:drop-shadow(0 0 8px color-mix(in srgb, var(--ev) 70%, transparent));flex:none}.event-pin-text{flex-direction:column;min-width:0;line-height:1.25;display:flex}.event-pin b{font:800 13px/1.2 var(--font-display);color:var(--ev)}.event-pin-text span{color:var(--pong-ink);text-shadow:0 1px 2px #000c;font-size:12px}.event-pin.in{animation:pin-in .4s var(--ease-out) both}@keyframes pin-in{0%{opacity:0;translate:0 -8px}to{opacity:1;translate:none}}body[data-portrait="1"] .event-pin{transform-origin:0 0;max-width:70cqh;top:50%;left:6px;transform:rotate(-90deg)translate(-50%)}body[data-portrait="1"] .event-pin.in{animation-name:pin-in-upright}@keyframes pin-in-upright{0%{opacity:0;translate:-8px}to{opacity:1;translate:none}}.ticker{max-width:calc(100% - 32px);box-shadow:inset 3px 0 0 var(--pong-ice);font:700 14px/1.3 var(--font-display);color:var(--pong-ice);text-align:center;pointer-events:none;background:#04060dc7;border-radius:10px;padding:8px 16px;position:absolute;top:10%;left:50%;transform:translate(-50%)}.ticker.in{animation:ticker 2.6s var(--ease-out) both}@keyframes ticker{0%{opacity:0;transform:translate(-50%,-8px)}10%,85%{opacity:1;transform:translate(-50%)}to{opacity:0}}.queue{max-width:calc(100% - 24px);color:var(--pong-ink);text-align:center;pointer-events:none;background:#04060db8;border:3px solid #e11d48;border-radius:10px;flex-direction:column;align-items:center;gap:4px;padding:10px 16px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.queue b{font:800 clamp(18px, 6cqmin, 34px)/1 var(--font-display);color:#fb7185;letter-spacing:.08em;text-transform:uppercase}.queue span{white-space:nowrap;font-size:clamp(13px,3.4cqmin,18px);font-weight:700}.queue small{color:#fda4af;font-size:13px}.queue.in{animation:stamp .42s var(--ease-pop) both}.queue[data-at=top]{top:25%}.queue[data-at=bottom]{top:75%}@keyframes stamp{0%{opacity:0;transform:translate(-50%,-50%)scale(2.2)rotate(-14deg)}55%{opacity:1;transform:translate(-50%,-50%)scale(.92)rotate(-6deg)}to{transform:translate(-50%,-50%)scale(1)rotate(-6deg)}}.toast{background:var(--pong-card);white-space:nowrap;pointer-events:none;border-radius:10px;padding:8px 12px;font-weight:700;position:absolute;bottom:12%;left:50%;transform:translate(-50%)}.banter{max-width:min(320px,100% - 24px);box-shadow:inset -3px 0 0 var(--side-1,var(--pong-bot));pointer-events:none;text-align:left;background:#04060dd1;border-radius:10px 10px 2px;flex-direction:column;gap:2px;padding:8px 12px;display:flex;position:absolute;bottom:12px;right:12px}.banter b{font:700 12px/1.2 var(--font-display);color:var(--side-1,var(--pong-bot))}.banter span{color:var(--pong-ink);overflow-wrap:anywhere;font-size:14px;line-height:1.35}.banter.in{animation:banter-in .22s var(--ease-out) both}@keyframes banter-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@container (aspect-ratio<=1){.banter{border-radius:10px 2px 10px 10px;top:12px;bottom:auto}}@media (prefers-reduced-motion:reduce){.banter.in{animation:none}}.cheer{--tone:var(--pong-btc);cursor:pointer;align-items:flex-end;gap:0;height:min(80%,440px);display:flex;position:absolute;bottom:0;left:0}.cheer[data-side="1"]{flex-direction:row-reverse;left:auto;right:0}.cheer img{aspect-ratio:1;object-fit:contain;width:auto;height:100%;filter:drop-shadow(0 0 26px color-mix(in srgb, var(--tone) 60%, transparent)) drop-shadow(0 10px 18px #0009)}.cheer-text{flex-direction:column;gap:0;margin-left:-8%;padding-bottom:12%;display:flex}.cheer[data-side="1"] .cheer-text{text-align:right;align-items:flex-end;margin:0 -8% 0 0}.cheer-text b{font:800 clamp(14px, 3.4cqmin, 22px)/1.1 var(--font-display);text-shadow:0 2px 6px #000000e6;white-space:nowrap}.cheer-text span{font:800 clamp(36px, 12cqmin, 80px)/1 var(--font-display);color:var(--tone);text-shadow:0 0 24px color-mix(in srgb, var(--tone) 70%, transparent), 0 3px 0 #000000b3}.cheer.in{animation:cheer-l 2.2s var(--ease-out) both}.cheer.in[data-side="1"]{animation-name:cheer-r}@keyframes cheer-l{0%{opacity:0;transform:translate(-35%)}12%{opacity:1;transform:none}82%{opacity:1}to{opacity:0;transform:translate(-6%)}}@keyframes cheer-r{0%{opacity:0;transform:translate(35%)}12%{opacity:1;transform:none}82%{opacity:1}to{opacity:0;transform:translate(6%)}}body[data-portrait="1"] .cheer{height:min(40%,360px)}body[data-portrait="1"] .cheer[data-side="1"]{align-items:flex-start;top:0;bottom:auto}body[data-portrait="1"] .cheer[data-side="1"] .cheer-text{padding:12% 0 0}body[data-portrait="1"] .cheer.in{animation-name:cheer-b}body[data-portrait="1"] .cheer.in[data-side="1"]{animation-name:cheer-t}@keyframes cheer-b{0%{opacity:0;transform:translateY(35%)}12%{opacity:1;transform:none}82%{opacity:1}to{opacity:0}}@keyframes cheer-t{0%{opacity:0;transform:translateY(-35%)}12%{opacity:1;transform:none}82%{opacity:1}to{opacity:0}}.settings{z-index:3;top:calc(var(--hud-h) + 8px);background:var(--pong-card);width:min(300px,100vw - 24px);box-shadow:0 0 0 1px var(--pong-line), 0 24px 60px #0009;border-radius:16px;flex-direction:column;gap:4px;padding:12px 16px 16px;display:flex;position:fixed;right:12px}.settings-head{justify-content:space-between;align-items:center;gap:8px;display:flex}.settings h2{font:800 15px/1.2 var(--font-display);margin:0}.settings .leave{width:44px;height:44px;color:var(--pong-ink-2);cursor:pointer;background:0 0;border:0;border-radius:10px;place-items:center;display:grid}.settings .row{cursor:pointer;align-items:center;gap:12px;min-height:44px;display:flex}.settings .row.range,.settings .row.select{justify-content:space-between}.settings input[type=checkbox]{width:20px;height:20px;accent-color:var(--pong-btc)}.settings input[type=range]{width:150px;accent-color:var(--pong-btc)}.settings select{min-height:36px;color:var(--pong-ink);background:#ffffff1a;border:0;border-radius:8px;padding:0 8px}.now-playing{z-index:2;font:500 11px/16px var(--font-mono);color:var(--pong-ink-3);text-align:center;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;margin:0;position:fixed;bottom:2px;left:8px;right:8px;overflow:hidden}.now-playing[hidden]{display:none}.now-playing a{color:var(--pong-ink-2);text-underline-offset:3px;pointer-events:auto;text-decoration:underline}.now-playing a:hover{color:var(--pong-btc)}@media (width<640px){.hud{gap:4px;padding:0 8px}.hud .side{gap:6px}.hud .title,.hud .fig{display:none}.hud .face{border-radius:10px;width:36px;height:36px}.hud .score{font-size:24px}.hud .leave{width:40px;min-width:40px;height:40px;padding:0}}@media (width<480px){.hud .who,.hud .mid-text{display:none}}.hint-touch{display:none}@media (pointer:coarse){.hint-touch{display:block}.hint-desktop{display:none}}.hud .resign[data-confirm]{color:#140b00;background:var(--pong-btc)}body.still .hud .score.pop,body.still .banner.in img,body.still .banner.in small,body.still .banner.in b,body.still .banner.in span{animation:none}body.still .cheer.in{animation:2.2s linear both cheer-still}body.still .ticker.in,body.still .queue.in,body.still .banner.out,body.still .event-pin.in{animation:none}@keyframes cheer-still{0%,92%{opacity:1}to{opacity:0}}