html,body,#root{background:#bfe3f2;width:100%;height:100%;margin:0;font-family:Avenir Next,Segoe UI,Noto Sans TC,system-ui,sans-serif;overflow:hidden}.hud{pointer-events:none;color:#0b3a5a;z-index:10;position:fixed;inset:0}.hud-panel{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#f5f5f5d1;border-radius:14px;box-shadow:0 6px 18px #003c642e}.hud-top-right{flex-direction:column;align-items:flex-end;gap:10px;display:flex;position:absolute;top:16px;right:16px}.compass{flex-direction:column;align-items:center;width:150px;padding:10px 12px 8px;display:flex}.compass-ring{fill:#a2d5f259;stroke:#0077be;stroke-width:2px}.compass-nogo{fill:#ff6f6133}.compass-tick{stroke:#0077be;stroke-width:2px}.compass-boat{fill:#c19a6b;stroke:#8a6a45;stroke-width:1.5px}.compass-wind{stroke:#0b3a5a;stroke-width:3px;stroke-linecap:round}.compass-wind-head{fill:#0b3a5a}.compass-readout{gap:2px;width:100%;margin:6px 0 0;font-size:13px;display:grid}.compass-readout div{justify-content:space-between;display:flex}.compass-readout dt{opacity:.7}.compass-readout dd{font-variant-numeric:tabular-nums;margin:0;font-weight:700}.compass-readout dd.warn{color:#d9493b}.hud-help{background:#f5f5f5b3;border-radius:999px;padding:6px 12px;font-size:13px;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}.hud-top-left{position:absolute;top:16px;left:16px}.race-panel{gap:6px;min-width:170px;padding:12px 14px;display:grid}.race-row{justify-content:space-between;align-items:baseline;gap:16px;display:flex}.race-label{opacity:.7;font-size:12px}.race-value{font-variant-numeric:tabular-nums;font-size:20px;font-weight:800}.race-next{border-top:1px solid #0077be33;align-items:center;gap:10px;padding-top:8px;display:flex}.race-next .race-value{font-size:16px}.race-dist{font-variant-numeric:tabular-nums;opacity:.8;font-size:12px}.next-ring{fill:#a2d5f266;stroke:#0077be;stroke-width:1.5px}.next-arrow{fill:#ff6f61}.countdown{color:#f5f5f5;text-shadow:0 6px 24px #003c6473;font-size:120px;font-weight:900;animation:.9s ease-out pop;position:absolute;top:38%;left:50%;transform:translate(-50%,-50%)}.countdown.go{color:#ff6f61;font-size:84px}@keyframes pop{0%{opacity:0;transform:translate(-50%,-50%)scale(1.6)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}.finish-backdrop{pointer-events:auto;background:#003c6440;place-items:center;display:grid;position:absolute;inset:0}.finish-card{text-align:center;min-width:320px;padding:24px 28px}.finish-card h2{margin:0 0 8px;font-size:30px}.finish-time{font-variant-numeric:tabular-nums;margin:0 0 16px;font-size:18px}.restart-btn{font:inherit;color:#fff;cursor:pointer;background:#ff6f61;border:none;border-radius:999px;padding:10px 22px;font-size:16px;font-weight:700;box-shadow:0 4px 12px #ff6f6166}.restart-btn:hover{background:#ff5a4a}.results{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%;margin:0 0 18px;font-size:15px}.results th{opacity:.65;text-align:left;padding:4px 8px;font-size:12px;font-weight:600}.results td{text-align:left;border-top:1px solid #0077be26;padding:7px 8px}.results tr.me td{color:#d9493b;font-weight:800}.dnf-progress{opacity:.75;margin-left:4px;font-size:12px}