:root {
  /* Base Palette */
  --clr-slate-50: #f8fafc;
  --clr-white: #ffffff;
  --clr-slate-100: #f1f5f9;
  --clr-slate-200: #e2e8f0;
  --clr-slate-300: #cbd5e1;
  --clr-slate-400: #94a3b8;
  --clr-slate-500: #64748b;
  --clr-slate-600: #475569;
  --clr-slate-700: #334155;
  --clr-slate-800: #1e293b;
  --clr-slate-900: #0f172a;
  --clr-indigo-100: #e0e7ff;
  --clr-indigo-300: #a5b4fc;
  --clr-indigo-500: #6366f1;
  --clr-indigo-600: #4f46e5;
  --clr-indigo-700: #4338ca;
  --clr-indigo-800: #3730a3;
  --clr-emerald-600: #059669;
  --clr-emerald-700: #047857;
  --clr-amber-50: #fffbeb;
  --clr-amber-100: #fef3c7;
  --clr-amber-700: #b45309;
  --clr-green-100: #dcfce7;
  --clr-green-700: #15803d;
  --clr-red-100: #fee2e2;
  --clr-red-700: #b91c1c;

  /* Semantic Variables - Default Theme */
  --app-bg: var(--clr-slate-50);
  --canvas-bg: var(--clr-white);
  --surface-bg: var(--clr-white);
  --surface-bg-alt: var(--clr-slate-50);

  --text-primary: var(--clr-slate-900);
  --text-secondary: var(--clr-slate-700);
  --text-tertiary: var(--clr-slate-500);
  --text-muted: var(--clr-slate-400);
  --text-on-accent: #ffffff;
  --text-on-secondary-accent: #ffffff;

  --accent-primary: var(--clr-indigo-600);
  --accent-primary-alt: var(--clr-indigo-500);
  --accent-primary-soft: var(--clr-indigo-100);
  --accent-secondary: var(--clr-emerald-600);

  --border-base: var(--clr-slate-200);
  --border-subtle: var(--clr-slate-100);
  --border-focus: var(--clr-indigo-300);

  --radius-main: 0.75rem;
  --radius-subtle: 0.375rem;
  --radius-pill: 9999px;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-main: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-lg:
    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  --scrollbar-track: var(--clr-slate-100);
  --scrollbar-thumb: var(--clr-slate-300);

  --font-sans: ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Theme Overrides */
[data-theme="stellar_voyage"] {
  --app-bg: #000000;
  --canvas-bg: #050505;
  --surface-bg: #0c0c0c;
  --surface-bg-alt: #121212;

  --text-primary: #f8f8f8;
  --text-secondary: #dddddd;
  --text-tertiary: #aaaaaa;
  --text-muted: #777777;

  --accent-primary: #ff9d00; /* LCARS Orange */
  --accent-primary-alt: #df80ff; /* Shinier LCARS Purple */
  --accent-primary-soft: rgba(223, 128, 255, 0.1);
  --accent-secondary: #ffff99; /* ST Lt Yellow */

  --border-base: #2a2a2a;
  --border-subtle: #1a1a1a;
  --border-focus: #df80ff;

  --radius-main: 0.25rem;
  --radius-subtle: 0.125rem;

  --font-sans: "Monoid", monospace;

  /* Neon Glows */
  --shadow-sm: 0 0 5px rgba(223, 128, 255, 0.2);
  --shadow-main: 0 0 10px rgba(223, 128, 255, 0.3);
  --shadow-xl: 0 0 30px rgba(223, 128, 255, 0.2);

  --scrollbar-track: #0c0c0c;
  --scrollbar-thumb: #df80ff;
}

[data-theme="classic_manor"] {
  --app-bg: #1a4d2e; /* Billiard Green */
  --canvas-bg: #faf3e0;
  --surface-bg: #fdf6e3;
  --surface-bg-alt: #f5eedc;

  --text-primary: #2c1810;
  --text-secondary: #4a3728;

  --accent-primary: #8b0000; /* Dark Mahogany */
  --accent-primary-alt: #a52a2a;
  --accent-primary-soft: rgba(139, 0, 0, 0.1);
  --accent-secondary: #daa520; /* Gold */

  --border-base: #dcd0b9;
  --border-subtle: #e8dfcc;
  --border-focus: #8b0000;

  --font-sans: "reforma", "Georgia", serif;

  --scrollbar-track: #f5eedc;
  --scrollbar-thumb: #8b0000;
}

[data-theme="medieval"] {
  --app-bg: #2b2b2b; /* Stone Gray */
  --canvas-bg: #e3d5b8; /* Old Parchment */
  --surface-bg: #ebdeca;
  --surface-bg-alt: #dfcfb4;

  --text-primary: #1c1c1c;
  --text-secondary: #333333;

  --accent-primary: #b8860b; /* Dark Goldenrod */
  --accent-primary-alt: #8b4513; /* Saddle Brown */
  --accent-primary-soft: rgba(184, 134, 11, 0.15);
  --accent-secondary: #800020; /* Burgundy */

  --border-base: #c1b094;
  --border-subtle: #d3c4a9;
  --border-focus: #b8860b;

  --font-sans: "Cinzel", "reforma", serif;

  --scrollbar-track: #dfcfb4;
  --scrollbar-thumb: #b8860b;
}

/* ============================================
   SHERLOCK HOLMES THEME - Victorian Detective
   ============================================ */
[data-theme="sherlock"] {
  --app-bg: #1a1410;
  --canvas-bg: #f5ebe0;
  --surface-bg: #faf6f0;
  --surface-bg-alt: #f0e8d8;

  --text-primary: #2c1810;
  --text-secondary: #4a3728;
  --text-tertiary: #6b5847;

  --accent-primary: #8b4513;
  --accent-primary-alt: #a0522d;
  --accent-primary-soft: rgba(139, 69, 19, 0.1);
  --accent-secondary: #c19a6b;

  --border-base: #d4c4b0;
  --border-subtle: #e5dcc8;
  --border-focus: #8b4513;

  --font-sans: "Playfair Display", "Georgia", serif;

  --scrollbar-track: #f0e8d8;
  --scrollbar-thumb: #8b4513;
}

[data-theme="sherlock"] .entity-person {
  font-style: italic;
  border-bottom: 1px solid rgba(139, 69, 19, 0.3);
}
[data-theme="sherlock"] .entity-item {
  font-variant: small-caps;
  color: #6b5847;
}
[data-theme="sherlock"] .entity-room {
  color: #8b4513;
  font-weight: 600;
}
[data-theme="sherlock"] .entity-role {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.85em;
}

/* ============================================
   THE GREAT GATSBY THEME - Art Deco 1920s
   ============================================ */
[data-theme="gatsby"] {
  --app-bg: #0f0f0f;
  --canvas-bg: #f0ebe0;
  --surface-bg: #f8f3eb;
  --surface-bg-alt: #ebe6da;

  --text-primary: #1a1a1a;
  --text-secondary: #2d2d2d;
  --text-tertiary: #666666;

  --accent-primary: #9d7f1a;
  --accent-primary-alt: #b8941f;
  --accent-primary-soft: rgba(157, 127, 26, 0.15);
  --accent-secondary: #0097a7;

  --border-base: #d4af37;
  --border-subtle: #e8dcc0;
  --border-focus: #ffd700;

  --font-sans: "Caviar Dreams", "Georgia", serif;

  --radius-main: 2px;
  --radius-subtle: 1px;

  --scrollbar-track: #f5f2ed;
  --scrollbar-thumb: #d4af37;

  --shadow-sm: 0 2px 4px rgba(212, 175, 55, 0.1);
  --shadow-main: 0 4px 8px rgba(212, 175, 55, 0.15);
  --shadow-xl: 0 8px 32px rgba(212, 175, 55, 0.2);
}

[data-theme="gatsby"] .card-title,
[data-theme="gatsby"] .suspect-name {
  font-family: "Caviar Dreams", sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
}

[data-theme="gatsby"] .entity-person {
  color: #e6c645;
  font-weight: 600;
  background: #33333388;
  padding: 1px 6px;
  border-radius: 6px;
}
[data-theme="gatsby"] .entity-item {
  font-style: italic;
  color: #00bcd4;
}
[data-theme="gatsby"] .entity-room {
  font-variant: small-caps;
  font-weight: 600;
}
[data-theme="gatsby"] .entity-role {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9em;
}

[data-theme="gatsby"] .connection-badge {
  color: #2d2d2d;
  background-color: #e8d8b8;
  border-color: #d4af37;
}

/* ============================================
   THE MALTESE FALCON THEME - 1940s Film Noir
   ============================================ */
[data-theme="falcon"] {
  --app-bg: #0a0a0a;
  --canvas-bg: #e8e4dc;
  --surface-bg: #f0ebe0;
  --surface-bg-alt: #e3ddd0;

  --text-primary: #1a1a1a;
  --text-secondary: #2d2d2d;
  --text-tertiary: #555555;

  --accent-primary: #c41e3a;
  --accent-primary-alt: #8b0000;
  --accent-primary-soft: rgba(196, 30, 58, 0.1);
  --accent-secondary: #b8a490;

  --border-base: #666666;
  --border-subtle: #999999;
  --border-focus: #c41e3a;

  --font-sans: "Reforma", "Georgia", serif;

  --scrollbar-track: #e3ddd0;
  --scrollbar-thumb: #666666;

  --shadow-sm: 2px 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-main: 4px 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-xl: 8px 8px 24px rgba(0, 0, 0, 0.5);
}

[data-theme="falcon"] .entity-person {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
[data-theme="falcon"] .entity-item {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 4px;
}
[data-theme="falcon"] .entity-room {
  font-style: italic;
  color: #555555;
}
[data-theme="falcon"] .entity-role {
  border: 1px solid #c41e3a;
  padding: 0 4px;
  background: rgba(196, 30, 58, 0.05);
}

/* ============================================
   ORIENT EXPRESS THEME - 1930s Luxury Train
   ============================================ */
[data-theme="continental_express"] {
  --app-bg: #1a1a2e;
  --canvas-bg: #f8f5f0;
  --surface-bg: #ffffff;
  --surface-bg-alt: #f0ebe5;

  --text-primary: #16213e;
  --text-secondary: #2d3e5f;
  --text-tertiary: #5a6f8f;

  --accent-primary: #8b0000;
  --accent-primary-alt: #a52a2a;
  --accent-primary-soft: rgba(139, 0, 0, 0.1);
  --accent-secondary: #cd7f32;

  --border-base: #cd7f32;
  --border-subtle: #d4c5b0;
  --border-focus: #8b0000;

  --font-sans: "Libre Bodoni", "Didot", "Georgia", serif;

  --scrollbar-track: #f0ebe5;
  --scrollbar-thumb: #8b0000;

  --shadow-sm: 0 2px 8px rgba(139, 0, 0, 0.1);
  --shadow-main: 0 4px 16px rgba(139, 0, 0, 0.15);
  --shadow-xl: 0 8px 32px rgba(139, 0, 0, 0.2);
}

[data-theme="continental_express"] .entity-person {
  font-variant: small-caps;
  color: #8b0000;
  letter-spacing: 0.5px;
}
[data-theme="continental_express"] .entity-item {
  font-style: italic;
  color: #cd7f32;
}
[data-theme="continental_express"] .entity-room {
  font-weight: 600;
  border-bottom: 1px solid rgba(205, 127, 50, 0.3);
}
[data-theme="continental_express"] .entity-role {
  text-transform: uppercase;
  font-size: 0.85em;
  letter-spacing: 1px;
}

/* ============================================
   BLADE RUNNER THEME - Cyberpunk 1982
   ============================================ */
[data-theme="edge_walker"] {
  --app-bg: #000000;
  --canvas-bg: #0d1117;
  --surface-bg: #161b22;
  --surface-bg-alt: #1c2128;

  --text-primary: #c9d1d9;
  --text-secondary: #8b949e;
  --text-tertiary: #6e7681;

  --accent-primary: #00d9ff;
  --accent-primary-alt: #00b8d4;
  --accent-primary-soft: rgba(0, 217, 255, 0.1);
  --accent-secondary: #ff6b35;

  --border-base: #30363d;
  --border-subtle: #21262d;
  --border-focus: #00d9ff;

  --font-sans: "Orbitron", "Arial", sans-serif;

  --radius-main: 2px;
  --radius-subtle: 1px;

  --scrollbar-track: #1c2128;
  --scrollbar-thumb: #00d9ff;

  --shadow-sm: 0 0 8px rgba(0, 217, 255, 0.3);
  --shadow-main: 0 0 16px rgba(0, 217, 255, 0.4);
  --shadow-xl: 0 0 32px rgba(0, 217, 255, 0.5);
}

[data-theme="edge_walker"] .entity-person {
  color: #00d9ff;
  text-shadow: 0 0 8px rgba(0, 217, 255, 0.5);
}
[data-theme="edge_walker"] .entity-item {
  color: #ff6b35;
  text-shadow: 0 0 8px rgba(255, 107, 53, 0.5);
}
[data-theme="edge_walker"] .entity-room {
  color: #00ff9f;
  text-shadow: 0 0 8px rgba(0, 255, 159, 0.4);
}
[data-theme="edge_walker"] .entity-role {
  text-transform: uppercase;
  color: #ff00ff;
  font-weight: 700;
  letter-spacing: 2px;
}

/* ============================================
   FRASIER THEME - 1990s Seattle Sitcom
   ============================================ */
[data-theme="radio_shrink"] {
  --app-bg: #2c5f7c;
  --canvas-bg: #f5f5f0;
  --surface-bg: #ffffff;
  --surface-bg-alt: #fafaf8;

  --text-primary: #2c3e50;
  --text-secondary: #34495e;
  --text-tertiary: #7f8c8d;

  --accent-primary: #9c27b0;
  --accent-primary-alt: #7b1fa2;
  --accent-primary-soft: rgba(156, 39, 176, 0.1);
  --accent-secondary: #00acc1;

  --border-base: #dddddd;
  --border-subtle: #eeeeee;
  --border-focus: #9c27b0;

  --font-sans: "Lato", "Helvetica Neue", sans-serif;

  --radius-main: 8px;
  --radius-subtle: 4px;

  --scrollbar-track: #fafaf8;
  --scrollbar-thumb: #9c27b0;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-main: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.12);
}

[data-theme="radio_shrink"] .entity-person {
  color: #9c27b0;
  font-weight: 600;
}
[data-theme="radio_shrink"] .entity-item {
  font-style: italic;
  color: #00acc1;
}
[data-theme="radio_shrink"] .entity-room {
  font-weight: 600;
  color: #2c5f7c;
}
[data-theme="radio_shrink"] .entity-role {
  font-variant: small-caps;
  letter-spacing: 0.5px;
}

/* ============================================
   BLUE PRINCE THEME - Architectural Mystery
   ============================================ */
[data-theme="indigo_heir"] {
  --app-bg: #1a1a3e;
  --canvas-bg: #f8f6f0;
  --surface-bg: #fffef9;
  --surface-bg-alt: #f5f3ed;

  --text-primary: #2c3e50;
  --text-secondary: #34495e;
  --text-tertiary: #7f8c8d;

  --accent-primary: #5b7c99;
  --accent-primary-alt: #4a6b89;
  --accent-primary-soft: rgba(91, 124, 153, 0.15);
  --accent-secondary: #8b7355;

  --border-base: #5b7c99;
  --border-subtle: #d4cfc8;
  --border-focus: #4a6b89;

  --font-sans: "Quicksand", "Helvetica Neue", sans-serif;

  --radius-main: 4px;
  --radius-subtle: 2px;

  --scrollbar-track: #f5f3ed;
  --scrollbar-thumb: #5b7c99;

  --shadow-sm: 0 2px 8px rgba(91, 124, 153, 0.1);
  --shadow-main: 0 4px 16px rgba(91, 124, 153, 0.15);
  --shadow-xl: 0 8px 32px rgba(91, 124, 153, 0.2);
}

[data-theme="indigo_heir"] .entity-person {
  color: #5b7c99;
  font-weight: 600;
}
[data-theme="indigo_heir"] .entity-item {
  color: #8b7355;
  font-style: italic;
}
[data-theme="indigo_heir"] .entity-room {
  color: #4a6b89;
  font-weight: 600;
  border-bottom: 1px dotted rgba(91, 124, 153, 0.3);
}
[data-theme="indigo_heir"] .entity-role {
  font-variant: small-caps;
  letter-spacing: 0.5px;
  color: #5b7c99;
}

/* Sketch/blueprint aesthetic for Blue Prince */
[data-theme="indigo_heir"] .card-title {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9em;
}

/* ============================================
   SHADOW PROTOCOL THEME - Cold War Espionage
   ============================================ */
[data-theme="shadow_protocol"] {
  --app-bg: #2a2a2a;
  --canvas-bg: #d8d5cc;
  --surface-bg: #e8e5dc;
  --surface-bg-alt: #d0cdc4;

  --text-primary: #1a1a1a;
  --text-secondary: #3a3a3a;
  --text-tertiary: #666666;

  --accent-primary: #8b0000;
  --accent-primary-alt: #a52a2a;
  --accent-primary-soft: rgba(139, 0, 0, 0.1);
  --accent-secondary: #556b2f;

  --border-base: #8b8b7a;
  --border-subtle: #a5a59a;
  --border-focus: #8b0000;

  --font-sans: "Monoid", "Courier New", monospace;

  --radius-main: 2px;
  --radius-subtle: 1px;

  --scrollbar-track: #d0cdc4;
  --scrollbar-thumb: #8b0000;

  --shadow-sm: 1px 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-main: 2px 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-xl: 4px 4px 12px rgba(0, 0, 0, 0.4);
}

[data-theme="shadow_protocol"] .entity-person {
  font-family: "Monoid", monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.95em;
  color: #8b0000;
  background: rgba(139, 0, 0, 0.08);
  padding: 2px 6px;
  border-left: 3px solid #8b0000;
}

[data-theme="shadow_protocol"] .entity-item {
  color: #556b2f;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-style: solid;
  text-decoration-color: rgba(85, 107, 47, 0.3);
}

[data-theme="shadow_protocol"] .entity-room {
  font-variant: small-caps;
  color: #3a3a3a;
  border-bottom: 2px solid rgba(139, 0, 0, 0.2);
  font-weight: 600;
}

[data-theme="shadow_protocol"] .entity-role {
  text-transform: uppercase;
  font-size: 0.85em;
  letter-spacing: 1.5px;
  color: #8b0000;
  font-weight: 700;
}

/* Classified document aesthetic */
[data-theme="shadow_protocol"] .card-title {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  border-bottom: 2px solid #8b0000;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Main Containers */
.app-container {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--app-bg);
  position: relative;
  width: 100%;
}

body {
  background-color: #000; /* Base background for intro */
  color: var(--text-primary);
  font-family: var(--font-sans);
  overflow: hidden;
  height: 100dvh;
}

/* Main Area */
.app-main {
  flex: 1;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.evidence-view {
  position: absolute;
  inset: 0;
  padding: 1rem;
  overflow-y: auto;
  max-width: 56rem;
  margin: 0 auto;
  padding-bottom: 8rem;
}

@media (min-width: 768px) {
  .evidence-view {
    padding: 1.5rem;
  }
}

.evidence-card {
  background-color: var(--surface-bg);
  border-radius: var(--radius-main);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-base);
  display: flex;
  flex-direction: column;
  height: fit-content;
  min-height: 50%;
}

.card-header {
  padding: 1rem;
  border-bottom: 1px solid var(--border-subtle);
  background-color: var(--surface-bg-alt);
}

.card-title {
  font-weight: 700;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem; /* Mobile: ~80% of desktop size */
}

.card-title i {
  color: var(--accent-primary-alt);
  font-size: 1.25rem;
}

/* Drawers */
.drawer {
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: var(--surface-bg);
  box-shadow: var(--shadow-xl);
  z-index: 40;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

#locations-drawer {
  left: 0;
  width: 85%;
  border-right: 1px solid var(--border-base);
  transform: translate3d(-100%, 0, 0);
}

#notebook-drawer {
  right: 0;
  width: 90%;
  border-left: 1px solid var(--border-base);
  transform: translate3d(100%, 0, 0);
}

@media (min-width: 768px) {
  #locations-drawer {
    width: 350px;
  }
  #notebook-drawer {
    width: 450px;
  }
}

.drawer-tab {
  position: absolute;
  transform: translateY(-50%);
  padding: 1.5rem 0.5rem;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

.drawer-tab * {
  /* Base color that hopefully works well enough if I forget to override per theme */
  color: #ffffff;
}

#locations-tab {
  top: 35%;
  right: -2.5rem;
  background-color: var(--accent-secondary);
  border-radius: 0 0.5rem 0.5rem 0;
}

#locations-tab:active {
  opacity: 0.9;
}

#notebook-tab {
  top: 65%;
  left: -2.5rem;
  background-color: var(--accent-primary);
  border-radius: 0.5rem 0 0 0.5rem;
}

#notebook-tab:active {
  opacity: 0.9;
}

.drawer-tab i {
  font-size: 1.25rem;
}

.drawer-header {
  padding: 1rem;
  border-bottom: 1px solid var(--border-subtle);
  background-color: var(--surface-bg-alt);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.drawer-content {
  padding: 1rem;
  overflow-y: auto;
  flex: 1;
  padding-bottom: 2.5rem;
}

.drawer-footer {
  padding: 1rem;
  border-top: 1px solid var(--border-subtle);
  background-color: var(--surface-bg-alt);
  display: flex;
  gap: 0.75rem;
  margin-top: auto;
  padding-bottom: 2rem;
}

.drawer-footer .btn {
  flex: 1;
  padding: 0.75rem;
  min-width: 2.5rem;
}

.drawer-footer .btn i {
  font-size: 1.25rem;
}

@media (min-width: 768px) {
  .drawer-footer {
    padding-bottom: 1rem;
  }
}

/* Clues List */
.clues-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 2.5rem 0;
  width: 100%;
}
.clue-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.clue-item {
  padding: 0.75rem;
  background-color: var(--surface-bg-alt);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-subtle);
  font-size: 0.875rem;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  transition: all 0.2s;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.clue-item:hover {
  border-color: var(--border-focus);
}

.clue-item.dimmed {
  opacity: 0.25;
  transition: opacity 0.3s ease;
}

.clue-item.dimmed:hover {
  opacity: 0.35;
}

.clue-handle {
  font-weight: 700;
  color: var(--accent-primary-alt);
  min-width: 1.5rem;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  text-align: right;
  flex-shrink: 0;
  padding-right: 0.25rem;
  border-right: 2px solid var(--accent-primary-soft);
}

.clue-handle:active {
  cursor: grabbing;
  color: var(--accent-primary);
}

.clue-text {
  color: var(--text-secondary);
  line-height: 1.4;
  flex: 1;
}

.sortable-ghost {
  opacity: 0.5;
  background: var(--accent-primary-soft);
}

/* Notebook Grid */
.notebook-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.suspect-card {
  background-color: var(--surface-bg);
  padding: 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border-base);
  box-shadow: var(--shadow-sm);
  font-size: 0.875rem;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

.suspect-name {
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.suspect-icon {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-pill);
  background-color: var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
}

.suspect-relationships {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.625rem;
  padding-top: 0.25rem;
}

.relationship-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background-color: var(--accent-primary-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.relationship-badge i {
  font-size: 0.875rem;
  opacity: 0.7;
}

.guess-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  border-radius: 0.25rem;
  padding: 0.125rem;
  transition: background-color 0.2s;
}
.guess-label {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  width: 3rem;
}

.guess-row.has-conflict {
  background-color: rgba(255, 0, 0, 0.05);
}

.guess-row.has-conflict .select-input {
  border-color: #ff4444 !important;
  color: #ff4444;
  font-weight: 700;
}

/* Buttons */
.btn {
  border-radius: 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
}

.btn i,
.btn span {
  /* Base color that hopefully works well enough if I forget to override it per theme */
  color: #ffffff;
}

.btn:active {
  transform: scale(0.95);
}

.btn-primary {
  background-color: var(--accent-primary);
  padding: 0.5rem 0.75rem;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.btn-primary:active {
  opacity: 0.9;
}

.btn-dark {
  background-color: var(--clr-slate-900);
  flex: 1;
  padding: 0.75rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
}

.btn-outline {
  border: 1px solid var(--clr-slate-300);
  padding: 0 1rem;
  background: transparent;
}

.btn-outline:hover {
  background-color: var(--clr-amber-50);
}

.btn-icon {
  padding: 0.5rem;
  border-radius: 0.5rem;
  background-color: var(--border-subtle);
}

.btn-icon:hover {
  background-color: var(--border-base);
}

/* Entity Highlights */
[class^="entity-"] {
  display: inline-block;
  font-weight: 600;
}

/* Classic Mansion: Subtle dotted underline */
[data-theme="classic"] [class^="entity-"] {
  border-bottom: 1px dotted var(--accent-primary);
  font-weight: 700;
}

/* Computer glows */
[data-theme="stellar_voyage"] [class^="entity-"] {
  color: #bbbbbb;
} /* Darken text slightly to let glow pop */
[data-theme="stellar_voyage"] .entity-person {
  text-shadow: 0 0 4px var(--accent-primary);
}
[data-theme="stellar_voyage"] .entity-item {
  text-shadow: 0 0 4px var(--accent-primary-alt);
}
[data-theme="stellar_voyage"] .entity-room {
  text-shadow: 0 0 4px #c5a059;
}
[data-theme="stellar_voyage"] .entity-role {
  text-shadow: 0 0 4px #ff0000;
  font-style: italic;
}

/* Medieval Mystery: Ink & Gold */
[data-theme="medieval"] .entity-person {
  color: #5d4037;
  border-bottom: 1px solid rgba(93, 64, 55, 0.3);
}
[data-theme="medieval"] .entity-item {
  color: #5d4037;
  font-style: italic;
}
[data-theme="medieval"] .entity-room {
  color: var(--accent-secondary);
  border-bottom: 1px solid rgba(128, 0, 32, 0.3);
}
[data-theme="medieval"] .entity-role {
  font-variant: small-caps;
  color: #4e342e;
}

/* Inputs */
.select-input {
  flex: 1;
  padding: 0.375rem;
  border: 1px solid var(--border-base);
  border-radius: 0.25rem;
  font-size: 0.75rem;
  background-color: var(--surface-bg-alt);
  text-transform: capitalize;
  outline: none;
  color: var(--text-primary);
}

.scenario-select {
  font-size: 0.75rem;
  border: 1px solid var(--border-base);
  border-radius: 0.25rem;
  padding: 0.25rem;
  background-color: var(--surface-bg-alt);
  outline: none;
  color: var(--text-primary);
}

/* Badges */
.status-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
}

.status-badge.hidden {
  display: none;
}
.status-badge.correct {
  background-color: var(--clr-green-100);
  color: var(--clr-green-700);
}
.status-badge.incorrect {
  background-color: var(--clr-red-100);
  color: var(--clr-red-700);
}
.status-badge.revealed {
  background-color: var(--clr-amber-100);
  color: var(--clr-amber-700);
}

/* Locations List */
.locations-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.location-item {
  border: 1px solid var(--border-base);
  border-radius: 0.5rem;
  padding: 0.75rem;
  background-color: var(--surface-bg-alt);
}
.location-name {
  font-weight: 700;
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}
.feature-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.feature-badge {
  font-size: 0.625rem;
  background-color: var(--surface-bg);
  border: 1px solid var(--border-base);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-pill);
  color: var(--text-tertiary);
}

.connection-badge {
  font-size: 0.625rem;
  background-color: var(--accent-primary-soft);
  border: 1px solid var(--accent-primary-alt);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  color: var(--accent-primary-alt);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.connection-badge i {
  font-size: 0.75rem;
}

/* Debug Overlay */
#debug-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

#debug-overlay.hidden {
  display: none;
}

@media (min-width: 768px) {
  #debug-overlay {
    flex-direction: row;
    justify-content: flex-end;
  }
}

.debug-clickable {
  flex: 1;
}

.debug-panel {
  width: 100%;
  background-color: var(--clr-slate-900);
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
}

@media (min-width: 768px) {
  .debug-panel {
    width: 24rem;
  }
}

.debug-header {
  padding: 0.75rem;
  border-bottom: 1px solid var(--clr-slate-800);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--clr-slate-950);
}

.debug-title {
  color: #f1f5f9;
  font-family: var(--font-mono);
  font-size: 0.875rem;
}
.debug-close {
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
}
.debug-close:hover {
  color: var(--text-on-accent);
}

.log-container {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.log-entry {
  border-left: 2px solid var(--clr-slate-700);
  padding-left: 0.5rem;
  margin-bottom: 0.25rem;
}
.log-time {
  opacity: 0.3;
  margin-right: 0.5rem;
}

/* Scrollbar */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
  border: 2px solid var(--scrollbar-track); /* Add breathing room around thumb */
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  filter: brightness(1.2);
}

/* Utilities */
.hidden {
  display: none !important;
}

/* Intro Screen */
/* Transition Overlay */
.transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.transition-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  opacity: 0;
  transform: translateY(10px);
  /* Exit transition: fast, no delay, so it disappears with/before bg */
  transition: all 0.2s ease;
}

.transition-overlay.active .loader-content {
  opacity: 1;
  transform: translateY(0);
  /* Enter transition: normal speed, with delay for staggered effect */
  transition: all 0.4s ease 0.1s;
}

.loader-icon {
  max-width: 256px; /* 50% of 512px */
  height: auto;
}

.loader-dots {
  display: flex;
  gap: 0.5rem;
}

.loader-dots span {
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 50%;
  opacity: 0.3;
}

.loader-dots span:nth-child(1) {
  animation: blink 1.2s infinite 0s;
}
.loader-dots span:nth-child(2) {
  animation: blink 1.2s infinite 0.2s;
}
.loader-dots span:nth-child(3) {
  animation: blink 1.2s infinite 0.4s;
}

.loader-message {
  margin-top: 1rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
  text-align: center;
  max-width: 400px;
  line-height: 1.5;
}

.loader-content .btn {
  margin-top: 1rem;
}

@keyframes blink {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

.intro-screen {
  position: fixed;
  inset: 0;
  background-color: #000000;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  padding: 2rem;
}

.intro-content {
  max-width: 400px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.intro-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  font-family: "Monoid", monospace;
}

.intro-author {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 0.15rem;
  font-family: "Monoid", monospace;
  letter-spacing: 0.1rem;
}

.intro-version {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 0.5rem;
  font-family: "Monoid", monospace;
  letter-spacing: 0.1rem;
}

.intro-icon {
  width: 120px;
  height: auto;
  margin: 1rem 0;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
  border-radius: 12px; /* Slight rounding if it's a square icon */
  transform: scale(0.9);
  -webkit-tap-highlight-color: transparent;
}

.intro-rules {
  list-style: none;
  padding: 0;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
  max-width: 500px;
  font-family: "Monoid", monospace;
  font-size: 0.9rem;
}

.intro-rules li {
  line-height: 1.5;
  color: #bdbdbd;
  font-weight: 300;
}

.intro-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.intro-buttons.has-saved-game {
  flex-direction: row;
  gap: 1rem;
}

.intro-buttons.has-saved-game .btn-start {
  flex: 0 0 60%;
}

.intro-buttons.has-saved-game .btn-new-case {
  flex: 0 0 40%;
}

.btn-start {
  background: transparent;
  border: 1px solid transparent;
  color: #ffffff;
  padding: 1rem 2rem;
  border-radius: var(--radius-subtle);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  transition: all 0.3s ease;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}

.btn-new-case {
  background: transparent;
  border: 1px solid transparent;
  color: #ffffff;
  padding: 1rem 2rem;
  border-radius: var(--radius-subtle);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  transition: all 0.3s ease;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}

.btn-new-case:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(147, 51, 234, 0.3);
}

.btn-new-case:hover i {
  color: #a855f7;
}

.btn-new-case i {
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.3s ease;
}

.btn-new-case span {
  font-size: 0.75rem;
  letter-spacing: 0.2rem;
  font-weight: 500;
  width: 120%;
  opacity: 0.8;
}

.scenario-subtitle {
  font-family: var(--font-sans);
  font-size: 0.875rem !important;
  font-weight: 400;
  color: #cd7f32; /* Copper */
  opacity: 1;
  letter-spacing: 0.05rem;
  margin-top: -0.5rem;
  width: 130%;
}

.btn-start:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 215, 0, 0.3);
}

.btn-start:hover i {
  color: #ffd700;
}

.btn-start i {
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.3s ease;
}

.btn-start span {
  font-size: 0.75rem;
  letter-spacing: 0.2rem;
  font-weight: 500;
  opacity: 0.8;
}

/* Modals */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.modal-panel {
  background-color: var(--surface-bg);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-main);
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-xl);
  animation: modal-in 0.3s ease-out;
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-header {
  padding: 1.5rem 1.5rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
}

.modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

.modal-body {
  padding: 1.5rem;
  color: var(--text-secondary);
  line-height: 1.5;
  font-size: 0.875rem;
}

.modal-footer {
  padding: 1rem 1.5rem 1.5rem;
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

/* Pi Debug Button */
.btn-pi {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  background: none;
  border: none;
  color: #ffffff;
  mix-blend-mode: difference;
  opacity: 0.4;
  font-family: serif;
  font-size: 0.75rem;
  padding: 0.5rem;
  cursor: pointer;
  transition: opacity 0.2s;
  z-index: 50;
}

.btn-pi:hover {
  opacity: 1;
}
@media (min-width: 1200px) {
  .app-main {
    display: grid;
    grid-template-columns: 350px 1fr 450px;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    overflow: hidden;
    height: 100%;
    width: 100%;
  }

  .evidence-view {
    grid-column: 2;
    position: relative;
    padding: 1.5rem;
    margin: 0;
    width: 100%;
    height: 100vh;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
  }

  .evidence-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
  }

  #clues-container {
    flex: 1;
    overflow-y: auto;
  }

  #locations-drawer {
    grid-column: 1;
    border-right: 1px solid var(--border-base);
    border-left: none;
    height: 100vh !important;
  }

  #notebook-drawer {
    grid-column: 3;
    border-left: 1px solid var(--border-base);
    border-right: none;
    height: 100vh !important;
  }

  .drawer {
    position: relative !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    top: auto !important;
    bottom: auto !important;
    box-shadow: none;
    background-color: var(--surface-bg);
    z-index: 10;
    display: flex;
    flex-direction: column;
  }

  .drawer-tab {
    display: none;
  }

  /* Desktop Typography Upgrade */
  :root {
    font-size: 18px; /* Slightly larger base */
  }

  .suspect-name {
    font-size: 1.1rem;
  }
  .clue-text {
    font-size: 1rem;
  }
  .btn {
    font-size: 1rem;
    padding: 0.875rem;
  }
  .card-title {
    font-size: 1.25rem;
  }
}

/* ============================================
   THEME-SPECIFIC FOREGROUND COLORS
   New case button, check button, sidebar tabs
   ============================================ */

/* === STELLAR VOYAGE === */
[data-theme="stellar_voyage"] #btn-new-case * {
  color: #000;
}
[data-theme="stellar_voyage"] #btn-verify * {
  color: #ffffff;
}
[data-theme="stellar_voyage"] #btn-print * {
  color: #ffffff;
}
[data-theme="stellar_voyage"] #btn-reveal * {
  color: #ffffff;
}
[data-theme="stellar_voyage"] #btn-exit * {
  color: #ffffff;
}
[data-theme="stellar_voyage"] #locations-tab * {
  color: #000;
}
[data-theme="stellar_voyage"] #notebook-tab * {
  color: #000;
}

/* === CLASSIC MANOR === */
[data-theme="classic_manor"] #btn-new-case * {
  color: #fff;
}
[data-theme="classic_manor"] #btn-verify * {
  color: #fff;
}
[data-theme="classic_manor"] #btn-print * {
  color: #000;
}
[data-theme="classic_manor"] #btn-reveal * {
  color: #000;
}
[data-theme="classic_manor"] #btn-exit * {
  color: #000;
}
[data-theme="classic_manor"] #locations-tab * {
  color: #000;
}
[data-theme="classic_manor"] #notebook-tab * {
  color: #fff;
}

/* === MEDIEVAL === */
[data-theme="medieval"] #btn-new-case * {
  color: #000000;
}
[data-theme="medieval"] #btn-verify * {
  color: #ffffff;
}
[data-theme="medieval"] #btn-print * {
  color: #000000;
}
[data-theme="medieval"] #btn-reveal * {
  color: #000000;
}
[data-theme="medieval"] #btn-exit * {
  color: #000000;
}
[data-theme="medieval"] #locations-tab * {
  color: #ffffff;
}
[data-theme="medieval"] #notebook-tab * {
  color: #000000;
}

/* === SHERLOCK === */
[data-theme="sherlock"] #btn-new-case * {
  color: #ffffff;
}
[data-theme="sherlock"] #btn-verify * {
  color: #ffffff;
}
[data-theme="sherlock"] #btn-print * {
  color: #000;
}
[data-theme="sherlock"] #btn-reveal * {
  color: #000;
}
[data-theme="sherlock"] #btn-exit * {
  color: #000;
}
[data-theme="sherlock"] #locations-tab * {
  color: #000;
}
[data-theme="sherlock"] #notebook-tab * {
  color: #fff;
}

/* === GATSBY === */
[data-theme="gatsby"] #btn-new-case * {
  color: #000;
}
[data-theme="gatsby"] #btn-verify * {
  color: #ffffff;
}
[data-theme="gatsby"] #btn-print * {
  color: #000;
}
[data-theme="gatsby"] #btn-reveal * {
  color: #000;
}
[data-theme="gatsby"] #btn-exit * {
  color: #000;
}
[data-theme="gatsby"] #locations-tab * {
  color: #000;
}
[data-theme="gatsby"] #notebook-tab * {
  color: #000;
}

/* === FALCON === */
[data-theme="falcon"] #btn-new-case * {
  color: #000;
}
[data-theme="falcon"] #btn-verify * {
  color: #ffffff;
}
[data-theme="falcon"] #btn-print * {
  color: #000;
}
[data-theme="falcon"] #btn-reveal * {
  color: #000;
}
[data-theme="falcon"] #btn-exit * {
  color: #000;
}
[data-theme="falcon"] #locations-tab * {
  color: #000;
}
[data-theme="falcon"] #notebook-tab * {
  color: #000;
}

/* === CONTINENTAL EXPRESS === */
[data-theme="continental_express"] #btn-new-case * {
  color: #fff;
}
[data-theme="continental_express"] #btn-verify * {
  color: #ffffff;
}
[data-theme="continental_express"] #btn-print * {
  color: #000;
}
[data-theme="continental_express"] #btn-reveal * {
  color: #000;
}
[data-theme="continental_express"] #btn-exit * {
  color: #000;
}
[data-theme="continental_express"] #locations-tab * {
  color: #000;
}
[data-theme="continental_express"] #notebook-tab * {
  color: #fff;
}

/* === EDGE WALKER === */
[data-theme="edge_walker"] #btn-new-case * {
  color: #000;
}
[data-theme="edge_walker"] #btn-verify * {
  color: #ffffff;
}
[data-theme="edge_walker"] #btn-print * {
  color: #fff;
}
[data-theme="edge_walker"] #btn-reveal * {
  color: #fff;
}
[data-theme="edge_walker"] #btn-exit * {
  color: #fff;
}
[data-theme="edge_walker"] #locations-tab * {
  color: #000;
}
[data-theme="edge_walker"] #notebook-tab * {
  color: #000;
}

/* === RADIO SHRINK === */
[data-theme="radio_shrink"] #btn-new-case * {
  color: #000;
}
[data-theme="radio_shrink"] #btn-verify * {
  color: #ffffff;
}
[data-theme="radio_shrink"] #btn-print * {
  color: #000;
}
[data-theme="radio_shrink"] #btn-reveal * {
  color: #000;
}
[data-theme="radio_shrink"] #btn-exit * {
  color: #000;
}
[data-theme="radio_shrink"] #locations-tab * {
  color: #000;
}
[data-theme="radio_shrink"] #notebook-tab * {
  color: #000;
}

/* === INDIGO HEIR === */
[data-theme="indigo_heir"] #btn-new-case * {
  color: #000;
}
[data-theme="indigo_heir"] #btn-verify * {
  color: #ffffff;
}
[data-theme="indigo_heir"] #btn-print * {
  color: #000;
}
[data-theme="indigo_heir"] #btn-reveal * {
  color: #000;
}
[data-theme="indigo_heir"] #btn-exit * {
  color: #000;
}
[data-theme="indigo_heir"] #locations-tab * {
  color: #000;
}
[data-theme="indigo_heir"] #notebook-tab * {
  color: #000;
}

/* === SHADOW PROTOCOL === */
[data-theme="shadow_protocol"] #btn-new-case * {
  color: #fff;
}
[data-theme="shadow_protocol"] #btn-verify * {
  color: #ffffff;
}
[data-theme="shadow_protocol"] #btn-print * {
  color: #000;
}
[data-theme="shadow_protocol"] #btn-reveal * {
  color: #000;
}
[data-theme="shadow_protocol"] #btn-exit * {
  color: #000;
}
[data-theme="shadow_protocol"] #locations-tab * {
  color: #fff;
}
[data-theme="shadow_protocol"] #notebook-tab * {
  color: #fff;
}