body.pong-page{--glass-dark:#120f2ec7;--rim:#ffffff38;--hud-font:"Black Han Sans", "Jua", system-ui, sans-serif;touch-action:none;color:#fff;background:#120f2e;position:fixed;inset:0;overflow:hidden}#pong-canvas{touch-action:none;width:100%;height:100%;display:block;position:fixed;inset:0}#pong-join{z-index:5;touch-action:pan-y;background:linear-gradient(#120f2e73,#120f2ecc),url(/art/pong/cover.jpg) 50%/cover no-repeat,#120f2e;align-content:safe center;position:fixed;inset:0;overflow-y:auto}#pong-join .card{color:#fff;border:2px solid var(--rim);background:linear-gradient(#282268f2,#120f2ef5);border-radius:22px;box-shadow:0 0 0 4px #120f2e99,0 18px 40px #00000073}#pong-join h1{font-family:var(--hud-font);letter-spacing:.04em;background:linear-gradient(90deg,#ffe066 0%,#fff 45%,#66e8ff 100%);color:#0000;filter:drop-shadow(0 3px #0c0a22)drop-shadow(0 0 12px #66e8ff73);-webkit-background-clip:text;background-clip:text;font-size:50px;line-height:1}#pong-join .tag{color:#ffffffd1}#pong-join input{color:#fff;background:#ffffff14;border-color:#ffffff40}#pong-join input::placeholder{color:#ffffff80}#pong-join input:focus{border-color:#66e8ff}#pong-join .btn.big{font-family:var(--hud-font);color:#0c0a22;letter-spacing:.04em;background:linear-gradient(#ffe066,#ff922b);border-color:#0c0a22;font-size:26px;box-shadow:0 6px #0c0a22,0 0 18px #ff922b73}#pong-join .btn.ghost{color:#fff;box-shadow:none;background:#ffffff1a;border-color:#ffffff4d}#pong-join .look-picks button[aria-pressed=true]{border-color:#ffd43b;box-shadow:0 0 10px #ffd43bcc}#pong-preview{width:220px;height:100px;margin:-6px auto 4px;display:block}#pong-bots-box{justify-items:center;gap:6px;margin:2px 0 12px;display:grid}#pong-bots-box b{font-size:15px}#pong-bots{flex-wrap:wrap;justify-content:center;gap:5px;display:flex}#pong-bots button{color:#fff;width:40px;height:40px;font-family:var(--hud-font);cursor:pointer;background:#ffffff14;border:2px solid #ffffff4d;border-radius:50%;padding:0;font-size:16px}#pong-bots button[aria-checked=true]{color:#0c0a22;background:#66e8ff;border-color:#fff;box-shadow:0 0 10px #66e8ffcc}#pong-bots-say{color:#ffffffbf;text-align:center;min-height:1.3em;font-size:13px}#pong-join .odds{color:#ffffff8c;margin:8px 0 6px;font-size:11px;line-height:1.4}#pong-join .tag,#pong-bots-say,#pong-join .odds,#pong-awards{word-break:keep-all}@media (max-width:420px){#pong-bots{grid-template-columns:repeat(4,40px);gap:6px;display:grid}}#pong-join .pong-go-bar{z-index:1;background:linear-gradient(#18143c00,#18143cf5 35%);margin:0 -4px;padding:8px 0 4px;position:sticky;bottom:0}#pong-join .pong-go-bar .btn.big{width:100%;margin:0}@media (max-height:700px){#pong-join .look-picks{grid-template-columns:repeat(12,24px);gap:4px}#pong-join .look-picks button{width:24px;height:24px}#pong-join .look-picks.faces{grid-template-columns:repeat(6,36px);gap:5px}#pong-join .look-picks.faces button{width:36px;height:36px}#pong-join .look-picks canvas{width:30px;height:30px}}@media (max-width:420px) and (max-height:700px){#pong-join .look-picks{grid-template-columns:repeat(6,30px)}#pong-join .look-picks button{width:30px;height:30px}#pong-preview{display:none}#pong-join h1{font-size:38px}#pong-join .tag{margin:4px 0 10px;font-size:13px}#pong-join input{margin-bottom:8px;padding:9px 12px}}@media (max-height:520px){#pong-preview{display:none}#pong-join .card{padding:14px 18px}#pong-join h1{font-size:32px}#pong-join .tag{margin:4px 0 10px;font-size:13px}#pong-join input{margin-bottom:8px;padding:8px 12px}}#pong-hud{pointer-events:none;position:fixed;inset:0}#pong-hud>*{pointer-events:auto}#pong-hud .btn.small{background:var(--glass-dark);color:#fff;border:1.5px solid var(--rim);box-shadow:0 3px #00000073}#pong-invite{color:#0c0a22!important;background:linear-gradient(#ffe066,#ff922b)!important;border-color:#0c0a22!important}#pong-top{top:max(8px, env(safe-area-inset-top));left:max(10px, env(safe-area-inset-left));flex-wrap:wrap;align-items:center;gap:6px;max-width:calc(100vw - 20px);display:flex;position:absolute}#pong-status{top:max(8px, env(safe-area-inset-top));right:max(10px, env(safe-area-inset-right));pointer-events:none;align-items:center;gap:6px;display:flex;position:absolute}#pong-time{font-style:normal;font-family:var(--hud-font);letter-spacing:.04em;text-align:center;background:var(--glass-dark);border:2px solid var(--rim);border-radius:12px;min-width:64px;padding:2px 10px;font-size:22px}#pong-time.hurry{color:#ff6b6b;border-color:#ff6b6b;animation:1s infinite pop}#pong-balls{background:var(--glass-dark);border:1.5px solid var(--rim);white-space:nowrap;border-radius:999px;padding:4px 10px;font-size:14px}#pong-balls.storm{color:#ffe066;border-color:#ffd43b;animation:.8s infinite pop}#pong-board{left:max(10px, env(safe-area-inset-left));top:calc(max(8px, env(safe-area-inset-top)) + 50px);background:var(--glass-dark);border:1.5px solid var(--rim);cursor:pointer;border-radius:14px;gap:3px;min-width:150px;max-width:200px;margin:0;padding:6px;list-style:none;display:grid;position:absolute}#pong-board li{white-space:nowrap;border-radius:8px;align-items:center;gap:6px;padding:2px 6px;font-size:14px;display:flex}#pong-board li i{border:1.5px solid #00000073;border-radius:50%;flex:none;width:11px;height:11px}#pong-board li span{text-overflow:ellipsis;flex:1;overflow:hidden}#pong-board li b{font-family:var(--hud-font);color:#ffe066;text-align:right;min-width:22px;font-size:17px;font-weight:400}#pong-board li.me{background:#ffd43b38}#pong-board li.gold{box-shadow:inset 0 0 0 2px #ffd43b}#pong-board li em{opacity:.7;width:16px;font-size:12px;font-style:normal}#pong-hint{bottom:max(6px, env(safe-area-inset-bottom));white-space:nowrap;color:#ffffffa6;pointer-events:none;margin:0;font-size:12px;transition:opacity 1s;position:absolute;left:50%;transform:translate(-50%)}#pong-banner{pointer-events:none;opacity:0;white-space:nowrap;font-family:var(--hud-font);color:#fff;letter-spacing:.03em;text-shadow:0 4px #0c0a22,0 0 3px #0c0a22,0 0 22px #66e8ff8c;font-size:clamp(30px,7vw,58px);position:absolute;top:40%;left:50%;transform:translate(-50%,-50%)}#pong-banner.show{animation:1.5s ease-out forwards pbanner}#pong-banner.count{color:#ffe066;font-size:clamp(40px,10vw,90px)}#pong-banner.go{color:#8ce99a}#pong-banner.goal{color:#ffe066}#pong-banner.ouch{color:#ff8787;font-size:clamp(26px,6vw,48px)}#pong-banner.save{color:#66e8ff}#pong-banner.morph{color:#e599f7;font-size:clamp(24px,6vw,46px)}#pong-banner.coach{color:#63e6be;font-size:clamp(18px,4.6vw,34px)}@keyframes pbanner{0%{opacity:0;transform:translate(-50%,-50%)scale(.6)}12%{opacity:1;transform:translate(-50%,-50%)scale(1.12)}22%{transform:translate(-50%,-50%)scale(1)}75%{opacity:1}to{opacity:0;transform:translate(-50%,-60%)scale(1)}}#pong-coach{pointer-events:none;z-index:2;background:#120f2eb8;border:2px solid #63e6be99;border-radius:16px;justify-items:center;gap:6px;padding:10px 16px;animation:.35s ease-out coach-in;display:grid;position:absolute;transform:translate(-50%,-50%)}#pong-coach b{font-family:var(--hud-font);white-space:nowrap;color:#fff;text-shadow:0 3px #0c0a22;font-size:clamp(17px,4.4vmin,30px);font-weight:400}#pong-coach b:first-child{color:#63e6be}#pong-coach b:last-child{color:#ffe066}@keyframes coach-in{0%{opacity:0;transform:translate(-50%,-40%)scale(.85)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}#pong-toasts{top:calc(max(8px, env(safe-area-inset-top)) + 50px);pointer-events:none;z-index:2;justify-items:center;gap:4px;display:grid;position:absolute;left:50%;transform:translate(-50%)}#pong-toasts p{background:var(--glass-dark);border:1.5px solid var(--rim);white-space:nowrap;border-radius:10px;margin:0;padding:4px 12px;font-size:14px;animation:3s forwards toast}#pong-drag{height:calc(64px + env(safe-area-inset-bottom));pointer-events:none;padding-bottom:env(safe-area-inset-bottom);color:#ffffff80;background:linear-gradient(#fff0,#ffffff0f);justify-content:center;align-items:center;font-size:14px;transition:opacity 1.2s;display:none;position:absolute;bottom:0;left:0;right:0}#pong-drag.gone{opacity:0}#pong-smash{cursor:pointer;touch-action:none;width:84px;height:84px;right:calc(16px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));background:var(--glass-dark);border:3px solid #ff922b;border-radius:50%;padding:0;font-size:40px;display:none;position:absolute;box-shadow:0 5px #00000080,0 0 16px #ff922b73}#pong-smash.held{background:#ff922b80;transform:translateY(3px)scale(.94);box-shadow:0 2px #00000080,0 0 26px #ff922be6}#pong-smash.cool{opacity:.5}#pong-smash.now{background:#ffd43bb3;border-color:#fff;animation:.25s infinite pop}#pong-assist[aria-pressed=true]{color:#b2f2bb!important;border-color:#63e6be!important}#pong-assist[aria-pressed=false]{opacity:.65}@media (max-width:460px) and (orientation:portrait){#pong-assist .lbl{display:none}}body.touch #pong-smash,body.coarse #pong-smash{display:block}body.touch #pong-drag{display:flex}body.touch #pong-hint,body.coarse #pong-hint{display:none}#pong-results{z-index:3;text-align:center;touch-action:pan-y;border:2px solid var(--rim);background:linear-gradient(#282268f5,#120f2ef7);border-radius:20px;width:min(440px,94vw);max-height:calc(100vh - 80px);padding:16px 16px 12px;position:absolute;top:50%;left:50%;overflow-y:auto;transform:translate(-50%,-50%);box-shadow:0 18px 40px #00000073}#pong-results h2{font-family:var(--hud-font);text-shadow:0 3px #0c0a22;color:#ffe066;margin:0 0 10px;font-size:34px}#pong-results ol{gap:4px;margin:0;padding:0;list-style:none;display:grid}#pong-results li{text-align:left;background:#ffffff12;border-radius:10px;align-items:center;gap:8px;padding:5px 10px;font-size:15px;display:flex}#pong-results li.me{background:#ffd43b3d}#pong-results li em{text-align:center;width:26px;font-size:18px;font-style:normal}#pong-results li i{border-radius:50%;flex:none;width:12px;height:12px}#pong-results li span{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}#pong-results li b{font-family:var(--hud-font);color:#ffe066;font-size:20px;font-weight:400}#pong-results li small{color:#ffffffb3;white-space:nowrap;font-size:12px}#pong-awards{margin:10px 0 0;font-size:14px;line-height:1.6}#pong-next{color:#ffffffb3;margin:8px 0 0}#pong-net{background:var(--danger);color:#fff;z-index:4;border-radius:10px;padding:8px 14px;font-weight:700;position:absolute;top:60px;left:50%;transform:translate(-50%)}#pong-flash{pointer-events:none;opacity:0;transition:opacity .5s;position:fixed;inset:0;box-shadow:inset 0 0 9vmin 2.5vmin #ff4646b3}#pong-flash.on{opacity:1;transition:none}#pong-flash.gold{box-shadow:inset 0 0 9vmin 2.5vmin #ffd43b8c}@media (orientation:portrait){#pong-status{top:calc(max(8px, env(safe-area-inset-top)) + 48px)}#pong-board{top:calc(max(8px, env(safe-area-inset-top)) + 90px);right:max(10px, env(safe-area-inset-right));cursor:default;grid-template-columns:1fr 1fr;column-gap:6px;min-width:0;max-width:none;padding:4px}#pong-board li{padding:1px 6px;font-size:13px}#pong-board li b{font-size:15px}#pong-toasts{top:calc(max(8px, env(safe-area-inset-top)) + 48px);left:max(10px, env(safe-area-inset-left));justify-items:start;transform:none}#pong-toasts p{white-space:normal;max-width:calc(100vw - 190px);font-size:13px}}@media (orientation:portrait) and (min-width:700px){#pong-board{width:min(560px,100vw - 20px);right:auto}}@media (orientation:landscape){#pong-drag{left:max(10px, env(safe-area-inset-left));right:auto;bottom:max(10px, env(safe-area-inset-bottom));background:var(--glass-dark);border:1.5px solid var(--rim);border-radius:999px;height:auto;padding:6px 12px}}@media (orientation:landscape) and (max-height:520px){#pong-top{flex-flow:column;align-items:stretch;gap:4px;max-width:132px}#pong-top .btn.small{white-space:nowrap;text-overflow:ellipsis;padding:4px 8px;font-size:12px;overflow:hidden}#pong-board{top:auto;bottom:max(8px, env(safe-area-inset-bottom));min-width:0;max-width:132px}#pong-results{top:max(6px, env(safe-area-inset-top));max-height:calc(100vh - 12px);transform:translate(-50%)}#pong-board li{padding:1px 4px;font-size:12px}#pong-board li:not(.me):not(.top){display:none}#pong-board.open li{display:flex!important}#pong-status{flex-direction:column;align-items:flex-end}#pong-time{min-width:50px;font-size:18px}#pong-toasts{left:auto;right:max(10px, env(safe-area-inset-right));top:calc(max(8px, env(safe-area-inset-top)) + 84px);justify-items:end;transform:none}#pong-toasts p{white-space:normal;max-width:170px;font-size:12px}#pong-results{padding:10px}#pong-results h2{margin-bottom:6px;font-size:24px}#pong-results li{padding:2px 8px;font-size:13px}#pong-drag{display:none!important}}@media (max-width:420px){#pong-top .btn.small{padding:6px 9px;font-size:13px}}