:where([data-vertical="club"], [data-vertical="club"] *) { --fb-ground: var(--sand, #f2e8d5); --fb-ground-alt: color-mix(in srgb, var(--pine, #0d4527) 5%, var(--cream, #fbf6ec)); --fb-ink: var(--ink, #22333b); --fb-muted: color-mix(in srgb, var(--ink, #22333b) 86%, transparent); --fb-accent: var(--accent, #c68a34); --fb-accent-ink: var(--accent-ink, #8a5a17); --fb-surface: #fff; --fb-line: color-mix(in srgb, var(--navy, #102c3d) 14%, transparent); --fb-accent-fill: var(--accent, #c68a34); --fb-on-accent: var(--onAccent, #10222c); } :where([data-vertical="club"]) { --fb-section-space: clamp(3rem, 6vw, 4.8rem); --fb-head-space: 2.4rem; --fb-head-align: center; --fb-head-inset: auto; --fb-title-size: var(--text-2xl); --fb-eyebrow-size: 0.92rem; --fb-eyebrow-tracking: 0.12em; --fb-eyebrow-face: var(--font-display); --fb-surface-radius: 10px; --fb-surface-edge: 1px; --fb-surface-lift: none; --fb-panel-radius: 10px; --fb-list-columns: 1; --fb-list-measure: 800px; } @media (max-width: 640px) { :where([data-vertical="club"]) { --fb-section-space: 2.6rem; --fb-head-space: 1.6rem; } }
body[data-vertical="club"] .lg-helm :focus-visible { outline-color: var(--sky, var(--gold, #dca24a)); } body[data-vertical="club"] .lg-helm--inline, body[data-vertical="club"] #helm { scroll-margin-top: 88px; } .lg-helm .lg-burgee polygon:first-child { fill: var(--foam, #dce9ea); } .lg-helm .lg-eyebrow { color: var(--sky, var(--accent, #c68a34)); } .lg-helm { background: var(--navy, #102c3d); color: var(--foam, #dce9ea); } .lg-helm .lg-head h2, body[data-vertical="club"] .lg-helm-title { color: #fff; } body[data-vertical="club"] .lg-helm-title { font-size: var(--text-xl); } .lg-helm--inline { margin-top: var(--space-7); padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 3vw, 2.4rem); border-radius: 18px; } .lg-helm--inline .lg-head { margin-bottom: 1.6rem; } .lg-helm .lg-sub { color: color-mix(in srgb, var(--foam, #dce9ea) 88%, white); } .lg-game { max-width: 880px; margin: 0 auto; background: var(--navy2, #0b2230); border: 1px solid color-mix(in srgb, var(--foam, #dce9ea) 14%, transparent); border-radius: var(--radius-xl); overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); } .lg-game-bar { display: flex; align-items: center; gap: 0.6rem 1.2rem; flex-wrap: wrap; padding: 0.7rem var(--space-4); background: rgba(0, 0, 0, 0.25); color: var(--foam, #dce9ea); font-size: 0.82rem; } .lg-game-title { font-family: var(--font-display, inherit); font-weight: 800; color: #fff; margin-right: auto; } .lg-game-stat { color: color-mix(in srgb, var(--foam, #dce9ea) 82%, white); } .lg-game-stat b { color: var(--sky, var(--accent, #c68a34)); font-family: var(--font-display, inherit); } .lg-game-stage { position: relative; width: 100%; aspect-ratio: 16 / 10; background: #0c3b58; } .lg-game-over { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem; text-align: center; padding: var(--space-4); background: rgba(6, 20, 30, 0.72); backdrop-filter: blur(2px); color: var(--foam, #dce9ea); } .lg-game-over strong { font-family: var(--font-display, inherit); font-size: clamp(1.3rem, 4vw, 1.7rem); color: #fff; } .lg-game-over span { font-size: 0.95rem; color: color-mix(in srgb, var(--foam, #dce9ea) 90%, white); } .lg-game-over .lg-btn { margin-top: 0.4rem; } .lg-game-note { position: absolute; left: 50%; bottom: 0.7rem; transform: translateX(-50%); max-width: 92%; text-align: center; font-size: 0.8rem; color: var(--foam, #dce9ea); background: rgba(6, 20, 30, 0.55); padding: 0.4rem 0.85rem; border-radius: var(--radius-md); pointer-events: none; } .lg-game-canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; } .lg-game-canvas--live { touch-action: none; } .lg-game-controls { display: flex; align-items: center; justify-content: center; gap: var(--space-4); flex-wrap: wrap; padding: 0.8rem var(--space-4); background: rgba(0, 0, 0, 0.2); } .lg-game-btn { font-family: var(--font-display, inherit); font-weight: 700; font-size: var(--text-sm); padding: 0.6rem var(--space-4); border-radius: var(--radius-md); border: 1.5px solid color-mix(in srgb, var(--foam, #dce9ea) 30%, transparent); background: rgba(255, 255, 255, 0.06); color: var(--foam, #dce9ea); cursor: pointer; user-select: none; touch-action: none; } .lg-game-btn:hover { border-color: var(--sky, var(--accent, #c68a34)); } .lg-game-btn--go { background: var(--sky, var(--accent, #c68a34)); color: var(--navy2, #10222c); border-color: var(--sky, var(--accent, #c68a34)); } .lg-game-hint { max-width: 880px; margin: var(--space-4) auto 0; text-align: center; font-size: 0.86rem; color: color-mix(in srgb, var(--foam, #dce9ea) 82%, white); } .lg-game-hint--above { max-width: 72ch; margin: 0 auto 1.4rem; font-size: 0.98rem; line-height: 1.65; color: color-mix(in srgb, var(--foam, #dce9ea) 92%, white); } @media (max-width: 640px) { .lg-game-controls { justify-content: center; } .lg-helm--inline { padding-inline: 0.6rem; border-radius: var(--radius-lg); } .lg-game-hint--above { font-size: var(--text-sm); margin-bottom: var(--space-4); } } @media (max-width: 640px), (pointer: coarse) and (max-height: 500px) { body[data-vertical="club"] [data-lg-no-phone], body[data-vertical="club"]:has(#helm[data-lg-no-phone]) a[href="#helm"] { display: none; } }