:root{font-family:system-ui,sans-serif;color:#17233a;background:#eef2f7;font-size:16px}*{box-sizing:border-box}body{margin:0}header{background:#121f33;color:white;padding:22px max(20px,calc((100vw - 1220px)/2));display:flex;justify-content:space-between;gap:16px;align-items:center}.brand{font-size:25px;font-weight:900;letter-spacing:-1px}.brand span{color:#ff9a57}.brand small{display:block;font-size:12px;letter-spacing:2px;margin-top:6px}main{max-width:1260px;margin:auto;padding:28px 20px}h1{font-size:clamp(28px,4vw,38px);margin:0}h2{font-size:20px;margin:0 0 18px}p{line-height:1.5}.top,.sectionhead{display:flex;align-items:center;justify-content:space-between;gap:16px}.top{margin-bottom:18px}.top p{color:#53647b}.layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr);gap:22px}.panel{background:white;border:1px solid #dbe2ec;border-radius:18px;padding:24px;margin-bottom:22px;box-shadow:0 5px 15px #17233a06}.badge{background:#edf1f6;border-radius:20px;padding:6px 12px;font-size:14px;font-weight:700}label{display:block;font-size:14px;font-weight:650;margin-bottom:14px}input,select{display:block;width:100%;font:inherit;background:#f8fafc;color:#17233a;border:1px solid #c6cfdd;border-radius:9px;padding:13px;margin-top:7px}button{font:inherit;font-weight:700;background:#f48337;color:#132035;border:0;border-radius:9px;min-height:46px;padding:12px 18px;cursor:pointer}button:disabled{opacity:.45;cursor:default}.quiet{background:#eaf0f6;color:#34435b}header .quiet{background:#2b3a50;color:white}#connection{font-size:14px}#settings{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}#settings p{grid-column:1/-1}.muted{font-size:14px;color:#61718a}.court{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:#121f33;color:white;border-radius:12px;padding:20px;margin:16px 0}.court h3{font-size:14px;letter-spacing:1px;color:#ffab72;margin-top:0}.court ol{margin:0;padding-left:22px}.court li{padding:8px 0}.court .ten{grid-column:1/-1}.actions{display:flex;flex-wrap:wrap;gap:10px}.row{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #e6eaf0;padding:13px 0}.row strong{font-size:16px}.row small{display:block;font-size:14px;color:#64738a;margin-top:4px}.row button{padding:8px 12px;font-size:14px}.ageTag{font-size:12px;color:#8b440b;background:#fff0df;border-radius:5px;padding:3px 6px;margin-left:7px}.rank{font-weight:800;color:#8390a4;margin-right:12px}.out{opacity:.65}#message{position:sticky;bottom:16px;background:#17233a;color:white;padding:14px 20px;border-radius:10px;display:none}dialog{border:0;border-radius:18px;padding:28px;width:min(450px,90vw)}dialog::backdrop{background:#101b32aa}:focus-visible{outline:3px solid #2763bf;outline-offset:3px}#login{max-width:520px;margin:30px auto}#login h1{font-size:30px}#demo{margin-top:20px}body.busy button{pointer-events:none;opacity:.6}@media(max-width:760px){.layout{grid-template-columns:1fr}header{padding:18px}.panel{padding:20px}.top{align-items:flex-start}#settings{grid-template-columns:1fr}#connection{display:block;margin-bottom:6px}.court{padding:16px;gap:10px}}@media(prefers-reduced-motion:no-preference){button{transition:background .15s,transform .15s}button:hover{filter:brightness(.96)}button:active{transform:translateY(1px)}}