/* =============================================================================
   SHOWDOWN GLOBAL RESKIN — applied to every user page when knockout mode is on
   (html[data-ui="showdown"], set by theme.js). Re-tones the shared app shell,
   cards, rail, buttons, tiles, badges, and auth pages to the Showdown look:
   deep purple-black radial ground, Space-Grotesk display headings, vivid
   purple→pink accents, rounder surfaces. Scoped so OFF is completely untouched.
   ========================================================================== */

html[data-ui="showdown"] {
  color-scheme: dark;
}

/* Token overrides — deeper, more saturated than plain dark mode. */
html[data-ui="showdown"] body.app,
html[data-ui="showdown"] body {
  --bg: #0a0a12;
  --surface: #12121c;
  --surface-2: #181822;
  --text: #ffffff;
  --text-dim: #9a9aae;
  --accent: #a855f7;
  --accent-soft: #1c1430;
  --accent-2: #ec4899;
  --ok: #34d399;
  --border: rgba(255,255,255,.08);
  --shadow: 0 20px 60px -20px rgba(0,0,0,.7);

  --ink: #10101a;
  --ink-2: #20202e;
  --page: #08080e;
  --shell: #0e0e16;
  --card: #12121c;
  --card-2: #181822;
}

/* LIGHT variant of the Showdown reskin — soft lavender-tinted light. Default is
   dark; this only applies when the user switches the theme toggle to light. */
html[data-ui="showdown"][data-theme="light"] body.app,
html[data-ui="showdown"][data-theme="light"] body {
  --bg: #f3f1fb;
  --surface: #ffffff;
  --surface-2: #f4f1fc;
  --text: #1c1633;
  --text-dim: #6b6785;
  --accent: #7c3aed;
  --accent-soft: #efe9fe;
  --accent-2: #db2777;
  --ok: #059669;
  --border: rgba(28,22,51,.10);
  --shadow: 0 12px 40px -14px rgba(80,40,140,.25);

  --ink: #1c1633;          /* dark chips on light bg (e.g. rail) */
  --ink-2: #2a2350;
  --page: #ece8f7;
  --shell: #ffffff;
  --card: #ffffff;
  --card-2: #f4f1fc;
}

/* Radial ground: dark by default, soft lavender wash in light mode. */
html[data-ui="showdown"] body.app,
html[data-ui="showdown"] body:not(.app) {
  background: radial-gradient(120% 90% at 50% -10%, #17111f 0%, #0a0a12 46%, #08080e 100%) !important;
}
html[data-ui="showdown"][data-theme="light"] body.app,
html[data-ui="showdown"][data-theme="light"] body:not(.app) {
  background: radial-gradient(120% 90% at 50% -10%, #f0eafc 0%, #f3f1fb 46%, #ece8f7 100%) !important;
}

/* Display headings → Space Grotesk (already self-hosted). */
html[data-ui="showdown"] .play-title,
html[data-ui="showdown"] h1, html[data-ui="showdown"] h2,
html[data-ui="showdown"] .auth-hero-title, html[data-ui="showdown"] .auth-card-title,
html[data-ui="showdown"] .tile-big, html[data-ui="showdown"] .final {
  font-family: 'Space Grotesk','Inter',sans-serif;
}

/* Shell: rounder, deeper. */
html[data-ui="showdown"] .shell {
  background: var(--shell);
  border: 1px solid var(--border);
  border-radius: 28px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7);
}

/* Cards + match cards: dark, rounded, soft border. */
html[data-ui="showdown"] .card,
html[data-ui="showdown"] .match-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 30px -10px rgba(0,0,0,.6);
}
html[data-ui="showdown"] .match-card .head { background: var(--card-2); border-bottom: 1px solid var(--border); }

/* Stat tiles. */
html[data-ui="showdown"] .tile { background: var(--card); border: 1px solid var(--border); border-radius: 18px; }
html[data-ui="showdown"] .tile.feature { background: linear-gradient(140deg, var(--accent-soft), var(--card) 70%); border-color: rgba(168,85,247,.3); }
html[data-ui="showdown"] .caps i.on { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }

/* Primary buttons + CTAs → brand gradient. */
html[data-ui="showdown"] .btn:not(.secondary),
html[data-ui="showdown"] .pill-cta,
html[data-ui="showdown"] .btn.full:not(.secondary) {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; border: none;
  box-shadow: 0 12px 34px rgba(168,85,247,.32);
}
html[data-ui="showdown"] .btn:not(.secondary):hover,
html[data-ui="showdown"] .pill-cta:hover { filter: brightness(1.06); }
html[data-ui="showdown"] .btn.secondary { background: var(--card-2); border: 1px solid var(--border); color: var(--text); }

/* Pill tabs (predict, etc.). */
html[data-ui="showdown"] .pill-tab.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; color: #fff; }

/* Rail: keep it dark; brighten the active accent. */
html[data-ui="showdown"] .rail { background: var(--ink); border: 1px solid var(--border); }
html[data-ui="showdown"] .rail-link.active { background: var(--ink-2); box-shadow: inset 2px 0 0 var(--accent); }
html[data-ui="showdown"] .rail-logo { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }

/* Points/accents. */
html[data-ui="showdown"] .pts, html[data-ui="showdown"] .my-pick-label { color: #c084fc; }
html[data-ui="showdown"] .pts-badge { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }

/* Stage chip (my-wins) + leaderboard medals stay readable. */
html[data-ui="showdown"] .stage-chip { background: var(--accent-soft); color: #c084fc; border-color: rgba(168,85,247,.3); }

/* Section titles + empty states. */
html[data-ui="showdown"] .empty { background: var(--card-2); border-color: var(--border); }

/* Results table. */
html[data-ui="showdown"] tbody tr:hover { background: var(--surface-2); }
html[data-ui="showdown"] th { color: var(--text-dim); }

/* ---- Auth (login/signup) reskin ----
   Keep the card TRANSPARENT so it blends into the form pane / page ground
   instead of looking like a hard separate box (the inputs carry the surface). */
html[data-ui="showdown"] .auth-card { background: transparent; border: none; box-shadow: none; }
html[data-ui="showdown"] .auth-submit { background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important; color: #fff !important; }
html[data-ui="showdown"] input[type="text"],
html[data-ui="showdown"] input[type="email"],
html[data-ui="showdown"] input[type="password"],
html[data-ui="showdown"] input[type="number"],
html[data-ui="showdown"] select,
html[data-ui="showdown"] textarea {
  background: var(--card-2); border: 1px solid var(--border); color: var(--text);
}

/* Toasts. */
html[data-ui="showdown"] .toast { background: var(--card); border-color: var(--border); color: var(--text); }