/* ============================================================
   DIVOTNERD — CLUBHOUSE DESIGN SYSTEM (production / player app)
   Ported from static/mockups/v2-unified/clubhouse.css (approved
   design). One system, three shells. Day palette for play &
   information, Night palette (.night scope) for money surfaces.
   Type: Fraunces (display) / Work Sans (body) / IBM Plex Mono (data)
   ============================================================ */

:root{
  /* --- Day (parchment clubhouse) --- */
  --page:#F3EDE0;
  --card:#FAF6EC;
  --raised:#FFFFFF;
  --green:#14402C;
  --green-2:#1C5639;
  --brass:#A87C3D;
  --brass-soft:#C39A57;
  --ink:#20241F;
  --muted:#6E6A5E;
  --hair:#DED5C2;
  --hair-2:#E8E0D0;
  --red:#9E3B2E;
  --pos:#2E7D4F;
  --amber:#B07A1E;
  --indigo:#4C5688;
  --cream:#F3EDE0;
  --shadow:0 1px 0 rgba(32,36,31,.04), 0 8px 24px -12px rgba(32,36,31,.18);
  --shadow-lg:0 24px 60px -24px rgba(32,36,31,.40);
  --r:14px;
  --r-sm:9px;
}

/* --- Night (the clubhouse after dark: money surfaces) --- */
.night{
  --page:#0F1712;
  --card:#15211A;
  --raised:#1B2A20;
  --green:#3E8E63;
  --green-2:#4FA876;
  --brass:#C39A57;
  --brass-soft:#D9B87E;
  --ink:#F0EADB;
  --muted:#9AA294;
  --hair:#28352C;
  --hair-2:#222E26;
  --red:#D96C5B;
  --pos:#5FBE8C;
  --amber:#D9A84E;
  --shadow:0 1px 0 rgba(0,0,0,.2), 0 10px 28px -12px rgba(0,0,0,.55);
  --shadow-lg:0 24px 60px -24px rgba(0,0,0,.7);
  background:var(--page);
  color:var(--ink);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--page);
  color:var(--ink);
  font-family:"Work Sans",system-ui,sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background-image:
    radial-gradient(1200px 600px at 100% -10%, rgba(168,124,61,.06), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(20,64,44,.05), transparent 55%);
  background-attachment:fixed;
}
.night body, body.night{
  background-image:
    radial-gradient(1200px 600px at 100% -10%, rgba(195,154,87,.07), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(62,142,99,.06), transparent 55%);
}

/* --- Type roles --- */
.serif{font-family:"Fraunces",Georgia,serif}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.eyebrow{
  font-family:"IBM Plex Mono",monospace;text-transform:uppercase;
  letter-spacing:.18em;font-size:11px;color:var(--brass);font-weight:500;
}
h1,h2,h3,.display{font-family:"Fraunces",Georgia,serif;font-weight:600;letter-spacing:-.015em;margin:0}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:16px;color:var(--ink)}
a{color:inherit}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* --- Cards --- */
.card{
  background:var(--card);border:1px solid var(--hair);border-radius:var(--r);
  box-shadow:var(--shadow);
}
.card-h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--hair-2)}
.card-h h3{font-size:18px}
.card-b{padding:16px 18px}

/* --- Badges & pills --- */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  padding:3px 9px;border-radius:99px;border:1px solid var(--hair);
  color:var(--muted);background:var(--raised);
}
.badge.live{color:var(--red);border-color:color-mix(in srgb, var(--red) 40%, transparent)}
.badge.brass{color:var(--brass);border-color:color-mix(in srgb, var(--brass) 45%, transparent)}
.badge.green{color:var(--pos);border-color:color-mix(in srgb, var(--pos) 40%, transparent)}
.dot{width:6px;height:6px;border-radius:99px;background:currentColor;flex-shrink:0}
.dot.pulse{animation:chip-pulse 1.6s ease-in-out infinite}
@keyframes chip-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* --- Buttons --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;border-radius:11px;font-weight:600;font-size:14px;
  background:var(--green);color:var(--cream);border:1px solid transparent;
  transition:filter .15s ease;
}
/* :not(.ghost) — night's .btn text-color override sits at equal specificity to
   .btn.ghost; scoping it here keeps ghost buttons legible regardless of rule
   order (same fix already shipped in the v2-midnight variant's .daylight .btn). */
.night .btn:not(.ghost){color:#0F1712}
.btn:hover{filter:brightness(1.12)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--hair)}
.btn.brass{background:var(--brass);color:#FFF}
.night .btn.brass{color:#0F1712}
.btn.sm{padding:7px 13px;font-size:13px;border-radius:9px}
.btn svg{width:15px;height:15px;flex-shrink:0}

/* --- The member's chit (signature: bet slips, tickets, settlements) --- */
.chit{
  position:relative;background:var(--raised);border:1px solid var(--hair);
  border-radius:var(--r-sm);box-shadow:var(--shadow);
  font-family:"IBM Plex Mono",monospace;overflow:hidden;
}
.chit::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--brass),var(--brass-soft));
}
.chit-h{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:12px 14px 8px;
}
.chit-h .t{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.chit-h .n{font-size:10px;color:var(--muted);letter-spacing:.1em}
.chit-b{padding:4px 14px 12px;font-size:12.5px}
.chit-row{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px dashed var(--hair)}
.chit-row:last-child{border-bottom:none}
.chit-row .l{color:var(--muted)}
.chit-row .v{font-weight:600}
.chit-f{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px;border-top:1.5px dashed var(--hair);
  background:color-mix(in srgb, var(--brass) 6%, transparent);
  font-size:12px;
}
.chit-f .pay{font-weight:700;font-size:15px;color:var(--brass)}
/* perforated edge */
.chit-f::before{content:""}
.chit .perf{
  position:absolute;left:-6px;width:12px;height:12px;border-radius:99px;
  background:var(--page);border:1px solid var(--hair);
}
.chit .perf.r{left:auto;right:-6px}

/* --- Data tables --- */
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
.tbl th{
  font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  text-align:left;padding:9px 12px;border-bottom:1px solid var(--hair);
}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--hair-2)}
.tbl tr:last-child td{border-bottom:none}
.tbl .num{font-family:"IBM Plex Mono",monospace;text-align:right}

/* --- Avatars --- */
.avi{
  width:34px;height:34px;border-radius:99px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--green);color:var(--cream);
  font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;
}
.avi.brass{background:var(--brass)}
.avi.sm{width:26px;height:26px;font-size:10px}

/* --- Eyebrow section head --- */
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:26px 0 14px}
.section-head h2{font-size:26px}

/* --- Hairline rule with brass tick --- */
.rule{position:relative;border:none;border-top:1px solid var(--hair);margin:22px 0}
.rule::after{
  content:"";position:absolute;left:0;top:-1px;width:42px;height:1px;background:var(--brass);
}

/* --- Utility --- */
.row{display:flex;align-items:center;gap:10px}
.grow{flex:1;min-width:0}
.muted{color:var(--muted)}
.pos{color:var(--pos)}
.neg{color:var(--red)}
.brass-t{color:var(--brass)}
.icon{width:16px;height:16px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}
.tabular{font-variant-numeric:tabular-nums}

/* --- Inline icon (Lucide) sizing default — account.js / portal markup emits
   <i class="icn"> everywhere; give it a sane default so icons aren't 0x0
   before a more specific rule overrides the size. --- */
.icn{width:16px;height:16px;display:inline-flex;flex-shrink:0;stroke-width:2}

/* Tailwind's .hidden (from base.html's tailwind.css, loaded BEFORE this file)
   loses the cascade to any later equal-specificity display rule (.cgate,
   .app-view, ...). The app shell toggles visibility exclusively via .hidden,
   so re-assert it here with priority. */
.hidden{display:none !important}


/* ============================================================
   APP SHELL LAYOUT
   Full-page (non-phone-frame) productionization of the player-app
   mockup chrome: fixed-height view, scrolling body, sticky-by-flex
   topbar, fixed-overlay tabbar. See CLAUDE.md mobile rules: 100dvh
   outer, bottom-nav safe-area, ~112px bottom padding on the scroller.
   ============================================================ */

.app-view{
  position:relative;
  /* HEIGHT, not min-height. With min-height the flex column grows past the
     viewport, so .app-main never overflows and never becomes a real scroller —
     the document scrolls instead. That breaks two things: the topbar is
     supposed to be a non-scrolling flex item (see below), and .app-main's
     overscroll-behavior-y:contain then swallows every touch drag without
     scrolling anything, because a scroll container that cannot scroll still
     refuses to chain to its parent. Result: the app looked frozen on touch. */
  height:100vh;height:100dvh;
  display:flex;flex-direction:column;
  background:var(--page);color:var(--ink);
}

/* Topbar: event name + eyebrow (round/course/day) + LIVE badge + avatar chip.
   Sits as a non-scrolling flex item above .app-main — no position tricks
   needed since .app-main is the only scrolling region. */
.app-topbar{
  flex-shrink:0;display:flex;align-items:center;gap:10px;
  padding:calc(10px + env(safe-area-inset-top,0px)) 16px 12px;
  border-bottom:1.5px solid var(--brass);position:relative;
}
.app-topbar::after{content:"";position:absolute;left:0;right:0;bottom:-3.5px;height:1px;background:var(--hair)}
.app-topbar .ey{
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass);font-weight:500;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.app-topbar h1{font-size:17px;line-height:1.2;margin-top:2px}
.app-topbar .me-chip{
  display:inline-flex;align-items:center;gap:7px;background:var(--raised);border:1px solid var(--hair);
  border-radius:99px;padding:3px 11px 3px 4px;font-size:12px;font-weight:600;flex-shrink:0;
}

/* Main: the only scrolling region. Bottom padding clears the fixed .app-tabbar
   (112px, matching CLAUDE.md's pb-28 convention) plus the safe area. */
/* ── Members' desk quick rail ─────────────────────────────────────────────
   Sits BETWEEN the topbar and the scroller, so it holds its position while
   Home scrolls without needing sticky positioning or full-bleed negative
   margins inside a padded scrollport. flex-shrink:0 keeps it off the
   scroller's height budget. Home only — nav.js hides it elsewhere.
   The .hidden re-assert later in this file is !important, so it beats the
   display:flex here; do not "fix" that by lowering the specificity. */
.desk-rail{
  flex-shrink:0;display:flex;gap:7px;overflow-x:auto;
  padding:9px 14px 10px;background:var(--card);
  border-bottom:1px solid var(--hair);
  scrollbar-width:none;-ms-overflow-style:none;
  /* Fade the trailing edge so a rail wider than the phone reads as
     scrollable rather than clipped. Cosmetic — degrades to a hard edge. */
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
}
.desk-rail::-webkit-scrollbar{display:none}
.drail-chip{
  position:relative;flex-shrink:0;display:inline-flex;align-items:center;gap:6px;
  background:var(--raised);border:1px solid var(--hair);border-radius:99px;
  padding:8px 13px;font-size:12.5px;color:var(--ink);white-space:nowrap;
  min-height:40px;
}
.drail-chip .icn{width:14px;height:14px;color:var(--brass);flex-shrink:0}
.drail-chip:active{background:var(--hair-2)}
/* Unread notices: the ONE chip allowed to shout. */
.drail-chip.hot{background:var(--green);border-color:var(--green);color:#F0EADB;font-weight:600}
.drail-chip.hot .icn{color:var(--brass-soft)}
.drail-dot{width:7px;height:7px;border-radius:99px;background:var(--red);flex-shrink:0}
/* Always-on half of the signal: the rail is Home-only, this rides the tab bar
   so a player on Play or Book still learns the schedule moved. */
.more-nav-badge{position:absolute;top:6px;right:calc(50% - 18px);width:8px;height:8px;
  border-radius:99px;background:var(--red)}

.app-main{
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:16px 14px calc(112px + env(safe-area-inset-bottom,0px));
  scrollbar-width:thin;
}
.app-main .card + .card{margin-top:12px}

/* Tabbar: fixed to the viewport bottom, 5 flex tabs, safe-area padding.
   Day/night aware purely through inherited custom properties — no separate
   .night override block needed. */
.app-tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;align-items:stretch;background:var(--card);
  border-top:1.5px solid var(--brass);
  box-shadow:0 -8px 24px -16px rgba(32,36,31,.3);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.tabbtn{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:10px 2px 6px;color:var(--muted);font-size:9.5px;font-weight:600;font-family:"IBM Plex Mono",monospace;
  letter-spacing:.08em;text-transform:uppercase;position:relative;transition:color .15s;
}
.tabbtn svg{width:20px;height:20px}
.tabbtn.active{color:var(--green)}
.tabbtn.active svg{color:var(--green)}
.tabbtn.active::after{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:2.5px;border-radius:2px;background:var(--brass);
}

/* Desktop: this is a phone-first surface — cap the content column and center
   it; topbar content and tabbar buttons track the same 620px column. */
@media (min-width:720px){
  .app-main{max-width:620px;width:100%;margin:0 auto}
  .app-topbar{padding-left:max(16px, calc(50% - 294px));padding-right:max(16px, calc(50% - 294px))}
  .app-tabbar{padding-left:max(0px, calc(50% - 310px));padding-right:max(0px, calc(50% - 310px))}
}

/* Bet slip bar (shown above the tabbar on the Book tab only) */
.slipbar{
  flex-shrink:0;position:fixed;left:0;right:0;z-index:49;
  bottom:calc(58px + env(safe-area-inset-bottom,0px));
  display:none;align-items:center;gap:10px;padding:11px 16px;
  background:var(--green);color:var(--cream);cursor:pointer;border-top:1px solid var(--brass);
}
.night .slipbar{color:#0F1712}
.slipbar.show{display:flex}
.slipbar .ct{font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;letter-spacing:.04em}
.slipbar .hint{
  font-family:"IBM Plex Mono",monospace;font-size:10px;opacity:.75;margin-left:auto;
  display:inline-flex;align-items:center;gap:5px;letter-spacing:.08em;text-transform:uppercase;
}
.slipbar svg{width:15px;height:15px}


/* ============================================================
   GATE CARD — access-code / player-select entry screens
   Ported from templates/tournament_portal.html inline .cgate-* CSS,
   restyled onto clubhouse tokens (identical token names, so this is
   effectively a direct port).
   ============================================================ */

/* Own background: base.html's Tailwind `bg-gray-100` body class outranks the
   plain `body` selector above, so full-viewport shells paint their own ground. */
.cgate{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--page)}
.cgate-card{background:var(--card);border:1px solid var(--hair);border-radius:18px;box-shadow:var(--shadow-lg);width:100%;max-width:380px;padding:28px 24px;text-align:center}
.cgate-logo{max-height:56px;margin:0 auto 12px;display:block}
.cgate-crest{width:52px;height:52px;border-radius:13px;margin:0 auto 14px;background:linear-gradient(160deg,var(--green),var(--green-2));border:1px solid rgba(168,124,61,.55);display:flex;align-items:center;justify-content:center;color:var(--brass-soft)}
.cgate-crest .icn{width:26px;height:26px;stroke-width:1.6}
.cgate-ey{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.cgate-h{font-family:"Fraunces",serif;font-weight:600;font-size:23px;margin:4px 0 18px;color:var(--ink)}
.cgate-sub{font-size:13px;color:var(--muted);margin-bottom:16px}
.cgate-label{display:block;text-align:left;font-size:13px;font-weight:600;color:var(--ink);margin:6px 2px}
.cgate-input{width:100%;padding:13px 15px;border:1px solid var(--hair);border-radius:11px;background:var(--raised);font-family:"IBM Plex Mono",monospace;font-size:18px;letter-spacing:.12em;text-align:center;color:var(--ink);text-transform:uppercase}
.cgate-input:focus{outline:none;border-color:var(--brass)}
/* 16px minimum — anything smaller makes iOS Safari auto-zoom on focus */
.cgate-select{width:100%;padding:13px 15px;border:1px solid var(--hair);border-radius:11px;background:var(--raised);font-family:inherit;font-size:16px;color:var(--ink)}
.cgate-btn{width:100%;margin-top:14px;padding:13px 16px;border-radius:11px;border:none;cursor:pointer;background:var(--green);color:#F3EDE0;font-family:inherit;font-weight:700;font-size:15px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.cgate-btn:hover{background:var(--green-2)}
.cgate-btn:disabled{background:var(--muted);cursor:not-allowed;opacity:.6}
.cgate-install{width:100%;margin-bottom:12px;padding:10px;border-radius:10px;border:1px solid var(--hair);background:var(--raised);color:var(--green);font-weight:600;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer}
.cgate-err{color:var(--red);font-size:13px;margin-top:12px}


/* ============================================================
   ACCOUNT MENU + PIN SHEET
   account.js (static/js/public/portal/account.js) is reused as-is in
   a later task and dynamically creates #portal-account-sheet /
   #portal-pin-sheet hosts, toggling `.open`, and injects .pa-* markup.
   Ported from static/css/portal-clubhouse.css (already token-based).
   ============================================================ */

#portal-account-sheet, #portal-pin-sheet{position:fixed;inset:0;z-index:96;display:none}
#portal-account-sheet.open, #portal-pin-sheet.open{display:block}
.pa-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.pa-card{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:440px;
  background:var(--card);border:1px solid var(--hair);border-top-left-radius:20px;border-top-right-radius:20px;
  box-shadow:var(--shadow-lg);padding:18px 18px calc(20px + env(safe-area-inset-bottom,0px))}
@media(min-width:640px){
  .pa-card{bottom:auto;top:50%;transform:translate(-50%,-50%);border-radius:16px}
}
.pa-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.pa-head .avi{flex-shrink:0}
.pa-name{font-family:"Fraunces",serif;font-weight:600;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pa-sub{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pa-x{margin-left:auto;width:40px;height:40px;border-radius:50%;border:1px solid var(--hair);background:var(--raised);display:inline-flex;align-items:center;justify-content:center;color:var(--ink);flex-shrink:0}
.pa-help{font-size:12.5px;color:var(--muted);margin-bottom:10px}
.pa-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:13px 14px;border:1px solid var(--hair);border-radius:11px;background:var(--raised);color:var(--ink);font-family:inherit;font-size:14px;font-weight:600;margin-top:8px}
.pa-row .icn{width:17px;height:17px;color:var(--green);flex-shrink:0}
.pa-row.muted{color:var(--muted);font-weight:500}
.pa-row.muted .icn{color:var(--pos)}
.pa-row.danger{color:var(--red)}
.pa-row.danger .icn{color:var(--red)}
.pa-input{width:100%;margin-top:10px;padding:13px 15px;border:1px solid var(--hair);border-radius:11px;background:var(--raised);font-family:"IBM Plex Mono",monospace;font-size:20px;letter-spacing:.3em;text-align:center;color:var(--ink)}
.pa-input:focus{outline:none;border-color:var(--brass)}
.pa-err{color:var(--red);font-size:12.5px;margin-top:10px}
.pa-go{width:100%;margin-top:14px;padding:13px;border-radius:11px;border:none;background:var(--green);color:#F3EDE0;font-family:inherit;font-weight:700;font-size:15px}


/* ============================================================
   SHEET OVERLAY PRIMITIVE
   ONE reusable slide-up-sheet-with-backdrop, for every later task's
   overlay (bet slip, filters, detail drill-downs, etc). Ported from
   the player-app mockup's slip sheet. Contract: an ancestor toggles
   `.open` on both `.scrim` and `.sheet` (see overlayOpen() in
   static/js/public/portal/navigation.js for the existing pattern).
   ============================================================ */

.scrim{
  position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.scrim.open{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:61;background:var(--card);
  border-top:1.5px solid var(--brass);border-radius:22px 22px 0 0;box-shadow:var(--shadow-lg);
  transform:translateY(105%);transition:transform .3s cubic-bezier(.3,.9,.3,1);
  padding:10px 16px calc(18px + env(safe-area-inset-bottom,0px));
  max-height:86vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.sheet.open{transform:translateY(0)}
.sheet .grab{width:38px;height:4px;border-radius:99px;background:var(--hair);margin:0 auto 12px}
.sheet h3{font-size:18px;margin-bottom:12px;display:flex;align-items:center;gap:9px}
.sheet h3 svg{width:17px;height:17px;color:var(--brass)}
.sheet .btn{width:100%;margin-top:12px}
/* @media (prefers-reduced-motion: reduce) above already zeroes transition-duration
   globally, so .sheet / .scrim open+close instantly rather than sliding/fading
   for users who've asked for reduced motion. */


/* ============================================================
   TOAST
   Brief confirmation strip above the tabbar. book.js's showPortalToast()
   currently builds this element with inline styles (id #portal-toast) —
   this .toast class is the productionized, token-driven equivalent for
   markup that opts into the class contract instead.
   ============================================================ */

/* ============================================================
   SCORING OVERLAY + SCORECARD SHEET (ported from portal)
   scoring.js + schedule.js (static/js/public/portal/sections/) are reused
   AS-IS on /app; their styles lived in tournament_portal.html's inline CSS
   (~L398-455, L551-578) and portal-clubhouse.css (badge variants, code-pill,
   youtag, empty, ava). Direct token-based port — keep in sync by source
   line refs, do NOT restyle here.
   ============================================================ */

.sc-overlay{position:fixed;inset:0;z-index:95;background:var(--page);overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:env(safe-area-inset-bottom,0px)}
.sc-overlay.hidden{display:none}
.sc-top{position:sticky;top:0;background:var(--card);border-bottom:1px solid var(--hair);padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top,0px));display:flex;align-items:center;gap:12px;z-index:2}
.sc-top h2{font-family:"Fraunces",serif;font-size:18px;margin:0;flex:1}
.sc-close{width:44px;height:44px;border-radius:50%;border:1px solid var(--hair);background:var(--raised);display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}
.sc-status{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--brass);padding:8px 16px;border-bottom:1px solid var(--hair);background:var(--card)}
.sht-meta{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted);padding:8px 16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.shtc-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:2px 12px 4px}
.shtc{border-collapse:separate;border-spacing:0;font-family:"IBM Plex Mono",monospace;font-size:11.5px;min-width:660px;background:var(--raised)}
.shtc th,.shtc td{border-right:1px solid var(--hair-2);border-bottom:1px solid var(--hair-2);text-align:center;height:34px;min-width:27px;padding:0;position:relative}
.shtc thead th,.shtc thead td{background:var(--card);color:var(--green);font-weight:600}
.shtc .pn{position:sticky;left:0;z-index:2;text-align:left;min-width:138px;background:var(--card);padding:0 10px}
.shtc .shtc-pn{display:flex;align-items:center;gap:6px}
.shtc .shtc-pn .tdot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.shtc .shtc-pn .nm{font-family:"Work Sans",sans-serif;font-weight:600;font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.shtc .shtc-pn .ch{font-size:9.5px;color:var(--muted);margin-left:auto;padding-left:8px;white-space:nowrap;flex-shrink:0}
.shtc .shtc-pn .youtag{font-size:8.5px;flex-shrink:0}
.shtc .sub{background:rgba(168,124,61,.09);font-weight:600;color:var(--brass);min-width:40px}
.shtc .tot{background:rgba(168,124,61,.14);font-weight:700;color:var(--brass);min-width:58px}
.shtc thead .tot{background:var(--brass);color:#fff}
.shtc thead tr.yd td,.shtc thead tr.yd .pn{color:var(--muted);font-weight:500;font-size:10px}
.shtc thead tr.yd .sub,.shtc thead tr.yd .tot{background:rgba(168,124,61,.09);color:var(--muted);font-weight:500}
.shtc tr.me .pn,.shtc tr.me td{background:rgba(46,125,79,.08)}
.shtc td .pip{position:absolute;top:2px;right:3px;color:var(--brass);font-size:8px;line-height:1}
.shtc td .pt{position:absolute;bottom:1px;left:3px;color:var(--pos);font-size:8px;font-weight:700;line-height:1}
.shtc td .nt{position:absolute;bottom:1px;right:3px;color:var(--muted);font-size:8px;font-weight:600;line-height:1}
@media (min-width:700px){
  #scorecard-sheet .shtc-wrap{max-width:1080px;margin:0 auto}
  #scorecard-sheet .shtc{min-width:0;width:100%;table-layout:fixed}
  /* table-layout:fixed ignores min-width — the name column needs an explicit
     width or it collapses and the names vanish. */
  #scorecard-sheet .shtc .pn{width:156px}
  #scorecard-sheet .shtc .sub{width:44px}
  #scorecard-sheet .shtc .tot{width:64px}
}
@media (orientation:landscape) and (max-width:960px){
  #scorecard-sheet .shtc-wrap{overflow-x:hidden;padding:2px 8px}
  #scorecard-sheet .shtc{min-width:0;width:100%;table-layout:fixed;font-size:9.5px}
  #scorecard-sheet .shtc th,#scorecard-sheet .shtc td{min-width:0;height:27px}
  #scorecard-sheet .shtc .pn{width:104px;padding:0 6px}
  #scorecard-sheet .shtc .shtc-pn .nm{font-size:10.5px}
  #scorecard-sheet .shtc .shtc-pn .ch{display:none}
}
.sht-legend{display:flex;gap:16px;flex-wrap:wrap;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted);padding:12px 16px}
.sht-legend span{display:inline-flex;align-items:center;gap:6px}
.sht-legend .pip{color:var(--red)}
.sht-legend .pt-l{color:var(--pos);font-weight:700}
.sht-legend .nt-l{color:var(--muted);font-weight:600}
@media (min-width:961px){
  #scorecard-sheet.sc-overlay{background:rgba(15,24,18,.55);display:flex;align-items:center;justify-content:center;padding:40px 24px}
  #scorecard-sheet .sht-shell{width:100%;max-width:1080px;max-height:calc(100vh - 80px);display:flex;flex-direction:column;overflow:hidden;background:var(--page);border:1px solid var(--hair);border-radius:18px;box-shadow:0 40px 90px -25px rgba(0,0,0,.55)}
  #scorecard-sheet .sc-top{flex-shrink:0;border-radius:18px 18px 0 0}
  #scorecard-sheet .sht-body{flex:1;min-height:0;overflow-y:auto}
  #scorecard-sheet .shtc-wrap{max-width:none;margin:0}
}
.sc-holehead{display:flex;align-items:center;justify-content:space-between;padding:16px}
.sc-holehead .num{font-family:"Fraunces",serif;font-size:30px;font-weight:600}
.sc-holehead select.num{appearance:none;-webkit-appearance:none;border:none;background:transparent;color:var(--ink);text-align:center;padding:0;cursor:pointer}
.sc-holehead select.num:focus{outline:none}
.sc-holehead .meta{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted);text-align:right}
.sc-nav{width:44px;height:44px;border-radius:12px;border:1px solid var(--hair);background:var(--card);display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}
/* wrap: the number pad is a full-width third row inside the player's card */
.sc-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;background:var(--card);border:1px solid var(--hair);border-radius:14px;padding:12px 14px;margin:0 16px 10px}
.sc-row .nm{flex:1;min-width:0} .sc-row .nm b{display:block;font-size:14.5px}
.sc-row .nm .dots{font-size:11px;color:var(--brass);letter-spacing:2px}
.sc-score{font-family:"IBM Plex Mono",monospace;font-size:22px;min-width:40px;text-align:center}
.sc-score.pending::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#d97706;margin-left:5px;vertical-align:middle}
/* the readout is a button (opens the pad) — scoped so the schedule card's
   ".sc-score" span is untouched */
.sc-row .sc-score{min-width:52px;min-height:44px;border:1px solid transparent;background:transparent;color:var(--ink);border-radius:10px;cursor:pointer;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.sc-row.padopen .sc-score{border-color:var(--brass);background:rgba(176,141,87,.10)}
.sc-nav.ready{border-color:var(--brass);color:var(--brass)}
.sc-pad{flex-basis:100%;display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:11px;padding-top:11px;border-top:1px solid var(--hair)}
.sc-pad-k{height:46px;border-radius:11px;border:1px solid var(--hair);background:var(--raised);color:var(--ink);font-family:"IBM Plex Mono",monospace;font-size:18px;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.sc-pad-k:active{background:var(--brass);border-color:var(--brass);color:#fff}
.sc-pad-k.clr{grid-column:1/-1;font-family:inherit;font-size:13px;color:var(--muted)}
.sc-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--hair);background:var(--raised);font-size:20px;color:var(--ink);display:inline-flex;align-items:center;justify-content:center}
.sc-totals{display:flex;gap:14px;justify-content:space-between;font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted);padding:10px 18px}
/* Finalize: the group tells the organizer the card is done (not a lock) */
.sc-sub{padding:6px 16px 26px}
.sc-subbtn{width:100%;min-height:50px;border-radius:13px;border:1px solid var(--hair);background:var(--raised);color:var(--muted);font-size:14.5px;font-weight:600}
.sc-subbtn.go{border-color:var(--brass);background:var(--brass);color:#fff}
.sc-subbtn.confirm{background:var(--card);color:var(--brass)}
.sc-subbtn[disabled]{opacity:.55}
.sc-sub.done{display:flex;gap:10px;align-items:flex-start;margin:0 16px 26px;padding:12px 14px;
  background:rgba(46,125,79,.10);border:1px solid rgba(46,125,79,.35);border-radius:13px}
.sc-sub.done .icn{color:var(--green);flex-shrink:0;margin-top:1px}
.sc-sub.done b{display:block;font-size:14px}
.sc-sub.done span{font-size:12px;color:var(--muted)}
.sc-sbf{display:flex;align-items:stretch;gap:8px;margin:4px 16px 2px;padding:10px 12px;background:var(--card);border:1px solid var(--hair);border-radius:12px}
.sc-sbf .tm{flex:1;text-align:center;padding:3px 4px;border-radius:9px;min-width:0}
.sc-sbf .tm.lead{background:rgba(46,125,79,.12)}
.sc-sbf .tm .nm{font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-sbf .tm.lead .nm{color:var(--green)}
.sc-sbf .tm .pts{font-family:"Fraunces",serif;font-weight:600;font-size:26px;line-height:1.15;color:var(--ink)}
.sc-sbf .tm.lead .pts{color:var(--green)}
.sc-sbf .vs{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 4px}
.sc-sbf .vs .dl{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:700;color:var(--brass);text-align:center}
.sc-sbf .vs .th{font-family:"IBM Plex Mono",monospace;font-size:9px;color:var(--muted);margin-top:2px;white-space:nowrap}
/* Floating pill, NOT a flow-level banner: in flow it sat under the sticky
   header and pushed the whole card list down on every score tap, then back up
   when the queue drained. Fixed = it can never move the scorecard. */
/* left:0;right:0 + auto margins, NOT left:50%+translate: with only `left` set
   the available width collapses to half the screen and the text wraps to three
   lines. */
.sc-syncbar{display:none;position:fixed;left:0;right:0;margin-inline:auto;
  width:fit-content;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:6;
  max-width:min(92%,420px);padding:8px 14px;border-radius:999px;
  font-size:12.5px;line-height:1.3;text-align:center;
  background:#7c2d12;color:#fde68a;box-shadow:0 6px 18px rgba(0,0,0,.28);
  pointer-events:none}
.sc-syncbar.show{display:block}

/* ============================================================
   PORTAL BOOK (reused book.js)
   sections/book.js renders into #book-content (mounted inside #tab-book)
   and emits these portal-clubhouse.css classes (L49-51, L352-369, L781-782)
   — token-based direct port; the Book tab's .night scope flips them dark.
   Badges/.card/.eyebrow/.empty/.ava/.youtag are already ported above.
   ============================================================ */

.icn-sm{width:14px;height:14px}
.icn-lg{width:20px;height:20px}
.subtabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;background:var(--card);border:1px solid var(--hair);border-radius:11px;padding:5px;box-shadow:var(--shadow);margin-bottom:16px}
.subtabs::-webkit-scrollbar{display:none}
.subtab{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:8px;font-size:13.5px;font-weight:500;color:var(--muted);transition:.15s;white-space:nowrap}
.subtab .icn{width:15px;height:15px;opacity:.8}
.subtab:hover{color:var(--ink);background:rgba(168,124,61,.07)}
.subtab.active{color:var(--green);background:var(--raised);box-shadow:inset 0 0 0 1px var(--hair);font-weight:600}
.lbtable{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.lbrow{display:grid;grid-template-columns:46px 42px 1fr 64px 70px;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--hair-2)}
.lbrow:last-child{border-bottom:none}
.lbrow.head{background:var(--raised);font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:9px 16px}
.lbrow:hover:not(.head):not(.me){background:rgba(168,124,61,.045)}
.lbrow.me{background:rgba(46,125,79,.07);box-shadow:inset 3px 0 0 var(--brass)}
.rank{font-family:"Fraunces",serif;font-weight:600;font-size:18px;text-align:center;color:var(--muted)}
.rank.g1{color:var(--brass)} .rank.g2{color:#9a9486} .rank.g3{color:#a9744a}
.rmono{font-family:"IBM Plex Mono",monospace;font-weight:600;text-align:right}
.book-activate-cta{display:inline-flex;align-items:center;gap:8px;width:100%;justify-content:center;padding:12px;margin-bottom:12px;border-radius:11px;border:1px solid var(--brass);background:var(--raised);color:var(--green);font-family:inherit;font-weight:700;font-size:13.5px}
.book-activate-cta .icn{width:16px;height:16px}
/* Unread-activity badge on the Book tab button (book.js refreshBookBadge) */
.tabbtn{position:relative}
.book-nav-badge{position:absolute;top:6px;right:calc(50% - 18px);min-width:8px;height:8px;border-radius:99px;background:var(--brass)}

/* supporting classes from portal-clubhouse.css */
.badge.up{color:var(--amber);background:rgba(176,122,30,.10);border-color:rgba(176,122,30,.4)}
.badge.final{color:var(--muted);background:rgba(110,106,94,.10);border-color:var(--hair)}
.code-pill{display:inline-flex;align-items:center;gap:6px;font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.06em;font-weight:600;color:var(--green)}
.code-pill button{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:5px;color:var(--muted)}
.code-pill button:hover{background:var(--hair-2);color:var(--green)}
.code-pill.copied{color:var(--pos)}
.youtag{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--brass);background:rgba(168,124,61,.12);border:1px solid rgba(168,124,61,.35);border-radius:4px;padding:1px 5px;margin-left:7px}
.empty{text-align:center;padding:40px 16px;color:var(--muted);font-size:14px}
.ava{width:34px;height:34px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;color:#fff;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 2px 6px -3px rgba(0,0,0,.4)}
.ava.sm{width:28px;height:28px;font-size:11px;border-radius:8px}


.toast{
  position:fixed;left:50%;bottom:calc(78px + env(safe-area-inset-bottom,0px));
  /* Above every overlay (.sc-overlay/.mg-overlay 95, sheets 96, #tk-sheet 90,
     .pp-pop 120) — toasts fire from inside those surfaces and must be seen. */
  transform:translateX(-50%) translateY(14px);z-index:130;
  background:var(--green);color:var(--cream);padding:10px 16px;border-radius:10px;
  font-size:12.5px;font-weight:500;box-shadow:var(--shadow-lg);
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;
  display:flex;align-items:center;gap:8px;max-width:88vw;text-align:center;
}
.night .toast{color:#0F1712}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast svg{width:14px;height:14px;flex-shrink:0}


/* ============================================================
   PORTAL STATS (reused stats.js)
   sections/stats.js renders into #stats-content (mounted in #tab-stats).
   Direct token-based port: portal-clubhouse.css L249-256, 564-568,
   585-592, 603-609, 612-647, 649-698(+712-714), 717-756 and the
   tournament_portal.html inline .st-* block (L479-549).
   ============================================================ */

.pstats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
@media(max-width:760px){ .pstats{grid-template-columns:repeat(2,1fr)} }
.pstat{background:var(--card);border:1px solid var(--hair);border-radius:12px;padding:14px 15px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.pstat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brass);opacity:.7}
.pstat .l{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:6px}
.pstat .l .icn{width:13px;height:13px;color:var(--brass)}
.pstat .n{font-family:"Fraunces",serif;font-weight:600;font-size:26px;color:var(--green);line-height:1.05;margin-top:6px}
.pstat .s{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted);margin-top:2px}
.ministats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:14px}
@media(min-width:680px){ .ministats{grid-template-columns:repeat(4,1fr)} }
.ministat{background:var(--card);border:1px solid var(--hair);border-radius:11px;padding:9px 12px;text-align:center;box-shadow:var(--shadow)}
.ministat .n{font-family:"Fraunces",serif;font-weight:700;font-size:19px}
.ministat .l{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.tds-xrow{display:none}
.tds-xrow.open{display:table-row}
.tds-xrow > td{background:var(--raised);border-bottom:1px solid var(--hair);padding:14px 16px;white-space:normal;text-align:left;font-family:"Work Sans",system-ui,sans-serif}
.tds-xin{position:sticky;left:0;max-width:calc(100vw - 56px)}
.tds-xgrid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:860px){ .tds-xgrid{grid-template-columns:1fr 1fr} }
.tds-xh{font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--brass);margin-bottom:7px;display:flex;align-items:center;gap:6px}
.tds-xh .icn{width:13px;height:13px}
.sevchip{display:inline-flex;align-items:center;gap:5px;font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;border:1px solid;border-radius:999px;padding:2px 9px;white-space:nowrap}
.sevchip .icn{width:11px;height:11px}
.sevchip.normal{color:var(--pos);background:rgba(46,125,79,.08);border-color:rgba(46,125,79,.35)}
.sevchip.unusual{color:var(--amber);background:rgba(176,122,30,.08);border-color:rgba(176,122,30,.4)}
.sevchip.exceptional{color:#B4530F;background:rgba(180,83,15,.08);border-color:rgba(180,83,15,.4)}
.sevchip.highly_suspicious{color:var(--red);background:rgba(158,59,46,.1);border-color:rgba(158,59,46,.45)}
.sevchip.na{color:var(--muted);background:rgba(110,106,94,.07);border-color:var(--hair)}
.sti-sum{grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:12px}
.sti-sum .ministat{padding:8px 4px}
.sti-sum .ministat .l{font-size:8px;line-height:1.3}
.sevbar{display:flex;height:9px;border-radius:999px;overflow:hidden;border:1px solid var(--hair);margin:2px 0 6px}
.sevleg{display:flex;gap:11px;flex-wrap:wrap;font-family:"IBM Plex Mono",monospace;font-size:9.5px;color:var(--muted);margin-bottom:14px}
.sevleg span{display:inline-flex;align-items:center;gap:4px}
.sevleg i{width:7px;height:7px;border-radius:2px;display:inline-block}
.sti-cards{display:none}
.sti-card{background:var(--card);border:1px solid var(--hair);border-radius:13px;box-shadow:var(--shadow);margin-bottom:9px;overflow:hidden}
.sti-card.me{background:#F4F1E2;box-shadow:var(--shadow), inset 3px 0 0 var(--brass)}
.sti-card.flag{box-shadow:var(--shadow), inset 3px 0 0 var(--red)}
.sti-top{display:flex;align-items:center;gap:10px;padding:11px 12px;cursor:pointer}
.sti-id{min-width:0;flex:1}
.sti-id .nm{font-weight:600;font-size:14px}
.sti-id .facts{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--muted);margin-top:1px;line-height:1.5}
.sti-id .facts b{color:var(--ink);font-weight:600}
.sti-id .facts .warn{color:var(--amber);font-weight:700}
.sti-id .facts .bad{color:var(--red);font-weight:700}
.sti-top .chev{width:14px;height:14px;color:var(--muted);flex-shrink:0;transition:transform .15s}
.sti-card.open .sti-top .chev{transform:rotate(90deg)}
.sti-x{display:none;border-top:1px solid var(--hair-2);background:rgba(255,255,255,.55);padding:4px 12px 10px}
.sti-card.open .sti-x{display:block}
.sti-rl{padding:9px 0;border-bottom:1px solid var(--hair-2)}
.sti-rl:last-child{border-bottom:none}
.sti-rl .l1{display:flex;align-items:center;gap:8px}
.sti-rl .rn{font-weight:600;font-size:12.5px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sti-rl .odds{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:700;flex-shrink:0}
.sti-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.sti-dot.normal{background:var(--pos)}
.sti-dot.unusual{background:var(--amber)}
.sti-dot.exceptional{background:#B4530F}
.sti-dot.highly_suspicious{background:var(--red)}
.sti-dot.na{background:var(--hair)}
.sti-rl .l2{display:flex;gap:14px;flex-wrap:wrap;font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--muted);margin-top:2px;padding-left:16px}
.sti-rl .l2 b{color:var(--ink);font-weight:600}
.sti-rl .l2 .neg b{color:var(--red)}
.stf-cards{display:none}
.stf-card{background:var(--card);border:1px solid var(--hair);border-radius:13px;box-shadow:var(--shadow);margin-bottom:9px;overflow:hidden}
.stf-card.me{background:#F4F1E2;box-shadow:var(--shadow), inset 3px 0 0 var(--brass)}
.stf-top{display:flex;align-items:center;gap:10px;padding:11px 12px;cursor:pointer}
.stf-id{min-width:0;flex:1}
.stf-id .nm{font-weight:600;font-size:14px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.stf-id .facts{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--muted);margin-top:1px}
.stf-id .facts b{color:var(--ink)}
.stf-topar{font-family:"Fraunces",serif;font-weight:700;font-size:21px;flex-shrink:0;text-align:right;line-height:1}
.stf-topar .l{display:block;font-family:"IBM Plex Mono",monospace;font-size:7.5px;letter-spacing:.08em;color:var(--muted);font-weight:600;margin-top:2px}
.stf-top .chev{width:14px;height:14px;color:var(--muted);flex-shrink:0;transition:transform .15s}
.stf-card.open .stf-top .chev{transform:rotate(90deg)}
.stf-x{display:none;border-top:1px solid var(--hair-2);background:rgba(255,255,255,.55);padding:10px 12px 12px}
.stf-card.open .stf-x{display:block}
.stf-xh{font-family:"IBM Plex Mono",monospace;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);margin:10px 0 6px;display:flex;align-items:center}
.stf-xh:first-child{margin-top:0}
.stf-g3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.stf-g4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.stf-mini{background:var(--raised);border:1px solid var(--hair-2);border-radius:9px;text-align:center;padding:7px 2px}
.stf-mini .v{font-family:"IBM Plex Mono",monospace;font-weight:700;font-size:12.5px}
.stf-mini .k{font-family:"IBM Plex Mono",monospace;font-size:7.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-top:1px;line-height:1.3}
.stf-mini .k .st-info .icn{width:10px;height:10px}
.stf-mix{display:flex;height:12px;border-radius:999px;overflow:hidden;border:1px solid var(--hair);margin:4px 0 5px}
.stf-mixleg{display:flex;gap:9px;flex-wrap:wrap;font-family:"IBM Plex Mono",monospace;font-size:9px;color:var(--muted)}
.stf-mixleg i{width:7px;height:7px;border-radius:2px;display:inline-block;margin-right:3px}
.stf-rline{display:flex;gap:12px;align-items:baseline;font-family:"IBM Plex Mono",monospace;font-size:10.5px;padding:6px 0;border-bottom:1px solid var(--hair-2);flex-wrap:wrap}
.stf-rline:last-child{border-bottom:none}
.stf-rline .rn{flex:1;min-width:110px;font-family:"Work Sans",sans-serif;font-weight:600;font-size:12px}
.stf-rline b{font-weight:700}
.stf-rkgrp .gh{display:flex;align-items:center;gap:8px;padding:10px 12px;font-family:"Fraunces",serif;font-weight:600;font-size:14px;border-bottom:1px solid var(--hair-2)}
.stf-rkgrp .gh .icn{width:13px;height:13px;color:var(--brass)}
.stf-rkrow{border-bottom:1px solid var(--hair-2)}
.stf-rkrow:last-child{border-bottom:none}
.stf-rkrow .r1{display:flex;align-items:center;gap:9px;padding:9px 12px;cursor:pointer}
.stf-rkrow .cat{min-width:0;flex:1}
.stf-rkrow .cat .t{font-weight:600;font-size:12.5px}
.stf-rkrow .cat .s{font-family:"IBM Plex Mono",monospace;font-size:8.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.stf-rkrow .win{display:flex;align-items:center;gap:7px;flex-shrink:0;min-width:0}
.stf-rkrow .win .wn{font-weight:600;font-size:12px;max-width:92px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stf-rkrow .win .wv{font-family:"IBM Plex Mono",monospace;font-weight:700;font-size:12px;color:var(--green);white-space:nowrap}
.stf-rkrow .chev{width:13px;height:13px;color:var(--muted);flex-shrink:0;transition:transform .15s}
.stf-rkrow.open .chev{transform:rotate(90deg)}
.stf-rkrow .r23{display:none;padding:2px 12px 9px 30px}
.stf-rkrow.open .r23{display:block}
.stf-rkrow .r23 .p{display:flex;align-items:center;gap:8px;font-size:12px;padding:4px 0;color:var(--muted)}
.stf-rkrow .r23 .p .pos{font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:700;width:12px}
.stf-rkrow .r23 .p .v{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:11px;color:var(--ink)}
.stf-fa .fh{display:flex;align-items:baseline;gap:8px;padding:10px 12px 2px}
.stf-fa .fh .t{font-family:"Fraunces",serif;font-weight:600;font-size:14px;flex:1;min-width:0}
.stf-fa .fh .gn{font-family:"IBM Plex Mono",monospace;font-size:8.5px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;flex-shrink:0}
.sti-desk{display:none}
.sti-cards{display:block}
.stf-cards{display:block}
.recgrid{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:14px}
@media(min-width:680px){ .recgrid{grid-template-columns:1fr 1fr} }
.reccard{background:linear-gradient(160deg,var(--green),var(--green-2));border:1px solid rgba(168,124,61,.5);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 18px;color:#F3EDE0;display:flex;align-items:center;gap:14px}
.reccard .medal{width:44px;height:44px;border-radius:11px;background:rgba(168,124,61,.25);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.reccard .medal .icn{width:22px;height:22px;color:var(--brass-soft)}
.reccard .k{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--brass-soft)}
.reccard .v{font-family:"Fraunces",serif;font-weight:700;font-size:26px;line-height:1.1}
.reccard .who{font-size:12px;color:rgba(243,237,224,.85);margin-top:1px}
.achgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:680px){ .achgrid{grid-template-columns:repeat(5,1fr)} }
.achtile{background:var(--card);border:1px solid var(--hair);border-radius:11px;padding:10px 12px;text-align:center}
.achtile .v{font-family:"Fraunces",serif;font-weight:700;font-size:21px}
.achtile .k{font-family:"IBM Plex Mono",monospace;font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.achtile .who{font-size:11px;font-weight:600;color:var(--green);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.rkgrid{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:16px}
@media(min-width:640px){ .rkgrid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1020px){ .rkgrid{grid-template-columns:repeat(3,1fr)} }
.rkcard{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--shadow);padding:13px 15px;margin:0}
.rkcard .t{font-family:"Fraunces",serif;font-weight:600;font-size:14.5px}
.rkcard .st{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:1px 0 9px}
.rkrow{display:flex;align-items:center;gap:9px;padding:6px 0;border-top:1px solid var(--hair-2)}
.rkrow.me{background:rgba(46,125,79,.07);box-shadow:inset 3px 0 0 var(--brass);margin:0 -8px;padding-left:11px;padding-right:8px}
.rkrow .pos{font-family:"Fraunces",serif;font-weight:700;font-size:14px;width:18px;text-align:center;color:var(--muted);flex-shrink:0}
.rkrow .pos.g1{color:var(--brass)}
.rkrow .nm{font-weight:600;font-size:12.5px;min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rkrow .val{font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;color:var(--green);flex-shrink:0}

.awgrid{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:640px){ .awgrid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1020px){ .awgrid{grid-template-columns:repeat(3,1fr)} }
.awtile{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--shadow);padding:14px 15px;display:flex;align-items:flex-start;gap:12px}
.awtile .badgebox{width:40px;height:40px;border-radius:11px;background:linear-gradient(160deg,var(--green),var(--green-2));border:1px solid rgba(168,124,61,.5);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.awtile .badgebox .icn{width:19px;height:19px;color:var(--brass-soft)}
.awtile.bad .badgebox{background:linear-gradient(160deg,#5b241b,var(--red));border-color:rgba(158,59,46,.5)}
.awtile.bad .badgebox .icn{color:#E8B4AB}
.awtile.me{border-color:rgba(168,124,61,.65);box-shadow:0 0 0 1px rgba(168,124,61,.35),var(--shadow)}
.awtile .k{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass)}
.awtile .who{font-family:"Fraunces",serif;font-weight:600;font-size:16px;line-height:1.2;margin:2px 0 1px}
.awtile .d{font-size:12px;color:var(--muted)}

/* template-inline .st-* block */
.st-info { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; padding: 0; border: none; background: none; color: var(--muted); vertical-align: middle; cursor: pointer; flex-shrink: 0; margin-left: 4px; }
.st-info .icn { width: 13px; height: 13px; }
.st-info:hover { color: var(--brass); }
.st-info.on-green { color: var(--brass-soft); }
.st-tip { position: fixed; z-index: 90; max-width: 244px; background: var(--ink); color: #F3EDE0; font-family: "Work Sans", sans-serif; font-size: 12px; font-weight: 400; line-height: 1.45; padding: 9px 11px; border-radius: 9px; box-shadow: 0 12px 30px -8px rgba(0,0,0,.55); }
/* collapsible teaser card */
.st-acc { background: var(--card); border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; margin-bottom: 11px; }
.st-acc.open { border-color: var(--brass-soft); }
.st-acc-head { width: 100%; display: flex; align-items: center; gap: 11px; padding: 14px; background: none; border: none; cursor: pointer; text-align: left; font: inherit; }
.st-acc-head .ic { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; background: linear-gradient(160deg, var(--green), var(--green-2)); color: var(--brass-soft); display: flex; align-items: center; justify-content: center; }
.st-acc-head .ic .icn { width: 18px; height: 18px; }
.st-acc-head .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.st-acc-head .h { display: block; font-family: "Fraunces", serif; font-weight: 600; font-size: 15px; line-height: 1.25; color: var(--ink); }
.st-acc-head .teaser { display: block; font-family: "IBM Plex Mono", monospace; font-size: 11px; line-height: 1.4; color: var(--muted); }
.st-acc-head .teaser b { color: var(--green); }
.st-acc-head .chev { width: 18px; height: 18px; color: var(--muted); transition: transform .18s ease; flex-shrink: 0; }
.st-acc.open .st-acc-head .chev { transform: rotate(180deg); }
.st-acc-body { display: none; padding: 0 14px 14px; }
.st-acc.open .st-acc-body { display: block; border-top: 1px solid var(--hair-2); }
/* diverging "you vs field" bars */
.st-div { display: grid; grid-template-columns: 148px 1fr 96px; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--hair-2); }
.st-div:last-child { border-bottom: none; }
.st-div .k { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.st-div .k small { display: block; font-weight: 400; color: var(--muted); font-size: 10px; white-space: normal; }
.st-track { position: relative; height: 20px; background: linear-gradient(90deg, rgba(158,59,46,.10), rgba(222,213,194,.5) 50%, rgba(46,125,79,.10)); border-radius: 6px; }
.st-track .mid { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: var(--muted); opacity: .5; }
.st-track .fill { position: absolute; top: 4px; bottom: 4px; border-radius: 4px; }
.st-track .fill.better { right: 50%; background: var(--pos); }
.st-track .fill.worse { left: 50%; background: var(--brass); }
.st-div .v { text-align: right; font-family: "IBM Plex Mono", monospace; }
.st-div .v b { font-size: 13.5px; } .st-div .v small { display: block; color: var(--muted); font-size: 9.5px; }
.st-divleg { display: flex; justify-content: space-between; font-family: "IBM Plex Mono", monospace; font-size: 9.5px; color: var(--muted); margin-top: 8px; letter-spacing: .04em; }
.st-subeye { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 14px 0 8px; }
/* contribution mini-tiles + scoring mix + streaks */
.st-mt { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.st-mt .t { background: var(--raised); border: 1px solid var(--hair); border-radius: 12px; padding: 11px 12px; text-align: center; }
.st-mt .t .n { font-family: "Fraunces", serif; font-weight: 600; font-size: 22px; color: var(--green); }
.st-mt .t .l { font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-top: 3px; white-space: nowrap; }
#stats-content .pstat .l { white-space: nowrap; }
.st-mix { display: flex; height: 26px; border-radius: 7px; overflow: hidden; border: 1px solid var(--hair); }
.st-mix span { display: flex; align-items: center; justify-content: center; font-family: "IBM Plex Mono", monospace; font-size: 10px; font-weight: 600; color: #fff; min-width: 0; }
.st-mix .eag { background: #1c5a38; } .st-mix .bir { background: var(--pos); } .st-mix .par { background: var(--brass-soft); color: #3a2c12; } .st-mix .bog { background: var(--amber); } .st-mix .dbl { background: var(--red); }
.st-mixleg { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 9px; font-family: "IBM Plex Mono", monospace; font-size: 10.5px; color: var(--muted); }
.st-mixleg i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 5px; }
.st-streaks { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.st-streak { display: inline-flex; align-items: center; gap: 6px; background: var(--raised); border: 1px solid var(--hair); border-radius: 8px; padding: 5px 10px; font-size: 11.5px; font-weight: 600; }
.st-streak .icn { width: 13px; height: 13px; color: var(--brass); }
.st-streak.grind { border-color: rgba(46,125,79,.5); color: var(--pos); }
.st-streak.feast { border-color: rgba(176,122,30,.5); color: var(--amber); }
.st-rbt { width: 100%; border-collapse: collapse; font-family: "IBM Plex Mono", monospace; font-size: 12px; }
.st-rbt th { text-align: left; font-family: "Work Sans", sans-serif; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--hair); }
.st-rbt td { padding: 7px 8px; border-bottom: 1px solid var(--hair-2); }
.st-rbt td.r, .st-rbt th.r { text-align: right; } .st-rbt td:first-child { font-family: "Work Sans", sans-serif; font-weight: 600; }
.st-card { background: var(--card); border: 1px solid var(--hair); border-radius: 16px; padding: 15px; margin-top: 14px; }
.st-card > .ch { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.st-card > .ch .icn { width: 16px; height: 16px; color: var(--brass); }
.st-card > .ch h3 { font-family: "Fraunces", serif; font-weight: 600; font-size: 16px; margin: 0; }
.st-card .cnote { font-size: 11.5px; color: var(--muted); margin: 0 0 12px; }
.tt-lite { display: flex; align-items: center; gap: 9px; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--brass); font-weight: 600; margin: 22px 2px 12px; }
.tt-lite::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
.st-rivs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.st-riv { background: var(--raised); border: 1px solid var(--hair); border-radius: 13px; padding: 13px; display: flex; gap: 11px; align-items: center; }
.st-riv .badge { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--red); }
.st-riv .badge .icn { width: 19px; height: 19px; }
.st-riv .t { font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.st-riv .d { font-family: "Fraunces", serif; font-weight: 600; font-size: 14.5px; margin: 2px 0; }
.st-riv .s { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(168,124,61,.1); border: 1px solid rgba(168,124,61,.4); color: var(--brass); border-radius: 8px; padding: 5px 10px; font-size: 12px; font-weight: 600; }
.chip .icn { width: 14px; height: 14px; }
@media (max-width: 640px) { .st-rivs { grid-template-columns: 1fr; } .st-div { grid-template-columns: 116px 1fr 76px; gap: 8px; } .st-mt { grid-template-columns: repeat(2,1fr); } }


/* ============================================================
   PORTAL INFO / LEADERBOARD / PLAYER PROFILE (reused info.js,
   leaderboard.js, player-profile.js — mounts inside #tab-more +
   #player-profile-sheet overlay). Token-based port: portal-clubhouse
   L211,371-383,386-392,403-426,548-558 + tournament_portal.html inline
   .pp-* (L584-679) and .field-*/.pcard/.cd-* (L733-844).
   ============================================================ */

.tdot{width:9px;height:9px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.stack{height:32px;border-radius:8px;overflow:hidden;display:flex;border:1px solid var(--hair);font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:13px}
.stack > div{display:flex;align-items:center;justify-content:center;color:#fff}

.mstat{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.mstat .c{background:var(--card);border:1px solid var(--hair);border-radius:11px;padding:14px;text-align:center;box-shadow:var(--shadow)}
.mstat .c .n{font-family:"Fraunces",serif;font-size:26px;font-weight:600;color:var(--green)}
.mstat .c .l{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.rbtable{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.rbrow{display:grid;grid-template-columns:1fr 90px 70px 70px;gap:10px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--hair-2);font-size:13.5px}
.rbrow:last-child{border-bottom:none}
.rbrow.head{background:var(--raised);font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.rbrow .num{font-family:"IBM Plex Mono",monospace;text-align:right;font-weight:600}
.msg{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 18px;margin-bottom:12px}
.msg h4{margin:0 0 4px;font-family:"Fraunces",serif;font-size:16.5px;font-weight:600;display:flex;align-items:center;gap:8px}
.msg h4 .icn{color:var(--brass)}
.msg p{margin:6px 0 0;color:var(--muted);font-size:13.5px}
.msg .pay{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--hair-2);font-size:13.5px}
.msg .pay:last-child{border-bottom:none}
.msg .pay .amt{font-family:"IBM Plex Mono",monospace;font-weight:600;color:var(--brass)}
/* Organizer-authored rich text in Notices (renderComms drops the stored HTML
   into `.msg > div`). Tailwind preflight zeroes ul/ol markers and flattens
   h1-h6 globally, so bullets composed in the Wire Room editor arrive intact in
   the DOM and render as flat, unindented text — the markup was never the
   problem. The editor restores its own markers (wireroom-comms.css .wr-rte)
   and public pages restore theirs (.communication-content in base.html); this
   is the third display surface and it is deliberately given the SAME metrics
   as the editor, so what an organizer composes is what players see. Scoped to
   `> div` so it cannot touch the section-title h4 styled above. */
#comms-content .msg > div ul,
#comms-content .msg > div ol{margin:4px 0;padding-left:22px}
#comms-content .msg > div ul{list-style:disc outside}
#comms-content .msg > div ol{list-style:decimal outside}
#comms-content .msg > div li{margin:2px 0}
#comms-content .msg > div h1,
#comms-content .msg > div h2,
#comms-content .msg > div h3,
#comms-content .msg > div h4,
#comms-content .msg > div h5,
#comms-content .msg > div h6{font-family:"Fraunces",serif;font-weight:600;margin:12px 0 4px}
#comms-content .msg > div h1{font-size:17px}
#comms-content .msg > div h2{font-size:16px}
#comms-content .msg > div h3,
#comms-content .msg > div h4,
#comms-content .msg > div h5,
#comms-content .msg > div h6{font-size:15px}
#comms-content .msg > div blockquote{margin:6px 0;padding-left:12px;border-left:2px solid var(--hair);color:var(--muted)}
#comms-content .msg > div a{color:var(--brass);text-decoration:underline}
.teamgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,340px));gap:14px;justify-content:center}
.tcard{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;border-top:3px solid}
.tcard .th{display:flex;align-items:center;justify-content:space-between;padding:13px 16px 11px;border-bottom:1px solid var(--hair)}
.tcard .th h4{margin:0;font-family:"Fraunces",serif;font-size:18px;font-weight:600;display:flex;align-items:center;gap:9px}
.tcard .tsub{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted);margin-top:3px}
.tcard .tb{padding:8px 16px 14px}
/* matchup row in the leaderboard round cards — tap to open the scorecard sheet */
.tmrow{transition:background .12s}
.tmrow:hover{background:var(--hair-2)}
.tmrow:active{background:var(--hair)}

/* course scorecard strip */
.course-strip{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--card);border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--shadow);padding:14px}
.scard{border-collapse:separate;border-spacing:0;width:100%;min-width:760px;background:var(--raised);border:1px solid var(--hair);
border-radius:10px;overflow:hidden;font-family:"IBM Plex Mono",monospace;box-shadow:var(--shadow)}
.scard th,.scard td{border-right:1px solid var(--hair-2);border-bottom:1px solid var(--hair-2);text-align:center;padding:0;height:40px}
.scard .lab{text-align:left;padding:0 14px;width:120px;min-width:120px;font-family:"Work Sans";font-weight:600;font-size:12.5px;color:var(--green);background:var(--card)}
.scard thead th{background:var(--card);font-size:12.5px;font-weight:600;color:var(--green)}
.scard .out,.scard .in,.scard .tot{background:rgba(168,124,61,.10);font-weight:600;color:var(--brass)}
.scard thead .tot{background:var(--brass);color:#fff}
.scard td.par{font-size:13px;font-weight:600;color:var(--ink)}
.scard td.si{font-size:11px;color:var(--muted)}

/* tee-box pills (Courses sub-view tee selector) — ported from
   tournament_portal.html's inline <style>; missed in the original
   #courses-content port alongside the Course Dossier block. Without it,
   info.js's .tee-pills markup rendered as unstyled inline text. */
#courses-content .tee-pills{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.tee-pill{display:inline-flex;align-items:baseline;gap:7px;padding:6px 11px;border-radius:9px;border:1px solid var(--hair);background:var(--raised);cursor:pointer;font-family:inherit}
.tee-pill .tn{font-weight:600;font-size:12.5px;color:var(--ink)}
.tee-pill .ty{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted)}
.tee-pill .tr{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--brass)}
.tee-pill.active{border-color:var(--brass);background:rgba(168,124,61,.10)}
.tee-pill.active .tn{color:var(--green)}
@media (orientation: landscape) and (max-width: 960px) {
    #courses-content .tee-pills{margin-bottom:8px}
}

/* live feed */
.whl{width:24px;height:24px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
font-family:"IBM Plex Mono",monospace;font-weight:700;font-size:11px;border:1px solid var(--hair-2);color:var(--muted);background:var(--raised)}
.whl.win{background:rgba(46,125,79,.14);color:var(--pos);border-color:rgba(46,125,79,.3)}
.whl.lose{background:rgba(158,59,46,.12);color:var(--red);border-color:rgba(158,59,46,.3)}
.whl.halve{background:rgba(168,124,61,.12);color:var(--brass);border-color:rgba(168,124,61,.3)}
.empty{text-align:center;padding:40px 16px;color:var(--muted);font-size:14px}

/* ---- info player search ---- */
.search{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--hair);border-radius:11px;padding:11px 14px}
.search .icn{width:16px;height:16px;color:var(--muted);flex-shrink:0}
.search input{border:none;background:none;outline:none;flex:1;font-family:inherit;font-size:16px;color:var(--ink)}

/* template-inline pp-/field-/cd- blocks */
.pp-dossier { display: block; }
.pp-rail { background: linear-gradient(180deg, var(--green), #0f3122); color: #EDE6D4; padding: 18px 18px 20px; border-bottom: 1.5px solid var(--brass); }
.pp-rail-top { display: flex; gap: 14px; align-items: center; }
.pp-rail .ava.sm { width: 74px; height: 74px; border-radius: 14px; font-size: 22px; flex-shrink: 0; object-fit: cover; border: 1px solid rgba(168,124,61,.6); box-shadow: 0 12px 30px -14px rgba(0,0,0,.6); }
.pp-rail-head { min-width: 0; }
.pp-rail-name { font-family: "Fraunces", serif; font-size: 20px; font-weight: 600; line-height: 1.1; margin: 0; }
.pp-rail-club { font-size: 12.5px; color: var(--brass-soft); margin-top: 3px; }
.pp-rail-idx { display: flex; align-items: baseline; gap: 7px; margin-top: 8px; }
.pp-rail-idx .n { font-family: "Fraunces", serif; font-size: 26px; font-weight: 600; line-height: 1; color: #fff; }
.pp-rail-idx .l { font-family: "IBM Plex Mono", monospace; font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-soft); }
.pp-rail-meta { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.pp-rail-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: #E4DCCB; min-width: 0; }
.pp-rail-row .icn { color: var(--brass-soft); flex-shrink: 0; }
.pp-rail-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-rail-tag { margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; background: rgba(168,124,61,.2); border: 1px solid rgba(168,124,61,.5); color: var(--brass-soft); border-radius: 8px; padding: 5px 10px; font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .06em; }
.pp-body { padding: 18px 18px 24px; }
.pp-tt-h { display: flex; align-items: center; gap: 8px; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); font-weight: 600; margin: 4px 0 10px; }
.pp-tt-h::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
.pp-info { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; padding: 0; border: none; background: none; color: var(--muted); vertical-align: middle; cursor: pointer; }
.pp-info .icn { width: 13px; height: 13px; }
.pp-info:hover { color: var(--brass); }
.pp-pop { position: fixed; z-index: 120; max-width: 260px; background: var(--card); border: 1px solid var(--hair); border-radius: 11px; box-shadow: var(--shadow-lg); padding: 11px 13px; }
.pp-pop .t { font-family: "Fraunces", serif; font-weight: 600; font-size: 13px; margin-bottom: 3px; }
.pp-pop .d { font-size: 12px; color: var(--muted); line-height: 1.45; }
.pp-tier { display: inline-block; font-family: "IBM Plex Mono", monospace; font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-radius: 5px; padding: 1px 5px; border: 1px solid; margin-left: 6px; vertical-align: 1px; }
.pp-tier.good { color: var(--pos); border-color: var(--pos); background: rgba(46,125,79,.10); }
.pp-tier.avg { color: var(--amber); border-color: var(--amber); background: rgba(176,122,30,.10); }
.pp-tier.bad { color: var(--red); border-color: var(--red); background: rgba(158,59,46,.10); }
.pp-tape { width: 100%; border-collapse: collapse; font-family: "IBM Plex Mono", monospace; font-size: 12.5px; }
.pp-tape tr { border-bottom: 1px solid var(--hair-2); }
.pp-tape td, .pp-tape th { padding: 7px 4px; }
.pp-tape th { text-align: left; font-family: "Work Sans", sans-serif; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.pp-tape th.r, .pp-tape td.r { text-align: right; }
.pp-tape td.k { color: var(--muted); font-family: "Work Sans", sans-serif; font-size: 13px; }
.pp-tape td.v { text-align: right; font-weight: 600; color: var(--ink); }
/* Scoring profile as a clean key/value grid (2-up when it has the room) */
.pp-stats-list { display: grid; grid-template-columns: 1fr; }
.pp-srow { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 2px; border-bottom: 1px solid var(--hair-2); font-size: 13px; }
.pp-srow .k { color: var(--muted); font-family: "Work Sans", sans-serif; white-space: nowrap; display: inline-flex; align-items: center; }
.pp-srow .v { font-family: "IBM Plex Mono", monospace; font-weight: 600; color: var(--ink); white-space: nowrap; text-align: right; }
@media (min-width: 640px) { .pp-stats-list.two { grid-template-columns: 1fr 1fr; column-gap: 36px; } }
.pp-u { color: var(--pos); }
.pp-o { color: var(--red); }
.pp-metric { display: grid; grid-template-columns: 120px 1fr 46px; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hair-2); }
.pp-metric .k { font-size: 12.5px; color: var(--muted); }
.pp-metric .track { height: 7px; border-radius: 4px; background: var(--hair-2); overflow: hidden; }
.pp-metric .track > span { display: block; height: 100%; background: linear-gradient(90deg, var(--brass), var(--green)); }
.pp-metric .val { text-align: right; font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 12.5px; }
.pp-diffbar { display: flex; gap: 8px; margin-top: 2px; }
.pp-diffbar .d { flex: 1; background: var(--card); border: 1px solid var(--hair); border-radius: 11px; padding: 10px 8px; text-align: center; }
.pp-diffbar .d .n { font-family: "Fraunces", serif; font-weight: 600; font-size: 17px; }
.pp-diffbar .d .l { font-family: "IBM Plex Mono", monospace; font-size: 8px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.pp-grid2 { display: grid; grid-template-columns: 1fr; gap: 0; }
.pp-mb { margin-bottom: 16px; }
.pp-evsum { display: flex; gap: 8px; margin: 2px 0 16px; }
.pp-evsum .e { flex: 1; background: var(--card); border: 1px solid var(--hair); border-radius: 11px; padding: 11px 8px; text-align: center; }
.pp-evsum .e .n { font-family: "Fraunces", serif; font-weight: 600; font-size: 19px; }
.pp-evsum .e .l { font-family: "IBM Plex Mono", monospace; font-size: 8px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.pp-career-tiles { display: flex; gap: 8px; margin: 2px 0 16px; flex-wrap: wrap; }
.pp-career-tiles .c { flex: 1; min-width: 70px; background: var(--card); border: 1px solid var(--hair); border-radius: 11px; padding: 10px 8px; text-align: center; }
.pp-career-tiles .c .n { font-family: "Fraunces", serif; font-weight: 600; font-size: 19px; line-height: 1; }
.pp-career-tiles .c .n.pp-win { color: var(--brass); }
.pp-career-tiles .c .l { font-family: "IBM Plex Mono", monospace; font-size: 8px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-top: 5px; }
.pp-fin { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 12.5px; justify-content: flex-end; }
.pp-fin.pp-win { color: var(--brass); }
.pp-fin .icn { width: 13px; height: 13px; }
.pp-super-wrap { display: flex; gap: 8px; flex-wrap: wrap; }
.pp-super-chip { display: inline-flex; align-items: center; gap: 7px; background: linear-gradient(180deg, #fff, #FBF3E2); border: 1px solid rgba(168,124,61,.42); border-radius: 9px; padding: 7px 11px; font-size: 12px; font-weight: 600; color: var(--ink); }
.pp-super-chip .icn { width: 14px; height: 14px; color: var(--brass); }
.pp-super-chip .x { font-family: "IBM Plex Mono", monospace; color: var(--muted); font-weight: 600; margin-left: 1px; }
.pp-empty-stat { display: flex; gap: 13px; align-items: flex-start; background: var(--card); border: 1px dashed var(--hair); border-radius: 13px; padding: 16px; }
.pp-empty-stat .icn { width: 24px; height: 24px; stroke-width: 1.7; color: var(--brass); flex-shrink: 0; margin-top: 1px; }
.pp-empty-stat .t { font-family: "Fraunces", serif; font-weight: 600; font-size: 15px; }
.pp-empty-stat .d { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
@media (min-width: 640px) {
.pp-dossier { display: grid; grid-template-columns: 230px 1fr; }
.pp-rail { border-bottom: none; border-right: 1.5px solid var(--brass); }
.pp-rail-top { display: block; }
.pp-rail .ava.sm { width: 100%; height: auto; aspect-ratio: 1; }
.pp-rail-head { margin-top: 14px; }
.pp-rail-idx { padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14); }
.pp-grid2 { grid-template-columns: 1fr 1fr; gap: 22px; }
}
/* Desktop (>=961px, the app's desktop breakpoint): render the profile as
a centered modal card over a dimmed backdrop instead of a full-bleed
page, so it sits inside the web app. Mobile/tablet keep the
full-screen sheet unchanged. */
@media (min-width: 961px) {
#player-profile-sheet.sc-overlay {
background: rgba(15, 24, 18, .55);
display: flex;
align-items: center;
justify-content: center;
padding: 40px 24px;
}
#player-profile-sheet .pp-shell {}
}
/* PRE-EXISTING BUG FIX (found while shipping Money Games Task 2): the two
   closing braces above were missing, so every selector below — through the
   end of the file — was being parsed as native-CSS-nested under
   `#player-profile-sheet .pp-shell` (i.e. `& #players-content ...`), which
   never matches anything in the real DOM. That silently no-op'd all of the
   #players-content/#courses-content responsive overrides below AND would
   have swallowed this file's new MONEY GAMES rules the same way. Restored
   to top-level scope; .pp-shell itself is left an empty (harmless) rule —
   it never had declared properties to begin with. */
#players-content .field-pulse { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:6px; }
#players-content .fstat { background:linear-gradient(180deg,var(--green),#0f3122); color:#EDE6D4; border:1px solid rgba(168,124,61,.5); border-radius:15px; padding:14px 14px 13px; }
#players-content .fstat .k { font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass-soft); }
#players-content .fstat .v { font-family:"Fraunces",serif; font-weight:600; font-size:28px; line-height:1.05; margin-top:5px; }
#players-content .fstat .n { font-size:11px; color:#CFC6B2; margin-top:3px; display:flex; align-items:center; gap:5px; }
#players-content .fstat .n .icn { width:13px; height:13px; color:var(--brass-soft); }
#players-content .ftt { display:flex; align-items:center; gap:9px; font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass); font-weight:600; margin:22px 2px 12px; }
#players-content .ftt::after { content:""; flex:1; height:1px; background:var(--hair); }
#players-content .ftt-row { justify-content:space-between; gap:10px; }
#players-content .ftt-row::after { display:none; }
#players-content .field-supers { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
#players-content .fsuper { background:var(--card); border:1px solid var(--hair); border-radius:14px; padding:13px; display:flex; gap:11px; align-items:flex-start; cursor:pointer; position:relative; }
#players-content .fsuper::before { content:""; position:absolute; left:0; top:13px; bottom:13px; width:3px; border-radius:3px; background:linear-gradient(var(--brass),var(--brass-soft)); }
#players-content .fsuper:hover { border-color:var(--brass-soft); }
#players-content .fbadge { width:36px; height:36px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,#FFF7E8,#F3E4C6); border:1px solid rgba(168,124,61,.45); color:var(--brass); }
#players-content .fbadge .icn { width:19px; height:19px; }
#players-content .fsuper .ft { font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); font-weight:600; }
#players-content .fsuper .fwho { font-family:"Fraunces",serif; font-weight:600; font-size:15.5px; margin:2px 0; }
#players-content .fsuper .fstat-l { font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--green); font-weight:600; }
#players-content .fseg { display:inline-flex; background:var(--card); border:1px solid var(--hair); border-radius:10px; padding:3px; gap:2px; }
#players-content .fseg button { border:none; background:none; font:inherit; font-size:11px; font-weight:600; color:var(--muted); padding:5px 10px; border-radius:7px; cursor:pointer; letter-spacing:.02em; }
#players-content .fseg button.on { background:var(--green); color:#F3EDE0; }
#players-content .field-roster { display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:11px; }
#players-content .pcard { background:var(--raised); border:1px solid var(--hair); border-radius:15px; padding:13px; display:flex; gap:12px; align-items:center; cursor:pointer; position:relative; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
#players-content .pcard:hover { transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--brass-soft); }
#players-content .pc-ava { position:relative; width:46px; height:46px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--green); overflow:hidden; }
#players-content .pc-ava .ini { font-family:"Fraunces",serif; font-weight:600; font-size:16px; color:#fff; }
#players-content .pc-ava img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#players-content .pc-ava::after { content:""; position:absolute; inset:0; border-radius:12px; border:2px solid var(--ring,transparent); pointer-events:none; }
#players-content .pcard .grow { min-width:0; flex:1; }
#players-content .pcard .nm { font-family:"Fraunces",serif; font-weight:600; font-size:15px; line-height:1.15; display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#players-content .pcard .you { font-family:"IBM Plex Mono",monospace; font-size:8.5px; letter-spacing:.05em; background:var(--green); color:#F3EDE0; border-radius:5px; padding:1px 5px; font-weight:700; }
#players-content .pcard .club { font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
#players-content .pcard .foot { display:flex; align-items:center; gap:7px; margin-top:7px; }
#players-content .pcard .idx { font-family:"IBM Plex Mono",monospace; font-weight:700; font-size:13px; color:var(--ink); }
#players-content .pcard .idx small { font-weight:500; font-size:8.5px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; margin-left:2px; }
#players-content .pcard .tier { font-family:"IBM Plex Mono",monospace; font-size:8.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; border-radius:5px; padding:1px 6px; border:1px solid; }
#players-content .pcard .tier.hot { color:var(--pos); border-color:var(--pos); background:rgba(46,125,79,.10); }
#players-content .pcard .tier.steady { color:var(--amber); border-color:var(--amber); background:rgba(176,122,30,.10); }
#players-content .pcard .tier.cold { color:var(--red); border-color:var(--red); background:rgba(158,59,46,.10); }
#players-content .pcard .chev { position:absolute; right:11px; top:11px; color:var(--hair); }
#players-content .pcard:hover .chev { color:var(--brass); }
#players-content .pcard .chev .icn { width:15px; height:15px; }
@media(max-width:720px){
#players-content .field-pulse { grid-template-columns:repeat(2,1fr); }
#players-content .field-supers { grid-template-columns:1fr; }
}
/* Courses — "Course Dossier" (scorecard + course intelligence) */
#courses-content .cd-switch{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
#courses-content .cd-pill{padding:8px 13px;border-radius:11px;border:1px solid var(--hair);background:var(--card);cursor:pointer;font-family:"Fraunces",serif;font-weight:600;font-size:13.5px;color:var(--ink)}
#courses-content .cd-pill.on{border-color:var(--brass);background:linear-gradient(160deg,var(--green),#0f3122);color:#EDE6D4}
#courses-content .cd-hero{background:linear-gradient(160deg,var(--green),#0f3122);color:#EDE6D4;border:1px solid rgba(168,124,61,.5);border-radius:16px;padding:18px 18px 16px;display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:16px}
#courses-content .cd-ey{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-soft);font-weight:600}
#courses-content .cd-hero h2{font-family:"Fraunces",serif;font-weight:600;font-size:24px;margin:5px 0 8px}
#courses-content .cd-meta{display:flex;flex-wrap:wrap;gap:6px 15px;font-size:12.5px;color:#CFC6B2}
#courses-content .cd-meta span{display:inline-flex;align-items:center;gap:6px}
#courses-content .cd-meta .icn{width:13px;height:13px;color:var(--brass-soft)}
#courses-content .cd-tough{text-align:right;flex-shrink:0}
#courses-content .cd-tough .n{font-family:"Fraunces",serif;font-weight:600;font-size:24px;line-height:1;color:#EDE6D4}
#courses-content .cd-tough .n.pp-o{color:#E7A17F}
#courses-content .cd-tough .n.pp-u{color:#8FD3A6}
#courses-content .cd-tough .l{font-family:"IBM Plex Mono",monospace;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass-soft);margin-top:3px}
#courses-content .cd-flow{display:flex;flex-direction:column}
#courses-content .cd-sec{margin-bottom:18px}
#courses-content .cd-h{display:flex;align-items:center;gap:9px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);font-weight:600;margin:0 2px 11px}
#courses-content .cd-h::after{content:"";flex:1;height:1px;background:var(--hair)}
#courses-content .cd-rec-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#courses-content .cd-rec{background:var(--card);border:1px solid var(--hair);border-radius:14px;padding:15px;position:relative;overflow:hidden;cursor:pointer}
#courses-content .cd-rec::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--brass),var(--brass-soft))}
#courses-content .cd-rec:hover{border-color:var(--brass-soft)}
#courses-content .cd-rec .rl{display:flex;align-items:center;gap:7px;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
#courses-content .cd-rec .rl .icn{width:14px;height:14px;color:var(--brass)}
#courses-content .cd-rec .rs{font-family:"Fraunces",serif;font-weight:600;font-size:34px;line-height:1;margin:8px 0 3px}
#courses-content .cd-rec .rs small{font-size:13px;color:var(--muted);font-weight:500;margin-left:5px}
#courses-content .cd-rec .rw{font-weight:600;font-size:14px}
#courses-content .cd-rec .rsub{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--muted);margin-top:2px}
#courses-content .cd-pt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
#courses-content .cd-pt{background:var(--card);border:1px solid var(--hair);border-radius:13px;padding:13px;text-align:center}
#courses-content .cd-pt .l{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
#courses-content .cd-pt .n{font-family:"Fraunces",serif;font-weight:600;font-size:25px;margin:5px 0 2px}
#courses-content .cd-pt .vp{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600}
#courses-content .cd-hole-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:11px}
#courses-content .cd-hole{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--hair);border-radius:13px;padding:12px}
#courses-content .cd-hole .hb{width:38px;height:38px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;font-family:"Fraunces",serif;font-weight:600;color:#fff}
#courses-content .cd-hole.hard .hb{background:var(--red)}
#courses-content .cd-hole.easy .hb{background:var(--pos)}
#courses-content .cd-hole .hb .hn{font-size:16px;line-height:1}
#courses-content .cd-hole .hb .hp{font-family:"IBM Plex Mono",monospace;font-size:7.5px;font-weight:500;opacity:.85}
#courses-content .cd-hole .t{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
#courses-content .cd-hole .s{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink);margin-top:3px;font-weight:600}
#courses-content .cd-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:11px}
#courses-content .cd-tile{background:var(--raised);border:1px solid var(--hair);border-radius:12px;padding:11px}
#courses-content .cd-tile .l{font-family:"IBM Plex Mono",monospace;font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
#courses-content .cd-tile .n{font-family:"Fraunces",serif;font-weight:600;font-size:21px;margin-top:4px}
#courses-content .cd-legend{display:flex;gap:14px;margin:8px 2px 0;font-size:10.5px;color:var(--muted);font-family:"IBM Plex Mono",monospace}
#courses-content .cd-legend span{display:inline-flex;align-items:center;gap:5px}
#courses-content .cd-legend .sw{width:11px;height:11px;border-radius:3px;display:inline-block}
#courses-content .scard td.avg{font-weight:600}
#courses-content .scard td.h-hard{background:rgba(158,59,46,.14)}
#courses-content .scard td.h-mid{background:rgba(176,122,30,.10)}
#courses-content .scard td.h-easy{background:rgba(46,125,79,.12)}
/* MOBILE ONLY: records (small, single row) -> By the numbers -> scorecard */
@media (max-width:700px){
#courses-content .cd-records{order:1}
#courses-content .cd-numbers{order:2}
#courses-content .cd-scorecard{order:3}
#courses-content .cd-rec{padding:12px}
#courses-content .cd-rec .rs{font-size:26px}
#courses-content .cd-hole-grid{grid-template-columns:1fr}
#courses-content .cd-tiles{grid-template-columns:repeat(2,1fr)}
#courses-content .cd-hero{flex-direction:column}
#courses-content .cd-hero h2{font-size:21px}
}

/* ===== MONEY GAMES =====
   Play-tab "Money games" list (day, .card token) + the night game overlay
   chrome (score/match/card/more segments + settle). Ported from
   static/mockups/app-money-games.html — component rules only; shared base
   (.card/.badge/.btn/.eyebrow/.dot) already exists above and is reused as-is
   (mockup's .badge.pos ≡ our existing .badge.green). */

.sec-h{display:flex;align-items:baseline;gap:10px;margin:22px 2px 10px}
.sec-h h2{font-size:20px}
.sec-h .eyebrow{margin-left:auto}

.game-card{padding:14px 16px;margin-bottom:10px;position:relative}
.game-card .gc-top{display:flex;align-items:center;gap:8px}
.game-card .gc-type{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:17px}
.game-card .gc-meta{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted);margin-top:3px}
.game-card.live-game{border-color:color-mix(in srgb, var(--brass) 55%, var(--hair));border-left:3px solid var(--brass)}
.game-card.spect{opacity:.62}

.code-entry{display:flex;gap:8px;margin-top:12px}
.code-entry input{flex:1;background:var(--raised);border:1px solid var(--hair);border-radius:11px;padding:11px 14px;font-family:"IBM Plex Mono",monospace;font-size:16px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.code-entry input::placeholder{letter-spacing:.06em;text-transform:none;color:var(--muted);font-family:"Work Sans",sans-serif}

/* Overlay root — same z-band as .sc-overlay (95); .night is carried on the
   mount div in app_shell.html so the money palette applies for free. */
.mg-overlay{position:fixed;inset:0;z-index:95;overflow-y:auto;background:var(--page);-webkit-overflow-scrolling:touch;padding-bottom:env(safe-area-inset-bottom,0px)}
.mg-overlay .mg-panel{padding:16px}

.ovl-head{padding:16px 16px 0}
.ovl-head .row1{display:flex;align-items:center;gap:10px}
.ovl-head .back{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--hair);border-radius:99px;background:var(--raised);flex-shrink:0}
.ovl-head h1{font-size:21px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ovl-head .sub{font-size:11px;color:var(--muted);margin:4px 0 0 44px;letter-spacing:.06em}

.seg{display:flex;background:var(--card);border:1px solid var(--hair);border-radius:12px;padding:4px;margin:14px 16px 0;gap:3px}
.seg button{flex:1;padding:8px 4px;border-radius:9px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.seg button.on{background:var(--green);color:#F0EADB;font-weight:600}
.night .seg button.on{background:var(--brass);color:#141A15}

/* screen 2: score panel (hole nav + per-player steppers) — Task 3 */
.holenav{display:flex;align-items:center;gap:10px;margin:16px 0 14px}
.holenav .hn-btn{width:44px;height:44px;border:1px solid var(--hair);border-radius:12px;background:var(--raised);display:flex;align-items:center;justify-content:center}
.holenav .hn-btn:disabled{opacity:.35}
.holenav .hn-mid{flex:1;text-align:center}
.holenav .hn-mid .h{font-family:"Fraunces",serif;font-weight:700;font-size:26px;line-height:1}
.holenav .hn-mid .m{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;margin-top:3px}
.score-row{display:flex;align-items:center;gap:12px;padding:13px 14px;margin-bottom:8px}
.score-row .nm{flex:1;min-width:0}
.score-row .nm b{font-weight:600;font-size:15px}
.score-row .nm .mt{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--muted);letter-spacing:.05em;margin-top:1px}
.score-row.me{border-color:color-mix(in srgb, var(--brass) 50%, var(--hair))}
.score-row .stepper{display:flex;align-items:center;gap:0;border:1px solid var(--hair);border-radius:11px;background:var(--raised);overflow:hidden}
.stepper button{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.stepper .val{width:44px;text-align:center;font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:19px;border-left:1px solid var(--hair-2);border-right:1px solid var(--hair-2);align-self:stretch;display:flex;align-items:center;justify-content:center}
.stepper .val.unset{color:var(--muted);font-weight:400}
.stroke-pips{display:inline-flex;gap:3px;margin-left:6px;vertical-align:middle}
.stroke-pips i{width:5px;height:5px;border-radius:99px;background:var(--brass);display:block}
.press-note{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--muted);text-align:center;margin-top:8px;letter-spacing:.04em}

/* screen 3: match board + press chits — Task 4 */
.teams{display:flex;gap:8px;margin:14px 0}
.team-pill{flex:1;padding:10px 12px;text-align:center}
.team-pill .t{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.team-pill .n{font-weight:600;font-size:13.5px;margin-top:2px}
.team-pill.us{border-color:color-mix(in srgb, var(--pos) 45%, var(--hair))}
.board{border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.board .b-seg{background:var(--card);padding:13px 16px;border-bottom:1px solid var(--hair-2)}
.board .b-seg:last-child{border-bottom:none}
.board .b-row{display:flex;align-items:center;gap:10px}
.board .b-name{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);width:74px;flex-shrink:0}
.board .b-state{font-family:"Fraunces",serif;font-weight:700;font-size:20px}
.board .b-state.up{color:var(--pos)}
.board .b-state.dn{color:var(--red)}
.board .b-state.as{color:var(--muted);font-weight:500}
.board .b-who{font-size:12.5px;color:var(--muted);margin-left:auto;text-align:right}
.board .b-who b{color:var(--ink);font-weight:600}
.board .b-stake{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--brass);margin-left:10px}
/* press-chit: renamed from the mockup's ".chit" — that class name is already
   the sitewide bet-slip/ticket component (.chit-h/.chit-b/.chit-row/.chit-f,
   gradient top bar + overflow:hidden — used elsewhere, e.g. home.js). Same
   visual design as the mockup's press stub, distinct selector to avoid
   colliding with the existing component. */
.press-chit{position:relative;margin:10px 0 2px 84px;background:var(--raised);border:1px solid color-mix(in srgb, var(--brass) 45%, var(--hair));border-radius:8px;padding:8px 12px 8px 16px;display:flex;align-items:center;gap:10px;font-size:12.5px}
.press-chit::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:0;border-left:1.5px dashed color-mix(in srgb, var(--brass) 55%, transparent)}
.press-chit .pc-tag{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);white-space:nowrap}
.press-chit .pc-state{font-family:"Fraunces",serif;font-weight:700;font-size:15px;white-space:nowrap}
.press-chit .pc-state.up{color:var(--pos)}
.press-chit .pc-state.dn{color:var(--red)}
.press-chit .pc-amt{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted)}
.press-cta{margin-top:14px}
.press-cta .btn{width:100%}
.press-cta .btn:disabled{opacity:.5}
/* earnings strip — no mockup reference (screen 3 doesn't show one); minimal
   addition per the brief's "earnings strip (mono, my net highlighted)". */
.mg-earn{margin-top:14px;padding:12px 14px}
.mg-earn-h{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.mg-earn-row{display:flex;align-items:center;justify-content:space-between;padding:4px 0;font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--muted)}
.mg-earn-row.me{color:var(--ink);font-weight:600}
.mg-earn-row .v{font-weight:600}

/* screen 4: card (scorecard table) — Task 5. Prefixed .mg-scroll/.mg-tbl
   rather than the mockup's .sc-scroll/table.sc: that class name is already
   the portal scorecard-sheet component (.sc-overlay/.sc-row/.sc-score/etc,
   static/css/clubhouse-app.css ~line 427) — same collision-avoidance reason
   as .press-chit above. */
.mg-scroll{overflow-x:auto;border:1px solid var(--hair);border-radius:var(--r);background:var(--card)}
table.mg-tbl{border-collapse:collapse;font-family:"IBM Plex Mono",monospace;font-size:12px;min-width:640px;width:100%}
.mg-tbl th,.mg-tbl td{padding:7px 8px;text-align:center;border-bottom:1px solid var(--hair-2);white-space:nowrap}
.mg-tbl thead th{font-size:9.5px;letter-spacing:.1em;color:var(--muted);font-weight:500;text-transform:uppercase}
.mg-tbl td:first-child,.mg-tbl th:first-child{text-align:left;position:sticky;left:0;background:var(--card);font-family:"Work Sans",sans-serif;font-weight:600;font-size:12.5px;padding-left:12px}
.mg-tbl .mg-par-row td{color:var(--muted);font-size:10.5px;border-bottom:1.5px solid var(--hair)}
.mg-tbl .tot{font-weight:600;border-left:1px solid var(--hair)}
.mg-tbl .birdie{color:var(--pos);font-weight:600}
.mg-tbl .bogey{color:var(--red)}
.mg-sd{display:inline-block;width:4px;height:4px;border-radius:99px;background:var(--brass);vertical-align:super;margin-left:1px}

/* screen 5: more (game setup kv list + share) — Task 5 */
.kv{display:flex;justify-content:space-between;gap:10px;padding:11px 2px;border-bottom:1px dashed var(--hair-2);font-size:13.5px}
.kv .k{color:var(--muted)} .kv .v{font-weight:600;text-align:right}
.kv .v.mono{font-family:"IBM Plex Mono",monospace;letter-spacing:.14em}
.sharebox{display:flex;align-items:center;gap:10px;padding:13px 16px;margin-top:14px}
.sharebox .code{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:19px;letter-spacing:.3em}

/* screen 6: settle (the ledger) — Task 5 */
.net-row{display:flex;align-items:center;gap:12px;padding:13px 16px;margin-bottom:8px}
.net-row b{font-weight:600}
.net-row .amt{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:17px}
.net-row.me{border-color:color-mix(in srgb, var(--brass) 50%, var(--hair))}
.amt.pos{color:var(--pos)} .amt.neg{color:var(--red)}
.pay-line{display:flex;align-items:center;gap:10px;padding:12px 4px;border-bottom:1px dashed var(--hair-2);font-size:14px}
.pay-line .arr{color:var(--brass)}
.pay-line .amt{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-weight:600}
.bet-line{display:flex;gap:10px;padding:10px 2px;border-bottom:1px dashed var(--hair-2);font-size:12.5px}
.bet-line .who{color:var(--muted)}
.bet-line .res{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:11.5px;white-space:nowrap}
.res.won{color:var(--pos);font-weight:600} .res.lost{color:var(--red)}

/* ── The Book: market rail, register tape, price chips, betting ticket ── */
.bk-balance{display:inline-flex;align-items:baseline;gap:4px;background:var(--raised);border:1px solid var(--hair);border-radius:999px;padding:6px 12px;font-size:14px;font-weight:600;color:var(--brass,#A87C3D)}
.bk-balance .u{font-size:9px;letter-spacing:.1em;color:var(--muted)}
.bkrail{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.bkrail::-webkit-scrollbar{display:none}
.bkseg{flex-shrink:0;border:1px solid var(--hair);background:var(--raised);color:var(--muted);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.04em;padding:7px 12px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:background .15s,color .15s}
.bkseg .n{font-size:9.5px;color:var(--brass,#A87C3D);opacity:.9}
.bkseg.on{background:var(--brass,#A87C3D);border-color:var(--brass,#A87C3D);color:#17110A;font-weight:600}
.bkseg.on .n{color:#17110A;opacity:.7}
.bktape{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);overflow:hidden;white-space:nowrap;padding:5px 0;margin-bottom:10px}
.bktape-in{display:inline-block;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.06em;color:var(--muted);animation:bktape 36s linear infinite}
.bktape-in b{color:var(--brass,#A87C3D);font-weight:600}
@keyframes bktape{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.bktape-in{animation:none}}
.pxc{width:100%;min-height:38px;padding:4px 8px;border-radius:8px;border:1px solid var(--hair);background:var(--raised);color:var(--ink);font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:12px;transition:background .12s,border-color .12s}
.pxc .px-odds{color:var(--pos)}
.pxc.sel{background:var(--brass,#A87C3D);border-color:var(--brass,#A87C3D);color:#17110A}
.pxc.sel .px-odds{color:#17110A;font-weight:700}
.pxc:disabled .px-odds{color:var(--muted)}
/* the ticket: deliberately paper-cream in every theme — it's a physical object */
.tkt{background:#F6EFDF;color:#241F16;border-radius:18px 18px 0 0;padding:18px 18px 18px;box-shadow:0 -18px 50px -18px rgba(0,0,0,.6)}
.tkt::before{content:"";position:absolute;top:-7px;left:14px;right:14px;height:14px;background:radial-gradient(circle at 7px 7px, transparent 6.5px, #F6EFDF 7px);background-size:22px 14px;background-repeat:repeat-x}
.tkt-hd{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1.5px dashed #C9BEA6;padding-bottom:9px}
.tkt-hd .tt{font-size:11px;letter-spacing:.18em;font-weight:600}
.tkt-hd .cls{font-size:11px;color:#7A7160;background:none;border:none;cursor:pointer;letter-spacing:.06em;padding:2px}
.tkt-rows{max-height:34dvh;overflow-y:auto}
.tkt-row{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid #E4DBC6;font-size:13px}
.tkt-row .d{flex:1;min-width:0}
.tkt-row .d b{display:block;font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tkt-row .d span{display:block;font-size:11px;color:#7A7160;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tkt-row .odds{font-weight:600;font-size:13px;flex-shrink:0}
.tkt-row .rm{border:none;background:none;color:#B0472F;cursor:pointer;padding:2px 6px;font-size:17px;line-height:1;flex-shrink:0}
.tkt-mode{display:flex;margin-top:12px;border:1.5px solid #241F16;border-radius:9px;overflow:hidden}
.tkt-mode button{flex:1;padding:8px;background:none;border:none;cursor:pointer;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.08em;color:#241F16}
.tkt-mode button.on{background:#241F16;color:#F6EFDF;font-weight:600}
.tkt-lbl{display:block;font-size:11px;color:#7A7160;margin:12px 0 4px}
.tkt-select{width:100%;padding:10px;border-radius:9px;border:1.5px solid #C9BEA6;background:#FFFDF6;color:#241F16;font-family:inherit;font-size:16px}
.tkt-mirror{font-size:12px;line-height:1.5;color:#7A7160;margin-top:8px}
.tkt-mirror b{color:#241F16}
.tkt-stake{display:flex;align-items:center;gap:8px;margin-top:12px}
.tkt-chip{border:1.5px solid #C9BEA6;background:none;border-radius:8px;padding:8px 13px;cursor:pointer;font-size:12.5px;font-weight:600;color:#241F16}
.tkt-chip.on{background:#241F16;color:#F6EFDF;border-color:#241F16}
.tkt-stake input{width:74px;margin-left:auto;border:1.5px solid #C9BEA6;border-radius:8px;padding:8px 10px;font-size:16px;background:#FFFDF6;color:#241F16;text-align:right}
.tkt-totals{display:flex;justify-content:space-between;align-items:baseline;margin-top:13px}
.tkt-totals .k{font-size:10px;letter-spacing:.12em;color:#7A7160}
.tkt-totals .v{font-size:18px;font-weight:700}
.tkt-totals .v.win{color:#1F6B43}
.tkt-status{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;color:#7A7160;min-height:16px;margin-top:8px}
.tkt-status.err{color:#B0472F}
.tkt-place{width:100%;margin-top:10px;background:#14402C;color:#F6EFDF;border:none;border-radius:11px;padding:14px;font-size:14.5px;font-weight:600;cursor:pointer;font-family:inherit}
.tkt-place:disabled{opacity:.5;cursor:default}
.tkt-stamp{position:absolute;inset:0;display:none;align-items:center;justify-content:center;pointer-events:none;z-index:2}
.tkt-stamp.show{display:flex}
.tkt-stamp span{border:4px solid #9E3B2E;color:#9E3B2E;border-radius:8px;padding:8px 22px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:26px;font-weight:700;letter-spacing:.2em;transform:rotate(-9deg);background:rgba(246,239,223,.9)}

/* ── MOBILE PLATFORM FIXES ──
   overscroll: Android pull-to-refresh must not reload the app mid-round.
   --kb: keyboard height, set from visualViewport (account.js) — bottom
   sheets ride above the iOS keyboard instead of being covered by it. */
html,body{overscroll-behavior-y:none}
.app-main{overscroll-behavior-y:contain}
.tkt{transform:translateY(calc(0px - var(--kb,0px)))}
#book-bet-modal .card{transform:translateY(calc(0px - var(--kb,0px)))}
@media(max-width:639px){
  .pa-card{bottom:var(--kb,0px)}
}

/* ── Home hero: the Locker Card ── */
.lk-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  padding:12px 16px 12px;border-bottom:1.5px dashed var(--hair)}
.lk-time{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:29px;font-weight:600;letter-spacing:-.01em;line-height:1.1}
.lk-time small{font-size:13px;color:var(--muted);font-weight:500}
.lk-course{font-family:"Fraunces",Georgia,serif;font-size:15px;font-weight:600;margin-top:2px}
.lk-fmt{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9.5px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;margin-top:3px}
.lk-ribbon{display:inline-flex;align-items:center;border-radius:8px;padding:5px 11px;font-size:10.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;font-family:"IBM Plex Mono",ui-monospace,monospace;color:#F3EDE0;flex-shrink:0}
.lk-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.lk-chip{display:inline-flex;align-items:center;gap:6px;background:var(--raised);border:1px solid var(--hair);
  border-radius:999px;padding:3px 10px 3px 3px;font-size:12px;font-weight:600}
.lk-ava{width:21px;height:21px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:8.5px;font-weight:700;color:#F3EDE0;font-family:"IBM Plex Mono",ui-monospace,monospace;flex-shrink:0}
.lk-posrow{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.lk-pos{font-family:"Fraunces",Georgia,serif;font-size:36px;font-weight:600;letter-spacing:-.02em;line-height:1}
.lk-pos sup{font-size:15px;color:var(--brass);font-weight:600}
.lk-gap{font-size:13px;color:var(--muted)}
.lk-stat{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:6px 0;border-bottom:1px solid var(--hair)}
.lk-stat:last-of-type{border-bottom:none}
.lk-stat .k{color:var(--muted)}
.lk-stat .v{font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:600;text-align:right}
.lk-stat .v.up{color:var(--pos)} .lk-stat .v.dn{color:var(--red)}

/* ── Touch-target extensions ──
   Compact visual chips keep their look; the TAP zone grows to ≥44px via an
   invisible absolutely-positioned overlay (no layout shift). Primary
   controls (.sc-btn/.sc-nav/.sc-close/.hn-btn/.stepper/.ovl-head .back) are
   sized to a real 44px instead — they're the wet-hands hot path. */
.subtab,.bkseg,.seg button,.code-pill button,.tkt-hd .cls,.tkt-row .rm,.app-topbar .me-chip,.pa-x{position:relative}
.subtab::before{content:"";position:absolute;inset:-5px 0}
.bkseg::before{content:"";position:absolute;inset:-8px 0}
.seg button::before{content:"";position:absolute;inset:-7px 0}
.app-topbar .me-chip::before{content:"";position:absolute;inset:-6px}
.code-pill button::before{content:"";position:absolute;inset:-10px}
.tkt-hd .cls::before{content:"";position:absolute;inset:-14px -10px}
.tkt-row .rm::before{content:"";position:absolute;inset:-12px -8px}
.pa-x::before{content:"";position:absolute;inset:-4px}

/* ── Offline strip (core.js) ──
   z-index 110: above the full-screen overlays (.sc-overlay/.mg-overlay 95,
   account sheets 96) so the scorer sees it mid-round, below .pp-pop (120)
   and .toast (130). Single line (nowrap + fixed line-height) so the height
   is deterministic: 5 + 15 + 6 = 26px + safe-area — the displacement rules
   below use that 26px. */
.offline-strip{position:fixed;top:0;left:0;right:0;z-index:110;display:none;
  padding:calc(5px + env(safe-area-inset-top,0px)) 14px 6px;text-align:center;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;font-weight:600;letter-spacing:.03em;
  line-height:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:var(--amber,#B07A1E);color:#FFFDF6;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.offline-strip.show{display:block}
.offline-strip.ok{background:var(--pos,#2E7D4F)}
/* Displace content instead of occluding it: core.js mirrors .show onto
   body.has-offline-strip. The strip already carries the safe-area padding,
   so surfaces only need to yield its 26px content height. .sc-top is sticky
   at the overlay's top edge and needs the room in its own padding. */
body.has-offline-strip .app-view{padding-top:26px}
body.has-offline-strip .mg-overlay{padding-top:26px}
body.has-offline-strip .sc-top{padding-top:calc(38px + env(safe-area-inset-top,0px))}

/* ============================================================
   GRILL ROOM (chat) — #chat-overlay uses .sc-overlay, which is
   position:fixed, so the stream and composer are absolutely
   positioned inside it rather than flexed.
   ============================================================ */
/* The stream is SIZED BY THE COLUMN, never by hardcoded offsets. It used to
   be absolutely positioned at top:57px / bottom:64px — numbers that guessed
   the header and composer heights and were wrong the moment either changed.
   On an iPhone they are always wrong: the composer adds
   env(safe-area-inset-bottom) (34px over the home indicator) and the header
   adds env(safe-area-inset-top), so the newest message sat permanently behind
   the composer with no scroll range left to reach it — you could see half of
   the line you just sent and nothing would bring it up. The offline strip and
   the #ch-status bar shifted the header too, and neither was in the numbers.
   Flow layout makes every one of those cases correct by construction.
   padding-bottom on the overlay yields the keyboard's height (--kb), which
   shortens the stream and lifts the composer in one move. */
#chat-overlay{display:flex;flex-direction:column;overflow:hidden;
  padding-bottom:var(--kb, 0px);transition:padding-bottom .18s ease}
#chat-overlay .sc-top{flex-shrink:0}
.ch-body{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.ch-stream{flex:1;min-height:0;
  overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 14px 8px;
  display:flex;flex-direction:column;gap:13px}
/* Rest a short thread on the composer instead of stranding it at the top.
   A spacer pseudo-element rather than justify-content:flex-end, which makes
   the first messages unreachable once the thread overflows. */
.ch-stream::before{content:"";margin-top:auto}
.ch-day{display:flex;align-items:center;gap:10px;margin:2px 0}
.ch-day::before,.ch-day::after{content:"";height:1px;background:var(--hair);flex:1}
.ch-day span{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.ch-sys{text-align:center;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--brass);
  display:flex;align-items:center;justify-content:center;gap:6px}
.ch-sys .icn{width:12px;height:12px}
.ch-msg{display:flex;gap:9px;align-items:flex-end}
.ch-msg.me{flex-direction:row-reverse}
.ch-stack{display:flex;flex-direction:column;gap:3px;min-width:0;max-width:80%}
.ch-msg.me .ch-stack{align-items:flex-end}
.ch-head{display:flex;align-items:baseline;gap:7px;padding-left:2px}
.ch-msg.me .ch-head{padding:0 2px 0 0}
.ch-nm{font-size:12.5px;font-weight:600}
.ch-tm{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--muted)}
.ch-bub{background:var(--raised);border:1px solid var(--hair);border-radius:14px 14px 14px 5px;
  padding:9px 12px;font-size:14.5px;line-height:1.45;overflow-wrap:anywhere}
.ch-msg.me .ch-bub{background:var(--green);border-color:var(--green);color:#F1EDE0;
  border-radius:14px 14px 5px 14px}
.ch-msg.me .ch-bub.pend{background:rgba(20,64,44,.10);border-color:rgba(20,64,44,.28);
  color:var(--ink);border-style:dashed}
.ch-bub.ch-gone{background:transparent;border-style:dashed;color:var(--muted);
  font-style:italic;font-size:13.5px}
.ch-msg.me .ch-bub.ch-gone{background:transparent;border-color:var(--hair);color:var(--muted)}
.ch-foot{display:flex;align-items:center;gap:5px;padding-right:3px;
  font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--muted)}
.ch-foot .icn{width:11px;height:11px}
.ch-ava{width:32px;height:32px;border-radius:9px;display:inline-flex;align-items:center;
  justify-content:center;font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:600;
  color:#fff;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.ch-a1{background:#1C5639}.ch-a2{background:#4C5688}.ch-a3{background:#A87C3D}.ch-a4{background:#9E3B2E}
.ch-empty{text-align:center;padding:40px 16px;color:var(--muted);font-size:14px}
.ch-comp{flex-shrink:0;border-top:1px solid var(--hair);
  background:var(--card);display:flex;align-items:center;gap:9px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))}
.ch-field{flex:1;min-width:0;background:var(--raised);border:1px solid var(--hair);
  border-radius:20px;padding:11px 14px;font-size:16px;color:var(--ink)}
.ch-send{width:44px;height:44px;border-radius:50%;background:var(--green);color:#F4EFE2;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.ch-send .icn{width:18px;height:18px}
.ch-card .card-h .icn{width:16px;height:16px;color:var(--brass);flex-shrink:0}
.ch-card .card-h h3{flex:1}
.ch-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
  padding:0 6px;border-radius:99px;background:var(--brass);color:#FFF7E8;
  font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;flex-shrink:0}
.ch-ln{display:flex;align-items:baseline;gap:7px;font-size:13.5px;min-width:0;margin-bottom:9px}
.ch-ln-nm{font-weight:600;flex-shrink:0}
.ch-ln-tx{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.chat-nav-badge{position:absolute;top:6px;right:calc(50% - 18px);width:8px;height:8px;
  border-radius:99px;background:var(--brass)}
/* Inline images / GIFs. Sized by aspect so the thread does not jump as they
   decode, and capped so one tall GIF cannot own the whole screen. */
.ch-img{display:block;max-width:100%;width:auto;max-height:260px;border-radius:10px;
  margin-top:6px;background:var(--hair-2);object-fit:contain}
.ch-bub .ch-cap{display:block}
.ch-bub .ch-cap:empty{display:none}
.ch-msg.me .ch-bub .ch-img{margin-left:auto}
/* Tap-to-remove: your own bubbles are tappable, and the confirm is a second
   deliberate tap rather than a swipe a thumb could trigger by accident. */
.ch-bub.ch-mine{cursor:pointer}
.ch-act{display:flex;gap:8px;justify-content:flex-end;margin-top:5px}
.ch-act button{font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;padding:7px 12px;border-radius:9px;
  border:1px solid var(--hair);background:var(--raised);color:var(--muted);min-height:32px}
.ch-act button[data-chat-del]{color:var(--red);border-color:rgba(158,59,46,.45)}
/* Connection state: a quiet room and a dead connection must not look alike. */
.ch-status{flex-shrink:0;z-index:3;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.06em;
  text-align:center;padding:5px 12px;background:var(--card);color:var(--muted);
  border-bottom:1px solid var(--hair-2)}
.ch-status.warn{background:var(--amber);color:#231A05;font-weight:600;border-bottom-color:transparent}
.ch-status.hidden{display:none}
/* Load-earlier affordance at the top of the thread (scroll also triggers it). */
.ch-older{display:block;margin:0 auto 4px;padding:8px 14px;border-radius:99px;
  border:1px solid var(--hair);background:var(--raised);color:var(--muted);
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;min-height:34px}
/* Jump-to-latest: appears whenever the reader is parked up in history. */
/* Anchored to .ch-body (the stream's own box), so it clears the composer
   without knowing how tall the composer is. */
.ch-jump{position:absolute;right:14px;bottom:10px;z-index:4;
  display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:99px;
  background:var(--card);border:1px solid var(--hair);color:var(--ink);
  box-shadow:var(--shadow);font-size:12.5px;font-weight:600;min-height:38px}
.ch-jump.unread{background:var(--green);border-color:var(--green);color:#F1EDE0}
.ch-jump .icn{width:14px;height:14px}
.ch-jump.hidden{display:none}

/* ── Team Round Total: per-player breakdown under a team row ──
   Shared markup lives in portal/sections/leaderboard.js (_trtCardsTable),
   which BOTH shells load — so this block is duplicated into
   portal-clubhouse.css and clubhouse-app.css and must stay in sync.
   `.trt-detail.hidden` is declared explicitly rather than leaning on the
   global .hidden, so the collapse works in either shell. */
.trt-detail{padding:2px 0 10px 14px}
.trt-detail.hidden{display:none}
.trt-chev{display:inline-block;width:0;height:0;flex:0 0 auto;
  border-left:5px solid var(--muted);border-top:4px solid transparent;
  border-bottom:4px solid transparent;transition:transform .12s ease}
.trt-team-row.open .trt-chev{transform:rotate(90deg)}
.trtc{border:1px solid var(--hair-2);border-radius:10px;overflow:hidden;background:var(--raised,rgba(0,0,0,.02))}
.trtc-row{display:grid;grid-template-columns:1fr 40px 34px 40px 56px;align-items:center;gap:5px;
  padding:7px 8px;border-bottom:1px solid var(--hair-2);font-size:12.5px}
/* a phone is the common case here: buy the name column back from the numbers */
@media (max-width:400px){
  .trt-detail{padding-left:8px}
  .trtc-row{grid-template-columns:1fr 36px 30px 36px 52px;gap:4px;padding:7px 6px;font-size:12px}
}
.trtc-row:last-child{border-bottom:none}
.trtc-row > span:not(.trtc-nm):not(.trtc-t){text-align:right}
.trtc-head{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);font-weight:600}
/* the header's first cell has no .trtc-nm, so it needs its own left rule or
   the generic right-align above pushes "Player" off over the Gross column */
.trtc-row.trtc-head > span:first-child{text-align:left}
.trtc-head > span:not(:first-child){text-align:right}
.trtc-nm{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trtc-thru{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--muted);font-weight:400}
.trtc-stk{color:var(--muted)}
.trtc-t{text-align:right}
.trtc-take{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;
  padding:2px 7px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.trtc-take.gross{color:#A87C3D;background:rgba(168,124,61,.13);border-color:rgba(168,124,61,.35)}
.trtc-take.net{color:#2E7D4F;background:rgba(46,125,79,.12);border-color:rgba(46,125,79,.34)}
.trtc-take.wd,.trtc-take.none{color:var(--muted);background:rgba(128,128,128,.10);border-color:rgba(128,128,128,.25)}
.trtc-note{font-size:11px;color:var(--muted);padding:7px 10px}

/* ── TRT team card (whole team, hole by hole) ──
   Rendered by portal/sections/schedule.js `_shtTeamRender`, which BOTH shells
   load — duplicated into portal-clubhouse.css and clubhouse-app.css, keep in
   sync. Rides the existing .shtc scorecard chrome; only the slot tag, the
   counted row and the footnote are new. */
.shtc .shtc-pn .sht-slot{font-family:"IBM Plex Mono",monospace;font-size:9px;font-weight:700;
  width:17px;height:17px;border-radius:5px;display:inline-flex;align-items:center;
  justify-content:center;flex-shrink:0}
.sht-slot.gross{color:#A87C3D;background:rgba(168,124,61,.16)}
.sht-slot.net{color:#2E7D4F;background:rgba(46,125,79,.15)}
.sht-slot.wd,.sht-slot.none{color:var(--muted);background:rgba(128,128,128,.12)}
.shtc tr.wd td,.shtc tr.wd th{opacity:.55}
/* The counted row is the point of the sheet: these cells ARE the team total. */
.shtc tr.sht-counted td,.shtc tr.sht-counted th{background:rgba(20,64,44,.07);font-weight:700;
  border-top:2px solid var(--green)}
.shtc tr.sht-counted .pn{background:rgba(20,64,44,.07)}
.shtc tr.sht-counted .tot{background:var(--green);color:#F3EDE0}
.sht-note{font-size:11.5px;color:var(--muted);padding:2px 16px 14px;line-height:1.45}
.sht-legend .sht-slot{width:auto;padding:1px 5px;height:auto}
.trtc-open{margin:9px 0 2px}
/* Team cards put whole names in the sticky column — a team is exactly where
   families cluster, so surnames alone are ambiguous. */
.shtc.sht-team .pn{min-width:196px}
.shtc.sht-team .shtc-pn .nm{font-size:12px}
/* Above 700px the sheet goes table-layout:fixed, where min-width is IGNORED —
   the responsive blocks set an explicit .pn width and the team card needs its
   own, or full names collapse back into ellipsis. Landscape phones keep the
   tighter column (that block already hides the strokes tag). */
@media (min-width:700px){
  #scorecard-sheet .shtc.sht-team .pn{width:214px}
}
@media (orientation:landscape) and (max-width:960px){
  #scorecard-sheet .shtc.sht-team .pn{width:158px}
}