/*
 * Football H2H League — visual refresh layer.
 *
 * Loaded LAST so it wins specificity ties. Football H2H reuses several
 * Mario Kart stylesheets (utilities/base/theme/layout/forms/overrides) +
 * a Football-specific sheet. This refresh layer aligns the hero, tabs,
 * stat cards, sidebar, and tables with the Rising Shows / MapTap
 * reference apps without changing any JS, IDs, or event handlers.
 */

body.football-h2h-tracker {
    --fh-bg: #0a0c14;
    --fh-bg-grad:
        radial-gradient(ellipse 90% 60% at 50% -10%, rgba(129, 140, 248, 0.10), transparent 60%),
        radial-gradient(ellipse 60% 40% at 100% 0%, rgba(74, 222, 128, 0.05), transparent 65%),
        linear-gradient(180deg, #0a0c14 0%, #07090f 70%, #050609 100%);
    --fh-surface: #12151d;
    --fh-surface-2: #181c26;
    --fh-surface-3: #232836;
    --fh-text: #f1f3f8;
    --fh-muted: #a4adbd;
    --fh-muted-2: #6f7785;
    --fh-accent: #818cf8;
    --fh-accent-strong: #6366f1;
    --fh-accent-soft: rgba(129, 140, 248, 0.14);
    --fh-good: #34d399;
    --fh-good-soft: rgba(52, 211, 153, 0.16);
    --fh-bad: #f87171;
    --fh-bad-soft: rgba(248, 113, 113, 0.16);
    --fh-warn: #fbbf24;
    --fh-warn-soft: rgba(251, 191, 36, 0.16);
    --fh-border: #232838;
    --fh-border-strong: #343a4f;
    --fh-radius: 14px;
    --fh-radius-sm: 10px;
    --fh-shadow-lift: 0 6px 22px -8px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.3);

    background: var(--fh-bg) !important;
    background-image: var(--fh-bg-grad) !important;
    background-attachment: fixed !important;
    color: var(--fh-text);
    color-scheme: dark;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Page container ---------- */

/* `apps/football-h2h/css/sidebar.css` line 12 sets `body { padding: 0 }`
   which wipes out the 3.25rem top padding main.css uses to clear the
   fixed site header. Restore it here so the app sits below the header
   bar rather than under it. */
body.football-h2h-tracker {
    padding-top: 3.25rem !important;
}

body.football-h2h-tracker .app-container {
    max-width: 1280px;
    /* With body padding-top restored above, this just controls the gap
       between the site header and the gradient hero. Was 2rem in the
       original layout — tightened here so the title sits closer to the
       header bar without smothering it. */
    padding: 0.6rem 1.25rem 3rem;
}

body.football-h2h-tracker .main-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* ---------- Hero ----------
   Tightened against the site header bar — was 1rem top padding +
   0.5rem bottom margin before, leaving an obvious gap. Drop both to
   minimal values so the gradient title sits directly under the chrome. */

body.football-h2h-tracker .app-header {
    border-bottom: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.football-h2h-tracker .app-title {
    font-family: inherit !important;
    font-size: clamp(2rem, 4vw, 2.85rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.05;
    text-transform: none;
    background: linear-gradient(135deg, #ffffff 0%, var(--fh-accent) 60%, var(--fh-good) 110%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 4px 24px rgba(129, 140, 248, 0.18));
    gap: 0.75rem;
    margin: 0 !important;
}

body.football-h2h-tracker .football-icon {
    font-size: 1.6rem !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

/* Subtitle: synthesize one using existing :before/:after if there isn't a
   real subtitle in the DOM — keep this purely cosmetic, so even when the
   browser drops it nothing breaks. */
body.football-h2h-tracker .app-header::after {
    content: "Head-to-head match log, wins, and side-by-side player stats";
    display: block;
    color: var(--fh-muted);
    font-size: 0.95rem;
    letter-spacing: -0.005em;
    text-align: center;
    margin-top: 0.25rem;
}

/* ---------- Stats tabs (H2H / General / Player) ---------- */

body.football-h2h-tracker .stats-tabs-section { margin-bottom: 1.5rem; }

body.football-h2h-tracker .stats-tabs {
    display: inline-flex !important;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    margin: 1.25rem auto 1.25rem !important;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--fh-border);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
    justify-content: center;
    width: auto !important;
}

body.football-h2h-tracker .stats-tabs-section {
    text-align: center;
}

body.football-h2h-tracker .stats-tabs button.stats-tab {
    background: transparent !important;
    color: var(--fh-muted) !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.87rem !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: background 0.15s ease, color 0.15s ease;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem;
}

body.football-h2h-tracker .stats-tabs button.stats-tab:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--fh-text) !important;
    transform: none !important;
}

body.football-h2h-tracker .stats-tabs button.stats-tab.active {
    background: var(--fh-accent-soft) !important;
    color: var(--fh-text) !important;
    box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.45) !important;
}

/* ---------- Section titles ---------- */

body.football-h2h-tracker .h2h-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fh-muted-2) !important;
    margin: 1.25rem 0 0.65rem !important;
    text-align: left;
}

body.football-h2h-tracker .h2h-section-title:first-of-type { margin-top: 0.4rem; }

body.football-h2h-tracker .section-title {
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    color: var(--fh-text) !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 1rem !important;
    text-align: left !important;
    text-transform: none !important;
}

body.football-h2h-tracker .section-title::after { display: none !important; }

/* ---------- Stat cards ---------- */

body.football-h2h-tracker .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 0.85rem !important;
}

body.football-h2h-tracker .stat-card,
body.football-h2h-tracker .stat-card.player1-card,
body.football-h2h-tracker .stat-card.player2-card,
body.football-h2h-tracker .stat-card.draws-card,
body.football-h2h-tracker .stat-card.player1-90min-card,
body.football-h2h-tracker .stat-card.player2-90min-card,
body.football-h2h-tracker .stat-card.player1-penalty-card,
body.football-h2h-tracker .stat-card.player2-penalty-card {
    background: var(--fh-surface) !important;
    border: 1px solid var(--fh-border) !important;
    border-radius: var(--fh-radius) !important;
    padding: 1.1rem 1.2rem !important;
    box-shadow: var(--fh-shadow-lift) !important;
    text-align: left !important;
    position: relative;
    overflow: hidden;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

/* Subtle accent strip on each card */
body.football-h2h-tracker .stat-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--fh-border-strong);
    transition: background 0.18s ease;
}

body.football-h2h-tracker .stat-card.player1-card::before,
body.football-h2h-tracker .stat-card.player1-90min-card::before {
    background: linear-gradient(180deg, var(--fh-accent), var(--fh-good));
}
body.football-h2h-tracker .stat-card.player2-card::before,
body.football-h2h-tracker .stat-card.player2-90min-card::before {
    background: linear-gradient(180deg, var(--fh-bad), #ec4899);
}
body.football-h2h-tracker .stat-card.draws-card::before { background: var(--fh-warn); }
body.football-h2h-tracker .stat-card.player1-penalty-card::before {
    background: linear-gradient(180deg, #a78bfa, #818cf8);
}
body.football-h2h-tracker .stat-card.player2-penalty-card::before {
    background: linear-gradient(180deg, #f472b6, #ec4899);
}

/* JS-driven winning/losing/tied border colors should still win — bump
   their specificity by keeping their original rules untouched and only
   recoloring the strip. */
body.football-h2h-tracker .stat-card.winning {
    border-color: rgba(52, 211, 153, 0.55) !important;
    background: linear-gradient(180deg, var(--fh-good-soft), var(--fh-surface)) !important;
}
body.football-h2h-tracker .stat-card.losing {
    border-color: rgba(248, 113, 113, 0.55) !important;
    background: linear-gradient(180deg, var(--fh-bad-soft), var(--fh-surface)) !important;
}
body.football-h2h-tracker .stat-card.tied {
    border-color: rgba(251, 191, 36, 0.55) !important;
    background: linear-gradient(180deg, var(--fh-warn-soft), var(--fh-surface)) !important;
}

body.football-h2h-tracker .stat-card:hover {
    transform: translateY(-2px);
    border-color: var(--fh-border-strong) !important;
}

body.football-h2h-tracker .stat-label {
    font-size: 0.7rem !important;
    color: var(--fh-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-weight: 600 !important;
    margin-bottom: 0.3rem !important;
    text-align: left !important;
}

body.football-h2h-tracker .stat-value {
    font-family: inherit !important;
    font-size: 2.1rem !important;
    font-weight: 700 !important;
    color: var(--fh-text) !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: -0.03em !important;
    text-align: left !important;
    line-height: 1.05;
}

/* ---------- Game history ---------- */

body.football-h2h-tracker .game-history {
    background: var(--fh-surface) !important;
    border: 1px solid var(--fh-border) !important;
    border-radius: var(--fh-radius) !important;
    padding: 1.25rem 1.4rem !important;
    box-shadow: var(--fh-shadow-lift) !important;
    margin-top: 1.5rem !important;
    transition: border-color 0.15s ease !important;
}

body.football-h2h-tracker .game-history::before { display: none !important; }
body.football-h2h-tracker .game-history:hover {
    transform: none !important;
    box-shadow: var(--fh-shadow-lift) !important;
    border-color: var(--fh-border-strong) !important;
}

body.football-h2h-tracker .table-container {
    background: transparent !important;
    border: 1px solid var(--fh-border) !important;
    border-radius: var(--fh-radius-sm) !important;
    box-shadow: none !important;
    /* football-h2h.css line 1072 sets `overflow: hidden`, which clips the
       Actions column off the right edge when long (25-char) player names
       blow up the nowrap headers. Switch to horizontal scroll so every
       column stays reachable. */
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
}

/* Keep 7 columns legible: never let the table collapse below a width where
   cells are readable. With overflow-x:auto on the container, narrow
   viewports get a horizontal scroll instead of an unreadable squeeze. */
body.football-h2h-tracker .games-table {
    min-width: 680px;
}

/* Long player names in the score headers must not push the Actions column
   out of reach. Clamp the two player-name headers and ellipsize, keeping
   the sort indicator visible. */
body.football-h2h-tracker .games-table thead th {
    white-space: nowrap;
}
body.football-h2h-tracker .games-table thead th.sortable-header,
body.football-h2h-tracker .games-table thead th#player1TeamHeader,
body.football-h2h-tracker .games-table thead th#player2TeamHeader {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.football-h2h-tracker .games-table thead {
    background: var(--fh-surface-2) !important;
    color: var(--fh-muted) !important;
}

body.football-h2h-tracker .games-table thead th {
    padding: 0.85rem 0.9rem !important;
    color: var(--fh-muted) !important;
    background: transparent !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--fh-border) !important;
}

body.football-h2h-tracker .games-table td {
    background: transparent !important;
    color: var(--fh-text) !important;
    border-bottom-color: var(--fh-border) !important;
    padding: 0.7rem 0.9rem !important;
}

body.football-h2h-tracker .games-table tr:hover td {
    background: rgba(255, 255, 255, 0.025) !important;
}

/* ---------- Player comparison table (Player Stats tab) ----------
   Restores the green/red/olive cell highlighting that was bulldozed by
   my earlier `td { background: transparent }` blanket rule. The
   underlying JS still tags each cell with `.pc-cell-winning`,
   `.pc-cell-losing`, or `.pc-cell-tied` and handles the lower-is-better
   reversal for stats like Consistency σ, Current Losing Streak, and
   Longest Scoreless Streak — we just need to paint those classes at a
   specificity that beats the bare-`td` rule below. */

body.football-h2h-tracker .player-comparison-table {
    background: var(--fh-surface);
    border: 1px solid var(--fh-border);
    border-radius: var(--fh-radius-sm);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}
body.football-h2h-tracker .player-comparison-table th,
body.football-h2h-tracker .player-comparison-table td {
    border-bottom: 1px solid var(--fh-border);
    background: transparent;
    color: var(--fh-text);
}
body.football-h2h-tracker .player-comparison-table th {
    background: var(--fh-surface-2);
    color: var(--fh-muted);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

/* Winning/losing/tied cell tints — semi-transparent so the underlying
   surface dark colour shows through. Text stays white via the parent
   `td { color: var(--fh-text) }` declaration. Specificity (0, 3, 2)
   beats the bare-td rule (0, 2, 2) above, and the `!important` keeps
   us safe against any future-added overrides. */
body.football-h2h-tracker .player-comparison-table td.pc-cell-winning {
    background: rgba(52, 211, 153, 0.22) !important;
    background-color: rgba(52, 211, 153, 0.22) !important;
    color: #ffffff !important;
}
body.football-h2h-tracker .player-comparison-table td.pc-cell-losing {
    background: rgba(248, 113, 113, 0.22) !important;
    background-color: rgba(248, 113, 113, 0.22) !important;
    color: #ffffff !important;
}
body.football-h2h-tracker .player-comparison-table td.pc-cell-tied {
    background: rgba(180, 195, 70, 0.18) !important;
    background-color: rgba(180, 195, 70, 0.18) !important;
    color: #ffffff !important;
}

/* Stat-label column should never inherit a tint — it carries the row
   title, not a player value. */
body.football-h2h-tracker .player-comparison-table td.pc-cell-stat,
body.football-h2h-tracker .player-comparison-table .pc-stat-label {
    background: transparent !important;
    color: var(--fh-text) !important;
}
body.football-h2h-tracker .player-comparison-table .pc-stat-hint {
    color: var(--fh-muted) !important;
}

/* Make the winning value the visual leader: bold + tabular numerals so
   the eye lands on the higher number first. */
body.football-h2h-tracker .player-comparison-table td.pc-cell-winning .pc-cell-value {
    color: #d6fff1 !important;
    font-weight: 700;
}
body.football-h2h-tracker .player-comparison-table td.pc-cell-losing .pc-cell-value {
    color: #ffe4e6 !important;
}
body.football-h2h-tracker .player-comparison-table td.pc-cell-tied .pc-cell-value {
    color: #fefce8 !important;
}

/* ---------- Sidebar (shared with Mario Kart but scoped here) ---------- */

body.football-h2h-tracker .sidebar,
body.football-h2h-tracker.theme .sidebar {
    background: var(--fh-surface) !important;
    border-right: 1px solid var(--fh-border) !important;
    box-shadow: 2px 0 24px rgba(0, 0, 0, 0.5);
}

body.football-h2h-tracker .sidebar-header {
    border-bottom: 1px solid var(--fh-border);
    padding: 1rem 1.25rem;
}

body.football-h2h-tracker .sidebar-title {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--fh-muted) !important;
    font-family: inherit !important;
}

body.football-h2h-tracker .sidebar-section-title {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--fh-muted-2) !important;
    margin-bottom: 0.6rem !important;
    font-family: inherit !important;
}

body.football-h2h-tracker .sidebar-content { padding: 1.1rem 1.1rem 1.4rem; }
body.football-h2h-tracker .sidebar-section { margin-bottom: 1.4rem; }

body.football-h2h-tracker .sidebar-close-btn,
body.football-h2h-tracker.theme .sidebar-close-btn,
body.football-h2h-tracker .sidebar-header-clear {
    width: 30px !important;
    height: 30px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--fh-border) !important;
    color: var(--fh-muted) !important;
    /* Kill the sitewide theme trap's inset #555 ring (main.css
       button{box-shadow: inset 0 0 0 1px #555}); this chip is border-only. */
    box-shadow: none !important;
    border-radius: 8px !important;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
body.football-h2h-tracker .sidebar-close-btn:hover,
body.football-h2h-tracker .sidebar-header-clear:hover:not(:disabled) {
    background: var(--fh-surface-2) !important;
    border-color: var(--fh-border-strong) !important;
    color: var(--fh-text) !important;
    transform: none !important;
}

body.football-h2h-tracker .sidebar-player-settings-btn,
body.football-h2h-tracker .sidebar-add-game-btn,
body.football-h2h-tracker .sidebar-add-race-btn {
    background: linear-gradient(135deg, var(--fh-accent), var(--fh-accent-strong)) !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    padding: 0.7rem 0.85rem !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.28) !important;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: filter 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
}
body.football-h2h-tracker .sidebar-player-settings-btn:hover,
body.football-h2h-tracker .sidebar-add-game-btn:hover,
body.football-h2h-tracker .sidebar-player-settings-btn:hover:active,
body.football-h2h-tracker .sidebar-add-game-btn:hover:active {
    background: linear-gradient(135deg, var(--fh-accent), var(--fh-accent-strong)) !important;
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -6px rgba(99, 102, 241, 0.55) !important;
}

/* Football's own apps/football-h2h/css/sidebar.css sets
   `color: black !important` on every sidebar-action button variant
   (undo/redo/restore + the attribute-selector exportData/importData/
   toggleBackupMenu/restoreFromBackup rules), and body.theme repeats the
   same. Black text on a dark surface is invisible — we override every
   one of those selectors below at equal-or-higher specificity so the
   labels stay white. */

body.football-h2h-tracker .sidebar-action-btn,
body.football-h2h-tracker .sidebar .action-buttons button,
body.football-h2h-tracker .sidebar .action-buttons button[onclick*="exportData"],
body.football-h2h-tracker .sidebar .action-buttons button[onclick*="importData"],
body.football-h2h-tracker .sidebar .action-buttons button[onclick*="toggleBackupMenu"],
body.football-h2h-tracker .sidebar .action-buttons button[onclick*="restoreFromBackup"],
body.football-h2h-tracker.theme .sidebar-action-btn,
body.football-h2h-tracker.theme .sidebar .action-buttons button {
    background: var(--fh-surface-2) !important;
    color: #ffffff !important;
    border: 1px solid var(--fh-border-strong) !important;
    border-radius: 10px !important;
    padding: 0.6rem 0.85rem !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.55rem !important;
    line-height: 1 !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.08s ease;
}

body.football-h2h-tracker .sidebar-action-btn:hover:not(:disabled),
body.football-h2h-tracker .sidebar .action-buttons button:hover,
body.football-h2h-tracker .sidebar .action-buttons button[onclick*="exportData"]:hover,
body.football-h2h-tracker .sidebar .action-buttons button[onclick*="importData"]:hover,
body.football-h2h-tracker .sidebar .action-buttons button[onclick*="toggleBackupMenu"]:hover,
body.football-h2h-tracker .sidebar .action-buttons button[onclick*="restoreFromBackup"]:hover {
    background: var(--fh-surface-3) !important;
    border-color: #4a4f66 !important;
    color: #ffffff !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Specifically force the inner span colours — both .action-icon and
   .action-text would otherwise inherit the legacy `color: black` and
   render invisible against a dark surface. */
body.football-h2h-tracker .sidebar-action-btn .action-text,
body.football-h2h-tracker .sidebar .action-buttons button .action-text,
body.football-h2h-tracker.theme .sidebar-action-btn .action-text {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    color: #ffffff !important;
    font-weight: 500;
}

body.football-h2h-tracker .sidebar-action-btn .action-icon,
body.football-h2h-tracker .sidebar .action-buttons button .action-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    font-size: 1rem !important;
    width: auto !important;
    min-width: 0 !important;
    color: #ffffff !important;
}

/* Per-button identity tint — applied only to the icon glyph so the
   label stays unambiguously white but the row still scans by colour. */
body.football-h2h-tracker .sidebar-action-btn.restore-btn .action-icon,
body.football-h2h-tracker .sidebar .action-buttons button[onclick*="restoreFromBackup"] .action-icon {
    color: var(--fh-good) !important;
}
body.football-h2h-tracker .sidebar-action-btn.export-btn .action-icon,
body.football-h2h-tracker .sidebar .action-buttons button[onclick*="exportData"] .action-icon {
    color: var(--fh-good) !important;
}
body.football-h2h-tracker .sidebar-action-btn.import-btn .action-icon,
body.football-h2h-tracker .sidebar .action-buttons button[onclick*="importData"] .action-icon {
    color: #5eead4 !important;
}
body.football-h2h-tracker .sidebar-action-btn.backup-btn .action-icon,
body.football-h2h-tracker .sidebar .action-buttons button[onclick*="toggleBackupMenu"] .action-icon {
    color: #60a5fa !important;
}

/* ---------- Undo / Redo toolbar pair ---------- */

body.football-h2h-tracker .sidebar-action-buttons-group {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
    margin-bottom: 0.6rem;
}

body.football-h2h-tracker .sidebar-action-btn.undo-btn,
body.football-h2h-tracker .sidebar-action-btn.redo-btn {
    background: var(--fh-surface-2) !important;
    color: var(--fh-text) !important;
    border: 1px solid var(--fh-border-strong) !important;
    border-radius: 10px !important;
    padding: 0.55rem 0.6rem !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    width: 100%;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    line-height: 1 !important;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.08s ease;
}

body.football-h2h-tracker .sidebar-action-btn.undo-btn .action-icon,
body.football-h2h-tracker .sidebar-action-btn.redo-btn .action-icon {
    color: var(--fh-accent) !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    font-weight: 700;
}

body.football-h2h-tracker .sidebar-action-btn.undo-btn .action-text,
body.football-h2h-tracker .sidebar-action-btn.redo-btn .action-text {
    color: var(--fh-text) !important;
    font-weight: 600;
    letter-spacing: 0.01em;
}

body.football-h2h-tracker .sidebar-action-btn.undo-btn:hover:not(:disabled),
body.football-h2h-tracker .sidebar-action-btn.redo-btn:hover:not(:disabled) {
    background: var(--fh-accent-soft) !important;
    border-color: rgba(129, 140, 248, 0.55) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}
body.football-h2h-tracker .sidebar-action-btn.undo-btn:hover:not(:disabled) .action-icon,
body.football-h2h-tracker .sidebar-action-btn.redo-btn:hover:not(:disabled) .action-icon,
body.football-h2h-tracker .sidebar-action-btn.undo-btn:hover:not(:disabled) .action-text,
body.football-h2h-tracker .sidebar-action-btn.redo-btn:hover:not(:disabled) .action-text {
    color: #ffffff !important;
}

body.football-h2h-tracker .sidebar-action-btn.undo-btn:active:not(:disabled),
body.football-h2h-tracker .sidebar-action-btn.redo-btn:active:not(:disabled) {
    transform: translateY(0);
    background: rgba(99, 102, 241, 0.22) !important;
}

body.football-h2h-tracker .sidebar-action-btn.undo-btn:disabled,
body.football-h2h-tracker .sidebar-action-btn.redo-btn:disabled,
body.football-h2h-tracker .sidebar-action-btn.undo-btn[disabled],
body.football-h2h-tracker .sidebar-action-btn.redo-btn[disabled] {
    opacity: 0.42 !important;
    cursor: not-allowed !important;
    pointer-events: none;
    background: var(--fh-surface-2) !important;
    border-color: var(--fh-border) !important;
    transform: none !important;
}
body.football-h2h-tracker .sidebar-action-btn.undo-btn:disabled .action-icon,
body.football-h2h-tracker .sidebar-action-btn.redo-btn:disabled .action-icon {
    color: var(--fh-muted) !important;
}

body.football-h2h-tracker .sidebar .filter-btn,
body.football-h2h-tracker .sidebar .date-filter-btn,
body.football-h2h-tracker.theme .sidebar .filter-btn,
body.football-h2h-tracker.theme .sidebar .date-filter-btn {
    background: var(--fh-surface-2) !important;
    color: #ffffff !important;
    border: 1px solid var(--fh-border-strong) !important;
    border-radius: 999px !important;
    padding: 0.5rem 0.9rem !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    width: 100%;
    box-shadow: none !important;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
body.football-h2h-tracker .sidebar .filter-btn:hover:not(.active),
body.football-h2h-tracker .sidebar .date-filter-btn:hover:not(.active) {
    background: var(--fh-surface-3) !important;
    border-color: #4a4f66 !important;
    color: #ffffff !important;
    transform: none !important;
}
body.football-h2h-tracker .sidebar .filter-btn.active,
body.football-h2h-tracker .sidebar .date-filter-btn.active,
body.football-h2h-tracker.theme .sidebar .filter-btn.active,
body.football-h2h-tracker.theme .sidebar .date-filter-btn.active {
    background: linear-gradient(135deg, var(--fh-accent), var(--fh-accent-strong)) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.28) !important;
}

body.football-h2h-tracker .sidebar-date-btn-container {
    background: var(--fh-surface-2) !important;
    border: 1px solid var(--fh-border) !important;
    border-radius: 10px !important;
}
body.football-h2h-tracker .sidebar-date-today-btn,
body.football-h2h-tracker.theme .sidebar-date-today-btn {
    background: var(--fh-surface-2) !important;
    color: #ffffff !important;
    border: 1px solid var(--fh-border-strong) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}
body.football-h2h-tracker .sidebar-date-today-btn:hover,
body.football-h2h-tracker.theme .sidebar-date-today-btn:hover {
    background: var(--fh-surface-3) !important;
    border-color: #4a4f66 !important;
    color: #ffffff !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Sidebar toggle (floating hamburger) */
body.football-h2h-tracker .sidebar-toggle,
body.football-h2h-tracker.theme .sidebar-toggle {
    background: linear-gradient(135deg, var(--fh-accent), var(--fh-accent-strong)) !important;
    /* Pin white so the sitewide theme trap (main.css button{color:#555!important})
       can't gray the hamburger icon's currentColor. */
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ---------- Inputs ---------- */

body.football-h2h-tracker input[type="text"],
body.football-h2h-tracker input[type="number"],
body.football-h2h-tracker input[type="date"],
body.football-h2h-tracker select,
body.football-h2h-tracker textarea {
    background: var(--fh-surface-2) !important;
    color: var(--fh-text) !important;
    border: 1px solid var(--fh-border) !important;
    border-radius: 10px !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
body.football-h2h-tracker input[type="text"]:focus,
body.football-h2h-tracker input[type="number"]:focus,
body.football-h2h-tracker input[type="date"]:focus,
body.football-h2h-tracker select:focus,
body.football-h2h-tracker textarea:focus {
    outline: none !important;
    border-color: var(--fh-accent) !important;
    box-shadow: 0 0 0 3px var(--fh-accent-soft) !important;
    background: var(--fh-surface) !important;
}

/* ---------- Game History row action buttons (edit / delete) ----------
   The live rows render `.edit-btn` / `.delete-btn` (js/football-h2h.js
   renderGamesTableWithData). The shared mario-kart forms.css paints those
   as solid blue / red slabs whose non-!important `color` loses to the
   sitewide theme trap (assets/css/main.css `button{color:#555!important}`),
   leaving gray labels that go red on hover. This block — the intended ghost
   chip design that previously targeted dead `.btn-icon.edit/.delete`
   classes — is retargeted onto the live `.edit-btn/.delete-btn` selectors
   with !important pins on color/background across base/:hover/:hover:active
   so both forms.css and the theme trap are beaten. */

body.football-h2h-tracker .games-table .action-buttons,
body.football-h2h-tracker .games-table td .action-buttons,
body.football-h2h-tracker .games-table td.actions {
    display: inline-flex !important;
    gap: 0.3rem !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0.7rem 0.9rem !important;
    background: transparent !important;
    border: none !important;
}
body.football-h2h-tracker .games-table td.actions {
    white-space: nowrap;
}

body.football-h2h-tracker .games-table .edit-btn,
body.football-h2h-tracker .games-table .delete-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--fh-border) !important;
    border-radius: 7px !important;
    color: var(--fh-muted) !important;
    box-shadow: none !important;
    font-size: 0.9rem !important;
    line-height: 1 !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.15s ease, color 0.15s ease,
                border-color 0.15s ease, transform 0.12s ease,
                box-shadow 0.15s ease !important;
}

/* Edit chip — soft indigo accent. Outline at rest, fills on hover.
   :hover:active is pinned too so the theme trap's red active state can't
   bleed through. */
body.football-h2h-tracker .games-table .edit-btn {
    color: #93c5fd !important;
}
body.football-h2h-tracker .games-table .edit-btn:hover,
body.football-h2h-tracker .games-table .edit-btn:hover:active {
    background: rgba(59, 130, 246, 0.18) !important;
    border-color: rgba(96, 165, 250, 0.55) !important;
    color: #dbeafe !important;
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 4px 10px -4px rgba(59, 130, 246, 0.45) !important;
}

/* Delete chip — neutral ghost at rest, danger-red on hover only. */
body.football-h2h-tracker .games-table .delete-btn {
    color: var(--fh-muted) !important;
}
body.football-h2h-tracker .games-table .delete-btn:hover,
body.football-h2h-tracker .games-table .delete-btn:hover:active {
    background: rgba(248, 113, 113, 0.18) !important;
    border-color: rgba(248, 113, 113, 0.55) !important;
    color: #fecaca !important;
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 4px 10px -4px rgba(248, 113, 113, 0.45) !important;
}

body.football-h2h-tracker .games-table .edit-btn:active,
body.football-h2h-tracker .games-table .delete-btn:active {
    transform: translateY(0) scale(0.98);
}
body.football-h2h-tracker .games-table .edit-btn:focus-visible,
body.football-h2h-tracker .games-table .delete-btn:focus-visible {
    outline: 2px solid var(--fh-accent) !important;
    outline-offset: 2px !important;
}

/* ---------- Empty/zero stat-card body — promote visual hierarchy when value = "0" ---------- */

body.football-h2h-tracker .stats-grid .stat-card .stat-value:not(:empty) {
    /* Keep visual; the 0 still reads as a tabular number. */
}

/* ---------- Scrollbars ---------- */

body.football-h2h-tracker ::-webkit-scrollbar { width: 10px; height: 10px; }
body.football-h2h-tracker ::-webkit-scrollbar-track { background: transparent !important; }
body.football-h2h-tracker ::-webkit-scrollbar-thumb {
    background: var(--fh-border-strong) !important;
    border: 3px solid var(--fh-bg) !important;
    background-clip: content-box !important;
    border-radius: 999px !important;
}
body.football-h2h-tracker ::-webkit-scrollbar-thumb:hover {
    background: #4a4f66 !important;
    background-clip: content-box !important;
}

/* ---------- Tiny "empty league" hint above stats when player counts are all zero.
   Adds an editorial cue using a pseudo-element on the H2H tab body. The
   element is content-only (no DOM change) and is removed by JS that
   already manipulates the underlying values — safe to add. ---------- */

body.football-h2h-tracker .stats-tab-content.active#h2h-stats::before {
    content: "";
    display: none;
}

/* ---------- Feature 1: Current streak badge ---------- */

body.football-h2h-tracker .streak-row {
    margin-bottom: 0.25rem;
}

body.football-h2h-tracker .streak-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border: 1px solid var(--fh-border-strong);
    background: var(--fh-surface-2);
    color: var(--fh-muted);
}

body.football-h2h-tracker .streak-badge.streak-win {
    background: var(--fh-good-soft);
    border-color: rgba(52, 211, 153, 0.45);
    color: var(--fh-good);
}

body.football-h2h-tracker .streak-badge.streak-lose {
    background: var(--fh-bad-soft);
    border-color: rgba(248, 113, 113, 0.45);
    color: var(--fh-bad);
}

body.football-h2h-tracker .streak-badge.streak-none {
    opacity: 0.6;
}

/* ---------- Feature 2: Recent form strip ---------- */

body.football-h2h-tracker .form-strip-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--fh-surface);
    border: 1px solid var(--fh-border);
    border-radius: var(--fh-radius);
    padding: 0.85rem 1.2rem;
    margin-bottom: 1rem;
    box-shadow: var(--fh-shadow-lift);
}

body.football-h2h-tracker .form-strip-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

body.football-h2h-tracker .form-strip-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--fh-muted);
    min-width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}

body.football-h2h-tracker .form-strip-dots {
    display: flex;
    gap: 0.3rem;
}

body.football-h2h-tracker .form-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    cursor: default;
}

body.football-h2h-tracker .form-dot-w {
    background: var(--fh-good);
}

body.football-h2h-tracker .form-dot-l {
    background: var(--fh-bad);
}

body.football-h2h-tracker .form-dot-d {
    background: var(--fh-warn);
}

/* ---------- Feature 3: Match note in table ---------- */

body.football-h2h-tracker .game-note {
    font-style: italic;
    font-size: 0.72rem;
    color: var(--fh-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

body.football-h2h-tracker .sidebar-note-section {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

body.football-h2h-tracker .sidebar-note-section label {
    font-size: 0.78rem;
    color: var(--fh-muted);
}

/* ---------- Feature 4: Team matchup lookup ---------- */

body.football-h2h-tracker .matchup-lookup {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

body.football-h2h-tracker .matchup-selects {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

body.football-h2h-tracker .matchup-select-group {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
    min-width: 120px;
}

body.football-h2h-tracker .matchup-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--fh-muted);
}

body.football-h2h-tracker .matchup-select {
    background: var(--fh-surface-2);
    border: 1px solid var(--fh-border);
    border-radius: 10px;
    color: var(--fh-text);
    /* The native dropdown list follows color-scheme, not the box styles */
    color-scheme: dark;
    padding: 0.45rem 0.7rem;
    font-size: 0.85rem;
    cursor: pointer;
}

/* Pagination buttons: the shared mario-kart-overrides.css pins color and
   background against the sitewide theme trap, but not box-shadow, so
   main.css `button { box-shadow: inset 0 0 0 1px #555555 }` painted a gray
   inner ring on every non-active pagination button. Pin flat at rest and
   restore pagination.css's intended indigo hover lift across hover/press.
   The active-page ring (`body.theme .pagination-btn.active` in
   mario-kart-overrides, !important at higher specificity) still wins. */
body.football-h2h-tracker .pagination-btn {
    box-shadow: none !important;
}
body.football-h2h-tracker .pagination-btn:hover:not(:disabled),
body.football-h2h-tracker .pagination-btn:hover:active:not(:disabled) {
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3) !important;
}

/* Dark theme for the shared pagination rows-per-page select (the shared
   assets/css/pagination.css hardcodes a white background) */
body.football-h2h-tracker .pagination-size select {
    background: var(--fh-surface-2);
    border-color: var(--fh-border);
    color: var(--fh-text);
    color-scheme: dark;
}

/* Dark dropdown LISTS for every select in the app. The popup follows the
   DOCUMENT color-scheme (declared via <meta name="color-scheme" content="dark">
   in index.html) in Chromium; explicit option styling covers browsers/versions
   that paint options from author styles instead. */
body.football-h2h-tracker select option {
    background-color: #181c26;
    color: #f1f3f8;
}

body.football-h2h-tracker .matchup-vs {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--fh-muted-2);
    padding-top: 1.2rem;
    flex-shrink: 0;
}

body.football-h2h-tracker .matchup-result {
    background: var(--fh-surface-2);
    border: 1px solid var(--fh-border);
    border-radius: var(--fh-radius-sm);
    padding: 0.8rem 1rem;
}

body.football-h2h-tracker .matchup-result-grid {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}

body.football-h2h-tracker .matchup-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    flex: 1;
}

body.football-h2h-tracker .matchup-stat-label {
    font-size: 0.68rem;
    color: var(--fh-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 600;
}

body.football-h2h-tracker .matchup-stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--fh-text);
    font-variant-numeric: tabular-nums;
}

body.football-h2h-tracker .matchup-stat-draw .matchup-stat-value {
    color: var(--fh-warn);
    font-size: 1.3rem;
}

body.football-h2h-tracker .matchup-games-played {
    width: 100%;
    text-align: center;
    font-size: 0.72rem;
    color: var(--fh-muted-2);
    margin-top: 0.25rem;
}

body.football-h2h-tracker .matchup-no-data {
    color: var(--fh-muted);
    font-size: 0.85rem;
}

/* ---------- Feature 5: Session summary modal ---------- */

body.football-h2h-tracker .session-summary-text {
    font-family: "Menlo", "Consolas", "Courier New", monospace;
    font-size: 0.82rem;
    line-height: 1.7;
    color: var(--fh-text);
    background: var(--fh-surface-2);
    border: 1px solid var(--fh-border);
    border-radius: 8px;
    padding: 0.9rem 1rem;
    white-space: pre-wrap;
    max-height: 360px;
    overflow-y: auto;
}

body.football-h2h-tracker .sidebar-action-btn.summary-btn {
    width: 100%;
    margin-bottom: 0.5rem;
}

/* ---------- FIX: restore the game history table at <=900px ----------
   apps/mario-kart/css/mario-kart-overrides.css:609-617 hides .table-container
   and shows .mobile-cards below 900px for Mario Kart's table->cards swap.
   Football H2H imports that sheet but renders NO .mobile-cards markup, so
   tablet + mobile users saw NO game history (and no #noGames notice) at all.
   Restore the table here, app-scoped, with horizontal scroll so the 7
   columns stay legible. (We do NOT touch the shared mario-kart file.) */
@media (max-width: 900px) {
    body.football-h2h-tracker .table-container {
        display: block !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    /* Flexbox intrinsic-width propagation guard: body and .app-container are
       flex containers, and flex items default to min-width:auto, so the
       680px-min-width table inflated the wrapper chain
       (.app-container 762px > .main-wrapper/.game-history 725px) and pushed
       every section (stat cards included) onto an oversized canvas that body
       then clipped at the viewport edge. min-width:0 makes the chain respect
       the viewport so the table scrolls INSIDE its container. */
    body.football-h2h-tracker .app-container,
    body.football-h2h-tracker .main-wrapper,
    body.football-h2h-tracker .game-history {
        min-width: 0 !important;
        max-width: 100% !important;
    }
    /* Smaller floating sidebar toggle on phones (owner request 2026-06-07):
       the 48px box sat on top of the centered app title at narrow widths.
       40px keeps the >=40px touch target; the title also gets symmetric side
       padding below so it can never run under the toggle. (!important needed:
       the shared mario-kart-overrides pins 48px at <=768 with !important.) */
    body.football-h2h-tracker .sidebar-toggle {
        width: 40px !important;
        height: 40px !important;
        top: 58px !important;
        left: 10px !important;
        border-radius: 10px !important;
    }
    body.football-h2h-tracker .sidebar-toggle svg {
        width: 18px !important;
        height: 18px !important;
    }
    body.football-h2h-tracker .app-title {
        padding-left: 56px;
        padding-right: 56px;
    }
    /* #noGames lives inside .table-container; restoring the container above
       brings the empty-state notice back too. Its block/none visibility is
       still governed by the inline style the render code sets. */
    /* Mario Kart's .mobile-cards is shown by the shared override but has no
       markup here; keep it collapsed so it can't reserve empty space. */
    body.football-h2h-tracker .mobile-cards {
        display: none !important;
    }
}

/* ---------- FIX: back-to-top FAB above the modal backdrop ----------
   The sitewide back-to-top button (assets/js/back-to-top.js) only enters its
   anchored "modal mode" (z-index 11001, above the panel) for containers that
   carry `data-back-to-top`. The icon-selector modal opts in and is fine. But
   the dynamic confirm/success/import dialogs (.modal-overlay, z-index 1000)
   do NOT opt in, so when the page behind them is scrolled past the FAB's
   400px threshold the FAB stays in window mode at z-index 9000 and floats
   ABOVE the dialog backdrop. Hide it whenever a .modal-overlay is open. The
   icon-selector modal uses .modal.active (not .modal-overlay), so its
   intended FAB behaviour is untouched. */
body.football-h2h-tracker:has(.modal-overlay) .back-to-top {
    display: none !important;
}

/* ---------- FIX: off-palette button cleanup (align to indigo) ---------- */

/* Custom-range Apply button: a bare <button> with no override, so it fell
   to the sitewide theme trap (gray ghost, red on hover). Give it the app's
   primary-action look (same indigo family as Add Game), pinned across
   base/:hover/:hover:active so the trap can't recolour it. */
body.football-h2h-tracker .custom-date-range button {
    background: linear-gradient(135deg, var(--fh-accent), var(--fh-accent-strong)) !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    padding: 0.5rem 1.1rem !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.28) !important;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
}
body.football-h2h-tracker .custom-date-range button:hover,
body.football-h2h-tracker .custom-date-range button:hover:active {
    background: linear-gradient(135deg, var(--fh-accent), var(--fh-accent-strong)) !important;
    color: #ffffff !important;
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -6px rgba(99, 102, 241, 0.55) !important;
}

/* Session-summary Copy button (#copy-summary-btn, a .modal-btn-primary that
   ships purple #8b5cf6): retint to the app's indigo so the modal primaries
   match the sidebar primary family. color:white is already pinned upstream. */
body.football-h2h-tracker #copy-summary-btn.modal-btn-primary {
    background: linear-gradient(135deg, var(--fh-accent), var(--fh-accent-strong)) !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
}
body.football-h2h-tracker #copy-summary-btn.modal-btn-primary:hover {
    background: linear-gradient(135deg, var(--fh-accent-strong), #4f46e5) !important;
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4) !important;
}

/* Icon-selector modal header accent: the underline strip mixed green +
   indigo + magenta. Align to a clean indigo so it matches the unified
   accent used by the sidebar panels and buttons. */
body.football-h2h-tracker #iconSelectorModal .modal-header::after {
    background: linear-gradient(90deg, var(--fh-accent), var(--fh-accent-strong)) !important;
}

/* ---------- FIX: player-settings panel headings ----------
   "Player Names" / "Player Icons" used a large centered .section-title. The
   blanket `body.football-h2h-tracker .section-title` rule above (1.15rem,
   left) plus football-h2h.css collide here. Pin them, last-sheet + body
   prefix, to the sidebar's uppercase muted section-label idiom (matching
   PLAYER SETTINGS / ACTIONS / DATE FILTER). */
body.football-h2h-tracker .player-settings-section .section-title {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--fh-muted-2) !important;
    margin: 0 0 0.75rem !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    text-align: left !important;
}

/* ---------- FIX: add-game form field consistency ----------
   The goal/team groups read as boxed field groups; Note and Penalty Result
   sat bare. Give every field group in the add-game form the same quiet
   boxed surface so the form reads as one set of consistent fields. */
body.football-h2h-tracker .sidebar-game-form .sidebar-game-goals .sidebar-player-input,
body.football-h2h-tracker .sidebar-game-form .sidebar-game-goals .sidebar-penalty-section,
body.football-h2h-tracker .sidebar-game-form .sidebar-game-goals .sidebar-note-section,
body.football-h2h-tracker .sidebar-game-form .sidebar-game-teams > .sidebar-player-input {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--fh-border);
    border-radius: 10px;
    padding: 0.7rem 0.8rem;
    margin-bottom: 0.7rem;
}

/* ---------- FIX: toast positioning at small viewports ----------
   showToast (modalUtils.js) sets top:80px / max-width:400px inline. At 390px
   that 400px overflows the viewport and the toast crowds the app title.
   Override with !important (beats inline non-important) to sit below the site
   header, fit the viewport, and wrap readably. */
@media (max-width: 480px) {
    body.football-h2h-tracker .toast {
        top: 64px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        max-width: calc(100vw - 24px) !important;
        width: max-content !important;
        white-space: normal !important;
        text-align: center;
        padding: 12px 18px !important;
    }
}