:root{color-scheme:dark;--bg:#0a1320;--panel:#101f2c;--line:#90baca26;--cyan:#69eff4;--orange:#ffad75;--text:#ecf4ee;--muted:#89a8b9;font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:var(--text);background:var(--bg)}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 5% 30%,#2e728028,transparent 48%),radial-gradient(ellipse at 100% 40%,#ffac7012,transparent 42%),var(--bg)}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}[hidden]{display:none!important}#arcade{max-width:1260px;padding:24px 32px 12px;margin:auto}header{display:flex;align-items:center;justify-content:space-between;gap:16px;font:700 9px/1.4 ui-monospace,monospace;letter-spacing:.14em;color:var(--muted)}header a{color:var(--text);text-decoration:none}header button{border:1px solid var(--line);background:#ffffff04;color:var(--text);border-radius:9px;font-size:23px;width:42px;height:42px}.title{display:flex;justify-content:space-between;align-items:center;padding:32px 0 26px}.eyebrow{font:800 9px/1.6 ui-monospace,monospace;letter-spacing:.22em;color:var(--cyan);margin:0}h1{font-size:clamp(70px,8vw,110px);line-height:.9;letter-spacing:-.09em;font-weight:950;margin:10px 0 0}h1 span{color:var(--cyan)}h1 i{display:inline-block;font-size:.68em;color:var(--orange);margin-left:20px;font-style:normal}.edition{font-size:10px;letter-spacing:.14em;line-height:1.9;color:var(--muted)}.edition b{color:var(--orange);font-weight:600}.layout{display:grid;grid-template-columns:290px minmax(0,1fr);gap:18px;align-items:start}.panel{border:1px solid var(--line);border-radius:16px;background:linear-gradient(130deg,#172a37,#0e1b29);padding:24px}h2{font-size:35px;line-height:1.02;letter-spacing:-.045em;margin:12px 0 22px}.panel label,form label{display:block;font-size:9px;font-weight:800;letter-spacing:.13em;color:#b3cbd6;margin:16px 0 8px}input,select{border:1px solid #bce1e12e;border-radius:8px;background:#071722;color:var(--text);padding:12px;width:100%;font-size:13px;min-width:0}.mode-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:#071722;border:1px solid var(--line);border-radius:9px;padding:4px;margin-top:22px}.mode-tabs button{background:none;color:var(--muted);border:0;border-radius:6px;padding:10px 3px;font-size:9px;font-weight:850;white-space:nowrap}.mode-tabs button.selected{color:#0a2731;background:var(--cyan)}.primary{border:1px solid #a9fdff;background:var(--cyan);color:#102b37;padding:14px 18px;border-radius:9px;font-weight:900;font-size:11px;letter-spacing:.05em;box-shadow:0 6px 24px #69eff412}.primary:hover{background:#a4faff}.secondary{border:1px solid #9fd2d64a;background:#163342;color:#dcefeb;padding:12px 18px;border-radius:9px;font-size:11px;font-weight:800}.quiet{border:0;color:var(--muted);background:transparent;font-size:11px;padding:12px}#play{width:100%;margin-top:22px}.message{color:var(--muted);font-size:11px;line-height:1.5;min-height:16px}.rules{border-top:1px solid var(--line);margin-top:20px;padding-top:18px;font-size:9px;color:var(--orange);letter-spacing:.05em}.rules p{font-size:11px;line-height:1.8;color:var(--muted);letter-spacing:0;margin-bottom:0}small{display:block;font-size:10px;color:var(--muted);line-height:1.6;margin-top:7px}.court-panel{border:1px solid var(--line);border-radius:16px;padding:20px;background:linear-gradient(150deg,#142532,#0c1826);min-width:0}.scoreboard{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin:1px 18px 16px}.player{display:flex;flex-direction:column;gap:3px;min-width:0}.player span{font:800 10px ui-monospace,monospace;letter-spacing:.12em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.player strong{font:600 65px/.98 ui-monospace,monospace;letter-spacing:-.09em}.cyan{color:var(--cyan)}.orange{color:var(--orange);text-align:right}.match-label{text-align:center;display:grid;gap:6px}.match-label>span{font-size:8px;letter-spacing:.18em;color:var(--muted)}.match-label>b{font-size:9px;letter-spacing:.15em;font-weight:500}.match-label small{font-size:8px;letter-spacing:.05em;margin:0}.court{position:relative;aspect-ratio:960/560;border-radius:11px;overflow:hidden;border:1px solid #84d6df38;background:#061523;box-shadow:0 0 45px #6af4ff08,inset 0 0 50px #0008}canvas{width:100%;height:100%;display:block;touch-action:none;outline:none}.court-corners{position:absolute;inset:10px;pointer-events:none;border:1px solid #90e5eb0b;border-radius:4px}#preview-note{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:24px;line-height:1.25;text-align:center;letter-spacing:-.035em;width:85%;font-weight:900;text-shadow:0 3px 30px #041321}#preview-note em{font-style:normal;color:#a8c4d3;font-size:16px;font-weight:500}#countdown{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:80px;line-height:1;color:var(--cyan);font-weight:950;text-shadow:0 0 25px #71f6ff50;pointer-events:none}.court-meta{display:flex;justify-content:space-between;gap:8px;padding-top:14px;color:var(--muted);font:600 8px/1.5 ui-monospace,monospace;letter-spacing:.08em}.court-meta i{display:inline-block;width:5px;height:5px;margin-right:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}.court-meta b{color:#c1d6df;font-weight:500}.court-meta em{font-style:normal;padding:0 6px}#controls{display:flex;justify-content:space-between;gap:10px;margin-top:15px}#controls button{border:1px solid var(--line);background:#ffffff06;color:#c1d6df;font-size:9px;border-radius:8px;padding:10px;min-height:38px}.touch-controls{display:none;gap:7px;align-items:center}.touch-controls button{font-size:23px!important;width:52px;min-height:48px!important;touch-action:none;user-select:none}.touch-controls span{color:var(--muted);font-size:8px;line-height:1.5}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#06131cea;backdrop-filter:blur(8px);text-align:center;padding:16px;overflow:auto}.overlay>div{width:350px;max-width:100%;margin:auto}.overlay h2{font-size:40px;margin:12px 0 16px}.overlay p{font-size:12px;line-height:1.5;color:var(--muted)}#code{font-size:21px;color:var(--orange);letter-spacing:.22em;margin-left:8px}#start{display:block;margin:12px auto}.save-row{display:flex;gap:8px}#save-form label{text-align:left}#save-form small{font-size:9px}.results h2{color:var(--orange)}.results #again{margin-right:8px}.hall{margin-top:18px;padding:22px}.hall-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.hall-heading h2{font-size:23px;margin:6px 0 0}.hall-heading>span{font:9px ui-monospace,monospace;color:var(--muted);letter-spacing:.07em}#leaders{padding:0;margin:18px 0 0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}#leaders li{display:flex;align-items:center;gap:9px;font-size:11px;padding:13px;border:1px solid var(--line);border-radius:9px}#leaders li b{color:var(--cyan);font:12px ui-monospace,monospace}#leaders li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#leaders li small{margin:0 0 0 auto;white-space:nowrap;color:var(--orange)}#leaders .empty{grid-column:1/-1;color:var(--muted);font-size:12px;border-style:dashed;line-height:1.6}footer{display:flex;justify-content:space-between;color:#607c8e;font:8px/1.6 ui-monospace,monospace;letter-spacing:.15em;margin:22px 0}.in-match .layout{grid-template-columns:1fr}.in-match .title{padding:17px 0}.in-match h1{font-size:48px}.in-match .title .eyebrow{font-size:8px}.in-match .court{max-height:calc(100dvh - 285px);min-height:260px}.in-match .court-panel{max-width:1080px;width:100%;margin:auto}.in-match .hall{display:none}
@media(pointer:coarse){.touch-controls{display:flex}#controls{flex-wrap:wrap}}
@media(max-width:850px){#arcade{padding:18px}.layout{grid-template-columns:250px minmax(0,1fr)}.panel{padding:19px}.court-panel{padding:14px}.player strong{font-size:50px}.scoreboard{margin:0 4px 16px}.match-label>span{display:none}#preview-note{font-size:18px}#preview-note em{font-size:12px}#leaders{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){#arcade{padding:12px}header{font-size:8px}header>span{display:none}.title{padding:24px 2px}.title h1{font-size:80px}.edition{font-size:8px;letter-spacing:.04em}.layout{grid-template-columns:1fr}.panel{padding:20px}.mode-tabs button{font-size:10px;padding:13px 3px}.rules{display:none}.court-panel{padding:12px}.court{min-height:220px}.player strong{font-size:53px}.player span{font-size:9px}.hall-heading>span{font-size:8px;max-width:70px;text-align:right}.hall-heading h2{font-size:22px}#leaders{grid-template-columns:1fr}.in-match .title h1{font-size:42px}.in-match .title .edition{display:none}.in-match .court{min-height:260px;height:calc(100dvh - 355px);max-height:460px;aspect-ratio:auto}.in-match .court:has(.overlay:not([hidden])){height:420px;max-height:none}.overlay{padding:18px}.overlay h2{font-size:34px}#controls{gap:12px}#controls>div:last-child{display:flex;gap:6px;margin-left:auto}#controls button{min-height:44px}.touch-controls button{width:48px}#controls .touch-controls span{font-size:7px}footer{font-size:7px}footer span:last-child{max-width:150px;text-align:right}}
@media(max-height:550px) and (orientation:landscape){.in-match #arcade{padding:6px 12px}.in-match header{height:30px}.in-match .title{display:none}.in-match .court-panel{padding:7px}.in-match .scoreboard{position:absolute;z-index:1;left:15%;right:15%;top:43px;pointer-events:none}.in-match .player{flex-direction:row;align-items:center;gap:9px}.in-match .player.orange{flex-direction:row-reverse}.in-match .player strong{font-size:27px}.in-match .match-label{display:none}.in-match .court{height:calc(100dvh - 107px);min-height:190px;max-height:none;aspect-ratio:auto}.in-match .court-meta{padding-top:5px}.in-match #controls{position:absolute;bottom:6px;right:18px;margin:0;z-index:2}.in-match #controls button{padding:6px;min-height:30px}.in-match .touch-controls{display:none}.in-match footer{display:none}.in-match .overlay>div{width:510px}.in-match .overlay h2{font-size:23px;margin:3px}.in-match .overlay .eyebrow{font-size:8px}.in-match .overlay p{margin:5px}.in-match .overlay form label{margin:8px 0 5px}.in-match .overlay #save-form small{font-size:8px}.in-match .overlay .primary{padding:9px}.in-match .overlay .message{margin:5px}.in-match .overlay .secondary{padding:8px}}
.overlay{grid-template-columns:minmax(0,1fr)}.overlay>div{min-width:0;width:min(350px,100%)}.save-row input{flex:1;width:0;min-width:0}.save-row button{flex:none}@media(max-height:550px) and (orientation:landscape){.in-match .overlay>div{width:min(510px,100%)}}