: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; }
/* The paddle is the pointer during a match. */
body.in-match canvas { cursor: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 .menu [hidden] { display:none; }
a.button { display:inline-block; padding:11px 16px; margin:6px 8px 6px 0; font-weight:600; border:1px solid var(--mint); border-radius:5px; text-decoration:none; }
a.button:focus-visible { outline:2px solid #fff0ae; outline-offset:3px; }
#install-dialog ol { padding-left:1.3em; line-height:1.5; }
#install-dialog small { opacity:.75; }
#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%; }
#settings input[type=range] { width:100%; accent-color:var(--mint); }
#sensitivity-value { float:right; color:var(--mint); }
.mouse-test { display:flex; gap:14px; align-items:center; margin:12px 0 16px; }
#mouse-test { width:320px; max-width:55%; height:auto; aspect-ratio:320/146; border:1px solid #283b4b; border-radius:4px; cursor:crosshair; flex:none; }
.mouse-test p { margin:6px 0 0; }
/* Title screen: arcade night with soft player-colour glows, drifting stars and faint scanlines. */
#title { background:radial-gradient(60cqw 40cqw at 8% 18%, #71e8ca1c, transparent 70%), radial-gradient(55cqw 40cqw at 100% 100%, #ff8f7718, transparent 70%), linear-gradient(180deg, #0d1420, #090e16); overflow:hidden; }
#title::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:radial-gradient(1.5px 1.5px at 20px 30px, #ffffffcc, transparent), radial-gradient(1px 1px at 120px 80px, #ffffff99, transparent), radial-gradient(1.5px 1.5px at 200px 160px, #71e8caaa, transparent), radial-gradient(1px 1px at 280px 40px, #ffffff88, transparent), radial-gradient(1.5px 1.5px at 340px 210px, #ff8f77aa, transparent);
  background-size:360px 240px; animation:stars 90s linear infinite; }
#title::after { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(180deg, transparent 0 2px, #00000026 2px 3px); }
#title > * { z-index:1; }
@keyframes stars { to { background-position:0 2400px; } }
#title .eyebrow { letter-spacing:.18em; font-size:1.15cqw; font-weight:600; }
#title .eyebrow::before { content:""; display:inline-block; width:.7cqw; height:.7cqw; margin-right:.9cqw; border-radius:50%; background:var(--mint); box-shadow:0 0 1cqw var(--mint); vertical-align:middle; animation:blink 1.6s steps(2, start) infinite; }
@keyframes blink { 50% { opacity:.2; } }
#title h1 { text-shadow:0 .3cqw 0 #00000080; }
#title h1 .glow { background:linear-gradient(90deg, var(--mint), #c9f6ea 45%, var(--coral)); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; filter:drop-shadow(0 0 1.2cqw #71e8ca55); }
#title .tagline span { color:#d6e2ee; } #title .tagline .mint { color:var(--mint); } #title .tagline .brick { color:#e08a6c; }
#title .menu button { border-radius:4px; letter-spacing:.06em; transition:transform .12s ease, box-shadow .12s ease, background .12s ease; }
#title .menu button:not(.primary) { background:#131d2a; border-color:#2f4757; }
#title .menu button:hover { transform:translateY(-.15cqw); box-shadow:0 0 1.6cqw #71e8ca33; border-color:var(--mint); }
/* All menu buttons: dark face, light text. The main choice is larger and glows softly. */
#title .menu button, #title .options-button { color:#e8f1fa; }
/* Main bar: PLAY VS CPU with the CPU strength switch built into its right end. It glows softly. */
#title .main-row { display:flex; border:1px solid var(--mint); border-radius:4px; overflow:hidden; box-shadow:0 0 2cqw #71e8ca33, inset 0 0 1.4cqw #71e8ca14; animation:pulse 2.6s ease-in-out infinite; }
#title .main-row button { border:0; border-radius:0; background:#131d2a; }
#title .main-row button:hover { transform:none; box-shadow:none; background:#18283a; }
#title .main-row #cpu { flex:1; font-size:1.7cqw; letter-spacing:.14em; }
#title .main-row #cpu-level { flex:none; width:13.5cqw; border-left:1px solid #2f4757; background:#0f1822; font-size:1.05cqw; letter-spacing:.12em; color:var(--mint); }
#title .main-row #cpu-level:hover { background:#16283a; color:#a0f3dd; }
/* LOCAL 2 PLAYERS: a full-width bar of the same size. */
#title .menu button.wide-choice { margin-top:1.09375cqw; font-size:1.7cqw; letter-spacing:.14em; }
#title .version { position:absolute; right:6.5%; bottom:1.5%; margin:0; font:700 .95cqw Consolas, "Courier New", monospace; letter-spacing:.2em; color:#71869e; }
@keyframes pulse { 50% { box-shadow:0 0 3.2cqw #71e8ca66, inset 0 0 1.4cqw #71e8ca22; } }
/* The leaderboard sits where the picture was. */
.hiscore { position:absolute; left:58.594%; top:13%; width:34.844%; height:55.5%; display:flex; flex-direction:column; padding:1.2cqw 1.4cqw;
  background:linear-gradient(180deg, #121c2acc, #0b121bcc); border:1px solid #ffd84a55; border-radius:.6cqw; box-shadow:0 0 2.4cqw #ffd84a14, inset 0 0 2cqw #00000055; }
/* Two boards on top of each other; the shown one fades in, the other out. */
.hiscore .board { position:absolute; inset:4.2cqw 1.4cqw 1.2cqw; display:flex; flex-direction:column; opacity:0; transition:opacity 1.2s ease; pointer-events:none; }
.hiscore .board.shown { opacity:1; pointer-events:auto; }
.board-tabs { position:absolute; top:1.2cqw; left:1.4cqw; right:1.4cqw; display:flex; gap:.6cqw; }
.board-tabs button { flex:1; height:2.4cqw; padding:0 0 0 .3em; line-height:1; border:1px solid #ffd84a44; border-radius:.3cqw; background:#0d141d; color:#8797ab; cursor:pointer;
  font:700 1.1cqw Consolas, "Courier New", monospace; letter-spacing:.3em; transition:background 1.2s ease, color 1.2s ease, box-shadow 1.2s ease; }
.board-tabs button.on { background:#ffd84a; color:#0b1118; box-shadow:0 0 1cqw #ffd84a66; }
.board-tabs button:hover:not(.on) { color:#ffd84a; }
.hiscore header { display:flex; align-items:baseline; justify-content:space-between; border-bottom:1px solid #ffd84a33; padding-bottom:.7cqw; margin-bottom:.5cqw; }
.hiscore h2 { margin:0; font:700 1.45cqw Consolas, "Courier New", monospace; letter-spacing:.16em; color:#ffd84a; text-shadow:0 0 1cqw #ffd84a88; }
.hiscore header span { font-size:.85cqw; letter-spacing:.14em; color:#8797ab; font-weight:600; }
.hiscore ol { list-style:none; margin:0; padding:0; flex:1; display:grid; grid-template-rows:repeat(10, 1fr); font:600 1.22cqw Consolas, "Courier New", monospace; }
.hiscore li { display:grid; grid-template-columns:2.6cqw 1fr 5.4cqw 6cqw 5.6cqw; align-items:center; gap:.6cqw; padding:0 .5cqw; border-radius:.3cqw; color:#c6d3e0; white-space:nowrap; }
.hiscore li:nth-child(even) { background:#ffffff06; }
.hiscore .rank { color:#6f8295; } .hiscore .name { overflow:hidden; text-overflow:ellipsis; } .hiscore .points { color:#ffd84a; text-align:right; }
.hiscore .level, .hiscore .date { font-size:.9cqw; color:#7f92a6; letter-spacing:.06em; }
.hiscore li:nth-child(1) .rank, .hiscore li:nth-child(1) .name { color:#ffd84a; } .hiscore li:nth-child(1) { background:#ffd84a12; }
.hiscore li:nth-child(2) .rank { color:#dfe8f1; } .hiscore li:nth-child(3) .rank { color:#e3a06b; }
.hiscore li.empty { color:#3a4a5c; } .hiscore li.empty .name { grid-column:2 / 5; } .hiscore li.empty:first-child .name { color:#ffd84a; animation:blink 1.6s steps(2, start) infinite; } .hiscore li.empty .points { color:#3a4a5c; }
.hiscore li.own { background:#71e8ca1c; box-shadow:inset .25cqw 0 0 var(--mint); } .hiscore li.own .name, .hiscore li.own .points { color:var(--mint); }
.hiscore li.fresh { animation:fresh .5s steps(2, start) 8; }
@keyframes fresh { 50% { background:#ffd84a40; } }
#title .options-button { left:58.594%; top:71.5%; width:34.844%; height:3.75cqw; letter-spacing:.06em; border-radius:4px; background:#131d2a; border-color:#2f4757; }
#title .options-button:hover { box-shadow:0 0 1.6cqw #71e8ca33; border-color:var(--mint); }
#title .welcome { position:absolute; left:58.594%; top:79.2%; margin:0; font-size:1.2cqw; color:var(--mint); font-weight:600; letter-spacing:.04em; }
#title .rules { border-top-color:#2a3a4c; }
#title .rules b { letter-spacing:.08em; font-weight:700; }
@media(prefers-reduced-motion:reduce){ #title::before, #title .eyebrow::before, #title .main-row, .hiscore li.fresh { animation:none; } .hiscore .board, .board-tabs button { transition:none; } }
.arcade { font-family:Consolas, "Courier New", monospace; letter-spacing:.12em; color:#ffd84a; text-shadow:0 0 12px #ffd84a66; }
#name-dialog input { width:100%; font:700 26px Consolas, "Courier New", monospace; letter-spacing:.1em; background:#0b1420; color:#ffd84a; border:2px solid #496378; border-radius:4px; padding:10px 12px; }
#name-dialog input:focus { outline:none; border-color:#ffd84a; }
#name-error { color:var(--coral); min-height:1.2em; }
.name-row { display:flex; align-items:center; gap:12px; margin-top:8px; }
.name-row output { font:700 18px Consolas, "Courier New", monospace; color:#ffd84a; min-width:8ch; }
/* Tablets: finger moves stay in the game instead of scrolling or zooming the page. */
body.in-match canvas { touch-action:none; }
.board-you { margin:.4cqw 0 0; padding-top:.4cqw; border-top:1px solid #ffd84a22; font:700 .95cqw Consolas, "Courier New", monospace; letter-spacing:.08em; color:var(--mint); text-align:center; }