:root{color-scheme:dark;font-family:Inter,Segoe UI,Arial,sans-serif;background:#0b111c;color:#e9f1ff}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 35%,#16273a,transparent 65%),#0b111c}button,select,input{font:inherit}button,select{border:1px solid #334257;border-radius:9px;background:#182334;color:#e0ebfa;padding:10px 15px;cursor:pointer}button:hover{background:#2a3c53}button:disabled{opacity:.4;cursor:default}header{max-width:1320px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:22px 26px;border-bottom:1px solid #253044}.brand{display:flex;align-items:center;gap:12px;font-size:16px;letter-spacing:2px}.brand b{color:#58d6c3}.brand small{display:block;color:#7c92aa;font-size:11px;letter-spacing:1px;margin-top:5px}.logo{background:white;color:#111;border:7px solid #070b12;border-radius:50%;width:46px;height:46px;display:grid;place-items:center;font-weight:bold;font-size:22px;box-shadow:0 0 0 1px #52677b}main{max-width:1280px;padding:20px 28px;margin:auto}.top{display:flex;justify-content:space-between;align-items:center}.tag{font-size:10px;color:#53d6c0;letter-spacing:3px}h1{font-size:25px;font-weight:500;margin:8px 0 22px}.score{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:10px;padding:16px 20px;background:#121d2b;border:1px solid #29394d;border-radius:13px 13px 0 0}.score>div:last-child{text-align:right}.score small{display:block;color:#8299b1;font-size:12px;margin-top:6px}.score .active{color:#59e0c1}.status{text-align:center;font-size:14px}.status small{font-size:11px}.arena{position:relative;padding:0 5px;background:#101824;border:1px solid #29394d;border-top:0;border-radius:0 0 15px 15px;box-shadow:0 22px 55px #0006}#table{display:block;width:100%;height:auto;touch-action:none}.table-label{position:absolute;bottom:6%;left:0;width:100%;text-align:center;font-size:9px;letter-spacing:3px;color:#a9bbca;pointer-events:none}.table-label span{color:#5a6f85;font-size:8px;margin-left:10px}.controls{display:grid;grid-template-columns:1.3fr 1fr 1.3fr;gap:20px;margin-top:20px;background:#131f2e;border:1px solid #2b3b51;border-radius:14px;padding:12px 20px;align-items:center}.controls b{font-size:13px}.spinbox{display:flex;align-items:center;gap:12px}#spin{width:105px;height:105px;touch-action:none}.spinbox small{display:block;color:#8aa5be;font-size:11px;margin:8px 0}.spinbox button{font-size:11px;padding:6px 10px}.aim{text-align:center;border-left:1px solid #2b3b51;border-right:1px solid #2b3b51}.aim>div{margin:10px}.aim span{display:inline-block;min-width:70px;color:#8aa5be;font-size:12px}.aim label{font-size:11px;color:#8aa5be}.power label{display:flex;justify-content:space-between;font-size:12px}.power input{width:100%;accent-color:#50d4ba;margin:15px 0}.shoot{width:100%;background:#4bd0b3;color:#061e24;border:0;font-weight:bold;letter-spacing:2px}.shoot:hover{background:#7ce8cd}footer{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px}footer button{font-size:12px;background:transparent}#notice{color:#e9bc7b;font-size:12px}#network:not([hidden]){display:flex;flex-wrap:wrap;gap:8px;background:#182535;padding:14px;border-radius:10px;margin-bottom:12px}input:not([type=range]):not([type=checkbox]){background:#0c1724;color:white;border:1px solid #43546c;border-radius:7px;padding:10px;min-width:0}#server{width:300px}#name{width:130px}#room{width:160px}#roomInfo{align-self:center;font-size:12px;color:#58dfc4}dialog{background:#152234;color:#e0eaf7;border:1px solid #43566f;border-radius:16px;max-width:560px;line-height:1.6}dialog::backdrop{background:#000a}@media(max-width:700px){header{padding:12px}.brand{font-size:12px;letter-spacing:1px}header>button{font-size:10px;padding:8px}main{padding:14px 8px}h1{font-size:18px}.top select{font-size:12px;max-width:145px}.score{padding:10px 8px;font-size:12px}.score small{font-size:10px}.status{font-size:11px}.controls{grid-template-columns:1fr 1fr;gap:8px;padding:8px}.spinbox{gap:2px}#spin{width:83px;height:83px}.spinbox b{font-size:11px}.aim{border-right:0}.power{grid-column:1 / -1;display:grid;grid-template-columns:90px 1fr 120px;align-items:center;gap:10px}.power input{margin:0}.power label{gap:7px}.shoot{font-size:12px;padding:12px 5px}.table-label{font-size:6px}.table-label span{font-size:5px}footer button{padding:8px;font-size:11px}}@media(orientation:landscape) and (max-height:600px){header,.top{display:none}main{max-width:1050px;padding:5px}.arena{max-width:800px;margin:auto}.controls{margin-top:5px;padding:3px 10px}#spin{width:65px;height:65px}.score{padding:5px}footer{margin:4px}}

.author{color:#8db2c9;font-size:12px;flex-basis:100%;padding:3px 0 8px}
