/* ═══════════════════════════════════════════════════════════════
   CRICMATES — Matte UI (airwork-inspired)
   Flat charcoal surfaces · subtle neon accents · light mode for sunlight
   Loaded after liquid-glass.css — overrides frosted glass with matte panels
   ═══════════════════════════════════════════════════════════════ */

:root {
  --purple-primary: #007bff;
  --purple-deep: #0056b3;
  --purple-bright: #339dff;
  --accent: #e040fb;
  --red-primary: var(--purple-primary);
  --red-dark: var(--purple-deep);
  --yellow-cta: #ffffff;
  --yellow-dark: #b3d4ff;
  --bg: #141416;
  --bg2: #1c1c20;
  --bg3: #242428;
  --border: rgba(255, 255, 255, 0.08);
  --text: #ffffff;
  --muted: #888888;
  --radius: 18px;
  --radius-sm: 14px;
  --radius-pill: 999px;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  --green: #34d399;
  --green2: #10b981;
  --blue: #007bff;
  --red: #ff4757;
  --yellow: #ffb347;
  --gold: #ffd166;
  --neon-orange: #ff6b35;
  --neon-magenta: #e040fb;

  --matte-surface: #1c1c20;
  --matte-elevated: #242428;
  --matte-inset: #18181c;
  --matte-border: rgba(255, 255, 255, 0.08);
  --matte-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  --neon-glow-blue: 0 0 24px rgba(0, 123, 255, 0.35);
  --neon-glow-magenta: 0 0 20px rgba(224, 64, 251, 0.28);

  --lg-glass: var(--matte-surface);
  --lg-glass-strong: var(--matte-elevated);
  --lg-glass-deep: var(--matte-inset);
  --lg-glass-panel: var(--matte-surface);
  --lg-edge: var(--matte-border);
  --lg-edge-bright: rgba(255, 255, 255, 0.14);
  --lg-edge-dim: rgba(255, 255, 255, 0.05);
  --lg-shadow: var(--matte-shadow);
  --lg-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --lg-shadow-float: 0 12px 40px rgba(0, 0, 0, 0.4);
  --lg-blur: 0px;
  --lg-blur-sm: 0px;
  --lg-blur-xl: 0px;
  --lg-saturate: 100%;
}

/* ── Matte background (no mesh noise, no glass orbs) ── */
.lg-theme::before {
  background: var(--bg) !important;
}

.lg-theme::after {
  display: none !important;
}

.lg-theme .lg-mesh-orb {
  opacity: 0.12 !important;
  filter: blur(120px) !important;
}

.lg-theme .lg-mesh-orb-a {
  background: rgba(0, 123, 255, 0.15) !important;
}

.lg-theme .lg-mesh-orb-b {
  background: rgba(224, 64, 251, 0.1) !important;
}

.lg-theme #screen-dashboard {
  background: var(--bg) !important;
}

/* ── Flat matte surfaces (strip blur / specular) ── */
.lg-theme .setup-card,
.lg-theme .auth-form-card,
.lg-theme .toss-card,
.lg-theme .modal-card,
.lg-theme .login-player-card,
.lg-theme .player-card,
.lg-theme .history-card,
.lg-theme .team-card,
.lg-theme .dash-stat-card,
.lg-theme .dash-action-card,
.lg-theme .screen-header,
.lg-theme .scoring-panel,
.lg-theme .tourney-card,
.lg-theme .bento-cell,
.lg-theme .bento-rail,
.lg-theme .bento-search-pill,
.lg-theme .bento-stat-tile,
.lg-theme .splash-chip,
.lg-theme .splash-pitch-track,
.lg-theme .auth-tabs,
.lg-theme .number-input,
.lg-theme .select-field,
.lg-theme .player-input,
.lg-theme .photo-circle,
.lg-theme .setup-back-btn,
.lg-theme .back-btn,
.lg-theme .dash-icon-btn,
.lg-theme .bento-rail-btn,
.lg-theme .bento-action-tile,
.lg-theme .outline-btn,
.lg-theme .history-btn,
.lg-theme .wicket-btn,
.lg-theme .ball-chip,
.lg-theme .score-feed-item,
.lg-theme .pstat-card,
.lg-theme .wide-modal,
.lg-theme .auth-owner-corner-btn,
.lg-theme .run-btn,
.lg-theme .extras-row button,
.lg-theme .score-tab,
.lg-theme .notif-item,
.lg-theme .friend-row,
.lg-theme .history-score-block,
.lg-theme .player-entry-captain,
.lg-theme .swap-strike-btn,
.lg-theme .search-input,
.lg-theme #screen-auth .auth-container,
.lg-theme .result-team-card,
.lg-theme .search-card,
.lg-theme .profile-hero,
.lg-theme .summary-strip,
.lg-theme .this-over-section,
.lg-theme .bento-hero,
.lg-theme .bento-cta-wide,
.lg-theme .bento-league-card,
.lg-theme .bento-quick,
.lg-theme .bento-panel,
.lg-theme .live-match-card,
.lg-theme .result-banner {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--matte-surface) !important;
  border: 1px solid var(--matte-border) !important;
  box-shadow: var(--matte-shadow) !important;
}

.lg-theme .setup-card::after,
.lg-theme .auth-form-card::after,
.lg-theme .modal-card::after,
.lg-theme .bento-cell::after,
.lg-theme .bento-rail::after,
.lg-theme .login-player-card::after,
.lg-theme .toss-card::after,
.lg-theme .bento-hero::after,
.lg-theme .screen-header::after {
  display: none !important;
}

.lg-theme .bento-rail {
  border-radius: 20px !important;
  background: var(--matte-elevated) !important;
}

.lg-theme .bento-rail-btn:hover,
.lg-theme .bento-rail-btn.active {
  background: rgba(0, 123, 255, 0.18) !important;
  box-shadow: none !important;
  color: var(--purple-bright) !important;
  backdrop-filter: none !important;
}

.lg-theme .bento-hero {
  background: var(--matte-elevated) !important;
  border-radius: var(--radius) !important;
}

.lg-theme .bento-hero-title span {
  color: var(--purple-bright);
  text-shadow: var(--neon-glow-blue);
}

.lg-theme .bento-quick {
  background: var(--matte-surface) !important;
}

.lg-theme .bento-quick-tag {
  color: var(--neon-orange) !important;
}

.lg-theme .bento-search-pill {
  background: var(--matte-inset) !important;
  border-radius: var(--radius-pill) !important;
}

.lg-theme .bento-search-icon {
  background: var(--purple-primary) !important;
  border: none !important;
  backdrop-filter: none !important;
  box-shadow: var(--neon-glow-blue);
}

.lg-theme .auth-tabs {
  background: var(--matte-inset) !important;
  border-radius: var(--radius-pill) !important;
}

.lg-theme .auth-tab.active {
  background: var(--matte-elevated) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.lg-theme .start-btn,
.lg-theme .fab-btn,
.lg-theme .share-btn {
  background: var(--purple-primary) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: var(--neon-glow-blue) !important;
  backdrop-filter: none !important;
}

.lg-theme .start-btn:hover,
.lg-theme .fab-btn:hover {
  background: var(--purple-bright) !important;
  transform: translateY(-2px);
}

.lg-theme .select-field,
.lg-theme .player-input,
.lg-theme .player-select,
.lg-theme .number-input {
  background: var(--matte-inset) !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

.lg-theme .select-field:focus,
.lg-theme .player-input:focus {
  border-color: var(--purple-primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.22) !important;
}

.lg-theme .scoring-header {
  background: var(--matte-elevated) !important;
  backdrop-filter: none !important;
}

.lg-theme .modal-overlay {
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: none !important;
}

.lg-theme .splash-logo,
.lg-theme .logo-text {
  background: linear-gradient(135deg, #fff 0%, var(--purple-bright) 55%, var(--neon-magenta) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: none;
}

.lg-theme .splash-stadium-shade {
  background: linear-gradient(180deg, rgba(20, 20, 22, 0.92), rgba(20, 20, 22, 0.78)) !important;
}

.lg-theme .orb1 { background: radial-gradient(circle, rgba(0, 123, 255, 0.25), transparent); }
.lg-theme .orb2 { background: radial-gradient(circle, rgba(224, 64, 251, 0.18), transparent); }
.lg-theme .orb3 { background: radial-gradient(circle, rgba(255, 107, 53, 0.15), transparent); }

.lg-theme .bento-stat-val {
  text-shadow: none;
  color: var(--text);
}

.lg-theme .bento-league-cta {
  background: var(--purple-primary);
  border: none;
  backdrop-filter: none;
  color: #fff;
}

/* ── Theme toggle controls ── */
.theme-toggle-btn,
.global-theme-toggle,
.bento-topbar-theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s;
}

.bento-topbar-theme-btn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 14px;
  border: 1px solid var(--matte-border);
  background: var(--matte-surface);
  color: var(--text);
  font-size: 1.15rem;
  box-shadow: var(--matte-shadow);
}

.bento-topbar-theme-btn:hover {
  border-color: var(--purple-primary);
  box-shadow: var(--neon-glow-blue);
}

.theme-toggle-hint {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.global-theme-toggle {
  backdrop-filter: none !important;
  background: var(--matte-elevated) !important;
  border: 1px solid var(--matte-border) !important;
  gap: 8px;
  padding: 0 16px !important;
}

.global-theme-toggle:hover {
  border-color: var(--purple-primary) !important;
  box-shadow: var(--neon-glow-blue) !important;
  color: var(--text) !important;
}

.bento-rail-btn.theme-toggle-btn {
  font-size: 1.1rem;
}

.bento-rail-btn.theme-toggle-btn .theme-toggle-hint {
  display: none;
}

/* ── Light theme — high contrast for sunlight ── */
html[data-theme="light"],
body.theme-light {
  color-scheme: light;
  --bg: #eceef2;
  --bg2: #ffffff;
  --bg3: #f4f5f8;
  --border: rgba(15, 23, 42, 0.14);
  --text: #121418;
  --muted: #4b5563;
  --purple-primary: #0066dd;
  --purple-deep: #004aad;
  --purple-bright: #007bff;
  --accent: #c026d3;
  --red-primary: #0066dd;
  --yellow-cta: #004aad;
  --shadow: 0 4px 20px rgba(15, 23, 42, 0.1);
  --green: #047857;
  --green2: #059669;
  --blue: #0066dd;
  --red: #dc2626;
  --gold: #b45309;

  --matte-surface: #ffffff;
  --matte-elevated: #ffffff;
  --matte-inset: #f0f2f6;
  --matte-border: rgba(15, 23, 42, 0.12);
  --matte-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
  --neon-glow-blue: none;
  --neon-glow-magenta: none;
}

html[data-theme="light"] .lg-theme::before,
body.theme-light .lg-theme::before {
  background: var(--bg) !important;
}

html[data-theme="light"] .lg-mesh-orb,
body.theme-light .lg-mesh-orb {
  display: none;
}

html[data-theme="light"] .setup-bg,
body.theme-light .setup-bg {
  background: var(--bg) !important;
}

html[data-theme="light"] .lg-theme .bento-hero-title span,
body.theme-light .lg-theme .bento-hero-title span {
  text-shadow: none;
  color: var(--purple-primary);
}

html[data-theme="light"] .lg-theme .start-btn,
html[data-theme="light"] .lg-theme .fab-btn,
html[data-theme="light"] .lg-theme .share-btn,
body.theme-light .lg-theme .start-btn,
body.theme-light .lg-theme .fab-btn,
body.theme-light .lg-theme .share-btn {
  box-shadow: 0 4px 14px rgba(0, 102, 221, 0.25) !important;
}

html[data-theme="light"] .lg-theme .bento-search-icon,
body.theme-light .lg-theme .bento-search-icon {
  box-shadow: none;
}

html[data-theme="light"] .lg-theme .splash-logo,
html[data-theme="light"] .lg-theme .logo-text,
body.theme-light .lg-theme .splash-logo,
body.theme-light .lg-theme .logo-text {
  background: linear-gradient(135deg, #121418 0%, var(--purple-primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

html[data-theme="light"] .lg-theme .number-input input,
html[data-theme="light"] .lg-theme .select-field,
html[data-theme="light"] .lg-theme .player-input,
body.theme-light .lg-theme .number-input input,
body.theme-light .lg-theme .select-field,
body.theme-light .lg-theme .player-input {
  color: var(--text) !important;
}

html[data-theme="light"] .scoring-header,
body.theme-light .scoring-header {
  background: var(--matte-elevated) !important;
  box-shadow: var(--matte-shadow) !important;
}

html[data-theme="light"] .runs-display,
body.theme-light .runs-display {
  color: var(--purple-primary) !important;
}

html[data-theme="light"] .wickets-display,
body.theme-light .wickets-display {
  color: var(--red) !important;
}

html[data-theme="light"] .match-title,
html[data-theme="light"] .score-small-btn,
body.theme-light .match-title,
body.theme-light .score-small-btn {
  color: var(--text) !important;
}

html[data-theme="light"] .score-small-btn,
body.theme-light .score-small-btn {
  background: var(--matte-inset) !important;
  border-color: var(--matte-border) !important;
}

html[data-theme="light"] .dash-user-menu,
body.theme-light .dash-user-menu {
  background: var(--matte-elevated) !important;
  border-color: var(--matte-border) !important;
  box-shadow: var(--matte-shadow) !important;
  backdrop-filter: none !important;
}

html[data-theme="light"] #dash-user-chip.dash-user-chip:hover,
html[data-theme="light"] #dash-user-chip.dash-user-chip[aria-expanded="true"],
body.theme-light #dash-user-chip.dash-user-chip:hover,
body.theme-light #dash-user-chip.dash-user-chip[aria-expanded="true"] {
  background: var(--matte-inset) !important;
  border-color: var(--matte-border) !important;
}

html[data-theme="light"] .bento-rail-btn:hover,
html[data-theme="light"] .bento-rail-btn.active,
body.theme-light .bento-rail-btn:hover,
body.theme-light .bento-rail-btn.active {
  background: rgba(0, 102, 221, 0.12) !important;
  color: var(--purple-primary) !important;
}

html[data-theme="light"] .bento-cell,
body.theme-light .bento-cell {
  background: var(--matte-surface) !important;
}

html[data-theme="light"] .bento-hero-kicker,
html[data-theme="light"] .bento-hero-title,
body.theme-light .bento-hero-kicker,
body.theme-light .bento-hero-title {
  color: var(--text);
}

html[data-theme="light"] .global-theme-toggle:hover,
html[data-theme="light"] .bento-topbar-theme-btn:hover,
body.theme-light .global-theme-toggle:hover,
body.theme-light .bento-topbar-theme-btn:hover {
  box-shadow: 0 4px 14px rgba(0, 102, 221, 0.2) !important;
}