:root{
    --bg:#F4F5F7; --surface:#FFFFFF; --surface-raised:#EEF0F3;
    --border:#E4E6EA; --border-strong:#171717;
    --text:#171717; --text-soft:#3F4247; --muted:#7C8088;
    --primary:#0E7A4F; --primary-ink:#0E7A4F; --primary-soft:#E5F3EC;
    --secondary:#C8A96A; --secondary-soft:#F6EEDD;
    --critical:#C24A3A; --critical-soft:#F7E7E3;
    --glass-bg:rgba(255,255,255,.92); --glass-border:rgba(255,255,255,.5);
    --shadow-soft:0 20px 50px rgba(15,20,24,.10), 0 2px 10px rgba(15,20,24,.05);
    --shadow-card:0 1px 2px rgba(15,20,24,.04), 0 8px 20px rgba(15,20,24,.06);
    --radius-lg:22px; --radius-md:16px; --radius-pill:999px;
  }
  :root[data-theme="dark"]{
    --bg:#0A0B0C; --surface:#131516; --surface-raised:#1C1F21;
    --border:#26292C; --border-strong:#F2F3F4;
    --text:#F2F3F4; --text-soft:#C7CBD1; --muted:#8A9098;
    --primary:#22C081; --primary-ink:#7FE8BC; --primary-soft:#0E2A1F;
    --secondary:#D9BC85; --secondary-soft:#2A2416;
    --critical:#E4695A; --critical-soft:#2E1A17;
    --glass-bg:rgba(19,21,22,.78); --glass-border:rgba(255,255,255,.08);
    --shadow-soft:0 20px 50px rgba(0,0,0,.45), 0 2px 10px rgba(0,0,0,.3);
    --shadow-card:0 1px 2px rgba(0,0,0,.3), 0 8px 20px rgba(0,0,0,.35);
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  html,body{ margin:0; padding:0; }
  body{
    background:var(--bg); color:var(--text); position:relative;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;
    font-size:14.5px; line-height:1.55;
  }
  .mono, td, th{ font-variant-numeric:tabular-nums; }
  a{ color:inherit; } button{ font:inherit; color:inherit; }

  /* ---------- Golf course as page foundation ---------- */
  .course-bg{ position:absolute; inset:0; z-index:0; display:flex; align-items:flex-start; justify-content:center; pointer-events:none; padding-top:64px; overflow:hidden; }
  .course-stage{ position:relative; width:min(76vw, 1300px); }
  .course-stage img{
    width:100%; height:auto; display:block; user-select:none;
    -webkit-mask-image:radial-gradient(ellipse 58% 58% at 50% 42%, black 45%, transparent 86%);
    mask-image:radial-gradient(ellipse 58% 58% at 50% 42%, black 45%, transparent 86%);
    opacity:.92;
  }
  :root[data-theme="dark"] .course-stage img{ opacity:.55; filter:invert(1) brightness(.9) contrast(1.05); }
  .course-pin{ position:absolute; pointer-events:auto; transform:translate(-50%,-50%); cursor:pointer; }
  .pin-dot{ display:block; width:10px; height:10px; border-radius:50%; box-shadow:0 0 0 4px rgba(255,255,255,.55), 0 2px 8px rgba(0,0,0,.25); }
  .pin-dot.primary{ background:var(--primary); }
  .pin-dot.secondary{ background:var(--secondary); }
  .pin-dot.muted{ background:var(--muted); }
  .pin-dot::after{ content:""; position:absolute; inset:-6px; border-radius:50%; border:1px solid currentColor; opacity:.35; }

  /* ---------- Top bar ---------- */
  .topbar{
    position:sticky; top:0; z-index:20; padding:12px 28px;
    background:var(--glass-bg); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--glass-border);
  }
  .topbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; max-width:1600px; margin:0 auto; }
  .wordmark{ font-size:17px; font-weight:800; letter-spacing:-.01em; }
  .wordmark span{ color:var(--muted); font-weight:500; }
  .topbar-links{ display:flex; gap:26px; }
  .topbar-links a{ font-size:13px; font-weight:600; color:var(--muted); text-decoration:none; }
  .topbar-links a:hover, .topbar-links a.active{ color:var(--text); }
  .topbar-right{ display:flex; align-items:center; gap:10px; }
  .date-pill{
    background:var(--surface-raised); border:1px solid var(--border); color:var(--text-soft);
    font-size:11px; font-weight:700; letter-spacing:.04em; padding:6px 12px; border-radius:var(--radius-pill);
  }
  .theme-toggle{
    display:flex; align-items:center; justify-content:center; gap:6px; height:32px; padding:0 12px;
    border-radius:var(--radius-pill); border:1px solid var(--border); background:var(--surface-raised);
    color:var(--text); cursor:pointer; font-size:11px; font-weight:700;
  }
  .theme-toggle svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .user-avatar{
    width:30px; height:30px; border-radius:50%; background:var(--surface-raised); border:1px solid var(--border);
    color:var(--muted); display:flex; align-items:center; justify-content:center;
  }
  .user-avatar svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

  /* ---------- Hero: 20/60/20 ---------- */
  .app-shell{ position:relative; z-index:1; max-width:1600px; margin:0 auto; padding:0 28px; }
  .hero-grid{ display:grid; grid-template-columns:1fr 3fr 1fr; gap:12px; min-height:88vh; padding:32px 0 40px; align-content:start; }
  @media (max-width:1180px){ .hero-grid{ grid-template-columns:1fr; min-height:auto; } .center-col{ display:none; } }

  .side-col{ display:flex; flex-direction:column; gap:16px; }
  .glass-card{
    background:var(--glass-bg); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border:1px solid var(--glass-border); border-radius:var(--radius-lg);
    box-shadow:var(--shadow-soft); padding:20px;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .glass-card:hover{ transform:translateY(-2px); }
  .card-label{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:12px; }
  .glass-input{
    width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-pill);
    padding:9px 15px; color:var(--text); font-size:13px;
  }
  .glass-input:focus{ outline:2px solid var(--primary); outline-offset:2px; }

  .chip-row{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:4px; }
  .chip{
    background:none; border:1px solid var(--border); color:var(--muted); font-size:11.5px; font-weight:700;
    padding:6px 12px; border-radius:var(--radius-pill); cursor:pointer;
  }
  .chip.active{ background:var(--text); border-color:var(--text); color:var(--surface); }
  :root[data-theme="dark"] .chip.active{ background:var(--primary); border-color:var(--primary); color:#04140D; }

  .lb-row{ display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--border); font-size:12.5px; }
  .lb-row:last-child{ border-bottom:none; }
  .lb-rank{ width:16px; color:var(--muted); font-weight:700; font-size:11px; }
  .lb-name{ flex:1; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .lb-val{ font-weight:800; font-size:12px; }
  .lb-val.good{ color:var(--primary); } .lb-val.bad{ color:var(--critical); } .lb-val.flat{ color:var(--muted); }

  .field-list{ max-height:280px; overflow-y:auto; margin-top:10px; }
  .field-row{ display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid var(--border); font-size:12px; }
  .field-row:last-child{ border-bottom:none; }
  .field-name{ flex:1; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .field-course{ font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
  .field-row.is-hidden{ display:none; }

  .avatar{
    display:inline-flex; align-items:center; justify-content:center; flex:none;
    width:20px; height:20px; border-radius:50%; font-size:8.5px; font-weight:800;
    color:#fff; text-transform:uppercase; margin-right:7px; vertical-align:middle;
  }
  .lb-row .avatar, .field-row .avatar{ margin-right:0; }

  .summary-row{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:7px 0; border-bottom:1px solid var(--border); font-size:12.5px; }
  .summary-row:last-child{ border-bottom:none; }
  .summary-row span:first-child{ color:var(--muted); font-weight:600; }
  .summary-row strong{ font-weight:800; text-align:right; }
  .muted-text{ color:var(--muted); font-size:12px; }
  .big-num{ font-size:30px; font-weight:800; letter-spacing:-.01em; }

  /* ---------- Below-fold sections ---------- */
  .section{ display:block !important; padding:8px 0 40px; }
  .hero-grid, .grid-2, .grid-directory, .kpi-row{ display:grid !important; }
  footer.note{ display:block !important; }
  .kpi-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:12px; }
  .kpi{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px 16px; box-shadow:var(--shadow-card); }
  .kpi-icon{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:9px; margin-bottom:9px; background:var(--tile-accent, var(--muted)); color:#fff; }
  .kpi-icon svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .kpi-label{ font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; font-weight:700; }
  .kpi-value{ font-size:25px; font-weight:800; margin-top:3px; letter-spacing:-0.01em; }
  .kpi-sub{ font-size:11px; color:var(--muted); margin-top:2px; }

  .grid-2{ display:grid; grid-template-columns:1fr; gap:12px; margin-bottom:12px; }
  .grid-directory{ display:grid; grid-template-columns:1.7fr 1fr; gap:12px; margin-bottom:12px; align-items:start; }
  @media (max-width:980px){ .grid-directory{ grid-template-columns:1fr; } }
  .panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-card); padding:18px 20px; min-width:0; }
  .panel + .panel{ margin-top:12px; }
  .grid-2 > .panel, .grid-directory > .panel{ margin-top:0; }
  .panel-title{ font-size:13px; font-weight:800; margin-bottom:2px; }
  .panel-header-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; user-select:none; }
  .panel-header-row .panel-title{ margin-bottom:0; }
  .collapse-arrow{ flex-shrink:0; width:18px; height:18px; color:var(--muted); transition:transform .2s ease; }
  .panel.collapsed .collapse-arrow{ transform:rotate(-90deg); }
  .panel.collapsed > *:not(.panel-header-row){ display:none !important; }
  .panel-sub{ font-size:11.5px; color:var(--muted); margin-bottom:12px; }
  .legend-row{ display:flex; gap:14px; margin-bottom:12px; flex-wrap:wrap; }
  .legend-item{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-soft); font-weight:600; }
  .legend-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
  .legend-dot.good{ background:var(--primary); } .legend-dot.bad{ background:var(--critical); } .legend-dot.flat{ background:var(--muted); }

  .dumbbell-wrap{ overflow-x:auto; }
  .dumbbell-row{ display:grid; grid-template-columns:100px 1fr 48px; align-items:center; gap:8px; min-width:360px; padding:14px 6px 10px; border-radius:10px; cursor:pointer; }
  .dumbbell-row:nth-child(even){ background:var(--bg); }
  .dumbbell-row:hover{ background:var(--surface-raised); }
  .dumbbell-row .dname{ font-size:11.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dumbbell-track{ position:relative; height:20px; }
  .dumbbell-track .full-track{
    position:absolute; top:50%; left:0; right:0; height:7px; border-radius:4px; transform:translateY(-50%);
    background:linear-gradient(to right, transparent 0%, var(--border) 18%, var(--border) 82%, transparent 100%);
  }
  .dumbbell-track .pill{ position:absolute; top:50%; height:7px; border-radius:4px; transform:translateY(-50%); }
  .dumbbell-track .pill.good{ background:var(--primary); }
  .dumbbell-track .pill.bad{ background:var(--critical); }
  .dumbbell-track .pill.flat{ background:var(--muted); width:8px !important; height:8px; border-radius:50%; box-shadow:0 0 0 2px var(--surface); transform:translate(-50%,-50%); }
  .dumbbell-track .pill-num{ position:absolute; top:50%; transform:translateY(-50%); font-size:11.5px; font-weight:800; color:var(--text); white-space:nowrap; }
  .dumbbell-delta{ font-size:11px; font-weight:800; text-align:center; padding:3px 4px; border-radius:99px; }
  .dumbbell-delta.good{ background:var(--primary-soft); color:var(--primary-ink); }
  .dumbbell-delta.bad{ background:var(--critical-soft); color:var(--critical); }
  .dumbbell-delta.flat{ background:var(--surface-raised); color:var(--muted); }

  [data-name].clickable{ cursor:pointer; }

  /* ---------- Player detail popup ---------- */
  .popup-overlay{
    position:fixed; inset:0; background:rgba(10,12,14,.45); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
    display:flex; align-items:center; justify-content:center; z-index:50; padding:24px;
    opacity:0; pointer-events:none; transition:opacity .15s ease;
  }
  .popup-overlay.show{ opacity:1; pointer-events:auto; }
  .player-popup{
    background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-soft);
    width:min(380px, 100%); max-height:calc(100vh - 48px); overflow-y:auto;
    transform:translateY(10px); transition:transform .15s ease;
  }
  .popup-overlay.show .player-popup{ transform:translateY(0); }
  .pp-head{ padding:18px 18px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; }
  .pp-avatar{ width:38px; height:38px; border-radius:50%; color:#fff; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; flex:none; }
  .pp-name{ font-weight:800; font-size:15.5px; }
  .pp-sub{ font-size:11.5px; color:var(--muted); margin-top:1px; }
  .pp-close{
    margin-left:auto; width:28px; height:28px; border-radius:50%; border:1px solid var(--border); background:none;
    color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; flex:none;
  }
  .pp-close:hover{ color:var(--text); border-color:var(--border-strong); }
  .pp-close svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }
  .pp-body{ padding:16px 18px 18px; }
  .pp-stats{ display:grid; grid-template-columns:1fr; gap:10px; margin-bottom:10px; }
  .pp-stat{ background:var(--bg); border-radius:10px; padding:10px 12px; }
  .pp-hcp-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:14px; }
  .pp-hcp-cell{ background:var(--bg); border-radius:10px; padding:9px 6px; text-align:center; }
  .pp-hcp-cell .k{ font-size:8.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; white-space:nowrap; }
  .pp-hcp-cell .v{ font-size:14px; font-weight:800; margin-top:3px; }
  .pp-stat .k{ font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; }
  .pp-stat .v{ font-size:17px; font-weight:800; margin-top:2px; }
  .pp-section{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:14px 0 6px; }
  .pp-section:first-of-type{ margin-top:0; }
  .pp-line{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--border); font-size:12px; }
  .pp-line:last-child{ border-bottom:none; }
  .pp-line .d{ color:var(--muted); }
  .pp-line .v{ font-weight:700; text-align:right; }
  .pp-empty{ font-size:12px; color:var(--muted); padding:6px 0; }

  .search-count{ font-size:10.5px; font-weight:700; color:var(--primary-ink); margin-left:8px; opacity:0; transition:opacity .12s ease; }
  .search-count.show{ opacity:1; }
  .field-empty{ display:none; padding:16px 4px; text-align:center; color:var(--muted); font-size:11.5px; }
  .field-empty.show{ display:block; }

  .roster-controls{ display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
  .roster-controls input[type="search"]{
    background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-pill);
    padding:8px 14px; color:var(--text); font-size:13px; flex:1; min-width:180px; max-width:280px;
  }
  .roster-controls input[type="search"]:focus{ outline:2px solid var(--primary); outline-offset:2px; }
  .result-count{ font-size:11.5px; color:var(--muted); margin-left:auto; }
  .table-wrap{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); overflow-x:auto; }
  table{ border-collapse:collapse; min-width:560px; }
  th,td{ padding:9px 12px; text-align:right; border-bottom:1px solid var(--border); font-size:12.5px; white-space:nowrap; }
  th:first-child, td:first-child, th:nth-child(2), td:nth-child(2){ text-align:left; }
  th{ font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; position:sticky; top:0; background:var(--surface); }
  th:nth-child(3), td:nth-child(3), th:nth-child(4), td:nth-child(4){ width:90px; }
  th:nth-child(5), td:nth-child(5), th:nth-child(6), td:nth-child(6){ width:80px; }
  th:nth-child(2), td:nth-child(2){ width:auto; }
  tbody tr:last-child td{ border-bottom:none; }
  tbody tr:hover{ background:var(--surface-raised); }
  tbody tr.is-hidden{ display:none; }
  .rank{ color:var(--muted); font-weight:700; width:26px; }
  .name-cell{ font-weight:700; }
  .rounds-chip{ display:inline-block; font-size:9.5px; font-weight:800; letter-spacing:.03em; padding:2px 7px; border-radius:var(--radius-pill); border:1px solid var(--border); color:var(--muted); }
  .rounds-chip.both{ color:var(--primary-ink); background:var(--primary-soft); border-color:transparent; }
  .shift-badge{ display:inline-block; min-width:28px; padding:2px 7px; border-radius:6px; font-weight:700; font-size:12px; }
  .shift-badge.good{ background:var(--primary-soft); color:var(--primary-ink); }
  .shift-badge.bad{ background:var(--critical-soft); color:var(--critical); }
  .shift-badge.flat{ color:var(--muted); }

  .payout-grid{ display:grid; grid-template-columns:1fr; gap:10px; }
  .payout-card{ background:var(--surface-raised); border:1px solid var(--border); border-left:3px solid var(--pot-accent, var(--border)); border-radius:10px; padding:10px 14px; }
  .payout-card .k{ color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-size:9.5px; display:block; margin-bottom:3px; }
  .payout-card .v{ font-weight:800; color:var(--pot-accent, var(--text)); font-size:14px; }
  .payout-card .who{ font-weight:500; color:var(--text); margin-left:5px; font-size:11.5px; }

  footer.note{ margin-top:18px; font-size:11.5px; color:var(--muted); border-top:1px solid var(--border); padding-top:16px; }

  .tooltip{
    position:fixed; pointer-events:none; background:var(--text); color:var(--bg);
    font-size:12px; padding:6px 10px; border-radius:7px; opacity:0; transform:translateY(4px);
    transition:opacity .1s ease, transform .1s ease; z-index:30; white-space:nowrap;
  }
  .tooltip.show{ opacity:1; transform:translateY(0); }

  @media (max-width:640px){
    .topbar{ padding:10px 16px; } .topbar-links{ display:none; }
    .app-shell{ padding:0 16px; }
    .kpi-value{ font-size:21px; }
  }


  .center-col{ display:flex; flex-direction:column; }
  .map-card{ flex:1; display:flex; flex-direction:column; padding:14px; }
  .map-stage{ position:relative; width:100%; flex:1; min-height:320px; }
  .map-image{
    width:100%; height:100%; display:block; object-fit:cover; user-select:none; opacity:.9;
    -webkit-mask-image:radial-gradient(ellipse 62% 62% at 50% 44%, black 45%, transparent 88%);
    mask-image:radial-gradient(ellipse 62% 62% at 50% 44%, black 45%, transparent 88%);
  }
  :root[data-theme="dark"] .map-image, :root[data-theme="dark"] .hole-zoom{ filter:invert(1) brightness(.78) contrast(1.08); }
  .map-layer{ position:absolute; inset:0; }
  .map-layer .ce-marker{
    position:absolute; transform:translate(-50%,-50%);
    width:clamp(23px,2.6vw,32px); height:clamp(23px,2.6vw,32px);
    padding:0; border:1px solid var(--border); border-radius:999px;
    background:color-mix(in srgb, var(--surface) 85%, transparent);
    color:var(--text); box-shadow:0 2px 8px rgba(0,0,0,.18);
    font:inherit; font-weight:700; font-size:11px; cursor:pointer;
    transition:transform 160ms ease, background 160ms ease, color 160ms ease;
  }
  .map-layer .ce-marker:hover{ transform:translate(-50%,-50%) scale(1.14); }
  .map-layer .ce-marker[aria-pressed="true"]{
    background:var(--primary); color:#fff; transform:translate(-50%,-50%) scale(1.2);
    box-shadow:0 0 0 4px var(--primary-soft);
  }
  .selected-hole-card{
    position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
    width:min(420px, 92%); display:grid; grid-template-columns:76px 1fr; align-items:center; gap:12px;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
    box-shadow:var(--shadow-soft); padding:12px 40px 12px 12px;
  }
  .selected-hole-card .pp-close{ position:absolute; top:10px; right:10px; }
  .hole-zoom{ width:76px; aspect-ratio:4/3; border-radius:10px; background-size:340%; background-position:50% 50%; background-repeat:no-repeat; background-color:var(--bg); }
  .hole-name{ font-weight:800; font-size:15px; margin:2px 0; }
  @media (max-width:1180px){ .center-col{ display:none; } #round-winners-card{ order:-1; } }