/* SLE6 Ghost Riders look. Loaded after styles.css. Night = ember dark, Day = warm parchment; both keep the dark ember top bar. */

/* ---------- Night mode (ember dark) ---------- */
:root[data-theme="dark"] {
  --bg: transparent;
  --panel: rgba(14, 8, 6, 0.62);
  --panel-border: rgba(255, 140, 50, 0.22);
  --card: rgba(16, 9, 6, 0.58);
  --card-border: rgba(255, 140, 50, 0.20);
  --nav-inactive: #b9998a;
  --accent: #ffb25a;
  --accent-strong: #ff7a1a;
  --accent-light: #ffd08a;
  --accent-bg: rgba(255, 122, 26, 0.14);
  --green: #ffa23a;
  --green-bg: rgba(255, 122, 26, 0.16);
  --green-bg-strong: rgba(255, 122, 26, 0.16);
  --red: #ff5a4d;
  --red-bg: rgba(255, 90, 77, 0.16);
  --red-bg-strong: rgba(255, 90, 77, 0.16);
  --slate: #4a3630;
  --text: #fff1dc;
  --body: #e6cdb6;
  --muted: #b39682;
  --faint: #9a7f6e;
  --hover-row: rgba(255, 122, 26, 0.10);
  --border: rgba(255, 140, 50, 0.20);
  --input-bg: rgba(8, 4, 3, 0.7);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 14px 50px rgba(0, 0, 0, 0.7);
  --cyan: #ffa23a;
  --ok-green: #5fcf8a;
  --amber: #ffc04d;
  --on-ok: #07140c;
  --on-bad: #1a0504;
}

/* ---------- Day mode (warm parchment, ember accents) ---------- */
:root[data-theme="light"] {
  --bg: transparent;
  --panel: rgba(255, 248, 238, 0.94);
  --panel-border: rgba(150, 80, 30, 0.25);
  --card: rgba(255, 251, 245, 0.90);
  --card-border: rgba(150, 80, 30, 0.22);
  --nav-inactive: #7a5a47;
  --accent: #c2410c;
  --accent-strong: #d9560b;
  --accent-light: #f08a4b;
  --accent-bg: rgba(217, 86, 11, 0.10);
  --green: #b45309;
  --green-bg: rgba(217, 86, 11, 0.12);
  --green-bg-strong: rgba(217, 86, 11, 0.12);
  --red: #b91c1c;
  --red-bg: rgba(185, 28, 28, 0.10);
  --red-bg-strong: rgba(185, 28, 28, 0.10);
  --slate: #dcc7b4;
  --text: #2a160c;
  --body: #4a2f20;
  --muted: #735444;
  --faint: #86685a;
  --hover-row: rgba(217, 86, 11, 0.08);
  --border: rgba(150, 80, 30, 0.22);
  --input-bg: #fffaf4;
  --shadow: 0 1px 3px rgba(90, 40, 10, 0.18);
  --shadow-lg: 0 12px 40px rgba(90, 40, 10, 0.22);
  --cyan: #b45309;
  --ok-green: #1f8a57;
  --amber: #946200;
  --on-ok: #ffffff;
  --on-bad: #ffffff;
}

:root { --topbar-h: 76px; }

body { background: #090504; }
:root[data-theme="light"] body { background: #f7e6d2; }

/* ---------- Background: video first, then a calm gradient ---------- */
#ghost-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #090504; transition: background 1.2s ease; }
#ghost-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: saturate(1.05) brightness(0.85); transition: opacity 1.2s ease; }
#ghost-bg::after {
  content: ""; position: absolute; inset: 0; transition: opacity 1.2s ease;
  background: radial-gradient(ellipse at 50% 45%, rgba(9,5,4,0.25) 0%, rgba(9,5,4,0.55) 65%, rgba(9,5,4,0.85) 100%),
              linear-gradient(to bottom, rgba(9,5,4,0.5), rgba(9,5,4,0.2) 40%, rgba(9,5,4,0.45));
}
/* after the animation (and on every practice / deck screen) the video fades out into the gradient */
html.sle6-focus #ghost-bg video, html.sle6-done #ghost-bg video,
html.sle6-focus #ghost-bg::after, html.sle6-done #ghost-bg::after { opacity: 0; }
:root[data-theme="dark"].sle6-focus #ghost-bg, :root[data-theme="dark"].sle6-done #ghost-bg { background: radial-gradient(ellipse at 50% -10%, #2a1409 0%, #150a06 45%, #0b0605 100%); }
:root[data-theme="light"] #ghost-bg { background: #f7e6d2; }
:root[data-theme="light"].sle6-focus #ghost-bg, :root[data-theme="light"].sle6-done #ghost-bg { background: radial-gradient(ellipse at 50% -10%, #fff3e3 0%, #fbe4cb 45%, #f1d0ad 100%); }
/* while the video is still playing in day mode, keep it behind a light veil so the text stays readable */
:root[data-theme="light"] #ghost-bg::after { background: linear-gradient(rgba(255,244,230,0.55), rgba(247,230,210,0.72)); }

:root[data-theme="dark"].sle6-focus, :root[data-theme="dark"].sle6-done { --card: rgba(26, 15, 10, 0.88); --panel: rgba(18, 10, 7, 0.92); }
:root[data-theme="light"].sle6-focus, :root[data-theme="light"].sle6-done { --card: rgba(255, 252, 247, 0.96); --panel: rgba(255, 248, 238, 0.97); }

#layout, #modal-root, #drawer-root, #lightbox-root, #toast-root { position: relative; z-index: 1; }
body { color: var(--body); }
::selection { background: rgba(255, 122, 26, 0.45); color: #fff; }
.card, .exam-row > *, .panel { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
html.sle6-focus .card, html.sle6-focus .exam-row > *, html.sle6-done .card, html.sle6-done .exam-row > * { backdrop-filter: none; -webkit-backdrop-filter: none; }
.btn-primary, button.primary { background: linear-gradient(180deg, #ff9a3c, #ff6a10); color: #1a0a02; border-color: #ff8a2a; box-shadow: 0 0 14px rgba(255, 110, 20, 0.3); }

/* ---------- Top bar: dark ember in both modes, banner as the brand ---------- */
#topbar {
  position: fixed; z-index: 60;
  background: rgba(14, 8, 6, 0.92); border-bottom: 1px solid rgba(255, 140, 50, 0.30);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  /* the bar stays dark, so give it its own light-on-dark colors in day mode too */
  --text: #fff1dc; --body: #e6cdb6; --muted: #b39682; --border: rgba(255, 140, 50, 0.30);
  --panel: rgba(14, 8, 6, 0.92); --panel-border: rgba(255, 140, 50, 0.30); --accent: #ffb25a; --accent-bg: rgba(255, 122, 26, 0.16);
}
#topbar .topbar-inner { padding-left: 12px; gap: 10px; }
#topbar .logo { gap: 0; }
#topbar .logo-banner {
  display: block; height: calc(var(--topbar-h) - 12px); width: auto; max-width: 52vw; object-fit: contain;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-composite: intersect;
}
@media (max-width: 480px) { :root { --topbar-h: 64px; } #topbar .theme-toggle span { display: none; } }
#topbar .theme-toggle { background: rgba(255, 255, 255, 0.07); color: #fff1dc; border-color: rgba(255, 140, 50, 0.45); }
#topbar .theme-toggle:hover { background: rgba(255, 122, 26, 0.22); color: #fff; }