:root { --staff-orange:#ff683b; --staff-line:#ffffff22; }
[hidden] { display:none!important; }
button,input { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:wait; opacity:.5; }
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible { outline:3px solid #5ef0a0; outline-offset:4px; }
.staff-bar { position:fixed; inset:0 0 auto; height:64px; padding:0 28px; z-index:30; display:flex; justify-content:space-between; align-items:center; gap:16px; background:#080d1be8; border-bottom:1px solid var(--staff-line); backdrop-filter:blur(16px); }
.staff-brand { text-decoration:none; color:#fff; letter-spacing:.06em; font-size:20px; white-space:nowrap; }
.staff-brand span { display:inline-block; margin-left:14px; font:10px system-ui,sans-serif; letter-spacing:.14em; color:#9ca8bf; }
.staff-nav { display:flex; align-items:center; gap:8px; }
.staff-nav button,.leaderboard-paging button,.save-status button { border:1px solid var(--staff-line); border-radius:999px; padding:10px 16px; background:#151e30; color:#f0f3fa; font:600 13px system-ui,sans-serif; }
.staff-nav button:hover,.leaderboard-paging button:hover { background:#26334b; }
.connection-badge { display:flex; align-items:center; gap:8px; }
#connection-dot { width:7px; height:7px; background:#eaaa66; border-radius:50%; }
#connection-dot.connected { background:#5ef0a0; box-shadow:0 0 10px #5ef0a066; }
#connection-dot[data-state="connecting"] { background:#f4cd62; box-shadow:0 0 10px #f4cd6233; }
#game-stage { position:absolute; inset:64px 0 0; }
.staff-eyebrow { margin:0; color:#ff9973; font:700 11px system-ui,sans-serif; letter-spacing:.18em; }
.staff-intro { max-width:360px; margin:10px auto 6px; text-align:center; font:400 18px/1.5 system-ui,sans-serif; color:#e1e6f0; }
.staff-small { margin:0; max-width:420px; color:#b8c3d6; font:13px/1.5 system-ui,sans-serif; text-align:center; }
[data-screen="launch"] { overflow:auto; padding:24px 16px; justify-content:safe center; }
[data-screen="launch"] .hero { display:flex; flex-direction:column; align-items:center; justify-content:center; top:0; width:100%; min-height:min-content; isolation:isolate; }
[data-screen="launch"] .title-hero { position:relative; flex:none; width:min(80vw,760px); aspect-ratio:1739 / 350; margin:0; max-height:none; animation-delay:0s; animation-duration:.7s; }
[data-screen="launch"] .title-hero img { position:absolute; top:50%; left:0; width:100%; height:auto; transform:translateY(-50%); pointer-events:none; }
[data-screen="launch"] .hero-actions { position:relative; inset:auto; display:flex; flex-direction:column; align-items:center; width:min(100%,560px); gap:18px; margin:clamp(24px,5vh,48px) 0 0; z-index:1; }
[data-screen="launch"] .pill-button { animation-delay:0s; animation-duration:.5s; font-size:clamp(19px,3vw,30px); padding:24px 48px 17px; }
[data-screen="launch"] .staff-intro { margin:0; max-width:100%; }
[data-screen="launch"] .staff-small { margin:0; max-width:100%; }
.staff-dialog { box-sizing:border-box; width:min(480px,calc(100vw - 28px)); max-height:calc(100dvh - 32px); padding:32px; overflow:auto; background:linear-gradient(145deg,#192238,#0c1220); color:#edf1fa; border:1px solid #65749366; border-radius:24px; box-shadow:0 30px 120px #000b; font:400 14px/1.5 system-ui,sans-serif; user-select:text; -webkit-user-select:text; }
.staff-dialog::backdrop { background:#030813d9; backdrop-filter:blur(12px); }
.staff-dialog h1,.staff-dialog h2 { margin:10px 0; font-size:29px; line-height:1.15; letter-spacing:-.035em; font-weight:700; }
.dialog-intro { color:#bdc8dd; margin:10px 0 22px; }
.staff-dialog label { display:block; font-size:13px; font-weight:600; color:#d6def0; margin:16px 0 0; }
.staff-dialog input:not([type="checkbox"]) { display:block; width:100%; margin-top:7px; padding:13px 14px; color:white; background:#070e1c; border:1px solid #6c7a9555; border-radius:10px; font:400 16px/1.4 system-ui,sans-serif; user-select:text; }
.staff-dialog input:not([type="checkbox"]):focus { border-color:#91a9da; }
.staff-dialog .remember { display:flex; align-items:center; gap:10px; font-weight:400; margin:16px 0 6px; }
.remember input { width:18px; height:18px; accent-color:#ff865b; }
.name-fields { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field-help { margin:8px 0; color:#8e9bb5; font-size:12px; line-height:1.5; }
.form-error { color:#ffb2a3; min-height:20px; margin:12px 0; }
.staff-primary { display:block; width:100%; border:0; border-radius:11px; padding:14px 20px; color:#160b08; font:700 15px system-ui,sans-serif; background:linear-gradient(140deg,#ff9a63,#ff683b); box-shadow:0 5px 0 #7b2d19; }
.staff-primary:hover { filter:brightness(1.08); }
.staff-text-button { display:block; margin:18px auto 0; border:0; background:none; color:#cbd6ef; text-decoration:underline; text-underline-offset:4px; font:13px system-ui,sans-serif; }
.login-logo { display:block; width:240px; max-width:90%; margin:-12px auto -14px; }
.login-dialog .staff-eyebrow,.login-dialog .field-help:last-child { text-align:center; }
.login-dialog h1 { text-align:center; margin-top:0; }
.login-dialog .dialog-intro { text-align:center; margin-bottom:8px; }
.dialog-close { position:absolute; right:14px; top:10px; padding:2px 10px; border:0; background:none; color:#b8c4dc; font:28px system-ui,sans-serif; }
.connection-detail { padding:12px; border:1px solid var(--staff-line); border-radius:8px; margin:22px 0 8px; }
.connection-detail[data-state="connected"] { color:#84f5ad; border-color:#5ef0a077; background:#5ef0a010; }
.connection-detail[data-state="connecting"] { color:#f7d977; border-color:#f4cd6266; background:#f4cd6210; }
.connection-close { margin-top:24px; }
.connection-page { position:fixed; inset:0; z-index:80; display:grid; place-items:safe center; padding:24px; overflow:auto; background:radial-gradient(ellipse at 50% 35%,#1b2b45,#080f1def 65%); font:14px/1.5 system-ui,sans-serif; }
.connection-page-card { width:min(100%,470px); padding:36px 32px; border:1px solid #ffffff20; border-radius:24px; background:#101a2eea; text-align:center; box-shadow:0 24px 90px #0006; }
.connection-page h1 { margin:22px 0 12px; font:700 clamp(26px,4vw,34px)/1.15 system-ui,sans-serif; letter-spacing:-.035em; }
.connection-page .dialog-intro { margin:16px 0 24px; }
.connection-page-status { min-height:42px; margin:0; color:#f7d977; font-size:15px; overflow-wrap:anywhere; }
.connection-page[data-state="connected"] .connection-page-status { color:#84f5ad; }
.connection-orb { position:relative; display:grid; place-items:center; width:84px; height:84px; margin:28px auto 0; border-radius:50%; background:#f4cd6210; color:#f4cd62; }
.connection-orb::before { content:""; position:absolute; inset:0; border:3px solid #f4cd6228; border-top-color:#f4cd62; border-radius:50%; animation:connection-spin 1.1s linear infinite; }
.connection-orb::after { content:""; width:14px; height:14px; border-radius:50%; background:currentColor; box-shadow:0 0 24px #f4cd6255; }
.connection-page[data-state="connected"] .connection-orb { background:#5ef0a010; color:#84f5ad; }
.connection-page[data-state="connected"] .connection-orb::before { animation:none; border-color:#5ef0a066; }
.connection-page[data-state="connected"] .connection-orb::after { content:"✓"; width:auto; height:auto; background:none; box-shadow:none; font:36px system-ui,sans-serif; }
.connection-page-actions { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.connection-page[data-state="connected"] #connection-page-close { grid-column:1 / -1; }
.connection-page-actions .staff-text-button { margin:0; }
@keyframes connection-spin { to { transform:rotate(360deg); } }
@media(max-width:500px) { .connection-page { padding:16px; } .connection-page-card { padding:28px 22px; } }
@media(prefers-reduced-motion:reduce) { .connection-orb::before { animation:none; } }
.omni-diagnostics { white-space:pre-wrap; overflow-wrap:anywhere; max-height:220px; overflow:auto; font:11px/1.6 ui-monospace,monospace; }
.staff-dialog details { margin-top:24px; padding-top:16px; border-top:1px solid var(--staff-line); color:#aab8d1; font-size:13px; }
.staff-dialog summary { cursor:pointer; color:#e0e7f5; }
.leaderboard-dialog { width:min(820px,calc(100vw - 28px)); }
.staff-table-wrap { overflow:auto; }
.staff-table { width:100%; border-collapse:collapse; font-size:14px; }
.staff-table th { text-align:left; color:#8f9db9; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.staff-table th,.staff-table td { padding:13px 10px; border-bottom:1px solid #ffffff12; }
.staff-table th:nth-child(n+3),.staff-table td:nth-child(n+3) { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.staff-table tr.is-you { background:#5ef0a00d; color:#8bf6b6; }
.staff-table td:first-child { color:#97a8c8; }
.leaderboard-paging { display:flex; justify-content:space-between; gap:10px; margin-top:20px; }
.personal-best { color:#8bf6b6; }
.app-notice { position:fixed; z-index:50; top:76px; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100vw - 32px); padding:12px 18px; border:1px solid #78664f; border-radius:10px; background:#241e19; color:#ffdcad; font:13px/1.4 system-ui,sans-serif; text-align:center; }
.game-progress { position:fixed; inset:auto 50% 22px auto; transform:translateX(50%); z-index:15; display:flex; gap:20px; align-items:center; padding:12px 22px; border-radius:999px; border:1px solid var(--staff-line); background:#080e1ce8; color:#b6c7e5; font:13px system-ui,sans-serif; white-space:nowrap; }
.game-progress strong { color:#8cfdc3; }
.practice-controls { position:fixed; z-index:20; bottom:82px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:7px; padding:10px 12px; border-radius:14px; background:#101b2df5; border:1px solid #f4ac6b66; }
.practice-controls span { color:#ffb986; font:9px system-ui,sans-serif; width:90px; }
.practice-controls button { padding:9px 13px; border:1px solid var(--staff-line); border-radius:7px; background:#263b58; color:#fff; }
.save-status { position:fixed; z-index:20; bottom:14px; left:50%; transform:translateX(-50%); width:calc(100% - 32px); text-align:center; color:#c8d4eb; font:13px/1.4 system-ui,sans-serif; pointer-events:none; }
.save-status p { margin:5px 0; }
.save-status button { pointer-events:auto; margin:3px; padding:7px 14px; }
.screen-leaderboard { display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,420px); grid-template-rows:minmax(0,1fr) auto; grid-template-areas:"summary standings" "actions standings"; align-items:stretch; justify-content:stretch; gap:24px 32px; padding:28px 32px 110px; }
.screen-leaderboard .summary-card { grid-area:summary; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:18px; width:100%; max-width:720px; justify-self:center; padding:28px; border-radius:22px; min-height:0; overflow:auto; }
.screen-leaderboard .summary-cell,.screen-leaderboard .summary-player { align-items:center; text-align:center; gap:10px; max-width:100%; }
.screen-leaderboard .summary-name { font-size:clamp(24px,3.7vw,52px); overflow-wrap:anywhere; }
.screen-leaderboard .summary-label { font:600 12px system-ui,sans-serif; letter-spacing:.16em; }
.screen-leaderboard .summary-time { font-size:clamp(48px,6.5vw,92px); white-space:nowrap; }
.screen-leaderboard .summary-darts { font-size:36px; }
.screen-leaderboard .summary-divider { width:min(100%,280px); height:1px; flex:none; align-self:center; margin:4px 0; }
.screen-leaderboard .standings { grid-area:standings; width:100%; min-height:0; height:100%; margin:0; }
#live-panel { width:100%; height:100%; max-width:none; min-height:0; border-radius:22px; padding:24px 20px 16px; background:#0b1120ed; }
#live-title { flex:none; font:700 20px/1.3 system-ui,sans-serif; letter-spacing:.03em; }
#live-note { flex:none; font:13px/1.5 system-ui,sans-serif; margin:0 0 12px; }
#live-rows { overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#5ef0a066 transparent; }
#live-rows .standings-row { flex:0 0 auto; min-height:66px; gap:10px; padding:9px 0; animation:none; }
#live-rows .row-rank { flex:none; width:25px; font:13px system-ui,sans-serif; }
#live-rows .row-avatar { display:none; }
#live-rows .row-name { font:600 14px/1.3 system-ui,sans-serif; white-space:normal; overflow-wrap:anywhere; }
#live-rows .row-score { min-width:82px; gap:5px; }
#live-rows .row-time { font:700 16px/1.2 system-ui,sans-serif; font-variant-numeric:tabular-nums; }
#live-rows .row-darts { font:12px system-ui,sans-serif; letter-spacing:0; }
#live-rows .row-you { font:10px system-ui,sans-serif; padding:4px 6px; }
#live-rows .standings-empty { padding:20px 0; font:14px/1.6 system-ui,sans-serif; }
.scores-footer { flex:none; padding-top:12px; border-top:1px solid #ffffff18; color:#a7b6d1; font:12px/1.5 system-ui,sans-serif; }
.scores-footer p { margin:0; }
.scores-footer button { margin-top:8px; background:transparent; color:#8bf6b6; border:1px solid #5ef0a044; border-radius:8px; padding:8px 12px; }
.screen-leaderboard .standings-actions { grid-area:actions; justify-self:center; display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
.screen-leaderboard .standings-actions .pill-button { font-size:18px; padding:18px 30px 12px; }
.row-score { min-width:100px; }
@media(min-width:700px) { #board,#board-pulse { height:82dvh; max-width:88vw; } }
@media(max-width:600px) {
 .staff-bar { height:56px; padding:0 12px; gap:6px; }
 .staff-brand { font-size:15px; } .staff-brand span { display:none; }
 .staff-nav { gap:5px; } .staff-nav button { font-size:11px; padding:8px 9px; }
 #game-stage { top:56px; }
 .staff-dialog { padding:24px; border-radius:18px; }
 .staff-dialog h1,.staff-dialog h2 { font-size:25px; }
 .name-fields { gap:10px; }
 .login-logo { width:190px; }
 .game-progress { bottom:78px; gap:12px; padding:10px 13px; font-size:11px; }
 .game-progress span:last-child { max-width:140px; white-space:normal; text-align:center; }
 .practice-controls { bottom:126px; gap:5px; padding:8px; }
 .practice-controls span { display:none; } .practice-controls button { padding:8px 12px; }
 .staff-table th,.staff-table td { padding:12px 5px; font-size:12px; }
 .staff-intro { font-size:15px; margin:4px 20px; }
 .staff-small { font-size:12px; margin:0 20px; }
 .save-status { font-size:11px; bottom:8px; }
}
@media(max-width:760px) {
 .screen-leaderboard { grid-template-columns:1fr; grid-template-rows:auto auto minmax(150px,1fr); grid-template-areas:"summary" "actions" "standings"; gap:16px; padding:16px 14px 104px; }
 .screen-leaderboard .summary-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) auto; padding:18px 14px; gap:12px; }
 .screen-leaderboard .summary-divider { display:none; }
 .screen-leaderboard .summary-cell { gap:8px; }
 .screen-leaderboard .summary-name { font-size:20px; }
 .screen-leaderboard .summary-time { font-size:clamp(25px,5.9vw,42px); }
 .screen-leaderboard .summary-darts { font-size:24px; }
 .screen-leaderboard .summary-label { font-size:9px; letter-spacing:.1em; }
 .screen-leaderboard .standings-actions .pill-button { font-size:16px; padding:16px 26px 11px; }
 #live-panel { padding:18px 16px 12px; }
 #live-title { font-size:18px; }
}
@media(max-height:580px) and (min-width:761px) {
 .screen-leaderboard { padding:16px 24px 85px; gap:16px 24px; }
 .screen-leaderboard .summary-card { padding:16px; gap:10px; }
 .screen-leaderboard .summary-time { font-size:48px; }
 .screen-leaderboard .summary-name { font-size:26px; }
 .screen-leaderboard .summary-darts { font-size:25px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }