/* ═══════════════════════════════════════════════════════════════
   Player Card Modal — shared stylesheet
   Scope: #pcm-card (replaces #modal-card / #pool-player-card / #picks-player-card)
   Injected automatically by player-card-modal.js, or link directly.
   ═══════════════════════════════════════════════════════════════ */

/* ── Backdrop ─────────────────────────────────────────────────── */
#pcm-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  z-index: 100;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
  backdrop-filter: blur(4px);
  /* One scroll container only: .pcm-scroll-area. Backdrop scroll competed with inner on mobile/desktop. */
  overflow: hidden;
  overscroll-behavior: none;
}

/* ── Tier tokens ──────────────────────────────────────────────── */
#pcm-card[data-tier="platinum"] { --tier:#C0C8D4; --tier-dim:rgba(192,200,212,0.4);  --tier-faint:rgba(192,200,212,0.10); --tier-foil-a:rgba(192,200,212,0.18); --tier-foil-b:rgba(30,92,58,0.08) }
#pcm-card[data-tier="gold"]     { --tier:#C49A28; --tier-dim:rgba(196,154,40,0.45);  --tier-faint:rgba(196,154,40,0.10);  --tier-foil-a:rgba(196,154,40,0.18);  --tier-foil-b:rgba(30,92,58,0.08) }
#pcm-card[data-tier="silver"]   { --tier:#A0A5AD; --tier-dim:rgba(160,165,173,0.35); --tier-faint:rgba(160,165,173,0.09); --tier-foil-a:rgba(160,165,173,0.15); --tier-foil-b:rgba(30,92,58,0.07) }
#pcm-card[data-tier="bronze"]   { --tier:#B87333; --tier-dim:rgba(184,115,51,0.35);  --tier-faint:rgba(184,115,51,0.09);  --tier-foil-a:rgba(184,115,51,0.15);  --tier-foil-b:rgba(30,92,58,0.07) }

/* ── Card shell ─────────────────────────────────────────────────
   max-height caps tall content; min-height:0 lets flex child shrink so .pcm-scroll-area can scroll.
   Avoid height:fit-content — it fought flex + max-height in WebKit/Chromium for the scroll child. */
.pcm-modal  {
  background:var(--surface); border:1.5px solid var(--tier-dim,var(--border)); border-radius:10px;
  max-width:480px; width:100%; max-height:min(90vh,90dvh); min-height:0; flex-shrink:1;
  overflow:hidden; position:relative; display:flex; flex-direction:column;
}
/* Do not set perspective here — it is an ancestor of .pcm-scroll-area and breaks nested overflow
   on WebKit/Chromium (Research / Close could not scroll into view). Perspective lives on .pcm-flip-perspective only. */
#pcm-card   { align-self: center; width: 100%; }

/* ── Inner scroll container (.pcm-flipper stays layout-only for 3D flip; scroll here) ──
   Parent .pcm-modal has max-height; flex 1 1 auto + min-height 0 yields internal scroll
   only when content exceeds that cap. Short content = short card (no forced viewport tail). */
/* Scroll lives only here; parent .pcm-modal caps max-height — do not also max-height this child,
   or flex cannot assign a stable clientHeight and scrollHeight === clientHeight (no scroll). */
.pcm-scroll-area {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}

/* 3D flip: perspective must not wrap the overflow scroll parent — only the flip stack */
.pcm-flip-perspective {
  width: 100%;
  perspective: 1200px;
}
#pcm-share-slot:empty {
  display: none;
}

/* Legacy class: JS no longer locks front scroll — keep rule harmless if ever re-added */
#pcm-scroll-area.pcm-scroll-front-locked {
  overflow-y: scroll;
  touch-action: pan-y;
}
.pcm-scroll-area::-webkit-scrollbar { width: 6px; }
.pcm-scroll-area::-webkit-scrollbar-track { background: transparent; }
.pcm-scroll-area::-webkit-scrollbar-thumb {
  background: rgba(110, 90, 60, 0.28);
  border-radius: 6px;
}
.pcm-frame  { position:absolute; inset:5px; border:0.5px solid var(--tier-faint,rgba(255,255,255,0.04)); border-radius:7px; pointer-events:none; z-index:29 }
.pcm-stripe { height:3px; background:linear-gradient(90deg,#1E5C3A,var(--tier,#C49A28),#1E5C3A); flex-shrink:0 }

/* ── Header chrome ────────────────────────────────────────────── */
.pcm-tier-badge { display:inline-flex; flex-direction:column; align-items:center; gap:1px; font-size:9px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--tier,var(--gold)); border:0.5px solid var(--tier-dim,var(--border)); padding:3px 8px; border-radius:2px; white-space:nowrap; line-height:1.2 }
.pcm-tier-badge-owgr { font-size:7px; font-weight:500; letter-spacing:.04em; opacity:.72; line-height:1 }
.pcm-tier-badge-name { line-height:1 }
.pcm-share-btn  { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; background:transparent; border:1px solid var(--border); border-radius:20px; cursor:pointer; font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); transition:all .15s; font-family:inherit }
.pcm-share-btn:hover { border-color:var(--forest); color:var(--forest) }
.pcm-header-area { padding:14px 18px 14px; border-bottom:1px solid var(--border) }
.pcm-body-area   { padding:20px 20px max(20px, env(safe-area-inset-bottom, 12px)) }
/* Tight bottom: no blank tail under the last block / Close */
.pcm-body-area > .pcm-section:last-child { margin-bottom:0 }
.pcm-name { font-family:var(--font-display); font-size:1.6rem; font-weight:700 }
.pcm-meta { font-size:12px; color:var(--text-muted); display:flex; align-items:center; gap:8px; margin-top:2px }
/* Mobile: flag + IOC-style code. Desktop: emoji/flags often degrade to ISO2 letters (JP) beside IOC (JPN) — show code only. */
.pcm-meta-lead--desktop { display: none !important; }
@media (min-width: 701px) {
  .pcm-meta-lead--mobile { display: none !important; }
  .pcm-meta-lead--desktop { display: inline !important; }
}

/* ── Persistent close button (top-right, always visible) ─────── */
.pcm-x-btn {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.14);
  border: none;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  color: rgba(255,255,255,.8);
  cursor: pointer;
  z-index: 30;
  transition: background .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.pcm-x-btn:hover { background: rgba(255,255,255,.26); color: #fff; }

/* ── Flip mechanic ────────────────────────────────────────────── */
.pcm-flipper { position:relative; width:100%; transform-style:preserve-3d; transition:transform 0.6s cubic-bezier(0.4,0,0.2,1); overflow: visible }
/* Hidden back uses height:0 (see #pcm-card rules) — do NOT overflow:hidden here; it clipped the front
   in Chromium/WebKit so Research/Close never scrolled into view. */
.pcm-flipper.flipped { transform:rotateY(180deg) }
.pcm-flipper.flipped .pcm-front { position:absolute; left:0; right:0; top:0; width:100%; visibility:hidden; pointer-events:none }
.pcm-face  { backface-visibility:hidden; -webkit-backface-visibility:hidden }
/* pan-y: vertical scroll reaches .pcm-scroll-area; pinch-zoom kept for accessibility */
.pcm-face.pcm-front { touch-action: pan-y pinch-zoom }
.pcm-back {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
  transform: rotateY(180deg);
  background: var(--surface);
  border-radius: 10px;
  overflow: visible;
}
/* Front showing: zero out the back's layout box so it cannot extend scrollHeight
   (position:absolute alone was still leaving a tall scroll tail on some WebKit builds).
   #pcm-card prefix beats theme's #pcm-card .pcm-back { overflow: visible }. */
#pcm-card .pcm-flipper:not(.flipped) .pcm-back {
  visibility: hidden;
  pointer-events: none;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
#pcm-card .pcm-flipper.flipped .pcm-back {
  visibility: visible;
  pointer-events: auto;
  height: auto !important;
  overflow: visible;
}

/* ── Season stats back face ───────────────────────────────────── */
.ss-back-header  { padding:14px 18px 12px; border-bottom:1px solid var(--border); display:flex; align-items:flex-start; justify-content:space-between; gap:12px }
.ss-back-title   { font-family:var(--font-display); font-size:1.2rem; font-weight:700; line-height:1.2 }
.ss-back-sub     { font-size:11px; color:var(--text-muted); margin-top:3px }
.ss-flip-btn     { display:inline-flex; align-items:center; gap:5px; min-height:44px; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); background:var(--surface2); border:1px solid var(--border); border-radius:4px; padding:5px 12px; cursor:pointer; white-space:nowrap; flex-shrink:0; transition:color .15s,border-color .15s; touch-action:manipulation }
.ss-flip-btn:hover { color:var(--text); border-color:var(--text-muted) }
.ss-body         { padding:16px 18px 20px; display:flex; flex-direction:column; gap:16px }
.ss-section-label{ font-size:9px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); margin-bottom:8px }
.ss-grid         { display:grid; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:6px; overflow:hidden }
.ss-grid-3       { grid-template-columns:repeat(3,1fr) }
.ss-grid-4       { grid-template-columns:repeat(4,1fr) }
.ss-grid-2       { grid-template-columns:repeat(2,1fr) }
.ss-cell         { background:var(--surface2); padding:10px 12px }
.ss-cell-lbl     { font-size:9px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.07em; margin-bottom:4px }
.ss-cell-val     { font-family:var(--font-mono); font-size:.95rem; font-weight:700; color:var(--text); line-height:1.1 }
.ss-cell-val.green { color:var(--green) }
.ss-cell-val.gold  { color:var(--gold) }
.ss-cell-rank    { font-size:9px; color:var(--text-faint); margin-top:3px; line-height:1 }
.ss-cell-rank.r-top10 { color:var(--green) }
.ss-cell-rank.r-top25 { color:var(--gold) }
@media(max-width:400px){ .ss-grid-3{grid-template-columns:repeat(2,1fr)} .ss-grid-4{grid-template-columns:repeat(2,1fr)} }

/* ── Modal sections ───────────────────────────────────────────── */
.pcm-section    { margin-bottom:20px }
.pcm-section h4 { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-muted); margin-bottom:10px }
.pcm-close      { width:100%; padding:10px; background:var(--surface2); border-radius:var(--radius,4px); font-size:13px; font-weight:500; color:var(--text-muted); transition:background .15s; margin-top:4px }
.pcm-close:hover{ background:var(--surface3); color:var(--text) }

/* ── Probabilities (base bar layout — overridden below in theme) */
.prob-item  { margin-bottom:8px }
.prob-label { font-size:12px; color:var(--text-muted); margin-bottom:3px }
.prob-row   { display:flex; align-items:center; gap:8px }
.prob-track { flex:1; height:6px; background:var(--surface3); border-radius:3px; overflow:hidden }
.prob-fill  { height:100%; border-radius:3px; background:var(--forest-light); transition:width .4s }
.prob-fill.hi { background:var(--green) }
.prob-num   { font-family:var(--font-mono); font-size:12px; width:36px; text-align:right }

/* ── Strokes Gained (base) ────────────────────────────────────── */
.sg-item    { margin-bottom:8px }
.sg-label   { font-size:12px; color:var(--text-muted); margin-bottom:3px }
.sg-row     { display:flex; align-items:center; gap:8px }
.sg-track   { flex:1; height:6px; background:var(--surface3); border-radius:3px; position:relative }
.sg-center  { position:absolute; left:50%; top:0; width:1px; height:100%; background:var(--divider) }
.sg-bar     { position:absolute; top:0; height:100%; border-radius:3px }
.sg-bar.pos { left:50%; background:var(--green) }
.sg-bar.neg { right:50%; background:var(--red) }
.sg-val     { font-family:var(--font-mono); font-size:12px; width:40px; text-align:right }
.sg-val.pos { color:var(--green) }
.sg-val.neg { color:var(--red) }

/* ── Stat grid (Shot Quality) ─────────────────────────────────── */
.stat-grid  { display:grid; grid-template-columns:repeat(2,1fr); gap:8px }
.stat-box   { background:var(--surface2); border-radius:4px; padding:10px }
.stat-lbl   { font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin-bottom:3px }
.stat-val   { font-family:var(--font-mono); font-size:0.875rem; font-weight:400 }
.stat-tier  { display:block; margin-top:4px; font-size:7px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; opacity:.88; line-height:1.2; font-style:normal }

/* ── Course fit ───────────────────────────────────────────────── */
.decomp-row          { display:flex; align-items:center; justify-content:space-between; padding:4px 0; border-bottom:1px solid var(--border); font-size:12px }
.decomp-row:last-child { border-bottom:none }
.decomp-val.pos      { color:var(--green) }
.decomp-val.neg      { color:var(--red) }

/* ── Strengths & Weaknesses ───────────────────────────────────── */
.sw-row           { display:flex; gap:1px; border:1px solid var(--border); border-radius:6px; overflow:hidden; margin-top:6px }
.sw-item          { flex:1; padding:11px 14px }
.sw-item.strength { border-right:1px solid var(--border) }
.sw-label         { font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:5px }
.sw-item.strength .sw-label { color:#C49A28 }
.sw-item.weakness .sw-label { color:var(--text-muted) }
.sw-value         { font-size:13px; font-weight:600; color:var(--text); line-height:1.2 }
.sw-note          { font-size:10px; color:var(--text-muted); margin-top:2px; font-family:var(--font-mono) }

/* ── Recent form finishes ─────────────────────────────────────── */
.form-finishes-table  { display:flex; flex-direction:column; gap:0; border:1px solid var(--border); border-radius:6px; overflow:hidden }
.form-finishes-row    { display:grid; grid-template-columns:1fr auto; gap:12px; padding:8px 12px; font-size:12px; align-items:center; border-bottom:1px solid var(--border); background:var(--surface) }
.form-finishes-row:last-child { border-bottom:none }
.form-finishes-row.form-finishes-header { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); background:var(--surface2) }
.form-finishes-row.form-finishes-empty  { grid-column:1/-1; color:var(--text-faint); font-style:italic }
.form-finishes-row span:last-child      { text-align:right; font-family:var(--font-mono) }

/* ── Live Scorecard ───────────────────────────────────────────── */
.sc-wrap   { overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:4px }
.sc-table  { border-collapse:collapse; width:100%; font-family:var(--font-mono) }
.sc-table th { background:var(--surface3); color:var(--text-faint); font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; text-align:center; padding:5px 2px; border:1px solid var(--border); min-width:26px; white-space:nowrap }
.sc-table th.sc-lbl-th { text-align:left; padding-left:8px; min-width:22px }
.sc-table th.sc-out-th,.sc-table th.sc-in-th { background:var(--surface2); min-width:30px }
.sc-table th.sc-tot-th { background:var(--surface2); min-width:32px; border-left:2px solid var(--divider) }
.sc-par-row td { background:var(--surface2); color:var(--text-faint); font-size:10px; text-align:center; padding:3px 2px; border:1px solid var(--border) }
.sc-par-row td.sc-lbl { text-align:left; padding-left:8px; font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap }
.sc-par-row td.sc-sub { background:var(--surface3); font-weight:600; color:var(--text-muted) }
.sc-par-row td.sc-tot { background:var(--surface3); font-weight:600; color:var(--text-muted); border-left:2px solid var(--divider) }
.sc-rnd-row td { height:32px; text-align:center; vertical-align:middle; padding:2px; border:1px solid var(--border) }
.sc-rnd-row td.sc-lbl { text-align:left; padding-left:8px; font-size:10px; font-weight:700; color:var(--text-muted); background:var(--surface2); white-space:nowrap }
.sc-rnd-row td.sc-sub { background:var(--surface3); font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--text) }
.sc-rnd-row td.sc-tot { background:var(--surface2); font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--text); border-left:2px solid var(--divider) }
.sc-num    { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; font-size:11px; font-weight:700; color:var(--text) }
.sc-eagle .sc-num  { color:var(--gold); border:2px solid var(--gold); border-radius:50%; outline:2px solid var(--gold); outline-offset:2px }
.sc-birdie .sc-num { color:var(--green); border:1.5px solid var(--green); border-radius:50% }
.sc-bogey .sc-num  { color:var(--red); border:1.5px solid var(--red); border-radius:1px }
.sc-dbl .sc-num    { color:var(--red); border:1.5px solid var(--red); border-radius:1px; outline:1.5px solid var(--red); outline-offset:2px }
/* Triple bogey or worse: third red square (border + outline + outer ring) */
.sc-triple .sc-num { color:var(--red); border:1.5px solid var(--red); border-radius:1px; outline:1.5px solid var(--red); outline-offset:2px; box-shadow:0 0 0 2px transparent,0 0 0 3.5px var(--red) }
.sc-loading  { display:flex; align-items:center; gap:10px; padding:16px 0; color:var(--text-faint); font-size:12px; font-family:var(--font-body) }
.sc-pulse    { width:10px; height:10px; border-radius:50%; background:var(--gold); animation:sc-pulse 1.4s ease-in-out infinite; flex-shrink:0 }
@keyframes sc-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.7)} }
.sc-unavail  { padding:14px 0; color:var(--text-faint); font-size:12px; text-align:center; font-family:var(--font-body) }
.sc-badges   { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap }
.sc-badge    { display:inline-flex; flex-direction:column; align-items:center; background:var(--surface2); border:1px solid var(--border); border-radius:4px; padding:5px 10px; min-width:48px; cursor:pointer }
.sc-badge.sc-badge-active { border-color:var(--gold); background:rgba(196,154,40,.08) }
.sc-badge.sc-badge-no-data,.sc-badge:disabled { opacity:0.35; cursor:not-allowed; pointer-events:none }
.sc-badge-lbl { font-size:9px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-faint); font-family:var(--font-body); font-weight:600 }
.sc-badge-val { font-family:var(--font-mono); font-size:15px; font-weight:700; margin-top:1px; color:var(--text) }
.sc-badge-val.under { color:var(--green) }
.sc-badge-val.over  { color:var(--red) }
.sc-badge-val.even  { color:var(--text-muted) }

/* ══════════════════════════════════════════════════════════════
   Masters / Golfers Journal Card Theme
   All rules scoped to #pcm-card
   ══════════════════════════════════════════════════════════════ */

/* 1. Force parchment palette & editorial font */
#pcm-card {
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --surface:      #FDFAF4;
  --surface2:     #F4EFE4;
  --surface3:     #EDE5D6;
  --border:       rgba(110, 90, 60, 0.14);
  --divider:      rgba(110, 90, 60, 0.09);
  --text:         #1C1814;
  --text-muted:   #6B5D46;
  --text-faint:   #A8A090;
  --green:        #0A5C38;
  --red:          #B23A2A;
}

/* 2. Card shell */
#pcm-card.pcm-modal {
  border-radius: 16px;
  border: 1px solid var(--tier-dim, rgba(110, 90, 60, 0.18));
  box-shadow: 0 8px 40px rgba(30, 20, 10, 0.13), 0 2px 8px rgba(30, 20, 10, 0.06);
}
#pcm-card .pcm-frame  { border-radius: 13px; border-color: var(--tier-faint, rgba(255,255,255,0.35)); }
#pcm-card .pcm-stripe { background: linear-gradient(90deg, #0A3B36, var(--tier, #C49A28) 50%, #0A3B36); }
#pcm-card .pcm-back   { border-radius: 16px; background: var(--surface); overflow: visible; }

/* 3. Dark green header */
#pcm-card .pcm-header-area {
  background: #0A3B36;
  border-bottom: none;
  padding: 20px 22px 18px;
  color: var(--text);
  --text:       #F5F0E6;
  --text-muted: rgba(245, 240, 230, 0.62);
  --text-faint: rgba(245, 240, 230, 0.38);
  --surface2:   rgba(255, 255, 255, 0.07);
  --surface3:   rgba(255, 255, 255, 0.04);
  --border:     rgba(255, 255, 255, 0.12);
  --divider:    rgba(255, 255, 255, 0.08);
}

/* 4. Player name */
#pcm-card .pcm-name { font-style:italic; font-weight:400; font-size:2rem; letter-spacing:-0.01em; line-height:1.1; }

/* 5. Meta row */
#pcm-card .pcm-meta { flex-wrap:wrap; gap:6px; margin-top:6px; }

/* 6. Tier badge */
#pcm-card .pcm-tier-badge { background:var(--tier,#C49A28); color:#1C1814; border:none; border-radius:3px; padding:4px 10px; font-size:9px; font-weight:700; letter-spacing:.12em; }
#pcm-card .pcm-tier-badge-owgr { opacity:.55; }

/* 7. Section headers */
#pcm-card .pcm-body-area  { padding: 22px 22px max(18px, env(safe-area-inset-bottom, 14px)); }
#pcm-card .pcm-section h4 { font-family:var(--font-body); font-size:9px; font-weight:700; letter-spacing:.15em; color:var(--text); border-bottom:1px solid var(--divider); padding-bottom:8px; margin-bottom:14px; }

/* 8. Finish Probabilities — single row */
#pcm-card .prob-track { display: none; }
#pcm-card .prob-row-all {
  display: flex; gap: 0; margin-top: 10px;
  border: 1px solid var(--divider); border-radius: 6px; overflow: hidden;
}
#pcm-card .prob-stat           { flex: 1 1 0; min-width: 0; text-align:center; padding:8px 2px; border-right:1px solid var(--divider); position:relative; overflow:hidden; }
#pcm-card .prob-stat:last-child { border-right: none; }
#pcm-card .prob-stat::before   { content:''; position:absolute; left:0; top:0; bottom:0; width:var(--prob-pct,0%); background:rgba(10,59,54,0.13); pointer-events:none; transition:width .6s cubic-bezier(0.4,0,0.2,1); }
#pcm-card .prob-stat-win::before { background:rgba(196,154,40,0.18); }
#pcm-card .prob-stat-lbl { font-family:var(--font-body); font-size:7px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:4px; position:relative; z-index:1; }
#pcm-card .prob-stat-num { font-family:var(--font-display); font-style:italic; font-size:1.05rem; font-weight:300; color:var(--text); line-height:1; position:relative; z-index:1; }
#pcm-card .prob-stat.prob-stat-win .prob-stat-num { font-size: 1.35rem; }

/* 9. Strokes Gained — single row */
#pcm-card .sg-track { display: none; }
#pcm-card .sg-row-all {
  display: flex; gap: 0; margin-top: 10px;
  border: 1px solid var(--divider); border-radius: 6px; overflow: hidden;
}
#pcm-card .sg-stat            { flex:1; text-align:center; padding:8px 2px; border-right:1px solid var(--divider); }
#pcm-card .sg-stat:last-child { border-right: none; }
#pcm-card .sg-stat-lbl { font-family:var(--font-body); font-size:7px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin-bottom:4px; display:flex; align-items:center; justify-content:center; gap:2px; }
#pcm-card .sg-stat-num { font-family:var(--font-display); font-style:italic; font-size:1.05rem; font-weight:300; line-height:1; }
#pcm-card .sg-stat:first-child .sg-stat-num { font-size: 1.35rem; }
#pcm-card .sg-arrow-best  { color: var(--tier, #C49A28); font-size: 8px; }
#pcm-card .sg-arrow-worst { color: rgba(155, 41, 41, 0.75); font-size: 8px; }

/* 10. Live Scorecard restyling */
#pcm-card .sc-table th        { background:transparent; border-color:var(--divider); color:var(--text-faint); font-size:9px; }
#pcm-card .sc-par-row td      { background:var(--surface2); border-color:var(--divider); }
#pcm-card .sc-rnd-row td      { border-color: var(--divider); }
#pcm-card .sc-rnd-row td.sc-lbl { background: var(--surface2); }
#pcm-card .sc-rnd-row td.sc-sub { background: var(--surface3); }
#pcm-card .sc-rnd-row td.sc-tot { background: var(--surface2); }
#pcm-card .sc-num              { color: var(--text); }
#pcm-card .sc-birdie .sc-num  { color:#C49A28; border-color:#C49A28; }
#pcm-card .sc-eagle .sc-num   { color:#C49A28; border-color:#C49A28; outline-color:#C49A28; }
#pcm-card .sc-bogey .sc-num   { color:var(--red); border-color:var(--red); }
#pcm-card .sc-dbl .sc-num     { color:var(--red); border-color:var(--red); outline-color:var(--red); }
#pcm-card .sc-triple .sc-num  { color:var(--red); border-color:var(--red); outline-color:var(--red); box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--red) }
#pcm-card .sc-badge            { background:var(--surface2); border-color:var(--border); border-radius:4px; }
#pcm-card .sc-badge-active     { background:#0A3B36; border-color:#0A3B36; }
#pcm-card .sc-badge-active .sc-badge-lbl,
#pcm-card .sc-badge-active .sc-badge-val { color: #F5F0E6; }
#pcm-card .sc-badge-val.under  { color: #0A5C38; }
#pcm-card .sc-badge-val.over   { color: var(--red); }
/* Active badge always shows cream — must come after .under/.over rules of equal specificity */
#pcm-card .sc-badge-active .sc-badge-val.under,
#pcm-card .sc-badge-active .sc-badge-val.over,
#pcm-card .sc-badge-active .sc-badge-val.even { color: #F5F0E6; }
#pcm-card .sc-unavail          { color: var(--text-faint); }

/* 11. Season stats back face — dark green hero header */
#pcm-card .ss-back-header {
  background: #0A3B36; border-bottom: none; padding: 18px 22px 16px; color: #F5F0E6;
  --text: #F5F0E6; --text-muted: rgba(245,240,230,0.62); --text-faint: rgba(245,240,230,0.38);
}
#pcm-card .ss-back-title { font-family:var(--font-display); font-style:italic; font-weight:400; font-size:1.7rem; line-height:1.1; color:#F5F0E6; }
#pcm-card .ss-back-sub   { font-size:10px; letter-spacing:.03em; color:rgba(245,240,230,0.62); }
#pcm-card .ss-flip-btn   { background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.2); color:rgba(245,240,230,0.8); border-radius:3px; }
#pcm-card .ss-body       { padding: 16px 22px 24px; }
#pcm-card .ss-cell        { background: var(--surface2); }
#pcm-card .ss-section-label { color: var(--text); }
#pcm-card .ss-grid        { background: var(--divider); border-color: var(--border); }

/* 12. Close button */
#pcm-card .pcm-close { border:1px solid var(--border); border-radius:6px; cursor:pointer; background:var(--surface2); color:var(--text-muted); margin-top:8px; }
#pcm-card .pcm-close:hover { background:var(--surface3); color:var(--text); }

/* 13. Strengths & Weaknesses */
#pcm-card .sw-row         { background:var(--surface2); border-color:var(--border); border-radius:8px; overflow:hidden; gap:0; }
#pcm-card .sw-item        { padding: 9px 13px; }
#pcm-card .sw-item.strength { border-right-color: var(--border); }
#pcm-card .sw-item.strength .sw-label { color: var(--tier, #C49A28); }
#pcm-card .sw-value { font-family:var(--font-display); font-style:italic; font-size:1.05rem; font-weight:400; line-height:1.2; color:var(--text); }
#pcm-card .sw-note  { font-family:var(--font-mono); font-size:10px; color:var(--text-muted); }

/* 14. Course Fit / DataGolf model */
#pcm-card .decomp-row               { border-bottom-color:var(--divider); padding:5px 0; font-family:var(--font-body); }
#pcm-card .decomp-row > span:first-child { font-size:8.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--text-faint) !important; }
#pcm-card .decomp-val               { font-family:var(--font-display); font-style:italic; font-size:1.05rem; font-weight:400; }
#pcm-card .decomp-val.pos           { color: #0A5C38; }
#pcm-card .decomp-val.neg           { color: #9B2929; }

/* 15. Shot Quality stat grid — 3 cols × 2 rows */
#pcm-card .stat-grid { grid-template-columns: repeat(3, 1fr); }
#pcm-card .stat-box  { background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:12px 14px; }
#pcm-card .stat-lbl  { font-family:var(--font-body); font-size:8px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); margin-bottom:4px; }
#pcm-card .stat-val  { font-family:var(--font-display); font-style:italic; font-size:1.1rem; font-weight:400; color:var(--text); }

/* 16. Recent Form finishes */
#pcm-card .form-finishes-table { border-color:var(--border); border-radius:8px; }
#pcm-card .form-finishes-row   { background:var(--surface); border-bottom-color:var(--divider); font-size:10.5px; padding:4px 10px; }
#pcm-card .form-finishes-row.form-finishes-header { background:var(--surface2); color:var(--text-faint); font-size:8px; letter-spacing:.12em; }
#pcm-card .form-finishes-row span:first-child { font-family:var(--font-display); font-style:italic; font-size:0.88rem; font-weight:300; color:var(--text-muted); }
#pcm-card .form-finishes-row span:last-child  { font-family:var(--font-display); font-style:italic; font-size:1rem; font-weight:400; color:var(--text); }

/* 17. Enhanced back face stat cells */
#pcm-card .ss-section-label { font-family:var(--font-body); font-size:9px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--text); border-bottom:1px solid var(--divider); padding-bottom:4px; margin-bottom:7px; }
#pcm-card .ss-body > div + div { margin-top: 0; }
#pcm-card .ss-body .pcm-section { margin-bottom: 0; }
#pcm-card .ss-body { gap: 10px; }
#pcm-card .ss-cell      { background:var(--surface2); padding:7px 10px; }
#pcm-card .ss-cell-lbl  { font-family:var(--font-body); font-size:8px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); margin-bottom:5px; }
#pcm-card .ss-cell-val  { font-family:var(--font-display); font-style:italic; font-size:1.15rem; font-weight:400; color:var(--text); line-height:1.1; }
#pcm-card .ss-cell-val.green { color: #0A5C38; }
#pcm-card .ss-cell-val.red   { color: #9B2929; }
#pcm-card .ss-cell-rank      { font-size:8.5px; margin-top:3px; color:var(--text-faint); }
#pcm-card .ss-cell-rank.r-top10 { color: #0A5C38; }
#pcm-card .ss-cell-rank.r-top25 { color: #9B6B00; }
#pcm-card .ss-flip-btn { font-family:var(--font-body); font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }

/* ══════════════════════════════════════════════════════════════
   Mobile overrides — max-width: 700px
   Mirror every desktop rule that needs responsive adjustment.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  /* Backdrop: tighter padding on small screens */
  #pcm-backdrop { padding: 12px; }

  /* Close ×: 44×44px touch target on mobile (iOS HIG) */
  .pcm-x-btn { width: 44px; height: 44px; font-size: 22px; top: 4px; right: 6px; }

  /* Base .pcm-scroll-area: scroll + touch momentum (all viewports). */

  /* Header: reduce padding + name size for 375px viewport */
  #pcm-card .pcm-header-area { padding: 16px 16px 14px; }
  #pcm-card .pcm-name        { font-size: 1.6rem; }

  /* Front body: tighter horizontal padding; short bottom pad under Close */
  #pcm-card .pcm-body-area { padding: 16px 16px 12px; }

  /* Probability tiles: force single row on mobile — no wrapping, equal width, no overflow blowout */
  #pcm-card .prob-row-all                    { flex-wrap: nowrap; }
  #pcm-card .prob-stat                       { flex: 1 1 0; min-width: 0; padding: 8px 1px; }
  #pcm-card .prob-stat-num                   { font-size: 0.92rem; }
  #pcm-card .prob-stat.prob-stat-win .prob-stat-num { font-size: 1.15rem; }

  /* Scorecard round badges: minimum 44px touch target (WCAG / iOS HIG) */
  .sc-badge     { min-height: 44px; min-width: 44px; padding: 5px 8px; justify-content: center; }

  /* Back face: tighter padding to gain body space */
  #pcm-card .ss-back-header { padding: 16px 16px 14px; }
  #pcm-card .ss-body        { padding: 14px 16px 18px; }

  /* Back face stat cells: tighter internal padding */
  #pcm-card .ss-cell { padding: 6px 8px; }

  /* Strengths & Weaknesses: full-width stacked on very small screens */
  #pcm-card .sw-item { padding: 8px 12px; }
}

/* Extra-narrow: reflow 3-col stat grids to 2-col (mirrors existing 400px rule) */
@media (max-width: 400px) {
  #pcm-card .stat-grid { grid-template-columns: repeat(2, 1fr); }
  /* Probability tiles: tighten further on very narrow screens */
  #pcm-card .prob-stat                 { padding: 6px 1px; }
  #pcm-card .prob-stat-lbl             { font-size: 6px; letter-spacing: .06em; }
  #pcm-card .prob-stat-num             { font-size: 0.78rem; }
  #pcm-card .prob-stat.prob-stat-win .prob-stat-num { font-size: 0.92rem; }
}