/* =====================================================================
   HowzCric — Global Theme System
   Light + Dark tokens, shared component skins, motion.
   Loaded AFTER every other stylesheet on every page so these custom
   properties win the cascade without having to touch legacy per-page
   styles. Where legacy pages hardcode hex colors instead of var(...),
   the [data-theme="dark"] override blocks below target those known
   classes directly (higher specificity via the attribute selector).
   ===================================================================== */

:root {
    color-scheme: light;

    /* Brand */
    --hc-navy:        #0f2547;
    --hc-navy-deep:   #0a1628;
    --hc-green:       #1eb854;
    --hc-green-deep:  #0f7a37;
    --hc-green-light: #22c55e;
    --hc-gold:        #ffb703;
    --hc-red:         #ef4444;

    /* Legacy variable names kept in sync so old inline styles inherit
       the new palette automatically wherever they used var(...). */
    --primary-color: var(--hc-green);
    --primary-dark:  var(--hc-green-deep);
    --accent-color:  var(--hc-gold);
    --bg-soft:        #f3f6fa;

    /* Surfaces */
    --surface:        #ffffff;
    --surface-alt:     #f3f6fa;
    --surface-raised:  #ffffff;
    --border-color:    #e6ebf1;
    --bg-page:          #eef2f7;

    /* Text */
    --text-primary:   #0f2547;
    --text-secondary: #5b6b82;
    --text-muted:     #8a97a8;
    --text-on-brand:  #ffffff;

    /* Feedback */
    --success: #1eb854;
    --danger:  #ef4444;
    --warning: #ffb703;
    --info:    #3b82f6;

    /* Elevation */
    --shadow-sm: 0 2px 8px rgba(15, 37, 71, 0.06);
    --shadow-md: 0 8px 24px rgba(15, 37, 71, 0.10);
    --shadow-lg: 0 18px 48px rgba(15, 37, 71, 0.16);
    --shadow-glow-green: 0 0 24px rgba(30, 184, 84, 0.35);

    /* Radii + motion */
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 22px;
    --r-pill: 999px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --dur: 0.25s;
}

/* Every legacy page redefines its own `:root { --primary-color: ... }`
   block with the old hardcoded green, and some pages load their inline
   <style> AFTER this file. `:root` and `html:root` share the same
   element but `html:root` has one extra type-selector's worth of
   specificity, so this repeat block always wins the cascade regardless
   of load order — the single reliable way to guarantee every page picks
   up the new brand palette without having to hand-edit each page's
   inline CSS. */
html:root {
    --primary-color: var(--hc-green);
    --primary-dark:  var(--hc-green-deep);
    --accent-color:  var(--hc-gold);
    --bg-soft: #f3f6fa;
}

html[data-theme="dark"] {
    color-scheme: dark;

    --primary-color: var(--hc-green-light);
    --primary-dark:  var(--hc-green);
    --accent-color:  var(--hc-gold);
    --bg-soft: #0f1c30;

    --surface:        #132743;
    --surface-alt:    #0f2038;
    --surface-raised: #16304f;
    --border-color:   #24405f;
    --bg-page:        #0a1628;

    --text-primary:   #eef3fb;
    --text-secondary: #a9b8cc;
    --text-muted:     #7c8ba0;
    --text-on-brand:  #ffffff;

    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.38);
    --shadow-lg: 0 22px 56px rgba(0, 0, 0, 0.5);
    --shadow-glow-green: 0 0 28px rgba(34, 197, 94, 0.45);
}

/* Smooth theme transition on every element */
html.theme-ready,
html.theme-ready * {
    transition: background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
}
/* Don't transition transform/animation-driven elements — keeps
   coin flips, confetti and spinners crisp. */
html.theme-ready .no-theme-transition,
html.theme-ready .coin, html.theme-ready .coin *,
html.theme-ready .confetti-canvas { transition: none !important; }

body {
    background: var(--bg-page) !important;
    color: var(--text-primary);
}

/* ---------------------------------------------------------------------
   Dark-mode overrides for known legacy component classes across pages
   (kept selector-scoped so we don't need to touch every page's CSS).
   --------------------------------------------------------------------- */
html[data-theme="dark"] body { background: var(--bg-page) !important; }

html[data-theme="dark"] .app-sidebar { background: var(--surface) !important; border-right-color: var(--border-color) !important; }
html[data-theme="dark"] .app-sidebar .side-profile { border-bottom-color: var(--border-color) !important; }
html[data-theme="dark"] .app-sidebar .side-profile .p-name { color: var(--text-primary) !important; }
html[data-theme="dark"] .app-sidebar .side-links a { color: var(--text-secondary) !important; }
html[data-theme="dark"] .app-sidebar .side-links a:hover { background: var(--surface-alt) !important; color: var(--text-primary) !important; }
html[data-theme="dark"] .app-sidebar .side-links a.active { background: linear-gradient(135deg, rgba(30,184,84,0.18), rgba(30,184,84,0.08)) !important; color: var(--hc-green-light) !important; }
html[data-theme="dark"] .app-sidebar .side-links a.active i { color: var(--hc-green-light) !important; }

html[data-theme="dark"] .container-narrow,
html[data-theme="dark"] .page-header ~ * { color: var(--text-primary); }

html[data-theme="dark"] .toss-card,
html[data-theme="dark"] .card-block,
html[data-theme="dark"] .card,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .match-card,
html[data-theme="dark"] .list-card,
html[data-theme="dark"] .search-card,
html[data-theme="dark"] .matches-card,
html[data-theme="dark"] .section-card,
html[data-theme="dark"] .player-card,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .bday-card,
html[data-theme="dark"] .upcoming-card,
html[data-theme="dark"] .content-wrapper .card-block {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-sm) !important;
    border-color: var(--border-color) !important;
}

/* Common muted/soft backgrounds legacy pages hardcode (#f4f7f6, #f8f9fa,
   #eef2f0 etc.) — remap to the themed surface-alt tone in dark mode. */
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .search-card .form-control,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .badge-light {
    background: var(--surface-alt) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6,
html[data-theme="dark"] p, html[data-theme="dark"] span, html[data-theme="dark"] label,
html[data-theme="dark"] li, html[data-theme="dark"] td, html[data-theme="dark"] th {
    color: var(--text-primary);
}
html[data-theme="dark"] .text-muted { color: var(--text-muted) !important; }

html[data-theme="dark"] .form-control,
html[data-theme="dark"] select,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea {
    background: var(--surface-alt) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .form-control:focus { border-color: var(--hc-green-light) !important; }
html[data-theme="dark"] .input-group-text { background: var(--surface-alt) !important; color: var(--text-secondary) !important; border-color: var(--border-color) !important; }

html[data-theme="dark"] table { color: var(--text-primary); }
html[data-theme="dark"] table thead { background: var(--surface-alt) !important; }
html[data-theme="dark"] table td, html[data-theme="dark"] table th { border-color: var(--border-color) !important; }
html[data-theme="dark"] tbody tr:hover { background: var(--surface-alt) !important; }

html[data-theme="dark"] hr { border-color: var(--border-color) !important; }
html[data-theme="dark"] .modal-content { background: var(--surface) !important; color: var(--text-primary) !important; }

/* SweetAlert2 dark mode */
html[data-theme="dark"] .swal2-popup { background: var(--surface) !important; color: var(--text-primary) !important; }

/* AdminLTE content background often white/grey */
html[data-theme="dark"] .content-wrapper,
html[data-theme="dark"] .wrapper { background: var(--bg-page) !important; }

/* ---------------------------------------------------------------------
   Extra legacy containers that hardcode a white/#fff background and
   were missed by the class list above (each still ships its own
   `background: #fff` in a per-page <style> block). Kept as its own
   group so it's easy to extend if another one turns up. Uses
   !important so it always wins over the per-page rule regardless of
   which stylesheet happens to load first.
   --------------------------------------------------------------------- */
html[data-theme="dark"] .panel,
html[data-theme="dark"] .selection-bar,
html[data-theme="dark"] .filter-bar,
html[data-theme="dark"] .sort-toggle,
html[data-theme="dark"] .page-btn,
html[data-theme="dark"] .page-num,
html[data-theme="dark"] .register-card,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .btn-copy-prev-team,
html[data-theme="dark"] .wrap {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-sm) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .page-num.active { background: var(--primary-color) !important; color: #fff !important; }
html[data-theme="dark"] .sort-toggle button.active { background: var(--primary-color) !important; color: #fff !important; }

/* ---------------------------------------------------------------------
   Legacy per-page text classes that hardcode a dark literal color
   (#222 / #333 / #444 / #888 etc.) directly on the element itself.
   Card/panel *backgrounds* already switch to a dark surface above, but
   a hardcoded color on the element always wins over anything it would
   otherwise inherit, so each one needs its own explicit override here.
   Grouped by the shared "primary text" vs "secondary/muted text" role
   so new legacy classes can be dropped into the right bucket later.
   --------------------------------------------------------------------- */
html[data-theme="dark"] .p-name,
html[data-theme="dark"] .m-name,
html[data-theme="dark"] .ts-name,
html[data-theme="dark"] .count-text,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .player-row,
html[data-theme="dark"] .perf-block,
html[data-theme="dark"] .run-btn,
html[data-theme="dark"] .name,
html[data-theme="dark"] .title,
html[data-theme="dark"] .form-title {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .perf-block .perf-lbl,
html[data-theme="dark"] .perf-block .perf-sub,
html[data-theme="dark"] .p-mobile,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .empty-note,
html[data-theme="dark"] .no-results-note,
html[data-theme="dark"] .no-matches,
html[data-theme="dark"] .sub,
html[data-theme="dark"] .m-meta,
html[data-theme="dark"] .toss-row,
html[data-theme="dark"] .ts-stats,
html[data-theme="dark"] .lbl,
html[data-theme="dark"] .dnb-note,
html[data-theme="dark"] .roster-count,
html[data-theme="dark"] .viewer-note,
html[data-theme="dark"] .status,
html[data-theme="dark"] .sc-dnb,
html[data-theme="dark"] .sc-extras,
html[data-theme="dark"] .extras-line { color: var(--text-muted) !important; }
html[data-theme="dark"] .over-ball:not(.boundary4):not(.boundary6):not(.wicket):not(.extra) { color: var(--text-primary) !important; }

/* ---------------------------------------------------------------------
   Theme toggle switch (injected into the header)
   --------------------------------------------------------------------- */
.theme-toggle {
    --tt-w: 52px;
    --tt-h: 28px;
    width: var(--tt-w);
    height: var(--tt-h);
    border-radius: var(--r-pill);
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.28);
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 0;
    transition: background var(--dur) var(--ease);
}
.theme-toggle:hover { background: rgba(255,255,255,0.26); }
.theme-toggle .tt-knob {
    position: absolute;
    top: 2px; left: 2px;
    width: calc(var(--tt-h) - 4px);
    height: calc(var(--tt-h) - 4px);
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--hc-navy);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    transition: transform 0.28s var(--ease);
}
html[data-theme="dark"] .theme-toggle .tt-knob {
    transform: translateX(calc(var(--tt-w) - var(--tt-h)));
    color: var(--hc-gold);
}

/* Standalone floating toggle used on pages without the shared header (login) */
.theme-toggle-floating {
    position: fixed;
    top: 16px; right: 16px;
    z-index: 2000;
}

/* ---------------------------------------------------------------------
   Light-mode polish — subtle definition + a nicer focus/hover feel for
   the same shared card/control classes already re-themed for dark mode
   above, so both modes feel equally finished.
   --------------------------------------------------------------------- */
html:not([data-theme="dark"]) .toss-card,
html:not([data-theme="dark"]) .card-block,
html:not([data-theme="dark"]) .card,
html:not([data-theme="dark"]) .info-card,
html:not([data-theme="dark"]) .stat-card,
html:not([data-theme="dark"]) .match-card,
html:not([data-theme="dark"]) .list-card,
html:not([data-theme="dark"]) .search-card,
html:not([data-theme="dark"]) .matches-card,
html:not([data-theme="dark"]) .section-card,
html:not([data-theme="dark"]) .player-card,
html:not([data-theme="dark"]) .profile-card,
html:not([data-theme="dark"]) .panel,
html:not([data-theme="dark"]) .upcoming-card {
    border: 1px solid var(--border-color);
}

/* A touch more lift + a green-tinted shadow on hover for anything
   clickable, so the light theme feels a little more alive instead of
   flat white-on-grey. */
html:not([data-theme="dark"]) .match-card:hover,
html:not([data-theme="dark"]) .player-card:hover,
html:not([data-theme="dark"]) .stat-card:hover,
html:not([data-theme="dark"]) .upcoming-card:hover,
html:not([data-theme="dark"]) .search-card:hover {
    box-shadow: 0 10px 26px -6px rgba(30, 184, 84, 0.22);
}

/* Consistent, on-brand focus ring for every input/select/textarea and
   button, in both themes — several legacy pages relied only on the
   browser default outline (or none at all). */
input:focus-visible, select:focus-visible, textarea:focus-visible,
.form-control:focus, .form-control:focus-visible {
    outline: none !important;
    border-color: var(--hc-green) !important;
    box-shadow: 0 0 0 3px rgba(30, 184, 84, 0.16) !important;
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] input:focus-visible,
html[data-theme="dark"] select:focus-visible,
html[data-theme="dark"] textarea:focus-visible {
    border-color: var(--hc-green-light) !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22) !important;
}
button:focus-visible, .btn:focus-visible, a:focus-visible {
    outline: 2px solid var(--hc-green);
    outline-offset: 2px;
}

/* Slightly richer, on-brand primary buttons in light mode instead of a
   flat fill, applied only to buttons already using the brand color so
   nothing with a custom/inline background is touched. */
html:not([data-theme="dark"]) .btn-continue,
html:not([data-theme="dark"]) .btn-primary {
    background-image: linear-gradient(135deg, var(--hc-green-light), var(--hc-green-deep)) !important;
}

/* ---------------------------------------------------------------------
   Shared motion utilities
   --------------------------------------------------------------------- */
@keyframes hcFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hc-animate-in { animation: hcFadeUp 0.45s var(--ease) both; }
.hc-animate-in.d1 { animation-delay: .05s; }
.hc-animate-in.d2 { animation-delay: .1s; }
.hc-animate-in.d3 { animation-delay: .15s; }
.hc-animate-in.d4 { animation-delay: .2s; }

@keyframes hcPulseLive {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.55); }
    70% { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}
.live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--hc-red);
    display: inline-block;
    animation: hcPulseLive 1.6s infinite;
}

@keyframes hcCardPop {
    0% { transform: scale(0.96); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Card lift-on-hover, applied opt-in via .hc-lift */
.hc-lift { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.hc-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* Broad, low-risk polish applied automatically across every page: gentle
   entrance for cards + a subtle lift on hover for anything that already
   looks like a clickable/listable card. Scoped to avoid touching buttons,
   inputs, or nav so it can't break existing click targets or layout. */
.toss-card, .card-block, .search-card, .matches-card, .section-card,
.player-card, .profile-card, .bday-card, .upcoming-card,
.match-card, .stat-card, .info-card, .list-card {
    animation: hcCardPop 0.35s var(--ease) both;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.match-card:hover, .player-card:hover, .stat-card:hover,
.upcoming-card:hover, .bday-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ---------------------------------------------------------------------
   Confetti / crackers canvas (full-screen overlay, see confetti.js)
   --------------------------------------------------------------------- */
.confetti-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

/* Trophy celebration pulse for the result banner */
@keyframes hcTrophyPop {
    0%   { transform: scale(0.4) rotate(-8deg); opacity: 0; }
    60%  { transform: scale(1.15) rotate(4deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.hc-trophy-pop { animation: hcTrophyPop 0.6s var(--ease) both; }

@keyframes hcGlow {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(255,183,3,0.5)); }
    50% { filter: drop-shadow(0 0 18px rgba(255,183,3,0.9)); }
}
.hc-glow { animation: hcGlow 1.8s ease-in-out infinite; }

/* =====================================================================
   Contrast-safety patch
   A number of legacy per-page <style> blocks hardcode `color:#222`,
   `#333`, `#444` etc. directly on specific text classes (.p-name,
   .m-name, .section-title, .count-text, ...) or hardcode
   `background:#fff` on specific containers (.panel, .filter-bar,
   .selection-bar, ...) instead of using the tokens above. Since those
   per-page blocks are printed AFTER this file in every page's <head>,
   they'd normally win the cascade on load order alone — every rule
   below uses !important so it wins regardless, fixing:
     - dark text stranded on now-dark card backgrounds (invisible),
     - light text stranded on containers that were never re-themed
       and are therefore still white (also invisible).
   ===================================================================== */

/* -- Containers that also need to become dark surfaces -- */
html[data-theme="dark"] .panel,
html[data-theme="dark"] .selection-bar,
html[data-theme="dark"] .filter-bar,
html[data-theme="dark"] .sort-toggle,
html[data-theme="dark"] .page-btn,
html[data-theme="dark"] .page-num,
html[data-theme="dark"] .wrap,
html[data-theme="dark"] .btn-copy-prev-team {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-sm) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .btn-copy-prev-team:hover { background: var(--surface-alt) !important; }
html[data-theme="dark"] .filter-bar select {
    background: var(--surface-alt) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .page-num.active,
html[data-theme="dark"] .sort-toggle button.active {
    background: var(--primary-color) !important;
    color: #fff !important;
}

/* -- Text that hardcodes dark grey and disappears on dark surfaces -- */
html[data-theme="dark"] .p-name,
html[data-theme="dark"] .m-name,
html[data-theme="dark"] .ts-name,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .count-text,
html[data-theme="dark"] .perf-block,
html[data-theme="dark"] .player-row,
html[data-theme="dark"] .run-btn,
html[data-theme="dark"] h2.title,
html[data-theme="dark"] .bday-card .name,
html[data-theme="dark"] .upcoming-card .name {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .over-ball { color: var(--text-primary) !important; }
html[data-theme="dark"] .over-ball.boundary4 { color: var(--hc-green-deep) !important; }
html[data-theme="dark"] .over-ball.boundary6,
html[data-theme="dark"] .over-ball.wicket { color: #fff !important; }

/* -- Muted/secondary text remapped for consistent legibility -- */
html[data-theme="dark"] .sort-toggle button,
html[data-theme="dark"] .page-btn,
html[data-theme="dark"] .page-num,
html[data-theme="dark"] .filter-bar label,
html[data-theme="dark"] .perf-block .perf-lbl,
html[data-theme="dark"] .perf-block .perf-sub,
html[data-theme="dark"] .search-card .p-mobile,
html[data-theme="dark"] .batsman-row .stats,
html[data-theme="dark"] .bowler-row .stats,
html[data-theme="dark"] .extras-line {
    color: var(--text-secondary) !important;
}

/* ---------------------------------------------------------------------
   Light-mode polish
   Small, low-risk refinements applied only in light mode: crisper card
   edges, a touch more depth on hover, and softer muted-grey tones so
   secondary text (mobile numbers, stat sub-labels, timestamps) reads
   as clearly "secondary" instead of flat grey.
   --------------------------------------------------------------------- */
html:not([data-theme="dark"]) .toss-card,
html:not([data-theme="dark"]) .card-block,
html:not([data-theme="dark"]) .search-card,
html:not([data-theme="dark"]) .matches-card,
html:not([data-theme="dark"]) .section-card,
html:not([data-theme="dark"]) .player-card,
html:not([data-theme="dark"]) .profile-card,
html:not([data-theme="dark"]) .bday-card,
html:not([data-theme="dark"]) .upcoming-card,
html:not([data-theme="dark"]) .match-card,
html:not([data-theme="dark"]) .stat-card,
html:not([data-theme="dark"]) .info-card,
html:not([data-theme="dark"]) .list-card,
html:not([data-theme="dark"]) .panel {
    border: 1px solid var(--border-color);
}
html:not([data-theme="dark"]) .match-card:hover,
html:not([data-theme="dark"]) .player-card:hover,
html:not([data-theme="dark"]) .stat-card:hover,
html:not([data-theme="dark"]) .upcoming-card:hover,
html:not([data-theme="dark"]) .bday-card:hover,
html:not([data-theme="dark"]) .search-card:hover {
    box-shadow: var(--shadow-md);
}
html:not([data-theme="dark"]) .search-card .p-mobile,
html:not([data-theme="dark"]) .perf-block .perf-lbl,
html:not([data-theme="dark"]) .perf-block .perf-sub,
html:not([data-theme="dark"]) .batsman-row .stats,
html:not([data-theme="dark"]) .bowler-row .stats,
html:not([data-theme="dark"]) .extras-line,
html:not([data-theme="dark"]) .filter-bar label,
html:not([data-theme="dark"]) .sort-toggle button,
html:not([data-theme="dark"]) .page-btn,
html:not([data-theme="dark"]) .page-num {
    color: var(--text-secondary) !important;
}
/* Buttons/links get a touch more life on hover in light mode too */
html:not([data-theme="dark"]) .btn-continue:not(:disabled):hover,
html:not([data-theme="dark"]) .btn-login:hover {
    filter: brightness(1.03);
}

/* =====================================================================
   Ambient background motion
   A few soft, slow-drifting blurred colour blobs behind the page
   content, purely decorative. Applied to the app's interior pages
   (dashboards/lists/scoring/etc.) via `body`, but skipped on the
   login/register/match-setup screens which already have their own
   bespoke stadium/pitch artwork so the two styles don't clash.
   Uses ::before/::after on body with a negative z-index so it always
   sits behind real content, never intercepts clicks, and never
   affects page layout/scroll size (position: fixed).
   ===================================================================== */
body:not(.login-page):not(.register-page):not(.match-page)::before,
body:not(.login-page):not(.register-page):not(.match-page)::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.22;
    will-change: transform;
}
body:not(.login-page):not(.register-page):not(.match-page)::before {
    width: 380px; height: 380px;
    top: -110px; left: -90px;
    background: radial-gradient(circle, var(--hc-green-light, #22c55e), transparent 72%);
    animation: hcBgDrift1 20s ease-in-out infinite alternate;
}
body:not(.login-page):not(.register-page):not(.match-page)::after {
    width: 420px; height: 420px;
    bottom: -140px; right: -100px;
    background: radial-gradient(circle, var(--primary-color), transparent 72%);
    animation: hcBgDrift2 24s ease-in-out infinite alternate;
}
html[data-theme="dark"] body:not(.login-page):not(.register-page):not(.match-page)::before,
html[data-theme="dark"] body:not(.login-page):not(.register-page):not(.match-page)::after {
    opacity: 0.16;
}
@keyframes hcBgDrift1 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(70px, 90px) scale(1.18); }
}
@keyframes hcBgDrift2 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-60px, -70px) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
    body::before, body::after { animation: none !important; }
}

/* =====================================================================
   Highlighted-banner text fix (Man of the Match / locked-match notice)
   These banners intentionally keep a fixed pale-yellow "highlight" look
   in both themes (like a sticky-note), with dark brand text set on the
   *container*. Their inner text is a plain, unclassed <span> that relies
   on inheriting that colour — but the blanket dark-mode rule above
   (`html[data-theme="dark"] span { color: var(--text-primary) }`)
   targets the <span> directly, and a direct rule always beats an
   inherited one no matter how low its specificity — so in dark mode the
   text was silently flipped to near-white on the still-pale-yellow
   background. Restored explicitly here.
   ===================================================================== */
html[data-theme="dark"] .mom-row,
html[data-theme="dark"] .mom-row .mom-name,
html[data-theme="dark"] .mom-row .mom-stats,
html[data-theme="dark"] .mom-line,
html[data-theme="dark"] .locked-banner,
html[data-theme="dark"] .locked-banner span {
    color: #8a6d00 !important;
}
html[data-theme="dark"] .mom-row i,
html[data-theme="dark"] .mom-line i {
    color: #e6a817 !important;
}
html[data-theme="dark"] .mom-line .mom-label {
    color: #b8860b !important;
}
html[data-theme="dark"] .locked-banner a {
    color: var(--team-a-dark) !important;
}

/* =====================================================================
   Team-panel roster pills (team_setup.php "Assign Remaining Players")
   `.team-panel` keeps its light green/pink tint in both themes by design
   (it's a team-colour accent, not a surface that should invert) — but a
   few of its children are plain <span>/<label>/<li> elements with no
   colour of their own, so the blanket dark-mode text rule above hijacks
   them to a near-white colour that's invisible against the still-light
   tint. Forced back to dark text here, same reasoning as the banner fix.
   ===================================================================== */
html[data-theme="dark"] .roster-list li,
html[data-theme="dark"] .roster-list li .player-name,
html[data-theme="dark"] .team-panel label {
    color: #222 !important;
}

/* Status badges (.st-completed / .st-live / .st-upcoming, match_history.php)
   keep their fixed pastel backgrounds in dark mode by design, with dark
   brand text set on the badge itself — same "sticky-note" pattern as the
   MOM/locked banners above, so the blanket dark-mode span rule needs the
   same explicit restore here. */
html[data-theme="dark"] .st-completed { color: #0f7a37 !important; }
html[data-theme="dark"] .st-live      { color: #b3540e !important; }
html[data-theme="dark"] .st-upcoming  { color: #666 !important; }