/* StripedGolf application styles. * * Extracted from shot-log-v8.html — it was 3,487 lines of CSS sitting between * the markup and the JavaScript, which meant scrolling past all of it to reach * the app code. Behaviour is identical: this is linked from , so it is * still render-blocking and there is no flash of unstyled content. * * The @font-face block stays inline in the HTML: its url() paths are relative * to the page, so moving it here would need them rewritten for no real gain. */ /* ═══════════════════════════════════════════════ SHOT LOG V8 — V7 Soul · V5 Engine ═══════════════════════════════════════════════ */ :root { /* Core palette — sports-luxe dark (van Schneider editorial) */ --bg: #08100b; --bg2: #0c1610; --surface: #121b15; --surface-2: #1a241d; /* Brand */ --green: #239a5e; --green-mid: #2fb46f; --green-lt: rgba(42,145,96,.14); --gold: #d2a64a; --gold-lt: rgba(210,166,74,.10); --gold-mid: rgba(210,166,74,.16); /* Text — off-white, never pure white */ --ink: #f1f5f1; --ink-2: #c2cec6; --ink-3: #87968c; --ink-4: #5d6d63; /* Semantic — brightened for dark legibility */ --up: #34d17e; --up-bg: rgba(52,209,126,.12); --dn: #ff5e4d; --dn-bg: rgba(255,94,77,.12); /* Functional scoring colours (relative-to-par) */ --score-eagle: #f0cc6a; --score-birdie: #34d17e; --score-par: #c2cec6; --score-bogey: #ffa94d; --score-double: #ff5e4d; /* Ink tones for coloured TEXT sitting on a matching tint (--green-lt / --gold-lt). Plain --green/--gold are fill tones and only reach ~3.5–4.4:1 at 9–11px on those tints, so small labels use these instead. */ --green-ink: #2fb46f; --gold-ink: #d2a64a; /* Podium metals — leaderboard positions 1/2/3. Backgrounds are fixed; the ink is tuned per theme because the tints compress contrast on small numerals. */ --m-gold: #d0a03a; --m-gold-bg: rgba(198,147,38,.15); --m-silv: #a8b1b6; --m-silv-bg: rgba(154,163,168,.16); --m-bronze: #c08a55; --m-bronze-bg: rgba(169,112,63,.15); /* Lines — hairlines on dark */ --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.15); /* Chart colours — saturated for dark canvas */ --c-score: #d2a64a; --c-fw: #3bbd6e; --c-gir: #3aa9dc; --c-putts: #7d85e6; --c-scr: #a875dc; --c-bird: #d6b73a; --c-dbl: #e84d4d; --c-pen: #e8803a; --gold2: #d6b73a; --border: rgba(255,255,255,.08); --g2: #87968c; --g3: #87968c; /* Radii */ --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-2xl: 30px; /* ── SHADOW DESIGN TOKENS — depth on dark canvas ── */ --sh-sm: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3); --sh-md: 0 6px 18px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3); --sh-lg: 0 14px 40px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.35); /* ── CARD DESIGN TOKENS ── */ --card-bg: var(--surface); --card-border: 1px solid rgba(255,255,255,.07); --card-shadow: var(--sh-sm); --card-radius: var(--r-xl); --card-padding: 18px; /* Canonical vertical rhythm between stacked top-level cards. Cards had drifted between 12px and 14px (mixed within the same screen); this is the single source of truth so every screen scrolls on one cadence. */ --card-gap: 14px; /* ── FLUID TYPE SCALE ── Each step: clamp(floor, preferred-vw, ceiling) Viewport range designed for 320px → 600px (mobile-first, max-width panel) Formula: preferred = (target_px / 375) * 100vw */ /* Bottom rung. The scale previously stopped at --t-2xs, so every micro-label went ad-hoc and drifted to 6/7/8/9/9.5px. This is the ONLY sanctioned size below --t-2xs, and it is for uppercase letterspaced labels — never prose. */ --t-micro: clamp(0.5625rem, 2.1vw, 0.625rem); /* 9px → 10px */ --t-2xs: clamp(0.6875rem, 2.4vw, 0.75rem); /* 11px → 12px */ --t-xs: clamp(0.75rem, 2.93vw, 0.8125rem); /* 12px → 13px */ --t-sm: clamp(0.8125rem,3.2vw, 0.875rem); /* 13px → 14px */ --t-base: clamp(0.875rem, 3.73vw, 1rem); /* 14px → 16px */ --t-md: clamp(0.9375rem,4vw, 1.0625rem); /* 15px → 17px */ --t-lg: clamp(1rem, 4.27vw, 1.125rem); /* 16px → 18px */ --t-xl: clamp(1.125rem, 4.8vw, 1.25rem); /* 18px → 20px */ --t-2xl: clamp(1.25rem, 5.33vw, 1.5rem); /* 20px → 24px */ --t-3xl: clamp(1.5rem, 6.4vw, 1.875rem); /* 24px → 30px */ --t-hero: clamp(3rem, 16vw, 4.5rem); /* 48px → 72px */ --t-num: clamp(1.75rem, 7.47vw, 2.625rem); /* 28px → 42px */ --t-num-sm: clamp(1.375rem,5.87vw,2rem); /* 22px → 32px */ /* Nav height */ --nav-h: 64px; /* Clearance below page content so the last items aren't hidden behind the floating nav: nav height + its 16px bottom offset + the elevated Play button + breathing room + the phone's home-indicator safe area. */ --nav-gap: calc(var(--nav-h) + 16px + 36px + env(safe-area-inset-bottom)); /* Glow shadow — for hero numbers and key metrics */ --sh-glow-green: 0 0 28px rgba(29,107,72,.18), 0 2px 8px rgba(29,107,72,.10); --sh-glow-gold: 0 0 28px rgba(184,132,42,.18), 0 2px 8px rgba(184,132,42,.10); } /* ═══════════════════════════════════════════════ LIGHT THEME — sports-luxe daylight Warm off-white canvas, white cards, deepened accents tuned for contrast on light surfaces. ═══════════════════════════════════════════════ */ html[data-theme="light"] { /* Core palette */ --bg: #f3f6f2; --bg2: #eaefe9; --surface: #ffffff; --surface-2: #eef2ed; /* Brand — slightly deepened for legibility on white */ --green: #187c4a; --green-mid: #239a5e; --green-lt: rgba(28,138,82,.10); --gold: #b07d1a; --gold-lt: rgba(176,125,26,.10); --gold-mid: rgba(176,125,26,.16); /* Text — near-black, green-tinted, never pure black */ --ink: #10201a; --ink-2: #3a473f; --ink-3: #5f6e64; --ink-4: #98a59c; /* Semantic — darkened for white-bg contrast */ --up: #157c44; --up-bg: rgba(23,138,76,.12); --dn: #d23b2b; --dn-bg: rgba(210,59,43,.10); /* Functional scoring colours */ --score-eagle: #b07d1a; --score-birdie: #157c44; --score-par: #66756b; --score-bogey: #b05a05; /* deepened from #d97208 — 12px bogey numerals sat at 3.30:1 on white */ --score-double: #d23b2b; /* Ink tones for coloured text on a matching tint — see the dark block */ --green-ink: #157044; --gold-ink: #7a5610; /* Podium metals — deepened for white; the dark tones sat at 2.6:1 here */ --m-gold: #7a5610; --m-gold-bg: rgba(198,147,38,.15); --m-silv: #5c6469; --m-silv-bg: rgba(154,163,168,.16); --m-bronze: #7d4f28; --m-bronze-bg: rgba(169,112,63,.15); /* Lines — hairlines on light */ --line: rgba(16,32,26,.09); --line-2: rgba(16,32,26,.16); /* Chart colours — darkened for white canvas */ --c-score: #b07d1a; --c-fw: #1c8a52; --c-gir: #2585b0; --c-putts: #5a63cc; --c-scr: #8a55c0; --c-bird: #b0941a; --c-dbl: #d23b2b; --c-pen: #d06a1a; --gold2: #b0941a; --border: rgba(16,32,26,.09); --g2: #66756b; --g3: #66756b; /* Shadows — soft, green-tinted, lighter on white */ --sh-sm: 0 1px 2px rgba(16,40,28,.07), 0 1px 3px rgba(16,40,28,.05); --sh-md: 0 6px 18px rgba(16,40,28,.10), 0 2px 6px rgba(16,40,28,.06); --sh-lg: 0 14px 40px rgba(16,40,28,.14), 0 4px 12px rgba(16,40,28,.08); /* Card tokens */ --card-border: 1px solid rgba(16,32,26,.08); /* Glow — much subtler on light */ --sh-glow-green: 0 0 20px rgba(28,138,82,.10), 0 2px 8px rgba(28,138,82,.06); --sh-glow-gold: 0 0 20px rgba(176,125,26,.10), 0 2px 8px rgba(176,125,26,.06); } html[data-theme="light"] body { background: radial-gradient(120% 80% at 50% -10%, rgba(28,138,82,.07) 0%, rgba(28,138,82,0) 55%), radial-gradient(100% 60% at 100% 100%, rgba(176,125,26,.05) 0%, rgba(176,125,26,0) 60%), var(--bg); background-attachment: fixed; } /* ── Light-mode component overrides (elements with hardcoded dark-mode colours) ── */ html[data-theme="light"] .modal { background: rgba(255,255,255,0.94); border: 1px solid rgba(16,32,26,.10); box-shadow: 0 24px 64px rgba(16,40,28,.18), 0 4px 16px rgba(16,40,28,.10), inset 0 1px 0 rgba(255,255,255,.6); } html[data-theme="light"] .modal-overlay { background: rgba(16,40,28,.28); } html[data-theme="light"] .modal-close { background: rgba(16,32,26,.05); } html[data-theme="light"] .modal-close:hover { background: rgba(16,32,26,.10); } /* Map tiles render natively (no dark inversion) in light mode */ html[data-theme="light"] #history-map .leaflet-tile { filter: grayscale(0.12) brightness(1.01) contrast(0.98); } /* (Locked achievement medals need no light-mode override any more — the icon set uses currentColor, so locked slots stay flat surface-2 with theme-appropriate grey glyphs in both themes.) */ /* ── RESET ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } /* Keyboard focus — a visible ring on anything focusable, app-wide. Inputs and selects keep their own green border + glow treatment instead. */ :focus-visible { outline: 2px solid var(--green-mid); outline-offset: 2px; } input:focus-visible, select:focus-visible { outline: none; } html { overflow-x: hidden; overflow-y: auto; } body { background: radial-gradient(120% 80% at 50% -10%, rgba(42,145,96,.10) 0%, rgba(42,145,96,0) 55%), radial-gradient(100% 60% at 100% 100%, rgba(210,166,74,.05) 0%, rgba(210,166,74,0) 60%), var(--bg); background-attachment: fixed; color: var(--ink); font-family: 'Inter', system-ui, sans-serif; font-size: var(--t-base); font-weight: 450; line-height: 1.6; min-height: 100vh; overflow-x: hidden; overflow-y: auto; max-width: 100vw; -webkit-font-smoothing: antialiased; } /* ── NATIVE TOUCH FEEL ── Web apps read as "homemade" the moment a long-press selects a button's label or pops the iOS callout menu, or when scrolling a sheet rubber-bands the whole page behind it. App chrome is therefore non-selectable and callout-free, like a native app; real inputs (and anything explicitly copyable via .selectable) opt back in. Copyable data — invite/join codes — already ships a Copy button. */ * { -webkit-touch-callout: none; } html { overscroll-behavior: none; } body { -webkit-user-select: none; user-select: none; } input, textarea, select, [contenteditable], .selectable { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } /* ── SYNC DOT (lives on the home avatar) ── */ .sdot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.3); transition: background .3s; } .sdot.live { background: #3dde7a; } .sdot.loading { background: #c8a84a; animation: blink .9s infinite; } .sdot.error { background: #f06a5a; } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} } /* ── PANELS ── */ .panel { display: none; padding: calc(18px + env(safe-area-inset-top)) 16px var(--nav-gap); max-width: 600px; margin: 0 auto; } /* `display` can't be transitioned, so instead of a hard cut we play a short enter animation on whichever panel becomes active. It re-fires every time go() adds `.active`. Only opacity + transform are animated, both of which the browser composites on the GPU, so it stays smooth on mobile. */ .panel.active { display: block; animation: panel-in 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); } @keyframes panel-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } /* Respect users who ask for less motion — no slide/fade, just show it. */ @media (prefers-reduced-motion: reduce) { .panel.active { animation: none; } } /* ── FLOATING BOTTOM NAV — glassmorphism pill ── */ /* Five equal slots: Home · Stats · Play(FAB) · Rounds · Social. Each slot is flex:1, so the Play FAB (the middle slot) is always dead-centre and nothing shifts when the active tab changes. Labels are always visible. */ .bottom-nav { position: fixed; bottom: calc(16px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(420px, calc(100vw - 24px)); background: rgba(21,61,42,0.96); backdrop-filter: blur(28px) saturate(1.8); -webkit-backdrop-filter: blur(28px) saturate(1.8); border-radius: var(--r-2xl); padding: 0 6px; height: 64px; display: flex; align-items: center; overflow: visible; box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06); z-index: 100; border: 1px solid rgba(255,255,255,.09); will-change: transform; } .nav-btn { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 2px; cursor: pointer; background: none; border: none; font-family: inherit; color: rgba(255,255,255,.55); transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .nav-btn:active { transform: scale(0.9); } .nav-btn svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; transition: stroke 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .nav-label { font-size: 10px; font-weight: 700; letter-spacing: 0.01em; line-height: 1; white-space: nowrap; } .nav-btn.active { color: var(--green-mid); } .nav-btn.active svg { stroke: var(--green-mid); } .nav-play-wrap { flex: 1 1 0; display: flex; align-items: center; justify-content: center; cursor: pointer; background: none; border: none; font-family: inherit; } .nav-play-btn { width: 54px; height: 54px; border-radius: 50%; margin-top: -26px; background: linear-gradient(145deg, var(--green-mid) 0%, var(--green) 100%); display: flex; align-items: center; justify-content: center; border: 2px solid rgba(255,255,255,.14); box-shadow: 0 8px 22px rgba(35,154,94,.45), 0 2px 8px rgba(0,0,0,.35); transition: transform 0.18s cubic-bezier(0.4,0,0.2,1), box-shadow 0.18s; } .nav-play-btn svg { stroke: #fff; } .nav-play-wrap:hover .nav-play-btn { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(35,154,94,.55); } .nav-play-wrap:active .nav-play-btn { transform: scale(0.92); } .nav-play-wrap.active .nav-play-btn { box-shadow: 0 0 0 3px var(--green-lt), 0 8px 22px rgba(35,154,94,.55); } /* ── HERO CARD ── */ .hero-card { background: linear-gradient(135deg, #0f2d1a 0%, #1d6b48 100%); border-radius: var(--r-2xl); padding: 20px; margin-bottom: var(--card-gap); box-shadow: 0 8px 32px rgba(15,45,26,.28), 0 2px 8px rgba(15,45,26,.14); position: relative; overflow: hidden; color: white; } .hero-card::before { content: ''; position: absolute; top: -80px; right: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(200,168,74,.18) 0%, transparent 70%); pointer-events: none; } .hero-card::after { content: ''; position: absolute; bottom: -40px; left: -30px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.04) 0%, transparent 70%); pointer-events: none; } .hero-eyebrow { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,.55); } .hero-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; position: relative; } .hero-course { font-size: var(--t-xl); font-weight: 800; color: white; margin-bottom: 4px; line-height: 1.2; } .hero-date { font-size: var(--t-xs); color: rgba(255,255,255,.5); font-family: 'DM Mono', monospace; } .hero-right { text-align: right; flex-shrink: 0; } .hero-score { font-size: var(--t-hero); font-weight: 900; font-family: 'DM Mono', monospace; font-variant-numeric: tabular-nums; color: white; line-height: 1; letter-spacing: -0.04em; text-shadow: 0 2px 24px rgba(255,255,255,.15); } .hero-score-sub { font-size: var(--t-xs); color: rgba(255,255,255,.5); font-family: 'DM Mono', monospace; margin-top: 4px; } .hero-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; position: relative; } /* Round Story CTA on the hero — the brand's killer feature, so it gets a gold treatment that lifts off the green card. */ .hero-story-btn { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 14px; padding: 12px; border-radius: 12px; cursor: pointer; background: linear-gradient(135deg, #d9a94b 0%, #c8952f 100%); border: none; color: #23180a; font-family: 'Inter', sans-serif; font-size: var(--t-sm); font-weight: 800; letter-spacing: 0.01em; box-shadow: 0 4px 14px rgba(0,0,0,.22); transition: transform .1s, filter .15s; } .hero-story-btn:active { transform: scale(0.985); filter: brightness(1.05); } .hero-story-btn svg { width: 17px; height: 17px; } .chip { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); border-radius: 20px; padding: 5px 11px; font-size: var(--t-xs); color: rgba(255,255,255,.85); font-family: 'DM Mono', monospace; } .chip.good { background: rgba(61,222,122,.18); border-color: rgba(61,222,122,.3); color: #7dffaa; } .chip.bad { background: rgba(240,106,90,.18); border-color: rgba(240,106,90,.3); color: #ffaa9a; } .chip.gold { background: rgba(200,168,74,.2); border-color: rgba(200,168,74,.35); color: #f0cc6a; } /* ── HOME GREETING ── */ .home-greeting-wrap { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .home-greet-time { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; } .home-greet-name { font-size: clamp(1.6rem, 7vw, 2.1rem); font-weight: 900; color: var(--ink); letter-spacing: -0.03em; line-height: 1.0; } /* ── HOME IDENTITY BAND (Handicap · Target · Form) ── */ .home-id-band { display: grid; grid-template-columns: 1fr 1fr 1fr; background: var(--surface); border: var(--card-border); border-radius: var(--r-xl); box-shadow: var(--card-shadow); margin-bottom: 20px; overflow: hidden; } .home-id-seg { padding: 14px 8px 13px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; position: relative; min-height: 92px; } .home-id-seg + .home-id-seg::before { content: ''; position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px; background: var(--line); } .home-id-label { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; } .home-id-value { font-size: 1.7rem; font-weight: 800; color: var(--ink); font-family: 'DM Mono', monospace; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; } .home-id-value.muted { color: var(--ink-4); } .home-id-value.home-id-form { font-size: 1.35rem; } .home-id-sub { font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.06em; color: var(--ink-3); margin-top: 7px; text-transform: uppercase; } .home-id-stepper { display: flex; align-items: center; gap: 10px; } .home-id-step { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; background: var(--surface-2); border: var(--card-border); color: var(--ink-2); font-size: 17px; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background 0.12s, color 0.12s, transform 0.08s; } /* Firm, instant tap feedback — high-contrast colour shift + a clear press-down, so it registers physically even in bright sun. */ .home-id-step:active { background: var(--green-mid); color: #fff; transform: scale(0.86); } /* The Handicap segment is tappable (opens the breakdown) — give it a press state too. */ .home-id-seg[onclick] { cursor: pointer; transition: transform 0.08s, background 0.12s; border-radius: 10px; } .home-id-seg[onclick]:active { transform: scale(0.97); background: var(--surface-2); } /* ── HANDICAP AUTO/MANUAL SEGMENTED TOGGLE (profile) ── */ .hcp-seg { display: flex; gap: 4px; padding: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; } .hcp-seg-btn { flex: 1; padding: 9px 0; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-size: var(--t-sm); font-weight: 700; color: var(--ink-3); transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.08s; } .hcp-seg-btn:active { transform: scale(0.97); } .hcp-seg-btn.active { background: var(--surface); color: var(--green-mid); box-shadow: 0 1px 3px rgba(0,0,0,.12); } /* ── OFFLINE / UNSYNCED PILL ── */ .offline-pill { position: fixed; left: 50%; top: calc(10px + env(safe-area-inset-top)); z-index: 9400; display: flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 999px; background: var(--surface); color: var(--ink-2); border: 1px solid var(--line-2); box-shadow: 0 6px 22px rgba(0,0,0,.16); font-size: var(--t-xs); font-weight: 700; white-space: nowrap; opacity: 0; transform: translateX(-50%) translateY(-10px); pointer-events: none; cursor: pointer; transition: opacity 0.28s ease, transform 0.28s ease; } .offline-pill.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .offline-pill:active { transform: translateX(-50%) translateY(0) scale(0.96); } .op-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--gold, #c0a028); box-shadow: 0 0 0 3px rgba(192,160,40,.18); animation: op-pulse 1.8s ease-in-out infinite; } @keyframes op-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } } @media (prefers-reduced-motion: reduce) { .op-dot { animation: none; } } /* ── HOME CLUBHOUSE (always-on social rail) ── */ .club-section { margin: 18px 0 4px; } .club-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .club-title { font-size: var(--t-md); font-weight: 800; color: var(--ink); letter-spacing: -0.01em; } .club-open { background: none; border: none; font-size: var(--t-xs); font-weight: 700; color: var(--green); cursor: pointer; padding: 10px 2px 10px 14px; margin: -8px 0; transition: opacity 0.1s; } .club-open:active { opacity: 0.55; } /* Resting state. Deliberately NOT the green live card — announcing an absence should never be the loudest thing in the section, and it only appears when there is genuinely nothing to show (no live round AND no recent friend rounds). */ .club-resting { display: flex; align-items: center; gap: 10px; background: var(--surface); border: var(--card-border); border-radius: var(--r-lg); padding: 13px 15px; margin-bottom: var(--card-gap); } .club-resting-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); flex-shrink: 0; } .club-resting-txt { font-size: var(--t-sm); color: var(--ink-3); min-width: 0; } /* Quiet section label separating recent rounds from anything live above them */ .club-feed-label { font-size: var(--t-micro); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin: 2px 0 9px; } /* Recent-round cards are openable — they lead to the friend's scorecard */ .feed-card.tappable { cursor: pointer; transition: transform .12s, box-shadow .12s; } .feed-card.tappable:active { transform: scale(0.985); } .feed-open { font-size: var(--t-xs); font-weight: 700; color: var(--green-ink); margin-left: auto; flex-shrink: 0; } /* Invite teaser — shown only when you follow nobody (faint sample feed) */ .club-empty { background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); padding: 16px 16px 18px; overflow: hidden; margin-bottom: var(--card-gap); } .club-ghost { opacity: 0.5; pointer-events: none; margin-bottom: 2px; -webkit-mask-image: linear-gradient(#000 35%, transparent 96%); mask-image: linear-gradient(#000 35%, transparent 96%); } .club-ghost-card { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: var(--card-border); border-radius: var(--r-md); padding: 10px 12px; margin-bottom: 8px; } .cg-avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--green-mid), var(--green)); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 14px; } .cg-body { flex: 1; min-width: 0; } .cg-name { font-size: var(--t-sm); font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cg-sub { font-size: var(--t-2xs); color: var(--ink-3); margin-top: 2px; } .cg-pill { font-size: var(--t-xs); font-weight: 800; border-radius: 8px; padding: 4px 9px; flex-shrink: 0; } .cg-pill.under { color: var(--up); background: var(--up-bg); } .cg-pill.over { color: var(--ink-2); background: var(--surface); } .club-empty-cta { text-align: center; margin-top: -2px; } .club-empty-title { font-size: var(--t-md); font-weight: 800; color: var(--ink); margin-bottom: 5px; } .club-empty-text { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; max-width: 300px; margin: 0 auto 13px; } .club-empty-btn { max-width: 250px; margin: 0 auto; } .home-avatar-btn { position: relative; width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; cursor: pointer; border: 1.5px solid rgba(255,255,255,.12); box-shadow: 0 2px 10px rgba(0,0,0,.35); } .home-avatar-inner { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--green-mid) 0%, var(--green) 100%); font-size: 18px; font-weight: 800; color: #fff; } .home-avatar-inner img { width:100%; height:100%; object-fit:cover; } .sdot.avatar-dot { position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--bg); box-shadow: 0 0 0 0.5px rgba(0,0,0,.3); } /* ── HERO CARD ENHANCEMENTS ── */ .hero-score.pb { color: #c8a84a; } .hero-pb-label { display: inline-flex; align-items: center; gap: 5px; background: rgba(200,168,74,.22); border: 1px solid rgba(200,168,74,.4); border-radius: 20px; padding: 3px 10px; font-size: var(--t-2xs); font-weight: 800; color: #f0cc6a; letter-spacing: 0.04em; margin-bottom: 10px; } .hero-eyebrow-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } /* ── STAT COMPARISON TABLE ── */ /* ── TARGET HERO (Stats → Benchmark control) ── */ .target-hero { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); padding: 16px 18px; margin: 18px 0 var(--card-gap); border-top: 2px solid var(--gold); } .target-hero-label { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; } .target-hero-main { flex: 1; min-width: 0; } .target-hero-cap { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.4; } .target-hero-cap strong { color: var(--ink); font-weight: 800; } /* Fixed footprint: flex-shrink:0 + a 2-digit min-width on the number means the stepper stays exactly the same width whether the target is "5" or "54", so the caption on the left never reflows when you step through double digits. */ .target-hero-stepper { gap: 12px; flex-shrink: 0; } .target-hero-stepper .home-id-step { width: 34px; height: 34px; font-size: 20px; } .target-hero-stepper .home-id-value { font-size: 1.9rem; min-width: 2ch; text-align: center; } .stt-card { background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); overflow: hidden; margin-bottom: var(--card-gap); box-shadow: var(--card-shadow); } .stt-head { display: grid; grid-template-columns: 1fr 64px 72px 72px; padding: 7px 14px; background: var(--surface-2); border-bottom: var(--card-border); align-items: center; font-size: var(--t-2xs); font-weight: 700; text-transform: uppercase; color: var(--ink-3); } .stt-head > :first-child { letter-spacing: 0.07em; } .stt-head-r { text-align: center; letter-spacing: 0; } .stt-row { display: grid; grid-template-columns: 1fr 64px 72px 72px; padding: 9px 14px; border-bottom: 1px solid var(--line); align-items: center; transition: background 0.15s; } .stt-row:last-of-type { border-bottom: none; } .stt-row:hover { background: var(--surface-2); } .stt-label { font-size: var(--t-xs); font-weight: 700; color: var(--ink-2); } .stt-val { font-size: var(--t-sm); font-family: 'DM Mono', monospace; font-variant-numeric: tabular-nums; font-weight: 800; color: var(--ink); text-align: center; letter-spacing: 0; } .stt-avg, .stt-tgt { font-size: var(--t-xs); font-family: 'DM Mono', monospace; font-weight: 600; text-align: center; letter-spacing: 0; } .stt-footnote { margin: 0; font-size: var(--t-2xs); color: var(--ink-4); font-style: italic; padding: 8px 14px 10px; border-top: 1px solid var(--line); line-height: 1.4; } /* ── VS AVERAGE STRIP ── */ .vas-strip { display: flex; background: var(--card-bg); border: var(--card-border); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 14px; box-shadow: var(--card-shadow); } .vas-col { flex: 1; text-align: center; padding: 14px 6px; } .vas-div { width: 1px; background: var(--line); flex-shrink: 0; margin: 8px 0; } .vas-val { font-size: var(--t-md); font-weight: 800; font-family: 'DM Mono', monospace; color: var(--ink); line-height: 1.2; } .vas-label { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-top: 2px; line-height: 1.2; } .vas-delta { font-size: var(--t-2xs); font-family: 'DM Mono', monospace; font-weight: 600; margin-top: 3px; line-height: 1.2; } /* ── COACH INSIGHT CARD ── */ /* ── HOME CARD SYSTEM — cohesive shell shared by Coach + Scoring Barrier ── */ .coach-card, .barrier-section { background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); padding: 20px; margin-bottom: 14px; box-shadow: var(--card-shadow); } .coach-head, .barrier-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; } /* Eyebrow with a small gold tick — the shared brand signature on both cards */ .coach-eyebrow, .barrier-label { display: flex; align-items: center; gap: 9px; margin: 0; font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-3); } .coach-eyebrow::before, .barrier-label::before { content: ''; width: 16px; height: 2px; border-radius: 2px; background: var(--gold); flex-shrink: 0; } /* Shared status pill (Coach: trend · Barrier: progress %) */ .hc-pill { font-size: var(--t-2xs); font-weight: 700; padding: 4px 10px; border-radius: 20px; white-space: nowrap; line-height: 1.2; } .hc-pill.up { color: var(--up); background: var(--up-bg); } .hc-pill.down { color: var(--dn); background: var(--dn-bg); } .hc-pill.flat { color: var(--ink-3); background: var(--surface-2); } .hc-pill.gold { color: var(--gold); background: var(--gold-mid); font-family: 'DM Mono', monospace; } /* Hero line — Coach headline / Barrier target */ .coach-focus { font-size: var(--t-lg); font-weight: 700; color: var(--ink); line-height: 1.3; margin-bottom: 7px; letter-spacing: -0.01em; } .coach-read { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.55; margin-bottom: 9px; } .coach-action { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; } /* Shared footer — thin divider + a coloured dot + a secondary line */ .coach-strength, .barrier-foot { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--t-xs); color: var(--ink-3); line-height: 1.5; } .coach-strength strong, .barrier-foot strong { color: var(--ink-2); font-weight: 700; } /* Coach question — the coach asking rather than telling. Sits below the insight, separated by the same rule as the strength line so it reads as a distinct beat rather than more advice. */ .coach-ask { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); } .coach-ask-eyebrow { font-size: var(--t-micro); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; } .coach-ask-q { font-size: var(--t-sm); color: var(--ink); font-weight: 600; line-height: 1.5; } .coach-ask-opts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; } .coach-ask-opt { padding: 7px 13px; border-radius: 20px; border: 1.5px solid var(--line-2); background: var(--surface-2); color: var(--ink-2); font-family: Inter, sans-serif; font-size: var(--t-xs); font-weight: 700; cursor: pointer; text-align: left; line-height: 1.35; transition: transform 0.08s, background 0.15s, border-color 0.15s, color 0.15s; } .coach-ask-opt:active { transform: scale(0.94); } .coach-ask-opt.ghost { border-style: dashed; color: var(--ink-3); font-weight: 600; } .coach-ask-own { display: flex; gap: 8px; margin-top: 11px; align-items: center; } .coach-ask-own .input { flex: 1; margin: 0; } .coach-ask-skip { margin-top: 10px; padding: 0; background: none; border: none; font-family: Inter, sans-serif; font-size: var(--t-2xs); font-weight: 600; color: var(--ink-4); cursor: pointer; text-decoration: underline; } .coach-ask-skip:active { opacity: 0.6; } .hc-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .hc-dot.good { background: var(--up); } .hc-dot.warn { background: var(--score-bogey); } .coach-empty { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.6; } /* ── HOLE-BY-HOLE EDITOR ── */ .he-enter-btn { display:flex; align-items:center; justify-content:center; gap:7px; margin-bottom:12px; } .he-top { display:flex; align-items:center; gap:12px; margin-bottom:12px; } .he-back { background:none; border:none; color:var(--gold); font-weight:700; font-size:var(--t-sm); cursor:pointer; padding:0; } .he-title { font-weight:800; color:var(--ink); font-size:var(--t-base); } .he-head { display:grid; grid-template-columns:30px 1fr 54px 54px 30px; gap:7px; padding:0 12px 6px; font-size:var(--t-2xs); font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-4); } .he-head span:nth-child(3), .he-head span:nth-child(4) { text-align:center; } .he-grid { display:flex; flex-direction:column; gap:7px; } .he-row { display:grid; grid-template-columns:30px 1fr 54px 54px 30px; gap:7px; align-items:center; } .he-hole { font-family:'DM Mono',monospace; font-weight:800; color:var(--ink); text-align:center; font-size:var(--t-sm); } .he-par { font-size:var(--t-2xs); color:var(--ink-4); } .he-inp { width:100%; padding:8px 4px; text-align:center; font-family:'DM Mono',monospace; font-weight:700; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink); } .he-exp { width:30px; height:30px; border:1px solid var(--line-2); border-radius:8px; background:none; color:var(--ink-3); cursor:pointer; font-size:11px; display:flex; align-items:center; justify-content:center; padding:0; } .he-detail { display:none; padding:10px 6px 2px; } .he-detail.open { display:block; } .he-drow { display:flex; align-items:center; gap:10px; margin-bottom:8px; } .he-dl { font-size:var(--t-2xs); color:var(--ink-4); width:80px; flex-shrink:0; text-transform:uppercase; letter-spacing:0.04em; font-weight:700; } .he-tgs { display:flex; gap:6px; flex:1; } .he-tg { flex:1; padding:7px 4px; border:1.5px solid var(--line-2); border-radius:8px; background:var(--surface-2); color:var(--ink-3); font-size:var(--t-2xs); font-weight:700; cursor:pointer; } .he-tg.on { border-color:var(--gold); background:var(--gold-mid); color:var(--gold); } .he-note { font-size:var(--t-2xs); color:var(--ink-4); margin:0 0 12px; line-height:1.5; } .he-lock-note { font-size:var(--t-2xs); color:var(--ink-4); background:var(--surface-2); border-radius:var(--r-sm); padding:9px 11px; margin:0 0 12px; line-height:1.5; } .field.locked input { opacity:.55; cursor:not-allowed; background:var(--surface-2); } .field.locked label { color:var(--ink-4); } /* ── EDITORIAL PAGE HEADER (Stats / Rounds / Social) ── */ .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 20px; } .page-head-main { min-width: 0; } .page-eyebrow { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; } .page-title { font-size: clamp(1.5rem, 6.5vw, 2rem); font-weight: 900; color: var(--ink); letter-spacing: -0.03em; line-height: 1.0; } .page-head-action { flex-shrink: 0; } /* ── ROUNDS: List / Map toggle ── */ .hist-viewtoggle { display:flex; gap:6px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md); padding:4px; margin-bottom:14px; } .hist-vt-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:9px; border:none; border-radius:10px; background:none; color:var(--ink-3); font-family:'Inter',sans-serif; font-size:var(--t-sm); font-weight:700; cursor:pointer; transition:background .2s,color .2s; } .hist-vt-btn.active { background:var(--green); color:#fff; } .hist-vt-btn svg { flex-shrink:0; } /* ── ROUNDS: courses-played map ── */ /* position+z-index traps Leaflet's internal panes/controls (z-index up to 1000) inside the map's own stacking context, so they can't paint over the bottom nav */ #history-map { height:62vh; min-height:340px; width:100%; border-radius:var(--r-xl); overflow:hidden; border:var(--card-border); box-shadow:var(--card-shadow); background:var(--surface-2); position:relative; z-index:0; } .hist-map-status { font-size:var(--t-xs); font-weight:600; color:var(--ink-3); text-align:center; margin-bottom:10px; min-height:1.2em; } .hist-map-hint { font-size:var(--t-2xs); color:var(--ink-3); text-align:center; margin-top:10px; } /* Dark-mode OSM tiles (CSS filter — keeps map free + on-brand) */ #history-map .leaflet-tile { filter: grayscale(0.25) invert(1) brightness(0.95) contrast(0.9) hue-rotate(180deg) saturate(0.75); } /* Dark Leaflet chrome */ .leaflet-div-icon { background:none; border:none; } .leaflet-popup-content-wrapper { background:var(--surface-2); color:var(--ink); border:1px solid var(--line-2); border-radius:var(--r-md); box-shadow:var(--sh-lg); } .leaflet-popup-tip { background:var(--surface-2); border:1px solid var(--line-2); } .leaflet-popup-content { margin:12px 14px; font-family:'Inter',sans-serif; } .leaflet-container a.leaflet-popup-close-button { color:var(--ink-3); } .leaflet-control-attribution { background:rgba(0,0,0,.55)!important; color:var(--ink-4)!important; font-size:9px; } .leaflet-control-attribution a { color:var(--ink-3)!important; } .leaflet-bar a { background:var(--surface-2)!important; color:var(--ink-2)!important; border-bottom-color:var(--line)!important; } .leaflet-bar a:hover { background:var(--surface)!important; } /* Course pin (divIcon) */ .sg-pin { display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--green-mid); border:2px solid #fff; box-shadow:0 3px 8px rgba(0,0,0,.55); } .sg-pin.pb { background:var(--gold); } .sg-pin span { transform:rotate(45deg); font-size:10px; font-weight:800; color:#fff; font-family:'DM Mono',monospace; line-height:1; } /* "Memory map" photo pin — a circular thumbnail instead of the teardrop score badge */ .sg-pin-photo { border-radius:50%; transform:none; width:36px; height:36px; overflow:hidden; border:2.5px solid #fff; box-shadow:0 3px 8px rgba(0,0,0,.55); } .sg-pin-photo.pb { border-color:var(--gold); } .sg-pin-photo img { width:100%; height:100%; object-fit:cover; } .sg-pop-photo { width:100%; max-height:120px; object-fit:cover; border-radius:8px; margin-bottom:8px; display:block; } .sg-pop-name { font-size:var(--t-sm); font-weight:800; color:var(--ink); margin-bottom:3px; } .sg-pop-meta { font-size:var(--t-2xs); color:var(--ink-3); margin-bottom:9px; line-height:1.4; } .sg-pop-btn { display:inline-block; background:var(--green); color:#fff; border:none; border-radius:8px; padding:7px 13px; font-family:'Inter',sans-serif; font-size:var(--t-2xs); font-weight:700; cursor:pointer; } /* Top-100 "country-flag + #rank" badge on a round row */ .t100-flag { display:inline-flex; align-items:center; gap:4px; font-family:'DM Mono',monospace; font-size:10px; font-weight:700; color:var(--gold); background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:1px 6px 1px 4px; margin-left:6px; vertical-align:middle; } .cflag { width:15px; height:10px; border-radius:2px; border:0.5px solid var(--line-2); flex-shrink:0; display:inline-block; } /* Top-100 modal (region filter + played list) */ .top100-regions { display:inline-flex; gap:3px; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:3px; margin-bottom:14px; } .top100-rchip { font-family:'Inter',sans-serif; font-size:var(--t-2xs); font-weight:700; padding:5px 13px; border-radius:9px; background:none; border:none; color:var(--ink-3); cursor:pointer; transition:background .18s ease, color .18s ease; -webkit-tap-highlight-color:transparent; } .top100-rchip.active { background:var(--green); color:#fff; } .t100m-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; font-family:'Fraunces',serif; font-weight:600; font-size:var(--t-lg); color:var(--ink); } .t100m-count { font-size:var(--t-sm); color:var(--ink-3); margin-bottom:8px; } .t100m-count b { font-family:'DM Mono',monospace; font-size:var(--t-md); font-weight:700; color:var(--gold); } .t100-list { display:flex; flex-direction:column; gap:1px; max-height:56vh; overflow-y:auto; } .t100-row { display:flex; align-items:center; gap:9px; padding:9px 2px; border-top:1px solid var(--line); font-size:var(--t-sm); } .t100-row:first-child { border-top:none; } .t100-rank { font-family:'DM Mono',monospace; font-size:var(--t-2xs); font-weight:700; color:var(--ink-4); width:34px; flex-shrink:0; } .t100-name { flex:1; min-width:0; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .t100-tick { color:var(--gold); font-weight:800; flex-shrink:0; } /* ── HISTORY TOPBAR ── */ .history-topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:12px; } .history-topbar .section-title { margin:0; flex:1; min-width:0; } /* ── FILTER SECTION ── */ .filter-section { margin-bottom: 12px; } .filter-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .filter-row:last-child { margin-bottom: 0; } .filter-label { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); width: 46px; flex-shrink: 0; } .filter-pills { display: flex; gap: 5px; flex-wrap: wrap; } .filter-active-note { font-size: var(--t-sm); color: var(--gold); text-align: center; padding: 6px; font-style: italic; } /* collapsible filter panel */ .filter-toggle-row { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; padding: 10px 14px; background: var(--card-bg); border: var(--card-border); transition: background 0.15s; border-radius: var(--r-lg); box-shadow: var(--card-shadow); margin-bottom: 8px; } .filter-toggle-row:hover { background: var(--surface-2); } .filter-toggle-label { font-size: var(--t-sm); font-weight: 700; color: var(--ink-2); display: flex; align-items: center; gap: 8px; } .filter-badge { background: var(--green); color: #fff; border-radius: 10px; font-size: var(--t-2xs); font-weight: 700; padding: 1px 7px; line-height: 16px; } .filter-toggle-arrow { display:flex; align-items:center; color: var(--ink-3); transition: transform .2s; } .filter-toggle-arrow.open { transform: rotate(180deg); } .filter-panel { background: var(--card-bg); border: var(--card-border); border-radius: var(--r-lg); box-shadow: var(--card-shadow); padding: 12px 14px; margin-bottom: 12px; display: none; } .filter-panel.open { display: block; } .filter-select-row { display: flex; gap: 8px; margin-bottom: 10px; } .filter-select-row:last-child { margin-bottom: 0; } .filter-select-wrap { flex: 1; } .filter-select-wrap label { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 4px; } .filter-select-wrap select { width: 100%; padding: 7px 8px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface-2); font-family: Inter, sans-serif; font-size: var(--t-sm); color: var(--ink); cursor: pointer; } .filter-clear-btn { width: 100%; margin-top: 10px; padding: 8px; border-radius: 8px; border: 1px solid var(--line-2); background: none; font-family: Inter, sans-serif; font-size: var(--t-sm); color: var(--ink-3); cursor: pointer; } .filter-clear-btn:hover { color: var(--dn); border-color: var(--dn); } .course-dropdown { position: absolute; top: calc(100% + 3px); left: 0; right: 0; background: var(--surface); border: var(--card-border); border-radius: 8px; z-index: 9999; max-height: 160px; overflow-y: auto; box-shadow: var(--sh-lg); } .cdd-item { padding: 7px 10px; font-size: var(--t-xs); color: var(--ink); cursor: pointer; transition: background 0.12s; } .cdd-item:active { background: var(--surface-2); } .cdd-item:hover { background: var(--surface-2); } /* ── SECTION HEADING ── */ .section-title { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 8px; } .section-title::after { content: ''; flex: 1; height: 1px; background: var(--line); } /* ── PERFORMANCE RADAR ── */ /* Shared chart text. Captions under a chart title are prose and get body treatment; only the legend drops to the micro rung. Previously these were inline 8–9px in --ink-4, which was the faintest, smallest text in the app. */ .chart-caption { font-size: var(--t-xs); color: var(--ink-2); line-height: 1.5; margin-bottom: 5px; } .chart-note { font-size: var(--t-2xs); color: var(--ink-3); line-height: 1.5; margin-bottom: 12px; } .chart-legend { display: flex; gap: 14px; justify-content: center; margin-top: 12px; font-size: var(--t-2xs); color: var(--ink-2); flex-wrap: wrap; } .chart-axis-note { display: flex; justify-content: space-between; font-size: var(--t-2xs); color: var(--ink-3); margin-top: 10px; } /* Parenthetical qualifier inside a .section-title */ .title-qual { color: var(--ink-3); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: var(--t-2xs); } .radar-card { background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); padding: 18px; margin-bottom: 12px; box-shadow: var(--card-shadow); } /* ── BARRIER (shell shared with .coach-card above) ── */ .barrier-hero { font-size: var(--t-lg); font-weight: 800; color: var(--gold); line-height: 1.1; letter-spacing: -0.01em; margin-bottom: 5px; } /* Body copy under the hero number. Matches .coach-read exactly — these two cards share a shell and sit adjacent on Home, so a size AND ink step apart read as an accident rather than a hierarchy. */ .barrier-sub { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.55; margin-bottom: 13px; } .barrier-track { background: var(--line); border-radius: 6px; height: 6px; overflow: hidden; margin-bottom: 6px; } .barrier-track-labels { display: flex; justify-content: space-between; font-size: var(--t-2xs); color: var(--ink-3); } .barrier-fill { height: 100%; border-radius: 6px; background: var(--gold); transition: width .6s ease; } /* ── STAT CARDS GRID ── */ .cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; } .stat-card { background: var(--card-bg); border: var(--card-border); border-radius: var(--r-lg); padding: 14px; box-shadow: var(--card-shadow); position: relative; overflow: hidden; } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: var(--r-lg) var(--r-lg) 0 0; } .stat-card.positive::before { background: var(--up); } .stat-card.negative::before { background: var(--dn); } .stat-card.neutral::before { background: var(--ink-4); } .stat-card.on-target { background: var(--up-bg); border-color: rgba(26,138,70,.18); } .stat-card.on-target::before { background: var(--up); } .stat-card.on-target .sc-value { color: var(--green-mid); } .on-target-badge { display: inline-flex; align-items: center; gap: 3px; margin-top: 5px; background: rgba(28,110,66,.10); border: 1px solid rgba(28,110,66,.20); border-radius: 20px; padding: 2px 7px; font-size: var(--t-2xs); font-weight: 700; color: var(--up); font-family: Inter, sans-serif; letter-spacing: 0.03em; } .sc-label { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; } .sc-body { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .sc-value { font-size: var(--t-num-sm); font-weight: 800; font-family: 'DM Mono', monospace; line-height: 1; color: var(--ink); } .sc-trend { display: flex; align-items: center; gap: 3px; margin-top: 5px; font-size: var(--t-sm); font-family: 'DM Mono', monospace; } .t-up { color: var(--up); } .t-dn { color: var(--dn); } .t-nt { color: var(--ink-2); } .sc-avg { font-size: var(--t-2xs); color: var(--ink-3); margin-top: 3px; } .ring-wrap { position: relative; width: 60px; height: 60px; flex-shrink: 0; } .ring-wrap svg { position: absolute; top: 0; left: 0; width: 60px; height: 60px; } .ring-label { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: var(--t-2xs); font-family: 'DM Mono', monospace; color: var(--ink-2); text-align: center; line-height: 1.3; font-weight: 600; pointer-events: none; } /* Target under the ring percentage — was an inline 7px, the smallest text in the whole app and well under any readable floor. */ .ring-tgt { font-size: var(--t-micro); color: var(--ink-3); font-weight: 500; } /* ── SG BARS ── */ .sg-section { background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); padding: 16px; margin-bottom: var(--card-gap); box-shadow: var(--card-shadow); } .sg-bars { display: flex; flex-direction: column; gap: 12px; } .sg-row { display: flex; align-items: center; gap: 10px; } .sg-label { font-size: var(--t-sm); color: var(--ink-2); width: 82px; flex-shrink: 0; font-weight: 700; } .sg-track { flex: 1; background: var(--line); border-radius: 4px; height: 5px; position: relative; } .sg-zero { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--line-2); } .sg-fill { position: absolute; top: 0; bottom: 0; border-radius: 4px; } .sg-val { font-size: var(--t-sm); font-family: 'DM Mono', monospace; font-weight: 700; width: 34px; text-align: right; flex-shrink: 0; } .sg-pos { color: var(--up); } .sg-neg { color: var(--dn); } .sg-zer { color: var(--ink-3); } /* ── PAR BREAKDOWN ── */ .par-section { background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); padding: 16px; margin-bottom: var(--card-gap); box-shadow: var(--card-shadow); } .par-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .par-row:last-of-type { margin-bottom: 0; } .par-lbl { font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); width: 36px; flex-shrink: 0; } .par-track { flex: 1; background: var(--line); border-radius: 4px; height: 6px; overflow: hidden; position: relative; } .par-center { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--line-2); } .par-fill { height: 100%; border-radius: 4px; } .par-val { font-size: var(--t-xs); font-family: 'DM Mono', monospace; width: 30px; text-align: right; flex-shrink: 0; color: var(--ink); } .par-vs { font-size: var(--t-2xs); width: 36px; text-align: right; flex-shrink: 0; } /* ── DATE RANGE BAR — Trends tab only ── */ .date-range-bar { background: var(--card-bg); border: var(--card-border); border-radius: var(--r-lg); padding: 11px 14px; margin-bottom: 10px; box-shadow: var(--card-shadow); } .drb-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .drb-row + .drb-row { margin-top: 8px; } .drb-label { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); flex-shrink: 0; width: 46px; } .drb-presets { display: flex; gap: 4px; flex-wrap: wrap; } .drb-inputs { align-items: center; } .drb-input { background: var(--surface-2); border: var(--card-border); border-radius: var(--r-sm); padding: 5px 8px; font-size: var(--t-xs); font-family: 'DM Mono', monospace; color: var(--ink); width: auto; max-width: 130px; -webkit-appearance: none; outline: none; transition: border-color 0.2s; } .drb-input:focus { border-color: var(--green-mid); box-shadow: 0 0 0 2px var(--green-lt); } .drb-sep { font-size: var(--t-sm); color: var(--ink-4); flex-shrink: 0; } .drb-clear { background: none; border: none; color: var(--ink-3); font-size: 14px; cursor: pointer; min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; transition: color 0.2s, background 0.2s; } .drb-clear:hover { color: var(--dn); background: var(--dn-bg); } /* ── TRENDS ── */ .trends-summary { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: var(--card-gap); } .ts-item { background: var(--card-bg); border: var(--card-border); border-radius: var(--r-lg); padding: 12px; text-align: center; box-shadow: var(--card-shadow); } .ts-val { font-size: var(--t-num-sm); font-weight: 800; font-family: 'DM Mono', monospace; color: var(--gold); line-height: 1.1; } .ts-lbl { font-size: var(--t-2xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; } .ts-delta { font-size: var(--t-2xs); font-family: 'DM Mono', monospace; margin-top: 3px; } .trend-stat-card { background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); padding: 18px; margin-bottom: var(--card-gap); overflow: hidden; box-shadow: var(--card-shadow); } .tsc-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; } .tsc-label { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } .tsc-badge { font-size: var(--t-2xs); font-weight: 700; padding: 3px 9px; border-radius: 10px; letter-spacing: 0.04em; } .tsc-badge.up { background: var(--up-bg); color: var(--up); border: 1px solid rgba(26,138,70,.20); } .tsc-badge.dn { background: var(--dn-bg); color: var(--dn); border: 1px solid rgba(201,48,32,.20); } .tsc-badge.nt { background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--line); } .tsc-val-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; } .tsc-value { font-size: var(--t-num); font-weight: 900; font-family: 'DM Mono', monospace; line-height: 1; letter-spacing: -0.03em; } .tsc-meta { display: flex; flex-direction: column; gap: 4px; } .tsc-avg { font-size: var(--t-xs); color: var(--ink-3); } .tsc-avg strong { color: var(--ink-2); font-family: 'DM Mono', monospace; } .tsc-target { font-size: var(--t-sm); color: var(--ink-3); } .tsc-target strong { color: var(--gold); font-family: 'DM Mono', monospace; } .tsc-chart { margin-top: 2px; } .tsc-legend { display: flex; gap: 12px; margin-top: 10px; flex-wrap: wrap; } .tsc-leg-item { display: flex; align-items: center; gap: 5px; font-size: var(--t-2xs); color: var(--ink-3); } .tsc-leg-dot { width: 7px; height: 7px; border-radius: 50%; } .tsc-leg-line { width: 14px; height: 1px; border-top: 2px dashed currentColor; } .hcp-index-section { background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); padding: 16px; margin-bottom: var(--card-gap); box-shadow: var(--card-shadow); } /* ── RECORDS — list layout for best-ever stats ── */ .rec-card { background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); padding: 4px 0; margin-bottom: 14px; box-shadow: var(--card-shadow); overflow: hidden; } .rec-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); transition: background 0.15s; } .rec-row:last-child { border-bottom: none; } .rec-row:hover { background: var(--surface-2); } .rec-row.rec-clickable { cursor: pointer; } .rec-row.rec-clickable:active { background: var(--surface-2); } .rec-chevron { flex-shrink: 0; color: var(--ink-4); display: flex; align-items: center; margin-left: -4px; } .rec-chevron svg { width: 16px; height: 16px; } /* Mini-medal chip — echoes the badge medals below so Records reads as one family. Deliberately dark in both themes (signature accent, same reasoning as the hero card): the white SVG strokes need the dark green to be legible. */ .rec-icon { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; /* round, echoing the enamel-pin badges below */ background: linear-gradient(150deg, #1d6b48 0%, #123a26 100%); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 1px 3px rgba(15,45,26,.18); color: #fff; } .rec-icon svg { width: 19px; height: 19px; } /* Quiet footnote when some records are waiting on more logged stat detail */ .rec-hint { font-size: var(--t-2xs); color: var(--ink-3); text-align: center; margin: -6px 0 14px; } .rec-body { flex: 1; min-width: 0; } .rec-label { font-size: var(--t-xs); font-weight: 700; color: var(--ink); line-height: 1.2; } .rec-detail { font-size: var(--t-2xs); color: var(--ink-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rec-val { font-size: var(--t-md); font-family: 'DM Mono', monospace; font-weight: 700; color: var(--gold); flex-shrink: 0; text-align: right; } /* ── ACHIEVEMENTS — Premium Badge System ── */ .ach-section-title { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; margin-top: 6px; display: flex; align-items: center; gap: 10px; } .ach-section-title::after { content: ''; flex: 1; height: 1px; background: var(--line); order: 2; } /* Earned/total count chip — sits to the right of the rule so each section reads its own progress at a glance. order:3 places it after the ::after divider. */ .ach-count { order: 3; flex-shrink: 0; font-family: 'DM Mono', monospace; font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink-4); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; } /* 3-column grid — badge icon is the focal point */ .ach-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; } /* Badge wrapper */ .ach-badge { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; max-width: 100%; } /* ── POKER-CHIP BALL-MARKER medal ── A flat golf ball marker, to match the app's flat design (replaces the earlier 3D enamel pins). `.ach-medal` is the tier-coloured RIM broken by six chunky edge inlays (::before); `.ach-well` is the light CENTRE MEDALLION that holds the mark, ringed by a hairline. Earned-state colours are fixed — a physical marker reads the same in both themes — while the locked "empty chip" uses theme tokens so it stays a quiet, LIGHT slot in both light and dark. */ .ach-medal { --rim: #1c8a52; /* green rim — standard unlock */ --inlay:#f4f7f2; /* the six edge inlays */ --face: #f4f7f2; /* medallion face */ --mark: #1c8a52; /* the icon / number */ --ring: rgba(28,138,82,.55); /* hairline around the medallion */ position: relative; width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: var(--rim); color: var(--mark); box-shadow: 0 2px 6px rgba(16,32,26,.16); transition: transform 0.18s ease; } /* six chunky edge inlays — the poker-chip tell */ .ach-medal::before { content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: 0; pointer-events: none; background: repeating-conic-gradient(from -13deg, var(--inlay) 0 26deg, transparent 26deg 60deg); -webkit-mask: radial-gradient(circle, transparent 0 63%, #000 64%); mask: radial-gradient(circle, transparent 0 63%, #000 64%); } /* light centre medallion — holds the mark, ringed by a hairline */ .ach-well { position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--face); box-shadow: 0 0 0 1.5px var(--ring); } .ach-medal svg { width: 27px; height: 27px; flex-shrink: 0; } /* ── Gold tier — gold rim + deep-gold mark ── */ .ach-badge.gold-tier .ach-medal { --rim: #c69326; --mark: #9a7420; --ring: rgba(158,116,32,.55); } /* Clickable badge (Break-the-Barrier, unlocked) — opens the round's scorecard */ .ach-badge.ach-clickable { cursor: pointer; } /* Hover / tap — subtle flat lift, no looping animation */ .ach-badge.unlocked:hover .ach-medal { transform: translateY(-2px); } .ach-badge.unlocked:active .ach-medal, .ach-badge.ach-clickable:active .ach-medal { transform: scale(0.97); } /* ── Locked — an empty, un-inlaid chip: grey rim outline + grey inlays + hollow centre. Theme tokens keep it a quiet, LIGHT slot in both light and dark. ── */ .ach-badge.locked .ach-medal { --rim: transparent; --inlay: var(--line-2); --face: transparent; --mark: var(--ink-4); --ring: var(--line-2); background: transparent; border: 1.5px solid var(--line-2); box-shadow: none; } /* Number inside a Break-the-Barrier medallion — the target score is the mark, in the app's monospace numeral language. Inherits the medal's mark colour. */ .ach-medal-num { font-family: 'DM Mono', monospace; font-weight: 500; font-size: 1.24rem; letter-spacing: -0.03em; line-height: 1; color: inherit; } .ach-medal-num.d3 { font-size: 1.02rem; } /* "100" — fits the medallion */ /* Padlock for locked state — a small chip on the marker's lower-right edge. Selector must out-rank the generic `.ach-medal svg` sizing rule. */ .ach-medal svg.ach-padlock { position: absolute; bottom: -1px; right: -1px; width: 20px; height: 20px; padding: 4px; box-sizing: border-box; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(0,0,0,.18); color: var(--ink-3); z-index: 2; } /* ── Text beneath badge ── */ .ach-badge-label { text-align: center; display: flex; flex-direction: column; gap: 1px; width: 100%; min-width: 0; padding: 0 2px; } .ach-badge-name { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); line-height: 1.3; } .ach-badge.locked .ach-badge-name { color: var(--ink-4); } .ach-badge-val { font-size: var(--t-xs); font-family: 'DM Mono', monospace; font-weight: 500; color: var(--gold); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ach-badge.locked .ach-badge-val { color: var(--ink-4); } /* Milestone badges are tappable to reveal their full description (the val line truncates, so the criterion is otherwise cut off). */ .ach-badge.ach-info { cursor: pointer; } .ms-pop { position: fixed; z-index: 9600; display: none; max-width: 250px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.20); padding: 12px 14px; } .ms-pop-name { font-size: var(--t-sm); font-weight: 800; color: var(--ink); margin-bottom: 4px; } .ms-pop-desc { font-size: var(--t-xs); color: var(--ink-2); line-height: 1.45; } .ms-pop-status { font-size: var(--t-2xs); font-weight: 700; margin-top: 8px; } .ms-pop-list { margin-top: 8px; max-height: 210px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; } .ms-pop-round { font-size: var(--t-xs); color: var(--ink-2); padding: 6px 8px; border-radius: 8px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; justify-content: space-between; gap: 10px; } .ms-pop-round:hover, .ms-pop-round:active { background: var(--surface-2); } .ms-pop-round .mpr-date { color: var(--ink); font-weight: 700; flex-shrink: 0; } .ms-pop-round .mpr-l { display: flex; align-items: center; gap: 7px; min-width: 0; } .ms-pop-round .mpr-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mpr-tag { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); flex-shrink: 0; } .ms-pop-gap { font-size: var(--t-2xs); color: var(--ink-4); text-align: center; padding: 4px 0; } .ach-badge-date { font-size: var(--t-2xs); font-family: 'DM Mono', monospace; color: var(--ink-4); line-height: 1.3; } @media (prefers-reduced-motion: reduce) { .ach-badge.unlocked:hover .ach-medal, .ach-badge.unlocked:active .ach-medal { transform: none; filter: none; } } /* ── COURSE CARDS ── */ .course-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .course-item { background: var(--card-bg); border: var(--card-border); border-radius: var(--r-lg); padding: 14px; box-shadow: var(--card-shadow); } .course-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; } .course-name { font-size: var(--t-lg); font-weight: 800; color: var(--ink); } .course-rounds { font-size: var(--t-sm); color: var(--ink-3); margin-top: 2px; } .course-score { font-size: var(--t-num-sm); font-weight: 900; font-family: 'DM Mono', monospace; color: var(--green-mid); flex-shrink: 0; } .course-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .cs { text-align: center; min-width: 0; } .cs-val { font-family: 'DM Mono', monospace; font-size: var(--t-lg); font-weight: 600; color: var(--ink); } .cs-lbl { font-size: var(--t-2xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; } .course-badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 12px; padding: 4px 10px; font-size: var(--t-2xs); font-weight: 700; margin-top: 10px; background: var(--gold-lt); border: 1px solid rgba(184,132,42,.2); color: var(--gold); } /* ── LOG MODE TOGGLE ── */ .log-mode-toggle { display: flex; background: var(--surface-2); border: var(--card-border); border-radius: var(--r-md); padding: 3px; margin-bottom: 14px; gap: 3px; } .lmt-btn { flex: 1; padding: 9px 12px; background: none; border: none; border-radius: 9px; font-family: 'Inter', sans-serif; font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.03em; color: var(--ink-3); cursor: pointer; transition: background 0.2s cubic-bezier(0.4,0,0.2,1), color 0.2s cubic-bezier(0.4,0,0.2,1), transform 0.2s cubic-bezier(0.4,0,0.2,1); } .lmt-btn:active { transform: scale(0.97); } .lmt-btn.active { background: var(--green); color: #fff; box-shadow: var(--sh-sm); } /* ── HISTORY HOLE SCORECARD ── */ /* Summary strip — gross, to-par, the two nines, then the shape of the round */ .hsc-summary { padding:2px 2px 14px; } .hsc-sum-top { display:flex; align-items:flex-end; gap:14px; } .hsc-gross { font-family:'DM Mono',monospace; font-size:var(--t-num); font-weight:500; line-height:.9; letter-spacing:-0.03em; color:var(--ink); } .hsc-topar { font-family:'DM Mono',monospace; font-size:var(--t-lg); font-weight:500; line-height:1.5; padding-bottom:2px; } .hsc-topar.under { color:var(--up); } .hsc-topar.over { color:var(--dn); } .hsc-topar.even { color:var(--ink-3); } .hsc-splits { margin-left:auto; display:flex; gap:16px; text-align:right; } .hsc-split-lbl { font-size:var(--t-micro); font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-3); } .hsc-split-val { font-family:'DM Mono',monospace; font-size:var(--t-base); font-weight:500; color:var(--ink-2); margin-top:2px; } .hsc-dist { display:flex; height:5px; border-radius:3px; overflow:hidden; margin-top:14px; gap:1.5px; } .hsc-legend { display:flex; gap:12px; margin-top:9px; flex-wrap:wrap; } .hsc-leg { display:flex; align-items:center; gap:5px; font-size:var(--t-2xs); color:var(--ink-3); } .hsc-leg i { width:7px; height:7px; border-radius:2px; display:block; } .hsc-leg b { font-family:'DM Mono',monospace; font-weight:500; color:var(--ink-2); } .hsc-table { width:100%; border-collapse:collapse; font-size:var(--t-xs); font-family:'DM Mono',monospace; } /* Editorial micro-header rather than a heavy green slab */ .hsc-header th { padding:11px 4px 9px; text-align:center; font-family:Inter,sans-serif; font-size:var(--t-micro); font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-3); background:var(--surface-2); border-bottom:1px solid var(--line); } /* Score is the hero column, carried by a faint full-height band. Kept well below --green-lt: at .10 the tint cost the score badges ~0.5 of contrast. */ .hsc-table th:last-child, .hsc-table tbody td:last-child { background:rgba(42,145,96,.045); } .hsc-row { border-bottom:1px solid var(--line); } .hsc-row:last-child { border-bottom:none; } .hsc-subtotal { background:var(--surface-2); border-top:1px solid var(--line-2); } .hsc-subtotal td { font-family:Inter,sans-serif; font-size:var(--t-micro); font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-3); padding:9px 4px; } .hsc-subtotal td.hsc-score { font-family:'DM Mono',monospace; font-size:var(--t-sm); font-weight:500; letter-spacing:0; text-transform:none; } .hsc-grand { background:var(--green-lt); border-top:1.5px solid var(--green); } .hsc-grand td { font-family:Inter,sans-serif; font-size:var(--t-micro); font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--green-ink); padding:12px 4px; } .hsc-grand td.hsc-score { font-family:'DM Mono',monospace; font-size:var(--t-md); font-weight:500; letter-spacing:-0.02em; text-transform:none; color:var(--ink); } .hsc-cell { padding:7px 4px; text-align:center; } .hsc-hole { color:var(--ink-2); font-size:var(--t-2xs); } /* Reference data recedes so the eye runs Hole → Par → Score, but stays readable */ .hsc-si { color:var(--ink-3); font-size:var(--t-2xs); } .hsc-yds { color:var(--ink-3); font-size:var(--t-2xs); } .hsc-na { color:var(--ink-4); } .hsc-miss { color:var(--ink-3); } .hsc-score { font-weight:700; } .hsc-score.eagle { color:var(--score-eagle); } .hsc-score.birdie { color:var(--score-birdie); } .hsc-score.par { color:var(--score-par); } .hsc-score.bogey { color:var(--score-bogey); } .hsc-score.double { color:var(--score-double); } .hsc-score.worse { color:var(--score-double); } /* ── FULL ROUND STEPPER ── */ .fr-setup { padding: 0; } .fr-search-wrap { position: relative; margin-bottom: 10px; } .fr-search-input { width: 100%; box-sizing: border-box; padding: 13px 16px 13px 42px; background: var(--surface); border: var(--card-border); border-radius: var(--r-md); font-family: 'Inter', sans-serif; font-size: var(--t-base); color: var(--ink); box-shadow: var(--sh-sm); } .fr-search-input:focus { outline: none; border-color: var(--green-mid); box-shadow: 0 0 0 3px rgba(21,61,42,.12); } .fr-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; } .fr-results { background: var(--surface); border: var(--card-border); border-radius: var(--r-md); box-shadow: var(--sh-md); overflow: hidden; margin-top: 4px; } .fr-result-item { padding: 13px 16px; cursor: pointer; border-bottom: 1px solid var(--line); transition: background 0.15s; } .fr-result-item:last-child { border-bottom: none; } .fr-result-item:active { background: var(--green-lt); } .fr-result-name { font-size: var(--t-base); font-weight: 600; color: var(--ink); } .fr-result-meta { font-size: var(--t-xs); color: var(--ink-3); margin-top: 2px; } .fr-searching { padding: 14px 16px; font-size: var(--t-base); color: var(--ink-3); } .fr-format-toggle { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-top: 6px; } .fr-fmt-btn { background: var(--surface); border: var(--card-border); border-radius: var(--r-md); padding: 9px 4px; font-family: 'Inter', sans-serif; font-size: var(--t-xs); font-weight: 700; color: var(--ink-3); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.08s; } .fr-fmt-btn:active { transform: scale(0.97); } .fr-fmt-btn.active { background: var(--green-lt); border-color: rgba(47,180,111,.35); color: var(--green-mid); } .nine-badge { display: inline-block; font-size: 10px; font-weight: 800; color: var(--green-mid); background: var(--green-lt); border: 1px solid rgba(47,180,111,.2); border-radius: 4px; padding: 1px 5px; margin-left: 6px; vertical-align: middle; letter-spacing: 0.04em; } .fr-tee-select { margin-bottom: 12px; } .fr-tee-select label { display: block; font-size: var(--t-xs); font-weight: 700; color: var(--ink-2); margin-bottom: 6px; letter-spacing: 0.04em; text-transform: uppercase; } .fr-tee-select select { width: 100%; padding: 11px 14px; background: var(--surface); border: var(--card-border); border-radius: var(--r-md); font-family: 'Inter', sans-serif; font-size: var(--t-base); color: var(--ink); box-shadow: var(--sh-sm); } .fr-course-confirm { background: var(--gold-lt); border: 1px solid rgba(184,132,42,.25); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 14px; display: flex; align-items: center; gap: 12px; } .fr-course-confirm-name { font-size: var(--t-base); font-weight: 700; color: var(--ink); } .fr-course-confirm-meta { font-size: var(--t-xs); color: var(--ink-3); margin-top: 2px; } .fr-change-btn { margin-left: auto; flex-shrink: 0; background: none; border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 12px; min-height: 32px; font-size: var(--t-xs); color: var(--ink-3); cursor: pointer; font-family: 'Inter', sans-serif; font-weight: 600; } /* Stepper */ .fr-stepper { display: none; } .fr-stepper.active { display: block; } .fr-progress-bar { height: 6px; background: var(--line); border-radius: 3px; margin-bottom: 20px; overflow: hidden; } .fr-progress-fill { height: 100%; background: var(--green); border-radius: 3px; transition: width 0.34s cubic-bezier(0.22,0.85,0.3,1); } .fr-hole-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .fr-hole-num { font-size: var(--t-3xl); font-weight: 900; color: var(--green); font-family: 'DM Mono', monospace; line-height: 1; } /* Scoped to the label only. This used to be `.fr-hole-num span`, which also caught the numeral — so the hole number rendered at 14px grey, identical to the word above it, and a hole change was near-invisible. */ .fr-hole-eyebrow { font-size: var(--t-sm); font-weight: 600; color: var(--ink-3); display: block; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2px; } .fr-hole-digit { display: inline-block; } /* inherits the big green numeral from .fr-hole-num */ .fr-hole-of { font-size: var(--t-sm); font-weight: 700; color: var(--ink-4); letter-spacing: 0.02em; margin-left: 4px; } .fr-hole-badges { display: flex; gap: 6px; } .fr-badge { background: var(--surface-2); border: var(--card-border); border-radius: 8px; padding: 6px 12px; text-align: center; } .fr-badge-val { font-size: var(--t-lg); font-weight: 700; color: var(--ink); font-family: 'DM Mono', monospace; } .fr-badge-lbl { font-size: var(--t-2xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 1px; } /* ── ACTIVE-ROUND HOLE CARD ── */ .fr-hole-card { background: var(--surface); border: var(--card-border); border-radius: var(--r-2xl); box-shadow: var(--card-shadow); padding: 20px 18px 16px; margin-bottom: 12px; touch-action: pan-y; will-change: transform; } /* ── HOLE CHANGE: read it as a page turn, not a text swap ── Two consecutive par 4s previously repainted an identical screen — same hero digit, same layout, nothing moved — so there was no way to tell the hole had advanced without hunting for the number. The card now enters from the direction of travel and the numeral ticks over. */ @keyframes fr-card-in { from { opacity: 0; transform: translateX(var(--fr-from, 26px)); } to { opacity: 1; transform: none; } } .fr-hole-card.fr-anim-in { animation: fr-card-in 0.32s cubic-bezier(0.22,0.85,0.3,1); } @keyframes fr-digit-tick { 0% { opacity: 0; transform: translateY(-0.3em) scale(0.88); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } } .fr-hole-digit.tick { animation: fr-digit-tick 0.4s cubic-bezier(0.22,0.85,0.3,1); } @media (prefers-reduced-motion: reduce) { .fr-hole-card.fr-anim-in, .fr-hole-digit.tick { animation: none; } } .fr-score-hero { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 22px 0 18px; } .fr-score-btn { width: 68px; height: 68px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--surface-2); font-size: 30px; font-weight: 400; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, border-color 0.15s, transform 0.1s; font-family: 'Inter', sans-serif; flex-shrink: 0; line-height: 1; } .fr-score-btn:active { transform: scale(0.9); background: var(--green-lt); border-color: var(--green-mid); } .fr-score-btn:disabled { opacity: 0.35; cursor: not-allowed; } .fr-score-center { flex: 1; text-align: center; min-width: 0; } .fr-score-display { text-align: center; font-size: clamp(4rem, 22vw, 5.5rem); font-weight: 900; font-family: 'DM Mono', monospace; color: var(--ink); line-height: 0.95; letter-spacing: -0.03em; transition: color 0.2s; } .fr-score-display.eagle { color: var(--score-eagle); } .fr-score-display.birdie { color: var(--score-birdie); } .fr-score-display.par { color: var(--ink); } .fr-score-display.bogey { color: var(--score-bogey); } .fr-score-display.double { color: var(--score-double); } .fr-score-display.worse { color: var(--score-double); } .fr-score-display.pu { font-size: clamp(2.6rem, 13vw, 3.6rem); color: var(--ink-4); } /* Not yet entered — the hero shows par as a soft placeholder and only commits to full colour once you touch it. Gives a landed-on-a-new-hole screen an obviously different weight from the one you just finished scoring. */ .fr-score-display.pending { color: var(--ink-4); } .fr-score-rel { font-size: var(--t-sm); font-weight: 800; text-align: center; margin-top: 8px; letter-spacing: 0.05em; text-transform: uppercase; min-height: 1em; } .fr-score-rel.eagle { color: var(--score-eagle); } .fr-score-rel.birdie { color: var(--score-birdie); } .fr-score-rel.par { color: var(--ink-3); } .fr-score-rel.bogey { color: var(--score-bogey); } .fr-score-rel.double { color: var(--score-double); } .fr-score-rel.worse { color: var(--score-double); } .fr-score-rel.pu { color: var(--ink-4); } .fr-score-rel.pending { color: var(--ink-4); } /* Stableford live readout — editorial stat strip (this hole · total · pick-up) */ .fr-stbl-readout { display: flex; align-items: stretch; margin-top: 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); overflow: hidden; } .fr-stbl-cell { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 11px 6px; } .fr-stbl-cell + .fr-stbl-cell { border-left: 1px solid var(--line); } .fr-stbl-num { font-family: 'DM Mono', monospace; font-weight: 700; font-size: var(--t-xl); line-height: 1; color: var(--ink); letter-spacing: -0.01em; transition: color 0.2s; } .fr-stbl-num.gold { color: var(--gold); } .fr-stbl-num.pos { color: var(--green-mid); } .fr-stbl-num.blank { color: var(--ink-4); } .fr-stbl-cap { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* Pick-up lives as the strip's right segment — a quiet toggle, gold when active */ .fr-stbl-pu { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 11px 14px; border: none; border-left: 1px solid var(--line); background: none; cursor: pointer; color: var(--ink-3); font-family: 'Inter', sans-serif; font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; transition: background 0.15s, color 0.15s; } .fr-stbl-pu svg { opacity: 0.8; } .fr-stbl-pu:active { background: var(--green-lt); } .fr-stbl-pu.active { background: var(--gold-mid); color: var(--gold); } .fr-stbl-pu.active svg { opacity: 1; fill: currentColor; } .fr-next-primary { margin: 4px 0 0; font-size: var(--t-base); padding: 16px; } .fr-back-link { display: block; width: 100%; text-align: center; background: none; border: none; cursor: pointer; color: var(--ink-3); font-family: 'Inter', sans-serif; font-size: var(--t-sm); font-weight: 600; padding: 12px 0 8px; min-height: 40px; } .fr-back-link:active { color: var(--ink); } /* ── PROGRESSIVE DISCLOSURE — shot detail drawer ── */ .fr-detail-toggle { width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; padding: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; font-family: 'Inter', sans-serif; font-size: var(--t-sm); font-weight: 700; color: var(--ink-2); letter-spacing: 0.02em; transition: background 0.2s, color 0.2s; } .fr-detail-toggle:active { background: var(--green-lt); } .fr-detail-chevron { transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); flex-shrink: 0; } .fr-detail-toggle.open .fr-detail-chevron { transform: rotate(180deg); } .fr-detail { max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; transition: max-height 0.34s cubic-bezier(0.4,0,0.2,1), opacity 0.25s, margin 0.34s; } .fr-detail.open { max-height: 900px; opacity: 1; margin-top: 14px; } /* ── END ROW ── */ .fr-end-row { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 4px; } .fr-end-link { background: none; border: none; cursor: pointer; font-family: 'Inter', sans-serif; font-size: var(--t-sm); font-weight: 600; color: var(--ink-4); padding: 8px 10px; } .fr-end-link:active { color: var(--ink-2); } .fr-lb-link { color: var(--gold); } .fr-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; } .fr-field { background: var(--surface); border: var(--card-border); border-radius: var(--r-md); padding: 14px; } .fr-field-label { font-size: var(--t-2xs); font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; } .fr-toggle-row { display: flex; gap: 6px; } .fr-toggle-btn { flex: 1; padding: 8px 6px; border-radius: 8px; border: 1.5px solid var(--line-2); background: var(--surface-2); font-family: 'Inter', sans-serif; font-size: var(--t-xs); font-weight: 700; color: var(--ink-3); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .fr-toggle-btn.yes { background: var(--up-bg); border-color: var(--up); color: var(--up); } .fr-toggle-btn.no { background: var(--dn-bg); border-color: var(--dn); color: var(--dn); } .fr-toggle-btn.na { background: var(--gold-mid); border-color: var(--gold); color: var(--gold); } .fr-toggle-btn.left { background: rgba(96,104,208,.12); border-color: #6068d0; color: #6068d0; } .fr-toggle-btn.right { background: rgba(96,104,208,.12); border-color: #6068d0; color: #6068d0; } .fr-fw-icon { width: 18px; height: 18px; display: block; margin: 0 auto 2px; } .fr-fields-wide { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; } .fr-field-full { background: var(--surface); border: var(--card-border); border-radius: var(--r-md); padding: 14px; grid-column: 1/-1; } .fr-bunker-row { display: flex; gap: 8px; align-items: center; } /* GIR confirmation — shown in place of the "missed green" buttons when the score says the green was hit in regulation. */ .fr-gir-hit { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 11px; border-radius: var(--r-md); background: var(--up-bg); border: 1.5px solid var(--up); color: var(--up); font-size: var(--t-sm); font-weight: 700; } .fr-putts-row { display: flex; align-items: center; gap: 0; justify-content: space-between; } .fr-putts-btn { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--surface-2); font-size: var(--t-lg); font-weight: 700; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.1s, transform 0.08s, border-color 0.1s; } .fr-putts-btn:active { background: var(--green-lt); border-color: var(--green-mid); transform: scale(0.9); } .fr-putts-val { font-size: var(--t-2xl); font-weight: 900; font-family: 'DM Mono', monospace; color: var(--ink); min-width: 36px; text-align: center; } .fr-nav-row { display: flex; gap: 10px; margin-top: 8px; } .fr-nav-row .btn-secondary { flex: 0 0 auto; width: auto; padding: 0 20px; } .fr-nav-row .btn-primary { flex: 1; } /* ── COMPETITION ── */ .comp-code-box { background: var(--green); border-radius: var(--r-lg); padding: 20px; text-align: center; margin-bottom: var(--card-gap); } .comp-code-label { font-size: var(--t-xs); font-weight: 700; color: rgba(255,255,255,.6); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; } /* text-indent balances the trailing letter-spacing so the code sits truly centred */ .comp-code-val { font-size: clamp(2rem,10vw,3rem); font-weight: 800; color: #fff; letter-spacing: 0.18em; text-indent: 0.18em; font-family: 'DM Mono', monospace; } .comp-code-course { font-size: var(--t-sm); color: rgba(255,255,255,.7); margin-top: 6px; } .comp-players-list { margin-bottom: 14px; } .comp-player-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); } .comp-player-row:last-child { border-bottom: none; } .comp-player-name { font-size: var(--t-base); font-weight: 600; color: var(--ink); } .comp-player-status { font-size: var(--t-xs); font-weight: 700; padding: 3px 9px; border-radius: 10px; } .comp-player-status.waiting { background: var(--surface-2); color: var(--ink-3); } .comp-player-status.playing { background: var(--up-bg); color: var(--up); } .comp-player-status.complete { background: var(--gold-mid); color: var(--gold); } /* Leaderboard overlay */ .comp-lb-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:2000; align-items:flex-end; } /* Content-sized, but never a thin strip at the bottom of a tall phone — a leaderboard with three players was coming up at ~37% of screen. */ .comp-lb-sheet { background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0; width:100%; min-height:60vh; max-height:88vh; overflow-y:auto; overscroll-behavior:contain; padding: 0 0 calc(32px + env(safe-area-inset-bottom)); } /* Round tabs (multi-round competitions only) — scrolls sideways past ~4 rounds */ .comp-lb-tabs { display:flex; gap:6px; padding:10px 18px 2px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .comp-lb-tabs::-webkit-scrollbar { display:none; } .comp-lb-tab { flex-shrink:0; padding:6px 13px; border-radius:20px; border:1.5px solid var(--line-2); background:var(--surface-2); color:var(--ink-3); font-family:Inter,sans-serif; font-size:var(--t-xs); font-weight:700; cursor:pointer; white-space:nowrap; transition:transform 0.08s, background 0.15s, color 0.15s, border-color 0.15s; } .comp-lb-tab:active { transform:scale(0.94); } .comp-lb-tab.active { border-color:var(--green); background:var(--green-lt); color:var(--green); } .comp-lb-empty { padding:28px 18px; text-align:center; color:var(--ink-3); font-size:var(--t-sm); line-height:1.6; } .comp-lb-handle { width:36px; height:4px; background:var(--line-2); border-radius:2px; margin:12px auto 0; } .comp-lb-header-row { display:flex; justify-content:space-between; align-items:center; padding: 14px 18px 10px; border-bottom: 1px solid var(--line); } .comp-lb-title { font-size: var(--t-lg); font-weight: 800; color: var(--ink); } .comp-lb-close { width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; font-size:14px; color:var(--ink-3); cursor:pointer; padding:0; flex-shrink:0; transition: transform 0.15s, background 0.2s; } .comp-lb-close:active { transform: scale(0.92); } .comp-lb-course-name { font-size: var(--t-sm); color: var(--ink-3); padding: 8px 18px 0; } /* Clubhouse-leader hero — opening the sheet should have a payoff, not just hand you a spreadsheet. Only renders when someone actually has a score. */ .comp-lb-hero { margin:2px 14px 12px; padding:14px 16px; border-radius: var(--r-lg); background:linear-gradient(135deg, var(--green) 0%, #0d3d26 100%); display:flex; align-items:center; gap:13px; position:relative; overflow:hidden; } .comp-lb-hero::after { content:''; position:absolute; right:-30px; top:-40px; width:120px; height:120px; border-radius:50%; background:rgba(255,255,255,.06); } .comp-lb-hero-cup { font-size:1.5rem; line-height:1; flex-shrink:0; } .comp-lb-hero-txt { flex:1; min-width:0; position:relative; } .comp-lb-hero-eyebrow { font-size:var(--t-micro); font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,.80); } .comp-lb-hero-name { font-size:var(--t-md); font-weight:800; color:#fff; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .comp-lb-hero-score { font-family:'DM Mono',monospace; font-size:var(--t-2xl); font-weight:500; color:#fff; flex-shrink:0; position:relative; letter-spacing:-0.02em; } /* The race — a bump chart of position by round. This is the payload of the whole feature: everyone who reads it was there, so showing the SHAPE of the competition (who charged, where the overtake happened) beats telling them what they already know in prose. The lines draw themselves on open so the race replays. */ .race { margin: 2px 14px 12px; padding: 13px 14px 10px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line); } .race-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; } .race-title { font-size: var(--t-micro); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } .race-axis { font-size: var(--t-micro); color: var(--ink-4); } .race-svg { width: 100%; height: auto; display: block; overflow: visible; } .race-rnd { font-family: Inter, sans-serif; font-size: 8px; font-weight: 800; fill: var(--ink-4); letter-spacing: 0.06em; } .race-name { font-family: Inter, sans-serif; font-size: 9.5px; font-weight: 700; } .race-name.me { font-weight: 900; } .race-val { font-family: 'DM Mono', monospace; font-weight: 500; opacity: .75; } /* Draw-on animation. Each line is dashed to its own length and the offset is animated to zero, so it appears to be drawn left to right in round order. */ .race-line { animation: raceDraw 900ms cubic-bezier(.4,0,.2,1) forwards; } @keyframes raceDraw { to { stroke-dashoffset: 0; } } .race-dot { opacity: 0; animation: raceDot 260ms ease-out forwards; } @keyframes raceDot { to { opacity: 1; } } /* Bar chart race. Rows are absolutely positioned and moved by translateY, so an overtake is a real swap the eye can follow — re-sorting the DOM would teleport them instead. Width and transform both transition, and the step duration is set in JS to match the tick rate. */ /* The premium move here is RESTRAINT, not more decoration. Five equally saturated bars is what makes a chart look cheap; a field that recedes so the leader and "you" carry the colour is what makes it look considered. Every player keeps their own hue for identity, but only the ones that matter right now are shown at full strength. */ .brace { padding: 14px 15px 12px; } .brace-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; } .brace-eyebrow { font-size: var(--t-micro); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); } .brace-hole { font-family: 'DM Mono', monospace; font-size: var(--t-md); font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; margin-top: 1px; } /* ── THE RACE ────────────────────────────────────────────── A scrubbable position tracker, designed as one instrument rather than a chart with a table beneath it. Everything here is deliberately quiet: the plot is hairlines and ghosts, and the only strong marks are the leader, you, and the playhead. All easing is a single Apple-ish curve so nothing in the component moves to a different rhythm. */ .pchart { --pc-ease: cubic-bezier(.32,.72,0,1); margin: 2px 4px 14px; } .pc-head { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 12px; } .pc-hole { display: flex; align-items: baseline; gap: 7px; } .pc-hole-k { font-size: var(--t-micro); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); } .pc-hole-n { font-family: 'DM Mono', monospace; font-size: 30px; font-weight: 300; line-height: 1; color: var(--ink); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .pc-hole-r { font-size: var(--t-2xs); font-weight: 600; color: var(--ink-4); } .pc-play { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: none; background: var(--green); color: #fff; cursor: pointer; padding: 0; box-shadow: 0 2px 10px rgba(24,124,74,.30); transition: transform 240ms var(--pc-ease), box-shadow 240ms var(--pc-ease), opacity 200ms; } .pc-play:active { transform: scale(.9); } .pc-play.playing { opacity: .55; } /* Storytelling caption. Reserves its own height so nothing below it shifts when a moment appears — movement should only ever be intentional. */ .pc-moment { height: 20px; padding: 0 12px; margin-top: 4px; overflow: hidden; } .pc-moment span { display: inline-block; font-size: var(--t-2xs); font-weight: 700; color: var(--ink-3); opacity: 0; transform: translateY(5px); transition: opacity 320ms var(--pc-ease), transform 320ms var(--pc-ease); } .pc-moment.show span { opacity: 1; transform: none; } .pc-moment.lead span { color: var(--m-gold); } .pc-plot { position: relative; margin-top: 2px; padding: 2px 0 0; touch-action: none; cursor: grab; user-select: none; } .pc-plot.scrubbing { cursor: grabbing; } /* Scales uniformly: the inline aspect-ratio matches the viewBox, so the plot grows with the panel without distorting. It previously stretched to fill a fixed 190px with preserveAspectRatio="none", which squashed a 20-player field 2.4x vertically and — on anything wider than a phone — stretched every end-of-line dot into an ellipse. Strokes stay hairline via vector-effect: non-scaling-stroke. */ .pc-svg { width: 100%; height: auto; display: block; overflow: visible; } .pc-lane { stroke: var(--line); stroke-width: 1; opacity: .5; } .pc-lanenum { font-family: 'DM Mono', monospace; font-size: 8px; font-weight: 500; fill: var(--ink-4); opacity: .8; } .pc-lanenum.m1 { fill: var(--m-gold); opacity: 1; } .pc-lanenum.m2 { fill: var(--m-silv); opacity: 1; } .pc-lanenum.m3 { fill: var(--m-bronze); opacity: 1; } .pc-rsep { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 1 4; opacity: .7; } /* Holes lead the axis because that is what a golfer counts; the round is quieter grouping context beneath. */ .pc-hlabel { font-family: 'DM Mono', monospace; font-size: 7.5px; font-weight: 500; fill: var(--ink-4); opacity: .85; } .pc-rlabel { font-size: 7.5px; font-weight: 700; fill: var(--ink-4); letter-spacing: .1em; opacity: .65; text-transform: uppercase; } /* The field is context, not content — thin and nearly transparent. Only the leader, you, and an isolated player are drawn as real lines. */ /* The same alpha does not carry the same weight on both grounds: a ghosted line survives on white but sinks into the dark surface. This is a variable rather than a themed `.pc-line` override because such an override would outrank `.pc-line.me` and `.lead` on specificity and ghost those too. */ .pchart { --pc-field: .24; } html[data-theme="light"] .pchart { --pc-field: .16; } .pc-line { stroke-width: 1.5; opacity: var(--pc-field); vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; transition: opacity 380ms var(--pc-ease), stroke-width 380ms var(--pc-ease), filter 380ms var(--pc-ease); } .pc-line.me { opacity: .85; stroke-width: 2.4; } .pc-line.lead { opacity: 1; stroke-width: 3; } .pc-line.solo { opacity: 1; stroke-width: 3; } .pc-line.dim { opacity: .06; } .pc-line.won { filter: drop-shadow(0 0 6px rgba(198,147,38,.6)); } .pc-line.flash { animation: pcFlash 620ms var(--pc-ease); } @keyframes pcFlash { 0%,100% { filter: none; } 40% { filter: drop-shadow(0 0 5px currentColor); } } /* Dots follow their line's prominence. Left at full strength they were louder than the lines they cap, so in a big field twenty bright markers pulled the eye away from the two players the chart is actually about. */ .pc-dot { opacity: 0; transition: opacity 300ms var(--pc-ease); } .pc-plot.scrubbing .pc-dot, .pchart .pc-dot { opacity: .3; } .pchart .pc-dot.me { opacity: .9; } .pchart .pc-dot.lead { opacity: 1; } .pchart .pc-dot.solo { opacity: 1; } .pc-dot.dim { opacity: .12; } /* Playhead: a hairline, not a cursor. It should feel like a light passing over the plot rather than a UI control sitting on top of it. */ .pc-scrub { stroke: var(--ink-4); stroke-width: 1; opacity: .35; transition: opacity 240ms var(--pc-ease); } .pc-plot.scrubbing .pc-scrub { opacity: .7; stroke: var(--green); } /* Sits under the plot, not on it — as a corner overlay it landed on top of the lines and the hole numbers. It is scaffolding, so it leaves once used. */ .pc-hint { margin: 7px 0 0; text-align: center; pointer-events: none; font-size: var(--t-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); opacity: .5; transition: opacity 400ms var(--pc-ease); } .pc-hint.gone { opacity: 0; } /* Winning it is marked by a trophy on the row and nothing else. The position and the score are already sitting right there, so a banner announcing the same thing in bigger type is furniture. It grows out of zero width rather than appearing, so no row ever reflows. */ .pb-who { display: flex; align-items: center; min-width: 0; } .pb-cup { flex: none; font-size: 11px; line-height: 1; width: 0; margin-left: 0; opacity: 0; overflow: hidden; transition: width 300ms var(--pc-ease), margin-left 300ms var(--pc-ease), opacity 300ms var(--pc-ease); } .pb-row.won .pb-cup { width: 13px; margin-left: 6px; opacity: 1; } /* One small pop on arrival, then it sits still. */ .pb-row.won .pb-cup { animation: pbCup 620ms var(--pc-ease) 80ms both; } @keyframes pbCup { 0% { transform: scale(.3) rotate(-16deg); } 55% { transform: scale(1.18) rotate(4deg); } 100% { transform: scale(1) rotate(0); } } @media (prefers-reduced-motion: reduce) { .pb-cup { transition: none; } .pb-row.won .pb-cup { animation: none; } } /* "CB" against anyone who finished level at the top. Small, but a real target — a countback win is the one result people want the working for. */ .pb-cb { flex: none; margin-left: 6px; padding: 1px 5px; border-radius: 5px; font-family: 'DM Mono', ui-monospace, monospace; font-size: 8px; font-weight: 700; letter-spacing: .06em; color: var(--m-gold); background: rgba(198,147,38,.13); box-shadow: inset 0 0 0 1px rgba(198,147,38,.3); cursor: pointer; transition: background 160ms var(--pc-ease); } .pb-cb:hover { background: rgba(198,147,38,.22); } .pb-cb:active { background: rgba(198,147,38,.3); } /* The countback explainer. A table is the right shape here — it is a committee working, and hiding that in prose would make it less convincing, not more. */ .cbm { max-width: 460px; } .cbm-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--t-md); font-weight: 800; color: var(--ink); margin-bottom: 10px; } .cbm-lede { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; margin-bottom: 12px; } .cbm-lede strong { color: var(--ink); font-weight: 700; } .cbm-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .cbm-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .cbm-table th, .cbm-table td { padding: 7px 9px; text-align: right; font-size: var(--t-xs); white-space: nowrap; } .cbm-table thead th { font-weight: 700; color: var(--ink-3); border-bottom: 1px solid var(--line); } .cbm-table tbody th { text-align: left; font-weight: 600; color: var(--ink-2); display: flex; flex-direction: column; gap: 1px; } .cbm-holes { font-family: 'DM Mono', ui-monospace, monospace; font-size: 8px; font-weight: 500; color: var(--ink-4); letter-spacing: .04em; } .cbm-table tbody tr { border-bottom: 1px solid var(--line-2); } .cbm-table tbody td { color: var(--ink-2); font-family: 'DM Mono', ui-monospace, monospace; } /* The stretch that actually settled it, and the ones that never got looked at. */ .cbm-decided { background: rgba(198,147,38,.09); } .cbm-decided th, .cbm-decided td { color: var(--ink); font-weight: 700; } .cbm-best { color: var(--m-gold) !important; } .cbm-after { opacity: .38; } .cbm-note { font-size: var(--t-2xs); color: var(--ink-4); line-height: 1.55; margin-top: 11px; } /* Live leaderboard. Rows are absolutely positioned so a change in order is a physical slide rather than a re-paint. */ .pboard { position: relative; margin: 12px 6px 0; } .pb-row { position: absolute; left: 0; right: 0; height: 38px; padding: 0 10px; display: grid; grid-template-columns: 20px 26px 1fr auto auto; align-items: center; gap: 10px; background: transparent; border: none; border-radius: 11px; cursor: pointer; font-family: Inter, sans-serif; text-align: left; -webkit-tap-highlight-color: transparent; transition: transform 520ms var(--pc-ease), background 320ms var(--pc-ease), box-shadow 320ms var(--pc-ease), opacity 320ms var(--pc-ease); will-change: transform; } .pb-row.lead { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); } /* No gold ring on the winning row — the trophy says it, and a heavy border round one row in a quiet list is the thing that reads as cheap. */ .pb-row.dim { opacity: .3; } .pb-row.bump { animation: pbBump 520ms var(--pc-ease); } @keyframes pbBump { 0%,100% { background-color: transparent; } 30% { background-color: var(--green-lt); } } .pb-row:active { transform-origin: center; } .pb-pos { font-family: 'DM Mono', monospace; font-size: var(--t-xs); font-weight: 500; color: var(--ink-4); text-align: right; font-variant-numeric: tabular-nums; transition: color 320ms var(--pc-ease); } .pb-pos.m1 { color: var(--m-gold); font-weight: 700; } .pb-pos.m2 { color: var(--m-silv); font-weight: 700; } .pb-pos.m3 { color: var(--m-bronze); font-weight: 700; } /* The player's colour lives in the ring, not in the letters. Bold accent-coloured initials on a grey disc is the thing that reads as a placeholder; a quiet monospace pair inside a coloured ring reads as a considered identity mark. */ .pb-av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; overflow: hidden; font-family: 'DM Mono', ui-monospace, monospace; font-size: 8.5px; font-weight: 500; letter-spacing: .02em; color: var(--ink-3); background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--accent); } /* With a real photo the ring becomes a halo around the face rather than a line drawn across it — those 2px of breathing room are the whole difference. */ .pb-av.img { padding: 2px; background: var(--surface-3); } .pb-av.img img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } .pb-name { font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pb-row.lead .pb-name { color: var(--ink); font-weight: 800; } .pb-move { font-size: 9px; font-weight: 800; min-width: 20px; text-align: right; opacity: 0; transition: opacity 320ms var(--pc-ease), color 320ms var(--pc-ease); } .pb-move.up { color: var(--up); opacity: 1; } .pb-move.down { color: var(--dn); opacity: 1; } .pb-pts { font-family: 'DM Mono', monospace; font-size: var(--t-sm); font-weight: 500; min-width: 32px; text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { .pc-line, .pc-dot, .pc-scrub, .pb-row, .pb-move, .pb-pos, .pc-moment span { transition: none; } .pb-row.bump, .pc-line.flash { animation: none; } } /* Position-by-hole tracker. The vertical axis is the placing itself, so every crossing is an overtake — which is what people actually care about, far more than a running points total. */ .bpos-svg { width: 100%; height: auto; display: block; overflow: visible; margin: 10px 0 2px; } .bpos-axis { font-family: 'DM Mono', monospace; font-size: 8.5px; font-weight: 500; fill: var(--ink-4); } .bpos-axis.m1 { fill: var(--m-gold); font-weight: 700; } .bpos-axis.m2 { fill: var(--m-silv); font-weight: 700; } .bpos-axis.m3 { fill: var(--m-bronze); font-weight: 700; } /* The field recedes; the current leader and you carry the colour. Five equally vivid lines is the thing that reads as a cheap chart. */ /* The field is drawn as thin ghosts so the plot reads as context rather than spaghetti; only the current leader and you are drawn as real lines. */ .bpos-line { opacity: .18; stroke-width: 1.6; transition: opacity 320ms ease, stroke-width 320ms ease; } .bpos-line.me { opacity: .9; stroke-width: 2.8; } .bpos-line.lead { opacity: 1; stroke-width: 3.2; } .bpos-line.won { filter: drop-shadow(0 0 5px rgba(198,147,38,.55)); } .bpos-chip { opacity: .45; transition: opacity 320ms ease; } .bpos-chip.me, .bpos-chip.lead { opacity: 1; } .bpos-chip.lead circle { filter: drop-shadow(0 1px 4px rgba(0,0,0,.22)); } .bpos-init { font-family: Inter, sans-serif; font-size: 7.5px; font-weight: 800; } .bpos-legend { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 6px; min-height: 15px; } .bpos-leg { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-micro); font-weight: 700; color: var(--ink-3); } .bpos-leg i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; } .bpos-leg.m1 i { background: var(--m-gold); } .bpos-leg.m2 i { background: var(--m-silv); } .bpos-leg.m3 i { background: var(--m-bronze); } @media (prefers-reduced-motion: reduce) { .bpos-line, .bpos-chip { transition: none; } } .brace-track { position: relative; margin: 10px 0 2px; transition: height 300ms cubic-bezier(.4,0,.2,1); } .brace-row { position: absolute; left: 0; right: 0; height: 34px; padding: 0 7px; border-radius: 10px; display: grid; grid-template-columns: 15px 24px minmax(44px, 70px) 1fr auto; align-items: center; gap: 8px; /* A gentle overshoot on the swap: rows settle into place rather than sliding to a mechanical stop. This is most of what separates "animated chart" from "designed motion". */ transition: transform 420ms cubic-bezier(.22,1.12,.36,1), opacity 300ms ease, background 300ms ease, box-shadow 300ms ease; will-change: transform; } /* Slipping out of the leading pack: fades and shrinks away at the boundary. */ .brace-row.out { opacity: 0; pointer-events: none; } .brace-row.leader { background: var(--surface); box-shadow: 0 2px 10px rgba(0,0,0,.07), 0 0 0 1px var(--line); } .brace-rank { font-family: 'DM Mono', monospace; font-size: var(--t-2xs); font-weight: 500; color: var(--ink-4); text-align: right; font-variant-numeric: tabular-nums; transition: color 300ms ease; } .brace-rank[data-r="1"] { color: var(--m-gold); font-weight: 700; } .brace-rank[data-r="2"] { color: var(--m-silv); font-weight: 700; } .brace-rank[data-r="3"] { color: var(--m-bronze); font-weight: 700; } /* Initials rather than truncated names — reads cleanly at any width and gives each competitor a stable identity as they move. */ .brace-av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-family: Inter, sans-serif; font-size: 9px; font-weight: 800; letter-spacing: 0.02em; color: var(--accent); background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--accent); opacity: .55; transition: opacity 300ms ease, transform 300ms cubic-bezier(.34,1.56,.64,1); } .brace-name { font-size: var(--t-xs); font-weight: 600; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 300ms ease; } .brace-bar-wrap { height: 16px; border-radius: 8px; background: var(--line); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.08); } .brace-bar { display: block; height: 100%; border-radius: 8px; position: relative; background-color: var(--bar); /* Layered translucency rather than color-mix(), which this codebase deliberately avoids for browser-support reasons. */ background-image: linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.03) 50%, rgba(0,0,0,.14) 100%); opacity: .38; transition: width 420ms cubic-bezier(.22,1.12,.36,1), opacity 300ms ease, filter 300ms ease; } /* A brighter leading edge, so the bar reads as an object with a tip rather than a flat block of colour. */ .brace-bar::before { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 22px; border-radius: 8px; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.30) 100%); } /* Full strength only for the leader and for you — everyone else recedes. */ .brace-row.leader .brace-bar, .brace-row.me .brace-bar { opacity: 1; } .brace-row.leader .brace-av, .brace-row.me .brace-av { opacity: 1; } .brace-row.leader .brace-name { color: var(--ink); font-weight: 800; } .brace-row.me .brace-name { color: var(--ink); font-weight: 800; } .brace-row.leader .brace-val { color: var(--ink); } .brace-val { font-family: 'DM Mono', monospace; font-size: var(--t-sm); font-weight: 500; min-width: 36px; text-align: right; color: var(--ink-3); font-variant-numeric: tabular-nums; transition: color 300ms ease; } .brace-more { position: absolute; left: 0; right: 0; bottom: -15px; text-align: center; font-size: var(--t-micro); color: var(--ink-4); } /* Winner flourish: the row lifts onto a gold plinth, the avatar pops, and a single sheen sweeps the bar. One gesture, not three competing ones. */ .brace-row.won { box-shadow: 0 0 0 1.5px var(--m-gold), 0 4px 16px rgba(198,147,38,.28); } .brace-row.won .brace-av { animation: bracePop 560ms cubic-bezier(.34,1.56,.64,1); } @keyframes bracePop { 0%{transform:scale(1)} 42%{transform:scale(1.28)} 100%{transform:scale(1)} } .brace-row.won .brace-bar::after { content: ''; position: absolute; inset: 0; border-radius: 8px; background: linear-gradient(100deg, transparent 18%, rgba(255,255,255,.6) 50%, transparent 82%); transform: translateX(-100%); animation: braceSheen 1200ms cubic-bezier(.3,0,.2,1) 140ms; } @keyframes braceSheen { to { transform: translateX(100%); } } .brace-play { padding: 6px 13px; border-radius: 20px; border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink-2); font-family: Inter, sans-serif; font-size: var(--t-2xs); font-weight: 800; cursor: pointer; transition: transform 0.08s, opacity 0.2s; flex-shrink: 0; } .brace-play:active { transform: scale(0.94); } .brace-play:disabled { opacity: 0.45; cursor: default; } .brace-foot { display: flex; align-items: center; gap: 11px; margin-top: 22px; } .brace-prog { position: relative; flex: 1; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; } /* Round boundaries marked on the track, so you can see which leg you're in. */ .brace-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--surface); opacity: .9; z-index: 1; } .brace-prog-fill { display: block; height: 100%; width: 0; border-radius: 2px; background: linear-gradient(90deg, var(--green) 0%, var(--gold) 100%); transition: width 200ms linear; } .brace-sub { font-family: 'DM Mono', monospace; font-size: var(--t-micro); color: var(--ink-4); white-space: nowrap; font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { .brace-row, .brace-bar, .brace-av, .brace-track { transition: none; } .brace-row.won .brace-av, .brace-row.won .brace-bar::after { animation: none; } } /* Single-round fallback: no movement to plot, so show the spread instead. */ .race-bars { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; } .race-bar-row { display: grid; grid-template-columns: 22px minmax(52px, 78px) 1fr auto; align-items: center; gap: 8px; } .race-bar-name { font-size: var(--t-xs); font-weight: 700; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .race-bar-name.me { color: var(--ink); font-weight: 900; } .race-bar-track { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; } .race-bar-fill { display: block; height: 100%; border-radius: 4px; transform-origin: left center; animation: raceBar 620ms cubic-bezier(.4,0,.2,1) both; } @keyframes raceBar { from { transform: scaleX(0); } to { transform: scaleX(1); } } .race-bar-val { font-family: 'DM Mono', monospace; font-size: var(--t-xs); font-weight: 500; color: var(--ink-2); white-space: nowrap; } .race-bar-gap { color: var(--ink-4); margin-left: 5px; font-size: var(--t-micro); } @media (prefers-reduced-motion: reduce) { .race-line, .race-dot, .race-bar-fill { animation: none; stroke-dashoffset: 0; opacity: 1; transform: none; } } /* The words. Two lines under the chart, not four paragraphs above it — a written report of a competition you played in is a thing people bounce off. */ .comp-report-cta { padding: 2px 16px 14px; } .comp-report { margin: 2px 14px 14px; padding: 14px 16px 12px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line); } .comp-report-headline { font-family: Fraunces, Georgia, serif; font-size: var(--t-md); font-weight: 600; color: var(--ink); line-height: 1.3; } .comp-report-line { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.55; margin: 7px 0 0; } .comp-report-needle { margin-top: 11px; padding: 9px 12px; border-radius: var(--r-md); background: var(--green-lt); color: var(--green-ink); font-size: var(--t-xs); font-weight: 600; line-height: 1.5; } .comp-report-actions { display: flex; gap: 8px; margin-top: 12px; } .comp-lb-cols { display:grid; grid-template-columns: 26px 1fr 56px 42px; gap:9px; padding: 0 16px 7px; border-bottom: 1px solid var(--line); } .comp-lb-col-label { font-size: var(--t-micro); font-weight: 800; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.12em; } .comp-lb-col-label:nth-child(3) { text-align:center; } .comp-lb-col-label:nth-child(4) { text-align:center; } .comp-lb-row { display:grid; grid-template-columns: 26px 1fr 56px 42px; gap:9px; align-items:center; padding: 12px 16px; border-bottom: 1px solid var(--line); } .comp-lb-row.me { background: var(--green-lt); box-shadow: inset 3px 0 0 var(--green); } .comp-lb-row:last-child { border-bottom: none; } .comp-lb-name { font-size: var(--t-sm); font-weight: 700; color: var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:center; gap:6px; } .comp-lb-you { flex-shrink:0; font-size:var(--t-micro); font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:var(--green-ink); background:var(--green-lt); border-radius:4px; padding:2px 5px; } .comp-lb-score { font-family:'DM Mono',monospace; font-size: var(--t-md); font-weight: 500; text-align:center; letter-spacing:-0.02em; } .comp-lb-score.under { color: var(--up); } .comp-lb-score.over { color: var(--ink); } .comp-lb-score.even { color: var(--ink-2); } .comp-lb-score.waiting { color: var(--ink-4); } /* Thru as a pill — green reads "still out there", muted reads "in the clubhouse" */ .comp-lb-thru { justify-self:center; font-family:'DM Mono',monospace; font-size: 10px; font-weight: 500; color: var(--ink-3); background:var(--surface-2); border-radius:20px; padding:3px 8px; min-width:30px; text-align:center; } .comp-lb-thru.live { color:var(--green-ink); background:var(--green-lt); } .comp-lb-btn { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:10px; border-radius: var(--r-md); border: 1.5px solid var(--gold); background: var(--gold-lt); color: var(--gold-ink); font-family: Inter, sans-serif; font-size: var(--t-sm); font-weight: 700; cursor:pointer; margin-top:10px; } .comp-banner { background: var(--green); color:#fff; border-radius: var(--r-md); padding: 10px 14px; font-size: var(--t-sm); font-weight: 700; margin-bottom: 10px; display:flex; align-items:center; justify-content:space-between; } /* Segmented format/basis pickers — same visual language as the profile handicap toggle */ .comp-seg { display:flex; gap:4px; padding:4px; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; } .comp-seg-btn { flex:1; padding:9px 0; border:none; background:transparent; border-radius:8px; cursor:pointer; font-family:Inter,sans-serif; font-size:var(--t-sm); font-weight:700; color:var(--ink-3); transition:background .18s,color .18s,box-shadow .18s,transform .08s; } .comp-seg-btn:active { transform:scale(0.97); } .comp-seg-btn.active { background:var(--surface); color:var(--green-mid); box-shadow:0 1px 3px rgba(0,0,0,.12); } /* Per-round course fields in the create wizard */ .comp-rnd-field { border:1px solid var(--line); border-radius:var(--r-md); padding:12px; margin-bottom:10px; background:var(--surface-2); } .comp-rnd-field-hd { font-size:var(--t-xs); font-weight:800; color:var(--green-mid); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:8px; } .comp-rnd-row { display:flex; gap:8px; } .comp-rnd-row .input { font-size:var(--t-sm); } /* Round list on the hub */ .comp-rnd { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 0; border-bottom:1px solid var(--line); } .comp-rnd:last-child { border-bottom:none; } .comp-rnd-info { min-width:0; flex:1; } .comp-rnd-name { font-size:var(--t-base); font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .comp-rnd-meta { font-size:var(--t-xs); color:var(--ink-3); margin-top:2px; } .comp-rnd-go { flex-shrink:0; padding:7px 13px; border-radius:var(--r-sm); border:1.5px solid var(--green); background:var(--green-lt); color:var(--green); font-family:Inter,sans-serif; font-size:var(--t-xs); font-weight:700; cursor:pointer; } .comp-rnd-go.done { border-color:var(--line-2); background:var(--surface-2); color:var(--ink-3); } .comp-rnd-done { flex-shrink:0; font-size:var(--t-md); font-weight:800; color:var(--green); padding:6px 4px; } /* Podium card shown once a competition is finished */ .comp-podium { background:var(--gold-lt); border:1.5px solid var(--gold); border-radius:var(--r-lg); padding:18px; text-align:center; margin-bottom:14px; } .comp-podium-label { font-size:var(--t-xs); font-weight:700; color:var(--gold); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:6px; } .comp-podium-name { font-size:var(--t-xl); font-weight:800; color:var(--ink); } .comp-podium-score { font-size:var(--t-md); font-weight:700; color:var(--gold); margin-top:2px; } .comp-podium-rest { font-size:var(--t-xs); color:var(--ink-3); margin-top:8px; } .comp-final-pos { font-size:var(--t-sm); font-weight:800; color:var(--ink-3); } .comp-final-pos.win { color:var(--gold); } .comp-rmv { flex-shrink:0; width:30px; height:30px; border-radius:50%; border:1.5px solid var(--line-2); background:transparent; color:var(--ink-4); font-size:12px; line-height:1; cursor:pointer; padding:0; } .comp-rmv:active { transform:scale(0.92); } .comp-player-status.entered { background: var(--surface-2); color: var(--ink-3); } .comp-player-status.withdrawn { background: var(--surface-2); color: var(--ink-4); } .comp-guest-tag { font-size:var(--t-2xs); font-weight:700; color:var(--ink-4); border:1px solid var(--line-2); border-radius:8px; padding:1px 6px; margin-left:6px; } /* ── GROUP LEAGUE TABLE ── */ .group-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; } .group-name { font-size: var(--t-2xl); font-weight: 800; color: var(--ink); } .group-invite { font-size: var(--t-xs); color: var(--ink-3); margin-top:2px; } .group-invite span { font-family:'DM Mono',monospace; font-weight:700; color:var(--green); letter-spacing:0.1em; } .league-table { background: var(--surface); border: var(--card-border); border-radius: var(--r-xl); box-shadow: var(--card-shadow); overflow:hidden; margin-bottom:var(--card-gap); } /* Position medallion — shared by the league table, the competition sheet and the live in-round board so a placing looks the same everywhere in the app. */ .lb-pos { width:26px; height:26px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; font-family:'DM Mono',monospace; font-size:var(--t-xs); font-weight:500; color:var(--ink-3); background:transparent; box-shadow:inset 0 0 0 1.5px var(--line); } .lb-pos.p1 { color:var(--m-gold); background:var(--m-gold-bg); box-shadow:inset 0 0 0 1.5px var(--m-gold); } .lb-pos.p2 { color:var(--m-silv); background:var(--m-silv-bg); box-shadow:inset 0 0 0 1.5px var(--m-silv); } .lb-pos.p3 { color:var(--m-bronze); background:var(--m-bronze-bg); box-shadow:inset 0 0 0 1.5px var(--m-bronze); } .lb-pos.none { box-shadow:none; color:var(--ink-4); } /* A league table ranks by ONE number. Six sort chips scrolled sideways and put five tiny competing figures next to one big one; the table now carries only what ranks a player, with the rest behind a tap. */ .lt-seg { display:flex; gap:4px; padding:4px; margin:14px 14px 4px; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; } .lt-seg-btn { flex:1; padding:9px 0; border:none; background:transparent; border-radius:8px; cursor:pointer; font-family:Inter,sans-serif; font-size:var(--t-sm); font-weight:700; color:var(--ink-3); transition:background .18s, color .18s, box-shadow .18s, transform .08s; } .lt-seg-btn:active { transform:scale(0.97); } .lt-seg-btn.active { background:var(--surface); color:var(--ink); box-shadow:var(--sh-sm); } .lt-row { display:grid; grid-template-columns:28px 1fr auto; gap:13px; align-items:center; padding:15px 16px; border-bottom:1px solid var(--line); cursor:pointer; -webkit-tap-highlight-color:transparent; } .lt-row:last-of-type { border-bottom:none; } .lt-row.lt-me { background:var(--green-lt); box-shadow:inset 3px 0 0 var(--green); } .lt-id { min-width:0; } .lt-nameline { display:flex; align-items:center; gap:7px; min-width:0; } .lt-name { font-size:var(--t-base); font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; letter-spacing:-0.01em; } .lt-you { flex-shrink:0; font-size:var(--t-micro); font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:var(--green-ink); background:var(--green-lt); border-radius:4px; padding:2px 5px; } .lt-sub { font-size:var(--t-2xs); color:var(--ink-3); margin-top:3px; } .lt-metric { display:flex; align-items:center; gap:9px; flex-shrink:0; } .lt-val { font-family:'DM Mono',monospace; font-size:var(--t-xl); font-weight:500; color:var(--ink); letter-spacing:-0.03em; text-align:right; font-variant-numeric:tabular-nums; } .lt-val.none { color:var(--ink-4); font-size:var(--t-lg); } .lt-trend { font-size:11px; width:11px; text-align:center; } .lt-trend.up { color:var(--up); } .lt-trend.dn { color:var(--dn); } .lt-trend.flat { color:var(--ink-4); } /* Progressive disclosure — the cut stats live here, one tap down. Toggled by a class rather than a re-render, so it can't trip the groupState rebuild. */ .lt-detail { display:none; padding:0 16px 15px 57px; border-bottom:1px solid var(--line); } .lt-detail.open { display:flex; gap:22px; } .lt-dstat-lbl { font-size:var(--t-micro); font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-3); } .lt-dstat-val { font-family:'DM Mono',monospace; font-size:var(--t-base); font-weight:500; color:var(--ink-2); margin-top:3px; } .lt-chev { font-size:10px; color:var(--ink-3); transition:transform .18s; } .lt-row.open .lt-chev { transform:rotate(180deg); } .group-section-title { font-size:var(--t-xs); font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:0.08em; margin:16px 0 8px; } .group-tabs { display:flex; border-bottom:2px solid var(--line); margin:0 0 16px; } .group-tab-btn { flex:1; background:none; border:none; padding:12px 0; font-size:var(--t-sm); font-weight:700; color:var(--ink-3); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:color .15s,border-color .15s,opacity .1s; letter-spacing:0; } .group-tab-btn:active { opacity:0.6; } .group-tab-btn.active { color:var(--green); border-bottom-color:var(--green); } .stats-tabs { display:flex; border-bottom:2px solid var(--line); margin:0 0 0; } .stats-tab-btn { flex:1; background:none; border:none; padding:12px 0; font-size:var(--t-sm); font-weight:700; color:var(--ink-3); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:color .15s,border-color .15s,opacity .1s; letter-spacing:0; } .stats-tab-btn:active { opacity:0.6; } .stats-tab-btn.active { color:var(--green); border-bottom-color:var(--green); } .feed-card { background:var(--card-bg); border:var(--card-border); border-radius:var(--card-radius); box-shadow:var(--card-shadow); padding:14px 16px; margin-bottom:var(--card-gap); } .feed-card-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; } .feed-avatar { width:38px; height:38px; border-radius:50%; background:var(--green); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:var(--t-base); color:#fff; flex-shrink:0; overflow:hidden; } .feed-avatar img { width:100%; height:100%; object-fit:cover; } .feed-photo { width:100%; max-height:260px; object-fit:cover; border-radius:var(--r-md); display:block; margin-bottom:10px; } .feed-meta { flex:1; } .feed-name { font-size:var(--t-sm); font-weight:700; color:var(--ink); } .feed-time { font-size:var(--t-2xs); color:var(--ink-3); margin-top:1px; } .feed-score-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap; } .feed-course { font-size:var(--t-sm); font-weight:600; color:var(--ink-2); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .feed-pill { font-size:var(--t-xs); font-weight:800; padding:3px 9px; border-radius:20px; white-space:nowrap; } .feed-pill.under { background:var(--up-bg); color:var(--up); } .feed-pill.over { background:var(--dn-bg); color:var(--dn); } .feed-pill.even { background:var(--surface-2); color:var(--ink-3); } .feed-pill.pb { background:var(--gold-mid); color:var(--gold); } .feed-highlights { font-size:var(--t-xs); color:var(--ink-3); margin-bottom:8px; } .feed-actions { display:flex; align-items:center; gap:12px; border-top:1px solid var(--line); padding-top:10px; margin-top:4px; } .feed-like-btn { background:none; border:none; cursor:pointer; display:flex; align-items:center; gap:5px; font-size:var(--t-xs); font-weight:700; color:var(--ink-3); padding:4px 0; transition:color .15s, transform .08s; } .feed-like-btn:active { transform:scale(0.9); } .feed-like-btn.liked { color:#ef5350; } .feed-like-btn svg { width:16px; height:16px; } .feed-comment-btn { background:none; border:none; cursor:pointer; display:flex; align-items:center; gap:5px; font-size:var(--t-xs); font-weight:700; color:var(--ink-3); padding:4px 0; } .feed-comments-section { border-top:1px solid var(--line); margin-top:10px; padding-top:10px; display:none; } .feed-comments-section.open { display:block; } .feed-comment-item { display:flex; gap:8px; margin-bottom:8px; align-items:flex-start; } .feed-comment-avatar { width:26px; height:26px; border-radius:50%; background:var(--green); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:#fff; flex-shrink:0; overflow:hidden; } .feed-comment-avatar img { width:100%; height:100%; object-fit:cover; } .feed-comment-bubble { background:var(--surface-2); border-radius:12px; padding:7px 11px; flex:1; } .feed-comment-name { font-size:var(--t-2xs); font-weight:700; color:var(--ink-3); margin-bottom:2px; } .feed-comment-text { font-size:var(--t-xs); color:var(--ink); line-height:1.4; } .feed-comment-input-row { display:flex; gap:8px; align-items:center; margin-top:8px; } .feed-comment-input { flex:1; background:var(--surface-2); border:1.5px solid var(--line-2); border-radius:20px; padding:8px 14px; font-size:var(--t-xs); color:var(--ink); outline:none; } .feed-comment-input:focus { border-color:var(--green); } .feed-comment-send-btn { background:var(--green); color:#fff; border:none; border-radius:50%; width:32px; height:32px; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; } /* Conditions chips — one-tap single-select per row (post-round sheet). */ .cond-group { margin-bottom: 18px; } .cond-label { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 9px; } .cond-row { display: flex; flex-wrap: wrap; gap: 8px; } .cond-chip { padding: 10px 16px; border-radius: 20px; background: var(--surface-2); border: 1.5px solid var(--line-2); color: var(--ink-2); font-family: 'Inter', sans-serif; font-size: var(--t-sm); font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .1s; } .cond-chip:active { transform: scale(0.96); } .cond-chip.sel { background: var(--gold-mid); border-color: var(--gold); color: var(--gold); font-weight: 700; } /* Exclude-from-stats toggle (log + edit forms) — a flat on/off switch */ .excl-toggle { display: flex; align-items: center; gap: 13px; cursor: pointer; padding: 13px 15px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: 12px; -webkit-tap-highlight-color: transparent; } .excl-toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .excl-sw { position: relative; flex-shrink: 0; width: 44px; height: 26px; border-radius: 999px; background: var(--line-2); transition: background .2s ease; } .excl-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform .2s ease; } .excl-toggle input:checked + .excl-sw { background: var(--gold); } .excl-toggle input:checked + .excl-sw::after { transform: translateX(18px); } .excl-toggle input:focus-visible + .excl-sw { outline: 2px solid var(--gold); outline-offset: 2px; } .excl-txt b { display: block; font-size: var(--t-sm); font-weight: 700; color: var(--ink); } .excl-txt small { display: block; font-size: var(--t-2xs); color: var(--ink-3); margin-top: 2px; line-height: 1.35; } /* "Excluded" marker in the round-history list */ .nine-badge.excl { color: var(--ink-3); background: var(--surface-2); border-color: var(--line-2); } .lt-sort-hint { font-size:var(--t-2xs); color:var(--ink-3); text-align:center; padding:6px 0 2px; } .lt-badge { display:inline-block; font-size:var(--t-2xs); font-weight:800; padding:2px 6px; border-radius:8px; margin-left:4px; vertical-align:middle; } .lt-badge.best { background:var(--gold-mid); color:var(--gold); } .group-pts-row { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--line); } .group-pts-row:last-child { border-bottom:none; } .group-pts-row.me { background:var(--green-lt); } .group-pts-name { font-size:var(--t-base); font-weight:700; color:var(--ink); } .group-pts-val { font-size:var(--t-lg); font-weight:800; color:var(--green); } /* ── PROFILE CARD ── */ .profile-card { background:var(--surface); border:var(--card-border); border-radius:var(--r-xl); box-shadow:var(--card-shadow); padding:14px 16px; display:flex; align-items:center; gap:14px; margin-bottom:var(--card-gap); cursor:pointer; } .profile-card:active { opacity:0.85; } .avatar-circle { width:54px; height:54px; border-radius:50%; background:linear-gradient(135deg,var(--green) 0%,#1a5c38 100%); display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; color:#fff; flex-shrink:0; overflow:hidden; position:relative; } .avatar-circle img { width:100%; height:100%; object-fit:cover; border-radius:50%; } .avatar-circle .avatar-edit { position:absolute; inset:0; background:rgba(0,0,0,.35); display:none; align-items:center; justify-content:center; font-size:16px; border-radius:50%; } .avatar-circle:hover .avatar-edit { display:flex; } .profile-info { flex:1; min-width:0; } .profile-nickname { font-size:var(--t-lg); font-weight:800; color:var(--ink); } .profile-hcp { font-size:var(--t-xs); color:var(--ink-3); margin-top:2px; } .profile-edit-hint { font-size:var(--t-2xs); color:var(--ink-3); margin-top:3px; } /* ── THEME TOGGLE (Appearance) ── */ .theme-toggle { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .theme-opt { display:flex; align-items:center; justify-content:center; gap:7px; padding:12px 10px; border-radius:var(--r-md); background:var(--surface-2); border:var(--card-border); font-family:'Inter',sans-serif; font-size:var(--t-sm); font-weight:700; color:var(--ink-3); cursor:pointer; transition:background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s; } .theme-opt svg { flex-shrink:0; } .theme-opt.active { background:var(--green-lt); border-color:rgba(35,154,94,.35); color:var(--green-mid); box-shadow:var(--sh-sm); } /* Quick-start card removed — replaced by the onboarding wizard (#onboard-screen) and the Home "Finish setup" card (.fs-card), both further down. */ /* ── EDIT PROFILE SHEET ── */ .profile-sheet-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:3000; align-items:flex-end; } .profile-sheet-overlay.open { display:flex; } .profile-sheet { background:var(--surface); border-radius:var(--r-xl) var(--r-xl) 0 0; width:100%; padding:0 0 40px; } .profile-sheet-handle { width:36px; height:4px; background:var(--line-2); border-radius:2px; margin:12px auto 0; } .profile-sheet-title { font-size:var(--t-lg); font-weight:800; color:var(--ink); padding:14px 18px 0; } .avatar-upload-area { display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px; } .avatar-upload-circle { width:80px; height:80px; border-radius:50%; background:linear-gradient(135deg,var(--green) 0%,#1a5c38 100%); display:flex; align-items:center; justify-content:center; font-size:32px; font-weight:800; color:#fff; overflow:hidden; cursor:pointer; border:3px dashed transparent; transition:border-color 0.2s; } .avatar-upload-circle:hover { border-color:var(--green); } .avatar-upload-circle img { width:100%; height:100%; object-fit:cover; } .avatar-upload-hint { font-size:var(--t-xs); color:var(--ink-3); } /* ── LIVE VIEWER ── */ .live-now-card { background:linear-gradient(135deg,var(--green) 0%,#1a5c38 100%); border-radius:var(--r-xl); padding:14px; margin-bottom:14px; color:#fff; } .live-now-title { font-size:var(--t-xs); font-weight:800; text-transform:uppercase; letter-spacing:0.1em; opacity:0.7; margin-bottom:8px; display:flex; align-items:center; gap:6px; } .live-dot { width:7px; height:7px; border-radius:50%; background:#ff4444; display:inline-block; animation:livepulse 1.2s ease-in-out infinite; } @keyframes livepulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(0.8)} } @keyframes reactionSlide { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} } .live-player-row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.15); } .live-player-row:last-child { border-bottom:none; } .live-player-name { font-size:var(--t-base); font-weight:700; } .live-player-meta { font-size:var(--t-xs); opacity:0.65; margin-top:2px; } .live-watch-btn { background:rgba(255,255,255,.2); border:1.5px solid rgba(255,255,255,.4); color:#fff; border-radius:20px; padding:6px 14px; font-size:var(--t-xs); font-weight:700; cursor:pointer; white-space:nowrap; } .live-watch-btn:active { background:rgba(255,255,255,.35); } .live-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:3000; flex-direction:column; } .live-overlay.open { display:flex; } .live-sheet { background:var(--surface); border-radius:var(--r-xl) var(--r-xl) 0 0; width:100%; max-height:92vh; overflow-y:auto; overscroll-behavior:contain; padding:0 0 100px; margin-top:auto; } .live-handle { width:36px; height:4px; background:var(--line-2); border-radius:2px; margin:12px auto 4px; } .live-header { display:flex; align-items:flex-start; justify-content:space-between; padding:12px 16px 10px; border-bottom:1px solid var(--line); } .live-header-info { flex:1; min-width:0; } .live-player-title { font-size:var(--t-lg); font-weight:800; color:var(--ink); } .live-course-title { font-size:var(--t-xs); color:var(--ink-3); margin-top:2px; } .live-score-badge { font-size:var(--t-2xl); font-weight:900; color:var(--green); } .live-score-badge.over { color:var(--dn); } .live-score-badge.even { color:var(--ink-2); } .live-hole-grid { display:grid; grid-template-columns:repeat(9,1fr); gap:3px; padding:12px 12px 4px; } .live-hole-cell { display:flex; flex-direction:column; align-items:center; gap:1px; } .live-hole-num { font-size:var(--t-2xs); color:var(--ink-4); font-weight:700; } .live-hole-score { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:var(--t-xs); font-weight:800; background:var(--surface-2); color:var(--ink-3); } .live-hole-score.eagle { background:#f0c040; color:#7a5800; border-radius:0; } .live-hole-score.birdie { background:var(--green); color:#fff; } .live-hole-score.par { background:var(--surface-2); color:var(--ink-2); } .live-hole-score.bogey { background:#fde8e8; color:var(--dn); border:1.5px solid var(--dn); border-radius:0; } .live-hole-score.double { background:var(--dn); color:#fff; border-radius:0; } .live-hole-score.snowman { background:#2d2d2d; color:#fff; border-radius:0; } .live-hole-score.current { border:2px dashed var(--green); animation:livepulse 1.2s infinite; } .live-reactions { padding:10px 14px 6px; border-top:1px solid var(--line); } .live-reactions-title { font-size:var(--t-xs); font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:0.07em; margin-bottom:8px; } .live-reaction-item { display:flex; align-items:flex-start; gap:8px; margin-bottom:8px; } .live-reaction-avatar { width:26px; height:26px; border-radius:50%; background:var(--green-lt); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:var(--green); flex-shrink:0; } .live-reaction-bubble { background:var(--surface-2); border-radius:0 12px 12px 12px; padding:6px 10px; flex:1; } .live-reaction-name { font-size:var(--t-2xs); font-weight:700; color:var(--ink-3); margin-bottom:2px; } .live-reaction-text { font-size:var(--t-sm); color:var(--ink); } .live-reaction-time { font-size:var(--t-micro); color:var(--ink-3); margin-top:2px; } .live-action-bar { position:fixed; bottom:0; left:0; right:0; background:var(--surface); border-top:1px solid var(--line); padding:10px 12px calc(10px + env(safe-area-inset-bottom)); display:none; gap:8px; z-index:3001; } .live-action-bar.open { display:flex; } .live-emoji-btn { background:var(--surface-2); border:none; border-radius:50%; width:40px; height:40px; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .live-emoji-btn:active { transform:scale(0.85); } .live-comment-input { flex:1; background:var(--surface-2); border:1.5px solid var(--line-2); border-radius:20px; padding:8px 14px; font-size:var(--t-sm); color:var(--ink); outline:none; font-family:inherit; } .live-comment-send { background:var(--green); color:#fff; border:none; border-radius:50%; width:36px; height:36px; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .fr-scorecard { background: var(--surface); border: var(--card-border); border-radius: var(--r-xl); overflow: hidden; margin: 14px 0; box-shadow: var(--sh-sm); } .fr-sc-subtabs { display: flex; border-bottom: 2px solid var(--line); margin: 12px 14px 12px; } .fr-sc-subtab { flex: 1; background: none; border: none; padding: 10px 0; font-family: 'Inter', sans-serif; font-size: var(--t-sm); font-weight: 700; color: var(--ink-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color 0.15s, border-color 0.15s; } .fr-sc-subtab.active { color: var(--green); border-bottom-color: var(--green); } /* Live leaderboard — net/Stableford standing among you + playing partners */ .fr-lb-row { display: grid; grid-template-columns: 26px 1fr 46px 54px; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: var(--t-xs); } .fr-lb-row:last-child { border-bottom: none; } /* Editorial micro-header, matching the scorecard — was a heavy green slab */ .fr-lb-row.header { background: var(--surface-2); color: var(--ink-3); font-family: Inter, sans-serif; font-weight: 800; font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; } .fr-lb-row.you { background: var(--green-lt); box-shadow: inset 3px 0 0 var(--green); } .fr-lb-name { font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fr-lb-thru { justify-self:center; font-family: 'DM Mono', monospace; color: var(--ink-3); font-size: 10px; background:var(--surface-2); border-radius:20px; padding:3px 8px; min-width:30px; text-align:center; } .fr-lb-thru.live { color:var(--green-ink); background:var(--green-lt); } .fr-lb-row.header .fr-lb-thru { background:none; padding:0; color:var(--ink-3); font-family:inherit; } .fr-lb-score { font-family: 'DM Mono', monospace; font-weight: 700; text-align: center; } .fr-lb-score.up { color: var(--up); } .fr-lb-score.dn { color: var(--dn); } .fr-lb-score.lead { color: var(--gold); } .fr-lb-row.header .fr-lb-name, .fr-lb-row.header .fr-lb-score { color: var(--ink-3); font-family: inherit; font-size: inherit; font-weight: inherit; } .fr-lb-empty { padding: 20px 16px; text-align: center; color: var(--ink-3); font-size: var(--t-xs); } /* Playing-partner score entry — monogram + name/meta on the left, stepper on the right; "Pick up" (Stableford only) is a quiet pill beneath the stepper */ .fr-pp-list { border-top: 1px solid var(--line); margin-top: 18px; } .fr-pp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); } .fr-pp-row:last-child { border-bottom: none; } .fr-pp-id { display: flex; align-items: center; gap: 11px; min-width: 0; } .fr-pp-mono { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--green-lt); border: 1px solid rgba(42,145,96,.28); color: var(--green-mid); font-family: 'DM Mono', monospace; font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.02em; } .fr-pp-name { min-width: 0; } .fr-pp-name-txt { font-size: var(--t-sm); font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fr-pp-meta { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.02em; margin-top: 2px; color: var(--ink-3); } .fr-pp-meta.pts { color: var(--gold); } .fr-pp-right { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex-shrink: 0; } .fr-pp-controls { display: flex; align-items: center; gap: 12px; } .fr-pp-btn { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--surface-2); font-family: 'Inter', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--ink-2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, border-color 0.15s, transform 0.1s, opacity 0.15s; flex-shrink: 0; } .fr-pp-btn:active { transform: scale(0.9); background: var(--green-lt); border-color: var(--green-mid); } .fr-pp-btn:disabled { opacity: 0.35; cursor: not-allowed; } .fr-pp-score { min-width: 26px; text-align: center; font-family: 'DM Mono', monospace; font-size: 1.3rem; font-weight: 800; color: var(--ink); } .fr-pp-score.eagle { color: var(--score-eagle); } .fr-pp-score.birdie { color: var(--score-birdie); } .fr-pp-score.bogey { color: var(--score-bogey); } .fr-pp-score.double, .fr-pp-score.worse { color: var(--score-double); } .fr-pp-score.pu { font-size: var(--t-sm); letter-spacing: 0.06em; color: var(--ink-4); font-weight: 800; } .fr-pp-pu-btn { padding: 4px 12px; border-radius: 20px; border: 1px solid var(--line-2); background: none; font-family: 'Inter', sans-serif; font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .fr-pp-pu-btn.active { background: var(--gold-mid); border-color: var(--gold); color: var(--gold); } .fr-sc-row { display: grid; grid-template-columns: 32px 28px 28px 1fr 34px; align-items: center; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: var(--t-xs); } .fr-sc-row:last-child { border-bottom: none; } .fr-sc-row.header { background: var(--surface-2); color: var(--ink-3); font-family: Inter, sans-serif; font-weight: 800; font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; } .fr-sc-row.active-row { background: var(--green-lt); } .fr-sc-row.done-row { color: var(--ink-2); } .fr-sc-cell { text-align: center; font-family: 'DM Mono', monospace; min-width: 0; } .fr-sc-cell.hole { color: var(--ink-3); font-size: var(--t-2xs); } .fr-sc-cell.score { font-weight: 700; font-size: var(--t-sm); } .fr-sc-cell.score.pu { color: var(--ink-4); font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.02em; } /* Header cells must not inherit the mono/grey styling used for data rows */ .fr-sc-row.header .fr-sc-cell, .fr-sc-row.header .fr-sc-cell.hole { color: var(--ink-3); font-family: inherit; font-size: inherit; font-weight: inherit; } /* Score badges — circle for birdie/eagle, square for bogey+, like a TV scorecard */ .sc-badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: 0 auto; line-height: 1; box-sizing: border-box; } .fr-sc-cell.score.eagle .sc-badge, .hsc-score.eagle .sc-badge { border-radius: 50%; border: 1.5px solid var(--score-eagle); color: var(--score-eagle); box-shadow: 0 0 0 2px var(--surface, #fff), 0 0 0 3.5px var(--score-eagle); } .fr-sc-cell.score.birdie .sc-badge, .hsc-score.birdie .sc-badge { border-radius: 50%; border: 1.5px solid var(--score-birdie); color: var(--score-birdie); } .fr-sc-cell.score.par .sc-badge, .hsc-score.par .sc-badge { color: var(--ink-2); } .fr-sc-cell.score.bogey .sc-badge, .hsc-score.bogey .sc-badge { border-radius: 3px; border: 1.5px solid var(--score-bogey); color: var(--score-bogey); } .fr-sc-cell.score.double .sc-badge, .fr-sc-cell.score.worse .sc-badge, .hsc-score.double .sc-badge, .hsc-score.worse .sc-badge { border-radius: 3px; border: 1.5px solid var(--score-double); color: var(--score-double); box-shadow: 0 0 0 2px var(--surface, #fff), 0 0 0 3.5px var(--score-double); } .fr-sc-row.active-row .score.eagle .sc-badge { box-shadow: 0 0 0 2px var(--green-lt), 0 0 0 3.5px var(--score-eagle); } .fr-sc-row.active-row .score.double .sc-badge, .fr-sc-row.active-row .score.worse .sc-badge { box-shadow: 0 0 0 2px var(--green-lt), 0 0 0 3.5px var(--score-double); } .fr-resume-banner { background: var(--gold-lt); border: 1px solid rgba(184,132,42,.3); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 14px; display: flex; align-items: center; gap: 12px; } .fr-resume-text { flex: 1; } .fr-resume-title { font-size: var(--t-base); font-weight: 700; color: var(--ink); } .fr-resume-sub { font-size: var(--t-xs); color: var(--ink-3); margin-top: 2px; } .fr-resume-btn { background: var(--gold); color: #fff; border: none; border-radius: 8px; padding: 8px 14px; font-family: 'Inter', sans-serif; font-size: var(--t-xs); font-weight: 700; cursor: pointer; transition: transform 0.08s, opacity 0.15s; } .fr-resume-btn:active { transform: scale(0.95); opacity: 0.9; } /* Advanced section collapse */ .advanced-section { overflow: hidden; max-height: 5000px; opacity: 1; transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.25s cubic-bezier(0.4,0,0.2,1), margin 0.35s cubic-bezier(0.4,0,0.2,1); } .advanced-section.collapsed { max-height: 0; opacity: 0; margin: 0; } .btn-detail-toggle { display: flex; align-items: center; gap: 6px; background: none; border: 1.5px solid var(--line-2); border-radius: 20px; padding: 7px 16px; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); cursor: pointer; margin: 4px auto 8px; } .btn-detail-toggle svg { transition: transform 0.25s ease; } .btn-detail-toggle.open svg { transform: rotate(180deg); } /* ── FORMS ── */ .form-card { background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); padding: 20px; margin-bottom: 12px; box-shadow: var(--card-shadow); } .form-title { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-mid); margin-bottom: 16px; padding-bottom: 10px; border-bottom: var(--card-border); } .fg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; } /* Side-by-side buttons in a form grid: the primary's usual bottom margin would leave the pair misaligned, so it's dropped inside the grid. */ .fg > .btn-primary, .fg > .btn-gold { margin-bottom: 0; } .ff { margin-bottom: 12px; } .field { display: flex; flex-direction: column; gap: 5px; } label { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); } .helper { font-size: var(--t-2xs); color: var(--ink-3); } .opt { font-weight: 400; color: var(--ink-3); text-transform: none; letter-spacing: 0; font-size: var(--t-2xs); } input, select { background: var(--surface-2); border: var(--card-border); border-radius: var(--r-sm); padding: 10px 12px; color: var(--ink); font-family: 'DM Mono', monospace; font-size: 16px; width: 100%; -webkit-appearance: none; outline: none; transition: border-color .2s, box-shadow .2s; } input:focus, select:focus { border-color: var(--green-mid); box-shadow: 0 0 0 3px var(--green-lt); } input::placeholder { color: var(--ink-4); } select option { background: var(--surface); color: var(--ink); } /* ── BUTTONS — hardware-accelerated micro-interactions ── */ .btn-primary { width: 100%; padding: 14px; background: var(--green); color: #fff; border: none; border-radius: var(--r-md); font-family: 'Inter', sans-serif; font-size: var(--t-sm); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; margin-bottom: 8px; box-shadow: 0 2px 8px rgba(21,61,42,.20); /* composite-only: transform + opacity */ transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform, opacity; } .btn-primary:hover { background: var(--green-mid); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(21,61,42,.28); } .btn-primary:active { transform: scale(0.97); opacity: .88; box-shadow: none; } .btn-primary:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; } .btn-secondary { width: 100%; padding: 11px; background: transparent; color: var(--ink-3); border: var(--card-border); border-radius: var(--r-md); font-family: 'Inter', sans-serif; font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .btn-secondary:hover { border-color: var(--ink-3); color: var(--ink); transform: translateY(-1px); } .btn-secondary:active { transform: scale(0.97); opacity: .8; } .btn-gold { width: 100%; padding: 14px; background: var(--gold); color: #fff; border: none; border-radius: var(--r-md); font-family: 'Inter', sans-serif; font-size: var(--t-sm); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; margin-bottom: 8px; box-shadow: 0 2px 8px rgba(184,132,42,.20); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform, opacity; } .btn-gold:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(184,132,42,.28); } .btn-gold:active { transform: scale(0.97); opacity: .82; box-shadow: none; } .btn-ghost { width: 100%; padding: 12px; background: transparent; border: none; font-family: 'Inter', sans-serif; font-size: var(--t-sm); font-weight: 600; color: var(--ink-3); cursor: pointer; border-radius: var(--r-md); transition: background 0.2s, color 0.2s; display: block; text-align: center; } .btn-ghost:hover { background: var(--surface-2); color: var(--ink); } .btn-ghost:active { opacity: 0.7; } .btn-ghost.danger { color: var(--dn); } .btn-ghost.danger:hover { background: var(--dn-bg); } .field-label { display: block; font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; } /* ── CONFIRM DIALOG — replaces native confirm() ── */ .confirm-overlay { position: fixed; inset: 0; background: rgba(8,18,12,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 9000; display: none; align-items: flex-end; justify-content: center; } .confirm-overlay.open { display: flex; animation: overlay-in 0.18s ease both; } .confirm-sheet { background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0; width: 100%; max-width: 600px; padding: 0 18px calc(32px + env(safe-area-inset-bottom)); animation: sheet-up 0.28s cubic-bezier(0.34,1.06,0.64,1) both; } .confirm-handle { width: 36px; height: 4px; background: var(--line-2); border-radius: 2px; margin: 12px auto 18px; } .confirm-title { font-size: var(--t-lg); font-weight: 800; color: var(--ink); margin-bottom: 6px; } .confirm-body { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.6; margin-bottom: 22px; } .confirm-actions { display: flex; flex-direction: column; gap: 8px; } .confirm-btn-danger { width: 100%; padding: 14px; background: #c93020; color: #fff; border: none; border-radius: var(--r-md); font-family: 'Inter', sans-serif; font-size: var(--t-sm); font-weight: 700; letter-spacing: 0.04em; cursor: pointer; transition: background 0.2s, transform 0.15s; } .confirm-btn-danger:active { transform: scale(0.97); background: #a82518; } /* ── FILTER PANEL TRANSITION ── */ .filter-panel { transition: max-height 0.32s cubic-bezier(0.4,0,0.2,1), opacity 0.25s cubic-bezier(0.4,0,0.2,1), padding 0.32s; overflow: hidden; max-height: 0; opacity: 0; padding: 0 14px; display: block !important; } .filter-panel.open { max-height: 400px; opacity: 1; padding: 12px 14px; } /* ── TOAST upgrade — with icon ── */ .toast { position: fixed; bottom: calc(90px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%) translateY(12px); background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 24px; font-size: var(--t-sm); font-weight: 600; box-shadow: 0 8px 28px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.16); opacity: 0; transition: opacity 0.22s, transform 0.22s; pointer-events: none; z-index: 9999; white-space: nowrap; max-width: calc(100vw - 32px); display: flex; align-items: center; gap: 8px; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast.success { background: #1a6b3a; } .toast.error { background: #c93020; } .toast.info { background: #1a5080; } /* ── FILTER PILLS — snap feedback ── */ .fpill { padding: 5px 11px; border-radius: 14px; font-size: var(--t-sm); font-weight: 600; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-3); cursor: pointer; transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .fpill:active { transform: scale(0.94); } .fpill.active { background: var(--green); border-color: var(--green); color: #fff; } /* ── HISTORY ITEMS — subtle lift ── */ .hist-item { background: var(--card-bg); border: var(--card-border); border-radius: var(--r-lg); padding: 16px; margin-bottom: 10px; box-shadow: var(--card-shadow); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } /* ── HISTORY COURSE FILTER ── */ .hist-filter { background: var(--card-bg); border: var(--card-border); border-radius: var(--r-lg); padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--card-shadow); } .hist-filter-row { display: flex; align-items: center; gap: 10px; } .hist-filter-label { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); flex-shrink: 0; } .hist-select-wrap { flex: 1; min-width: 0; position: relative; } .hist-select { width: 100%; background: var(--surface-2); border: var(--card-border); border-radius: var(--r-sm); padding: 8px 12px; font-size: var(--t-xs); font-family: 'Inter', sans-serif; color: var(--ink); -webkit-appearance: none; outline: none; transition: border-color 0.2s; cursor: pointer; } .hist-select:focus { border-color: var(--green-mid); box-shadow: 0 0 0 2px var(--green-lt); } .hist-filter-clear { background: none; border: none; color: var(--ink-3); font-size: 16px; cursor: pointer; min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; flex-shrink: 0; transition: color 0.2s, background 0.2s; line-height: 1; } .hist-filter-clear:hover { color: var(--dn); background: var(--dn-bg); } .hist-item:hover { transform: translateY(-1px); box-shadow: var(--sh-md); } .hist-item:active { transform: scale(0.98); box-shadow: var(--card-shadow); transition-duration: 0.08s; } .hist-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; gap: 12px; } .hist-course { font-size: var(--t-lg); font-weight: 800; color: var(--ink); } .hist-date { font-size: var(--t-sm); color: var(--ink-3); font-family: 'DM Mono', monospace; margin-top: 2px; } .hist-score-wrap { text-align: right; flex-shrink: 0; } .hist-score { font-size: var(--t-num-sm); font-weight: 900; font-family: 'DM Mono', monospace; line-height: 1; } .hist-nett { font-size: var(--t-sm); font-family: 'DM Mono', monospace; margin-top: 3px; color: var(--ink-3); } .hist-stats { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface-2); border: var(--card-border); border-radius: var(--r-md); overflow: hidden; margin-bottom: 10px; } .hs { text-align: center; padding: 8px 4px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); } .hs:nth-child(4n) { border-right: none; } .hs:nth-child(n+5) { border-bottom: none; } .hs-val { font-family: 'DM Mono', monospace; font-size: var(--t-md); font-weight: 600; color: var(--ink); } .hs-lbl { font-size: var(--t-2xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; } .hist-actions { display: flex; gap: 8px; } .hist-edit-btn, .hist-del-btn, .hist-story-btn { flex: 1; padding: 8px; background: var(--surface-2); border: var(--card-border); border-radius: var(--r-sm); color: var(--ink-3); font-size: var(--t-xs); font-weight: 600; cursor: pointer; text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .hist-story-btn { color: var(--gold); border-color: var(--gold-dim, #8a6c26); } .hist-edit-btn:hover { border-color: var(--green-mid); color: var(--green-mid); } .hist-del-btn:hover { border-color: var(--dn); color: var(--dn); } .hist-story-btn:hover { border-color: var(--gold); color: var(--gold); } .hist-edit-btn:active, .hist-del-btn:active, .hist-story-btn:active { transform: scale(0.95); opacity: .8; } .score-pb { color: var(--gold); } .score-good { color: var(--up); } .score-avg { color: var(--ink); } /* ── HANDICAP TAB ── */ .hcp-tracker-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .hcp-entry { background: var(--surface-2); border: var(--card-border); border-radius: var(--r-md); padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .hcp-entry:hover { transform: translateX(2px); } .hcp-entry-date { font-size: var(--t-xs); color: var(--ink-3); font-family: 'DM Mono', monospace; } .hcp-entry-notes { font-size: var(--t-sm); color: var(--ink-3); margin-top: 2px; } .hcp-entry-val { font-size: var(--t-num-sm); font-weight: 900; font-family: 'DM Mono', monospace; color: var(--gold); } /* ── ROUND DRILL-DOWN — bottom sheet ── */ @keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes sheet-down { from { transform: translateY(0); } to { transform: translateY(100%); } } .drill-overlay { position: fixed; inset: 0; background: rgba(8,18,12,.48); backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3); z-index: 190; display: none; animation: overlay-in 0.22s cubic-bezier(0.4,0,0.2,1) both; } .drill-overlay.open { display: block; } .drill-sheet { position: fixed; bottom: 0; left: 0; right: 0; max-height: 88vh; background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0; border-top: 1px solid rgba(255,255,255,.10); box-shadow: 0 -12px 48px rgba(0,0,0,.5), 0 -2px 8px rgba(0,0,0,.35); z-index: 191; display: none; flex-direction: column; overflow: hidden; will-change: transform; } .drill-sheet.open { display: flex; animation: sheet-up 0.32s cubic-bezier(0.34,1.06,0.64,1) both; } .drill-sheet.closing { animation: sheet-down 0.24s cubic-bezier(0.4,0,0.2,1) both; } /* ── SHEET CLOSE — one shared chip for every full-height sheet/overlay header (drill-down, head-to-head, live viewer, admin). Tokenised so it reads in both themes — the old per-sheet inline chips used white-alpha backgrounds that vanished on light surfaces. ── */ .sheet-close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 7px 12px; min-height: 32px; color: var(--ink-3); font-family: 'Inter', sans-serif; font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.04em; cursor: pointer; transition: background 0.2s, color 0.2s, transform 0.15s; } .sheet-close:active { transform: scale(0.94); } /* Drag handle */ .drill-handle { width: 36px; height: 4px; background: var(--line-2); border-radius: 2px; margin: 10px auto 0; flex-shrink: 0; cursor: pointer; } /* Sheet header */ .drill-header { padding: 14px 18px 12px; border-bottom: var(--card-border); flex-shrink: 0; } .drill-course { font-size: var(--t-xl); font-weight: 800; color: var(--ink); line-height: 1.2; margin-bottom: 2px; } .drill-meta { font-size: var(--t-xs); color: var(--ink-3); font-family: 'DM Mono', monospace; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .drill-meta-sep { color: var(--ink-4); } /* Scrollable body */ .drill-body { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 16px 18px calc(env(safe-area-inset-bottom) + 16px); flex: 1; } /* Score hero row inside sheet */ .drill-score-row { display: flex; gap: 10px; margin-bottom: 16px; } .drill-score-pill { flex: 1; background: var(--surface-2); border: var(--card-border); border-radius: var(--r-lg); padding: 12px 14px; text-align: center; } .drill-score-pill.accent { background: linear-gradient(135deg, #0f2d1a 0%, #1d6b48 100%); border-color: transparent; } .drill-score-pill.accent .dsp-val { color: #fff; } .drill-score-pill.accent .dsp-lbl { color: rgba(255,255,255,.6); } .drill-score-pill.accent .dsp-sub { color: rgba(255,255,255,.72); } .dsp-val { font-size: var(--t-3xl); font-weight: 900; font-family: 'DM Mono', monospace; color: var(--ink); line-height: 1; } .dsp-lbl { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; } .dsp-sub { font-size: var(--t-2xs); font-family: 'DM Mono', monospace; color: var(--ink-4); margin-top: 2px; } /* SG section */ .drill-section-title { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; margin-top: 16px; display: flex; align-items: center; gap: 8px; } .drill-section-title::after { content:''; flex:1; height:1px; background:var(--line); } /* Stat rows inside sheet */ .drill-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; } .drill-stat { background: var(--surface-2); border: var(--card-border); border-radius: var(--r-md); padding: 10px 12px; position: relative; overflow: hidden; } .drill-stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: var(--r-md) var(--r-md) 0 0; } .drill-stat.ds-good::before { background: var(--up); } .drill-stat.ds-bad::before { background: var(--dn); } .drill-stat.ds-neutral::before { background: var(--ink-4); } .drill-stat-label { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; } .drill-stat-val { font-size: var(--t-num-sm); font-weight: 800; font-family: 'DM Mono', monospace; color: var(--ink); line-height: 1; } .drill-stat-vs { font-size: var(--t-2xs); font-family: 'DM Mono', monospace; margin-top: 3px; line-height: 1.3; } .drill-stat-vs .vs-good { color: var(--up); } .drill-stat-vs .vs-bad { color: var(--dn); } .drill-stat-vs .vs-neu { color: var(--ink-3); } /* SG bar row */ .drill-sg-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .drill-sg-lbl { font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); width: 90px; flex-shrink: 0; } .drill-sg-track { flex: 1; background: var(--line); border-radius: 4px; height: 5px; position: relative; } .drill-sg-zero { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--line-2); } .drill-sg-fill { position: absolute; top: 0; bottom: 0; border-radius: 4px; transition: width 0.4s cubic-bezier(0.4,0,0.2,1); } .drill-sg-val { font-size: var(--t-sm); font-family: 'DM Mono', monospace; font-weight: 700; width: 38px; text-align: right; flex-shrink: 0; } /* Par breakdown inside sheet */ .drill-par-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .drill-par-lbl { font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); width: 38px; flex-shrink: 0; } .drill-par-track { flex:1; background: var(--line); border-radius:4px; height:6px; overflow:hidden; position:relative; } .drill-par-mid { position:absolute; top:0; bottom:0; left:50%; width:1px; background:var(--line-2); } .drill-par-fill { height:100%; border-radius:4px; } .drill-par-val { font-size: var(--t-xs); font-family:'DM Mono',monospace; width:30px; text-align:right; flex-shrink:0; color:var(--ink); } .drill-par-diff { font-size: var(--t-2xs); width:34px; text-align:right; flex-shrink:0; } /* Condition chips */ .drill-conditions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .drill-chip { font-size: var(--t-xs); font-family: 'DM Mono', monospace; background: var(--surface-2); border: var(--card-border); border-radius: 20px; padding: 4px 10px; color: var(--ink-2); } /* Performance bars — one diverging read per skill area, captioned with the real stat value (replaces the old bar + stat-card + context-chip triple) */ .drill-perf-row { display:flex; align-items:center; gap:12px; margin-bottom:11px; } .drill-perf-lbl { font-size:var(--t-xs); font-weight:600; color:var(--ink-2); width:86px; flex-shrink:0; } .drill-perf-track { flex:1; background:var(--line); border-radius:4px; height:6px; position:relative; } .drill-perf-zero { position:absolute; top:-2px; bottom:-2px; left:50%; width:1px; background:var(--line-2); } .drill-perf-fill { position:absolute; top:0; bottom:0; border-radius:4px; transition:width .5s cubic-bezier(.4,0,.2,1); } .drill-perf-val { font-size:var(--t-sm); font-family:'DM Mono',monospace; font-weight:700; color:var(--ink); width:44px; text-align:right; flex-shrink:0; } /* On-the-card count tiles — the tallies (birdies, doubles, 3-putts…) */ .drill-counts { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; } .drill-count { background:var(--surface-2); border:var(--card-border); border-radius:var(--r-md); padding:12px 6px 11px; text-align:center; } .drill-count-val { font-size:var(--t-xl); font-weight:800; font-family:'DM Mono',monospace; line-height:1; color:var(--ink); } .drill-count.good .drill-count-val { color:var(--up); } .drill-count.bad .drill-count-val { color:var(--dn); } .drill-count-lbl { font-size:var(--t-2xs); font-weight:700; letter-spacing:0.03em; text-transform:uppercase; color:var(--ink-4); margin-top:6px; } /* Small caption sitting just under a section title */ .drill-hint { font-size:var(--t-2xs); color:var(--ink-3); margin:-4px 0 9px; } /* Tap hint on history row */ .hist-tap-hint { font-size: var(--t-2xs); color: var(--ink-4); text-align: center; padding-top: 8px; letter-spacing: 0.04em; } /* ── ROUND STORY — hole-by-hole recap ── Deliberately dark in both themes (signature green canvas, same reasoning as the hero card): the story is the brand moment, and it must screenshot well. */ .story-overlay { position: fixed; inset: 0; z-index: 9450; display: none; background: #0a130d; color: #f2f6f3; flex-direction: column; overflow-y: auto; padding: calc(14px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom)); } .story-overlay.open { display: flex; } .story-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; max-width: 420px; margin: 0 auto; width: 100%; } .story-head-l { display: flex; align-items: baseline; gap: 10px; min-width: 0; } .story-title { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: var(--t-xl); color: #fff; } .story-count { font-family: 'DM Mono', monospace; font-size: var(--t-xs); color: #7f8f83; } .story-sub { font-size: var(--t-2xs); color: #7f8f83; max-width: 420px; margin: 2px auto 12px; width: 100%; } .story-card { max-width: 420px; margin: 0 auto; width: 100%; flex: 1; } .story-svg { width: 100%; display: block; border-radius: 14px; } .story-meta { display: flex; justify-content: space-between; align-items: center; margin: 12px 0 8px; } .story-par { font-size: var(--t-xs); color: #9fb0a4; } .story-score { font-family: 'DM Mono', monospace; font-size: var(--t-xs); border-radius: 9px; padding: 3px 10px; } .story-role { font-family: 'DM Mono', monospace; font-size: var(--t-2xs); letter-spacing: 0.09em; text-transform: uppercase; color: #d9a94b; margin: 4px 0 6px; } .story-ai { display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 6px; background: #22190c; border: 1px solid #6e5636; color: #cdb98c; font-size: 0.82em; letter-spacing: 0.06em; vertical-align: 1px; } .story-narrative { font-size: var(--t-sm); line-height: 1.55; color: #c9d4cb; margin: 0 0 12px; } .story-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; } .story-chip { font-size: var(--t-2xs); color: #9fb0a4; border: 1px solid #2b4433; border-radius: 8px; padding: 2px 8px; } .story-chip.gold { color: #ecd9a8; border-color: #8a6c26; } .story-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; max-width: 420px; margin: 0 auto 4px; width: 100%; } .story-nav-btn { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; background: rgba(255,255,255,.06); border: 1.5px solid #2b4433; color: #e9efe9; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.08s, background 0.15s; } .story-nav-btn:active { transform: scale(0.92); background: rgba(255,255,255,.12); } .story-nav-btn:disabled { opacity: .25; } .story-dots { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; flex: 1; } .story-dot { width: 6px; height: 6px; border-radius: 50%; background: #2b4433; } .story-dot.on { background: #d9a94b; } .story-close { flex-shrink: 0; background: rgba(255,255,255,.07); border: none; border-radius: 10px; padding: 7px 12px; color: #9fb0a4; font-size: var(--t-xs); font-weight: 700; cursor: pointer; } /* Round Story — intro / cold-open card */ .story-intro-eyebrow { font-family: 'DM Mono', monospace; font-size: var(--t-2xs); letter-spacing: 0.14em; text-transform: uppercase; color: #7f8f83; margin: 6px 0 2px; } .story-intro-head { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: var(--t-2xl); line-height: 1.25; color: #f3efe2; margin: 0 0 10px; } .story-intro-facts { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; } .story-intro-fact { font-size: var(--t-2xs); color: #cdb98c; background: #22190c; border: 1px solid #6e5636; border-radius: 8px; padding: 3px 9px; } .story-intro-fact.plain { color: #9fb0a4; background: transparent; border-color: #2b4433; } /* ── POST ROUND SUMMARY ── */ @keyframes prs-in { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } } .prs-overlay { position: fixed; inset: 0; background: var(--bg); z-index: 300; display: none; overflow-y: auto; -webkit-overflow-scrolling: touch; } .prs-overlay.open { display: block; animation: prs-in 0.3s cubic-bezier(0.4,0,0.2,1) both; } .prs-screen { max-width: 600px; margin: 0 auto; padding: 0 16px calc(env(safe-area-inset-bottom) + 24px); } .prs-header { padding: calc(env(safe-area-inset-top) + 18px) 4px 16px; text-align: center; } .prs-title { font-size: var(--t-2xl); font-weight: 800; color: var(--green); letter-spacing: -0.01em; } /* Score hero — reuses hero-card gradient styling */ .prs-hero { background: linear-gradient(135deg, #0f2d1a 0%, #1d6b48 100%); border-radius: var(--r-2xl); padding: 22px; margin-bottom: 14px; box-shadow: 0 8px 32px rgba(15,45,26,.28), 0 2px 8px rgba(15,45,26,.14); position: relative; overflow: hidden; color: white; text-align: center; } .prs-hero::before { content: ''; position: absolute; top: -80px; right: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(200,168,74,.18) 0%, transparent 70%); pointer-events: none; } .prs-hero-course { font-size: var(--t-xl); font-weight: 800; margin-bottom: 2px; position: relative; } .prs-hero-date { font-size: var(--t-xs); color: rgba(255,255,255,.55); font-family: 'DM Mono', monospace; margin-bottom: 16px; position: relative; } .prs-hero-score { font-size: var(--t-hero); font-weight: 900; font-family: 'DM Mono', monospace; line-height: 1; letter-spacing: -0.04em; position: relative; } .prs-hero-sub { font-size: var(--t-sm); color: rgba(255,255,255,.6); font-family: 'DM Mono', monospace; margin-top: 4px; position: relative; } .prs-hero-pb { display: inline-flex; align-items: center; gap: 5px; background: rgba(200,168,74,.2); border: 1px solid rgba(200,168,74,.35); border-radius: 20px; padding: 4px 12px; margin-top: 12px; font-size: var(--t-xs); color: #f0cc6a; font-family: 'DM Mono', monospace; position: relative; } /* Post-round photo prompt/preview */ .prs-photo-wrap { margin: 14px 0; } .prs-photo-add { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 16px; border: 1.5px dashed var(--line-2); border-radius: var(--r-lg); color: var(--ink-2); font-size: var(--t-sm); font-weight: 700; cursor: pointer; background: var(--surface-2); } .prs-photo-img { width: 100%; max-height: 320px; object-fit: cover; border-radius: var(--r-lg); display: block; } .prs-photo-change { display: block; text-align: center; margin-top: 6px; font-size: var(--t-xs); color: var(--ink-3); font-weight: 700; cursor: pointer; } /* Shot Quality ring card */ .prs-sq-card { background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); padding: 20px; margin-bottom: 14px; box-shadow: var(--card-shadow); display: flex; align-items: center; gap: 18px; } .prs-sq-ring-wrap { position: relative; width: 88px; height: 88px; flex-shrink: 0; } .prs-sq-ring-wrap svg { position: absolute; top: 0; left: 0; width: 88px; height: 88px; } .prs-sq-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .prs-sq-num { font-size: var(--t-2xl); font-weight: 900; font-family: 'DM Mono', monospace; color: var(--ink); line-height: 1; } .prs-sq-max { font-size: var(--t-2xs); color: var(--ink-3); font-family: 'DM Mono', monospace; } .prs-sq-info { flex: 1; min-width: 0; } .prs-sq-title { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; } .prs-sq-desc { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; } .prs-sq-desc strong { color: var(--ink); } /* Section cards */ .prs-section { background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); padding: 16px; margin-bottom: 12px; box-shadow: var(--card-shadow); } .prs-section-title { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .prs-section-title::after { content: ''; flex: 1; height: 1px; background: var(--line); } .prs-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2); } .prs-item:not(:last-child) { border-bottom: 1px solid var(--line); } .prs-item-icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; } .prs-item-icon.good { color: var(--up); } .prs-item-icon.warn { color: var(--dn); } .prs-item strong { color: var(--ink); } .prs-empty-note { font-size: var(--t-sm); color: var(--ink-3); font-style: italic; padding: 4px 0; } /* Comparison rows */ .prs-cmp-row { display: grid; grid-template-columns: 1fr 70px 70px 80px; align-items: center; padding: 8px 0; font-size: var(--t-xs); } .prs-cmp-row:not(:last-child) { border-bottom: 1px solid var(--line); } .prs-cmp-label { font-weight: 600; color: var(--ink-2); } .prs-cmp-val { font-family: 'DM Mono', monospace; font-weight: 700; color: var(--ink); text-align: right; } .prs-cmp-avg { font-family: 'DM Mono', monospace; color: var(--ink-3); text-align: right; } .prs-cmp-delta { font-family: 'DM Mono', monospace; font-weight: 700; text-align: right; } .prs-cmp-head { display: grid; grid-template-columns: 1fr 70px 70px 80px; padding-bottom: 8px; border-bottom: var(--card-border); margin-bottom: 4px; } .prs-cmp-head span { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); text-align: right; } .prs-cmp-head span:first-child { text-align: left; } /* Action buttons */ .prs-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; } .prs-btn-secondary-row { display: flex; gap: 8px; } .prs-btn-secondary-row .btn-secondary { flex: 1; } /* ── WELCOME / ONBOARDING (signed-out first impression) ── Deliberately dark in both themes — same signature green-gradient language as the hero card, so the first screen a new user sees is the brand at its best. Sits under the auth modal (z-150 < 200), which opens on top of it. */ #welcome-screen { position: fixed; inset: 0; z-index: 150; display: none; flex-direction: column; background: radial-gradient(120% 70% at 50% -10%, rgba(39,153,95,.32) 0%, transparent 60%), linear-gradient(165deg, #123a26 0%, #08100b 62%); color: #f2f6f3; overflow-y: auto; padding: calc(34px + env(safe-area-inset-top)) 26px calc(26px + env(safe-area-inset-bottom)); } .wel-inner { max-width: 420px; margin: auto; width: 100%; } .wel-brand { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 2.4rem; letter-spacing: -0.01em; color: #fff; text-align: center; } .wel-brand span { color: #d9a94b; } .wel-tagline { text-align: center; font-size: var(--t-base); color: rgba(242,246,243,.75); margin: 8px 0 38px; font-weight: 500; } .wel-feat { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 24px; } .wel-feat-icon { width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0; background: linear-gradient(150deg, rgba(39,153,95,.5) 0%, rgba(18,58,38,.7) 100%); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; color: #fff; } .wel-feat-icon svg { width: 22px; height: 22px; } .wel-feat-title { font-size: var(--t-sm); font-weight: 800; color: #fff; margin-bottom: 2px; } .wel-feat-sub { font-size: var(--t-xs); color: rgba(242,246,243,.62); line-height: 1.45; } .wel-ctas { margin-top: 40px; } .wel-btn-primary { display: block; width: 100%; padding: 15px; border: none; border-radius: 14px; background: #fff; color: #123a26; font-size: var(--t-base); font-weight: 800; cursor: pointer; transition: transform 0.08s, opacity 0.15s; } .wel-btn-primary:active { transform: scale(0.97); opacity: .9; } .wel-btn-ghost { display: block; width: 100%; padding: 14px; margin-top: 10px; background: transparent; border: 1.5px solid rgba(255,255,255,.25); border-radius: 14px; color: #fff; font-size: var(--t-sm); font-weight: 700; cursor: pointer; transition: transform 0.08s, background 0.15s; } .wel-btn-ghost:active { transform: scale(0.97); background: rgba(255,255,255,.08); } .wel-foot { text-align: center; margin-top: 26px; font-size: var(--t-2xs); color: rgba(242,246,243,.45); } .wel-foot a { color: rgba(242,246,243,.65); font-weight: 600; text-decoration: underline; } /* ── ONBOARDING WIZARD ── Shown once, straight after sign-up. Deliberately reuses the welcome screen's gradient, serif wordmark and gold accent: the old flow dropped from that dark premium first impression straight onto a plain white checklist, and the brand language died exactly where the user had just committed. Every step is skippable — anything skipped resurfaces in the Home "Finish setup" card rather than being silently lost. Sits above the welcome screen (150) but below the auth modal (200), which is always closed by the time this runs. */ #onboard-screen { position: fixed; inset: 0; z-index: 190; display: none; flex-direction: column; background: radial-gradient(120% 70% at 50% -10%, rgba(39,153,95,.32) 0%, transparent 60%), linear-gradient(165deg, #123a26 0%, #08100b 62%); color: #f2f6f3; overflow-y: auto; padding: calc(26px + env(safe-area-inset-top)) 26px calc(24px + env(safe-area-inset-bottom)); } .ob-inner { max-width: 420px; margin: auto; width: 100%; } .ob-top { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; } .ob-back { background: none; border: none; color: rgba(242,246,243,.65); font-size: 22px; cursor: pointer; padding: 2px 6px; line-height: 1; flex-shrink: 0; font-family: inherit; } .ob-back:disabled { opacity: 0; pointer-events: none; } .ob-bar { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; } .ob-bar-fill { height: 100%; border-radius: 3px; background: #d9a94b; transition: width .35s cubic-bezier(.4,0,.2,1); } .ob-count { font-size: var(--t-2xs); font-weight: 700; letter-spacing: .08em; color: rgba(242,246,243,.5); flex-shrink: 0; font-family: 'DM Mono', monospace; } .ob-step-title { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: var(--t-3xl); color: #fff; letter-spacing: -0.01em; line-height: 1.15; margin-bottom: 9px; } .ob-step-sub { font-size: var(--t-sm); color: rgba(242,246,243,.62); line-height: 1.5; margin-bottom: 26px; } .ob-input { width: 100%; padding: 15px 16px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.16); color: #fff; font-family: inherit; font-size: var(--t-base); font-weight: 600; outline: none; transition: border-color .18s, background .18s; } .ob-input::placeholder { color: rgba(242,246,243,.33); font-weight: 500; } .ob-input:focus { border-color: #d9a94b; background: rgba(255,255,255,.10); } .ob-ctas { margin-top: 30px; } .ob-btn-primary { display: block; width: 100%; padding: 15px; border: none; border-radius: 14px; background: #fff; color: #123a26; font-family: inherit; font-size: var(--t-base); font-weight: 800; cursor: pointer; transition: transform .08s, opacity .15s; } .ob-btn-primary:active { transform: scale(0.97); opacity: .9; } .ob-btn-primary:disabled { opacity: .4; cursor: default; transform: none; } .ob-btn-skip { display: block; width: 100%; padding: 13px; margin-top: 8px; background: none; border: none; color: rgba(242,246,243,.55); font-family: inherit; font-size: var(--t-sm); font-weight: 700; cursor: pointer; } .ob-btn-skip:active { color: #fff; } .ob-avatar-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; } .ob-avatar { width: 112px; height: 112px; border-radius: 50%; cursor: pointer; overflow: hidden; background: linear-gradient(150deg, rgba(39,153,95,.55) 0%, rgba(18,58,38,.75) 100%); border: 1.5px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 24px rgba(0,0,0,.30); display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 800; color: #fff; } .ob-avatar img { width: 100%; height: 100%; object-fit: cover; } .ob-avatar-hint { font-size: var(--t-xs); color: rgba(242,246,243,.5); } .ob-seg { display: flex; gap: 8px; margin-bottom: 16px; } .ob-seg-btn { flex: 1; padding: 12px; border-radius: 12px; cursor: pointer; font-family: inherit; background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.16); color: rgba(242,246,243,.7); font-size: var(--t-sm); font-weight: 700; transition: background .18s, color .18s, border-color .18s; } .ob-seg-btn.active { background: #fff; border-color: #fff; color: #123a26; } .ob-note { font-size: var(--t-xs); color: rgba(242,246,243,.5); line-height: 1.5; } .ob-done-mark { width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 22px; background: linear-gradient(150deg, #2b9a63, #14663f); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(20,102,63,.45); } .ob-done-mark svg { width: 32px; height: 32px; color: #fff; } .ob-recap { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); border-radius: 14px; padding: 2px 14px; margin-bottom: 26px; } .ob-recap-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; font-size: var(--t-sm); border-bottom: 1px solid rgba(255,255,255,.07); } .ob-recap-row:last-child { border-bottom: none; } .ob-recap-ico { width: 19px; height: 19px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; } .ob-recap-ico.on { background: #2b9a63; color: #fff; } .ob-recap-ico.off { background: rgba(255,255,255,.10); color: rgba(242,246,243,.4); } .ob-recap-label { color: rgba(242,246,243,.85); } .ob-recap-val { margin-left: auto; color: rgba(242,246,243,.5); font-size: var(--t-xs); } /* ── FINISH SETUP CARD (Home) ── The wizard's leftovers. Unlike the old .qs-card this renders whatever the round count is — that card was gated on `rounds.length === 0`, so logging a round before setting a nickname wiped the remaining prompts permanently. */ .fs-card { position: relative; overflow: hidden; background: linear-gradient(160deg, #153f2a 0%, #0b1a12 100%); border: 1px solid rgba(255,255,255,.09); border-radius: var(--r-xl); box-shadow: var(--card-shadow); padding: 17px 17px 6px; margin-bottom: var(--card-gap); } .fs-head { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; } .fs-ring { width: 44px; height: 44px; flex-shrink: 0; position: relative; } .fs-ring svg { width: 44px; height: 44px; transform: rotate(-90deg); } .fs-ring-txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--t-2xs); font-weight: 800; color: #fff; font-family: 'DM Mono', monospace; } .fs-title { font-size: var(--t-base); font-weight: 800; color: #fff; } .fs-sub { font-size: var(--t-xs); color: rgba(242,246,243,.55); margin-top: 2px; } .fs-dismiss { margin-left: auto; background: none; border: none; color: rgba(242,246,243,.4); font-size: 17px; cursor: pointer; padding: 2px 4px; line-height: 1; flex-shrink: 0; font-family: inherit; } .fs-item { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.07); cursor: pointer; } .fs-item-ico { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.10); display: flex; align-items: center; justify-content: center; color: #d9a94b; } .fs-item-ico svg { width: 15px; height: 15px; } .fs-item-label { font-size: var(--t-sm); font-weight: 700; color: #fff; } .fs-item-sub { font-size: var(--t-xs); color: rgba(242,246,243,.5); margin-top: 1px; } .fs-item-go { margin-left: auto; color: rgba(242,246,243,.32); flex-shrink: 0; font-size: 17px; } .fs-foot { padding: 9px 0 7px; text-align: center; } .fs-foot button { background: none; border: none; color: rgba(242,246,243,.45); font-family: inherit; font-size: var(--t-xs); font-weight: 700; cursor: pointer; } /* ── MODAL — native iOS/Android sheet aesthetic ── */ @keyframes sheet-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } } .modal-overlay { position: fixed; inset: 0; background: rgba(8,18,12,.55); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); z-index: 200; display: none; overflow-y: auto; overscroll-behavior: contain; padding: 24px 14px; will-change: opacity; } .modal-overlay.open { display: block; animation: overlay-in 0.22s cubic-bezier(0.4, 0, 0.2, 1) both; } .modal { background: rgba(26,36,29,0.92); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); border: 1px solid rgba(255,255,255,.10); border-radius: var(--card-radius); padding: 20px; max-width: 480px; margin: 0 auto; box-shadow: 0 24px 64px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06); animation: sheet-in 0.28s cubic-bezier(0.34, 1.1, 0.64, 1) both; will-change: transform, opacity; } .modal-title { font-size: var(--t-lg); font-weight: 800; color: var(--ink); margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .modal-close { background: rgba(255,255,255,.07); border: none; color: var(--ink-3); font-size: 16px; cursor: pointer; line-height: 1; min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .modal-close:hover { background: rgba(255,255,255,.14); color: var(--ink); } .modal-close:active { transform: scale(0.9); } /* ── SETUP CARD ── */ .setup-card { background: var(--card-bg); border: var(--card-border); border-top: 2px solid var(--gold); border-radius: var(--card-radius); padding: 20px; margin-bottom: var(--card-gap); box-shadow: var(--card-shadow); } .setup-card h3 { color: var(--gold); font-size: var(--t-md); font-weight: 700; margin-bottom: 12px; } .setup-card ol { padding-left: 18px; color: var(--ink-2); font-size: var(--t-xs); line-height: 2; } .setup-card ol li code { font-family: 'DM Mono', monospace; font-size: var(--t-2xs); background: var(--gold-lt); color: var(--gold); padding: 1px 5px; border-radius: 4px; } .url-row { display: flex; gap: 8px; margin-top: 14px; } .url-row input { flex: 1; background: var(--surface-2); border: var(--card-border); border-radius: var(--r-sm); padding: 10px 12px; color: var(--ink); font-family: 'DM Mono', monospace; font-size: var(--t-xs); outline: none; } .url-row input:focus { border-color: var(--green-mid); } .url-row button { padding: 10px 16px; background: var(--green); color: #fff; border: none; border-radius: var(--r-sm); font-weight: 700; font-size: var(--t-xs); cursor: pointer; white-space: nowrap; } /* ── UPDATE CARD ── */ .update-card { background: var(--surface-2); border: var(--card-border); border-radius: var(--r-lg); padding: 16px; margin-bottom: var(--card-gap); } .update-card h3 { color: var(--up); font-size: var(--t-xs); font-weight: 700; margin-bottom: 12px; } .update-step { background: var(--card-bg); border: var(--card-border); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 8px; } .update-step-title { font-size: var(--t-xs); font-weight: 700; color: var(--ink); margin-bottom: 4px; } .update-step-desc { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.6; } .update-step-desc code { font-family: 'DM Mono', monospace; color: var(--gold); background: var(--gold-lt); padding: 1px 4px; border-radius: 3px; font-size: var(--t-2xs); } /* ── EMPTY / LOADING ── */ .empty { text-align: center; padding: 60px 20px 40px; color: var(--ink-3); } .empty .ei { width:52px; height:52px; margin:0 auto 18px; opacity:.2; display:block; stroke:var(--ink-2); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; } .empty p { font-size: var(--t-xl); margin-bottom: 6px; font-weight: 700; color: var(--ink-2); } .empty small { font-size: var(--t-sm); color: var(--ink-4); line-height: 1.6; display:block; margin-bottom: 20px; } .empty .empty-cta { display:inline-flex; align-items:center; gap:6px; background:var(--green); color:#fff; border:none; border-radius:var(--r-md); padding:11px 22px; font-family:Inter,sans-serif; font-size:var(--t-sm); font-weight:700; letter-spacing:0.04em; cursor:pointer; transition:transform .2s,box-shadow .2s; box-shadow:0 2px 8px rgba(21,61,42,.22); } .empty .empty-cta:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(21,61,42,.28); } .empty .empty-cta:active { transform:scale(0.97); box-shadow:0 2px 8px rgba(21,61,42,.22); } .loading { text-align: center; padding: 60px 20px; color: var(--ink-3); } .spinner { width: 28px; height: 28px; border: 2.5px solid var(--line); border-top-color: var(--gold); border-radius: 50%; animation: spin .7s linear infinite; margin: 0 auto 14px; } @keyframes spin { to { transform: rotate(360deg); } } .no-rounds { text-align: center; padding: 40px 20px; color: var(--ink-3); font-size: var(--t-md); } /* ── SELECT AFFORDANCE — -webkit-appearance:none strips the native arrow, so every dropdown gets a hairline chevron back (mid-grey reads in both themes). Listed with the class-level rules so the cascade beats their `background:` shorthand, which would otherwise wipe the image. ── */ select, .filter-select-wrap select, .hist-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2378877e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; } /* ── TOUCH DEVICES — hover states stick after a tap on touchscreens, leaving buttons "raised" or recoloured until the next tap. Keep hover feedback for real pointers only; :active handles touch. ── */ @media (hover: none) { .btn-primary:hover { background: var(--green); transform: none; box-shadow: 0 2px 8px rgba(21,61,42,.20); } .btn-secondary:hover { border: var(--card-border); color: var(--ink-3); transform: none; } .btn-gold:hover { transform: none; box-shadow: 0 2px 8px rgba(184,132,42,.20); } .empty .empty-cta:hover { transform: none; box-shadow: 0 2px 8px rgba(21,61,42,.22); } .hist-item:hover { transform: none; box-shadow: var(--card-shadow); } .hcp-entry:hover { transform: none; } .nav-play-wrap:hover .nav-play-btn { transform: none; box-shadow: 0 8px 22px rgba(35,154,94,.45), 0 2px 8px rgba(0,0,0,.35); } .hist-edit-btn:hover, .hist-del-btn:hover { border: var(--card-border); color: var(--ink-3); } .hist-story-btn:hover { border-color: var(--gold-dim, #8a6c26); color: var(--gold); } .filter-clear-btn:hover { color: var(--ink-3); border-color: var(--line-2); } .hist-filter-clear:hover, .drb-clear:hover { color: var(--ink-3); background: none; } .filter-toggle-row:hover { background: var(--card-bg); } .stt-row:hover, .rec-row:hover { background: transparent; } } /* ── THIN SCROLLBARS — inner scroll areas keep a hairline bar on desktop instead of the heavy native gutter. ── */ .t100-list, .ms-pop-list, .drill-body, .comp-lb-sheet, .live-sheet, .course-dropdown { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; } /* ── REDUCED MOTION — remove all transform animations ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } @media (max-width: 400px) { .bottom-nav { padding: 0 2px; } .nav-btn { padding: 5px 2px; } .nav-btn svg { width: 18px; height: 18px; } }