:root {
      --bg: #0d1117;
      --surface: #161b22;
      --surface2: #21262d;
      --border: #30363d;
      --text: #e6edf3;
      --muted: #8b949e;
      --gold: #f0c040;
      --green: #2ea043;
      --amber: #9e6a03;
      --red: #e84040;
      --gold-glow: #f0c04055;
      --surface-highlight: #1a1f2e;
      --nav-h: 56px;
      --header-h: 48px;
    }
    html.bracket-mode {
      --bg: #f6f8fa;
      --surface: #ffffff;
      --surface2: #eaeef2;
      --border: #d0d7de;
      --text: #1f2328;
      --muted: #656d76;
      --gold: #0969da;
      --green: #0969da;
      --amber: #0550ae;
      --red: #cf222e;
      --gold-glow: #0969da22;
      --surface-highlight: #ddf4ff;
      color-scheme: light;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { font-size: 112%; }
    html, body { background: var(--bg); color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      overflow-x: hidden; }

    /* ── Header ── */
    #app-header {
      position: fixed; top: 0; left: 0; right: 0; height: var(--header-h);
      background: var(--surface); border-bottom: 1px solid var(--border);
      display: flex; align-items: center; padding: 0 14px; gap: 10px; z-index: 100;
    }
    #header-title { color: var(--gold); font-weight: 700; font-size: 0.94rem; flex: 1; white-space: nowrap; }
    #header-ts { color: var(--muted); font-size: 0.69rem; }
    #btn-settings { background: none; border: none; color: var(--muted);
      font-size: 1.25rem; cursor: pointer; padding: 4px; }
    #btn-hide-scores { background: var(--surface2); border: none; border-radius: 6px;
      font-size: 1.1rem; cursor: pointer; padding: 3px 7px; line-height: 1; }
    #btn-mode {
      display: flex; align-items: center;
      background: var(--surface2); border: 1.5px solid var(--border);
      border-radius: 20px; cursor: pointer; padding: 2px;
      transition: border-color 0.2s;
    }
    .mode-opt {
      display: flex; align-items: center; gap: 4px;
      padding: 3px 9px; border-radius: 16px;
      font-size: 0.6rem; font-weight: 700; letter-spacing: 0.4px;
      color: var(--muted); transition: background 0.2s, color 0.2s;
    }
    .mode-opt.active { background: var(--gold); color: #fff; }
    html.bracket-mode .nav-btn[data-tab="bonus"] { display: none; }

    /* ── Pull to refresh ── */
    #ptr-indicator {
      position: fixed; top: var(--header-h); left: 50%; transform: translateX(-50%);
      background: var(--surface2); color: var(--gold); border-radius: 50%;
      width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
      font-size: 1.1rem; opacity: 0; pointer-events: none; z-index: 99;
      transition: opacity 0.15s; transform: translateX(-50%) translateY(0);
    }

    /* ── Tab content area ── */
    #tab-area {
      margin-top: var(--header-h);
      padding-bottom: calc(var(--nav-h) + 38px);
      min-height: calc(100vh - var(--header-h));
    }
    .tab-panel { display: none; padding: 12px; }
    .tab-panel.active { display: block; }

    /* ── Bottom nav ── */
    #bottom-nav {
      position: fixed; bottom: 4px; left: 12px; right: 12px; height: var(--nav-h);
      background: var(--surface2); border-radius: 22px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.6);
      display: flex;
    }
    .nav-btn {
      flex: 1; display: flex; flex-direction: column; align-items: center;
      justify-content: center; background: none; border: none; cursor: pointer;
      color: var(--muted); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.5px;
      padding: 6px 0; gap: 3px;
    }
    .nav-btn .nav-icon { font-size: 1.25rem; }
    .nav-btn.active { color: var(--gold); }
    .nav-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
    #btn-back:focus-visible, #btn-settings:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
    .picker-item:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
    .nav-btn:active { opacity: 0.7; }
    @media (display-mode: standalone) {
      #bottom-nav { bottom: 24px; }
    }

    /* ── Cards ── */
    .card {
      background: var(--surface); border-radius: 10px; padding: 11px 13px;
      margin-bottom: 6px;
    }
    .card-live { border: 1px solid var(--gold-glow); background: var(--surface-highlight); }

    /* ── Leaderboard rows ── */
    .lb-row {
      display: flex; align-items: center; gap: 10px;
      background: var(--surface); border-radius: 10px; padding: 11px 13px;
      margin-bottom: 5px;
    }
    .lb-row.rank-1 { border-left: 3px solid var(--gold); }
    .lb-row.rank-2 { border-left: 3px solid #c0c0c0; }
    .lb-row.rank-3 { border-left: 3px solid #cd7f32; }
    .lb-row.me, .pred-row.me { background: rgba(240,192,64,0.07); }
    .lb-row.me .avatar, .pred-row.me .avatar { background: var(--gold); color: #000; box-shadow: 0 0 0 2px var(--gold); }
    .lb-rank-col { display: flex; flex-direction: column; align-items: center; width: 28px; flex-shrink: 0; }
    .lb-pts-col  { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
    .lb-delta { font-size: 0.6rem; font-weight: 700; line-height: 1; }
    .delta-up { color: #2ea043; }
    .delta-dn { color: var(--red); }
    .lb-rank { font-weight: 700; font-size: 0.94rem; text-align: center; }
    .rank-1 .lb-rank { color: var(--gold); }
    .rank-2 .lb-rank { color: #c0c0c0; }
    .rank-3 .lb-rank { color: #cd7f32; }
    .avatar {
      border-radius: 50%; width: 30px; height: 30px;
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 0.75rem; flex-shrink: 0;
      background: var(--surface2); color: var(--muted);
    }
    .rank-1 .avatar { background: var(--gold); color: #000; }
    .rank-2 .avatar { background: #c0c0c0; color: #000; }
    .rank-3 .avatar { background: #cd7f32; color: #000; }
    .lb-name { flex: 1; font-weight: 600; font-size: 0.875rem; }
    .lb-flag { font-size: 1.125rem; }
    .lb-pts { font-weight: 700; font-size: 0.875rem; color: var(--muted); }
    .rank-1 .lb-pts { color: var(--gold); }
    .rank-2 .lb-pts { color: #c0c0c0; }
    .rank-3 .lb-pts { color: #cd7f32; }

    /* ── Match cards ── */
    .match-score {
      display: flex; align-items: center; gap: 8px;
    }
    .match-team { flex: 1; font-weight: 600; font-size: 0.81rem; }
    .match-team.right { text-align: right; }
    .match-result {
      text-align: center; min-width: 56px;
    }
    .match-result .score { font-weight: 700; font-size: 1rem; }
    .match-result .status { font-size: 0.625rem; color: var(--muted); margin-top: 2px; }
    .badge-live {
      background: var(--red); color: #fff; font-size: 0.6rem; font-weight: 700;
      border-radius: 3px; padding: 1px 5px; display: inline-block;
    }
    .tap-hint { color: var(--muted); font-size: 0.625rem; text-align: center; margin-top: 7px; }

    /* ── Section labels ── */
    .section-label {
      color: var(--muted); font-size: 0.625rem; font-weight: 700;
      letter-spacing: 1px; margin: 12px 0 6px;
    }
    .section-label.live { color: var(--gold); }

    /* ── Filter bar ── */
    .filter-bar {
      display: flex; gap: 8px; margin-bottom: 10px;
      position: sticky; top: 0; z-index: 10;
      background: var(--bg); padding: 8px 0 4px;
      overflow-x: auto; -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .filter-bar::-webkit-scrollbar { display: none; }
    .filter-btn {
      background: var(--surface2); border: 1px solid var(--border);
      color: var(--muted); font-size: 0.75rem; font-weight: 700;
      letter-spacing: 0.5px; border-radius: 20px; padding: 5px 14px;
      cursor: pointer; flex-shrink: 0;
    }
    .filter-btn.active {
      background: var(--gold); color: var(--bg); border-color: var(--gold);
    }

    /* ── Prize callout ── */
    .prize-bar {
      color: var(--muted); font-size: 11px; text-align: center;
      margin-bottom: 10px;
    }

    @keyframes panel-in  { from { transform: translateX(100%); } to { transform: translateX(0); } }
    @keyframes panel-out { from { transform: translateX(0); }    to { transform: translateX(100%); } }
    @keyframes sheet-up  { from { transform: translateY(100%); } to { transform: translateY(0); } }
    @keyframes fade-in   { from { opacity: 0; }                  to { opacity: 1; } }

    /* ── Group preview bottom sheet ── */
    #group-preview-overlay {
      display: none; position: fixed; inset: 0; z-index: 100;
      background: rgba(0,0,0,0.55); align-items: flex-end;
    }
    #group-preview-overlay.open { display: flex; animation: fade-in 0.18s ease; }
    .group-preview-sheet {
      background: var(--surface); border-radius: 14px 14px 0 0;
      padding: 8px 12px max(20px, env(safe-area-inset-bottom));
      width: 100%; max-height: 70vh; overflow-y: auto;
      animation: sheet-up 0.22s cubic-bezier(0.4,0,0.2,1);
    }
    .group-preview-handle {
      width: 36px; height: 4px; background: var(--border);
      border-radius: 2px; margin: 0 auto 12px;
    }
    .panel-closing { animation: panel-out 0.22s cubic-bezier(0.4,0,0.2,1) forwards !important; }

    /* ── Detail view ── */
    #profile-panel {
      display: none; position: fixed;
      top: var(--header-h); bottom: 0; left: 0; right: 0;
      background: var(--bg); overflow-y: auto; z-index: 40; padding: 12px; padding-bottom: calc(var(--nav-h) + 24px);
    }
    #profile-panel.open { display: block; animation: panel-in 0.22s cubic-bezier(0.4,0,0.2,1) forwards; }
    #detail-panel {
      display: none; position: fixed;
      top: var(--header-h); bottom: 0; left: 0; right: 0;
      background: var(--bg); overflow-y: auto; z-index: 50; padding: 12px; padding-bottom: calc(var(--nav-h) + 24px);
    }
    #detail-panel.open { display: block; animation: panel-in 0.22s cubic-bezier(0.4,0,0.2,1) forwards; }
    .detail-header {
      display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
    }
    #btn-back, #btn-stats-back, #btn-profile-back {
      background: none; border: none; color: var(--gold);
      font-size: 1.375rem; cursor: pointer; padding: 4px;
    }
    .detail-title { font-weight: 600; font-size: 0.875rem; flex: 1; }
    .score-banner {
      background: var(--surface); border-radius: 10px; padding: 12px;
      text-align: center; margin-bottom: 10px;
    }
    .score-banner .label { color: var(--muted); font-size: 0.625rem; margin-bottom: 4px; }
    .score-banner .big-score { color: var(--gold); font-size: 1.625rem; font-weight: 700; }

    /* ── Crowd pick stats ── */
    .crowd-stats {
      background: var(--surface); border-radius: 10px; padding: 12px 14px;
      margin-bottom: 10px;
    }
    .crowd-stats-title {
      font-size: 0.6rem; font-weight: 700; letter-spacing: 0.8px;
      color: var(--muted); text-transform: uppercase; margin-bottom: 8px;
    }
    .pick-bar {
      display: flex; border-radius: 6px; overflow: hidden; height: 26px;
      gap: 2px; margin-bottom: 6px;
    }
    .pick-bar-seg {
      display: flex; align-items: center; justify-content: center;
      font-size: 0.6rem; font-weight: 700; min-width: 0;
      overflow: hidden; white-space: nowrap; transition: flex 0.3s;
    }
    .pick-bar-seg.win-a  { background: var(--gold); color: #000; border-radius: 6px 0 0 6px; }
    .pick-bar-seg.draw   { background: #444; color: var(--text); }
    .pick-bar-seg.win-b  { background: #58a6ff; color: #000; border-radius: 0 6px 6px 0; }
    .pick-bar-labels {
      display: flex; justify-content: space-between;
      font-size: 0.65rem; color: var(--muted); line-height: 1.3;
    }
    .pick-bar-labels .label-a { color: var(--gold); }
    .pick-bar-labels .label-b { color: #58a6ff; }
    .crowd-avg {
      text-align: center; font-size: 0.75rem; color: var(--muted);
      margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border);
    }
    .crowd-avg strong { color: var(--text); }

    /* ── Mini crowd bar on match cards ── */
    .crowd-bar-mini {
      display: flex; height: 6px; border-radius: 3px; overflow: hidden;
      gap: 2px; margin: 6px 0 3px; transition: height 0.22s ease;
    }
    .crowd-bar-mini .win-a { background: var(--gold); display: flex; align-items: center; justify-content: center; }
    .crowd-bar-mini .draw  { background: #555;        display: flex; align-items: center; justify-content: center; }
    .crowd-bar-mini .win-b { background: #58a6ff;     display: flex; align-items: center; justify-content: center; }
    .crowd-bar-pct { font-size: 0.6rem; font-weight: 700; color: #fff; opacity: 0; transition: opacity 0.15s ease; white-space: nowrap; }
    .match-expanded .crowd-bar-mini { height: 28px; border-radius: 4px; }
    .match-expanded .crowd-bar-pct  { opacity: 1; }
    .crowd-bar-legend {
      font-size: 0.6rem; color: var(--muted); display: flex;
      align-items: center; gap: 5px;
    }
    .upset-badge {
      font-size: 0.55rem; font-weight: 700; background: var(--red);
      color: #fff; border-radius: 3px; padding: 1px 5px; letter-spacing: 0.4px;
    }

    /* ── Prediction rows in detail ── */
    .pred-row {
      display: flex; align-items: center; gap: 9px;
      background: var(--surface); border-radius: 8px; padding: 9px 12px;
      margin-bottom: 4px;
    }
    .pred-row.pts-10 { border-left: 3px solid var(--green); }
    .pred-row.pts-5  { border-left: 3px solid var(--amber); }
    .pred-row.pts-0  { border-left: 3px solid var(--border); }
    .pred-score { font-weight: 600; font-size: 0.81rem; min-width: 38px; text-align: center; }
    .pts-badge {
      font-size: 0.6rem; font-weight: 700; border-radius: 3px; padding: 2px 6px;
      flex-shrink: 0;
    }
    .pts-badge.g  { background: var(--green); color: #fff; }
    .pts-badge.a  { background: var(--amber); color: #fff; }
    .pts-badge.gr { background: var(--border); color: var(--muted); }

    /* ── My Picks summary bar ── */
    .picks-summary {
      background: var(--surface); border-radius: 10px; padding: 12px 14px;
      display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
    }
    .picks-meta { flex: 1; }
    .picks-name { font-weight: 600; font-size: 0.875rem; }
    .picks-rank { color: var(--muted); font-size: 0.69rem; margin-top: 2px; }
    .picks-pts { text-align: right; }
    .picks-pts .big { color: var(--gold); font-weight: 700; font-size: 1.25rem; }
    .picks-pts .small { color: var(--muted); font-size: 0.625rem; }

    /* ── Pick rows ── */
    .pick-row {
      display: flex; align-items: center; gap: 8px;
      background: var(--surface); border-radius: 8px; padding: 9px 12px;
      margin-bottom: 4px;
    }
    .pick-row.pts-10 { border-left: 3px solid var(--green); }
    .pick-row.pts-5  { border-left: 3px solid var(--amber); }
    .pick-row.pts-0  { border-left: 3px solid var(--border); }
    .pick-match { flex: 1; min-width: 0; }
    .pick-match-name {
      font-size: 0.75rem; font-weight: 600;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .pick-match-pred { font-size: 0.69rem; color: var(--muted); margin-top: 2px; }
    .pick-actual { text-align: center; min-width: 38px; }
    .pick-actual .score { font-size: 0.81rem; font-weight: 700; }
    .pick-actual .label { font-size: 0.6rem; color: var(--muted); }

    /* ── Next matches ── */
    .next-live-card {
      background: var(--surface-highlight); border: 1px solid var(--gold-glow); border-radius: 10px;
      padding: 11px 13px; margin-bottom: 8px;
    }
    .next-live-title {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 9px;
    }
    .next-live-title span { font-weight: 600; font-size: 0.81rem; }
    .panel {
      flex: 1; background: var(--surface2); border-radius: 7px;
      padding: 7px; text-align: center;
    }
    .panel .plabel { color: var(--muted); font-size: 0.55rem; margin-bottom: 2px; }
    .panel .pscore { font-weight: 600; font-size: 0.69rem; }
    .panel .pscore.live { color: var(--gold); }
    .on-track { color: var(--green); font-size: 0.625rem; text-align: center; margin-top: 7px; }
    .next-upcoming { background: var(--surface); border-radius: 10px; padding: 11px 13px; margin-bottom: 6px; }
    .next-upcoming-header {
      display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px;
    }
    .next-upcoming-header span { font-weight: 600; font-size: 0.81rem; }
    .next-upcoming-header .time { color: var(--muted); font-size: 0.69rem; }
    .next-pred-box {
      background: var(--surface2); border-radius: 7px; padding: 7px; text-align: center;
    }
    .next-pred-box .plabel { color: var(--muted); font-size: 0.6rem; margin-bottom: 3px; }
    .next-pred-box .pscore { font-weight: 700; font-size: 1.0625rem; }

    /* ── Name picker ── */
    .claim-banner {
      display: flex; align-items: center; justify-content: space-between;
      background: var(--surface2); border: 1px solid var(--gold-glow);
      border-radius: 10px; padding: 10px 14px; margin-bottom: 10px;
      cursor: pointer;
    }
    .claim-banner-text { font-size: 0.81rem; color: var(--text); }
    .claim-banner-text span { color: var(--gold); font-weight: 700; }
    .claim-banner-arrow { color: var(--gold); font-size: 1rem; }

    #name-picker-overlay {
      display: none; position: fixed;
      top: var(--header-h); bottom: 0; left: 0; right: 0;
      background: var(--bg); z-index: 60; overflow-y: auto; padding: 24px 16px; padding-bottom: calc(var(--nav-h) + 24px);
    }
    #name-picker-overlay.open { display: block; animation: panel-in 0.22s cubic-bezier(0.4,0,0.2,1) forwards; }
    .picker-intro { text-align: center; margin-bottom: 20px; }
    .picker-intro .wave { font-size: 2rem; margin-bottom: 10px; }
    .picker-intro h2 { font-size: 1.1875rem; margin-bottom: 6px; }
    .picker-intro p { color: var(--muted); font-size: 0.81rem; line-height: 1.5; }
    .picker-list {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px; overflow: hidden;
    }
    .picker-item {
      display: flex; align-items: center; gap: 11px;
      padding: 13px 16px; border-bottom: 1px solid var(--surface2);
      cursor: pointer;
    }
    .picker-item:last-child { border-bottom: none; }
    .picker-item:active { background: var(--surface2); }
    .picker-item-name { flex: 1; font-size: 0.875rem; }
    .picker-item-flag { font-size: 1.125rem; }
    .no-name-hint {
      background: var(--surface); border-radius: 10px; padding: 14px;
      text-align: center; color: var(--muted); font-size: 0.81rem; margin-bottom: 10px;
    }

    /* ── Bonus tab ── */
    .bonus-section { margin-bottom: 18px; }
    .bonus-section-title {
      font-size: 0.75rem; font-weight: 700; letter-spacing: 0.8px;
      color: var(--muted); text-transform: uppercase; padding: 10px 0 6px;
    }
    .bonus-section-sub {
      font-size: 0.75rem; color: var(--muted); margin-bottom: 8px;
    }
    .bonus-section-sub strong { color: var(--text); }
    .bonus-group {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px; padding: 10px 12px; margin-bottom: 6px;
    }
    .bonus-group.mine { border-color: var(--gold); }
    .bonus-group-label {
      font-size: 0.875rem; font-weight: 600; margin-bottom: 6px;
      display: flex; align-items: center; gap: 6px;
    }
    .bonus-group-count {
      background: var(--surface2); border-radius: 20px;
      font-size: 0.625rem; font-weight: 700; color: var(--muted);
      padding: 1px 7px; margin-left: auto;
    }
    .bonus-name-chips { display: flex; flex-wrap: wrap; gap: 5px; }
    .bonus-chip {
      background: var(--surface2); border-radius: 20px;
      font-size: 0.69rem; color: var(--muted); padding: 3px 9px;
    }
    .bonus-chip.me {
      border: 1px solid var(--gold); color: var(--gold); font-weight: 700;
    }
    .stat-list { display: flex; flex-direction: column; gap: 4px; }
    .stat-row {
      display: flex; align-items: center; gap: 8px;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 8px; padding: 7px 10px;
    }
    .stat-row.me { border-color: var(--gold); }
    .stat-name { width: 130px; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .stat-bar-wrap { flex: 1; height: 4px; background: var(--surface2); border-radius: 2px; overflow: hidden; }
    .stat-bar { height: 100%; background: var(--gold); border-radius: 2px; opacity: 0.5; }
    .stat-row.me .stat-bar { opacity: 1; }
    .stat-val { font-size: 0.75rem; font-weight: 700; width: 35px; text-align: right; color: var(--muted); }
    .stat-row.me .stat-val { color: var(--gold); }
    .stat-actual-line {
      font-size: 0.69rem; color: var(--gold); font-weight: 700;
      padding: 4px 0 2px; letter-spacing: 0.3px;
    }

    /* ── Stats panel ── */
    #stats-panel {
      display: none; position: fixed;
      top: var(--header-h); bottom: 0; left: 0; right: 0;
      background: var(--bg); overflow-y: auto; z-index: 45; padding: 12px; padding-bottom: calc(var(--nav-h) + 24px);
    }
    #stats-panel.open { display: block; animation: panel-in 0.22s cubic-bezier(0.4,0,0.2,1) forwards; }
    .q-badge { display: inline-block; font-size: 0.6rem; font-weight: 700; font-style: normal; background: var(--green); color: #fff; border-radius: 3px; padding: 1px 4px; margin-left: 5px; vertical-align: middle; letter-spacing: 0.5px; }
    .fathers-day-banner { background: #7c4a00; color: #ffd580; border-radius: 10px; padding: 12px 36px 12px 16px; margin-bottom: 10px; font-size: 0.88rem; font-weight: 600; text-align: center; line-height: 1.4; position: relative; }
    .fathers-day-close { position: absolute; top: 8px; right: 10px; background: none; border: none; color: #ffd580; font-size: 0.85rem; cursor: pointer; opacity: 0.7; padding: 2px 4px; }
    .picks-reminder-banner { background: #6b2000; color: #ffb380; border-radius: 10px; padding: 12px 36px 12px 16px; margin-bottom: 10px; font-size: 0.88rem; font-weight: 600; text-align: center; line-height: 1.5; position: relative; }
    .picks-reminder-banner.urgent { background: #7a1500; color: #ffcdb3; }
    .picks-reminder-link { color: inherit; font-weight: 800; text-decoration: underline; }
    .picks-reminder-btn { display: inline-block; margin-left: 10px; background: rgba(255,255,255,0.18); color: inherit; font-weight: 800; font-size: 0.82rem; text-decoration: none; border-radius: 6px; padding: 3px 10px; white-space: nowrap; }
    .picks-reminder-close { position: absolute; top: 8px; right: 10px; background: none; border: none; color: inherit; font-size: 0.85rem; cursor: pointer; opacity: 0.7; padding: 2px 4px; }
    .picks-reminder-refresh { background: none; border: none; color: inherit; font-size: 1rem; cursor: pointer; opacity: 0.7; padding: 2px 6px; vertical-align: middle; }
    .days-at-one { background: var(--surface); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
    .days-at-one-title { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.8px; color: var(--muted); text-transform: uppercase; margin-bottom: 8px; }
    .days-at-one-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
    .days-at-one-bar { flex: 1; height: 5px; background: var(--surface2); border-radius: 3px; overflow: hidden; }
    .days-at-one-fill { height: 100%; background: var(--gold); border-radius: 3px; }
    .days-count { font-size: 0.69rem; font-weight: 700; color: var(--gold); width: 28px; text-align: right; flex-shrink: 0; }
    .more-stats-btn {
      display: block; width: 100%; margin-top: 10px;
      background: var(--surface2); border: 1px solid var(--border);
      color: var(--muted); font-size: 0.75rem; font-weight: 700;
      letter-spacing: 0.5px; border-radius: 8px; padding: 10px;
      cursor: pointer; text-align: center;
    }
    .stats-section { margin-bottom: 18px; }
    .stats-section[data-collapsed="true"] .stats-player-row:nth-child(n+7) { display: none; }
    .stats-collapse-btn {
      display: block; width: 100%; margin-top: 6px;
      background: none; border: none; color: var(--muted);
      font-size: 0.65rem; font-weight: 700; letter-spacing: 0.4px;
      padding: 6px 0; cursor: pointer; text-align: center;
    }
    .stats-section-title {
      font-size: 0.6rem; font-weight: 700; letter-spacing: 0.8px;
      color: var(--muted); text-transform: uppercase;
      margin-bottom: 8px; padding-bottom: 4px;
      border-bottom: 1px solid var(--border);
    }
    .stats-player-row {
      display: flex; align-items: center; gap: 8px;
      padding: 6px 0; border-bottom: 1px solid var(--border);
    }
    .stats-player-row:last-child { border-bottom: none; }
    .stats-player-name { flex: 1; font-size: 0.75rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .stats-bar-wrap { width: 80px; height: 5px; background: var(--surface2); border-radius: 3px; overflow: hidden; flex-shrink: 0; }
    .stats-bar-fill { height: 100%; background: var(--gold); border-radius: 3px; }
    .stats-val { font-size: 0.69rem; font-weight: 700; color: var(--gold); width: 36px; text-align: right; flex-shrink: 0; }
    .stats-sub { font-size: 0.6rem; color: var(--muted); }
    .sparkline { display: block; }
    /* ── Pick Buddies ── */
    .match-venue { font-size: 0.6rem; color: var(--muted); margin-top: 2px; }
    .player-flag-img { width: 1.2em; height: 1.2em; object-fit: cover; border-radius: 2px; vertical-align: middle; }
    .buddy-group-label { font-size: 0.69rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 8px 0 4px; }
    .buddy-frenemy-label { padding-top: 12px; }
    .buddy-row { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 0.78rem; }
    .buddy-row:last-child { border-bottom: none; }
    .buddy-rank { color: var(--muted); font-size: 0.69rem; width: 22px; flex-shrink: 0; }
    .buddy-names { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .buddy-dist { color: var(--muted); font-size: 0.69rem; flex-shrink: 0; }
    /* ── Profile buddy bar ── */
    .profile-buddy-bar { display: flex; gap: 8px; margin: 10px 0 4px; }
    .profile-buddy-item { flex: 1; background: var(--surface2); border-radius: 8px; padding: 8px 10px; }
    .profile-buddy-label { font-size: 0.62rem; color: var(--muted); margin-bottom: 3px; }
    .profile-buddy-name { font-size: 0.82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .heatmap-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .heatmap { display: grid; gap: 2px; width: max-content; margin: 0 auto; }
    .heatmap-cell {
      width: 18px; height: 18px; border-radius: 3px;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.45rem; font-weight: 700; cursor: default;
    }

    /* ── Loading / Error ── */
    .loading-state, .error-state {
      text-align: center; padding: 40px 16px; color: var(--muted);
    }
    .loading-state .spinner {
      font-size: 28px; margin-bottom: 12px; animation: spin 1s linear infinite;
      display: inline-block;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .error-state .icon { font-size: 28px; margin-bottom: 12px; }

    /* ── Group Standings ── */
    .group-card {
      background: var(--surface); border-radius: 10px;
      margin-bottom: 10px; overflow: hidden;
    }
    .group-card-title {
      font-size: 0.65rem; font-weight: 700; letter-spacing: 1px;
      color: var(--muted); padding: 8px 12px 4px;
    }
    .group-table {
      width: 100%; border-collapse: collapse; font-size: 0.78rem; table-layout: fixed;
    }
    .group-table thead th {
      color: var(--muted); font-size: 0.6rem; font-weight: 600;
      padding: 0 6px 4px; text-align: center; width: 28px;
    }
    .group-table thead th.gt-gd { width: 32px; }
    .group-table thead th.gt-pts { width: 32px; }
    .group-table thead th.gt-team { text-align: left; padding-left: 12px; width: auto; }
    .group-table td { padding: 6px 6px; text-align: center; }
    .group-table td.gt-team {
      display: flex; align-items: center; gap: 6px;
      padding: 6px 6px 6px 12px; text-align: left;
    }
    .gt-pos { color: var(--muted); font-size: 0.65rem; width: 10px; flex-shrink: 0; }
    .gt-flag { font-size: 1rem; flex-shrink: 0; }
    .gt-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .gt-gd { color: var(--muted); font-size: 0.72rem; }
    .gt-pts-val { font-weight: 700; color: var(--gold); }
    .group-row { border-top: 1px solid var(--border); }
    .group-row:first-child { border-top: none; }
    .group-row.gs-through { border-left: 3px solid var(--green); }
    .group-row.gs-maybe   { border-left: 3px solid var(--amber); }
    .group-row.gs-out     { opacity: 0.45; }

    /* ── Round bar ── */
    #tab-rounds { padding: 0; }
    .round-content-padded { padding: 12px; min-height: calc(100vh - var(--header-h) - 50px); }
    .round-bar {
      display: flex; align-items: center; justify-content: space-between;
      padding: 8px 4px 10px; border-bottom: 1px solid var(--border);
      background: var(--surface);
      position: sticky; top: var(--header-h); z-index: 10;
    }
    .round-bar-label { text-align: center; }
    .round-bar-name  { color: var(--gold); font-size: 0.82rem; font-weight: 700; }
    .round-bar-date  { color: var(--muted); font-size: 0.62rem; margin-top: 2px; }
    .round-arrow {
      background: none; border: none; color: var(--text);
      font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 4px 14px;
    }
    .round-arrow:disabled { color: var(--border); cursor: default; }
    .round-arrow:not(:disabled):active { opacity: 0.6; }

    /* ── Round content slide animations ── */
    @keyframes round-slide-from-right { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
    @keyframes round-slide-from-left  { from { transform: translateX(-40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
    .round-slide-in-right { animation: round-slide-from-right 0.2s cubic-bezier(0.4,0,0.2,1) forwards; }
    .round-slide-in-left  { animation: round-slide-from-left  0.2s cubic-bezier(0.4,0,0.2,1) forwards; }

    /* ── Slot pills (unresolved team placeholders) ── */
    .slot-pill {
      display: inline-block; padding: 3px 9px; border-radius: 6px;
      background: var(--surface2); border: 1px solid var(--border);
      color: var(--muted); font-size: 0.68rem; font-weight: 600;
      cursor: pointer; white-space: nowrap;
    }
    .slot-pill:active { opacity: 0.7; }
    .ko-slot { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; }
    .ko-slot.ko-slot-r { align-items: flex-end; }
    .slot-current { font-size: 0.6rem; color: var(--muted); padding: 0 1px; }

    /* ── Knockout match cards ── */
    .ko-card         { margin-bottom: 8px; cursor: default; }
    .ko-tappable     { cursor: pointer; }
    .ko-tappable:active { opacity: 0.85; }
    .ko-card-header  { font-size: 0.68rem; color: var(--muted); margin-bottom: 6px; }
    .ko-teams        { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; }
    .ko-teams > :last-child { text-align: right; }
    .ko-vs           { color: var(--muted); font-size: 0.72rem; }
    .ko-score        { color: var(--gold); font-size: 0.95rem; font-weight: 700; }
    .ko-mid          { text-align: center; white-space: nowrap; }
    .ko-preds { max-height: 0; overflow: hidden; transition: max-height 0.22s cubic-bezier(0.4,0,0.2,1); }
    .ko-card.ko-expanded,
    .card.match-expanded { border: 1px solid var(--gold); }
    .ko-card.ko-expanded .ko-preds,
    .card.match-expanded .ko-preds { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 6px; }
    /* Feeder slot sides (tappable team areas in future-round cards) */
    .ko-slot-side { flex: 1; min-width: 0; }
    .ko-slot-side.ko-slot-tappable { cursor: pointer; }
    .ko-slot-side.ko-slot-tappable:active { opacity: 0.7; }
    .ko-slot-side-r { text-align: right; }
    .ko-candidates { display: flex; flex-direction: column; gap: 2px; font-size: 0.82rem; font-weight: 600; }
    .ko-candidates-r { align-items: flex-end; }
    .ko-cand-or { font-size: 0.6rem; color: var(--muted); font-weight: 400; font-style: italic; line-height: 1.3; }
    .ko-unknown { color: var(--muted); }
    /* Inline feeder match slide-down */
    .ko-feeder { max-height: 0; overflow: hidden; transition: max-height 0.3s cubic-bezier(0.4,0,0.2,1); }
    .ko-feeder-inner { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 10px; }
    .feeder-match { background: var(--surface2); border-radius: 10px; padding: 10px 12px; }

    .anc-flat { display: flex; gap: 8px; }
    .anc-flat .anc-match { flex: 1; min-width: 0; }
    .anc-sections { display: flex; flex-direction: column; gap: 10px; }
    .anc-tree { display: flex; align-items: center; gap: 4px; }
    .anc-col-deep { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
    .anc-col-near { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
    .anc-col-label { font-size: 0.58rem; font-weight: 700; color: var(--muted); text-align: center; letter-spacing: 0.07em; margin-bottom: 3px; opacity: 0.7; }
    .anc-arrow { color: var(--muted); font-size: 1rem; flex-shrink: 0; padding: 0 2px; }
    .anc-vs { text-align: center; font-size: 0.65rem; color: var(--muted); font-weight: 600; letter-spacing: 0.05em; }
    .anc-match { background: var(--surface2); border-radius: 7px; padding: 5px 7px; }
    .anc-row { display: flex; justify-content: space-between; align-items: center; gap: 4px; font-size: 0.75rem; line-height: 1.5; }
    .anc-team { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
    .anc-score { font-weight: 700; min-width: 14px; text-align: right; flex-shrink: 0; }
    .anc-winner .anc-score { color: var(--gold); }
    .anc-unk { color: var(--muted); }
    .anc-back-btn, .anc-fwd-btn { background: none; border: 1px solid var(--border); color: var(--muted); cursor: pointer; font-size: 0.9rem; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; }
    .anc-back-btn { margin-right: 4px; }
    .anc-fwd-btn  { margin-left: 4px; }
    .anc-back-btn:active, .anc-fwd-btn:active { background: var(--surface2); opacity: 0.7; }
    .anc-back-spacer, .anc-fwd-spacer { width: 26px; flex-shrink: 0; }
    .ko-feeder-inner { overflow: hidden; }