/* OpenTee "glass" skin — look and feel only.
   Loads after styles.css. Same OpenTee colors (fairway green, brass gold), same screens, same markup.
   Changes: soft-glow background instead of striped header bands, page titles sit on the background,
   translucent cards with hairline borders, bold system type for big numbers, tinted (not solid) selected
   states, tile-style stats, and a floating pill tab bar. */

:root{
  --display:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --glass:rgba(255,255,255,.82); --glass-line:rgba(15,31,23,.08); --tint:color-mix(in srgb,var(--brand) 11%,transparent);
  --glow-a:rgba(20,84,58,.13); --glow-b:rgba(167,125,42,.10); --track:rgba(15,31,23,.06);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --app:#070f0a; --glass:rgba(22,38,29,.62); --glass-line:rgba(233,241,234,.075); --tint:rgba(79,191,134,.14);
  --glow-a:rgba(46,140,88,.30); --glow-b:rgba(220,183,93,.12); --track:rgba(0,0,0,.28); --chip:rgba(233,241,234,.07)}}
:root[data-theme="dark"]{
  --app:#070f0a; --glass:rgba(22,38,29,.62); --glass-line:rgba(233,241,234,.075); --tint:rgba(79,191,134,.14);
  --glow-a:rgba(46,140,88,.30); --glow-b:rgba(220,183,93,.12); --track:rgba(0,0,0,.28); --chip:rgba(233,241,234,.07)}

body{letter-spacing:-.005em}

/* Background: two soft glows on the app surface */
.phone{isolation:isolate}
.phone::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(440px 340px at -6% -4%,var(--glow-a),transparent 70%),
             radial-gradient(460px 420px at 108% 78%,var(--glow-b),transparent 70%)}

/* Page header: no band, big title on the background */
.head{background:transparent;color:var(--fg);border-radius:0;padding:22px 20px 6px;gap:4px;overflow:visible}
.head::before{display:none}
.head h2{font-size:32px;font-weight:750;letter-spacing:-.035em;line-height:1.05}
.head .eyebrow{color:var(--muted);font-size:13.5px;font-weight:500}
.head .back{color:var(--brand);opacity:1;font-weight:600;margin-bottom:-4px}
.head{padding-top:calc(22px + env(safe-area-inset-top,0px))}
@media (min-width:600px){.head{padding-top:30px}}
.prog i{background:var(--track)}
.prog i.on{background:var(--brand)}
.main{gap:10px;padding:14px 16px 28px}

/* Cards: translucent glass, hairline border, no drop shadow */
.card,.note-row{background:var(--glass);border:1px solid var(--glass-line);box-shadow:none;border-radius:20px;
  -webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15)}
.card{padding:16px;gap:11px}
.card > h3,.card > .row:first-child > h3{font-family:var(--body);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);line-height:1.3}
.card h3{font-family:var(--display);font-weight:650;letter-spacing:-.02em}
h3.sec{font-family:var(--body);font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:14px 4px 0}
.row .muted,.muted{font-size:13.5px}
.empty{border:1px dashed var(--glass-line);background:var(--glass);border-radius:18px;font-size:14px}

/* Game cards */
.g-date{background:var(--tint);border-radius:13px;width:52px;height:56px}
.g-date small{text-transform:uppercase;font-size:10.5px;letter-spacing:.08em;font-weight:700}
.g-date b{font-size:23px;font-weight:750}
.g-main h3{font-size:17px}
.g-time{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.01em}
.slots .dot{width:9px;height:9px;border-width:1.5px}
.g-foot b,.g-foot .num{font-family:var(--display)}

/* Tags and pills: small rounded rectangles; tinted, never solid */
.tag{background:var(--chip);border-radius:7px;padding:4px 8px;font-size:12px;font-weight:600;color:var(--muted)}
.pill{border-radius:7px;padding:4px 8px;font-size:11px;letter-spacing:.06em}
.pill.confirmed{background:var(--tint);color:var(--brand)}
.pill.pending{background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--gold)}
.pill.hosting{background:var(--chip);color:var(--fg)}

/* Chips and filters: glass, selected = green tint + green text */
.chip{background:var(--glass);border-color:var(--glass-line);font-size:13.5px;min-height:38px}
.chip[aria-pressed="true"]{background:var(--tint);color:var(--brand);border-color:color-mix(in srgb,var(--brand) 45%,transparent)}
.filter-bar select{background-color:var(--glass);border:1px solid var(--glass-line);border-radius:12px}
.filter-bar .chip,.filter-more{border-radius:12px}
.filter-more[aria-expanded="true"]{background:var(--tint);color:var(--brand);border-color:color-mix(in srgb,var(--brand) 45%,transparent)}

/* Inputs */
input,select,textarea{background:var(--glass);border-color:var(--glass-line);border-radius:12px}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted) 70%,transparent)}

/* Buttons */
.btn{border-radius:14px;font-weight:700;box-shadow:none;min-height:50px}
.btn.alt{background:var(--chip);color:var(--fg);border:1px solid var(--glass-line)}
.btn.alt.danger,.btn.danger.alt{color:var(--bad)}
.btn.gold{background:color-mix(in srgb,var(--gold) 14%,transparent);color:var(--gold);border-color:color-mix(in srgb,var(--gold) 35%,transparent)}
.card .btn{min-height:46px}

/* Stats become tiles with big numbers */
.stats{gap:8px}
.stat,.stat:first-child{background:var(--chip);border:1px solid var(--glass-line);border-radius:14px;padding:10px 12px}
.stat b{font-size:26px;font-weight:750;letter-spacing:-.04em}
.stat span{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.avatar{border-color:transparent;box-shadow:0 0 0 2px var(--brand),0 0 0 6px var(--tint)}

/* Score + hole grids read like a data table */
.score-grid .hd,.hole-grid .hd{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:700}
.pos,.neg{font-family:var(--display)}

/* Floating pill tab bar */
.tabs{position:absolute;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:20;
  border:1px solid var(--glass-line);border-radius:30px;padding:5px;gap:2px;background:var(--glass);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);
  box-shadow:0 14px 32px -14px rgba(0,0,0,.55)}
.tab{min-height:52px;border-radius:24px;font-size:10.5px;gap:3px}
.tab svg{width:21px;height:21px}
.tab[aria-current="page"]{background:var(--tint);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 30%,transparent)}
.tab[aria-current="page"]::before{display:none}
.badge{top:4px;border-color:transparent}
/* keep content clear of the floating bar */
/* Room for the floating bar + the iPhone home-indicator area, plus breathing space above the bar */
.phone:has(.tabs:not([hidden])) .main{padding-bottom:calc(116px + env(safe-area-inset-bottom,0px))}
.phone:has(.tabs:not([hidden])) .foot{padding-bottom:calc(102px + env(safe-area-inset-bottom,0px))}
.foot{background:linear-gradient(to bottom,transparent,var(--app) 26%);border-top:0}

/* Sheet, toast, menus */
.sheet{background:var(--app);border-top:1px solid var(--glass-line)}
.sheet::before{background:var(--glass-line);height:5px;width:38px}
.sheet h3{font-size:22px;font-weight:750}
.toast{border-radius:14px}
.opts{background:var(--surface);border-color:var(--glass-line)}

/* Chat bubbles */
.bubble.them{background:var(--glass);border-color:var(--glass-line)}

/* Welcome stays a dark brand moment, now with glows instead of stripes */
.hero{background:#070f0a;color:#eaf3ec}
.hero::before{background:radial-gradient(420px 360px at 0% 0%,rgba(46,140,88,.38),transparent 70%),radial-gradient(420px 380px at 100% 100%,rgba(220,183,93,.16),transparent 70%)}
.hero .mark{font-family:var(--display);font-size:52px;font-weight:800;letter-spacing:-.045em}
.hero li span.ic{border-radius:11px;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.09)}

/* Nothing shows below the floating tab bar: the page fades into the background behind it */
.phone:has(.tabs:not([hidden]))::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:19;pointer-events:none;
  height:calc(100px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(to bottom,rgba(0,0,0,0),var(--app) 38%)}
@supports (background:linear-gradient(in oklab,red,blue)){
  .phone:has(.tabs:not([hidden]))::after{background:linear-gradient(to bottom in oklab,color-mix(in srgb,var(--app) 0%,transparent),var(--app) 38%)}}
/* Scrolling stays inside the screen: no whole-page bounce that drags the tab bar around */
.main{overscroll-behavior-y:contain}




/* Every screen scrolls instead of squashing: iPhone Safari let cards and buttons shrink to fit the
   screen (so long pages like Manage game, with many requests, could not scroll and got cut off). */
.main{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.main > *{flex-shrink:0}

/* No double-tap zoom anywhere in the app (taps also respond faster). */
html,body,*{touch-action:manipulation}

/* ---- Phones: the PAGE scrolls (6.6) ----
   iPhone home-screen apps would not scroll the inner content box reliably (6.1–6.5), so on phones the
   whole page scrolls like a normal website and the tab bar, its fade, sheets and toasts are pinned to
   the screen. Desktop keeps the framed phone with an inner scroll box. */
@media (max-width:599px){
  html,body{height:auto;min-height:100%;overflow:visible;overscroll-behavior:auto}
  body{background:var(--app)}
  .stage,.phone{max-width:100vw;overflow-x:clip}
  .stage{height:auto!important;min-height:100vh;min-height:100dvh;display:block}
  .phone{height:auto;min-height:100vh;min-height:100dvh;overflow:visible;max-height:none}
  #screen{flex:1 0 auto!important;min-height:auto!important}
  .main{flex:1 0 auto;min-height:auto;overflow:visible;scroll-behavior:auto}
  .main.hero{min-height:100vh;min-height:100dvh}
  .phone::before{position:fixed}
  .phone:has(.tabs:not([hidden]))::after{position:fixed}
  .tabs{position:fixed}
  .foot{position:sticky;bottom:0;z-index:15}
  .sheet-wrap,.toast{position:fixed}
}
/* Home-screen app: iOS anchors bottom:0 short by the status-bar height (black-translucent bug), so pin
   the bar and its fade from the top using 100vh, which is the full screen there. */
@media (max-width:599px) and (display-mode: standalone){
  .phone,.main.hero{min-height:100vh}
  .tabs{top:calc(100vh - 64px - 12px - env(safe-area-inset-bottom,0px));bottom:auto}
  .phone:has(.tabs:not([hidden]))::after{top:calc(100vh - 100px - env(safe-area-inset-bottom,0px));bottom:auto}
  .sheet-wrap{top:0;bottom:auto;height:100vh}
}

/* Safari on iPhone (not the home-screen app): its see-through floating address bar sits below our tab bar
   and Safari draws the page behind it, so extend the fade down past the bottom of the screen to cover
   that area too. Same visible fade above the tab bar as before (starts 100px above the bottom, solid after 38px). */
@media (max-width:599px) and (not (display-mode: standalone)){
  .phone:has(.tabs:not([hidden]))::after{bottom:-200px;height:calc(300px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(to bottom,rgba(0,0,0,0) 0,var(--app) 38px,var(--app) 100%)}
  @supports (background:linear-gradient(in oklab,red,blue)){
    .phone:has(.tabs:not([hidden]))::after{background:linear-gradient(to bottom in oklab,color-mix(in srgb,var(--app) 0%,transparent) 0,var(--app) 38px,var(--app) 100%)}}
}

/* Update 7.1: OpenTee logo + name at the top of Discover */
.brandhead{gap:2px}
.brandbar{display:flex;align-items:center;gap:9px;margin:0 0 14px;color:var(--fg)}
.brandbar .logo-sm{width:32px;height:32px;flex:none}
.brandbar .wordmark{font-family:var(--display);font-size:25px;font-weight:800;letter-spacing:-.045em;line-height:1}
.brandhead h2{font-size:28px}

/* Update 7.2: on phones the page header stays pinned at the top while the page scrolls under it
   (matches the prototype / desktop, where only the content box scrolls). */
@media (max-width:599px){
  html{overscroll-behavior-y:none}
  .head{position:sticky;top:0;z-index:12;background:var(--app)}
  @supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
    .head{background:color-mix(in srgb,var(--app) 93%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3)}
  }
  .head::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px;pointer-events:none;
    background:linear-gradient(to bottom,var(--app),transparent)}
}

/* Update 7.3: game buttons tinted by your status, matching the status pills.
   Open game = solid green (unchanged) · your request is pending = gold · you're in = soft green · you host = green outline */
.btn.st-pending{background:color-mix(in srgb,var(--gold) 15%,transparent);color:var(--gold-fg);border:1px solid color-mix(in srgb,var(--gold) 45%,transparent)}
.btn.st-mine{background:var(--tint);color:var(--brand);border:1px solid color-mix(in srgb,var(--brand) 30%,transparent)}
.btn.st-host{background:transparent;color:var(--brand);border:1.5px solid color-mix(in srgb,var(--brand) 60%,transparent)}

/* Update 8: message reactions (thumbs up, heart, laugh, surprised) */
.msg{display:flex;flex-direction:column;gap:4px;max-width:82%;position:relative}
.msg.me{align-self:flex-end;align-items:flex-end}
.msg.them{align-self:flex-start;align-items:flex-start}
.msg .bubble{max-width:100%;cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .12s ease}
.msg .bubble:active{transform:scale(.98)}
.msg.open .bubble{box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 45%,transparent)}
.react-bar{display:flex;gap:2px;padding:4px;border-radius:999px;background:var(--surface);border:1px solid var(--glass-line);
  box-shadow:0 8px 24px -8px rgba(0,0,0,.35);animation:reactIn .14s ease-out}
.react-pick{width:42px;height:42px;border:0;border-radius:50%;background:transparent;font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center}
.react-pick[aria-pressed="true"]{background:var(--tint)}
.react-pick:active{transform:scale(1.2)}
.react-row{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;align-items:center;align-self:stretch;margin:-13px -8px 0 0;position:relative;z-index:1}
.react-chip{display:inline-flex;align-items:center;gap:3px;height:26px;padding:0 8px;border-radius:999px;font-size:14px;line-height:1;cursor:pointer;
  background:var(--surface);border:1px solid var(--glass-line);color:var(--fg);box-shadow:0 2px 6px -2px rgba(0,0,0,.25)}
.react-chip b{font-size:12px;font-weight:700}
.react-chip.mine{background:color-mix(in srgb,var(--brand) 16%,var(--surface));border-color:color-mix(in srgb,var(--brand) 45%,transparent)}
@keyframes reactIn{from{opacity:0;transform:translateY(4px) scale(.96)}to{opacity:1;transform:none}}
.msg{margin-bottom:2px}
.react-add{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;padding:0;cursor:pointer;flex:none;
  background:var(--surface);color:var(--muted);border:1px solid var(--glass-line);box-shadow:0 2px 6px -2px rgba(0,0,0,.25)}
.react-add svg{width:15px;height:15px}
.react-add:active{transform:scale(.92)}
.msg.open .react-add{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 45%,transparent)}

/* Update 8.1: chat on phones = fixed screen sized to the visible area (shrinks above the keyboard).
   Header stays at the top, composer sits right above the keyboard, messages scroll in between, no tab bar. */
@media (max-width:599px){
  html.chat,html.chat body{height:100%;overflow:hidden;overscroll-behavior:none}
  html.chat .stage{min-height:0}
  html.chat .phone{position:fixed;left:0;right:0;top:var(--vv-top,0px);height:var(--vv-h,100dvh);min-height:0;max-height:none;
    display:flex;flex-direction:column;overflow:hidden}
  html.chat #screen{flex:1 1 auto!important;min-height:0!important;display:flex;flex-direction:column}
  html.chat .head{position:relative;top:auto;flex:none}
  html.chat .main{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:14px!important}
  html.chat .foot{position:relative;bottom:auto;flex:none;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))!important}
  html.chat.kb .foot{padding-bottom:10px!important}
  html.chat .tabs,html.chat .phone::after{display:none!important}
  /* Keyboard up: compact header so more of the conversation stays visible */
  html.chat.kb .head{padding-bottom:4px}
  html.chat.kb .head .eyebrow{display:none}
  html.chat.kb .head h2{font-size:20px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* Update 8.2: "Matt K. joined the tee time" lines in the group chat */
.sys-msg{align-self:center;max-width:90%;display:flex;flex-direction:column;align-items:center;gap:1px;margin:4px 0 6px;text-align:center;color:var(--muted)}
.sys-msg em{font-size:13.5px;font-style:italic}
.sys-msg small{font-size:11px;opacity:.8}

/* ---- Profile at a glance (update 9 preview) ---- */
.prof-hero{gap:12px}
.prof-top{display:flex;align-items:center;gap:14px}
.av-btn{position:relative;border:0;background:none;padding:0;cursor:pointer;flex:none;border-radius:50%}
.av-btn .avatar{width:64px;height:64px;font-size:26px}
.av-cam{position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;background:var(--brand);color:var(--brand-fg);font:700 16px/22px var(--body);text-align:center;box-shadow:0 0 0 2px var(--app)}
.prof-id{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.prof-name{font-family:var(--display);font-size:20px;font-weight:750;letter-spacing:-.025em;line-height:1.15}
.prof-idx{display:flex;flex-direction:column;align-items:center;background:var(--tint);border-radius:14px;padding:8px 12px;flex:none}
.prof-idx b{font-family:var(--display);font-size:24px;font-weight:750;letter-spacing:-.04em;color:var(--brand);line-height:1.1}
.prof-idx span{font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.tag.club{background:color-mix(in srgb,var(--gold) 14%,transparent);color:var(--gold)}
.next-up{flex-direction:row!important;align-items:center;gap:14px;text-align:left;width:100%;color:inherit;font:inherit;cursor:pointer}
.next-up .eyebrow-sm,.eyebrow-sm{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.nu-course{display:block;font-size:16px;margin:2px 0 1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.next-up .muted{font-size:13px}
.chev{width:18px;height:18px;flex:none;color:var(--muted)}
.glance{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.glance .stat{padding:10px 6px!important;text-align:center}
.glance .stat b{font-size:21px}
.glance .stat span{font-size:9.5px;letter-spacing:.08em}
.glance-note{font-size:12.5px!important}
.pos{color:var(--good)} .neg{color:var(--bad)}
.seg{display:flex;gap:4px}
.seg .chip{min-height:30px;padding:0 10px;font-size:12px}
.wf{width:100%;height:auto;display:block;overflow:visible}
.wf-base{fill:color-mix(in srgb,var(--muted) 38%,transparent)}
.wf-add{fill:var(--gold)}
.wf-up{fill:var(--good)}
.wf-down{fill:var(--bad)}
.wf-total{fill:var(--brand)}
.wf-total.neg{fill:var(--bad)}
.wf-link{stroke:var(--muted);stroke-width:1;stroke-dasharray:2 2;opacity:.6}
.wf-zero{stroke:var(--glass-line);stroke-width:1.5}
.wf-hit{fill:transparent}
.wf-g{outline:none}
.wf-g:hover .wf-hit,.wf-g:focus .wf-hit{fill:var(--track)}
.wf-v{font:700 11.5px var(--display);fill:var(--fg);text-anchor:middle}
.wf-x{font:600 10.5px var(--body);fill:var(--muted);text-anchor:middle}
.insight{margin:0;font-size:13.5px;color:var(--muted);line-height:1.45}
.insight b{color:var(--fg)}
.mixbar{display:flex;gap:2px;height:14px;border-radius:7px;overflow:hidden}
.mixbar span{display:block;min-width:4px}
.mixkey{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:13px;color:var(--muted)}
.mixkey span{display:flex;align-items:center;gap:7px}
.mixkey b{color:var(--fg);margin-left:auto;font-family:var(--display)}
.mixkey i{width:10px;height:10px;border-radius:3px;flex:none}
.mx-b{background:var(--brand)} .mx-p{background:color-mix(in srgb,var(--brand) 45%,transparent)}
.mx-bo{background:color-mix(in srgb,var(--gold) 60%,transparent)} .mx-d{background:var(--gold)}
.regs{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.reg{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:62px;text-align:center}
.reg .av{width:44px;height:44px}
.reg b{font-size:13px}
.reg .muted{font-size:11.5px!important}
.set-list{padding:4px 0!important;gap:0!important}
.set-row{display:flex;align-items:center;gap:10px;width:100%;min-height:50px;padding:0 14px 0 16px;border:0;background:none;color:var(--fg);font:500 15px var(--body);text-align:left;cursor:pointer}
.set-row + .set-row{border-top:1px solid var(--glass-line)}
.set-row > span:first-child{flex:1}
.set-val{color:var(--muted);font-size:14px}
.reg .av{font-size:17px;font-family:var(--display)}
/* Profile 9: partner stats, kudos, heatmap, courses, milestones */
.rel{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:14px;background:var(--tint)}
.rel.warn{background:color-mix(in srgb,var(--gold) 14%,transparent)}
.rel-ic{flex:none;width:26px;height:26px;border-radius:50%;background:var(--brand);color:var(--brand-fg);font:800 14px/26px var(--body);text-align:center}
.rel.warn .rel-ic{background:var(--gold)}
.rel b{display:block;font-size:14.5px;margin-bottom:2px}
.rel .muted{font-size:12.5px!important;line-height:1.4}
.kudos{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kd{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;background:var(--chip);border:1px solid var(--glass-line)}
.kd.top{background:var(--tint);border-color:color-mix(in srgb,var(--brand) 35%,transparent)}
.kd-ic{font-size:18px}
.kd-l{flex:1;font-size:13px;font-weight:600;line-height:1.2}
.kd b{font-family:var(--display);font-size:18px;font-weight:750}
.kd.top b{color:var(--brand)}
.heat{display:grid;grid-template-columns:52px repeat(7,1fr);gap:4px;align-items:center}
.hx{text-align:center;font-size:11px;font-weight:700;color:var(--muted)}
.hy{font-size:11.5px;font-weight:600;color:var(--muted)}
.hc{aspect-ratio:1;border-radius:6px;background:color-mix(in srgb,var(--brand) calc(var(--o) * 100%),transparent)}
.hc.z{background:var(--track)}
.cbars{display:flex;flex-direction:column;gap:9px}
.cbar{display:grid;grid-template-columns:minmax(0,1.2fr) 1fr 18px;gap:10px;align-items:center;font-size:13.5px}
.cn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.ct{height:8px;border-radius:4px;background:var(--track);overflow:hidden}
.ct i{display:block;height:100%;border-radius:4px;background:var(--brand)}
.cbar b{text-align:right;font-family:var(--display)}
.mstones{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ms{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:10px 4px;border-radius:14px;background:var(--chip);border:1px dashed var(--glass-line)}
.ms .ms-ic{font-size:22px;filter:grayscale(1);opacity:.4}
.ms b{font-size:11px;line-height:1.2;color:var(--muted);font-weight:600}
.ms-p{font-size:10.5px;color:var(--muted);font-family:var(--display)}
.ms.on{background:color-mix(in srgb,var(--gold) 12%,transparent);border:1px solid color-mix(in srgb,var(--gold) 35%,transparent)}
.ms.on .ms-ic{filter:none;opacity:1}
.ms.on b{color:var(--fg)}
.kg{display:flex;flex-direction:column;gap:8px}
.kg.sep{border-top:1px solid var(--glass-line);padding-top:12px}
.kchip{min-height:34px!important;font-size:12.5px!important;padding:0 11px}
/* People want to play with you + regulars */
.want{display:flex;gap:14px;align-items:center}
.want + .want{border-top:1px solid var(--glass-line);padding-top:12px}
.want-n{flex:none;width:64px;display:flex;flex-direction:column;align-items:center;padding:8px 0;border-radius:14px;background:var(--tint)}
.want-n b{font-family:var(--display);font-size:26px;font-weight:750;letter-spacing:-.04em;color:var(--brand);line-height:1.05}
.want-n span{font-size:11px;font-weight:600;color:var(--muted)}
.want-t{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.want-t b{font-size:14.5px}
.want-t .muted{font-size:12.5px!important;line-height:1.35}
.want-t .ct{margin-top:4px}
.reg-pill{font-size:9.5px;font-weight:700;letter-spacing:.08em;color:var(--brand);background:var(--tint);border-radius:6px;padding:2px 6px}
.rel-line{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:12px;background:var(--tint);font-size:13.5px;color:var(--muted)}
.rel-line b{color:var(--fg)}
.rel-line .rel-ic{width:20px;height:20px;font-size:11.5px;line-height:20px}
.rel-line.warn{background:color-mix(in srgb,var(--gold) 14%,transparent)}
.rel-line.warn .rel-ic{background:var(--gold)}
/* Golf life unlock (fewer than 5 rounds) */
.unlock{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-radius:18px;border:1px dashed var(--glass-line);background:var(--glass)}
.unlock-t{display:flex;flex-direction:column;gap:3px}
.unlock-t b{font-size:14.5px}
.unlock-t .muted{font-size:13px!important;line-height:1.4}
.unlock-bar{display:flex;align-items:center;gap:10px}
.unlock-bar .ct{flex:1}
.unlock-bar b{font-family:var(--display);font-size:13px;color:var(--muted)}
/* Friends + Your group (update 10 preview) */
.fr-row{display:flex;align-items:center;gap:12px;padding:8px 0}
.fr-row + .fr-row{border-top:1px solid var(--glass-line)}
.fr-row .av,.g-slot .av{width:40px;height:40px;font-size:16px;font-family:var(--display)}
.fr-t{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.fr-t b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-t .muted{font-size:12.5px!important}
.fr-row .chip,.g-slot .chip{min-height:34px;padding:0 12px;font-size:13px}
.chip.on{background:var(--brand);color:var(--brand-fg);border-color:var(--brand)}
.fr-req{display:flex;flex-direction:column;gap:2px;padding:4px 12px;border-radius:14px;background:color-mix(in srgb,var(--gold) 12%,transparent)}
.pill.gold{background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--gold)}
.g-slots{display:flex;flex-direction:column;gap:8px}
.g-slot{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;border:1px solid var(--glass-line);background:var(--chip)}
.g-slot.host{background:var(--tint)}
.g-slot.open{border-style:dashed;background:transparent}
.g-slot.open .fr-t b{color:var(--muted);font-weight:600}
.g-slot.picking{border-color:color-mix(in srgb,var(--brand) 45%,transparent)}
.g-plus{background:var(--chip)!important;color:var(--muted)!important;font-size:20px!important}
.g-slot .x{border:0;background:none;color:var(--muted);font-size:22px;line-height:1;padding:4px 6px;cursor:pointer}
.g-pick{display:flex;flex-direction:column;gap:8px;padding:12px;margin-top:-4px;border-radius:16px;background:var(--glass);border:1px solid var(--glass-line)}
.g-lbl{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.g-guest{display:flex;gap:8px;align-items:center}
.g-guest input{flex:1}
.g-pick .chip{min-height:34px;font-size:13px}
.btn-row{display:flex;gap:8px}
.btn-row .btn{flex:1}
.invite-card{border-color:color-mix(in srgb,var(--gold) 45%,transparent)!important}
/* Invite links */
.inv-banner{display:flex;gap:12px;align-items:center;text-align:left;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(226,189,93,.35);margin:4px 0 2px}
.inv-banner .av{flex:none;width:48px;height:48px;font-size:20px;background:#e2bd5d;color:#0d3123}
.inv-banner b{display:block;font-size:15.5px;color:#f3f8f4;line-height:1.3}
.inv-banner span span{display:block;font-size:14px;color:#eaf3ec}
.inv-banner .sub{color:#a9c4b4!important;font-size:12.5px!important;margin-top:3px}
.inv-code{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--chip);border:1px solid var(--glass-line)}
.inv-code b{flex:1;font-family:var(--display);font-size:20px;letter-spacing:.14em;color:var(--brand)}
.inv-code .chip{min-height:32px;font-size:12.5px}
/* Scoring: team tiles + tee chips */
.teams{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:stretch}
.team{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:16px;background:var(--chip);border:1px solid var(--glass-line)}
.team.mine{background:var(--tint);border-color:color-mix(in srgb,var(--brand) 30%,transparent)}
.team-l{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center}
.vs{align-self:center;font:800 13px var(--display);color:var(--muted);text-transform:uppercase}
.tm-tile{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px;border-radius:14px;border:1px solid var(--glass-line);background:var(--glass);color:var(--fg);font:inherit;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.tm-tile .av{width:40px;height:40px;font-size:16px;font-family:var(--display)}
.tm-tile b{font-size:14px;line-height:1.2;text-align:center}
.tm-tile .muted{font-size:11.5px!important}
.tm-tile.sel{box-shadow:0 0 0 2.5px var(--gold);border-color:transparent}
.tm-tile.drop{box-shadow:0 0 0 2.5px var(--brand);border-color:transparent;transform:scale(1.03)}
.tm-tile.dragging{opacity:.35}
.tm-tile:disabled{cursor:default;opacity:1}
.tm-ghost{position:fixed;z-index:100;pointer-events:none;transform:scale(1.06) rotate(-2deg);box-shadow:0 14px 30px -10px rgba(0,0,0,.45);opacity:.95}
.tee-rows{display:flex;flex-direction:column;gap:2px}
.tee-row{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:8px 0}
.tee-row + .tee-row{border-top:1px solid var(--glass-line)}
.tee-who{display:flex;flex-direction:column;gap:1px;min-width:0}
.tee-who b{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tee-who .muted{font-size:11.5px!important;white-space:nowrap}
.tee-chips{flex:none;gap:4px!important;flex-wrap:nowrap!important}
.tee-chips .chip{min-height:32px;padding:0 10px;font-size:12.5px}
.tee-chips .chip::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:1px;border:1px solid rgba(0,0,0,.2)}
.tee-chips .tee-blue::before{background:#2f6fd1}
.tee-chips .tee-white::before{background:#fff}
.tee-chips .tee-red::before{background:#d23b3b}
/* Scorecard: stroke dots + per-hole result */
.hcell{position:relative;display:block}
.hcell .hole{width:100%}
.sdots{position:absolute;top:5px;right:6px;display:flex;gap:2px;pointer-events:none}
.sdots i{width:6px;height:6px;border-radius:50%;background:var(--gold)}
.hcell.strk .hole{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--gold) 45%,transparent)}
.hlab{position:relative}
.hres{display:inline-block;min-width:18px;height:18px;margin-left:5px;border-radius:5px;font:800 11px/18px var(--display);text-align:center;vertical-align:2px}
.hres:empty{display:none}
.hres.w{background:var(--tint);color:var(--brand)}
.hres.l{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)}
.hres.h{background:var(--chip);color:var(--muted)}
.sc-legend{margin:0;font-size:12.5px;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.sc-legend .hres{margin-left:0}
.sc-legend .hcell.demo{display:inline-block;width:22px;height:18px;border-radius:5px;border:1px solid var(--glass-line);background:var(--glass);vertical-align:middle}
.sc-legend .hcell.demo .sdots{top:3px;right:3px}
/* Hole-by-hole scoring */
.hv{display:flex;flex-direction:column;gap:10px;touch-action:pan-y}
.hv-top{display:flex;align-items:center;gap:10px;padding:4px 0 2px}
.hv-title{flex:1;text-align:center;display:flex;flex-direction:column;gap:2px}
.hv-title b{font-family:var(--display);font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.05;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.hv-title b .hres{font-size:12px;height:22px;line-height:22px;min-width:22px;margin:0}
.hv-title span{font-size:13.5px;color:var(--muted);font-weight:600}
.hv-nav{width:44px;height:44px;border-radius:50%;border:1px solid var(--glass-line);background:var(--chip);color:var(--fg);font-size:26px;line-height:1;cursor:pointer}
.hv-nav:disabled{opacity:.3;cursor:default}
.hv-side{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.hv-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:16px;background:var(--chip);border:1px solid var(--glass-line)}
.hv-row.strk{border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
.hv-row .av{width:38px;height:38px;flex:none;font-size:15px;font-family:var(--display)}
.hv-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.hv-who b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
.hv-who .muted{font-size:12.5px!important}
.sdots.inline{position:static;display:inline-flex}
.stepper{display:flex;align-items:center;gap:4px;flex:none}
.stepper button{width:40px;height:44px;border-radius:12px;border:1px solid var(--glass-line);background:var(--glass);color:var(--fg);font:700 22px/1 var(--display);cursor:pointer}
.stepper .sv{width:50px;font-size:24px;background:var(--app)}
.stepper .sv.ghost{color:color-mix(in srgb,var(--muted) 70%,transparent);border-style:dashed}
.stepper button:disabled{opacity:.55;cursor:default}
.hv-tip{margin:0;font-size:12.5px!important;text-align:center}
.hv-status{display:flex;flex-direction:column;gap:2px;text-align:center;padding:10px;border-radius:14px;background:var(--tint)}
.hv-status b{font-family:var(--display);font-size:16px;color:var(--brand)}
.hv-status span{font-size:12.5px;color:var(--muted)}
.hd-dots{display:grid;grid-template-columns:repeat(9,1fr);gap:4px}
.hd-dot{height:28px;border-radius:8px;border:1px solid var(--glass-line);background:var(--glass);color:var(--muted);font:700 11.5px var(--display);cursor:pointer;padding:0}
.hd-dot.w{background:var(--tint);color:var(--brand);border-color:transparent}
.hd-dot.l{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad);border-color:transparent}
.hd-dot.h{background:var(--chip);color:var(--fg);border-color:transparent}
.hd-dot.cur{box-shadow:0 0 0 2px var(--fg)}
/* Real scorecards */
.card-banner{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:10px 14px;border-radius:16px;background:var(--glass);border:1px solid var(--glass-line);font-size:13.5px}
.card-banner.ok{background:var(--tint);border-color:color-mix(in srgb,var(--brand) 30%,transparent)}
.card-banner.ok b{color:var(--brand)}
.card-banner.warn{flex-direction:column;align-items:stretch;background:color-mix(in srgb,var(--gold) 12%,transparent);border-color:color-mix(in srgb,var(--gold) 40%,transparent)}
.card-banner.warn .btn{min-height:42px}
.card-banner .chip{min-height:32px;font-size:12.5px;flex:none}
.tee-row.stack{flex-direction:column;align-items:stretch;gap:8px}
.tee-row.stack .tee-chips{flex-wrap:wrap!important}
.tee-chips .tee-c::before{background:#9aa5a0}
.tee-chips .tee-blue::before{background:#2f6fd1}
.tee-chips .tee-white::before{background:#fff}
.tee-chips .tee-red::before{background:#d23b3b}
.tee-chips .tee-gold::before,.tee-chips .tee-yellow::before{background:#d8b13a}
.tee-chips .tee-black::before{background:#111}
.tee-chips .tee-silver::before,.tee-chips .tee-grey::before,.tee-chips .tee-gray::before{background:#c0c6c9}
.tee-chips .tee-green::before{background:#2e8c58}
.ce-find{display:flex;gap:8px;align-items:center}
.ce-find input{flex:1}
.ce-hit{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;padding:10px 12px;border-radius:14px;border:1px solid var(--glass-line);background:var(--chip);color:var(--fg);font:inherit;cursor:pointer}
.ce-hit b{font-size:14.5px}
.ce-hit .muted{font-size:12.5px!important}
.ce-grid{display:grid;grid-template-columns:44px 1fr 1fr;gap:6px;align-items:center}
.ce-grid .hd{text-align:center}
.ce-grid .hd:first-child{text-align:left}
.ce-n b{font-size:15px}
.ce-split{grid-column:1/-1;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.ce-tee{display:grid;grid-template-columns:1.3fr 1fr 1fr auto;gap:6px;align-items:center}
.ce-tee input{min-width:0}
.ce-tee .x{border:0;background:none;color:var(--muted);font-size:22px;cursor:pointer}
.ce-w{grid-column:1/-1;font-size:11.5px;color:var(--muted);margin-top:-2px}
.ce-err{margin:0;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad);font-size:13.5px}

/* ---- Update 11 preview: GHIN check by an admin ---- */
.tag.pend{background:transparent;border:1px dashed var(--line);color:var(--muted)}
.prof-idx.ok span{color:var(--good)}
.prof-idx.pend span{color:var(--gold)}
.checks{display:flex;flex-direction:column;gap:0}
.checks .check{min-height:40px;font-size:14.5px}
.ghin-st{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:12px;background:var(--tint);font-size:13.5px}
.ghin-st b{font-size:14.5px}
.ghin-st span{color:var(--muted)}
.ghin-st.ok b{color:var(--good)}
.ghin-st.pend{background:color-mix(in srgb,var(--gold) 12%,transparent)}
.ghin-st.pend b{color:var(--gold)}
.ghin-st.bad{background:color-mix(in srgb,var(--bad) 10%,transparent)}
.ghin-st.bad b{color:var(--bad)}
.vq{gap:12px}
.vq-ghin{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--tint)}
.vq-ghin b{font-family:var(--display);font-size:22px;letter-spacing:.06em;flex:1}
.vq-flag{display:flex;gap:8px;align-items:center}
.vq-flag select{flex:1;min-width:0}
.vq-more summary{cursor:pointer;color:var(--brand);font-size:14px;font-weight:600;padding:8px 0}
.vq-badge{display:inline-flex;min-width:22px;height:22px;padding:0 7px;align-items:center;justify-content:center;border-radius:11px;background:var(--bad);color:#fff;font-size:12.5px;font-weight:700}
.ghv{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--good);vertical-align:1px;margin-left:3px;line-height:1;color:#fff!important;-webkit-text-fill-color:#fff;font:800 10px/1 var(--body)!important;letter-spacing:0!important}
.cs{display:flex;flex-direction:column;gap:6px}
.cs-chips{display:flex;flex-wrap:wrap;gap:6px}
.cs-chips:empty{display:none}
.cs-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 6px 5px 12px;border-radius:999px;background:var(--tint);color:var(--brand);font-size:14px;font-weight:600}
.cs-chip .x{width:26px;height:26px;border:0;border-radius:50%;background:transparent;color:inherit;font-size:18px;line-height:1;cursor:pointer}
.cs .opts{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30}
.cs-row{display:flex;align-items:center;gap:8px;padding:8px 6px 8px 12px;border-radius:14px;background:var(--tint)}
.cs-row-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cs-row-t b{font-size:14.5px;overflow-wrap:anywhere}
.cs-row-t .muted{font-size:12.5px}
.cs-row .cs-code{width:118px;flex:none;min-height:38px;padding:6px 10px;font-size:14px;text-transform:uppercase}
.cs-row .x{width:30px;height:30px;flex:none;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:20px;line-height:1;cursor:pointer}
#csc-ob{flex-direction:column;flex-wrap:nowrap}
.cs-row .cs-code::placeholder{text-transform:none}
/* Alerts: Inbox / Done */
.seg-mini{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.note-row.done{opacity:.78}
.note-row .done-ck{width:20px;height:20px;flex:none;border-radius:50%;background:var(--tint);color:var(--good);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px}
.note-row .todo{color:var(--gold);font-weight:700}

/* Update 11.2 preview: Instagram-style see-through tab bar.
   Pages scroll right under the bar (no fade band any more) and the bar is clear glass that blurs and
   picks up the colors of whatever is behind it, with a bright rim. Delete this block to go back. */
.phone:has(.tabs:not([hidden]))::after{display:none!important}
.tabs{background:rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.9) brightness(1.04);backdrop-filter:blur(16px) saturate(1.9) brightness(1.04);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(255,255,255,.3),0 10px 30px -12px rgba(0,0,0,.35)}
.tab[aria-current="page"]{background:rgba(15,31,23,.09);box-shadow:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tabs{background:rgba(24,34,28,.4);border-color:rgba(255,255,255,.16);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(255,255,255,.06),0 10px 30px -12px rgba(0,0,0,.6)}
  :root:not([data-theme="light"]) .tab[aria-current="page"]{background:rgba(255,255,255,.12)}
}
:root[data-theme="dark"] .tabs{background:rgba(24,34,28,.4);border-color:rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(255,255,255,.06),0 10px 30px -12px rgba(0,0,0,.6)}
:root[data-theme="dark"] .tab[aria-current="page"]{background:rgba(255,255,255,.12)}
/* Clubs on golfers + admin Golfers list */
.fr-clubs{display:block;font-size:12.5px;color:var(--gold);font-weight:600;margin-top:1px}
.g-filter{margin-top:10px}
.g-row{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line)}
.g-row:first-child{border-top:0;padding-top:0}
.g-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.g-top{display:flex;justify-content:space-between;gap:8px}
.g-top b{font-size:15px}
.g-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12.5px}
.gs{font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--track);color:var(--muted)}
.gs.ok{background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--good)}
.gs.pend{background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--gold)}
.gs.bad{background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad)}
.tag .via{font-size:10.5px;font-weight:700;opacity:.7;margin-left:2px;text-transform:uppercase;letter-spacing:.04em}
/* Private courses (admin list + note under the Post course box) */
.cnote{margin:6px 0 0;font-size:13px;color:var(--muted)}
.cnote.bad,.cbad{color:var(--bad);font-weight:600}
.c-row{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-top:1px solid var(--line);font-size:14px}
.c-row:first-child{border-top:0;padding-top:0}
.c-row .chip{align-self:flex-start}
/* Guests in members-only games */
.gtag{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:999px;font-size:11px;font-weight:700;background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--gold);vertical-align:1px}
.gnote{margin:4px 0;padding:9px 11px;border-radius:12px;font-size:13px;line-height:1.4;background:color-mix(in srgb,var(--gold) 12%,transparent);color:var(--fg)}
.gbanner{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 14px);transform:translateX(-50%);z-index:80;width:min(92vw,420px);display:flex;gap:10px;align-items:flex-start;padding:12px 10px 12px 14px;border-radius:16px;
  background:var(--surface);color:var(--fg);font-size:13.5px;line-height:1.4;box-shadow:0 12px 32px -10px rgba(0,0,0,.35);border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);transition:opacity .35s,transform .35s}
.gbanner.out{opacity:0;transform:translate(-50%,-8px)}
.gbanner .gb-ic{font-size:18px;line-height:1.2}
.gbanner .x{flex:none;width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:20px;line-height:1;cursor:pointer}
/* Player chips with a club / Guest tag: keep the name together, let the extras wrap under it */
.g-pick .chip{gap:2px 6px;flex-wrap:wrap;justify-content:flex-start;text-align:left;white-space:nowrap;height:auto;min-height:40px;padding-top:6px;padding-bottom:6px}
.g-pick .chip .muted{font-weight:500;white-space:normal}
.g-pick .chip .gtag{margin-left:0}

/* Fiere brand: two-tone flagstick mark + serif wordmark */
:root{--mark:#14543a;--wordmark:'Fraunces',Georgia,'Times New Roman',serif}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--mark:#f6f3ea}}
:root[data-theme="dark"]{--mark:#f6f3ea}
.brandbar .logo-sm{width:35px;height:37px}
.brandbar .wordmark{font-family:var(--wordmark);font-size:29px;font-weight:600;letter-spacing:-.02em}
.hero .logo{width:76px;height:80px;margin-bottom:14px}
.hero .mark{font-family:var(--wordmark);font-size:60px;font-weight:600;letter-spacing:-.02em}
.hero .defn{margin:-6px 0 16px;font-family:var(--wordmark);font-size:16px;color:#cfe0d5;letter-spacing:.005em}
.hero .defn i{color:#e2bd5d}
.about-name{gap:8px}
.about-name .an-word{margin:0;font-family:var(--wordmark);font-size:26px;line-height:1.1;color:var(--fg)}
.about-name .an-word b{font-weight:600}
.about-name .an-word span{font-family:var(--body);font-size:13px;color:var(--muted);font-style:italic}
.about-name .an-def{margin:0;font-size:15.5px;font-weight:600;color:var(--fg)}
.about-name p.muted{margin:0;font-size:14px;line-height:1.5}
.about-name .an-tag{margin:2px 0 0;font-family:var(--wordmark);font-style:italic;font-size:17px;color:var(--gold)}