*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 10% 0%,#fff,transparent 55%),#e9edf2;color:#25364e;font:16px system-ui,sans-serif}main{max-width:900px;margin:auto;padding:22px}header{display:flex;gap:15px;align-items:center;border-bottom:1px solid #cbd5e0;padding-bottom:15px}.brand{font-size:27px;font-weight:850;letter-spacing:-1.7px;color:#26303b;text-decoration:none}.brand span{color:#df4d55}header>span{font:10px ui-monospace,monospace;letter-spacing:1.2px;margin-left:auto;color:#657b94}h1{font-size:42px;letter-spacing:-1.8px;margin:30px 0 12px}h2{font-size:26px;letter-spacing:-1px}p{color:#63758d;line-height:1.5}.card{padding:22px;background:#f7faffbf;border:1px solid #ccd8e6;border-radius:14px;margin:20px 0}.options{display:flex;gap:15px}.options>*{flex:1}button,select,input{font:inherit;padding:11px;border:1px solid #c3d0e0;border-radius:9px;background:linear-gradient(#fff,#f0f4f9);color:#344b67}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #397bc9;outline-offset:2px}.primary,button.active{background:linear-gradient(#397fd6,#2864b2);color:#fff;border-color:#2864b2;box-shadow:inset 0 1px #ffffff50,0 3px 8px #2865b328}.primary{padding:15px;font-size:19px;font-weight:750;width:100%}label{display:block;font-size:13px;margin:12px 0}.check{display:flex;align-items:center;gap:8px}.hint{font-size:12px}#names>div{display:flex;gap:10px;margin-top:10px}#names input{flex:1;min-width:0}#names select{width:70px}.hud{display:flex;gap:8px;align-items:center;margin-top:14px}#who{font-weight:750;margin-right:auto}.hud button{font-size:12px;padding:8px}.stats{display:flex;justify-content:space-between;background:#f8faff;border:1px solid #cbd5e1;border-radius:10px;margin:10px 0;padding:10px 13px;font:10px ui-monospace,monospace;color:#65778e}.stats b{font-size:23px;color:#2d4970;display:block;margin-top:4px}#time{color:#2d70b9}.track{background:#cbd8e5;border-radius:12px;height:11px;overflow:hidden;margin-bottom:10px}#fill{height:100%;background:linear-gradient(90deg,#3379c8,#54bdc6);transition:width .35s}.board{position:relative;border:6px solid #8c9aab;border-radius:15px;overflow:hidden;box-shadow:0 14px 30px #223b5420;width:min(100%,calc((100dvh - 295px)*1.384615));aspect-ratio:720/520;margin:auto}canvas{display:block;width:100%;height:100%;touch-action:none;user-select:none}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#edf3f9ed;padding:18px;text-align:center;backdrop-filter:blur(4px)}.overlay h2{margin:0 0 8px}.overlay p{margin:0 0 14px;font-size:13px}.overlay .primary{max-width:300px}.bottom{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px}.directions{margin-left:auto;display:flex;gap:7px}.directions button{font-size:20px;padding:8px 18px;min-height:46px}#series-strip{display:flex;gap:6px;flex-wrap:wrap;font-size:12px;margin-top:10px}#series-strip>span{background:#f5f9ff;border:1px solid #c4d4e4;padding:5px 9px;border-radius:8px}.score-row{display:flex;justify-content:space-between;padding:12px;border-bottom:1px solid #d0dae6}#scores h2{font-size:22px}#scores button{margin-top:10px;width:100%}.link{display:block;text-decoration:none;text-align:center;margin:10px 0}.check input{margin:0}[hidden]{display:none!important}#error,#online-status{color:#aa3945;font-size:13px;min-height:20px}body.playing main{max-width:1000px}body.series-results .board{display:none}body.series-results #scores{display:block}
@media(max-width:600px){main{padding:10px 12px}header{padding-bottom:9px;gap:8px}.brand{font-size:24px}header>span{font-size:8px;letter-spacing:.8px}header button{font-size:11px;padding:8px}h1{font-size:32px}.card{padding:16px}.stats{padding:8px}.stats b{font-size:19px}.hud{margin-top:10px}#series-strip{font-size:10px}.board{width:min(100%,calc((100dvh - 285px)*1.384615))}.bottom{font-size:11px}.directions button{padding:8px 14px}.overlay h2{font-size:22px}.overlay p{font-size:12px}.overlay .primary{font-size:16px;padding:12px}.hint{font-size:11px}}
@media(prefers-reduced-motion:reduce){#fill{transition:none}}

@media(max-width:600px){.board{width:min(100%,calc((100dvh - 370px)*1.384615))}}