
    :root { color-scheme: light; --paper:#f4f3ed; --ink:#16221c; --acid:#c5f466; --muted:#70786e; font-family: Arial, Helvetica, sans-serif; background:var(--paper); color:var(--ink); }
    * { box-sizing:border-box; } body { margin:0; min-height:100vh; } ::selection { background:var(--acid); color:var(--ink); }
    .shell { max-width:1180px; padding:0 40px 32px; margin:auto; }
    header { display:flex; justify-content:space-between; align-items:center; min-height:100px; border-bottom:1px solid #16221c25; gap:20px; }
    .brand { display:flex; align-items:center; gap:12px; font-size:25px; font-weight:900; letter-spacing:-1.5px; }
    .ball { display:grid; place-items:center; background:var(--acid); border-radius:50%; width:36px; height:36px; } .ball svg { width:26px; height:26px; }
    .league { font-size:11px; letter-spacing:1.6px; font-weight:700; } .league:before { content:''; display:inline-block; width:7px; height:7px; background:#548a2b; border-radius:50%; margin-right:9px; }
    main { padding-top:44px; } .hero { position:relative; margin-bottom:36px; overflow:hidden; }
    .eyebrow { color:var(--muted); font-size:11px; letter-spacing:2px; font-weight:700; display:flex; align-items:center; gap:12px; }
    .eyebrow:before { content:''; width:26px; height:1px; background:var(--muted); }
    h1 { font-family:Impact,'Arial Narrow',Arial,sans-serif; text-transform:uppercase; font-size:clamp(64px,9vw,116px); font-weight:900; line-height:.94; margin:24px 0 22px; letter-spacing:-3px; position:relative; z-index:1; }
    h1 span { color:#688246; } .intro { color:var(--muted); font-size:14px; line-height:1.6; max-width:390px; margin:0; }
    .court { position:absolute; width:255px; height:255px; border:1px solid #16221c14; border-radius:50%; top:0; right:15px; transform:rotate(-25deg); }
    .court:before,.court:after { content:''; position:absolute; border:1px solid #16221c14; } .court:before { width:100%; height:80px; border-radius:50%; left:0; top:86px; } .court:after { height:100%; width:85px; border-radius:50%; left:84px; top:0; }
    .section-label { display:flex; justify-content:space-between; align-items:center; font-size:11px; letter-spacing:1.8px; font-weight:700; margin-bottom:14px; } .section-label span:last-child { color:var(--muted); font-weight:400; letter-spacing:0; }
    .card { background:var(--ink); color:var(--paper); border-radius:4px; padding:26px 32px 0; position:relative; overflow:hidden; }
    .card:before { content:''; width:84px; height:4px; background:var(--acid); position:absolute; top:0; left:32px; }
    .meta { display:flex; gap:12px; justify-content:space-between; align-items:center; color:#b5bdb3; font-size:12px; }
    .badge { color:var(--acid); font-size:10px; font-weight:700; letter-spacing:1px; display:flex; align-items:center; gap:7px; text-transform:uppercase; }
    .badge:before { content:'✓'; display:grid; place-items:center; width:17px; height:17px; border:1px solid #c5f46666; border-radius:50%; }
    .scoreboard { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px; padding:38px 0 32px; text-align:center; }
    .team { font-size:24px; font-weight:700; letter-spacing:-.7px; overflow-wrap:anywhere; } .team-mark { display:grid; place-items:center; width:60px; height:60px; margin:0 auto 15px; border:1px solid #ffffff30; border-radius:50%; font-family:Impact,'Arial Narrow',sans-serif; font-size:25px; color:#dae2d2; background:#ffffff06; }
    .team small { display:block; color:#b5bdb3; font-size:9px; letter-spacing:2px; font-weight:400; margin-top:9px; }
    .score { font-family:Impact,'Arial Narrow',Arial,sans-serif; font-size:clamp(70px,12vw,140px); font-weight:900; letter-spacing:-3px; white-space:nowrap; font-variant-numeric:tabular-nums; line-height:1; }
    .colon { color:#5c6c60; padding:0 12px; font-size:.68em; vertical-align:12%; } .winner { color:var(--acid); }
    .outcome { text-align:center; margin:-8px 0 28px; color:#b5bdb3; font-size:11px; letter-spacing:.3px; }
    .details { border-top:1px solid #ffffff18; padding:20px 0; display:flex; align-items:center; gap:16px; justify-content:space-between; font-size:12px; color:#b5bdb3; }
    a { color:var(--acid); text-decoration:none; } a:hover { text-decoration:underline; text-underline-offset:4px; }
    .footer { display:flex; align-items:center; gap:16px; justify-content:space-between; margin-top:16px; }
    #updated { color:var(--muted); font-size:11px; line-height:1.6; max-width:70%; }
    button { font:inherit; font-size:12px; font-weight:700; color:var(--ink); background:transparent; border:1px solid #16221c35; padding:12px 18px; border-radius:30px; cursor:pointer; white-space:nowrap; transition:background .15s,transform .15s; }
    button:hover { background:var(--acid); border-color:var(--acid); transform:translateY(-1px); } button:disabled { opacity:.5; cursor:wait; } :focus-visible { outline:3px solid #8bb444; outline-offset:5px; }
    .state { padding:65px 20px; color:#b5bdb3; text-align:center; line-height:1.7; } [hidden] { display:none !important; }
    .bottom { margin-top:38px; border-top:1px solid #16221c20; padding-top:18px; display:flex; justify-content:space-between; color:var(--muted); font-size:10px; letter-spacing:1px; }
    .protocol-toggle { border:0; padding:0; border-radius:0; background:none; color:var(--acid); font-size:12px; font-weight:400; }
    .protocol-toggle:hover { background:none; text-decoration:underline; transform:none; text-underline-offset:4px; }
    .protocol { margin-top:36px; border-top:1px solid #16221c25; padding-top:26px; }
    .protocol-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:20px; }
    .protocol h2 { font-size:28px; letter-spacing:-1px; margin:0 0 8px; }
    .protocol-heading p { font-size:12px; color:var(--muted); line-height:1.6; margin:0; }
    .protocol-heading a { color:var(--ink); display:inline-block; margin-top:8px; font-size:12px; text-decoration:underline; text-underline-offset:3px; }
    .protocol-state { color:var(--muted); padding:30px 0; font-size:14px; }
    .protocol-team { border:1px solid #16221c25; border-radius:4px; overflow:hidden; margin-bottom:20px; background:#fffef9; }
    .protocol-team-head { padding:18px 20px; display:flex; align-items:center; justify-content:space-between; background:var(--ink); color:var(--paper); }
    .protocol-team h3 { margin:0; font-size:20px; letter-spacing:-.5px; } .protocol-team-head strong { color:var(--acid); font-size:26px; }
    .table-scroll { overflow:auto; } table { width:100%; min-width:820px; border-collapse:collapse; font-size:12px; font-variant-numeric:tabular-nums; }
    caption { text-align:left; padding:12px 20px; color:var(--muted); font-size:11px; }
    th,td { padding:12px 10px; text-align:right; border-bottom:1px solid #16221c12; white-space:nowrap; }
    thead th { font-size:10px; color:var(--muted); font-weight:700; background:#efeee6; }
    th:first-child { text-align:left; padding-left:20px; min-width:210px; position:sticky; left:0; background:#fffef9; z-index:1; }
    thead th:first-child { background:#efeee6; } tbody th { font-weight:400; } tbody tr:hover td,tbody tr:hover th { background:#f1f5e8; }
    td.points { font-weight:800; } .jersey { display:inline-block; min-width:26px; color:var(--muted); font-size:10px; }
    .starter { font-size:9px; color:#526c2d; margin-left:5px; } tfoot th,tfoot td { font-weight:700; background:#e6eddb; border-bottom:0; } tfoot th:first-child { background:#e6eddb; }
    .protocol-note { color:var(--muted); font-size:11px; line-height:1.8; margin:16px 0 0; }
    .protocol-retry { margin-top:10px; } @media(max-width:480px) { .protocol-heading { gap:10px; } .protocol h2 { font-size:24px; } th:first-child { min-width:190px; padding-left:14px; } .protocol-team-head { padding:16px; } }
    @media (max-width:760px) { .shell { padding:0 24px 28px; } header { min-height:80px; } main { padding-top:32px; } .court { right:-70px; opacity:.55; } .card { padding:24px 22px 0; } .team { font-size:20px; } .score { font-size:90px; } h1 { font-size:80px; } }
    @media (max-width:480px) { .shell { padding:0 18px 24px; } .brand { font-size:22px; } .league { font-size:9px; letter-spacing:.5px; } h1 { font-size:68px; letter-spacing:-2px; } .hero { margin-bottom:30px; } .intro { font-size:13px; max-width:270px; } .court { width:210px; height:210px; right:-110px; top:12px; } .card { padding:22px 16px 0; } .meta { align-items:flex-start; flex-direction:column; gap:12px; } .scoreboard { grid-template-columns:1fr 1fr; gap:24px 12px; padding:28px 0; } .score { grid-column:1/-1; grid-row:1; font-size:104px; } .team-mark { width:46px; height:46px; font-size:21px; margin-bottom:10px; } .team { font-size:22px; } .outcome { margin:0 0 24px; } .details { font-size:11px; flex-wrap:wrap; } .footer { align-items:center; gap:10px; } #updated { max-width:65%; } button { padding:10px 13px; } .bottom { margin-top:30px; } }
    [data-page] main { display:none; }
    [data-page="matches"] #matchView, [data-page="rules"] #rulesView, [data-page="players"] #playersView, [data-page="round"] #roundView { display:block; }
    .site-nav { display:flex; gap:6px; padding:18px 0 0; }
    .site-nav a { color:var(--muted); font-size:12px; font-weight:700; padding:11px 18px; border-radius:30px; }
    .site-nav a[aria-current="page"] { color:var(--ink); background:var(--acid); }
    .site-nav a:hover { text-decoration:none; background:#e6e7da; } .site-nav a[aria-current="page"]:hover { background:var(--acid); }
    .rules-hero { margin-bottom:30px; } .rules-hero h1 { font-size:clamp(54px,7vw,90px); } .rules-hero .intro { max-width:540px; }
    .rules-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:30px; }
    .rules-summary div { padding:22px; border:1px solid #16221c25; border-radius:4px; }
    .rules-summary strong { display:block; font-family:Impact,'Arial Narrow',sans-serif; font-size:46px; font-weight:400; line-height:1; margin-bottom:10px; }
    .rules-summary span { font-size:11px; color:var(--muted); }
    .rules-block { border-top:1px solid #16221c25; padding:26px 0; display:grid; grid-template-columns:220px 1fr; gap:24px; }
    .rules-block h2 { font-size:20px; letter-spacing:-.6px; margin:0; } .rules-block h2 small { display:block; font-size:10px; color:var(--muted); letter-spacing:1px; margin-bottom:8px; }
    .rules-copy { font-size:14px; line-height:1.75; } .rules-copy p { margin:0 0 12px; } .rules-copy p:last-child { margin-bottom:0; }
    .rules-copy ul { padding-left:18px; margin:0; } .rules-copy li { margin:7px 0; }
    .rules-formula { background:var(--ink); color:var(--paper); padding:22px; border-radius:4px; margin:14px 0; font-size:14px; line-height:1.8; }
    .rules-formula strong { color:var(--acid); } .rules-table { min-width:0; font-size:13px; }
    .rules-table th:first-child { position:static; min-width:0; background:transparent; padding-left:12px; }
    .rules-table th,.rules-table td { white-space:normal; padding:10px 12px; } .rules-table th { font-weight:400; }
    .rules-note { background:#e5edda; padding:18px 22px; font-size:12px; line-height:1.7; border-radius:4px; margin-top:20px; }
    .rules-example { border-left:3px solid #8daf50; padding-left:16px; margin:16px 0; }
    .rules-copy a { color:#526c2d; text-decoration:underline; text-underline-offset:3px; }
    @media(max-width:760px) { .rules-block { grid-template-columns:1fr; gap:16px; } }
    @media(max-width:480px) { .rules-hero h1 { font-size:56px; letter-spacing:-1px; } .rules-summary { gap:8px; } .rules-summary div { padding:16px 10px; } .rules-summary strong { font-size:36px; } .rules-summary span { font-size:10px; } .rules-copy { font-size:13px; } .rules-formula { padding:18px; font-size:13px; } }
    .site-nav { flex-wrap:wrap; }
    .players-filters { display:grid; grid-template-columns:2fr 1fr 1fr; gap:12px; margin:26px 0 18px; }
    .players-filters label { font-size:11px; color:var(--muted); }
    .players-filters input,.players-filters select { width:100%; display:block; margin-top:8px; padding:13px 12px; border:1px solid #16221c35; border-radius:4px; background:#fffef9; color:var(--ink); font:inherit; font-size:14px; }
    .players-meta { display:flex; justify-content:space-between; gap:14px; align-items:center; font-size:12px; color:var(--muted); margin-bottom:20px; }
    .players-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
    .player-card { background:#fffef9; border:1px solid #16221c25; border-radius:4px; padding:20px; }
    .player-card h2 { font-size:20px; letter-spacing:-.6px; margin:18px 0 8px; overflow-wrap:anywhere; }
    .player-club { font-size:12px; color:var(--muted); }
    .player-top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
    .position-chip { background:#e6eddb; padding:7px 9px; font-size:10px; border-radius:20px; }
    .player-price { font-weight:800; font-size:22px; } .player-price small { font-size:10px; font-weight:400; }
    .player-stats { display:flex; gap:20px; border-top:1px solid #16221c20; margin-top:18px; padding-top:15px; }
    .player-stats span { font-size:10px; color:var(--muted); } .player-stats strong { display:block; font-size:20px; color:var(--ink); margin-bottom:5px; }
    .player-game { font-size:11px; color:var(--muted); margin:14px 0 0; line-height:1.7; }
    .catalog-state { padding:35px 0; font-size:14px; color:var(--muted); }
    @media(max-width:900px) { .players-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
    @media(max-width:580px) { .players-grid { grid-template-columns:1fr; } .players-filters { grid-template-columns:1fr 1fr; } .players-filters label:first-child { grid-column:1/-1; } .site-nav a { padding:11px 12px; } }
    .round-banner { background:var(--ink); color:var(--paper); padding:24px; border-radius:4px; margin-bottom:24px; }
    .round-banner strong { color:var(--acid); font-size:26px; display:block; margin:8px 0; }
    .round-banner p { color:#b5bdb3; font-size:13px; line-height:1.7; margin:8px 0; }
    .round-game { display:grid; grid-template-columns:160px 1fr auto; gap:20px; align-items:center; padding:24px 0; border-bottom:1px solid #16221c25; }
    .round-game h2 { font-size:22px; margin:0 0 8px; letter-spacing:-.5px; } .round-game p { font-size:12px; color:var(--muted); margin:0; line-height:1.7; }
    .round-date { font-size:13px; line-height:1.7; } .round-game a { color:var(--ink); font-size:12px; text-decoration:underline; }
    .tour-player { color:#526c2d; } .tour-bye { color:#876234; }
    @media(max-width:580px) { .round-game { grid-template-columns:1fr; gap:12px; } .round-game h2 { font-size:20px; } }
    @media (prefers-reduced-motion:reduce) { button { transition:none; } }
  
    .builder { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:28px; align-items:start; }
    .builder .players-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .builder .player-card { padding:16px; } .builder .player-card h2 { font-size:18px; margin:12px 0 8px; }
    .builder .player-card button { margin-top:14px; width:100%; }
    .team-panel { position:sticky; top:16px; max-height:calc(100vh - 32px); overflow:auto; border:1px solid #16221c25; background:#fffef9; border-radius:4px; padding:20px; }
    .team-panel h2 { margin:0 0 18px; font-size:24px; letter-spacing:-.6px; }
    .team-panel input { width:100%; padding:12px; margin:8px 0 16px; font:inherit; border:1px solid #16221c35; border-radius:4px; }
    .team-budget { background:var(--ink); color:var(--paper); padding:18px; border-radius:4px; }
    .team-budget strong { color:var(--acid); font-size:28px; } .team-budget p { margin:8px 0 0; font-size:12px; line-height:1.6; }
    .team-entry { border-bottom:1px solid #16221c20; padding:14px 0; }
    .team-entry h3 { margin:0 0 6px; font-size:15px; } .team-entry p { margin:0 0 8px; font-size:11px; color:var(--muted); }
    .team-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
    .team-controls select { padding:9px; font:inherit; font-size:12px; border:1px solid #16221c35; border-radius:4px; background:var(--paper); max-width:100%; }
    .team-controls button { font-size:11px; padding:8px 10px; } .team-controls .is-captain { background:var(--acid); }
    .team-errors { padding-left:18px; font-size:12px; line-height:1.7; color:#876234; }
    .team-feedback { font-size:12px; line-height:1.7; padding:14px; margin:16px 0; background:#e6eddb; border-radius:4px; }
    .team-save { font-size:11px; color:var(--muted); line-height:1.6; margin-top:12px; }
    .builder-title h1 { font-size:clamp(54px,6vw,80px); }
    @media(max-width:1000px) { .builder { grid-template-columns:minmax(0,1fr) 330px; gap:18px; } .builder .players-grid { grid-template-columns:1fr; } }
    @media(max-width:760px) { .builder { grid-template-columns:1fr; } .team-panel { position:static; grid-row:1; max-height:none; overflow:visible; } .builder .players-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
    @media(max-width:480px) { .builder .players-grid { grid-template-columns:1fr; } .builder-title h1 { font-size:54px; } }

.auth-panel { padding:22px; border:1px solid #16221c25; background:#fffef9; border-radius:4px; margin:26px 0; }
.auth-heading h2 { margin:0 0 12px; font-size:22px; } .auth-heading p { font-size:13px; line-height:1.6; }
.auth-panel form { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.auth-panel label { display:block; font-size:12px; } .auth-panel input { display:block; padding:12px; margin-top:8px; font:inherit; border:1px solid #16221c35; border-radius:4px; max-width:100%; }
#accountActions { display:flex; flex-wrap:wrap; gap:10px; }

.rating-games { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:24px 0 32px; }
.rating-game { padding:18px; border:1px solid #16221c25; border-radius:4px; font-size:13px; line-height:1.6; } .rating-game p { margin:8px 0 0; color:var(--muted); font-size:12px; }
.rating-row { display:grid; grid-template-columns:45px 1fr auto; gap:18px; align-items:center; padding:20px 0; border-bottom:1px solid #16221c25; }
.rating-row strong { font-size:22px; } .rating-row h3 { font-size:18px; margin:0 0 6px; overflow-wrap:anywhere; } .rating-row p { font-size:12px; color:var(--muted); margin:0; }
.score-detail { border:1px solid #16221c25; padding:18px; margin:12px 0; border-radius:4px; } .score-detail summary { cursor:pointer; font-weight:700; line-height:1.7; } .score-detail p { font-size:13px; line-height:1.8; }
@media(max-width:580px) { .rating-games { grid-template-columns:1fr; } .rating-row { grid-template-columns:24px 1fr auto; gap:10px; } .rating-row strong { font-size:18px; } }
