.pong-dialog,.pong-entry{--pong-text:#f4f2ff;--pong-sub:#d4d1e9;--pong-bg:#101627;--pong-panel:#20283e;--pong-border:#7c85a7;font-family:inherit;font-size:1rem;line-height:1.5;color:var(--pong-text);box-sizing:border-box}.pong-dialog{position:fixed;inset:0;margin:0;padding:0;width:100%;max-width:100%;height:100dvh;max-height:none;border:0;border-radius:0;background:#101627;overflow:auto;overscroll-behavior:contain}.pong-dialog::backdrop{background:#080d19}.pong-dialog *,.pong-entry *{box-sizing:border-box}.pong-dialog [hidden]{display:none!important}.pong-dialog h1,.pong-dialog h2,.pong-dialog p,.pong-dialog strong,.pong-dialog label,.pong-entry h2,.pong-entry p{opacity:1;color:#f4f2ff}.pong-dialog h1{font-size:clamp(1.4rem,3vw,2rem);line-height:1.25;margin:0}.pong-dialog h2{font-size:1.25rem;line-height:1.45;margin:0 0 .75rem}.pong-dialog p,.pong-entry p{font-size:1rem;line-height:1.65;margin:.5rem 0 1rem}.pong-dialog button,.pong-entry button{font:inherit;font-size:1rem;line-height:1.5;min-height:48px;border:1px solid #8e97b9;border-radius:.7rem;padding:.65rem 1rem;background:#29324b;color:#f4f2ff;opacity:1;cursor:pointer;text-align:center;display:inline-flex;justify-content:center;align-items:center;white-space:normal;overflow-wrap:anywhere;gap:.4rem}.pong-dialog button:disabled{color:#eeeaff;background:#283148;border:1px dashed #9da6c3;opacity:1;cursor:default}.pong-dialog button:hover:not(:disabled),.pong-entry button:hover{background:#3c355b;border-color:#c9b5ff}.pong-dialog button:focus-visible,.pong-dialog canvas:focus-visible,.pong-entry button:focus-visible{outline:3px solid #a3f0da;outline-offset:3px}.pong-dialog button[aria-pressed=true]{background:#23403b;border-color:#a3f0da}.pong-entry .pong-primary{background:#a3f0da;color:#102b25;border-color:#d0ffef;font-weight:700}.pong-entry .pong-primary:hover{background:#ccffef;color:#102b25}.pong-shell{max-width:1650px;margin:auto;padding:12px}.pong-header{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:8px;flex-wrap:wrap}.pong-mode{font-size:1rem;color:#d4d1e9}.pong-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}.pong-match{min-width:0;display:grid;grid-template-rows:auto auto;gap:8px}.pong-scoreboard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr);align-items:center;gap:6px;padding:8px;background:#20283e;border:1px solid #7c85a7;border-radius:.8rem}.pong-scoreboard>div{text-align:center;min-width:0;overflow-wrap:anywhere}.pong-scoreboard>div>span{display:block;font-size:1rem;color:#f4f2ff}.pong-scoreboard strong{font-size:1.7rem;line-height:1.15;display:block;font-variant-numeric:tabular-nums;color:#a3f0da}.pong-scoreboard>div:last-child strong{color:#d2b8ff}.pong-round>span{font-size:1rem!important;color:#f4f2ff!important}.pong-round>.pong-serving{font-size:1rem!important;color:#f4f2ff!important}.pong-stage{position:relative;background:#080e1d;border:1px solid #7c85a7;border-radius:.8rem;overflow:hidden}.pong-stage canvas{display:block;width:100%;height:clamp(240px,calc(100dvh - 310px),800px);touch-action:none;background:#080e1d}.pong-state-banner{position:absolute;inset:40% 10px auto;margin:auto;background:#152534;border:1px solid #9bdacb;color:#f4f2ff;font-size:1rem;font-weight:600;text-align:center;padding:.65rem;border-radius:.8rem;pointer-events:none;max-width:460px}.pong-state-banner.pong-banner-hidden{visibility:hidden}.pong-controls{min-width:0}.pong-toolbar{display:grid;grid-template-columns:repeat(4,minmax(48px,1fr));gap:6px;align-content:start}.pong-toolbar>button{position:relative;min-width:0;width:100%;padding:8px;min-height:48px}.pong-toolbar svg{flex-shrink:0}.pong-tool-caption{font-size:1rem;line-height:1.2;overflow-wrap:anywhere}.pong-toolbar [data-watch]{flex-wrap:wrap}.pong-toolbar [data-spin='-1'] svg{transform:scaleX(-1)}.pong-toolbar [data-spin='0'] svg{color:#a3f0da}.pong-dialog .pong-help{padding:1rem;background:#20283e;border:1px solid #7c85a7;border-radius:.8rem;margin-top:8px}.pong-dialog .pong-secondary,.pong-entry .pong-secondary{font-size:.875rem;color:#d4d1e9}.pong-dialog .pong-practice{font-size:1rem;color:#d4d1e9;margin:6px 0 0;line-height:1.5;text-align:center}.pong-entry{display:grid;grid-template-columns:180px minmax(0,1fr);align-items:center;gap:1.5rem;background:#20283e;border:1px solid #a18bcf;border-radius:1.1rem;padding:1.5rem;margin:1.5rem 0}.pong-entry h2{font-size:1.6rem;line-height:1.4;margin:0 0 .6rem}.pong-entry button{max-width:100%;margin:4px;vertical-align:middle}.pong-entry-art{height:165px;position:relative;isolation:isolate}.pong-entry-orbit{position:absolute;inset:25px 0;border:2px solid #a99ad9;border-radius:50%;rotate:-35deg}.pong-entry-ball{position:absolute;width:42px;height:42px;left:30px;top:24px;border-radius:50%;background:radial-gradient(circle at 30% 30%,white,#a3f0da);box-shadow:0 0 28px #a3f0da60}.pong-entry-paddle{position:absolute;left:70px;top:64px;width:75px;height:48px;border-radius:50%;rotate:-35deg;background:linear-gradient(#d0bdff,#8864b8);box-shadow:0 0 30px #c9afff33}.pong-entry-paddle:after{content:'';position:absolute;top:30px;left:28px;width:15px;height:55px;background:#9c8aab;border-radius:5px;z-index:-1}
@media(min-width:650px) and (orientation:portrait){.pong-toolbar{grid-template-columns:repeat(8,minmax(48px,1fr))}.pong-stage canvas{height:clamp(300px,calc(100dvh - 245px),850px)}}
@media(orientation:landscape) and (min-width:540px){.pong-layout{grid-template-columns:minmax(0,1fr) 132px;align-items:start}.pong-toolbar{grid-template-columns:repeat(2,minmax(48px,1fr))}.pong-toolbar [data-watch]{grid-column:1/-1;flex-wrap:nowrap}.pong-stage canvas{height:clamp(160px,calc(100dvh - 195px),780px)}.pong-header h1{font-size:1.6rem}}
@media(min-width:1100px) and (orientation:landscape){.pong-layout{grid-template-columns:minmax(0,1fr) 172px}.pong-toolbar>button{min-height:56px}.pong-stage canvas{height:clamp(300px,calc(100dvh - 205px),780px)}}
@media(max-width:500px){.pong-header h1{font-size:1.4rem}.pong-mode{font-size:.875rem}.pong-scoreboard{padding:6px;gap:4px}.pong-scoreboard>div>span{font-size:1rem}.pong-toolbar{gap:5px}.pong-entry{grid-template-columns:1fr;gap:.8rem;padding:1.2rem}.pong-entry-art{height:130px;width:180px;margin:auto}.pong-entry button{min-width:130px}.pong-stage canvas{height:clamp(240px,calc(100dvh - 325px),680px)}}
@media(prefers-reduced-motion:reduce){.pong-dialog *,.pong-entry *{animation:none!important;transition:none!important}}

.pong-dialog .pong-help{position:fixed;inset:auto 12px 12px;z-index:5;max-width:640px;max-height:65dvh;overflow:auto;margin-inline:auto;box-shadow:0 12px 45px #0008}.pong-help>[data-help-close]{float:inline-end;margin:0 0 8px 8px}

.pong-cheer-row{display:flex;justify-content:center;gap:4px}.pong-cheer-row>button{min-height:44px;padding:4px 6px;line-height:1;font-size:16px}.pong-cheer-row>button:disabled{min-width:30px}.pong-cheer-row>button span{font-size:14px}.pong-stage canvas{height:clamp(220px,calc(100dvh - 365px),760px)}@media(min-width:650px) and (orientation:portrait){.pong-stage canvas{height:clamp(300px,calc(100dvh - 290px),800px)}}@media(orientation:landscape) and (min-width:540px){.pong-stage canvas{height:clamp(140px,calc(100dvh - 235px),740px)}}

@media(orientation:landscape) and (min-width:540px) and (max-height:500px){.pong-layout{grid-template-columns:minmax(0,1fr) 172px}.pong-toolbar{grid-template-columns:repeat(3,minmax(48px,1fr))}.pong-toolbar [data-watch]{grid-column:auto}.pong-toolbar .pong-tool-caption{display:none}}

/* Keep the control rail on the physical right in every site language. */
.pong-layout{direction:ltr}.pong-dialog[dir=rtl] .pong-match,.pong-dialog[dir=rtl] .pong-controls{direction:rtl}

.pong-entry select{font:inherit;font-size:16px;min-height:48px;border:1px solid #a99bc8;border-radius:10px;padding:8px 12px;background:#fff;color:#172638;max-width:100%;margin-inline-end:10px;margin-bottom:10px}.pong-entry select:focus-visible{outline:3px solid #6844a5;outline-offset:3px}