/*
 * theme-neon-stage.css
 * V3b "Blue + Pink Neon" theme override.
 * Loaded AFTER site.css and i18n-overrides.css. Touches ONLY:
 *   - color tokens (CSS custom properties on :root)
 *   - background, color, border-color, box-shadow, fill, text-shadow
 *
 * NEVER touches: width / height / padding / margin / gap / flex / grid
 * / position / display (except .hidden) / font-size / font-family /
 * font-weight / line-height / border-width / border-radius /
 * letter-spacing / white-space / text-align / overflow.
 *
 * Every layout / size / spacing / component geometry stays pixel-identical
 * to the live app pre-theme.
 *
 * Palette - V3b:
 *   primary   #00b8ff  (cyber blue)
 *   secondary #ff007a  (hot pink)
 *   bg-top    #0a2148  (radial gradient origin)
 *   bg-mid    #061025  (page base)
 *   bg-bottom #03081a  (gradient end + vinyl deep shadow)
 *   vinyl-dk  #0e2540  (vinyl outer wax color)
 */

/* 1) Core token swap */
:root {
  --color-primary:        #00b8ff;
  --color-primary-dark:   #ff007a;
  --color-primary-light:  rgba(0, 184, 255, 0.18);
  --color-primary-bg:     rgba(0, 184, 255, 0.10);
  --color-primary-border: rgba(0, 184, 255, 0.45);

  /* 90deg (horizontal) gives a predictable blue-left to pink-right look on
     buttons of any width. 135deg made wide CTAs (Setup, Score Breakdown)
     appear mostly pink because the diagonal transition fell off-screen. */
  --gradient-primary:        linear-gradient(90deg, #00b8ff 0%, #ff007a 100%);
  --gradient-primary-shadow: rgba(0, 184, 255, 0.55);

  --color-bg:           #061025;
  --color-card:         rgba(255, 255, 255, 0.04);
  --color-card-border:  rgba(0, 184, 255, 0.25);
  --color-input-bg:     rgba(0, 0, 0, 0.40);

  --color-text-primary:   #ffffff;
  --color-text-secondary: #c8c0d8;
  /* "muted" originally #8a85a8 — too dim on the dark dialog/screen backgrounds,
     several labels (round-badge text, sp-timer-label, sb-pts-wrong, etc) became
     hard to read. Bumped to match secondary so every "muted" label is legible
     across the app. If a future surface really needs a dimmer tone, give it an
     opacity rather than re-introducing a low-contrast color. */
  --color-text-muted:     #c8c0d8;

  --color-success:    #00f5a8;
  --color-success-bg: rgba(0, 245, 168, 0.12);
  --color-error:      #ff007a;
  --color-error-bg:   rgba(255, 0, 122, 0.15);
  --color-info:       #00b8ff;
  --color-info-bg:    rgba(0, 184, 255, 0.12);

  --shadow-sm: 0 2px 12px rgba(0, 184, 255, 0.20);
  --shadow-md: 0 4px 18px rgba(0, 184, 255, 0.28);
  --shadow-lg: 0 6px 30px rgba(0, 184, 255, 0.35);
}

/* 2) Page background - uniform vertical gradient (no radial hot-spot).
   The prior radial gradient had a bright ellipse at the top that read as a
   visible rectangle behind the timer ring. A clean linear top-to-bottom
   gradient gives the dark depth without that artifact. */
body {
  background: linear-gradient(180deg, #0a2148 0%, #061025 50%, #03081a 100%) fixed !important;
  color: var(--color-text-primary);
}

/* 3) Screen container - transparent so body gradient shows through */
.screen { background: transparent !important; position: relative; }

/* 4) Vinyl record (Home) - dark with neon halo */
.home-vinyl {
  background: radial-gradient(circle at 50% 50%,
    #0e2540 0%, #061025 30%, #0e2540 31%, #03081a 60%, #0e2540 61%, #061025 100%) !important;
  box-shadow:
    0 0 50px rgba(0, 184, 255, 0.55),
    0 0 100px rgba(255, 0, 122, 0.30),
    inset 0 0 30px rgba(0, 0, 0, 0.6) !important;
}
.home-vinyl::before {
  background: linear-gradient(135deg, #ff007a, #00b8ff) !important;
  box-shadow: 0 0 18px rgba(255, 0, 122, 0.70) !important;
}
.home-vinyl::after { background: #03081a !important; }
.home-vinyl-text {
  /* Option 2 - Rubik subtle glow: minimum change from today, just calm down
     the prior 3-layer pink halo. Drop shadow keeps legibility on the dark
     vinyl; the faint white glow keeps a hint of "lit-up" presence without
     overwhelming. */
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 0 6px rgba(255, 255, 255, 0.25) !important;
}

/* 5) Equalizer bars - neon alternating */
.eq .b:nth-child(odd)  { background: #00b8ff !important; box-shadow: 0 0 8px #00b8ff; }
.eq .b:nth-child(even) { background: #ff007a !important; box-shadow: 0 0 8px #ff007a; }

/* 6) Buttons - .btn-primary is used on Home, Round Start, Loading-error
   etc. .start-btn is a separate Setup-only class with the SAME visual
   intent; site.css hardcodes pink-only on it, so we override here to
   match the rest of the app. */
.btn-primary,
.start-btn {
  background: var(--gradient-primary) !important;
  /* Tight pill-shaped glow only - the prior wider 50px halo was creating a
     visible faded rectangle around CTAs (especially on the wide Setup CTA)
     because the halo extends past the button's pill silhouette and the
     fade-edge gives a rectangle impression. */
  box-shadow:
    0 4px 16px rgba(0, 184, 255, 0.45),
    inset 0 0 14px rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
}
.start-btn svg,
.btn-primary svg { fill: #ffffff !important; }
.btn-outline {
  background: rgba(0, 184, 255, 0.06) !important;
  color: #ffffff !important;
  border-color: rgba(0, 184, 255, 0.55) !important;
}
.btn-outline:hover {
  background: rgba(0, 184, 255, 0.14) !important;
  border-color: rgba(0, 184, 255, 0.85) !important;
}
.btn-outline svg { fill: #00b8ff !important; }

/* 7) Top header buttons + game-top actions */
.game-top-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(8px);
  /* Rubik's default line-height pushes the text baseline above the visual
     center of the line-box, so the icon (centered on the flex axis) looks
     a few px below the text. Forcing line-height:1 collapses the line-box
     to the glyph height, putting the visual centers of text and icon at
     the same y. */
  line-height: 1 !important;
}
.game-top-btn svg { fill: #ffffff !important; display: block; }

/* 8) Language toggle */
.lang-toggle {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(8px);
}
.lang-toggle .lang-toggle-active,
.lang-toggle .lang-toggle-btn.lang-toggle-active {
  background: var(--gradient-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(0, 184, 255, 0.60) !important;
}

/* 9) Share button (the pink "open share dialog" floating button) */
.share-btn,
.share-button,
.share-fab,
.corner-share {
  background: #ff007a !important;
  box-shadow: 0 0 16px rgba(255, 0, 122, 0.60) !important;
}
.share-btn svg,
.share-button svg,
.share-fab svg,
.corner-share svg { fill: #ffffff !important; }

/* 10) Cards / inputs / chips */
.card,
.input-card {
  background: var(--color-card) !important;
  border: 1px solid var(--color-card-border) !important;
  backdrop-filter: blur(6px);
  color: var(--color-text-primary);
}
.text-input,
input[type="text"],
input[type="number"] {
  background: var(--color-input-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}
.text-input::placeholder { color: var(--color-text-muted) !important; }

.chip {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--color-text-secondary) !important;
}
.chip.active {
  background: var(--gradient-primary) !important;
  /* Confine the gradient to the padding-box so the 1.5px border zone
     does NOT show the gradient's pure start (blue) and pure end (pink)
     colors as thin colored lines at the chip's left/right edges. With
     background-clip: padding-box, the gradient fills only inside the
     border and the border itself stays transparent (invisible on a
     dark background). */
  background-clip: padding-box !important;
  -webkit-background-clip: padding-box !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 0 16px rgba(0, 184, 255, 0.60) !important;
}

/* 11) Sliders - neon track + glowing thumbs
   NOTE: glow goes on the visible CIRCULAR dot elements ONLY, never on
   .year-slider-thumb (a 44x44 transparent hit-area wrapper) - putting
   glow on the wrapper renders a rectangular halo around each thumb. */
.slider-track {
  background: rgba(255, 255, 255, 0.10) !important;
}
.slider-fill,
.year-slider-fill,
.timer-slider-fill,
.age-slider-fill {
  background: linear-gradient(90deg, #00b8ff, #ff007a) !important;
  box-shadow: 0 0 10px rgba(0, 184, 255, 0.55);
}
/* Rounds slider visible dot (.slider-thumb-inner: 28x28 circle with border).
   .slider-thumb-ring is a 48x48 absolutely-positioned circle with
   border-radius:50% inside the .slider-thumb-wrap hit-area - safe to glow. */
.slider-thumb-ring {
  border-color: rgba(0, 184, 255, 0.35) !important;
}
.slider-thumb-inner {
  background: #ffffff !important;
  border-color: #00b8ff !important;
  color: #00b8ff !important;
  box-shadow: 0 0 12px rgba(0, 184, 255, 0.7) !important;
}
.slider-drag-bubble {
  background: var(--gradient-primary) !important;
  color: #ffffff !important;
}
/* Year-range visible dot (.year-slider-thumb-dot: 20x20 circle).
   Do NOT glow .year-slider-thumb (44x44 transparent rectangle wrapper). */
.year-slider-thumb-dot {
  background: #ff007a !important;
  box-shadow: 0 0 12px rgba(255, 0, 122, 0.7) !important;
}
.year-slider-bubble {
  background: var(--gradient-primary) !important;
  color: #ffffff !important;
}

/* 11b) Year-range slider card + "Add another range" pill - site.css uses
   #fafafa (light gray) on .range-row and #fff on .add-range-btn, which
   looks like a white card on the dark theme. Restyle to match the rest
   of the dark theme (transparent surface + neon border). */
.range-row {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(0, 184, 255, 0.25) !important;
}
.add-range-btn,
.add-team-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1.5px dashed rgba(0, 184, 255, 0.45) !important;
  color: #c8c0d8 !important;
}
.add-range-btn:hover,
.add-team-btn:hover {
  background: rgba(0, 184, 255, 0.10) !important;
  border-color: rgba(0, 184, 255, 0.75) !important;
  color: #ffffff !important;
}
.add-range-btn svg,
.add-team-btn svg { fill: #00b8ff !important; }

.remove-range-btn,
.remove-team-btn {
  background: #061025 !important;
  border: 1.5px solid rgba(0, 184, 255, 0.55) !important;
  box-shadow: 0 0 8px rgba(0, 184, 255, 0.45) !important;
}
.remove-range-btn svg,
.remove-team-btn svg { fill: #00b8ff !important; }

.range-num {
  background: var(--gradient-primary) !important;
  background-clip: padding-box !important;
  -webkit-background-clip: padding-box !important;
  box-shadow: 0 0 10px rgba(0, 184, 255, 0.45) !important;
}

/* Secondary text labels (slider bounds, mini-input labels, etc.) - site.css
   uses #666 (medium grey) which reads as ~near-invisible on the dark
   Neon Stage background. Override to a soft light lavender that's still
   secondary-text feeling but readable. */
.slider-range-label,
.input-label-mini,
.year-slider-edge-label,
.year-slider-bubble-label,
.timer-label,
.timer-toggle,
.toggle-label-on,
.toggle-label-off {
  color: #c8c0d8 !important;
}

/* 12) Setup header pills */
.reset-defaults-pill,
.reset-memory-pill {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--color-text-secondary) !important;
}
.reset-defaults-pill svg,
.reset-memory-pill svg { fill: var(--color-text-secondary) !important; }

/* 13) Section labels */
.section-label { color: var(--color-text-secondary) !important; }
.section-label svg {
  fill: #00b8ff !important;
  filter: drop-shadow(0 0 6px rgba(0, 184, 255, 0.60));
}

/* 14) Top-bar badges (in-game) */
.round-badge,
.rs-round-badge {
  background: rgba(0, 184, 255, 0.12) !important;
  border: 1px solid rgba(0, 184, 255, 0.40) !important;
  color: #ffffff !important;
}
.round-badge-num,
.rs-round-badge-num {
  color: #00b8ff !important;
  text-shadow: 0 0 8px #00b8ff;
}
.round-badge-text,
.rs-round-badge-text { color: var(--color-text-muted) !important; }

.team-badge {
  background: rgba(255, 0, 122, 0.10) !important;
  border: 1px solid rgba(255, 0, 122, 0.45) !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(255, 0, 122, 0.30);
}
.team-badge svg { fill: #ff007a !important; }

/* 15) Round Start - team name glow */
.rs-team-name {
  color: #ffffff !important;
  text-shadow:
    0 0 16px #00b8ff,
    0 0 32px rgba(0, 184, 255, 0.5),
    0 0 48px rgba(255, 0, 122, 0.3) !important;
}
/* The .mini-scoreboard parent wrapper is a card in site.css (bg + border +
   shadow via var(--color-card-*) tokens). Under the dark Neon Stage theme
   those tokens render as a faint cyan rim around the two team pills, which
   looks like an unwanted rectangle frame. Strip the outer card so only the
   inner team pills are visible. */
.mini-scoreboard {
  background: transparent !important;
  border: 0 none !important;
  box-shadow: none !important;
}

.mini-sb-team {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  /* Rounded corners on the team cards (site.css has no border-radius on
     this element; adding it is purely visual - doesn't affect width/height
     or the flex layout of the scoreboard row). */
  border-radius: 14px !important;
  color: #ffffff !important;
}
.mini-sb-active {
  background: var(--gradient-primary) !important;
  background-clip: padding-box !important;
  -webkit-background-clip: padding-box !important;
  border-color: transparent !important;
  box-shadow: 0 0 16px rgba(0, 184, 255, 0.55) !important;
}
/* site.css ships the inactive pill's name (#555) and score (#333) as near-black
   text designed for a light background. On the dark theme they read as
   barely-visible. Force both to bright white so the inactive pill is legible. */
.mini-sb-inactive .mini-sb-name,
.mini-sb-inactive .mini-sb-score {
  color: #ffffff !important;
}
.mini-sb-divider { color: var(--color-text-muted) !important; }

/* 16) Loading screen */
.loading-icon {
  background: var(--gradient-primary) !important;
  box-shadow: 0 0 22px rgba(0, 184, 255, 0.65) !important;
}
.loading-icon svg { fill: #ffffff !important; }
.loading-ring  { border-color: rgba(0, 184, 255, 0.5) !important; }
.loading-ring:nth-child(2) { border-color: rgba(255, 0, 122, 0.5) !important; }
.loading-progress-bar { background: rgba(255, 255, 255, 0.08) !important; }
.loading-progress-fill {
  background: linear-gradient(90deg, #00b8ff, #ff007a) !important;
  box-shadow: 0 0 12px #00b8ff !important;
}
/* Loading step PILLS - site.css hardcodes background:#fff5f8 (near-white)
   on .loading-step-active and a light success-bg on .loading-step-done.
   On a dark theme those make the white step text invisible. Override the
   pill backgrounds to dark transparent variants so the text stays readable. */
.loading-step {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
}
.loading-step-active {
  background: rgba(0, 184, 255, 0.12) !important;
  border-color: rgba(0, 184, 255, 0.50) !important;
  box-shadow: 0 0 14px rgba(0, 184, 255, 0.30);
}
.loading-step-done {
  background: rgba(0, 245, 168, 0.10) !important;
  border-color: rgba(0, 245, 168, 0.45) !important;
}
.loading-step-text,
.loading-step-active .loading-step-text,
.loading-step-done .loading-step-text,
.loading-step-pending .loading-step-text { color: #ffffff !important; }

/* Inner step icons */
.loading-step-active .loading-step-icon {
  background: rgba(0, 184, 255, 0.20) !important;
  border-color: #00b8ff !important;
  box-shadow: 0 0 14px rgba(0, 184, 255, 0.55);
}
.loading-step-done .loading-step-icon {
  background: rgba(0, 245, 168, 0.20) !important;
  border-color: #00f5a8 !important;
  box-shadow: 0 0 12px rgba(0, 245, 168, 0.45);
}
.loading-step-done .loading-step-svg-check { fill: #00f5a8 !important; }

/* Pending step - site.css sets icon bg to #eee + check fill to #ccc, which
   reads as a white circle with a near-white V on the dark theme (invisible).
   Restyle to a soft dim circle with a visibly-tinted check. */
.loading-step-pending .loading-step-icon {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}
.loading-step-pending .loading-step-svg-check { fill: #c8c0d8 !important; }

.loading-title {
  color: #ffffff !important;
  text-shadow: 0 0 12px rgba(0, 184, 255, 0.5);
}
.loading-progress-text { color: var(--color-text-secondary) !important; }

/* 17) Song Playing - timer ring
   No glow on the ring or the number - the SVG drop-shadow filter was
   creating a soft halo around the circle that the eye read as a faint
   rectangle. Clean solid stroke only. */
.sp-timer-track    { stroke: rgba(255, 255, 255, 0.08) !important; }
.sp-timer-progress { stroke: #00b8ff !important; }
.sp-timer-number   { color: #ffffff !important; }
.sp-timer-label { color: var(--color-text-muted) !important; }
.sp-replay-btn,
.sp-replace-btn {
  background: rgba(0, 184, 255, 0.10) !important;
  border: 1.5px solid rgba(0, 184, 255, 0.55) !important;
  color: #00b8ff !important;
  box-shadow: 0 0 14px rgba(0, 184, 255, 0.40);
}
.sp-replay-btn svg,
.sp-replace-btn svg { fill: #00b8ff !important; }
.sp-replay-label,
.sp-replace-label { color: var(--color-text-muted) !important; }

/* "Impossible to guess this song" pill - the actual class in site.css is
   .sp-invalid-btn (not .sp-invalid-pill). Default site.css gives it a
   white background + red border, which reads as a glaring error indicator
   on the dark theme. Soften it to a subdued dark transparent pill so it
   stays discoverable but doesn't compete with the primary CTA. */
.sp-invalid-btn,
.song-invalid-pill,
.sp-invalid-pill {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: var(--color-text-secondary) !important;
  box-shadow: none !important;
}
.sp-invalid-btn svg { fill: var(--color-text-muted) !important; }
.sp-invalid-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.30) !important;
  color: #ffffff !important;
}
.sp-invalid-btn:hover svg { fill: #ffffff !important; }

/* 18) Answer Reveal - per-row toggles + total card */
.ar-row-icon,
.ar-row-icon-song {
  background: rgba(0, 184, 255, 0.18) !important;
}
.ar-row-icon svg,
.ar-row-icon-song svg { fill: #00b8ff !important; }

.ar-row-icon-artist { background: rgba(255, 0, 122, 0.18) !important; }
.ar-row-icon-artist svg { fill: #ff007a !important; }

.ar-row-value,
.ar-row-value-song,
.ar-row-value-artist {
  color: #ffffff !important;
  text-shadow: none !important;
  /* Option D from the text-options mockup: lighter weight + slightly bigger size
     reads cleaner than site.css's default weight 800 / 15px (which felt too thick
     on Rubik at this size, in both EN and HE). Time-bonus row keeps its smaller
     0.75rem font-size from site.css but inherits the new lighter weight. */
  font-weight: 600 !important;
  font-size: 16px !important;
}
.ar-row-value-time { font-size: 0.75rem !important; }
/* Release-year suffix on the song name line (Option A from the year-placement
   mockup). Smaller + muted so it reads as metadata next to the song title.
   Same line, zero added vertical height. RTL: margin-inline-start handles both. */
.ar-yr-suffix {
  color: #c8c0d8 !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  margin-inline-start: 0.4em;
  white-space: nowrap;
}
.ar-row-label,
.sb-row-label {
  color: #c8c0d8 !important;
  font-size: 0.8125rem !important;
}

/* Answer Reveal: tighten the card vertical rhythm so the page fits on shorter
   phones (the recent label + value font-size bumps added ~12px total height,
   which pushed the Back / Next Round buttons under the device nav bar).
   Net effect: ~22-26px saved on the card without changing any text size. */
.ar-answer-card {
  padding: 0.625rem 1rem 0.5rem !important;
  gap: 0.375rem !important;
}
.ar-row-v2 {
  padding: 0.45rem 0.75rem !important;
  gap: 0.25rem !important;
}
.ar-row.ar-row-time { padding: 0.4rem 0.75rem !important; }

/* Total-pill (Answer Reveal "Total" / "סה״כ" card) - site.css ships a light-pink
   gradient bg with secondary-grey label and pink score, designed for the light
   theme. On the dark theme the label and score both vanish into the pink. */
.ar-total-pill {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 0, 122, 0.45) !important;
}
.ar-total-pill-label { color: #c8c0d8 !important; }
.ar-total-pill-score { color: #ffffff !important; }
/* Honor the iOS / Android gesture-bar safe area so the bottom CTAs are
   never tucked behind the system nav. */
.screen-content {
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom)) !important;
}

.ar-toggle-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
}
.ar-toggle-btn svg { fill: #ffffff !important; }

.ar-pts {
  color: #00b8ff !important;
  text-shadow: 0 0 8px rgba(0, 184, 255, 0.5);
}

/* Time-bonus row: site.css gives this a light info-bg by default; rewrite for dark theme */
.ar-time-bonus,
.ar-time-bonus-row {
  background: rgba(0, 0, 0, 0.30) !important;
  border: 1px solid rgba(0, 184, 255, 0.20) !important;
  color: var(--color-text-secondary) !important;
}

.ar-totals-card,
.ar-total-card,
.ar-totals {
  background: rgba(0, 0, 0, 0.40) !important;
  border: 1px solid rgba(255, 0, 122, 0.45) !important;
  box-shadow: 0 0 18px rgba(255, 0, 122, 0.30);
  color: #ffffff !important;
}
.ar-total-label { color: #ff007a !important; }
.ar-total-value,
.ar-totals-value {
  color: #ffffff !important;
  text-shadow: 0 0 12px #ff007a;
}

/* 19) Score Breakdown - table */
.score-grid,
.score-table {
  background: var(--color-card) !important;
  border: 1px solid var(--color-card-border) !important;
}
.score-grid-header,
.score-row.head {
  background: rgba(0, 184, 255, 0.12) !important;
  color: #ffffff !important;
}
.score-row.total,
.score-grid-row.total {
  background: rgba(255, 0, 122, 0.10) !important;
  border-top: 1px solid rgba(255, 0, 122, 0.45) !important;
  color: #ffffff !important;
}
.score-row.total .pts,
.score-grid-row.total .pts {
  color: #ff007a !important;
  text-shadow: 0 0 10px #ff007a;
}

/* 20) Final Results - trophy + winner glow */
.fr-trophy,
.fr-trophy-circle {
  background: var(--gradient-primary) !important;
  box-shadow: 0 0 22px rgba(0, 184, 255, 0.65) !important;
}
.fr-trophy svg,
.fr-trophy-circle svg { fill: #ffffff !important; }

.fr-winner-name,
.fr-winners-label {
  color: #ffffff !important;
  text-shadow: 0 0 16px #00b8ff, 0 0 32px rgba(0, 184, 255, 0.5) !important;
}

.fr-podium-block {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(0, 184, 255, 0.25) !important;
  color: #ffffff !important;
}
.fr-podium-winner {
  background: var(--gradient-primary) !important;
  border: none !important;
  box-shadow: 0 0 20px rgba(0, 184, 255, 0.55) !important;
}
.fr-podium-name,
.fr-podium-score { color: #ffffff !important; }

.fr-stats,
.fr-stats-card {
  background: var(--color-card) !important;
  border: 1px solid var(--color-card-border) !important;
}
.fr-stat-label,
.fr-winner-label { color: #c8c0d8 !important; }
.fr-stat-val   { color: #ffffff !important; }

/* 20b) Final Results "Share with friends" strip - site.css hardcodes
   background:#fff + a light-pink border, which is a glaring white card on
   the dark theme AND makes the white-by-inheritance label text invisible. */
.fr-share-strip {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(0, 184, 255, 0.25) !important;
}
.fr-share-strip-label {
  color: #c8c0d8 !important;
}

/* 21) Dialogs / overlays */
.fr-dialog,
.dialog,
.modal-content,
.invalid-dialog,
.share-dialog,
.quit-dialog {
  background: #061025 !important;
  border: 1px solid rgba(0, 184, 255, 0.45) !important;
  box-shadow: 0 0 40px rgba(0, 184, 255, 0.30);
  color: #ffffff !important;
}
.fr-dialog-overlay,
.modal-overlay { background: rgba(0, 0, 0, 0.7) !important; }

/* Dialog text — keep titles bright white and body text high-contrast on dark dialog bg.
   site.css uses #222 / muted greys which disappear on the theme's dark dialog background. */
.quit-dialog-title,
.fr-dialog-title,
.share-title {
  color: #ffffff !important;
}
/* Share dialog: bump title size and give it breathing room now that the
   subtitle is gone, so the header doesn't read as cramped against the tiles. */
.share-title {
  font-size: 1.25rem !important;
  line-height: 1.3 !important;
  margin-top: 0.25rem !important;
  margin-bottom: 1.25rem !important;
}

/* Share dialog URL row - site.css ships a near-white pill (#f9fafb bg, #e5e7eb border)
   with var(--color-text) text, which on the dark theme reads as white-on-white. */
.share-link-row {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(0, 184, 255, 0.30) !important;
}
.share-link-url { color: #e8e4f0 !important; }
.quit-dialog-text,
.fr-dialog-note,
.share-sub {
  color: #e8e4f0 !important;
}
.fr-stepper-value { color: #ffffff !important; }

/* Extra-rounds stepper - site.css uses a light-grey pill (#f0f0f0) + light card buttons + dark icon fills.
   On the dark theme all three blend into the dialog bg. Re-skin for visibility. */
.fr-stepper {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(0, 184, 255, 0.35) !important;
}
.fr-stepper-btn {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: none !important;
}
.fr-stepper-btn:hover:not(:disabled) {
  background: rgba(0, 184, 255, 0.20) !important;
  border-color: rgba(0, 184, 255, 0.55) !important;
}
.fr-stepper-btn svg { fill: #ffffff !important; }

/* 22) Decorative blobs */
.deco-1, .deco-2, .deco-3, .deco-4 {
  background: radial-gradient(circle, rgba(0, 184, 255, 0.15) 0%, transparent 60%) !important;
  border: none !important;
}

/* 23) Generic h1 + section titles get light text on dark bg */
.setup-header-title,
h1 { color: #ffffff !important; }

/* 24) Advanced filter (artist / genre picker) — site.css ships a white card
   with light-gray inputs / chips / autocomplete rows that look fine on the
   stock light theme but read as a jarring bright rectangle on the dark Neon
   Stage theme. Restyle every surface inside .advanced-section to the same
   transparent + cyan-border + dark-input vocabulary used by .input-card and
   .range-row, so the section blends in with the year-range and age cards. */
.advanced-section {
  background: var(--color-card) !important;
  border: 1px solid var(--color-card-border) !important;
  backdrop-filter: blur(6px);
  color: var(--color-text-primary) !important;
}

/* Mode tabs (artist / genre toggle) — dark transparent pill, active gets the
   primary gradient like other primary toggles in the theme. */
.filter-mode-tab {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--color-text-secondary) !important;
}
.filter-mode-tab svg { fill: var(--color-text-secondary) !important; }
.filter-mode-tab.active {
  background: var(--gradient-primary) !important;
  background-clip: padding-box !important;
  -webkit-background-clip: padding-box !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(0, 184, 255, 0.60) !important;
}
.filter-mode-tab.active svg { fill: #ffffff !important; }

/* Search input row inside the filter card — dark input + white text. */
.artist-search-input {
  background: var(--color-input-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}
.artist-search-input::placeholder { color: var(--color-text-muted) !important; }
.artist-search-input:focus { border-color: var(--color-primary) !important; }
.artist-search-icon { fill: var(--color-text-muted) !important; }

/* Autocomplete dropdown — dark surface with neon rim. */
.artist-autocomplete {
  background: #061025 !important;
  border: 1px solid rgba(0, 184, 255, 0.40) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.50), 0 0 12px rgba(0, 184, 255, 0.18) !important;
}
.artist-result {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
.artist-result:hover {
  background: rgba(0, 184, 255, 0.10) !important;
}
.artist-result-name { color: #ffffff !important; }
.artist-result-genres { color: var(--color-text-muted) !important; }
.artist-result-img-placeholder { background: rgba(255, 255, 255, 0.08) !important; }
.artist-result-add {
  background: rgba(0, 184, 255, 0.10) !important;
  border-color: rgba(0, 184, 255, 0.55) !important;
  color: #00b8ff !important;
}
.artist-result-add:hover {
  background: var(--color-primary) !important;
  color: #ffffff !important;
}

/* Selected artist / genre tags — keep the pink accent but on a dark base
   so they read as part of the neon family, not the original light-pink chip. */
.artist-tag {
  background: rgba(255, 0, 122, 0.12) !important;
  border: 1px solid rgba(255, 0, 122, 0.45) !important;
}
.artist-tag-name { color: #ffffff !important; }
.artist-tag-remove { color: #ff007a !important; }
.artist-tag-remove:hover { color: #ffffff !important; }

/* Genre chips (legacy) — same chip vocabulary used elsewhere. */
.genre-chip {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--color-text-secondary) !important;
}
.genre-chip.selected {
  background: rgba(255, 0, 122, 0.12) !important;
  border-color: rgba(255, 0, 122, 0.55) !important;
  color: #ffffff !important;
}