:root{color-scheme:dark;font-family:"Segoe UI",sans-serif;background:#080d14;color:#ecf2fa;--mint:#71e8ca;--coral:#ff8f77}*{box-sizing:border-box}body{margin:0}main{width:min(1920px,96vw);margin:18px auto}nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;font-size:13px;letter-spacing:1px}nav small{font-size:10px;color:#8396af;margin-left:15px}nav>div{display:flex;gap:8px}button,select,textarea{font:inherit}button{background:#152130;color:var(--mint);border:1px solid #3c5b69;border-radius:5px;cursor:pointer;padding:11px 16px;font-weight:600}button:hover{background:#213548;border-color:var(--mint)}button:disabled{opacity:.45;cursor:wait}button:focus-visible,canvas:focus-visible,textarea:focus-visible{outline:2px solid #fff0ae;outline-offset:3px}.primary{background:var(--mint);color:#0c171e;border-color:var(--mint)}.primary:hover{background:#a0f3dd}[hidden]{display:none!important}#stage{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100vh - 140px);background:#0c1118;overflow:hidden;border:1px solid #283b4b;border-radius:7px;container-type:inline-size}canvas{display:block;width:100%;height:100%;object-fit:contain}#title{position:absolute;inset:0;background:#0c1118;padding:5% 6.25%;font-size:1.4cqw;transition:opacity .7s ease}#title.leaving{opacity:0;pointer-events:none}.eyebrow{margin:0 0 3%;color:var(--mint);font-size:1.35cqw;letter-spacing:.05em}h1{font-size:6.8cqw;line-height:1.16;margin:0;letter-spacing:-.04em}.tagline{color:#9aa5b2;font-size:1.6cqw;margin:1.4% 0 0}.title-art{position:absolute;right:6.5%;top:21%;width:35%;height:47%;border:1px solid #2c333d}.title-art:after{content:"";position:absolute;left:50%;top:6%;bottom:6%;border-left:1px solid #263645}.title-art span{position:absolute;color:var(--mint);top:5%;left:6%}.title-art span:last-child{color:var(--coral);left:auto;right:6%}.paddle{position:absolute;width:3%;height:30%;background:var(--mint);left:7%;top:20%}.paddle.right{background:var(--coral);left:auto;right:7%;top:50%}.ball{position:absolute;border-radius:50%;background:#fff;width:5.5%;aspect-ratio:1;left:64%;top:31%}.menu{position:absolute;left:6.25%;top:59%;width:44%}.menu button{font-size:1.4cqw;border-radius:2px;padding:1.15cqw .6cqw;width:100%}.pair{display:flex;gap:1cqw;margin-top:1cqw}.pair button{font-size:1.15cqw}.menu p{font-size:1.05cqw;color:#98adc3;line-height:1.65;margin:1cqw 0}.options-button{position:absolute;left:58.6%;top:71%;width:35%;font-size:1.3cqw;padding:1cqw}.rules{position:absolute;bottom:4.7%;left:6.25%;right:6.5%;display:flex;justify-content:space-between;border-top:1px solid #2c333d;padding-top:1.7%}.rules p{margin:0;display:grid;gap:.5cqw;font-size:1.4cqw}.rules b{color:var(--mint);font-weight:500}.rules p:nth-child(2) b{color:var(--coral)}.rules p:last-child b{color:white}.rules span{color:#91a0b4}#status{text-align:center;color:#b8c8d9;font-size:14px;min-height:20px;margin:12px 0 4px}.footnote{text-align:center;color:#71869e;font-size:11px;margin:7px 0}dialog{width:min(590px,94vw);max-height:90vh;background:#111d2b;color:#e6eff9;border:1px solid #496378;border-radius:12px;padding:25px;box-shadow:0 15px 70px #0008}dialog::backdrop{background:#050911bb}dialog h2{margin-top:0;font-size:24px}dialog p{color:#aabbd0;font-size:13px;line-height:1.6}dialog label{display:block;margin:16px 0 8px;font-size:13px}textarea,select{display:block;width:100%;background:#0b1420;color:#dceafa;border:1px solid #3c546d;border-radius:4px;padding:10px;margin-top:9px}textarea{resize:vertical;font:11px Consolas,monospace}dialog button{margin:6px 8px 6px 0}.fine{font-size:11px!important}#connection-status{color:var(--mint);overflow-wrap:anywhere}#app:fullscreen{width:100%;height:100%;margin:0;padding:10px;background:#0c1118}#app:fullscreen #stage{max-height:calc(100vh - 120px)}@media(max-width:650px){nav{font-size:11px;flex-wrap:wrap}nav small{display:block;margin:3px 0}nav button{font-size:11px;padding:7px}main{width:98vw;margin-top:8px}#stage{max-height:none}#status{font-size:12px}.footnote{font-size:10px}}@media(prefers-reduced-motion:reduce){#title{transition:none}}

#stage{width:min(100%,calc((100vh - 140px)*16/9));margin-inline:auto;max-height:none}#app:fullscreen #stage{width:min(100%,calc((100vh - 120px)*16/9));max-height:none}

/* In a match the arena itself fills the available window, as in WinForms.
   Browser-only controls remain on the title screen; Escape returns there. */
body.in-match { background:#0c1118; overflow:hidden; }
body.in-match #app, body.in-match #app:fullscreen { width:100vw; height:100vh; margin:0; padding:0; display:grid; place-items:center; }
body.in-match nav, body.in-match #status, body.in-match .footnote { display:none; }
body.in-match #stage, body.in-match #app:fullscreen #stage { width:min(100vw,calc(100vh * 16 / 9)); border:0; border-radius:0; margin:0; }
body.in-match canvas:focus-visible { outline:none; }
/* Title placement follows TitleScreen.cs in the original 1280 x 720 arena. */
#title .eyebrow { position:absolute; left:6.25%; top:9.9%; margin:0; }
#title h1 { position:absolute; left:6.25%; top:22.2%; font-size:6.72cqw; line-height:1.047; letter-spacing:0; }
#title .tagline { position:absolute; left:6.4%; top:50.6%; margin:0; font-size:1.406cqw; }
#title .title-art { right:auto; left:58.594%; top:21.111%; width:34.844%; height:47.222%; }
#title .menu { left:6.25%; top:59.028%; width:43.75%; }
#title .menu button { height:3.75cqw; padding:0 .6cqw; font-size:1.484cqw; }
#title .pair { gap:1.5625cqw; margin-top:1.09375cqw; }
#title .pair button { font-size:1.25cqw; }
#title .menu p { margin:.6cqw 0; font-size:1.1cqw; line-height:1.3; }
#title .options-button { left:58.594%; top:70.833%; width:34.844%; height:3.75cqw; padding:0; }
#title .rules { bottom:5%; padding-top:2%; }