/* ============================================================================= 1891 Arena — Interactive sport demos ============================================================================ Components used on every /arena/sports// page (and the home wedge): .demo-frame wraps any inline demo; gives it the "live thing" chrome .scoreboard big-number score sim (server/receiver, side-out, undo) .stat-line per-player stat row that ticks with the score sim .court-board court assignment board ("you're on court 3 next") .bracket-svg interactive SVG bracket — hover/click matches .shuffler tap-to-reseed; animates pool → bracket assignment .vantage three-tab Director / Player / Public-scoreboard view All demo state lives in JS (assets/js/sport-demos.js). This file is theme-aware: each sport sets data-accent on and the demos pick up that sport's accent automatically. ============================================================================= */ /* ── Accent resolver ──────────────────────────────────────────────── Reads from body[data-accent] (set by the per-sport page) so every demo inherits the right green/pink/purple/cyan without duplicating selectors below. */ :root[data-project="arena"] { --demo-accent: var(--sport-acid); --demo-accent-soft: var(--sport-acid-soft); --demo-accent-ink: var(--sport-acid-ink); --demo-ring: rgba(15, 184, 106, 0.18); } body[data-accent="acid"] { --demo-accent: var(--sport-acid); --demo-accent-soft: var(--sport-acid-soft); --demo-accent-ink: var(--sport-acid-ink); --demo-ring: rgba(15,184,106,0.18); } body[data-accent="plasma"] { --demo-accent: var(--sport-plasma); --demo-accent-soft: var(--sport-plasma-soft); --demo-accent-ink: var(--sport-plasma-ink); --demo-ring: rgba(255,61,166,0.18); } body[data-accent="glow"] { --demo-accent: var(--sport-glow); --demo-accent-soft: var(--sport-glow-soft); --demo-accent-ink: var(--sport-glow-ink); --demo-ring: rgba(139,61,243,0.18); } /* ── Demo frame ─────────────────────────────────────────────────── */ .demo-frame { position: relative; border-radius: 18px; background: var(--c-paper); border: 1px solid var(--c-line); box-shadow: 0 18px 40px -28px rgba(20, 12, 6, 0.30); overflow: hidden; isolation: isolate; transition: box-shadow 240ms var(--c-ease-out), transform 240ms var(--c-ease-out); } .demo-frame:hover { box-shadow: 0 22px 48px -22px rgba(20, 12, 6, 0.35); } .demo-frame__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: var(--c-paper-warm); border-bottom: 1px solid var(--c-line); flex-wrap: wrap; } .demo-frame__title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-ink-soft); display: inline-flex; align-items: center; gap: 8px; } .demo-frame__title::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--demo-accent); box-shadow: 0 0 0 4px var(--demo-ring); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 4px var(--demo-ring); } 50% { box-shadow: 0 0 0 8px transparent; } } .demo-frame__hint { font-size: 0.8rem; color: var(--c-fog); font-family: var(--c-font-mono); } .demo-frame__body { padding: var(--c-space-5); } .demo-frame__caption { padding: 10px 18px 14px; font-size: 0.85rem; color: var(--c-ink-soft); border-top: 1px dashed var(--c-line); background: linear-gradient(180deg, transparent 0%, var(--c-paper-warm) 100%); } /* ── Scoreboard (big-number live score sim) ─────────────────────── */ .scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 14px; background: #0d0a07; border-radius: 14px; padding: var(--c-space-5); color: #ffe1a8; font-family: var(--c-font-mono); position: relative; overflow: hidden; } .scoreboard::after { /* CRT scanline — pure CSS, no images */ content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(255,255,255,0.018) 0 2px, transparent 2px 4px); } .scoreboard__side { display: grid; gap: 6px; text-align: center; padding: 12px 6px; border-radius: 10px; position: relative; cursor: pointer; user-select: none; transition: background 180ms ease, transform 160ms ease; } .scoreboard__side:hover { background: rgba(244, 163, 0, 0.06); transform: translateY(-1px); } .scoreboard__side[aria-pressed="true"]::before { content: "● SERVING"; position: absolute; top: -2px; left: 50%; transform: translateX(-50%); font-size: 9px; letter-spacing: 0.18em; color: var(--demo-accent); animation: blink 1.2s ease-in-out infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .scoreboard__team { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em; color: #d3a35a; margin-top: 14px; } .scoreboard__big { font-size: clamp(3rem, 9vw, 6rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: #ffe1a8; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(244, 163, 0, 0.45); transition: transform 240ms var(--c-ease-out), color 240ms ease; } .scoreboard__big.bumped { transform: scale(1.18); color: #fff7d6; } .scoreboard__divider { display: grid; align-items: center; justify-items: center; font-size: 0.7rem; color: #6e5c3c; letter-spacing: 0.2em; text-transform: uppercase; } .scoreboard__divider span:first-child { font-size: 2.4rem; color: #2c2418; line-height: 1; } .scoreboard__caption { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; margin-top: 6px; padding-top: 10px; border-top: 1px solid rgba(244, 163, 0, 0.18); font-size: 0.72rem; letter-spacing: 0.1em; color: #b69160; } .scoreboard__caption code { color: #ffe1a8; } .score-controls { display: flex; gap: 8px; flex-wrap: wrap; margin-top: var(--c-space-4); align-items: center; } .score-controls__hint { flex: 1; font-size: 0.8rem; color: var(--c-ink-soft); } .score-btn { appearance: none; border: 1px solid var(--c-line); background: var(--c-paper); color: var(--c-ink); font-family: var(--c-font-mono); font-size: 0.85rem; padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: transform 160ms ease, background 160ms ease, border-color 160ms ease; } .score-btn:hover { background: var(--demo-accent-soft); border-color: var(--demo-accent); transform: translateY(-1px); } .score-btn[data-variant="accent"] { background: var(--demo-accent); border-color: var(--demo-accent); color: #fff; } .score-btn[data-variant="accent"]:hover { filter: brightness(1.08); } /* ── Stat line (live-ticking per-player stats) ──────────────────── */ .stat-strip { display: grid; gap: 12px; margin-top: var(--c-space-5); } @media (min-width: 760px) { .stat-strip { grid-template-columns: 1fr 1fr; } } .stat-card { background: var(--c-paper-warm); border: 1px solid var(--c-line); border-radius: 12px; padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; transition: border-color 200ms ease, transform 220ms var(--c-ease-out); } .stat-card:hover { border-color: var(--demo-accent); transform: translateY(-2px); } .stat-card__name { font-weight: 700; font-size: 0.95rem; } .stat-card__team { font-size: 0.7rem; color: var(--c-fog); text-transform: uppercase; letter-spacing: 0.12em; } .stat-card__pills { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; border-top: 1px dashed var(--c-line); } .stat-pill { display: inline-flex; align-items: center; gap: 4px; font-family: var(--c-font-mono); font-size: 0.8rem; padding: 3px 9px; border-radius: 999px; background: var(--c-paper); border: 1px solid var(--c-line); color: var(--c-ink-soft); transition: background 160ms ease, color 160ms ease, transform 160ms ease; } .stat-pill .stat-pill__k { color: var(--c-fog); font-size: 0.72rem; letter-spacing: 0.06em; } .stat-pill.tick { background: var(--demo-accent); color: #fff; transform: scale(1.08); } .stat-pill.tick .stat-pill__k { color: rgba(255,255,255,0.85); } /* ── Court board (assignment) ───────────────────────────────────── */ .court-board { display: grid; gap: 12px; grid-template-columns: 1fr; } @media (min-width: 700px) { .court-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .court-board { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .court-card { position: relative; border-radius: 14px; border: 1px solid var(--c-line); background: var(--c-paper); padding: var(--c-space-4); overflow: hidden; transition: transform 220ms var(--c-ease-out), border-color 220ms ease, box-shadow 220ms ease; } .court-card:hover { transform: translateY(-2px); border-color: var(--demo-accent); box-shadow: 0 14px 28px -20px rgba(20,12,6,0.30); } .court-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .court-card__name { font-family: var(--c-font-mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink-soft); } .court-card__status { font-size: 0.72rem; font-family: var(--c-font-mono); letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--c-line); background: var(--c-paper-warm); color: var(--c-fog); } .court-card[data-status="live"] .court-card__status { color: #fff; background: var(--demo-accent); border-color: var(--demo-accent); animation: blink 1.6s ease-in-out infinite; } .court-card[data-status="warmup"] .court-card__status { background: rgba(244, 163, 0, 0.12); border-color: rgba(244, 163, 0, 0.5); color: #8a5a00; } .court-card[data-status="upnext"] .court-card__status { background: var(--c-paper-warm); border-color: var(--c-line); } .court-card__match { font-weight: 700; font-size: 1.05rem; line-height: 1.25; margin-bottom: 4px; } .court-card__meta { font-size: 0.85rem; color: var(--c-ink-soft); } .court-card__progress { margin-top: 10px; height: 4px; background: var(--c-paper-warm); border-radius: 999px; overflow: hidden; } .court-card__progress span { display: block; height: 100%; background: var(--demo-accent); width: 0; transition: width 600ms var(--c-ease-out); } .court-card__pill-row { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; } .assignment-banner { margin: var(--c-space-4) 0 0; padding: 14px 18px; border-radius: 12px; background: var(--demo-accent-soft); border: 1px solid var(--demo-accent); color: var(--demo-accent-ink); font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; } .assignment-banner strong { font-weight: 700; } .assignment-banner small { font-family: var(--c-font-mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--demo-accent-ink); opacity: 0.85; } /* ── Bracket explorer (interactive SVG) ─────────────────────────── */ .bracket-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; } .bracket-svg { display: block; min-width: 640px; width: 100%; height: auto; background: radial-gradient(40rem 14rem at 30% -30%, rgba(15, 184, 106, 0.06), transparent 60%), var(--c-paper); } .bracket-match-bg { fill: var(--c-paper-warm); stroke: var(--c-line); stroke-width: 1; transition: fill 200ms ease, stroke 200ms ease; cursor: pointer; } .bracket-match:hover .bracket-match-bg, .bracket-match.active .bracket-match-bg { fill: var(--demo-accent-soft); stroke: var(--demo-accent); } .bracket-line { stroke: var(--c-line); stroke-width: 1.5; fill: none; transition: stroke 220ms ease; } .bracket-line.lit { stroke: var(--demo-accent); stroke-width: 2.5; } .bracket-text { font-family: var(--c-font-sans); font-size: 11px; fill: var(--c-ink); pointer-events: none; } .bracket-text--seed { font-family: var(--c-font-mono); font-size: 9px; fill: var(--c-fog); } .bracket-text--score { font-family: var(--c-font-mono); font-size: 11px; font-weight: 700; fill: var(--demo-accent-ink); pointer-events: none; } .bracket-winner-strike { /* the underline beneath the winning team in a match */ stroke: var(--demo-accent); stroke-width: 2; } .bracket-detail { margin-top: var(--c-space-4); background: var(--c-paper-warm); border: 1px solid var(--c-line); border-radius: 12px; padding: 14px 18px; display: grid; gap: 6px; font-size: 0.9rem; min-height: 96px; transition: border-color 200ms ease, background 200ms ease; } .bracket-detail.lit { border-color: var(--demo-accent); background: linear-gradient(135deg, var(--demo-accent-soft) 0%, var(--c-paper-warm) 75%); } .bracket-detail__title { font-weight: 700; letter-spacing: -0.01em; } .bracket-detail__row { display: flex; justify-content: space-between; gap: 12px; font-family: var(--c-font-mono); font-size: 0.85rem; color: var(--c-ink-soft); padding: 4px 0; border-bottom: 1px dashed var(--c-line); } .bracket-detail__row:last-child { border-bottom: 0; } .bracket-detail__row strong { color: var(--c-ink); } .bracket-detail__row .winner { color: var(--demo-accent-ink); } .bracket-detail__hint { margin-top: 4px; font-size: 0.75rem; color: var(--c-fog); font-family: var(--c-font-mono); letter-spacing: 0.06em; text-transform: uppercase; } /* ── Bracket-replacement surfaces ────────────────────────────────── Used by cross-country (meet-standings) and fishing (cumulative- bag leaderboard). Both sit in the same .bracket-wrap slot as the SVG bracket so the surrounding caption/frame styling continues to apply. */ .meet-wrap { overflow-x: auto; } .meet-standings { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .meet-standings thead th { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--c-line); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-ink-soft); } .meet-standings tbody td { padding: 10px 8px; border-bottom: 1px dashed var(--c-line); vertical-align: middle; } .meet-row .meet-place { width: 32px; font-family: var(--c-font-mono); color: var(--c-ink-soft); } .meet-row .meet-name { font-weight: 600; color: var(--c-ink); } .meet-row .meet-name small { font-weight: 400; display: block; margin-top: 2px; } .meet-row .meet-cell { text-align: right; font-family: var(--c-font-mono); font-size: 0.85rem; color: var(--c-ink-soft); } .meet-row--lead { background: var(--demo-accent-soft); } .meet-row--lead .meet-name { color: var(--demo-accent-ink); } .meet-cell--lead { color: var(--demo-accent-ink); font-weight: 700; } .bracket-detail--meet { margin-top: var(--c-space-4); } /* ── Vantage tabs (Director / Player / Public) ──────────────────── */ .vantage { display: grid; gap: 12px; } .vantage__tabs { display: flex; gap: 4px; padding: 4px; background: var(--c-paper-warm); border: 1px solid var(--c-line); border-radius: 999px; width: max-content; max-width: 100%; overflow-x: auto; } .vantage__tab { appearance: none; border: 0; background: transparent; color: var(--c-ink-soft); font-family: var(--c-font-sans); font-size: 0.85rem; font-weight: 600; padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: background 180ms ease, color 180ms ease, transform 160ms ease; white-space: nowrap; } .vantage__tab:hover { color: var(--c-ink); transform: translateY(-1px); } .vantage__tab[aria-selected="true"] { background: var(--c-paper); color: var(--demo-accent-ink); box-shadow: 0 1px 4px rgba(0,0,0,0.08); } .vantage__panel { border: 1px solid var(--c-line); border-radius: 14px; background: var(--c-paper); padding: var(--c-space-4); display: none; animation: fadeUp 360ms var(--c-ease-out); } .vantage__panel[aria-hidden="false"] { display: block; } @keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .vantage__panel h4 { margin: 0 0 8px; font-size: 1.05rem; letter-spacing: -0.01em; } .vantage__row { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--c-paper-warm); border: 1px solid var(--c-line); margin-bottom: 6px; font-size: 0.9rem; align-items: center; } .vantage__row code { font-size: 0.78rem; color: var(--demo-accent-ink); background: var(--demo-accent-soft); padding: 2px 8px; border-radius: 999px; } .vantage__notice { margin-top: 10px; padding: 8px 12px; border-left: 3px solid var(--demo-accent); background: var(--c-paper-warm); font-size: 0.85rem; color: var(--c-ink-soft); } /* ── Bracket shuffler ───────────────────────────────────────────── */ .shuffler { display: grid; gap: var(--c-space-4); } .shuffler__board { display: grid; gap: 12px; } @media (min-width: 760px) { .shuffler__board { grid-template-columns: 1fr 1fr; } } .shuffler__pool { border: 1px dashed var(--c-line); border-radius: 12px; background: var(--c-paper-warm); padding: 12px 14px; } .shuffler__pool h5 { margin: 0 0 8px; font-family: var(--c-font-mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink-soft); display: flex; align-items: center; gap: 8px; } .shuffler__pool h5::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--demo-accent); } .shuffler__teams { display: flex; flex-direction: column; gap: 6px; list-style: none; padding: 0; margin: 0; } .shuffler__teams li { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; padding: 8px 10px; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: 10px; font-size: 0.9rem; transition: transform 320ms var(--c-ease-out), background 320ms ease, border-color 320ms ease; } .shuffler__teams li.moved { background: var(--demo-accent-soft); border-color: var(--demo-accent); transform: scale(1.02); } .shuffler__seed { font-family: var(--c-font-mono); font-size: 0.78rem; color: var(--demo-accent-ink); background: var(--demo-accent-soft); border-radius: 999px; text-align: center; padding: 2px 0; } .shuffler__teams li .record { font-family: var(--c-font-mono); font-size: 0.78rem; color: var(--c-fog); } .shuffler__controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .shuffler__readout { font-size: 0.8rem; color: var(--c-ink-soft); flex: 1; } .shuffler__readout strong { color: var(--demo-accent-ink); } /* ── Section opener ────────────────────────────────────────────── */ .demo-section { padding: var(--c-space-7) 0; border-top: 1px solid var(--c-line); background: var(--c-paper); position: relative; overflow: hidden; } .demo-section + .demo-section { border-top: 0; } .demo-section--warm { background: var(--c-paper-warm); } .demo-section__lead { max-width: 64ch; margin-bottom: var(--c-space-5); } .demo-section__lead h2 { margin-bottom: var(--c-space-3); letter-spacing: -0.01em; } .demo-section__lead p { color: var(--c-ink-soft); font-size: 1.05rem; } .demo-section__eyebrow { font-family: var(--c-font-mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.78rem; color: var(--demo-accent-ink); margin-bottom: var(--c-space-2); display: inline-flex; align-items: center; gap: 8px; } .demo-section__eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--demo-accent); } /* ── Marketing card hover lift (used on /arena/, /sports/, etc.) ── */ .lift-on-hover { transition: transform 220ms var(--c-ease-out), box-shadow 220ms var(--c-ease-out); } .lift-on-hover:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(20, 12, 6, 0.30); } /* ── Reduced motion ────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .scoreboard__big, .stat-pill, .court-card, .shuffler__teams li, .vantage__panel, .demo-frame, .lift-on-hover { transition: none !important; animation: none !important; transform: none !important; } .demo-frame__title::before { animation: none !important; } } /* ── Formats tour — same teams, every shape ──────────────────────── */ .formats-tour { display: flex; flex-direction: column; gap: 16px; padding: 20px; } .formats-tour__tabs { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--c-line); padding-bottom: 14px; } .formats-tour__tab { padding: 10px 14px; border-radius: 999px; border: 1px solid var(--c-line); background: var(--c-paper); font: inherit; font-size: 0.92rem; color: var(--c-ink); cursor: pointer; transition: border-color 160ms ease, background 160ms ease, transform 120ms ease; } .formats-tour__tab:hover { border-color: var(--demo-accent); transform: translateY(-1px); } .formats-tour__tab[aria-selected="true"] { background: var(--demo-accent); color: var(--demo-accent-ink); border-color: var(--demo-accent); font-weight: 700; } .formats-tour__panel { display: flex; flex-direction: column; gap: 14px; } .formats-tour__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; } .formats-tour__kind { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--demo-accent-soft); color: var(--demo-accent-ink); font-family: var(--c-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; } .formats-tour__sub { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--c-ink); } .formats-tour__cadence { font-family: var(--c-font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--c-ink-soft); text-align: right; padding-top: 4px; } .formats-tour__surface { border: 1px solid var(--c-line); border-radius: 14px; background: var(--c-paper); padding: 16px; overflow-x: auto; } /* ── Standings + ladder tables ───────────────────────────────────── */ .standings { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .standings th, .standings td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--c-line); } .standings th { font-family: var(--c-font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink-soft); background: var(--c-paper-warm); } .standings tbody tr:hover { background: var(--c-paper-warm); } .standings tbody tr:first-child { background: var(--demo-accent-soft); } .standings tbody tr:first-child td:first-child { font-weight: 700; } .standings__status { margin-left: 8px; font-size: 0.82em; color: var(--c-ink-soft); } .standings__hint { margin: 12px 0 0; font-size: 0.85rem; color: var(--c-ink-soft); } .ladder__move { font-family: var(--c-font-mono); font-size: 12px; padding: 2px 8px; border-radius: 999px; } .ladder__move--up { background: rgba(15, 184, 106, 0.12); color: #0a8a4f; } .ladder__move--down { background: rgba(196, 42, 42, 0.08); color: #8b1818; } .ladder__challenge { font: inherit; font-size: 0.82rem; padding: 6px 10px; border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-paper); color: var(--c-ink-soft); cursor: not-allowed; } /* ── League weekly cadence strip ─────────────────────────────────── */ .league-cadence { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; } .league-cadence__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .league-cadence__row--summary { justify-content: space-between; font-size: 0.9rem; color: var(--c-ink); border-top: 1px solid var(--c-line); padding-top: 10px; margin-top: 4px; } .league-cadence__label { font-family: var(--c-font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink-soft); margin-right: 8px; min-width: 110px; } .league-cadence__cell { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 42px; padding: 6px 8px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-paper); font-family: var(--c-font-mono); font-size: 11px; color: var(--c-ink); } .league-cadence__cell small { margin-top: 2px; font-size: 10px; color: var(--c-ink-soft); } .league-cadence__cell--w { background: rgba(15, 184, 106, 0.10); border-color: rgba(15, 184, 106, 0.30); color: #0a6c3d; } .league-cadence__cell--w small { color: #0a8a4f; } .league-cadence__cell--l { background: rgba(196, 42, 42, 0.06); border-color: rgba(196, 42, 42, 0.20); color: #8b1818; } .league-cadence__cell--l small { color: #8b1818; } .league-cadence__cell--next { background: var(--demo-accent-soft); border-color: var(--demo-accent); font-weight: 700; } @media (max-width: 640px) { .league-cadence__label { min-width: 0; } .formats-tour__cadence { text-align: left; } } /* ── Vantage embedded bracket — persona-aware mini SVG ──────────── */ .vantage__bracket-wrap { margin: 12px 0 14px; } .vbracket__chip { display: inline-block; margin-bottom: 10px; padding: 6px 12px; border-radius: 999px; font-family: var(--c-font-mono); font-size: 11px; letter-spacing: 0.05em; border: 1px solid var(--c-line); } .vbracket__chip--director { background: rgba(15, 184, 106, 0.10); border-color: rgba(15, 184, 106, 0.35); color: #0a6c3d; } .vbracket__chip--player { background: var(--demo-accent-soft); border-color: var(--demo-accent); color: var(--demo-accent-ink); font-weight: 700; } .vbracket__chip--public { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-paper); } .vbracket { border: 1px solid var(--c-line); border-radius: 10px; padding: 8px; background: var(--c-paper); overflow-x: auto; } .vbracket--public { background: linear-gradient(180deg, var(--c-paper) 0%, var(--demo-accent-soft) 100%); border-color: var(--demo-accent); } .vbracket__svg { width: 100%; height: auto; display: block; } .vbracket__box rect { fill: var(--c-paper); stroke: var(--c-line); stroke-width: 1; } .vbracket__box .vbracket__name, .vbracket__box .vbracket__seed { font-family: var(--c-font-mono); fill: var(--c-ink); } .vbracket__box .vbracket__name { font-size: 10px; } .vbracket__box .vbracket__seed { font-size: 9px; fill: var(--c-ink-soft); } .vbracket__box--path rect { fill: var(--demo-accent-soft); stroke: var(--demo-accent); stroke-width: 1.5; } .vbracket__box--path .vbracket__name { fill: var(--demo-accent-ink); } .vbracket__box--dim rect { opacity: 0.45; } .vbracket__box--dim .vbracket__name, .vbracket__box--dim .vbracket__seed { opacity: 0.55; } .vbracket__box--live rect { stroke: #0a8a4f; stroke-width: 1.6; stroke-dasharray: 3 2; } .vbracket--public .vbracket__box--live rect { stroke: var(--demo-accent); stroke-width: 2; } .vbracket__line { fill: none; stroke: var(--c-line); stroke-width: 1; } .vbracket__line--lit { stroke: var(--demo-accent); stroke-width: 1.6; } .vbracket__trophy rect { fill: var(--c-paper-warm); stroke: var(--c-line); } .vbracket__trophy--pending rect { fill: rgba(15, 184, 106, 0.08); stroke: #0a8a4f; } .vbracket--public .vbracket__trophy rect { fill: var(--c-ink); stroke: var(--c-ink); } .vbracket__trophy-text { font-family: var(--c-font-mono); font-size: 10px; font-weight: 700; fill: var(--c-ink); } .vbracket--public .vbracket__trophy-text { fill: var(--c-paper); } /* Director-only court grid overlay */ .vbracket__court-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; } .vbracket__court { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--c-line); background: var(--c-paper); font-size: 11px; color: var(--c-ink); text-align: center; } .vbracket__court strong { display: block; font-family: var(--c-font-mono); font-size: 10px; color: var(--c-ink-soft); margin-bottom: 2px; } .vbracket__court--live { background: rgba(15, 184, 106, 0.10); border-color: rgba(15, 184, 106, 0.35); color: #0a6c3d; } .vbracket__court--warmup { background: rgba(244, 163, 0, 0.10); border-color: rgba(244, 163, 0, 0.35); color: #8a5a05; } .vbracket__court--idle { opacity: 0.7; } @media (max-width: 640px) { .vbracket__court-grid { grid-template-columns: repeat(2, 1fr); } } /* ── Bowling: ten-frame scoresheet (data-demo="frame-sheet" or scoreboard with data-rules="bowling") ── */ /* Local fallbacks so this section doesn't depend on flagship.css being loaded. */ [data-demo="frame-sheet"], [data-demo="series-board"] { --sport-bowling: #E89B3C; --sport-bowling-soft: #fbe7c8; --sport-bowling-ink: #8c5310; } .frame-sheet { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-bottom: 1rem; font-family: ui-monospace, "SF Mono", Menlo, monospace; } .frame-sheet .frame { background: #faf8f4; border: 1px solid #e4e7eb; border-radius: 8px; padding: 6px 4px 8px; display: flex; flex-direction: column; gap: 4px; min-height: 92px; cursor: pointer; transition: border-color 200ms ease, background 200ms ease, transform 200ms ease; } .frame-sheet .frame:hover { transform: translateY(-1px); border-color: var(--sport-bowling); } .frame-sheet .frame:focus-visible { outline: 2px solid var(--sport-bowling); outline-offset: 2px; } .frame-sheet .frame[data-active="true"] { background: var(--sport-bowling-soft); border-color: var(--sport-bowling); box-shadow: 0 0 0 2px rgba(232,155,60,0.25); } .frame__num { font-size: 9px; color: #6b7280; letter-spacing: 0.1em; text-align: center; } .frame__balls { display: flex; gap: 2px; align-items: stretch; justify-content: flex-end; } .frame__ball { flex: 1; min-height: 22px; border: 1px solid #e4e7eb; border-radius: 4px; background: #ffffff; display: grid; place-items: center; font-size: 0.85rem; font-weight: 700; color: #111418; } .frame__total { text-align: center; font-size: 1.05rem; font-weight: 800; color: #111418; letter-spacing: -0.01em; min-height: 18px; } .frame--tenth .frame__balls { gap: 3px; } .frame--tenth .frame__ball { font-size: 0.78rem; } @media (max-width: 720px) { .frame-sheet { grid-template-columns: repeat(5, 1fr); } .frame-sheet .frame:nth-child(n+6) { grid-column: auto; } } .pin-pad { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 0.75rem 0; } .pin-pad button { padding: 8px 12px; border: 1px solid #e4e7eb; background: #ffffff; border-radius: 999px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.9rem; font-weight: 700; cursor: pointer; min-width: 42px; transition: background 160ms ease, color 160ms ease, transform 160ms ease; } .pin-pad button:hover:not(:disabled) { background: var(--sport-bowling); color: #ffffff; transform: translateY(-1px); } .pin-pad button:disabled { opacity: 0.4; cursor: not-allowed; } .pin-pad__hint { width: 100%; text-align: center; font-size: 0.85rem; color: #3a3f47; margin-bottom: 4px; } .frame-sheet__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.5rem; font-family: ui-monospace, "SF Mono", Menlo, monospace; } .frame-sheet__total { font-size: 1rem; color: #3a3f47; } .frame-sheet__total strong { font-size: 1.6rem; color: #111418; margin-left: 0.5rem; } /* ── Bowling: three-game series board (data-demo="series-board") ── */ .series-board { font-family: ui-monospace, "SF Mono", Menlo, monospace; overflow-x: auto; } .series { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .series thead th { text-align: center; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7280; padding: 8px 6px; border-bottom: 1px solid #e4e7eb; font-weight: 700; } .series thead th:first-child { text-align: left; } .series tbody td { text-align: center; padding: 12px 6px; border-bottom: 1px solid #f1efe9; vertical-align: middle; } .series__name { text-align: left !important; font-family: var(--c-font-sans, system-ui, -apple-system, sans-serif); font-weight: 700; color: #111418; } .series__avg { font-size: 0.78rem; color: #6b7280; font-weight: 500; margin-top: 2px; } .series__game { font-weight: 700; color: #111418; } .series__game.tick { background: var(--sport-bowling-soft); border-radius: 6px; transition: background 480ms ease; } .series__hcap { color: var(--sport-bowling-ink); font-weight: 700; background: rgba(232,155,60,0.08); } .series__hcap small { font-size: 0.7rem; color: #6b7280; font-weight: 500; } .series__scratch { color: #3a3f47; font-weight: 600; } .series__total { font-size: 1.2rem; font-weight: 800; color: #111418; background: #faf8f4; } .series__caption { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #f1efe9; font-family: var(--c-font-sans, system-ui, -apple-system, sans-serif); font-size: 0.85rem; color: #6b7280; } @media (max-width: 720px) { .series thead th { font-size: 0.62rem; padding: 6px 4px; } .series tbody td { padding: 8px 4px; font-size: 0.85rem; } .series__total { font-size: 1rem; } .series__caption { font-size: 0.78rem; } } /* Score banner reused from flagship.css — define locally for sport-demos pages. */ .score-banner { margin-top: 0.75rem; padding: 0.75rem 1rem; border-radius: 10px; background: var(--sport-bowling-soft); color: var(--sport-bowling-ink); text-align: center; font-weight: 600; font-size: 0.95rem; display: none; } .score-banner.is-shown { display: block; } /* ── Volleyball: set-by-set strip + sub-line on scoreboard ── */ .scoreboard--sets .scoreboard__sub { margin-top: 4px; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: #c5cbd3; } .scoreboard--sets .scoreboard__sub strong { color: #ffe1a8; font-size: 1rem; margin-left: 4px; } .set-strip { display: flex; gap: 6px; justify-content: center; margin: 0.5rem 0 0.75rem; font-family: ui-monospace, "SF Mono", Menlo, monospace; } .set-cell { min-width: 48px; padding: 6px 8px; border: 1px solid #e4e7eb; border-radius: 6px; background: #ffffff; text-align: center; font-size: 0.85rem; font-weight: 700; color: #6b7280; } .set-cell--done { color: #111418; } .set-cell--live { background: #fff2d6; border-color: #E89B3C; color: #8c5310; box-shadow: 0 0 0 2px rgba(232,155,60,0.15); } .set-cell--L { border-left: 4px solid #6c8cff; } .set-cell--R { border-left: 4px solid #ff7a6c; } /* ── Basketball + football: quarter strip ── */ .qbox-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0.5rem 0 0.75rem; font-family: ui-monospace, "SF Mono", Menlo, monospace; } .qbox { padding: 8px; border: 1px solid #e4e7eb; border-radius: 8px; background: #ffffff; text-align: center; font-size: 0.78rem; display: flex; flex-direction: column; gap: 2px; } .qbox--live { background: #fff8e6; border-color: #E89B3C; } .qbox__label { font-weight: 700; font-size: 0.7rem; color: #6b7280; letter-spacing: 0.08em; } .qbox__row { display: flex; justify-content: space-between; font-size: 0.85rem; } .qbox__row strong { color: #111418; } .qbox__fouls { font-size: 0.7rem; color: #6b7280; } /* ── Soccer: card ledger ── */ .card-ledger { margin: 0.5rem 0 0.75rem; font-size: 0.85rem; color: #3a3f47; } .card-ledger ul { display: inline-flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .card-row { font-family: ui-monospace, "SF Mono", Menlo, monospace; padding: 3px 8px; border-radius: 999px; border: 1px solid #e4e7eb; background: #ffffff; font-size: 0.78rem; } .card-row--Y { background: #fff8d6; border-color: #f0c63b; color: #6d5400; } .card-row--R { background: #ffd6d6; border-color: #d33; color: #8a0e0e; } .card-row--empty { color: #6b7280; font-style: italic; } .card-row em { color: #6b7280; font-style: normal; } /* ── Cross-country: scoreboard + results table ── */ .xc-scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin: 0.5rem 0 0.75rem; } .xc-team-card { padding: 1rem; border: 1px solid #e4e7eb; border-radius: 10px; background: #faf8f4; text-align: center; } .xc-team-card--lead { background: #e6f0ff; border-color: #6c8cff; box-shadow: 0 0 0 2px rgba(108,140,255,0.15); } .xc-team-card__name { font-weight: 700; color: #111418; font-size: 0.95rem; } .xc-team-card__score { font-size: 2.4rem; font-weight: 800; color: #111418; line-height: 1; font-family: ui-monospace, "SF Mono", Menlo, monospace; margin: 6px 0; } .xc-team-card__sub { font-size: 0.78rem; color: #6b7280; } .xc-vs { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 700; color: #6b7280; } .xc-ticker { margin: 0.5rem 0; padding: 0.5rem 0.75rem; border-radius: 8px; background: #fff2d6; border: 1px solid #f0c63b; font-size: 0.9rem; color: #6d5400; } .xc-ticker em { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-style: normal; } .xc-ticker--idle { background: #f7f7f8; border-color: #e4e7eb; color: #6b7280; } .xc-results { width: 100%; border-collapse: collapse; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.85rem; margin-bottom: 0.5rem; } .xc-results thead th { text-align: left; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 8px; border-bottom: 1px solid #e4e7eb; color: #6b7280; } .xc-results tbody td { padding: 6px 8px; border-bottom: 1px solid #f1efe9; } .xc-row--done { background: #f6fff0; } .xc-place { width: 90px; } .xc-team { width: 60px; font-weight: 700; } .xc-team--L { color: #4a66cc; } .xc-team--R { color: #cc5044; } .xc-name { font-family: var(--c-font-sans, system-ui, -apple-system, sans-serif); } .xc-time { width: 80px; text-align: right; } .score-btn--mini { padding: 4px 8px; font-size: 0.78rem; min-width: 0; } /* ── Cheer: rubric cards ── */ .cheer-board { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 0.75rem; } .cheer-card { padding: 1rem; border: 1px solid #e4e7eb; border-radius: 10px; background: #faf8f4; } .cheer-card--lead { background: #f0e9ff; border-color: #8e6ec7; box-shadow: 0 0 0 2px rgba(142,110,199,0.15); } .cheer-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; } .cheer-card__name { font-weight: 700; color: #111418; } .cheer-card__div { font-size: 0.78rem; color: #6b7280; } .cheer-card__score { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.6rem; font-weight: 800; color: #111418; } .cheer-rubric { width: 100%; border-collapse: collapse; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.85rem; } .cheer-rubric thead th { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: #6b7280; padding: 4px; text-align: center; } .cheer-rubric thead th:first-child { text-align: left; } .cheer-rubric tbody td { padding: 4px; border-bottom: 1px solid #f1efe9; } .cheer-cell { text-align: center; vertical-align: middle; } .cheer-cell--label { text-align: left; font-family: var(--c-font-sans, system-ui, -apple-system, sans-serif); font-weight: 600; color: #3a3f47; } .cheer-cell--avg { font-weight: 800; color: #111418; } .cheer-bump { border: 1px solid #e4e7eb; background: #ffffff; border-radius: 4px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 700; width: 22px; height: 22px; cursor: pointer; padding: 0; line-height: 1; } .cheer-bump:hover { background: #f7f7f8; } .cheer-val { display: inline-block; min-width: 32px; padding: 0 4px; font-weight: 700; color: #111418; } @media (max-width: 720px) { .qbox-strip { grid-template-columns: repeat(2, 1fr); } .cheer-board { grid-template-columns: 1fr; } .xc-scoreboard { grid-template-columns: 1fr; } } /* ---------------------------------------------------------------------- Darts — 501 board re-uses the .scoreboard chrome; nothing extra. ---------------------------------------------------------------------- */ .scoreboard--darts .scoreboard__big { color: #ffe1a8; } /* ---------------------------------------------------------------------- Golf / disc-golf scorecard. ---------------------------------------------------------------------- */ .golf-board { display: grid; grid-template-columns: 1fr 1fr; gap: var(--c-space-4); } .golf-card { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: 12px; padding: var(--c-space-4); transition: border-color 200ms ease, box-shadow 200ms ease; } .golf-card--lead { border-color: var(--demo-accent); box-shadow: 0 0 0 2px rgba(244, 163, 0, 0.12); } .golf-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--c-line); } .golf-card__name { font-weight: 700; color: var(--c-ink); } .golf-card__div { font-size: 0.75rem; color: var(--c-ink-soft); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.1em; } .golf-card__totals { display: flex; gap: 10px; } .golf-card__total { text-align: right; min-width: 64px; } .golf-card__total span { display: block; font-size: 0.7rem; color: var(--c-ink-soft); text-transform: uppercase; letter-spacing: 0.12em; } .golf-card__total strong { font-family: var(--c-font-mono); font-size: 1.4rem; color: var(--c-ink); display: block; } .golf-card__total small { font-size: 0.7rem; color: var(--c-ink-soft); font-weight: 500; } .golf-table { width: 100%; margin-top: 10px; border-collapse: collapse; font-family: var(--c-font-mono); font-size: 0.85rem; } .golf-table thead th { text-align: center; padding: 6px 4px; font-size: 0.7rem; color: var(--c-ink-soft); text-transform: uppercase; letter-spacing: 0.12em; border-bottom: 1px solid var(--c-line); } .golf-table thead th:first-child { text-align: left; } .golf-cell { text-align: center; padding: 4px 6px; border-bottom: 1px solid #f1efe9; } .golf-cell--hole { text-align: left; color: var(--c-ink-soft); font-size: 0.78rem; } .golf-cell--par { color: var(--c-ink-soft); } .golf-cell--rel { font-weight: 700; color: var(--c-ink); } .golf-row--birdie .golf-cell--rel { color: #178f4e; } .golf-row--eagle .golf-cell--rel { color: #0a6b3a; } .golf-row--below .golf-cell--rel { color: #0a6b3a; } .golf-row--bogey .golf-cell--rel { color: #b56e00; } .golf-row--dbl .golf-cell--rel { color: #a23d2c; } .golf-row--high .golf-cell--rel { color: #802a1c; } .golf-bump { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: 999px; width: 22px; height: 22px; cursor: pointer; padding: 0; line-height: 1; } .golf-bump:hover { background: #f7f7f8; } .golf-val { display: inline-block; min-width: 24px; padding: 0 4px; font-weight: 700; color: var(--c-ink); } /* ---------------------------------------------------------------------- Fishing — bag totals + 5 slots per boat. ---------------------------------------------------------------------- */ .fish-board { display: grid; grid-template-columns: 1fr 1fr; gap: var(--c-space-4); } .fish-card { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: 12px; padding: var(--c-space-4); transition: border-color 200ms ease, box-shadow 200ms ease; } .fish-card--lead { border-color: var(--demo-accent); box-shadow: 0 0 0 2px rgba(244, 163, 0, 0.12); } .fish-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--c-line); } .fish-card__name { font-weight: 700; color: var(--c-ink); } .fish-card__caught { font-size: 0.72rem; color: var(--c-ink-soft); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.1em; } .fish-card__bag { text-align: right; } .fish-card__bag span { display: block; font-size: 0.7rem; color: var(--c-ink-soft); text-transform: uppercase; letter-spacing: 0.12em; } .fish-card__bag strong { font-family: var(--c-font-mono); font-size: 1.6rem; color: var(--c-ink); } .fish-card__bag small { font-size: 0.8rem; color: var(--c-ink-soft); font-weight: 500; } .fish-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 10px 0; } .fish-slot { background: #faf8f3; border: 1px dashed var(--c-line); border-radius: 8px; padding: 8px 4px; text-align: center; font-family: var(--c-font-mono); font-size: 0.85rem; color: var(--c-ink-soft); } .fish-slot--filled { background: var(--c-paper); border-style: solid; border-color: var(--demo-accent); color: var(--c-ink); } .fish-slot__lbl { display: block; font-size: 0.65rem; color: var(--c-ink-soft); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 2px; } .fish-slot strong { color: var(--c-ink); } .fish-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .fish-card__bb { font-size: 0.78rem; color: var(--c-ink-soft); } .fish-card__bb strong { color: var(--c-ink); } .fish-card__bb--lead { color: var(--demo-accent-ink, #b56e00); font-weight: 700; } .fish-card__bb--lead strong { color: var(--demo-accent-ink, #b56e00); } /* ---------------------------------------------------------------------- Cornhole — frame board + per-side bag pad. ---------------------------------------------------------------------- */ .cornhole-frame { margin-top: 12px; padding: 8px; background: rgba(255, 225, 168, 0.06); border-radius: 8px; text-align: center; } .cornhole-pending { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.72rem; color: #b69160; text-transform: uppercase; letter-spacing: 0.12em; padding: 0 4px; } .cornhole-pending strong { font-family: var(--c-font-mono); font-size: 1.2rem; color: #ffe1a8; } .cornhole-controls { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 8px 0 6px; } .cornhole-controls .score-btn { background: rgba(255, 225, 168, 0.08); border-color: rgba(255, 225, 168, 0.18); color: #ffe1a8; font-size: 0.75rem; padding: 5px 10px; } .cornhole-controls .score-btn:hover { background: rgba(255, 225, 168, 0.14); } .cornhole-controls .score-btn[disabled] { opacity: 0.35; cursor: not-allowed; } .cornhole-bags { font-family: var(--c-font-mono); font-size: 0.85rem; color: #d3a35a; letter-spacing: 0.18em; } .cornhole-bags small { display: block; font-size: 0.65rem; color: #b69160; margin-top: 2px; letter-spacing: 0.18em; } .cornhole-frames { width: 100%; margin-top: 12px; border-collapse: collapse; font-family: var(--c-font-mono); font-size: 0.82rem; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: 8px; overflow: hidden; } .cornhole-frames thead th { text-align: center; padding: 6px 8px; background: #faf8f3; font-size: 0.7rem; color: var(--c-ink-soft); text-transform: uppercase; letter-spacing: 0.1em; } .cornhole-frames tbody td { text-align: center; padding: 5px 8px; border-top: 1px solid #f1efe9; } .cornhole-empty { color: var(--c-ink-soft); font-style: italic; } @media (max-width: 720px) { .golf-board { grid-template-columns: 1fr; } .fish-board { grid-template-columns: 1fr; } .fish-slots { grid-template-columns: repeat(5, 1fr); gap: 4px; } }