@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500;600;700&display=swap');
:root{
  --bg:#0f2e22; --felt:#164a33; --felt-light:#1f6a49; --wood:#5c3a21; --wood-light:#7a4e2b;
  --ivory:#f3ebd8; --ink:#1c2b22; --chalk:#4a7fa5; --gold:#d8a438; --maroon:#8c3a3a; --purple:#6b4c8a;
  --panel:#efe6d0; --panel-line:#d9cba7; --radius:14px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:radial-gradient(ellipse at top, #1a5238 0%, var(--bg) 65%);color:var(--ivory);font-family:'Inter',sans-serif;min-height:100vh;padding-bottom:60px;}
::selection{background:var(--gold);color:var(--ink);}
:focus-visible{outline:3px solid var(--chalk);outline-offset:2px;}
.wrap{max-width:920px;margin:0 auto;padding:0 20px;}
.center-wrap{max-width:420px;margin:60px auto;padding:0 20px;}
h1{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(30px,6vw,46px);letter-spacing:1px;margin:0;line-height:0.95;color:var(--ivory);text-shadow:0 3px 0 rgba(0,0,0,0.35);}
h1 span{color:var(--gold);}
.subtitle{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:#bcd6c6;margin-top:6px;}
.panel{background:var(--panel);color:var(--ink);border-radius:var(--radius);border:1px solid var(--panel-line);box-shadow:0 10px 30px rgba(0,0,0,0.25);padding:22px;margin-bottom:20px;}
.panel h2{font-family:'Anton',sans-serif;font-weight:400;font-size:22px;letter-spacing:0.5px;margin:0 0 4px;}
.hint{font-size:13px;color:#5a5040;margin-bottom:16px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:12.5px;font-weight:600;color:#5a5040;margin-bottom:5px;}
.field input, .field select{width:100%;padding:10px 12px;border:1.5px solid var(--panel-line);border-radius:8px;font-family:'Inter',sans-serif;font-size:14.5px;background:#fff;color:var(--ink);}
.field input:focus{border-color:var(--felt);}
.btn{font-family:'Inter',sans-serif;font-weight:600;font-size:14px;padding:10px 16px;border-radius:9px;border:2px solid transparent;cursor:pointer;transition:all .15s ease;}
.btn-primary{background:var(--felt);color:var(--ivory);border-color:var(--felt);}
.btn-primary:hover{background:var(--felt-light);}
.btn-gold{background:var(--gold);color:var(--ink);border-color:var(--gold);}
.btn-gold:hover{filter:brightness(1.08);}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--panel-line);}
.btn-outline:hover{border-color:var(--ink);}
.btn-danger{background:transparent;color:var(--maroon);border-color:var(--maroon);}
.btn-danger:hover{background:var(--maroon);color:var(--ivory);}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.btn-sm{padding:6px 11px;font-size:12.5px;border-radius:7px;}
.btn-block{width:100%;}
.error-box{background:#f8dede;color:#8c1f1f;border-radius:8px;padding:9px 12px;font-size:13.5px;margin-bottom:12px;}
.success-box{background:#dcecdd;color:#25603a;border-radius:8px;padding:9px 12px;font-size:13.5px;margin-bottom:12px;}
a.link{color:var(--gold);text-decoration:none;font-weight:600;}
a.link:hover{text-decoration:underline;}
.ball{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:14px;color:var(--ivory);position:relative;box-shadow:inset -3px -3px 6px rgba(0,0,0,0.35), inset 2px 2px 4px rgba(255,255,255,0.25), 0 2px 4px rgba(0,0,0,0.3);flex-shrink:0;}
.ball::after{content:'';position:absolute;top:5px;left:8px;width:9px;height:5px;background:rgba(255,255,255,0.55);border-radius:50%;transform:rotate(-30deg);}
.ball.r1{background:var(--gold);color:var(--ink);} .ball.r2{background:var(--chalk);} .ball.r3{background:var(--maroon);} .ball.r4{background:var(--purple);} .ball.rn{background:#8a8a86;}
.ball.match{width:26px;height:26px;font-size:12px;background:var(--ivory);color:var(--ink);box-shadow:inset -2px -2px 4px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.3);}
table{width:100%;border-collapse:collapse;font-size:14.5px;}
thead th{text-align:left;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#7a7057;border-bottom:2px solid var(--panel-line);padding:6px 8px;}
tbody td{padding:10px 8px;border-bottom:1px solid var(--panel-line);vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
td.num, th.num{font-family:'IBM Plex Mono',monospace;font-weight:600;text-align:center;}
.player-name{font-weight:600;}
.empty{text-align:center;padding:34px 10px;color:#7a7057;font-size:14.5px;}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.status{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;padding:4px 9px;border-radius:999px;}
.status.done{background:#dcecdd;color:#25603a;} .status.pending{background:#f2e2c4;color:#8a5a12;}
nav.tabs{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap;}
nav.tabs button{font-family:'Anton',sans-serif;font-size:16px;letter-spacing:0.5px;background:transparent;border:2px solid var(--felt-light);color:#cfe6da;padding:9px 18px 7px;border-radius:999px;cursor:pointer;transition:all .15s ease;}
nav.tabs button.active{background:var(--gold);border-color:var(--gold);color:var(--ink);}
nav.tabs button:hover:not(.active){border-color:var(--gold);color:var(--ivory);}
.top-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:32px 0 18px;border-bottom:6px solid var(--wood);}
.role-pill{font-family:'IBM Plex Mono',monospace;font-size:11.5px;padding:8px 14px;border-radius:999px;border:2px solid var(--felt-light);background:rgba(255,255,255,0.05);color:#cfe6da;cursor:pointer;}
.app-version{text-align:center;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.5px;color:#bcd6c6;opacity:.55;margin-top:36px;padding-bottom:14px;}