/* ==========================================================================
   NIGRO CUP · DESIGN SYSTEM v3 (lane SYSTEM, Sep 12 2026). Read this block before you style anything.
   The tokens are right below. The component kit is the block marked "DESIGN SYSTEM v3 · COMPONENT KIT" at the end of
   the system section, just above the lane blocks, so it wins over the older layers in between. Lanes add CSS only
   inside their own marked block at the end of the file, and use these tokens and components instead of literals.

   TOKENS (light on :root; dark redefines only these names in the LOOK block, inside @media screen)
     Grounds  --bg (page) · --surface-1 (cards, sheets) · --surface-2 (sunken: segmented, table heads, chips)
              · --surface-3 (pressed, halved)
     Ink      --ink-1 (text, numbers) · --ink-2 (secondary) · --ink-3 (meta; never on --surface-3)
     Lines    --line (dividers only) · --line-strong (tile, input and button borders: 3:1)
     Teams    --red / --blue (fills) · --red-on / --blue-on (text on the fill) · --red-ink / --blue-ink (the team as
              text) · --red-tint / --blue-tint (soft grounds). Red and blue belong to the teams and nothing else.
     Gold     --gold (fills and rules only, never text) · --gold-ink (gold as text or a ring) · --gold-tint ("you", pinned)
     Brand    --brand (primary button and other fills) · --brand-ink (brand as text: links, the active tab)
              · --brand-tint · --on-brand
     States   --halve-bg / --halve-ink · --lose-ink · --live-bg / --live-ink / --live-dot (the live pill is ink with a
              gold dot, never red) · --ok · --warn · --err (each with a -tint) · --focus · --stage (TV, ceremony, the
              news flash) · --on-stage-2 · --scrim
     Type     --t-hero 64 · --t-score 40 · --t-title 28 · --t-result 22 · --t-head 20 · --t-body 17 · --t-meta 15
              · --t-label 14 · --t-micro 13 (timestamps only). They are lengths, already times the text-size unit,
              so Large and Extra large scale them; the classes are .t-hero ... .t-micro. Line heights --lh-*.
              Weights 400, 600 and 700 (500 for meta and micro); Direction C adds 800 for numerals of 20px and up,
              the wordmark, page and stage titles and tracked-caps labels (fonts.css serves Inter 100-900). No italics.
              Tabular digits everywhere (set on body). Fractions: ptsHtml() gives an inline ½, shrunk to .7em only
              inside hero and score numbers. Faces: --font-ui (Inter) for everything, --font-story (Fraunces 600/700)
              for the wordmark, The Daily, nicknames and the stage.
     Space    --s1 ... --s7 = 4 8 12 16 24 32 48. Gutter and card padding --s4, card to card --s3, section to section --s6.
     Radius   --r1 8 (tags) · --r2 12 (inputs) · --r3 20 (cards, tiles) · --r4 26 (score band, sheet top) · --r-pill
              (buttons, chips, segmented; organizer .btn.sm keeps 10px)
     Motion   --d-press 90 · --d-1 160 · --d-2 240 · --d-3 360 · --d-4 520 · --d-5 800 · --d-count 900 and the easings
              --e-out · --e-spring · --e-snap · --e-in · --e-inout. Every moment goes through public/js/motion/motion.js
              (play, register, anim, once, reduced): transform and opacity only, three at a time, nothing loops but the
              live dot, a still end frame under reduced motion, and only on a real data event.
     Depth    --e0 none · --e1 cards · --e2 the score band, a sticky call to action · --e3 sheets, the flash dock
     Tap      --tap 44 (the minimum) · --tap-course 48 (anything used on the course) · --tap-primary 56 · --tap-score 72
     Old names (--green, --ivory, --paper, --navy, --hair, --gold-soft, --red-team and the rest) still work: they are
     aliases of the new tokens at the end of :root. New CSS uses the new names. Two names CHANGED meaning:
     --red is now Team Red's fill (errors use --err), and --live-ink is the text on the live pill.

   COMPONENT KIT (markup contracts; icons come from ui.js icon(name, size))
     .card               One card type: surface-1, 1px --line, --r3, --s4 padding. Never put a card inside a card.
     .list > .list-item  List rows: 56px, or 64px with .two (a title and a subtitle). A 32px leading icon or avatar,
     .list > .row        a title, an optional subtitle, a trailing value or icon('chev'). The whole row is the target.
                         (.row on its own stays the plain flex row it always was.)
     .btn                48px (md, the default) · .btn.lg 56 (primary actions; .big is the same) · .btn.sm 40
                         (organizer tables only; .xs now looks the same as .sm) · .btn.giant 72. Kinds: primary
                         · .soft / .ghost (secondary) · .quiet (text with a 44px hit area) · .danger. No emoji in buttons.
     .chip / .chip.on    A filter chip, 40px. One chip row per screen at most.
     .seg (= .segmented) Segmented control: 44px segments in a 52px track, 2 to 4 options. .check rows are 44px too.
     .sheet              ui.js openSheet(). Its last .actions (or a .sheet-foot) is a sticky 72px footer holding the
                         primary action; the close button is 44px.
     .section > .section-head  A section title (.h2, which is --t-head) and an optional right .link (44px tall).
     .stat-tiles > .stat-tile  <div class="stat-tile"><b class="v">12</b><span class="l">Birdies</span></div>, 3 across.
     .score-band.lg|.md|.sm    THE Cup score: Home lg, sticky on Matches md, a sheet header sm.
         <div class="score-band lg">
           <div class="sb-row">
             <div class="sb-team red lead"><span class="sb-name">Red</span><span class="sb-num">55<span class="half">½</span></span></div>
             <span class="sb-rule"></span>
             <div class="sb-team blue"><span class="sb-name">Blue</span><span class="sb-num">46<span class="half">½</span></span></div>
           </div>
           <div class="sb-bar"><span class="sb-l red">R</span><span class="sb-track"><i class="red" style="width:54%"></i><i class="blue" style="width:46%"></i></span><span class="sb-l blue">B</span></div>
           <div class="sb-status">Red leads by 9 · 3 live</div>
         </div>
         Direction C: a black scoreboard with a contour texture, team name chips (the words sit on the team fills),
         numerals in --stage-red-ink / --stage-blue-ink, an amber rule and an amber status. lg adds an eyebrow
         (.sb-eyebrow: day, course, the live pill), a glow behind the leader (.sb-glow) and hides the R/B letters;
         .md hides the status line; .sm is one compact line. data-pts and .sb-val let Home roll the score up.
     .match-tile         Two name rows and one status block; your own match wears --mine-ring. Home and Matches add an
                         eyebrow (.mt-no, "Match 1 · Best ball · You") and 26px avatar pairs (.mt-avs) through
                         matchCard(state, m, { rich: true }); Simple mode and the organizer's cards leave them out.
         <button class="match-tile mine" data-match="12">
           <span class="mt-side red lead"><span class="mt-names">Mike · Tony</span></span>
           <span class="mt-side blue"><span class="mt-names">Steve · Kevin</span></span>
           <span class="mt-status"><span class="mt-pill live">thru 12</span><span class="mt-result red">Red 2 up</span></span>
         </button>
         .mt-pill: a time (plain) · .live (the ink pill with the gold dot) · .final. .mt-result takes the team class.
     .hole-grid > .hole-tile   18 holes six across (.hole-grid.nine for nine across). The big number is the hole; the
         fill is who won it (the team class, or .halve); an unplayed hole is dashed.
         <button class="hole-tile red birdie" aria-label="Hole 6, Red won, birdie"><span class="ht-n">6</span>
           <span class="ht-t">R</span><span class="ht-p">2</span><i class="ht-dd"></i><i class="ht-dot"></i></button>
         .ht-t is the team letter on a won hole (always); .ht-p the points only when they are not 1 ("2", "½");
         .birdie a ring, .eagle a double ring, .ace a filled disc; .ht-dd the Double Down bolt; .ht-dot a handicap
         stroke; .cur the current hole (a gold-ink ring); .pend awaiting confirmation (dashed gold).
     .flash-dock         The news flash, docked above the tab bar (app.js newsFlash). Never over the header, a score or
                         an open sheet: a flash that lands while a sheet is open waits until the sheet closes. It
                         springs up solid, runs an amber timer line (.nf-timer), and shows the ones waiting as a deck
                         and a "+N more" pill (.nf-more). A Double Down drops the takeover first (motion.js 'dd').
     .hole-strip         The scorecard's 18 small cells under the hole header (aria-hidden): the fill is who won, an
                         amber underline the Double Down, a ring the hole in play.
     .rank-disc / .team-letter / .av-badge   Drawn by ui.js rankDisc(n), teamLetter(teamId) and avatar().
     Helpers in ui.js    icon(name, size) · rankDisc(n) · teamLetter(teamId) · REACTIONS (the one reaction set:
                         👏 😂 🔥 😮 😭 ⛳) · em(emoji) (an aria-hidden illustrative emoji)
     Emoji policy        None in the nav, buttons, chips, table headers, ranks, status, avatar badges, toasts, sheet
                         titles, empty and error states, organizer tools or Scoring. Emoji stay in what people type,
                         in the one reaction set, and as at most one aria-hidden illustration per fun card.
   ========================================================================== */
:root {
  /* color: light, the sun theme */
  /* Direction C "Lava & Fairway" (Sep 12 2026, eye/palettes.json set 3). Gold is amber: fills, rules and the live dot;
     --gold-ink is gold as text. The stage is black lava. */
  --bg: #F2F2EF; --surface-1: #FFFFFF; --surface-2: #E9E9E5; --surface-3: #DADAD4;
  --ink-1: #111113; --ink-2: #3A3A40; --ink-3: #55555D;
  --line: #DCDCD6; --line-strong: #8C8C86;
  --red: #D0213A; --red-tint: #FCE3E6; --red-ink: #B51B32; --red-on: #FFFFFF;
  --blue: #1B55D1; --blue-tint: #E2EAFC; --blue-ink: #1747B0; --blue-on: #FFFFFF;
  --gold: #F0B323; --gold-ink: #7A5300; --gold-tint: #FFF1CC;
  --brand: #00754A; --brand-ink: #006B43; --brand-tint: #DDF3E8; --on-brand: #FFFFFF;
  --halve-bg: #DADAD4; --halve-ink: #3A3A40; --lose-ink: #55555D;
  --live-bg: #111113; --live-ink: #FFFFFF; --live-dot: #F0B323;
  --ok: #006B43; --ok-tint: #DDF3E8; --warn: #8A4B00; --warn-tint: #FFEFD1; --err: #B3261E; --err-tint: #FCE4E2;
  --focus: #111113; --stage: #0A0A0B; --on-stage-2: rgba(255,255,255,.86); --scrim: rgba(0,0,0,.55);
  /* C additions: the lit stop of every stage gradient, team inks on any black ground (both themes), the floating
     tab bar, your own match's ring. */
  --stage-2: #1C1C20; --stage-red-ink: #FF6B7A; --stage-blue-ink: #7AA2FF;
  --nav-float-bg: #111113; --nav-float-ink: rgba(255,255,255,.66); --nav-float-on: #FFFFFF; --nav-float-accent: #3DDC97;
  --mine-ring: 0 0 0 2.5px var(--ink-1);
  /* type: lengths at Normal times the text-size unit (--u, below) */
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --font-story: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --t-hero: min(calc(64 * var(--u)), 72px); --t-score: calc(40 * var(--u)); --t-title: calc(28 * var(--u)); --t-result: calc(22 * var(--u));
  --t-head: calc(20 * var(--u)); --t-body: calc(17 * var(--u)); --t-meta: max(var(--floor), calc(15 * var(--u)));
  --t-label: max(var(--floor), calc(14 * var(--u))); --t-micro: max(var(--floor), calc(13 * var(--u)));
  --lh-num: 1; --lh-title: 1.15; --lh-head: 1.25; --lh-body: 1.5; --lh-meta: 1.4;
  --w-regular: 400; --w-semi: 600; --w-bold: 700;
  /* space, radius, depth, tap */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r1: 8px; --r2: 12px; --r3: 20px; --r4: 26px; --r-pill: 999px;
  /* Shadow tokens combine in comma lists (var(--mine-ring), var(--e1)), so none of them is ever "none". */
  --e0: 0 0 0 0 transparent; --e1: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px -14px rgba(0,0,0,.22); --e2: 0 18px 36px -18px rgba(0,0,0,.70); --e3: 0 -10px 40px rgba(0,0,0,.25);
  --tap: 44px; --tap-course: 48px; --tap-primary: 56px; --tap-score: 72px;
  --nav-h: 64px; --header-h: 56px;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
  --ease: cubic-bezier(.2,.7,.2,1);
  /* motion (Direction C, lane C1): durations and easings. public/js/motion/motion.js mirrors them as T and E. */
  --d-press: 90ms; --d-1: 160ms; --d-2: 240ms; --d-3: 360ms; --d-4: 520ms; --d-5: 800ms; --d-count: 900ms;
  --e-out: cubic-bezier(.2,.7,.2,1); --e-spring: cubic-bezier(.34,1.56,.64,1); --e-snap: cubic-bezier(.2,1.4,.4,1); --e-in: cubic-bezier(.4,0,1,1); --e-inout: cubic-bezier(.65,0,.35,1);
  /* the floating tab bar sits 10px above the bottom edge: content, toasts, the flash dock and the chat bar clear it */
  --nav-clear: calc(var(--nav-h) + var(--safe-b) + 22px);
  /* the old names, kept working as aliases of the new tokens (dark mode follows through them) */
  --ivory: var(--bg); --ivory-2: var(--surface-2); --paper: var(--surface-1); --surface: var(--surface-1);
  --green: var(--brand-ink); --green-deep: var(--brand); --green-soft: var(--brand-tint); --green-fill: var(--brand);
  --navy: var(--stage); --ink: var(--ink-1); --hair: var(--line); --hair-2: var(--line);
  --gold-deep: var(--gold-ink); --gold-soft: var(--gold-tint); --gold-team: var(--gold);
  --red-team: var(--red); --blue-team: var(--blue); --red-soft: var(--red-tint); --red-fill: var(--red);
  --live: var(--live-bg); --black-team: var(--stage);
  --shadow-sm: var(--e1); --shadow-1: var(--e1); --shadow-2: var(--e2); --shadow-lg: var(--e2);
  --radius-xl: var(--r4); --radius-lg: var(--r3); --radius: var(--r2); --radius-sm: var(--r1);
  --font-display: var(--font-ui); --font-brand: var(--font-story);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; background: var(--bg); }
body {
  margin: 0; min-height: 100%; background: var(--bg); color: var(--ink-1);
  font-family: var(--font-ui); font-size: var(--t-body); line-height: var(--lh-body); letter-spacing: 0;
  font-variant-numeric: tabular-nums lining-nums; font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overscroll-behavior-y: none;
}
img, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
::selection { background: var(--gold-tint); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
/* type roles (see the header block) */
.t-hero { font-size: var(--t-hero); line-height: var(--lh-num); font-weight: 800; letter-spacing: -0.045em; }
.t-score { font-size: var(--t-score); line-height: var(--lh-num); font-weight: 800; letter-spacing: -0.035em; }
.t-title { font-size: var(--t-title); line-height: var(--lh-title); font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
.t-result { font-size: var(--t-result); line-height: var(--lh-num); font-weight: 800; letter-spacing: -0.02em; }
.t-head { font-size: var(--t-head); line-height: var(--lh-head); font-weight: 700; letter-spacing: -0.01em; }
.t-body { font-size: var(--t-body); line-height: var(--lh-body); font-weight: 400; }
.t-meta { font-size: var(--t-meta); line-height: var(--lh-meta); font-weight: 500; color: var(--ink-2); }
.t-label { font-size: var(--t-label); line-height: 1.2; font-weight: 600; color: var(--ink-3); }
.t-micro { font-size: var(--t-micro); line-height: 1.2; font-weight: 500; color: var(--ink-3); }
.half { font-size: 1em; }
:is(.t-hero, .t-score, .sb-num, .score-line .pts, .scorebig .p, .tv-team .p) .half { font-size: .7em; vertical-align: .32em; margin-left: .02em; }

/* ==========================================================================
   WAVE 2 · LANE UI (Sep 2026): text size, sign-in, shared phones, chat, share cards, Home prompts, Simple mode.
   ========================================================================== */
/* Text size. Readable sizes are written as N × --u, and --u is 1px at Normal, so the look is unchanged. "Phone" (the
   default) follows the phone's own text size: iOS Larger Text through -apple-system-body, the browser's font size
   elsewhere. Large and Extra large (More → Settings; Simple mode reads at Large) scale by 1.15 and 1.3 and put a 16px
   floor under small text. Display numbers (26px and up) keep their size. */
:root { --rem0: 16px; --u: 1px; --floor: 0px; }
@supports (font: -apple-system-body) { html { font: -apple-system-body; } :root { --rem0: 17px; } }
html:not([data-ts]), html[data-ts="auto"] { --u: clamp(1px, calc(1px + (1rem - var(--rem0)) / 16), 2px); --floor: clamp(0px, calc((1rem - var(--rem0)) * 100), 16px); }
html[data-ts="n"] { --u: 1px; --floor: 0px; }
html[data-ts="l"] { --u: 1.15px; --floor: 16px; }
html[data-ts="xl"] { --u: 1.3px; --floor: 16px; }
/* Tab labels stop at 14px so six tabs still fit; bigger layouts stack. */
.nav .nav-inner button span { font-size: max(min(var(--floor), 14px), calc(12 * var(--u))); }
html[data-ts="xl"] .name-grid { grid-template-columns: 1fr; }
html[data-ts="xl"] .quick { grid-template-columns: repeat(2, 1fr); }
html[data-ts="l"] .keypad button, html[data-ts="xl"] .keypad button { height: 64px; }
/* The phone's "Increase contrast" setting darkens the supporting greys and the hairlines. */
@media (prefers-contrast: more) { :root { --ink-3: #44444B; --line: #A9A9A2; --line-strong: #6E6E68; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.login [hidden], .chat-wrap [hidden] { display: none !important; }

/* Sign-in: the name filter, "Not Harold?" under the name, and Delete as a wide bar above the digits. */
.login-search { display: block; position: sticky; top: calc(8px + var(--safe-t)); z-index: 5; margin: 8px 0 2px; }
.login-search .input { background: var(--paper); }
.login .notme { display: inline-block; margin-top: 4px; min-height: 44px; padding: 0 14px; font-weight: 700; color: var(--green); }
.keydel { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 300px; height: 48px; margin: 10px auto 0; border-radius: 14px; background: var(--ivory-2); color: var(--ink); font-weight: 700; font-size: calc(16 * var(--u)); }
.keydel:active { background: var(--hair); }
.keypad > span { display: block; }

/* Shared phones: the avatar wears a gold ring when more than one golfer is on the phone; "as Harold · switch". */
.avatar-btn.shared { box-shadow: 0 0 0 2px var(--ivory), 0 0 0 4px var(--gold); }
.as-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--gold-soft); color: #5D4A0B; font-weight: 700; font-size: max(var(--floor), calc(13 * var(--u))); }
.face-row.on { border-color: var(--green); }
.avatar.blue { background: var(--blue-team); }
.starter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.starter-pick { aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 2px solid var(--line); background: var(--ivory-2); display: grid; place-items: center; padding: 0; }
.starter-pick img { width: 100%; height: 100%; object-fit: cover; }
.starter-pick.initials { border-radius: 16px; display: flex; flex-direction: column; gap: 2px; font-size: max(var(--floor), calc(12 * var(--u))); font-weight: 700; }
.starter-pick.initials .avatar { --size: 44px; }

/* Chat: tap-backs, replies, photos and @mentions. */
.msg .mcol { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.msg.mine .mcol { align-items: flex-end; }
.msg .bubble { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; cursor: pointer; }
.msg .bubble.pic { padding: 4px; }
.msg-media { display: grid; gap: 4px; margin: 0 0 6px; }
.msg .bubble.pic .msg-media { margin: 0; }
.msg-media.n2, .msg-media.n3, .msg-media.n4 { grid-template-columns: 1fr 1fr; }
.msg-media img { width: 100%; max-width: 240px; max-height: 260px; object-fit: cover; border-radius: 14px; display: block; }
.msg-rx { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.msg-rx .react { min-height: 32px; padding: 3px 9px; }
.msg-actions { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 6px; padding: 6px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-1); }
.msg-actions button { min-width: 44px; height: 44px; border-radius: 12px; font-size: calc(22 * var(--u)); }
.msg-actions .ma-reply { font-size: calc(15 * var(--u)); font-weight: 700; color: var(--green); padding: 0 12px; }
.msg-actions button:active { background: var(--ivory-2); }
.reply-q { display: block; max-width: 100%; text-align: left; font-size: max(var(--floor), calc(13 * var(--u))); color: var(--ink-2); background: var(--ivory-2); border-left: 3px solid var(--green); border-radius: 10px; padding: 5px 10px; margin: 2px 0 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg.flash .bubble { box-shadow: 0 0 0 3px var(--gold); }
.mention { font-weight: 700; color: var(--green); }
.msg.mine .mention { color: #fff; text-decoration: underline; }
.mention.me { background: var(--gold-soft); color: #5D4A0B; border-radius: 4px; padding: 0 2px; }
.chat-wrap .chat-bar { flex-direction: column; align-items: stretch; gap: 6px; }
.chat-row { display: flex; gap: 8px; align-items: flex-end; }
.chat-cam { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--green); background: var(--paper); border: 1px solid var(--hair); cursor: pointer; }
.chat-cam svg { width: 22px; height: 22px; }
.reply-bar { display: flex; align-items: center; gap: 8px; font-size: max(var(--floor), calc(13 * var(--u))); color: var(--ink-2); background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: 12px; padding: 4px 4px 4px 10px; }
.reply-bar .del { min-width: 36px; min-height: 36px; color: var(--ink-2); }
.chat-prev { margin: 0; }
.mention-pop { display: flex; flex-wrap: wrap; gap: 6px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 6px; box-shadow: var(--shadow-1); }
.mention-pop button { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px 0 6px; border-radius: 999px; background: var(--ivory-2); font-weight: 700; font-size: calc(15 * var(--u)); }
.chat-as { text-align: center; }
.chat-tools { display: flex; gap: 8px; }
.chat-tools .chip { height: 34px; padding: 0 12px; }
.msg .bubble .offrec { font-size: .9em; }

/* Share buttons and the news flash's three buttons. */
.newsflash .nf-main { display: flex; gap: 12px; align-items: flex-start; flex: 1; min-width: 0; text-align: left; color: inherit; }
.newsflash .nf-main .k, .newsflash .nf-main .t, .newsflash .nf-main .b { display: block; }
.newsflash .nf-share { align-self: center; flex: none; min-height: 36px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.18); color: inherit; font-weight: 700; font-size: max(var(--floor), calc(13 * var(--u))); }
.tl-share { font-size: max(var(--floor), calc(13 * var(--u))); font-weight: 700; color: var(--green); margin-left: 6px; min-height: 32px; padding: 0 4px; }
.cc-share { display: inline-block; margin-top: 8px; min-height: 36px; font-weight: 700; color: #F1D27A; }

/* Home: the drawn Add-to-Home-Screen steps, the siren card, Simple mode's tee time and giant Score button. */
.coach-steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.coach-step { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; }
.coach-art svg { width: 120px; height: 72px; display: block; }
.coach-n { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px; border-radius: 12px; background: var(--brand); color: var(--on-brand); font-weight: 700; font-size: max(var(--floor), calc(13 * var(--u))); margin-right: 4px; }
.coach-t { font-size: calc(15 * var(--u)); line-height: 1.35; }
html[data-ts="xl"] .coach-step { grid-template-columns: 1fr; }
@media (prefers-reduced-motion: no-preference) { .coach-ring { animation: coachPulse 1.6s ease-in-out 3; } }
@keyframes coachPulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.btn.big.giant { height: 76px; border-radius: 18px; font-size: calc(22 * var(--u)); }
.tee-line { text-align: center; }
.tee-big { font-size: calc(26 * var(--u)); font-weight: 700; color: var(--green); margin: 2px 0; }

/* ---------- typography ---------- */
.display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1; font-variation-settings: "opsz" 144, "SOFT" 30; }
.serif { font-family: var(--font-display); }
.eyebrow { font-size: max(var(--floor), calc(12 * var(--u))); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.eyebrow.gold { color: #5D4A0B; }
.eyebrow.green { color: var(--green); }
.h1 { font-family: var(--font-display); font-weight: 600; font-size: 34px; line-height: 1.05; letter-spacing: -0.02em; }
.h2 { font-family: var(--font-display); font-weight: 600; font-size: calc(24 * var(--u)); line-height: 1.1; letter-spacing: -0.015em; }
.h3 { font-size: calc(17 * var(--u)); font-weight: 700; letter-spacing: -0.01em; }
.muted { color: var(--ink-2); } .faint { color: var(--ink-3); }
.small { font-size: max(var(--floor), calc(13 * var(--u))); } .tiny { font-size: max(var(--floor), calc(12 * var(--u))); }
.num { font-variant-numeric: tabular-nums lining-nums; }
.wordmark { font-family: var(--font-brand); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-variation-settings: "opsz" 72, "SOFT" 0; }
.center { text-align: center; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pre { white-space: pre-wrap; word-break: break-word; }

/* ---------- layout ---------- */
#app { min-height: 100dvh; display: flex; flex-direction: column; }
.screen { flex: 1; width: 100%; max-width: 680px; margin: 0 auto; padding: 0 16px calc(var(--nav-clear) + 16px); }
.screen.no-nav { padding-bottom: 32px; }
.section { margin-top: 28px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; gap: 12px; }
.section-head .link { font-size: max(var(--floor), calc(13 * var(--u))); font-weight: 600; color: var(--green); }
.stack > * + * { margin-top: 12px; }
.stack-sm > * + * { margin-top: 8px; }
.row { display: flex; align-items: center; gap: 12px; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hr { height: 1px; background: var(--hair); margin: 16px 0; }
.spacer { height: 12px; }

/* ---------- header ---------- */
.header {
  position: sticky; top: 0; z-index: 40; height: calc(var(--header-h) + var(--safe-t)); padding-top: var(--safe-t);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: color-mix(in srgb, var(--ivory) 86%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  margin: 0 -16px; padding-left: 16px; padding-right: 12px;
}
.header .title { font-family: var(--font-display); font-weight: 600; font-size: calc(22 * var(--u)); letter-spacing: -0.01em; }
.header .brand { display: flex; align-items: center; gap: 10px; }
.header .brand img { width: 34px; height: 34px; object-fit: contain; }
.header .brand .wordmark { font-size: max(var(--floor), calc(15 * var(--u))); color: var(--green); }
.header .brand .year { font-family: var(--font-brand); font-weight: 500; color: var(--gold-deep); font-size: max(var(--floor), calc(15 * var(--u))); margin-left: -6px; }
.header .back { display: inline-flex; align-items: center; gap: 4px; color: var(--green); font-weight: 600; font-size: max(var(--floor), calc(15 * var(--u))); padding: 6px 8px 6px 0; }
.header .back svg { width: 22px; height: 22px; }
.header .actions { display: flex; align-items: center; gap: 6px; }

/* ---------- avatar ---------- */
.avatar { --size: 44px; width: var(--size); height: var(--size); border-radius: 50%; display: inline-grid; place-items: center; font-weight: 700; font-size: calc(var(--size) * .36); color: #fff; background: var(--green); overflow: hidden; flex: none; letter-spacing: 0; position: relative; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.black { background: var(--black-team); } .avatar.gold { background: var(--gold-team); color: #1E1A0A; } .avatar.green { background: var(--green); } .avatar.red { background: var(--red); } .avatar.white { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1px var(--hair); }
.avatar.ring { box-shadow: 0 0 0 2px var(--ivory), 0 0 0 4px currentColor; }
.avatar.xl { --size: 108px; font-family: var(--font-display); font-weight: 600; }
.avatar.lg { --size: 68px; } .avatar.sm { --size: 38px; } .avatar.xs { --size: 30px; }
.avatar-btn { border-radius: 50%; }

/* ---------- cards ---------- */
.card { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--radius-lg); padding: 16px; }
.card.flat { border: 0; background: var(--ivory-2); }
.card.tight { padding: 12px 14px; }
.card.pad0 { padding: 0; overflow: hidden; }
.card.elev { box-shadow: var(--shadow-1); border-color: var(--hair-2); }
.card.green { background: var(--green); color: #fff; border: 0; }
.card.navy { background: var(--navy); color: #fff; border: 0; }
.card.gold { background: var(--gold-soft); border-color: rgba(201,162,39,.35); }
.card.press { transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.card.press:active { transform: scale(.985); }
.list { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--radius-lg); overflow: hidden; }
.list-item { display: flex; align-items: center; gap: 12px; padding: 13px 16px; min-height: 56px; width: 100%; text-align: left; border-top: 1px solid var(--hair-2); background: transparent; }
.list-item:first-child { border-top: 0; }
.list-item:active { background: var(--ivory-2); }
.list-item .chev { color: var(--ink-3); margin-left: auto; flex: none; }
.list-item .icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--ivory-2); font-size: calc(17 * var(--u)); flex: none; }
.chev svg { width: 18px; height: 18px; }

/* ---------- pills / badges ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: max(var(--floor), calc(12 * var(--u))); font-weight: 700; letter-spacing: .02em; background: var(--ivory-2); color: var(--ink-2); white-space: nowrap; }
.pill.live { background: var(--live); color: #fff; }
.pill.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 1.4s infinite; }
.pill.final { background: var(--green-soft); color: var(--green); }
.pill.gold { background: var(--gold-soft); color: var(--gold-deep); }
.pill.navy { background: var(--navy); color: #fff; }
.pill.ghost { background: rgba(255,255,255,.14); color: #fff; }
.pill.outline { background: transparent; box-shadow: inset 0 0 0 1px var(--hair); }
.pill.red { background: var(--red-soft); color: var(--red); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.dot.black { background: var(--black-team); } .dot.gold { background: var(--gold-team); } .dot.green { background: var(--green); } .dot.red { background: var(--red); } .dot.white { background: #fff; box-shadow: inset 0 0 0 1px var(--hair); }
.tag { display: inline-flex; padding: 3px 9px; border-radius: 8px; background: var(--green-soft); color: var(--green); font-size: max(var(--floor), calc(12 * var(--u))); font-weight: 700; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 14px; font-weight: 700; font-size: max(var(--floor), calc(15 * var(--u))); background: var(--green); color: #fff; transition: transform .12s var(--ease), opacity .15s, background .15s; white-space: nowrap; }
.btn:active { transform: scale(.97); } .btn:disabled { opacity: .45; pointer-events: none; }
.btn.gold { background: var(--gold); color: #1E1A0A; }
.btn.navy { background: var(--navy); }
.btn.soft { background: var(--green-soft); color: var(--green); }
.btn.ghost { background: transparent; color: var(--green); box-shadow: inset 0 0 0 1.5px var(--hair); }
.btn.ghost-light { background: rgba(255,255,255,.14); color: #fff; }
.btn.danger { background: var(--red-soft); color: var(--red); }
.btn.sm { height: 36px; padding: 0 14px; font-size: max(var(--floor), calc(13 * var(--u))); border-radius: 11px; }
.btn.block { width: 100%; }
.btn.big { height: 56px; font-size: calc(17 * var(--u)); border-radius: 16px; }
.btn.icon { width: 40px; height: 40px; padding: 0; border-radius: 50%; }
.btn svg { width: 18px; height: 18px; }
.iconbtn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--green); }
.iconbtn:active { background: var(--ivory-2); }
.iconbtn svg { width: 22px; height: 22px; }
.link { color: var(--green); font-weight: 600; }
.textbtn { color: var(--green); font-weight: 600; font-size: max(var(--floor), calc(14 * var(--u))); padding: 6px 2px; }

/* ---------- forms ---------- */
.field { display: block; margin-top: 14px; }
.field > span { display: block; font-size: max(var(--floor), calc(12 * var(--u))); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.input, .select, .textarea { width: 100%; height: 48px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--hair); background: var(--paper); font-size: calc(16 * var(--u)); outline: none; transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none; }
.textarea { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; line-height: 1.4; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(15,74,46,.10); }
.select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A90A3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
.check { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-weight: 600; font-size: max(var(--floor), calc(15 * var(--u))); }
.check input { width: 22px; height: 22px; accent-color: var(--green); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row .field { margin-top: 14px; }
.hint { font-size: max(var(--floor), calc(13 * var(--u))); color: var(--ink-3); margin-top: 8px; }
.error { color: var(--red); font-size: max(var(--floor), calc(14 * var(--u))); font-weight: 600; margin-top: 10px; }
.segmented { display: flex; background: var(--ivory-2); padding: 3px; border-radius: 12px; gap: 2px; }
.segmented button { flex: 1; height: 36px; border-radius: 10px; font-weight: 700; font-size: max(var(--floor), calc(13 * var(--u))); color: var(--ink-2); transition: background .15s, color .15s, box-shadow .15s; }
.segmented button.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(20,33,61,.12); }
.segmented.sticky { position: sticky; top: calc(var(--header-h) + var(--safe-t) + 8px); z-index: 30; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--paper); border: 1px solid var(--hair); font-weight: 600; font-size: max(var(--floor), calc(13 * var(--u))); color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.chip.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.toggle { position: relative; width: 50px; height: 30px; border-radius: 999px; background: #CDD0DA; transition: background .2s; flex: none; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s var(--ease); }
.toggle.on { background: var(--green); } .toggle.on::after { transform: translateX(20px); }

/* ---------- bottom nav ---------- */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-top: 1px solid var(--hair); display: flex; justify-content: center;
}
.nav-inner { display: flex; width: 100%; max-width: 680px; }
.nav button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--ink-3); font-size: max(var(--floor), calc(12 * var(--u))); font-weight: 700; letter-spacing: .02em; height: var(--nav-h); position: relative; transition: color .15s; }
.nav button svg { width: 25px; height: 25px; stroke-width: 1.8; transition: transform .2s var(--ease); }
.nav button.on { color: var(--green); }
.nav button.on svg { transform: translateY(-1px); }
.nav button .badge { position: absolute; top: 9px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--live); color: #fff; font-size: 10px; display: grid; place-items: center; }

/* ---------- hero: cup score ---------- */
.hero-score { background: var(--surface-1); color: var(--ink-1); border: 1px solid var(--line); border-radius: var(--r4); padding: var(--s5) var(--s4) var(--s4); position: relative; overflow: hidden; box-shadow: var(--e2); }
.hero-score::before { content: none; }
.hero-score .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.hero-score .eyebrow { color: rgba(255,255,255,.65); }
.score-line { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.score-line .team { text-align: center; }
.score-line .team .name { font-size: max(var(--floor), calc(12 * var(--u))); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.75); display: flex; align-items: center; justify-content: center; gap: 6px; }
.score-line .team .pts { font-family: var(--font-display); font-weight: 600; font-size: 66px; line-height: 1; letter-spacing: -0.04em; margin-top: 6px; font-variation-settings: "opsz" 144, "SOFT" 50; }
.score-line .team .pts sup { font-size: .42em; vertical-align: top; margin-left: 1px; position: relative; top: .1em; }
.score-line .team.leading .pts { color: #fff; } .score-line .team:not(.leading) .pts { color: rgba(255,255,255,.7); }
.score-line .team .proj { font-size: max(var(--floor), calc(12 * var(--u))); color: rgba(255,255,255,.55); margin-top: 4px; font-variant-numeric: tabular-nums; }
.score-line .vs { width: 2px; height: 56px; border-radius: 1px; background: var(--gold); }
.hero-score .foot { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; font-size: max(var(--floor), calc(12.5 * var(--u))); color: rgba(255,255,255,.7); gap: 8px; }
.hero-score .foot b { color: #fff; }
.progress { position: relative; height: 6px; border-radius: 3px; background: rgba(255,255,255,.14); margin-top: 14px; overflow: hidden; }
.progress .a { position: absolute; left: 0; top: 0; bottom: 0; background: #fff; border-radius: 3px; }
.progress .b { position: absolute; right: 0; top: 0; bottom: 0; background: var(--gold); border-radius: 3px; }
.progress .mid { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: rgba(255,255,255,.55); }
.live-list { margin-top: 16px; border-top: 1px solid rgba(255,255,255,.14); padding-top: 4px; }
.live-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: max(var(--floor), calc(14 * var(--u))); }
.live-row:last-child { border-bottom: 0; }
.live-row .who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.live-row .who span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-row .who .up { font-weight: 700; color: #fff; }
.live-row .who .down { color: rgba(255,255,255,.6); }
.live-row .status { text-align: right; flex: none; }
.live-row .status b { display: block; font-family: var(--font-display); font-size: calc(20 * var(--u)); font-weight: 600; letter-spacing: -0.01em; }
.live-row .status span { font-size: max(var(--floor), calc(12 * var(--u))); color: rgba(255,255,255,.6); letter-spacing: .06em; text-transform: uppercase; }

/* ---------- announcement banner ---------- */
.banner { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--gold-soft); border: 1px solid rgba(201,162,39,.35); }
.banner .megaphone { font-size: calc(20 * var(--u)); line-height: 1.2; }
.banner .t { font-weight: 700; font-size: max(var(--floor), calc(14 * var(--u))); letter-spacing: .02em; color: #5D4A0B; text-transform: uppercase; }
.banner .b { font-size: max(var(--floor), calc(14 * var(--u))); color: #3E3510; margin-top: 2px; }
.banner .when { font-size: max(var(--floor), calc(12 * var(--u))); color: #8A7530; margin-top: 6px; font-weight: 600; }

/* ---------- schedule ---------- */
.sched-item { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hair-2); align-items: start; }
.sched-item:first-child { border-top: 0; padding-top: 0; }
.sched-item .time { font-family: var(--font-display); font-weight: 600; font-size: calc(17 * var(--u)); color: var(--green); line-height: 1.2; font-variant-numeric: tabular-nums; }
.sched-item .time small { display: block; font-family: var(--font-ui); font-size: max(var(--floor), calc(12 * var(--u))); letter-spacing: .1em; font-weight: 700; color: var(--ink-3); }
.sched-item .t { font-weight: 700; font-size: max(var(--floor), calc(15 * var(--u))); }
.sched-item .d { font-size: max(var(--floor), calc(13.5 * var(--u))); color: var(--ink-2); margin-top: 2px; }
.sched-item .loc { font-size: max(var(--floor), calc(12 * var(--u))); color: var(--ink-3); margin-top: 3px; display: flex; align-items: center; gap: 4px; }
.sched-item.now .t::after { content: "Now"; margin-left: 8px; font-size: var(--t-label); font-weight: 700; letter-spacing: 0; color: var(--ink-1); vertical-align: middle; }
.sched-item.past { opacity: .5; }
.sched-item .kind { font-size: calc(16 * var(--u)); }
.day-head { display: flex; align-items: baseline; gap: 10px; margin: 24px 0 10px; }
.day-head .dn { font-family: var(--font-display); font-weight: 600; font-size: calc(22 * var(--u)); }
.day-head .dd { font-size: max(var(--floor), calc(13 * var(--u))); color: var(--ink-3); font-weight: 600; }
.day-head .today { font-size: var(--t-label); font-weight: 700; letter-spacing: 0; color: var(--gold-ink); background: var(--gold-soft); padding: 3px 8px; border-radius: 6px; }

/* ---------- timeline ---------- */
.tl { position: relative; padding-left: 4px; }
.tl-item { display: grid; grid-template-columns: 36px 1fr; gap: 10px; padding: 10px 0; position: relative; }
.tl-item::before { content: ""; position: absolute; left: 17px; top: 42px; bottom: -10px; width: 2px; background: var(--hair); }
.tl-item:last-child::before { display: none; }
.tl-item .ic { width: 36px; height: 36px; border-radius: 50%; background: var(--paper); border: 1px solid var(--hair); display: grid; place-items: center; font-size: calc(17 * var(--u)); z-index: 1; }
.tl-item .tx { font-size: max(var(--floor), calc(14.5 * var(--u))); line-height: 1.4; padding-top: 6px; }
.tl-item .ts { font-size: max(var(--floor), calc(12 * var(--u))); color: var(--ink-3); font-weight: 600; margin-top: 3px; font-variant-numeric: tabular-nums; }
.tl-item.big .ic { background: var(--gold-soft); border-color: rgba(201,162,39,.4); }
.tl-item.big .tx { font-weight: 700; }

/* ---------- match cards ---------- */
.match { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--radius-lg); overflow: hidden; width: 100%; text-align: left; display: block; }
.match:active { background: var(--ivory-2); }
.match .mhead { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 0; font-size: max(var(--floor), calc(12 * var(--u))); color: var(--ink-3); font-weight: 600; }
.match .sides { padding: 8px 16px 12px; }
.side { display: grid; grid-template-columns: 4px 1fr auto; gap: 12px; align-items: center; padding: 7px 0; }
.side .bar { width: 4px; height: 30px; border-radius: 2px; }
.side .bar.black { background: var(--black-team); } .side .bar.gold { background: var(--gold-team); } .side .bar.green { background: var(--green); } .side .bar.red { background: var(--red); } .side .bar.white { background: #fff; box-shadow: inset 0 0 0 1px var(--hair); }
.side .names { font-weight: 700; font-size: calc(16 * var(--u)); letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; min-width: 0; }
.side .names .avs { display: flex; } .side .names .avs .avatar { margin-left: -10px; box-shadow: 0 0 0 2px var(--paper); } .side .names .avs .avatar:first-child { margin-left: 0; }
.side .names span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side .res { font-family: var(--font-display); font-weight: 600; font-size: calc(20 * var(--u)); text-align: right; white-space: nowrap; }
.side.winner .res { color: var(--green); } .side.loser { opacity: .5; } .side.loser .names { font-weight: 600; }
.side.up .res { color: var(--live); }
.match .vsline { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: max(var(--floor), calc(12 * var(--u))); font-weight: 700; letter-spacing: .12em; }
.match .vsline::before, .match .vsline::after { content: ""; flex: 1; height: 1px; background: var(--hair-2); }
.match .mfoot { padding: 10px 16px; border-top: 1px solid var(--hair-2); display: flex; align-items: center; justify-content: space-between; font-size: max(var(--floor), calc(13 * var(--u))); color: var(--ink-2); background: #FBFAF6; }
.match .mfoot b { color: var(--ink); }
.round-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 4px 16px; }
.round-tabs::-webkit-scrollbar { display: none; }
.round-tab { flex: none; border-radius: 14px; padding: 10px 14px; background: var(--paper); border: 1px solid var(--hair); text-align: left; min-width: 118px; }
.round-tab.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.round-tab .rn { font-size: var(--t-label); font-weight: 700; letter-spacing: 0; text-transform: uppercase; opacity: .7; display: flex; align-items: center; gap: 6px; }
.round-tab .rf { font-weight: 700; font-size: max(var(--floor), calc(14 * var(--u))); margin-top: 2px; }
.round-tab .rd { font-size: max(var(--floor), calc(12 * var(--u))); opacity: .7; margin-top: 1px; }
.round-tab .st { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.round-tab .st.live { background: var(--live); animation: pulse 1.4s infinite; } .round-tab .st.final { background: #3DAA6C; }
.round-tab.on .st.live { background: #FF7B76; }

/* ---------- standings table ---------- */
.table { width: 100%; border-collapse: collapse; font-size: max(var(--floor), calc(14 * var(--u))); }
.table th { text-align: left; font-size: var(--t-label); letter-spacing: 0; text-transform: none; color: var(--ink-3); font-weight: 700; padding: 10px 8px; border-bottom: 1px solid var(--hair); }
.table td { padding: 11px 8px; border-bottom: 1px solid var(--hair-2); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .r { text-align: right; font-variant-numeric: tabular-nums; }
.table .c { text-align: center; }
.table .rank { color: var(--ink-3); font-weight: 700; width: 28px; }
.table .who { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.table .pts { font-family: var(--font-display); font-weight: 600; font-size: calc(18 * var(--u)); color: var(--green); }

/* ---------- leaderboards ---------- */
.lb { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--radius-lg); padding: 14px 16px; }
.lb .lbh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.lb .lbh .t { font-weight: 700; font-size: max(var(--floor), calc(14 * var(--u))); display: flex; align-items: center; gap: 8px; }
.lb .lbh .t .i { font-size: calc(18 * var(--u)); }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--hair-2); }
.lb-row:first-of-type { border-top: 0; }
.lb-row .rk { width: 22px; font-weight: 700; color: var(--ink-3); font-size: max(var(--floor), calc(13 * var(--u))); text-align: center; }
.lb-row .rk.m1 { color: var(--gold-deep); font-size: calc(16 * var(--u)); } .lb-row .rk.m2 { color: #8E97A6; } .lb-row .rk.m3 { color: #B87333; }
.lb-row .nm { flex: 1; font-weight: 600; font-size: max(var(--floor), calc(15 * var(--u))); display: flex; align-items: center; gap: 8px; min-width: 0; }
.lb-row .nm span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-row .vl { font-family: var(--font-display); font-weight: 600; font-size: calc(20 * var(--u)); color: var(--green); font-variant-numeric: tabular-nums; }
.lb-row .vl small { font-family: var(--font-ui); font-size: max(var(--floor), calc(12 * var(--u))); color: var(--ink-3); font-weight: 700; margin-left: 3px; }
.lb.shame .lb-row .vl { color: var(--red); }
.lb .empty { color: var(--ink-3); font-size: max(var(--floor), calc(13.5 * var(--u))); padding: 6px 0; }

/* ---------- player cards ---------- */
.pgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 520px) { .pgrid { grid-template-columns: repeat(3, 1fr); } }
.pcard { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--radius-lg); padding: 0; text-align: center; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.pcard-main { display: block; width: 100%; padding: 16px 12px 12px; background: none; border: 0; color: inherit; font: inherit; text-align: center; cursor: pointer; flex: 1; }
.pcard-main:active { background: var(--ivory-2); }
.pcard-acts { display: flex; border-top: 1px solid var(--hair); }
.pcard-acts .pact { flex: 1; min-width: 0; padding: 8px 2px; background: none; border: 0; border-left: 1px solid var(--hair); font: inherit; font-size: max(var(--floor), calc(12 * var(--u))); font-weight: 700; color: var(--ink-2); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 36px; }
.pcard-acts .pact:first-child { border-left: 0; }
.pcard-acts .pact:active { background: var(--ivory-2); }
.pcard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; }
.pcard.black::before { background: var(--black-team); } .pcard.gold::before { background: var(--gold-team); } .pcard.green::before { background: var(--green); } .pcard.red::before { background: var(--red); } .pcard.white::before { background: #E6E1D3; }
.pcard .avatar { margin: 4px auto 10px; }
.pcard .nm { font-weight: 700; font-size: max(var(--floor), calc(15 * var(--u))); letter-spacing: -0.01em; line-height: 1.15; }
.pcard .nick { font-family: var(--font-story); font-size: var(--t-label); color: var(--gold-ink); margin-top: 2px; font-weight: 600; }
.pcard .meta { font-size: max(var(--floor), calc(12 * var(--u))); color: var(--ink-3); margin-top: 6px; font-variant-numeric: tabular-nums; }
.pcard .rec { margin-top: 8px; font-family: var(--font-display); font-weight: 600; font-size: calc(18 * var(--u)); color: var(--green); }
.pcard .cap { position: absolute; top: 10px; right: 10px; font-size: var(--t-label); font-weight: 700; letter-spacing: 0; color: var(--gold-ink); background: var(--gold-soft); padding: 2px 6px; border-radius: 6px; }
.team-head { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; }
.team-head .swatch { width: 14px; height: 14px; border-radius: 4px; }
.team-head .h2 { flex: 1; }
.team-head .pts { font-family: var(--font-display); font-weight: 600; font-size: calc(22 * var(--u)); color: var(--green); }

/* profile */
.profile-hero { border-radius: var(--r4); padding: 28px 20px 22px; color: var(--ink-1); background: var(--surface-1); border: 1px solid var(--line); border-top: 6px solid var(--team, var(--brand)); text-align: center; position: relative; overflow: hidden; }
.profile-hero.black, .profile-hero.gold, .profile-hero.green, .profile-hero.red, .profile-hero.blue, .profile-hero.white { background: var(--surface-1); color: var(--ink-1); }
.profile-hero .avatar { margin: 0 auto 14px; box-shadow: none; }
.profile-hero .nm { font-family: var(--font-display); font-weight: 600; font-size: 32px; letter-spacing: -0.02em; line-height: 1; }
.profile-hero .nick { font-family: var(--font-story); font-weight: 600; font-size: calc(17 * var(--u)); color: var(--gold-ink); margin-top: 6px; }
.profile-hero .meta { margin-top: 10px; font-size: var(--t-meta); color: var(--ink-2); display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.statbar { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--paper); border: 1px solid var(--hair); border-radius: var(--radius-lg); overflow: hidden; }
.statbar > div { padding: 14px 8px; text-align: center; border-left: 1px solid var(--hair-2); }
.statbar > div:first-child { border-left: 0; }
.statbar .v { font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1; color: var(--green); font-variant-numeric: tabular-nums; }
.statbar .l { font-size: var(--t-label); letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--ink-3); margin-top: 6px; }
.statbar.four { grid-template-columns: repeat(4, 1fr); }
.h2h-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--hair-2); font-size: max(var(--floor), calc(15 * var(--u))); }
.h2h-row:first-child { border-top: 0; }
.h2h-row .rec { font-family: var(--font-display); font-weight: 600; font-size: calc(18 * var(--u)); font-variant-numeric: tabular-nums; }
.h2h-row .rec.w { color: var(--green); } .h2h-row .rec.l { color: var(--red); }
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; border-radius: var(--radius); overflow: hidden; }
.photo-grid button { aspect-ratio: 1; overflow: hidden; background: var(--ivory-2); }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; }
.funstat { background: var(--gold-soft); border-radius: var(--radius); padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.funstat .l { font-size: max(var(--floor), calc(13 * var(--u))); font-weight: 700; color: #5D4A0B; }
.funstat .v { font-family: var(--font-display); font-weight: 600; font-size: calc(24 * var(--u)); color: #3E3510; }

/* ---------- feed ---------- */
.composer { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--radius-lg); padding: 12px 14px; }
.composer textarea { width: 100%; border: 0; resize: none; min-height: 44px; max-height: 200px; font-size: calc(16 * var(--u)); padding: 6px 0; outline: none; background: transparent; line-height: 1.4; }
.composer .cfoot { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.composer .previews { display: flex; gap: 8px; overflow-x: auto; margin: 6px 0; }
.composer .previews div { position: relative; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; flex: none; background: var(--ivory-2); }
.composer .previews img, .composer .previews video { width: 100%; height: 100%; object-fit: cover; }
.composer .previews button { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: max(var(--floor), calc(12 * var(--u))); display: grid; place-items: center; }
.post { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--radius-lg); overflow: hidden; }
.post .phead { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; }
.post .phead .nm { font-weight: 700; font-size: max(var(--floor), calc(14.5 * var(--u))); }
.post .phead .ts { font-size: max(var(--floor), calc(12 * var(--u))); color: var(--ink-3); }
.post .ptext { padding: 0 14px 10px; font-size: max(var(--floor), calc(15.5 * var(--u))); line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.post .media { display: grid; gap: 2px; background: var(--ivory-2); }
.post .media.n1 { grid-template-columns: 1fr; } .post .media.n2 { grid-template-columns: 1fr 1fr; } .post .media.n3, .post .media.n4, .post .media.nx { grid-template-columns: 1fr 1fr; }
.post .media button { position: relative; overflow: hidden; background: var(--ivory-2); display: block; aspect-ratio: 1; }
.post .media.n1 button { aspect-ratio: auto; max-height: 520px; }
.post .media.n1 button img { max-height: 520px; }
.post .media.n3 button:first-child { grid-row: span 2; aspect-ratio: auto; }
.post .media img, .post .media video { width: 100%; height: 100%; object-fit: cover; }
.post .media .more { position: absolute; inset: 0; background: rgba(20,33,61,.55); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-size: 28px; font-weight: 600; }
.post .media .play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.post .media .play span { width: 56px; height: 56px; border-radius: 50%; background: rgba(0,0,0,.55); display: grid; place-items: center; color: #fff; }
.post .pfoot { display: flex; align-items: center; gap: 6px; padding: 8px 10px 8px 14px; flex-wrap: wrap; }
.react { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 6px 12px; border-radius: 999px; background: var(--ivory-2); font-size: max(var(--floor), calc(13 * var(--u))); font-weight: 700; color: var(--ink-2); }
.react.on { background: var(--green-soft); color: var(--green); box-shadow: inset 0 0 0 1px rgba(15,74,46,.25); }
.react.add { font-size: calc(16 * var(--u)); padding: 4px 11px; }
.pfoot .cbtn { margin-left: auto; color: var(--ink-3); font-size: max(var(--floor), calc(13 * var(--u))); font-weight: 700; padding: 6px 4px; }
.comments { border-top: 1px solid var(--hair-2); padding: 8px 14px 10px; background: #FBFAF6; }
.comment { display: flex; gap: 8px; padding: 6px 0; font-size: max(var(--floor), calc(14 * var(--u))); align-items: flex-start; }
.comment .avatar { margin-top: 2px; }
.comment b { font-weight: 700; margin-right: 4px; }
.comment .del { color: var(--ink-3); font-size: max(var(--floor), calc(14 * var(--u))); margin-left: auto; padding: 8px 10px; margin-right: -6px; }
.comment-form { display: flex; gap: 8px; margin-top: 6px; }
.comment-form input { flex: 1; height: 40px; border-radius: 999px; border: 1px solid var(--hair); background: var(--paper); padding: 0 14px; font-size: max(var(--floor), calc(15 * var(--u))); outline: none; }
.comment-form input:focus { border-color: var(--green); }
.emoji-pick { display: flex; gap: 4px; flex-wrap: wrap; padding: 6px 14px 10px; }
.emoji-pick button { font-size: calc(22 * var(--u)); width: 40px; height: 40px; border-radius: 10px; }
.emoji-pick button:active { background: var(--ivory-2); }

/* chat */
/* Fills the screen under the header, the Feed/Chat/Bets bar and the tab bar, and no more: a short chat must not
   scroll, or opening it at the bottom slides the room chips under the sticky bar. */
.chat-wrap { display: flex; flex-direction: column; min-height: calc(100dvh - var(--header-h) - var(--safe-t) - var(--nav-h) - var(--safe-b) - 96px); }
.chat-list { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 8px 0 12px; }
.msg { display: flex; gap: 8px; align-items: flex-end; max-width: 84%; }
.msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.msg .bubble { background: var(--paper); border: 1px solid var(--hair); padding: 9px 13px; border-radius: 18px; border-bottom-left-radius: 6px; font-size: max(var(--floor), calc(15.5 * var(--u))); line-height: 1.35; word-break: break-word; white-space: pre-wrap; }
.msg.mine .bubble { background: var(--green); color: #fff; border-color: var(--green); border-bottom-left-radius: 18px; border-bottom-right-radius: 6px; }
.msg .meta { font-size: max(var(--floor), calc(12 * var(--u))); color: var(--ink-3); margin: 0 12px 2px; font-weight: 600; }
.msg.cont { margin-top: -1px; } .msg.cont .avatar { visibility: hidden; }
.msg.mine .meta { text-align: right; }
.msg-group + .msg-group { margin-top: 10px; }
.chat-day { text-align: center; font-size: var(--t-micro); font-weight: 700; letter-spacing: 0; color: var(--ink-3); margin: 14px 0 6px; text-transform: uppercase; }
.chat-bar { position: sticky; bottom: var(--nav-clear); background: var(--ivory); padding: 8px 0 8px; display: flex; gap: 8px; align-items: flex-end; z-index: 20; }
.chat-bar textarea { flex: 1; min-height: 44px; max-height: 120px; border-radius: 22px; border: 1px solid var(--hair); background: var(--paper); padding: 11px 16px; font-size: calc(16 * var(--u)); outline: none; resize: none; line-height: 1.3; }
.chat-bar textarea:focus { border-color: var(--green); }
.chat-bar .send { width: 44px; height: 44px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; flex: none; }
.chat-bar .send:disabled { opacity: .35; }
.chat-closed { text-align: center; padding: 14px; background: var(--red-soft); color: var(--red); border-radius: var(--radius); font-weight: 700; font-size: max(var(--floor), calc(14 * var(--u))); }

/* polls */
.poll { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--radius-lg); padding: 16px; }
.poll.sidebet { border-color: var(--gold); background: var(--surface-1); }
.poll .ph { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.poll .q { font-family: var(--font-display); font-weight: 600; font-size: calc(20 * var(--u)); line-height: 1.15; letter-spacing: -0.01em; }
.poll .stake { margin-top: 6px; font-size: max(var(--floor), calc(13 * var(--u))); color: var(--gold-deep); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.poll .by { font-size: max(var(--floor), calc(12 * var(--u))); color: var(--ink-3); margin-top: 6px; }
.opt { position: relative; display: block; width: 100%; text-align: left; margin-top: 8px; padding: 11px 14px; border-radius: 12px; border: 1.5px solid var(--hair); overflow: hidden; font-weight: 600; font-size: max(var(--floor), calc(15 * var(--u))); background: var(--paper); }
.opt .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--green-soft); transition: width .5s var(--ease); }
.opt .lbl { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.opt .pct { font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 700; font-size: max(var(--floor), calc(13 * var(--u))); }
.opt.mine { border-color: var(--green); } .opt.mine .lbl::before { content: "✓"; color: var(--green); font-weight: 700; margin-right: 6px; }
.opt.win { border-color: var(--gold); } .opt.win .fill { background: var(--gold-soft); } .opt.win .lbl::after { content: "🏆"; }
.poll .pf { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; font-size: max(var(--floor), calc(12.5 * var(--u))); color: var(--ink-3); gap: 8px; }

/* ---------- admin ---------- */
.bigbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bigbtn { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 14px; min-height: 108px; padding: 14px; border-radius: var(--radius-lg); background: var(--navy); color: #fff; text-align: left; transition: transform .12s var(--ease); }
.bigbtn:active { transform: scale(.97); }
.bigbtn .i { font-size: 26px; }
.bigbtn .t { font-weight: 700; font-size: max(var(--floor), calc(14 * var(--u))); letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; }
.bigbtn.green { background: var(--green); } .bigbtn.gold { background: var(--gold); color: #1E1A0A; } .bigbtn.red { background: var(--red); } .bigbtn.paper { background: var(--paper); color: var(--ink); border: 1px solid var(--hair); }
.admin-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--hair-2); font-size: max(var(--floor), calc(14 * var(--u))); }
.admin-row:first-child { border-top: 0; }
.admin-row .grow b { display: block; font-size: max(var(--floor), calc(14.5 * var(--u))); }
.admin-row .grow span { color: var(--ink-3); font-size: max(var(--floor), calc(12.5 * var(--u))); }
.pin { font-family: var(--font-display); font-weight: 600; font-size: calc(20 * var(--u)); letter-spacing: .12em; color: var(--green); }
.danger-zone { border-color: rgba(178,58,46,.35); background: #FFF8F7; }

/* ---------- login ---------- */
.login { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: calc(28px + var(--safe-t)) 20px 40px; max-width: 520px; margin: 0 auto; }
.login .logo { width: min(64vw, 240px); height: auto; margin-top: 10px; filter: drop-shadow(0 12px 24px rgba(20,33,61,.18)); }
.login .tagline { font-family: var(--font-story); font-weight: 600; font-size: calc(17 * var(--u)); color: var(--ink-2); margin-top: 8px; text-align: center; }
.login .who { width: 100%; margin-top: 26px; }
.name-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; width: 100%; }
.name-btn { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--paper); border: 1px solid var(--hair); font-weight: 700; font-size: max(var(--floor), calc(14.5 * var(--u))); text-align: left; min-height: 56px; }
.name-btn:active { background: var(--ivory-2); }
.name-btn .avatar { --size: 40px; }
.pin-boxes { display: flex; gap: 12px; justify-content: center; margin: 18px 0 8px; }
.pin-boxes div { width: 54px; height: 64px; border-radius: 14px; background: var(--paper); border: 1.5px solid var(--hair); display: grid; place-items: center; font-family: var(--font-display); font-size: 30px; font-weight: 600; color: var(--green); }
.pin-boxes div.on { border-color: var(--green); }
.pin-boxes div.err { border-color: var(--red); animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 300px; margin: 14px auto 0; }
.keypad button { height: 60px; border-radius: 16px; background: var(--paper); border: 1px solid var(--hair); font-family: var(--font-display); font-size: 26px; font-weight: 500; color: var(--ink); }
.keypad button:active { background: var(--ivory-2); }
.keypad button.ghost { background: transparent; border: 0; font-family: var(--font-ui); font-size: max(var(--floor), calc(14 * var(--u))); font-weight: 700; color: var(--ink-2); }

/* ---------- sheets / modals ---------- */
.sheet-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(20,33,61,.45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; transition: opacity .22s; display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop.in { opacity: 1; }
.sheet { width: 100%; max-width: 680px; max-height: calc(100dvh - 40px); background: var(--ivory); border-radius: 24px 24px 0 0; padding: 8px 18px calc(22px + var(--safe-b)); overflow-y: auto; transform: translateY(30px); transition: transform .28s var(--ease); overscroll-behavior: contain; }
.sheet-backdrop.in .sheet { transform: translateY(0); }
.sheet .grab { width: 40px; height: 5px; border-radius: 3px; background: rgba(20,33,61,.18); margin: 4px auto 12px; }
.sheet .sh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.sheet .sh .h2 { font-size: calc(22 * var(--u)); }
.sheet .close { width: 32px; height: 32px; border-radius: 50%; background: var(--ivory-2); display: grid; place-items: center; color: var(--ink-2); font-size: calc(16 * var(--u)); }
.sheet .actions { display: flex; gap: 10px; margin-top: 20px; }
.sheet .actions .btn { flex: 1; }
@media (min-width: 720px) { .sheet-backdrop { align-items: center; } .sheet { border-radius: 24px; max-height: calc(100dvh - 80px); } }
.lightbox { position: fixed; inset: 0; z-index: 120; background: #000; display: flex; align-items: center; justify-content: center; }
.lightbox img, .lightbox video { max-width: 100vw; max-height: 100dvh; object-fit: contain; }
.lightbox .x { position: absolute; top: calc(12px + var(--safe-t)); right: 12px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; font-size: calc(20 * var(--u)); display: grid; place-items: center; }
.lightbox .cap { position: absolute; left: 0; right: 0; bottom: calc(16px + var(--safe-b)); color: #fff; text-align: center; font-size: max(var(--floor), calc(14 * var(--u))); padding: 0 20px; text-shadow: 0 1px 6px rgba(0,0,0,.8); }

/* ---------- toast ---------- */
.toast-wrap { position: fixed; left: 0; right: 0; bottom: var(--nav-clear); z-index: 200; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
.toast { background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 14px; font-weight: 600; font-size: max(var(--floor), calc(14 * var(--u))); box-shadow: var(--shadow-2); max-width: 420px; text-align: center; animation: toastin .25s var(--ease); }
.toast.err { background: var(--red); } .toast.ok { background: var(--green); }
@keyframes toastin { from { opacity: 0; transform: translateY(8px); } }

/* ---------- misc ---------- */
.empty { text-align: center; padding: 34px 20px; color: var(--ink-3); }
.empty .e { font-size: 38px; margin-bottom: 8px; }
.empty .t { font-weight: 700; color: var(--ink-2); font-size: max(var(--floor), calc(15 * var(--u))); }
.empty .s { font-size: max(var(--floor), calc(13.5 * var(--u))); margin-top: 4px; }
.skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--bg) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: var(--radius); }
@keyframes shimmer { to { background-position: -200% 0; } }
.countdown { display: flex; justify-content: center; gap: 14px; }
.countdown div { text-align: center; }
.countdown .v { font-family: var(--font-display); font-weight: 600; font-size: 44px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.countdown .l { font-size: var(--t-label); letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--on-stage-2); margin-top: 4px; }
.quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.quick button { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--radius-lg); padding: 14px 8px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-weight: 700; font-size: max(var(--floor), calc(12.5 * var(--u))); color: var(--ink-2); }
.quick button:active { background: var(--ivory-2); }
.quick button .i { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font-size: calc(22 * var(--u)); background: var(--green-soft); }
.hero-photo { position: relative; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4/3; background: var(--ivory-2); display: block; width: 100%; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; background: linear-gradient(to top, rgba(10,20,15,.75), transparent); color: #fff; text-align: left; }
.hero-photo .cap b { display: block; font-size: max(var(--floor), calc(13 * var(--u))); }
.hero-photo .cap span { font-size: max(var(--floor), calc(13.5 * var(--u))); opacity: .9; }
.recap { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--radius-lg); padding: 20px 18px; }
.recap .masthead { font-family: var(--font-brand); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: max(var(--floor), calc(12 * var(--u))); color: var(--gold-deep); text-align: center; }
.recap .rt { font-family: var(--font-brand); font-weight: 600; font-size: calc(24 * var(--u)); line-height: 1.12; letter-spacing: -0.015em; margin-top: 8px; text-align: center; }
.recap .rd { font-size: max(var(--floor), calc(12 * var(--u))); color: var(--ink-3); text-align: center; margin-top: 6px; font-weight: 600; }
.recap .rb { margin-top: 14px; font-family: var(--font-brand); font-size: calc(16.5 * var(--u)); line-height: 1.55; font-variation-settings: "opsz" 12, "SOFT" 0; }
.recap .rb p + p { margin-top: 12px; }
.recap .rb p:first-child::first-letter { font-size: 3.1em; float: left; line-height: .85; margin: 4px 8px 0 0; color: var(--green); font-weight: 600; }
.rules h2 { font-family: var(--font-display); font-weight: 600; font-size: calc(20 * var(--u)); margin: 22px 0 8px; }
.rules ul { padding-left: 20px; margin: 8px 0; } .rules li { margin: 6px 0; } .rules p { margin: 8px 0; }
.course-card .cn { font-family: var(--font-display); font-weight: 600; font-size: calc(20 * var(--u)); }
.course-card .cl { font-size: max(var(--floor), calc(13 * var(--u))); color: var(--ink-3); }
.course-card .cs { display: flex; gap: 16px; margin-top: 10px; font-size: max(var(--floor), calc(13 * var(--u))); color: var(--ink-2); }
.course-card .cs b { display: block; font-family: var(--font-display); font-size: calc(18 * var(--u)); color: var(--ink); }
.cup-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hair-2); }
.cup-row:first-child { border-top: 0; }
.cup-row .yr { font-family: var(--font-display); font-weight: 600; font-size: calc(22 * var(--u)); color: var(--green); width: 60px; }
.cup-row .ch { font-weight: 700; }
.cup-row .sc { font-size: max(var(--floor), calc(13 * var(--u))); color: var(--ink-3); }
.install-tip { background: var(--paper); border: 1px dashed var(--hair); border-radius: var(--radius); padding: 12px 14px; font-size: max(var(--floor), calc(13.5 * var(--u))); color: var(--ink-2); }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: #3DAA6C; position: absolute; right: 0; bottom: 0; box-shadow: 0 0 0 2px var(--paper); }
.fade-in { animation: fadein .3s var(--ease); }
/* Lane C1: a live redraw of the same screen (a refresh, a poll, a reconnect) never replays the entrance (app.js render) */
body.nc-again .fade-in { animation: none; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- late fixes ---------- */
.sched-item .loc svg { width: 13px; height: 13px; flex: none; }
.list-item .chev svg, .chev svg { width: 18px; height: 18px; }
.grid-2 > *, .grid-3 > * { min-width: 0; }
.lb-row .vl { font-size: calc(18 * var(--u)); }
.statbar .v.rec { font-size: calc(17 * var(--u)); padding-top: 4px; }

/* ---------- Red / Blue teams ---------- */
/* the team fills are the --red and --blue tokens at the top (--red-team and --blue-team are their aliases) */
.avatar.red { background: var(--red-team); } .avatar.blue { background: var(--blue-team); }
.dot.red { background: var(--red-team); } .dot.blue { background: var(--blue-team); }
.side .bar.red { background: var(--red-team); } .side .bar.blue { background: var(--blue-team); }
.pcard.red::before { background: var(--red-team); } .pcard.blue::before { background: var(--blue-team); }
.profile-hero.red, .profile-hero.blue { background: var(--surface-1); color: var(--ink-1); }
.score-line .team.red .pts, .score-line .team.blue .pts { color: #fff; }
.progress .a.red, .progress .b.red { background: #F07A6E; } .progress .a.blue, .progress .b.blue { background: #7FA8F0; }
.progress .a.gold { background: var(--gold); } .progress .a.black, .progress .b.black { background: #fff; }

/* ---------- scorecard (hole-by-hole) ---------- */
.scorebig { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; background: var(--paper); border: 1px solid var(--hair); border-radius: var(--radius-lg); padding: 14px 12px; }
.scorebig .t { text-align: center; }
.scorebig .t .n { font-size: var(--t-label); font-weight: 700; letter-spacing: 0; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scorebig .t .p { font-family: var(--font-display); font-weight: 600; font-size: 52px; line-height: 1; letter-spacing: -0.03em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.scorebig .t.red .p { color: var(--red-team); } .scorebig .t.blue .p { color: var(--blue-team); } .scorebig .t.black .p { color: var(--navy); } .scorebig .t.gold .p { color: var(--gold-deep); } .scorebig .t.green .p { color: var(--green); }
.scorebig .mid { text-align: center; font-size: var(--t-label); font-weight: 700; letter-spacing: 0; text-transform: uppercase; color: var(--ink-3); }
.scorebig .mid b { display: block; font-family: var(--font-display); font-size: calc(22 * var(--u)); color: var(--ink); letter-spacing: 0; text-transform: none; }
.holes { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
.holes + .holes { margin-top: 4px; }
.hcell { aspect-ratio: 1; border-radius: 9px; border: 1px solid var(--hair); background: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: max(var(--floor), calc(12 * var(--u))); font-weight: 700; color: var(--ink-3); position: relative; padding: 0; }
.hcell .hn { font-size: max(var(--floor), calc(12 * var(--u))); line-height: 1; opacity: .8; }
.hcell .hv { font-family: var(--font-display); font-size: max(var(--floor), calc(15 * var(--u))); font-weight: 600; line-height: 1.1; color: var(--ink); }
.hcell.red { background: var(--red-team); border-color: var(--red-team); color: rgba(255,255,255,.75); } .hcell.red .hv { color: #fff; }
.hcell.blue { background: var(--blue-team); border-color: var(--blue-team); color: rgba(255,255,255,.75); } .hcell.blue .hv { color: #fff; }
.hcell.black { background: var(--navy); border-color: var(--navy); color: rgba(255,255,255,.75); } .hcell.black .hv { color: #fff; }
.hcell.gold { background: var(--gold); border-color: var(--gold); color: rgba(30,26,10,.7); } .hcell.gold .hv { color: #1E1A0A; }
.hcell.green { background: var(--green); border-color: var(--green); color: rgba(255,255,255,.75); } .hcell.green .hv { color: #fff; }
.hcell.halve { background: var(--ivory-2); } .hcell.halve .hv { color: var(--ink-3); }
.hcell.cur { box-shadow: 0 0 0 2px var(--ivory), 0 0 0 4px var(--gold); }
.hcell .dd { position: absolute; top: -5px; right: -4px; font-size: max(var(--floor), calc(12 * var(--u))); line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.hole-panel { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--radius-lg); padding: 16px; text-align: center; }
.hole-panel .hn { font-family: var(--font-display); font-weight: 600; font-size: 30px; letter-spacing: -0.02em; line-height: 1; }
.hole-panel .worth { margin-top: 6px; font-size: max(var(--floor), calc(13 * var(--u))); font-weight: 700; color: var(--ink-2); }
.hole-panel .worth.hot { color: var(--gold-deep); }
.hole-panel .worth.fire { color: var(--red); font-size: max(var(--floor), calc(14 * var(--u))); letter-spacing: .04em; text-transform: uppercase; }
.ddrow { display: flex; gap: 8px; margin-top: 12px; }
.ddbtn { flex: 1; height: 44px; border-radius: 12px; border: 1.5px solid var(--hair); background: var(--paper); font-weight: 700; font-size: max(var(--floor), calc(13 * var(--u))); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ddbtn.on { background: var(--gold-soft); border-color: var(--gold); color: #5D4A0B; }
.ddbtn.used { opacity: .5; text-decoration: line-through; }
.ddbtn:disabled { pointer-events: none; }
.winrow { display: grid; grid-template-columns: 1fr 88px 1fr; gap: 8px; margin-top: 12px; }
.winbtn { height: 64px; border-radius: 16px; font-weight: 700; font-size: max(var(--floor), calc(15 * var(--u))); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; line-height: 1.1; padding: 0 6px; transition: transform .12s var(--ease); }
.winbtn:active { transform: scale(.96); }
.winbtn small { font-size: max(var(--floor), calc(12 * var(--u))); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.winbtn.red { background: var(--red-team); } .winbtn.blue { background: var(--blue-team); } .winbtn.black { background: var(--navy); } .winbtn.gold { background: var(--gold); color: #1E1A0A; } .winbtn.green { background: var(--green); }
.winbtn.halve { background: var(--ivory-2); color: var(--ink-2); }
.winbtn.sel { box-shadow: 0 0 0 3px var(--ivory), 0 0 0 5px var(--gold); }
.legend { display: flex; justify-content: center; gap: 14px; font-size: max(var(--floor), calc(12 * var(--u))); color: var(--ink-3); font-weight: 700; margin-top: 8px; }
.legend span { display: inline-flex; align-items: center; gap: 4px; }
.mfoot .ddtag { font-size: var(--t-label); font-weight: 700; color: var(--gold-ink); margin-left: 6px; }

/* ---------- news flash + hole highlights ---------- */
.newsflash { position: fixed; left: 12px; right: 12px; top: calc(10px + var(--safe-t)); z-index: 300; margin: 0 auto; max-width: 520px; background: var(--navy); color: #fff; border-radius: 18px; padding: 12px 14px; box-shadow: var(--shadow-2); display: flex; gap: 12px; align-items: flex-start; animation: flashin .35s var(--ease); border: 1px solid rgba(255,255,255,.08); text-align: left; }
.newsflash .ic { font-size: calc(24 * var(--u)); line-height: 1.1; }
.newsflash .k { font-size: var(--t-label); font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--gold); }
.newsflash .t { font-family: var(--font-display); font-weight: 600; font-size: calc(16 * var(--u)); line-height: 1.2; margin-top: 2px; }
.newsflash .b { font-size: max(var(--floor), calc(12.5 * var(--u))); color: rgba(255,255,255,.7); margin-top: 3px; }
.newsflash .x { margin-left: auto; color: rgba(255,255,255,.6); font-size: calc(16 * var(--u)); padding: 2px 4px; }
.newsflash.out { animation: flashout .3s var(--ease) forwards; }
@keyframes flashin { from { opacity: 0; transform: translateY(-14px) scale(.98); } }
@keyframes flashout { to { opacity: 0; transform: translateY(-10px); } }
.hlrow { margin-top: 12px; display: grid; gap: 8px; }
.hlside { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 8px; }
.hlside .nm { font-size: var(--t-label); font-weight: 700; letter-spacing: 0; text-transform: uppercase; color: var(--ink-3); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hlside .nm.red { color: var(--red-team); } .hlside .nm.blue { color: var(--blue-team); }
.hlbtns { display: flex; gap: 6px; }
.hlbtn { flex: 1; height: 36px; border-radius: 10px; border: 1.5px solid var(--hair); background: var(--paper); font-weight: 700; font-size: max(var(--floor), calc(12 * var(--u))); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.hlbtn.on { background: var(--green-soft); border-color: var(--green); color: var(--green); }
.hlbtn.on.eagle { background: var(--gold-soft); border-color: var(--gold); color: #5D4A0B; }
.hlbtn.on.ace { background: #EAF0FB; border-color: var(--blue-team); color: var(--blue-team); }
.hlwho { display: flex; gap: 6px; grid-column: 2; }
.hlwho button { flex: 1; height: 28px; border-radius: 8px; font-size: max(var(--floor), calc(12 * var(--u))); font-weight: 700; background: var(--ivory-2); color: var(--ink-2); }
.hlwho button.on { background: var(--navy); color: #fff; }
.hcell .hl { position: absolute; left: -3px; top: -5px; font-size: max(var(--floor), calc(12 * var(--u))); line-height: 1; }

/* ---------- team tags on names ---------- */
.tt { display: inline-block; font-size: max(var(--floor), calc(13 * var(--u))); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; padding: 2px 5px; border-radius: 5px; vertical-align: middle; margin-left: 6px; line-height: 1.1; color: #fff; background: var(--ink-3); }
.tt.red { background: var(--red-team); } .tt.blue { background: var(--blue-team); } .tt.black { background: var(--navy); } .tt.gold { background: var(--gold); color: #1E1A0A; } .tt.green { background: var(--green); } .tt.white { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1px var(--hair); }
.nm-tag { display: inline-flex; align-items: center; gap: 0; min-width: 0; }
.nm-tag > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard .tt { margin: 6px 0 0; }
.lostrow { margin-top: 10px; display: grid; grid-template-columns: 58px 1fr; gap: 8px; align-items: center; }
.lostrow .lb { font-size: var(--t-label); font-weight: 700; letter-spacing: 0; text-transform: uppercase; color: var(--ink-3); text-align: left; }
.lostrow .who { display: flex; gap: 6px; flex-wrap: wrap; }
.lostrow button.p { height: 30px; padding: 0 10px; border-radius: 8px; background: var(--ivory-2); font-size: max(var(--floor), calc(12 * var(--u))); font-weight: 700; color: var(--ink-2); display: inline-flex; align-items: center; gap: 5px; }
.lostrow button.p .dot { width: 7px; height: 7px; }
.hlbtn.on.albatross { background: #FDF1E3; border-color: #D9822B; color: #8A4B0F; }
.hlbtn small { font-weight: 700; font-size: max(var(--floor), calc(12 * var(--u))); }
.mode-pill { font-size: max(var(--floor), calc(12 * var(--u))); font-weight: 700; color: var(--ink-3); }
.table .crown { color: var(--gold-deep); }

.side .names { font-size: max(var(--floor), calc(15 * var(--u))); }
.lb-row .avatar.sm, .table .avatar.sm { --size: 40px; }
.msg .avatar.sm { --size: 34px; }
.comment .avatar.xs { --size: 30px; }

/* hole tile: marks row (⚡ / 🐦) centered above the hole number */
.hcell { aspect-ratio: auto; height: 58px; justify-content: flex-start; padding-top: 3px; }
.hcell .hm { height: 13px; font-size: max(var(--floor), calc(12 * var(--u))); line-height: 13px; letter-spacing: -1px; }
.hcell .hn { margin-top: 1px; }
.hcell .hv { font-size: calc(16 * var(--u)); }
.hcell .dd, .hcell .hl { display: none; }
.hcell.red .hm, .hcell.blue .hm, .hcell.black .hm, .hcell.green .hm { filter: drop-shadow(0 0 1px rgba(255,255,255,.9)); }
/* standings fit on a 375px phone */
.table th, .table td { padding: 10px 5px; }
.table td.c, .table td.r, .table th.c, .table th.r { white-space: nowrap; }
.table .who .nm-tag { max-width: 150px; }
.table .who .nm-tag .tt { margin-left: 4px; }

/* ---------- two-sided confirmation ---------- */
.hcell.pend { border-style: dashed; border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(201,162,39,.35); }
.hcell.pend::after { content: "?"; position: absolute; right: 3px; bottom: 2px; font-size: max(var(--floor), calc(12 * var(--u))); font-weight: 700; color: var(--gold-ink); background: var(--gold-tint); border-radius: 6px; padding: 0 3px; line-height: 12px; }
.confirm-strip { margin-top: 14px; background: var(--gold-soft); border: 1px solid rgba(201,162,39,.4); border-radius: var(--radius); padding: 10px 12px; }
.confirm-strip .chip.on { background: var(--navy); color: #fff; }
.confirm-card { margin-top: 12px; background: var(--paper); border: 2px solid var(--gold); border-radius: var(--radius-lg); padding: 14px 16px; text-align: left; }
.confirm-card .cc-body { margin-top: 6px; font-size: max(var(--floor), calc(15 * var(--u))); line-height: 1.4; }
.hole-panel.dim { opacity: .45; pointer-events: none; }

/* ---------- UX pass: bigger targets, compact extras, your-match, welcome ---------- */
.chip { height: 40px; padding: 0 16px; }
.hlbtn { height: 42px; }
.lostrow button.p { height: 38px; padding: 0 12px; }
.hlwho button { height: 34px; }
.xchips { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }
.xchip { height: 40px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--hair); background: var(--paper); font-weight: 700; font-size: max(var(--floor), calc(13 * var(--u))); color: var(--ink-2); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.xchip.on { background: var(--gold-soft); border-color: var(--gold); color: #5D4A0B; }
.xchip.used { opacity: .5; text-decoration: line-through; }
.xchip:disabled { pointer-events: none; }
.winrow { margin-top: 14px; }
.winbtn { height: 72px; font-size: calc(16 * var(--u)); }
.match.mine { border: 2px solid var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.youtag { font-size: var(--t-label); font-weight: 700; letter-spacing: 0; color: var(--gold-ink); background: var(--gold-soft); border-radius: 5px; padding: 2px 6px; margin-left: 6px; vertical-align: middle; }
.welcome { text-align: center; padding: 6px 4px 4px; }
.wcard { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--radius-xl); padding: 26px 20px; margin-top: 12px; min-height: 230px; display: flex; flex-direction: column; justify-content: center; }
.wcard .we { font-size: 44px; line-height: 1; }
.wcard .wt { font-family: var(--font-display); font-weight: 600; font-size: calc(24 * var(--u)); margin-top: 12px; letter-spacing: -0.01em; }
.wcard .wb { color: var(--ink-2); margin-top: 8px; font-size: max(var(--floor), calc(15.5 * var(--u))); line-height: 1.45; }
.wdots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.wdots span { width: 7px; height: 7px; border-radius: 50%; background: var(--hair); }
.wdots span.on { background: var(--green); width: 18px; border-radius: 4px; }
.welcome .actions .btn.ghost:empty { visibility: hidden; }
.name-btn { min-height: 60px; }
.quick button { min-height: 96px; }
.sheet .sh .h2 { font-size: calc(20 * var(--u)); }
.quick { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.quick button { min-height: 88px; padding: 12px 4px 10px; font-size: max(var(--floor), calc(12 * var(--u))); }
.quick button .i { width: 38px; height: 38px; font-size: calc(20 * var(--u)); }
.mhead > span:first-child { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.youtag { margin-left: 0; }

/* ---------- course guide ---------- */
.course-hero { position: relative; aspect-ratio: 16/9; background: var(--ivory-2); overflow: hidden; }
.course-hero.big { border-radius: var(--radius-xl); aspect-ratio: 16/10; }
.course-hero img { width: 100%; height: 100%; object-fit: cover; }
.course-hero .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; background: linear-gradient(to top, rgba(10,20,15,.78), transparent); color: #fff; }
.course-hero .cap b { display: block; font-family: var(--font-display); font-weight: 600; font-size: calc(22 * var(--u)); letter-spacing: -0.01em; line-height: 1.1; }
.course-hero .cap span { font-size: max(var(--floor), calc(13 * var(--u))); opacity: .85; }
.scorecard { border-collapse: collapse; font-size: max(var(--floor), calc(12.5 * var(--u))); min-width: 100%; }
.scorecard th, .scorecard td { padding: 8px 4px; border-bottom: 1px solid var(--hair-2); white-space: nowrap; }
.scorecard thead th { font-size: var(--t-label); letter-spacing: 0; text-transform: none; color: var(--ink-3); font-weight: 700; background: var(--surface-2); }
.scorecard tbody th { text-align: left; font-size: var(--t-label); letter-spacing: 0; text-transform: none; color: var(--ink-3); font-weight: 700; padding-left: 10px; }
.scorecard tr.par td { font-family: var(--font-display); font-weight: 600; font-size: max(var(--floor), calc(15 * var(--u))); color: var(--green); }
.scorecard tr.hcp td { color: var(--ink-3); }
.scorecard td.tot, .scorecard th.tot { background: var(--surface-2); font-weight: 700; }
.scorecard + .scorecard { border-top: 2px solid var(--hair); }

/* ---------- recommendations round ---------- */
.solo-note { margin-top: 6px; font-size: max(var(--floor), calc(13 * var(--u))); font-weight: 700; color: var(--green); background: var(--green-soft); border-radius: 10px; padding: 6px 10px; display: inline-block; }
.solo-note.one { color: #5D4A0B; background: var(--gold-soft); }
.queued-pill { margin-top: 10px; font-size: max(var(--floor), calc(12 * var(--u))); font-weight: 700; color: #5D4A0B; background: var(--gold-soft); border-radius: 10px; padding: 8px 10px; }
.section-head .segmented { padding: 2px; } .section-head .segmented button { height: 34px; font-size: max(var(--floor), calc(12 * var(--u))); }
/* The room chips ride just under the sticky Feed/Chat/Bets bar, on the page ground so messages scroll beneath them. */
#chatch { margin: 0 -16px 4px; padding: 6px 16px; position: sticky; top: calc(var(--header-h) + var(--safe-t) + 60px); z-index: 29; background: var(--ivory); }

.teetag { font-size: var(--t-label); font-weight: 700; letter-spacing: 0; color: var(--ink-2); background: var(--ivory-2); border-radius: 5px; padding: 2px 6px; vertical-align: middle; }

/* ---------- hole notes & photos ---------- */
.hnote { display: flex; gap: 8px; margin-top: 12px; align-items: stretch; }
.hnote-in { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--hair); background: var(--paper); font: inherit; font-size: calc(16 * var(--u)); color: var(--ink); }
.hnote-in:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.hnote-cam { width: 48px; height: 44px; border-radius: 12px; border: 1.5px solid var(--hair); background: var(--paper); font-size: calc(20 * var(--u)); display: grid; place-items: center; flex: none; }
.hnote-cam.on { background: var(--gold-soft); border-color: var(--gold); }
.hnote-cam:disabled { opacity: .6; }
.hnote-media { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.hm-th { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--ivory-2); border: 1px solid var(--hair); display: grid; place-items: center; color: var(--ink-3); font-weight: 700; }
.hm-th img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.hm-th i { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-style: normal; font-size: calc(22 * var(--u)); text-shadow: 0 1px 6px rgba(0,0,0,.6); pointer-events: none; }
.hm-th button { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 50%; background: rgba(20,33,61,.85); color: #fff; font-size: max(var(--floor), calc(12 * var(--u))); line-height: 22px; font-weight: 700; }
.hnotes { margin-top: 12px; display: grid; gap: 6px; }
.hnote-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 12px; background: var(--paper); border: 1px solid var(--hair); }
.hnote-row b.num { width: 26px; height: 26px; border-radius: 8px; background: var(--ivory-2); display: grid; place-items: center; font-size: max(var(--floor), calc(13 * var(--u))); flex: none; }
.hnote-row img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: none; }
.hnote-row .tx { font-size: max(var(--floor), calc(14 * var(--u))); color: var(--ink-2); line-height: 1.3; min-width: 0; }

/* ---------- polish pass: touch targets, legibility ---------- */
header .back, header .textbtn { min-height: 44px; display: inline-flex; align-items: center; }
header .textbtn { padding: 0 8px; }
.cbtn { min-height: 36px; }
.comment-form input, .comment-form textarea { font-size: calc(16 * var(--u)); }
.grid-2 .lb { padding: 12px 12px; }
.grid-2 .lb-row { gap: 8px; }
.grid-2 .lb-row .rk { width: 18px; }
.grid-2 .lb-row .nm { font-size: max(var(--floor), calc(14 * var(--u))); gap: 6px; }
.grid-2 .lb-row .vl { font-size: calc(18 * var(--u)); }
.lb-row .vl small.stat-sub { margin-left: 8px; letter-spacing: .02em; }
.statbar .l { white-space: nowrap; }
.grid-2 .lb-row .nm-tag { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.grid-2 .lb-row .nm-tag .tt { margin-left: 0; }
.grid-2 .lb-row .rk { width: 14px; font-size: max(var(--floor), calc(12 * var(--u))); } .grid-2 .lb-row .rk.m1 { font-size: max(var(--floor), calc(14 * var(--u))); }

/* ---------- audit pass: scroll lock, touch targets ---------- */
body.locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
.textbtn { min-height: 40px; display: inline-flex; align-items: center; }
.sheet .close { width: 40px; height: 40px; }
.comment .del, .hm-th button, .cmedia .rm, .newsflash .x { min-width: 32px; min-height: 32px; display: inline-grid; place-items: center; }
.hlwho button { min-height: 40px; }
.table tr[data-player] td { padding-top: 12px; padding-bottom: 12px; }

/* ---------- fun pass: moods, birthdays, MVP race, fireworks, siren, gold mode ---------- */
.avatar { position: relative; }
.avatar .mood { position: absolute; right: -5px; bottom: -5px; font-style: normal; font-size: .5em; line-height: 1; background: var(--paper); border-radius: 50%; padding: 3px; box-shadow: 0 1px 4px rgba(20,33,61,.25); }
.avatar.sm .mood { font-size: max(var(--floor), calc(12 * var(--u))); padding: 2px; right: -4px; bottom: -4px; }
.avatar.bday::before { content: '🎉'; position: absolute; left: -6px; top: -8px; font-size: .5em; }
.bday-card { display: flex; align-items: center; gap: 12px; position: relative; background: var(--surface-1); border-color: var(--gold); overflow: visible; }
.bday-card .hat { position: absolute; left: 44px; top: -2px; font-size: 26px; transform: rotate(-18deg); z-index: 2; }
.bday-card .cake { font-size: 34px; }
.card.predict { border: 1.5px dashed var(--gold); background: var(--surface-1); }
.wx { margin-left: auto; white-space: nowrap; }
.race-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 0; border-top: 1px solid var(--hair-2); }
.race-row:first-of-type { border-top: 0; }
.race-row .rk { width: 22px; text-align: center; font-weight: 700; color: var(--ink-3); font-size: max(var(--floor), calc(13 * var(--u))); } .race-row .rk.m1 { font-size: calc(18 * var(--u)); }
.race-body { flex: 1; min-width: 0; display: grid; gap: 4px; }
.race-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 600; font-size: max(var(--floor), calc(15 * var(--u))); }
.race-pts { font-family: var(--font-display); font-weight: 600; font-size: calc(20 * var(--u)); color: var(--green); }
.race-pts small { font-family: var(--font-ui); font-size: max(var(--floor), calc(12 * var(--u))); font-weight: 700; color: var(--ink-3); margin-left: 6px; }
.race-bar { height: 8px; border-radius: 999px; background: var(--ivory-2); overflow: hidden; }
.race-bar i { display: block; height: 100%; border-radius: 999px; background: var(--green); transition: width .4s ease; }
.race-bar i.red { background: var(--red-team); } .race-bar i.blue { background: var(--blue-team); }
.race-bar.dirt i { background: var(--ink-3); }
.ghost-note { margin-top: 6px; font-size: var(--t-meta); color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; }
.newsflash.siren { background: var(--red); animation: siren 1s ease-in-out 3; }
.newsflash.siren .k { color: #FFD9D5; }
@keyframes siren { 0%, 100% { box-shadow: 0 8px 30px rgba(181,53,43,.35); } 50% { box-shadow: 0 0 0 6px rgba(181,53,43,.45), 0 8px 30px rgba(181,53,43,.6); } }
.newsflash.curse { background: #2B2140; } .newsflash.curse .k { color: #C9B8F0; }
.newsflash.gold { background: var(--gold); color: var(--ink-1); }
body.gold-mode header, body.gold-mode nav.tabs { background: var(--gold) !important; }
body.gold-mode { background: #FFF6D6 !important; }
.fireworks { position: fixed; inset: 0; z-index: 9000; pointer-events: none; background: rgba(11,21,48,.3); animation: fwin .3s ease; }
.fireworks.out { opacity: 0; transition: opacity .5s; }
.fireworks i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 0 var(--c); animation: fwpop 1.4s ease-out infinite; opacity: 0; }
@keyframes fwpop { 0% { transform: scale(.2); opacity: 1; box-shadow: 0 0 0 0 var(--c), 0 0 0 0 var(--c); } 60% { opacity: 1; } 100% { transform: scale(14); opacity: 0; box-shadow: 0 0 0 12px transparent, 0 0 0 30px transparent; } }
@keyframes fwin { from { opacity: 0; } to { opacity: 1; } }
.fw-text { position: absolute; left: 0; right: 0; bottom: 28%; text-align: center; font-family: var(--font-story); font-weight: 700; font-size: 34px; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.5); animation: fwtext 3.4s ease both; }
@keyframes fwtext { 0% { opacity: 0; transform: translateY(10px); } 20% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .newsflash.siren, .fireworks i, .fw-text { animation: none; } }

.avatar .champ { position: absolute; left: 50%; top: -0.62em; transform: translateX(-50%) rotate(-8deg); font-style: normal; font-size: .55em; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.avatar.sm .champ { font-size: max(var(--floor), calc(12 * var(--u))); top: -9px; }
.cap.champ-pill { background: var(--gold); color: #1B1300; right: auto; left: 10px; }

/* ---------- Awards Night ---------- */
.award { position: relative; display: block; width: 100%; text-align: left; background: var(--paper); border: 1px solid var(--hair); border-radius: var(--radius-lg); padding: 14px; overflow: hidden; box-shadow: var(--shadow-sm); }
.award.big, .award.cup { text-align: center; padding: 18px 16px; }
.award.cup { color: #fff; background: var(--navy); border-color: transparent; }
.award.cup.red { background: var(--red); } .award.cup.blue { background: var(--blue); }
.award.cup .a-title, .award.cup .a-val { color: rgba(255,255,255,.85); }
.award.gold { background: var(--surface-1); border-color: var(--gold); }
.award.shame { background: var(--surface-1); }
.award .a-ic { font-size: 40px; line-height: 1; } .award .a-ic.sm { font-size: 26px; }
.award .a-title { font-family: var(--font-display); font-weight: 700; font-size: calc(20 * var(--u)); margin-top: 6px; color: var(--ink); } .award .a-title.sm { font-size: calc(16 * var(--u)); margin-top: 0; }
.award .a-blurb { font-size: max(var(--floor), calc(12 * var(--u))); color: var(--ink-3); margin-top: 2px; line-height: 1.35; }
.award .a-win { margin-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.award .a-win.row { flex-direction: row; align-items: center; gap: 10px; }
.award .a-name { font-weight: 700; font-size: calc(17 * var(--u)); } .award .a-name.sm { font-size: max(var(--floor), calc(14 * var(--u))); font-weight: 700; }
.award .a-nick { font-family: var(--font-story); font-weight: 600; color: var(--gold-ink); font-size: max(var(--floor), calc(14 * var(--u))); }
.award .a-val { font-family: var(--font-display); font-weight: 600; color: var(--green); font-size: calc(22 * var(--u)); } .award .a-val.sm { font-size: calc(16 * var(--u)); }
.award.shame .a-val { color: #6B4A1E; }
.award .a-runner { font-size: max(var(--floor), calc(12 * var(--u))); color: var(--ink-3); margin-top: 8px; }
.award .a-veil { display: none; }
.award.covered > *:not(.a-veil) { visibility: hidden; }
.award.covered .a-veil { display: grid; place-items: center; position: absolute; inset: 0; background: var(--stage); color: #fff; font-weight: 700; letter-spacing: 0; text-transform: none; font-size: max(var(--floor), calc(12 * var(--u))); gap: 6px; }
.award.covered .a-veil span { font-size: 34px; }
.btn.gold { background: var(--gold); color: #1B1300; }

/* ---------- Shot of the Day ---------- */
.card.shots { border-color: var(--gold); background: var(--surface-1); }
.shot { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--hair-2); }
.shot:first-child { border-top: 0; }
.shot > .row { flex: 1; min-width: 0; }
.shot.lead { background: var(--gold-tint); border-radius: 12px; padding-left: 8px; margin-left: -8px; }
.shot .vote { flex: none; display: grid; place-items: center; gap: 2px; width: 52px; min-height: 52px; border-radius: 14px; background: var(--ivory-2); font-size: calc(18 * var(--u)); color: var(--ink-2); }
.shot .vote b { font-size: max(var(--floor), calc(13 * var(--u))); }
.shot .vote.on { background: var(--gold-soft); box-shadow: inset 0 0 0 1.5px var(--gold); color: #5D4A0B; }
.shot .vote:disabled { opacity: .5; }

/* ---------- nominations: tragedies, chooser, voting ---------- */
.card.shots.board-tragedy { border-color: var(--line); background: var(--surface-1); }
.shot.tragedy.lead { background: var(--surface-2); }
.shot.tragedy .vote.on { background: #E6E0F2; box-shadow: inset 0 0 0 1.5px #6B5B95; color: #2B2140; }
.xchip.nominate { border-color: var(--gold); color: #5D4A0B; background: var(--gold-soft); }
.nom-choices { display: grid; gap: 10px; margin-top: 8px; }
.nom-choice { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; padding: 14px; border-radius: 16px; border: 1.5px solid var(--hair); background: var(--paper); min-height: 72px; }
.nom-choice .ic { grid-row: 1 / span 2; font-size: 30px; text-align: center; }
.nom-choice b { font-size: calc(16 * var(--u)); }
.nom-choice .sub { font-size: max(var(--floor), calc(12.5 * var(--u))); color: var(--ink-3); }
.nom-choice.gold { background: var(--gold-tint); border-color: var(--gold); }
.nom-choice.dark { background: var(--surface-2); border-color: var(--line-strong); }
.vote-line { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--ivory-2); font-size: max(var(--floor), calc(13 * var(--u))); color: var(--ink-2); }
.vote-line.open { background: var(--green-soft); color: var(--green); font-weight: 700; }
.vote-line.closed { background: var(--navy); color: #fff; }
.card.vote-card { border: 1.5px solid var(--green); background: var(--surface-1); }

.vote-line.grace { background: var(--gold-soft); color: #5D4A0B; font-weight: 700; }
.card.vote-card.grace { border-color: var(--gold); background: var(--surface-1); }

/* ---------- profile wall ---------- */
.wall-form { display: flex; gap: 8px; margin-top: 4px; }
.wall-form .input { flex: 1; min-width: 0; font-size: calc(16 * var(--u)); }
.wall-list { margin-top: 10px; display: grid; gap: 8px; }
.wall-note { display: flex; gap: 10px; align-items: flex-start; background: var(--paper); border: 1px solid var(--hair); border-radius: 14px; padding: 10px 12px; }
.wall-note .del { color: var(--ink-3); font-size: max(var(--floor), calc(14 * var(--u))); min-width: 32px; min-height: 32px; display: grid; place-items: center; margin: -6px -8px -6px 0; }

/* ---------- Nickname Court ---------- */
.card.court { border-color: var(--line); background: var(--surface-1); }
.motion { padding: 10px 0; border-top: 1px solid var(--hair-2); }
.motion:first-child { border-top: 0; }
.motion.compact { opacity: .9; }
.motion .m-title { font-size: max(var(--floor), calc(15 * var(--u))); font-weight: 600; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.motion .m-name { font-family: var(--font-brand); font-size: calc(18 * var(--u)); color: var(--navy); }
.motion.passed .m-name, .motion.upheld .m-name { color: var(--green); }
.motion.failed .m-name, .motion.overturned .m-name { text-decoration: line-through; color: var(--ink-3); }
.motion .m-appeal { margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: var(--gold-soft); font-size: max(var(--floor), calc(13 * var(--u))); color: #5D4A0B; }
.m-tally { margin-top: 8px; }
.m-bar { position: relative; height: 10px; border-radius: 999px; background: var(--ivory-2); overflow: hidden; }
.m-bar i { display: block; height: 100%; background: #8E97A6; transition: width .4s ease; }
.m-bar i.pass { background: var(--green); }
.m-bar .m-mark { position: absolute; left: 66.67%; top: 0; bottom: 0; width: 2px; background: var(--navy); opacity: .6; }
.card.court-card { border: 1.5px solid var(--line-strong); background: var(--surface-1); }
.pcard .nick { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.card.unlock-card { border: 1.5px solid var(--ink-1); background: var(--surface-1); }

/* ---------- Hall of Fame ---------- */
.card.hof { background: var(--surface-1); border-color: var(--gold); }
.card.hof.linked { cursor: pointer; }
.hof-year { text-align: center; min-width: 58px; } .hof-year .display { font-size: calc(24 * var(--u)); color: var(--gold-deep); line-height: 1; }
.hof-name { font-family: var(--font-display); font-weight: 700; font-size: calc(20 * var(--u)); color: var(--ink); }

.card.nudge-card { border: 1.5px dashed var(--line-strong); background: var(--surface-1); }

/* ---------- organizer: handicap tiles + team totals ---------- */
.hcp-tile { flex: none; width: 52px; height: 48px; border-radius: 12px; background: var(--green); color: #fff; display: grid; place-items: center; align-content: center; line-height: 1; }
.hcp-tile b { font-family: var(--font-display); font-size: calc(18 * var(--u)); font-weight: 700; }
.hcp-tile small { font-size: max(var(--floor), calc(12 * var(--u))); letter-spacing: .08em; text-transform: uppercase; opacity: .8; margin-top: 2px; }
.hcp-tile.none { background: var(--ivory-2); color: var(--ink-3); }
.hcp-total { margin-left: auto; text-align: right; line-height: 1.1; }
.hcp-total b { font-family: var(--font-display); font-size: calc(22 * var(--u)); color: var(--green); display: block; }
.hcp-total small { font-size: max(var(--floor), calc(12 * var(--u))); color: var(--ink-3); }

.paid-badge { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; margin-left: 6px; font-size: max(var(--floor), calc(12 * var(--u))); font-weight: 700; line-height: 1; vertical-align: 1px; font-family: var(--font-display); }
.paid-badge.full, .admin-row b .paid-badge.full { background: var(--green); color: #fff; }
.paid-badge.part, .admin-row b .paid-badge.part { background: var(--gold); color: var(--ink); }

/* ---------- prediction slips: bold-call odds board ---------- */
.bold-board { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bold-chip { display: inline-flex; align-items: center; gap: 5px; font-size: max(var(--floor), calc(12 * var(--u))); color: var(--ink-3); background: var(--ivory-2); border-radius: 999px; padding: 3px 9px 3px 4px; }
.bold-chip b { font-family: var(--font-display); font-size: max(var(--floor), calc(12 * var(--u))); color: var(--green); background: var(--paper); border-radius: 999px; padding: 1px 7px; }
.bold-chip.hot b { color: var(--gold-deep); }

/* ---------- organizer: round tee sheet ---------- */
.tee-sheet { display: grid; gap: 6px; margin-top: 10px; }
.slot { display: grid; grid-template-columns: 74px 1fr; column-gap: 10px; align-items: center; width: 100%; text-align: left; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--hair); background: var(--paper); font: inherit; color: inherit; cursor: pointer; }
.slot b { grid-row: span 2; font-family: var(--font-display); font-size: max(var(--floor), calc(15 * var(--u))); font-weight: 700; }
.slot .who { font-weight: 700; font-size: max(var(--floor), calc(13.5 * var(--u))); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot .how { font-size: max(var(--floor), calc(12 * var(--u))); color: var(--ink-3); }
.slot.open { border-style: dashed; background: transparent; }
.slot.open .who { font-weight: 600; color: var(--ink-3); }
.slot:active { background: var(--ivory-2); }
/* ---------- organizer: schedule import preview ---------- */
.sched-preview .sp-row { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; border-top: 1px solid var(--hair-2); font-size: max(var(--floor), calc(13.5 * var(--u))); }
.sched-preview .sp-t { flex: none; width: 64px; font-weight: 700; color: var(--ink-2); }
.sched-preview .sp-warn { color: var(--red); margin-top: 10px; line-height: 1.5; }

/* ---------- morning check-in ---------- */
.card.checkin { border: 1.5px solid var(--gold); background: var(--surface-1); }
.ci-meter { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.ci-num { font-size: max(var(--floor), calc(13 * var(--u))); color: var(--ink-3); white-space: nowrap; }
.ci-num b { font-family: var(--font-display); font-size: 30px; color: var(--green); margin-right: 2px; }
.ci-bar { flex: 1; height: 10px; border-radius: 999px; background: var(--ivory-2); overflow: hidden; }
.ci-bar span { display: block; height: 100%; background: var(--green); border-radius: 999px; transition: width .4s ease; }
.ci-bar.full span { background: var(--brand); }
.ci-latest { margin-top: 8px; font-size: max(var(--floor), calc(13.5 * var(--u))); }
.ci-go { margin-top: 12px; font-size: calc(17 * var(--u)); padding: 14px; }
.ci-me { margin-top: 12px; font-weight: 700; color: var(--green); }
.ci-group { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hair); }
.ci-when { font-size: var(--t-label); font-weight: 700; letter-spacing: 0; text-transform: uppercase; color: var(--ink-3); }
.ci-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ci-row .lbl { width: 58px; font-size: max(var(--floor), calc(12 * var(--u))); color: var(--ink-3); flex: none; }
.ci-who { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--paper); border: 1px solid var(--hair); font: inherit; font-size: max(var(--floor), calc(13 * var(--u))); font-weight: 700; color: inherit; cursor: pointer; max-width: 100%; }
.ci-who .st { font-size: max(var(--floor), calc(12 * var(--u))); font-weight: 700; }
.ci-who .st.in { color: var(--green); }
.ci-who .st.out { color: var(--ink-3); font-weight: 500; }
.ci-who .cart { font-size: var(--t-label); font-weight: 700; color: var(--gold-ink); background: var(--gold-soft); border-radius: 6px; padding: 1px 6px; }
.ci-cart { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.ci-cart label { font-size: max(var(--floor), calc(13 * var(--u))); font-weight: 700; white-space: nowrap; }
.ci-cart .input { width: 96px; }
.ci-list .ci-line { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--hair-2); }
.ci-list .ci-line:first-child { border-top: 0; }
.card.ci-groupcard { margin-top: 8px; }
.ci-vs { font-size: max(var(--floor), calc(12 * var(--u))); color: var(--ink-3); margin: 4px 0 4px 2px; }

/* ---------- the Nigro Cup Caddy ---------- */
.caddy-teaser { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--gold); background: var(--surface-1); text-align: left; font: inherit; font-size: max(var(--floor), calc(13.5 * var(--u))); line-height: 1.35; color: inherit; cursor: pointer; }
.caddy-teaser .cap { font-size: calc(20 * var(--u)); }
.caddy-teaser b { color: var(--gold-deep); margin-right: 4px; }
.caddy-teaser .go { font-size: calc(22 * var(--u)); color: var(--gold-deep); }
.caddy-teaser:active { background: var(--gold-soft); }
.caddy-card { margin-top: 6px; }
.caddy-head { font-size: calc(21 * var(--u)); line-height: 1.3; font-weight: 600; }
.caddy-about { margin: 12px 0 4px; line-height: 1.55; }
.caddy-sec { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hair-2); line-height: 1.5; }
.caddy-sec .lbl { font-size: var(--t-label); font-weight: 700; letter-spacing: 0; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
.caddy-quip { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--brand); color: var(--on-brand); font-family: var(--font-story); font-weight: 600; font-size: calc(16 * var(--u)); line-height: 1.4; }
.caddy-quip span { font-style: normal; font-size: max(var(--floor), calc(12 * var(--u))); letter-spacing: .06em; text-transform: uppercase; opacity: .7; margin-left: 4px; }
.caddy-src { margin-top: 12px; font-size: max(var(--floor), calc(12 * var(--u))); color: var(--ink-3); }
.caddy-src a { display: inline-block; margin: 6px 12px 0 0; color: var(--green); }
.caddy-nav { margin-top: 14px; }
.caddy-intro p { margin: 0; line-height: 1.55; }
.caddy-intro ul { margin: 8px 0 0; padding-left: 18px; line-height: 1.5; }
.caddy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
@media (min-width: 520px) { .caddy-grid { grid-template-columns: repeat(3, 1fr); } }
.caddy-hole { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px; align-items: baseline; text-align: left; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--hair); background: var(--paper); font: inherit; color: inherit; cursor: pointer; }
.caddy-hole b { font-family: var(--font-display); font-size: calc(22 * var(--u)); color: var(--green); grid-row: span 2; }
.caddy-hole .par { font-size: var(--t-label); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.caddy-hole .hl { font-size: max(var(--floor), calc(12.5 * var(--u))); line-height: 1.35; grid-column: 2; }
.caddy-hole:active { background: var(--ivory-2); }
.hole-link { background: none; border: 0; padding: 0; font: inherit; color: var(--green); text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }

/* ---------- feedback survey ---------- */
.card.survey { display: block; border: 1.5px solid var(--line-strong); background: var(--surface-1); }
.card.survey.done { border-style: dashed; }
.sv-q { margin-top: 18px; }
.sv-l { display: block; font-weight: 700; font-size: max(var(--floor), calc(15 * var(--u))); margin-bottom: 8px; }
.sv-l .req { color: var(--red); margin-left: 3px; }
.sv-stars { display: flex; gap: 6px; }
.sv-star { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--hair); background: var(--paper); font-size: calc(24 * var(--u)); line-height: 1; color: #D9D3C3; cursor: pointer; }
.sv-star.on { color: var(--gold); border-color: var(--gold); background: var(--gold-soft); }
.sv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-course { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.sv-course .n { font-weight: 600; font-size: max(var(--floor), calc(14 * var(--u))); }
.sv-course .sv-star { width: 36px; height: 36px; font-size: calc(19 * var(--u)); }
.sv-res { margin-top: 12px; }
.sv-row { padding: 9px 0; border-top: 1px solid var(--hair-2); }
.sv-res .eyebrow + .sv-row { border-top: 0; }
.sv-quote { padding: 9px 0; border-top: 1px solid var(--hair-2); font-size: max(var(--floor), calc(14 * var(--u))); line-height: 1.45; }
.sv-res .eyebrow + .sv-quote { border-top: 0; }
.sv-quote .by { font-size: max(var(--floor), calc(12 * var(--u))); color: var(--ink-3); margin-top: 2px; }
.statbar.three { grid-template-columns: repeat(3, 1fr); }

/* ---------- dinner sign-ups ---------- */
.card.dinner { border: 1.5px solid var(--green); background: var(--surface-1); }
.card.dinner.done { border-style: dashed; }
.dn-chip.ask { border-color: var(--green); color: var(--green); font-weight: 700; }
.dn-chip.in { background: var(--green); color: #fff; border-color: var(--green); }
.dn-chip.out { color: var(--ink-3); }
.dn-count { margin-top: 8px; font-size: max(var(--floor), calc(14 * var(--u))); color: var(--ink-2); }
.dn-count b { font-family: var(--font-display); font-size: 26px; color: var(--green); margin-right: 4px; }
.dn-count.big b { font-size: 40px; }
.dn-guests { display: flex; align-items: center; gap: 14px; }
.dn-guests b { font-family: var(--font-display); font-size: calc(22 * var(--u)); min-width: 20px; text-align: center; }
.dn-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 0; border-top: 1px solid var(--hair-2); }
.sv-l + .dn-line { border-top: 0; }

.funstat .l { flex: 1; min-width: 0; }
.funstat .v { text-align: right; line-height: 1.15; max-width: 60%; overflow-wrap: anywhere; }

/* ---------- the bet book ---------- */
.card.bet-money { border: 1.5px solid var(--gold); background: var(--surface-1); }
.bm-net { font-family: var(--font-display); font-size: 32px; font-weight: 700; color: var(--ink-2); line-height: 1.1; margin-top: 2px; }
.bm-net.up, .bet-foot b.up, .num.up { color: var(--green); }
.bm-net.down, .bet-foot b.down, .num.down { color: var(--red); }
.card.bet { margin-top: 10px; }
.card.bet.settled { background: var(--surface-1); }
.card.bet.void { opacity: .75; }
.bet-head { display: flex; gap: 10px; align-items: flex-start; }
.bet-t { font-weight: 700; font-size: max(var(--floor), calc(15.5 * var(--u))); line-height: 1.3; }
.bet-stake { margin-top: 8px; font-size: max(var(--floor), calc(12.5 * var(--u))); font-weight: 700; color: var(--gold-deep); }
.bet-opts { display: grid; gap: 6px; margin-top: 10px; }
.bet-opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--hair); background: var(--paper); font: inherit; color: inherit; cursor: pointer; min-height: 44px; }
.bet-opt:disabled { cursor: default; }
.bet-opt .lbl { flex: 1; min-width: 0; font-weight: 700; font-size: max(var(--floor), calc(14 * var(--u))); }
.bet-opt .who { display: flex; align-items: center; gap: 2px; flex: none; }
.bet-opt .who .avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--paper); }
.bet-opt .who b { font-size: max(var(--floor), calc(12 * var(--u))); margin-left: 4px; color: var(--ink-3); }
.bet-opt .who i { font-size: max(var(--floor), calc(12 * var(--u))); color: var(--ink-3); font-style: normal; }
.bet-opt.mine { border: 1.5px solid var(--green); background: var(--green-soft); }
.bet-opt.win { border: 1.5px solid var(--gold); background: var(--gold-soft); }
.bet-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: max(var(--floor), calc(12.5 * var(--u))); color: var(--ink-3); }
.bet-foot b { font-family: var(--font-display); font-size: calc(17 * var(--u)); }
.bet-fold { margin-top: 14px; font-size: max(var(--floor), calc(13 * var(--u))); color: var(--ink-3); }
.bet-fold summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.bet-tpl .small { margin-top: 2px; line-height: 1.35; }
/* P06-12/13 (Sep 13 2026): the organizer's settle-by-hand chips are full taps, and a loss on a bet card reads at AA in
   dark (Team Red's fill is 3.75:1 on the dark card; its text ink passes). */
.bet-ad-chips .chip { min-height: var(--tap); }
@media screen { html[data-theme="dark"] .bet-foot b.down { color: var(--red-ink); } }
.bet-how b { font-weight: 700; color: var(--ink-2); }
.ci-line .hm-norank { display: inline-block; min-width: 28px; text-align: center; color: var(--ink-3); flex: none; }

/* ---------- side-bet ledger ---------- */
.card.led-bet { margin-top: 8px; }
.led-row { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: max(var(--floor), calc(13 * var(--u))); }
.led-row.up b { color: var(--green); }
.led-row.down b { color: var(--red); }

/* ---------- the opening (about 4.5 s: ball 0.25-1.4, crest 1.35, letters 1.6, collision 2.9, line 3.0, out 4.0) ---------- */
#intro { position: fixed; inset: 0; z-index: 9999; overflow: hidden; cursor: pointer; color: #F6F3EC; --c: min(44vw, 200px); --ct: 18vh; --tt: calc(var(--ct) + var(--c) + 14px); --ts: clamp(34px, 11vw, 56px); --vt: calc(var(--tt) + var(--ts) + 26px);
  background: radial-gradient(120% 90% at 50% 32%, #1d5a3b 0%, #0b2f1f 55%, #061a11 100%); -webkit-tap-highlight-color: transparent; }
#intro.out { animation: iOut .55s ease forwards; }
@keyframes iOut { to { opacity: 0; transform: scale(1.06); visibility: hidden; } }
.i-stage { position: absolute; inset: 0; }
.full .i-stage { animation: iShake .38s 2.88s; }
@keyframes iShake { 0%, 100% { transform: none; } 20% { transform: translate(-5px, 2px); } 40% { transform: translate(5px, -3px); } 60% { transform: translate(-3px, 2px); } 80% { transform: translate(2px, -1px); } }
.i-glow { position: absolute; left: 50%; top: calc(var(--ct) + var(--c) / 2); width: 140vmax; height: 140vmax; transform: translate(-50%, -50%) scale(.2); background: radial-gradient(circle, rgba(232, 199, 102, .38), transparent 58%); opacity: 0; }
.full .i-glow { animation: iGlow 2s 1.3s ease-out forwards; }
.quick .i-glow, .reduced .i-glow { opacity: .45; transform: translate(-50%, -50%) scale(1); }
@keyframes iGlow { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 30% { opacity: 1; } 100% { opacity: .5; transform: translate(-50%, -50%) scale(1); } }
.i-hill { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 24vh; fill: #0f3f28; transform: translateY(100%); }
.full .i-hill { animation: iHill 1.1s .05s cubic-bezier(.2, .8, .2, 1) forwards; }
.quick .i-hill, .reduced .i-hill { transform: none; }
@keyframes iHill { to { transform: none; } }
/* the ball: sideways at a steady speed, up and down on a parabola, shrinking into the distance */
.i-bx { position: absolute; left: 50%; top: calc(var(--ct) + var(--c) / 2); width: 0; height: 0; opacity: 0; }
.i-ball { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 30%, #e9ece6 55%, #b3b9b0 100%); box-shadow: 0 0 18px rgba(255, 255, 255, .75); }
.full .i-bx { animation: iBx 1.15s .25s linear forwards; }
.full .i-bx .i-ball { animation: iBy 1.15s .25s forwards; }
.full .i-bx.t1, .full .i-bx.t1 .i-ball { animation-delay: .31s; } .i-bx.t1 .i-ball { opacity: .4; transform: scale(.8); }
.full .i-bx.t2, .full .i-bx.t2 .i-ball { animation-delay: .37s; } .i-bx.t2 .i-ball { opacity: .18; }
@keyframes iBx { 0% { opacity: 1; transform: translateX(-62vw); } 97% { opacity: 1; } 100% { opacity: 0; transform: translateX(0); } }
@keyframes iBy { 0% { transform: translateY(48vh) scale(1.9); animation-timing-function: cubic-bezier(.3, .6, .5, 1); } 55% { transform: translateY(-15vh) scale(1.1); animation-timing-function: cubic-bezier(.5, 0, .8, .6); } 100% { transform: translateY(0) scale(.7); } }
.i-ring { position: absolute; left: 50%; top: calc(var(--ct) + var(--c) / 2); width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 2px solid #E8C766; border-radius: 50%; opacity: 0; }
.full .i-ring { animation: iRing .9s 1.4s ease-out forwards; }
@keyframes iRing { 0% { opacity: 1; transform: scale(.2); } 100% { opacity: 0; transform: scale(9); } }
/* the crest bursts out of the landing, then catches the light */
.i-crest { position: absolute; left: 50%; top: var(--ct); width: var(--c); transform: translateX(-50%) scale(.2); opacity: 0; filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .55)); }
.full .i-crest { animation: iCrest .9s 1.36s cubic-bezier(.2, 1.4, .4, 1) forwards, iShine .8s 2.35s ease-in-out; }
.quick .i-crest, .reduced .i-crest { animation: iFade .35s forwards; transform: translateX(-50%); }
@keyframes iCrest { 0% { opacity: 0; transform: translateX(-50%) scale(.2) rotate(-14deg); } 60% { opacity: 1; transform: translateX(-50%) scale(1.08) rotate(2deg); } 100% { opacity: 1; transform: translateX(-50%) scale(1) rotate(0); } }
@keyframes iShine { 50% { filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .55)) brightness(1.7); } }
@keyframes iFade { to { opacity: 1; } }
/* NIGRO CUP rises letter by letter */
.i-title { position: absolute; left: 0; right: 0; top: var(--tt); text-align: center; font-family: var(--font-brand), Georgia, serif; font-size: var(--ts); font-weight: 700; letter-spacing: .06em; line-height: 1; perspective: 400px; text-shadow: 0 4px 24px rgba(0, 0, 0, .5); }
.i-title span { display: inline-block; opacity: 0; transform: translateY(40px) rotateX(70deg); }
.i-title span.g { color: #E8C766; }
.full .i-title span { animation: iLet .6s cubic-bezier(.2, 1.3, .4, 1) forwards; animation-delay: calc(1.6s + var(--i) * 65ms); }
.quick .i-title span, .reduced .i-title span { opacity: 1; transform: none; }
@keyframes iLet { to { opacity: 1; transform: none; } }
/* Red and Blue collide */
.i-vs { position: absolute; left: 10%; right: 10%; top: var(--vt); height: 6px; }
.i-red, .i-blue { position: absolute; top: 0; height: 100%; width: 50%; }
.i-red { left: 0; background: var(--red-team, #C23B32); border-radius: 3px 0 0 3px; transform: translateX(-130%); }
.i-blue { right: 0; background: var(--blue-team, #2F5DA8); border-radius: 0 3px 3px 0; transform: translateX(130%); }
.full .i-red, .full .i-blue { animation: iBar .55s 2.35s cubic-bezier(.7, 0, .3, 1) forwards; }
.quick .i-red, .quick .i-blue, .reduced .i-red, .reduced .i-blue { transform: none; }
@keyframes iBar { to { transform: none; } }
.i-flash { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%) scale(0); box-shadow: 0 0 30px 12px rgba(255, 255, 255, .9); }
.full .i-flash { animation: iFlash .75s 2.88s ease-out forwards; }
@keyframes iFlash { 0% { transform: translate(-50%, -50%) scale(0); opacity: 1; } 30% { transform: translate(-50%, -50%) scale(4); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(10); opacity: 0; } }
.i-tn { position: absolute; top: 12px; font: 700 11px/1 var(--font-body, Inter), system-ui, sans-serif; letter-spacing: .2em; opacity: 0; }
.i-tn.l { left: 0; color: #ff8f82; } .i-tn.r { right: 0; color: #9cc0ff; }
.full .i-tn { animation: iFade .45s 2.8s forwards; }
.quick .i-tn, .reduced .i-tn { opacity: 1; }
/* the live line */
.i-sub { position: absolute; left: 6%; right: 6%; top: calc(var(--vt) + 38px); text-align: center; font: 600 12px/1.4 var(--font-body, Inter), system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: rgba(246, 243, 236, .72); opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
.i-sub.ready { opacity: 1; transform: none; }
.i-score { margin-top: 10px; font: 700 clamp(20px, 6.4vw, 28px)/1.2 var(--font-brand), Georgia, serif; letter-spacing: 0; text-transform: none; color: #fff; }
.i-score i { font-style: normal; opacity: .55; }
.i-score .i-red { position: static; transform: none; background: none; color: #ff8f82; } .i-score .i-blue { position: static; transform: none; background: none; color: #9cc0ff; }
.i-foot { margin-top: 10px; font-size: max(var(--floor), calc(12 * var(--u))); letter-spacing: .14em; color: #E8C766; }
.i-skip { position: absolute; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom)); text-align: center; font: 500 11px var(--font-body, Inter), system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(246, 243, 236, .45); opacity: 0; }
.full .i-skip { animation: iFade .45s 1s forwards; }
@media (prefers-reduced-motion: reduce) { #intro *, #intro.out { animation-duration: .01s !important; animation-delay: 0s !important; } }
/* ---------- Sep 2026: course-proofing, the bets game, engagement, accounting ---------- */
/* news flash over an open sheet sits at the bottom and never steals the close button */
.newsflash.low { top: auto; bottom: calc(14px + env(safe-area-inset-bottom)); }
/* offline pill */
.net-pill { position: fixed; left: 50%; transform: translateX(-50%); top: calc(62px + var(--safe-t)); z-index: 260; background: var(--ink); color: #fff; font: 700 12px/1 var(--font-ui); padding: 8px 14px; border-radius: 999px; box-shadow: var(--shadow-2); white-space: nowrap; }
/* PIN step: small logo, no tagline, keypad in reach */
.login.pinstep { padding-top: calc(14px + var(--safe-t)); }
.login.pinstep .logo { width: min(30vw, 110px); margin-top: 0; }
.login.pinstep .tagline { display: none; }
.login.pinstep .who { margin-top: 10px; }
.login.pinstep .pin-boxes { margin: 12px 0 4px; }
.login.pinstep .keypad { margin-top: 8px; }
.login.pinstep .keypad button { height: 56px; }
.pin-err { min-height: 18px; margin-top: 4px; }
/* the scorecard: compact score, the rest of the course, what happened here today, live Double Down calls */
.sheet .scorebig { padding: 10px 12px; }
.sheet .scorebig .t .p { font-size: 42px; }
.course-strip { display: flex; gap: 6px; overflow-x: auto; margin: 8px -2px 0; padding: 2px 2px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.course-strip::-webkit-scrollbar { display: none; }
.cs-chip { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: max(var(--floor), calc(12 * var(--u))); padding: 6px 10px; min-height: 32px; border-radius: 999px; background: var(--paper); border: 1px solid var(--hair); color: var(--ink-2); white-space: nowrap; font-family: inherit; }
.cs-chip.day { background: var(--navy); color: #fff; border-color: var(--navy); }
.cs-chip .dot { width: 8px; height: 8px; }
.hole-report { display: inline-block; margin-top: 8px; font-size: max(var(--floor), calc(12.5 * var(--u))); color: var(--ink-2); background: var(--ivory-2); border-radius: 10px; padding: 6px 10px; }
.dd-call { margin-top: 10px; }
.dd-called { margin-top: 8px; font-size: var(--t-label); font-weight: 700; color: var(--gold-ink); text-transform: none; letter-spacing: 0; }
.hcell.bad { box-shadow: inset 0 0 0 2px var(--red); }
.queued-pill.bad { background: var(--red-soft); color: var(--red); }
.hp-more { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--hair-2); }
.winbtn small { font-size: max(var(--floor), calc(12 * var(--u))); }
.legend { font-size: max(var(--floor), calc(12 * var(--u))); }
/* side bets */
.bet-days { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.bet-days::-webkit-scrollbar { display: none; }
.bet-days .chip { flex: none; display: flex; flex-direction: column; align-items: center; line-height: 1.15; padding: 7px 12px; }
.bet-days .chip small { font-size: max(var(--floor), calc(12 * var(--u))); opacity: .7; font-weight: 600; }
.bet-budget { margin-top: 12px; }
.bb-line { margin-top: 6px; font-size: max(var(--floor), calc(14 * var(--u))); color: var(--ink-2); }
.bb-line b { font-family: var(--font-display); font-size: 30px; color: var(--green); }
.bet-budget .ci-bar { margin-top: 8px; }
.bet-lb { display: block; width: 100%; text-align: left; margin-top: 12px; font: inherit; color: inherit; }
.bet-lb-row { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: max(var(--floor), calc(13.5 * var(--u))); }
.bet-opt .lbl small { display: block; font-size: max(var(--floor), calc(12 * var(--u))); font-weight: 600; color: var(--ink-3); margin-top: 2px; }
.stake-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.chip.big { min-height: 52px; font-size: calc(18 * var(--u)); font-weight: 700; justify-content: center; }
.chip:disabled { opacity: .35; }
.stake-est { margin-top: 12px; }
/* Stat deltas (design v3): .delta-up and .delta-down. The old global .up / .down leaked into names (the Home hero's
   leading pair went green on green); they now color only money and bet numbers, and names set their own color. */
.delta-up, .num.up, .amt.up, .bet-lb-row .up, .stake-est .up, .bet-foot .up, .money-line .up { color: var(--ok); }
.delta-down, .num.down, .amt.down, .bet-lb-row .down, .bet-foot .down, .money-line .down { color: var(--lose-ink); }
.lb-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; align-items: end; }
.lb-step { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--paper); border: 1px solid var(--hair); border-radius: var(--radius-lg); padding: 12px 6px; font: inherit; color: inherit; text-align: center; min-width: 0; }
.lb-step b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-step.p1 { order: 2; padding-top: 20px; border-color: var(--gold); background: var(--gold-soft); }
.lb-step.p2 { order: 1; } .lb-step.p3 { order: 3; }
.lb-step .md { font-size: calc(22 * var(--u)); margin-top: -8px; }
.lb-place { width: 26px; text-align: center; font-family: var(--font-display); flex: none; }
.ci-list .ci-line.me { background: var(--green-soft); margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
/* Home: champions, while you were playing, meet your foursome */
.champ-card { text-align: center; background: var(--stage); color: #fff; padding: 22px 16px; border: 0; }
.champ-card .cc-trophy { font-size: 44px; line-height: 1; }
.champ-card .cc-name { font-size: 34px; color: var(--gold); margin-top: 6px; }
.cc-mvp { display: inline-flex; gap: 10px; align-items: center; margin-top: 14px; background: rgba(255,255,255,.08); border-radius: 14px; padding: 8px 14px 8px 8px; color: #fff; text-align: left; font: inherit; }
.cc-mvp .tiny { display: block; color: rgba(255,255,255,.65); }
.wyp .tl { margin-top: 6px; }
.foursome .fs-grid { display: grid; gap: 8px; margin-top: 10px; }
.fs-person { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: 14px; background: var(--ivory-2); text-align: left; width: 100%; font: inherit; color: inherit; border: 0; }
.fs-role { font-size: var(--t-label); font-weight: 700; letter-spacing: 0; text-transform: uppercase; color: var(--ink-3); }
.fs-name { font-weight: 700; font-size: max(var(--floor), calc(15 * var(--u))); margin-top: 1px; }
.fs-line { font-size: max(var(--floor), calc(12.5 * var(--u))); color: var(--ink-2); margin-top: 2px; }
.fs-ask { margin-top: 6px; font-size: var(--t-meta); color: var(--gold-ink); }
/* where the money goes */
.money-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; margin-top: 14px; background: rgba(255,255,255,.15); }
.money-bar span { display: block; height: 100%; }
.money-line { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--hair-2); }
.money-line:first-child { border-top: 0; }
.money-line .sw { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.money-line .amt { font-family: var(--font-display); font-weight: 700; font-size: calc(18 * var(--u)); }
.mline { display: grid; grid-template-columns: 1fr 78px 78px 36px; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hair-2); }
.mline [data-f=note], .mline .mrest { grid-column: 1 / -1; }
.mline .mrest { margin: 0; }
.mhead { display: grid; grid-template-columns: 1fr 78px 78px 36px; gap: 6px; margin-top: 8px; }
.oline { display: grid; grid-template-columns: 1fr 78px 1fr 36px; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hair-2); }
.oline [data-f=note] { grid-column: 1 / -1; }
.oline .mrest { grid-column: 1 / -1; margin: 0; }
.pline, .phead { display: grid; grid-template-columns: 46px 1fr 62px 62px 36px; gap: 6px; }
.pline { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hair-2); }
.pline [data-f=icon] { text-align: center; padding-left: 4px; padding-right: 4px; }
.pline [data-f=recipients], .pline [data-f=balls] { padding-left: 8px; padding-right: 4px; }
.pline [data-f=note] { grid-column: 1 / -1; }
.phead { margin-top: 8px; }
.attn .attn-row { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 10px 0; border-top: 1px solid var(--hair-2); font-size: max(var(--floor), calc(15 * var(--u))); }
.attn .attn-row:first-of-type { border-top: 0; }
.attn .attn-row .i { font-size: calc(18 * var(--u)); }
.attn.ok { background: var(--green-soft); }
.pair-warn { margin-top: 10px; background: #FFF6E0; border-radius: 12px; padding: 4px 12px; }
.pw-row { display: flex; gap: 8px; align-items: center; padding: 7px 0; font-size: max(var(--floor), calc(14 * var(--u))); }
.wyp-cards { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 2px 4px; -webkit-overflow-scrolling: touch; }
.wyp-card { flex: 0 0 78%; scroll-snap-align: start; background: var(--ivory-2, #F4F1EA); border-radius: 14px; padding: 12px; min-height: 110px; display: flex; flex-direction: column; gap: 6px; }
.wyp-card .ic { font-size: 26px; }
.wyp-card .tx { font-weight: 600; }
.wyp-card .ts { font-size: max(var(--floor), calc(12 * var(--u))); color: var(--ink-3); margin-top: auto; }
.wyp-card.big, .wyp-card.score { background: var(--navy, #13294B); color: #fff; }
.wyp-card.score .sc { font-family: var(--font-display); font-size: calc(22 * var(--u)); font-weight: 700; }
.wyp-card.photo { padding: 6px; }
.wyp-card.photo img { width: 100%; height: 150px; object-fit: cover; border-radius: 10px; }
.war-plan { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hair-2); }
.msen { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 8px; }
.msen .check { margin: 0; }
.mdel { border: 0; background: var(--ivory-2); border-radius: 10px; color: var(--ink-3); font-size: max(var(--floor), calc(14 * var(--u))); }
/* bigger type for the course (60-75 year olds in bright sun) */
.nav button span { font-size: max(var(--floor), calc(12 * var(--u))); }
.name-grid .truncate { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; hyphens: auto; line-height: 1.15; } /* long names wrap on small phones instead of being cut */
/* ---------- Sep 2026 (2): Awards Night reveal, walk-ups, handshake, war rooms, drops, scrapbook, postcard ---------- */
/* Awards Night: every phone flips the same envelope */
.cer { position: fixed; inset: 0; z-index: 400; background: radial-gradient(120% 90% at 50% 30%, #1d2c52, #0B1530 60%, #060b1a); color: #fff; display: flex; flex-direction: column; align-items: center; padding: calc(16px + var(--safe-t)) 18px calc(18px + env(safe-area-inset-bottom)); overflow-y: auto; animation: fadein .3s ease; }
.cer.out { animation: fadeout .3s ease forwards; }
@keyframes fadeout { to { opacity: 0; } }
.cer-top { width: 100%; max-width: 480px; display: flex; justify-content: space-between; align-items: center; font: 700 13px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.cer-x { color: rgba(255,255,255,.6); font-size: calc(18 * var(--u)); padding: 6px 10px; background: none; border: 0; }
.cer-card { position: relative; width: 100%; max-width: 420px; margin-top: 18px; border-radius: 22px; background: rgba(255,255,255,.07); border: 1px solid rgba(232,199,102,.45); box-shadow: 0 30px 80px rgba(0,0,0,.5); padding: 26px 20px 24px; text-align: center; overflow: hidden; min-height: 380px; }
.cer-card.is-shame { border-color: rgba(255,143,130,.4); }
.cer-card.k-cup, .cer-card.k-mvp { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 30px 90px rgba(201,162,39,.35); }
.cer-ic { font-size: 54px; line-height: 1; }
.cer-title { font-family: var(--font-brand); font-weight: 700; font-size: 28px; line-height: 1.1; margin-top: 10px; color: #fff; }
.cer-blurb { font-size: max(var(--floor), calc(13.5 * var(--u))); color: rgba(255,255,255,.7); margin-top: 6px; }
.cer-veil { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 50px; background: linear-gradient(transparent 38%, rgba(11,21,48,.96) 55%); transition: opacity .5s ease; }
.cer-count { font-family: var(--font-brand); font-size: 96px; font-weight: 700; color: var(--gold); line-height: 1; animation: cer-pulse .75s ease infinite; }
@keyframes cer-pulse { 0% { transform: scale(1.25); opacity: .4; } 40% { transform: scale(1); opacity: 1; } 100% { transform: scale(.95); opacity: .9; } }
.cer-env { font-size: max(var(--floor), calc(13 * var(--u))); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-top: 6px; }
.cer-win { margin-top: 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0; transform: rotateY(90deg) scale(.9); transition: opacity .45s ease .1s, transform .6s cubic-bezier(.2, 1.3, .4, 1) .1s; }
.cer-card.open .cer-veil { opacity: 0; pointer-events: none; }
.cer-card.open .cer-win { opacity: 1; transform: none; }
.cer-name { font-family: var(--font-brand); font-size: 30px; font-weight: 700; color: var(--gold); margin-top: 6px; }
.cer-nick { font-size: max(var(--floor), calc(14 * var(--u))); color: var(--on-stage-2); font-family: var(--font-story); font-weight: 600; }
.cer-val { font-size: max(var(--floor), calc(15 * var(--u))); font-weight: 700; color: #fff; }
.cer-run { font-size: max(var(--floor), calc(12 * var(--u))); color: rgba(255,255,255,.6); margin-top: 4px; }
.cer-team { font-family: var(--font-brand); font-size: 40px; font-weight: 700; }
.cer-team.red { color: #ff8f82; } .cer-team.blue { color: #9cc0ff; }
.cer-avs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; }
.cer-ctl { display: flex; gap: 10px; width: 100%; max-width: 420px; margin-top: 18px; }
/* Back on the dark stage: a translucent button with a light outline (the v2 ghost button is white, which left white
   text on a white box). */
.cer-ctl .btn.ghost { color: #fff; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); border-color: transparent; }
.cer-ctl .btn.ghost:disabled { opacity: .45; }
.cer-next, .cer-wait { font-size: max(var(--floor), calc(12.5 * var(--u))); color: rgba(255,255,255,.6); margin-top: 10px; text-align: center; }
.cer-end { color: rgba(255,255,255,.5); margin-top: 10px; }
.cer-admin { margin-bottom: 4px; border: 1px solid rgba(201,162,39,.45); background: var(--gold-soft); }
.sealed-card { text-align: center; padding: 26px 18px; }
.plaque-row .input { font-size: max(var(--floor), calc(15 * var(--u))); }
/* first-tee walk-ups */
.walkup { margin-top: 10px; background: var(--navy); color: #fff; border-radius: var(--radius-lg); padding: 12px 14px; }
.walkup .eyebrow.gold { color: var(--gold); }
.walkup .tiny.faint { color: rgba(255,255,255,.6); }
.walk-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
.walk-chip { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); color: #fff; font: 700 14px var(--font-ui); min-height: 48px; text-align: left; }
.walk-chip span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.walk-chip b { font-size: calc(18 * var(--u)); }
.walk-chip.on { background: var(--gold); color: #1B1300; border-color: var(--gold); }
.walk-chip:disabled { opacity: .4; }
/* shake hands on 18 */
.handshake { margin-top: 12px; background: var(--green-soft); border: 1px solid rgba(15,74,46,.25); border-radius: var(--radius-lg); padding: 14px; text-align: center; }
.handshake .hs-t { font-family: var(--font-display); font-weight: 700; font-size: calc(20 * var(--u)); color: var(--green); margin-bottom: 4px; }
.handshake .btn { margin-top: 10px; }
.handshake .textbtn { margin-top: 8px; }
.lost-log { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin-top: 8px; }
/* war rooms */
.war-pin { margin: 8px 0 4px; padding: 10px 12px; background: var(--gold-soft); border: 1px solid rgba(201,162,39,.45); border-radius: 12px; font-size: max(var(--floor), calc(14 * var(--u))); }
.pinbtn { font-size: max(var(--floor), calc(12 * var(--u))); min-height: 0; padding: 2px 6px; }
/* countdown drops and the postcard card */
.drop { border: 1px solid var(--gold); background: var(--surface-1); }
.drop-t { font-weight: 700; font-size: calc(16 * var(--u)); line-height: 1.25; }
.postcard-card { border: 1px solid rgba(201,162,39,.45); }
/* the scrapbook */
.vault-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.vault-photos button { aspect-ratio: 1; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--ivory-2); }
.vault-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
details.recap summary { cursor: pointer; }
/* the postcard */
.postcard { margin-top: 12px; border-radius: 18px; overflow: hidden; background: #FBF7EE; box-shadow: var(--shadow-2); border: 1px solid var(--hair); }
.pc-front { position: relative; height: 220px; background: var(--navy); }
.pc-front img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-front img.pc-logo { object-fit: contain; padding: 24px; }
.pc-greet { position: absolute; left: 14px; bottom: 12px; color: #fff; font-size: max(var(--floor), calc(13 * var(--u))); letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.pc-greet b { font-family: var(--font-brand); font-size: 28px; letter-spacing: 0; text-transform: none; }
.pc-back { position: relative; padding: 18px 16px 18px; }
.pc-stamp { position: absolute; right: 14px; top: -24px; width: 58px; height: 64px; background: #fff; border: 2px dashed var(--gold); border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(24 * var(--u)); transform: rotate(4deg); box-shadow: var(--shadow-1); }
.pc-stamp small { font-size: max(var(--floor), calc(12 * var(--u))); font-weight: 700; color: var(--gold-ink); }
.pc-p { font-size: calc(17 * var(--u)); line-height: 1.5; margin-top: 8px; padding-right: 50px; }
.pc-moment { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--hair); font-size: max(var(--floor), calc(14.5 * var(--u))); }
.pc-next { margin-top: 16px; padding: 10px 12px; border-radius: 12px; background: var(--navy); color: #fff; font-size: max(var(--floor), calc(14 * var(--u))); }
/* the organizer's first-tee console */
.wu-hint .small { color: rgba(255,255,255,.85); }
.wu-group { margin-top: 12px; transition: box-shadow .2s ease; }
.wu-group.next { border: 2px solid var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.wu-group.gone { opacity: .6; }
.wu-names { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 10px; } /* one golfer per row: full names, big targets */
.wu-name { position: relative; display: flex; align-items: center; gap: 10px; min-height: 72px; padding: 8px 12px 8px 12px; border-radius: 16px; background: var(--paper); border: 1px solid var(--hair); font: 700 16px var(--font-ui); color: var(--ink); text-align: left; overflow: hidden; }
.wu-name::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--hair); }
.wu-name.red::before { background: var(--red-team); } .wu-name.blue::before { background: var(--blue-team); }
.wu-name .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wu-name .st { font-size: calc(24 * var(--u)); width: 44px; height: 44px; border-radius: 50%; background: var(--ivory-2); display: grid; place-items: center; flex: none; }
.wu-name.on .st { background: rgba(0,0,0,.12); }
.wu-name.on { background: var(--gold); border-color: var(--gold); color: #1B1300; }
.wu-name.done { background: var(--green-soft); }
.wu-name:disabled { opacity: .4; }

/* ==========================================================================
   DESIGN SYSTEM v2 (Sep 2026) — calmer and easier to read at a glance.
   · Inter for everything; the serif (Fraunces) only for page titles and hero numbers.
   · Sentence case everywhere: no tracked capitals.
   · Text sizes: 13 (meta) · 15 (supporting) · 17 (body, row titles) · 20 (section heads)
     · 30 (titles, stat tiles) · 60 (hero score).
   · Flat white cards with one hairline. Tinted cards only for the feature card (green/navy)
     and the Commissioner's notice (gold tint).
   ========================================================================== */
body { letter-spacing: 0; }

/* labels: sentence case, no tracking */
.eyebrow, .table th, .scorecard thead th, .statbar .l, .countdown .l, .score-line .team .name, .bigbtn .t, .tt,
.field > span, .chat-day, .live-row .status span, .newsflash .k, .hlside .nm, .fs-role, .youtag, .pill, .cap, .pcard .cap,
.sched-item .time small, .caddy-hole .par, .bet-days .chip small, .paid-badge, .wordmark {
  text-transform: none !important; letter-spacing: 0 !important;
}
.eyebrow { font-size: max(var(--floor), calc(13 * var(--u))); font-weight: 600; color: var(--ink-3); }
.eyebrow.gold { color: var(--gold-ink); }
.eyebrow.green { color: var(--green); }
.card.navy .eyebrow, .card.green .eyebrow, .card.feature .eyebrow { color: rgba(255,255,255,.72) !important; }
.table th, .scorecard thead th, .statbar .l, .countdown .l { font-size: max(var(--floor), calc(13 * var(--u))); font-weight: 600; color: var(--ink-3); }
.field > span { font-size: max(var(--floor), calc(14 * var(--u))); font-weight: 600; color: var(--ink-2); }
.bigbtn .t { font-weight: 600; }

/* headings: page titles keep the serif (plain, classic); section heads move to the sans */
.display, .h1, .score-line .team .pts, .wordmark { font-variation-settings: "opsz" 144; }
.h2 { font-family: var(--font-ui); font-size: calc(20 * var(--u)); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.h3 { font-size: calc(17 * var(--u)); font-weight: 600; }
.header .title { font-family: var(--font-ui); font-weight: 700; font-size: calc(19 * var(--u)); letter-spacing: -0.01em; }
.small { font-size: max(var(--floor), calc(15 * var(--u))); }
.tiny { font-size: max(var(--floor), calc(13 * var(--u))); }

/* numbers: Inter with even-width digits; the serif stays only on hero numbers */
.lb-row .vl, .table .pts, .money-line .amt, .h2h-row .rec, .pcard .rec, .hcp-tile b, .live-row .status b, .side .res,
.race-pts, .sched-item .time, .day-head .dn, .bold-chip b, .num {
  font-family: var(--font-ui) !important; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0; font-variation-settings: normal;
}
.statbar .v, .funstat .v, .countdown .v, .bm-net, .ci-num b {
  font-family: var(--font-ui) !important; font-weight: 700; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.01em; font-variation-settings: normal;
}
.money-line .amt { font-size: calc(17 * var(--u)); }

/* cards: one calm style */
.card { box-shadow: none; border: 1px solid var(--line); }
.card.predict, .card.shots, .vote-card, .card.court, .court-card, .unlock-card, .card.hof, .nudge-card, .card.checkin,
.card.survey, .card.dinner, .bet-money, .bet.settled, .bday-card, .card.wyp, .card.drop, .card.attn, .card.war-reveal {
  background: var(--surface) !important; border: 1px solid var(--line) !important; box-shadow: none !important;
}
.card.gold { background: #F7EFD6; border: 0; }
.card.flat { background: var(--surface); }

/* pills: small, sentence case */
.pill { font-size: max(var(--floor), calc(13 * var(--u))); font-weight: 600; }
.pill.gold { color: var(--gold-ink); }
.youtag, .cap, .pcard .cap { font-size: max(var(--floor), calc(12 * var(--u))); font-weight: 700; }

/* list rows: no tinted icon tiles */
.list-item .icon { background: none !important; }
.list-item .small.muted, .list-item .muted { color: var(--ink-3); }

/* supporting text: one calm grey */
.faint { color: var(--ink-3); }

/* ---- v2 components ---- */
/* buttons: primary (green), secondary (white, green label), text. Gold only for the Double Down call. */
.btn { height: 48px; border-radius: 12px; font-weight: 600; font-size: calc(16 * var(--u)); letter-spacing: 0; }
.btn.sm { height: 38px; border-radius: 10px; font-size: max(var(--floor), calc(14 * var(--u))); padding: 0 14px; }
.btn.big { height: 56px; border-radius: 14px; font-size: calc(17 * var(--u)); }
.btn.gold, .btn.navy { background: var(--green); color: #fff; }
.btn.gold.dd-call { background: var(--gold); color: #1E1A0A; }
.btn.soft, .btn.ghost { background: var(--surface); color: var(--green); box-shadow: inset 0 0 0 1px var(--line); }
.btn.danger { background: #FBE9E7; color: #B42318; }

/* bottom nav: solid, quiet labels */
.nav { background: var(--surface) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-top: 1px solid var(--line); box-shadow: none; }
.nav button { font-weight: 500; letter-spacing: 0; }
.nav button.on { font-weight: 600; }

/* header */
.header .brand .year { color: var(--gold-ink); }

/* organizer big buttons: white tiles, sentence case */
.bigbtn, .bigbtn.green, .bigbtn.gold, .bigbtn.navy, .bigbtn.paper { background: var(--surface); color: var(--ink); border: 1px solid var(--line); min-height: 92px; }
.bigbtn.red { background: #FBE9E7; color: #B42318; border: 1px solid #F3C7C1; }
.bigbtn .i { font-size: calc(22 * var(--u)); }
.bigbtn .t { font-size: max(var(--floor), calc(15 * var(--u))); font-weight: 600; letter-spacing: 0; line-height: 1.25; }

/* announcement banner: the Commissioner's notice, calm gold tint */
.banner { background: #F7EFD6; border: 0; }
.banner .t { font-weight: 700; font-size: calc(16 * var(--u)); color: var(--ink); text-transform: none; letter-spacing: 0; }
.banner .b { font-size: max(var(--floor), calc(15 * var(--u))); color: var(--ink-2); }
.banner .when { font-size: max(var(--floor), calc(13 * var(--u))); color: var(--ink-3); font-weight: 500; }

/* home scoreboard */
.score-line .team .name { font-size: max(var(--floor), calc(15 * var(--u))); font-weight: 600; color: rgba(255,255,255,.85); }
.score-line .team .pts { font-size: 60px; letter-spacing: -0.03em; }

/* lists: plain line icons, no tinted tiles */
.list-item { padding: 14px 16px; }
.list-item .icon { width: 28px; height: 28px; border-radius: 0; background: none !important; color: var(--ink-3); font-size: calc(18 * var(--u)); }
.list-item .icon svg { width: 22px; height: 22px; }
.section-head .link { font-size: max(var(--floor), calc(14 * var(--u))); }
.card.elev { box-shadow: none; border-color: var(--line); }
/* line icons from icon() carry no size: default them to the text size (any class rule overrides this) */
:where(main, .sheet, .card, .list-item, .bigbtn) svg:not([width]) { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.2em; }
/* sentence case everywhere except the wordmark, the team tag, the intro film and the ceremony stage */
.field > span, .score-line .team .name, .live-row .status span, .banner .t, .round-tab .rn, .table th, .statbar .l, .chat-day, .bigbtn .t, .countdown .l, .scorebig .t .n, .scorebig .mid, .hole-panel .worth.fire, .winbtn small, .newsflash .k, .hlside .nm, .lostrow .lb, .scorecard thead th, .scorecard tbody th, .award.covered .a-veil, .hcp-tile small, .ci-when, .caddy-sec .lbl, .caddy-quip span, .caddy-hole .par, .fs-role, .pc-greet { text-transform: none; letter-spacing: 0; }
/* utility-page heroes (money, prizes, titles) use the UI face; the serif is for the brand and the big moments */
.hero-num { text-wrap: balance; font-family: var(--font-ui); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }

/* ---------- organizer analytics (Engagement, Build & testing) and texts ---------- */
.an .section { margin-top: 18px; }
.an-card { padding: 14px 16px; }
.an-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.an-tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 720px) { .an-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } .an-tiles.three { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.an-tile { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--radius); padding: 10px 12px; min-width: 0; }
.an-card .an-tile { background: var(--surface-2); border: 0; }
.an-tile .v { font-size: calc(22 * var(--u)); font-weight: 700; line-height: 1.15; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-tile .l { font-size: max(var(--floor), calc(13 * var(--u))); font-weight: 600; color: var(--ink-2); margin-top: 2px; }
.an-tile .s { font-size: max(var(--floor), calc(12 * var(--u))); color: var(--ink-3); }
.an-rows { display: grid; gap: 10px; }
.an-row { display: grid; grid-template-columns: minmax(0, 1fr) 34% auto; align-items: center; gap: 10px; }
.an-row .t { font-size: max(var(--floor), calc(14 * var(--u))); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-row .s { font-size: max(var(--floor), calc(12 * var(--u))); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-row .b { height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.an-row .b i { display: block; height: 100%; background: var(--green); border-radius: 99px; }
.an-row.bad .b i { background: var(--red); }
.an-row .v { font-size: max(var(--floor), calc(14 * var(--u))); font-weight: 700; min-width: 34px; text-align: right; }
.an-cols { display: flex; align-items: flex-end; gap: 3px; padding-bottom: 18px; position: relative; }
.an-cols .c { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; min-width: 0; }
.an-cols .c i { display: block; width: 100%; max-width: 34px; background: var(--green); border-radius: 4px 4px 1px 1px; }
.an-cols .c b { font-size: 11px; font-weight: 600; color: var(--ink-3); margin-bottom: 2px; }
.an-cols .c span { position: absolute; bottom: -18px; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.an-heat { display: grid; gap: 3px; overflow-x: auto; }
.an-heat .hr { display: grid; grid-template-columns: 62px repeat(24, minmax(9px, 1fr)); gap: 2px; align-items: center; }
.an-heat .hr > span { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.an-heat .hr i { display: block; height: 16px; border-radius: 3px; background: rgba(15, 74, 46, var(--a)); outline: 1px solid var(--hair-2); outline-offset: -1px; }
.an-list { display: grid; }
.an-li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--hair-2); text-align: left; width: 100%; font-size: max(var(--floor), calc(14 * var(--u))); }
.an-li:last-child { border-bottom: 0; }
.an-li.col { flex-direction: column; align-items: stretch; gap: 2px; }
.an-li.bad, .an-led.bad { color: var(--red); }
.an-t { min-width: 92px; }
.an-now .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); flex: none; }
.an-names { display: flex; flex-wrap: wrap; gap: 6px; }
.an-table { overflow-x: auto; margin: 0 -16px; }
.an-table table { width: 100%; border-collapse: collapse; font-size: max(var(--floor), calc(14 * var(--u))); }
.an-table th { text-align: left; font-size: max(var(--floor), calc(12 * var(--u))); font-weight: 700; color: var(--ink-3); padding: 6px 8px; border-bottom: 1px solid var(--hair); white-space: nowrap; cursor: pointer; }
.an-table th.on { color: var(--green); }
.an-table td { padding: 9px 8px; border-bottom: 1px solid var(--hair-2); vertical-align: top; }
.an-table th:first-child, .an-table td:first-child { padding-left: 16px; }
.an-table tbody tr { cursor: pointer; }
.an-table td.num { text-align: right; }
.an-flags { white-space: nowrap; }
.an-flags .pill { margin-right: 4px; }
.an-status { border-left: 4px solid var(--green); }
.an-status.warn { border-left-color: var(--gold); }
.an-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--green); margin-top: 5px; flex: none; }
.an-status.warn .an-dot { background: var(--gold); }
.an-led { display: flex; gap: 10px; align-items: flex-start; text-align: left; width: 100%; padding: 10px 0; border-bottom: 1px solid var(--hair-2); }
.an-led:last-child { border-bottom: 0; }
.okm { font-weight: 700; color: var(--green); width: 16px; flex: none; }
.bad .okm, .an-li.bad .okm { color: var(--red); }
.an-log { background: #10161F; color: #DDE6EE; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: 12px; border-radius: 10px; overflow: auto; max-height: 60vh; white-space: pre-wrap; word-break: break-word; margin: 8px 0 0; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: max(var(--floor), calc(12 * var(--u))); word-break: break-all; }
.pill.bad { background: var(--red-soft); color: var(--red); }
.text-card .text-body { white-space: pre-wrap; font-size: max(var(--floor), calc(14 * var(--u))); line-height: 1.45; margin-top: 8px; color: var(--ink-2); }
.text-card.sent { opacity: .6; }

/* ==========================================================================
   DESIGN SYSTEM v3 · COMPONENT KIT (lane SYSTEM, Sep 12 2026). The components documented at the top of this file
   and the global cleanups from the design review. It is the last block of the system section, so it wins over the
   older layers above it. Lanes: use these components; to change one, ask for a kit change rather than restyling it
   in your own block.
   ========================================================================== */
/* team hooks: an element carrying a team color key exposes its fill, the text on that fill, its text color and tint */
.red { --team: var(--red); --team-on: var(--red-on); --team-ink: var(--red-ink); --team-tint: var(--red-tint); }
.blue { --team: var(--blue); --team-on: var(--blue-on); --team-ink: var(--blue-ink); --team-tint: var(--blue-tint); }
.black { --team: var(--stage); --team-on: #FFFFFF; --team-ink: var(--ink-1); --team-tint: var(--surface-2); }
.gold { --team: var(--gold); --team-on: #1E1A0A; --team-ink: var(--gold-ink); --team-tint: var(--gold-tint); }
.green { --team: var(--brand); --team-on: var(--on-brand); --team-ink: var(--brand-ink); --team-tint: var(--brand-tint); }
.white { --team: #FFFFFF; --team-on: #101A30; --team-ink: var(--ink-1); --team-tint: var(--surface-2); }

/* type roles on the older classes */
.h1 { font-family: var(--font-ui); font-size: var(--t-title); font-weight: 700; line-height: var(--lh-title); letter-spacing: -0.015em; }
.h2 { font-size: var(--t-head); }
.h3 { font-size: var(--t-body); font-weight: 600; }
.small { font-size: var(--t-meta); } .tiny { font-size: var(--t-micro); }
.eyebrow { font-size: var(--t-label); font-weight: 700; color: var(--ink-3); letter-spacing: .10em; text-transform: uppercase; }
.eyebrow.green { color: var(--brand-ink); }
.display { font-family: var(--font-ui); font-weight: 700; }
.muted { color: var(--ink-2); } .faint { color: var(--ink-3); }
.link, .textbtn { color: var(--brand-ink); }
.textbtn { min-height: var(--tap); }
.em { font-style: normal; }
/* the minimum sizes: 14px labels and 15px supporting text; 13px is for timestamps only */
:is(.match .mhead, .live-row .status span, .round-tab .rd, .sched-item .loc, .sched-item .time small, .pcard .meta, .legend, .winbtn small, .lb-row .vl small, .bold-chip, .cs-chip, .mode-pill, .bet-days .chip small, .award .a-blurb, .award .a-runner, .poll .by, .ci-row .lbl, .ci-vs, .race-pts small, .hlbtn, .hlwho button, .lostrow button.p, .ci-who .st, .an-tile .s, .an-row .s) { font-size: var(--t-label); }
:is(.hero-score .foot, .match .mfoot, .scorecard, .fs-line, .bet-foot, .bet-stake, .poll .pf, .sched-item .d, .tl-item .tx, .post .ptext, .hole-report, .caddy-hole .hl, .opt .pct, .banner .b, .hint) { font-size: var(--t-meta); }
:is(.tl-item .ts, .post .phead .ts, .msg .meta, .chat-day, .banner .when) { font-size: var(--t-micro); }
/* numbers are ink (points and wins are not green); the Hall's years are gold ink */
:is(.table .pts, .team-head .pts, .pcard .rec, .lb-row .vl, .race-pts, .statbar .v, .ci-num b, .dn-count b, .bb-line b, .caddy-hole b, .hcp-total b, .award .a-val, .scorecard tr.par td, .pin-boxes div, .tee-big, .bold-chip b, .sched-item .time, .h2h-row .rec.w, .funstat .v, .award.shame .a-val, .motion .m-name) { color: var(--ink-1); }
.award.cup .a-title, .award.cup .a-val { color: var(--on-stage-2); }
.cup-row .yr, .hof-year .display { color: var(--gold-ink); }
.lb.shame .lb-row .vl, .h2h-row .rec.l { color: var(--ink-2); }
.lb-row .rk.m2, .lb-row .rk.m3 { color: var(--ink-2); }
/* gold as text is gold ink (it was a literal); errors are --err, never a team's red */
:is(.as-chip, .mention.me, .funstat .l, .ddbtn.on, .hlbtn.on.eagle, .xchip.on, .youtag, .solo-note.one, .queued-pill, .shot .vote.on, .xchip.nominate, .vote-line.grace, .motion .m-appeal, .fs-ask, .eyebrow.gold, .banner .t) { color: var(--gold-ink); }
.banner .t { color: var(--ink-1); }
:is(.error, .chat-closed, .sv-l .req, .sched-preview .sp-warn, .queued-pill.bad, .an-li.bad, .an-led.bad, .bad .okm, .pill.red, .pill.bad) { color: var(--err); }
.chat-closed, .pill.red, .pill.bad, .queued-pill.bad { background: var(--err-tint); }
.hcell.bad { box-shadow: inset 0 0 0 2px var(--err); } .pin-boxes div.err { border-color: var(--err); } .an-row.bad .b i { background: var(--err); }
.hole-panel .worth.fire { color: var(--gold-ink); letter-spacing: 0; text-transform: none; }
.bm-net.up, .led-row.up b { color: var(--ok); } .bm-net.down, .led-row.down b { color: var(--lose-ink); }
/* brand fills keep white text in both themes (brand is the fill; brand-ink is the text) */
.btn, .coach-n, .avatar, .card.green, .toggle.on, .chat-bar .send, .toast.ok, .winbtn.green, .tt.green, .hcp-tile:not(.none), .paid-badge.full, .caddy-quip { background: var(--brand); }
.msg.mine .bubble, .dn-chip.in, .hcell.green { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.avatar.red, .avatar.blue { background: var(--team); } .avatar.black { background: var(--stage); } .avatar.gold { background: var(--gold); }
.msg.mine .mention { color: var(--on-brand); }
/* light literals that became tokens */
.card.gold, .banner, .pair-warn { background: var(--gold-tint); }
.match .mfoot, .comments { background: var(--surface-2); }
.postcard, .pc-stamp { background: var(--surface-1); }
.bigbtn.red, .danger-zone { background: var(--err-tint); color: var(--err); border: 1px solid var(--err); }
.hlbtn.on.ace { background: var(--blue-tint); border-color: var(--blue); color: var(--blue-ink); }
.hlbtn.on.albatross { background: var(--warn-tint); border-color: var(--warn); color: var(--warn); }
.shot.tragedy .vote.on { background: var(--surface-3); box-shadow: inset 0 0 0 1.5px var(--ink-2); color: var(--ink-1); }
.sv-star { color: var(--line-strong); }
.net-pill { background: var(--stage); color: #fff; font-size: var(--t-label); }

/* ---- layout and page chrome ---- */
.screen { overflow-x: clip; }
.section { margin-top: var(--s6); }
.section-head { align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.section-head .link { display: inline-flex; align-items: center; min-height: var(--tap); font-size: var(--t-label); font-weight: 600; color: var(--brand-ink); }
.composer .cfoot { flex-wrap: wrap; row-gap: var(--s2); }
.header .hd-lead { display: flex; align-items: center; gap: var(--s1); min-width: 0; }
.header .title { font-family: var(--font-ui); font-size: calc(22 * var(--u)); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.header .title .year { color: var(--ink-2); font-weight: 800; }
/* Direction C: the Home lockup, NIGRO CUP | 2026 in Inter 800 caps with an amber hairline. The year is ink, never red. */
.header .title.lockup { font-size: calc(19 * var(--u)); line-height: 1; letter-spacing: .02em; text-transform: uppercase; }
.header .title.lockup .year::before { content: ""; display: inline-block; width: 1px; height: 14px; margin: 0 9px 0 7px; background: var(--gold); vertical-align: 0; }
.header .avatar-btn:not(.shared) .avatar { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4.5px var(--team, var(--line-strong)); }
.section-head .h2 { font-weight: 800; letter-spacing: -0.02em; }
.header .hd-center { flex: 1; text-align: center; }
.header .back { min-height: var(--tap); color: var(--brand-ink); }
.iconbtn { width: var(--tap); height: var(--tap); color: var(--brand-ink); }
.home-mark { margin-left: -8px; }
.brand-mark { width: 28px; height: 32px; display: block; }
.avatar-btn { min-width: var(--tap); min-height: var(--tap); display: inline-grid; place-items: center; }
.avatar-btn.shared { box-shadow: none; }
.avatar-btn.shared .avatar { outline: 2px solid var(--gold-ink); outline-offset: 2px; }
/* the tab bar (Direction C): a floating dark pill with five tabs, a label under every icon, and a lit pill behind the
   active one (a second cue besides color). The unread badge is amber, never red. */
.nav { left: 12px; right: 12px; bottom: calc(10px + var(--safe-b)); height: var(--nav-h); padding: 0 6px; border: 0; border-radius: 32px; background: var(--nav-float-bg) !important; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 14px 30px -10px rgba(0,0,0,.55); }
.nav button { color: var(--nav-float-ink); font-weight: 600; isolation: isolate; }
.nav .nav-inner button span { font-size: var(--t-label); }
.nav button.on { color: var(--nav-float-on); font-weight: 700; }
.nav button.on svg { color: var(--nav-float-accent); }
.nav button.on::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 4px; right: 4px; z-index: -1; border-radius: 26px; background: rgba(255,255,255,.14); }
.nav button .badge { top: 5px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--gold); color: #111113; font-size: 11px; font-weight: 800; }
/* desktop, 1024px and up: the tab bar becomes a left rail beside one centered content column (not floating) */
@media (min-width: 1024px) {
  #app:has(> .nav) { display: grid; grid-template-columns: 208px minmax(0, 720px); justify-content: center; column-gap: var(--s6); align-items: start; }
  #app:has(> .nav) > .screen { grid-column: 2; grid-row: 1; max-width: none; padding-bottom: var(--s7); }
  #app:has(> .nav) > .nav { grid-column: 1; grid-row: 1; position: sticky; top: 0; left: auto; right: auto; bottom: auto; height: 100dvh; padding: calc(var(--safe-t) + 72px) 0 var(--s5); border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent !important; box-shadow: none; display: block; }
  #app:has(> .nav) .nav-inner { flex-direction: column; gap: var(--s1); max-width: none; padding-right: var(--s4); }
  #app:has(> .nav) .nav button { flex: none; flex-direction: row; justify-content: flex-start; gap: var(--s3); height: var(--tap-course); padding: 0 var(--s3); border-radius: var(--r2); color: var(--ink-2); }
  #app:has(> .nav) .nav button span { font-size: var(--t-body); }
  #app:has(> .nav) .nav button.on { background: var(--brand-tint); color: var(--brand-ink); }
  #app:has(> .nav) .nav button.on svg { color: var(--brand-ink); }
  #app:has(> .nav) .nav button.on::before { display: none; }
  #app:has(> .nav) .nav button .badge { position: static; margin-left: auto; }
  .chat-bar { bottom: 0; }
  .toast-wrap { bottom: var(--s5); }
}

/* ---- card and list ---- */
.card { background: var(--surface-1); border: 1px solid transparent; border-radius: var(--r3); box-shadow: var(--e1); }
.card.navy { background: var(--stage); color: #fff; border: 0; }
.card.navy .eyebrow, .card.green .eyebrow, .card.feature .eyebrow { color: var(--on-stage-2) !important; }
.list { background: var(--surface-1); border: 1px solid transparent; border-radius: var(--r3); overflow: hidden; box-shadow: var(--e1); }
.list-item, .list > .row { min-height: 56px; border-top: 1px solid var(--line); }
.list > .row { width: 100%; padding: 10px var(--s4); text-align: left; background: transparent; }
.list-item.two, .list > .row.two { min-height: 64px; }
.list > :first-child { border-top: 0; }
.list > .row:active { background: var(--surface-2); }
.list-item .chev, .list > .row .chev { color: var(--ink-3); margin-left: auto; flex: none; }

/* ---- buttons: md 48 (default), lg 56, sm 40 (organizer tables), giant 72 ---- */
.btn { height: var(--tap-course); min-height: var(--tap-course); border-radius: var(--r-pill); font-weight: 800; font-size: calc(16 * var(--u)); color: var(--on-brand); letter-spacing: 0; box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--brand) 90%, transparent); }
.btn.lg, .btn.big { height: var(--tap-primary); min-height: var(--tap-primary); font-size: var(--t-body); border-radius: var(--r-pill); }
.btn.giant, .btn.big.giant { height: var(--tap-score); min-height: var(--tap-score); font-size: var(--t-result); border-radius: var(--r-pill); }
.btn.sm, .btn.xs { height: 40px; min-height: 40px; padding: 0 14px; font-size: var(--t-label); border-radius: 10px; box-shadow: none; }
.btn.icon { width: var(--tap); height: var(--tap); min-height: var(--tap); padding: 0; border-radius: 50%; box-shadow: none; }
.btn.gold, .btn.navy { background: var(--brand); color: var(--on-brand); }
.btn.gold.dd-call { background: var(--gold); color: #111113; box-shadow: none; }
.btn.soft, .btn.ghost { background: var(--surface-1); color: var(--brand-ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.btn.quiet { background: transparent; color: var(--brand-ink); box-shadow: none; min-height: var(--tap); height: auto; padding: 0 var(--s2); }
.btn.danger { background: var(--err-tint); color: var(--err); box-shadow: none; }
.btn.ghost-light { background: rgba(255,255,255,.14); color: #fff; box-shadow: none; }
.btn:disabled { box-shadow: none; }

/* ---- chips, segmented, pills, forms ---- */
.chip { height: 40px; min-height: 40px; padding: 0 14px; border-radius: var(--r-pill); background: var(--surface-1); border: 1px solid var(--line-strong); font-weight: 600; font-size: var(--t-label); color: var(--ink-2); }
.chip.on { background: var(--ink-1); color: var(--bg); border-color: var(--ink-1); }
.seg, .segmented { display: flex; background: var(--surface-3); padding: 4px; border-radius: var(--r-pill); gap: 2px; }
.seg button, .segmented button, .section-head .segmented button { flex: 1; height: var(--tap); min-height: var(--tap); border-radius: var(--r-pill); font-weight: 600; font-size: var(--t-label); color: var(--ink-2); }
.check { min-height: var(--tap); }
.seg button.on, .segmented button.on { background: var(--ink-1); color: var(--bg); font-weight: 700; box-shadow: none; }
.seg button small, .segmented button small { display: block; font-size: var(--t-label); font-weight: 500; line-height: 1.15; color: var(--ink-2); }
.seg button.on small, .segmented button.on small { color: color-mix(in srgb, var(--bg) 80%, transparent); }
.round-tab { border-color: var(--line-strong); }
.round-tab.on, .hlwho button.on { background: var(--ink-1); color: var(--bg); border-color: var(--ink-1); }
.round-tab .st.live { background: var(--live-dot); } .round-tab.on .st.live { background: var(--gold); } .round-tab .st.final { background: var(--brand-ink); }
.pill { font-size: var(--t-label); font-weight: 600; letter-spacing: 0; }
.pill.live { background: var(--live-bg); color: var(--live-ink); font-weight: 800; }
.pill.live::before { background: var(--live-dot); animation: kitPulse 1.4s infinite; }
.pill.gold { background: var(--gold-tint); color: var(--gold-ink); }
.pill.final { background: var(--brand-tint); color: var(--brand-ink); }
.pill.navy { background: var(--stage); color: #fff; }
.pill.outline { box-shadow: inset 0 0 0 1px var(--line-strong); }
@keyframes kitPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.input, .select, .textarea { border: 1.5px solid var(--line-strong); background-color: var(--surface-1); border-radius: var(--r2); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand-ink); box-shadow: 0 0 0 3px var(--brand-tint); }
.field > span { font-size: var(--t-label); font-weight: 600; color: var(--ink-2); }
.check input { width: 24px; height: 24px; accent-color: var(--brand); }
.toggle { background: var(--line-strong); }
:is(.opt, .bet-opt, .name-btn, .keypad button, .pin-boxes div, .xchip, .ddbtn, .hlbtn, .hnote-in, .hnote-cam, .stake-chips .chip) { border-color: var(--line-strong); }

/* ---- sheet: 44px close, a sticky 72px footer for the primary action, toasts above it ---- */
.sheet-backdrop { background: rgba(11,21,48,.45); }
.sheet { max-height: calc(100dvh - 72px - var(--safe-t)); background: var(--bg); box-shadow: var(--e3); }
.sheet .grab { background: var(--line-strong); }
.sheet .sh .h2 { font-size: var(--t-head); }
.sheet .close { width: var(--tap); height: var(--tap); min-width: var(--tap); flex: none; background: var(--surface-2); color: var(--ink-2); }
.sheet:has(> .actions:last-child, > form > .actions:last-child, > .sheet-foot:last-child) { padding-bottom: 0; }
.sheet > .actions:last-child, .sheet > form > .actions:last-child, .sheet > .sheet-foot { position: sticky; bottom: 0; z-index: 2; display: flex; gap: var(--s3); align-items: center; min-height: 72px; margin: var(--s5) -18px 0; padding: var(--s3) 18px calc(var(--s3) + var(--safe-b)); background: var(--bg); border-top: 1px solid var(--line); }
.sheet > .actions:last-child .btn, .sheet > form > .actions:last-child .btn, .sheet > .sheet-foot .btn { flex: 1; }
.toast { background: var(--stage); color: #fff; border-radius: 16px; font-size: var(--t-meta); box-shadow: var(--e2), inset 0 0 0 1px rgba(255,255,255,.12); }
.toast.ok { color: var(--on-brand); }
.toast.err { background: var(--err-tint); color: var(--err); box-shadow: var(--e2), inset 0 0 0 1.5px var(--err); }
body.sheet-open .toast-wrap { top: calc(var(--safe-t) + 12px); bottom: auto; }
body.has-flash .toast-wrap { bottom: calc(var(--nav-clear) + 84px); }

/* ---- the news flash, docked above the floating tab bar: solid lava for its whole entrance (it springs up, never fades
   in over the page), an amber timer line, and a stacked deck with "+N more" when others wait (app.js showFlash) ---- */
.flash-dock.newsflash { top: auto; bottom: var(--nav-clear); left: 12px; right: 12px; max-width: 520px; min-height: 56px; padding: 6px 4px 6px 10px; align-items: center; gap: var(--s2); border-radius: var(--r3); background: var(--stage); color: #fff; box-shadow: var(--e3); border: 1px solid rgba(255,255,255,.12); animation: dockIn var(--d-4) var(--e-spring) both; z-index: 300; }
.flash-dock.no-nav { bottom: calc(var(--safe-b) + 12px); }
.flash-dock .nf-main { align-items: center; gap: var(--s3); }
.flash-dock .ic { width: 36px; height: 36px; flex: none; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; font-size: 20px; line-height: 1; }
.flash-dock .ic svg { width: 20px; height: 20px; }
.flash-dock .k { font-size: var(--t-label); color: var(--gold); }
.flash-dock .t { font-family: var(--font-ui); font-size: calc(16 * var(--u)); font-weight: 700; line-height: 1.25; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flash-dock .b { font-size: var(--t-label); color: var(--on-stage-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.flash-dock .nf-share { min-height: 40px; }
.flash-dock .x { width: var(--tap); height: var(--tap); flex: none; display: grid; place-items: center; color: var(--on-stage-2); padding: 0; margin: 0; }
.flash-dock .x svg { width: 18px; height: 18px; }
.flash-dock.siren, .flash-dock.curse { background: var(--stage); }
.flash-dock.gold { background: var(--gold); color: #1E1A0A; }
.flash-dock.gold .k, .flash-dock.gold .x, .flash-dock.gold .b { color: #1E1A0A; }
.flash-dock.out { animation: dockOut 280ms var(--e-in) forwards; }
@keyframes dockIn { from { transform: translateY(150%); } }
@keyframes dockOut { to { opacity: 0; transform: translateY(26px); } }
@media (min-width: 1024px) { .flash-dock.newsflash { left: auto; right: var(--s5); bottom: var(--s5); width: 420px; } }

/* ---- avatars: one badge slot, the champion's gold ring, the team ring ---- */
.avatar { overflow: visible; }
.avatar img { border-radius: 50%; }
.avatar:not(.initials)::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--team, transparent); pointer-events: none; }
/* Lane C1: the reigning champion's gold ring sits just inside the team ring on the photo, never over it. An outline
   would land on the outer team rings C draws with box-shadow (the header, the profile hero) and hide the team. An
   initials avatar is already the team's fill, so it keeps the gold outline. */
.avatar.champ-ring { outline: 0; }
.avatar.champ-ring:not(.initials)::after { box-shadow: inset 0 0 0 2px var(--team, transparent), inset 0 0 0 4px var(--gold-ink); }
.avatar.champ-ring.initials { outline: 2px solid var(--gold-ink); outline-offset: 2px; }
.av-badge { position: absolute; right: -3px; bottom: -3px; z-index: 1; width: max(16px, 36%); height: max(16px, 36%); border-radius: 50%; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg); font-style: normal; line-height: 1; }
.av-badge svg { width: 66%; height: 66%; }
.av-badge.goh { background: var(--gold); color: #1E1A0A; }
.av-badge.goh svg path { fill: currentColor; }
.av-badge.bday { background: var(--red-tint); color: var(--red-ink); }
.av-badge.cap { background: var(--gold); color: #1E1A0A; font: 700 max(10px, calc(var(--size) * .24))/1 var(--font-story); }
.msg .av-badge, .comment .av-badge, .side .avs .av-badge, .avatar.xs .av-badge { display: none; }
.rank-disc { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; background: var(--surface-2); color: var(--ink-2); font: 700 13px/1 var(--font-ui); font-variant-numeric: tabular-nums; flex: none; }
.rank-disc.r1 { background: var(--gold); color: #1E1A0A; }
.rank-disc.r2 { background: #CDD2DA; color: #1E2433; }
.rank-disc.r3 { background: #DDAE82; color: #2A1A0C; }
.team-letter { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--team, var(--ink-3)); color: var(--team-on, #fff); font: 700 12px/1 var(--font-ui); flex: none; }

/* ---- stat tiles ---- */
.stat-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.stat-tile { min-height: 88px; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s1); padding: var(--s3) var(--s2); background: var(--surface-1); border: 1px solid transparent; border-radius: var(--r3); box-shadow: var(--e1); text-align: center; }
.stat-tile .v { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--team-ink, var(--ink-1)); white-space: nowrap; }
.stat-tile .l { font-size: var(--t-label); font-weight: 600; color: var(--ink-3); }

/* ---- the score band: the one Cup score look. Direction C: a black scoreboard with a 9% contour texture, team name chips
   (the words carry the team beside every fill), heavy numerals in the stage team inks, an amber rule and an amber status ---- */
.score-band { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding: 18px var(--s4) var(--s4); background: var(--stage); color: #fff; border: 0; border-radius: var(--r4); box-shadow: var(--e2); }
.score-band::before, .hero-score::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; opacity: .09; pointer-events: none; -webkit-mask: url(/img/brand/topo-tile.svg) 0 0 / 240px repeat; mask: url(/img/brand/topo-tile.svg) 0 0 / 240px repeat; }
.score-band .sb-eyebrow { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); min-height: 28px; font-size: var(--t-label); font-weight: 700; line-height: 1.2; letter-spacing: .10em; text-transform: uppercase; color: rgba(255,255,255,.74); }
.score-band .sb-eyebrow > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-band .sb-eyebrow .pill.live { flex: none; background: var(--gold); color: #111113; letter-spacing: .04em; }
.score-band .sb-eyebrow .pill.live::before { background: #111113; }
.score-band .sb-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s3); }
.score-band .sb-team { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: var(--s2); min-width: 0; }
.score-band .sb-name, .score-band .lead .sb-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 10px; border-radius: 6px; background: var(--team, var(--ink-3)); color: var(--team-on, #fff); font-size: var(--t-label); font-weight: 800; line-height: 1; letter-spacing: .12em; text-transform: uppercase; }
.score-band .black .sb-name { box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.score-band .sb-num { position: relative; font-size: var(--t-hero); font-weight: 800; line-height: 1; letter-spacing: -0.045em; color: #fff; }
.score-band .red .sb-num { color: var(--stage-red-ink); } .score-band .blue .sb-num { color: var(--stage-blue-ink); }
.score-band .gold .sb-num { color: var(--gold); } .score-band .green .sb-num { color: var(--nav-float-accent); }
.score-band.lg .sb-num { font-size: 72px; }
.score-band.lg.n4 .sb-num { font-size: 52px; } .score-band.lg.n5 .sb-num { font-size: 42px; }
.score-band.n4:not(.lg) .sb-num { font-size: calc(var(--t-hero) * .76); } .score-band.n5:not(.lg) .sb-num { font-size: calc(var(--t-hero) * .62); }
.score-band .sb-rule { width: 3px; height: 70px; border-radius: 2px; background: var(--gold); }
.score-band .sb-bar { display: flex; align-items: center; gap: var(--s2); }
.score-band .sb-l { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--team, var(--ink-3)); color: var(--team-on, #fff); font: 700 13px/1 var(--font-ui); }
.score-band.lg .sb-l { display: none; }
.score-band .sb-track { flex: 1; display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; background: rgba(255,255,255,.14); }
.score-band .sb-track i { display: block; height: 100%; background: var(--team, var(--ink-3)); }
.score-band .sb-status { text-align: center; font-size: var(--t-label); font-weight: 700; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.74); }
.score-band .sb-status b { color: var(--gold); font-weight: 800; }
.score-band.md { padding: var(--s3) var(--s4); gap: var(--s2); border-radius: var(--r3); box-shadow: var(--e1); }
.score-band.md .sb-num { font-size: var(--t-score); }
.score-band.md .sb-rule { height: 40px; }
.score-band.md .sb-status { display: none; }
.score-band.sm { padding: var(--s2) var(--s3); gap: 0; border-radius: var(--r2); box-shadow: none; }
.score-band.sm .sb-team { flex-direction: row; justify-content: center; gap: var(--s2); }
.score-band.sm .sb-num { font-size: 22px; }
.score-band.sm .sb-rule { height: 24px; }
.score-band.sm .sb-bar, .score-band.sm .sb-status { display: none; }
/* the fan hero (fan.js scoreHero) wears the same black scoreboard until it moves to .score-band */
.hero-score { background: var(--stage); color: #fff; border: 0; isolation: isolate; }
.hero-score .eyebrow { color: rgba(255,255,255,.74); }
.hero-score .pill.ghost { background: rgba(255,255,255,.14); color: #fff; }
.hero-score .score-line .team .name { font-size: var(--t-label); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.74); }
.hero-score .score-line .team .pts { font-family: var(--font-ui); font-size: var(--t-hero); font-weight: 800; letter-spacing: -0.045em; color: #fff; }
.hero-score .score-line .team.red .pts { color: var(--stage-red-ink); } .hero-score .score-line .team.blue .pts { color: var(--stage-blue-ink); }
.hero-score .score-line .team .proj { color: rgba(255,255,255,.74); font-size: var(--t-label); }
.hero-score .progress { background: rgba(255,255,255,.14); height: 10px; border-radius: 5px; }
.hero-score .progress .a, .hero-score .progress .b { background: var(--team, var(--ink-3)); }
.hero-score .progress .mid { background: var(--stage); width: 3px; top: 0; bottom: 0; }
.hero-score .foot { color: rgba(255,255,255,.74); }
.hero-score .foot b { color: var(--gold); }
.hero-score .live-list { border-top: 1px solid rgba(255,255,255,.14); }
.hero-score .live-row { border-bottom: 1px solid rgba(255,255,255,.1); font-size: var(--t-meta); }
.hero-score .live-row .who .up { color: #fff; font-weight: 800; }
.hero-score .live-row .who .down { color: rgba(255,255,255,.74); font-weight: 500; }
.hero-score .live-row .status b { font-family: var(--font-ui); font-size: var(--t-result); font-weight: 800; }
.hero-score .live-row .status span { color: rgba(255,255,255,.74); }
.scorebig { border-color: var(--line); }
.scorebig .t.red .p, .scorebig .t.blue .p, .scorebig .t.black .p, .scorebig .t.gold .p, .scorebig .t.green .p { color: var(--team-ink); font-family: var(--font-ui); font-weight: 700; }
.hlside .nm.red, .hlside .nm.blue { color: var(--team-ink); }

/* ---- match rows: the leader's score in its own team's ink, the loser in grey at full opacity ---- */
.match { border-color: var(--line); border-radius: var(--r3); }
.match.mine { border: 2px solid var(--gold-ink); box-shadow: none; }
.match .vsline { letter-spacing: 0; }
.side .res { font-family: var(--font-ui); font-weight: 700; color: var(--ink-1); }
.side.winner .res, .side.up .res { color: var(--ink-1); }
.side.winner:has(.bar.red) .res, .side.up:has(.bar.red) .res { color: var(--red-ink); }
.side.winner:has(.bar.blue) .res, .side.up:has(.bar.blue) .res { color: var(--blue-ink); }
.side.loser { opacity: 1; }
.side.loser .names, .side.loser .res { color: var(--lose-ink); font-weight: 500; }

/* ---- the match tile (the atom of the app) ---- */
/* Direction C: an eyebrow row (.mt-no, "Match 1 · Best ball · You") and 26px avatar pairs (.mt-avs) on Home and Matches;
   both are left out in Simple mode, on profiles and on the organizer's cards. The rows are pinned, so a tile without the
   eyebrow keeps its sides in rows 2 and 3. Your own match wears --mine-ring (ink in light, amber in dark). */
.match-tile { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr 1fr; column-gap: var(--s3); align-items: center; width: 100%; min-height: 88px; padding: var(--s3) var(--s4) var(--s3) 0; background: var(--surface-1); color: var(--ink-1); border: 1px solid transparent; border-radius: var(--r3); box-shadow: var(--e1); text-align: left; overflow: hidden; }
.match-tile:active { background: var(--surface-2); }
.match-tile.mine { border-color: transparent; box-shadow: var(--mine-ring), var(--e1); }
.match-tile .mt-no { grid-column: 1 / -1; grid-row: 1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--s3); min-width: 0; padding: 0 0 var(--s1) var(--s4); font-size: var(--t-label); font-weight: 700; line-height: 1.2; letter-spacing: .10em; text-transform: uppercase; color: var(--ink-3); }
.match-tile .mt-no > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-tile .mt-no b { color: var(--gold-ink); font-weight: 800; }
.match-tile .mt-side { grid-column: 1; grid-row: 2; display: flex; align-items: center; gap: var(--s3); min-width: 0; min-height: 34px; font-size: var(--t-body); font-weight: 500; color: var(--ink-2); }
.match-tile .mt-side ~ .mt-side { grid-row: 3; }
.match-tile .mt-side::before { content: ""; flex: none; width: 6px; align-self: stretch; border-radius: 0 3px 3px 0; background: var(--team, var(--line-strong)); }
.match-tile .mt-side.lead { font-weight: 800; color: var(--ink-1); }
.match-tile .mt-avs { display: flex; flex: none; margin-right: calc(-1 * var(--s1)); }
.match-tile .mt-avs .avatar { --size: 26px; box-shadow: 0 0 0 2px var(--surface-1); }
.match-tile .mt-avs .avatar + .avatar { margin-left: -8px; }
.match-tile .mt-names { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-tile .mt-status { grid-column: 2; grid-row: 2 / span 2; display: flex; flex-direction: column; align-items: flex-end; gap: var(--s1); text-align: right; }
.match-tile .mt-result { font-size: var(--t-result); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--team-ink, var(--ink-1)); white-space: nowrap; }
.mt-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); font-size: var(--t-label); font-weight: 700; white-space: nowrap; }
.mt-pill.live { background: var(--live-bg); color: var(--live-ink); font-weight: 800; }
.mt-pill.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--live-dot); animation: kitPulse 1.4s infinite; }
.mt-pill.final { background: var(--brand-tint); color: var(--brand-ink); }

/* ---- the hole tile ---- */
.hole-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.hole-grid.nine { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; }
.hole-tile { position: relative; display: grid; place-items: center; min-height: 48px; aspect-ratio: 1; padding: 0; border-radius: 6px; background: var(--surface-1); border: 1.5px dashed var(--line-strong); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hole-grid.nine .hole-tile { aspect-ratio: auto; min-height: 52px; }
.hole-tile .ht-n { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: calc(17 * var(--u)); font-weight: 700; line-height: 1; }
.hole-tile.red, .hole-tile.blue, .hole-tile.black, .hole-tile.gold, .hole-tile.green, .hole-tile.white { background: var(--team); border: 1.5px solid var(--team); color: var(--team-on); }
.hole-tile.white { border-color: var(--line-strong); }
.hole-tile.halve { background: var(--halve-bg); border: 1.5px solid var(--line-strong); color: var(--halve-ink); }
.hole-tile .ht-t { position: absolute; top: 3px; left: 5px; font-size: 12px; font-weight: 700; line-height: 1; }
.hole-tile .ht-p { position: absolute; bottom: 3px; right: 5px; font-size: 13px; font-weight: 700; line-height: 1; }
.hole-tile.birdie .ht-n { box-shadow: 0 0 0 1.5px currentColor; }
.hole-tile.eagle .ht-n { box-shadow: 0 0 0 1.5px currentColor, 0 0 0 3px var(--team, var(--surface-1)), 0 0 0 4.5px currentColor; }
.hole-tile.ace .ht-n { background: var(--team-on, var(--ink-1)); color: var(--team, var(--surface-1)); }
.hole-tile .ht-dd { position: absolute; top: 3px; right: 3px; width: 13px; height: 13px; background: var(--gold); filter: drop-shadow(0 0 1px rgba(0,0,0,.55));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 2.5 5 13.5h6l-1 8 8.5-11h-6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 2.5 5 13.5h6l-1 8 8.5-11h-6z'/%3E%3C/svg%3E") center / contain no-repeat; }
.hole-tile .ht-dot { position: absolute; bottom: 4px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: currentColor; }
.hole-tile.cur { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4.5px var(--ink-1); }
.hole-tile.pend { border: 1.5px dashed var(--gold-ink); }
/* the current hole-by-hole cells (views/scoring.js) until they move to .hole-tile: legible numbers, a real ring */
.hcell { border-color: var(--line-strong); }
.hcell .hn { opacity: 1; }
.hcell.red, .hcell.blue, .hcell.black, .hcell.green { color: var(--team-on); }
.hcell.halve { background: var(--halve-bg); } .hcell.halve .hv { color: var(--halve-ink); }
.hcell.cur { box-shadow: 0 0 0 2px var(--bg), 0 0 0 5px var(--gold-ink); }
.hcell.pend { border-color: var(--gold-ink); }
.winbtn.halve { background: var(--halve-bg); color: var(--ink-1); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.winbtn.sel { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--gold-ink); }
.winbtn.halve.sel { box-shadow: inset 0 0 0 1.5px var(--line-strong), 0 0 0 3px var(--bg), 0 0 0 5px var(--gold-ink); }

/* ===== END OF THE SYSTEM SECTION. Lane blocks follow; each lane edits only its own block. ===== */

/* ==========================================================================
   Lane FUN (Sep 12 2026): betting for a golfer, props and live bets, reports, off the record, who logged a stat,
   Tone and games, Awards Night pacing, and Clubhouse TV (/tv).
   ========================================================================== */
.card.bet-as { margin-top: 12px; }
.card.bet-as.on, .card.bet-budget.proxy { border: 2px solid var(--gold); background: var(--gold-soft); }
.bet-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.35; }
.bet-cd { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--red); color: #fff; font-weight: 800; }
.bet-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bet-note { margin-top: 8px; font-size: 12.5px; color: var(--ink-2); }
.prop-kinds { flex-wrap: wrap; }
.offrec { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.chips.wrap { flex-wrap: wrap; overflow: visible; }
.shame-log .sl-row { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.tv-code-box { margin-top: 12px; padding: 14px; border-radius: 14px; background: var(--ivory-2); text-align: center; }
.tv-code { font: 800 34px/1 var(--font-ui); letter-spacing: .18em; color: var(--navy); }
.cer-plan { margin-top: 10px; font-size: 15px; }
.cer-auto { display: flex; gap: 14px; align-items: center; justify-content: center; margin-top: 8px; font-size: 13px; color: rgba(255,255,255,.8); }
.cer-auto .textbtn { color: var(--gold); }
.cer-run-time { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 4px; text-align: center; }
.cer-plaques { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; margin-top: 6px; }
.cer-plq { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.cer-plq .t { font-weight: 800; color: var(--gold); font-size: 13px; }
.cer-plq .l { font-size: 11.5px; color: rgba(255,255,255,.75); line-height: 1.3; }
/* ---- Clubhouse TV: big type, landscape first, still readable on a phone ---- */
body.tv-mode { background: #0B1530; }
body.tv-mode #intro { display: none; }
.tv { min-height: 100vh; color: #fff; background: radial-gradient(120% 90% at 50% 0%, #1d2c52, #0B1530 60%, #060b1a); padding: 2.2vh 2.4vw 3vh; font-size: clamp(15px, 1.45vw, 30px); }
.tv-top { display: flex; align-items: center; gap: 1.2em; }
.tv-brand { display: flex; align-items: center; gap: .5em; font: 700 1.3em/1 var(--font-brand); }
.tv-brand img { width: 1.9em; height: 1.9em; object-fit: contain; }
.tv-when { flex: 1; min-width: 0; color: rgba(255,255,255,.75); font-weight: 600; }
.tv-clock { font: 800 1.3em/1 var(--font-ui); color: var(--gold); }
.tv-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1em; margin-top: 2vh; }
.tv-team { border-radius: 22px; padding: .5em 1em; text-align: center; background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.14); }
.tv-team.red { border-color: #E0524A; background: rgba(224,82,74,.2); }
.tv-team.blue { border-color: #4B7BE5; background: rgba(75,123,229,.2); }
.tv-team.gold { border-color: var(--gold); } .tv-team.green { border-color: #3FA36B; }
.tv-team .n { font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.tv-team .p { font: 700 4.4em/1 var(--font-display); }
.tv-team .p sup { font-size: .5em; }
.tv-vs { text-align: center; color: rgba(255,255,255,.75); font-weight: 700; max-width: 10em; }
.tv-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.2em; margin-top: 2.2vh; }
.tv-panel { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: .8em 1em; min-width: 0; }
.tv-h2 { font: 800 .8em/1.2 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: .5em; }
.tv-h3 { font-weight: 800; color: rgba(255,255,255,.65); margin: .8em 0 .3em; font-size: .85em; }
.tv-m { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .6em; align-items: center; padding: .45em 0; border-top: 1px solid rgba(255,255,255,.08); }
.tv-m .side { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-m .side.r { text-align: right; }
.tv-m .side.red { color: #FFB0A9; } .tv-m .side.blue { color: #B5CBFF; }
.tv-m .side.lead { color: var(--gold); }
.tv-m .mid { text-align: center; min-width: 6.5em; }
.tv-m .sc { font: 700 1.35em/1 var(--font-display); }
.tv-m .st { font-size: .75em; color: rgba(255,255,255,.7); margin-top: .15em; }
.tv-story { list-style: none; margin: 0; padding: 0; }
.tv-story li { display: flex; gap: .6em; padding: .4em 0; border-top: 1px solid rgba(255,255,255,.08); line-height: 1.3; font-size: .92em; }
.tv-story .i { flex: none; }
.tv-empty { color: rgba(255,255,255,.65); padding: .6em 0; }
.tv-vote { margin-top: 2vh; background: rgba(232,199,102,.12); border: 2px solid var(--gold); border-radius: 20px; padding: .8em 1em; }
.tv-vote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em; }
.tv-nom { display: flex; gap: .6em; align-items: baseline; padding: .3em 0; }
.tv-nom span { flex: 1; color: rgba(255,255,255,.8); min-width: 0; }
.tv-nom em { font-style: normal; font-weight: 800; color: var(--gold); }
.tv-sign { max-width: 520px; margin: 14vh auto 0; text-align: center; }
.tv-sign img { width: 90px; }
.tv-h { font: 700 2em/1.1 var(--font-brand); margin-top: .4em; }
.tv-sub { color: rgba(255,255,255,.75); margin-top: .3em; }
.tv-form { display: flex; gap: 10px; margin-top: 1.2em; }
.tv-form .input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .2em; font-size: 22px; text-align: center; }
.tv-err { color: #FFB0A9; margin-top: .8em; min-height: 1.2em; }
.tv-wait { text-align: center; padding-top: 30vh; font: 700 2em var(--font-brand); color: var(--gold); }
.tv-cer { position: relative; max-width: 1200px; margin: 2vh auto 0; text-align: center; border-radius: 30px; padding: 4vh 3vw 5vh; background: linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); border: 2px solid rgba(232,199,102,.5); min-height: 86vh; overflow: hidden; }
.tv-cer.is-shame { border-color: rgba(255,143,130,.5); }
.tv-cer-top { display: flex; justify-content: space-between; font: 800 .8em/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.tv-cer-ic { font-size: 5em; line-height: 1; margin-top: 2vh; }
.tv-cer-title { font: 700 3.4em/1.05 var(--font-brand); margin-top: .2em; }
.tv-cer-blurb { color: rgba(255,255,255,.75); margin-top: .4em; font-size: 1.1em; }
.tv-cer-veil { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 12vh; background: linear-gradient(transparent 40%, rgba(11,21,48,.97) 58%); transition: opacity .5s ease; }
.tv-cer-count { font: 700 9em/1 var(--font-brand); color: var(--gold); }
.tv-cer-env { letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.tv-cer-win { display: flex; flex-direction: column; align-items: center; gap: .3em; margin-top: 3vh; opacity: 0; transform: scale(.9); transition: opacity .5s ease .1s, transform .6s cubic-bezier(.2, 1.3, .4, 1) .1s; }
.tv-cer.open .tv-cer-veil { opacity: 0; }
.tv-cer.open .tv-cer-win { opacity: 1; transform: none; }
.tv-cer-name { font: 700 4.6em/1 var(--font-brand); color: var(--gold); }
.tv-cer-nick { font-style: italic; font-size: 1.4em; color: rgba(255,255,255,.8); }
.tv-cer-val { font-size: 1.8em; font-weight: 700; }
.tv-cer-run { color: rgba(255,255,255,.65); margin-top: .4em; }
.tv-cer-team { font: 700 5em/1 var(--font-brand); color: var(--gold); }
.tv-face { display: inline-flex; align-items: center; justify-content: center; width: 4.5em; height: 4.5em; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,.12); font: 800 1.6em var(--font-ui); border: 3px solid var(--gold); }
.tv-face.big { width: 7.5em; height: 7.5em; }
.tv-face img { width: 100%; height: 100%; object-fit: cover; }
.tv-plaques { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4em; width: 100%; }
.tv-plq .nm { font-weight: 800; font-size: 1.3em; margin-top: .3em; }
.tv-plq .t { color: var(--gold); font-weight: 800; }
.tv-plq .l { color: rgba(255,255,255,.75); font-size: .9em; }
@media (max-width: 760px), (orientation: portrait) {
  .tv { font-size: 15px; padding: 14px; }
  .tv-top { flex-wrap: wrap; row-gap: .4em; }
  .tv-when { order: 3; flex-basis: 100%; }
  .tv-grid, .tv-vote-grid { grid-template-columns: 1fr; }
  .tv-team .p { font-size: 3em; }
  .tv-plaques { grid-template-columns: 1fr 1fr; }
  .tv-cer-title { font-size: 2.2em; }
  .tv-cer-name { font-size: 2.6em; }
  .tv-cer-team { font-size: 3em; }
  .tv-face.big { width: 6em; height: 6em; }
}

/* ==========================================================================
   ORG lane, wave 2 (Sep 12 2026). Organizer home badge and More tools, Players & PINs rows at phone width,
   Pair this round, the audience reach line, Texts to send tools, and the print stylesheet for in-app pages.
   The print pages (/api/admin/print/*) carry their own styles (server/print.js). Lane ORG edits only this block.
   ========================================================================== */
.org-gear { position: relative; }
.org-badge { position: absolute; top: 1px; right: -1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--ivory); }
.org-more > summary { list-style: none; cursor: pointer; }
.org-more > summary::-webkit-details-marker { display: none; }
.org-more[open] > summary .chev { transform: rotate(90deg); }
.admin-row.prow { flex-wrap: wrap; }
.admin-row.prow .grow { min-width: 0; flex: 1 1 150px; }
.admin-row.prow .grow b { overflow-wrap: anywhere; }
.prow-acts { display: flex; gap: 6px; flex: none; margin-left: auto; }
@media (max-width: 480px) { .admin-row.prow .prow-acts { flex-basis: 100%; justify-content: flex-end; } }
.pair-group.warn { box-shadow: inset 0 0 0 1.5px var(--red); }
.pair-sides { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.pair-side { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 40%; }
.pair-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 6px 12px; border-radius: 999px; border: 2px solid var(--hair); background: #fff; font-weight: 600; font-size: max(var(--floor), calc(14 * var(--u))); color: var(--ink); }
.pair-chip small { font-weight: 500; color: var(--ink-3); font-size: 11.5px; }
.pair-chip.red { border-color: #B5352B; } .pair-chip.blue { border-color: #1F4E9C; } .pair-chip.green { border-color: #0F4A2E; }
.pair-chip.gold { border-color: #B8912F; } .pair-chip.black { border-color: #222; }
.pair-chip.on { background: #F6E7B8; box-shadow: 0 0 0 3px #C9A227; }
.pair-actions { flex-wrap: wrap; }
.cm-reach { margin: 6px 0 10px; padding: 10px 12px; border-radius: 10px; background: var(--ivory-2); }
.cm-golfers { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
.tx-tools { gap: 6px; margin-bottom: 8px; }
.pair-group b { white-space: nowrap; }
/* Needs attention: a row with a one-tap fix keeps its text wide; the button drops below on a narrow phone. */
#attn .attn-row { flex-wrap: wrap; }
#attn .attn-row .grow { min-width: 0; flex: 1 1 180px; }
#attn .attn-row > .btn { margin-left: auto; }
@media print {
  .header, .nav, .toast, .newsflash, .sheet-backdrop, .bigbtns, #exit, .btn, .chips, .actions, .offline-pill { display: none !important; }
  html, body, .screen, #view { background: #fff !important; color: #000 !important; }
  .card { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; }
  .day-head, .section-head { break-after: avoid; }
  a { color: inherit; text-decoration: none; }
}

/* ==========================================================================
   WAVE 3 · LANE LOOK (Sep 2026): the night theme and the fan screens. Lane LOOK edits only this block.
   Settings → Appearance sets html[data-theme] (public/js/theme.js; theme-boot.js paints it before the first frame).
   Light is everyone's default. Dark keeps the same tokens with night values, split by role where one color can't
   pass AA both ways: --green is text/accent and --green-fill sits under white text; --red / --red-fill and --live /
   --live-ink the same; team colors keep their fills and get light text versions (--red-ink, --blue-ink). The whole
   palette lives inside @media screen, so printing always comes out light. The intro, Awards Night and the TV already
   use their own dark stage and are left alone.
   ========================================================================== */
@media screen {
html[data-theme="dark"] {
  /* Design v3 (lane SYSTEM): the night value of every color token at the top of the file (qa/design checks that each
     one has one). Only the new names are set here; the old names are aliases on :root and follow through. Every text
     token passes AA on every ground (qa/look, qa/design). theme-boot.js sets data-theme for Auto and Follow my phone
     too, so this one rule serves all three dark states. */
  color-scheme: dark;
  --bg: #0B0B0C; --surface-1: #161618; --surface-2: #1F1F22; --surface-3: #2A2A2E;
  --ink-1: #F4F4F2; --ink-2: #C9C9CC; --ink-3: #9E9EA4;
  --line: #303034; --line-strong: #6D6D74;
  --red: #DB2640; --red-tint: #3D1519; --red-ink: #FF6B7A; --red-on: #FFFFFF;
  --blue: #2E68EC; --blue-tint: #16254A; --blue-ink: #7AA2FF; --blue-on: #FFFFFF;
  --gold: #F5B82E; --gold-ink: #FFC94D; --gold-tint: #332709;
  --brand: #007F4F; --brand-ink: #3DDC97; --brand-tint: #0F2E21; --on-brand: #FFFFFF;
  --halve-bg: #2A2A2E; --halve-ink: #F4F4F2; --lose-ink: #9E9EA4;
  --live-bg: #F4F4F2; --live-ink: #0B0B0C; --live-dot: #7A5300;
  --ok: #3DDC97; --ok-tint: #0F2E21; --warn: #FFC15E; --warn-tint: #33270C; --err: #FF8A80; --err-tint: #3D1519;
  --focus: #F4F4F2; --stage: #0A0A0B; --on-stage-2: rgba(255,255,255,.86); --scrim: rgba(0,0,0,.6);
  --stage-2: #1C1C20; --stage-red-ink: #FF6B7A; --stage-blue-ink: #7AA2FF;
  --nav-float-bg: #1F1F22; --nav-float-ink: rgba(255,255,255,.66); --nav-float-on: #FFFFFF; --nav-float-accent: #3DDC97;
  /* the ink ring disappears on black; amber reads. Dark cards use the 1px --line border instead of a shadow. */
  --mine-ring: 0 0 0 2.5px var(--gold);
  --e0: 0 0 0 0 transparent; --e1: 0 0 0 0 transparent; --e2: 0 18px 36px -18px rgba(0,0,0,.9); --e3: 0 -10px 40px rgba(0,0,0,.6);
}
/* The component kit reads tokens, so night mode is the token block above plus the few rules below; the old selector
   overrides are gone. Inline-style shims: some views still write these literals in style="", which tokens can't
   reach; delete a line here once its view moves to tokens (var(--gold-ink), var(--err), var(--brand)). */
html[data-theme="dark"] [style*="background:var(--green)"] { background: var(--brand) !important; }
html[data-theme="dark"] [style*="color:#5D4A0B"] { color: var(--gold-ink) !important; }
html[data-theme="dark"] [style*="color:#B23A2E"], html[data-theme="dark"] [style*="color:var(--red)"] { color: var(--err) !important; }
/* lane blocks after the system section that still use a light literal or a fill color as text */
html[data-theme="dark"] .tv-code { color: var(--ink-1); }
html[data-theme="dark"] .pair-chip { background: var(--surface-1); }
html[data-theme="dark"] .pair-chip.on { background: var(--gold-tint); }
html[data-theme="dark"] .an-heat .hr i { background: rgba(124, 211, 161, var(--a)); }
html[data-theme="dark"] .sheet-backdrop { background: rgba(0,0,0,.6); }
html[data-theme="dark"] body.gold-mode { background: #2A2410 !important; }
html[data-theme="dark"] body.gold-mode header { background: var(--gold-tint) !important; }
html[data-theme="dark"] .login .logo { filter: drop-shadow(0 10px 22px rgba(0,0,0,.55)); }
}
@media screen and (prefers-contrast: more) { html[data-theme="dark"] { --ink-2: #DADADC; --ink-3: #C0C0C4; --line: #55555C; } }

/* Settings → Appearance: four choices, two by two on a narrow phone */
.theme-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; background: var(--ivory-2); padding: 4px; border-radius: 12px; }
@media (min-width: 440px) { .theme-pick { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.theme-pick button { min-height: 44px; padding: 0 8px; border-radius: 10px; font-weight: 700; font-size: max(var(--floor), calc(14 * var(--u))); color: var(--ink-2); line-height: 1.2; }
.theme-pick button.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(20,33,61,.12), inset 0 0 0 1.5px var(--green); }

/* the fan screens (views/fan.js) and the organizer's Fan passes card (views/fanpass.js) */
.fan-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--gold-soft); color: var(--gold-ink); font-weight: 700; font-size: max(var(--floor), calc(14 * var(--u))); white-space: nowrap; }
.fan-pill svg { width: 16px; height: 16px; }
.fan-screen .header .brand { min-width: 0; }
.fan-screen .header .brand .wordmark { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fan-match .mfoot { gap: 10px; flex-wrap: wrap; }
.fan-match .mfoot b { color: var(--ink); }
.fan-when { text-align: right; flex: none; max-width: 50%; }
.fan-cheers .react { min-height: 40px; }
.fan-shots .shot { align-items: center; }
.fan-recap summary { display: flex; flex-direction: column; gap: 2px; list-style: none; cursor: pointer; min-height: 44px; justify-content: center; }
.fan-recap summary::-webkit-details-marker { display: none; }
.fan-card .fan-row { flex-wrap: wrap; }
.fan-qr { display: grid; place-items: center; margin-top: 8px; }
.fan-qr svg { width: min(62vw, 220px); height: auto; background: #fff; padding: 8px; border-radius: 12px; }
.fan-code { font: 800 calc(28 * var(--u))/1.1 var(--font-ui); letter-spacing: .12em; color: var(--ink); margin-top: 2px; }

/* ===== lane STROKES (Sep 12 2026): strokes entry in the hole panel, the scores table, Scores on Stats and profiles ===== */
.stk { display: grid; gap: 10px; margin-top: 12px; text-align: left; }
.stk-side { border: 1.5px solid var(--hair); border-radius: 14px; padding: 10px 10px 12px; background: var(--paper); }
.stk-side.closed { padding: 0; border-style: dashed; }
.stk-side.conceded { background: var(--ivory-2); }
.stk-open { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; font-size: max(var(--floor), calc(15 * var(--u))); color: var(--ink-2); border-radius: 14px; }
.stk-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stk-nm { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: max(var(--floor), calc(15 * var(--u))); color: var(--ink); min-width: 0; }
.stk-concede { min-height: 44px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--hair); background: var(--paper); color: var(--ink-2); font-weight: 700; font-size: max(var(--floor), calc(13 * var(--u))); white-space: nowrap; }
.stk-concede.on { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-ink); }
.stk-gone { margin-top: 8px; font-weight: 700; color: var(--ink-2); font-size: max(var(--floor), calc(14 * var(--u))); }
.stk-ball { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; margin-top: 10px; }
.stk-who { font-weight: 700; font-size: max(var(--floor), calc(15 * var(--u))); color: var(--ink); overflow-wrap: anywhere; line-height: 1.2; }
.stk-who small { display: block; font-weight: 700; font-size: max(var(--floor), calc(11 * var(--u))); letter-spacing: .06em; text-transform: uppercase; color: var(--green); }
.stk-dot { color: var(--gold-deep); letter-spacing: -1px; }
.stk-step { display: flex; align-items: center; gap: 4px; }
.stk-btn { width: 48px; height: 56px; border-radius: 12px; background: var(--ivory-2); color: var(--ink); font-size: calc(26 * var(--u)); font-weight: 800; line-height: 1; display: grid; place-items: center; }
.stk-btn:active { transform: scale(.94); }
.stk-btn:disabled { opacity: .35; }
.stk-num { width: 60px; height: 56px; padding: 0; text-align: center; font: 800 calc(28 * var(--u))/1 var(--font-ui); color: var(--ink); background: var(--paper); border: 1.5px solid var(--hair); border-radius: 12px; -moz-appearance: textfield; appearance: textfield; }
.stk-num::-webkit-outer-spin-button, .stk-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stk-num:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.stk-num::placeholder { color: var(--ink-3); font-size: calc(15 * var(--u)); font-weight: 800; }
.stk-pu { min-width: 52px; height: 56px; padding: 0 8px; border-radius: 12px; border: 1.5px solid var(--hair); background: var(--paper); color: var(--ink-2); font-weight: 800; font-size: max(var(--floor), calc(13 * var(--u))); }
.stk-pu.on { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-ink); }
.stk-ball.pu .stk-who { color: var(--ink-3); }
.stk-preview { margin-top: 12px; font-weight: 800; font-size: max(var(--floor), calc(16 * var(--u))); color: var(--ink-2); line-height: 1.3; }
.stk-preview.won { color: var(--ink); }
.stk-save { margin-top: 10px; }
.stk-sum { margin-top: 6px; color: var(--ink-2); }
@media (max-width: 370px) { .stk-ball { grid-template-columns: minmax(0, 1fr) auto; } .stk-who { grid-column: 1 / -1; } }
html[data-ts="l"] .stk-ball, html[data-ts="xl"] .stk-ball { grid-template-columns: minmax(0, 1fr) auto; }
html[data-ts="l"] .stk-who, html[data-ts="xl"] .stk-who { grid-column: 1 / -1; }
.stk-card { margin-top: 14px; }
.stk-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 6px; border: 1px solid var(--hair); border-radius: 12px; background: var(--paper); }
.stk-card table { border-collapse: collapse; font-size: max(var(--floor), calc(13 * var(--u))); min-width: 100%; }
.stk-card th, .stk-card td { padding: 6px 4px; text-align: center; border-bottom: 1px solid var(--hair); min-width: 30px; position: relative; color: var(--ink); font-variant-numeric: tabular-nums; }
.stk-card th:first-child { position: sticky; left: 0; z-index: 1; background: var(--paper); text-align: left; white-space: nowrap; padding-left: 8px; font-weight: 700; }
.stk-card thead th { font-weight: 800; color: var(--ink-2); }
.stk-card tr.stk-par td, .stk-card tr.stk-par th { color: var(--ink-3); }
.stk-card td.stk-best { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.stk-card td.stk-given { color: var(--ink-2); font-size: max(var(--floor), calc(11 * var(--u))); font-weight: 700; }
.stk-card td small { display: block; font-size: max(var(--floor), calc(10 * var(--u))); color: var(--ink-3); line-height: 1; }
.stk-card td .stk-sdot { position: absolute; top: 1px; right: 2px; font-style: normal; font-size: 8px; color: var(--gold-deep); letter-spacing: -1px; }
.stk-card td.stk-na { background: repeating-linear-gradient(135deg, transparent 0 4px, var(--ivory-2) 4px 8px); }
.stk-card td.stk-tot { font-weight: 800; background: var(--ivory-2); }
.stk-card tr.stk-sd th, .stk-card tr.stk-sd td { font-weight: 800; }
.stk-card .dot { margin-right: 4px; }
.stk-legend { margin-top: 6px; }
.stk-cup { margin-top: 10px; display: grid; gap: 2px; text-align: left; }
.sb-scroll { overflow-x: auto; }
.sb-t { border-collapse: collapse; width: 100%; font-size: max(var(--floor), calc(13 * var(--u))); }
.sb-t th, .sb-t td { padding: 6px 4px; border-bottom: 1px solid var(--hair); text-align: center; color: var(--ink); }
.sb-t thead th { font-size: max(var(--floor), calc(11 * var(--u))); color: var(--ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.sb-t tbody th { text-align: left; font-weight: 700; }
.sb-t tr.team th, .sb-t tr.team td { font-weight: 800; background: var(--ivory-2); }
.sb-t td small { margin-left: 3px; color: var(--ink-3); font-weight: 600; }
.sb-who { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; text-align: left; color: var(--ink); }
/* Strokes rounds only: the hole panel's Double Down, Birdie and More chips reach 44 px (who-won rounds look as before). */
.hole-panel.stk-mode .xchip { height: 44px; }

/* === design lane ORGANIZER === */
/* Organizer screens (views/admin.js wraps each in .org), the Organizer home, and the organizer parts of logistics.js,
   texts.js and draft.js. Tokens are lane SYSTEM's (top of this file); each has a fallback to the older names. */
.org-signin { padding-top: 60px; }
.org-signin .btn { margin-top: var(--s4, 16px); }
.org-empty .e { display: grid; place-items: center; color: var(--ink-3); }
.org-empty .e svg { width: 40px; height: 40px; }

/* Organizer home: Today (one tap per match) */
.org-today { margin-top: var(--s3, 12px); padding: var(--s4, 16px); }
.org-today-t { font-size: calc(20 * var(--u)); font-weight: 700; line-height: 1.25; margin-top: 2px; color: var(--ink); }
.org-today-sub { font-size: max(var(--floor), calc(15 * var(--u))); color: var(--ink-2); margin-top: 2px; }
.org-res-list { margin-top: var(--s3, 12px); border-top: 1px solid var(--line, var(--hair)); }
.org-res { display: flex; align-items: center; gap: var(--s3, 12px); width: 100%; min-height: 64px; padding: var(--s2, 8px) 0; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line, var(--hair)); color: inherit; font: inherit; cursor: pointer; }
.org-res:last-child { border-bottom: 0; }
.org-res:active { background: var(--surface-2, var(--ivory-2)); }
.org-res .grow { min-width: 0; }
.org-res b { display: block; font-size: max(var(--floor), calc(17 * var(--u))); font-weight: 600; overflow-wrap: anywhere; }
.org-res-line { display: block; font-size: max(var(--floor), calc(15 * var(--u))); color: var(--ink-2); overflow-wrap: anywhere; }
.org-res .pill { flex: none; white-space: nowrap; }
.org-res .chev { flex: none; color: var(--ink-3); }
.org-enter { margin-top: var(--s4, 16px); min-height: 56px; display: flex; align-items: center; justify-content: center; gap: var(--s2, 8px); }
.org-other { margin-top: var(--s3, 12px); }
/* Announce and Push, side by side */
.org-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s2, 8px); margin-top: var(--s3, 12px); }
.org-duo .btn { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: var(--s2, 8px); }
.org-li-t { font-weight: 600; }
.org-state { flex: none; margin-left: auto; padding: 4px 12px; border-radius: var(--r-pill, 999px); font-size: max(var(--floor), calc(14 * var(--u))); font-weight: 600; background: var(--surface-2, var(--ivory-2)); color: var(--ink-2); }
.org-state.on { background: var(--brand-tint, var(--green-soft)); color: var(--ink); }
.org-exit .icon { color: var(--ink-3); }
/* Needs attention: one row per item, a line icon instead of the server's emoji */
.org-count { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: var(--r-pill, 999px); background: var(--gold-tint, var(--gold-soft)); color: var(--gold-ink, #735705); font-weight: 700; font-size: max(var(--floor), calc(14 * var(--u))); }
.org-attn { padding: 0 var(--s4, 16px); }
.org-attn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2, 8px) var(--s3, 12px); width: 100%; min-height: 56px; padding: var(--s3, 12px) 0; text-align: left; background: none; border: 0; border-top: 1px solid var(--line, var(--hair)); color: inherit; font: inherit; font-size: max(var(--floor), calc(15 * var(--u))); }
.org-attn-row:first-child { border-top: 0; }
button.org-attn-row { cursor: pointer; }
.org-attn-row .grow { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.org-attn-row > .btn { margin-left: auto; flex: none; }
.org-attn-row .chev { flex: none; color: var(--ink-3); }
.org-ico { flex: none; width: 32px; height: 32px; border-radius: var(--r1, 8px); display: grid; place-items: center; background: var(--surface-2, var(--ivory-2)); color: var(--ink-2); }
.org-ico svg { width: 20px; height: 20px; }
.org-ico.warn { background: var(--gold-tint, var(--gold-soft)); color: var(--gold-ink, #735705); }
.org-ico.ok { background: var(--brand-tint, var(--green-soft)); color: var(--ink); }
.org-clear { display: flex; align-items: center; gap: var(--s3, 12px); min-height: 48px; margin-top: var(--s4, 16px); color: var(--ink-2); font-size: max(var(--floor), calc(15 * var(--u))); }
/* Run of show: one collapsed row, open for the list */
.org-ros { padding: 0 var(--s4, 16px); }
.org-ros > summary, .org-ros-done > summary { list-style: none; cursor: pointer; }
.org-ros > summary::-webkit-details-marker, .org-ros-done > summary::-webkit-details-marker { display: none; }
.org-ros-sum { display: flex; align-items: center; gap: var(--s3, 12px); min-height: 64px; padding: var(--s3, 12px) 0; }
.org-ros-sum .grow, .org-ros-row .grow { min-width: 0; }
.org-ros-sum b, .org-ros-row b { display: block; font-weight: 600; }
.org-ros-detail { display: block; font-size: max(var(--floor), calc(14 * var(--u))); color: var(--ink-3); overflow-wrap: anywhere; }
.org-ros-meter { display: block; margin-top: 6px; }
.org-ros-meter .ci-bar { display: block; }
.org-ros .chev { flex: none; color: var(--ink-3); transition: transform .15s; }
.org-ros[open] > summary > .chev { transform: rotate(90deg); }
.org-ros-body { border-top: 1px solid var(--line, var(--hair)); padding-bottom: var(--s2, 8px); }
.org-ros-row { display: flex; align-items: center; gap: var(--s3, 12px); width: 100%; min-height: 56px; padding: var(--s2, 8px) 0; text-align: left; background: none; border: 0; border-top: 1px solid var(--line, var(--hair)); color: inherit; font: inherit; cursor: pointer; }
.org-ros-body > .org-ros-row:first-child { border-top: 0; }
.org-ros-mark { flex: none; width: 24px; height: 24px; display: grid; place-items: center; }
.org-ros-mark svg { width: 18px; height: 18px; }
.org-ros-mark.ok { color: var(--ok, var(--green)); }
.org-ros-mark.warn { color: var(--gold-ink, #735705); }
.org-ros-mark.todo { width: 18px; height: 18px; margin: 3px; border-radius: 50%; border: 2px solid var(--line-strong, var(--ink-3)); }
.org-ros-more { display: flex; align-items: center; min-height: 44px; border-top: 1px solid var(--line, var(--hair)); color: var(--ink-3); font-weight: 600; font-size: max(var(--floor), calc(14 * var(--u))); }
.org-pick-head { margin: var(--s4, 16px) 0 var(--s2, 8px); }

/* Sub-screens: sm buttons are 40 px (organizer tables only); every checkbox label is a 44 px tap target */
.org .btn.sm, .sheet .btn.sm { min-height: 40px; }
.org .check, .sheet .check { min-height: 44px; }
.org .check input, .sheet .check input { width: 24px; height: 24px; flex: none; }
.check.tx-sent { margin-top: 6px; font-size: max(var(--floor), calc(14 * var(--u))); color: var(--ink-2); }
.org-slide-row { gap: var(--s2, 8px); }
.org-emoji-in { width: 64px; flex: none; padding: 0; text-align: center; font-size: 22px; }
.org-tl-ic { flex: none; width: 28px; text-align: center; font-size: 18px; }
.org-tl-t { font-weight: 600; }
.avatar.org-course-av { --size: 48px; display: grid; place-items: center; border-radius: var(--r2, 12px); background: var(--surface-2, var(--ivory-2)); color: var(--ink-3); }
/* Trip logistics: the golfers grid, late landings, the calendar button on Where you need to be */
.ta-wrap { padding: 0; overflow-x: auto; margin-top: var(--s3, 12px); }
.ta-grid { border-collapse: collapse; width: 100%; min-width: 720px; font-size: max(var(--floor), calc(14 * var(--u))); }
.ta-grid th { padding: var(--s2, 8px); text-align: left; font-size: max(var(--floor), calc(13 * var(--u))); font-weight: 600; color: var(--ink-3); }
.ta-grid tbody tr { border-top: 1px solid var(--line, var(--hair)); }
.ta-grid td { padding: 4px; }
.ta-grid .ta-name { padding: 6px 8px; white-space: nowrap; font-weight: 600; }
.ta-grid .ta-s { width: 84px; }
.ta-grid .ta-m { width: 104px; }
.ta-grid .ta-l { width: 130px; }
.ta-grid .ta-t { width: 112px; }
.ta-grid .input, .ta-grid .select { width: 100%; min-width: 0; min-height: 40px; padding: 6px 8px; font-size: max(var(--floor), calc(14 * var(--u))); }
.ta-grid .select { padding-right: 28px; background-position: right 8px center; }
.ta-chk-td { text-align: center; }
.ta-chk { display: inline-grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }
.ta-chk input { width: 24px; height: 24px; accent-color: var(--brand, var(--green)); }
.org-late-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2, 8px) var(--s3, 12px); padding: var(--s3, 12px) 0; border-top: 1px solid var(--line, var(--hair)); }
.org-late-row .grow { flex: 1 1 180px; min-width: 0; }
.org-late-row .btn { margin-left: auto; flex: none; }
.trip-cal { flex: none; min-width: 48px; padding: 0 12px; }
/* Organizer segmented tabs (Trip, Walk-ups, Engagement, Build) and the Build log rows reach 40 px */
.org .segmented button { min-height: 40px; }
.org .an-li { min-height: 44px; }
.org .an-heat .hr > span { color: var(--ink-2); opacity: 1; }
/* === end ORGANIZER === */

/* === design lane HOME === */
/* Home, Matches, the scorecard sheet, and the check-in, roll call, dinner and spotlight cards (Sep 12 2026). The markup
   follows lane SYSTEM's kit contracts (.score-band, .match-tile, .hole-grid > .hole-tile, .sheet-foot, .seg, .rank-disc,
   .team-letter); the rules here place those pieces on these screens and style this lane's own hm- parts. Tokens only. */

/* ---- Home: short by default ("Show everything on Home" brings back the long one) ---- */
.hm-home { padding-bottom: var(--s4); }
.hm-block { margin-top: var(--s3); }
.hm-moment > .section { margin-top: 0 !important; }
.hm-all > .section { margin-top: var(--s3) !important; }
.hm-band { width: 100%; text-align: left; font: inherit; }
button.hm-band:active { transform: scale(.99); }
.hm-mine { background: var(--surface-1); border: 2px solid var(--gold); border-radius: var(--r3); padding: var(--s1) var(--s3) var(--s3); box-shadow: var(--e1); }
.hm-mine > .match-tile { border: 0; outline: 0; box-shadow: none; background: transparent; padding-left: 0; padding-right: 0; }
.hm-cta { display: flex; align-items: center; justify-content: center; gap: var(--s2); width: 100%; height: auto; min-height: var(--tap-primary); margin-top: var(--s2); padding: var(--s3) var(--s4); border-radius: var(--r2); font-size: var(--t-body); font-weight: 700; }
.hm-cta.giant { min-height: var(--tap-score); font-size: var(--t-head); }
.hm-cta svg { width: 22px; height: 22px; flex: none; }
.hm-mfoot { margin-top: var(--s2); text-align: center; font-size: var(--t-meta); font-weight: 500; color: var(--ink-2); }
.hm-mfoot.faint { color: var(--ink-3); }
.hm-as { margin-top: var(--s2); text-align: center; }
.hm-as .as-chip { min-height: var(--tap); }
.hm-row { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 56px; padding: var(--s2) var(--s3) var(--s2) var(--s4); background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r3); text-align: left; color: var(--ink-1); }
.hm-row:active { background: var(--surface-2); }
.hm-row > svg { flex: none; width: 22px; height: 22px; color: var(--ink-2); }
.hm-row > svg:last-child { width: 18px; height: 18px; color: var(--ink-3); }
.hm-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hm-rt b { font-size: var(--t-body); font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-rt span { font-size: var(--t-meta); font-weight: 500; line-height: var(--lh-meta); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-pin { background: var(--gold-tint); border-color: var(--gold); }
.hm-pin > svg:first-child { color: var(--gold-ink); }
.hm-count { display: flex; align-items: center; gap: var(--s4); }
.hm-count-n { min-width: 2ch; text-align: center; font-size: var(--t-score); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--brand-ink); }
.hm-count-t { font-size: var(--t-head); font-weight: 700; line-height: var(--lh-head); }
.hm-story { margin-top: var(--s4); }
.hm-home .hm-mode { margin-top: var(--s4); }
.hm-all .section-head .link { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); min-width: var(--tap); }
.hm-story .section-head { margin-bottom: 0; align-items: center; }
.hm-story .section-head .link { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s1); }
.hm-story .tl-item { padding: var(--s2) 0; }
.hm-story .tl-item .tx { font-size: var(--t-meta); color: var(--ink-1); }
.hm-home:not(.hm-all) .hm-story .tl-item .tx { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hm-story .tl-share { min-height: var(--tap); }
.hm-faint { margin-top: var(--s3); font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--ink-3); }
.hm-mode { display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--tap-course); margin-top: var(--s5); padding: 0 var(--s4); border-radius: var(--r2); border: 1px dashed var(--line-strong); color: var(--brand-ink); font-size: var(--t-meta); font-weight: 600; }
.hm-mode:active { background: var(--surface-2); }
.hm-card { display: flex; align-items: center; gap: var(--s3); width: 100%; text-align: left; color: var(--ink-1); }
.hm-card > svg { flex: none; width: 26px; height: 26px; color: var(--gold-ink); }
.hm-card > svg:last-child { width: 18px; height: 18px; color: var(--ink-3); }
.hm-card-t, .spot-t, .dn-t { font-size: var(--t-body); font-weight: 700; line-height: 1.3; color: var(--ink-1); }
.card.hm-card.vote-card, .card.hm-card.vote-card.grace, .card.hm-card.unlock-card { background: var(--surface-1); border: 1px solid var(--line); }
.card.hm-card.bday-card { background: var(--gold-tint); border: 1px solid var(--gold); overflow: hidden; }
.card.hm-card + .card.hm-card { margin-top: var(--s3); }
.hm-x { display: inline-grid; place-items: center; min-width: var(--tap); min-height: var(--tap); border-radius: var(--r2); color: var(--ink-3); }
.hm-x svg { width: 18px; height: 18px; }
.quick button .i svg { width: 22px; height: 22px; color: var(--brand-ink); }
.sheet .coach-art { width: 120px; height: 72px; }
.sheet .coach-art svg { width: 100%; height: 100%; }

/* ---- Check-in, roll call, dinner and the guest of honor, on Home and More → Check-in ---- */
.card.checkin .link { display: inline-flex; align-items: center; min-height: var(--tap); }
.ci-two { display: flex; gap: var(--s2); }
.ci-go { display: flex; align-items: center; justify-content: center; gap: var(--s2); width: 100%; height: auto; min-height: var(--tap-primary); margin-top: var(--s3); font-size: var(--t-body); }
.ci-go svg { width: 20px; height: 20px; }
.ci-me { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); font-weight: 600; color: var(--ink-1); }
.ci-me > svg { flex: none; width: 20px; height: 20px; color: var(--ok); }
.ci-me .btn.quiet { height: auto; min-height: var(--tap); padding: 0 var(--s3); background: transparent; box-shadow: none; color: var(--brand-ink); }
.ci-also { width: 100%; height: auto; min-height: var(--tap-course); margin-top: var(--s2); }
.ci-note { margin-top: var(--s2); }
.ci-latest { display: flex; align-items: center; gap: var(--s2); }
.ci-latest > svg { flex: none; width: 18px; height: 18px; color: var(--ok); }
.ci-line .btn, .ci-cart .btn { height: auto; min-height: var(--tap); }
.card.dinner { background: var(--surface-1); border: 1px solid var(--line); }
.card.dinner .btn { height: auto; min-height: var(--tap-course); }
.dn-t { margin-top: var(--s1); }
.dn-warn { color: var(--gold-ink); font-weight: 700; }
.dn-two { display: flex; gap: var(--s2); margin-top: var(--s3); }
.dn-two .btn { flex: 1; height: auto; min-height: var(--tap-course); }
.card.spot-card { background: var(--gold-tint); border: 1px solid var(--gold); }
.spot-k { color: var(--gold-ink); }
.spot-tally { display: grid; gap: var(--s2); margin-top: var(--s3); text-align: center; }
.spot-tally b { display: block; font-size: var(--t-result); font-weight: 700; line-height: 1.1; color: var(--ink-1); }
.spot-tally span { display: block; font-size: var(--t-label); font-weight: 600; color: var(--ink-2); }
.spot-tally small { display: block; font-size: var(--t-micro); color: var(--ink-3); }
.spot-gift { margin-top: var(--s3); padding: var(--s3); border-radius: var(--r2); background: var(--surface-1); border: 1px solid var(--line); }
.spot-two { display: flex; gap: var(--s2); margin-top: var(--s3); }
.spot-two .btn { height: auto; min-height: var(--tap-course); }
.spot-n, .spot-line { margin-top: var(--s2); }

/* ---- Matches: the day switch, the day line, the tiles, three rows ---- */
.hm-days { position: sticky; top: calc(var(--header-h) + var(--safe-t)); z-index: 20; margin: 0 calc(-1 * var(--s4)); padding: var(--s2) var(--s4); background: var(--bg); }
.hm-days .seg { overflow-x: auto; scrollbar-width: none; }
.hm-days .seg::-webkit-scrollbar { display: none; }
.hm-days .seg > button { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 64px; height: auto; min-height: var(--tap); padding: 0 var(--s3); font-size: var(--t-body); }
.hm-live { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--live-dot); animation: pulse 1.4s infinite; }
.hm-dayline { display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: var(--tap-course); margin-top: var(--s1); text-align: left; font-size: var(--t-body); font-weight: 600; color: var(--ink-1); }
.hm-dayline svg { flex: none; width: 18px; height: 18px; color: var(--ink-3); }
.hm-tiles { display: grid; gap: var(--s3); margin-top: var(--s2); }
.hm-rows { display: grid; gap: var(--s2); margin-top: var(--s5); }
.hm-admin { margin-top: var(--s4); }
.hm-admin .btn { width: 100%; }
.mt-dd { flex: none; display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 0 var(--s2); border-radius: var(--r-pill); background: var(--gold-tint); color: var(--gold-ink); font-size: var(--t-micro); font-weight: 700; white-space: nowrap; }
.mt-dd svg { width: 12px; height: 12px; }
.mt-pend { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.mt-sub { font-size: var(--t-micro); color: var(--ink-3); white-space: nowrap; }
.match-tile.void .mt-names { text-decoration: line-through; color: var(--ink-3); }
.hm-scope { margin-top: var(--s2); }
.hm-board { margin-top: var(--s3); }
.hm-table td.rank { width: 44px; }
.hm-table tbody tr { cursor: pointer; }
.hm-table tbody td { height: 48px; }
.hm-table tr.me td { background: var(--gold-tint); }
.hm-more { margin-top: var(--s2); }
.sheet .card.shots, .sheet .card.shots.board-tragedy { background: var(--surface-1); border: 1px solid var(--line); }
.sheet .card.shots .btn, .sheet .shot .vote { height: auto; min-height: var(--tap); min-width: var(--tap); }
.sheet .nom-choice { min-height: 64px; }

/* ---- The scorecard sheet ---- */
.score-band.sm.hm-mband { padding: var(--s3) var(--s4); border-radius: var(--r3); box-shadow: none; }
.score-band.sm.hm-mband .sb-row { display: grid; grid-template-columns: minmax(0, 1fr) 2px minmax(0, 1fr); align-items: end; gap: var(--s3); }
.score-band.sm.hm-mband .sb-team { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.score-band.sm.hm-mband .sb-name { max-width: 100%; font-size: var(--t-label); font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score-band.sm.hm-mband .sb-num { font-size: var(--t-score); line-height: 1.05; }
.score-band.sm.hm-mband .sb-status { display: block; margin-top: var(--s2); text-align: center; font-size: var(--t-meta); font-weight: 600; color: var(--ink-1); }
.hm-exp { margin-top: var(--s2); text-align: center; font-size: var(--t-label); font-weight: 500; color: var(--ink-2); }
.hm-exp.won { font-weight: 600; color: var(--ink-1); }
.sheet .hole-panel { margin-top: var(--s3); padding: var(--s3); background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r3); }
.hole-panel .hp-state { display: inline-flex; align-items: center; gap: var(--s1); font-size: var(--t-label); font-weight: 600; color: var(--ink-3); }
.hole-panel .hp-state svg { width: 16px; height: 16px; color: var(--ok); }
.sheet .hole-panel .hn { margin-top: 2px; font-family: var(--font-ui); font-size: var(--t-score); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
.hole-panel .hp-par { margin-left: var(--s2); font-size: var(--t-head); font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.hole-panel .hp-meta { margin-top: var(--s1); font-size: var(--t-label); font-weight: 500; color: var(--ink-3); }
.hole-panel .hp-meta.gold { font-weight: 700; color: var(--gold-ink); }
.hole-panel .hp-sdot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--gold); vertical-align: 1px; }
.sheet .hole-panel .worth, .sheet .hole-panel .worth.hot, .sheet .hole-panel .worth.fire { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; margin-top: var(--s2); font-size: var(--t-meta); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.sheet .hole-panel .worth.hot, .sheet .hole-panel .worth.fire { font-weight: 700; color: var(--gold-ink); }
.sheet .hole-panel .worth svg { width: 16px; height: 16px; color: var(--gold-ink); }
.sheet .hole-panel .dd-called { width: 100%; font-weight: 700; color: var(--gold-ink); }
.sheet .stk-side { padding: var(--s2) var(--s2) var(--s3); border: 1.5px solid var(--line-strong); border-radius: var(--r3); background: var(--surface-1); }
.sheet .stk-side.closed { padding: 0; border-style: dashed; }
.sheet .stk-side.conceded { background: var(--surface-2); }
.sheet .stk-open { min-height: var(--tap-primary); font-size: var(--t-body); font-weight: 700; color: var(--ink-1); }
.sheet .stk-nm { font-size: var(--t-body); font-weight: 700; }
.sheet .stk-concede { min-height: var(--tap-course); padding: 0 var(--s4); border: 1.5px solid var(--line-strong); font-size: var(--t-label); font-weight: 700; color: var(--ink-1); }
.sheet .stk-ball { grid-template-columns: auto auto; justify-content: space-between; gap: var(--s2); margin-top: var(--s3); }
.sheet .stk-who { grid-column: 1 / -1; font-size: var(--t-body); }
.sheet .stk-step { gap: 6px; }
.sheet .stk-btn { width: var(--tap-score); height: var(--tap-score); border-radius: var(--r3); border: 1.5px solid var(--line-strong); background: var(--surface-2); color: var(--ink-1); font-size: 34px; font-weight: 600; }
.sheet .stk-num { width: 64px; height: var(--tap-score); border: 1.5px solid var(--line-strong); border-radius: var(--r3); font-size: 34px; font-weight: 700; }
.sheet .stk-pu { min-width: 64px; height: var(--tap-score); border-radius: var(--r3); border: 1.5px solid var(--line-strong); font-size: var(--t-label); color: var(--ink-1); }
.sheet .stk-pu.on, .sheet .stk-concede.on { background: var(--gold-tint); border-color: var(--gold); color: var(--gold-ink); }
.sheet .stk-preview { margin-top: var(--s3); padding: var(--s3); border-radius: var(--r2); background: var(--surface-2); text-align: center; font-size: var(--t-body); font-weight: 700; color: var(--ink-2); }
.sheet .stk-preview.won { background: var(--brand-tint); color: var(--ink-1); }
@media (max-width: 380px) { .sheet .stk-btn { width: 60px; } .sheet .stk-num, .sheet .stk-pu { width: 54px; min-width: 54px; } }
.sheet .hole-panel .xchips { gap: var(--s2); }
.sheet .hole-panel .xchip { gap: 6px; height: auto; min-height: var(--tap-course); padding: 0 var(--s4); border: 1.5px solid var(--line-strong); font-size: var(--t-label); color: var(--ink-1); }
.sheet .hole-panel .xchip.dd { flex: 1 1 140px; justify-content: center; }
.sheet .hole-panel .xchip svg { width: 16px; height: 16px; color: var(--gold-ink); }
.sheet .hole-panel .xchip.on { background: var(--gold-tint); border-color: var(--gold); color: var(--gold-ink); }
.sheet .hole-panel .xchip.used { text-decoration: none; opacity: .7; }
.sheet .hole-panel .dd-call, .sheet .hole-panel #comeback, .sheet .hole-panel #undo-last, .sheet .hole-panel #save-note { height: auto; min-height: var(--tap); margin-top: var(--s2); }
.sheet .hole-panel .textbtn, .sheet .handshake .textbtn, .sheet .queued-pill .textbtn { min-height: var(--tap); padding: 0 var(--s2); }
.sheet .hlbtn { min-height: var(--tap); }
.sheet .hlbtn svg { width: 18px; height: 18px; }
.sheet .hnote-cam { min-width: var(--tap); min-height: var(--tap); }
.sheet .hnote-cam svg { width: 22px; height: 22px; }
.sheet .hm-media-x svg { width: 14px; height: 14px; }
.sheet .confirm-card .btn, .sheet .handshake .btn, .sheet .confirm-strip .btn { height: auto; min-height: var(--tap-course); }
.sheet .confirm-strip .chip { height: auto; min-height: var(--tap); }
.sheet .cc-line { margin-top: var(--s1); font-size: var(--t-meta); color: var(--ink-2); }
.sheet .hole-grid { margin-top: var(--s4); }
.hole-tile.bad { box-shadow: 0 0 0 3px var(--err); }
.hole-tile .ht-dd.two { right: 15px; }
.hole-tile .ht-dots { position: absolute; left: 5px; bottom: 4px; display: flex; gap: 2px; }
.hole-tile .ht-dots .ht-dot { position: static; }
.hm-who { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 var(--s2); margin-top: var(--s4); }
.hm-person { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 var(--s1); font-size: var(--t-label); }
.hm-vs { font-size: var(--t-label); color: var(--ink-3); }
.hm-meta { margin-top: var(--s1); text-align: center; font-size: var(--t-label); font-weight: 500; color: var(--ink-2); }
.hm-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); margin-top: var(--s4); }
.hm-tools .btn { width: 100%; height: auto; min-height: var(--tap-course); padding: var(--s2) var(--s3); white-space: normal; font-size: var(--t-label); }
.hm-tools .btn.wide { grid-column: 1 / -1; }
.hm-final { margin-top: var(--s4); padding: var(--s4); text-align: center; border-radius: var(--r3); background: var(--gold-tint); }
.hm-final-t { margin-top: var(--s1); font-size: var(--t-head); font-weight: 700; color: var(--ink-1); }
.sheet .hm-foot .stk-save { width: 100%; height: auto; min-height: var(--tap-score); margin: 0; border-radius: var(--r3); font-size: var(--t-body); }
.sheet .stk-card { margin-top: var(--s4); }
.sheet .stk-scroll { border-color: var(--line); border-radius: var(--r2); }
.sheet .stk-card table { font-size: var(--t-label); }
.sheet .stk-card th, .sheet .stk-card td { min-width: 32px; padding: 8px 6px; border-bottom-color: var(--line); }
.sheet .stk-card th:first-child { background: var(--surface-1); }
.sheet .stk-card td.stk-tot { background: var(--surface-2); }
.sheet .stk-legend { font-size: var(--t-micro); color: var(--ink-3); }
.sheet .stk-cup .small { font-size: var(--t-label); }
.sheet .cc-line svg { width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; color: var(--gold-ink); }
.sheet .confirm-card .btn svg, .sheet .confirm-strip .btn svg { width: 18px; height: 18px; }
.hole-tile .ht-dots .ht-dot.red { background: var(--red); }
.hole-tile .ht-dots .ht-dot.blue { background: var(--blue); }
/* === end HOME === */

/* === design lane PEOPLE === */
/* Feed, Chat, Side bets, Players (roster, Stats segment, the Court, profiles), More, Awards, Hall of Fame, The Daily,
   the ceremony and Clubhouse TV, the fan screens, sign-in and the photo games (Sep 12 2026). Lane SYSTEM's tokens only;
   everything here is scoped to those screens' own classes. */

/* shared bits: a quiet link or text button with a 44px hit area, the numbered rank disc, empty-state icons */
.ppl-link, .pq, .textbtn.pq { min-height: var(--tap); display: inline-flex; align-items: center; padding: 0 var(--s2); font-weight: 600; font-size: var(--t-label); color: var(--brand-ink); }
.textbtn.faint.pq { color: var(--ink-3); }
.rank-disc { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); font-weight: 700; font-size: 13px; line-height: 1; font-variant-numeric: tabular-nums; }
.rank-disc.r1 { background: #D4AF37; color: #1B1300; }
.rank-disc.r2 { background: #CBD0D8; color: #1B2233; }
.rank-disc.r3 { background: #D9A877; color: #2A1A0C; }
.empty .e svg { width: 40px; height: 40px; color: var(--ink-3); }
.deco { display: inline-block; margin-right: var(--s2); }
.ppl-head { margin-top: var(--s5); }
.ppl-quiet { margin-top: 0; }
.ppl-seg, .ppl-sub { margin-top: var(--s3); }
.ppl-seg button, .ppl-sub button { min-height: var(--tap); }
.btn > svg, .react > svg, .chip > svg { flex: none; }
.react svg { width: 16px; height: 16px; }

/* Feed: the segment, the compose row, the tag chips, post cards */
.ppl-feed #fbody, .ppl-bets { margin-top: var(--s3); }
.seg-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 6px; border-radius: var(--r-pill); background: var(--live-bg); color: var(--live-ink); font-size: 12px; font-weight: 700; }
.compose-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s2) var(--s2) var(--s3); background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r3); }
.compose-open { flex: 1; min-width: 0; min-height: var(--tap-course); text-align: left; color: var(--ink-3); font-size: var(--t-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compose-open.has { color: var(--ink-1); }
.compose-cam { flex: none; width: var(--tap-course); height: var(--tap-course); border-radius: 50%; display: grid; place-items: center; color: var(--brand-ink); background: var(--brand-tint); cursor: pointer; }
.compose-cam svg { width: 24px; height: 24px; }
.compose-sheet .compose-text { width: 100%; min-height: 120px; margin-top: var(--s2); font-size: var(--t-body); }
.compose-sheet .compose-prev { display: flex; gap: var(--s2); overflow-x: auto; margin: var(--s3) 0 0; }
.compose-sheet .compose-prev > div { position: relative; width: 84px; height: 84px; flex: none; border-radius: var(--r2); overflow: hidden; background: var(--surface-2); }
.compose-sheet .compose-prev img, .compose-sheet .compose-prev video { width: 100%; height: 100%; object-fit: cover; }
.compose-sheet .compose-prev button { position: absolute; top: 4px; right: 4px; width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,.62); color: #fff; display: grid; place-items: center; }
.compose-sheet .compose-prev button svg { width: 16px; height: 16px; }
.compose-sheet .compose-add { margin-top: var(--s3); cursor: pointer; }
.compose-sheet .compose-opts { margin-top: var(--s2); }
.compose-sheet .compose-off { margin-top: var(--s4); gap: var(--s3); }
.compose-off-t { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.compose-off-t svg { width: 18px; height: 18px; }
.compose-sheet .sheet-foot { position: sticky; bottom: calc(-22px - var(--safe-b)); margin: var(--s4) -18px calc(-22px - var(--safe-b)); padding: var(--s3) 18px calc(var(--s3) + var(--safe-b)); background: var(--bg); border-top: 1px solid var(--line); }
.ppl-chips { margin-top: var(--s3); }
.ppl-chips .chip { min-height: var(--tap); }
.chip .chip-n { margin-left: 6px; color: var(--ink-3); font-weight: 600; }
.chip.on .chip-n { color: inherit; opacity: .85; }
.ppl-posts { margin-top: var(--s3); }
.ppl-more { margin-top: var(--s3); }
.post { border-color: var(--line); border-radius: var(--r3); }
.post .phead { gap: var(--s3); padding: var(--s3) var(--s2) var(--s2) var(--s4); margin-top: 0; }
.post .phead .nm { font-size: var(--t-body); font-weight: 600; }
.post .phead .ts { font-size: var(--t-micro); color: var(--ink-3); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 2px; }
.post .phead .ts .tag { padding: 2px 8px; border-radius: var(--r1); background: var(--surface-2); color: var(--ink-2); font-size: var(--t-micro); }
.post .offrec, .fan-post .offrec { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: var(--t-micro); color: var(--ink-3); }
.post .offrec svg { width: 13px; height: 13px; }
.post .ptext { padding: 0 var(--s4) var(--s3); font-size: var(--t-body); }
.post .pfoot { gap: var(--s2); padding: var(--s2) var(--s3) var(--s2) var(--s4); }
.post .react, .msg-rx .react, .fan-cheers .react { min-height: var(--tap); padding: 0 var(--s3); font-size: var(--t-label); }
.post .react.add { width: var(--tap); padding: 0; justify-content: center; }
.post .react.add svg { width: 20px; height: 20px; }
.post .pfoot .cbtn { min-height: var(--tap); padding: 0 var(--s2); font-size: var(--t-label); color: var(--ink-2); }
.post .emoji-pick { gap: var(--s1); padding: 0 var(--s4) var(--s3); }
.post .emoji-pick button { width: var(--tap); height: var(--tap); border-radius: var(--r2); background: var(--surface-2); }
.post .comments { background: var(--surface-2); padding: var(--s2) var(--s4) var(--s3); }
.post .comment { font-size: var(--t-meta); align-items: center; }
.post .comment .del, .wall-note .del { min-width: var(--tap); min-height: var(--tap); display: inline-grid; place-items: center; margin: -6px -8px -6px auto; padding: 0; color: var(--ink-3); }
.post .comment .del svg, .wall-note .del svg { width: 16px; height: 16px; }
.post .comment .del-t, .wall-note .del-t { padding: 0 var(--s2); font-size: var(--t-micro); font-weight: 600; }
.post .comment-form input { height: var(--tap); }
.post .comment-form .btn, .wall-form .btn, .cap-card .comment-form .btn { height: var(--tap); }

/* Chat: its own screen (no tab bar), the room in the header, a one-row dock */
.header .title.room-title { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0 var(--s2); border-radius: var(--r2); cursor: pointer; }
.header .title.room-title:active { background: var(--surface-2); }
.room-list .list-item { min-height: 64px; }
.room-list .list-item.on { background: var(--brand-tint); }
.room-list .li-t { display: flex; align-items: center; gap: var(--s2); font-weight: 700; }
.room-list .li-check svg { width: 22px; height: 22px; color: var(--brand-ink); }
.ppl-chat .chat-hint { margin: var(--s2) 0 0; }
.war-pin-t { margin-top: 4px; }
.war-pin-f { margin-top: 4px; }
.screen.no-nav:has(.chat-wrap) { padding-bottom: 0; }
.screen.no-nav .chat-wrap { min-height: calc(100dvh - var(--header-h) - var(--safe-t)); }
.screen.no-nav .chat-bar { bottom: 0; padding: var(--s2) 0 calc(var(--s2) + var(--safe-b)); }
.chat-closed-dock { position: sticky; bottom: calc(var(--s2) + var(--safe-b)); }
.screen:not(.no-nav) .chat-closed-dock { bottom: calc(var(--nav-h) + var(--safe-b) + var(--s2)); }
.chat-list #chat-older { margin: var(--s1) 0 var(--s2); min-height: var(--tap); }
.chat-off { width: var(--tap); height: var(--tap); flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); background: var(--surface-1); border: 1px solid var(--line); }
.chat-off svg { width: 20px; height: 20px; }
.chat-off.on { background: var(--gold-tint); color: var(--gold-ink); border-color: var(--gold); }
.chat-offnote { display: flex; align-items: center; gap: 6px; font-size: var(--t-micro); font-weight: 600; color: var(--gold-ink); }
.chat-offnote svg { width: 14px; height: 14px; flex: none; }
.msg .offrec-i svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.msg .pinbtn { min-height: var(--tap); padding: 0 var(--s2); }
.msg-actions .ma-report { color: var(--ink-2); }
.reply-bar .del { min-width: var(--tap); min-height: var(--tap); display: grid; place-items: center; }
.reply-bar .del svg, .chat-prev button svg { width: 16px; height: 16px; }

/* Side bets (More → Side bets) and polls */
.bet-days { gap: var(--s2); }
.bet-days .chip { flex-direction: row; min-height: var(--tap); padding: 0 var(--s4); white-space: nowrap; }
.bet-budget .bb-note { margin-top: var(--s2); }
.bet-lb-row { gap: var(--s2) var(--s4); }
.bet-lb-one { display: inline-flex; align-items: center; gap: 6px; }
.bet-lb .chev svg { width: 20px; height: 20px; color: var(--ink-3); }
.bet-won svg { width: 16px; height: 16px; color: var(--gold-ink); vertical-align: -3px; margin-right: 4px; }
.bet-act .btn, .bet-foot .textbtn { min-height: var(--tap); }
.bet-sub, .bet-note { font-size: var(--t-micro); }
.pill.outline { color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.poll { border-color: var(--line); border-radius: var(--r3); }
.poll.sidebet { background: var(--surface-1); }
.poll .q { font-size: var(--t-head); font-weight: 700; }
.poll .stake { color: var(--gold-ink); }
.poll .stake svg { width: 16px; height: 16px; }
.poll .by, .poll .pf { font-size: var(--t-micro); }
.poll .pf .textbtn { min-height: var(--tap); }
.poll-opts { margin-top: var(--s2); }
.opt { min-height: var(--tap); }
.opt.win .lbl::after { content: none; }
.opt { text-align: left; }
.opt .lbl > span:first-child { flex: 1; min-width: 0; text-align: left; }
.opt-won { margin-left: var(--s2); padding: 1px 8px; border-radius: var(--r-pill); background: var(--gold-tint); color: var(--gold-ink); font-size: var(--t-micro); font-weight: 700; }
.lb-podium .md { margin-top: -6px; }

/* Players: the segment, team heads, cards; the Court at the foot */
.ppl-players .team-head { margin: var(--s5) 0 var(--s3); padding-left: var(--s3); border-left: 6px solid var(--ink-3); }
.ppl-players .team-head.red { border-left-color: var(--red); }
.ppl-players .team-head.blue { border-left-color: var(--blue); }
.ppl-players .team-head.gold { border-left-color: var(--gold); }
.ppl-players .team-head .swatch { display: none; }
.ppl-players .team-head .pts { font-family: var(--font-ui); font-weight: 700; font-size: var(--t-result); color: var(--ink-1); }
.pgrid { gap: var(--s3); }
.pcard { border-color: var(--line); border-radius: var(--r3); }
.pcard-main { padding: var(--s4) var(--s3); min-height: 176px; }
.pcard .nm { font-size: var(--t-body); font-weight: 600; }
.pcard .nick { font-family: var(--font-story); font-style: normal; font-weight: 600; color: var(--gold-ink); font-size: var(--t-label); }
.pcard .meta { font-size: var(--t-micro); color: var(--ink-3); }
.pcard .rec { font-family: var(--font-ui); font-weight: 700; color: var(--ink-1); font-size: var(--t-result); }
.pcard .cap { top: 8px; right: 8px; letter-spacing: 0; font-weight: 700; color: var(--gold-ink); background: var(--gold-tint); font-size: var(--t-micro); }
.court-sec { margin-top: var(--s6); }
.court-sub { margin: -4px 0 var(--s3); }
.card.court { background: var(--surface-1); border: 1px solid var(--line); }
.court-eb { margin: var(--s3) 0 6px; }
.court-idle { color: var(--ink-2); font-size: var(--t-meta); }
.card.court-card { background: var(--surface-1); border: 1px solid var(--line); }
.motion .m-name { font-family: var(--font-story); font-weight: 600; color: var(--ink-1); }
.motion .m-votes { gap: var(--s2); margin-top: var(--s3); }
.motion .m-votes .btn { min-height: var(--tap-course); }
.motion .textbtn { min-height: var(--tap) !important; }
.m-bar i { background: var(--ink-3); }
.m-bar i.pass { background: var(--brand); }
.m-bar .m-mark { background: var(--ink-1); }

/* Stats (Players → Stats, and #/stats on its own) */
.ppl-stats { margin-top: var(--s4); }
.lb { border-color: var(--line); border-radius: var(--r3); }
.lb .lbh .t { font-size: var(--t-label); font-weight: 700; gap: 0; }
.lb .lbh .deco { font-size: 18px; }
.lb-row { min-height: 52px; }
.lb-row .vl, .race-pts { color: var(--ink-1); font-weight: 700; }
.lb.shame .lb-row .vl { color: var(--ink-1); }
.race-bar.dirt i { background: var(--ink-3); }
.race-row { min-height: 60px; }
.race-sub { font-size: var(--t-micro); }
.shame-top { text-align: center; }
.shame-h { font-size: var(--t-head); font-weight: 700; line-height: var(--lh-head); }
.shame-top .small { margin-top: 6px; color: var(--gold-ink); }
.cup-row .yr { color: var(--gold-ink); font-family: var(--font-ui); font-weight: 700; }

/* the profile: a white hero with the team's bar, stats in ink */
#profile .profile-hero { margin-top: var(--s3); background: var(--surface-1); color: var(--ink-1); border: 1px solid var(--line); border-top: 6px solid var(--ink-3); box-shadow: none; }
#profile .profile-hero.red { border-top-color: var(--red); }
#profile .profile-hero.blue { border-top-color: var(--blue); }
#profile .profile-hero.gold { border-top-color: var(--gold); }
#profile .profile-hero .avatar { box-shadow: 0 0 0 4px var(--surface-2); }
#profile .profile-hero .nm { font-size: var(--t-title); font-weight: 700; }
#profile .profile-hero .nick { font-family: var(--font-story); font-style: normal; font-weight: 600; opacity: 1; color: var(--gold-ink); }
#profile .profile-hero .meta { opacity: 1; gap: var(--s2); margin-top: var(--s3); }
#profile .profile-hero .meta span { padding: 4px 10px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); font-size: var(--t-label); font-weight: 600; }
#profile .profile-hero .meta span.gold { background: var(--gold-tint); color: var(--gold-ink); }
#profile .ppl-prof-sec { margin-top: var(--s5); }
#profile .statbar { border-color: var(--line); border-radius: var(--r3); }
#profile .statbar .v { color: var(--ink-1); font-weight: 700; }
#profile .statbar .l { letter-spacing: 0; text-transform: none; font-weight: 600; font-size: var(--t-micro); }
#profile .prof-bio { font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink-2); }
#profile .prof-career { justify-content: center; gap: var(--s4); margin-top: var(--s2); }
.h2h-row { min-height: 56px; }
.h2h-row .rec.w { color: var(--ink-1); font-weight: 700; }
.h2h-row .rec.l { color: var(--ink-3); }
#profile .list-item .icon svg { width: 22px; height: 22px; color: var(--gold-ink); }
.photo-grid button { min-height: var(--tap); }

/* More: three groups */
.more-group .section-head { margin-bottom: var(--s2); }
.more-group:first-of-type { margin-top: var(--s5); }
.more-foot { margin-top: var(--s6); }

/* Awards Night, the Hall of Fame, the scrapbook header */
.aw-head { margin-top: var(--s3); text-align: center; padding: var(--s5) var(--s4); }
.aw-h { font-family: var(--font-story); font-weight: 700; font-size: var(--t-title); line-height: var(--lh-title); color: #fff; margin-top: 4px; }
.aw-sub { margin-top: 4px; font-size: var(--t-meta); color: rgba(255,255,255,.88); }
.aw-hall { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); margin-top: var(--s1); padding: 0 var(--s2); font-weight: 700; color: #F1D27A; }
.aw-hall svg { width: 18px; height: 18px; }
#awards .award { border-color: var(--line); border-radius: var(--r3); box-shadow: none; }
#awards .award.gold, #awards .award.shame, #awards .award.custom { background: var(--surface-1); }
#awards .award.gold { border-color: var(--gold); }
#awards .award .a-val, #awards .award.shame .a-val { color: var(--ink-1); font-weight: 700; }
#awards .award .a-nick { font-style: normal; font-weight: 600; color: var(--gold-ink); }
#awards .award .a-blurb, #awards .award .a-runner { font-size: var(--t-micro); color: var(--ink-2); }
#awards .award.cup { background: var(--stage); border: 0; }
#awards .award.cup.red { background: var(--red); }
#awards .award.cup.blue { background: var(--blue); }
#awards .award.cup .a-title { color: #fff; }
#awards .award.cup .a-team { font-family: var(--font-story); font-weight: 700; font-size: var(--t-title); line-height: var(--lh-title); margin-top: var(--s2); }
#awards .award.cup .a-val { color: #fff; font-size: var(--t-result); margin-top: var(--s1); }
#awards .award.cup .a-sub { color: #fff; font-weight: 600; font-size: var(--t-meta); margin-top: 2px; }
.sealed-i svg { width: 40px; height: 40px; color: var(--ink-3); }
.sealed-h { font-size: var(--t-head); font-weight: 700; margin-top: 6px; }
.fade-in .card.hof { background: var(--surface-1); border: 1px solid var(--line); border-left: 4px solid var(--gold); }
.hof-year .display { color: var(--gold-ink); font-weight: 700; }
.hof-name { font-weight: 700; }
.hof-note { margin-top: 4px; color: var(--ink-2); }
.hof-titles .hof-n { font-size: var(--t-score); font-weight: 700; line-height: 1; color: var(--ink-1); }
.hof-titles .small { margin-top: 6px; }
.rb-ic { width: 28px; font-size: 20px; text-align: center; }
#hall-extras .list-item .icon svg { width: 22px; height: 22px; }

/* The Daily: the headline once, a regular-weight serif body */
.recap { border-color: var(--line); border-radius: var(--r3); }
.recap .rb { font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif; font-weight: 400; font-size: var(--t-body); line-height: 1.6; color: var(--ink-1); font-variation-settings: normal; }
.recap .rb p:first-child::first-letter { font-family: var(--font-story); font-weight: 600; color: var(--brand-ink); }
.recap .masthead { color: var(--gold-ink); }

/* the ceremony and Clubhouse TV: the same dark stage, nothing dimmer than 85% white */
.cer-top { font-size: 13px; }
.cer-x { width: var(--tap); height: var(--tap); display: grid; place-items: center; padding: 0; color: rgba(255,255,255,.9); }
.cer-x svg { width: 22px; height: 22px; }
.cer-blurb, .cer-env, .cer-auto { color: rgba(255,255,255,.88); }
.cer-nick { font-style: normal; font-family: var(--font-story); font-weight: 600; color: rgba(255,255,255,.9); }
.cer-run, .cer-next, .cer-wait, .cer-run-time { color: rgba(255,255,255,.85); }
.cer-end { color: rgba(255,255,255,.85); min-height: var(--tap); }
.cer-auto .textbtn { min-height: var(--tap); }
.cer-plq .l { color: rgba(255,255,255,.88); }
.tv-when, .tv-vs, .tv-sub, .tv-cer-blurb, .tv-cer-env, .tv-plq .l { color: rgba(255,255,255,.88); }
.tv-h3, .tv-m .st, .tv-empty, .tv-cer-run { color: rgba(255,255,255,.85); }
.tv-nom span { color: rgba(255,255,255,.9); }
.tv-cer-nick { font-style: normal; font-family: var(--font-story); font-weight: 600; color: rgba(255,255,255,.9); }
.tv-team.red { border-color: #FF9E92; background: rgba(184,48,42,.28); }
.tv-team.blue { border-color: #A4C0FF; background: rgba(28,75,156,.34); }
.tv-m .side.red { color: #FF9E92; }
.tv-m .side.blue { color: #A4C0FF; }

/* the fan screens */
.fan-shots .vote svg { width: 18px; height: 18px; }
.fan-shots .vote { min-height: var(--tap); }

/* sign-in */
.login .tagline { font-style: normal; font-weight: 600; }
.login .who > .eyebrow.center { font-size: var(--t-head); font-weight: 700; color: var(--ink-1); letter-spacing: 0; text-transform: none; }

/* photo games: the hunt card, a find's badge, the caption contest */
.hunt-list { margin-top: var(--s2); }
.hunt-row { display: flex; align-items: center; gap: var(--s3); min-height: var(--tap); padding: 6px 0; border-top: 1px solid var(--line); }
.hunt-mk { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); }
.hunt-mk svg { width: 16px; height: 16px; }
.hunt-mk.ok { background: var(--brand-tint); color: var(--brand-ink); }
.hunt-mk.no { color: var(--ink-3); }
.hunt-mk.open { background: transparent; box-shadow: inset 0 0 0 2px var(--line-strong); }
.hunt-badge { margin: var(--s3) var(--s4) 0; padding: var(--s2) var(--s3); border-radius: var(--r2); background: var(--gold-tint); display: flex; flex-wrap: wrap; gap: 6px var(--s2); align-items: center; }
.hunt-b-t { font-weight: 700; min-width: 0; color: var(--ink-1); }
.hunt-b-org { width: 100%; justify-content: flex-end; gap: var(--s2); }
.cap-card { margin-top: var(--s3); padding: 0; overflow: hidden; }
.cap-photo { display: block; width: 100%; padding: 0; border: 0; background: #000; }
.cap-photo img { display: block; width: 100%; max-height: 340px; object-fit: cover; }
.cap-body { padding: var(--s3) var(--s4); }
.cap-win { font-family: var(--font-story); font-weight: 700; font-size: var(--t-result); line-height: 1.2; margin-top: 6px; }
.sv-done-i svg { width: 26px; height: 26px; color: var(--brand-ink); }

/* tap targets: golfer-screen buttons, chat faces and bubbles, cheers, the compose sheet's Off the record row */
.ppl-head .btn.sm, .court-sec .section-head .btn.sm, .motion .btn.sm { height: var(--tap); }
.msg > button[data-player] { min-width: var(--tap); min-height: var(--tap); display: grid; place-items: end center; flex: none; }
.msg .bubble { min-height: var(--tap); }
.fan-cheers .react { min-width: var(--tap); justify-content: center; }
.poll .pf .textbtn { min-width: var(--tap); justify-content: center; }
.fan-screen .section-head .link { min-height: var(--tap); display: inline-flex; align-items: center; padding: 0 var(--s2); }
.compose-sheet .compose-off { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 64px; text-align: left; padding: var(--s2) 0; }
.compose-sheet .compose-off .grow { display: flex; flex-direction: column; gap: 2px; }
.compose-sheet .compose-off .toggle { pointer-events: none; }
.login .pq { min-height: var(--tap); }
/* === end PEOPLE === */

/* === lane RELATIVES === */
/* Organizer → Relatives (views/relatives-admin.js) and its Paste a list sheet. Tokens and the kit from the top of the file. */
.rel-sec { margin-top: var(--s6); }
.rel-sec:first-child { margin-top: var(--s3); }
.rel-row { display: flex; align-items: center; gap: var(--s3); min-height: 56px; }
.rel-row .grow { flex: 1 1 auto; min-width: 0; }
.rel-t { font-size: var(--t-body); font-weight: 600; line-height: var(--lh-head); color: var(--ink-1); overflow-wrap: anywhere; }
.rel-m { margin-top: 2px; font-size: var(--t-label); line-height: var(--lh-meta); color: var(--ink-3); overflow-wrap: anywhere; }
.rel-wait { flex-wrap: wrap; padding-top: var(--s3); padding-bottom: var(--s3); }
.rel-wait .grow { flex: 1 1 180px; }
.rel-acts { display: flex; gap: var(--s2); flex: none; margin-left: auto; }
.rel-x { flex: none; display: grid; place-items: center; width: var(--tap); height: var(--tap); margin-right: calc(-1 * var(--s2)); border-radius: var(--r2); color: var(--ink-2); }
.rel-x:hover, .rel-x:active { background: var(--surface-2); color: var(--err); }
.rel-add { padding: var(--s4); }
.rel-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.rel-grid .rel-f { margin-top: 0; }
.rel-foot { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s4); }
.rel-foot .btn { flex: none; margin-left: auto; min-width: 120px; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); }
.rel-msg { flex: 1 1 auto; min-width: 0; font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--ink-2); }
.rel-msg.bad { color: var(--err); font-weight: 600; }
.rel-empty { color: var(--ink-2); font-size: var(--t-meta); }
.rel-line + .rel-line { margin-top: var(--s4); }
.rel-lh { margin: 0 0 var(--s2); }
.rel-ta { min-height: 140px; font-size: var(--t-body); line-height: var(--lh-body); }
.rel-prev { margin-top: var(--s4); }
.rel-prev > .rel-msg { margin-bottom: var(--s2); }
.rel-sum { margin-bottom: var(--s2); font-size: var(--t-label); font-weight: 600; color: var(--ink-2); }
.rel-prow { align-items: flex-start; padding-top: var(--s3); padding-bottom: var(--s3); }
.rel-mark { flex: none; display: grid; place-items: center; width: 24px; height: 24px; }
.rel-prow.ok .rel-mark { color: var(--ok); }
.rel-prow.no .rel-mark { color: var(--err); }
.rel-prow.no .rel-t { font-weight: 400; color: var(--ink-2); }
.rel-prow.no .rel-m { color: var(--err); }
@media (min-width: 720px) {
  .rel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* === end RELATIVES === */

/* === lane WALKUPS === */
/* Walk-ups v2 (views/walkups.js): the music level card, the library, songs per golfer, script cards with Make MP3, the
   import sheet, the song under each name on the first-tee console, and the Day 1 / 2 / 3 row on a profile. */
.wu-card { margin-top: var(--s3); }
.wu-head { display: flex; align-items: flex-start; gap: var(--s3); }
.wu-head .grow { flex: 1 1 auto; min-width: 0; }
.wu-head .btn { flex: none; }
.wu-sub { margin-top: var(--s1); }
.wu-acts { gap: var(--s2); margin-top: var(--s3); }
.wu-busy { font-weight: 600; margin-top: var(--s3); }
.wu-notes { margin-top: var(--s3); display: grid; gap: var(--s1); }
.wu-note { font-size: var(--t-label); line-height: var(--lh-meta); color: var(--err); overflow-wrap: anywhere; }
.wu-err { color: var(--err); margin-top: var(--s1); }
.wu-engine { margin-top: var(--s2); color: var(--on-stage-2, rgba(255,255,255,.8)); }
.wu-list { margin-top: var(--s3); }
.wu-stop { display: inline-block; width: 12px; height: 12px; border-radius: 2px; background: currentColor; }
/* the music level */
.wu-level-top, .wu-level-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.wu-level-foot { margin-top: var(--s2); }
.wu-level-foot .small { flex: 1 1 auto; min-width: 0; }
.wu-level-foot .btn { flex: none; }
.wu-lv { font-size: var(--t-result); color: var(--ink-1); }
.wu-range { display: block; width: 100%; height: var(--tap); margin: var(--s2) 0 0; accent-color: var(--brand); background: transparent; cursor: pointer; }
/* the first-tee console: the song under the name */
.wu-name .nm { display: flex; flex-direction: column; gap: 2px; }
.wu-name .wu-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wu-name .wu-sg { font-size: var(--t-label); font-weight: 500; line-height: var(--lh-meta); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wu-name.on .wu-sg { color: inherit; }
/* scripts */
.wu-script-top { gap: var(--s3); align-items: center; }
.wu-script-name { min-width: 0; }
.wu-script-name b { display: block; overflow-wrap: anywhere; }
.wu-icon { min-width: var(--tap); padding: 0 var(--s3); }
.wu-ta { margin-top: var(--s2); }
.wu-script-foot { margin-top: var(--s2); align-items: center; gap: var(--s2); }
.wu-mix { margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line); align-items: center; gap: var(--s2); flex-wrap: wrap; }
.wu-mix-acts { gap: var(--s2); }
.wu-stale { color: var(--warn); font-weight: 600; }
/* the library */
.wu-upload { flex: none; cursor: pointer; display: inline-flex; align-items: center; }
.wu-upload.is-off { opacity: .5; pointer-events: none; }
.wu-songs { margin-top: var(--s3); display: grid; gap: var(--s3); }
.wu-song-row { padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface-1); }
.wu-song-row.on { border-color: var(--line-strong); background: var(--brand-tint); }
.wu-song-top { display: flex; align-items: center; gap: var(--s2); }
.wu-title { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.wu-x { flex: none; display: grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: var(--r2); color: var(--ink-2); }
.wu-x:hover, .wu-x:active { background: var(--surface-2); color: var(--err); }
.wu-song-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.wu-pp { min-width: 84px; }
.wu-time { min-width: 88px; font-size: var(--t-label); color: var(--ink-2); }
.wu-hook { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-label); font-weight: 600; color: var(--ink-2); }
.wu-hookin { width: 88px; min-height: var(--tap); text-align: right; }
.wu-used { margin-top: var(--s2); }
.wu-picks { margin-top: var(--s3); }
.wu-pick { gap: var(--s3); }
.wu-pname { min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wu-sel { flex: 0 1 55%; min-width: 0; max-width: 220px; min-height: var(--tap); }
/* import */
.wu-imp-ta { min-height: 120px; font-family: var(--font-ui); font-size: var(--t-label); }
.wu-file { cursor: pointer; }
.wu-imp-sum { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--ink-1); font-weight: 600; }
.wu-imp-rep { margin-top: var(--s2); }
.wu-imp-list { margin-top: var(--s3); max-height: 40vh; overflow: auto; }
.wu-imp-t { font-weight: 600; overflow-wrap: anywhere; }
.wu-imp-row.nomatch .wu-imp-t, .wu-imp-row.noday .wu-imp-t, .wu-imp-row.dupe .wu-imp-t { color: var(--ink-2); font-weight: 400; }
.wu-imp-row.replace .tiny { color: var(--warn); }
/* a golfer's profile */
.wu-prof-song { max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wu-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.wu-day { min-height: var(--tap-course); display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); }
.wu-day-l { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.wu-day small { font-size: var(--t-micro); font-weight: 500; color: var(--ink-3); }
.wu-prof-note { margin-top: var(--s2); }
/* upload progress, and the short-song notes */
.wu-busy { display: flex; flex-direction: column; gap: var(--s2); }
.wu-bar { display: block; height: 8px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.wu-bar i { display: block; height: 100%; width: 0; background: var(--brand); border-radius: inherit; transition: width .2s linear; }
.wu-fit { color: var(--warn); font-weight: 600; margin-top: 2px; }
/* the Announcer voice sheet */
.wu-vs [hidden], #walkups [hidden] { display: none !important; }
.wu-vs-all { margin-top: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--line); }
/* === end WALKUPS === */

/* === lane CHECKIN === */
/* Check-in (views/checkin.js): the "Who came with you?" / "Check in someone else" picker sheet, and the
   "Todd checked you in" notice with Undo that docks with the toasts. Tokens and the kit from the top of the file. */
.ci-find { display: block; width: 100%; min-height: var(--tap); margin-top: var(--s3); }
.ci-sec { margin-top: var(--s4); }
.ci-sec-h { margin-bottom: var(--s1); font-size: var(--t-label); font-weight: 600; line-height: var(--lh-meta); color: var(--ink-2); }
.sheet .check.ci-pick { display: flex; align-items: center; gap: var(--s3); min-height: 56px; margin-top: 0; padding: var(--s1) 0; border-top: 1px solid var(--line); font-weight: 400; cursor: pointer; }
.sheet .ci-sec-h + .check.ci-pick { border-top: 0; }
.ci-pick .grow { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.ci-pick-n { font-size: var(--t-body); font-weight: 600; line-height: var(--lh-head); color: var(--ink-1); overflow-wrap: anywhere; }
.ci-pick-s { margin-top: 2px; font-size: var(--t-label); line-height: var(--lh-meta); color: var(--ink-3); }
.ci-pick[hidden], .ci-sec[hidden], .ci-none[hidden] { display: none; }
.ci-none { margin-top: var(--s4); }
.ci-me .grow { min-width: 0; }
.toast.ci-notice { display: flex; align-items: center; gap: var(--s3); width: 100%; max-width: 420px; padding: var(--s1) var(--s2) var(--s1) var(--s4); text-align: left; pointer-events: auto; }
.ci-notice .grow { flex: 1 1 auto; min-width: 0; }
.ci-notice-undo { flex: none; min-width: var(--tap); min-height: var(--tap); padding: 0 var(--s4); border: 0; border-radius: var(--r2); background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.ci-who { min-height: var(--tap, 44px); }
/* === end CHECKIN === */

/* === lane SURFACES === */
/* News flashes show the whole line (Sep 12 2026): the headline wraps to three lines and the detail to two, instead of
   one line cut with an ellipsis ("just called ...", "Wes an..."). app.js keeps a long one up for 12 seconds. */
.flash-dock .t { white-space: normal; text-overflow: clip; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.flash-dock .b { white-space: normal; text-overflow: clip; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.flash-dock.newsflash { max-height: none; }
/* Lane CALM (Sep 12 2026): one pop-up at a time (app.js pumpFlash). The end-of-day summary may run four lines; a burst
   folded into one line reads as a link to The Story. */
.flash-dock.summary .b { -webkit-line-clamp: 4; line-clamp: 4; }
.flash-dock.burst .b { text-decoration: underline; text-underline-offset: 2px; }
/* Nicknames on the live surfaces: tiles keep one line with an ellipsis (.match-tile .mt-names); TV rows, envelopes and
   the award cards wrap the whole name. */
.tv-m .side { white-space: normal; text-overflow: clip; overflow-wrap: break-word; line-height: 1.2; min-width: 6ch; }
.tv-cer-name, .cer-name, .award .a-name { overflow-wrap: anywhere; }
.tv-vs { max-width: 12em; line-height: 1.25; }
/* Dinner sign-up: the answer saves as it is tapped, so the sheet says so. */
.dn-saved { margin-top: var(--s3); }
/* Danger zone: "Start next Cup…" is a quiet destructive action (outlined), not a primary button. */
.btn.danger-outline { background: transparent; color: var(--err); box-shadow: inset 0 0 0 1.5px var(--err); }
.btn.danger-outline:disabled { color: var(--ink-3); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
/* === end SURFACES === */

/* === lane MOMENTS === */
/* The Cup clinch takeover (views/moments.js): the whole screen in the team's color, the words in the team's own "on"
   color, the golfers' faces ringed in it. Confetti (z 500) falls over it; the tab bar and the flash dock sit under it. */
.mo-take, .mo-day { --mo: var(--brand); --mo-on: var(--on-brand); }
.mo-take.c-red, .mo-day.c-red { --mo: var(--red); --mo-on: var(--red-on); }
.mo-take.c-blue, .mo-day.c-blue { --mo: var(--blue); --mo-on: var(--blue-on); }
.mo-take.c-gold, .mo-day.c-gold { --mo: var(--gold); --mo-on: var(--stage); }
.mo-take.c-black, .mo-day.c-black { --mo: var(--stage); --mo-on: var(--on-stage-2); }
.mo-take.c-white, .mo-day.c-white { --mo: var(--surface-1); --mo-on: var(--ink-1); }
.mo-take { position: fixed; inset: 0; z-index: 450; display: grid; place-items: center; overflow-y: auto; cursor: pointer;
  padding: max(var(--s6), env(safe-area-inset-top)) var(--s4) max(var(--s6), env(safe-area-inset-bottom));
  background: var(--mo); color: var(--mo-on); text-align: center; animation: mo-in .45s ease-out both; }
.mo-take.still, .mo-day.still { animation: none; }
.mo-take.out, .mo-day.out { opacity: 0; transition: opacity .3s; }
body.mo-on { overflow: hidden; }
.mo-inner { width: 100%; max-width: 34rem; display: flex; flex-direction: column; align-items: center; gap: var(--s4); }
.mo-kicker { font-size: var(--t-label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mo-head { margin: 0; font-family: var(--font-story); font-weight: 700; font-size: clamp(calc(34 * var(--u)), 11vw, var(--t-hero)); line-height: 1.05; text-wrap: balance; overflow-wrap: anywhere; }
.mo-faces { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s4) var(--s5); }
.mo-g { display: flex; flex-direction: column; align-items: center; gap: var(--s1); max-width: 10rem; }
.mo-g .avatar { box-shadow: 0 0 0 4px var(--mo-on); }
.mo-faces.n3 .avatar.xl, .mo-faces.n4 .avatar.xl { width: 88px; height: 88px; }
.mo-gn { font-size: var(--t-result); font-weight: 700; overflow-wrap: anywhere; }
.mo-nick { font-family: var(--font-story); font-size: var(--t-meta); }
.mo-line { font-size: var(--t-head); font-weight: 600; line-height: var(--lh-head, 1.3); }
.mo-sub, .mo-hint { font-size: var(--t-meta); }
.mo-song { min-height: var(--tap-primary); padding: 0 var(--s5); border-radius: var(--r-pill); border: 2px solid var(--mo-on); background: transparent; color: var(--mo-on); font-weight: 700; font-size: var(--t-body); cursor: pointer; }
@keyframes mo-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
.tv-mode .mo-inner { max-width: 64rem; gap: 28px; }
.tv-mode .mo-head { font-size: clamp(48px, 7vw, 104px); }
.tv-mode .mo-gn { font-size: 34px; }
.tv-mode .mo-line { font-size: 30px; }
/* The day clinch banner: one line at the top of the screen, tap to close. */
.mo-day { position: fixed; left: 50%; top: max(var(--s3), env(safe-area-inset-top)); transform: translateX(-50%); z-index: 440;
  width: min(34rem, calc(100% - 2 * var(--s4))); min-height: 64px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: var(--s3); align-items: center; text-align: left; padding: var(--s3) var(--s4); border: 0; border-radius: var(--r3);
  background: var(--mo); color: var(--mo-on); box-shadow: var(--e3); cursor: pointer; animation: mo-drop .35s ease-out both; }
.mo-day-k { grid-row: 1 / span 2; font-size: var(--t-label); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: var(--s1) var(--s2); border-radius: var(--r-pill); border: 1.5px solid var(--mo-on); }
.mo-day-t { grid-column: 2; font-weight: 700; font-size: var(--t-body); overflow-wrap: anywhere; }
.mo-day-s { grid-column: 2; font-size: var(--t-meta); }
.mo-day svg { grid-column: 3; grid-row: 1 / span 2; }
@keyframes mo-drop { from { transform: translate(-50%, -12px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.tv-mode .mo-day { width: min(56rem, 90vw); }
.tv-mode .mo-day-t { font-size: 32px; }
.tv-mode .mo-day-s { font-size: 22px; }
/* Firsts on a profile. */
.mo-f-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--gold); flex: none; }
.mo-f-dot.best9, .mo-f-dot.best18, .mo-f-dot.streak { background: var(--brand); }
.mo-f-t { font-weight: 600; }
/* Tied and shared awards: every winner's face. The ceremony's dark stage, two or three to a row. */
.cer-tie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s3); justify-items: center; width: 100%; margin: var(--s3) 0; }
.cer-tie.n3, .cer-tie.n5, .cer-tie.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cer-tie-g { display: flex; flex-direction: column; align-items: center; gap: var(--s1); min-width: 0; }
.cer-tie-n { font-family: var(--font-story); font-weight: 700; font-size: var(--t-result); overflow-wrap: anywhere; }
.cer-tie-l { font-size: var(--t-meta); }
.tv-tie { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 48px; margin: 18px 0; }
.tv-tie-g { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 16rem; }
.tv-tie-g .nm { font-size: 34px; font-weight: 700; overflow-wrap: anywhere; }
.tv-tie-g .l { font-size: 22px; }
.tv-tie.n4 .tv-face.big, .tv-tie.n5 .tv-face.big, .tv-tie.n6 .tv-face.big { width: 128px; height: 128px; font-size: 52px; }
/* The fans' Awards tab and the Awards board: the co-winners in a row of small faces. */
.mo-tie-row { margin-top: var(--s3); }
.mo-tie-faces, .mo-co { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); margin-top: var(--s2); }
.mo-tie-g, .mo-co-g { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 600; font-size: var(--t-meta); }
/* === end MOMENTS === */
/* === lane CALM-B === */
/* A deep link to a feature that is off (features.js offState). */
.cb-off { padding-top: var(--s7); }
.cb-off-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin-top: var(--s4); }
/* What's on this year: one switch per feature, grouped. The switch is a 56x44 target around the kit's .toggle. */
.cb-sw-head { margin-top: var(--s3); }
.cb-sw-count { font-size: var(--t-head); font-weight: var(--w-bold); color: var(--ink-1); }
.cb-sw-presets { display: flex; gap: var(--s2); margin: var(--s3) 0 var(--s2); }
.cb-sw-warn { margin-top: var(--s2); color: var(--warn); font-size: var(--t-meta); font-weight: var(--w-semi); }
.cb-sw-list { padding: 0 var(--s4); }
.cb-sw-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; min-height: 64px; border-top: 1px solid var(--line); }
.cb-sw-row:first-child { border-top: 0; }
.cb-sw-t { font-weight: var(--w-semi); color: var(--ink-1); }
.cb-sw-aff { font-size: var(--t-label); color: var(--ink-3); margin-top: 2px; }
.cb-switch { flex: none; min-width: 56px; min-height: var(--tap); display: grid; place-items: center; border-radius: var(--r2); }
.cb-switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-switch:disabled { opacity: .5; cursor: default; }
/* Start here on a Cup that isn't set up yet, and the Run of show's "Needed" / "Nice to have" heads. */
.cb-start { margin-top: var(--s3); }
.cb-start-t { font-size: var(--t-head); font-weight: var(--w-bold); color: var(--ink-1); margin-top: 2px; }
.cb-start-list { margin-top: var(--s2); }
.cb-start-row, .cb-start-what { width: 100%; text-align: left; min-height: 56px; }
.cb-start-row .org-ros-mark.todo { display: grid; place-items: center; font-size: 11px; font-weight: var(--w-bold); color: var(--ink-2); line-height: 1; }
.cb-start-row.done b { color: var(--ink-2); }
.cb-start-what { border-top: 1px solid var(--line); margin-top: var(--s2); }
.cb-ros-sub { font-size: var(--t-label); font-weight: var(--w-semi); color: var(--ink-3); margin: var(--s3) 0 var(--s1); }
/* Players & PINs: Simple mode for a group. */
.cb-simple-acts { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.cb-simple-acts .btn { flex: 1 1 auto; }
/* Matches: a day with more than one format groups its tiles under each. */
.cb-mode-head { font-size: var(--t-label); font-weight: var(--w-semi); color: var(--ink-3); margin: var(--s4) 0 var(--s2); }
/* The scorecard: "See all scores", and the birdie a Strokes round filled in from the scores. */
.cb-scores-btn { margin-top: var(--s3); }
.cb-claim { color: var(--gold-ink); font-weight: var(--w-semi); margin-top: var(--s2); }
/* First sign-in: "Keep it simple?" */
.cb-ask { display: grid; gap: var(--s3); margin-top: var(--s3); }
.cb-ask-opt { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 72px; padding: var(--s3) var(--s4); text-align: left; background: var(--surface-1); border: 1px solid var(--line-strong); border-radius: var(--r3); color: var(--ink-1); }
.cb-ask-opt b { display: block; font-size: var(--t-body); font-weight: var(--w-semi); }
.cb-ask-opt span span, .cb-ask-opt .grow > span { display: block; font-size: var(--t-meta); color: var(--ink-2); }
.cb-ask-opt.on { border: 2px solid var(--brand); background: var(--brand-tint); }
.cb-ask-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface-1); }
.cb-ask-opt.on .cb-ask-dot { border: 7px solid var(--brand); }
/* Settings (the golfer's): every switch and small button gets a 44px target without changing how it looks. */
.toggle::before { content: ""; position: absolute; inset: -7px -3px; }
.cb-settings .btn.sm, .cb-settings .btn.xs { min-height: var(--tap); }
/* === end CALM-B === */
/* === lane CEREMONY-FIX === */
/* Home champions card: the kit's .card ground (later in this file than .champ-card) replaced the stage, so its white
   trophy and score line sat on white in Light. The stage is the same in both themes; the eyebrow and the score line use
   the on-stage ink, the trophy the gold fill. */
.card.champ-card { background: var(--stage); color: #fff; border: 0; }
.card.champ-card .eyebrow, .card.champ-card .cc-score { color: var(--on-stage-2); }
.card.champ-card .cc-trophy { color: var(--gold); }
/* Share is a .link, whose brand-green ink (a later rule) is unreadable on the stage: gold there instead. */
.card.champ-card .cc-share { color: var(--gold); }
/* Awards Night results: a card's content sits at the top of its cell (cells in a row keep one height), and a tied award
   shows each golfer's face and name once, then one short value line. */
#awards .grid-2 > .award { display: flex; flex-direction: column; justify-content: flex-start; }
.award .cf-faces { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); margin-top: var(--s3); }
.award .cf-faces .mo-co-g { min-width: 0; overflow-wrap: anywhere; }
.award .cf-val { margin-top: var(--s2); }
/* === end CEREMONY-FIX === */

/* === lane C1 === */
/* Direction C "Lava & Fairway" (Sep 12 2026, lane C1): Home, Matches and the scorecard in the C look, the shell's dark
   and print rules, and the styles the motion moments draw with (public/js/motion/motion.js). The component kit itself
   (tokens, header, floating tab bar, cards, buttons, score band, match and hole tiles, flash dock) is in the system
   section. Tokens only; the one hard-coded ink is #111113 on amber, which is --ink-1's light value in both themes. */

/* ---- Home: your match is one card wearing --mine-ring; its tile's eyebrow and bars run to the card's edge ---- */
.hm-mine { position: relative; background: var(--surface-1); border: 0; border-radius: var(--r3); padding: var(--s3) 0 var(--s4); box-shadow: var(--mine-ring), var(--e1); }
.hm-mine > .match-tile { min-height: 0; padding: 0 var(--s4) 0 0; border: 0; outline: 0; box-shadow: none; background: transparent; }
.hm-mine > .match-tile:active { background: transparent; }
.hm-mine .hm-cta { width: calc(100% - 2 * var(--s4)); margin: var(--s3) var(--s4) 0; border-radius: var(--r-pill); font-weight: 800; }
.hm-mine .hm-mfoot, .hm-mine .hm-as { padding: 0 var(--s4); }
.hm-row { min-height: 72px; padding: var(--s3); border-color: transparent; box-shadow: var(--e1); }
.hm-row > svg:first-child { width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: var(--ink-1); color: var(--bg); }
.hm-pin > svg:first-child { background: var(--gold); color: #111113; }
.hm-rt b { font-weight: 800; }
.hm-story .section-head .h2 { font-size: var(--t-head); font-weight: 800; letter-spacing: -0.02em; }

/* ---- Matches: the day switch carries dates; the day header has the course photo, the formats and the day's score ---- */
.hm-days .seg > button { flex-direction: column; gap: 0; min-height: 52px; padding: var(--s1) var(--s3); font-weight: 700; line-height: 1.15; }
.hm-days .seg > button .hm-dt { display: inline-flex; align-items: center; gap: 6px; }
.hm-dh { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 64px; margin-top: var(--s3); text-align: left; color: var(--ink-1); }
.hm-dh-img { flex: none; width: 52px; height: 52px; border-radius: 12px; object-fit: cover; }
.hm-dh-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hm-dh-t b { font-size: calc(18 * var(--u)); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.hm-dh-t span { font-size: var(--t-meta); line-height: 1.3; color: var(--ink-2); }
.hm-dh-s { flex: none; display: flex; align-items: baseline; gap: 5px; font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.hm-dh-s > span { color: var(--team-ink, var(--ink-1)); }
.hm-dh-s > i { font-style: normal; font-size: 18px; color: var(--ink-3); }
.hm-dh-s .half { font-size: .62em; vertical-align: .42em; }
.hm-dh-off { flex: none; font-weight: 700; color: var(--ink-2); }

/* ---- The scorecard: a full-height sheet under a lava top bar, the hole on one line with an 18-hole strip, one row per
   ball with black round steppers, amber Double Downs, the result in an ink bar and an emerald Save pill. Large and
   Extra large text (and phones 370px wide or less) stack the balls again and scroll; that is allowed. ---- */
.sheet.match-sheet { height: 100dvh; max-height: 100dvh; border-radius: 0; padding-top: 0; }
.match-sheet > .grab { display: none; }
.match-sheet > .sh { margin: 0 -18px; padding: calc(var(--safe-t) + 8px) 8px 2px 18px; background: var(--stage); color: #fff; }
.match-sheet > .sh .h2 { font-size: calc(18 * var(--u)); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: #fff; }
.match-sheet > .sh .small { color: rgba(255,255,255,.74) !important; }
.match-sheet > .sh .close { background: transparent; color: #fff; }
.match-sheet > .sh .close svg { width: 24px; height: 24px; }
.match-sheet > .sh :focus-visible, .match-sheet > .hm-mband :focus-visible { outline-color: #fff; }
.match-sheet > .score-band.sm.hm-mband { margin: 0 -18px; padding: var(--s1) 18px var(--s3); border-radius: 0; box-shadow: none; }
.match-sheet > .score-band.sm.hm-mband .sb-row { grid-template-columns: minmax(0, 1fr) 2px minmax(0, 1fr); align-items: center; gap: var(--s3); }
.match-sheet > .score-band.sm.hm-mband .sb-team { flex-direction: row; align-items: center; justify-content: flex-end; gap: var(--s2); }
.match-sheet > .score-band.sm.hm-mband .sb-team ~ .sb-team { flex-direction: row-reverse; }
.match-sheet > .score-band.sm.hm-mband .sb-name { max-width: calc(100% - 44px); padding: 4px 8px; font-size: var(--t-label); letter-spacing: .04em; color: var(--team-on, #fff); }
.match-sheet > .score-band.sm.hm-mband .sb-num { font-size: 26px; line-height: 1; }
.match-sheet > .score-band.sm.hm-mband .sb-rule { width: 2px; height: 26px; }
.match-sheet > .score-band.sm.hm-mband .sb-status { display: block; margin-top: var(--s2); text-align: center; font-size: var(--t-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.86); }
.sheet .hole-panel { margin-top: var(--s3); padding: 0; background: transparent; border: 0; border-radius: 0; text-align: left; }
.hole-panel .hp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--surface-1); border: 1px solid transparent; border-radius: var(--r3); box-shadow: var(--e1); }
.hole-panel .hp-l { flex: none; min-width: 0; }
.hole-panel .hp-r { min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.hole-panel .hp-state { font-size: var(--t-meta); font-weight: 500; color: var(--ink-2); }
.sheet .hole-panel .hn { margin-top: 0; font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -0.05em; white-space: nowrap; }
.sheet .hole-panel .hn .hp-par { margin-left: var(--s2); font-size: calc(22 * var(--u)); font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.hole-panel .hp-r .hp-meta { margin: 0; max-width: 11em; font-size: var(--t-label); line-height: 1.25; color: var(--ink-2); text-wrap: balance; }
.sheet .hole-panel .hp-r .worth, .sheet .hole-panel .hp-r .worth.hot, .sheet .hole-panel .hp-r .worth.fire { justify-content: flex-end; margin-top: 0; font-size: calc(18 * var(--u)); font-weight: 800; }
.sheet .hole-panel .hp-r .dd-called { text-align: right; font-size: var(--t-label); }
.sheet .hole-panel > .hp-meta, .sheet .hole-panel > .solo-note { margin: var(--s2) var(--s1) 0; }
.hole-strip { display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); gap: 3px; margin-top: var(--s2); }
.hole-strip.nine { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.hole-strip i { position: relative; display: grid; place-items: center; height: 22px; border-radius: 4px; background: var(--surface-2); color: var(--ink-2); font: 700 10px/1 var(--font-ui); font-style: normal; font-variant-numeric: tabular-nums; }
.hole-strip i.red, .hole-strip i.blue, .hole-strip i.black, .hole-strip i.gold, .hole-strip i.green { background: var(--team); color: var(--team-on); }
.hole-strip i.halve { background: var(--surface-3); color: var(--ink-1); }
.hole-strip i.cur { background: var(--surface-1); color: var(--ink-1); box-shadow: inset 0 0 0 2px var(--ink-1); }
.hole-strip i.dd { box-shadow: inset 0 -3px 0 var(--gold); }
.hole-strip i.cur.dd { box-shadow: inset 0 0 0 2px var(--ink-1), inset 0 -4px 0 var(--gold); }
.sheet .stk { gap: var(--s2); margin-top: var(--s2); }
.sheet .stk-side { padding: var(--s1) var(--s3) var(--s3); border: 0; border-radius: var(--r3); background: var(--surface-1); box-shadow: var(--e1); }
.sheet .stk-side.closed { padding: 0; border: 1.5px dashed var(--line-strong); box-shadow: none; }
.sheet .stk-side.conceded { background: var(--surface-2); }
.sheet .stk-head { min-height: var(--tap); }
.sheet .stk-nm { font-size: var(--t-head); font-weight: 800; letter-spacing: -0.01em; }
.sheet .stk-nm .dot { width: 12px; height: 12px; }
.sheet .stk-concede { min-height: var(--tap); padding: 0 var(--s4); border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); background: var(--surface-1); font-size: var(--t-meta); font-weight: 600; color: var(--ink-1); }
.sheet .stk-ball { grid-template-columns: minmax(0, 1fr) auto auto; justify-content: stretch; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.sheet .stk-who { grid-column: auto; font-size: var(--t-body); font-weight: 700; }
.sheet .stk-who small { color: var(--brand-ink); letter-spacing: .1em; }
.sheet .stk-ball > .stk-step:first-child { grid-column: 2; }
.sheet .stk-step { gap: 0; }
.sheet .stk-btn { width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--ink-1); color: var(--bg); font-size: 26px; font-weight: 600; }
.sheet .stk-btn:disabled { opacity: .3; }
.stk-val { position: relative; display: inline-grid; place-items: center; }
.sheet .stk-num { width: 52px; height: 56px; border: 0; border-radius: 12px; background: transparent; font-size: 34px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink-1); }
.sheet .stk-num:focus { border-color: transparent; box-shadow: 0 0 0 3px var(--gold); }
.sheet .stk-pu { min-width: 52px; width: auto; height: 44px; padding: 0 10px; border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); background: var(--surface-1); font-size: var(--t-label); font-weight: 800; color: var(--ink-1); }
.sheet .stk-pu.on, .sheet .stk-concede.on { background: var(--gold); border-color: var(--gold); color: #111113; }
@media (max-width: 370px) { .sheet .stk-ball { grid-template-columns: minmax(0, 1fr) auto; } .sheet .stk-who { grid-column: 1 / -1; } .sheet .stk-ball > .stk-step:first-child { grid-column: auto; } }
html[data-ts="l"] .sheet .stk-ball > .stk-step:first-child, html[data-ts="xl"] .sheet .stk-ball > .stk-step:first-child { grid-column: auto; }
.stk-val .mo-rings { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; overflow: visible; pointer-events: none; }
.stk-val .mo-rings circle { fill: none; stroke: var(--gold-ink); stroke-width: 2.4; stroke-linecap: round; }
.stk-val .mo-stars { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; opacity: 0; fill: var(--gold); pointer-events: none; }
.sheet .stk-preview { margin-top: var(--s2); padding: var(--s3); border-radius: var(--r3); background: var(--surface-2); color: var(--ink-2); text-align: center; font-size: var(--t-body); font-weight: 800; }
.sheet .stk-preview.won { background: var(--ink-1); color: var(--bg); }
.sheet .hole-panel .xchips { margin-top: var(--s2); }
.sheet .hole-panel .xchip { min-height: var(--tap-course); border-radius: var(--r-pill); background: var(--surface-1); font-size: var(--t-meta); font-weight: 700; }
.sheet .hole-panel .xchip.on { background: var(--ink-1); border-color: var(--ink-1); color: var(--bg); }
.sheet .hole-panel .xchip.dd.on { background: var(--gold); border-color: var(--gold); color: #111113; }
.sheet .hole-panel .xchip.dd.on svg { color: #111113; }
.sheet > .sheet-foot.hm-foot { background: var(--bg); }
.sheet .hm-foot .stk-save { position: relative; overflow: hidden; height: var(--tap-primary); min-height: var(--tap-primary); border-radius: var(--r-pill); font-size: var(--t-body); font-weight: 800; }
.sheet .hm-final { background: var(--surface-1); border-radius: var(--r3); box-shadow: var(--e1); }
.sheet .hm-final-t { font-size: var(--t-result); font-weight: 800; letter-spacing: -0.02em; }
.hs-row { display: flex; align-items: center; justify-content: center; margin-bottom: var(--s2); }
.hs-pair { display: flex; }
.hs-pair .avatar { box-shadow: 0 0 0 2px var(--surface-1); }
.hs-pair .avatar + .avatar { margin-left: -10px; }
.hs-medal { position: relative; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; margin: 0 -8px; border-radius: 50%; background: var(--gold); color: #111113; box-shadow: 0 0 0 3px var(--surface-1); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

/* ---- motion: the styles each moment draws with. Each rests at its final state; motion.js only animates transform and
   opacity (and a stroke under 80px), and removes what it adds. ---- */
.score-band .sb-glow { position: absolute; left: 50%; top: 62%; z-index: -1; width: 200px; height: 140px; margin: -70px 0 0 -100px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--team, #fff) 50%, transparent), transparent); opacity: .5; pointer-events: none; }
.mo-plus { position: absolute; top: -12px; right: -30px; z-index: 2; padding: 1px 9px; border-radius: var(--r-pill); background: var(--team, var(--brand)); color: #fff; font: 800 16px/1.5 var(--font-ui); letter-spacing: 0; white-space: nowrap; pointer-events: none; }
.mo-burst { position: absolute; inset: -14px; z-index: 2; opacity: 0; pointer-events: none; }
.mo-burst svg { width: 100%; height: 100%; overflow: visible; }
.mo-burst line { stroke: var(--team, var(--gold)); stroke-width: 3; stroke-linecap: round; }
.mo-burst line.g { stroke: var(--gold); }
.mo-burst rect { fill: none; stroke: var(--team, var(--gold)); stroke-width: 2.5; }
.mo-saved { color: transparent !important; }
.mo-ok { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: var(--s2); color: var(--on-brand); font-weight: 800; }
.mo-ok svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mo-chip { position: fixed; left: 0; top: 0; z-index: 600; padding: 3px 12px; border-radius: var(--r-pill); background: var(--team, var(--brand)); color: #fff; font: 800 18px/1.4 var(--font-ui); white-space: nowrap; opacity: 0; pointer-events: none; box-shadow: 0 8px 18px -6px rgba(0,0,0,.45); }
/* the Double Down takeover: a lava band with amber hazard stripes, the bolt and the words; the flash dock stays after */
.mo-dd { position: fixed; inset: 0; z-index: 450; pointer-events: none; }
.mo-dd-scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; }
.mo-dd-band { position: absolute; left: 0; right: 0; top: 0; height: calc(300px + var(--safe-t)); overflow: hidden; isolation: isolate; border-radius: 0 0 28px 28px; background: var(--stage); color: #fff; box-shadow: 0 18px 44px rgba(0,0,0,.5); transform: translateY(-112%); }
.mo-dd-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gold); opacity: .12; -webkit-mask: url(/img/brand/topo-tile.svg) 0 0 / 240px repeat; mask: url(/img/brand/topo-tile.svg) 0 0 / 240px repeat; }
.mo-dd-shake { position: absolute; inset: 0; }
.mo-dd-haz { position: absolute; left: 0; right: 0; height: 14px; overflow: hidden; }
.mo-dd-haz.top { top: var(--safe-t); } .mo-dd-haz.bot { bottom: 0; }
.mo-dd-haz > i { position: absolute; top: 0; bottom: 0; left: -40px; right: -40px; background: repeating-linear-gradient(-45deg, var(--gold) 0 12px, #111113 12px 24px); }
.mo-dd-in { position: absolute; inset: calc(var(--safe-t) + 40px) 20px 28px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.mo-dd-bolt { width: 72px; height: 72px; fill: var(--gold); }
.mo-dd-in b { margin-top: 6px; font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.mo-dd-in .t { margin-top: 10px; max-width: 32ch; font-size: calc(18 * var(--u)); font-weight: 700; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.mo-dd-in .s { margin-top: 4px; font-size: var(--t-meta); color: var(--on-stage-2); }
/* the news flash: the icon snaps in, an amber line runs down the dwell, and waiting flashes show as a deck and a pill */
.flash-dock .ic { animation: nfIc var(--d-4) var(--e-snap) 90ms both; }
@keyframes nfIc { from { transform: scale(.3) rotate(-24deg); } }
.flash-dock .nf-timer { position: absolute; left: 16px; right: 16px; bottom: 0; height: 3px; border-radius: 2px; background: var(--gold); transform-origin: left center; transform: scaleX(0); animation: nfTimer var(--dwell, 6000ms) linear both; pointer-events: none; }
.flash-dock.held .nf-timer { animation-play-state: paused; }
.flash-dock.gold .nf-timer { background: #111113; }
@keyframes nfTimer { from { transform: scaleX(1); } }
.flash-dock.deck1 { box-shadow: 0 -9px 0 -5px var(--stage-2), var(--e3); }
.flash-dock.deck2 { box-shadow: 0 -9px 0 -5px var(--stage-2), 0 -17px 0 -10px var(--surface-3), var(--e3); }
.flash-dock .nf-more { position: absolute; top: -14px; right: 18px; display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: var(--r-pill); background: var(--gold); color: #111113; font-size: 13px; font-weight: 800; white-space: nowrap; box-shadow: 0 4px 10px rgba(0,0,0,.25); animation: nfMore var(--d-3) var(--e-spring) both; }
.flash-dock .nf-more[hidden] { display: none; }
.flash-dock.still, .flash-dock.still .ic, .flash-dock.still .nf-more { animation: none; }
@keyframes nfMore { from { opacity: 0; transform: scale(.4) translateY(8px); } }
/* reduced motion: the end frames only (the global switch above already stops every CSS animation) */
@media (prefers-reduced-motion: reduce) { .mo-dd, .mo-burst, .mo-chip, .flash-dock .nf-timer { display: none; } }
html.rm *, html.rm *::before, html.rm *::after { animation: none !important; transition: none !important; }
html.rm .flash-dock .nf-timer { display: none; }

/* ---- night: cards trade their shadow for the 1px line; the scoreboard lifts off the black page; amber rings ---- */
@media screen {
  html[data-theme="dark"] :is(.card, .list, .match-tile, .stat-tile, .hm-row, .hole-panel .hp-head) { border-color: var(--line); }
  html[data-theme="dark"] .sheet .stk-side:not(.closed) { border: 1px solid var(--line); }
  html[data-theme="dark"] .score-band, html[data-theme="dark"] .hero-score { background: #161618; }
  html[data-theme="dark"] .match-sheet > .score-band.sm.hm-mband { background: var(--stage); }
  html[data-theme="dark"] .nav { box-shadow: 0 14px 30px -10px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.08); }
  html[data-theme="dark"] .hole-tile.cur { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4.5px var(--gold); }
  html[data-theme="dark"] .hole-strip i.cur { box-shadow: inset 0 0 0 2px var(--gold); }
  html[data-theme="dark"] .hole-strip i.cur.dd { box-shadow: inset 0 0 0 2px var(--gold), inset 0 -4px 0 var(--gold); }
  html[data-theme="dark"] .flash-dock.deck2 { box-shadow: 0 -9px 0 -5px var(--stage-2), 0 -17px 0 -10px #3A3A40, var(--e3); }
}
@media screen and (min-width: 1024px) { html[data-theme="dark"] #app:has(> .nav) > .nav { box-shadow: none; } }

/* ---- print stays light; high-contrast modes drop the texture ---- */
@media print {
  .score-band, .hero-score { background: #fff !important; color: #111 !important; box-shadow: none !important; }
  .score-band::before, .hero-score::before, .score-band .sb-glow { display: none !important; }
  .score-band .sb-num, .score-band .sb-status, .score-band .sb-status b, .score-band .sb-eyebrow, .hero-score .pts { color: #111 !important; }
  .nav, .mo-dd, .mo-plus, .mo-chip { display: none !important; }
}
@media (forced-colors: active) { .score-band::before, .hero-score::before, .score-band .sb-glow, .mo-dd-band::before { display: none; } }
/* === end C1 === */

/* === lane C2 === */
/* Lava & Fairway, lane 2 (Sep 12 2026): Feed and Chat, Players and profiles, Stats, Awards Night and the Cup envelope,
   the results page, the Cup clinch takeover, Clubhouse TV, the organizer and fan screens, empty states, skeletons and
   the walk-up "now playing" plate (eye/build-c.md 3.10 to 3.17; eye/delight.md moments 8, 9 and 11). Lane SYSTEM's
   tokens and kit only; this block is last in the file on purpose, so it wins over the older lane rules. Motion:
   transform and opacity only; every moment rests at its end frame in plain CSS and animates only under a class a view
   adds on a real event (.play, .on); reduced motion drops the animations and keeps the end frame. */
.cer, .mo-take, .mo-wipe, .wu-name, .wu-now, .mo-playing {
  --c2-out: var(--e-out, cubic-bezier(.2,.7,.2,1)); --c2-in: var(--e-in, cubic-bezier(.4,0,1,1)); --c2-inout: var(--e-inout, cubic-bezier(.65,0,.35,1));
  --c2-spring: var(--e-spring, cubic-bezier(.34,1.56,.64,1)); --c2-snap: var(--e-snap, cubic-bezier(.2,1.4,.4,1));
}
.c2-fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 500; }
/* The drawn Cup (img/brand/cup-trophy.svg) as a mask, so it takes a token color: gold on the stage, gold-ink on a card. */
.c2-cup { display: inline-block; width: 60px; height: 80px; background: var(--gold); -webkit-mask: url(/img/brand/cup-trophy.svg) center / contain no-repeat; mask: url(/img/brand/cup-trophy.svg) center / contain no-repeat; vertical-align: middle; }

/* ---- Awards Night: the stage (js/ceremony.js) ---- */
.cer { background: var(--stage); background: radial-gradient(70% 40% at 0% 0%, color-mix(in srgb, var(--red) 35%, transparent), transparent 70%), radial-gradient(70% 40% at 100% 0%, color-mix(in srgb, var(--blue) 35%, transparent), transparent 70%), linear-gradient(180deg, #151517, var(--stage)); isolation: isolate; }
.cer::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--gold); opacity: .07; -webkit-mask: url(/img/brand/topo-tile.svg) 0 0 / 240px repeat; mask: url(/img/brand/topo-tile.svg) 0 0 / 240px repeat; }
/* once the Cup is decided the glow is the winner's alone */
.cer.won-red { background: radial-gradient(90% 55% at 50% 0%, color-mix(in srgb, var(--red) 35%, transparent), transparent 75%), linear-gradient(180deg, #151517, var(--stage)); }
.cer.won-blue { background: radial-gradient(90% 55% at 50% 0%, color-mix(in srgb, var(--blue) 35%, transparent), transparent 75%), linear-gradient(180deg, #151517, var(--stage)); }
.cer-top { max-width: 420px; min-height: var(--tap); font: 700 var(--t-label)/1.2 var(--font-ui); letter-spacing: .10em; text-transform: uppercase; color: var(--gold); }
.cer-stage { position: relative; flex: 1 0 auto; width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 92px 0 8px; }
.cer-confetti { position: absolute; left: -18px; right: -18px; top: 0; bottom: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .5s ease;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='720'%3E%3Cg opacity='.8'%3E%3Crect x='26' y='40' width='13' height='5' rx='1.5' fill='%234B7BE5' transform='rotate(55 32 42)'/%3E%3Crect x='118' y='20' width='14' height='5' rx='1.5' fill='%23F0B323' transform='rotate(-12 125 22)'/%3E%3Crect x='176' y='66' width='12' height='5' rx='1.5' fill='%23E0485C' transform='rotate(30 182 68)'/%3E%3Crect x='238' y='30' width='11' height='5' rx='1.5' fill='%23F0B323' transform='rotate(-40 243 32)'/%3E%3Crect x='300' y='70' width='13' height='5' rx='1.5' fill='%23FFFFFF' transform='rotate(20 306 72)'/%3E%3Crect x='370' y='36' width='12' height='5' rx='1.5' fill='%23E0485C' transform='rotate(70 376 38)'/%3E%3Crect x='14' y='160' width='12' height='5' rx='1.5' fill='%23FFFFFF' transform='rotate(-25 20 162)'/%3E%3Crect x='392' y='190' width='12' height='5' rx='1.5' fill='%23F0B323' transform='rotate(40 398 192)'/%3E%3Crect x='60' y='120' width='11' height='5' rx='1.5' fill='%23F0B323' transform='rotate(15 65 122)'/%3E%3Crect x='340' y='128' width='12' height='5' rx='1.5' fill='%234B7BE5' transform='rotate(-35 346 130)'/%3E%3Crect x='6' y='420' width='12' height='5' rx='1.5' fill='%23F0B323' transform='rotate(35 12 422)'/%3E%3Crect x='400' y='380' width='11' height='5' rx='1.5' fill='%23E0485C' transform='rotate(-60 405 382)'/%3E%3Crect x='10' y='560' width='12' height='5' rx='1.5' fill='%234B7BE5' transform='rotate(10 16 562)'/%3E%3Crect x='396' y='600' width='12' height='5' rx='1.5' fill='%23FFFFFF' transform='rotate(50 402 602)'/%3E%3C/g%3E%3C/svg%3E") center top / 100% auto no-repeat; }
.cer-stage.opened:not(.is-shame) .cer-confetti { opacity: 1; }
.cer-env-wrap { position: relative; width: 100%; isolation: isolate; }
.cer-card { position: relative; z-index: 2; width: 100%; max-width: none; min-height: 360px; margin-top: 0; padding: 24px 20px 26px; overflow: hidden; background: #161618; border: 1px solid rgba(255,255,255,.14); border-radius: 24px; box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 30px 60px -20px rgba(0,0,0,.9); }
.cer-card.k-cup, .cer-card.k-mvp { border-color: rgba(240,179,35,.55); box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 30px 60px -20px rgba(0,0,0,.9); }
.cer-card.is-shame { border-color: rgba(255,107,122,.38); }
.cer-card > :not(.cer-veil):not(.cer-sheen):not(.cer-notes) { position: relative; z-index: 1; }
.cer-ic { height: 80px; display: grid; place-items: center; font-size: 54px; line-height: 1; }
.cer-ic .c2-cup { width: 60px; height: 80px; }
.cer-kicker { margin-top: 12px; font: 700 var(--t-label)/1.2 var(--font-ui); letter-spacing: .10em; text-transform: uppercase; color: var(--gold); }
.cer-title { margin-top: 6px; font: 800 34px/1.05 var(--font-ui); letter-spacing: -0.03em; color: #fff; text-wrap: balance; overflow-wrap: anywhere; }
.cer-blurb { margin-top: 8px; color: var(--on-stage-2); }
.cer-veil { z-index: 3; background: linear-gradient(transparent 38%, rgba(10,10,11,.96) 55%); transition: none; }
.cer-count { font: 800 120px/1 var(--font-ui); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--gold); animation: none; }
.cer-win { margin-top: 18px; opacity: 1; transform: none; transition: none; }
.cer-card.covered .cer-win, .cer-card.covered .cer-ic { opacity: 0; }
.cer .avatar.red { box-shadow: 0 0 0 4px var(--red); } .cer .avatar.blue { box-shadow: 0 0 0 4px var(--blue); }
.cer-win > .avatar.xl { --size: 104px; }
.cer-name { margin-top: 10px; font: 800 26px/1.1 var(--font-ui); letter-spacing: -0.02em; color: #fff; overflow-wrap: anywhere; }
.cer-val { font: 700 18px/1.3 var(--font-ui); color: #fff; }
.cer-tie-n { font-family: var(--font-ui); font-weight: 800; letter-spacing: -0.02em; color: #fff; }
/* the flap: behind the card and open once the envelope is open; folded down over the card's top while it's sealed */
.cer-flap { position: absolute; left: 16px; right: 16px; top: -80px; height: 80px; z-index: 1; pointer-events: none; transform-origin: 50% 100%; clip-path: polygon(0 100%, 50% 0, 100% 100%); background: linear-gradient(180deg, #2A2A2F, #1C1C20); }
.cer-card.covered ~ .cer-flap { z-index: 3; transform: perspective(700px) rotateX(180deg); background: linear-gradient(180deg, #202024, #34343A); }
/* the wax seal: an amber disc with the shield knocked out, in two halves that split along the crack */
.cer-seal { position: absolute; left: 50%; top: 58px; width: 44px; height: 44px; margin-left: -22px; z-index: 4; pointer-events: none; }
.cer-card.open ~ .cer-seal { display: none; }
.cer-seal i { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 -3px 5px rgba(0,0,0,.3), inset 0 2px 4px rgba(255,255,255,.35);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M88 40H424Q448 40 448 64V260C448 372 364 446 256 488C148 446 64 372 64 260V64Q64 40 88 40Z' fill='%230A0A0B'/%3E%3C/svg%3E") center / 20px 20px no-repeat, radial-gradient(circle at 34% 30%, #FFD66B 0%, #F0B323 45%, #B07A0C 100%); }
.cer-seal i.l { clip-path: polygon(-10% -10%, 52% -10%, 46% 30%, 55% 52%, 44% 74%, 50% 110%, -10% 110%); }
.cer-seal i.r { clip-path: polygon(52% -10%, 110% -10%, 110% 110%, 50% 110%, 44% 74%, 55% 52%, 46% 30%); }
.cer-crack { position: absolute; left: 0; top: -4px; width: 44px; height: 52px; overflow: visible; }
.cer-crack polyline { fill: none; stroke: #3A2600; stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; }
/* the sheen that crosses a fame card once, and the Hall of Shame's falling notes (both only while it plays) */
.cer-sheen { position: absolute; inset: 0; z-index: 4; overflow: hidden; border-radius: inherit; pointer-events: none; }
.cer-sheen::before { content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,241,204,.22), transparent); transform: translateX(-160%) skewX(-16deg); }
.cer-notes { position: absolute; right: 8%; top: 50%; width: 70px; height: 90px; z-index: 5; pointer-events: none; }
.cer-notes svg { position: absolute; left: 0; top: 0; width: 22px; height: 22px; fill: #FFB4AB; opacity: 0; }
.cer-notes svg:nth-child(2) { left: 14px; top: 16px; } .cer-notes svg:nth-child(3) { left: 28px; top: 32px; }
/* the Cup envelope: the full crest as a watermark, the winner's crest and name, the score, the pinstriped winners band */
.cer-card.k-cup::after { content: ""; position: absolute; left: 50%; top: 18px; width: 220px; height: 230px; margin-left: -110px; z-index: 0; pointer-events: none; background: url(/img/logo-sm.png) center / contain no-repeat; opacity: .08; }
.cer-team { display: flex; align-items: center; justify-content: center; gap: 12px; font: 800 clamp(34px, 11vw, 52px)/1 var(--font-ui); letter-spacing: -0.03em; }
.cer-team .cer-crest { width: 46px; height: 52px; flex: none; }
.cer-team.red, .cer-score b.red { color: var(--stage-red-ink); } .cer-team.blue, .cer-score b.blue { color: var(--stage-blue-ink); }
.cer-score { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin-top: 10px; font: 800 44px/1 var(--font-ui); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.cer-score span { font-size: 26px; font-weight: 700; letter-spacing: 0; color: rgba(255,255,255,.62); }
.cer-card.k-cup .cer-val { font-weight: 500; font-size: var(--t-meta); color: var(--on-stage-2); margin-top: 8px; }
.cer-avs { flex-wrap: nowrap; gap: 0; margin-top: 16px; padding: 10px 10px 10px 24px; border-radius: 16px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 8px), var(--brand); }
.cer-avs.red { background: repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 8px), var(--red); }
.cer-avs.blue { background: repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 8px), var(--blue); }
.cer-avs .avatar, .cer-avs .avatar.red, .cer-avs .avatar.blue { --size: 36px; margin-left: -14px; flex: none; box-shadow: 0 0 0 2px rgba(0,0,0,.25); }
/* under the card: the rail and the line; the organizer's controls at the foot, Next an amber pill */
.cer-rail { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }
.cer-rail i { width: 8px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.22); }
.cer-rail i.done { background: rgba(240,179,35,.45); }
.cer-rail i.on { width: 22px; background: var(--gold); }
.cer-wait { margin-top: 12px; font-size: var(--t-meta); color: var(--on-stage-2); }
.cer-foot { width: 100%; max-width: 420px; margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; align-items: center; }
.cer-ctl { margin-top: 0; }
.cer-ctl .btn { height: 56px; border-radius: var(--r-pill); font-weight: 800; }
.cer-ctl .btn.gold { background: var(--gold); color: #111113; box-shadow: none; border: 0; }
/* the envelope in motion (only under .play: a fresh envelope with motion allowed); the timeline starts at render, as the
   3-2-1 does: thumps at 0, 750 and 1500 ms, crack 1520, split 1660, flap 1780, turn away 2060, turn back at the open */
.cer-env-wrap.play .cer-count { animation: c2-count 750ms var(--c2-out) 3; }
.cer-env-wrap.play .cer-seal { animation: c2-thump 320ms var(--c2-out), c2-thump 320ms var(--c2-out) 750ms, c2-thump 320ms var(--c2-out) 1500ms; }
.cer-env-wrap.play .cer-crack polyline { animation: c2-draw 140ms linear 1520ms forwards; }
.cer-env-wrap.play .cer-crack { animation: c2-gone 120ms linear 1660ms forwards; }
.cer-env-wrap.play .cer-seal i.l { animation: c2-split-l 420ms var(--c2-in) 1660ms forwards; }
.cer-env-wrap.play .cer-seal i.r { animation: c2-split-r 420ms var(--c2-in) 1660ms forwards; }
.cer-env-wrap.play .cer-card.covered ~ .cer-flap { animation: c2-flap 300ms var(--c2-inout) 1780ms forwards; }
.cer-env-wrap.play .cer-card.covered { animation: c2-turn-out 190ms var(--c2-in) 2060ms forwards; }
.cer-env-wrap.play .cer-card.open { animation: c2-turn-in 240ms var(--c2-out) both; }
.cer-env-wrap.play .cer-card.open .cer-win > .avatar, .cer-env-wrap.play .cer-card.open .cer-tie-g .avatar, .cer-env-wrap.play .cer-card.open .cer-plq .avatar { animation: c2-rise 560ms var(--c2-spring) 120ms both; }
.cer-env-wrap.play .cer-card.open .cer-name, .cer-env-wrap.play .cer-card.open .cer-tie-n, .cer-env-wrap.play .cer-card.open .cer-team, .cer-env-wrap.play .cer-card.open .cer-score { animation: c2-up 420ms var(--c2-out) 220ms both; }
.cer-env-wrap.play .cer-card.open:not(.is-shame) .cer-sheen::before { animation: c2-sheen 900ms var(--c2-inout) 300ms both; }
.cer-env-wrap.play .cer-card.open.is-shame { animation: c2-turn-in 240ms var(--c2-out) both, c2-tilt 700ms var(--c2-out) 1300ms forwards; }
.cer-env-wrap.play .cer-card.open.is-shame .cer-win > .avatar { animation: c2-rise 560ms var(--c2-spring) 120ms both, c2-wobble 1200ms ease-out 760ms forwards; }
.cer-env-wrap.play .cer-card.open.is-shame .cer-win > .cer-name { animation: c2-up 420ms var(--c2-out) 220ms both, c2-sag 900ms ease-in 1100ms forwards; }
.cer-card.open .cer-notes svg { animation: c2-womp 950ms ease-in 900ms both; }
.cer-card.open .cer-notes svg:nth-child(2) { animation-delay: 1150ms; } .cer-card.open .cer-notes svg:nth-child(3) { animation-delay: 1400ms; }
@keyframes c2-count { 0% { opacity: 0; transform: scale(1.6); } 18% { opacity: 1; transform: scale(1); } 100% { opacity: 1; transform: scale(.96); } }
@keyframes c2-thump { 35% { transform: scale(1.14); } }
@keyframes c2-draw { to { stroke-dashoffset: 0; } }
@keyframes c2-gone { to { opacity: 0; } }
@keyframes c2-split-l { to { opacity: 0; transform: translate(-34px, 60px) rotate(-40deg); } }
@keyframes c2-split-r { to { opacity: 0; transform: translate(34px, 68px) rotate(34deg); } }
@keyframes c2-flap { 0% { transform: perspective(700px) rotateX(180deg); z-index: 3; } 50% { z-index: 3; } 51% { z-index: 1; } 100% { transform: perspective(700px) rotateX(0deg); z-index: 1; } }
@keyframes c2-turn-out { to { transform: perspective(900px) rotateY(90deg); } }
@keyframes c2-turn-in { 0% { transform: perspective(900px) rotateY(-90deg); } 70% { transform: perspective(900px) rotateY(8deg); } 100% { transform: perspective(900px) rotateY(0deg); } }
@keyframes c2-rise { from { opacity: 0; transform: translateY(34px) scale(.7); } }
@keyframes c2-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes c2-sheen { from { transform: translateX(-160%) skewX(-16deg); } to { transform: translateX(330%) skewX(-16deg); } }
@keyframes c2-tilt { to { transform: perspective(900px) translateY(8px) rotate(2.5deg); } }
@keyframes c2-wobble { 0% { transform: none; } 14% { transform: rotate(-12deg); } 32% { transform: rotate(9deg); } 50% { transform: rotate(-6deg); } 68% { transform: rotate(3deg); } 100% { transform: translateY(8px) rotate(-3deg); } }
@keyframes c2-sag { to { transform: translateY(5px) rotate(-2deg); } }
@keyframes c2-womp { 0% { opacity: 0; transform: none; } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(24px, 50px) rotate(30deg); } }
@keyframes c2-fade { from { opacity: 0; } }

/* ---- the Cup clinch takeover (views/moments.js): a lit team field, pinstripe and contours, rays, the crest ---- */
.mo-take { isolation: isolate; background: var(--mo); background: radial-gradient(120% 80% at 50% 25%, color-mix(in srgb, var(--mo) 92%, white), var(--mo) 45%, color-mix(in srgb, var(--mo) 70%, black)); }
.mo-take::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: #fff; opacity: .08; -webkit-mask: url(/img/brand/topo-tile.svg) 0 0 / 240px repeat; mask: url(/img/brand/topo-tile.svg) 0 0 / 240px repeat; }
.mo-take::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 8px); }
.mo-take.c-gold::before, .mo-take.c-white::before, .mo-take.c-gold::after, .mo-take.c-white::after { display: none; }
.mo-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.mo-rays { position: absolute; left: 50%; top: 22%; width: 1000px; height: 1000px; margin: -500px 0 0 -500px; transform: rotate(24deg); background: repeating-conic-gradient(from 0deg, rgba(255,240,200,.10) 0deg 6deg, rgba(255,240,200,0) 6deg 18deg); -webkit-mask: radial-gradient(closest-side, #000 8%, rgba(0,0,0,.55) 35%, transparent 70%); mask: radial-gradient(closest-side, #000 8%, rgba(0,0,0,.55) 35%, transparent 70%); }
.mo-glow { position: absolute; left: 50%; top: 22%; width: 300px; height: 300px; margin: -150px; border-radius: 50%; opacity: .5; background: radial-gradient(closest-side, rgba(255,221,130,.5), rgba(255,221,130,0)); }
.mo-crest { width: 120px; height: auto; filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
.mo-kicker { text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.mo-head { font-family: var(--font-ui); font-weight: 800; letter-spacing: -0.03em; text-shadow: 0 2px 0 rgba(0,0,0,.12), 0 14px 30px rgba(0,0,0,.3); }
.mo-w { display: inline-block; }
.mo-w.foil { background: linear-gradient(100deg, #FFFFFF 0%, #FFE08A 30%, #FFFFFF 48%, #FFD66B 62%, #FFF1CC 100%); background-size: 260% 100%; background-position: 0 0; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 2px 0 rgba(0,0,0,.22)); }
.mo-take.c-gold .mo-w.foil, .mo-take.c-white .mo-w.foil { background: none; color: inherit; filter: none; }
.mo-line { text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.mo-playing { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 16px 0 14px; border-radius: var(--r-pill); background: rgba(0,0,0,.28); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); font-weight: 700; font-size: var(--t-meta); }
.mo-playing[hidden] { display: none; }
.mo-wipe { position: fixed; z-index: 449; border-radius: 50%; pointer-events: none; background: var(--mo); will-change: transform; animation: c2-wipe 720ms var(--c2-inout) both; }
.mo-wipe { --mo: var(--brand); } .mo-wipe.c-red { --mo: var(--red); } .mo-wipe.c-blue { --mo: var(--blue); } .mo-wipe.c-gold { --mo: var(--gold); } .mo-wipe.c-black { --mo: var(--stage); } .mo-wipe.c-white { --mo: var(--surface-1); }
.mo-take.still { animation: c2-fade 200ms ease both; }
.mo-take.play { animation: c2-fade 380ms ease 520ms both; }
.mo-take.play .mo-rays { animation: c2-fade 700ms ease 600ms both, c2-rays 6200ms linear 600ms both; }
.mo-take.play .mo-glow { animation: c2-glow 1400ms var(--c2-out) 1000ms both; }
.mo-take.play .mo-crest { animation: c2-crest 900ms var(--c2-snap) 700ms both; }
.mo-take.play .mo-kicker { animation: c2-up 460ms var(--c2-out) 1150ms both; }
.mo-take.play .mo-w { animation: c2-word 580ms var(--c2-spring) calc(1250ms + var(--i, 0) * 70ms) both; }
.mo-take.play .mo-w.foil { animation: c2-word 580ms var(--c2-spring) calc(1250ms + var(--i, 0) * 70ms) both, c2-foil 1500ms ease 1900ms both; }
.mo-take.play .mo-g { animation: c2-face 640ms var(--c2-spring) calc(1850ms + var(--i, 0) * 140ms) both; }
.mo-take.play .mo-line, .mo-take.play .mo-sub { animation: c2-up 460ms var(--c2-out) 2400ms both; }
.mo-take.play .mo-hint { animation: c2-fade 600ms ease 3000ms both; }
@keyframes c2-wipe { from { transform: scale(.012); } }
@keyframes c2-rays { from { transform: rotate(0deg); } to { transform: rotate(24deg); } }
@keyframes c2-glow { 0% { opacity: 0; transform: scale(.4); } 35% { opacity: 1; transform: scale(1.15); } 100% { opacity: .5; transform: scale(1); } }
@keyframes c2-crest { 0% { opacity: 0; transform: translateY(-30px) scale(.2) rotate(-16deg); } 1% { opacity: 1; } 100% { transform: none; } }
@keyframes c2-word { from { opacity: 0; transform: translateY(22px) scale(.92); } }
@keyframes c2-foil { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes c2-face { from { opacity: 0; transform: translateY(24px) scale(.5); } }

/* ---- the walk-up plate: equalizer bars and the name scrolling past, only while a walk-up plays (walkups.js) ---- */
.c2-eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; flex: none; }
.c2-eq i { width: 4px; height: 18px; border-radius: 2px; background: var(--gold); transform-origin: 50% 100%; transform: scaleY(.45); }
.on .c2-eq i:nth-child(1) { animation: c2-e1 520ms ease-in-out infinite alternate; } .on .c2-eq i:nth-child(2) { animation: c2-e2 380ms ease-in-out infinite alternate; }
.on .c2-eq i:nth-child(3) { animation: c2-e3 460ms ease-in-out infinite alternate; } .on .c2-eq i:nth-child(4) { animation: c2-e4 600ms ease-in-out infinite alternate; }
@keyframes c2-e1 { 0% { transform: scaleY(.3); } 60% { transform: scaleY(1); } 100% { transform: scaleY(.55); } }
@keyframes c2-e2 { 0% { transform: scaleY(.8); } 50% { transform: scaleY(.25); } 100% { transform: scaleY(1); } }
@keyframes c2-e3 { 0% { transform: scaleY(.45); } 40% { transform: scaleY(.9); } 100% { transform: scaleY(.3); } }
@keyframes c2-e4 { 0% { transform: scaleY(1); } 55% { transform: scaleY(.4); } 100% { transform: scaleY(.75); } }
.c2-mq { flex: 1 1 auto; min-width: 0; overflow: hidden; -webkit-mask: linear-gradient(90deg, #000 88%, transparent); mask: linear-gradient(90deg, #000 88%, transparent); }
.c2-mq > span { display: inline-flex; white-space: nowrap; }
.c2-mq > span > span { padding-right: 28px; }
.on .c2-mq { -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.on .c2-mq > span { animation: c2-mq 6s linear infinite; }
:not(.on) > .c2-mq > span > span + span { display: none; }
@keyframes c2-mq { to { transform: translateX(-50%); } }
.wu-name.on { background: var(--stage); color: #fff; border-color: var(--stage); }
.wu-plate { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 24px; font-size: var(--t-label); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3; }
.wu-now { display: flex; align-items: center; gap: 10px; height: 44px; margin: 0 0 var(--s3); padding: 0 16px 0 14px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); font-size: var(--t-label); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; overflow: hidden; }
.wu-now.on { background: var(--stage); color: #fff; }
.wu-now:not(.on) .c2-eq i { background: var(--ink-3); }

/* ---- Feed (views/feed.js): shadowed cards, the team tag, the location chip on photos, amber reactions ---- */
.post { background: var(--surface-1); border: 1px solid transparent; border-radius: var(--r3); box-shadow: var(--e1); }
.post .phead .avatar { --size: 42px; box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--c2-ring, var(--line-strong)); }
.post .phead .avatar.red, .compose-row .avatar.red { --c2-ring: var(--red); } .post .phead .avatar.blue, .compose-row .avatar.blue { --c2-ring: var(--blue); }
.post .phead .nm { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 800; }
.post .phead .tt { display: inline-flex; align-items: center; min-height: 22px; margin: 0; padding: 0 8px; border-radius: 6px; background: var(--ink-3); color: #fff; font: 700 var(--t-micro)/1 var(--font-ui); letter-spacing: 0; text-transform: none; }
.post .phead .tt.red { background: var(--red); } .post .phead .tt.blue { background: var(--blue); }
.post .media { position: relative; }
.p-loc { position: absolute; left: 12px; bottom: 12px; z-index: 1; display: inline-flex; align-items: center; max-width: calc(100% - 24px); height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: rgba(10,10,10,.66); color: #fff; font: 600 var(--t-micro)/1 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.post .react { border: 0; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-1); font-weight: 700; box-shadow: none; }
.post .react.on { background: var(--gold); color: #111113; box-shadow: none; }
.compose-row { border: 1px solid transparent; border-radius: var(--r3); box-shadow: var(--e1); padding: 10px 10px 10px 12px; }
.compose-row .avatar { --size: 32px; box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 3.5px var(--c2-ring, var(--line-strong)); }
.compose-cam { width: var(--tap); height: var(--tap); background: var(--surface-2); color: var(--brand-ink); }
.seg-badge { background: var(--gold); color: #111113; }
.msg.mine .bubble { background: var(--brand); color: var(--on-brand); }

/* ---- Players (views/players.js): roster cards with a nickname plate; the profile cover, ring, crest patch ---- */
.pcard { background: var(--surface-1); border: 1px solid transparent; border-radius: var(--r3); box-shadow: var(--e1); }
.pcard.red::before { background: var(--red); } .pcard.blue::before { background: var(--blue); }
/* Todd (Sep 13 2026): roster tiles carry a soft team wash instead of plain white, strongest at the top and easing toward the card. */
.pcard.red { background: linear-gradient(180deg, color-mix(in srgb, var(--red-tint) 70%, var(--surface-1)) 0%, color-mix(in srgb, var(--red-tint) 28%, var(--surface-1)) 100%); }
.pcard.blue { background: linear-gradient(180deg, color-mix(in srgb, var(--blue-tint) 70%, var(--surface-1)) 0%, color-mix(in srgb, var(--blue-tint) 28%, var(--surface-1)) 100%); }
@media print { .pcard.red, .pcard.blue { background: #fff; } }
.pcard .pc-av { display: flex; flex-direction: column; align-items: center; }
.pcard .pc-av .avatar { margin: 4px auto 0; }
.pcard .pc-av .avatar.red { box-shadow: 0 0 0 3px var(--surface-1), 0 0 0 5.5px var(--red); } .pcard .pc-av .avatar.blue { box-shadow: 0 0 0 3px var(--surface-1), 0 0 0 5.5px var(--blue); }
.pcard .nick.plate { position: relative; z-index: 1; display: inline-block; max-width: calc(100% - 8px); margin: -12px 0 8px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--stage); color: var(--gold); font-family: var(--font-story); font-weight: 600; font-size: var(--t-label); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard .pc-av:not(:has(.plate)) { margin-bottom: 10px; }
.pcard .nm { font-weight: 800; }
.pcard .rec { color: var(--ink-1); font-weight: 800; letter-spacing: -0.02em; }
#profile .profile-hero { padding: 0 16px 18px; border: 1px solid transparent; border-top: 0; border-radius: var(--r4); box-shadow: var(--e1); overflow: hidden; }
.profile-hero .ph-cover { position: relative; isolation: isolate; height: 84px; margin: 0 -16px; background: var(--stage) center 55% / cover no-repeat; }
.profile-hero .ph-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(0,0,0,.25)); }
.profile-hero .ph-cover.none::before { content: ""; position: absolute; inset: 0; background: #fff; opacity: .09; -webkit-mask: url(/img/brand/topo-tile.svg) 0 0 / 240px repeat; mask: url(/img/brand/topo-tile.svg) 0 0 / 240px repeat; }
.profile-hero .ph-av { position: relative; isolation: isolate; width: 100px; height: 100px; margin: -50px auto 12px; }
.profile-hero .ph-av::before { content: ""; position: absolute; inset: -22%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, var(--c2-halo, transparent), transparent); }
.profile-hero.red .ph-av { --c2-halo: color-mix(in srgb, var(--red) 30%, transparent); } .profile-hero.blue .ph-av { --c2-halo: color-mix(in srgb, var(--blue) 30%, transparent); }
#profile .profile-hero .ph-av .avatar { --size: 100px; margin: 0; box-shadow: 0 0 0 3px var(--c2-ring, var(--line-strong)), 0 0 0 7px var(--surface-1); }
#profile .profile-hero .ph-av .avatar.red { --c2-ring: var(--red); } #profile .profile-hero .ph-av .avatar.blue { --c2-ring: var(--blue); }
.profile-hero .ph-patch { position: absolute; right: -6px; bottom: -4px; width: 32px; height: 36px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
#profile .profile-hero .nm { font: 800 30px/1.05 var(--font-ui); letter-spacing: -0.03em; }
#profile .profile-hero.red .meta span:first-child { background: var(--red-tint); color: var(--red-ink); }
#profile .profile-hero.blue .meta span:first-child { background: var(--blue-tint); color: var(--blue-ink); }
#profile .statbar { border: 1px solid transparent; border-radius: var(--r3); box-shadow: var(--e1); }
#profile .statbar .v { font-size: 30px; font-weight: 800; letter-spacing: -0.04em; }
.mo-f-date { flex: none; margin-left: var(--s2); font-size: var(--t-meta); color: var(--ink-3); }

/* ---- Stats and leaderboards: 800 values, the rank discs ---- */
.lb { border: 1px solid transparent; box-shadow: var(--e1); }
.lb-row .vl, .race-pts, .lb.shame .lb-row .vl { font-weight: 800; letter-spacing: -0.02em; }
.rank-disc { font-weight: 800; }
.rank-disc.r1 { background: var(--gold); color: #111113; }

/* ---- the Awards Night results page (views/awards.js): the Cup on the stage with the drawn Cup ---- */
#awards .award { border: 1px solid transparent; box-shadow: var(--e1); }
#awards .award.gold { border-color: var(--gold); }
#awards .award.cup, #awards .award.cup.red, #awards .award.cup.blue { background: var(--stage); color: #fff; border: 0; box-shadow: var(--e2); }
#awards .award.cup .c2-cup { width: 48px; height: 64px; }
#awards .award.cup .a-team { font-family: var(--font-ui); font-weight: 800; letter-spacing: -0.03em; }
#awards .award.cup.red .a-team { color: var(--stage-red-ink); } #awards .award.cup.blue .a-team { color: var(--stage-blue-ink); }
#awards .award .a-ic .c2-cup { width: 30px; height: 40px; background: var(--gold-ink); }

/* ---- Clubhouse TV (views/tv.js): lava ground with amber contours, solid team panels ---- */
body.tv-mode { background: var(--stage); }
.tv { position: relative; isolation: isolate; background: radial-gradient(120% 90% at 50% 0%, var(--stage-2), var(--stage) 62%); }
.tv::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--gold); opacity: .07; -webkit-mask: url(/img/brand/topo-tile.svg) 0 0 / 240px repeat; mask: url(/img/brand/topo-tile.svg) 0 0 / 240px repeat; }
.tv-brand { font: 800 1.1em/1 var(--font-ui); letter-spacing: .02em; text-transform: uppercase; }
.tv-clock { color: var(--gold); }
.tv-team, .tv-team.red, .tv-team.blue { border: 0; color: #fff; }
.tv-team.red { background: var(--red); } .tv-team.blue { background: var(--blue); }
.tv-team .n { color: #fff; }
.tv-team .p { font-family: var(--font-ui); font-weight: 800; letter-spacing: -0.04em; }
.tv-panel { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
.tv-m .side.red { color: var(--stage-red-ink); } .tv-m .side.blue { color: var(--stage-blue-ink); } .tv-m .side.lead { color: var(--gold); }
.tv-m .sc { font-family: var(--font-ui); font-weight: 800; }
/* The name cell shares the class .side with the match cards, whose .side is a grid: the bare name became an anonymous
   grid item in a narrow first column and wrapped one letter to a line (delight.md F13). On the TV it is plain text. */
.tv-m .side { display: block; }
.tv-h, .tv-wait, .tv-cer-title, .tv-cer-name, .tv-cer-team, .tv-cer-count { font-family: var(--font-ui); font-weight: 800; letter-spacing: -0.03em; }
.tv-cer { background: #161618; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 60px -20px rgba(0,0,0,.9); }
.tv-cer.k-cup, .tv-cer.k-mvp { border-color: rgba(240,179,35,.55); }
.tv-cer.is-shame { border-color: rgba(255,107,122,.38); }
.tv-cer-veil { background: linear-gradient(transparent 40%, rgba(10,10,11,.97) 58%); }
.tv-cer-name { color: #fff; }
.tv-cer-ic .c2-cup { width: .9em; height: 1.2em; }

/* ---- the organizer (views/admin.js and friends): dense and bordered on purpose; the fan pass QR always on white ---- */
.org .card, .org .list { border: 1px solid var(--line); box-shadow: none; }
.org .btn.sm, .sheet .btn.sm { border-radius: 10px; box-shadow: none; }
.fan-qr { display: grid; place-items: center; width: fit-content; max-width: 100%; margin: 8px auto 0; padding: 16px; border-radius: 16px; background: #FFFFFF; line-height: 0; }
.fan-qr svg { display: block; max-width: 100%; height: auto; padding: 0; }
.as-chip, .mention.me, .fan-pill { background: var(--gold-tint); color: var(--gold-ink); }

/* ---- the fan screens (views/fan.js): the Home lockup in the header ---- */
.fan-screen .header .brand.lockup { display: flex; align-items: center; gap: 10px; }
.fan-screen .header .brand.lockup img { width: 28px; height: 28px; flex: none; }
.fan-screen .header .brand.lockup .wordmark { font: 800 19px/1 var(--font-ui); letter-spacing: .02em; text-transform: uppercase; color: var(--ink-1); }
.fan-screen .header .brand.lockup .year { display: inline-flex; align-items: center; font: 800 19px/1 var(--font-ui); color: var(--ink-2); }
.fan-screen .header .brand.lockup .year::before { content: ""; width: 1px; height: 14px; margin: 0 9px 0 7px; background: var(--gold); }
.fan-code { font-family: var(--font-ui); font-weight: 800; letter-spacing: .12em; }

/* ---- sign-in (views/login.js): pill keys ---- */
.keypad button { height: 56px; border-radius: var(--r-pill); background: var(--surface-1); border: 1px solid var(--line-strong); font: 700 26px/1 var(--font-ui); color: var(--ink-1); }
html[data-ts="l"] .keypad button, html[data-ts="xl"] .keypad button { height: 64px; }
.keydel { border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-1); }

/* ---- empty states: a shield outline with the screen's own glyph inside, sentence-case copy ---- */
.empty .e { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 12px; font-size: 0; color: var(--ink-3); }
.empty .e::before { content: ""; position: absolute; inset: 0; background: var(--line-strong); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M88 40H424Q448 40 448 64V260C448 372 364 446 256 488C148 446 64 372 64 260V64Q64 40 88 40Z' fill='none' stroke='%23000' stroke-width='24'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M88 40H424Q448 40 448 64V260C448 372 364 446 256 488C148 446 64 372 64 260V64Q64 40 88 40Z' fill='none' stroke='%23000' stroke-width='24'/%3E%3C/svg%3E") center / contain no-repeat; }
.empty .e svg, .org-empty .e svg { position: relative; width: 24px; height: 24px; margin-top: -4px; color: var(--ink-3); }
.empty .t { font-weight: 800; font-size: var(--t-body); color: var(--ink-1); }
.empty .s { font-size: var(--t-meta); color: var(--ink-2); }

/* ---- loading skeletons: a still base and one compositor-only shimmer that waits 300 ms (no flash on quick loads) ---- */
.skeleton { position: relative; overflow: hidden; background: var(--surface-2); animation: none; }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface-1) 70%, transparent), transparent); transform: translateX(-100%); animation: c2-shimmer 1.2s ease-in-out 300ms infinite; }
@keyframes c2-shimmer { to { transform: translateX(100%); } }

/* ---- night: cards swap the shadow for the 1px line (the token block turns --e1 off) ---- */
@media screen {
  html[data-theme="dark"] .post, html[data-theme="dark"] .compose-row, html[data-theme="dark"] .pcard, html[data-theme="dark"] #profile .profile-hero,
  html[data-theme="dark"] #profile .statbar, html[data-theme="dark"] .lb, html[data-theme="dark"] #awards .award:not(.cup):not(.gold) { border-color: var(--line); }
}
/* ---- reduced motion: the end frames only; the takeover keeps its short fade, the plate stands still. <html class="rm">
   (lane C1's motion.js: tests and stills) gets the same end frames as the phone's own setting. ---- */
html.rm .cer-env-wrap.play, html.rm .cer-env-wrap.play *, html.rm .cer-env-wrap.play *::before, html.rm .mo-take.play, html.rm .mo-take.play *, html.rm .skeleton::after, html.rm .on .c2-eq i, html.rm .on .c2-mq > span { animation: none !important; }
html.rm .mo-wipe, html.rm .cer-notes, html.rm .on .c2-mq > span > span + span { display: none; }
@media (prefers-reduced-motion: reduce) {
  .cer-env-wrap.play, .cer-env-wrap.play *, .cer-env-wrap.play *::before, .mo-take.play, .mo-take.play *, .skeleton::after { animation: none !important; }
  .mo-wipe, .cer-notes, .skeleton::after { display: none; }
  .on .c2-eq i { animation: none !important; transform: scaleY(.7); }
  .on .c2-mq > span { animation: none !important; }
  .on .c2-mq > span > span + span { display: none; }
  .c2-mq > span > span { overflow: hidden; text-overflow: ellipsis; }
  .cer-confetti { transition: none; }
}
@media (forced-colors: active) {
  .cer::before, .tv::before, .mo-take::before, .mo-take::after, .mo-bg, .ph-cover.none::before, .cer-confetti { display: none; }
  .c2-cup, .empty .e::before, .cer-seal i { forced-color-adjust: none; }
}
@media print {
  .cer, .tv, .mo-take { background: #fff !important; color: #111 !important; }
  .cer::before, .tv::before, .mo-take::before, .mo-take::after, .mo-bg, .c2-fx, .mo-wipe, .cer-confetti { display: none !important; }
}
/* === end C2 === */
/* === lane P === */
/* Edit profile's photo row (Sep 13 2026): the avatar and one line of copy, then the photo buttons on their own row, full
   width at 390 px so each is an easy tap. Only the golfer's own photo, a starter picture or initials. */
.pf-photo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2, 8px) var(--s3, 12px); margin-top: 6px; padding: var(--s3, 12px); border-radius: var(--radius, 14px); background: var(--surface-2, rgba(0, 0, 0, .04)); }
.pf-photo .pf-photo-txt { min-width: 0; }
.pf-photo .pf-photo-t { font-weight: 700; color: var(--ink-1, inherit); }
.pf-photo .pf-photo-btns { display: flex; flex-wrap: wrap; gap: var(--s2, 8px); flex-basis: 100%; }
.pf-photo .pf-photo-btns .btn { flex: 1 1 0; min-height: 44px; justify-content: center; }
/* === end P === */

/* === lane U === */
/* Lane U (Sep 13 2026). 1. The opening, longer, with a gold loading bar above the home indicator (timing in intro.js
   INTRO_MS). 2. Match tiles: each name holds its line, a long pair wraps after the slash, the Double Down chip follows
   the names. 3. Awards Night's opening photo slideshow (public/js/slideshow.js). */

/* 1. The full show, about 5.85 s: ball .4-1.9 s, crest and glow 1.8, shine 3.0, letters from 2.5 s (90 ms apart), Red and
   Blue collide at 4.35, the live line 4.6, out at 5.3. */
.full .i-hill { animation: iHill 1.3s .1s cubic-bezier(.2, .8, .2, 1) forwards; }
.full .i-bx { animation: iBx 1.5s .4s linear forwards; }
.full .i-bx .i-ball { animation: iBy 1.5s .4s forwards; }
.full .i-bx.t1, .full .i-bx.t1 .i-ball { animation-delay: .47s; }
.full .i-bx.t2, .full .i-bx.t2 .i-ball { animation-delay: .54s; }
.full .i-ring { animation: iRing 1.1s 1.9s ease-out forwards; }
.full .i-glow { animation: iGlow 2.4s 1.8s ease-out forwards; }
.full .i-crest { animation: iCrest 1s 1.85s cubic-bezier(.2, 1.4, .4, 1) forwards, iShine .9s 3s ease-in-out; }
.full .i-title span { animation: iLet .7s cubic-bezier(.2, 1.3, .4, 1) forwards; animation-delay: calc(2.5s + var(--i) * var(--istep, 90ms)); }
.full .i-red, .full .i-blue { animation: iBar .6s 3.75s cubic-bezier(.7, 0, .3, 1) forwards; }
.full .i-tn { animation: iFade .45s 4.2s forwards; }
.full .i-flash { animation: iFlash .8s 4.35s ease-out forwards; }
.full .i-stage { animation: iShake .4s 4.35s; }
.full .i-skip { animation: iFade .45s 1.2s forwards; }
/* The quick show, about 2.85 s: the crest pops, the letters rise fast, the bars meet at 1.45 s, the line, out at 2.3. */
.quick .i-crest { transform: translateX(-50%) scale(.2); animation: iCrest .7s .05s cubic-bezier(.2, 1.4, .4, 1) both; }
.quick .i-title span { opacity: 0; transform: translateY(40px) rotateX(70deg); animation: iLet .5s cubic-bezier(.2, 1.3, .4, 1) both; animation-delay: calc(.35s + var(--i) * 40ms); }
.quick .i-red { transform: translateX(-130%); animation: iBar .45s 1s cubic-bezier(.7, 0, .3, 1) forwards; }
.quick .i-blue { transform: translateX(130%); animation: iBar .45s 1s cubic-bezier(.7, 0, .3, 1) forwards; }
.quick .i-tn { opacity: 0; animation: iFade .3s 1.3s forwards; }
.quick .i-flash { animation: iFlash .6s 1.45s ease-out forwards; }
.quick .i-skip { animation: iFade .3s .4s forwards; }
/* The loading bar: gold on the dark stage, above the home indicator, filling over the show (--i-dur from intro.js).
   Reduced motion: it simply shows, full, for the short plain fade. */
.i-bar { position: absolute; left: 50%; bottom: calc(44px + env(safe-area-inset-bottom)); width: min(56vw, 240px); height: 4px; border-radius: 2px; transform: translateX(-50%); background: rgba(246, 243, 236, .18); overflow: hidden; }
.i-bar i { position: absolute; inset: 0; border-radius: inherit; background: var(--gold, #F0B323); transform: scaleX(0); transform-origin: 0 50%; animation: iFill var(--i-dur, 5300ms) linear forwards; }
.reduced .i-bar i { transform: none; animation: none; }
@keyframes iFill { to { transform: scaleX(1); } }
#intro.reduced.out { animation: none; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }

/* 2. Match tiles (Home, Matches, organizer): names wrap after the slash, never "Com…"; the chip drops under the names
   when the row is full. At Large and Extra-large text the status moves under the pairs so the names keep the width. */
.match-tile .mt-who { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s2); padding: 3px 0; }
.match-tile .mt-names { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: visible; white-space: normal; text-overflow: clip; line-height: 1.22; }
.match-tile .mt-n { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; }
.match-tile .mt-who .mt-dd { flex: none; }
.match-tile.void .mt-names { text-decoration: none; }
.match-tile.void .mt-n { text-decoration: line-through; color: var(--ink-3); }
html[data-ts="l"] .match-tile, html[data-ts="xl"] .match-tile { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; }
html[data-ts="l"] .match-tile .mt-status, html[data-ts="xl"] .match-tile .mt-status { grid-column: 1; grid-row: 4; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1) var(--s3); padding: var(--s2) 0 0 calc(6px + var(--s3)); text-align: left; }

/* 3. The opening slideshow: full-bleed photos on the stage (blurred fill behind a whole photo; portrait photos fill the
   screen), a slow zoom and a crossfade, the Awards Night plate, the count, and the organizer's foot. */
.ss-show { position: fixed; inset: 0; z-index: 401; overflow: hidden; background: var(--stage, #0A0A0B); color: #fff; animation: fadein .35s ease; -webkit-tap-highlight-color: transparent; }
.ss-show.out { animation: fadeout .45s ease forwards; pointer-events: none; }
.ss-frame { position: absolute; inset: 0; }
.ss-slide { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity 1.2s ease; }
.ss-slide.on { opacity: 1; }
.ss-bg { position: absolute; left: -8%; top: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(26px) brightness(.5) saturate(1.1); }
.ss-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ss-slide.tall .ss-img { object-fit: cover; }
.ss-slide.empty { background: radial-gradient(60% 40% at 50% 40%, rgba(240, 179, 35, .22), transparent 70%); }
.ss-slide.empty .ss-img, .ss-slide.empty .ss-bg { display: none; }
.ss-slide.zoom { animation: ssZoom var(--ss-ms, 7600ms) linear both; animation-delay: var(--ss-in, 0ms); }
.ss-slide[data-o="0"] { transform-origin: 50% 42%; } .ss-slide[data-o="1"] { transform-origin: 22% 30%; }
.ss-slide[data-o="2"] { transform-origin: 78% 34%; } .ss-slide[data-o="3"] { transform-origin: 50% 70%; }
@keyframes ssZoom { from { transform: scale(1); } to { transform: scale(1.1); } }
.ss-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .6) 0, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, .8) 74%, rgba(0, 0, 0, .92) 100%); }
.ss-top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; min-height: var(--tap, 44px); padding: calc(10px + var(--safe-t, env(safe-area-inset-top))) 16px 0 20px; }
.ss-count { font: 700 var(--t-label)/1.2 var(--font-ui); letter-spacing: .10em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .92); }
.ss-x { width: var(--tap, 44px); height: var(--tap, 44px); display: grid; place-items: center; margin-left: auto; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; }
.ss-x svg { width: 22px; height: 22px; }
.ss-bottom { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 14px; max-width: 520px; margin: 0 auto; padding: 0 20px calc(20px + env(safe-area-inset-bottom)); }
.ss-plate { padding: 2px 0 2px 14px; border-left: 4px solid var(--gold); }
.ss-kick { font: 700 var(--t-label)/1.2 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.ss-word { margin-top: 4px; font: 800 clamp(34px, 11vw, 46px)/1 var(--font-ui); letter-spacing: -0.035em; color: #fff; }
.ss-by { min-height: 1.3em; margin-top: 6px; font-size: var(--t-meta); color: rgba(255, 255, 255, .88); }
.ss-rail { height: 3px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, .22); }
.ss-rail i { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition-property: transform; transition-timing-function: linear; }
.ss-foot { display: flex; flex-direction: column; gap: 10px; }
.ss-music { display: flex; align-items: center; gap: 10px; min-height: var(--tap, 44px); padding: 0 2px 0 14px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .13); font-size: var(--t-meta); color: #fff; }
.ss-music[hidden] { display: none; }
.ss-note { display: grid; place-items: center; flex: none; } .ss-note svg { width: 18px; height: 18px; fill: var(--gold); }
.ss-mt { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ss-mt b { font-weight: 700; }
.ss-mute { flex: none; width: var(--tap, 44px); height: var(--tap, 44px); display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; color: #fff; }
.ss-mute svg { width: 22px; height: 22px; }
.ss-mute[aria-pressed="true"] { color: var(--gold); }
.ss-tap { flex: 1; display: flex; align-items: center; gap: 10px; min-height: var(--tap, 44px); padding: 0; border: 0; background: none; color: #fff; font: inherit; font-weight: 700; text-align: left; }
.ss-tap svg { width: 18px; height: 18px; fill: var(--gold); flex: none; }
.ss-foot .btn.ss-skip { height: 56px; border: 0; border-radius: var(--r-pill); background: var(--gold); color: #111113; box-shadow: none; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .ss-slide.zoom { animation: none; } .ss-rail i { transition: none; } }
/* === end U === */
/* === lane S === */
/* The Leaderboard sheet: a tab per round that scrolls sideways at 390 px and at Extra-large text, a To par column, and the
   table scrolling inside its own card when it can't fit. */
.hm-scope-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-top: var(--s2); }
.hm-scope-scroll::-webkit-scrollbar { display: none; }
.hm-scope-scroll .hm-scope { display: flex; flex-wrap: nowrap; width: max-content; min-width: 100%; margin-top: 0; }
.hm-scope-scroll .hm-scope > button { flex: 1 0 auto; white-space: nowrap; padding-left: 14px; padding-right: 14px; }
.hm-board { overflow-x: auto; }
.hm-table .hm-tp { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm-table .hm-tp.under { color: var(--ok); font-weight: 700; }
.hm-table .hm-tp small { display: block; font-size: 12px; font-weight: 500; color: var(--ink-3); line-height: 1.1; }
.hm-table .hm-norank { display: inline-block; min-width: 28px; text-align: center; color: var(--ink-3); }
.hm-st-empty { margin-top: var(--s3); }
/* === end S === */
/* === fix C === */
/* Roster: a golfer who left the trip is marked on his tile (dimmed, with a Left tag where the Captain chip would sit). */
.pcard.fxc-left .pc-av, .pcard.fxc-left .nm, .pcard.fxc-left .rec { opacity: .55; }
.pcard .fxc-left-tag { position: absolute; top: 8px; left: 8px; font-size: var(--t-micro); font-weight: 700; letter-spacing: 0; color: var(--ink-2); background: var(--surface-2, var(--ivory-2)); box-shadow: inset 0 0 0 1px var(--line-strong); padding: 2px 6px; border-radius: 6px; }
/* Edit my profile: the read-only nickname and handicap line, and the Starter pictures inside the form. */
.fxc-lockline { margin: 2px 0 10px; }
.fxc-starter { margin: 4px 0 12px; }
.fxc-starter-t { margin-bottom: 2px; }
/* Course guide: tee pills wrap inside the screen at every text size. */
.fxc-tee-pills { max-width: 100%; }
.fxc-tee-pills .pill { white-space: normal; text-align: left; max-width: 100%; min-width: 0; height: auto; line-height: 1.3; overflow-wrap: anywhere; }
/* Settings: each switch is a 44px-tall target that looks the same (the track is painted in the middle 30px). */
.cb-settings .toggle, .cb-settings .toggle.on { height: 44px; padding: 7px 0; background-clip: content-box; }
.cb-settings .toggle::after { top: 10px; }
.cb-settings .toggle::before { inset: 0 -3px; }
/* Scorecard black band: the pair names wrap to two lines instead of cutting off ("TWO BEERS…"). */
.score-band.sm.hm-mband .sb-name, .match-sheet > .score-band.sm.hm-mband .sb-name { white-space: normal; overflow: hidden; text-overflow: clip; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.2; text-align: center; }
/* Prizes and money: the darkest green swatch stays visible on the dark card. */
@media screen { html[data-theme="dark"] { --fxc-money-1: #3E8E63; } }
/* Awards board at Extra large: one card a row, and long titles wrap inside the card. */
.award .a-title, .award .a-blurb, .award .a-name, .award .a-runner { min-width: 0; overflow-wrap: anywhere; }
html[data-ts="xl"] #awards .grid-2 { grid-template-columns: minmax(0, 1fr); }
/* Hall of Fame: the MVP label over the name. */
.fxc-hof-mvp { margin-bottom: 1px; }
/* === end fix C === */
/* === fix E === */
/* Awards Night (P07). A tie's names break only between words; four to six winners get a smaller size, and ceremony.js
   fitTies steps the whole tie down together (--fxe-tie-fs) until the widest word fits its column. */
.cer-tie-n { overflow-wrap: normal; word-break: normal; hyphens: manual; max-width: 100%; text-align: center; line-height: 1.15; font-size: var(--fxe-tie-fs, var(--t-result)); }
.cer-tie.n4 .cer-tie-n, .cer-tie.n5 .cer-tie-n, .cer-tie.n6 .cer-tie-n { font-size: var(--fxe-tie-fs, calc(19 * var(--u))); }
/* The Start sheet: the plan line scales with the text size, "Start the show" is the sheet's sticky footer (always on
   screen, even at Extra large), and the slideshow row with no photos looks as off as it is. */
.cer-plan { font-size: var(--t-body); line-height: 1.35; }
.check.fxe-off { color: var(--ink-3); cursor: default; }
.check.fxe-off input { opacity: .5; }
/* 44px taps: the autopilot chips, a plaque's Save and Back to the stats, the walk-up Play and Start here. */
.sv-chips .chip { height: var(--tap); min-height: var(--tap); }
.plaque-row .btn.xs { height: var(--tap); min-height: var(--tap); }
.wu-song-ctl .btn.sm { height: var(--tap); min-height: var(--tap); }
/* The Double Down takeover catches the tap that closes it (motion.js) instead of letting it through to the page (P01-01). */
.mo-dd { pointer-events: auto; touch-action: none; cursor: pointer; }
/* The day clinch banner sits under the header (views/moments.js sets its top) with its × in a plain circle (P01-08). */
.mo-day svg { box-sizing: content-box; width: 20px; height: 20px; padding: 8px; border-radius: 50%; background: color-mix(in srgb, var(--mo-on) 16%, transparent); }
/* Feed, Chat and the Reports sheet (P04-14): 44px taps. "withdraw" keeps its look and gets a 44px hit area. */
[data-shotdel] { position: relative; }
[data-shotdel]::after { content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: 44px; transform: translateY(-50%); }
.lightbox .x { width: var(--tap); height: var(--tap); }
.reply-q { min-height: var(--tap); padding-top: 12px; padding-bottom: 12px; }
.sheet [data-rep], .sheet [data-flag] { height: var(--tap); min-height: var(--tap); }
.post .phead-av { min-width: var(--tap); min-height: var(--tap); display: inline-grid; place-items: center; }
/* A closed chat: a message's row says so instead of offering reactions the server would refuse (P04-07). */
.fxe-ma-note { align-self: center; padding: 0 var(--s2); font-size: var(--t-micro); color: var(--ink-3); }
.msg-rx .react:disabled { opacity: 1; cursor: default; }
/* Fan screens, check-in and the organizer's fan passes (P10-21): 44px taps. */
.fan-pill { min-height: var(--tap); }
.fan-card .btn.sm, .fan-card .btn.xs { height: var(--tap); min-height: var(--tap); }
.fan-card details > summary { min-height: var(--tap); display: flex; align-items: center; }
.ci-line .textbtn[data-player] { min-width: var(--tap); min-height: var(--tap); text-align: left; }
#fan-ts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* The opening always leaves, even if the app code never runs (P01-13 failsafe; intro-boot.js normally ends it). Lane K
   (Sep 13 2026): 18 s, past the doubled full show (gone by about 11.7 s), so it never cuts the show short. */
#intro { animation: fxeIntroGone .3s 18s forwards; }
@keyframes fxeIntroGone { to { opacity: 0; visibility: hidden; } }
/* === end fix E === */
/* === fix F === */
/* Rounds & matches: a saved tee the round's course doesn't have ("pick a tee"). */
.fxf-warn { color: var(--red); }
.sheet #f .hint.fxf-warn { color: var(--red); font-weight: 600; }
/* Round form: rows put away by More options, or by Handicap strokes being off, stay hidden (.form-row is display:grid). */
.sheet #f [hidden] { display: none !important; }
.sheet #f .fxf-more { margin-top: 12px; }
/* Start next Cup and every half-width form row: date and time inputs shrink to their column instead of pushing the
   sheet sideways at 390 px. */
.form-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.form-row > .field, .form-row > label { min-width: 0; }
.form-row .input, .form-row .select { min-width: 0; width: 100%; max-width: 100%; }
/* Tone & games: "Off the record after" reads 10:00 PM at 390 px and at Extra-large text. */
#tn-off-at { width: auto !important; min-width: 8.5em; flex: none; }
/* Organizer tap targets: 44 px (Edit, PIN, More, Match, Score, Other days, chips, Remove). */
.org .btn.sm, .org .btn.xs, .sheet .btn.sm { min-height: var(--tap, 44px); }
.org .chip { min-height: var(--tap, 44px); }
.org .mdel { min-width: var(--tap, 44px); min-height: var(--tap, 44px); }
/* === end fix F === */
/* === fix D === */
/* Fix lane D (Sep 13 2026): score entry, the Leaderboard and the Matches tab after the super audit. Tokens only. */
/* P03-06 / P02-05: the Leaderboard fits a 390 phone at Normal text (tighter cells, no avatar under 430 px). At Large and
   Extra-large it scrolls inside its own card, with Pts pinned to the right edge, so points are always in view. */
.card.pad0.hm-board { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hm-table th, .hm-table td { padding-left: 5px; padding-right: 5px; }
.hm-table td.rank { width: 32px; padding-left: 8px; }
.hm-table .hm-golfer { width: 100%; }
.hm-table .who { gap: 6px; min-width: 0; }
.hm-table th.c, .hm-table td.c { white-space: nowrap; }
.hm-table .hm-pts { position: sticky; right: 0; z-index: 1; padding-right: 10px; background: var(--surface-1, var(--paper)); box-shadow: -8px 0 8px -8px rgba(0, 0, 0, .3); }
.hm-table tr.me .hm-pts { background: var(--gold-tint, var(--gold-soft)); }
@media (max-width: 430px) { .hm-table .who .avatar { display: none; } }
html[data-ts="l"] .hm-table .who .avatar, html[data-ts="xl"] .hm-table .who .avatar { display: none; }
/* P02-04: pair names on match tiles wrap after the slash and are never cut; a void tile's "Counts for nothing" wraps too. */
.match-tile .mt-names { white-space: normal; overflow: visible; text-overflow: clip; }
.match-tile .mt-n { display: inline; max-width: none; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.match-tile .mt-result { white-space: normal; text-align: right; }
.match-tile.void .mt-result { max-width: 7.5em; font-size: var(--t-meta); }
/* P02-15: a hole waiting on a confirmation is a "Confirm" tag, not a second gold dot. */
.match-tile .mt-conf { padding: 1px 8px; border-radius: var(--r-pill, 999px); border: 1.5px solid var(--gold); color: var(--gold-ink); font-size: var(--t-label); font-weight: 800; line-height: 1.4; }
/* P02-09: the rows under the matches wrap at Large and Extra-large instead of running off the edge. */
.hm-rows { grid-template-columns: minmax(0, 1fr); }
.hm-row { min-width: 0; }
.hm-rt b, .hm-rt span { white-space: normal; overflow-wrap: anywhere; }
/* P02-08 / P02-11: a course with no photo (or one that fails to load) shows the topo tile with its initial; the day's
   score carries the team letters. */
.hm-dh-fb { flex: none; position: relative; width: 56px; height: 56px; display: grid; place-items: center; overflow: hidden; border-radius: var(--r3, 12px); background: var(--brand, #0F4A2E); color: #fff; font: 800 24px/1 var(--font-ui); }
.hm-dh-fb::before { content: ""; position: absolute; inset: 0; background: #fff; opacity: .16; -webkit-mask: url(/img/brand/topo-tile.svg) 0 0 / 120px repeat; mask: url(/img/brand/topo-tile.svg) 0 0 / 120px repeat; }
.hm-dh-s .team-letter { width: 18px; height: 18px; margin: 0 4px; font-size: 11px; align-self: center; }
.hm-dh-off { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.hm-dh-off small { font-size: var(--t-meta); font-weight: 600; color: var(--ink-2); }
/* P03-01 / P03-11: the stepper. An untouched ball shows its par as a faint hint with a Par button; a bad box is red and
   says why; an unlikely score asks for one tap in the card. */
.stk-quick { display: flex; align-items: center; gap: 6px; }
.stk-parbtn, .sheet .stk-parbtn { min-width: 56px; height: var(--tap-score, 56px); padding: 0 8px; border-radius: var(--r3, 12px); border: 1.5px solid var(--gold); background: var(--gold-tint, var(--gold-soft)); color: var(--gold-ink); font-size: var(--t-label); font-weight: 800; }
.stk-num.empty::placeholder, .sheet .stk-num.empty::placeholder { color: var(--ink-3); opacity: .6; font-size: inherit; font-weight: 600; }
.stk-num.bad, .sheet .stk-num.bad { border-color: var(--err); color: var(--err); box-shadow: 0 0 0 3px rgba(184, 48, 42, .18); }
.stk-issues { display: grid; gap: 6px; margin-top: 10px; }
.stk-issue { padding: 8px 10px; border-radius: 10px; font-size: var(--t-meta); font-weight: 700; line-height: 1.35; }
.stk-issue.bad { color: var(--err); background: rgba(184, 48, 42, .08); }
.stk-issue.odd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; color: var(--gold-ink); background: var(--gold-tint, var(--gold-soft)); }
.stk-issue.odd .btn { min-height: var(--tap, 44px); }
/* P02-10: an upcoming match before its day. */
.stk-early { display: grid; gap: 6px; margin-top: 12px; padding: 14px; border-radius: 12px; background: var(--surface-2, var(--ivory-2)); }
.stk-early .btn { justify-self: start; min-height: var(--tap, 44px); }
/* P02-03: the strip pointing to a disputed hole. */
.confirm-strip.dispute-strip { border-color: var(--err); }
.confirm-strip.dispute-strip .t-label { color: var(--err); }
.confirm-strip.dispute-strip .chip { min-height: var(--tap, 44px); }
/* P03-04 / P03-14: the paper card (a strokes grid, or winner rows) and the Handicap sheet's round chips, 44 px taps. */
.pg-card .chip, .pg-card .xchip, .hcp-chips .chip { height: auto; min-height: var(--tap, 44px); }
.pg-row { padding: 8px 0; border-top: 1px solid var(--hair-2); }
.pg-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 8px; border: 1px solid var(--line, var(--hair)); border-radius: 12px; }
.pg-t { min-width: 100%; border-collapse: collapse; font-size: var(--t-meta); }
.pg-t th, .pg-t td { padding: 4px; border-bottom: 1px solid var(--hair-2); text-align: center; white-space: nowrap; }
.pg-t thead th { font-weight: 800; color: var(--ink-2); }
.pg-t tbody th { position: sticky; left: 0; z-index: 1; background: var(--surface-1, var(--paper)); }
.pg-t .pg-par { color: var(--ink-3); }
.pg-t .dot { margin-right: 4px; }
.pg-in { width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--line-strong, var(--hair)); border-radius: 10px; background: var(--surface-1, var(--paper)); color: var(--ink-1, var(--ink)); text-align: center; font: 700 18px/1 var(--font-ui); }
.pg-in.bad { border-color: var(--err); color: var(--err); }
.pg-t .pg-dd { min-width: 44px; justify-content: center; }
.pg-res { min-width: 120px; text-align: left !important; font-weight: 700; color: var(--ink-2); }
.pg-list { display: grid; gap: 4px; margin: 8px 0; padding-left: 20px; }
/* P04-04: the nomination forms stay inside a 390 phone; the photo row sits above Cancel / Nominate. */
.nom-sheet form, .nom-sheet .actions { min-width: 0; max-width: 100%; }
.nom-sheet .actions { flex-wrap: wrap; }
.nom-sheet .nom-media-row { max-width: 100%; }
/* === end fix D === */
/* === lane K === */
/* Lane K (Sep 13 2026), design team. 1. The player profile in the golfer's team colour (Todd: "more colorful page"):
   a Team Red golfer's page reads red, a Team Blue golfer's blue, always beside the team's word (the "Team Red" chip) and
   letter (the crest patch, the cover's big R or B). No team: the lava stage and quiet chips. Tokens only, AA in both
   themes, print comes out light. 2. The opening show at twice its length (Todd: "double the time"). */

/* 1a. The team's colours for the whole page, read from the hero (views/players.js puts the team class on it). */
#profile { --k-fill: var(--stage-2); --k-on: #FFFFFF; --k-ink: var(--ink-1); --k-tint: var(--surface-2); --k-stage-ink: #FFFFFF; --k-glow: rgba(0, 0, 0, .28); }
#profile:has(> .profile-hero.red) { --k-fill: var(--red); --k-on: var(--red-on); --k-ink: var(--red-ink); --k-tint: var(--red-tint); --k-stage-ink: var(--stage-red-ink); --k-glow: color-mix(in srgb, var(--red) 45%, transparent); }
#profile:has(> .profile-hero.blue) { --k-fill: var(--blue); --k-on: var(--blue-on); --k-ink: var(--blue-ink); --k-tint: var(--blue-tint); --k-stage-ink: var(--stage-blue-ink); --k-glow: color-mix(in srgb, var(--blue) 45%, transparent); }

/* 1b. The hero: a taller team cover (team ink to the lava stage with the contour texture before his first round; the
   course photo under a team wash after it) with the big team letter, and a card washed in the team tint below it. */
#profile .profile-hero { background: linear-gradient(180deg, var(--k-tint) 0, var(--k-tint) 150px, color-mix(in srgb, var(--k-tint) 30%, var(--surface-1)) 100%); }
#profile .profile-hero .ph-cover { height: 128px; overflow: hidden; background-color: var(--k-fill); }
#profile .profile-hero .ph-cover.none { background: linear-gradient(135deg, var(--k-fill) 0%, color-mix(in srgb, var(--k-fill) 48%, var(--stage)) 55%, var(--stage) 100%); }
#profile .profile-hero .ph-cover.none::before { opacity: .13; }
#profile .profile-hero .ph-cover::after { content: ""; display: flex; align-items: center; justify-content: flex-end; padding-right: 18px; font: 800 152px/.8 var(--font-ui); letter-spacing: -0.05em; color: rgba(255, 255, 255, .15);
  background: linear-gradient(180deg, color-mix(in srgb, var(--k-fill) 12%, transparent) 0%, color-mix(in srgb, var(--k-fill) 42%, transparent) 55%, color-mix(in srgb, var(--k-fill) 78%, var(--stage)) 100%); }
#profile .profile-hero .ph-cover.none::after { background: radial-gradient(55% 110% at 50% 100%, color-mix(in srgb, var(--k-fill) 60%, transparent), transparent 72%); }
#profile .profile-hero.red .ph-cover::after { content: "R"; content: "R" / ""; }
#profile .profile-hero.blue .ph-cover::after { content: "B"; content: "B" / ""; }
/* the avatar: a 4px team ring, a white gap, and a team glow under it */
#profile .profile-hero .ph-av { margin-top: -54px; }
#profile .profile-hero .ph-av::before { inset: -30%; background: radial-gradient(closest-side, var(--k-glow), transparent); }
#profile .profile-hero .ph-av .avatar { box-shadow: 0 0 0 4px var(--k-fill), 0 0 0 8px var(--surface-1), 0 18px 34px -10px var(--k-glow); }
/* the chips by meaning: the team on its fill, Captain in gold, the reigning champion gold on black, Cups in fairway
   green, hometown and index quiet (white pills on the tint), Left the trip in the warning colour */
#profile .profile-hero .meta { gap: var(--s2); margin-top: 14px; }
#profile .profile-hero .meta span { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border-radius: var(--r-pill); background: var(--surface-1); color: var(--ink-2); font-size: var(--t-label); font-weight: 700; line-height: 1.2; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k-fill) 26%, var(--line)); }
#profile .profile-hero .meta span.pk-team, #profile .profile-hero .meta span.pk-team:first-child { background: var(--k-fill); color: var(--k-on); box-shadow: 0 6px 14px -8px var(--k-glow); }
#profile .profile-hero .meta span.pk-cap { background: var(--gold); color: #111113; box-shadow: none; }
#profile .profile-hero .meta span.gold { background: var(--stage); color: var(--gold); box-shadow: inset 0 0 0 1.5px var(--gold); }
#profile .profile-hero .meta span.pk-cups { background: var(--brand-tint); color: var(--brand-ink); box-shadow: none; }
#profile .profile-hero .meta span.pk-idx { color: var(--ink-1); font-variant-numeric: tabular-nums; }
#profile .profile-hero .meta span.pk-left { background: var(--warn-tint); color: var(--warn); box-shadow: none; }

/* 1c. Section heads: a team bar before every title on the page. */
#profile .section-head .h2 { display: inline-flex; align-items: center; gap: 10px; }
#profile .section-head .h2::before { content: ""; flex: none; width: 6px; height: .9em; border-radius: 3px; background: var(--k-fill); }

/* 1d. This Cup: four separate tiles. Points on the team fill, Birdies and Eagles celebrated in gold, Double Downs in
   the team ink, all on the team tint. Labels may wrap to two lines instead of running out of a narrow tile. */
#profile > .ppl-prof-sec .statbar { gap: var(--s2); background: none; border: 0; box-shadow: none; overflow: visible; }
#profile > .ppl-prof-sec .statbar > div { border: 0; border-radius: 16px; padding: 14px 4px 12px; background: var(--k-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k-fill) 18%, transparent); }
#profile > .ppl-prof-sec .statbar > div .v { color: var(--k-ink); }
#profile > .ppl-prof-sec .statbar > div .l { color: var(--ink-2); }
#profile > .ppl-prof-sec .statbar > div:first-child { background: var(--k-fill); box-shadow: 0 10px 22px -12px var(--k-glow); }
#profile > .ppl-prof-sec .statbar > div:first-child :is(.v, .l) { color: var(--k-on); }
#profile > .ppl-prof-sec .statbar > div:is(:nth-child(2), :nth-child(3)) { box-shadow: inset 0 3px 0 var(--gold), inset 0 0 0 1px color-mix(in srgb, var(--k-fill) 18%, transparent); }
#profile > .ppl-prof-sec .statbar > div:is(:nth-child(2), :nth-child(3)) .v { color: var(--gold-ink); }
#profile .statbar .l { white-space: normal; line-height: 1.15; }
#profile .statbar .v.rec { font-size: 22px; white-space: nowrap; padding-top: 5px; }
@media screen { html[data-theme="dark"] #profile > .ppl-prof-sec .statbar { border-color: transparent; } }
/* Scores this Cup stays a white card; its Birdies count is gold too. */
#profile #pscores .statbar > div:nth-child(2) .v { color: var(--gold-ink); }

/* 1e. Walk-ups: the bar in the team colour with the equalizer; playing, it runs from the team into the stage with the
   gold equalizer. The day buttons sit on the team tint. */
#profile .wu-now { background: var(--k-fill); color: var(--k-on); box-shadow: 0 10px 22px -14px var(--k-glow); }
#profile .wu-now:not(.on) .c2-eq i { background: currentColor; opacity: .7; }
#profile .wu-now.on { background: linear-gradient(90deg, var(--k-fill), color-mix(in srgb, var(--k-fill) 35%, var(--stage))); color: #FFFFFF; }
#profile .wu-day.btn.soft { background: var(--k-tint); color: var(--k-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k-fill) 30%, transparent); }
#profile .wu-day.btn.soft small { color: var(--ink-2); }

/* 1f. Career: the complement, a black scoreboard with gold contours and a team rule on top. Titles in gold, Points in
   the team's stage ink, the rest white. */
#profile .ppl-career .statbar { position: relative; isolation: isolate; background: radial-gradient(120% 150% at 50% 0%, var(--stage-2), var(--stage) 70%); box-shadow: inset 0 3px 0 var(--k-fill), var(--e1); }
#profile .ppl-career .statbar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gold); opacity: .08; -webkit-mask: url(/img/brand/topo-tile.svg) 0 0 / 240px repeat; mask: url(/img/brand/topo-tile.svg) 0 0 / 240px repeat; }
#profile .ppl-career .statbar > div { border-left-color: rgba(255, 255, 255, .14); }
#profile .ppl-career .statbar .v { color: #FFFFFF; }
#profile .ppl-career .statbar .l { color: rgba(255, 255, 255, .78); }
#profile .ppl-career .statbar > div:nth-child(2) .v { color: var(--gold); }
#profile .ppl-career .statbar > div:nth-child(4) .v { color: var(--k-stage-ink); }

/* The organizer's New PIN / Reset and the wall's Post: 44px taps on the profile. */
#profile .btn.sm { min-height: var(--tap); }

/* 1g. Large and Extra-large text: the four-up rows go two by two, so every number and label keeps its size. */
html:is([data-ts="l"], [data-ts="xl"]) #profile .statbar.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html:is([data-ts="l"], [data-ts="xl"]) #profile :is(#pscores, .ppl-career) .statbar.four > div:nth-child(3) { border-left: 0; }
html:is([data-ts="l"], [data-ts="xl"]) #profile :is(#pscores, .ppl-career) .statbar.four > div:nth-child(n+3) { border-top: 1px solid var(--line); }
html:is([data-ts="l"], [data-ts="xl"]) #profile .ppl-career .statbar.four > div:nth-child(n+3) { border-top-color: rgba(255, 255, 255, .14); }

/* 1h. High contrast drops the textures and the letter; print comes out light: white grounds, black numbers, the team
   as a rule under the cover and its word on the chip. */
@media (forced-colors: active) { #profile .ph-cover::after, #profile .ppl-career .statbar::before { display: none; } }
@media print {
  #profile .profile-hero, #profile .ppl-career .statbar, #profile > .ppl-prof-sec .statbar > div, #profile .wu-now { background: #fff !important; color: #111 !important; box-shadow: none !important; }
  #profile > .ppl-prof-sec .statbar > div, #profile .ppl-career .statbar, #profile .profile-hero { border: 1px solid #ccc !important; }
  #profile .profile-hero .ph-cover { height: 18px; background: #fff !important; border-bottom: 4px solid var(--k-fill); }
  #profile .ph-cover::before, #profile .ph-cover::after, #profile .ppl-career .statbar::before, #profile .section-head .h2::before { display: none !important; }
  #profile .profile-hero .ph-av { margin-top: 14px; }
  #profile .statbar .v, #profile .statbar .l, #profile .ppl-career .statbar .v, #profile .ppl-career .statbar .l { color: #111 !important; }
  #profile .profile-hero .meta span { background: #fff !important; color: #111 !important; box-shadow: inset 0 0 0 1px #999 !important; }
}

/* 2. The opening at twice its length: every lane U beat doubled. Full: the ball .8-3.8 s, crest and glow 3.6, shine 6,
   letters from 5 s (180 ms apart), Red and Blue collide at 8.7, the live line 9.2, out at 10.6, gone by 11.7. Quick: the
   crest, the letters from .7 s, the bars meet at 2.9, the line 3, out at 4.6, gone by 5.7. The bar fills over INTRO_MS
   (--i-dur). The "tap to skip" hint keeps its old 1.2 s start so a longer show says so no later. A tap leaves at once
   (.skip, .3 s), and taps pass through to the page while the show fades. Reduced motion is unchanged. */
.full .i-hill { animation: iHill 2.6s .2s cubic-bezier(.2, .8, .2, 1) forwards; }
.full .i-bx { animation: iBx 3s .8s linear forwards; }
.full .i-bx .i-ball { animation: iBy 3s .8s forwards; }
.full .i-bx.t1, .full .i-bx.t1 .i-ball { animation-delay: .94s; }
.full .i-bx.t2, .full .i-bx.t2 .i-ball { animation-delay: 1.08s; }
.full .i-ring { animation: iRing 2.2s 3.8s ease-out forwards; }
.full .i-glow { animation: iGlow 4.8s 3.6s ease-out forwards; }
.full .i-crest { animation: iCrest 2s 3.7s cubic-bezier(.2, 1.4, .4, 1) forwards, iShine 1.8s 6s ease-in-out; }
.full .i-title span { animation: iLet 1.4s cubic-bezier(.2, 1.3, .4, 1) forwards; animation-delay: calc(5s + var(--i) * var(--istep, 180ms)); }
.full .i-red, .full .i-blue { animation: iBar 1.2s 7.5s cubic-bezier(.7, 0, .3, 1) forwards; }
.full .i-tn { animation: iFade .9s 8.4s forwards; }
.full .i-flash { animation: iFlash 1.6s 8.7s ease-out forwards; }
.full .i-stage { animation: iShake .8s 8.7s; }
.full .i-skip { animation: iFade .9s 1.2s forwards; }
.quick .i-crest { animation: iCrest 1.4s .1s cubic-bezier(.2, 1.4, .4, 1) both; }
.quick .i-title span { animation: iLet 1s cubic-bezier(.2, 1.3, .4, 1) both; animation-delay: calc(.7s + var(--i) * 80ms); }
.quick .i-red, .quick .i-blue { animation: iBar .9s 2s cubic-bezier(.7, 0, .3, 1) forwards; }
.quick .i-tn { animation: iFade .6s 2.6s forwards; }
.quick .i-flash { animation: iFlash 1.2s 2.9s ease-out forwards; }
.quick .i-skip { animation: iFade .6s .8s forwards; }
.full .i-sub, .quick .i-sub { transition-duration: 1.2s; }
.i-bar i { animation-duration: var(--i-dur, 10600ms); }
#intro.out { pointer-events: none; }
#intro.full.out, #intro.quick.out { animation-duration: 1.1s; }
#intro.out.skip { animation-duration: .3s; }
/* === end K === */
/* === lane G === */
/* Save is a review step inside the scorecard (Todd, Sep 13 2026): every score for the hole, the result, Double Downs,
   pick-ups and birdies, an unlikely score marked, then Change / Confirm and save in the sticky footer. Tokens only, so
   light and dark both follow. */
.sheet .stk-review { margin-top: var(--s2); padding: var(--s3); border-radius: var(--r3); background: var(--surface-1); border: 1.5px solid var(--line); box-shadow: var(--e1); }
.stk-review .rv-t { font-size: var(--t-label); font-weight: 800; color: var(--ink-2); }
.stk-review .rv-sides { display: grid; gap: var(--s1); margin-top: var(--s2); }
.stk-review .rv-side { padding-top: var(--s2); border-top: 1px solid var(--line); }
.stk-review .rv-side:first-child { padding-top: 0; border-top: 0; }
.stk-review .rv-h { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: var(--t-meta); color: var(--ink-1); }
.stk-review .rv-line { margin-top: 4px; font-size: var(--t-meta); color: var(--ink-2); }
.stk-review .rv-ball { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who num" "par num" "odd odd"; column-gap: var(--s3); align-items: center; margin-top: 6px; padding: 6px var(--s2); border-radius: var(--r2); }
.stk-review .rv-who { grid-area: who; min-width: 0; font-weight: 700; font-size: var(--t-meta); color: var(--ink-1); overflow-wrap: anywhere; }
.stk-review .rv-who small { margin-left: 4px; font-weight: 700; color: var(--ok); }
.stk-review .rv-par { grid-area: par; font-size: var(--t-micro); color: var(--ink-2); }
.stk-review .rv-num { grid-area: num; min-width: 2ch; text-align: right; font-size: calc(30 * var(--u)); font-weight: 800; line-height: 1; color: var(--ink-1); }
.stk-review .rv-ball.odd { background: var(--warn-tint); box-shadow: inset 0 0 0 1.5px var(--warn); }
.stk-review .rv-ball.odd .rv-num, .stk-review .rv-odd, .stk-review .rv-oddnote { color: var(--warn); }
.stk-review .rv-odd { grid-area: odd; margin-top: 2px; font-size: var(--t-micro); font-weight: 700; }
.stk-review .rv-result { margin-top: var(--s3); padding: var(--s3); border-radius: var(--r2); background: var(--surface-2); color: var(--ink-1); text-align: center; font-size: var(--t-body); font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.stk-review .rv-result.won { background: var(--ink-1); color: var(--bg); }
.stk-review .rv-x { display: grid; gap: 2px; margin: var(--s2) 0 0; padding-left: 18px; font-size: var(--t-meta); color: var(--ink-2); }
.stk-review .rv-oddnote { margin-top: var(--s2); font-size: var(--t-micro); font-weight: 700; }
.sheet .hm-foot .rv-acts { display: flex; gap: var(--s2); }
.sheet .hm-foot .rv-acts .stk-change { flex: 0 0 auto; height: var(--tap-primary); min-height: var(--tap-primary); padding: 0 var(--s4); border-radius: var(--r-pill); font-size: var(--t-body); }
.sheet .hm-foot .rv-acts .stk-save { flex: 1 1 auto; width: auto; }
/* The organizer's read-only personality notes in his player edit (never sent to golfers, fans or scripts). */
.lg-notes { margin: var(--s3) 0 0; padding: var(--s3); border-radius: var(--r2); background: var(--surface-2); color: var(--ink-2); font-size: var(--t-meta); }
.lg-notes .lg-notes-t { font-weight: 800; color: var(--ink-1); }
.lg-notes p { margin: 4px 0 0; overflow-wrap: anywhere; }
/* === end G === */
/* === lane PR === */
/* Lane PR (Todd, Sep 13 2026): what the organizer sets, read-only on a golfer's own profile and in his Edit form: Team,
   Handicap index, Cups played, Paid so far. Four tiles on a white card; on the profile they take the team tint, the team
   in the team ink and the money in gold. Tokens only, so light and dark both follow. */
.pr-own-sec { margin-top: var(--s3); }
.pr-own { padding: var(--s3); border-radius: var(--r3); background: var(--surface-1); border: 1px solid var(--line); box-shadow: var(--e1); }
.sheet .pr-own { margin: var(--s2) 0 var(--s3); box-shadow: none; }
.pr-own .pr-own-t { font-size: var(--t-label); font-weight: 800; color: var(--ink-2); }
.pr-own .pr-own-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); margin: var(--s2) 0 0; }
.pr-own .pr-own-i { min-width: 0; padding: 10px 12px; border-radius: var(--r2); background: var(--surface-2); }
.pr-own dt { font-size: var(--t-micro); font-weight: 700; color: var(--ink-2); }
.pr-own dd { margin: 2px 0 0; font-size: var(--t-body); font-weight: 800; line-height: 1.25; color: var(--ink-1); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pr-own .pr-own-n { margin-top: var(--s2); font-size: var(--t-micro); color: var(--ink-2); }
#profile .pr-own .pr-own-i { background: var(--k-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k-fill) 18%, transparent); }
#profile .pr-own .pr-own-i:first-child dd { color: var(--k-ink); }
.pr-own .pr-own-i:last-child dd { color: var(--gold-ink); }
/* === end PR === */
/* === lane CL === */
/* Lane CL (Sep 13 2026), design team: one colour grammar for every screen (Todd: "Page is kind of boring from color
   perspective ... consistent and keep things interesting across ALL pages", then "go bolder"). Full spec: scratchpad
   laneCL/color-grammar.md. Team red and blue = a team or a golfer (always beside the word or the R/B letter). Gold =
   money, prizes, awards and yours. Emerald = the next thing to tap, and good news. The black stage = scoreboards and big
   moments. Each screen belongs to a family (app.js famOf() writes data-fam on .screen): play (fairway), people (red and
   blue), money (gold), info (sand), org (slate). The family paints a solid header strip, washes the top of the page,
   draws thick section bars, count chips, icon chips, card edges and the page's hero. Reading areas (rules, lists, chat,
   forms) keep a calm white ground. Tokens only: dark follows the tokens, washes and strips live in @media screen so
   print stays light, forced colours drop them. */

/* 1. New tokens. Sand (reference pages) and slate (organizer): a soft tint and an ink for text, a solid fill that takes
   white text (AA both themes: sand 5.73 / 6.19, slate 9.70 / 10.36), and a rule colour for bars that still shows on the
   night ground. --gold-wash is a stronger gold ground that keeps ink-3 at AA (dark falls back to the gold tint). */
:root { --sand-tint: #F1EADD; --sand-ink: #6B5328; --sand: #80612C; --sand-rule: #80612C; --slate-tint: #E6E9EF; --slate-ink: #3A4556; --slate: #3A4556; --slate-rule: #3A4556; --gold-wash: #FAE5B4; }
@media screen { html[data-theme="dark"] { --sand-tint: #231F17; --sand-ink: #E3CFA4; --sand: #7A5C2A; --sand-rule: #B08A4E; --slate-tint: #1A1E26; --slate-ink: #B8C3D6; --slate: #34405A; --slate-rule: #8C9AB3; --gold-wash: #332709; } }

/* 2. The family tokens, on body so sheets (which open outside .screen) read them too.
   --fam-a / --fam-b      the two soft tints of the page wash (the same except people: red, then blue)
   --fam-fill / --fam-fill-2 / --fam-on   the solid strip colours and the text on them
   --fam-rule / --fam-rule-2              bars, rules and emblems (visible on both grounds)
   --fam-ink   family colour as text        --fam-edge  card edges        --fam-hero  a hero card's ground */
body { --fam-a: var(--brand-tint); --fam-b: var(--brand-tint); --fam-fill: var(--brand); --fam-fill-2: var(--brand); --fam-on: var(--on-brand); --fam-rule: var(--brand); --fam-rule-2: var(--brand); --fam-ink: var(--brand-ink); --fam-edge: color-mix(in srgb, var(--brand) 38%, var(--line)); --fam-hero: color-mix(in srgb, var(--brand) 16%, var(--surface-1)); }
body:has(.screen[data-fam="people"]) { --fam-a: var(--red-tint); --fam-b: var(--blue-tint); --fam-fill: var(--red); --fam-fill-2: var(--blue); --fam-on: #FFFFFF; --fam-rule: var(--red); --fam-rule-2: var(--blue); --fam-ink: var(--ink-1); --fam-edge: var(--line); --fam-hero: var(--surface-1); }
body:has(.screen[data-fam="money"]) { --fam-a: var(--gold-tint); --fam-b: var(--gold-tint); --fam-fill: var(--gold); --fam-fill-2: var(--gold); --fam-on: #111113; --fam-rule: var(--gold); --fam-rule-2: var(--gold); --fam-ink: var(--gold-ink); --fam-edge: color-mix(in srgb, var(--gold) 60%, var(--line)); --fam-hero: var(--gold-wash); }
body:has(.screen[data-fam="info"]) { --fam-a: var(--sand-tint); --fam-b: var(--sand-tint); --fam-fill: var(--sand); --fam-fill-2: var(--sand); --fam-on: #FFFFFF; --fam-rule: var(--sand-rule); --fam-rule-2: var(--sand-rule); --fam-ink: var(--sand-ink); --fam-edge: color-mix(in srgb, var(--sand-rule) 42%, var(--line)); --fam-hero: color-mix(in srgb, var(--sand) 16%, var(--surface-1)); }
body:has(.screen[data-fam="org"]) { --fam-a: var(--slate-tint); --fam-b: var(--slate-tint); --fam-fill: var(--slate); --fam-fill-2: var(--slate); --fam-on: #FFFFFF; --fam-rule: var(--slate-rule); --fam-rule-2: var(--slate-rule); --fam-ink: var(--slate-ink); --fam-edge: color-mix(in srgb, var(--slate-rule) 42%, var(--line)); --fam-hero: color-mix(in srgb, var(--slate) 14%, var(--surface-1)); }

/* 3. Shared components by meaning (tokens, so print keeps them). */
/* A soft button is a real secondary action: emerald tint, emerald ink (it was a grey outline). Ghost stays the outline. */
.btn.soft { background: var(--brand-tint); color: var(--brand-ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 40%, transparent); }
/* Gold as text is --gold-ink in both themes (the old literal was dark brown on the night ground). */
.eyebrow.gold { color: var(--gold-ink); }
/* "Open" on a bet or a poll is good news (you can still get in): emerald. */
:is(.bet-head, .ph) > .pill.outline { background: var(--brand); color: var(--on-brand); box-shadow: none; }
/* Action cards (the one thing this card asks of you): white, a 6px emerald rule on the left. Done: the rule goes grey. */
/* (An older "one calm style" rule sets these cards' border with !important, so the rule needs !important here.) */
.card:is(.checkin, .vote-card, .survey, .dinner) { border: 1px solid var(--line) !important; border-left: 6px solid var(--brand) !important; }
.card:is(.checkin, .vote-card, .survey, .dinner).done, .card.vote-card.grace { border-left-color: var(--gold) !important; }
.card:is(.survey, .dinner).done { border-left-color: var(--line-strong) !important; }
/* Money amounts are gold. */
.money-line .amt:not(.down) { color: var(--gold-ink); }
/* Lane PR's "Set by the organizer" block: organizer-set facts wear the organizer's slate (a left rule and the title);
   PR's own team-ink team and gold paid values stay. */
.pr-own { border-left: 6px solid var(--slate-rule); }
.pr-own .pr-own-t { color: var(--slate-ink); }

@media screen {
/* 4. The header is a solid strip in the family colour (red half and blue half for people), with the title, back link
   and header action in the family's on-colour; below it the family wash runs down the top of the page. */
.screen[data-fam] > .header, .fan-screen > .header {
  background: linear-gradient(90deg, var(--fam-fill) 0 50%, var(--fam-fill-2) 50% 100%);
  -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--fam-on);
  box-shadow: 0 8px 20px -14px color-mix(in srgb, var(--fam-fill) 80%, #000);
}
.screen[data-fam] > .header :is(.title, .title .year, .back, .textbtn, .iconbtn, .hd-center), .fan-screen > .header .brand.lockup :is(.wordmark, .year) { color: var(--fam-on); }
body:has(.screen[data-fam]), body:has(.fan-screen) {
  background:
    linear-gradient(180deg, transparent 0, transparent 70px, color-mix(in srgb, var(--bg) 55%, transparent) 210px, var(--bg) 380px) top / 100% 400px no-repeat,
    linear-gradient(90deg, var(--fam-a), var(--fam-b)) top / 100% 400px no-repeat,
    var(--bg);
}
/* Card edges take the family colour (people stay neutral: a red or blue edge would claim a team). Reading grounds stay
   white. :where() keeps this under every card's own rule. */
:where(.screen[data-fam] #view) :is(.card, .list, .lb) { border-color: var(--fam-edge); }
html[data-theme="dark"] :where(.screen[data-fam] #view) :is(.card, .list, .lb) { border-color: var(--fam-edge); }

/* 5. Section titles: a thick 8px bar in the full family colour before every section title, day heads on Schedule and
   board titles on Stats (the profile keeps its team bar from lane K). Today's day is gold: now, and yours. */
.screen[data-fam] .section-head:not(#profile *) .h2::before, .screen[data-fam] .day-head .dn::before, .screen[data-fam] .lb > .lbh > .t::before {
  content: ""; display: inline-block; flex: none; width: 8px; height: 1em; margin-right: 10px; border-radius: 4px; vertical-align: -.1em;
  background: linear-gradient(180deg, var(--fam-rule) 50%, var(--fam-rule-2) 50%);
}
.screen[data-fam] .lb > .lbh > .t::before { width: 6px; height: .95em; margin-right: 8px; }
.screen[data-fam] .day-head:has(.today) .dn::before { background: var(--gold); }
.day-head:has(.today) + .card { border: 1px solid transparent; box-shadow: inset 6px 0 0 var(--gold), var(--e1); }
/* Counts beside a section title ("3", "12 betting", "3 of 12"): a solid chip in the family colour. */
.screen[data-fam] .section-head > .tiny.faint { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--fam-fill) 50%, var(--fam-fill-2) 50%); color: var(--fam-on); font-weight: 800; }

/* 6. Empty states: lane C2's shield outline takes the family's rule colours, and the icon inside it the family ink. */
.screen[data-fam] .empty .e::before { background: linear-gradient(135deg, var(--fam-rule) 50%, var(--fam-rule-2) 50%); }
.screen[data-fam] .empty .e svg { color: var(--fam-ink); }

/* 7. List rows lead with a solid icon chip in the colour of WHERE THE ROW GOES: sand for reference, gold for money and
   glory, red and blue for people pages, slate for the organizer, fairway for scoring. More and the organizer's tools.
   (Older blocks clear this slot with background: none !important, so the chips need !important here.) */
.more-group .list-item .icon, .org .list-item .icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--sand) !important; color: #FFFFFF; }
.more-group .list-item .icon svg, .org .list-item .icon svg { width: 20px; height: 20px; }
.more-group .list-item:is([data-link="#/bets"], [data-link$="/ledger"], [data-link$="/money"], [data-link$="/prizes"], [data-link$="/history"], [data-link$="/awards"]) .icon,
.org .list-item:is([data-link$="/money"], [data-link$="/prizes"], [data-link$="/hall"]) .icon { background: var(--gold) !important; color: #111113; }
.more-group .list-item:is([data-link$="/announcements"], [data-link$="/timeline"], [data-link$="/daily"]) .icon,
.org .list-item:is([data-link$="/players"], [data-link$="/teams"], [data-link$="/announcements"], [data-link$="/push"], [data-link$="/relatives"], [data-link$="/daily"], [data-link$="/timeline"], [data-link$="/lore"], [data-link$="/survey"]) .icon { background: linear-gradient(135deg, var(--red) 50%, var(--blue) 50%) !important; color: #FFFFFF; }
.more-group .list-item:is([data-link="#/admin"], #org) .icon,
.org .list-item:is([data-link$="/features"], [data-link$="/analytics"], [data-link$="/build"], .org-exit, #b-print, #b-chat) .icon, .org #more-tools > summary .icon { background: var(--slate) !important; color: #FFFFFF; }
.org .list-item:is([data-link$="/rounds"], [data-link$="/stats"]) .icon { background: var(--brand) !important; color: var(--on-brand); }
.org .list-item[data-link$="/danger"] .icon { background: var(--err-tint) !important; color: var(--err); }

/* 8. Hero cards, one per screen.
   Money (Where the money goes, Prizes, the latest Hall of Fame champion, the side-bet bankroll): a solid gold block,
   near-black numbers, dark-brown supporting text (7.4:1 on gold). */
.screen[data-fam="money"] #view > .fade-in > .card:first-child:has(> .hero-num), .fade-in > .stack > .card.hof:first-child, .card.bet-budget {
  border: 0; color: #111113; background: linear-gradient(145deg, var(--gold) 0%, color-mix(in srgb, var(--gold) 72%, #FFF6DD) 100%);
  box-shadow: 0 16px 30px -18px color-mix(in srgb, var(--gold) 85%, #000), var(--e1);
}
:is(.screen[data-fam="money"] #view > .fade-in > .card:first-child:has(> .hero-num), .fade-in > .stack > .card.hof:first-child, .card.bet-budget) :is(span, div, p, .eyebrow, .small, .muted, .faint, .tiny, .hof-note, .bb-note):not(.avatar):not(.ci-bar):not(.money-bar) { color: #3A2A00 !important; }
:is(.screen[data-fam="money"] #view > .fade-in > .card:first-child:has(> .hero-num), .fade-in > .stack > .card.hof:first-child, .card.bet-budget) :is(b, .num, .hero-num, .hof-year .display, .hof-name, .h3) { color: #111113 !important; }
.card.bet-budget .bb-line b.num { font-size: var(--t-score); font-weight: 800; letter-spacing: -.035em; }
.card.bet-budget .ci-bar { height: 12px; margin-top: var(--s2); background: rgba(17, 17, 19, .16); box-shadow: none; }
.card.bet-budget .ci-bar span, .card.bet-budget .ci-bar.full span { background: #111113; }
/* The Hall of Fame's cards sit in the older "one calm style" rule (background, border and shadow with !important), so the
   champion's gold needs !important too. */
.fade-in > .stack > .card.hof:first-child { border: 0 !important; background: linear-gradient(145deg, var(--gold) 0%, color-mix(in srgb, var(--gold) 72%, #FFF6DD) 100%) !important; box-shadow: 0 16px 30px -18px color-mix(in srgb, var(--gold) 85%, #000), var(--e1) !important; }
/* More's "you" card: yours, so a gold wash and ring. */
body:has(.screen[data-fam="info"]) #view > .fade-in > .card.press.row[data-player]:first-child { background: linear-gradient(115deg, var(--gold-wash), var(--surface-1) 72%); box-shadow: inset 0 0 0 2px var(--gold), var(--e1); }
/* Info: Rules' "Replay the intro" card on the sand hero ground with a sand band on top. */
body:has(.screen[data-fam="info"]) #replay-intro { border: 0; background: linear-gradient(135deg, var(--fam-hero), var(--surface-1) 80%); box-shadow: inset 0 6px 0 var(--sand-rule), var(--e1); }
/* Organizer: Today on the slate hero ground with a slate band on top. */
.org .card.org-today { border: 0; background: linear-gradient(165deg, var(--fam-hero) 0%, var(--surface-1) 72%); box-shadow: inset 0 6px 0 var(--slate-rule), var(--e1); }
.org .card.org-today .eyebrow { color: var(--slate-ink); }
/* Play: the Stats MVP race opens with a solid fairway title band; every other board has a fairway rule on top. */
.screen[data-fam] .ppl-stats .lb { box-shadow: inset 0 4px 0 var(--fam-rule), var(--e1); }
.screen[data-fam] .ppl-stats > .lb:first-child { overflow: hidden; box-shadow: var(--e1); }
.screen[data-fam] .ppl-stats > .lb:first-child > .lbh { margin: -14px -16px 12px; padding: 12px 16px; background: var(--brand); }
.screen[data-fam] .ppl-stats > .lb:first-child > .lbh :is(.t, .tiny, .faint) { color: var(--on-brand); }
.screen[data-fam] .ppl-stats > .lb:first-child > .lbh > .t::before { background: var(--on-brand); }
/* People: the roster's team heads are solid team bands ("Team Red 55½ pts" in white on the team's fill). */
.ppl-players .team-head:is(.red, .blue) { padding: 10px 16px; border-left: 0; border-radius: var(--r2); color: #FFFFFF; box-shadow: 0 10px 22px -16px #000; }
.ppl-players .team-head.red { background: var(--red); }
.ppl-players .team-head.blue { background: var(--blue); }
.ppl-players .team-head:is(.red, .blue) :is(.h2, .pts) { color: #FFFFFF; }
}

/* 9. Side bets (money family). Bankroll: the gold hero above. Leaders: a black prize board. Book a prop: a real button.
   Each bet card: a 6px strip, a kind pill (SB's .bet-kind word on the kind's fill) and a wash in its kind's colours
   (lane SB's hooks bet-k-team / h2h / ou / yn / fun / prop / live). Answers in the team of whoever they name (ans-red /
   ans-blue with the R or B letter), over/yes emerald, under/no slate, yours in gold, pot and odds in gold. */
.card.bet-as { border-left: 6px solid var(--gold); }
.card.bet-as.on { background: var(--gold-tint); }
/* the day's leaders: a black board with the gold contours */
.card.bet-lb { position: relative; isolation: isolate; overflow: hidden; border: 0; color: #FFFFFF; background: radial-gradient(120% 150% at 0% 0%, var(--stage-2), var(--stage) 72%); box-shadow: inset 0 4px 0 var(--gold), var(--e1); }
.card.bet-lb::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gold); opacity: .12; -webkit-mask: url(/img/brand/topo-tile.svg) 0 0 / 240px repeat; mask: url(/img/brand/topo-tile.svg) 0 0 / 240px repeat; }
.card.bet-lb .eyebrow, .card.bet-lb .eyebrow.gold, .card.bet-lb .chev { color: var(--gold); }
.card.bet-lb :is(.small, .muted, .faint) { color: var(--on-stage-2); }
.card.bet-lb .bet-lb-one b { color: #FFFFFF; }
.card.bet-lb .num.up { color: var(--nav-float-accent); }
.card.bet-lb .num.down { color: var(--on-stage-2); }
/* Book a prop: the page's one primary action */
.ppl-bets #prop-new.btn { background: var(--brand); color: var(--on-brand); box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--brand) 90%, transparent); }
/* the bet card */
.card.bet { --bk-a: var(--line-strong); --bk-b: var(--line-strong); --bk-fill: var(--surface-3); --bk-fill-2: var(--surface-3); --bk-on: var(--ink-1); --bk-tint: var(--surface-2);
  position: relative; overflow: hidden; border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bk-tint) 0, color-mix(in srgb, var(--bk-tint) 45%, var(--surface-1)) 90px, var(--surface-1) 170px); }
/* the kind's strip is its own 6px band, so no text ever sits on a fill colour */
.card.bet::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--bk-a) 50%, var(--bk-b) 50%); }
.card.bet :is(.bet-kind) { display: inline-flex; align-items: center; min-height: 22px; margin-bottom: 6px; padding: 2px 10px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--bk-fill) 50%, var(--bk-fill-2) 50%); color: var(--bk-on); font-weight: 800; }
.card.bet.bet-k-team, .card.bet.bet-k-prop { --bk-a: var(--red); --bk-b: var(--blue); --bk-fill: var(--red); --bk-fill-2: var(--blue); --bk-on: #FFFFFF; --bk-tint: color-mix(in srgb, var(--red-tint) 50%, var(--blue-tint)); }
.card.bet.bet-k-h2h { --bk-a: var(--ink-1); --bk-b: var(--ink-1); --bk-fill: var(--ink-1); --bk-fill-2: var(--ink-1); --bk-on: var(--bg); --bk-tint: var(--surface-2); }
.card.bet.bet-k-h2h:has(.ans-red):has(.ans-blue) { --bk-a: var(--red); --bk-b: var(--blue); --bk-tint: color-mix(in srgb, var(--red-tint) 50%, var(--blue-tint)); }
.card.bet.bet-k-ou { --bk-a: var(--brand); --bk-b: var(--brand); --bk-fill: var(--brand); --bk-fill-2: var(--brand); --bk-on: var(--on-brand); --bk-tint: var(--brand-tint); }
.card.bet.bet-k-yn { --bk-a: var(--slate-rule); --bk-b: var(--slate-rule); --bk-fill: var(--slate); --bk-fill-2: var(--slate); --bk-on: #FFFFFF; --bk-tint: var(--slate-tint); }
.card.bet.bet-k-fun { --bk-a: var(--gold); --bk-b: var(--gold); --bk-fill: var(--gold); --bk-fill-2: var(--gold); --bk-on: #111113; --bk-tint: var(--gold-tint); }
.card.bet.bet-k-live { --bk-a: var(--ink-1); --bk-b: var(--gold); --bk-fill: var(--ink-1); --bk-fill-2: var(--ink-1); --bk-on: var(--bg); --bk-tint: var(--gold-tint); }
.card.bet.void { opacity: .75; }
/* A settled bet is in the older "one calm style" rule (background with !important); it keeps its kind's wash. */
.card.bet.settled { background: linear-gradient(180deg, var(--bk-tint) 0, color-mix(in srgb, var(--bk-tint) 45%, var(--surface-1)) 90px, var(--surface-1) 170px) !important; border: 1px solid var(--line) !important; }
/* How it's decided (SB's three lines) and the Full rules area: a calm reading panel with the kind's edge. The toggle,
   whether a <summary> or a button with aria-expanded, is an emerald text action with a 44px target. */
.card.bet .bet-rules { margin-top: 8px; padding: 8px 12px; border-radius: var(--r2); background: var(--surface-1); box-shadow: inset 4px 0 0 var(--bk-a), inset 0 0 0 1px var(--line); color: var(--ink-2); }
.card.bet .bet-rules b { color: var(--ink-1); }
.card.bet :is(summary, button[aria-expanded]):not(.bet-opt) { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); color: var(--brand-ink); font-weight: 700; cursor: pointer; }
/* pot and odds in gold: the pot on a solid gold pill, the odds in gold ink */
.bet-stake { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 3px 12px; border-radius: var(--r-pill); background: var(--gold); color: #111113; font-weight: 800; }
.bet-opt .lbl small { color: var(--gold-ink); font-weight: 700; }
/* answers */
.bet-opt { min-height: 52px; border: 1.5px solid var(--line-strong); background: var(--surface-1); }
.bet-opt:is(.ans-red, .ans-blue) { --ans: var(--line-strong); --ans-on: #FFFFFF; border: 2px solid color-mix(in srgb, var(--ans) 55%, var(--line)); box-shadow: inset 6px 0 0 var(--ans); padding-left: 18px; }
.bet-opt.ans-red { --ans: var(--red); --ans-on: var(--red-on); background: var(--red-tint); }
.bet-opt.ans-blue { --ans: var(--blue); --ans-on: var(--blue-on); background: var(--blue-tint); }
.bet-opt:is(.ans-red, .ans-blue) .lbl::before { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; margin-right: 8px; border-radius: 6px; background: var(--ans); color: var(--ans-on); font-size: .82em; font-weight: 800; vertical-align: .05em; }
.bet-opt.ans-red .lbl::before { content: "R"; content: "R" / "Team Red: "; }
.bet-opt.ans-blue .lbl::before { content: "B"; content: "B" / "Team Blue: "; }
.bet-opt:is(.ans-over, .ans-yes) { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); background: color-mix(in srgb, var(--brand-tint) 70%, var(--surface-1)); box-shadow: inset 6px 0 0 var(--brand); padding-left: 18px; }
.bet-opt:is(.ans-under, .ans-no, .ans-none) { border-color: color-mix(in srgb, var(--slate-rule) 45%, var(--line)); background: color-mix(in srgb, var(--slate-tint) 70%, var(--surface-1)); box-shadow: inset 6px 0 0 var(--slate-rule); padding-left: 18px; }
/* your answer: a 2.5px gold ring on the gold ground (gold = yours); the team or shape edge stays */
.bet-opt:is(.mine, .is-mine) { border: 2.5px solid var(--gold); background: var(--gold-tint); }
.bet-opt:is(.mine, .is-mine):not(:is(.ans-red, .ans-blue, .ans-over, .ans-yes, .ans-under, .ans-no, .ans-none)) { box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--gold) 85%, transparent); }
.bet-opt:is(.mine, .is-mine):is(.ans-red, .ans-blue) { box-shadow: inset 6px 0 0 var(--ans), 0 10px 20px -12px color-mix(in srgb, var(--gold) 85%, transparent); }
.bet-opt:is(.mine, .is-mine):is(.ans-over, .ans-yes) { box-shadow: inset 6px 0 0 var(--brand), 0 10px 20px -12px color-mix(in srgb, var(--gold) 85%, transparent); }
.bet-opt:is(.mine, .is-mine):is(.ans-under, .ans-no, .ans-none) { box-shadow: inset 6px 0 0 var(--slate-rule), 0 10px 20px -12px color-mix(in srgb, var(--gold) 85%, transparent); }
/* a winning answer: emerald */
.bet-opt.win { border: 2.5px solid var(--brand); background: var(--brand-tint); }
.bet-opt.win .bet-won svg { color: var(--brand-ink); }
/* the stake sheet: the amount you pick is gold (money, yours); what it pays is on a gold tint */
.stake-chips .chip.on { background: var(--gold); color: #111113; border-color: var(--gold); }
.card.stake-est { background: var(--gold-tint); }
.card.stake-est b.num { color: var(--gold-ink); }
/* Side-bet leaders: your own row in gold */
.ci-list .ci-line.me { background: var(--gold-tint); }

/* Nickname plates (Todd: the black pill with small gold serif was hard to read). One plate everywhere a nickname sits
   under a golfer: the roster tile (.pcard .nick.plate) and the profile header (.profile-hero .nick). The fill is the
   golfer's team (stage ink with no team), the text white Inter 800 at the body-small size so it scales with the text-size
   setting (white on team red 5.30 / 4.81, team blue 6.43 / 4.88, light / dark), a white ring lifts it off the photo it
   overlaps, and a long nickname wraps to a second line instead of being cut. The team word is on the tile ("Team Red"
   band) and on the profile's team chip. */
.pcard .nick.plate, #profile .profile-hero .nick, .profile-hero .nick {
  --plate: var(--stage); display: inline-block; max-width: calc(100% - 8px); padding: 4px 12px; border-radius: 12px;
  background: var(--plate); color: #FFFFFF; font-family: var(--font-ui); font-style: normal; font-weight: 800; font-size: var(--t-meta); line-height: 1.2; letter-spacing: 0; opacity: 1;
  white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; text-wrap: balance; text-align: center;
  box-shadow: 0 0 0 2px #FFFFFF, 0 6px 14px -8px rgba(0, 0, 0, .6);
}
.pcard.red .nick.plate, #profile .profile-hero.red .nick, .profile-hero.red .nick { --plate: var(--red); }
.pcard.blue .nick.plate, #profile .profile-hero.blue .nick, .profile-hero.blue .nick { --plate: var(--blue); }
#profile .profile-hero .nick, .profile-hero .nick { margin-top: 8px; }
@media print { .pcard .nick.plate, .profile-hero .nick { background: #fff !important; color: #111 !important; box-shadow: inset 0 0 0 1px #999 !important; } }

/* 10. Print and forced colours: white grounds, black text, no strips, washes or boards. */
@media print {
  .card.bet-lb, .card.bet-budget { background: #fff !important; color: #111 !important; box-shadow: none !important; border: 1px solid #ccc !important; }
  .card.bet-lb *, .card.bet-lb .eyebrow { color: #111 !important; }
  .card.bet-lb::before { display: none; }
}
@media (forced-colors: active) { .card.bet-lb::before, .bet-opt:is(.ans-red, .ans-blue) .lbl::before { forced-color-adjust: none; } }
/* === end CL === */
/* === lane SB === */
/* Side bets: "How it's decided" as three short lines (what counts, the tiebreakers, when every stake comes back), the
   card's family label, head-to-head answers side by side, and the note for bets that wait on the pairings. Layout only;
   the colours are the design lane's (bet-k-*, ans-*, is-mine hooks). */
.bet .bet-rules { display: grid; gap: 3px; margin-top: 4px; line-height: 1.4; }
.bet .bet-rules > div { overflow-wrap: anywhere; }
.bet .bet-rules b { font-weight: 700; }
.bet .bet-kind { font-size: max(var(--floor), calc(12 * var(--u))); font-weight: 700; letter-spacing: .02em; margin-bottom: 2px; }
.bet.bet-k-h2h .bet-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bet.bet-k-h2h .bet-opt { flex-direction: column; align-items: flex-start; gap: 6px; }
.bet.bet-k-h2h .bet-opt .lbl { overflow-wrap: anywhere; }
.bet-wait { margin-top: 12px; padding: 12px 14px; }
/* The one-line summary and the Full rules button (44px tap, keyboard focusable), with its rules opening inline. */
.bet .bet-sum { margin-top: 3px; line-height: 1.35; }
.bet .bet-rules-btn { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); padding: 0 2px; margin-top: 2px; font-weight: 700; }
.bet .bet-rules-chev { display: inline-flex; transition: transform .15s; transform: rotate(90deg); }
.bet .bet-rules-btn[aria-expanded="true"] .bet-rules-chev { transform: rotate(-90deg); }
.bet .bet-rules-body[hidden] { display: none; }
/* === end SB === */