/* Global Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Theme System */
:root {
  /* Universal Colors */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-danger: #EF4444;
  --color-info: #06B6D4;

  --color-white: #FFFFFF;
  --color-black: #0A0A0A;

  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 0.75rem;
  --border-radius-xl: 1rem;
  --border-radius-2xl: 1.5rem;

  /* Font Families */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-frozen: 'Special Elite', 'Courier New', monospace;
  --font-neon: 'Rajdhani', 'Futura', 'Trebuchet MS', sans-serif;
  --font-dystopic: 'Barlow Condensed', 'Impact', 'Arial Narrow', sans-serif;
  --font-fantasy: 'Cinzel', Georgia, serif;
  --font-bloody: 'Libre Baskerville', Georgia, serif;
  --font-western: 'Rye', 'Cinzel', Georgia, serif;
}

/* Light Mode - Default */
body {
  --color-primary: #4F46E5;
  --color-primary-dark: #3730A3;
  --color-primary-light: #818CF8;
  --color-secondary: #0EA5E9;
  --color-accent: #8B5CF6;

  --color-gray-50: #FAFAFA;
  --color-gray-100: #F5F5F5;
  --color-gray-200: #E5E5E5;
  --color-gray-300: #D4D4D4;
  --color-gray-400: #A3A3A3;
  --color-gray-500: #737373;
  --color-gray-600: #525252;
  --color-gray-700: #404040;
  --color-gray-800: #262626;
  --color-gray-900: #171717;

  --bg-primary: #FFFFFF;
  --bg-secondary: #FAFAFA;
  --bg-tertiary: #F5F5F5;
  --text-primary: #171717;
  --text-secondary: #525252;
  --border-primary: #E5E5E5;
  --border-secondary: #F5F5F5;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --shadow-md: 0 2px 8px -2px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 16px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 8px 24px -6px rgba(0, 0, 0, 0.12);

  --body-gradient-1: #F8F9FA;
  --body-gradient-2: #E9ECEF;
  overflow-x: hidden;
}

/* Global Animation Keyframes */
@keyframes bg-pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  100% {
    transform: scale(1.15);
    opacity: 0.4;
  }
}

@keyframes text-pulse-glow {

  0%,
  100% {
    filter: drop-shadow(0 0 15px var(--theme-glow-color-low, rgba(95, 203, 240, 0.1)));
  }

  50% {
    filter: drop-shadow(0 0 25px var(--theme-glow-color-high, rgba(95, 203, 240, 0.4)));
  }
}

@keyframes pulse-glow {

  0%,
  100% {
    box-shadow: 0 0 15px var(--theme-glow-color-low, rgba(95, 203, 240, 0.1));
  }

  50% {
    box-shadow: 0 0 25px var(--theme-glow-color-high, rgba(95, 203, 240, 0.25));
  }
}

/* Dark Mode - Updated to Match Reference Style */
/* Dark Mode - Paper and Quill Style (High Fantasy) */
body.dark-mode {
  /* Colors - Gold Ink on Dark Paper */
  --color-primary: #d4af37;
  --color-primary-dark: #b8860b;
  --color-primary-light: #f0e68c;
  --color-secondary: #a9a9a9;
  --color-accent: #cd853f;

  --theme-glow-color: #d4af37;
  --theme-glow-color-low: rgba(212, 175, 55, 0.05);
  /* Very subtle if any */
  --theme-glow-color-high: rgba(212, 175, 55, 0.2);

  --color-gray-50: #0f0f0f;
  --color-gray-100: #1a1a1a;
  --color-gray-200: #252525;
  --color-gray-300: #333333;
  --color-gray-400: #555555;
  --color-gray-500: #777777;
  --color-gray-600: #999999;
  --color-gray-700: #bbbbbb;
  --color-gray-800: #dddddd;
  --color-gray-900: #eeeeee;

  /* Solid Backgrounds - No Translucency */
  --bg-primary: #080808;
  /* Deepest black/charcoal */
  --bg-secondary: #121212;
  /* Slightly lighter */
  --bg-tertiary: #1c1c1c;

  --text-primary: #e0d8c3;
  /* Parchment white */
  --text-secondary: #a09885;
  /* Aged paper text */
  --border-primary: #d4af37;
  /* Gold border */
  --border-secondary: #555555;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.9);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.9);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.9);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.9);

  --body-gradient-1: #080808;
  --body-gradient-2: #080808;

  /* Fonts */
  --font-primary: 'Merriweather', 'Georgia', serif;
  --font-heading: 'Cinzel', 'Trajan Pro', serif;
  --font-body: 'Merriweather', 'Georgia', serif;

  /* Animation Tokens */
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Legacy Variable Mapping to Ensure Compatibility */
  --border-color: var(--border-primary);
  --bg-color: var(--bg-primary);
  --text-color: var(--text-primary);
}

/* Typography Enhancements for Dark Mode */
/* Specific Content Overrides - High Fantasy (No Glassmorphism) */
body.dark-mode .markdown-body h1,
body.dark-mode .markdown-body h2,
body.dark-mode .markdown-body h3,
body.dark-mode .markdown-body h4,
body.dark-mode .markdown-body h5,
body.dark-mode .markdown-body h6,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  font-family: 'Cinzel', serif !important;
  color: var(--color-secondary) !important;
  /* Antique Gold */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--color-secondary) !important;
  /* Force explicit color */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  border-bottom: 2px solid var(--border-primary);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  animation: none !important;
  opacity: 1 !important;
  /* Override JS animation opacity: 0 */
  scroll-margin-top: 80px;
  /* Ensure header is not hidden behind fixed topbar */
}

body.dark-mode strong,
body.dark-mode b {
  color: var(--border-primary) !important;
  /* Antique Gold */
  background: none;
  -webkit-text-fill-color: currentColor !important;
  background-clip: border-box !important;
  -webkit-background-clip: unset !important;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Animated Background Gradient for Dark Mode */
/* Solid Background for Dark Mode - No Pulse */
body.dark-mode::before {
  content: none;
}

/* Dark Mode Input & Visibility Fixes */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-secondary);
  border-radius: 0;
  font-family: var(--font-body);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8);
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 5px rgba(212, 175, 55, 0.3);
}

body.dark-mode ::placeholder {
  color: rgba(255, 255, 255, 0.5);
  opacity: 1;
}

body.dark-mode button {
  color: var(--text-primary);
}

body.dark-mode .dashboard-card h3 {
  color: var(--text-primary);
  background: none;
  -webkit-text-fill-color: initial;
}

body.dark-mode #auth-status-container,
body.dark-mode #auth-status-container * {
  color: var(--text-primary);
  background: none;
  -webkit-text-fill-color: initial;
}

body.dark-mode .campaign-list-name,
body.dark-mode .campaign-list-role {
  color: var(--text-primary);
  background: none;
  -webkit-text-fill-color: initial;
}

body.dark-mode #campaign-name-display {
  color: var(--text-primary);
  background: none;
  -webkit-text-fill-color: initial;
}

/* Fix for Driver.js Tour Buttons in Dark Mode */
body.dark-mode .driver-popover-footer button,
body.dark-mode .driver-popover-close-btn {
  color: #2d2d2d;
  background-color: #fff;
  /* Ensure background is white as per driver defaults */
  -webkit-text-fill-color: initial;
  /* Reset any gradient text fills */
  text-shadow: none;
}

body.dark-mode .driver-popover-footer button:hover {
  background-color: #f7f7f7;
}

/* Floating TOC High Fantasy Overrides */
/* ==============================================
   UNIFIED RESPONSIVE TOC STYLES
   Works on desktop, tablet, and mobile
   ============================================== */

/* Backdrop Overlay - only visible on mobile when TOC is open */
.toc-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 997;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  pointer-events: none;
}

.toc-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}

/* Hide overlay on larger screens */
@media (min-width: 769px) {
  .toc-overlay {
    display: none !important;
  }
}

/* TOC Close Button */
.toc-close-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: transparent;
  border: none;
  color: var(--color-primary, #d4af37);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: background 0.2s ease, color 0.2s ease;
  z-index: 10;
}

.toc-close-btn:hover {
  background: rgba(212, 175, 55, 0.2);
  color: #fff;
}

/* Hide close button on desktop - click outside to close */
@media (min-width: 769px) {
  .toc-close-btn {
    display: none;
  }
}

/* Toggle Button - Always visible */
.toc-toggle-btn,
#toc-toggle-btn {
  position: fixed !important;
  z-index: 998 !important;
  background: rgba(8, 8, 8, 0.85) !important;
  border: 1px solid rgba(212, 175, 55, 0.5) !important;
  color: #e0e0e0 !important;
  padding: 12px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  width: 48px !important;
  height: 48px !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 0 8px rgba(212, 175, 55, 0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Desktop position - right edge, vertically centered */
@media (min-width: 769px) {

  .toc-toggle-btn,
  #toc-toggle-btn {
    top: 50% !important;
    right: 16px !important;
    transform: translateY(-50%) !important;
    bottom: auto !important;
  }
}

/* Mobile position - bottom right corner */
@media (max-width: 768px) {

  .toc-toggle-btn,
  #toc-toggle-btn {
    bottom: 20px !important;
    right: 20px !important;
    top: auto !important;
    transform: none !important;
  }
}

.toc-toggle-btn:hover,
#toc-toggle-btn:hover {
  background: rgba(8, 8, 8, 0.95) !important;
  border-color: rgba(212, 175, 55, 0.8) !important;
  color: #d4af37 !important;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5), 0 0 12px rgba(212, 175, 55, 0.2) !important;
}

.toc-toggle-btn svg,
#toc-toggle-btn svg {
  width: 24px;
  height: 24px;
}

/* Hide toggle when TOC is active on desktop */
@media (min-width: 769px) {

  .toc-toggle-btn.active,
  #toc-toggle-btn.active {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Keep toggle visible on mobile when active (just change appearance) */
@media (max-width: 768px) {

  .toc-toggle-btn.active,
  #toc-toggle-btn.active {
    background: var(--color-primary, #d4af37) !important;
    color: #080808 !important;
  }
}

/* Hide toggle on home page */
body[data-page="home"] .toc-toggle-btn,
body[data-page="home"] #toc-toggle-btn,
body.home-page .toc-toggle-btn,
body.home-page #toc-toggle-btn {
  display: none !important;
}



/* Floating TOC Panel - Slide-out drawer */
.floating-toc,
#floating-toc {
  position: fixed !important;
  background: rgba(8, 8, 8, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  border-right: none !important;
  border-radius: 12px 0 0 12px !important;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(212, 175, 55, 0.1) !important;
  padding: 1.25rem !important;
  padding-top: 1rem !important;
  z-index: 999 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;

  /* Hidden by default - slide from right */
  transform: translateX(100%) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.35s ease,
    visibility 0s linear 0.35s !important;
}

/* Desktop sizing */
@media (min-width: 769px) {

  .floating-toc,
  #floating-toc {
    top: 50% !important;
    right: 0 !important;
    width: 280px !important;
    max-height: 70vh !important;
    transform: translateY(-50%) translateX(100%) !important;
  }

  .floating-toc.active,
  #floating-toc.active {
    transform: translateY(-50%) translateX(0) !important;
  }
}

/* Mobile/Tablet sizing - full height drawer */
@media (max-width: 768px) {

  .floating-toc,
  #floating-toc {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 85vw !important;
    max-width: 320px !important;
    height: 100vh !important;
    max-height: none !important;
    border-radius: 12px 0 0 12px !important;
    padding-top: 3rem !important;
  }

  .floating-toc.active,
  #floating-toc.active {
    transform: translateX(0) !important;
  }
}

/* Active state - visible */
.floating-toc.active,
#floating-toc.active {
  opacity: 1 !important;
  visibility: visible !important;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.35s ease,
    visibility 0s linear 0s !important;
}

/* TOC Heading */
.floating-toc h4,
#floating-toc h4 {
  font-family: 'Cinzel', serif !important;
  color: #d4af37 !important;
  font-size: 0.85rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin: 0 0 1rem 0 !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.3) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* TOC List */
.floating-toc ul,
#floating-toc ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.floating-toc li,
#floating-toc li {
  margin-bottom: 0.5rem !important;
}

/* TOC Links */
.floating-toc a,
#floating-toc a {
  font-family: 'Merriweather', serif !important;
  color: #a9a9a9 !important;
  text-decoration: none !important;
  font-size: 0.9rem !important;
  display: block !important;
  padding: 0.35rem 0.5rem !important;
  border-left: 2px solid transparent !important;
  border-radius: 0 4px 4px 0 !important;
  transition: all 0.2s ease !important;
  line-height: 1.4 !important;
}

.floating-toc a:hover,
#floating-toc a:hover {
  color: #d4af37 !important;
  border-left-color: #d4af37 !important;
  background: rgba(212, 175, 55, 0.08) !important;
}

.floating-toc a.active,
#floating-toc a.active {
  color: #d4af37 !important;
  border-left-color: #d4af37 !important;
  background: rgba(212, 175, 55, 0.12) !important;
  font-weight: 500 !important;
}

/* TOC Level Indentation */
.floating-toc li.toc-level-2,
#floating-toc li.toc-level-2 {
  margin-left: 0.75rem !important;
}

.floating-toc li.toc-level-3,
#floating-toc li.toc-level-3 {
  margin-left: 1.5rem !important;
}

.floating-toc li.toc-level-2 a,
#floating-toc li.toc-level-2 a {
  font-size: 0.85rem !important;
}

.floating-toc li.toc-level-3 a,
#floating-toc li.toc-level-3 a {
  font-size: 0.8rem !important;
  color: #888 !important;
}

.floating-toc li.toc-level-3 a:hover,
#floating-toc li.toc-level-3 a:hover,
.floating-toc li.toc-level-3 a.active,
#floating-toc li.toc-level-3 a.active {
  color: #d4af37 !important;
}

/* Hide TOC on home page */
body[data-page="home"] .floating-toc,
body[data-page="home"] #floating-toc,
body.home-page .floating-toc,
body.home-page #floating-toc {
  display: none !important;
}

/* Prevent body scroll when TOC is open on mobile */
@media (max-width: 768px) {
  body.toc-open {
    overflow: hidden !important;
  }
}

/* END UNIFIED RESPONSIVE TOC STYLES */

/* Enlarged Dice in Roll Log */
.roll-entry .dice-result {
  padding: 0.25rem;
  margin: 0.25rem;
  /* Increased margin */
  min-width: 3rem;
  /* Larger size */
  min-height: 3rem;
  font-size: 1.25rem;
  /* Larger font */
}

.roll-entry .dice-result.d2,
.roll-entry .dice-result.d6,
.roll-entry .dice-result.d8,
.roll-entry .dice-result.d10,
.roll-entry .dice-result.d12,
.roll-entry .dice-result.d20 {
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
}

/* d4 specific override for triangle shape in log */
.roll-entry .dice-result.d4 {
  border-left-width: 1.5rem;
  border-right-width: 1.5rem;
  border-bottom-width: 3rem;
  width: 0;
  height: 0;
  min-width: 0;
}

.roll-entry .dice-result.d4::after {
  bottom: auto;
  font-size: 1rem;
}

/* Bloody Theme - Gothic Vampire Parchment */
body.bloody-theme {
  --theme-glow-color: #8B1538;
  --theme-glow-color-low: rgba(139, 21, 56, 0.2);
  --theme-glow-color-high: rgba(139, 21, 56, 0.5);

  --color-primary: #8B1538;
  --color-primary-dark: #6B0F2A;
  --color-primary-light: #B8234A;
  --color-secondary: #C9A961;
  /* Antique Gold */
  --color-accent: #6B0F2A;

  --color-gray-50: #1A0A0F;
  --color-gray-100: #2A1418;
  --color-gray-200: #3D1F26;
  --color-gray-300: #522934;
  --color-gray-400: #75424D;
  --color-gray-500: #9B6B73;
  --color-gray-600: #C9A9AE;
  --color-gray-700: #E0C9CD;
  --color-gray-800: #F0E0E3;
  --color-gray-900: #FAF5F6;

  --bg-primary: #1A0A0F;
  --bg-secondary: #2A1418;
  --bg-tertiary: #3D1F26;
  --text-primary: #FAF5F6;
  --text-secondary: #C9A9AE;
  --border-primary: #8B1538;
  --border-secondary: #522934;

  --shadow-sm: 0 1px 3px 0 rgba(139, 21, 56, 0.5), 0 0 8px rgba(139, 21, 56, 0.2);
  --shadow-md: 0 3px 10px -2px rgba(139, 21, 56, 0.6), 0 0 15px rgba(139, 21, 56, 0.25);
  --shadow-lg: 0 6px 20px -4px rgba(139, 21, 56, 0.7), 0 0 25px rgba(139, 21, 56, 0.3);
  --shadow-xl: 0 12px 32px -8px rgba(139, 21, 56, 0.8), 0 0 40px rgba(139, 21, 56, 0.35);

  --body-gradient-1: #0D0508;
  --body-gradient-2: #1A0A0F;

  --font-primary: var(--font-bloody);

  /* Gothic atmosphere with blood mist */
  background-image:
    /* Blood mist vignette */
    radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(13, 5, 8, 0.95) 75%),
    /* Base darkness */
    linear-gradient(135deg, var(--body-gradient-1) 0%, var(--body-gradient-2) 100%);
}

.app-header-logo {
  text-align: center;
  margin-bottom: 0.5rem;
  margin-top: 0;
  position: relative;
  z-index: 10;
  pointer-events: none;
}

.logo-text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 3.5rem;
  margin: 0;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
}

/* Base Dark Mode Logo */
/* Base Dark Mode Logo - High Fantasy */
/* Base Dark Mode Logo - High Fantasy */
body.dark-mode .logo-text {
  font-family: 'Cinzel', serif;
  color: var(--color-primary);
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9);
  background: none;
  -webkit-background-clip: unset;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  filter: none;
  animation: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Bloody Theme Logo */
body.bloody-theme .logo-text {
  font-family: var(--font-bloody);
  color: var(--color-primary);
  text-shadow:
    0 0 10px rgba(139, 21, 56, 0.8),
    0 0 20px rgba(0, 0, 0, 0.8),
    2px 2px 4px rgba(0, 0, 0, 0.9);
  letter-spacing: 0.1em;
  font-weight: 700;
}

/* Eternal Theme Logo */
body.eternal-theme .logo-text {
  font-family: var(--font-fantasy);
  color: var(--color-primary);
  text-shadow:
    0 0 15px rgba(205, 127, 50, 0.6),
    0 2px 4px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.08em;
}

/* Fantasy Theme Logo */

/* --- MOBILE SUPPORT --- */

/* Mobile Menu Button - Hidden by default */
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  color: #d4af37;
  cursor: pointer;
  padding: 0.5rem;
  align-items: center;
  justify-content: center;
}

/* Sidebar - Hidden by default, off-canvas */
.mobile-sidebar {
  position: fixed;
  top: 0;
  left: -300px;
  /* Hide off-screen */
  width: 280px;
  height: 100vh;
  height: 100dvh;
  /* Dynamic viewport height - accounts for mobile browser chrome */
  background: #0d0d0d;
  z-index: 2000;
  transition: left 0.3s ease-in-out;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
  border-right: 2px solid #d4af37;
  display: flex;
  flex-direction: column;
}

.mobile-sidebar.active {
  left: 0;
  /* Slide in */
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid #333;
  background: #1a1a1a;
}

.sidebar-header h3 {
  margin: 0;
  font-family: 'Cinzel', serif;
  color: #d4af37;
  font-size: 1.2rem;
}

.close-btn {
  background: none;
  border: none;
  color: #888;
  font-size: 1.5rem;
  cursor: pointer;
}

.sidebar-content {
  padding: 1rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  /* Required for flex child scrolling */
  -webkit-overflow-scrolling: touch;
  /* Smooth scrolling on iOS */
  padding-bottom: 2rem;
  /* Extra space at bottom for easier scrolling */
}

/* Sidebar Nav Items */
.sidebar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-nav li {
  margin-bottom: 0.5rem;
}

.nav-item-li a {
  display: block;
  color: #ccc;
  text-decoration: none;
  padding: 0.5rem;
  border-radius: 4px;
  transition: background 0.2s;
}

.nav-item-li a:hover,
.nav-item-li a.active {
  background: rgba(212, 175, 55, 0.1);
  color: #d4af37;
}

/* Group Headers in Sidebar */
.nav-group-title {
  font-weight: bold;
  color: #888;
  padding: 0.5rem;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  margin-top: 1rem;
  border-bottom: 1px solid #333;
}

/* Indent nested content */
.nav-group-content .sidebar-nav {
  padding-left: 0.5rem;
}

/* Mobile Actions */
.mobile-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: space-around;
  flex-wrap: wrap;
}

.mobile-action-btn {
  flex: 1;
  background: #222;
  border: 1px solid #444;
  color: #d4af37;
  padding: 0.5rem;
  cursor: pointer;
  border-radius: 4px;
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
}

.mobile-action-btn:hover {
  background: #333;
  border-color: #d4af37;
}


/* --- MEDIA QUERIES --- */
@media (max-width: 768px) {

  /* Top Bar Adjustments */
  .topbar {
    padding: 0 1rem;
  }

  /* Show Hamburger */
  .mobile-menu-btn {
    display: flex;
    margin-right: 1rem;
  }

  /* Hide Desktop Nav */
  .topbar-nav {
    display: none !important;
  }

  /* Restore Action Buttons in Topbar for Mobile */
  .topbar-actions {
    display: flex !important;
  }

  /* TOC - Mobile styles handled in unified section below */

  /* Main Content */
  .markdown-body {
    padding: 1.5rem;
    /* Reduce padding */
  }

  /* Headers - prevent horizontal overflow on long words */
  .markdown-body h1,
  .markdown-body h2,
  .markdown-body h3,
  .markdown-body h4,
  .markdown-body h5,
  .markdown-body h6 {
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  /* Ensure Ilhdeinia Logo is centered or appropriately placed */
  .topbar-logo {
    position: static;
    /* Reset absolute positioning if any */
    transform: none;
    margin-right: auto;
    /* Push to left next to hamburger */
  }

  /* MODAL RESPONSIVENESS */
  #sjovneva-modal .modal-content,
  #currency-modal .modal-content,
  .modal-content {
    width: 95% !important;
    max-width: 95vw !important;
    margin: 5% auto !important;
    left: 0 !important;
    right: 0 !important;
    position: relative !important;
    transform: none !important;
  }

  #sjovneva-modal,
  #currency-modal {
    padding-top: 60px !important;
    align-items: flex-start !important;
    overflow-y: auto !important;
  }
}

/* Sidebar Interactivity */
.nav-group-title {
  cursor: pointer;
  position: relative;
  padding-right: 20px;
}

.nav-group-title::after {
  content: '❯';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  transition: transform 0.3s;
}

.nav-group-item.open .nav-group-title::after {
  transform: translateY(-50%) rotate(90deg);
}

.nav-group-content {
  display: none;
  padding-left: 10px;
  border-left: 1px solid #333;
  margin-left: 5px;
}

.nav-group-item.open>.nav-group-content {
  display: block;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.fantasy-theme .logo-text {
  font-family: var(--font-fantasy);
  color: var(--color-primary-light);
  text-shadow:
    0 0 15px rgba(74, 124, 89, 0.6),
    0 2px 4px rgba(26, 18, 10, 0.8);
  letter-spacing: 0.05em;
}

/* Frozen Theme Logo */
body.frozen-theme .logo-text {
  font-family: var(--font-frozen);
  color: var(--text-primary);
  text-shadow:
    0 0 10px rgba(125, 211, 252, 0.6),
    0 0 20px rgba(125, 211, 252, 0.4),
    0 0 40px rgba(125, 211, 252, 0.2);
  letter-spacing: 0.1em;
}

/* Dystopic Theme Logo */
body.dystopic-theme .logo-text {
  font-family: 'Special Elite', cursive;
  color: #8B4513;
  text-shadow:
    2px 2px 0px #000,
    3px 3px 0px rgba(0, 0, 0, 0.7),
    0 0 20px rgba(139, 69, 19, 0.3);
  transform: rotate(-1deg);
  letter-spacing: 0.15em;
}

/* Neon Theme Logo */
body.neon-theme .logo-text {
  font-family: var(--font-neon);
  color: #F5F0FA;
  text-shadow:
    2px 0 0 rgba(255, 0, 110, 0.8),
    -2px 0 0 rgba(0, 245, 255, 0.8),
    0 0 20px rgba(131, 56, 236, 0.5);
  letter-spacing: 0.1em;
}

/* Delinquent Theme Logo */
body.delinquent-theme .logo-text {
  font-family: 'Special Elite', cursive;
  /* Using Special Elite for cleaner typewriter look than frozen font */
  color: var(--color-primary);
  text-shadow:
    3px 3px 0 #000;
  transform: rotate(-3deg) skewX(-10deg);
  font-weight: 900;
  letter-spacing: 0.1em;
}

/* Corrupted Theme Logo */
body.corrupted-theme .logo-text {
  font-family: var(--font-frozen);
  color: var(--color-secondary);
  text-shadow:
    0 0 10px rgba(167, 139, 250, 0.8),
    2px 2px 0px rgba(76, 29, 149, 0.8);
  letter-spacing: 0.1em;
}

/* College Ruled Theme Logo */
body.college-ruled-theme .logo-text {
  font-family: 'Indie Flower', cursive;
  color: var(--color-primary);
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1);
  transform: rotate(-2deg);
}

/* College Ruled Inverted Theme Logo */
body.college-ruled-inverted-theme .logo-text {
  font-family: 'Indie Flower', cursive;
  color: var(--color-primary);
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
  transform: rotate(-2deg);
}

/* Princess Theme Logo */
body.princess-theme .logo-text {
  font-family: 'Cinzel', serif;
  background: linear-gradient(to bottom, #FFD700, #FF69B4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(255, 105, 180, 0.6));
  letter-spacing: 0.05em;
}

/* Raygun Theme Logo */
body.raygun-gothic-theme .logo-text {
  /* NASA-punk industrial stencil */
  font-family: 'Helvetica Neue', 'Arial', 'Roboto', sans-serif;
  color: #FF6B00;
  /* Heavy stencil shadow */
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
}

/* Raygun Light Theme Logo */
body.raygun-light-theme .logo-text {
  /* NASA-punk industrial stencil */
  font-family: 'Helvetica Neue', 'Arial', 'Roboto', sans-serif;
  color: #CC5500;
  /* Heavy stencil shadow */
  text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.8);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
}

/* Espionage Theme Logo */
body.espionage-theme .logo-text {
  font-family: 'Courier New', monospace;
  color: var(--color-primary);
  text-shadow: 0 0 10px rgba(139, 0, 0, 0.8);
  letter-spacing: 0.2em;
  background: #000;
  padding: 0 10px;
  display: inline-block;
  /* To contain the black background */
}

/* Mystic Theme Logo */
body.mystic-theme .logo-text {
  font-family: 'Cinzel', serif;
  color: var(--color-primary-light);
  text-shadow:
    0 0 15px rgba(155, 89, 182, 0.8),
    0 0 30px rgba(155, 89, 182, 0.4);
  letter-spacing: 0.1em;
}

/* Serpentine Theme Logo - Jungle Bioluminescence */
body.serpentine-theme .logo-text {
  font-family: 'Cinzel', serif;
  color: #9ACD32;
  text-shadow:
    0 0 20px rgba(154, 205, 50, 0.8),
    0 0 40px rgba(46, 139, 87, 0.5),
    0 0 60px rgba(154, 205, 50, 0.3),
    2px 2px 0px rgba(0, 0, 0, 0.9),
    3px 3px 6px rgba(0, 0, 0, 0.7);
  letter-spacing: 0.12em;
}

/* Smoldering Theme Logo */
body.smoldering-theme .logo-text {
  font-family: 'Cinzel', serif;
  color: #FF4500;
  text-shadow:
    0 0 15px rgba(255, 69, 0, 0.6),
    0 0 5px rgba(139, 37, 0, 0.8);
  letter-spacing: 0.05em;
}

/* Terminal Theme Logo */
body.terminal-theme .logo-text {
  font-family: 'Courier New', monospace;
  color: #00FF00;
  text-shadow:
    0 0 10px #00FF00,
    0 0 20px #00FF00;
  letter-spacing: 0.1em;
}

/* Withered Theme Logo - Western Saloon Style */
body.withered-theme .logo-text {
  font-family: var(--font-western);
  color: #DAA520;
  text-shadow:
    0 0 15px rgba(205, 133, 63, 0.7),
    3px 3px 0px #8B4513,
    4px 4px 0px rgba(0, 0, 0, 0.9),
    0 0 30px rgba(218, 165, 32, 0.3);
  letter-spacing: 0.15em;
  /* Removed rotation as requested */
}


body.bloody-theme .character-sheet {
  border: none;
  position: relative;
  background-color: var(--bg-secondary);
  box-shadow:
    0 0 50px rgba(139, 21, 56, 0.3),
    0 0 100px rgba(139, 21, 56, 0.15),
    inset 0 0 60px rgba(0, 0, 0, 0.5);
  /* Aged parchment texture */
  background-image:
    /* Blood stain at top - dripping effect simulation */
    radial-gradient(ellipse at 30% 0%, rgba(139, 21, 56, 0.15) 0%, transparent 20%),
    radial-gradient(ellipse at 70% 0%, rgba(139, 21, 56, 0.1) 0%, transparent 15%),
    radial-gradient(ellipse at 50% 0%, rgba(139, 21, 56, 0.12) 0%, transparent 25%);
  padding: 2rem;
}

/* Ornate gothic border with blood drips */
body.bloody-theme .character-sheet::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 3px solid var(--color-primary);
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(201, 169, 97, 0.3),
    inset 0 0 30px rgba(139, 21, 56, 0.15),
    0 0 20px rgba(139, 21, 56, 0.2);
}

/* Blood drip effect at top via pseudo-element */
body.bloody-theme .character-sheet::after {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 8px;
  background: linear-gradient(to bottom,
      rgba(139, 21, 56, 0.6) 0%,
      rgba(139, 21, 56, 0.3) 50%,
      transparent 100%);
  pointer-events: none;
  /* Drip shapes via border-radius */
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

/* Bloody dock buttons */
body.bloody-theme .floating-action-btn {
  background: var(--bg-secondary);
  border-color: var(--color-primary);
  box-shadow: 0 0 15px rgba(139, 21, 56, 0.4);
}

/* Unified Bloody button style: Background Secondary, White Text (as requested) */
body.bloody-theme #sheet-button,
body.bloody-theme #campaign-button,
body.bloody-theme #dice-roller-button,
body.bloody-theme #theme-button,
body.bloody-theme #instructions-toggle-button {
  background: var(--bg-secondary);
  border-color: var(--color-primary);
  color: #FFFFFF;
}

body.bloody-theme .stats-box,
body.bloody-theme .trait-item {
  border: 2px solid rgba(139, 21, 56, 0.4);
  background: linear-gradient(135deg, rgba(26, 10, 15, 0.9) 0%, rgba(42, 20, 24, 0.8) 100%);
  /* Ornate gothic corners */
  border-radius: 2px;
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(201, 169, 97, 0.1),
    inset 0 0 20px rgba(139, 21, 56, 0.1);
  position: relative;
  transition: all 0.3s ease;
}

body.bloody-theme .stats-box:hover,
body.bloody-theme .trait-item:hover {
  border-color: rgba(139, 21, 56, 0.7);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.6),
    0 0 25px rgba(139, 21, 56, 0.25),
    inset 0 1px 0 rgba(201, 169, 97, 0.15),
    inset 0 0 25px rgba(139, 21, 56, 0.15);
  transform: scale(1.01);
}

body.bloody-theme h2,
body.bloody-theme h3 {
  color: var(--color-secondary);
  text-shadow:
    0 0 15px rgba(201, 169, 97, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.7);
  font-weight: 700;
  letter-spacing: 0.05em;
  font-style: italic;
}

body.bloody-theme label {
  color: var(--color-gray-600);
  text-shadow: 0 0 8px rgba(139, 21, 56, 0.2);
  font-style: italic;
}

body.bloody-theme input,
body.bloody-theme textarea,
body.bloody-theme select {
  background: linear-gradient(135deg, rgba(26, 10, 15, 0.8) 0%, rgba(42, 20, 24, 0.6) 100%);
  border: 1px solid rgba(139, 21, 56, 0.3);
  color: var(--text-primary);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

body.bloody-theme input:focus,
body.bloody-theme textarea:focus,
body.bloody-theme select:focus {
  border-color: rgba(139, 21, 56, 0.6);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.4),
    0 0 15px rgba(139, 21, 56, 0.25);
  outline: none;
}

body.bloody-theme .btn {
  background: linear-gradient(135deg, rgba(107, 15, 42, 0.8) 0%, rgba(139, 21, 56, 0.6) 100%);
  border: 2px solid rgba(201, 169, 97, 0.4);
  color: var(--color-gray-800);
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.05em;
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.5),
    0 0 10px rgba(139, 21, 56, 0.2);
  text-shadow: 0 0 8px rgba(201, 169, 97, 0.3);
  transition: all 0.3s ease;
}

body.bloody-theme .btn:hover {
  background: linear-gradient(135deg, rgba(139, 21, 56, 0.7) 0%, rgba(184, 35, 74, 0.5) 100%);
  border-color: rgba(201, 169, 97, 0.6);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.6),
    0 0 25px rgba(139, 21, 56, 0.35);
  transform: translateY(-2px);
}

body.bloody-theme .floating-panel-content,
body.bloody-theme .modal-content {
  background-color: var(--bg-secondary);
  background-image:

    linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  border: 2px solid rgba(139, 21, 56, 0.5);
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.8),
    0 0 30px rgba(139, 21, 56, 0.2),
    inset 0 1px 0 rgba(201, 169, 97, 0.1);
}

/* Apply font to all elements */
body.bloody-theme,
body.bloody-theme input,
body.bloody-theme textarea,
body.bloody-theme select,
body.bloody-theme button,
body.bloody-theme .btn,
body.bloody-theme label,
body.bloody-theme .tab-button {
  font-family: var(--font-bloody);
}


/* Glow Effects */
body.bloody-theme::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, var(--theme-glow-color-low) 0%, transparent 60%),
    radial-gradient(circle at 80% 20%, var(--theme-glow-color-low) 0%, transparent 40%);
  z-index: -1;
  animation: bg-pulse 15s ease-in-out infinite alternate;
  pointer-events: none;
}

body.bloody-theme h1,
body.bloody-theme h2,
body.bloody-theme h3,
body.bloody-theme h4,
body.bloody-theme h5,
body.bloody-theme h6 {
  animation: text-pulse-glow 3s infinite;
}

body.bloody-theme .btn:hover,
body.bloody-theme .btn:focus {
  animation: pulse-glow 3s infinite;
}

/* Eternal Theme - Bronze & Gold Ancient Mysticism */
body.eternal-theme {
  --theme-glow-color: #CD7F32;
  --theme-glow-color-low: rgba(205, 127, 50, 0.2);
  --theme-glow-color-high: rgba(205, 127, 50, 0.5);

  --color-primary: #CD7F32;
  /* True Bronze */
  --color-primary-dark: #8B4513;
  /* Saddle Brown */
  --color-primary-light: #D4A574;
  /* Antique Gold */
  --color-secondary: #B8860B;
  /* Dark Goldenrod */
  --color-accent: #704214;
  /* Sepia */

  --color-gray-50: #1A1410;
  /* Deep bronze shadow */
  --color-gray-100: #2A2118;
  --color-gray-200: #3D3024;
  --color-gray-300: #524030;
  --color-gray-400: #7A5D45;
  --color-gray-500: #A68B6E;
  --color-gray-600: #C9B8A0;
  --color-gray-700: #E0D4C4;
  --color-gray-800: #F0EBE0;
  --color-gray-900: #FAF8F5;

  --bg-primary: #1A1410;
  --bg-secondary: #241C14;
  --bg-tertiary: #2E241A;
  --text-primary: #FAF8F5;
  --text-secondary: #D4A574;
  --border-primary: #CD7F32;
  --border-secondary: #704214;

  --shadow-sm: 0 1px 3px 0 rgba(205, 127, 50, 0.4);
  --shadow-md: 0 3px 10px -2px rgba(205, 127, 50, 0.5);
  --shadow-lg: 0 6px 20px -4px rgba(205, 127, 50, 0.6);
  --shadow-xl: 0 12px 32px -8px rgba(205, 127, 50, 0.7);

  --body-gradient-1: #0F0C08;
  --body-gradient-2: #1A1410;

  --font-primary: var(--font-fantasy);

  /* Ancient mystical background with bronze glows */
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(205, 127, 50, 0.08) 0%, transparent 50%),
    linear-gradient(135deg, var(--body-gradient-1) 0%, var(--body-gradient-2) 100%);
}

body.eternal-theme .character-sheet {
  border: none;
  position: relative;
  background-color: var(--bg-secondary);
  box-shadow:
    0 0 20px rgba(205, 127, 50, 0.25),
    0 0 40px rgba(184, 134, 11, 0.1),
    inset 0 0 20px rgba(0, 0, 0, 0.6);
  /* Ancient scroll/parchment texture */
  /* Bronze filigree pattern */
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(205, 127, 50, 0.06) 0%, transparent 30%);
  padding: 2rem;
}

/* Ornate bronze border effect */
body.eternal-theme .character-sheet::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 3px solid rgba(205, 127, 50, 0.5);
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(184, 134, 11, 0.3),
    inset 0 0 10px rgba(205, 127, 50, 0.08);
}

/* Eternal dock buttons */
body.eternal-theme .floating-action-btn {
  border-color: var(--color-primary);
  box-shadow: 0 0 5px rgba(205, 127, 50, 0.3);
}

/* Uniform "Bronze" look for all buttons in Eternal */
body.eternal-theme #sheet-button,
body.eternal-theme #campaign-button,
body.eternal-theme #dice-roller-button,
body.eternal-theme #theme-button,
body.eternal-theme #instructions-toggle-button {
  background: var(--color-primary);
  /* Bronze */
  color: var(--color-gray-50);
  box-shadow: 0 0 5px rgba(205, 127, 50, 0.6), inset 0 0 5px rgba(184, 134, 11, 0.4);
}

body.eternal-theme .stats-box,
body.eternal-theme .trait-item {
  border: 2px solid rgba(205, 127, 50, 0.35);
  background: linear-gradient(135deg, rgba(26, 20, 16, 0.9) 0%, rgba(112, 66, 20, 0.15) 100%);
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(205, 127, 50, 0.1);
  transition: all 0.3s ease;
}

body.eternal-theme .stats-box:hover,
body.eternal-theme .trait-item:hover {
  border-color: rgba(205, 127, 50, 0.6);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.5),
    0 0 10px rgba(205, 127, 50, 0.2),
    inset 0 1px 0 rgba(205, 127, 50, 0.2);
  transform: scale(1.01);
}

body.eternal-theme h2,
body.eternal-theme h3 {
  color: var(--color-primary);
  text-shadow:
    0 0 5px rgba(205, 127, 50, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.6);
  font-weight: 700;
  letter-spacing: 0.05em;
}

body.eternal-theme label {
  color: var(--color-primary-light);
  text-shadow: 0 0 2px rgba(205, 127, 50, 0.2);
}

body.eternal-theme input,
body.eternal-theme textarea,
body.eternal-theme select {
  background: linear-gradient(135deg, rgba(26, 20, 16, 0.8) 0%, rgba(46, 36, 26, 0.6) 100%);
  border: 1px solid rgba(205, 127, 50, 0.3);
  color: var(--text-primary);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

body.eternal-theme input:focus,
body.eternal-theme textarea:focus,
body.eternal-theme select:focus {
  border-color: rgba(205, 127, 50, 0.6);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.3),
    0 0 5px rgba(205, 127, 50, 0.2);
  outline: none;
}

body.eternal-theme .btn {
  background: linear-gradient(135deg, rgba(112, 66, 20, 0.7) 0%, rgba(205, 127, 50, 0.4) 100%);
  border: 2px solid rgba(205, 127, 50, 0.5);
  color: var(--color-gray-800);
  font-weight: 700;
  letter-spacing: 0.05em;
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.4),
    0 0 5px rgba(205, 127, 50, 0.15);
  text-shadow: 0 0 3px rgba(205, 127, 50, 0.3);
  transition: all 0.3s ease;
}

body.eternal-theme .btn:hover {
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.5) 0%, rgba(184, 134, 11, 0.4) 100%);
  border-color: rgba(205, 127, 50, 0.7);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.5),
    0 0 10px rgba(205, 127, 50, 0.3);
  transform: translateY(-2px);
}

body.eternal-theme .floating-panel-content,
body.eternal-theme .modal-content {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  border: 2px solid rgba(205, 127, 50, 0.4);
  box-shadow:
    0 5px 20px rgba(0, 0, 0, 0.7),
    0 0 10px rgba(205, 127, 50, 0.15),
    inset 0 1px 0 rgba(205, 127, 50, 0.15);
}

/* Apply font to all elements */
body.eternal-theme,
body.eternal-theme input,
body.eternal-theme textarea,
body.eternal-theme select,
body.eternal-theme button,
body.eternal-theme .btn,
body.eternal-theme label,
body.eternal-theme .tab-button {
  font-family: var(--font-fantasy);
}


/* Glow Effects */
body.eternal-theme::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, var(--theme-glow-color-low) 0%, transparent 60%),
    radial-gradient(circle at 80% 20%, var(--theme-glow-color-low) 0%, transparent 40%);
  z-index: -1;
  animation: bg-pulse 15s ease-in-out infinite alternate;
  pointer-events: none;
}

body.eternal-theme h1,
body.eternal-theme h2,
body.eternal-theme h3,
body.eternal-theme h4,
body.eternal-theme h5,
body.eternal-theme h6 {
  animation: text-pulse-glow 3s infinite;
}

body.eternal-theme .btn:hover,
body.eternal-theme .btn:focus {
  animation: pulse-glow 3s infinite;
}

/* Eternal Clock Background Animation - Ethereal clock spinning backwards */
body.eternal-theme::after {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(85vh, 550px);
  height: min(85vh, 550px);
  z-index: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3CradialGradient id='etherealGlow' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='%23CD7F32' stop-opacity='0.1'/%3E%3Cstop offset='70%25' stop-color='%23CD7F32' stop-opacity='0.05'/%3E%3Cstop offset='100%25' stop-color='%23CD7F32' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cfilter id='glow' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='1.5' result='blur'/%3E%3CfeMerge%3E%3CfeMergeNode in='blur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='100' cy='100' r='95' fill='none' stroke='%23CD7F32' stroke-width='1' opacity='0.6'/%3E%3Ccircle cx='100' cy='100' r='90' fill='url(%23etherealGlow)'/%3E%3Ccircle cx='100' cy='100' r='88' fill='none' stroke='%23CD7F32' stroke-width='0.5' opacity='0.3'/%3E%3Cg fill='%23CD7F32' font-family='Times New Roman, serif' font-size='11' text-anchor='middle' filter='url(%23glow)'%3E%3Ctext x='100' y='28'%3EXII%3C/text%3E%3Ctext x='141' y='40'%3EI%3C/text%3E%3Ctext x='172' y='72'%3EII%3C/text%3E%3Ctext x='182' y='104'%3EIII%3C/text%3E%3Ctext x='172' y='136'%3EIV%3C/text%3E%3Ctext x='141' y='168'%3EV%3C/text%3E%3Ctext x='100' y='180'%3EVI%3C/text%3E%3Ctext x='59' y='168'%3EVII%3C/text%3E%3Ctext x='28' y='136'%3EVIII%3C/text%3E%3Ctext x='20' y='104'%3EIX%3C/text%3E%3Ctext x='28' y='72'%3EX%3C/text%3E%3Ctext x='59' y='40'%3EXI%3C/text%3E%3C/g%3E%3Cg stroke='%23CD7F32' stroke-width='0.5' opacity='0.4'%3E%3Cline x1='100' y1='15' x2='100' y2='20'/%3E%3Cline x1='100' y1='180' x2='100' y2='185'/%3E%3Cline x1='15' y1='100' x2='20' y2='100'/%3E%3Cline x1='180' y1='100' x2='185' y2='100'/%3E%3Cline x1='142.5' y1='22.5' x2='140' y2='27'/%3E%3Cline x1='177.5' y1='57.5' x2='173' y2='60'/%3E%3Cline x1='177.5' y1='142.5' x2='173' y2='140'/%3E%3Cline x1='142.5' y1='177.5' x2='140' y2='173'/%3E%3Cline x1='57.5' y1='177.5' x2='60' y2='173'/%3E%3Cline x1='22.5' y1='142.5' x2='27' y2='140'/%3E%3Cline x1='22.5' y1='57.5' x2='27' y2='60'/%3E%3Cline x1='57.5' y1='22.5' x2='60' y2='27'/%3E%3C/g%3E%3Cg transform='translate(100,100)'%3E%3Cg filter='url(%23glow)'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0' to='-360' dur='720s' repeatCount='indefinite'/%3E%3Cpath d='M-3,12 L0,-35 L3,12 Z' fill='%23CD7F32' opacity='0.8'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(100,100)'%3E%3Cg filter='url(%23glow)'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0' to='-360' dur='60s' repeatCount='indefinite'/%3E%3Cpath d='M-2,15 L0,-55 L2,15 Z' fill='%23CD7F32' opacity='0.7'/%3E%3C/g%3E%3C/g%3E%3Ccircle cx='100' cy='100' r='4' fill='%23CD7F32' opacity='0.6' filter='url(%23glow)'/%3E%3Ccircle cx='100' cy='100' r='2' fill='%23D4A574' opacity='0.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Fantasy Theme - Oak & Earthy Forest */
body.fantasy-theme {
  --theme-glow-color: #4A7C59;
  --theme-glow-color-low: rgba(74, 124, 89, 0.2);
  --theme-glow-color-high: rgba(74, 124, 89, 0.5);

  --color-primary: #4A7C59;
  /* Forest Green */
  --color-primary-dark: #2D5A3E;
  --color-primary-light: #6B9B7A;
  --color-secondary: #8B5A2B;
  /* Saddle Brown Oak */
  --color-accent: #5D4E37;
  /* Dark Bark */

  --color-gray-50: #1A1812;
  /* Forest floor */
  --color-gray-100: #252218;
  --color-gray-200: #332E22;
  --color-gray-300: #443D2E;
  --color-gray-400: #5D5445;
  --color-gray-500: #7A7260;
  --color-gray-600: #A69E8A;
  --color-gray-700: #C9C2B0;
  --color-gray-800: #E5E0D4;
  --color-gray-900: #F5F3ED;

  --bg-primary: #1A1812;
  --bg-secondary: #221F17;
  --bg-tertiary: #2A261C;
  --text-primary: #F5F3ED;
  --text-secondary: #C9C2B0;
  --border-primary: #4A7C59;
  --border-secondary: #443D2E;

  --shadow-sm: 0 1px 3px 0 rgba(74, 124, 89, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 3px 10px -2px rgba(74, 124, 89, 0.4), 0 3px 6px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 6px 20px -4px rgba(74, 124, 89, 0.5), 0 6px 12px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 12px 32px -8px rgba(74, 124, 89, 0.6), 0 12px 24px rgba(0, 0, 0, 0.7);

  --body-gradient-1: #0F0E0A;
  --body-gradient-2: #1A1812;

  --font-primary: var(--font-fantasy);

  /* Deep forest background with dappled light */
  background-image:
    /* Canopy light filtering through */
    radial-gradient(ellipse at 50% 0%, rgba(74, 124, 89, 0.1) 0%, transparent 60%),
    linear-gradient(135deg, var(--body-gradient-1) 0%, var(--body-gradient-2) 100%);
}

body.fantasy-theme .character-sheet {
  border: none;
  position: relative;
  background-color: var(--bg-secondary);
  box-shadow:
    0 0 20px rgba(0, 0, 0, 0.8),
    0 0 20px rgba(74, 124, 89, 0.15),
    inset 0 0 20px rgba(0, 0, 0, 0.5);
  /* Wood grain texture simulation */

  padding: 2rem;
}

/* Vine/branch border effect */
body.fantasy-theme .character-sheet::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 3px solid rgba(74, 124, 89, 0.4);
  pointer-events: none;
  /* Organic irregular edge */
  border-radius: 4px 8px 6px 10px / 10px 6px 8px 4px;
  box-shadow:
    inset 0 0 0 2px rgba(139, 90, 43, 0.2),
    inset 0 0 10px rgba(74, 124, 89, 0.06);
}

/* Fantasy dock buttons */
body.fantasy-theme .floating-action-btn {
  border-color: var(--color-primary);
  box-shadow: 0 0 4px rgba(74, 124, 89, 0.3);
}

/* Uniform "Forest Green" look for all buttons in Fantasy */
body.fantasy-theme #sheet-button,
body.fantasy-theme #campaign-button,
body.fantasy-theme #dice-roller-button,
body.fantasy-theme #theme-button,
body.fantasy-theme #instructions-toggle-button {
  background: var(--color-primary);
  /* Forest Green */
  color: var(--text-primary);
  border: 1px solid var(--color-primary-light);
}

body.fantasy-theme .stats-box,
body.fantasy-theme .trait-item {
  border: 2px solid rgba(74, 124, 89, 0.35);
  background: linear-gradient(135deg, rgba(26, 24, 18, 0.9) 0%, rgba(74, 124, 89, 0.1) 100%);
  /* Organic rounded edges like worn wood */
  border-radius: 6px 10px 8px 12px / 12px 8px 10px 6px;
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(74, 124, 89, 0.08);
  transition: all 0.3s ease;
}

body.fantasy-theme .trait-item:nth-child(2n) {
  border-radius: 10px 6px 12px 8px / 8px 12px 6px 10px;
}

body.fantasy-theme .trait-item:nth-child(3n) {
  border-radius: 8px 12px 6px 10px / 10px 6px 12px 8px;
}

body.fantasy-theme .stats-box:hover,
body.fantasy-theme .trait-item:hover {
  border-color: rgba(74, 124, 89, 0.6);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.6),
    0 0 8px rgba(74, 124, 89, 0.15),
    inset 0 1px 0 rgba(74, 124, 89, 0.15);
  transform: scale(1.01);
}

body.fantasy-theme h2,
body.fantasy-theme h3 {
  color: var(--color-primary-light);
  text-shadow:
    0 0 4px rgba(74, 124, 89, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.7);
  font-weight: 700;
  letter-spacing: 0.04em;
}

body.fantasy-theme label {
  color: var(--color-gray-600);
  text-shadow: 0 0 2px rgba(74, 124, 89, 0.15);
}

body.fantasy-theme input,
body.fantasy-theme textarea,
body.fantasy-theme select {
  background: linear-gradient(135deg, rgba(26, 24, 18, 0.8) 0%, rgba(42, 38, 28, 0.6) 100%);
  border: 1px solid rgba(74, 124, 89, 0.25);
  border-radius: 4px 6px 5px 7px / 7px 5px 6px 4px;
  color: var(--text-primary);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

body.fantasy-theme input:focus,
body.fantasy-theme textarea:focus,
body.fantasy-theme select:focus {
  border-color: rgba(74, 124, 89, 0.5);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.4),
    0 0 4px rgba(74, 124, 89, 0.2);
  outline: none;
}

body.fantasy-theme .btn {
  background: linear-gradient(135deg, rgba(45, 90, 62, 0.7) 0%, rgba(74, 124, 89, 0.4) 100%);
  border: 2px solid rgba(74, 124, 89, 0.5);
  border-radius: 5px 9px 6px 10px / 10px 6px 9px 5px;
  color: var(--color-gray-800);
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.5),
    0 0 4px rgba(74, 124, 89, 0.1);
  text-shadow: 0 0 2px rgba(74, 124, 89, 0.25);
  transition: all 0.3s ease;
}

body.fantasy-theme .btn:hover {
  background: linear-gradient(135deg, rgba(74, 124, 89, 0.5) 0%, rgba(107, 155, 122, 0.4) 100%);
  border-color: rgba(74, 124, 89, 0.7);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.6),
    0 0 8px rgba(74, 124, 89, 0.25);
  transform: translateY(-2px);
}

body.fantasy-theme .floating-panel-content,
body.fantasy-theme .modal-content {
  background-color: var(--bg-secondary);
  background-image:
    /* Subtle wood grain */
    repeating-linear-gradient(87deg,
      transparent,
      transparent 30px,
      rgba(139, 90, 43, 0.015) 30px,
      rgba(139, 90, 43, 0.015) 31px),
    linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  border: 2px solid rgba(74, 124, 89, 0.35);
  border-radius: 6px 12px 8px 14px / 14px 8px 12px 6px;
  box-shadow:
    0 5px 20px rgba(0, 0, 0, 0.8),
    0 0 10px rgba(74, 124, 89, 0.1),
    inset 0 1px 0 rgba(74, 124, 89, 0.1);
}

/* Apply font to all elements */
body.fantasy-theme,
body.fantasy-theme input,
body.fantasy-theme textarea,
body.fantasy-theme select,
body.fantasy-theme button,
body.fantasy-theme .btn,
body.fantasy-theme label,
body.fantasy-theme .tab-button {
  font-family: var(--font-fantasy);
}


/* Glow Effects */
body.fantasy-theme::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, var(--theme-glow-color-low) 0%, transparent 60%),
    radial-gradient(circle at 80% 20%, var(--theme-glow-color-low) 0%, transparent 40%);
  z-index: -1;
  animation: bg-pulse 15s ease-in-out infinite alternate;
  pointer-events: none;
}

body.fantasy-theme h1,
body.fantasy-theme h2,
body.fantasy-theme h3,
body.fantasy-theme h4,
body.fantasy-theme h5,
body.fantasy-theme h6 {
  animation: text-pulse-glow 3s infinite;
}

body.fantasy-theme .btn:hover,
body.fantasy-theme .btn:focus {
  animation: pulse-glow 3s infinite;
}

/* Frozen Theme - Icy Horror with Cracked Ice & Frostbite */
body.frozen-theme {
  --theme-glow-color: #7dd3fc;
  --theme-glow-color-low: rgba(125, 211, 252, 0.2);
  --theme-glow-color-high: rgba(125, 211, 252, 0.5);

  --color-primary: #7dd3fc;
  /* Pale ice blue */
  --color-primary-dark: #0284c7;
  --color-primary-light: #bae6fd;
  --color-secondary: #c7d2fe;
  /* Frosted lilac */
  --color-accent: #0c4a6e;
  /* Deep frozen blue */

  --color-gray-50: #020617;
  /* Abyss black */
  --color-gray-100: #0c1929;
  --color-gray-200: #152238;
  --color-gray-300: #1e3a5f;
  --color-gray-400: #2d5a87;
  --color-gray-500: #4b8ab8;
  --color-gray-600: #7dd3fc;
  --color-gray-700: #bae6fd;
  --color-gray-800: #e0f2fe;
  --color-gray-900: #f0f9ff;

  --bg-primary: #020617;
  --bg-secondary: #0c1929;
  --bg-tertiary: #152238;
  --text-primary: #e0f2fe;
  --text-secondary: #7dd3fc;
  --border-primary: #0c4a6e;
  --border-secondary: #1e3a5f;

  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.9), 0 0 8px rgba(125, 211, 252, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.9), 0 0 15px rgba(125, 211, 252, 0.15);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.95), 0 0 25px rgba(125, 211, 252, 0.2);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.95), 0 0 40px rgba(125, 211, 252, 0.25);

  --body-gradient-1: #000000;
  --body-gradient-2: #020617;

  --font-primary: var(--font-frozen);

  /* Frozen wasteland - Clean Gradient */
  background-color: #000;
  background-image: linear-gradient(to bottom, #020617, #000000);
}

body.frozen-theme .character-sheet {
  border: none;
  position: relative;
  background-color: var(--bg-secondary);
  /* Cracked ice pattern via clip-path simulation with pseudo-elements */
  box-shadow:
    0 0 60px rgba(0, 0, 0, 0.95),
    0 0 30px rgba(125, 211, 252, 0.15),
    inset 0 0 80px rgba(0, 0, 0, 0.7),
    inset 0 0 4px rgba(125, 211, 252, 0.3);
  /* Clean background */
  background-image: none;
  letter-spacing: 0.03em;
  padding: 2rem;
}

/* Frozen border effect - frostbitten edges */
body.frozen-theme .character-sheet::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid rgba(125, 211, 252, 0.3);
  pointer-events: none;
  /* Irregular frozen edge via border-radius */
  border-radius: 3px 8px 5px 10px / 10px 5px 8px 3px;
  box-shadow:
    0 0 15px rgba(125, 211, 252, 0.1);
}

/* Frozen dock buttons */
body.frozen-theme .floating-action-btn {
  border-color: var(--color-gray-600);
  box-shadow: 0 0 15px rgba(125, 211, 252, 0.2);
}

body.frozen-theme #sheet-button {
  background: var(--color-primary-dark);
  color: var(--text-primary);
}

/* Unified Frozen button style: Tertiary Background, Secondary Text (as requested) */
body.frozen-theme #sheet-button,
body.frozen-theme #campaign-button,
body.frozen-theme #dice-roller-button,
body.frozen-theme #theme-button,
body.frozen-theme #instructions-toggle-button {
  background: var(--bg-tertiary);
  color: var(--color-secondary);
}

body.frozen-theme .stats-box,
body.frozen-theme .trait-item {
  border: 1px solid rgba(125, 211, 252, 0.2);
  background: linear-gradient(135deg, rgba(12, 25, 41, 0.9) 0%, rgba(21, 34, 56, 0.7) 100%);
  box-shadow:
    inset 0 0 15px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(125, 211, 252, 0.1),
    0 4px 15px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  /* Slightly irregular frozen edges */
  border-radius: 4px 8px 6px 10px / 10px 6px 8px 4px;
  position: relative;
  transition: all 0.3s ease;
}

body.frozen-theme .stats-box:hover,
body.frozen-theme .trait-item:hover {
  border-color: rgba(125, 211, 252, 0.4);
  box-shadow:
    inset 0 0 15px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(125, 211, 252, 0.2),
    0 4px 20px rgba(0, 0, 0, 0.5),
    0 0 25px rgba(125, 211, 252, 0.15);
  transform: scale(1.01);
}

/* Alternate frost patterns */
body.frozen-theme .trait-item:nth-child(2n) {
  border-radius: 8px 4px 10px 6px / 6px 10px 4px 8px;
}

body.frozen-theme .trait-item:nth-child(3n) {
  border-radius: 6px 10px 4px 8px / 8px 4px 10px 6px;
}

body.frozen-theme h2,
body.frozen-theme h3 {
  color: var(--color-gray-700);
  /* Frostbitten text with icy glow */
  text-shadow:
    0 0 10px rgba(125, 211, 252, 0.4),
    0 0 20px rgba(125, 211, 252, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.8);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.frozen-theme label {
  color: var(--color-gray-500);
  text-shadow: 0 0 8px rgba(125, 211, 252, 0.15);
}

body.frozen-theme input,
body.frozen-theme textarea,
body.frozen-theme select {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(12, 25, 41, 0.3) 100%);
  border: 1px solid rgba(125, 211, 252, 0.15);
  border-radius: 3px 6px 4px 7px / 7px 4px 6px 3px;
  color: var(--text-primary);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

body.frozen-theme input:focus,
body.frozen-theme textarea:focus,
body.frozen-theme select:focus {
  border-color: rgba(125, 211, 252, 0.4);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.3),
    0 0 15px rgba(125, 211, 252, 0.2);
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(12, 74, 110, 0.2) 100%);
  outline: none;
}

/* Frozen buttons with icy edges */
body.frozen-theme .btn {
  background: linear-gradient(135deg, rgba(12, 74, 110, 0.6) 0%, rgba(2, 132, 199, 0.3) 100%);
  border: 1px solid rgba(125, 211, 252, 0.3);
  border-radius: 4px 8px 5px 9px / 9px 5px 8px 4px;
  color: var(--color-gray-800);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.1em;
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.4),
    0 0 10px rgba(125, 211, 252, 0.1);
  text-shadow: 0 0 8px rgba(125, 211, 252, 0.3);
  transition: all 0.3s ease;
}

body.frozen-theme .btn:hover {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.5) 0%, rgba(125, 211, 252, 0.3) 100%);
  border-color: rgba(125, 211, 252, 0.5);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.5),
    0 0 25px rgba(125, 211, 252, 0.25);
  transform: translateY(-2px);
}

/* Frozen panels/modals */
body.frozen-theme .floating-panel-content,
body.frozen-theme .modal-content {
  background-color: var(--bg-secondary);
  background-image: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  background-size: 100% 100%;
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 5px 10px 7px 12px / 12px 7px 10px 5px;
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.8),
    0 0 30px rgba(125, 211, 252, 0.1),
    inset 0 1px 0 rgba(125, 211, 252, 0.1);
}

/* Apply font to all elements */
body.frozen-theme,
body.frozen-theme input,
body.frozen-theme textarea,
body.frozen-theme select,
body.frozen-theme button,
body.frozen-theme .btn,
body.frozen-theme label,
body.frozen-theme .tab-button {
  font-family: var(--font-frozen);
}


/* Glow Effects */
body.frozen-theme::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, var(--theme-glow-color-low) 0%, transparent 60%),
    radial-gradient(circle at 80% 20%, var(--theme-glow-color-low) 0%, transparent 40%);
  z-index: -1;
  animation: bg-pulse 15s ease-in-out infinite alternate;
  pointer-events: none;
}

body.frozen-theme h1,
body.frozen-theme h2,
body.frozen-theme h3,
body.frozen-theme h4,
body.frozen-theme h5,
body.frozen-theme h6 {
  animation: text-pulse-glow 3s infinite;
}

body.frozen-theme .btn:hover,
body.frozen-theme .btn:focus {
  animation: pulse-glow 3s infinite;
}

/* Dystopic Theme - Post-Apocalyptic Ruins */
body.dystopic-theme {
  --theme-glow-color: #8B4513;
  --theme-glow-color-low: rgba(139, 69, 19, 0.15);
  --theme-glow-color-high: rgba(139, 69, 19, 0.4);

  --color-primary: #8B4513;
  /* Rust brown */
  --color-primary-dark: #5D2E0C;
  --color-primary-light: #A0522D;
  --color-secondary: #4A4A4A;
  /* Corroded metal */
  --color-accent: #B8860B;
  /* Tarnished gold/warning */

  --color-gray-50: #0A0908;
  --color-gray-100: #141210;
  --color-gray-200: #1E1B18;
  --color-gray-300: #2D2925;
  --color-gray-400: #4A4440;
  --color-gray-500: #6B635C;
  --color-gray-600: #8C837A;
  --color-gray-700: #A69E95;
  --color-gray-800: #C4BCB3;
  --color-gray-900: #E8E4E0;

  --bg-primary: #0A0908;
  --bg-secondary: #121110;
  --bg-tertiary: #1A1816;
  --text-primary: #C4B8A8;
  /* Faded parchment */
  --text-secondary: #8C837A;
  --border-primary: #5D4E37;
  /* Rusted edge */
  --border-secondary: #2D2925;

  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.8), 0 1px 2px rgba(10, 5, 0, 0.6);
  --shadow-md: 0 3px 10px -2px rgba(0, 0, 0, 0.9), 0 2px 4px rgba(10, 5, 0, 0.7);
  --shadow-lg: 0 6px 20px -4px rgba(0, 0, 0, 0.95), 0 4px 8px rgba(10, 5, 0, 0.8);
  --shadow-xl: 0 12px 32px -8px rgba(0, 0, 0, 1), 0 6px 12px rgba(10, 5, 0, 0.9);

  --body-gradient-1: #050403;
  --body-gradient-2: #0A0908;

  --font-primary: var(--font-dystopic);

  /* Crumbling wasteland with rust and decay */
  background-color: #030302;
  background-image:
    /* Heavy vignette - darkness closing in */
    radial-gradient(ellipse at 50% 50%, transparent 10%, rgba(0, 0, 0, 0.4) 50%, #000000 95%),
    /* Rust stains bleeding through */
    radial-gradient(ellipse at 15% 85%, rgba(139, 69, 19, 0.08) 0%, transparent 40%),
    radial-gradient(ellipse at 85% 15%, rgba(100, 50, 10, 0.06) 0%, transparent 35%),
    /* Concrete crack texture */
    repeating-linear-gradient(90deg, transparent 0px, transparent 100px, rgba(30, 25, 20, 0.3) 100px, rgba(30, 25, 20, 0.3) 101px),
    repeating-linear-gradient(0deg, transparent 0px, transparent 80px, rgba(25, 20, 15, 0.25) 80px, rgba(25, 20, 15, 0.25) 81px),
    /* Grime and dirt noise */
    repeating-linear-gradient(45deg, rgba(20, 15, 10, 0.15) 0px, transparent 1px, transparent 3px),
    repeating-linear-gradient(-45deg, rgba(15, 10, 5, 0.1) 0px, transparent 1px, transparent 4px),
    /* Base decayed gradient */
    linear-gradient(180deg, #0F0D0B 0%, #030302 100%);
}

body.dystopic-theme .character-sheet {
  border: none;
  position: relative;
  background-color: #0E0D0C;
  background-image:
    /* Rust bleeding through corners */
    radial-gradient(ellipse at 0% 0%, rgba(139, 69, 19, 0.12) 0%, transparent 30%),
    radial-gradient(ellipse at 100% 100%, rgba(100, 50, 10, 0.1) 0%, transparent 25%),
    /* Aged metal plate texture */
    repeating-linear-gradient(90deg, transparent 0px, transparent 3px, rgba(50, 45, 40, 0.08) 3px, rgba(50, 45, 40, 0.08) 4px),
    linear-gradient(180deg, #121110 0%, #0A0908 100%);
  box-shadow:
    0 0 60px rgba(0, 0, 0, 1),
    inset 0 0 100px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(139, 69, 19, 0.1);
  /* Askew rotation - structural damage */
  transform: rotate(-0.3deg);
  /* Crumbling edge effect */
  clip-path: polygon(2% 0%, 15% 1%, 30% 0%, 45% 0.5%, 60% 0%, 75% 1%, 88% 0%, 98% 0.5%,
      100% 3%, 99% 20%, 100% 40%, 99.5% 60%, 100% 80%, 99% 95%,
      97% 100%, 80% 99%, 60% 100%, 40% 99.5%, 20% 100%, 5% 99%,
      0% 97%, 0.5% 75%, 0% 50%, 1% 25%, 0% 5%);
  padding: 2rem;
  overflow: hidden;
}

/* Rusted border overlay with corrosion */
body.dystopic-theme .character-sheet::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 3px solid;
  border-color: #3D3530 #4A4035 #3D3530 #2D2520;
  border-radius: 2px;
  pointer-events: none;
  z-index: 10;
  background: transparent;
  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, 0.6),
    inset 2px 2px 10px rgba(139, 69, 19, 0.1);
}

/* Corner rust and decay indicators */
body.dystopic-theme .character-sheet::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    /* Top left rust spot */
    radial-gradient(ellipse at 5% 5%, rgba(139, 69, 19, 0.2) 0%, transparent 15%),
    /* Bottom right corrosion */
    radial-gradient(ellipse at 95% 95%, rgba(100, 60, 20, 0.15) 0%, transparent 20%),
    /* Top right wear */
    radial-gradient(ellipse at 90% 8%, rgba(80, 50, 20, 0.1) 0%, transparent 12%),
    /* Scratches overlay */
    repeating-linear-gradient(135deg, transparent 0px, transparent 20px, rgba(0, 0, 0, 0.03) 20px, rgba(0, 0, 0, 0.03) 21px);
  pointer-events: none;
  z-index: 5;
}

/* Dystopic dock buttons */
body.dystopic-theme .floating-action-btn {
  border-radius: 1px;
  transform: rotate(0.5deg);
  border: 2px solid #4A3D30;
  background: linear-gradient(135deg, #2D2520 0%, #1A1614 100%);
  box-shadow:
    3px 3px 0px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(139, 69, 19, 0.15);
}

body.dystopic-theme .floating-action-btn:hover {
  transform: rotate(0deg) scale(1.05);
  border-color: #8B4513;
  box-shadow:
    4px 4px 0px rgba(0, 0, 0, 0.9),
    0 0 10px rgba(139, 69, 19, 0.3);
}

/* Rusted corroded metal look for dock buttons */
body.dystopic-theme #sheet-button,
body.dystopic-theme #campaign-button,
body.dystopic-theme #dice-roller-button,
body.dystopic-theme #theme-button,
body.dystopic-theme #instructions-toggle-button {
  background: linear-gradient(145deg, #3D3530 0%, #2A2420 100%);
  color: #C4B8A8;
  border-color: #5D4E37;
}

body.dystopic-theme .stats-box,
body.dystopic-theme .trait-item {
  border: 2px solid #3D3530;
  background: linear-gradient(180deg, #141210 0%, #0E0D0C 100%);
  border-radius: 1px;
  box-shadow:
    3px 3px 0px rgba(0, 0, 0, 0.7),
    inset 0 0 15px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(139, 69, 19, 0.08);
  position: relative;
  transition: all 0.2s ease;
  transform: rotate(0.5deg);
}

/* Alternating corrosion patterns */
body.dystopic-theme .trait-item:nth-child(2n) {
  transform: rotate(-0.8deg);
  border-color: #4A3D30;
  box-shadow:
    3px 3px 0px rgba(0, 0, 0, 0.7),
    inset 0 0 15px rgba(0, 0, 0, 0.4),
    inset -1px -1px 5px rgba(139, 69, 19, 0.1);
}

body.dystopic-theme .trait-item:nth-child(3n) {
  transform: rotate(1deg);
  border-color: #3A3025;
}

body.dystopic-theme .trait-item:nth-child(5n) {
  border-color: #5D4030;
}

body.dystopic-theme .stats-box:hover,
body.dystopic-theme .trait-item:hover {
  border-color: #8B4513;
  transform: scale(1.02) rotate(0deg);
  box-shadow:
    5px 5px 0px rgba(0, 0, 0, 0.9),
    0 0 15px rgba(139, 69, 19, 0.2),
    inset 0 0 20px rgba(0, 0, 0, 0.3);
  background: linear-gradient(180deg, #1A1816 0%, #121110 100%);
  z-index: 10;
}

body.dystopic-theme h2,
body.dystopic-theme h3 {
  color: #B8A898;
  font-family: 'Special Elite', cursive;
  text-shadow:
    2px 2px 0px #000,
    0 0 10px rgba(139, 69, 19, 0.2);
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  transform: rotate(-0.5deg);
  position: relative;
}

body.dystopic-theme label {
  color: #6B635C;
  font-family: 'Special Elite', cursive;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 0.85em;
}

body.dystopic-theme input,
body.dystopic-theme textarea,
body.dystopic-theme select {
  background: #0A0908;
  border: none;
  border-bottom: 2px solid #3D3530;
  border-radius: 0;
  color: #C4B8A8;
  font-family: 'Special Elite', cursive;
  box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 0.3);
  padding: 8px 5px;
}

body.dystopic-theme input:focus,
body.dystopic-theme textarea:focus,
body.dystopic-theme select:focus {
  border-bottom-color: #8B4513;
  background: #121110;
  outline: none;
  box-shadow:
    inset 0 -2px 5px rgba(0, 0, 0, 0.3),
    0 2px 10px rgba(139, 69, 19, 0.15);
}

body.dystopic-theme .btn {
  background: linear-gradient(180deg, #2D2520 0%, #1A1614 100%);
  border: 2px solid #4A3D30;
  color: #A69E95;
  font-family: 'Special Elite', cursive;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  box-shadow:
    3px 3px 0px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(139, 69, 19, 0.1);
  transform: rotate(0.3deg);
  transition: all 0.2s;
}

body.dystopic-theme .btn:hover {
  background: linear-gradient(180deg, #8B4513 0%, #5D2E0C 100%);
  color: #E8E4E0;
  border-color: #A0522D;
  transform: translate(-1px, -1px) rotate(0deg);
  box-shadow:
    4px 4px 0px rgba(0, 0, 0, 0.9),
    0 0 15px rgba(139, 69, 19, 0.3);
}


body.dystopic-theme .floating-panel-content,
body.dystopic-theme .modal-content {
  background-color: #0E0D0C;
  background-image:
    /* Rust stains */
    radial-gradient(ellipse at 10% 90%, rgba(139, 69, 19, 0.08) 0%, transparent 30%),
    /* Worn scratched texture */
    repeating-linear-gradient(90deg,
      transparent,
      transparent 60px,
      rgba(60, 50, 40, 0.04) 60px,
      rgba(60, 50, 40, 0.04) 61px),
    repeating-linear-gradient(0deg,
      transparent,
      transparent 45px,
      rgba(50, 40, 30, 0.03) 45px,
      rgba(50, 40, 30, 0.03) 46px),
    linear-gradient(135deg, #121110 0%, #0A0908 100%);
  border: 2px solid #3D3530;
  border-radius: 1px;
  box-shadow:
    0 15px 50px rgba(0, 0, 0, 1),
    0 0 30px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(139, 69, 19, 0.08),
    inset 0 0 30px rgba(0, 0, 0, 0.4);
}

/* Apply font to all elements */
body.dystopic-theme,
body.dystopic-theme input,
body.dystopic-theme textarea,
body.dystopic-theme select,
body.dystopic-theme button,
body.dystopic-theme .btn,
body.dystopic-theme label,
body.dystopic-theme .tab-button {
  font-family: var(--font-dystopic);
}


/* Atmospheric decay overlay */
body.dystopic-theme::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    /* Distant fire/rust glow on horizon */
    radial-gradient(ellipse at 50% 120%, rgba(139, 69, 19, 0.1) 0%, transparent 50%),
    /* Corner decay */
    radial-gradient(ellipse at 0% 0%, rgba(50, 30, 10, 0.15) 0%, transparent 40%),
    radial-gradient(ellipse at 100% 100%, rgba(40, 25, 10, 0.12) 0%, transparent 35%),
    /* Static noise - dead signal */
    repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(100, 90, 80, 0.02) 2px, rgba(100, 90, 80, 0.02) 4px);
  z-index: -1;
  animation: dystopic-flicker 8s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes dystopic-flicker {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.95;
  }

  52% {
    opacity: 0.98;
  }

  54% {
    opacity: 0.94;
  }
}

/* No pulsing glow for dystopic - keep it dead and quiet */
body.dystopic-theme h1,
body.dystopic-theme h2,
body.dystopic-theme h3,
body.dystopic-theme h4,
body.dystopic-theme h5,
body.dystopic-theme h6 {
  animation: none;
}

body.dystopic-theme .btn:hover,
body.dystopic-theme .btn:focus {
  animation: none;
}

/* Neon Theme - Cyberpunk Sci-Fi with Glitch Effects */
body.neon-theme {
  --theme-glow-color: #FF006E;
  --theme-glow-color-low: rgba(255, 0, 110, 0.2);
  --theme-glow-color-high: rgba(255, 0, 110, 0.5);

  --color-primary: #FF006E;
  --color-primary-dark: #C70055;
  --color-primary-light: #FF3D8F;
  --color-secondary: #00F5FF;
  --color-accent: #8338EC;

  --color-gray-50: #0A0514;
  --color-gray-100: #150A24;
  --color-gray-200: #1F0F3D;
  --color-gray-300: #2B1552;
  --color-gray-400: #442675;
  --color-gray-500: #6B4B9B;
  --color-gray-600: #A97BC9;
  --color-gray-700: #C9A9E0;
  --color-gray-800: #E0C9F0;
  --color-gray-900: #F5F0FA;

  --bg-primary: #0A0514;
  --bg-secondary: #150A24;
  --bg-tertiary: #1F0F3D;
  --text-primary: #F5F0FA;
  --text-secondary: #A97BC9;
  --border-primary: #FF006E;
  --border-secondary: #8338EC;

  --shadow-sm: 0 1px 3px 0 rgba(255, 0, 110, 0.4);
  --shadow-md: 0 3px 10px -2px rgba(255, 0, 110, 0.5);
  --shadow-lg: 0 6px 20px -4px rgba(255, 0, 110, 0.6);
  --shadow-xl: 0 12px 32px -8px rgba(131, 56, 236, 0.7);

  --body-gradient-1: #050208;
  --body-gradient-2: #0A0514;

  --font-primary: var(--font-neon);

  /* Glitchy digital void with scan lines */
  background-color: #050208;
  background-image:
    /* Horizontal scan lines */
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.3) 2px,
      rgba(0, 0, 0, 0.3) 4px),
    /* Neon glow spots */
    radial-gradient(circle at 20% 30%, rgba(255, 0, 110, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(131, 56, 236, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(0, 245, 255, 0.1) 0%, transparent 60%),
    /* Glitch accent bars */
    linear-gradient(90deg,
      transparent 0%,
      transparent 48%,
      rgba(0, 245, 255, 0.03) 48%,
      rgba(0, 245, 255, 0.03) 48.5%,
      transparent 48.5%,
      transparent 100%),
    linear-gradient(135deg, var(--body-gradient-1) 0%, var(--body-gradient-2) 100%);
}

body.neon-theme .character-sheet {
  border: none;
  position: relative;
  box-shadow:
    /* RGB separation effect - chromatic aberration */
    2px 0 0 rgba(0, 245, 255, 0.3),
    -2px 0 0 rgba(255, 0, 110, 0.3),
    0 0 30px rgba(255, 0, 110, 0.5),
    0 0 60px rgba(131, 56, 236, 0.3),
    0 0 90px rgba(0, 245, 255, 0.2),
    inset 0 0 60px rgba(255, 0, 110, 0.05);
  background-image:
    /* Scan line overlay */
    repeating-linear-gradient(0deg,
      transparent,
      transparent 1px,
      rgba(0, 0, 0, 0.15) 1px,
      rgba(0, 0, 0, 0.15) 2px),
    /* Vertical grid lines */
    repeating-linear-gradient(90deg,
      transparent,
      transparent 2px,
      rgba(255, 0, 110, 0.03) 2px,
      rgba(255, 0, 110, 0.03) 4px),
    /* Horizontal grid lines */
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(131, 56, 236, 0.03) 2px,
      rgba(131, 56, 236, 0.03) 4px);
  padding: 2rem;
}

/* Neon border frame with RGB glow */
body.neon-theme .character-sheet::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid var(--color-primary);
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 20px rgba(255, 0, 110, 0.2),
    0 0 10px var(--color-secondary),
    0 0 20px var(--color-primary);
}

/* Neon dock buttons */
body.neon-theme .floating-action-btn {
  border: 2px solid var(--color-secondary);
  box-shadow: 0 0 15px rgba(0, 245, 255, 0.3);
}

/* Unified Neon button style: Tertiary Background, Secondary Text, Primary Border (as requested to match Theme button) */
body.neon-theme #sheet-button,
body.neon-theme #campaign-button,
body.neon-theme #dice-roller-button,
body.neon-theme #theme-button,
body.neon-theme #instructions-toggle-button {
  background: var(--bg-tertiary);
  color: var(--color-secondary);
  border-color: var(--color-primary);
}

/* Digital noise texture overlay */
body.neon-theme .character-sheet::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.02;
  mix-blend-mode: overlay;
}

body.neon-theme .stats-box,
body.neon-theme .trait-item {
  border-color: rgba(255, 0, 110, 0.5);
  background: linear-gradient(135deg, var(--bg-primary) 0%, rgba(131, 56, 236, 0.1) 100%);
  box-shadow:
    /* Subtle RGB separation on boxes */
    1px 0 0 rgba(0, 245, 255, 0.2),
    -1px 0 0 rgba(255, 0, 110, 0.2),
    inset 0 0 20px rgba(255, 0, 110, 0.1),
    0 0 10px rgba(255, 0, 110, 0.2);
  position: relative;
}

/* Glitch accent line on boxes */
body.neon-theme .stats-box::before,
body.neon-theme .trait-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
      transparent 0%,
      var(--color-secondary) 20%,
      var(--color-primary) 50%,
      var(--color-secondary) 80%,
      transparent 100%);
  opacity: 0.6;
}

body.neon-theme h2,
body.neon-theme h3 {
  color: var(--color-secondary);
  text-shadow:
    /* RGB split text effect */
    1px 0 0 rgba(255, 0, 110, 0.5),
    -1px 0 0 rgba(0, 245, 255, 0.5),
    0 0 10px rgba(0, 245, 255, 0.8),
    0 0 20px rgba(0, 245, 255, 0.5),
    0 2px 4px rgba(255, 0, 110, 0.3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Apply font to all elements */
body.neon-theme,
body.neon-theme input,
body.neon-theme textarea,
body.neon-theme select,
body.neon-theme button,
body.neon-theme .btn,
body.neon-theme label,
body.neon-theme .tab-button {
  font-family: var(--font-neon);
}

body.neon-theme .btn-primary,
body.neon-theme .btn-accent {
  position: relative;
  box-shadow:
    /* RGB chromatic aberration */
    2px 0 0 rgba(0, 245, 255, 0.3),
    -2px 0 0 rgba(255, 0, 110, 0.3),
    0 0 20px rgba(255, 0, 110, 0.4),
    0 4px 16px -4px rgba(255, 0, 110, 0.6);
  text-shadow:
    1px 0 0 rgba(0, 245, 255, 0.3),
    -1px 0 0 rgba(255, 0, 110, 0.3);
  border: 1px solid var(--color-secondary);
}

body.neon-theme .btn-primary:hover,
body.neon-theme .btn-accent:hover {
  box-shadow:
    /* Enhanced RGB split on hover */
    3px 0 0 rgba(0, 245, 255, 0.5),
    -3px 0 0 rgba(255, 0, 110, 0.5),
    0 0 30px rgba(255, 0, 110, 0.6),
    0 6px 20px -4px rgba(255, 0, 110, 0.8);
  text-shadow:
    2px 0 0 rgba(0, 245, 255, 0.5),
    -2px 0 0 rgba(255, 0, 110, 0.5);
}

body.neon-theme input,
body.neon-theme textarea,
body.neon-theme select {
  border: 1px solid rgba(131, 56, 236, 0.4);
  background-image:
    /* Subtle scan lines on inputs */
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.1) 2px,
      rgba(0, 0, 0, 0.1) 3px);
}

body.neon-theme input:focus,
body.neon-theme textarea:focus,
body.neon-theme select:focus {
  box-shadow:
    /* Glitchy focus effect */
    2px 0 0 rgba(0, 245, 255, 0.4),
    -2px 0 0 rgba(255, 0, 110, 0.4),
    0 0 0 3px rgba(255, 0, 110, 0.3),
    0 0 20px rgba(0, 245, 255, 0.4);
  border-color: var(--color-secondary);
}


/* Glow Effects */
body.neon-theme::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, var(--theme-glow-color-low) 0%, transparent 60%),
    radial-gradient(circle at 80% 20%, var(--theme-glow-color-low) 0%, transparent 40%);
  z-index: -1;
  animation: bg-pulse 15s ease-in-out infinite alternate;
  pointer-events: none;
}

body.neon-theme h1,
body.neon-theme h2,
body.neon-theme h3,
body.neon-theme h4,
body.neon-theme h5,
body.neon-theme h6 {
  animation: text-pulse-glow 3s infinite;
}

body.neon-theme .btn:hover,
body.neon-theme .btn:focus {
  animation: pulse-glow 3s infinite;
}

/* Delinquent Theme - Maximum Grunge */
body.delinquent-theme {
  --theme-glow-color: #ff4500;
  --theme-glow-color-low: rgba(255, 69, 0, 0.2);
  --theme-glow-color-high: rgba(255, 69, 0, 0.5);

  --color-primary: #ca4600;
  /* Rust Orange */
  --color-primary-dark: #a33800;
  --color-primary-light: #e8601c;
  --color-secondary: #000000;
  --color-accent: #ff4500;

  --color-gray-50: #1a1008;
  --color-gray-100: #261a10;
  --color-gray-200: #332418;
  --color-gray-300: #4d3624;
  --color-gray-400: #664d36;
  --color-gray-500: #8c6e50;
  --color-gray-600: #b39b85;
  --color-gray-700: #d9cbb8;
  --color-gray-800: #f2ebe3;
  --color-gray-900: #ffffff;

  --bg-primary: #120a05;
  --bg-secondary: #1f120a;
  --bg-tertiary: #2e1b0f;
  --text-primary: #f2ebe3;
  --text-secondary: #b39b85;
  --border-primary: #ca4600;
  --border-secondary: #4d3624;

  --shadow-sm: 2px 2px 0 0 rgba(0, 0, 0, 1);
  --shadow-md: 4px 4px 0 0 rgba(0, 0, 0, 1);
  --shadow-lg: 6px 6px 0 0 rgba(0, 0, 0, 1);
  --shadow-xl: 8px 8px 0 0 rgba(0, 0, 0, 1);

  --body-gradient-1: #0a0502;
  --body-gradient-2: #140a05;

  --font-primary: var(--font-frozen);
  /* Typewriter Font */

  background-image: none;
  background-color: #000000;
  background-size: 100% 100%;
}

body.delinquent-theme .character-sheet {
  border: none;
  background: var(--bg-secondary);
  position: relative;
  border-radius: 2px;
  padding: 2rem;
  box-shadow: 10px 10px 0 #000;
  border: 4px solid var(--color-primary);
}

/* Delinquent dock buttons */
body.delinquent-theme .floating-action-btn {
  border: 3px solid var(--border-primary);
  border-radius: 50% 40% 60% 50% / 50% 60% 40% 50%;
  /* Irregular shape */
  transform: rotate(-3deg);
  box-shadow: 4px 4px 0 #000;
}

body.delinquent-theme .floating-action-btn:hover {
  transform: rotate(0deg) scale(1.1);
  box-shadow: 6px 6px 0 #000;
}

/* Uniform "Black & Orange" look for all buttons in Delinquent */
body.delinquent-theme #sheet-button,
body.delinquent-theme #campaign-button,
body.delinquent-theme #dice-roller-button,
body.delinquent-theme #theme-button,
body.delinquent-theme #instructions-toggle-button {
  background: #000;
  color: var(--color-primary);
}

body.delinquent-theme .stats-box,
body.delinquent-theme .trait-item {
  border-style: solid;
  border-color: var(--color-primary);
  border-width: 3px 2px 4px 3px;
  background: var(--bg-tertiary);
  box-shadow: 8px 8px 0 #000;
  transform: rotate(-1deg);
  transition: transform 0.2s;
  border-radius: 5% 25% 4% 20% / 20% 4% 25% 3%;
}

body.delinquent-theme .trait-item:nth-child(2n) {
  transform: rotate(1.5deg);
  border-width: 2px 4px 3px 2px;
  border-radius: 20% 4% 25% 5% / 4% 25% 5% 20%;
}

body.delinquent-theme .trait-item:nth-child(3n) {
  transform: rotate(-2deg);
  border-width: 4px 3px 2px 4px;
  border-radius: 10% 30% 15% 5% / 30% 5% 10% 20%;
}

body.delinquent-theme .stats-box:hover,
body.delinquent-theme .trait-item:hover {
  transform: rotate(0deg) scale(1.02);
  border-width: 3px;
}

body.delinquent-theme h2,
body.delinquent-theme h3 {
  color: var(--color-primary);
  /* Spray paint effect */
  text-shadow:
    2px 2px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
  text-transform: uppercase;
  font-weight: 900;
  font-style: italic;
  transform: skewX(-10deg);
  letter-spacing: 0.1em;
}

/* Apply font to all elements */
body.delinquent-theme,
body.delinquent-theme input,
body.delinquent-theme textarea,
body.delinquent-theme select,
body.delinquent-theme button,
body.delinquent-theme .btn,
body.delinquent-theme label,
body.delinquent-theme .tab-button {
  font-family: var(--font-frozen);
}

body.delinquent-theme input,
body.delinquent-theme textarea,
body.delinquent-theme select {
  background-color: #000;
  border-style: solid;
  border-color: var(--color-gray-600);
  border-width: 2px 4px 3px 2px;
  color: var(--text-primary);
  border-radius: 4px 20px 6px 25px / 15px 4px 25px 8px;
  font-weight: bold;
  min-height: 3rem;
  /* Prevent cropping */
}

body.delinquent-theme input[type="checkbox"] {
  min-height: 1.125rem;
  min-width: 1.125rem;
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid var(--color-gray-600);
  border-radius: 4px;
  background-color: #000;
  cursor: pointer;
  appearance: auto;
  accent-color: var(--color-primary);
}

body.delinquent-theme input:focus,
body.delinquent-theme textarea:focus,
body.delinquent-theme select:focus {
  box-shadow: 6px 6px 0 var(--color-primary);
  border-color: var(--color-primary);
  outline: none;
  background-color: #1a0f05;
}

/* Remove shadow from tribulation checkboxes in delinquent theme */
body.delinquent-theme .tribulation-item input[type="checkbox"],
body.delinquent-theme .tribulation-item input[type="checkbox"]:focus {
  box-shadow: none;
  background-color: transparent;
  border-width: 2px;
  border-style: solid;
}

body.delinquent-theme .btn {
  border-radius: 4px 25px 6px 20px / 20px 6px 25px 4px;
  border-style: solid;
  border-color: var(--color-primary);
  border-width: 3px 2px 4px 3px;
  background: #000;
  color: var(--color-primary);
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 2px;
  box-shadow: 6px 6px 0 var(--color-primary);
  transform: rotate(1.5deg);
}

body.delinquent-theme .btn:hover {
  transform: rotate(0deg) translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--color-primary);
  background: var(--color-primary);
  color: #000;
}

body.delinquent-theme .floating-panel-content,
body.delinquent-theme .modal-content {
  border-style: solid;
  border-color: var(--color-primary);
  border-width: 3px 5px 4px 2px;
  border-radius: 2% 25% 1% 5% / 25% 1% 5% 2%;
  box-shadow: 10px 10px 0 #000;
  background-color: var(--bg-secondary);
}


/* Glow Effects */
body.delinquent-theme::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, var(--theme-glow-color-low) 0%, transparent 60%),
    radial-gradient(circle at 80% 20%, var(--theme-glow-color-low) 0%, transparent 40%);
  z-index: -1;
  animation: bg-pulse 15s ease-in-out infinite alternate;
  pointer-events: none;
}

body.delinquent-theme h1,
body.delinquent-theme h2,
body.delinquent-theme h3,
body.delinquent-theme h4,
body.delinquent-theme h5,
body.delinquent-theme h6 {
  animation: text-pulse-glow 3s infinite;
}

body.delinquent-theme .btn:hover,
body.delinquent-theme .btn:focus {
  animation: pulse-glow 3s infinite;
}

/* Corrupted Theme - Purple Icy Horror (Frozen variant) */
body.corrupted-theme {
  --theme-glow-color: #a78bfa;
  --theme-glow-color-low: rgba(167, 139, 250, 0.2);
  --theme-glow-color-high: rgba(167, 139, 250, 0.5);

  --color-primary: #a78bfa;
  /* Pale violet */
  --color-primary-dark: #7c3aed;
  --color-primary-light: #c4b5fd;
  --color-secondary: #ddd6fe;
  /* Frosted lavender */
  --color-accent: #4c1d95;
  /* Deep violet */

  --color-gray-50: #030207;
  /* Abyss purple-black */
  --color-gray-100: #0c0918;
  --color-gray-200: #150f28;
  --color-gray-300: #1e1638;
  --color-gray-400: #2d2057;
  --color-gray-500: #4b3888;
  --color-gray-600: #a78bfa;
  --color-gray-700: #c4b5fd;
  --color-gray-800: #e9e3ff;
  --color-gray-900: #f5f3ff;

  --bg-primary: #030207;
  --bg-secondary: #0c0918;
  --bg-tertiary: #150f28;
  --text-primary: #f5f3ff;
  --text-secondary: #a78bfa;
  --border-primary: #4c1d95;
  --border-secondary: #1e1638;

  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.9), 0 0 8px rgba(167, 139, 250, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.9), 0 0 15px rgba(167, 139, 250, 0.15);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.95), 0 0 25px rgba(167, 139, 250, 0.2);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.95), 0 0 40px rgba(167, 139, 250, 0.25);

  --body-gradient-1: #000000;
  --body-gradient-2: #030207;

  --font-primary: var(--font-frozen);

  /* Corrupted wasteland - Clean Gradient */
  background-color: #000;
  background-image: linear-gradient(to bottom, #030207, #000000);
}

body.corrupted-theme .character-sheet {
  border: none;
  position: relative;
  background-color: var(--bg-secondary);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.9);
  /* Clean background */
  background-image: none;
  background-size: 100% 100%;
  letter-spacing: 0.03em;
  padding: 2rem;
}

/* Corrupted border effect - fractured edges */
body.corrupted-theme .character-sheet::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid rgba(167, 139, 250, 0.3);
  pointer-events: none;
  /* Irregular corrupted edge */
  border-radius: 3px 8px 5px 10px / 10px 5px 8px 3px;
  box-shadow:
    inset 0 0 20px rgba(167, 139, 250, 0.1),
    0 0 15px rgba(167, 139, 250, 0.1);
}

/* Corrupted dock buttons */
body.corrupted-theme .floating-action-btn {
  border-color: var(--color-primary);
  box-shadow: 0 0 15px rgba(124, 58, 237, 0.4);
}

/* Unified Corrupted button style: Secondary Background, Primary Background Text (as requested) */
body.corrupted-theme #sheet-button,
body.corrupted-theme #campaign-button,
body.corrupted-theme #dice-roller-button,
body.corrupted-theme #theme-button,
body.corrupted-theme #instructions-toggle-button {
  background: var(--color-secondary);
  color: var(--bg-primary);
  border-color: var(--color-primary);
}

/* Specific icons white as requested - overriding unified text color for specific cases? 
   Wait, user said "buttons all match... Combat Flow and Campaign".
   Campaign had: background: secondary, color: bg-primary (dark text).
   User ALSO said "I think the Theme and Dice Tray button Icons should also be white".
   BUT THEN in the next prompt: "On the Corrupted Theme we need to make the buttons all match what you've got going right now with the Combat Flow, and Campaign Buttons."
   Campaign uses BG Primary for text. That is DARK.
   I will prioritize the "ALL MATCH" instruction. 
   If they want white icons, they might be conflicting instructions, but "buttons all match" implies uniformity.
   However, bg-primary on color-secondary is good contrast.
*/

body.corrupted-theme .stats-box,
body.corrupted-theme .trait-item {
  border: 1px solid rgba(167, 139, 250, 0.2);
  background: linear-gradient(135deg, rgba(12, 9, 24, 0.9) 0%, rgba(21, 15, 40, 0.7) 100%);
  box-shadow:
    inset 0 0 15px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(167, 139, 250, 0.1),
    0 4px 15px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  /* Slightly irregular corrupted edges */
  border-radius: 4px 8px 6px 10px / 10px 6px 8px 4px;
  position: relative;
  transition: all 0.3s ease;
}

body.corrupted-theme .stats-box:hover,
body.corrupted-theme .trait-item:hover {
  border-color: rgba(167, 139, 250, 0.4);
  box-shadow:
    inset 0 0 15px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(167, 139, 250, 0.2),
    0 4px 20px rgba(0, 0, 0, 0.5),
    0 0 25px rgba(167, 139, 250, 0.15);
  transform: scale(1.01);
}

/* Alternate corruption patterns */
body.corrupted-theme .trait-item:nth-child(2n) {
  border-radius: 8px 4px 10px 6px / 6px 10px 4px 8px;
}

body.corrupted-theme .trait-item:nth-child(3n) {
  border-radius: 6px 10px 4px 8px / 8px 4px 10px 6px;
}

body.corrupted-theme input,
body.corrupted-theme textarea,
body.corrupted-theme select {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(12, 9, 24, 0.3) 100%);
  border: 1px solid rgba(167, 139, 250, 0.15);
  border-radius: 3px 6px 4px 7px / 7px 4px 6px 3px;
  color: var(--text-primary);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

body.corrupted-theme input:focus,
body.corrupted-theme textarea:focus,
body.corrupted-theme select:focus {
  border-color: rgba(167, 139, 250, 0.4);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.3),
    0 0 15px rgba(167, 139, 250, 0.2);
  outline: none;
}

body.corrupted-theme .btn {
  background: linear-gradient(135deg, rgba(76, 29, 149, 0.6) 0%, rgba(124, 58, 237, 0.3) 100%);
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-radius: 4px 8px 5px 9px / 9px 5px 8px 4px;
  color: var(--color-gray-800);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.1em;
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.4),
    0 0 10px rgba(167, 139, 250, 0.1);
  text-shadow: 0 0 8px rgba(167, 139, 250, 0.3);
  transition: all 0.3s ease;
}

body.corrupted-theme .btn:hover {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.5) 0%, rgba(167, 139, 250, 0.3) 100%);
  border-color: rgba(167, 139, 250, 0.5);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.5),
    0 0 25px rgba(167, 139, 250, 0.25);
  transform: translateY(-2px);
}

body.corrupted-theme .floating-panel-content,
body.corrupted-theme .modal-content {
  background-color: var(--bg-secondary);
  background-image: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  background-size: 100% 100%;
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 5px 10px 7px 12px / 12px 7px 10px 5px;
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.8),
    0 0 30px rgba(167, 139, 250, 0.1),
    inset 0 1px 0 rgba(167, 139, 250, 0.1);
}


/* Glow Effects */
body.corrupted-theme::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, var(--theme-glow-color-low) 0%, transparent 60%),
    radial-gradient(circle at 80% 20%, var(--theme-glow-color-low) 0%, transparent 40%);
  z-index: -1;
  animation: bg-pulse 15s ease-in-out infinite alternate;
  pointer-events: none;
}

body.corrupted-theme h1,
body.corrupted-theme h2,
body.corrupted-theme h3,
body.corrupted-theme h4,
body.corrupted-theme h5,
body.corrupted-theme h6 {
  animation: text-pulse-glow 3s infinite;
}

body.corrupted-theme .btn:hover,
body.corrupted-theme .btn:focus {
  animation: pulse-glow 3s infinite;
}

/* College Ruled Theme - Weathered Notebook */
body.college-ruled-theme {
  --theme-glow-color: #1a237e;
  --theme-glow-color-low: rgba(26, 35, 126, 0.1);
  --theme-glow-color-high: rgba(26, 35, 126, 0.3);

  --color-primary: #1a237e;
  /* Dark Blue Ink */
  --color-primary-dark: #000051;
  --color-primary-light: #534bae;
  --color-secondary: #b71c1c;
  /* Red Margin Line */
  --color-accent: #3e2723;
  /* Pencil Graphite */

  --color-gray-50: #faf9f6;
  --color-gray-100: #f5f4f0;
  --color-gray-200: #e0e0e0;
  --color-gray-300: #bdbdbd;
  --color-gray-400: #9e9e9e;
  --color-gray-500: #757575;
  --color-gray-600: #616161;
  --color-gray-700: #424242;
  --color-gray-800: #212121;
  --color-gray-900: #000000;

  --bg-primary: #e8e4d9;
  /* Darker/Aged paper */
  --bg-secondary: #dfdbce;
  --bg-tertiary: #d6d2c4;
  --text-primary: #212121;
  /* Pencil/Ink text */
  --text-secondary: #424242;
  --border-primary: #9fa8da;
  /* Light blue line */
  --border-secondary: #ef9a9a;
  /* Light red margin */

  --shadow-sm: 1px 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md: 2px 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-lg: 3px 3px 6px rgba(0, 0, 0, 0.15);
  --shadow-xl: 4px 4px 8px rgba(0, 0, 0, 0.2);

  --body-gradient-1: #e8e4d9;
  --body-gradient-2: #dfdbce;

  --font-primary: 'Indie Flower', cursive;

  /* Ruled Paper Pattern removed */
  background-color: var(--bg-primary);
}

body.college-ruled-theme .character-sheet {
  border: none;
  background: var(--bg-primary);
  position: relative;
  box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  /* Slight rotation for the sheet itself */
  transform: rotate(0.5deg);
  /* Ruled lines on the sheet itself too */
  background-image:
    linear-gradient(90deg, transparent 4rem, rgba(211, 47, 47, 0.3) 4rem, rgba(211, 47, 47, 0.3) 4.1rem, transparent 4.1rem),
    repeating-linear-gradient(0deg, transparent, transparent 1.4rem, rgba(63, 81, 181, 0.1) 1.4rem, rgba(63, 81, 181, 0.1) 1.5rem);
}

body.college-ruled-theme h2,
body.college-ruled-theme h3 {
  color: var(--color-primary);
  font-family: 'Indie Flower', cursive;
  font-weight: 700;
  letter-spacing: 1px;
  transform: rotate(-1deg);
  text-shadow: 0.5px 0.5px 0px rgba(0, 0, 0, 0.2);
}

/* Apply hand-drawn font to all elements */
body.college-ruled-theme,
body.college-ruled-theme input,
body.college-ruled-theme textarea,
body.college-ruled-theme select,
body.college-ruled-theme button,
body.college-ruled-theme .btn,
body.college-ruled-theme label,
body.college-ruled-theme .tab-button {
  font-family: 'Indie Flower', cursive;
  color: var(--text-primary);
  font-size: 1.2rem;
}

body.college-ruled-theme .stats-box,
body.college-ruled-theme .trait-item {
  border: 2px solid var(--color-gray-500);
  background: transparent;
  /* See lines through boxes */
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  /* Hand drawn circle look */
  padding: 10px;
  transform: rotate(-1deg);
  transition: transform 0.2s;
  box-shadow: none;
}

body.college-ruled-theme .trait-item:nth-child(2n) {
  transform: rotate(1deg);
  border-radius: 12px 255px 10px 225px/225px 10px 255px 15px;
}

body.college-ruled-theme .trait-item:nth-child(3n) {
  transform: rotate(-1.5deg);
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
}

body.college-ruled-theme .stats-box:hover,
body.college-ruled-theme .trait-item:hover {
  transform: rotate(0deg) scale(1.02);
  border-color: var(--color-primary);
  border-width: 3px;
}

/* Inputs mimic writing on the lines */
body.college-ruled-theme input,
body.college-ruled-theme textarea,
body.college-ruled-theme select {
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--color-gray-400);
  /* Underline only */
  border-radius: 0;
  font-size: 1.4rem;
  color: var(--color-primary);
  /* Ink color */
  font-weight: bold;
  padding-bottom: 0px;
}

/* Larger font for number inputs and special stat fields */
body.college-ruled-theme input[type="number"],
body.college-ruled-theme #trait-fear,
body.college-ruled-theme #trait-shiver-sight,
body.college-ruled-theme #infrasphere-current,
body.college-ruled-theme #infrasphere-max,
body.college-ruled-theme .number-spinner-wrapper input[type="number"],
body.college-ruled-theme .life-points-input input[type="number"] {
  font-size: 1.8rem;
}

body.college-ruled-theme input:focus,
body.college-ruled-theme textarea:focus,
body.college-ruled-theme select:focus {
  outline: none;
  border-bottom: 3px solid var(--color-primary);
  background: rgba(26, 35, 126, 0.05);
  /* Slight ink bleed background */
}

/* Buttons look like doodles or stickers */
body.college-ruled-theme .btn {
  border: 3px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  font-weight: bold;
  font-size: 1.2rem;
  transform: rotate(2deg);
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
}

body.college-ruled-theme .btn:hover {
  background: var(--color-primary);
  color: var(--bg-primary);
  transform: rotate(0deg);
  border-radius: 15px 225px 15px 255px/255px 15px 225px 15px;
}

body.college-ruled-theme .floating-panel-content,
body.college-ruled-theme .modal-content {
  border: 2px solid var(--color-gray-600);
  border-radius: 5px;
  background-color: var(--bg-secondary);
  /* Add paper texture */
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 1.4rem, rgba(63, 81, 181, 0.05) 1.4rem, rgba(63, 81, 181, 0.05) 1.5rem);
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);
}

/* Fix Roll Dice button contrast */
body.college-ruled-theme .roll-btn {
  color: var(--bg-primary);
  border: 2px solid var(--color-primary);
}

body.college-ruled-theme .view-sheet-btn {
  color: var(--bg-primary);
  border: 2px solid var(--color-primary);
}

/* College Ruled dock buttons */
body.college-ruled-theme .floating-action-btn {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
  transform: rotate(2deg);
}

body.college-ruled-theme .sheet-panel-content,
body.college-ruled-theme .sheet-panel-content * {
  font-size: 0.85rem;
}

body.college-ruled-theme .floating-action-btn:hover {
  background: var(--color-primary);
  color: var(--bg-primary);
  transform: rotate(0deg);
}

/* Keep them uniform in this theme since they are "doodles" */
body.college-ruled-theme #sheet-button,
body.college-ruled-theme #campaign-button,
body.college-ruled-theme #dice-roller-button,
body.college-ruled-theme #theme-button {
  background-color: transparent;
}

body.college-ruled-theme #sheet-button:hover,
body.college-ruled-theme #campaign-button:hover,
body.college-ruled-theme #dice-roller-button:hover,
body.college-ruled-theme #theme-button:hover,
body.college-ruled-theme #instructions-toggle-button:hover {
  background-color: var(--color-primary);
}

body.college-ruled-theme #instructions-toggle-button {
  background-color: transparent;
}

body.college-ruled-theme .theme-option-btn.college-ruled-theme-preview {
  background-color: #e8e4d9;
  color: #1a237e;
  font-family: 'Indie Flower', cursive;
  border: 1px solid #9fa8da;
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
}



/* Glow Effects */
body.college-ruled-theme::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, var(--theme-glow-color-low) 0%, transparent 60%),
    radial-gradient(circle at 80% 20%, var(--theme-glow-color-low) 0%, transparent 40%);
  z-index: -1;
  animation: bg-pulse 15s ease-in-out infinite alternate;
  pointer-events: none;
}

body.college-ruled-theme h1,
body.college-ruled-theme h2,
body.college-ruled-theme h3,
body.college-ruled-theme h4,
body.college-ruled-theme h5,
body.college-ruled-theme h6 {
  animation: text-pulse-glow 3s infinite;
}

body.college-ruled-theme .btn:hover,
body.college-ruled-theme .btn:focus {
  animation: pulse-glow 3s infinite;
}

/* College Ruled Inverted Theme - Dark Mode Notebook */
body.college-ruled-inverted-theme {
  --color-primary: #e0e0e0;
  /* White/Light Grey Ink */
  --color-primary-dark: #ffffff;
  --color-primary-light: #b0b0b0;
  --color-secondary: #ff5252;
  /* Bright Red Margin */
  --color-accent: #90a4ae;
  /* Light Graphite */

  --color-gray-50: #121212;
  --color-gray-100: #1e1e1e;
  --color-gray-200: #2c2c2c;
  --color-gray-300: #424242;
  --color-gray-400: #616161;
  --color-gray-500: #757575;
  --color-gray-600: #9e9e9e;
  --color-gray-700: #bdbdbd;
  --color-gray-800: #e0e0e0;
  --color-gray-900: #ffffff;

  --bg-primary: #121212;
  /* Dark Paper */
  --bg-secondary: #1e1e1e;
  --bg-tertiary: #2c2c2c;
  --text-primary: #e0e0e0;
  --text-secondary: #b0b0b0;
  --border-primary: #37474f;
  /* Dark Blue-Grey Line */
  --border-secondary: #b71c1c;
  /* Darker Red Margin */

  --shadow-sm: 1px 1px 2px rgba(255, 255, 255, 0.05);
  --shadow-md: 2px 2px 4px rgba(255, 255, 255, 0.05);
  --shadow-lg: 3px 3px 6px rgba(255, 255, 255, 0.1);
  --shadow-xl: 4px 4px 8px rgba(255, 255, 255, 0.1);

  --body-gradient-1: #121212;
  --body-gradient-2: #1e1e1e;

  --font-primary: 'Indie Flower', cursive;

  /* Ruled Paper Pattern - Inverted removed */
  background-color: var(--bg-primary);
}

body.college-ruled-inverted-theme select option {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

body.college-ruled-inverted-theme .character-sheet {
  border: none;
  background: var(--bg-primary);
  position: relative;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
  padding: 2rem;
  transform: rotate(0.5deg);
  background-image:
    linear-gradient(90deg, transparent 4rem, rgba(255, 82, 82, 0.3) 4rem, rgba(255, 82, 82, 0.3) 4.1rem, transparent 4.1rem),
    repeating-linear-gradient(0deg, transparent, transparent 1.4rem, rgba(144, 202, 249, 0.1) 1.4rem, rgba(144, 202, 249, 0.1) 1.5rem);
}

body.college-ruled-inverted-theme h2,
body.college-ruled-inverted-theme h3 {
  color: var(--color-primary);
  font-family: 'Indie Flower', cursive;
  font-weight: 700;
  letter-spacing: 1px;
  transform: rotate(-1deg);
  text-shadow: 0.5px 0.5px 0px rgba(0, 0, 0, 0.5);
}

body.college-ruled-inverted-theme,
body.college-ruled-inverted-theme input,
body.college-ruled-inverted-theme textarea,
body.college-ruled-inverted-theme select,
body.college-ruled-inverted-theme button,
body.college-ruled-inverted-theme .btn,
body.college-ruled-inverted-theme label,
body.college-ruled-inverted-theme .tab-button {
  font-family: 'Indie Flower', cursive;
  color: var(--text-primary);
  font-size: 1.2rem;
}

body.college-ruled-inverted-theme .stats-box,
body.college-ruled-inverted-theme .trait-item {
  border: 2px solid var(--color-gray-500);
  background: transparent;
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  padding: 10px;
  transform: rotate(-1deg);
  transition: transform 0.2s;
  box-shadow: none;
}

body.college-ruled-inverted-theme .trait-item:nth-child(2n) {
  transform: rotate(1deg);
  border-radius: 12px 255px 10px 225px/225px 10px 255px 15px;
}

body.college-ruled-inverted-theme .trait-item:nth-child(3n) {
  transform: rotate(-1.5deg);
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
}

body.college-ruled-inverted-theme .stats-box:hover,
body.college-ruled-inverted-theme .trait-item:hover {
  transform: rotate(0deg) scale(1.02);
  border-color: var(--color-primary);
  border-width: 3px;
  background: rgba(255, 255, 255, 0.05);
}

body.college-ruled-inverted-theme input,
body.college-ruled-inverted-theme textarea,
body.college-ruled-inverted-theme select {
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--color-gray-500);
  border-radius: 0;
  font-size: 1.4rem;
  color: var(--color-primary);
  font-weight: bold;
  padding-bottom: 0px;
}

/* Larger font for number inputs and special stat fields */
body.college-ruled-inverted-theme input[type="number"],
body.college-ruled-inverted-theme #trait-fear,
body.college-ruled-inverted-theme #trait-shiver-sight,
body.college-ruled-inverted-theme #infrasphere-current,
body.college-ruled-inverted-theme #infrasphere-max,
body.college-ruled-inverted-theme .number-spinner-wrapper input[type="number"],
body.college-ruled-inverted-theme .life-points-input input[type="number"] {
  font-size: 1.8rem;
}

body.college-ruled-inverted-theme input:focus,
body.college-ruled-inverted-theme textarea:focus,
body.college-ruled-inverted-theme select:focus {
  outline: none;
  border-bottom: 3px solid var(--color-primary);
  background: rgba(255, 255, 255, 0.05);
}

body.college-ruled-inverted-theme .btn {
  border: 3px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  font-weight: bold;
  font-size: 1.2rem;
  transform: rotate(2deg);
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
}

body.college-ruled-inverted-theme .sheet-panel-content,
body.college-ruled-inverted-theme .sheet-panel-content * {
  font-size: 0.85rem;
}

/* Fix Roll Dice and View Sheet button contrast for Inverted Theme */
body.college-ruled-inverted-theme .roll-btn,
body.college-ruled-inverted-theme .view-sheet-btn {
  color: var(--bg-primary);
  border: 2px solid var(--color-primary);
}

body.college-ruled-inverted-theme .btn:hover {
  background: var(--color-primary);
  color: var(--bg-primary);
  transform: rotate(0deg);
  border-radius: 15px 225px 15px 255px/255px 15px 225px 15px;
}

body.college-ruled-inverted-theme .floating-panel-content,
body.college-ruled-inverted-theme .modal-content {
  border: 2px solid var(--color-gray-500);
  border-radius: 5px;
  background-color: var(--bg-secondary);
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 1.4rem, rgba(144, 202, 249, 0.05) 1.4rem, rgba(144, 202, 249, 0.05) 1.5rem);
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
}

/* College Ruled Inverted dock buttons */
body.college-ruled-inverted-theme .floating-action-btn {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  box-shadow: 2px 2px 0 rgba(255, 255, 255, 0.1);
  transform: rotate(2deg);
}

body.college-ruled-inverted-theme .floating-action-btn:hover {
  background: var(--color-primary);
  color: var(--bg-primary);
  transform: rotate(0deg);
}

body.college-ruled-inverted-theme #sheet-button,
body.college-ruled-inverted-theme #campaign-button,
body.college-ruled-inverted-theme #dice-roller-button,
body.college-ruled-inverted-theme #theme-button {
  background-color: transparent;
}

body.college-ruled-inverted-theme #sheet-button:hover,
body.college-ruled-inverted-theme #campaign-button:hover,
body.college-ruled-inverted-theme #dice-roller-button:hover,
body.college-ruled-inverted-theme #theme-button:hover,
body.college-ruled-inverted-theme #instructions-toggle-button:hover {
  background-color: var(--color-primary);
}

body.college-ruled-inverted-theme #instructions-toggle-button {
  background-color: transparent;
}

body.college-ruled-inverted-theme .theme-option-btn.college-ruled-inverted-theme-preview {
  background-color: #121212;
  color: #e0e0e0;
  font-family: 'Indie Flower', cursive;
  border: 1px solid #757575;
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
}


/* Glow Effects - Subtle for Paper */
body.college-ruled-inverted-theme::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, var(--theme-glow-color-low) 0%, transparent 60%),
    radial-gradient(circle at 80% 20%, var(--theme-glow-color-low) 0%, transparent 40%);
  z-index: -1;
  animation: bg-pulse 15s ease-in-out infinite alternate;
  pointer-events: none;
}

body.college-ruled-inverted-theme h1,
body.college-ruled-inverted-theme h2,
body.college-ruled-inverted-theme h3,
body.college-ruled-inverted-theme h4,
body.college-ruled-inverted-theme h5,
body.college-ruled-inverted-theme h6 {
  animation: text-pulse-glow 3s infinite;
}

body.college-ruled-inverted-theme .btn:hover,
body.college-ruled-inverted-theme .btn:focus {
  animation: pulse-glow 3s infinite;
}

/* Princess Theme - Magical Girl Starlight */
body.princess-theme {
  --theme-glow-color: #FF69B4;
  --theme-glow-color-low: rgba(255, 105, 180, 0.2);
  --theme-glow-color-high: rgba(255, 105, 180, 0.5);

  --color-primary: #FF69B4;
  /* Hot Pink */
  --color-primary-dark: #FF1493;
  /* Deep Pink */
  --color-primary-light: #FFB6C1;
  /* Light Pink */
  --color-secondary: #FFD700;
  /* Gold */
  --color-accent: #87CEEB;
  /* Sky Blue */

  --color-gray-50: #0f0a1e;
  /* Deepest Purple */
  --color-gray-100: #1a0b2e;
  --color-gray-200: #2d1b4e;
  --color-gray-300: #432c7a;
  --color-gray-400: #6a4c9c;
  --color-gray-500: #9d72c3;
  --color-gray-600: #d4b3e2;
  --color-gray-700: #e6e6fa;
  --color-gray-800: #f8f0fc;
  --color-gray-900: #ffffff;

  --bg-primary: #0f0a1e;
  /* Deepest Purple */
  --bg-secondary: #1a0b2e;
  /* Deep Purple */
  --bg-tertiary: #2d1b4e;
  /* Lighter Purple */

  --text-primary: #f8f0fc;
  /* Almost White */
  --text-secondary: #d4b3e2;
  /* Light Lavender */

  --border-primary: #FF69B4;
  --border-secondary: #FFD700;

  --shadow-sm: 0 0 8px rgba(255, 105, 180, 0.4), 0 0 4px rgba(255, 215, 0, 0.2);
  --shadow-md: 0 0 15px rgba(255, 105, 180, 0.5), 0 0 8px rgba(255, 215, 0, 0.3);
  --shadow-lg: 0 0 25px rgba(255, 105, 180, 0.6), 0 0 12px rgba(255, 215, 0, 0.4);
  --shadow-xl: 0 0 40px rgba(255, 105, 180, 0.7), 0 0 20px rgba(255, 215, 0, 0.5);

  --body-gradient-1: #090415;
  --body-gradient-2: #1a0b2e;

  --font-primary: 'Cinzel', 'Georgia', serif;

  /* Base gradient */
  background-image: linear-gradient(135deg, var(--body-gradient-1) 0%, var(--body-gradient-2) 100%);
}

body.princess-theme .character-sheet {
  border: none;
  position: relative;
  border-radius: 24px;
  box-shadow: 0 0 20px rgba(255, 105, 180, 0.3);
  background: rgba(26, 11, 46, 0.95);
  /* BACKDROP FILTER REMOVED FOR PERFORMANCE */
  padding: 2rem;
}

/* Ornate gold double border with heart corners */
body.princess-theme .character-sheet::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 3px solid rgba(255, 215, 0, 0.6);
  border-radius: 24px;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 2px rgba(255, 105, 180, 0.4),
    inset 0 0 30px rgba(255, 105, 180, 0.1),
    0 0 20px rgba(255, 215, 0, 0.2);
}

/* Princess dock buttons */
body.princess-theme .floating-action-btn {
  border: 2px solid var(--color-secondary);
  box-shadow: 0 0 15px rgba(255, 105, 180, 0.5);
}

/* Uniform "Sky Blue" look for all buttons in Princess */
body.princess-theme #sheet-button,
body.princess-theme #campaign-button,
body.princess-theme #dice-roller-button,
body.princess-theme #theme-button,
body.princess-theme #instructions-toggle-button {
  background: var(--color-accent);
  /* Sky Blue */
  color: var(--bg-primary);
  /* Dark icon on light blue */
}

/* Sparkle accent in corner */
body.princess-theme .character-sheet::after {
  content: '';
  position: absolute;
  top: -5px;
  right: -5px;
  width: 30px;
  height: 30px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.9) 0%, rgba(255, 215, 0, 0.4) 30%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  box-shadow:
    0 0 15px rgba(255, 215, 0, 0.8),
    0 0 30px rgba(255, 215, 0, 0.4);
}

body.princess-theme .stats-box,
body.princess-theme .trait-item {
  border: 2px solid rgba(255, 105, 180, 0.4);
  /* Very rounded, soft edges */
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(45, 27, 78, 0.9), rgba(26, 11, 46, 0.85));
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.4),
    0 0 15px rgba(255, 105, 180, 0.15),
    inset 0 1px 0 rgba(255, 215, 0, 0.1);
  transition: all 0.3s ease;
}

body.princess-theme .stats-box:hover,
body.princess-theme .trait-item:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 215, 0, 0.6);
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(255, 105, 180, 0.25),
    0 0 20px rgba(255, 215, 0, 0.2),
    inset 0 1px 0 rgba(255, 215, 0, 0.2);
}

body.princess-theme h2,
body.princess-theme h3 {
  color: var(--color-primary-light);
  text-shadow:
    0 0 15px rgba(255, 105, 180, 0.7),
    0 0 30px rgba(255, 105, 180, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.5);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.princess-theme label {
  color: var(--color-secondary);
  font-weight: 600;
  text-shadow:
    0 0 10px rgba(255, 215, 0, 0.5),
    0 0 20px rgba(255, 215, 0, 0.25);
  letter-spacing: 0.03em;
}

body.princess-theme input,
body.princess-theme textarea,
body.princess-theme select {
  border: 2px solid rgba(255, 105, 180, 0.3);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(15, 10, 30, 0.9) 0%, rgba(26, 11, 46, 0.7) 100%);
  color: var(--text-primary);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

body.princess-theme input:focus,
body.princess-theme textarea:focus,
body.princess-theme select:focus {
  border-color: rgba(255, 215, 0, 0.6);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(255, 215, 0, 0.4),
    0 0 10px rgba(255, 105, 180, 0.3);
  outline: none;
}

body.princess-theme .btn {
  border-radius: 25px;
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  color: white;
  border: 2px solid rgba(255, 215, 0, 0.5);
  font-weight: 700;
  letter-spacing: 0.05em;
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(255, 105, 180, 0.4);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

body.princess-theme .btn:hover {
  transform: translateY(-3px) scale(1.02);
  background: linear-gradient(135deg, var(--color-primary) 0%, rgba(255, 215, 0, 0.8) 100%);
  border-color: rgba(255, 215, 0, 0.8);
  box-shadow:
    0 6px 25px rgba(0, 0, 0, 0.5),
    0 0 35px rgba(255, 215, 0, 0.5),
    0 0 20px rgba(255, 105, 180, 0.4);
}

body.princess-theme .floating-panel-content,
body.princess-theme .modal-content {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  border: 2px solid rgba(255, 215, 0, 0.4);
  border-radius: 20px;
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.5),
    0 0 10px rgba(255, 105, 180, 0.2);
  /* BACKDROP FILTER REMOVED FOR PERFORMANCE */
}

/* Apply font to all elements */
body.princess-theme,
body.princess-theme input,
body.princess-theme textarea,
body.princess-theme select,
body.princess-theme button,
body.princess-theme .btn,
body.princess-theme label,
body.princess-theme .tab-button {
  font-family: var(--font-primary);
}


/* Glow Effects */
body.princess-theme::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, var(--theme-glow-color-low) 0%, transparent 60%),
    radial-gradient(circle at 80% 20%, var(--theme-glow-color-low) 0%, transparent 40%);
  z-index: -1;
  animation: bg-pulse 15s ease-in-out infinite alternate;
  pointer-events: none;
}

body.princess-theme h1,
body.princess-theme h2,
body.princess-theme h3,
body.princess-theme h4,
body.princess-theme h5,
body.princess-theme h6 {
  animation: text-pulse-glow 3s infinite;
}

body.princess-theme .btn:hover,
body.princess-theme .btn:focus {
  animation: pulse-glow 3s infinite;
}

/* Raygun Theme - NASA-Punk / Starfield Aesthetic */
body.raygun-gothic-theme {
  /* Industrial Spacecraft Interior */
  --theme-glow-color: #FF6B00;
  --theme-glow-color-low: rgba(255, 107, 0, 0.15);
  --theme-glow-color-high: rgba(255, 107, 0, 0.4);

  --color-primary: #FF6B00;
  /* Safety Orange */
  --color-primary-dark: #CC5500;
  --color-primary-light: #FF8533;
  --color-secondary: #E0DDD8;
  /* Instrument Panel White */
  --color-accent: #FFAA44;
  /* Caution Amber */

  --color-gray-50: #0E0D0C;
  /* Void Black */
  --color-gray-100: #161514;
  --color-gray-200: #1E1D1C;
  --color-gray-300: #2A2928;
  --color-gray-400: #3D3C3A;
  --color-gray-500: #5C5A58;
  --color-gray-600: #7A7876;
  --color-gray-700: #9C9A97;
  --color-gray-800: #C4C2BF;
  --color-gray-900: #E0DDD8;

  --bg-primary: #0E0D0C;
  --bg-secondary: #161514;
  --bg-tertiary: #1E1D1C;
  --text-primary: #E0DDD8;
  --text-secondary: #FF6B00;
  --border-primary: #FF6B00;
  --border-secondary: #2A2928;

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.8);
  --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.9);

  --body-gradient-1: #0E0D0C;
  --body-gradient-2: #161514;

  --font-primary: 'Helvetica Neue', 'Arial', sans-serif;

  /* Industrial spacecraft hull plating */
  background-color: #0A0908;
  background-image:
    /* Hull panel grid - like bulkhead sections */
    repeating-linear-gradient(0deg,
      transparent,
      transparent 100px,
      rgba(255, 107, 0, 0.04) 100px,
      rgba(255, 107, 0, 0.04) 102px),
    repeating-linear-gradient(90deg,
      transparent,
      transparent 100px,
      rgba(255, 107, 0, 0.04) 100px,
      rgba(255, 107, 0, 0.04) 102px),
    /* Hazard stripe corner accents */
    repeating-linear-gradient(-45deg,
      transparent,
      transparent 10px,
      rgba(255, 107, 0, 0.03) 10px,
      rgba(255, 107, 0, 0.03) 20px),
    /* Industrial base */
    linear-gradient(180deg, #0E0D0C 0%, #0A0908 100%);
}

body.raygun-gothic-theme .character-sheet {
  border: none;
  position: relative;
  background-color: #161514;
  /* Heavy industrial panel */
  box-shadow:
    /* Chunky physical depth */
    0 8px 0 0 #0A0908,
    0 12px 40px rgba(0, 0, 0, 0.8),
    /* Inner panel depth */
    inset 0 2px 0 rgba(255, 255, 255, 0.03);
  /* Less rounded - industrial feel */
  border-radius: 8px;
  padding: 2rem;
  /* Metal panel texture */
  background-image:
    /* Subtle brushed metal effect */
    repeating-linear-gradient(90deg,
      transparent,
      transparent 2px,
      rgba(255, 255, 255, 0.005) 2px,
      rgba(255, 255, 255, 0.005) 4px),
    /* Panel gradient */
    linear-gradient(180deg, #1E1D1C 0%, #161514 50%, #121110 100%);
}

/* Heavy riveted border frame */
body.raygun-gothic-theme .character-sheet::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Thick industrial border */
  border: 6px solid #2A2928;
  border-top-color: #3D3C3A;
  border-left-color: #3D3C3A;
  border-radius: 8px;
  pointer-events: none;
  /* Orange accent line */
  box-shadow:
    inset 0 0 0 2px #0E0D0C,
    inset 0 0 0 4px rgba(255, 107, 0, 0.6);
}

/* NASA-Punk Industrial Pushbuttons */
body.raygun-gothic-theme .floating-action-btn {
  /* Square industrial buttons */
  border: 3px solid #3D3C3A;
  border-top-color: #4A4847;
  border-left-color: #4A4847;
  border-radius: 4px;
  /* Heavy machined metal look */
  background: linear-gradient(180deg,
      #3D3C3A 0%,
      #2A2928 50%,
      #1E1D1C 100%);
  box-shadow:
    /* Thick industrial base */
    0 6px 0 0 #0E0D0C,
    0 8px 16px rgba(0, 0, 0, 0.7),
    /* Machined edge highlight */
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: all 0.06s ease;
  position: relative;
}

body.raygun-gothic-theme .floating-action-btn:hover {
  background: linear-gradient(180deg,
      #4A4847 0%,
      #3D3C3A 50%,
      #2A2928 100%);
  border-color: #FF6B00;
  box-shadow:
    0 6px 0 0 #0E0D0C,
    0 8px 16px rgba(0, 0, 0, 0.8),
    /* Orange indicator glow */
    0 0 15px rgba(255, 107, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body.raygun-gothic-theme .floating-action-btn:active {
  transform: translateY(5px);
  background: linear-gradient(180deg,
      #1E1D1C 0%,
      #2A2928 50%,
      #3D3C3A 100%);
  box-shadow:
    0 1px 0 0 #0E0D0C,
    0 2px 6px rgba(0, 0, 0, 0.5),
    inset 0 3px 6px rgba(0, 0, 0, 0.4);
}

body.raygun-gothic-theme #sheet-button,
body.raygun-gothic-theme #campaign-button,
body.raygun-gothic-theme #dice-roller-button,
body.raygun-gothic-theme #theme-button,
body.raygun-gothic-theme #instructions-toggle-button {
  background: linear-gradient(180deg,
      #3D3C3A 0%,
      #2A2928 50%,
      #1E1D1C 100%);
  color: var(--color-primary);
}

/* Hazard stripe accent bar */
body.raygun-gothic-theme .character-sheet::after {
  content: '';
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  height: 4px;
  background: repeating-linear-gradient(90deg,
      #FF6B00 0px,
      #FF6B00 20px,
      #1E1D1C 20px,
      #1E1D1C 40px);
  border-radius: 2px;
  pointer-events: none;
}

/* Stats boxes as industrial gauge housings */
body.raygun-gothic-theme .stats-box,
body.raygun-gothic-theme .trait-item {
  /* Heavy recessed panel */
  border: 4px solid #2A2928;
  border-bottom-color: #3D3C3A;
  border-right-color: #3D3C3A;
  background: linear-gradient(180deg, #0E0D0C 0%, #161514 100%);
  /* Squared industrial corners */
  border-radius: 4px;
  box-shadow:
    /* Deeply recessed */
    inset 0 4px 12px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(0, 0, 0, 0.8),
    /* Outer mounting bevel */
    0 2px 0 #3D3C3A;
  transition: all 0.15s ease;
  position: relative;
}

body.raygun-gothic-theme .stats-box:hover,
body.raygun-gothic-theme .trait-item:hover {
  border-color: #FF6B00;
  box-shadow:
    inset 0 4px 12px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(0, 0, 0, 0.6),
    0 2px 0 #FF6B00,
    /* Active indicator glow */
    0 0 20px rgba(255, 107, 0, 0.25);
}

body.raygun-gothic-theme h2,
body.raygun-gothic-theme h3 {
  color: #FF6B00;
  /* Industrial stencil look */
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

body.raygun-gothic-theme label {
  color: #9C9A97;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.8em;
  font-weight: 600;
}

body.raygun-gothic-theme input,
body.raygun-gothic-theme textarea,
body.raygun-gothic-theme select {
  /* Industrial data terminal */
  background: #0A0908;
  border: 3px solid #2A2928;
  border-bottom-color: #3D3C3A;
  border-right-color: #3D3C3A;
  color: #E0DDD8;
  border-radius: 2px;
  box-shadow:
    inset 0 4px 8px rgba(0, 0, 0, 0.7),
    inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}

body.raygun-gothic-theme input:focus,
body.raygun-gothic-theme textarea:focus,
body.raygun-gothic-theme select:focus {
  border-color: #FF6B00;
  background: #0E0D0C;
  box-shadow:
    inset 0 4px 8px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(255, 107, 0, 0.3),
    /* Terminal active glow */
    0 0 15px rgba(255, 107, 0, 0.2);
  outline: none;
}

body.raygun-gothic-theme .btn {
  /* Heavy industrial action button */
  background: linear-gradient(180deg,
      #FF8533 0%,
      #FF6B00 40%,
      #CC5500 100%);
  border: 3px solid #FF8533;
  border-bottom-color: #993D00;
  border-right-color: #993D00;
  color: #0E0D0C;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 4px;
  box-shadow:
    /* Heavy industrial base */
    0 6px 0 0 #662900,
    0 8px 16px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-shadow: none;
  transition: all 0.06s ease;
}

body.raygun-gothic-theme .btn:hover {
  background: linear-gradient(180deg,
      #FFA066 0%,
      #FF8533 40%,
      #FF6B00 100%);
  box-shadow:
    0 6px 0 0 #662900,
    0 8px 20px rgba(0, 0, 0, 0.7),
    0 0 25px rgba(255, 107, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

body.raygun-gothic-theme .btn:active {
  transform: translateY(5px);
  background: linear-gradient(180deg,
      #CC5500 0%,
      #FF6B00 60%,
      #FF8533 100%);
  box-shadow:
    0 1px 0 0 #662900,
    0 2px 6px rgba(0, 0, 0, 0.5),
    inset 0 3px 6px rgba(0, 0, 0, 0.3);
}

body.raygun-gothic-theme .floating-panel-content,
body.raygun-gothic-theme .modal-content {
  /* Industrial control panel popup */
  background-color: #161514;
  background-image:
    /* Brushed metal texture */
    repeating-linear-gradient(90deg,
      transparent,
      transparent 2px,
      rgba(255, 255, 255, 0.003) 2px,
      rgba(255, 255, 255, 0.003) 4px),
    linear-gradient(180deg, #1E1D1C 0%, #161514 50%, #0E0D0C 100%);
  /* Heavy riveted frame */
  border: 6px solid #2A2928;
  border-top-color: #3D3C3A;
  border-left-color: #3D3C3A;
  border-radius: 6px;
  box-shadow:
    /* Chunky depth */
    0 8px 0 0 #0A0908,
    0 12px 40px rgba(0, 0, 0, 0.9),
    /* Orange accent inset */
    inset 0 0 0 2px #0E0D0C,
    inset 0 0 0 4px rgba(255, 107, 0, 0.5);
}



body.raygun-gothic-theme #armor,
body.raygun-light-theme #armor {
  opacity: 1;
  visibility: visible;
  display: block;
  background-color: rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
}

/* Apply font - industrial sans-serif */
body.raygun-gothic-theme,
body.raygun-gothic-theme input,
body.raygun-gothic-theme textarea,
body.raygun-gothic-theme select,
body.raygun-gothic-theme button,
body.raygun-gothic-theme .btn,
body.raygun-gothic-theme label,
body.raygun-gothic-theme .tab-button {
  font-family: 'Helvetica Neue', 'Arial', 'Roboto', sans-serif;
}

/* No digital glow effects - clean analog aesthetic */
body.raygun-gothic-theme::before {
  display: none;
}

body.raygun-gothic-theme h1,
body.raygun-gothic-theme h2,
body.raygun-gothic-theme h3,
body.raygun-gothic-theme h4,
body.raygun-gothic-theme h5,
body.raygun-gothic-theme h6 {
  animation: none;
}

body.raygun-gothic-theme .btn:hover,
body.raygun-gothic-theme .btn:focus {
  animation: none;
}

/* Raygun Light Theme - NASA-Punk / Starfield Light Mode */
body.raygun-light-theme {
  /* Clean Industrial Spacecraft */
  --theme-glow-color: #FF6B00;
  --theme-glow-color-low: rgba(255, 107, 0, 0.1);
  --theme-glow-color-high: rgba(255, 107, 0, 0.3);

  --color-primary: #FF6B00;
  /* Safety Orange */
  --color-primary-dark: #CC5500;
  --color-primary-light: #FF8533;
  --color-secondary: #1E1D1C;
  /* Industrial charcoal */
  --color-accent: #FFAA44;
  /* Caution Amber */

  --color-gray-50: #F5F4F2;
  /* Clean white */
  --color-gray-100: #ECEAE8;
  --color-gray-200: #DEDCDA;
  --color-gray-300: #CFCDCB;
  --color-gray-400: #A8A6A4;
  --color-gray-500: #7A7876;
  --color-gray-600: #5C5A58;
  --color-gray-700: #3D3C3A;
  --color-gray-800: #2A2928;
  --color-gray-900: #1E1D1C;

  --bg-primary: #F5F4F2;
  --bg-secondary: #ECEAE8;
  --bg-tertiary: #DEDCDA;
  --text-primary: #1E1D1C;
  --text-secondary: #CC5500;
  --border-primary: #FF6B00;
  --border-secondary: #CFCDCB;

  --shadow-sm: 0 2px 4px rgba(30, 29, 28, 0.1);
  --shadow-md: 0 4px 12px rgba(30, 29, 28, 0.15);
  --shadow-lg: 0 8px 24px rgba(30, 29, 28, 0.2);
  --shadow-xl: 0 16px 40px rgba(30, 29, 28, 0.25);

  --body-gradient-1: #F5F4F2;
  --body-gradient-2: #ECEAE8;

  --font-primary: 'Helvetica Neue', 'Arial', 'Roboto', sans-serif;

  /* Clean industrial hull interior */
  background-color: #F0EFED;
  background-image:
    /* Hull panel grid */
    repeating-linear-gradient(0deg,
      transparent,
      transparent 100px,
      rgba(0, 0, 0, 0.03) 100px,
      rgba(0, 0, 0, 0.03) 102px),
    repeating-linear-gradient(90deg,
      transparent,
      transparent 100px,
      rgba(0, 0, 0, 0.03) 100px,
      rgba(0, 0, 0, 0.03) 102px),
    /* Hazard stripe corner accents */
    repeating-linear-gradient(-45deg,
      transparent,
      transparent 10px,
      rgba(255, 107, 0, 0.04) 10px,
      rgba(255, 107, 0, 0.04) 20px),
    /* Base */
    linear-gradient(180deg, #F5F4F2 0%, #ECEAE8 100%);
}

body.raygun-light-theme .character-sheet {
  border: none;
  position: relative;
  background-color: #ECEAE8;
  /* Heavy industrial panel */
  box-shadow:
    /* Chunky physical depth */
    0 8px 0 0 #CFCDCB,
    0 12px 40px rgba(30, 29, 28, 0.2),
    /* Inner panel depth */
    inset 0 2px 0 rgba(255, 255, 255, 0.5);
  /* Less rounded - industrial feel */
  border-radius: 8px;
  padding: 2rem;
  /* Metal panel texture */
  background-image:
    /* Subtle brushed metal */
    repeating-linear-gradient(90deg,
      transparent,
      transparent 2px,
      rgba(255, 255, 255, 0.3) 2px,
      rgba(255, 255, 255, 0.3) 4px),
    linear-gradient(180deg, #F5F4F2 0%, #ECEAE8 50%, #DEDCDA 100%);
}

/* Heavy riveted border frame */
body.raygun-light-theme .character-sheet::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Thick industrial border */
  border: 6px solid #CFCDCB;
  border-top-color: #DEDCDA;
  border-left-color: #DEDCDA;
  border-radius: 8px;
  pointer-events: none;
  /* Orange accent line */
  box-shadow:
    inset 0 0 0 2px #F5F4F2,
    inset 0 0 0 4px #FF6B00;
}

/* NASA-Punk Industrial Pushbuttons - Light */
body.raygun-light-theme .floating-action-btn {
  /* Square industrial buttons */
  border: 3px solid #CFCDCB;
  border-top-color: #DEDCDA;
  border-left-color: #DEDCDA;
  border-radius: 4px;
  /* Heavy machined metal look */
  background: linear-gradient(180deg,
      #F5F4F2 0%,
      #ECEAE8 50%,
      #DEDCDA 100%);
  box-shadow:
    /* Thick industrial base */
    0 6px 0 0 #A8A6A4,
    0 8px 16px rgba(30, 29, 28, 0.15),
    /* Machined edge highlight */
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.06s ease;
  position: relative;
}

body.raygun-light-theme .floating-action-btn:hover {
  background: linear-gradient(180deg,
      #FFFFFF 0%,
      #F5F4F2 50%,
      #ECEAE8 100%);
  border-color: #FF6B00;
  box-shadow:
    0 6px 0 0 #A8A6A4,
    0 8px 16px rgba(30, 29, 28, 0.2),
    /* Orange indicator glow */
    0 0 15px rgba(255, 107, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body.raygun-light-theme .floating-action-btn:active {
  transform: translateY(5px);
  background: linear-gradient(180deg,
      #DEDCDA 0%,
      #ECEAE8 50%,
      #F5F4F2 100%);
  box-shadow:
    0 1px 0 0 #A8A6A4,
    0 2px 6px rgba(30, 29, 28, 0.1),
    inset 0 3px 6px rgba(0, 0, 0, 0.1);
}

body.raygun-light-theme #sheet-button,
body.raygun-light-theme #campaign-button,
body.raygun-light-theme #dice-roller-button,
body.raygun-light-theme #theme-button,
body.raygun-light-theme #instructions-toggle-button {
  background: linear-gradient(180deg,
      #3D3C3A 0%,
      #2A2928 50%,
      #1E1D1C 100%);
  color: #E0DDD8;
  box-shadow:
    0 6px 0 0 #0E0D0C,
    0 8px 16px rgba(30, 29, 28, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Hazard stripe accent bar */
body.raygun-light-theme .character-sheet::after {
  content: '';
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  height: 4px;
  background: repeating-linear-gradient(90deg,
      #FF6B00 0px,
      #FF6B00 20px,
      #ECEAE8 20px,
      #ECEAE8 40px);
  border-radius: 2px;
  pointer-events: none;
}

/* Stats boxes as industrial gauge housings */
body.raygun-light-theme .stats-box,
body.raygun-light-theme .trait-item {
  /* Heavy recessed panel */
  border: 4px solid #CFCDCB;
  border-bottom-color: #DEDCDA;
  border-right-color: #DEDCDA;
  background: linear-gradient(180deg, #F5F4F2 0%, #ECEAE8 100%);
  /* Squared industrial corners */
  border-radius: 4px;
  box-shadow:
    /* Recessed */
    inset 0 4px 12px rgba(30, 29, 28, 0.08),
    inset 0 1px 0 rgba(0, 0, 0, 0.05),
    /* Outer mounting bevel */
    0 2px 0 #DEDCDA;
  transition: all 0.15s ease;
  position: relative;
}

body.raygun-light-theme .stats-box:hover,
body.raygun-light-theme .trait-item:hover {
  border-color: #FF6B00;
  box-shadow:
    inset 0 4px 12px rgba(30, 29, 28, 0.06),
    inset 0 1px 0 rgba(0, 0, 0, 0.03),
    0 2px 0 #FF6B00,
    /* Active indicator glow */
    0 0 20px rgba(255, 107, 0, 0.15);
}

body.raygun-light-theme h2,
body.raygun-light-theme h3 {
  color: #CC5500;
  /* Industrial stencil look */
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

body.raygun-light-theme label {
  color: #5C5A58;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.8em;
  font-weight: 600;
}

body.raygun-light-theme input,
body.raygun-light-theme textarea,
body.raygun-light-theme select {
  /* Industrial data terminal */
  background: #F5F4F2;
  border: 3px solid #CFCDCB;
  border-bottom-color: #DEDCDA;
  border-right-color: #DEDCDA;
  color: #1E1D1C;
  border-radius: 2px;
  box-shadow:
    inset 0 4px 8px rgba(30, 29, 28, 0.08),
    inset 0 0 0 1px rgba(0, 0, 0, 0.03);
}

body.raygun-light-theme input:focus,
body.raygun-light-theme textarea:focus,
body.raygun-light-theme select:focus {
  border-color: #FF6B00;
  background: #FFFFFF;
  box-shadow:
    inset 0 4px 8px rgba(30, 29, 28, 0.05),
    inset 0 0 0 1px rgba(255, 107, 0, 0.2),
    /* Terminal active glow */
    0 0 12px rgba(255, 107, 0, 0.15);
  outline: none;
}

body.raygun-light-theme .btn {
  /* Heavy industrial action button */
  background: linear-gradient(180deg,
      #FF8533 0%,
      #FF6B00 40%,
      #CC5500 100%);
  border: 3px solid #FF8533;
  border-bottom-color: #993D00;
  border-right-color: #993D00;
  color: #0E0D0C;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 4px;
  box-shadow:
    /* Heavy industrial base */
    0 6px 0 0 #662900,
    0 8px 16px rgba(30, 29, 28, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-shadow: none;
  transition: all 0.06s ease;
}

body.raygun-light-theme .btn:hover {
  background: linear-gradient(180deg,
      #FFA066 0%,
      #FF8533 40%,
      #FF6B00 100%);
  box-shadow:
    0 6px 0 0 #662900,
    0 8px 20px rgba(30, 29, 28, 0.25),
    0 0 20px rgba(255, 107, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

body.raygun-light-theme .btn:active {
  transform: translateY(5px);
  background: linear-gradient(180deg,
      #CC5500 0%,
      #FF6B00 60%,
      #FF8533 100%);
  box-shadow:
    0 1px 0 0 #662900,
    0 2px 6px rgba(30, 29, 28, 0.15),
    inset 0 3px 6px rgba(0, 0, 0, 0.2);
}

body.raygun-light-theme .floating-panel-content,
body.raygun-light-theme .modal-content {
  /* Industrial control panel popup */
  background-color: #ECEAE8;
  background-image:
    /* Brushed metal texture */
    repeating-linear-gradient(90deg,
      transparent,
      transparent 2px,
      rgba(255, 255, 255, 0.3) 2px,
      rgba(255, 255, 255, 0.3) 4px),
    linear-gradient(180deg, #F5F4F2 0%, #ECEAE8 50%, #DEDCDA 100%);
  /* Heavy riveted frame */
  border: 6px solid #CFCDCB;
  border-top-color: #DEDCDA;
  border-left-color: #DEDCDA;
  border-radius: 6px;
  box-shadow:
    /* Chunky depth */
    0 8px 0 0 #A8A6A4,
    0 12px 40px rgba(30, 29, 28, 0.25),
    /* Orange accent inset */
    inset 0 0 0 2px #F5F4F2,
    inset 0 0 0 4px #FF6B00;
}

/* Apply font - industrial sans-serif */
body.raygun-light-theme,
body.raygun-light-theme input,
body.raygun-light-theme textarea,
body.raygun-light-theme select,
body.raygun-light-theme button,
body.raygun-light-theme .btn,
body.raygun-light-theme label,
body.raygun-light-theme .tab-button {
  font-family: 'Helvetica Neue', 'Arial', 'Roboto', sans-serif;
}

/* No digital glow effects - clean analog aesthetic */
body.raygun-light-theme::before {
  display: none;
}

body.raygun-light-theme h1,
body.raygun-light-theme h2,
body.raygun-light-theme h3,
body.raygun-light-theme h4,
body.raygun-light-theme h5,
body.raygun-light-theme h6 {
  animation: none;
}

body.raygun-light-theme .btn:hover,
body.raygun-light-theme .btn:focus {
  animation: none;
}

/* Espionage Theme - SCP Foundation Inspired */
body.espionage-theme {
  --theme-glow-color: #8B0000;
  --theme-glow-color-low: rgba(139, 0, 0, 0.2);
  --theme-glow-color-high: rgba(139, 0, 0, 0.5);

  --color-primary: #8B0000;
  --color-primary-dark: #5C0000;
  --color-primary-light: #B22222;
  --color-secondary: #1A1A1A;
  --color-accent: #B22222;

  --color-gray-50: #0A0A0A;
  --color-gray-100: #141414;
  --color-gray-200: #1F1F1F;
  --color-gray-300: #2A2A2A;
  --color-gray-400: #4A4A4A;
  --color-gray-500: #6B6B6B;
  --color-gray-600: #9A9A9A;
  --color-gray-700: #BABABA;
  --color-gray-800: #DADADA;
  --color-gray-900: #F0F0F0;

  --bg-primary: #0A0A0A;
  --bg-secondary: #141414;
  --bg-tertiary: #1F1F1F;
  --text-primary: #E0E0E0;
  --text-secondary: #8B8B8B;
  --border-primary: #8B0000;
  --border-secondary: #2A2A2A;

  --shadow-sm: 0 1px 3px 0 rgba(139, 0, 0, 0.3);
  --shadow-md: 0 3px 10px -2px rgba(139, 0, 0, 0.4);
  --shadow-lg: 0 6px 20px -4px rgba(139, 0, 0, 0.5);
  --shadow-xl: 0 12px 32px -8px rgba(139, 0, 0, 0.6);

  --body-gradient-1: #050505;
  --body-gradient-2: #0A0A0A;

  --font-primary: 'Courier New', 'Courier', monospace;

  background-image:
    /* Classified document vignette */
    radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(0, 0, 0, 0.9) 80%),
    /* Redacted bar hints */
    repeating-linear-gradient(0deg,
      transparent 0px,
      transparent 40px,
      rgba(139, 0, 0, 0.02) 40px,
      rgba(139, 0, 0, 0.02) 42px),
    /* Base */
    linear-gradient(180deg, var(--body-gradient-1) 0%, var(--body-gradient-2) 100%);
}

body.espionage-theme .character-sheet {
  border: none;
  position: relative;
  background-color: var(--bg-secondary);
  box-shadow:
    0 0 30px rgba(139, 0, 0, 0.2),
    inset 0 0 40px rgba(0, 0, 0, 0.6);
  background-image:
    /* Classified stamp effect */
    repeating-linear-gradient(0deg,
      transparent 0px,
      transparent 20px,
      rgba(139, 0, 0, 0.01) 20px,
      rgba(139, 0, 0, 0.01) 21px);
  padding: 2rem;
}

body.espionage-theme .character-sheet::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid rgba(139, 0, 0, 0.5);
  pointer-events: none;
  box-shadow: inset 0 0 20px rgba(139, 0, 0, 0.1);
}

/* Espionage dock buttons */
body.espionage-theme .floating-action-btn {
  background: var(--bg-secondary);
  border-color: var(--color-primary);
  box-shadow: 0 0 10px rgba(139, 0, 0, 0.3);
}

body.espionage-theme #sheet-button,
body.espionage-theme #campaign-button,
body.espionage-theme #dice-roller-button,
body.espionage-theme #theme-button,
body.espionage-theme #instructions-toggle-button {
  background: var(--bg-secondary);
  border-color: var(--color-primary);
  color: var(--text-primary);
}

body.espionage-theme .stats-box,
body.espionage-theme .trait-item {
  border: 1px solid rgba(139, 0, 0, 0.3);
  background: linear-gradient(135deg, rgba(10, 10, 10, 0.9) 0%, rgba(20, 20, 20, 0.8) 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

body.espionage-theme .stats-box:hover,
body.espionage-theme .trait-item:hover {
  border-color: rgba(139, 0, 0, 0.6);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), 0 0 10px rgba(139, 0, 0, 0.15);
  transform: scale(1.01);
}

body.espionage-theme h2,
body.espionage-theme h3 {
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 700;
  text-shadow: 0 0 5px rgba(139, 0, 0, 0.3);
}

body.espionage-theme label {
  color: var(--color-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
}

body.espionage-theme input,
body.espionage-theme textarea,
body.espionage-theme select {
  background: rgba(10, 10, 10, 0.8);
  border: 1px solid rgba(139, 0, 0, 0.25);
  color: var(--text-primary);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

body.espionage-theme input:focus,
body.espionage-theme textarea:focus,
body.espionage-theme select:focus {
  border-color: rgba(139, 0, 0, 0.6);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 0 8px rgba(139, 0, 0, 0.2);
  outline: none;
}

body.espionage-theme .btn {
  background: linear-gradient(135deg, rgba(139, 0, 0, 0.3) 0%, rgba(92, 0, 0, 0.4) 100%);
  border: 1px solid rgba(139, 0, 0, 0.5);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
}

body.espionage-theme .btn:hover {
  background: linear-gradient(135deg, rgba(139, 0, 0, 0.5) 0%, rgba(92, 0, 0, 0.6) 100%);
  border-color: rgba(139, 0, 0, 0.7);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), 0 0 8px rgba(139, 0, 0, 0.2);
  transform: translateY(-2px);
}

body.espionage-theme .floating-panel-content,
body.espionage-theme .modal-content {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  border: 1px solid rgba(139, 0, 0, 0.4);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.7), 0 0 10px rgba(139, 0, 0, 0.1);
}

body.espionage-theme,
body.espionage-theme input,
body.espionage-theme textarea,
body.espionage-theme select,
body.espionage-theme button,
body.espionage-theme .btn,
body.espionage-theme label,
body.espionage-theme .tab-button {
  font-family: 'Courier New', 'Courier', monospace;
}



/* Mystic Theme - Purple & Lilac Dark Mode */
body.mystic-theme {
  --theme-glow-color: #9B59B6;
  --theme-glow-color-low: rgba(155, 89, 182, 0.2);
  --theme-glow-color-high: rgba(155, 89, 182, 0.5);

  --color-primary: #9B59B6;
  --color-primary-dark: #7D3C98;
  --color-primary-light: #BB8FCE;
  --color-secondary: #D8BFD8;
  --color-accent: #E8DAEF;

  --color-gray-50: #0F0A14;
  --color-gray-100: #1A1221;
  --color-gray-200: #261A30;
  --color-gray-300: #352440;
  --color-gray-400: #4D3660;
  --color-gray-500: #7A5C8F;
  --color-gray-600: #A88FBD;
  --color-gray-700: #C9B8D8;
  --color-gray-800: #E4DCE9;
  --color-gray-900: #F5F0F8;

  --bg-primary: #0F0A14;
  --bg-secondary: #1A1221;
  --bg-tertiary: #261A30;
  --text-primary: #F5F0F8;
  --text-secondary: #A88FBD;
  --border-primary: #9B59B6;
  --border-secondary: #352440;

  --shadow-sm: 0 1px 3px 0 rgba(155, 89, 182, 0.3), 0 0 8px rgba(155, 89, 182, 0.15);
  --shadow-md: 0 3px 10px -2px rgba(155, 89, 182, 0.4), 0 0 15px rgba(155, 89, 182, 0.2);
  --shadow-lg: 0 6px 20px -4px rgba(155, 89, 182, 0.5), 0 0 25px rgba(155, 89, 182, 0.25);
  --shadow-xl: 0 12px 32px -8px rgba(155, 89, 182, 0.6), 0 0 40px rgba(155, 89, 182, 0.3);

  --body-gradient-1: #080510;
  --body-gradient-2: #0F0A14;

  background-image:
    /* Mystical glow from center */
    radial-gradient(ellipse at 50% 50%, rgba(155, 89, 182, 0.1) 0%, transparent 50%),
    /* Star-like sparkles */
    radial-gradient(circle at 20% 30%, rgba(232, 218, 239, 0.08) 0%, transparent 20%),
    radial-gradient(circle at 80% 20%, rgba(216, 191, 216, 0.06) 0%, transparent 15%),
    radial-gradient(circle at 60% 70%, rgba(232, 218, 239, 0.05) 0%, transparent 18%),
    /* Purple mist vignette */
    radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(8, 5, 16, 0.95) 75%),
    /* Base */
    linear-gradient(135deg, var(--body-gradient-1) 0%, #1A0F20 50%, var(--body-gradient-2) 100%);
}

body.mystic-theme .character-sheet {
  border: none;
  position: relative;
  background-color: var(--bg-secondary);
  box-shadow:
    0 0 40px rgba(155, 89, 182, 0.2),
    0 0 80px rgba(216, 191, 216, 0.08),
    inset 0 0 40px rgba(0, 0, 0, 0.5);
  background-image:
    /* Ethereal shimmer */
    radial-gradient(ellipse at 50% 0%, rgba(155, 89, 182, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(232, 218, 239, 0.03) 0%, transparent 30%);
  padding: 2rem;
}

body.mystic-theme .character-sheet::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid rgba(155, 89, 182, 0.4);
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(216, 191, 216, 0.2),
    inset 0 0 25px rgba(155, 89, 182, 0.1);
}

/* Mystic dock buttons */
body.mystic-theme .floating-action-btn {
  background: var(--bg-secondary);
  border-color: var(--color-primary);
  box-shadow: 0 0 12px rgba(155, 89, 182, 0.35);
}

body.mystic-theme #sheet-button,
body.mystic-theme #campaign-button,
body.mystic-theme #dice-roller-button,
body.mystic-theme #theme-button,
body.mystic-theme #instructions-toggle-button {
  background: linear-gradient(135deg, rgba(155, 89, 182, 0.25) 0%, rgba(125, 60, 152, 0.35) 100%);
  border-color: var(--color-primary);
  color: var(--text-primary);
  box-shadow: 0 0 10px rgba(155, 89, 182, 0.3);
}

body.mystic-theme .stats-box,
body.mystic-theme .trait-item {
  border: 2px solid rgba(155, 89, 182, 0.3);
  background: linear-gradient(135deg, rgba(15, 10, 20, 0.9) 0%, rgba(26, 18, 33, 0.8) 100%);
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(216, 191, 216, 0.1),
    0 0 12px rgba(155, 89, 182, 0.08);
  transition: all 0.3s ease;
}

body.mystic-theme .stats-box:hover,
body.mystic-theme .trait-item:hover {
  border-color: rgba(155, 89, 182, 0.6);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.6),
    0 0 20px rgba(155, 89, 182, 0.2),
    inset 0 1px 0 rgba(216, 191, 216, 0.15);
  transform: scale(1.01);
}

body.mystic-theme h2,
body.mystic-theme h3 {
  color: var(--color-secondary);
  text-shadow: 0 0 12px rgba(155, 89, 182, 0.5), 0 2px 4px rgba(0, 0, 0, 0.4);
  letter-spacing: 0.05em;
  font-weight: 600;
}

body.mystic-theme label {
  color: var(--color-gray-600);
  letter-spacing: 0.03em;
}

body.mystic-theme input,
body.mystic-theme textarea,
body.mystic-theme select {
  background: linear-gradient(135deg, rgba(15, 10, 20, 0.8) 0%, rgba(26, 18, 33, 0.6) 100%);
  border: 1px solid rgba(155, 89, 182, 0.3);
  color: var(--text-primary);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

body.mystic-theme input:focus,
body.mystic-theme textarea:focus,
body.mystic-theme select:focus {
  border-color: rgba(155, 89, 182, 0.6);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.4),
    0 0 12px rgba(155, 89, 182, 0.25);
  outline: none;
}

body.mystic-theme .btn {
  background: linear-gradient(135deg, rgba(155, 89, 182, 0.35) 0%, rgba(125, 60, 152, 0.45) 100%);
  border: 2px solid rgba(155, 89, 182, 0.5);
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: 0.03em;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.4),
    0 0 8px rgba(155, 89, 182, 0.15);
  transition: all 0.3s ease;
}

body.mystic-theme .btn:hover {
  background: linear-gradient(135deg, rgba(155, 89, 182, 0.5) 0%, rgba(187, 143, 206, 0.4) 100%);
  border-color: rgba(155, 89, 182, 0.7);
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.5),
    0 0 15px rgba(155, 89, 182, 0.3);
  transform: translateY(-2px);
}

body.mystic-theme .floating-panel-content,
body.mystic-theme .modal-content {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  border: 2px solid rgba(155, 89, 182, 0.4);
  box-shadow:
    0 5px 25px rgba(0, 0, 0, 0.7),
    0 0 15px rgba(155, 89, 182, 0.12);
}


/* Glow Effects */
body.mystic-theme::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, var(--theme-glow-color-low) 0%, transparent 60%),
    radial-gradient(circle at 80% 20%, var(--theme-glow-color-low) 0%, transparent 40%);
  z-index: -1;
  animation: bg-pulse 15s ease-in-out infinite alternate;
  pointer-events: none;
}

body.mystic-theme h1,
body.mystic-theme h2,
body.mystic-theme h3,
body.mystic-theme h4,
body.mystic-theme h5,
body.mystic-theme h6 {
  animation: text-pulse-glow 3s infinite;
}

body.mystic-theme .btn:hover,
body.mystic-theme .btn:focus {
  animation: pulse-glow 3s infinite;
}

/* Serpentine Theme - Jungle & Scales */
body.serpentine-theme {
  --theme-glow-color: #2E8B57;
  --theme-glow-color-low: rgba(46, 139, 87, 0.2);
  --theme-glow-color-high: rgba(46, 139, 87, 0.5);

  --color-primary: #2E8B57;
  --color-primary-dark: #1E6040;
  --color-primary-light: #3CB371;
  --color-secondary: #6B8E23;
  --color-accent: #9ACD32;

  --color-gray-50: #080C08;
  --color-gray-100: #101810;
  --color-gray-200: #182418;
  --color-gray-300: #203420;
  --color-gray-400: #3D5A3D;
  --color-gray-500: #5E8A5E;
  --color-gray-600: #8BB88B;
  --color-gray-700: #B0D4B0;
  --color-gray-800: #D4E8D4;
  --color-gray-900: #F0F8F0;

  --bg-primary: #080C08;
  --bg-secondary: #101810;
  --bg-tertiary: #182418;
  --text-primary: #F0F8F0;
  --text-secondary: #8BB88B;
  --border-primary: #2E8B57;
  --border-secondary: #203420;

  --shadow-sm: 0 1px 3px 0 rgba(46, 139, 87, 0.4), 0 0 6px rgba(154, 205, 50, 0.1);
  --shadow-md: 0 3px 10px -2px rgba(46, 139, 87, 0.5), 0 0 12px rgba(154, 205, 50, 0.15);
  --shadow-lg: 0 6px 20px -4px rgba(46, 139, 87, 0.6), 0 0 20px rgba(154, 205, 50, 0.2);
  --shadow-xl: 0 12px 32px -8px rgba(46, 139, 87, 0.7), 0 0 30px rgba(154, 205, 50, 0.25);

  --body-gradient-1: #040604;
  --body-gradient-2: #080C08;

  background-image: none;
  /* Removed jungle gradients for Paper feel */
  background-color: var(--bg-primary);
}

body.serpentine-theme .character-sheet {
  border: none;
  position: relative;
  background-color: var(--bg-secondary);
  box-shadow:
    0 0 50px rgba(46, 139, 87, 0.25),
    0 0 100px rgba(154, 205, 50, 0.08),
    inset 0 0 60px rgba(0, 0, 0, 0.6);
  background-image: none;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  padding: 2rem;
  overflow: hidden;
}

/* Vine-wrapped organic border */
body.serpentine-theme .character-sheet::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  bottom: 6px;
  border: 3px solid rgba(46, 139, 87, 0.5);
  border-radius: 4px;
  pointer-events: none;
  background: none;
  /* Removed vine gradients */
}

/* Corner vine decorations */
body.serpentine-theme .character-sheet::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 5;
  background: none;
  /* Removed vine gradients */
}

/* Serpentine dock buttons */
body.serpentine-theme .floating-action-btn {
  background: var(--bg-secondary);
  border-color: var(--color-primary);
  box-shadow: 0 0 12px rgba(46, 139, 87, 0.35);
}

body.serpentine-theme #sheet-button,
body.serpentine-theme #campaign-button,
body.serpentine-theme #dice-roller-button,
body.serpentine-theme #theme-button,
body.serpentine-theme #instructions-toggle-button {
  background: linear-gradient(135deg, rgba(46, 139, 87, 0.25) 0%, rgba(30, 96, 64, 0.35) 100%);
  border-color: var(--color-primary);
  color: var(--text-primary);
  box-shadow: 0 0 10px rgba(46, 139, 87, 0.3);
}

/* Scale-textured stat boxes */
body.serpentine-theme .stats-box,
body.serpentine-theme .trait-item {
  border: 2px solid rgba(46, 139, 87, 0.4);
  border-radius: 3px;
  background:
    /* Subtle scale shimmer */
    repeating-radial-gradient(ellipse 20px 16px at center,
      transparent 0px,
      transparent 6px,
      rgba(46, 139, 87, 0.02) 7px,
      transparent 8px),
    linear-gradient(135deg, rgba(8, 12, 8, 0.95) 0%, rgba(16, 24, 16, 0.9) 100%);
  background-size: 40px 32px, 100% 100%;
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(154, 205, 50, 0.1),
    0 0 12px rgba(46, 139, 87, 0.1);
  transition: all 0.3s ease;
}

body.serpentine-theme .stats-box:hover,
body.serpentine-theme .trait-item:hover {
  border-color: rgba(154, 205, 50, 0.5);
  box-shadow:
    0 6px 25px rgba(0, 0, 0, 0.7),
    0 0 20px rgba(46, 139, 87, 0.25),
    0 0 30px rgba(154, 205, 50, 0.1),
    inset 0 1px 0 rgba(154, 205, 50, 0.15);
  transform: scale(1.01);
}

/* Bioluminescent headings */
body.serpentine-theme h2,
body.serpentine-theme h3 {
  color: #9ACD32;
  text-shadow:
    0 0 15px rgba(154, 205, 50, 0.6),
    0 0 30px rgba(46, 139, 87, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.7);
  letter-spacing: 0.05em;
  font-weight: 600;
}

body.serpentine-theme label {
  color: var(--color-gray-600);
}

body.serpentine-theme input,
body.serpentine-theme textarea,
body.serpentine-theme select {
  background: linear-gradient(135deg, rgba(10, 16, 12, 0.8) 0%, rgba(18, 26, 21, 0.6) 100%);
  border: 1px solid rgba(46, 139, 87, 0.3);
  color: var(--text-primary);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

body.serpentine-theme input:focus,
body.serpentine-theme textarea:focus,
body.serpentine-theme select:focus {
  border-color: rgba(46, 139, 87, 0.6);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.4),
    0 0 12px rgba(46, 139, 87, 0.25);
  outline: none;
}

/* Jungle button styling */
body.serpentine-theme .btn {
  background: linear-gradient(180deg, rgba(46, 139, 87, 0.4) 0%, rgba(30, 96, 64, 0.5) 100%);
  border: 2px solid rgba(46, 139, 87, 0.5);
  border-radius: 3px;
  color: var(--text-primary);
  font-weight: 600;
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.5),
    0 0 10px rgba(46, 139, 87, 0.2),
    inset 0 1px 0 rgba(154, 205, 50, 0.1);
  transition: all 0.3s ease;
}

body.serpentine-theme .btn:hover {
  background: linear-gradient(180deg, rgba(46, 139, 87, 0.55) 0%, rgba(154, 205, 50, 0.3) 100%);
  border-color: rgba(154, 205, 50, 0.6);
  box-shadow:
    0 5px 20px rgba(0, 0, 0, 0.6),
    0 0 20px rgba(46, 139, 87, 0.35),
    0 0 30px rgba(154, 205, 50, 0.15),
    inset 0 1px 0 rgba(154, 205, 50, 0.2);
  transform: translateY(-2px);
}

/* Jungle-themed modals */
body.serpentine-theme .floating-panel-content,
body.serpentine-theme .modal-content {
  background:
    repeating-radial-gradient(ellipse 30px 24px at center,
      transparent 0px,
      transparent 10px,
      rgba(46, 139, 87, 0.015) 11px,
      transparent 12px),
    linear-gradient(180deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
  background-size: 60px 48px, 100% 100%;
  border: 3px solid rgba(46, 139, 87, 0.5);
  border-radius: 4px;
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.8),
    0 0 20px rgba(46, 139, 87, 0.15),
    inset 0 0 40px rgba(0, 0, 0, 0.3);
}


/* Glow Effects */
body.serpentine-theme::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, var(--theme-glow-color-low) 0%, transparent 60%),
    radial-gradient(circle at 80% 20%, var(--theme-glow-color-low) 0%, transparent 40%);
  z-index: -1;
  animation: bg-pulse 15s ease-in-out infinite alternate;
  pointer-events: none;
}

body.serpentine-theme h1,
body.serpentine-theme h2,
body.serpentine-theme h3,
body.serpentine-theme h4,
body.serpentine-theme h5,
body.serpentine-theme h6 {
  animation: text-pulse-glow 3s infinite;
}

body.serpentine-theme .btn:hover,
body.serpentine-theme .btn:focus {
  animation: pulse-glow 3s infinite;
}

/* Smoldering Theme - Dark Embers & Ash */
body.smoldering-theme {
  --theme-glow-color: #FF4500;
  --theme-glow-color-low: rgba(255, 69, 0, 0.2);
  --theme-glow-color-high: rgba(255, 69, 0, 0.5);

  --color-primary: #8B2500;
  --color-primary-dark: #5C1800;
  --color-primary-light: #B33000;
  --color-secondary: #4A4A4A;
  --color-accent: #FF4500;

  --color-gray-50: #0D0D0D;
  --color-gray-100: #171717;
  --color-gray-200: #212121;
  --color-gray-300: #2B2B2B;
  --color-gray-400: #404040;
  --color-gray-500: #5C5C5C;
  --color-gray-600: #808080;
  --color-gray-700: #A0A0A0;
  --color-gray-800: #C0C0C0;
  --color-gray-900: #E0E0E0;

  --bg-primary: #0D0D0D;
  --bg-secondary: #171717;
  --bg-tertiary: #212121;
  --text-primary: #D0D0D0;
  --text-secondary: #808080;
  --border-primary: #8B2500;
  --border-secondary: #2B2B2B;

  --shadow-sm: 0 1px 3px 0 rgba(139, 37, 0, 0.5), 0 0 5px rgba(255, 69, 0, 0.1);
  --shadow-md: 0 3px 10px -2px rgba(139, 37, 0, 0.6), 0 0 10px rgba(255, 69, 0, 0.15);
  --shadow-lg: 0 6px 20px -4px rgba(139, 37, 0, 0.7), 0 0 20px rgba(255, 69, 0, 0.2);
  --shadow-xl: 0 12px 32px -8px rgba(139, 37, 0, 0.8), 0 0 35px rgba(255, 69, 0, 0.25);

  --body-gradient-1: #080808;
  --body-gradient-2: #0D0D0D;

  background-image:
    /* Ember glow from bottom */
    radial-gradient(ellipse at 50% 100%, rgba(255, 69, 0, 0.12) 0%, transparent 40%),
    radial-gradient(ellipse at 30% 90%, rgba(139, 37, 0, 0.08) 0%, transparent 25%),
    radial-gradient(ellipse at 70% 95%, rgba(255, 69, 0, 0.06) 0%, transparent 20%),
    /* Ash particles */
    radial-gradient(circle at 20% 20%, rgba(100, 100, 100, 0.03) 0%, transparent 15%),
    radial-gradient(circle at 80% 40%, rgba(80, 80, 80, 0.02) 0%, transparent 10%),
    /* Dark vignette */
    radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(8, 8, 8, 0.97) 70%),
    /* Charcoal base */
    linear-gradient(180deg, var(--body-gradient-1) 0%, #121212 50%, var(--body-gradient-2) 100%);
}

body.smoldering-theme .character-sheet {
  border: none;
  position: relative;
  background-color: var(--bg-secondary);
  box-shadow:
    0 0 30px rgba(139, 37, 0, 0.2),
    0 0 60px rgba(255, 69, 0, 0.08),
    inset 0 0 50px rgba(0, 0, 0, 0.6);
  background-image:
    /* Ember glow at bottom */
    radial-gradient(ellipse at 50% 100%, rgba(255, 69, 0, 0.05) 0%, transparent 35%),
    /* Ash texture */
    radial-gradient(circle at 30% 70%, rgba(80, 80, 80, 0.02) 0%, transparent 20%);
  padding: 2rem;
}

body.smoldering-theme .character-sheet::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid rgba(139, 37, 0, 0.4);
  pointer-events: none;
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.5);
}

/* Smoldering dock buttons */
body.smoldering-theme .floating-action-btn {
  background: var(--bg-secondary);
  border-color: var(--color-primary);
  box-shadow: 0 0 10px rgba(139, 37, 0, 0.4), 0 0 5px rgba(255, 69, 0, 0.15);
}

body.smoldering-theme #sheet-button,
body.smoldering-theme #campaign-button,
body.smoldering-theme #dice-roller-button,
body.smoldering-theme #theme-button,
body.smoldering-theme #instructions-toggle-button {
  background: linear-gradient(135deg, rgba(139, 37, 0, 0.25) 0%, rgba(92, 24, 0, 0.35) 100%);
  border-color: var(--color-primary);
  color: var(--text-primary);
  box-shadow: 0 0 8px rgba(139, 37, 0, 0.3);
}

body.smoldering-theme .stats-box,
body.smoldering-theme .trait-item {
  border: 1px solid rgba(139, 37, 0, 0.3);
  background: linear-gradient(135deg, rgba(13, 13, 13, 0.95) 0%, rgba(23, 23, 23, 0.85) 100%);
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.6),
    0 0 8px rgba(139, 37, 0, 0.08);
  transition: all 0.3s ease;
}

body.smoldering-theme .stats-box:hover,
body.smoldering-theme .trait-item:hover {
  border-color: rgba(139, 37, 0, 0.5);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.7),
    0 0 15px rgba(255, 69, 0, 0.12);
  transform: scale(1.01);
}

body.smoldering-theme h2,
body.smoldering-theme h3 {
  color: var(--color-accent);
  text-shadow: 0 0 8px rgba(255, 69, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.6);
  font-weight: 600;
}

body.smoldering-theme label {
  color: var(--color-gray-500);
}

body.smoldering-theme input,
body.smoldering-theme textarea,
body.smoldering-theme select {
  background: rgba(13, 13, 13, 0.9);
  border: 1px solid rgba(139, 37, 0, 0.25);
  color: var(--text-primary);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

body.smoldering-theme input:focus,
body.smoldering-theme textarea:focus,
body.smoldering-theme select:focus {
  border-color: rgba(139, 37, 0, 0.5);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.5),
    0 0 8px rgba(255, 69, 0, 0.15);
  outline: none;
}

body.smoldering-theme .btn {
  background: linear-gradient(135deg, rgba(139, 37, 0, 0.3) 0%, rgba(92, 24, 0, 0.4) 100%);
  border: 1px solid rgba(139, 37, 0, 0.5);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

body.smoldering-theme .btn:hover {
  background: linear-gradient(135deg, rgba(139, 37, 0, 0.45) 0%, rgba(255, 69, 0, 0.3) 100%);
  border-color: rgba(139, 37, 0, 0.7);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.6),
    0 0 12px rgba(255, 69, 0, 0.2);
  transform: translateY(-2px);
}

body.smoldering-theme .floating-panel-content,
body.smoldering-theme .modal-content {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  border: 1px solid rgba(139, 37, 0, 0.4);
  box-shadow:
    0 5px 25px rgba(0, 0, 0, 0.8),
    0 0 10px rgba(139, 37, 0, 0.1);
}


/* Smoldering Ember Keyframes */
@keyframes ember-flicker {

  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }

  25% {
    opacity: 0.5;
    transform: scale(1.02);
  }

  50% {
    opacity: 0.35;
    transform: scale(0.98);
  }

  75% {
    opacity: 0.45;
    transform: scale(1.01);
  }
}

@keyframes ember-rise {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  50% {
    opacity: 0.8;
  }

  100% {
    transform: translateY(-100vh) translateX(20px) scale(0.3);
    opacity: 0;
  }
}

@keyframes ember-rise-alt {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0;
  }

  15% {
    opacity: 0.9;
  }

  60% {
    opacity: 0.6;
  }

  100% {
    transform: translateY(-80vh) translateX(-30px) scale(0.2);
    opacity: 0;
  }
}

@keyframes ember-drift {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(10px);
  }

  50% {
    transform: translateX(-5px);
  }

  75% {
    transform: translateX(15px);
  }
}

@keyframes heat-shimmer {

  0%,
  100% {
    filter: blur(0px);
    opacity: 0.15;
  }

  50% {
    filter: blur(1px);
    opacity: 0.25;
  }
}

/* Glow Effects - Smoldering flickering glow */
body.smoldering-theme::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    /* Flickering ember glow from bottom */
    radial-gradient(ellipse at 50% 120%, rgba(255, 69, 0, 0.35) 0%, rgba(255, 100, 0, 0.15) 30%, transparent 60%),
    radial-gradient(ellipse at 30% 110%, rgba(255, 140, 0, 0.2) 0%, transparent 40%),
    radial-gradient(ellipse at 70% 115%, rgba(255, 80, 0, 0.25) 0%, transparent 35%),
    /* Subtle ambient glow */
    radial-gradient(circle at center, var(--theme-glow-color-low) 0%, transparent 60%);
  z-index: -1;
  animation: ember-flicker 4s ease-in-out infinite;
  pointer-events: none;
}

/* Floating ember particles */
body.smoldering-theme::after {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  background-image:
    /* Large embers */
    radial-gradient(circle at 10% 100%, #ff4500 0%, #ff6b00 40%, transparent 50%),
    radial-gradient(circle at 25% 100%, #ff5500 0%, #ff8c00 35%, transparent 45%),
    radial-gradient(circle at 45% 100%, #ff4500 0%, #ff6347 30%, transparent 40%),
    radial-gradient(circle at 60% 100%, #ff6600 0%, #ff7f00 40%, transparent 50%),
    radial-gradient(circle at 80% 100%, #ff4500 0%, #ff5722 35%, transparent 45%),
    radial-gradient(circle at 90% 100%, #ff5500 0%, #ff6b00 30%, transparent 40%),
    /* Small spark embers */
    radial-gradient(circle at 15% 100%, #ffaa00 0%, transparent 30%),
    radial-gradient(circle at 35% 100%, #ff8800 0%, transparent 25%),
    radial-gradient(circle at 55% 100%, #ffcc00 0%, transparent 30%),
    radial-gradient(circle at 70% 100%, #ff9900 0%, transparent 25%),
    radial-gradient(circle at 85% 100%, #ffbb00 0%, transparent 30%);
  background-size:
    /* Large embers */
    6px 6px,
    5px 5px,
    7px 7px,
    4px 4px,
    6px 6px,
    5px 5px,
    /* Small sparks */
    3px 3px,
    2px 2px,
    3px 3px,
    2px 2px,
    3px 3px;
  background-repeat: no-repeat;
  background-position:
    10% 100%,
    25% 100%,
    45% 100%,
    60% 100%,
    80% 100%,
    90% 100%,
    15% 100%,
    35% 100%,
    55% 100%,
    70% 100%,
    85% 100%;
  animation:
    ember-rise 8s ease-out infinite,
    ember-drift 6s ease-in-out infinite;
}

/* Additional ember layer with different timing */
body.smoldering-theme .character-sheet::after {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9998;
  background-image:
    radial-gradient(circle at 5% 100%, #ff4500 0%, transparent 50%),
    radial-gradient(circle at 20% 100%, #ff6600 0%, transparent 45%),
    radial-gradient(circle at 40% 100%, #ff5500 0%, transparent 50%),
    radial-gradient(circle at 65% 100%, #ff4500 0%, transparent 45%),
    radial-gradient(circle at 75% 100%, #ff7700 0%, transparent 50%),
    radial-gradient(circle at 95% 100%, #ff5500 0%, transparent 45%);
  background-size:
    4px 4px,
    5px 5px,
    3px 3px,
    6px 6px,
    4px 4px,
    5px 5px;
  background-repeat: no-repeat;
  background-position:
    5% 100%,
    20% 100%,
    40% 100%,
    65% 100%,
    75% 100%,
    95% 100%;
  animation:
    ember-rise-alt 12s ease-out infinite 2s,
    ember-drift 8s ease-in-out infinite reverse;
}

/* Heat shimmer effect at the bottom */
body.smoldering-theme .character-sheet::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid rgba(139, 37, 0, 0.4);
  pointer-events: none;
  box-shadow:
    inset 0 0 25px rgba(0, 0, 0, 0.5),
    inset 0 -50px 80px -50px rgba(255, 69, 0, 0.15);
  animation: heat-shimmer 3s ease-in-out infinite;
}

body.smoldering-theme h1,
body.smoldering-theme h2,
body.smoldering-theme h3,
body.smoldering-theme h4,
body.smoldering-theme h5,
body.smoldering-theme h6 {
  animation: text-pulse-glow 3s infinite;
}

body.smoldering-theme .btn:hover,
body.smoldering-theme .btn:focus {
  animation: pulse-glow 3s infinite;
}

/* Smoldering theme fonts - match fantasy theme */
body.smoldering-theme,
body.smoldering-theme input,
body.smoldering-theme textarea,
body.smoldering-theme select,
body.smoldering-theme button,
body.smoldering-theme .btn,
body.smoldering-theme label,
body.smoldering-theme .tab-button {
  font-family: var(--font-fantasy);
}

/* Terminal Theme - Classic Green on Black */
body.terminal-theme {
  --theme-glow-color: #00FF00;
  --theme-glow-color-low: rgba(0, 255, 0, 0.2);
  --theme-glow-color-high: rgba(0, 255, 0, 0.5);

  --color-primary: #00FF00;
  --color-primary-dark: #00CC00;
  --color-primary-light: #33FF33;
  --color-secondary: #00AA00;
  --color-accent: #66FF66;

  --color-gray-50: #000000;
  --color-gray-100: #0A0A0A;
  --color-gray-200: #141414;
  --color-gray-300: #1E1E1E;
  --color-gray-400: #2D2D2D;
  --color-gray-500: #3D3D3D;
  --color-gray-600: #00AA00;
  --color-gray-700: #00CC00;
  --color-gray-800: #00EE00;
  --color-gray-900: #00FF00;

  --bg-primary: #000000;
  --bg-secondary: #0A0A0A;
  --bg-tertiary: #141414;
  --text-primary: #00FF00;
  --text-secondary: #00AA00;
  --border-primary: #00FF00;
  --border-secondary: #1E1E1E;

  --shadow-sm: 0 0 5px rgba(0, 255, 0, 0.3);
  --shadow-md: 0 0 10px rgba(0, 255, 0, 0.4);
  --shadow-lg: 0 0 20px rgba(0, 255, 0, 0.5);
  --shadow-xl: 0 0 35px rgba(0, 255, 0, 0.6);

  --body-gradient-1: #000000;
  --body-gradient-2: #050505;

  --font-primary: 'Courier New', 'Courier', monospace;

  background-image:
    /* CRT scanlines */
    repeating-linear-gradient(0deg,
      transparent 0px,
      transparent 1px,
      rgba(0, 0, 0, 0.3) 1px,
      rgba(0, 0, 0, 0.3) 2px),
    /* Green glow from center */
    radial-gradient(ellipse at 50% 50%, rgba(0, 255, 0, 0.03) 0%, transparent 60%),
    /* CRT curvature vignette */
    radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(0, 0, 0, 0.9) 85%),
    /* Base black */
    linear-gradient(180deg, var(--body-gradient-1) 0%, var(--body-gradient-2) 100%);
}

body.terminal-theme .character-sheet {
  border: none;
  position: relative;
  background-color: var(--bg-secondary);
  box-shadow:
    0 0 25px rgba(0, 255, 0, 0.15),
    inset 0 0 40px rgba(0, 0, 0, 0.7);
  background-image:
    /* Scanlines on card too */
    repeating-linear-gradient(0deg,
      transparent 0px,
      transparent 2px,
      rgba(0, 0, 0, 0.15) 2px,
      rgba(0, 0, 0, 0.15) 4px);
  padding: 2rem;
}

body.terminal-theme .character-sheet::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid rgba(0, 255, 0, 0.5);
  pointer-events: none;
  box-shadow:
    inset 0 0 15px rgba(0, 255, 0, 0.08),
    0 0 10px rgba(0, 255, 0, 0.1);
}

/* Terminal dock buttons */
body.terminal-theme .floating-action-btn {
  background: var(--bg-secondary);
  border-color: var(--color-primary);
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.4);
}

body.terminal-theme #sheet-button,
body.terminal-theme #campaign-button,
body.terminal-theme #dice-roller-button,
body.terminal-theme #theme-button,
body.terminal-theme #instructions-toggle-button {
  background: rgba(0, 255, 0, 0.1);
  border-color: var(--color-primary);
  color: var(--text-primary);
  box-shadow: 0 0 8px rgba(0, 255, 0, 0.3);
}

body.terminal-theme .stats-box,
body.terminal-theme .trait-item {
  border: 1px solid rgba(0, 255, 0, 0.3);
  background: rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 8px rgba(0, 255, 0, 0.1);
  transition: all 0.3s ease;
}

body.terminal-theme .stats-box:hover,
body.terminal-theme .trait-item:hover {
  border-color: rgba(0, 255, 0, 0.6);
  box-shadow: 0 0 15px rgba(0, 255, 0, 0.2);
  transform: scale(1.01);
}

body.terminal-theme h2,
body.terminal-theme h3 {
  color: var(--color-accent);
  text-shadow: 0 0 8px rgba(0, 255, 0, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}

body.terminal-theme label {
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

body.terminal-theme input,
body.terminal-theme textarea,
body.terminal-theme select {
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(0, 255, 0, 0.3);
  color: var(--text-primary);
  box-shadow: inset 0 0 5px rgba(0, 255, 0, 0.05);
}

body.terminal-theme input:focus,
body.terminal-theme textarea:focus,
body.terminal-theme select:focus {
  border-color: rgba(0, 255, 0, 0.7);
  box-shadow:
    inset 0 0 5px rgba(0, 255, 0, 0.1),
    0 0 10px rgba(0, 255, 0, 0.25);
  outline: none;
}

body.terminal-theme select option {
  background-color: #000;
  color: #00FF00;
}

body.terminal-theme select:focus option:checked {
  background-color: #00FF00;
  color: #000;
}

body.terminal-theme .btn {
  background: rgba(0, 255, 0, 0.15);
  border: 1px solid rgba(0, 255, 0, 0.5);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  box-shadow: 0 0 8px rgba(0, 255, 0, 0.15);
  transition: all 0.3s ease;
}

body.terminal-theme .btn:hover {
  background: rgba(0, 255, 0, 0.25);
  border-color: rgba(0, 255, 0, 0.8);
  box-shadow: 0 0 15px rgba(0, 255, 0, 0.3);
  transform: translateY(-2px);
}

body.terminal-theme .floating-panel-content,
body.terminal-theme .modal-content {
  background: rgba(0, 0, 0, 0.95);
  border: 1px solid rgba(0, 255, 0, 0.4);
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.15);
}

body.terminal-theme,
body.terminal-theme input,
body.terminal-theme textarea,
body.terminal-theme select,
body.terminal-theme button,
body.terminal-theme .btn,
body.terminal-theme label,
body.terminal-theme .tab-button {
  font-family: 'Courier New', 'Courier', monospace;
}


/* Glow Effects */
body.terminal-theme::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, var(--theme-glow-color-low) 0%, transparent 60%),
    radial-gradient(circle at 80% 20%, var(--theme-glow-color-low) 0%, transparent 40%);
  z-index: -1;
  animation: bg-pulse 15s ease-in-out infinite alternate;
  pointer-events: none;
}

body.terminal-theme h1,
body.terminal-theme h2,
body.terminal-theme h3,
body.terminal-theme h4,
body.terminal-theme h5,
body.terminal-theme h6 {
  animation: text-pulse-glow 3s infinite;
}

body.terminal-theme .btn:hover,
body.terminal-theme .btn:focus {
  animation: pulse-glow 3s infinite;
}

/* Terminal theme - toned down primary color elements */
body.terminal-theme .btn-primary,
body.terminal-theme .spinner-btn.plus {
  background-color: rgba(0, 255, 0, 0.2);
  border: 1px solid rgba(0, 255, 0, 0.4);
  color: var(--text-primary);
}

body.terminal-theme .btn-primary:hover,
body.terminal-theme .spinner-btn.plus:hover {
  background-color: rgba(0, 255, 0, 0.3);
  border-color: rgba(0, 255, 0, 0.6);
}

body.terminal-theme .gm-badge,
body.terminal-theme .player-badge {
  background: rgba(0, 255, 0, 0.15);
  border: 1px solid rgba(0, 255, 0, 0.4);
  color: var(--text-primary);
}

body.terminal-theme .view-sheet-btn {
  background: rgba(0, 255, 0, 0.15);
  border: 1px solid rgba(0, 255, 0, 0.4);
  color: var(--text-primary);
}

body.terminal-theme .view-sheet-btn:hover {
  background: rgba(0, 255, 0, 0.25);
  border-color: rgba(0, 255, 0, 0.6);
}

body.terminal-theme .spinner-btn.minus {
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 255, 0, 0.3);
  color: var(--text-primary);
}

body.terminal-theme .spinner-btn.minus:hover {
  background-color: rgba(0, 255, 0, 0.1);
  border-color: rgba(0, 255, 0, 0.5);
}

body.terminal-theme .number-spinner-wrapper input[type="number"] {
  border: 1px solid rgba(0, 255, 0, 0.3);
  background: rgba(0, 0, 0, 0.5);
}

body.terminal-theme .roll-btn {
  background: rgba(0, 255, 0, 0.2);
  border: 1px solid rgba(0, 255, 0, 0.4);
  color: var(--text-primary);
}

body.terminal-theme .roll-btn:hover {
  background: rgba(0, 255, 0, 0.3);
  border-color: rgba(0, 255, 0, 0.6);
  box-shadow: 0 0 15px rgba(0, 255, 0, 0.2);
}

body.terminal-theme .campaign-list-item.current-campaign {
  background: rgba(0, 255, 0, 0.05);
  border-color: rgba(0, 255, 0, 0.4);
}

/* Withered Theme - Western Saloon */
body.withered-theme {
  --theme-glow-color: #CD853F;
  --theme-glow-color-low: rgba(205, 133, 63, 0.2);
  --theme-glow-color-high: rgba(205, 133, 63, 0.5);

  --color-primary: #CD853F;
  --color-primary-dark: #8B4513;
  --color-primary-light: #DEB887;
  --color-secondary: #DAA520;
  --color-accent: #B8860B;

  --color-gray-50: #1A150F;
  --color-gray-100: #2A2218;
  --color-gray-200: #3D3022;
  --color-gray-300: #52402E;
  --color-gray-400: #7A6048;
  --color-gray-500: #A08060;
  --color-gray-600: #C4A882;
  --color-gray-700: #DCC4A0;
  --color-gray-800: #EEE0C8;
  --color-gray-900: #FAF5EC;

  --bg-primary: #1A150F;
  --bg-secondary: #2A2218;
  --bg-tertiary: #3D3022;
  --text-primary: #FAF5EC;
  --text-secondary: #C4A882;
  --border-primary: #CD853F;
  --border-secondary: #52402E;

  --shadow-sm: 0 1px 3px 0 rgba(205, 133, 63, 0.3), 0 0 6px rgba(218, 165, 32, 0.1);
  --shadow-md: 0 3px 10px -2px rgba(205, 133, 63, 0.4), 0 0 12px rgba(218, 165, 32, 0.15);
  --shadow-lg: 0 6px 20px -4px rgba(205, 133, 63, 0.5), 0 0 20px rgba(218, 165, 32, 0.2);
  --shadow-xl: 0 12px 32px -8px rgba(205, 133, 63, 0.6), 0 0 30px rgba(218, 165, 32, 0.25);

  --body-gradient-1: #0D0A06;
  --body-gradient-2: #1A150F;

  background-image:
    /* Sunset glow from horizon */
    radial-gradient(ellipse at 50% 100%, rgba(205, 133, 63, 0.15) 0%, transparent 50%),
    /* Desert dust vignette */
    radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(13, 10, 6, 0.95) 80%),
    /* Wood grain texture - horizontal lines */
    repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(139, 69, 19, 0.03) 3px, rgba(139, 69, 19, 0.03) 4px),
    /* Wood grain texture - knots and variation */
    repeating-linear-gradient(90deg, transparent 0px, transparent 60px, rgba(139, 69, 19, 0.02) 60px, rgba(139, 69, 19, 0.02) 62px),
    /* Warm earth base */
    linear-gradient(180deg, #1F1810 0%, var(--body-gradient-1) 40%, var(--body-gradient-2) 100%);
}


/* Glow Effects */
body.withered-theme::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, var(--theme-glow-color-low) 0%, transparent 60%),
    radial-gradient(circle at 80% 20%, var(--theme-glow-color-low) 0%, transparent 40%);
  z-index: -1;
  animation: bg-pulse 15s ease-in-out infinite alternate;
  pointer-events: none;
}

body.withered-theme h1,
body.withered-theme h2,
body.withered-theme h3,
body.withered-theme h4,
body.withered-theme h5,
body.withered-theme h6 {
  animation: text-pulse-glow 3s infinite;
}

body.withered-theme .btn:hover,
body.withered-theme .btn:focus {
  animation: pulse-glow 3s infinite;
}

body.withered-theme .character-sheet {
  border: none;
  position: relative;
  background-color: var(--bg-secondary);
  box-shadow:
    0 0 40px rgba(205, 133, 63, 0.25),
    0 0 80px rgba(139, 69, 19, 0.15),
    inset 0 0 60px rgba(0, 0, 0, 0.6);
  background-image:
    /* Leather texture - subtle grain */
    radial-gradient(ellipse at 30% 20%, rgba(139, 69, 19, 0.08) 0%, transparent 30%),
    radial-gradient(ellipse at 70% 80%, rgba(139, 69, 19, 0.06) 0%, transparent 25%),
    /* Worn edges darkening */
    radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.3) 100%),
    /* Wood plank lines */
    repeating-linear-gradient(90deg, transparent 0px, transparent 100px, rgba(139, 69, 19, 0.04) 100px, rgba(139, 69, 19, 0.04) 102px),
    /* Oil lamp glow from top */
    radial-gradient(ellipse at 50% 0%, rgba(218, 165, 32, 0.2) 0%, transparent 50%);
  padding: 2rem;
  /* Worn edge effect - weathered wood */
  clip-path: polygon(1% 0%, 12% 0.5%, 25% 0%, 40% 0.3%, 55% 0%, 70% 0.5%, 85% 0%, 99% 0.3%,
      100% 2%, 99.5% 25%, 100% 50%, 99.5% 75%, 100% 98%,
      98% 100%, 82% 99.5%, 65% 100%, 48% 99.5%, 30% 100%, 15% 99.5%, 2% 100%,
      0% 97%, 0.5% 70%, 0% 45%, 0.5% 20%, 0% 3%);
}

/* Western double-border with nail rivets */
body.withered-theme .character-sheet::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border: 3px solid rgba(139, 69, 19, 0.6);
  pointer-events: none;
  box-shadow:
    inset 0 0 0 2px rgba(205, 133, 63, 0.3),
    inset 0 0 30px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(218, 165, 32, 0.2);
}

/* Nail rivet decorations at corners */
body.withered-theme .character-sheet::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 5;
  background:
    /* Top left nail */
    radial-gradient(circle at 20px 20px, #8B4513 4px, rgba(139, 69, 19, 0.6) 5px, transparent 7px),
    radial-gradient(circle at 20px 20px, rgba(218, 165, 32, 0.4) 2px, transparent 3px),
    /* Top right nail */
    radial-gradient(circle at calc(100% - 20px) 20px, #8B4513 4px, rgba(139, 69, 19, 0.6) 5px, transparent 7px),
    radial-gradient(circle at calc(100% - 20px) 20px, rgba(218, 165, 32, 0.4) 2px, transparent 3px),
    /* Bottom left nail */
    radial-gradient(circle at 20px calc(100% - 20px), #8B4513 4px, rgba(139, 69, 19, 0.6) 5px, transparent 7px),
    radial-gradient(circle at 20px calc(100% - 20px), rgba(218, 165, 32, 0.4) 2px, transparent 3px),
    /* Bottom right nail */
    radial-gradient(circle at calc(100% - 20px) calc(100% - 20px), #8B4513 4px, rgba(139, 69, 19, 0.6) 5px, transparent 7px),
    radial-gradient(circle at calc(100% - 20px) calc(100% - 20px), rgba(218, 165, 32, 0.4) 2px, transparent 3px);
}

/* Withered dock buttons - Western brass look */
body.withered-theme .floating-action-btn {
  background: linear-gradient(180deg, #3D3022 0%, #2A2218 100%);
  border: 2px solid #8B4513;
  border-radius: 2px;
  box-shadow:
    2px 2px 0px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(218, 165, 32, 0.2),
    0 0 10px rgba(205, 133, 63, 0.2);
}

body.withered-theme .floating-action-btn:hover {
  border-color: #CD853F;
  box-shadow:
    3px 3px 0px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(218, 165, 32, 0.3),
    0 0 15px rgba(205, 133, 63, 0.4);
  transform: translate(-1px, -1px);
}

body.withered-theme #sheet-button,
body.withered-theme #campaign-button,
body.withered-theme #dice-roller-button,
body.withered-theme #theme-button,
body.withered-theme #instructions-toggle-button {
  background: linear-gradient(180deg, rgba(139, 69, 19, 0.4) 0%, rgba(42, 34, 24, 0.9) 100%);
  border: 2px solid #8B4513;
  color: var(--text-primary);
  box-shadow:
    2px 2px 0px rgba(0, 0, 0, 0.8),
    0 0 8px rgba(205, 133, 63, 0.2);
}

/* Western wooden plank style for stat boxes */
body.withered-theme .stats-box,
body.withered-theme .trait-item {
  border: 2px solid rgba(139, 69, 19, 0.5);
  border-radius: 2px;
  background:
    repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(139, 69, 19, 0.03) 2px, rgba(139, 69, 19, 0.03) 3px),
    linear-gradient(135deg, rgba(42, 34, 24, 0.95) 0%, rgba(26, 21, 15, 0.9) 100%);
  box-shadow:
    3px 3px 0px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(218, 165, 32, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

body.withered-theme .stats-box:hover,
body.withered-theme .trait-item:hover {
  border-color: rgba(205, 133, 63, 0.7);
  box-shadow:
    4px 4px 0px rgba(0, 0, 0, 0.7),
    0 0 15px rgba(205, 133, 63, 0.25),
    inset 0 1px 0 rgba(218, 165, 32, 0.15);
  transform: translate(-1px, -1px);
}

body.withered-theme h2,
body.withered-theme h3 {
  font-family: var(--font-western);
  color: var(--color-secondary);
  text-shadow:
    0 0 10px rgba(218, 165, 32, 0.4),
    2px 2px 0px rgba(139, 69, 19, 0.6),
    0 3px 6px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.08em;
  font-weight: 400;
}

body.withered-theme label {
  color: var(--color-gray-600);
  letter-spacing: 0.03em;
}

body.withered-theme input,
body.withered-theme textarea,
body.withered-theme select {
  background: linear-gradient(135deg, rgba(26, 21, 15, 0.8) 0%, rgba(42, 34, 24, 0.6) 100%);
  border: 1px solid rgba(205, 133, 63, 0.3);
  color: var(--text-primary);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

body.withered-theme input:focus,
body.withered-theme textarea:focus,
body.withered-theme select:focus {
  border-color: rgba(205, 133, 63, 0.6);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.4),
    0 0 12px rgba(205, 133, 63, 0.25);
  outline: none;
}

/* Western saloon button style */
body.withered-theme .btn {
  background: linear-gradient(180deg, rgba(139, 69, 19, 0.5) 0%, rgba(42, 34, 24, 0.9) 100%);
  border: 2px solid #8B4513;
  border-radius: 2px;
  color: var(--text-primary);
  font-family: var(--font-western);
  font-weight: 400;
  letter-spacing: 0.05em;
  box-shadow:
    3px 3px 0px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(218, 165, 32, 0.15);
  transition: all 0.2s ease;
}

body.withered-theme .btn:hover {
  background: linear-gradient(180deg, rgba(205, 133, 63, 0.6) 0%, rgba(139, 69, 19, 0.8) 100%);
  border-color: #CD853F;
  box-shadow:
    4px 4px 0px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(218, 165, 32, 0.25),
    0 0 12px rgba(205, 133, 63, 0.3);
  transform: translate(-1px, -1px);
}

/* Western wanted-poster style for modals */
body.withered-theme .floating-panel-content,
body.withered-theme .modal-content {
  background:
    repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(139, 69, 19, 0.02) 2px, rgba(139, 69, 19, 0.02) 3px),
    linear-gradient(180deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
  border: 3px solid #8B4513;
  border-radius: 2px;
  box-shadow:
    5px 5px 0px rgba(0, 0, 0, 0.7),
    inset 0 0 30px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(205, 133, 63, 0.15);
}

/* Withered theme fonts - Western saloon style */
body.withered-theme,
body.withered-theme input,
body.withered-theme textarea,
body.withered-theme select,
body.withered-theme button,
body.withered-theme .btn,
body.withered-theme label,
body.withered-theme .tab-button {
  font-family: var(--font-western);
}

/* Persephone Theme - Archery / Huntress Aesthetic */
body.persephone-theme {
  /* Forest Huntress Colors */
  --theme-glow-color: #8B0000;
  --theme-glow-color-low: rgba(139, 0, 0, 0.15);
  --theme-glow-color-high: rgba(139, 0, 0, 0.4);

  --color-primary: #8B4513;
  /* Saddle Brown - Leather/Wood */
  --color-primary-dark: #5D2E0C;
  --color-primary-light: #A0522D;
  --color-secondary: #2E5A1C;
  /* Forest Green */
  --color-accent: #8B0000;
  /* Dark Red - Blood/Target */

  --color-gray-50: #0F1A0D;
  /* Deep Forest Night */
  --color-gray-100: #1A2816;
  --color-gray-200: #253620;
  --color-gray-300: #34482C;
  --color-gray-400: #4A6240;
  --color-gray-500: #6B8560;
  --color-gray-600: #8FA882;
  --color-gray-700: #B3C8A8;
  --color-gray-800: #D4E2CC;
  --color-gray-900: #EBF2E7;

  --bg-primary: #0F1A0D;
  --bg-secondary: #1A2816;
  --bg-tertiary: #253620;
  --text-primary: #EBF2E7;
  --text-secondary: #A0522D;
  --border-primary: #8B4513;
  --border-secondary: #34482C;

  --shadow-sm: 0 1px 3px 0 rgba(139, 0, 0, 0.2), 0 0 6px rgba(46, 90, 28, 0.1);
  --shadow-md: 0 3px 10px -2px rgba(139, 0, 0, 0.3), 0 0 12px rgba(46, 90, 28, 0.15);
  --shadow-lg: 0 6px 20px -4px rgba(139, 0, 0, 0.4), 0 0 20px rgba(46, 90, 28, 0.2);
  --shadow-xl: 0 12px 32px -8px rgba(139, 0, 0, 0.5), 0 0 30px rgba(46, 90, 28, 0.25);

  --body-gradient-1: #0A120A;
  --body-gradient-2: #0F1A0D;

  --font-primary: var(--font-fantasy);

  background-color: #0A120A;
  background-image:
    /* Target circles emanating from center - archery bullseye pattern */
    radial-gradient(circle at 50% 50%, transparent 0%, transparent 8%, rgba(139, 0, 0, 0.03) 8%, rgba(139, 0, 0, 0.03) 10%, transparent 10%),
    radial-gradient(circle at 50% 50%, transparent 0%, transparent 18%, rgba(139, 0, 0, 0.025) 18%, rgba(139, 0, 0, 0.025) 20%, transparent 20%),
    radial-gradient(circle at 50% 50%, transparent 0%, transparent 28%, rgba(139, 0, 0, 0.02) 28%, rgba(139, 0, 0, 0.02) 30%, transparent 30%),
    /* Arrow shaft lines - diagonal flight paths */
    repeating-linear-gradient(-30deg,
      transparent,
      transparent 80px,
      rgba(139, 69, 19, 0.015) 80px,
      rgba(139, 69, 19, 0.015) 82px),
    repeating-linear-gradient(30deg,
      transparent,
      transparent 80px,
      rgba(139, 69, 19, 0.015) 80px,
      rgba(139, 69, 19, 0.015) 82px),
    /* Forest canopy dappled light */
    radial-gradient(ellipse at 20% 30%, rgba(46, 90, 28, 0.08) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 60%, rgba(46, 90, 28, 0.06) 0%, transparent 35%),
    radial-gradient(ellipse at 50% 80%, rgba(46, 90, 28, 0.05) 0%, transparent 30%),
    /* Vignette - forest darkness */
    radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(10, 18, 10, 0.97) 85%),
    /* Deep forest base */
    linear-gradient(180deg, #0F1A0D 0%, #0A120A 100%);
}

/* Glow Effects - like firelight in a forest camp */
body.persephone-theme::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, var(--theme-glow-color-low) 0%, transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(139, 69, 19, 0.08) 0%, transparent 35%);
  z-index: -1;
  animation: bg-pulse 12s ease-in-out infinite alternate;
  pointer-events: none;
}

body.persephone-theme h1,
body.persephone-theme h2,
body.persephone-theme h3,
body.persephone-theme h4,
body.persephone-theme h5,
body.persephone-theme h6 {
  animation: text-pulse-glow 4s infinite;
}

body.persephone-theme .btn:hover,
body.persephone-theme .btn:focus {
  animation: pulse-glow 3s infinite;
}

body.persephone-theme .character-sheet {
  border: none;
  position: relative;
  background-color: var(--bg-secondary);
  box-shadow:
    0 0 40px rgba(139, 0, 0, 0.2),
    0 0 80px rgba(46, 90, 28, 0.15),
    inset 0 0 60px rgba(0, 0, 0, 0.6);
  background-image:
    /* Leather texture - like a quiver or arm guard */
    radial-gradient(ellipse at 30% 20%, rgba(139, 69, 19, 0.1) 0%, transparent 30%),
    radial-gradient(ellipse at 70% 80%, rgba(139, 69, 19, 0.08) 0%, transparent 25%),
    /* Wood grain - like a bow stave */
    repeating-linear-gradient(0deg, transparent 0px, transparent 4px, rgba(139, 69, 19, 0.03) 4px, rgba(139, 69, 19, 0.03) 5px),
    /* Worn edges darkening */
    radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.4) 100%),
    /* Forest-filtered light from top */
    radial-gradient(ellipse at 50% 0%, rgba(46, 90, 28, 0.15) 0%, transparent 50%);
  padding: 2rem;
  border-radius: 8px;
}

/* Leather stitching border - like a quiver */
body.persephone-theme .character-sheet::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border: 2px dashed rgba(139, 69, 19, 0.5);
  border-radius: 6px;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 4px rgba(26, 40, 22, 0.8),
    inset 0 0 30px rgba(0, 0, 0, 0.4);
}

/* Arrow fletching accent at corners */
body.persephone-theme .character-sheet::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 5;
  background:
    /* Top left fletching */
    linear-gradient(135deg, rgba(139, 0, 0, 0.3) 0%, rgba(139, 0, 0, 0.3) 20px, transparent 20px),
    /* Top right fletching */
    linear-gradient(-135deg, rgba(46, 90, 28, 0.3) 0%, rgba(46, 90, 28, 0.3) 20px, transparent 20px),
    /* Bottom left fletching */
    linear-gradient(45deg, rgba(46, 90, 28, 0.3) 0%, rgba(46, 90, 28, 0.3) 20px, transparent 20px),
    /* Bottom right fletching */
    linear-gradient(-45deg, rgba(139, 0, 0, 0.3) 0%, rgba(139, 0, 0, 0.3) 20px, transparent 20px);
  border-radius: 8px;
}

/* Wooden bow-style buttons */
body.persephone-theme .floating-action-btn {
  background: linear-gradient(180deg, #34482C 0%, #253620 50%, #1A2816 100%);
  border: 2px solid #8B4513;
  border-radius: 4px;
  box-shadow:
    2px 2px 0px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(139, 69, 19, 0.3),
    0 0 8px rgba(46, 90, 28, 0.2);
}

body.persephone-theme .floating-action-btn:hover {
  border-color: #8B0000;
  box-shadow:
    3px 3px 0px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(139, 69, 19, 0.4),
    0 0 15px rgba(139, 0, 0, 0.3);
  transform: translate(-1px, -1px);
}

body.persephone-theme #sheet-button,
body.persephone-theme #campaign-button,
body.persephone-theme #dice-roller-button,
body.persephone-theme #theme-button,
body.persephone-theme #instructions-toggle-button {
  background: linear-gradient(180deg, rgba(139, 69, 19, 0.3) 0%, rgba(26, 40, 22, 0.9) 100%);
  border: 2px solid #8B4513;
  color: var(--text-primary);
  box-shadow:
    2px 2px 0px rgba(0, 0, 0, 0.7),
    0 0 8px rgba(139, 0, 0, 0.15);
}

/* Target-inspired stat boxes */
body.persephone-theme .stats-box,
body.persephone-theme .trait-item {
  border: 2px solid rgba(139, 69, 19, 0.5);
  border-radius: 4px;
  background:
    /* Subtle target ring */
    radial-gradient(circle at 50% 50%, rgba(139, 0, 0, 0.05) 0%, transparent 30%),
    linear-gradient(135deg, rgba(37, 54, 32, 0.95) 0%, rgba(26, 40, 22, 0.9) 100%);
  box-shadow:
    2px 2px 0px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(139, 69, 19, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

body.persephone-theme .stats-box:hover,
body.persephone-theme .trait-item:hover {
  border-color: #8B0000;
  box-shadow:
    3px 3px 0px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(139, 69, 19, 0.2),
    0 0 12px rgba(139, 0, 0, 0.2);
}

body.persephone-theme h2,
body.persephone-theme h3 {
  color: var(--color-secondary);
  text-shadow:
    0 0 8px rgba(46, 90, 28, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.06em;
  font-weight: 500;
}

body.persephone-theme label {
  color: var(--color-gray-700);
  letter-spacing: 0.04em;
}

body.persephone-theme input,
body.persephone-theme textarea,
body.persephone-theme select {
  background: rgba(15, 26, 13, 0.9);
  border: 1px solid rgba(139, 69, 19, 0.4);
  color: var(--text-primary);
  border-radius: 3px;
}

body.persephone-theme input:focus,
body.persephone-theme textarea:focus,
body.persephone-theme select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 8px rgba(139, 0, 0, 0.3);
  outline: none;
}

body.persephone-theme .btn {
  background: linear-gradient(180deg, #34482C 0%, #253620 50%, #1A2816 100%);
  border: 2px solid #8B4513;
  border-radius: 4px;
  color: var(--text-primary);
  box-shadow:
    2px 2px 0px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(139, 69, 19, 0.2);
  transition: all 0.2s ease;
}

body.persephone-theme .btn:hover {
  background: linear-gradient(180deg, #4A6240 0%, #34482C 50%, #253620 100%);
  border-color: #8B0000;
  box-shadow:
    3px 3px 0px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(139, 69, 19, 0.3),
    0 0 12px rgba(139, 0, 0, 0.25);
}

/* Quiver-style modals */
body.persephone-theme .floating-panel-content,
body.persephone-theme .modal-content {
  background:
    repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(139, 69, 19, 0.02) 3px, rgba(139, 69, 19, 0.02) 4px),
    linear-gradient(180deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
  border: 3px solid #8B4513;
  border-radius: 6px;
  box-shadow:
    4px 4px 0px rgba(0, 0, 0, 0.6),
    inset 0 0 30px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(139, 0, 0, 0.1);
}

body.corrupted-theme h2,
body.corrupted-theme h3 {
  color: var(--color-secondary);
  text-shadow:
    0 0 8px rgba(123, 104, 168, 0.6),
    0 2px 4px rgba(0, 0, 0, 0.4);
  letter-spacing: 0.08em;
  font-weight: 400;
}

body.corrupted-theme label {
  color: var(--color-gray-600);
  letter-spacing: 0.05em;
}

/* Apply font to all elements */
body.corrupted-theme,
body.corrupted-theme input,
body.corrupted-theme textarea,
body.corrupted-theme select,
body.corrupted-theme button,
body.corrupted-theme .btn,
body.corrupted-theme label,
body.corrupted-theme .tab-button {
  font-family: var(--font-frozen);
}

* {
  box-sizing: border-box;
}

body {
  background: linear-gradient(135deg, var(--body-gradient-1) 0%, var(--body-gradient-2) 100%);
  font-family: var(--font-primary);
  font-weight: 400;
  line-height: 1.5;
  padding: 2rem 1rem 1.5rem;
  color: var(--text-primary);
  transition: background 0.3s ease, color 0.3s ease, font-family 0.3s ease;
  min-height: 100vh;
  position: relative;
}

/* === Auth Status Styling === */
.auth-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  white-space: nowrap;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-primary);
}

.auth-status span {
  background-color: var(--bg-secondary);
  padding: 0.25rem 0.625rem;
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-primary);
}

.auth-status button {
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
  padding: 0.25rem 0.5rem;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s, color 0.2s;
  font-size: 0.75rem;
}

.auth-status button:hover {
  background: var(--color-danger);
  color: white;
}

/* === Version Info Styling === */
.version-info {
  text-align: center;
  margin-top: 1.5rem;
  padding-bottom: 1rem;
  font-size: 0.75rem;
  color: var(--color-gray-400);
  font-weight: 500;
  letter-spacing: 0.05em;
}

.character-sheet {
  margin: 0 auto;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 24px;
  padding: 2.5rem;
  box-shadow: var(--shadow-xl);
  position: relative;
  transition: all 0.3s ease;
  animation: fadeInUp 0.6s ease-out;
  max-width: 1400px;
}

@media (min-width: 969px) {
  .character-sheet {
    margin-right: 4rem;
    margin-left: auto;
  }
}

/* .header-container definition moved to end of file */

/* === Sheet Controls Styling === */
.sheet-controls {
  position: absolute;
  top: -0.75rem;
  left: -0.75rem;
  z-index: 10;
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  padding: 0.5rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-lg);
}

.sheet-controls select {
  background: var(--bg-primary);
  color: var(--text-primary);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  font-size: 0.6875rem;
  font-weight: 600;
  transition: all 0.2s ease;
  min-width: 5rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sheet-controls select:hover {
  border-color: var(--color-primary);
  background: var(--bg-tertiary);
}

.sheet-controls select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.sheet-controls button {
  background: var(--bg-primary);
  color: var(--text-secondary);
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sheet-controls button:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--bg-tertiary);
}

.sheet-controls button:active {
  transform: scale(0.98);
}

/* SVG Icons for buttons - Monochrome */
.toggle-icon,
.action-button-icon,
.button-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.toggle-icon {
  width: 100%;
  height: 100%;
  font-size: 1rem;
  line-height: 1;
}

.action-button-icon,
.button-icon {
  width: 0.875rem;
  height: 0.875rem;
  line-height: 1;
}

/* Make all SVG icons inherit color from parent (white on colored buttons) */
.toggle-icon svg,
.action-button-icon svg,
.button-icon svg {
  stroke: currentColor;
  fill: none;
}

/* For filled elements within SVGs */
.toggle-icon svg circle[fill],
.action-button-icon svg circle[fill],
.button-icon svg circle[fill] {
  fill: currentColor;
}

/* .header-details and .header-right-group definitions moved to end of file */

#name {
  font-size: 1.875rem;
  font-weight: 600;
  text-align: center;
  border: none;
  background: var(--bg-secondary);
  transition: all 0.2s ease;
  color: var(--text-primary);
  outline: none;
  padding: 0.75rem 1rem;
  border-radius: var(--border-radius-lg);
  border: 1px solid transparent;
}

#name:hover {
  background: var(--bg-tertiary);
}

#name:focus {
  background: var(--bg-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* .detail-group layout definition moved to end of file */

.detail-group input[type="text"] {
  background: var(--bg-secondary);
  border: 1px solid transparent;
  text-align: center;
}

.detail-group input[type="text"]:hover {
  background: var(--bg-tertiary);
}

.detail-group input[type="text"]:focus {
  background: var(--bg-primary);
  border-color: var(--color-primary);
}

.endicott-toggle-header .tribulation-item {
  padding-bottom: 0.375rem;
}

label {
  display: block;
  font-weight: 500;
  font-size: 0.75rem;
  margin-bottom: 0.375rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.2s ease;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
textarea,
select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  /* Modern curves */
  font-size: 0.95rem;
  /* Slightly larger text */
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
  background: rgba(255, 255, 255, 0.03);
  /* Subtle fill */
  color: var(--text-primary);
  outline: none;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15);
  /* Soft focus ring */
  transform: translateY(-1px);
}


.dark-mode input[type="text"]:focus,
.dark-mode input[type="number"]:focus,
.dark-mode input[type="email"]:focus,
.dark-mode input[type="password"]:focus,
.dark-mode textarea:focus,
.dark-mode select:focus {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-gray-400);
  font-style: italic;
}

textarea {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
  line-height: 1.6;
  white-space: pre-wrap;
}

#talents-textarea,
#items-textarea,
#locker-storage-textarea,
#dorm-storage-textarea,
#notes-textarea,
.power-description-textarea {
  font-family: inherit;
  line-height: 1.6;
  letter-spacing: 0.01em;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 0.875rem;
  padding: 1rem;
  background: var(--bg-primary);
  border: 1px solid transparent;
  border-radius: var(--border-radius-lg);
}

#talents-textarea:hover,
#items-textarea:hover,
#locker-storage-textarea:hover,
#dorm-storage-textarea:hover,
#notes-textarea:hover,
.power-description-textarea:hover {
  background: var(--bg-tertiary);
}

#talents-textarea:focus,
#items-textarea:focus,
#locker-storage-textarea:focus,
#dorm-storage-textarea:focus,
#notes-textarea:focus,
.power-description-textarea:focus {
  background: var(--bg-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}


.layout-main-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "stats"
    "traits"
    "tabs";
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.layout-main-grid>.stats-box {
  grid-area: stats;
  margin-bottom: 0;
}

.traits-section {
  grid-area: traits;
  margin-top: 0;
}

.tab-container {
  grid-area: tabs;
}



.combat-stats-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.combat-stats-grid .stats-box {
  flex: 1 1 140px;
}



.stats-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 20px;
  padding: 0.75rem;
  /* Condensed from 1.5rem */
  transition: all 0.2s ease;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  /* Condensed from 0.5rem */
}

.stats-box:hover {
  border-color: var(--color-primary-light);
  box-shadow: var(--shadow-md);
  background: var(--bg-tertiary);
}

.stats-box h3 {
  margin: 0 0 0.5rem 0;
  /* Condensed from 0.875rem */
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  /* Reset gradient text effects from global dark mode */
  background: none;
  -webkit-text-fill-color: var(--text-primary);
  background-clip: border-box;
  -webkit-background-clip: border-box;
  animation: none;
}

.life-points-input {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.input-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 auto;
}

.input-group label {
  font-size: 0.6875rem;
  margin-bottom: 0.25rem;
}

.input-group input {
  text-align: center;
  font-size: 1.125rem;
  font-weight: 600;
  width: 100%;
  max-width: 70px;
}

.divider {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-gray-400);
}

.traits-section {
  margin-bottom: 0;
}

.traits-grid,
#endicott-traits.endicott-traits-visible {
  /* Added endicott-traits for visibility */
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-xl);
  padding: 0.75rem;
}

#endicott-fear-shiver-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

#endicott-fear-shiver-box .input-group {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
}

#endicott-fear-shiver-box .input-group label {
  margin-bottom: 0;
  text-align: center;
  font-size: 0.75rem;
}

#endicott-fear-shiver-box .input-group input {
  width: 40px;
  padding: 0.25rem;
  font-size: 0.9rem;
  height: auto;
}

.trait-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-primary);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 0.75rem 1rem;
  transition: all 0.2s ease;
}

.trait-item:hover {
  background: var(--bg-tertiary);
  border-color: var(--border-primary);
}

.trait-item label {
  margin: 0;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  flex: 1;
  text-align: left;
  font-size: 0.8125rem;
  color: var(--text-primary);
}

.trait-item input {
  width: 56px;
  text-align: center;
  font-weight: 600;
  font-size: 1rem;
  margin: 0;
  padding: 0.375rem 0.5rem;
  background: var(--bg-secondary);
  border: 1px solid transparent;
  border-radius: var(--border-radius-md);
}

.trait-item input:hover {
  background: var(--bg-tertiary);
}

.trait-item input:focus {
  background: var(--bg-primary);
  border-color: var(--color-primary);
}

#infrasphere-container .input-group input {
  font-size: 0.875rem;
}

.tab-container {
  margin-top: 0;
}

.tab-buttons {
  display: flex;
  justify-content: center;
  margin-bottom: 0;
  gap: 0.375rem;
  flex-wrap: wrap;
  background: var(--bg-secondary);
  padding: 0.5rem;
  border-radius: var(--border-radius-xl);
  border: 1px solid var(--border-primary);
}

.tab-button {
  background: transparent;
  color: var(--text-secondary);
  border: none;
  padding: 0.625rem 1.25rem;
  cursor: pointer;
  font-size: 0.6875rem;
  font-weight: 600;
  border-radius: 9999px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 80px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tab-button.active {
  background: var(--bg-primary);
  color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.tab-button:hover:not(.active) {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.tab-content {
  display: none;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-xl);
  padding: 1.5rem;
  margin-top: 0.75rem;
}

.tab-content.active {
  display: block;
  animation: fadeIn 0.3s ease-in;
}

.tab-content h3 {
  margin: 0 0 1rem 0;
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.6875rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Money Box - Dev Code Dependent Feature */
.money-box {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-lg);
  margin-bottom: 1.25rem;
}

.money-box label {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
  white-space: nowrap;
}

.money-input-group {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
  max-width: 150px;
}

.money-currency-symbol {
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-success);
}

#current-money-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-md);
  background: var(--bg-primary);
  color: var(--text-primary);
  text-align: right;
}

#current-money-input:focus {
  outline: none;
  border-color: var(--color-success);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.money-actions {
  display: flex;
  gap: 0.5rem;
}

#money-box-container {
  display: none;
}

#money-box-container.visible {
  display: block;
}

.items-section {
  margin-bottom: 1.25rem;
}

.items-section:last-child {
  margin-bottom: 0;
}

.items-section label {
  text-transform: none;
  letter-spacing: normal;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 1rem;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
}

th,
td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-primary);
  transition: all 0.2s ease;
}

th {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

td {
  background: var(--bg-primary);
  font-size: 0.875rem;
}

tr:last-child td {
  border-bottom: none;
}

tr:hover td {
  background: var(--bg-secondary);
}

#powers-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.power-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--bg-primary);
  border: 1px solid transparent;
  border-radius: var(--border-radius-lg);
  padding: 1rem;
  transition: all 0.2s ease;
}

.power-item:hover {
  background: var(--bg-tertiary);
  border-color: var(--border-primary);
}

.drag-handle {
  cursor: grab;
  color: var(--color-gray-400);
  font-size: 1.25rem;
  padding: 0.25rem;
  align-self: flex-start;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.power-item:hover .drag-handle {
  opacity: 1;
}

.drag-handle:active {
  cursor: grabbing;
}

.power-item-content {
  flex-grow: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "name range"
    "desc desc";
  gap: 0.75rem;
}

.power-field {
  display: flex;
  flex-direction: column;
}

.power-field-full {
  grid-area: desc;
  display: flex;
  flex-direction: column;
}

.power-item .power-field label,
.power-item .power-field-full label {
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.6875rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.power-item input[type="text"],
.power-item textarea {
  margin: 0;
  font-size: 0.875rem;
}

.power-item textarea {
  min-height: 60px;
}

.delete-power-btn {
  background: var(--color-danger);
  color: var(--color-white);
  border: none;
  border-radius: 50%;
  width: 1.75rem;
  height: 1.75rem;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  flex-shrink: 0;
  align-self: flex-start;
}

.delete-power-btn:hover {
  opacity: 1;
  transform: scale(1.1);
  box-shadow: var(--shadow-md);
}

.power-item.dragging {
  opacity: 0.5;
  transform: rotate(1deg);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
}

.power-item.drag-over {
  border-top: 2px solid var(--color-primary);
}

.add-button {
  background: var(--bg-primary);
  color: var(--color-success);
  padding: 0.625rem 1.25rem;
  border: 1px solid var(--color-success);
  border-radius: var(--border-radius-lg);
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 auto;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.6875rem;
}

.add-button:hover {
  background: var(--color-success);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}

/* Floating Action Buttons Container */
.floating-action-buttons {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  right: 1.5rem;
  z-index: 1000;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 1rem;
}

/* Old dock styles removed */

.dock-section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.375rem;
  width: 100%;
}

.dock-section-label {
  font-size: 0.5625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  white-space: nowrap;
  padding-left: 0.25rem;
}

.dock-select {
  width: 100%;
  min-width: 160px;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-md);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.75rem;
  font-weight: 500;
}

.dock-select:hover {
  border-color: var(--color-primary);
  background: var(--bg-tertiary);
}

.dock-select:focus {
  outline: none;
  border-color: var(--color-primary);
}

.dock-divider {
  width: 100%;
  height: 1px;
  background: var(--border-primary);
  margin: 0.125rem 0;
}

.dock-actions {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  width: 100%;
}

.dock-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  padding: 0.5rem 0.375rem;
  border: none;
  border-radius: var(--border-radius-md);
  background: var(--bg-primary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  flex: 1;
  min-width: 0;
}

.dock-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.dock-btn svg {
  flex-shrink: 0;
}

.dock-btn span {
  white-space: nowrap;
}

.dock-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.dock-btn:disabled:hover {
  background: transparent;
  color: var(--text-secondary);
}

/* Dock button color variants - subtle backgrounds for better readability */
.dock-btn-accent:not(:disabled):hover {
  background: rgba(139, 92, 246, 0.15);
  color: var(--color-accent);
}

.dock-btn-success:hover {
  background: rgba(16, 185, 129, 0.15);
  color: var(--color-success);
}

.dock-btn-info:hover {
  background: rgba(6, 182, 212, 0.15);
  color: var(--color-info);
}

.dock-btn-warning:hover {
  background: rgba(245, 158, 11, 0.15);
  color: var(--color-warning);
}

.dock-btn-danger:hover {
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-danger);
}

/* Mobile dock - legacy styles for dock-content/dock-select/dock-btn if present */
@media (max-width: 768px) {
  .dock-content {
    padding: 0.625rem;
    gap: 0.375rem;
  }

  .dock-select {
    min-width: 140px;
    padding: 0.375rem 0.5rem;
    font-size: 0.6875rem;
  }

  .dock-btn {
    padding: 0.625rem 0.5rem;
    font-size: 0.5rem;
  }

  .dock-btn svg {
    width: 22px;
    height: 22px;
  }
}

/* Note: Main mobile floating action buttons styles are in MOBILE OVERHAUL section */

/* ================================================
   Floating Panels (Dice Tray & Campaign Dashboard)
   ================================================ */

/* Base floating panel styles */
.mobile-panel-close {
  display: none !important;
}

.dice-tray-panel,
.campaign-panel,
.theme-panel,
.sheet-panel {
  position: fixed;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  top: 50%;
  transform: translateY(-50%);
  right: 5rem;
  bottom: auto;
}

/* Floating panel content (the expandable area) */
.floating-panel-content {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 24px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  transition: all 0.4s cubic-bezier(0.2, 0, 0.2, 1);
  transform-origin: bottom right;
  overflow: hidden;
  padding: 1.5rem;
}

.floating-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-primary);
}

.floating-panel-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* Dice Tray Panel specific sizing */
.dice-tray-panel-content {
  width: 800px;
  max-width: calc(100vw - 6rem);
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
}

/* Campaign Panel specific sizing */
.campaign-panel-content {
  width: 1200px;
  max-width: calc(100vw - 6rem);
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
}

/* Theme Panel specific sizing */
.theme-panel-content {
  width: 340px;
  max-width: calc(100vw - 6rem);
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
}

/* Sheet Panel specific sizing */
.sheet-panel-content {
  width: 300px;
  max-width: calc(100vw - 6rem);
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
}

/* Panel Account Section (in Save/Load panel) */
.panel-account-section {
  padding: 0.75rem;
  background: var(--bg-secondary);
  border-radius: var(--border-radius-md);
  margin-bottom: 0.5rem;
}

.panel-account-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}

.panel-account-label {
  font-size: 0.7rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.panel-account-email {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
  word-break: break-all;
}

.panel-account-actions {
  display: flex;
  gap: 0.5rem;
}

.panel-account-actions .dock-btn {
  flex: 1;
}

/* Collapsed states */
.dice-tray-panel.collapsed .floating-panel-content,
.campaign-panel.collapsed .floating-panel-content,
.theme-panel.collapsed .floating-panel-content,
.sheet-panel.collapsed .floating-panel-content {
  max-height: 0;
  max-width: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.95);
  border-width: 0;
  width: 0;
}

/* Mobile responsive */
@media (max-width: 968px) {

  .sheet-panel {
    right: 1rem;
    left: 1rem;
    bottom: auto;
    top: 5rem;
    align-items: stretch;
    transform: none;
  }

  .campaign-panel {
    right: auto;
    left: 1rem;
    right: 1rem;
    bottom: auto;
    top: 5rem;
    width: auto;
    align-items: stretch;
    transform: none;
  }

  .dice-tray-panel {
    right: 1rem;
    left: 1rem;
    bottom: auto;
    top: 2rem;
    align-items: stretch;
    transform: none;
  }

  .theme-panel {
    right: 1rem;
    left: 1rem;
    bottom: auto;
    top: 50%;
    align-items: stretch;
    transform: translateY(-50%);
  }

  .dice-tray-panel-content,
  .campaign-panel-content,
  .theme-panel-content,
  .sheet-panel-content {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100vh - 10rem);
  }

  .campaign-dashboard {
    grid-template-columns: 1fr;
  }

  .dice-tray-dashboard {
    grid-template-columns: 1fr;
  }

  /* Show close button on mobile panels */
  .mobile-panel-close {
    display: flex !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    margin-left: auto;
  }

  /* Compact Dice Tray for Mobile */
  /* Compact Dice Tray for Mobile */
  .dice-tray-dashboard .dashboard-card h3 {
    display: none;
    /* Hide header to save space */
  }

  .dice-tray-dashboard .dashboard-card {
    padding: 0.75rem;
    margin-bottom: 0.5rem;
  }

  .dice-tray-dashboard .control-group {
    margin-bottom: 0.375rem;
  }

  /* Fix Campaign Header Overlap */
  .floating-panel-header h3 {
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50%;
  }

  .combat-status-indicator {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
  }

  .dice-tray-dashboard label {
    margin-bottom: 0.125rem;
    font-size: 0.8rem;
  }

  .dice-tray-dashboard input[type="text"],
  .dice-tray-dashboard input[type="number"],
  .dice-tray-dashboard select {
    padding: 0.5rem;
  }

  .dice-tray-dashboard .dice-tray-controls {
    gap: 0.5rem;
  }

}

/* Theme Options Styling */
.theme-options-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.theme-option-btn {
  padding: 0.75rem;
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-md);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.theme-option-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--color-primary);
}

.theme-option-btn.active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

/* Theme Previews - Border Color */
.theme-option-btn.light-theme-preview {
  border-left: 4px solid #4F46E5;
}

.theme-option-btn.dark-theme-preview {
  border-left: 4px solid #6366F1;
}

.theme-option-btn.bloody-theme-preview {
  border-left: 4px solid #8B1538;
}

.theme-option-btn.corrupted-theme-preview {
  border-left: 4px solid #7B68A8;
}

.theme-option-btn.delinquent-theme-preview {
  border-left: 4px solid #FF6B1A;
}

.theme-option-btn.fantasy-theme-preview {
  border-left: 4px solid #4A7C59;
}

.theme-option-btn.frozen-theme-preview {
  border-left: 4px solid #7dd3fc;
}

.theme-option-btn.dystopic-theme-preview {
  border-left: 4px solid #8B4513;
  background: linear-gradient(135deg, #0A0908 0%, #1A1614 100%);
  color: #C4B8A8;
  font-family: 'Special Elite', cursive;
}

.theme-option-btn.neon-theme-preview {
  border-left: 4px solid #FF006E;
}

.theme-option-btn.princess-theme-preview {
  border-left: 4px solid #F472B6;
}

.theme-option-btn.eternal-theme-preview {
  border-left: 4px solid #CD7F32;
}

.theme-option-btn.raygun-gothic-theme-preview {
  border-left: 4px solid #FF6B00;
}

.theme-option-btn.raygun-light-theme-preview {
  border-left: 4px solid #FF8533;
}

.theme-option-btn.espionage-theme-preview {
  border-left: 4px solid #8B0000;
}

.theme-option-btn.inferno-theme-preview {
  border-left: 4px solid #FF6B35;
}

.theme-option-btn.mystic-theme-preview {
  border-left: 4px solid #9B59B6;
}

.theme-option-btn.serpentine-theme-preview {
  border-left: 4px solid #9ACD32;
  background: linear-gradient(90deg, rgba(46, 139, 87, 0.15) 0%, transparent 50%);
}

.theme-option-btn.smoldering-theme-preview {
  border-left: 4px solid #8B2500;
}

.theme-option-btn.terminal-theme-preview {
  border-left: 4px solid #00FF00;
}

.theme-option-btn.withered-theme-preview {
  border-left: 4px solid #8B4513;
  font-family: var(--font-western);
  background: linear-gradient(90deg, rgba(139, 69, 19, 0.15) 0%, transparent 50%);
}

.theme-option-btn.persephone-theme-preview {
  border-left: 4px solid #2E5A1C;
  background: linear-gradient(90deg, rgba(46, 90, 28, 0.15) 0%, rgba(139, 0, 0, 0.08) 50%, transparent 80%);
}

/* Active state for previews (override border left color if needed, or keep it) */
.theme-option-btn.active.light-theme-preview {
  border-left-color: white;
}

.theme-option-btn.active.dark-theme-preview {
  border-left-color: white;
}

.theme-option-btn.active.bloody-theme-preview {
  border-left-color: white;
}

.theme-option-btn.active.corrupted-theme-preview {
  border-left-color: white;
}

.theme-option-btn.active.delinquent-theme-preview {
  border-left-color: white;
}

.theme-option-btn.active.fantasy-theme-preview {
  border-left-color: white;
}

.theme-option-btn.active.frozen-theme-preview {
  border-left-color: white;
}

.theme-option-btn.active.dystopic-theme-preview {
  border-left-color: white;
}

.theme-option-btn.active.neon-theme-preview {
  border-left-color: white;
}

.theme-option-btn.active.princess-theme-preview {
  border-left-color: white;
}

.theme-option-btn.active.eternal-theme-preview {
  border-left-color: white;
}

.theme-option-btn.active.raygun-gothic-theme-preview {
  border-left-color: white;
}

.theme-option-btn.active.raygun-light-theme-preview {
  border-left-color: white;
}

.theme-option-btn.active.espionage-theme-preview {
  border-left-color: white;
}

.theme-option-btn.active.inferno-theme-preview {
  border-left-color: white;
}

.theme-option-btn.active.mystic-theme-preview {
  border-left-color: white;
}

.theme-option-btn.active.serpentine-theme-preview {
  border-left-color: white;
}

.theme-option-btn.active.smoldering-theme-preview {
  border-left-color: white;
}

.theme-option-btn.active.terminal-theme-preview {
  border-left-color: white;
}

.theme-option-btn.active.withered-theme-preview {
  border-left-color: white;
}

.theme-option-btn.active.persephone-theme-preview {
  border-left-color: white;
}


/* Legacy button styles (kept for modals and other uses) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
  border: none;
  text-transform: none;
  letter-spacing: 0.01em;
  gap: 0.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  /* Minimal shadow */
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background: var(--color-primary);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
}

.btn-secondary {
  background: var(--color-gray-600);
}

.btn-secondary:hover {
  background: var(--color-gray-700);
}

.btn-success {
  background: var(--color-success);
}

.btn-success:hover {
  background: #059669;
}

.btn-warning {
  background: var(--color-warning);
}

.btn-warning:hover {
  background: #D97706;
}

.btn-danger {
  background: var(--color-danger);
}

.btn-danger:hover {
  background: #DC2626;
}

.btn-info {
  background: var(--color-info);
}

.btn-info:hover {
  background: #0891B2;
}

.btn-accent {
  background: var(--color-accent);
}

.btn-accent:hover {
  background: var(--color-primary-dark);
}

.upload-label {
  cursor: pointer;
}

.sheet-selector {
  min-width: 180px;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-lg);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-weight: 500;
  font-size: 0.875rem;
}

.button-icon {
  font-size: 0.875rem;
}


.action-button-icon {
  font-size: 1.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.action-button-icon svg {
  width: 22px;
  height: 22px;
}

/* Floating Action Buttons */
/* Floating action buttons now inside .floating-action-buttons container */
.floating-action-btn {
  width: 3rem;
  height: 3rem;
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.floating-action-btn:hover {
  transform: scale(1.08);
  box-shadow: var(--shadow-xl);
}

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

.floating-action-btn .action-button-icon svg {
  width: 18px;
  height: 18px;
}

/* Button colors (order in container: Help, Dice, Campaign, Save/Load) */
#instructions-toggle-button.floating-action-btn {
  background: var(--color-info);
}

#instructions-toggle-button.floating-action-btn:hover {
  background: #0891B2;
}

#sjovneva-repo-btn.floating-action-btn {
  background: var(--color-accent);
}

#sjovneva-repo-btn.floating-action-btn:hover {
  filter: brightness(1.1);
}

#dice-roller-button {
  background: var(--color-accent);
}

#dice-roller-button:hover {
  background: var(--color-primary-dark);
}

#campaign-button {
  background: var(--color-secondary);
}

#campaign-button:hover {
  background: #0284C7;
}

#theme-button {
  background: #374151;
  /* Fixed dark gray for white icon contrast */
}

#theme-button:hover {
  background: #4B5563;
}

#sheet-button {
  background: var(--color-success);
}

#sheet-button:hover {
  background: #059669;
}



/* Note: Mobile floating action buttons are styled in MOBILE OVERHAUL section at end of file */

.modal {
  display: none;
  position: fixed;
  z-index: 1001;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  animation: fadeIn 0.3s ease;
}

.modal-content {
  background: var(--bg-primary);
  margin: 5% auto;
  padding: 2.5rem;
  border: 1px solid var(--border-primary);
  width: 90%;
  max-width: 500px;
  border-radius: 28px;
  position: relative;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: slideIn 0.4s cubic-bezier(0.2, 0.0, 0, 1.0);
}

.instructions-modal-content {
  max-width: 900px;
}

#number-input-modal {
  z-index: 2000;
}


.close-button {
  color: var(--text-secondary);
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.2s ease;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  z-index: 10;
}

.close-button:hover {
  color: var(--text-primary);
  background: var(--bg-secondary);
}



.modal-content h2 {
  text-align: center;
  margin: 0 0 1.5rem 0;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 1.375rem;
}

/* Dice Tray Modal Content */
.dice-tray-modal-content {
  max-width: 900px;
  width: 95vw;
}

/* Dice Tray Dashboard Layout */
.dice-tray-dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
}

@media (max-width: 768px) {
  .dice-tray-dashboard {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .dice-tray-right {
    order: -1;
  }

  .dice-tray-left,
  .dice-tray-right {
    gap: 0.75rem;
  }

  .dice-results-card {
    min-height: 60px;
    flex: 0 0 auto;
  }

  #dice-results,
  .dice-results-empty {
    min-height: 40px;
  }

  .dice-results-empty {
    padding: 0.5rem;
  }

  .dice-results-empty svg {
    margin-bottom: 0.25rem;
    width: 24px;
    height: 24px;
  }
}

.dice-tray-left,
.dice-tray-right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Dice Tray Controls */
.dice-tray-controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.control-group label {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--text-primary);
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  margin: 0;
}

.control-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
}

.control-group-small {
  max-width: 100px;
}

/* Dice Options */
.dice-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.checkbox-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: none;
  letter-spacing: normal;
  font-weight: normal;
}

.checkbox-option:hover {
  border-color: var(--color-primary);
  background: var(--bg-secondary);
}

.checkbox-option input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  cursor: pointer;
  accent-color: var(--color-primary);
}

.checkbox-label {
  font-size: 0.875rem;
  color: var(--text-primary);
}

/* Roll Button */
.roll-btn {
  background: var(--color-accent);
  color: var(--color-white);
  padding: 1rem 1.5rem;
  border: none;
  border-radius: var(--border-radius-lg);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
}

.roll-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  background: var(--color-primary-dark);
}

.roll-btn .button-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dice Results Card */
.dice-results-card {
  flex: 1;
  min-height: 300px;
}

#dice-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  min-height: 200px;
}

/* Empty State */
.dice-results-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: var(--text-secondary);
  height: 100%;
  min-height: 200px;
}

.dice-results-empty svg {
  opacity: 0.4;
  margin-bottom: 1rem;
}

.dice-results-empty .status-text {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.25rem 0;
}

.dice-results-empty .status-subtext {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin: 0;
}

#dice-results h3 {
  margin: 0 0 0.875rem 0;
  color: var(--text-primary);
}

#dice-results p {
  margin: 0.5rem 0;
  color: var(--text-secondary);
}

.dice-result {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 0.875rem;
  margin: 0.25rem;
  border-radius: var(--border-radius-lg);
  font-weight: 700;
  font-size: 1.125rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  text-align: center;
  transition: all 0.3s ease;
  animation: rollIn 0.5s ease;
}

/* d2 - Circle */
.dice-result.d2 {
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  padding: 0;
}

/* d4 - Equilateral Triangle */
.dice-result.d4 {
  width: 0;
  height: 0;
  min-width: 0;
  padding: 0;
  border-left: 1.75rem solid transparent;
  border-right: 1.75rem solid transparent;
  border-bottom: 3rem solid;
  border-radius: 0;
  position: relative;
  background: transparent !important;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
}

.dice-result.d4::after {
  content: attr(data-value);
  position: absolute;
  top: 2.25rem;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-white);
}

.dice-result.d4.success {
  border-bottom-color: var(--color-success);
}

.dice-result.d4.failure {
  border-bottom-color: var(--color-gray-400);
}

/* d6 - Square */
.dice-result.d6 {
  border-radius: 0.25rem;
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  padding: 0;
}

/* d8 - Diamond */
.dice-result.d8 {
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  padding: 0;
  border-radius: 0;
  transform: rotate(45deg);
  position: relative;
}

.dice-result.d8::after {
  content: attr(data-value);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  font-weight: 700;
  font-size: 1.125rem;
}

/* d10 - Kite/Diamond (taller) */
.dice-result.d10 {
  width: 2.5rem;
  height: 3.5rem;
  min-width: 2.5rem;
  padding: 0;
  border-radius: 0;
  clip-path: polygon(50% 0%, 100% 40%, 50% 100%, 0% 40%);
}

/* d12 - Hexagon */
.dice-result.d12 {
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  padding: 0;
  border-radius: 0;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/* d20 - Decagon */
.dice-result.d20 {
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  padding: 0;
  border-radius: 0;
  clip-path: polygon(50% 0%,
      80% 10%,
      100% 35%,
      100% 65%,
      80% 90%,
      50% 100%,
      20% 90%,
      0% 65%,
      0% 35%,
      20% 10%);
}

.success {
  background: var(--color-success);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}

.failure {
  background: var(--color-gray-400);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

/* Help Modal Intro */
.help-intro {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--bg-tertiary);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--border-primary);
}

.help-intro p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Help Accordion */
.help-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.accordion-item {
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  background: var(--bg-secondary);
}

.accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--text-primary);
  transition: background 0.2s ease;
}

.accordion-header:hover {
  background: var(--bg-tertiary);
}

.accordion-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
}

.accordion-title {
  flex: 1;
  font-weight: 600;
  font-size: 0.9375rem;
}

.accordion-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: transform 0.3s ease;
}

.accordion-item.active .accordion-arrow {
  transform: rotate(180deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 1rem;
  background: var(--bg-tertiary);
  border-top: 1px solid transparent;
}

.accordion-item.active .accordion-content {
  max-height: 1000px;
  padding: 1rem;
  border-top-color: var(--border-primary);
}

.accordion-content p {
  margin: 0 0 0.75rem 0;
  color: var(--text-secondary);
  line-height: 1.6;
  font-size: 0.875rem;
}

.accordion-content p:last-child {
  margin-bottom: 0;
}

.accordion-content ul,
.accordion-content ol {
  margin: 0 0 0.75rem 0;
  padding-left: 1.25rem;
}

.accordion-content li {
  margin-bottom: 0.5rem;
  line-height: 1.5;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.accordion-content ul ul {
  margin-top: 0.5rem;
  margin-bottom: 0;
}

/* Help Tips & Warnings */
.help-tip,
.help-warning {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border-radius: var(--border-radius-md);
  font-size: 0.8125rem;
}

.help-tip {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid var(--color-success);
  color: var(--color-success);
}

.help-warning {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid var(--color-warning);
  color: var(--color-warning);
}

/* Help Footer */
.help-footer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-primary);
  text-align: center;
}

.help-footer p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.help-footer a {
  color: var(--color-primary);
  text-decoration: none;
}

.help-footer a:hover {
  text-decoration: underline;
}

/* Character Portrait Styles */
.character-portrait-container {
  display: flex;
  justify-content: center;
  grid-column: 1 / -1;
  margin-bottom: 0.5rem;
}

.character-portrait-container.hidden,
.add-portrait-container.hidden {
  display: none;
}

.character-portrait-wrapper {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 3px solid var(--color-primary);
  background: var(--bg-tertiary);
  animation: portraitReveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#character-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.character-portrait-wrapper:hover #character-portrait {
  transform: scale(1.05);
}

.character-portrait-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.character-portrait-wrapper:hover .character-portrait-overlay {
  opacity: 1;
}

.portrait-action-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--color-primary);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.portrait-action-btn:hover {
  transform: scale(1.1);
  background: var(--color-primary-dark);
}

.portrait-remove-btn {
  background: var(--color-danger);
}

.portrait-remove-btn:hover {
  background: #b91c1c;
}

/* Add Portrait Button */
.add-portrait-container {
  display: flex;
  justify-content: center;
  grid-column: 1 / -1;
  margin-bottom: 0.5rem;
  animation: fadeInUp 0.4s ease;
}

.add-portrait-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  width: 180px;
  height: 180px;
  background: var(--bg-secondary);
  border: 2px dashed var(--border-color);
  border-radius: var(--border-radius-xl);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.add-portrait-btn:hover {
  background: var(--bg-tertiary);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.add-portrait-btn span {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Portrait Crop Modal */
.portrait-crop-modal-content {
  max-width: 600px;
  width: 90%;
}

.crop-instructions {
  color: var(--text-secondary);
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

.crop-container {
  position: relative;
  margin-bottom: 1.5rem;
}

#crop-preview-container {
  position: relative;
  max-width: 100%;
  max-height: 400px;
  overflow: hidden;
  border-radius: var(--border-radius-lg);
  background: var(--bg-tertiary);
  display: flex;
  justify-content: center;
  align-items: center;
}

#crop-image-wrapper {
  position: relative;
  display: inline-block;
  line-height: 0;
}

#crop-preview-image {
  max-width: 100%;
  max-height: 400px;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

#crop-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#crop-box {
  position: absolute;
  border: 2px solid var(--color-primary);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
  cursor: move;
  pointer-events: auto;
  aspect-ratio: 1 / 1;
  min-width: 64px;
  min-height: 64px;
}

.crop-handle {
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--color-primary);
  border: 2px solid white;
  border-radius: 50%;
  pointer-events: auto;
}

.crop-handle.top-left {
  top: -8px;
  left: -8px;
  cursor: nw-resize;
}

.crop-handle.top-right {
  top: -8px;
  right: -8px;
  cursor: ne-resize;
}

.crop-handle.bottom-left {
  bottom: -8px;
  left: -8px;
  cursor: sw-resize;
}

.crop-handle.bottom-right {
  bottom: -8px;
  right: -8px;
  cursor: se-resize;
}

.crop-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

@keyframes portraitReveal {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(-10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes rollIn {
  from {
    opacity: 0;
    transform: scale(0.3) rotate(180deg);
  }

  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* Theme-specific Roll Button Styles */
body.bloody-theme .roll-btn {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
}

body.bloody-theme .roll-btn:hover {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  box-shadow: 0 0 15px rgba(139, 21, 56, 0.6);
}

body.fantasy-theme .roll-btn {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

body.fantasy-theme .roll-btn:hover {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  box-shadow: 0 0 15px rgba(139, 105, 20, 0.6);
}

body.frozen-theme .roll-btn {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

body.frozen-theme .roll-btn:hover {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  box-shadow:
    0 0 15px rgba(91, 143, 163, 0.6),
    0 0 25px rgba(184, 212, 224, 0.3);
}

body.espionage-theme .roll-btn {
  background: linear-gradient(135deg, #8B0000 0%, #5C0000 100%);
  border: 1px solid #8B0000;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

body.espionage-theme .roll-btn:hover {
  background: linear-gradient(135deg, #A50000 0%, #700000 100%);
  border-color: #B22222;
  box-shadow: 0 0 15px rgba(139, 0, 0, 0.4);
}

body.dystopic-theme .roll-btn {
  background: var(--color-primary);
}

body.dystopic-theme .roll-btn:hover {
  background: var(--color-primary-dark);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

body.neon-theme .roll-btn {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 50%, var(--color-secondary) 100%);
}

body.neon-theme .roll-btn:hover {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-accent) 50%, var(--color-secondary) 100%);
  box-shadow:
    0 0 20px rgba(255, 0, 110, 0.8),
    0 0 40px rgba(131, 56, 236, 0.5);
}

@media (min-width: 768px) {

  /* Header media queries moved/updated */
  body {
    padding: 2.5rem 1.5rem 2rem;
  }
}

@media (min-width: 901px) {
  .layout-main-grid {
    grid-template-columns: 320px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "stats tabs"
      "traits tabs";
    align-items: start;
    column-gap: 1.5rem;
    row-gap: 0.8rem;
  }

  .traits-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  #endicott-traits {
    grid-template-columns: 1fr;
  }

  .fear-shiver-row {
    display: flex;
    gap: 1rem;
  }

  .fear-shiver-row .trait-item {
    flex: 1;
  }
}

@media (min-width: 1280px) {

  /* No special 3-column shift needed anymore, the 2-column structure is stable */
  .layout-main-grid {
    grid-template-columns: 360px 1fr;
  }
}

@media (max-width: 900px) {
  body {
    padding: 1rem 0.5rem;
  }

  .character-sheet {
    padding: 1rem;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
  }

  .layout-main-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "stats"
      "traits"
      "tabs";
  }

  .header-container {
    padding-top: 2.75rem;
  }

  .header-content-wrapper {
    flex-direction: column;
    align-items: stretch;
  }

  .header-right-group {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
  }

  .header-right-group .detail-group {
    width: auto;
  }

  .path-level-group {
    min-width: unset;
    width: 100%;
    flex-basis: 100%;
  }

  .path-die-group {
    flex: 1;
    min-width: 80px;
  }

  .endicott-toggle-header {
    flex: 0 0 auto;
  }

  .sheet-controls {
    top: 0.5rem;
    left: 0.5rem;
    gap: 0.25rem;
  }

  .sheet-controls button {
    width: 1.75rem;
    height: 1.75rem;
  }

  #name {
    font-size: 1.5rem;
    padding-left: 0;
    padding-right: 0;
  }

  .tab-buttons {
    flex-direction: column;
    gap: 0.375rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
    padding-bottom: 0;
  }

  .tab-button {
    min-width: unset;
    justify-content: center;
    border-radius: var(--border-radius-lg);
  }

  .tab-button.active {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
  }

  .tab-content {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .button-group {
    flex-direction: column;
    align-items: stretch;
  }

  .button-group>* {
    width: 100%;
  }

  .btn {
    justify-content: center;
  }

  .responsive-table,
  .responsive-table thead,
  .responsive-table tbody,
  .responsive-table th,
  .responsive-table td,
  .responsive-table tr {
    display: block;
  }

  .responsive-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .responsive-table tr {
    border: 1px solid var(--border-primary);
    margin-bottom: 0.875rem;
    padding: 0.875rem;
    border-radius: var(--border-radius-lg);
    background: var(--bg-primary);
  }

  .responsive-table td {
    border: none;
    position: relative;
    padding: 0.5rem 0;
    text-align: left;
  }

  .responsive-table td[data-label]::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.75rem;
  }

  .responsive-table input[type="text"] {
    width: 100%;
  }

  .power-item {
    flex-direction: column;
    align-items: stretch;
  }

  .power-item-content {
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "range"
      "desc";
    gap: 0.75rem;
  }

  .drag-handle {
    display: none;
  }

  .delete-power-btn {
    align-self: flex-end;
    margin-top: 0.5rem;
  }
}

@media (max-width: 480px) {
  .character-sheet {
    padding: 0.875rem;
  }

  .tab-content {
    padding: 0.875rem;
  }

  /* Increase Trait Scaling on Mobile */
  .trait-item {
    padding: 1rem;
    min-height: 60px;
  }

  .trait-item label {
    font-size: 1rem;
  }

  .trait-item input {
    width: 60px;
    height: 44px;
    font-size: 1.125rem;
  }

  .trait-item .spinner-btn {
    width: 36px;
    height: 36px;
  }
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}



@media (prefers-contrast: high) {
  :root {
    --border-primary: #000000;
    --border-secondary: #000000;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Tribulations section styling */
.tribulations-section-inner {
  margin-top: 1rem;
  margin-bottom: 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-xl);
  padding: 0.5rem;
}

.tribulations-section-inner h3 {
  text-align: center;
  margin-top: 0.25rem;
  /* Reduced top space inside box */
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.tribulations-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
}

.tribulation-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  /* Reduced gap */
  background: var(--bg-primary);
  padding: 0.35rem 0.5rem;
  /* Compact padding */
  border-radius: var(--border-radius-lg);
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.tribulation-item:hover {
  background: var(--bg-tertiary);
  border-color: var(--border-primary);
}

.tribulation-item:has(input:checked) {
  background: rgba(99, 102, 241, 0.1);
  border-color: var(--color-primary);
}

.tribulation-item label {
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--text-primary);
  margin-bottom: 0;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  transition: color 0.2s ease;
  user-select: none;
}

.tribulation-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--color-gray-400);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  flex-shrink: 0;
  background: var(--bg-primary);
}

.tribulation-item input[type="checkbox"]:hover {
  border-color: var(--color-primary);
}

.tribulation-item input[type="checkbox"]:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.tribulation-item input[type="checkbox"]:checked::before {
  content: '\2713';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 0.6875rem;
  font-weight: bold;
}

/* Custom Tribulation Styling */
.tribulation-item.custom {
  border: 1px dashed var(--border-primary);
  background: var(--bg-secondary);
}

.tribulation-item.custom:hover {
  border-color: var(--color-accent);
  background: var(--bg-tertiary);
}

.tribulation-item.custom input[type="checkbox"] {
  border-style: dashed;
}

/* Add Tribulation Button */
.add-tribulation-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px dashed var(--border-primary);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  margin-left: 0.25rem;
}

.add-tribulation-btn:hover {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
  transform: rotate(90deg);
}

.add-tribulation-btn svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.5;
}

/* Delete Tribulation Button (Small X) */
.delete-tribulation-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  /* Muted color */
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  /* Push to right if flex container allows, or layout handles it */
  opacity: 0.6;
  transition: all 0.2s ease;
}

.delete-tribulation-btn:hover {
  background: var(--bg-tertiary);
  color: var(--error-color, #ff4d4f);
  opacity: 1;
}

.delete-tribulation-btn svg {
  width: 12px;
  height: 12px;
  stroke-width: 3;
}

/* Modal Structure Helper Classes (for custom modals) */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
}

.modal-body {
  margin-bottom: 1.5rem;
}

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

.close-modal-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.close-modal-btn:hover {
  color: var(--text-primary);
}

/* Custom Prompt Specific Styles */
body .modal-content.custom-prompt-content {
  padding: 0.75rem 1rem !important;
  /* Ultra tight padding */
  max-width: 380px !important;
  margin: 15vh auto !important;
  min-height: auto !important;
  height: auto !important;
}

.custom-prompt-content .modal-header {
  margin-bottom: 0.25rem;
  /* Minimal */
  display: flex;
  /* Ensure flex for alignment */
  align-items: center;
  /* Vertical center */
}

.custom-prompt-content .modal-header h2 {
  font-size: 1.125rem;
  /* Slightly smaller title */
  line-height: 1.2;
}

.custom-prompt-content .modal-body {
  margin-bottom: 0.5rem;
  /* Minimal */
}

.custom-prompt-content .modal-footer {
  margin-top: 0.5rem;
  /* Minimal */
  padding-top: 0;
}

.custom-prompt-input-wrapper {
  width: 100%;
}

.custom-prompt-input-wrapper input {
  width: 100%;
  text-align: left;
  max-width: none;
  font-size: 1rem;
  padding: 0.6rem 0.8rem;
  background: var(--bg-tertiary);
  /* Distinct input bg */
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius, 8px);
}

.custom-prompt-input-wrapper input:focus {
  border-color: var(--color-primary);
  outline: none;
}

/* Specific condensation for Infrasphere per user request */
#infrasphere-container {
  padding: 0.4rem 0.5rem;
  /* Tighter vertical padding */
  gap: 0.1rem;
  background: none;
  border: none;
  box-shadow: none;
}

#infrasphere-container h3 {
  margin-bottom: 0.2rem;
}

/* === Auth Modal Styling === */
.auth-modal-content {
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
}

.auth-modal-content h2 {
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
}

.auth-instructions {
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.9375rem;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.auth-security-notice {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid var(--color-warning);
  border-radius: var(--border-radius-lg);
  padding: 1rem;
  margin-bottom: 1.25rem;
}

.auth-security-notice strong {
  display: block;
  color: var(--color-warning);
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
}

.auth-security-notice p {
  color: var(--text-secondary);
  font-size: 0.8125rem;
  line-height: 1.6;
  margin: 0;
}

.auth-security-notice a {
  color: var(--color-warning);
  text-decoration: none;
  font-weight: 500;
}

.auth-security-notice a:hover {
  text-decoration: underline;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.auth-form input {
  font-size: 0.9375rem;
}

.auth-buttons {
  display: flex;
  gap: 0.875rem;
  margin-top: 0.875rem;
}

.auth-buttons button {
  flex: 1;
  justify-content: center;
}

.auth-footer-note {
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  margin-top: 1.25rem;
  margin-bottom: 0;
  line-height: 1.5;
}

.auth-error-message {
  color: var(--color-danger);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--color-danger);
  border-radius: var(--border-radius-lg);
  padding: 0.875rem;
  margin-bottom: 1.25rem;
  display: none;
  text-align: center;
  font-size: 0.875rem;
  word-wrap: break-word;
}

/* Forgot Password Link */
#forgot-password-link {
  display: block;
  text-align: center;
  margin: 0.75rem auto 0;
}

.btn-link {
  background: none;
  border: none;
  color: var(--color-accent);
  cursor: pointer;
  font-size: 0.875rem;
  text-decoration: underline;
  padding: 0.5rem;
}

.btn-link:hover {
  color: var(--text-primary);
}

/* === Account Settings Panel (Campaign Dashboard Style) === */
.account-settings-panel-content {
  width: 420px;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  margin: 5% auto;
  animation: slideIn 0.4s cubic-bezier(0.2, 0.0, 0, 1.0);
}

.account-settings-dashboard {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Account Info Card - styled like campaign-info-card */
.account-info-card {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  border: 2px solid var(--color-primary);
  border-radius: var(--border-radius-xl);
  padding: 1.25rem;
  box-shadow: var(--shadow-md);
}

.account-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.account-card-icon {
  width: 48px;
  height: 48px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.account-card-details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.account-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.account-email {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  word-break: break-all;
}

/* Action Cards */
.account-action-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-lg);
  padding: 1rem;
}

.account-action-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.875rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--border-secondary);
  color: var(--text-primary);
}

.account-action-header svg {
  color: var(--color-primary);
  flex-shrink: 0;
}

.account-action-header h4 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

.account-action-header.danger svg,
.account-action-header.danger h4 {
  color: var(--color-danger);
}

/* Account Forms */
.account-form {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.account-form input {
  font-size: 0.875rem;
  padding: 0.625rem 0.875rem;
}

/* Danger Card */
.account-danger-card {
  background: rgba(239, 68, 68, 0.05);
  border-color: rgba(239, 68, 68, 0.3);
}

.account-danger-desc {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin: 0 0 0.875rem 0;
  line-height: 1.5;
}

.btn-danger {
  background: var(--color-danger);
  color: white;
  border: none;
  padding: 0.75rem 1rem;
  border-radius: var(--border-radius-lg);
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-danger:hover {
  background: #dc2626;
  transform: translateY(-1px);
}

.btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Mobile responsiveness */
@media (max-width: 480px) {
  .account-settings-panel-content {
    width: 100%;
    max-width: none;
    border-radius: 16px;
  }

  .account-card-icon {
    width: 40px;
    height: 40px;
  }

  .account-card-icon svg {
    width: 20px;
    height: 20px;
  }
}

/* Forgot Password Modal */
.forgot-password-modal-content {
  max-width: 400px;
}

.forgot-password-desc {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  margin-bottom: 1.25rem;
  line-height: 1.6;
}

/* Account Settings Button */
#account-settings-btn {
  background: none;
  border: none;
  color: var(--color-accent);
  cursor: pointer;
  font-size: 0.8125rem;
  padding: 0.25rem 0.5rem;
  margin-left: 0.5rem;
  text-decoration: underline;
}

#account-settings-btn:hover {
  color: var(--text-primary);
}

/* === Cloud Save Button Styles === */
/* Default state uses neutral styling for readability, color shown on hover */
#save-cloud-button {
  background: var(--bg-primary);
  color: var(--text-secondary);
  border: none;
}

#save-cloud-button:not(:disabled):hover {
  background: rgba(139, 92, 246, 0.15);
  color: var(--color-accent);
}

#save-cloud-button:disabled {
  background: var(--bg-primary);
  color: var(--text-secondary);
  border: none;
  cursor: not-allowed;
  opacity: 0.4;
}

#save-cloud-button:disabled:hover {
  transform: none;
  box-shadow: none;
  background: transparent;
}

/* === Endicott Sheet Styles === */
.hidden-section {
  display: none !important;
}

#endicott-traits.endicott-traits-visible {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  animation: fadeIn 0.5s ease;
}

#class-schedule-container.schedule-visible,
#endicott-storage-container.storage-visible {
  display: block;
  animation: fadeIn 0.5s ease;
}

#class-schedule-container {
  margin-top: 1.5rem;
}

.percentage-display {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 0.625rem;
  text-align: center;
}

.schedule-table td:first-child {
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}

.schedule-table input {
  font-size: 0.875rem;
}

/* === Campaign System Styles === */
.campaign-modal-content {
  max-width: 1200px;
  width: 95vw;
}

/* Campaign Dashboard Layout - Two column: Roll Log | Tabs */
.campaign-dashboard {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
}

/* Two-column layout when roll log is visible */
.campaign-dashboard.has-roll-log {
  grid-template-columns: 280px 1fr;
}

@media (max-width: 1200px) {
  .campaign-dashboard.has-roll-log {
    grid-template-columns: 240px 1fr;
  }
}

@media (max-width: 968px) {
  .campaign-dashboard {
    grid-template-columns: 1fr;
    height: auto;
    min-height: auto;
  }

  .campaign-dashboard.has-roll-log {
    grid-template-columns: 1fr;
  }

  .campaign-dashboard-roll-log {
    order: 1;
  }

  .campaign-dashboard-roll-log #roll-log-display {
    max-height: 300px;
  }
}

/* Campaign Tab Section */
.campaign-tab-section {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.campaign-tabs {
  margin-top: 0;
}

.campaign-tabs .tab-content {
  margin-top: 0.75rem;
}

/* Campaign Management Tab Grid */
.campaign-management-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1.5rem;
}

.campaign-management-left,
.campaign-management-right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (max-width: 968px) {
  .campaign-management-grid {
    grid-template-columns: 1fr;
  }

  .campaign-management-right {
    order: -1;
  }
}

/* Combat Flow Tab Grid */
.combat-flow-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/* Two-column layout when GM controls are visible */
.combat-flow-grid.gm-view {
  grid-template-columns: 1.5fr 280px;
}

@media (max-width: 968px) {
  .combat-flow-grid.gm-view {
    grid-template-columns: 1fr;
  }
}



/* Roll Log Tab Styles */
#roll-log-tab.active {
  display: flex;
  flex-direction: column;
}

#roll-log-tab .roll-log-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
}

#roll-log-tab .card-header {
  flex-shrink: 0;
  margin-bottom: 1rem;
}


#roll-log-tab .roll-log-display-container {
  flex: 1;
  overflow-y: auto;
  min-height: 500px;
  height: 70vh;
  /* Use fixed height relative to viewport to ensure full usage */
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-md);
  padding: 0.5rem;
}


.join-create-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.join-create-container .dashboard-card {
  margin: 0;
}

/* === Character Sheet Visibility === */
.character-sheet,
.app-header-logo,
.version-info,
.floating-action-btn-container,
/* Assuming a container, or we target the buttons directly */
#instructions-toggle-button,
#theme-button,
#sheet-button,
#dice-roller-button {
  display: none !important;
  /* Force hide by default */
}

/* When the sheet is visible, we show these too. 
   We'll use a body class 'app-authenticated' to make this cleaner and easier to manage. 
*/
body.app-authenticated .character-sheet {
  display: flex !important;
  flex-direction: column;
}

body.app-authenticated .app-header-logo {
  display: block !important;
}

body.app-authenticated .version-info {
  display: block !important;
}

body.app-authenticated #instructions-toggle-button,
body.app-authenticated #theme-button,
body.app-authenticated #sheet-button,
body.app-authenticated #dice-roller-button {
  display: flex !important;
  /* These are flex buttons usually */
}

/* Campaign button has its own logic, but base visibility is allowed when auth'd */


/* === Auth Modal Logo === */
.auth-logo {
  text-align: center;
  font-size: 3rem;
  margin-bottom: 1rem;
  margin-top: 0;
  line-height: 1;
}

/* --- Tour Offer Modal --- */
.tour-offer-modal-content {
  background: linear-gradient(135deg, var(--bg-dark) 0%, #1a1a20 100%);
  border: 1px solid var(--border-color);
  text-align: center;
  max-width: 400px;
  /* Reduced width */
  padding: 1.5rem;
  /* Reduced padding */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tour-title {
  font-family: 'Cinzel', serif;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
  font-size: 1.8rem;
  /* Slightly smaller */
  text-shadow: 0 0 10px rgba(220, 38, 38, 0.3);
}

.tour-description {
  font-size: 1rem;
  margin-bottom: 1.5rem;
  color: var(--text-color);
  line-height: 1.4;
}

.tour-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  width: 100%;
}

.tour-actions .btn {
  min-width: 100px;
  /* Consistent button width */
}

/* --- Character Creation Wizard --- */
#character-wizard-modal,
#new-sheet-prompt-modal {
  z-index: 1002;
}

/* Ensure confirmation dialogs appear above wizard */
#save-conflict-modal {
  z-index: 1003;
}

/* Compact confirmation dialog styling */
#save-conflict-modal .modal-content {
  max-width: 340px;
  padding: 1rem 1.25rem;
}

#save-conflict-modal h2 {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}

#save-conflict-modal p {
  font-size: 0.85rem;
  line-height: 1.35;
  margin-bottom: 0.75rem;
}

#save-conflict-modal .sheet-select-actions {
  gap: 0.5rem;
}

/* Delete Confirmation Modal */
#delete-confirmation-modal {
  z-index: 1003;
}

#delete-confirmation-modal .modal-content {
  max-width: 380px;
  padding: 1.5rem;
}

#delete-confirmation-modal h2 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--color-danger);
}

#delete-confirmation-modal p {
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 1rem;
  color: var(--text-secondary);
}

.delete-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.delete-option {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background: var(--bg-secondary);
  border: 2px solid transparent;
  transition: all 0.2s ease;
}

.delete-option:hover {
  background: var(--bg-tertiary);
  border-color: var(--border-primary);
}

.delete-option:has(input:checked) {
  background: rgba(239, 68, 68, 0.1);
  border-color: var(--color-danger);
}

.delete-option input[type="radio"] {
  display: none;
}

.delete-option-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}

.delete-option-icon {
  font-size: 1.25rem;
}

.delete-option-label {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary);
}

.delete-confirmation-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

.delete-confirmation-actions .btn {
  padding: 0.6rem 1.25rem;
  font-size: 0.875rem;
}

.new-sheet-prompt-modal-content {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  text-align: center;
  max-width: 300px;
  width: auto;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin: 15% auto;
}

/* Ensure buttons have readable text in this modal */
.new-sheet-prompt-modal-content .btn-primary {
  background: var(--color-primary);
  color: #000;
}

.new-sheet-prompt-modal-content .btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color, var(--border-primary));
}

.new-sheet-prompt-modal-content .wizard-title {
  font-size: 1.1rem;
  margin-bottom: 0;
}

.wizard-title {
  font-family: var(--font-display, 'Cinzel', serif);
  color: var(--color-primary);
  margin: 0;
  font-size: 1.6rem;
}

.wizard-description {
  font-size: 1rem;
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Stacked options for new sheet prompt */
.new-sheet-options-stacked {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
}

.new-sheet-option-btn-stacked {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  padding: 0.5rem 0.85rem;
  text-align: left;
  width: 100%;
}

.new-sheet-option-btn-stacked .option-title {
  font-weight: 700;
  font-size: 0.9rem;
  color: inherit;
}

.new-sheet-option-btn-stacked .option-desc {
  font-size: 0.7rem;
  opacity: 0.85;
  font-weight: 400;
  color: inherit;
}

.btn-ghost {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: color 0.2s ease;
}

.btn-ghost:hover {
  color: var(--text-primary);
}

.btn-ghost.btn-small {
  font-size: 0.75rem;
  padding: 0.25rem 0.6rem;
}

/* Character Wizard Modal Content */
.character-wizard-modal-content {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  max-width: 650px;
  width: 95%;
  padding: 1.5rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-height: 90vh;
  overflow: hidden;
}

/* Wizard Progress Dots */
.wizard-progress {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

.wizard-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all 0.3s ease;
  cursor: pointer;
}

.wizard-dot:hover {
  border-color: var(--color-primary);
}

.wizard-dot.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
  transform: scale(1.1);
}

.wizard-dot.completed {
  background: var(--color-success, #22c55e);
  border-color: var(--color-success, #22c55e);
  color: white;
}

.wizard-dot.completed span {
  display: none;
}

.wizard-dot.completed::after {
  content: '\2713';
  font-size: 0.875rem;
}

/* Wizard Step Container */
.wizard-step-container {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
  min-height: 300px;
  max-height: calc(90vh - 200px);
}

.wizard-step {
  display: none;
  animation: wizardFadeIn 0.3s ease;
}

.wizard-step.active {
  display: block;
}

@keyframes wizardFadeIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.wizard-step-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.wizard-step-title {
  font-family: var(--font-display, 'Cinzel', serif);
  color: var(--color-primary);
  font-size: 1.4rem;
  margin: 0 0 0.5rem 0;
}

.wizard-step-message {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin: 0;
  font-style: italic;
}

/* Wizard Actions */
.wizard-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

.wizard-nav-buttons {
  display: flex;
  gap: 0.75rem;
}

/* Wizard Form Elements */
.wizard-input-group {
  margin-bottom: 1.25rem;
}

.wizard-input-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--text-primary);
}

.wizard-input {
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: 1.1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  color: var(--text-primary);
  transition: border-color 0.2s ease;
}

.wizard-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.wizard-input::placeholder {
  color: var(--text-secondary);
}

/* Dev code input styling */
.wizard-devcode-group {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

.wizard-devcode-group label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.wizard-input-small {
  padding: 0.625rem 0.875rem;
  font-size: 0.9rem;
}

/* Path Selection Cards */
.path-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-top: 1rem;
}

@media (max-width: 500px) {
  .path-grid {
    grid-template-columns: 1fr;
  }
}

.path-card {
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.path-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.path-card.selected {
  border-color: var(--color-primary);
  background: var(--bg-tertiary);
  box-shadow: 0 0 15px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.path-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.path-card-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
}

.path-card-die {
  font-size: 0.8rem;
  padding: 0.2rem 0.5rem;
  background: var(--bg-tertiary);
  border-radius: var(--border-radius-sm);
  color: var(--color-primary);
  font-weight: 600;
}

.path-card-description {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.path-card-stats {
  display: flex;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.path-card-stat {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.path-card-stat strong {
  color: var(--text-primary);
}

/* Path Details Panel */
.path-details-panel {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: 1rem;
  margin-top: 1rem;
  display: none;
}

.path-details-panel.visible {
  display: block;
  animation: wizardFadeIn 0.3s ease;
}

.path-details-panel h4 {
  margin: 0 0 0.75rem 0;
  color: var(--color-primary);
  font-size: 1rem;
}

.path-talent-preview {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.path-talent-preview strong {
  color: var(--text-primary);
}

/* Trait Allocation */
.trait-allocation-section {
  margin-top: 1rem;
}

.trait-choice-group {
  display: flex;
  gap: 1rem;
  margin-top: 0.75rem;
}

.trait-choice-btn {
  flex: 1;
  padding: 1rem;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.trait-choice-btn:hover {
  border-color: var(--color-primary);
}

.trait-choice-btn.selected {
  border-color: var(--color-primary);
  background: var(--bg-tertiary);
}

.trait-choice-btn span {
  display: block;
  font-weight: 600;
  color: var(--text-primary);
  text-transform: capitalize;
}

.trait-choice-btn small {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Pathless Trait Allocation */
.pathless-allocation {
  margin-top: 1rem;
}

.pathless-dice-remaining {
  text-align: center;
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: var(--bg-tertiary);
  border-radius: var(--border-radius-md);
}

.pathless-dice-remaining strong {
  color: var(--color-primary);
  font-size: 1.25rem;
}

.pathless-trait-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

@media (max-width: 500px) {
  .pathless-trait-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.pathless-trait-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
}

.pathless-trait-item label {
  font-size: 0.75rem;
  text-transform: capitalize;
  color: var(--text-secondary);
}

.pathless-trait-item .trait-stepper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pathless-trait-item button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.pathless-trait-item button:hover:not(:disabled) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.pathless-trait-item button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pathless-trait-item .trait-value {
  font-weight: 700;
  font-size: 1rem;
  min-width: 20px;
  text-align: center;
  color: var(--color-primary);
}

/* Weapon/Power Entry Rows */
.equipment-section {
  margin-top: 1rem;
}

.equipment-row {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  align-items: center;
}

.equipment-row .equipment-name {
  flex: 2;
}

.equipment-row .equipment-range {
  flex: 1;
}

.equipment-row input,
.equipment-row select {
  width: 100%;
  padding: 0.625rem 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  color: var(--text-primary);
  font-size: 0.9rem;
}

.equipment-row input:focus,
.equipment-row select:focus {
  outline: none;
  border-color: var(--color-primary);
}

.equipment-row .remove-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.equipment-row .remove-btn:hover {
  background: var(--color-danger, #ef4444);
  border-color: var(--color-danger, #ef4444);
  color: white;
}

/* Power Entry with Description */
.power-entry-row {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  padding: 0.75rem;
  margin-bottom: 0.75rem;
}

.power-entry-row .power-header {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.power-entry-row .power-header input,
.power-entry-row .power-header select {
  padding: 0.5rem 0.625rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  color: var(--text-primary);
  font-size: 0.85rem;
}

.power-entry-row .power-name {
  flex: 2;
}

.power-entry-row .power-range {
  flex: 1;
}

.power-entry-row textarea {
  width: 100%;
  padding: 0.5rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  color: var(--text-primary);
  font-size: 0.85rem;
  resize: vertical;
  min-height: 50px;
}

.power-entry-row .remove-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

/* Example Items Grid */
.examples-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

.examples-section h4 {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0 0 0.75rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.examples-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.5rem;
}

.example-item {
  padding: 0.5rem 0.75rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.example-item:hover {
  border-color: var(--color-primary);
  background: var(--bg-secondary);
}

.example-item .example-name {
  font-size: 0.85rem;
  color: var(--text-primary);
  font-weight: 500;
}

.example-item .example-range {
  font-size: 0.7rem;
  color: var(--text-secondary);
}

/* Example item with description (for powers) */
.example-item.power-example {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.example-item .example-description {
  font-size: 0.7rem;
  color: var(--text-secondary);
  line-height: 1.3;
  opacity: 0.8;
}

/* Disabled example items */
.example-item.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* No examples message */
.no-examples-msg {
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-style: italic;
  padding: 1rem;
}

/* Weapons/Powers counter */
.weapons-counter,
.powers-counter {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
  padding: 0.5rem;
  background: var(--bg-tertiary);
  border-radius: var(--border-radius-md);
}

.weapons-counter strong,
.powers-counter strong {
  color: var(--color-primary);
}

.slots-remaining {
  margin-left: 0.5rem;
  font-size: 0.8rem;
  opacity: 0.8;
}

/* Powers grid - larger items for descriptions */
.powers-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* Path card detailed view */
.path-card-details {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color);
}

.path-card-bonus,
.path-card-talent {
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
}

.path-card-label {
  color: var(--text-secondary);
  display: block;
  margin-bottom: 0.15rem;
}

.path-card-bonus span:not(.path-card-label) {
  color: var(--text-primary);
  font-weight: 500;
}

.path-card-talent .talent-name {
  color: var(--color-primary);
  font-weight: 600;
  display: block;
}

.path-card-talent .talent-description {
  color: var(--text-secondary);
  font-size: 0.7rem;
  line-height: 1.4;
  margin: 0.25rem 0 0 0;
  opacity: 0.9;
}

/* Armor Selection */
.armor-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-top: 1rem;
}

@media (max-width: 450px) {
  .armor-options {
    grid-template-columns: 1fr;
  }
}

.armor-option {
  padding: 1rem;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.armor-option:hover {
  border-color: var(--color-primary);
}

.armor-option.selected {
  border-color: var(--color-primary);
  background: var(--bg-tertiary);
}

.armor-option-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.armor-option-stats {
  display: flex;
  justify-content: center;
  gap: 1rem;
  font-size: 0.8rem;
}

.armor-stat-pro {
  color: var(--color-success, #22c55e);
}

.armor-stat-con {
  color: var(--color-danger, #ef4444);
}

/* No Powers Toggle */
.powers-toggle {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.powers-toggle-btn {
  flex: 1;
  padding: 0.875rem;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  font-weight: 500;
  color: var(--text-primary);
}

.powers-toggle-btn:hover {
  border-color: var(--color-primary);
}

.powers-toggle-btn.selected {
  border-color: var(--color-primary);
  background: var(--bg-tertiary);
}

/* Level & Rolling Section */
.level-section {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.level-input-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
}

.level-input-group label {
  font-weight: 500;
  color: var(--text-primary);
}

.level-input-group input {
  width: 80px;
  padding: 0.75rem;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  color: var(--text-primary);
}

.level-bonuses-preview {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  padding: 1rem;
  font-size: 0.875rem;
}

.level-bonuses-preview h4 {
  margin: 0 0 0.5rem 0;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.level-bonuses-preview ul {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--text-secondary);
}

.level-bonuses-preview li {
  margin-bottom: 0.25rem;
}

.roll-method-section {
  margin-top: 1rem;
}

.roll-method-toggle {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.roll-method-btn {
  flex: 1;
  padding: 0.75rem;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  font-weight: 500;
  color: var(--text-primary);
}

.roll-method-btn:hover {
  border-color: var(--color-primary);
}

.roll-method-btn.selected {
  border-color: var(--color-primary);
  background: var(--bg-tertiary);
}

.digital-roll-area {
  text-align: center;
  padding: 1rem;
  background: var(--bg-secondary);
  border-radius: var(--border-radius-lg);
}

.roll-dice-btn {
  padding: 0.875rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  background: var(--color-primary);
  border: none;
  border-radius: var(--border-radius-md);
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
}

.roll-dice-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px color-mix(in srgb, var(--color-primary) 50%, transparent);
}

.roll-results {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.roll-result-die {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border: 2px solid var(--color-primary);
  border-radius: var(--border-radius-md);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-primary);
  animation: rollIn 0.3s ease;
}

@keyframes rollIn {
  from {
    transform: rotateZ(-180deg) scale(0);
    opacity: 0;
  }

  to {
    transform: rotateZ(0) scale(1);
    opacity: 1;
  }
}

.roll-total {
  margin-top: 0.75rem;
  font-size: 1.1rem;
  color: var(--text-primary);
}

.roll-total strong {
  color: var(--color-primary);
  font-size: 1.25rem;
}

.manual-roll-area {
  padding: 1rem;
  background: var(--bg-secondary);
  border-radius: var(--border-radius-lg);
}

.manual-roll-area label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.manual-roll-area input {
  width: 100%;
  padding: 0.75rem;
  text-align: center;
  font-size: 1.25rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  color: var(--text-primary);
}

.manual-roll-instructions {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-style: italic;
}

.lp-calculation {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--color-primary);
  border-radius: var(--border-radius-lg);
  text-align: center;
}

.lp-calculation h4 {
  margin: 0 0 0.5rem 0;
  color: var(--text-primary);
}

.lp-total {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
}

.lp-breakdown {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

/* Save Options */
.save-options-section {
  text-align: center;
}

.save-options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin: 1.5rem 0;
}

@media (max-width: 450px) {
  .save-options-grid {
    grid-template-columns: 1fr;
  }
}

.save-option-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.25rem 1rem;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  cursor: pointer;
  transition: all 0.2s ease;
}

.save-option-btn:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.save-option-btn svg {
  width: 32px;
  height: 32px;
  color: var(--color-primary);
}

.save-option-btn span {
  font-weight: 600;
  color: var(--text-primary);
}

.save-option-btn small {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.completion-message {
  padding: 1.5rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--color-primary);
  border-radius: var(--border-radius-lg);
  margin-top: 1rem;
}

.completion-message h3 {
  margin: 0 0 0.5rem 0;
  color: var(--color-primary);
  font-family: var(--font-display, 'Cinzel', serif);
}

.completion-message p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.5;
}

.skip-save-btn {
  margin-top: 1rem;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  text-decoration: underline;
}

.skip-save-btn:hover {
  color: var(--text-primary);
}

/* =====================================================
   ENDICOTT WIZARD STYLES
   ===================================================== */

/* Endicott Welcome Step */
.endicott-welcome-step .wizard-step-header {
  margin-bottom: 1.5rem;
}

.endicott-welcome-content {
  text-align: center;
  padding: 1rem;
}

.endicott-crest {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem auto;
  background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crest-icon {
  font-size: 2.5rem;
  color: var(--color-primary);
}

.endicott-flavor-text {
  color: var(--text-secondary);
  line-height: 1.7;
  font-style: italic;
  margin: 1rem 0;
  text-align: left;
}

.endicott-note {
  background: var(--bg-tertiary);
  border: 1px solid var(--color-info);
  border-radius: var(--border-radius-md);
  padding: 1rem;
  margin-top: 1.5rem;
  text-align: left;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.endicott-note strong {
  color: var(--color-info);
}

/* Archetype Cards */
.archetypes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-top: 1rem;
}

@media (max-width: 600px) {
  .archetypes-grid {
    grid-template-columns: 1fr;
  }
}

.archetype-card {
  padding: 1rem;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  cursor: pointer;
  transition: all 0.2s ease;
}

.archetype-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.archetype-card.selected {
  border-color: var(--color-primary);
  background: var(--bg-tertiary);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb, 139, 69, 19), 0.2);
}

.archetype-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.archetype-card-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
}

.archetype-card-money {
  font-size: 0.8rem;
  color: var(--color-success);
  font-weight: 600;
}

.archetype-card-description {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 0.75rem;
}

.archetype-card-details {
  font-size: 0.75rem;
  border-top: 1px solid var(--border-color);
  padding-top: 0.75rem;
}

.archetype-card-bonuses,
.archetype-card-complication {
  margin-bottom: 0.5rem;
}

.archetype-card-label {
  color: var(--text-tertiary);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 0.25rem;
}

.archetype-card-bonuses span:not(.archetype-card-label) {
  color: var(--color-success);
  font-weight: 600;
}

.complication-text {
  color: var(--text-secondary);
  font-size: 0.75rem;
  line-height: 1.4;
}

/* Endicott Powers / Gifts from the Snow */
.endicott-powers-info {
  margin-top: 1rem;
}

.powers-note {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.powers-note h4 {
  margin: 0 0 0.75rem 0;
  color: var(--text-primary);
  font-size: 1rem;
}

.powers-note p {
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0.5rem 0;
  font-size: 0.875rem;
}

.powers-note ul {
  margin: 0.75rem 0;
  padding-left: 1.5rem;
}

.powers-note li {
  color: var(--text-secondary);
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
}

.powers-note .warning-text {
  color: var(--color-warning);
  font-weight: 600;
  font-size: 0.8rem;
}

.gifts-reference {
  margin-top: 1rem;
}

.gifts-reference h4 {
  margin: 0 0 0.75rem 0;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.gifts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  max-height: 250px;
  overflow-y: auto;
}

@media (max-width: 600px) {
  .gifts-grid {
    grid-template-columns: 1fr;
  }
}

.gift-preview-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  padding: 0.625rem;
  font-size: 0.75rem;
}

.gift-header {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.375rem;
  flex-wrap: wrap;
}

.gift-name {
  font-weight: 600;
  color: var(--text-primary);
}

.gift-type {
  background: var(--bg-tertiary);
  padding: 0.125rem 0.375rem;
  border-radius: var(--border-radius-sm);
  font-size: 0.65rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
}

.gift-range {
  color: var(--text-secondary);
  font-size: 0.65rem;
}

.gift-description {
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
}

/* Gifts Selection (Interactive) */
.gifts-counter {
  background: var(--bg-tertiary);
  padding: 0.75rem 1rem;
  border-radius: var(--border-radius-md);
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.gifts-counter .slots-remaining {
  color: var(--text-secondary);
  font-size: 0.8rem;
  margin-left: 0.5rem;
}

.gifts-selected-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.gift-selected-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-tertiary);
  border: 1px solid var(--color-primary);
  border-radius: var(--border-radius-md);
  padding: 0.625rem 0.875rem;
}

.gift-selected-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.gift-selected-name {
  font-weight: 600;
  color: var(--text-primary);
}

.gift-selected-type {
  background: var(--bg-secondary);
  padding: 0.125rem 0.375rem;
  border-radius: var(--border-radius-sm);
  font-size: 0.65rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
}

.gift-selected-range {
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.gift-selected-row .remove-btn {
  background: transparent;
  border: none;
  color: var(--color-danger);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
}

.gift-selected-row .remove-btn:hover {
  color: var(--text-primary);
}

.gifts-selectable {
  max-height: 300px;
}

.gift-selectable-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  padding: 0.625rem;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.gift-selectable-item:hover:not(.disabled):not(.selected) {
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

.gift-selectable-item.selected {
  border-color: var(--color-primary);
  background: var(--bg-tertiary);
  opacity: 0.6;
  cursor: default;
}

.gift-selectable-item.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Archetype Dropdown (Main Sheet) */
.archetype-dropdown-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  width: 100%;
}

.archetype-dropdown-group select {
  width: 100%;
}

.archetype-dropdown-group.custom-mode #custom-archetype-name {
  display: block;
  margin-top: 0.375rem;
}

#custom-archetype-name.hidden {
  display: none;
}

/* Add Button */
.add-equipment-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem;
  background: var(--bg-tertiary);
  border: 2px dashed var(--border-color);
  border-radius: var(--border-radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.add-equipment-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Dashboard Cards */
.dashboard-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-lg);
  padding: 1.25rem;
}

.dashboard-card h3 {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dashboard-card h3 svg {
  color: var(--color-primary);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.card-header h3 {
  margin: 0;
}

/* Campaign Info Card */
.campaign-info-card {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  border: 2px solid var(--color-primary);
  border-radius: var(--border-radius-xl);
  padding: 1.5rem;
  box-shadow: var(--shadow-md);
}

.campaign-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-primary);
  margin-bottom: 1rem;
}

.campaign-card-header h3 {
  margin: 0 0 0.5rem 0;
  color: var(--text-primary);
  font-size: 1.25rem;
  font-weight: 600;
}

.campaign-role-badge {
  padding: 0.375rem 0.75rem;
  border-radius: var(--border-radius-md);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.gm-badge {
  background: var(--color-accent);
  color: white;
}

.player-badge {
  background: var(--color-primary);
  color: white;
}

.campaign-code-section {
  margin-bottom: 0;
}

.campaign-code-section label {
  display: block;
  font-size: 0.7rem;
  color: var(--text-secondary);
  margin-bottom: 0.375rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.code-display-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.code-display-group .btn-icon {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.campaign-code-display {
  flex: 1;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-md);
  padding: 0.5rem 0.75rem;
  font-family: monospace;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--color-primary);
  text-align: center;
}

.btn-icon {
  padding: 0.5rem;
  min-width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-icon:hover {
  background: var(--bg-tertiary);
  border-color: var(--color-primary);
}

.btn-small {
  padding: 0.5rem;
  min-width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-small svg {
  width: 14px;
  height: 14px;
}

.btn-full {
  width: 100%;
  justify-content: center;
  gap: 0.5rem;
}

.campaign-actions {
  display: flex;
  gap: 0.75rem;
  flex-direction: column;
  margin-top: 1rem;
}

.campaign-actions button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Empty State */
.campaign-status-empty {
  background: var(--bg-secondary);
  border: 2px dashed var(--border-primary);
  border-radius: var(--border-radius-lg);
  padding: 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.campaign-status-empty svg {
  color: var(--text-tertiary);
  opacity: 0.5;
  margin-bottom: 0.5rem;
}

.campaign-status.active {
  background: rgba(16, 185, 129, 0.1);
  border-color: var(--color-success);
}

.status-text {
  margin: 0;
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--text-primary);
}

.status-subtext {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.campaign-section {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-primary);
}

.campaign-section:last-child {
  border-bottom: none;
}

.campaign-section h3 {
  margin: 0 0 0.75rem 0;
  font-size: 1rem;
  color: var(--text-primary);
}

.campaign-info {
  margin: 0 0 0.75rem 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.campaign-join-form {
  display: flex;
  gap: 0.75rem;
  flex-direction: column;
}

.campaign-join-form input {
  text-transform: uppercase;
}

#campaign-code-display {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--bg-secondary);
  border-radius: var(--border-radius-lg);
  text-align: center;
}

#campaign-code-display p {
  margin: 0 0 0.75rem 0;
}

#campaign-code-text {
  font-size: 1.5rem;
  color: var(--color-primary);
  font-family: monospace;
  letter-spacing: 0.2em;
}

#campaign-members-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.campaign-member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-md);
}

.member-info {
  display: flex;
  flex-direction: column;
}

.member-name {
  font-weight: 600;
  color: var(--text-primary);
}

.member-role {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.member-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.view-sheet-btn {
  padding: 0.375rem 0.75rem;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  font-size: 0.75rem;
  transition: all 0.2s ease;
}

.view-sheet-btn:hover {
  background: var(--color-primary-dark);
}

.charge-money-btn {
  padding: 0.375rem 0.75rem;
  background: var(--color-accent);
  color: white;
  border: none;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  font-size: 0.75rem;
  transition: all 0.2s ease;
}

.charge-money-btn:hover {
  filter: brightness(1.1);
}

/* Charge modal type buttons */
.charge-type-btn {
  font-size: 0.75rem;
  padding: 0.5rem;
}

.charge-type-btn.active {
  background: var(--color-primary);
  color: white;
}

#roll-log-display {
  max-height: 300px;
  overflow-y: auto;
  margin-top: 1rem;
}

.roll-entry {
  padding: 1.5rem;
  /* More padding */
  margin-bottom: 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-md);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* Space between header and dice */
}

.roll-entry.private-roll {
  background: rgba(139, 92, 246, 0.1);
  border-color: var(--color-accent);
}

.roll-header {
  display: flex;
  flex-direction: column;
  /* Stack header items */
  align-items: center;
  /* Center header items */
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.roll-player {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 1.25rem;
  /* Larger player name */
}

.roll-timestamp {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.roll-details {
  font-size: 1.1rem;
  /* Larger details */
  color: var(--text-secondary);
  text-align: center;
}

.roll-result {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Center dice */
  gap: 0.5rem;
}



.roll-visibility-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  background: var(--color-accent);
  color: white;
  border-radius: var(--border-radius-sm);
  font-size: 0.625rem;
  text-transform: uppercase;
  margin-left: 0.5rem;
}

/* Money Log Styles */
#money-log-display,
.money-log-display-container {
  max-height: 400px;
  overflow-y: auto;
  margin-top: 1rem;
}

.money-entry {
  padding: 1rem;
  margin-bottom: 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-md);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.money-entry.transaction-spend {
  border-left: 3px solid var(--color-warning);
}

.money-entry.transaction-charge {
  border-left: 3px solid var(--color-danger);
}

.money-entry.transaction-pay {
  border-left: 3px solid var(--color-success);
}

.money-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.money-player {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 1rem;
}

.money-timestamp {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.money-details {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.money-type-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: var(--border-radius-sm);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
}

.money-type-badge.spend {
  background: var(--color-warning);
  color: white;
}

.money-type-badge.charge {
  background: var(--color-danger);
  color: white;
}

.money-type-badge.pay {
  background: var(--color-success);
  color: white;
}

.money-amount {
  font-weight: 700;
  font-size: 1.1rem;
}

.money-amount.negative {
  color: var(--color-danger);
}

.money-amount.positive {
  color: var(--color-success);
}

.money-balance {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.money-reason {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* Campaign List Items */
.campaign-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-md);
  margin-bottom: 0.5rem;
  transition: all 0.2s ease;
}

.campaign-list-item:hover {
  border-color: var(--color-primary);
}

.campaign-list-item.current-campaign {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, var(--bg-secondary) 100%);
  border-color: var(--color-accent);
}

.campaign-list-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.campaign-list-name {
  font-weight: 600;
  color: var(--text-primary);
}

.campaign-list-role {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.campaign-list-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.current-badge {
  padding: 0.25rem 0.75rem;
  background: var(--color-accent);
  color: white;
  border-radius: var(--border-radius-sm);
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 600;
}

/* Roll Notifications */
.roll-notification {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.roll-notification-header {
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.roll-notification-body {
  font-size: 0.8125rem;
  opacity: 0.9;
}

.roll-notification-results {
  font-family: monospace;
  font-size: 0.75rem;
  opacity: 0.85;
  margin-top: 0.25rem;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

@media (max-width: 900px) {
  .campaign-join-form {
    flex-direction: column;
  }

  .roll-notification {
    right: 1rem;
    min-width: 200px;
    max-width: calc(100vw - 2rem);
  }
}

/* === Read-Only Sheet Modal === */
.readonly-sheet-modal-content {
  max-width: 900px;
  max-height: 80vh;
  overflow-y: auto;
}

#readonly-sheet-content {
  background: var(--bg-secondary);
  border-radius: var(--border-radius-lg);
  padding: 1.5rem;
}

/* Make readonly inputs look good but non-interactive */
.readonly-sheet-wrapper input[readonly],
.readonly-sheet-wrapper textarea[readonly] {
  background-color: transparent;
  border: 1px solid var(--border-primary);
  cursor: default;
  color: var(--text-primary);
  opacity: 0.9;
}

.readonly-sheet-wrapper input[type="checkbox"][disabled] {
  cursor: default;
}

/* Ensure tabs in modal work */
.internal-tab-content {
  display: none;
}

.internal-tab-content.active {
  display: block;
  animation: fadeIn 0.3s ease-in;
}

/* Inactive Participants Section */
#inactive-participants-section {
  opacity: 0.8;
  background-color: var(--color-surface-dim);
  border: 1px dashed var(--border-primary);
}

#inactive-participants-section h3 {
  color: var(--text-muted);
}

#inactive-participants-list .turn-order-item {
  opacity: 0.7;
  filter: grayscale(0.5);
  background-color: transparent;
  border-color: var(--border-subtle);
}

#inactive-participants-list .turn-order-item:hover {
  opacity: 1;
  filter: grayscale(0);
  background-color: var(--color-surface);
}

#inactive-participants-list .turn-order-position {
  display: none;
  /* Hide position for inactive */
}

/* Number Input Modal */
#number-input-modal .clean-input {
  width: 100%;
  padding: 12px;
  border: 2px solid var(--border-primary);
  border-radius: var(--border-radius-md);
  background-color: var(--bg-input);
  color: var(--text-primary);
  font-family: var(--font-primary);
  transition: all 0.2s ease;
}

#number-input-modal .clean-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light-alpha);
  outline: none;
}

/* Edit Initiative Button */
.btn-icon.edit-init {
  color: var(--color-info);
}

.btn-icon.toggle-active {
  color: var(--text-muted);
}

.turn-order-item.inactive .btn-icon.toggle-active {
  color: var(--color-success);
}




/* === Sheet Selection Modal === */
.sheet-select-modal-content {
  max-width: 500px;
}

.sheet-select-list {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 1rem;
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-md);
}

.sheet-select-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-primary);
  cursor: pointer;
  transition: background 0.15s ease;
}

.sheet-select-item:last-child {
  border-bottom: none;
}

.sheet-select-item:hover {
  background: var(--bg-tertiary);
}

.sheet-select-item.selected {
  background: var(--color-primary);
  color: white;
}

.sheet-select-item-name {
  font-weight: 500;
}

.sheet-select-item-source {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.sheet-select-item.selected .sheet-select-item-source {
  color: rgba(255, 255, 255, 0.8);
}

.sheet-select-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.sheet-select-empty {
  padding: 2rem;
  text-align: center;
  color: var(--text-secondary);
}

/* === Actions Per Turn Field === */
.actions-per-turn-box {
  min-width: 90px;
}

.actions-per-turn-box input {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 600;
}

/* === Combat Flow Panel Styles === */

/* Combat Flow Button */
/* Combat Flow Columns (within tab) */
.combat-flow-left,
.combat-flow-right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Status Indicator */
.combat-status-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: var(--bg-tertiary);
  border-radius: var(--border-radius-md);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.status-dot.active {
  background: var(--color-success);
  box-shadow: 0 0 8px var(--color-success);
  animation: pulse-dot 2s infinite;
}

.status-dot.inactive {
  background: var(--text-secondary);
}

@keyframes pulse-dot {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

.status-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Combat Header Controls (Round Counter + Navigation) */
.combat-header-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  border-radius: var(--border-radius-lg);
  color: white;
}

.combat-header-controls .combat-round-counter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  background: none;
  border-radius: 0;
}

.combat-header-controls .combat-navigation {
  display: flex;
  gap: 0.5rem;
}

.combat-header-controls .btn-sm {
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
}

/* Standalone Round Counter (fallback) */
.combat-round-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  border-radius: var(--border-radius-lg);
  color: white;
}

.round-label {
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.round-number {
  font-size: 2rem;
  font-weight: 700;
}

/* Turn Order List */
#turn-order-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 500px;
  overflow-y: auto;
}

.turn-order-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-md);
  transition: all 0.3s ease;
}

.turn-order-item.no-transition {
  transition: none !important;
}

.turn-order-item.current-turn {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, var(--bg-secondary) 100%);
  border-color: var(--color-primary);
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.2);
}

/* Faction-based styling (replaces type-based) */
.turn-order-item.faction-enemy {
  border-left: 3px solid var(--color-danger);
}

.turn-order-item.faction-ally {
  border-left: 3px solid var(--color-success);
}

/* Legacy type styling - kept for backwards compatibility but faction takes priority */
.turn-order-item.enemy:not(.faction-ally) {
  border-left: 3px solid var(--color-danger);
}

.turn-order-item.player:not(.faction-enemy) {
  border-left: 3px solid var(--color-success);
}

/* GM Character with ally faction gets green, enemy faction gets red */
.turn-order-item.gm-character.faction-ally {
  border-left: 3px solid var(--color-success);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, var(--bg-secondary) 100%);
}

.turn-order-item.gm-character.faction-enemy {
  border-left: 3px solid var(--color-danger);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, var(--bg-secondary) 100%);
}

/* Quick Add styling based on faction */
.turn-order-item.quick-add.faction-ally {
  border-left: 3px solid var(--color-success);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, var(--bg-secondary) 100%);
}

.turn-order-item.quick-add.faction-enemy {
  border-left: 3px solid var(--color-danger);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, var(--bg-secondary) 100%);
}

/* Quick Add badge styling */
.quick-add-badge {
  font-size: 0.65rem;
  color: var(--text-tertiary);
  margin-left: 4px;
  font-weight: 500;
}

.turn-order-position {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border-radius: 50%;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
  flex-shrink: 0;
}

.turn-order-item.current-turn .turn-order-position {
  background: var(--color-primary);
  color: white;
}

.turn-order-info {
  flex: 1;
  min-width: 0;
}

.turn-order-name {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.turn-order-name .pending-roll {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-warning);
  margin-left: 0.5rem;
}

.turn-order-name .gm-badge {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--color-accent, #8b5cf6);
  color: white;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  margin-left: 0.5rem;
}

.turn-order-stats {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.trib-badges-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-left: 0.5rem;
}

.trib-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  padding: 0.125rem 0.35rem;
  border-radius: var(--border-radius-sm);
  background: rgba(220, 38, 38, 0.15);
  /* Red tint */
  color: var(--color-danger);
  border: 1px solid rgba(220, 38, 38, 0.3);
  font-weight: 600;
}

.trib-count {
  font-size: 0.65rem;
  opacity: 0.8;
  margin-left: 0.1rem;
}

.initiative-badge,
.lp-badge,
.actions-badge {
  font-size: 0.7rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--border-radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.lp-badge.hidden-lp {
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
  font-style: italic;
}

.turn-order-actions {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}

.turn-order-actions .btn-icon {
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.turn-order-actions .btn-icon:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.turn-order-actions .btn-icon.remove-participant:hover {
  background: var(--color-danger);
  border-color: var(--color-danger);
}

.turn-order-actions .btn-icon.roll-for-player {
  background: var(--color-warning, #f59e0b);
  border-color: var(--color-warning, #f59e0b);
  color: white;
}

.turn-order-actions .btn-icon.roll-for-player:hover {
  background: #d97706;
  border-color: #d97706;
}

.turn-order-actions .btn-icon.view-sheet-combat {
  background: var(--color-info, #3b82f6);
  border-color: var(--color-info, #3b82f6);
  color: white;
}

.turn-order-actions .btn-icon.view-sheet-combat:hover {
  background: #2563eb;
  border-color: #2563eb;
}

/* Combat Navigation */
.combat-navigation {
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.combat-navigation .btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* === Header Styling === */
.header-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
  position: relative;
}

.header-content-wrapper {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  align-items: flex-start;
  width: 100%;
}

.header-portrait-section {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* Ensure it doesn't take up too much space if empty */
  min-width: 0;
}

.header-details-section {
  flex-grow: 1;
  width: 100%;
}

/* Ensure the portrait container fits nicely in the new section */
.character-portrait-container,
.add-portrait-container {
  margin: 0;
  /* Remove auto margins that might have centered it before */
  margin-top: 0.5rem;
  /* Optical alignment with inputs */
}

/* Adjust header-details to fill the section */
.header-details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.detail-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
}

/* Desktop layout for header-right-group */
@media (min-width: 901px) {
  .header-right-group {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    width: 100%;
    align-items: flex-end;
    justify-content: flex-start;
    /* Pack items to the left */
  }

  .header-right-group .detail-group {
    width: auto;
  }

  /* Make Path dropdown compact but usable */
  .path-dropdown-group {
    width: 400px !important;
    /* Force width */
    max-width: none;
    flex-shrink: 0;
    flex-grow: 0 !important;
    /* Override global flex: 1 */
    min-width: auto !important;
    /* Override global min-width */
  }

  .path-dropdown-group select {
    height: 38px;
    width: 100%;
    /* Fill the container */
  }

  .level-spinner-group {
    flex-grow: 0;
    /* Stop expanding to fill space */
    min-width: 100px;
  }

  .path-die-group {
    flex-grow: 0;
    min-width: 60px !important;
    width: 60px !important;
  }

  .path-die-group input {
    height: 38px;
    width: 100%;
    text-align: center;
    padding: 0;
  }

  .endicott-toggle-header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex-shrink: 0;
    width: auto;
  }
}

/* Add Enemy Form */
.add-enemy-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.add-enemy-form .form-row {
  display: flex;
  gap: 0.5rem;
}

.add-enemy-form .form-row-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.add-enemy-form .form-row-grid-5 {
  grid-template-columns: repeat(auto-fit, minmax(65px, 1fr));
  align-items: end;
  /* Align inputs to bottom if labels wrap */
}

.add-enemy-form .form-row-centered {
  display: flex;
  justify-content: center;
}

.add-enemy-form .form-row-centered .form-group {
  width: 50%;
  min-width: 120px;
}

.add-enemy-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: center;
  /* Center labels over inputs */
}

.add-enemy-form .form-group label {
  font-size: 0.65rem;
  /* Slightly smaller for tighter fit */
  color: var(--text-secondary);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  /* Prevent label wrapping if possible */
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.add-enemy-form .form-group input {
  padding: 0.25rem 0.5rem;
  /* Reduce padding */
  font-size: 0.875rem;
  width: 100%;
  /* Ensure input fills its grid cell */
  text-align: center;
}

.add-enemy-form input[type="text"] {
  flex: 1;
}

/* Quick Add Faction Toggle */
.faction-toggle-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.faction-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  font-weight: 500;
}

.faction-toggle {
  display: flex;
  gap: 0.5rem;
  /* Increase gap between buttons */
  flex: 1;
}

.faction-btn {
  flex: 1;
  padding: 0.4rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid var(--border-primary);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}

.faction-btn:hover {
  background: var(--bg-secondary);
}

.faction-btn.active[data-faction="enemy"] {
  background: var(--color-error);
  color: white;
  border-color: var(--color-error);
}

.faction-btn.active[data-faction="ally"] {
  background: var(--color-success);
  color: white;
  border-color: var(--color-success);
}

/* Danger Level Select */
.add-enemy-form select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: 0.8rem;
}

.add-enemy-form select:focus {
  outline: none;
  border-color: var(--color-accent, #8b5cf6);
}

/* Quick Add Traits Section */
.quick-add-traits-section {
  margin-top: 0.25rem;
}

.traits-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-sm);
  color: var(--text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.traits-toggle-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.traits-toggle-btn svg {
  transition: transform 0.2s ease;
}

.traits-toggle-btn.expanded svg {
  transform: rotate(180deg);
}

.traits-inputs-container {
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-sm);
}

.traits-inputs-container .traits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.trait-input-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.trait-input-group label {
  font-size: 0.65rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  font-weight: 600;
}

.trait-input-group input {
  width: 100%;
  padding: 0.35rem;
  text-align: center;
  font-size: 0.85rem;
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.trait-input-group input:focus {
  outline: none;
  border-color: var(--color-accent, #8b5cf6);
}

.traits-hint {
  margin-top: 0.5rem;
  font-size: 0.65rem;
  color: var(--text-tertiary);
  text-align: center;
  font-style: italic;
}

/* Faction Selection Modal */
#faction-select-modal {
  z-index: 1005;
}

.faction-modal-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.faction-choice-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  font-weight: 500;
  border: none;
  color: white;
}

.faction-choice-btn:hover {
  opacity: 0.9;
}

/* Add GM Character Form */
.add-gm-character-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.add-gm-character-form select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: 0.875rem;
}

.add-gm-character-form select:focus {
  outline: none;
  border-color: var(--color-accent, #8b5cf6);
}

.add-gm-character-form select optgroup {
  font-weight: 600;
  color: var(--text-secondary);
}

/* Combat Empty State */
.combat-empty-state {
  background: var(--bg-secondary);
  border: 2px dashed var(--border-primary);
  border-radius: var(--border-radius-lg);
  padding: 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.combat-empty-state svg {
  color: var(--text-tertiary);
  opacity: 0.5;
  margin-bottom: 0.5rem;
}

/* Player Initiative Section */
#player-initiative-section {
  padding: 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-lg);
}

.initiative-info {
  margin: 0.75rem 0 0 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-align: center;
}

/* Combat Toggle Section */
.combat-toggle-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Mobile Responsive for Combat Flow Tab */
@media (max-width: 968px) {

  .combat-flow-grid,
  .combat-flow-grid.gm-view {
    grid-template-columns: 1fr;
  }

  .combat-flow-right {
    order: -1;
  }

  .add-enemy-form .form-row-grid {
    grid-template-columns: 1fr 1fr;
  }

  .add-enemy-form .form-row-grid-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* === Campaign Dashboard Adjustments === */
.campaign-modal-content {
  max-width: 900px;
  width: 90vw;
}

/* Mobile responsive adjustments for Character Sheet Header */
@media (max-width: 900px) {
  .header-content-wrapper {
    flex-direction: column;
    align-items: center;
  }

  /* Ensure portrait container doesn't stretch or look weird */
  .header-portrait-section {
    width: 100%;
    align-items: center;
    margin-bottom: 1rem;
  }
}

/* Guest Button Centering */
.btn-guest {
  margin-top: 1rem;
  width: 100%;
  color: var(--text-secondary);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  text-align: center;
  display: block;
}

.btn-guest:hover {
  color: var(--color-primary);
}

/* Health Feedback Overlay */
.health-feedback-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease;
}

@keyframes pulse-heal {
  0% {
    box-shadow: inset 0 0 0 transparent;
    opacity: 0;
  }

  20% {
    box-shadow: inset 0 0 50px 25px var(--color-info);
    opacity: 1;
  }

  50% {
    box-shadow: inset 0 0 100px 50px var(--color-info);
    opacity: 0.8;
  }

  100% {
    box-shadow: inset 0 0 0 transparent;
    opacity: 0;
  }
}

@keyframes pulse-hurt {
  0% {
    box-shadow: inset 0 0 0 transparent;
    opacity: 0;
  }

  10% {
    box-shadow: inset 0 0 100px 50px var(--color-danger);
    opacity: 1;
  }

  50% {
    box-shadow: inset 0 0 75px 35px var(--color-danger);
    opacity: 0.7;
  }

  100% {
    box-shadow: inset 0 0 0 transparent;
    opacity: 0;
  }
}

.animate-heal {
  animation: pulse-heal 1.5s ease-out forwards;
}

.animate-hurt {
  animation: pulse-hurt 1.5s ease-out forwards;
}

@keyframes pulse-save {
  0% {
    box-shadow: inset 0 0 0 transparent;
    opacity: 0;
  }

  20% {
    box-shadow: inset 0 0 50px 25px var(--color-success);
    opacity: 1;
  }

  50% {
    box-shadow: inset 0 0 100px 50px var(--color-success);
    opacity: 0.8;
  }

  100% {
    box-shadow: inset 0 0 0 transparent;
    opacity: 0;
  }
}

.animate-save {
  animation: pulse-save 1.5s ease-out forwards;
}

@keyframes pulse-tribulation {
  0% {
    box-shadow: inset 0 0 0 transparent;
    opacity: 0;
  }

  10% {
    box-shadow: inset 0 0 100px 50px #ff8c00;
    opacity: 1;
  }

  50% {
    box-shadow: inset 0 0 75px 35px #ff8c00;
    opacity: 0.7;
  }

  100% {
    box-shadow: inset 0 0 0 transparent;
    opacity: 0;
  }
}

.animate-tribulation {
  animation: pulse-tribulation 1.5s ease-out forwards;
}

.grecaptcha-badge {
  visibility: hidden;
}

.recaptcha-legal {
  font-size: 0.7em;
  color: var(--text-secondary);
  text-align: center;
  margin-top: 0.75rem;
  opacity: 0.7;
}

.recaptcha-legal a {
  color: var(--text-secondary);
  text-decoration: underline;
}

.recaptcha-legal a:hover {
  color: var(--color-primary);
}

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Courier+Prime:wght@400;700&family=Rye&display=swap');

/* Snowfall Effect */
#snow-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.snowflake-wrapper {
  position: absolute;
  top: 0;
  pointer-events: none;
  will-change: transform;
  animation-name: fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.snowflake,
.dust-particle-gray,
.dust-particle-brown {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.9;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.snowflake {
  background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.4) 40%, transparent 100%);
}

/* Western Dust Cloud Particles */
.dust-cloud {
  border-radius: 50%;
  background: radial-gradient(ellipse at 40% 40%,
      rgba(205, 133, 63, 0.6) 0%,
      rgba(139, 69, 19, 0.4) 30%,
      rgba(139, 69, 19, 0.2) 60%,
      transparent 100%);
  filter: blur(2px);
}

.dust-cloud-large {
  border-radius: 40% 60% 50% 50%;
  background: radial-gradient(ellipse at 30% 30%,
      rgba(222, 184, 135, 0.5) 0%,
      rgba(205, 133, 63, 0.35) 25%,
      rgba(139, 69, 19, 0.2) 50%,
      transparent 100%);
  filter: blur(4px);
}

.dust-cloud-wisp {
  border-radius: 30% 70% 40% 60%;
  background: radial-gradient(ellipse at 50% 50%,
      rgba(205, 133, 63, 0.4) 0%,
      rgba(139, 69, 19, 0.2) 40%,
      transparent 80%);
  filter: blur(3px);
}

/* Western dust uses horizontal drift instead of falling */
.dust-wrapper-western {
  position: absolute;
  left: -15vw;
  pointer-events: none;
  will-change: transform;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* Rolling dust cloud - billowing horizontal motion */
@keyframes dust-roll {
  0% {
    transform: translate3d(0, 0, 0) scaleX(1) scaleY(1);
  }

  15% {
    transform: translate3d(18vw, -2vh, 0) scaleX(1.1) scaleY(0.9);
  }

  30% {
    transform: translate3d(36vw, 1vh, 0) scaleX(0.95) scaleY(1.05);
  }

  45% {
    transform: translate3d(54vw, -1vh, 0) scaleX(1.08) scaleY(0.92);
  }

  60% {
    transform: translate3d(72vw, 2vh, 0) scaleX(0.97) scaleY(1.03);
  }

  75% {
    transform: translate3d(90vw, -1vh, 0) scaleX(1.05) scaleY(0.95);
  }

  100% {
    transform: translate3d(130vw, 0, 0) scaleX(1) scaleY(1);
  }
}

/* Ground-hugging dust tumble */
@keyframes dust-tumble {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }

  20% {
    transform: translate3d(26vw, -3vh, 0) rotate(15deg) scale(1.15);
  }

  40% {
    transform: translate3d(52vw, 1vh, 0) rotate(-10deg) scale(0.9);
  }

  60% {
    transform: translate3d(78vw, -2vh, 0) rotate(20deg) scale(1.1);
  }

  80% {
    transform: translate3d(104vw, 2vh, 0) rotate(-5deg) scale(0.95);
  }

  100% {
    transform: translate3d(130vw, 0, 0) rotate(0deg) scale(1);
  }
}

/* Fast gust of dust */
@keyframes dust-gust {
  0% {
    transform: translate3d(0, 0, 0) scaleX(1);
    opacity: 0.3;
  }

  10% {
    opacity: 0.6;
  }

  50% {
    transform: translate3d(70vw, -4vh, 0) scaleX(1.3);
    opacity: 0.5;
  }

  90% {
    opacity: 0.4;
  }

  100% {
    transform: translate3d(130vw, 2vh, 0) scaleX(0.8);
    opacity: 0.2;
  }
}

/* Slow drifting haze */
@keyframes dust-haze {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0.15;
  }

  50% {
    transform: translate3d(65vw, 3vh, 0);
    opacity: 0.25;
  }

  100% {
    transform: translate3d(130vw, -2vh, 0);
    opacity: 0.1;
  }
}

@keyframes fall {
  0% {
    transform: translate3d(0, -10vh, 0);
  }

  100% {
    transform: translate3d(0, 110vh, 0);
  }
}

/* Wind Variations */
@keyframes wind-normal {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(50vw, 0, 0);
  }
}

@keyframes wind-flutter {
  0% {
    transform: translate3d(0, 0, 0);
  }

  25% {
    transform: translate3d(10vw, -5px, 0);
  }

  50% {
    transform: translate3d(25vw, 5px, 0);
  }

  75% {
    transform: translate3d(40vw, -2px, 0);
  }

  100% {
    transform: translate3d(50vw, 0, 0);
  }
}

@keyframes wind-fast {
  0% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(30vw, 0, 0);
  }

  /* Accelerates in middle */
  100% {
    transform: translate3d(60vw, 0, 0);
  }
}

/* --- LOADING ANIMATION --- */
body.sheet-hidden {
  overflow: hidden;
  /* Prevent scrolling during load */
}

body.sheet-hidden .character-sheet {
  opacity: 0;
  filter: blur(10px);
  transition: opacity 1.5s ease-out, filter 1.5s ease-out;
}

body:not(.sheet-hidden) .character-sheet {
  opacity: 1;
  filter: blur(0);
}

#loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  /* Start black */
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 1s ease-out, visibility 1s;
}

#loading-overlay.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Loading Logo */
.loading-logo {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 5rem;
  color: var(--text-primary);

  /* Clean, precise look - no blur or heavy shadows */
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);

  opacity: 0;
  transform: scale(0.9);
  transform-origin: center center;
  /* Critical for alignment */

  /* 1s fade in */
  transition: opacity 1s ease-out, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  position: absolute;
  z-index: 10;
}

.loading-logo.reveal {
  opacity: 1;
  transform: scale(1);
}

/* Class to handle the flight to the top */
.loading-logo.moving {
  /* 1.2s smooth move */
  transition: all 1.2s cubic-bezier(0.45, 0, 0.55, 1);
  text-shadow: none;
  /* Strip effects for clean landing */
}

/* -------------------------------------------------------------------------- */
/* Tour / Driver.js Theming                                                   */
/* -------------------------------------------------------------------------- */

/* Base Popover Theming */
body .driver-popover.muse-driver-popover {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-xl);
  font-family: var(--font-primary);
}

/* Title & Description */
body .driver-popover.muse-driver-popover .driver-popover-title {
  font-family: var(--font-heading, var(--font-primary));
  color: var(--text-primary);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

/* Apply specific theme header styles if available (like gradient text) */
body.dark-mode .driver-popover.muse-driver-popover .driver-popover-title {
  background: linear-gradient(135deg, white 0%, var(--color-accent) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Reset for themes that don't want gradient text in popover */
body.bloody-theme .driver-popover.muse-driver-popover .driver-popover-title,
body.eternal-theme .driver-popover.muse-driver-popover .driver-popover-title,
body.dystopic-theme .driver-popover.muse-driver-popover .driver-popover-title {
  background: none;
  -webkit-text-fill-color: initial;
  color: var(--text-primary);
  text-shadow: none;
}

body .driver-popover.muse-driver-popover .driver-popover-description {
  color: var(--text-secondary);
  font-family: var(--font-body, var(--font-primary));
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Buttons */
body .driver-popover.muse-driver-popover .driver-popover-footer button {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-sm);
  text-shadow: none;
  font-family: var(--font-primary);
  transition: all 0.2s ease;
  padding: 0.4rem 0.8rem;
}

body .driver-popover.muse-driver-popover .driver-popover-footer button:hover {
  background-color: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

/* Close Button */
body .driver-popover.muse-driver-popover .driver-popover-close-btn {
  color: var(--text-secondary);
}

body .driver-popover.muse-driver-popover .driver-popover-close-btn:hover {
  color: var(--color-danger);
}

/* Progress Text */
body .driver-popover.muse-driver-popover .driver-popover-progress-text {
  color: var(--text-secondary);
}

/* Popover Arrow styling to match background */
body .driver-popover.muse-driver-popover .driver-popover-arrow-side-left.driver-popover-arrow {
  border-left-color: var(--bg-secondary);
}

body .driver-popover.muse-driver-popover .driver-popover-arrow-side-right.driver-popover-arrow {
  border-right-color: var(--bg-secondary);
}

body .driver-popover.muse-driver-popover .driver-popover-arrow-side-top.driver-popover-arrow {
  border-top-color: var(--bg-secondary);
}

body .driver-popover.muse-driver-popover .driver-popover-arrow-side-bottom.driver-popover-arrow {
  border-bottom-color: var(--bg-secondary);
}

/* Custom Dropdown Styling for Dice Tray */
.custom-select-wrapper {
  position: relative;
  user-select: none;
  width: 100%;
}

.z-index-top {
  z-index: 10000 !important;
  position: relative;
  /* Ensure dropdowns aren't clipped by fancy theme borders */
  clip-path: none !important;
  /* Ensure transform doesn't mess with stacking context if possible, though z-index should handle it */
  transform: none !important;
}

.custom-select-wrapper .select-selected {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-sm);
  padding: 0.5rem 1rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-primary);
  height: 42px;
  /* Match standard input height */
}

.custom-select-wrapper .select-selected:after {
  content: "";
  position: absolute;
  right: 1rem;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--text-primary);
  opacity: 0.7;
  transition: transform 0.2s ease;
}

.custom-select-wrapper .select-selected.select-arrow-active:after {
  transform: rotate(180deg);
}

.custom-select-wrapper .select-items {
  position: absolute;
  background-color: var(--bg-secondary);
  top: 105%;
  left: 0;
  right: 0;
  z-index: 9999;
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-sm);
  max-height: 250px;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  display: block;
}

.custom-select-wrapper .select-items.select-hide {
  display: none;
}

.custom-select-wrapper .select-items div {
  color: var(--text-primary);
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border-secondary);
  transition: background-color 0.15s ease, color 0.15s ease;
  font-size: 1rem;
  /* Boost font size for readability */
}

.custom-select-wrapper .select-items div:last-child {
  border-bottom: none;
}

.custom-select-wrapper .select-items div:hover,
.custom-select-wrapper .same-as-selected {
  background-color: var(--color-primary);
  color: white;
}

/* Dark mode specific adjustments */
body.dark-mode .custom-select-wrapper .select-items div:hover,
body.dark-mode .custom-select-wrapper .same-as-selected {
  background-color: var(--color-primary);
  color: var(--bg-primary);
  /* Dark text on bright primary cyan */
  font-weight: 600;
}

/* Theme compatibility: Bloody */
body.bloody-theme .custom-select-wrapper .select-selected {
  background: linear-gradient(135deg, rgba(26, 10, 15, 0.8) 0%, rgba(42, 20, 24, 0.6) 100%);
  border-color: rgba(139, 21, 56, 0.3);
}

body.bloody-theme .custom-select-wrapper .select-items {
  background-color: var(--bg-secondary);
  border-color: rgba(139, 21, 56, 0.3);
}

body.bloody-theme .custom-select-wrapper .select-items div:hover,
body.bloody-theme .custom-select-wrapper .same-as-selected {
  background-color: var(--color-primary);
  /* Deep red */
  color: var(--text-primary);
}

/* College Ruled Inverted Theme dropdown styling */
body.college-ruled-inverted-theme .custom-select-wrapper .select-items div:hover,
body.college-ruled-inverted-theme .custom-select-wrapper .same-as-selected {
  background-color: var(--color-primary);
  color: var(--bg-primary);
}

/* Terminal Theme dropdown styling */
body.terminal-theme .custom-select-wrapper .select-selected {
  background-color: rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(0, 255, 0, 0.3);
  color: var(--text-primary);
}

body.terminal-theme .custom-select-wrapper .select-items {
  background-color: rgba(0, 0, 0, 0.95);
  border: 1px solid rgba(0, 255, 0, 0.4);
}

body.terminal-theme .custom-select-wrapper .select-items div {
  color: #00FF00;
}

body.terminal-theme .custom-select-wrapper .select-items div:hover,
body.terminal-theme .custom-select-wrapper .same-as-selected {
  background-color: #00FF00;
  color: #000;
}

/* Raygun Gothic Theme dropdown styling - prevent clip-path issues */
body.raygun-gothic-theme .custom-select-wrapper .select-items,
body.raygun-light-theme .custom-select-wrapper .select-items {
  clip-path: none;
}

body.raygun-gothic-theme .stats-box.z-index-top,
body.raygun-light-theme .stats-box.z-index-top {
  clip-path: none !important;
  overflow: visible;
}

/* Custom Number Spinner Styling */
/* Hide default browser spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.number-spinner-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  /* Tighter gap */
  background-color: transparent;
  border: none;
  width: auto;
  min-width: 0;
}

.number-spinner-wrapper input[type="number"] {
  text-align: center;
  border: 1px solid var(--border-primary);
  background: var(--bg-secondary);
  border-radius: var(--border-radius-sm);
  padding: 0.1rem;
  height: 24px;
  /* Ultra compact height */
  width: 3rem;
  /* Tighter width */
  font-size: 0.85rem;
  flex: 0 0 auto;
}

.spinner-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  /* Smaller button */
  height: 24px;
  border-radius: var(--border-radius-sm);
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  /* Smaller icon */
  font-weight: bold;
  color: white;
  transition: transform 0.1s, opacity 0.2s;
  flex-shrink: 0;
  line-height: 1;
  padding: 0;
}

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

.spinner-btn.minus {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-right: none;
}

.spinner-btn.plus {
  background-color: var(--color-primary);
  color: white;
  /* Assuming primary is always dark enough for white text, or use var(--text-on-primary) if exists */
  border-left: none;
}

.spinner-btn:hover {
  opacity: 0.9;
}

.spinner-btn.minus:hover {
  background-color: var(--color-danger);
  /* Keep red on hover for clarity? Or use theme? Let's use darker tertiary or accent */
  background-color: var(--border-primary);
  color: var(--text-primary);
}

/* Theme compatibility: Bloody */
body.bloody-theme .number-spinner-wrapper {
  background: transparent;
  border: none;
}

/* Let Bloody theme inherit generic styles using its own variables, 
   but ensure Minus button has correct border color if using tertiary */
body.bloody-theme .spinner-btn.minus {
  background-color: rgba(42, 20, 24, 0.8);
  /* Match Bloody input bg */
  border-color: rgba(139, 21, 56, 0.3);
  color: var(--text-primary);
}



body.bloody-theme .number-spinner-wrapper input[type="number"] {
  border: 1px solid rgba(139, 21, 56, 0.4);
  background: rgba(0, 0, 0, 0.2);
}

/* Adjust wrapper constraints in detailed views */
.trait-item .number-spinner-wrapper,
.stats-box .number-spinner-wrapper {
  width: auto;
  justify-content: center;
}

.trait-item {
  display: flex;
  flex-direction: column;
  align-items: center;

}

/* Update Notification Toast */
#update-notification {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  padding: 16px;
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 10000;
  flex-direction: column;
  /* Stacked layout for existing themes compatibility */
  gap: 10px;
  max-width: 300px;
  animation: slide-in 0.3s ease-out;
}

#update-notification.show {
  display: flex;
}

.update-message {
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.9rem;
  margin-bottom: 8px;
}

.update-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

#reload-btn {
  background-color: var(--color-primary);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  transition: background-color 0.2s;
}

#reload-btn:hover {
  background-color: var(--color-primary-dark);
}

#close-update-btn {
  background-color: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-secondary);
  padding: 8px 16px;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.2s;
}

#close-update-btn:hover {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

@keyframes slide-in {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Inline Initiative Edit Drawer */
.turn-order-edit-drawer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--bg-tertiary);
  margin: 0 0.5rem;
  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
  border: 1px solid var(--border-primary);
  border-top: none;
  transform-origin: top;
  transform: scaleY(0.95);
}

.turn-order-edit-drawer.open {
  max-height: 80px;
  /* Enough for input row */
  opacity: 1;
  margin-bottom: 0.75rem;
  transform: scaleY(1);
  padding: 0.75rem;
}

.drawer-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.drawer-input {
  width: 80px;
  padding: 0.25rem 0.5rem;
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--border-primary);
  background: var(--bg-primary);
  color: var(--text-primary);
  text-align: center;
  font-weight: 600;
}

.drawer-btn {
  padding: 0.25rem 0.5rem;
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--border-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
}

.drawer-btn.save {
  background: var(--color-success);
  color: white;
  border-color: var(--color-success);
}

.drawer-btn.cancel {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.turn-order-item.editing {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
  box-shadow: none;
}

/* === Dev Code Input Styles === */
.dev-code-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-primary);
}

.dev-code-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

#dev-code-input,
.dev-code-input {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--text-color);
  padding: 2px 4px !important;
  border-radius: 3px;
  font-size: 0.7em !important;
  width: 90px !important;
  transition: width 0.3s ease, border-color 0.3s ease;
}

#dev-code-input:focus,
.dev-code-input:focus {
  border-color: var(--accent-color);
  outline: none;
}

/* Tooltip Styles */
.tooltip-container {
  position: relative;
  display: inline-block;
  cursor: help;
}

.tooltip-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  color: var(--text-color);
  font-size: 12px;
  font-weight: bold;
  transition: background-color 0.2s;
}

.tooltip-container:hover .tooltip-icon {
  background-color: var(--accent-color);
  color: #000;
}

.tooltip-text {
  visibility: hidden;
  width: 200px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px;
  position: absolute;
  z-index: 100;
  bottom: 125%;
  /* Position above */
  left: 50%;
  margin-left: -100px;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 0.85em;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* Triangle for tooltip */
.tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

/* Fix for Modals Off-Center on Mobile */
/* Reset leaking positioning properties that cause right-shift */
@media screen and (max-width: 768px) {

  .modal-content,
  .auth-modal-content,
  .instructions-modal-content {
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    margin: 10% auto !important;
    width: 95% !important;
    max-width: 95% !important;
    position: relative !important;
    transform: none !important;
    animation-fill-mode: forwards;
  }
}

/* =========================================
   ABYSSAL THEME
   DEEP SEA BIOLUMINESCENCE
   ========================================= */

body.abyssal-theme {
  --theme-glow-color: #00FFFF;
  --theme-glow-color-low: rgba(0, 255, 255, 0.1);
  --theme-glow-color-high: rgba(0, 255, 255, 0.4);

  --color-primary: #00FFFF;
  /* Cyan bioluminescence */
  --color-primary-dark: #008B8B;
  --color-primary-light: #E0FFFF;
  --color-secondary: #008080;
  /* Teal substitute for grey */
  --color-accent: #7DF9FF;
  /* Electric Blue/Cyan */

  --bg-primary: #000000;
  /* Abyssal Black */
  --bg-secondary: #020E15;
  /* Deep Navy */
  --bg-tertiary: #051821;
  /* Slightly Lighter Navy */

  --text-primary: #E0FFFF;
  /* Light Cyan Text */
  --text-secondary: #48D1CC;
  /* Medium Turquoise */

  --border-primary: rgba(0, 255, 255, 0.3);
  --border-secondary: rgba(0, 128, 128, 0.3);

  --shadow-sm: 0 0 5px rgba(0, 255, 255, 0.2);
  --shadow-md: 0 0 10px rgba(0, 255, 255, 0.3);
  --shadow-lg: 0 0 20px rgba(0, 255, 255, 0.4);

  --font-primary: 'Cinzel', serif;
  /* Ancient/Ethereal feel */

  background-image:
    radial-gradient(circle at 10% 20%, rgba(0, 255, 255, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(0, 128, 128, 0.08) 0%, transparent 50%),
    linear-gradient(to bottom, #000000, #04101A);
}

body.abyssal-theme .logo-text {
  font-family: 'Cinzel', serif;
  color: var(--color-primary);
  text-shadow:
    0 0 10px rgba(0, 255, 255, 0.8),
    0 0 20px rgba(0, 128, 128, 0.6),
    0 0 40px rgba(0, 255, 255, 0.4);
  letter-spacing: 0.15em;
  animation: bg-pulse 8s infinite alternate;
  /* Breathing effect */
}

/* Glassy/Watery Containers */
body.abyssal-theme .stats-box,
body.abyssal-theme .trait-item,
body.abyssal-theme .floating-panel-content,
body.abyssal-theme .modal-content,
body.abyssal-theme .dashboard-card {
  background: rgba(2, 14, 21, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 255, 255, 0.2);
  box-shadow:
    0 4px 30px rgba(0, 0, 0, 0.5),
    inset 0 0 20px rgba(0, 255, 255, 0.05);
  border-radius: 12px;
}

body.abyssal-theme .btn {
  background: linear-gradient(135deg, rgba(0, 139, 139, 0.4) 0%, rgba(0, 255, 255, 0.2) 100%);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.1);
  border-radius: 20px;
  /* Rounded like bubbles */
}

body.abyssal-theme .btn:hover {
  background: linear-gradient(135deg, rgba(0, 139, 139, 0.6) 0%, rgba(0, 255, 255, 0.3) 100%);
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.3);
  transform: translateY(-2px);
}

body.abyssal-theme input,
body.abyssal-theme textarea,
body.abyssal-theme select {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--border-primary);
  color: var(--color-primary);
  border-radius: 8px;
}

/* Simplified floating bubbles for performance */
body.abyssal-theme::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Reduced from 4 gradients to 2 simple ones */
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, 0.2) 100%, transparent),
    radial-gradient(2px 2px at 80% 70%, rgba(255, 255, 255, 0.2) 100%, transparent);
  opacity: 0.6;
  animation: bg-pulse 15s linear infinite;
  pointer-events: none;
  z-index: 1;
}

/* =========================================
   BLUEPRINT THEME
   TECHNICAL / ENGINEERING
   ========================================= */

body.blueprint-theme {
  --theme-glow-color: #FFFFFF;
  --theme-glow-color-low: rgba(255, 255, 255, 0.1);
  --theme-glow-color-high: rgba(255, 255, 255, 0.3);

  --color-primary: #FFFFFF;
  --color-primary-dark: #E2E8F0;
  --color-primary-light: #F8FAFC;
  --color-secondary: #93C5FD;
  /* Light Blue Guide Lines */
  --color-accent: #60A5FA;
  /* Brighter Blue */

  --bg-primary: #1e3a8a;
  /* Strong Royal Blue */
  --bg-secondary: #172554;
  /* Darker Blue */
  --bg-tertiary: #1e40af;
  /* Lighter Blue Panel */

  --text-primary: #FFFFFF;
  --text-secondary: #BFDBFE;

  --border-primary: rgba(255, 255, 255, 0.5);
  --border-secondary: rgba(255, 255, 255, 0.2);

  --shadow-sm: none;
  --shadow-md: 2px 2px 0 rgba(0, 0, 0, 0.2);
  --shadow-lg: 4px 4px 0 rgba(0, 0, 0, 0.2);

  --font-primary: 'Courier New', monospace;
  /* Monospace for technical feel */

  /* Blueprint Grid Background */
  background-color: #1e3a8a;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

body.blueprint-theme .logo-text {
  font-family: 'Courier New', monospace;
  font-weight: 700;
  text-transform: uppercase;
  border: 4px solid white;
  padding: 5px 15px;
  background: transparent;
  text-shadow: none;
  letter-spacing: 0.1em;
}

body.blueprint-theme .stats-box,
body.blueprint-theme .trait-item {
  border: 2px solid white;
  border-radius: 0;
  background: rgba(30, 58, 138, 0.9);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
}

body.blueprint-theme .trait-item label,
body.blueprint-theme .stats-box h3,
body.blueprint-theme h3 {
  text-transform: uppercase;
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.5);
  padding-bottom: 2px;
}

body.blueprint-theme input,
body.blueprint-theme textarea,
body.blueprint-theme select {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: white;
  font-family: 'Courier New', monospace;
  border-radius: 0;
}

body.blueprint-theme .floating-panel-content,
body.blueprint-theme .modal-content {
  border: 2px solid white;
  border-radius: 0;
  background-color: var(--bg-secondary);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.3);
}

body.blueprint-theme .btn {
  background: transparent;
  border: 2px solid white;
  color: white;
  border-radius: 0;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  font-weight: bold;
}

body.blueprint-theme .btn:hover {
  background: white;
  color: var(--bg-primary);
  transform: translate(2px, 2px);
  box-shadow: none;
}

/* Specific fix for theme options buttons in Blueprint theme */
body.blueprint-theme .theme-option-btn {
  background-color: var(--bg-secondary);
  color: white;
  border: 1px solid white;
}

body.blueprint-theme .theme-option-btn:hover {
  background-color: white;
  color: var(--bg-primary);
}

/* Dashed lines for containers */
body.blueprint-theme .trait-item {
  border: 2px dashed rgba(255, 255, 255, 0.4);
}

body.blueprint-theme .trait-item:hover {
  border-style: solid;
}

/* =====================================================
   PATH & LEVEL SYSTEM STYLES
   ===================================================== */

/* Path Dropdown Group */
.path-dropdown-group {
  min-width: 120px;
  flex: 1;
}

/* Desktop: Force wider path dropdown */
@media (min-width: 901px) {
  .path-dropdown-group {
    width: 260px !important;
    flex: 0 0 260px !important;
  }
}

.path-dropdown-group select {
  width: 100%;
}

.path-dropdown-group .custom-path-input {
  margin-top: 0.25rem;
  width: 100%;
}

.path-dropdown-group .custom-path-input.hidden {
  display: none;
}

.path-dropdown-group.custom-mode .custom-path-input.hidden {
  display: block;
}

/* Level Spinner Group */
.level-spinner-group {
  min-width: 90px;
}

.level-spinner-group .number-spinner-wrapper {
  width: 100%;
}

/* Match height of Path select and Path Die input */
.level-spinner-group .spinner-btn {
  height: 38px;
  width: 32px;
}

.level-spinner-group .level-wrapper input[type="number"] {
  width: 3rem;
  text-align: center;
  height: 38px;
  padding: 0.5rem 0.25rem;
}

/* Level Change Input Modal */
.level-change-input-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.level-change-input-group label {
  white-space: nowrap;
  color: var(--text-secondary);
}

.level-change-input-group input[type="number"] {
  width: 80px;
  padding: 0.5rem;
  text-align: center;
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius);
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

/* Level Up Method Modal */
.level-up-method-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.level-method-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  width: 100%;
}

.level-method-btn .method-title {
  font-weight: 600;
  font-size: 1rem;
}

.level-method-btn .method-desc {
  font-size: 0.8rem;
  opacity: 0.8;
  margin-top: 0.25rem;
}

/* Level Up Wizard Modal */
.level-up-wizard-modal-content {
  max-width: 480px;
  max-height: 85vh;
  padding: 1.25rem;
  overflow-y: auto;
}

.level-up-wizard-header {
  text-align: center;
  margin-bottom: 1rem;
}

.level-up-wizard-header h2 {
  margin-bottom: 0.25rem;
  color: var(--color-primary);
}

.level-up-wizard-header p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

.level-up-progress {
  height: 4px;
  background: var(--bg-tertiary);
  border-radius: 2px;
  overflow: hidden;
}

.level-up-progress-bar {
  height: 100%;
  background: var(--color-primary);
  transition: width 0.3s ease;
  width: 0%;
}

.level-up-wizard-container {
  min-height: 180px;
}

.level-up-wizard-actions {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-primary);
}

/* Level up step content */
.level-up-step {
  text-align: center;
}

.level-up-step-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--text-primary);
}

.level-up-step-message {
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

/* Trait dice allocation during level up */
.level-up-trait-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: 1rem;
}

.level-up-trait-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.level-up-trait-item label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.level-up-trait-stepper {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.level-up-trait-stepper button {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid var(--border-primary);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.level-up-trait-stepper button:hover:not(:disabled) {
  background: var(--color-primary);
  color: var(--bg-primary);
  border-color: var(--color-primary);
}

.level-up-trait-stepper button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.level-up-trait-stepper .trait-value {
  min-width: 24px;
  text-align: center;
  font-weight: 600;
}

/* Roll section in level up */
.level-up-roll-section {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.level-up-roll-section .roll-dice-btn {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}

.level-up-roll-result {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--color-primary);
}

.level-up-roll-breakdown {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* Filler options for talents/powers */
.filler-option {
  margin-top: 0.75rem;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
}

.filler-hint {
  font-size: 0.8rem;
  color: var(--text-tertiary);
  margin-top: 0.5rem;
  font-style: italic;
}

.filler-badge {
  font-size: 0.75rem;
  color: var(--color-primary);
  font-weight: normal;
}

.power-filler-actions {
  margin-top: 0.35rem;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}

/* Level up examples section */
.level-up-examples-section {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-primary);
  text-align: left;
}

.level-up-examples-section h4 {
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
}

.level-up-examples-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  max-height: 150px;
  overflow-y: auto;
}

.level-up-example-item {
  padding: 0.4rem 0.6rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 0.2s ease;
}

.level-up-example-item:hover {
  background: var(--color-primary);
  color: var(--bg-primary);
  border-color: var(--color-primary);
}

.level-up-example-item .example-name {
  font-weight: 600;
  font-size: 0.8rem;
}

.level-up-example-item .example-range {
  font-size: 0.7rem;
  opacity: 0.8;
}

.examples-hint {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-top: 0.5rem;
  font-style: italic;
  text-align: center;
}

/* Powers step layout */
.level-up-powers-step .power-inputs-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.level-up-powers-step .power-input-group {
  background: var(--bg-tertiary);
  padding: 0.6rem;
  border-radius: var(--border-radius);
}

.level-up-powers-step .power-input-group label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
}

.level-up-powers-step .power-input-group input,
.level-up-powers-step .power-input-group textarea {
  width: 100%;
  margin-bottom: 0.35rem;
  font-size: 0.85rem;
  padding: 0.35rem 0.5rem;
}

.level-up-powers-step .power-input-group textarea {
  min-height: 40px;
  resize: vertical;
}

/* Choice Bonus Modal */
.choice-bonus-options {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.choice-bonus-btn {
  padding: 1rem 1.5rem;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.choice-bonus-btn .trait-name {
  font-weight: 600;
  font-size: 1rem;
}

.choice-bonus-btn .trait-bonus {
  font-size: 0.85rem;
  opacity: 0.8;
}

/* Pathless and No Powers Allocation Modals */
.pathless-modal-content,
.no-powers-modal-content {
  max-width: 450px;
}

.pathless-trait-grid,
.no-powers-trait-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.allocation-trait-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  background: var(--bg-tertiary);
  border-radius: var(--border-radius);
}

.allocation-trait-item label {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.allocation-stepper {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.allocation-stepper button {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  border: 1px solid var(--border-primary);
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.allocation-stepper button:hover:not(:disabled) {
  background: var(--color-primary);
  color: var(--bg-primary);
  border-color: var(--color-primary);
}

.allocation-stepper button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.allocation-stepper .alloc-value {
  min-width: 20px;
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
}

/* Dice remaining indicator */
.dice-remaining-indicator {
  text-align: center;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

/* Talent input in level up wizard */
.talent-input-section {
  margin-top: 1rem;
}

.talent-input-section textarea {
  width: 100%;
  min-height: 80px;
  padding: 0.75rem;
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  resize: vertical;
}

/* Power inputs in level up wizard */
.power-inputs-section {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.power-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem;
  background: var(--bg-tertiary);
  border-radius: var(--border-radius);
}

.power-input-group label {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.power-input-group input,
.power-input-group textarea {
  padding: 0.5rem;
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius);
  background: var(--bg-secondary);
  color: var(--text-primary);
}

/* Level up summary */
.level-up-summary {
  text-align: left;
}

.level-up-summary-section {
  margin-bottom: 1rem;
}

.level-up-summary-section h4 {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.level-up-summary-section p,
.level-up-summary-section ul {
  font-size: 0.95rem;
  color: var(--text-primary);
}

.level-up-summary-section ul {
  list-style: disc;
  margin-left: 1.5rem;
}

/* Level Up Roll Method Toggle */
.level-up-roll-method-toggle {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1rem;
}

.level-up-roll-method-toggle button {
  flex: 1;
  max-width: 150px;
}

/* Level Up Rolls List */
.level-up-rolls-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.level-up-roll-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-tertiary);
  border-radius: var(--border-radius);
}

.level-up-roll-item .roll-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.level-up-roll-item .roll-value {
  font-weight: 600;
  color: var(--color-primary);
  min-width: 20px;
  text-align: center;
}

/* Mobile responsiveness for Path & Level */
@media (max-width: 768px) {
  .path-dropdown-group {
    min-width: unset;
    width: 100%;
    flex-basis: 100%;
  }

  .level-spinner-group {
    flex: 1;
    min-width: 80px;
  }

  .level-up-trait-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }

  .level-up-wizard-modal-content {
    padding: 1rem;
  }

  .pathless-trait-grid,
  .no-powers-trait-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }
}

/* =====================================================
   MOBILE ENHANCEMENTS - Minimal adjustments for mobile UX
   Works WITH existing responsive styles at 900px breakpoint
   Uses existing theme CSS variables
   ===================================================== */

@media (max-width: 768px) {

  /* Prevent iOS text size adjustment and enable smooth scrolling */
  body {
    -webkit-text-size-adjust: 100%;
    padding-bottom: 80px;
    /* Space for bottom nav */
  }

  /* Hide version info on mobile */
  .version-info {
    display: none;
  }

  /* Traits grid - 2 columns on mobile */
  .traits-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem;
  }

  /* Ensure inputs are large enough to prevent iOS zoom */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px;
  }
}

/* =====================================================
   MOBILE FLOATING ACTION BUTTONS - Bottom Navigation Bar
   ===================================================== */
@media (max-width: 768px) {
  .floating-action-buttons {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-primary);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    width: 100%;
    max-width: none;
    transform: none !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  .floating-action-btn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px;
    border-radius: 12px !important;
    -webkit-tap-highlight-color: transparent;
  }

  .floating-action-btn:hover {
    transform: none;
  }

  .floating-action-btn:active {
    transform: scale(0.92);
    opacity: 0.9;
  }

  .floating-action-btn .action-button-icon svg {
    width: 22px;
    height: 22px;
  }
}

/* =====================================================
   MOBILE FLOATING PANELS - Bottom Sheet Style
   ===================================================== */
@media (max-width: 768px) {

  .dice-tray-panel:not(.collapsed),
  .campaign-panel:not(.collapsed),
  .theme-panel:not(.collapsed),
  .sheet-panel:not(.collapsed) {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1002;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .dice-tray-panel-content,
  .campaign-panel-content,
  .theme-panel-content,
  .sheet-panel-content {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 85vh;
    border-radius: 16px 16px 0 0 !important;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-primary);
    border: none;
    border-top: 1px solid var(--border-primary);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Collapsed panels should be hidden */
  .dice-tray-panel.collapsed,
  .campaign-panel.collapsed,
  .theme-panel.collapsed,
  .sheet-panel.collapsed {
    display: none !important;
  }
}

/* =====================================================
   MOBILE MODALS - Bottom Sheet Style
   ===================================================== */
@media (max-width: 768px) {
  .modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .modal-content {
    position: relative !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh;
    border-radius: 16px 16px 0 0 !important;
    padding: 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* =====================================================
   MOBILE LANDSCAPE ADJUSTMENTS
   ===================================================== */
@media (max-width: 768px) and (orientation: landscape) {
  .traits-grid {
    grid-template-columns: repeat(5, 1fr) !important;
  }

  /* In landscape, move nav to right side */
  .floating-action-buttons {
    flex-direction: column !important;
    width: auto !important;
    height: 100% !important;
    left: auto !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    padding: 8px !important;
    padding-right: calc(8px + env(safe-area-inset-right, 0px)) !important;
    border-left: 1px solid var(--border-primary);
    border-top: none;
  }

  .floating-action-btn {
    width: 44px !important;
    height: 44px !important;
  }

  body {
    padding-bottom: 0;
    padding-right: 60px;
  }
}

/* =====================================================
   MOBILE EXTRA SMALL SCREENS (< 375px)
   ===================================================== */
@media (max-width: 374px) {
  .floating-action-buttons {
    gap: 8px;
    padding: 8px;
  }

  .floating-action-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
  }

  .floating-action-btn .action-button-icon svg {
    width: 18px;
    height: 18px;
  }
}

/* =====================================================
   MOBILE PRINT STYLES
   ===================================================== */
@media print {
  .floating-action-buttons {
    display: none !important;
  }
}

/* Fix LP Edit Modal Z-Index */
#lp-edit-modal {
  z-index: 10005 !important;
}

/* Fix Quick Add Sheet Modal Z-Index */
#quick-add-sheet-modal {
  z-index: 10006 !important;
}

/* =====================================================
   ILHDEINIAN & SJOVNEVA REPOSITORY STYLES
   ===================================================== */

/* Ilhdeinian Mode Visibility */
.ilhdeinian-only {
  display: none !important;
}

body.ilhdeinian-mode .ilhdeinian-only {
  display: flex !important;
}

/* Sjovneva Repository Modal */

.sjovneva-modal-content {
  max-width: 1000px;
  width: 95%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  box-shadow: var(--shadow-xl);
}

/* Sjovneva Repository Panel */
.sjovneva-panel {
  position: fixed;
  top: 52%;
  /* Slightly higher to center better with larger height */
  transform: translateY(-50%);
  right: 80px;
  /* Space for the floating dock */
  width: 85%;
  max-width: 1100px;
  height: 90vh;
  max-height: 95vh;
  z-index: 999;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

/* Mobile adjustments handled by general media queries or added here if unique */
@media (max-width: 768px) {
  .sjovneva-panel {
    right: 0;
    bottom: 70px;
    /* Above bottom nav */
    top: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    border-radius: 20px 20px 0 0;
  }

  .sjovneva-panel.collapsed {
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
  }
}

@media (min-width: 769px) {
  .sjovneva-panel.collapsed {
    transform: translate(20px, -50%);
    opacity: 0;
    visibility: hidden;
  }
}


/* Panel Content Container - reusing standard class but adding specific overrides if needed */
.sjovneva-panel-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* max-height removed, controlled by panel height */
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  /* For header/body separation */
}

/* Ensure scrollable within view */




.sjovneva-header {
  /* Removed custom header logic, now using .floating-panel-header structure */
  display: none;
  /* Hide old class if present, though HTML replaced */
}

.sjovneva-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

/* --- Ilhdeinian Currency CSS --- */

/* UI in Items Section */
.ilhdeinian-currency-section {
  margin-bottom: 20px;
}

.currency-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.currency-slot {
  display: flex;
  flex-direction: column;
}

.currency-slot label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 2px;
}

.currency-slot input {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--border-radius-sm);
  padding: 8px;
  color: var(--text-primary);
  width: 100%;
  font-family: inherit;
}

.currency-slot input:focus {
  border-color: var(--color-accent);
  outline: none;
}

/* Converter Panel */
.currency-panel {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  right: 80px;
  width: 90%;
  max-width: 500px;
  height: auto;
  max-height: 90vh;
  z-index: 999;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

@media (max-width: 768px) {
  .currency-panel {
    right: 0;
    bottom: 70px;
    top: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    border-radius: 20px 20px 0 0;
  }

  .currency-panel.collapsed {
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
  }
}

@media (min-width: 769px) {
  .currency-panel.collapsed {
    transform: translate(20px, -50%);
    opacity: 0;
    visibility: hidden;
  }

  /* If closed, we want it to hide. The logic above handles the transition */
}

.currency-panel-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 90vh;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.currency-converter-body {
  padding: 20px;
  overflow-y: auto;
}

/* Ported Converter Styles (Adapted) */
.currency-converter-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 25px;
  align-items: start;
}

@media (max-width: 600px) {
  .currency-converter-inputs {
    grid-template-columns: 1fr;
  }
}

.currency-input-group {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--border-radius-md);
  padding: 15px;
  margin-bottom: 0;
  /* Let grid handle gap */
  display: flex;
  flex-direction: column;
}

/* Ensure specificity over generic input styles */
.currency-panel-content .amount-input {
  width: 100%;
  background: var(--bg-primary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--border-radius-sm);
  padding: 20px !important;
  /* Force padding */
  height: 60px !important;
  /* Force height */
  color: var(--text-primary);
  font-size: 1.5rem !important;
  /* Larger text */
}

.currency-label {
  display: block;
  font-size: 0.85rem;
  color: var(--color-accent);
  margin-bottom: 8px;
  font-weight: bold;
  text-transform: uppercase;
}

.currency-select {
  width: 100%;
  background: var(--bg-primary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--border-radius-sm);
  padding: 8px;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.amount-input {
  width: 100%;
  background: var(--bg-primary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--border-radius-sm);
  padding: 15px;
  /* Increased from 10px */
  color: var(--text-primary);
  font-size: 1.2rem;
  /* Slightly larger text */
}

.denomination-info {
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  padding-left: 10px;
  border-left: 3px solid var(--color-accent);
}

.swap-button {
  grid-column: 1 / -1;
  /* Span full width */
  justify-self: center;
  /* Center in grid */
  display: block;
  margin: 0 auto 20px;
  background: var(--color-accent);
  color: var(--bg-primary);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform 0.2s;
}

.swap-button:hover {
  transform: rotate(180deg);
}

.result-display {
  background: var(--bg-tertiary);
  border: 2px solid var(--color-accent);
  border-radius: var(--border-radius-md);
  padding: 20px;
  /* Increased from 15px */
  text-align: center;
  font-size: 1.3rem;
  /* Increased from 1.1rem */
  color: var(--color-accent);
  font-weight: bold;
  margin-bottom: 20px;
  min-height: 80px;
  /* Added min-height for presence */
  display: flex;
  /* Flex to center content */
  align-items: center;
  justify-content: center;
}

.quick-convert {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.quick-button {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-secondary);
  color: var(--text-primary);
  padding: 8px;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
}

.quick-button:hover {
  border-color: var(--color-accent);
  background: var(--bg-primary);
}

.rates-table {
  border: 1px solid var(--border-secondary);
  border-radius: var(--border-radius-md);
  overflow: hidden;
}

.rates-header {
  background: var(--bg-tertiary);
  padding: 10px;
  text-align: center;
  font-weight: bold;
  color: var(--color-accent);
  border-bottom: 1px solid var(--border-secondary);
}

.rates-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--border-secondary);
  /* Grid lines color */
  gap: 1px;
}

.rate-cell {
  background: var(--bg-primary);
  padding: 8px 4px;
  text-align: center;
  font-size: 0.8rem;
}

.rate-cell.header {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-weight: bold;
}

/* Fix Text in Floating Header if needed - standard H3 is used which has app styling */
.floating-panel-header h3 {
  /* Ensure it's not glass */
  text-shadow: none;
  font-weight: 600;
}

.sjovneva-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

/* Spell Selector */
.sjovneva-body .spell-selector {
  margin-bottom: 20px;
  background: var(--bg-tertiary);
  padding: 20px;
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--border-primary);
}

.sjovneva-body select {
  width: 100%;
  padding: 12px;
  font-size: 1.1rem;
  border: 2px solid var(--border-secondary);
  border-radius: var(--border-radius-md);
  background: var(--bg-primary);
  color: var(--text-primary);
}

.sjovneva-body select:focus {
  border-color: var(--color-warning);
  outline: none;
}

/* Spell Details */
.spell-info {
  display: none;
  animation: fadeIn 0.3s ease;
}

.spell-info.active {
  display: block;
}

.spell-header {
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-secondary);
}

.spell-name {
  font-size: 2.2em;
  color: var(--color-warning);
  margin-bottom: 0.5rem;
  display: block;
}

.incantation {
  font-size: 1.4em;
  color: var(--text-secondary);
  font-style: italic;
  display: block;
  margin-bottom: 1rem;
}

.spell-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 2rem;
}

.detail-card {
  background: var(--bg-tertiary);
  padding: 20px;
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--border-primary);
}

.detail-title {
  color: var(--color-warning);
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

.god-relationships {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.relationship-card {
  background: var(--bg-tertiary);
  padding: 20px;
  border-radius: var(--border-radius-lg);
  border-left: 4px solid var(--border-secondary);
}

.relationship-card.dominion {
  border-left-color: var(--color-success);
}

.relationship-card.opposing {
  border-left-color: var(--color-danger);
}

.relationship-card.passive {
  border-left-color: var(--color-warning);
}

.relationship-title {
  font-size: 1.2rem;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  color: var(--text-primary);
  font-weight: bold;
}

.relationship-title::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 10px;
}

.dominion .relationship-title::before {
  background: var(--color-success);
}

.opposing .relationship-title::before {
  background: var(--color-danger);
}

.passive .relationship-title::before {
  background: var(--color-warning);
}

.god-list {
  list-style: none;
  padding: 0;
  margin-top: 10px;
}

.god-list li {
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  font-size: 0.95rem;
}

.god-list li::before {
  content: '•';
  color: var(--color-warning);
  margin-right: 8px;
}

.god-name {
  font-weight: 600;
  color: var(--text-primary);
  margin-right: 5px;
}

.domain {
  color: var(--text-secondary);
  font-style: italic;
  font-size: 0.9em;
}

.god-description {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 10px;
  line-height: 1.4;
}

.warning-box {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--color-danger);
  border-left: 4px solid var(--color-danger);
  border-radius: var(--border-radius-md);
  padding: 15px;
  margin-top: 20px;
  animation: pulse-glow 2s infinite;
}

.warning-title {
  color: var(--color-danger);
  font-weight: bold;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Old TOC dock styles removed - see unified TOC styles at top of file */

/* Content Nudge logic explicitly tied to TOC state */
.main-content {
  transition: margin-right 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding-right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* TOC is floating and should never affect content layout */
.main-content.with-toc,
.main-content.has-toc {
  /* No padding - TOC floats independently */
  padding-right: 0 !important;
  margin-right: 0 !important;
}

/* Old TOC positioning rules removed - unified styles at top of file */

/* --- Fix for Markdown Body Text Visibility in Dark Mode --- */
body.dark-mode .markdown-body {
  color: var(--text-primary) !important;
  /* Parchment white */
}

body.dark-mode .markdown-body p,
body.dark-mode .markdown-body ul,
body.dark-mode .markdown-body ol,
body.dark-mode .markdown-body li,
body.dark-mode .markdown-body span,
body.dark-mode .markdown-body div {
  color: var(--text-primary) !important;
}

/* Ensure links are visible too, distinct from text */
body.dark-mode .markdown-body a {
  color: var(--color-primary) !important;
  /* Gold */
  text-decoration: none;
  border-bottom: 1px dashed var(--color-primary-dark);
}

body.dark-mode .markdown-body a:hover {
  color: var(--color-primary-light) !important;
  text-shadow: 0 0 5px rgba(212, 175, 55, 0.4);
  border-bottom-style: solid;
}

/* --- Utility Classes --- */
.two-columns {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.two-columns>div {
  flex: 1;
  min-width: 300px;
  /* Ensure they wrap on small screens */
}

@media (max-width: 768px) {
  .two-columns {
    flex-direction: column;
    gap: 1rem;
  }
}

/* --- Sjovneva Spell Repository Styles --- */

/* 1. Pull Tab (Dock) */
#sjovneva-dock {
  position: fixed;
  top: 50%;
  /* Adjusted Spacing */
  right: 0;
  transform: translateY(-50%);
  z-index: 1000;
  width: 60px;
  height: auto;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

#sjovneva-toggle-btn {
  pointer-events: auto;
  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  border-right: none;
  border-radius: 8px 0 0 8px;
  padding: 10px 15px;
  color: var(--color-primary);
  cursor: pointer;
  font-family: 'Cinzel', serif;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  box-shadow:
    -4px 0 10px rgba(0, 0, 0, 0.5),
    inset 0 0 10px rgba(0, 0, 0, 0.5);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#sjovneva-toggle-btn:hover {
  background: var(--color-primary);
  color: var(--bg-secondary);
  padding-right: 20px;
  box-shadow:
    -4px 0 15px rgba(212, 175, 55, 0.4),
    inset 0 0 5px rgba(0, 0, 0, 0.2);
}

#sjovneva-toggle-btn .sjovneva-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  /* Flat white */
}

#sjovneva-toggle-btn .sjovneva-icon svg {
  width: 24px;
  height: 24px;
}

#sjovneva-toggle-btn .sjovneva-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 0.1em;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

#sjovneva-toggle-btn:hover .sjovneva-label {
  max-height: 100px;
  opacity: 1;
  margin-top: 5px;
}

/* Active State - Attached to Modal */
#sjovneva-toggle-btn.active {
  position: fixed;
  right: 1200px;
  /* Matches Modal Width */
  top: 55%;
  /* Matches Dock Top */
  transform: translateY(-50%);
  z-index: 2001;
  /* Above Modal Border */
  background: var(--bg-secondary);
  border-right: none;
  margin-right: -2px;
  /* Overlap border */
  box-shadow: -4px 0 10px rgba(0, 0, 0, 0.5);

  /* Glass/Texture match if needed */
  background-image:
    radial-gradient(circle at 20% 80%, var(--theme-glow-color-low) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, var(--theme-glow-color-low) 0%, transparent 50%);
  color: #fff !important;
}

#sjovneva-toggle-btn.active .sjovneva-icon,
#sjovneva-toggle-btn.active .sjovneva-label {
  color: #fff !important;
}

@media (max-width: 900px) {
  #sjovneva-toggle-btn.active {
    right: 90vw;
  }
}

/* 2. Modal Container */
/* 2. Modal Container - Side Drawer Slide-In */
/* COMMENTED OUT - Conflicts with dropdown style at line 17445 */
/*
.sjovneva-modal {
  position: fixed;
  top: 50%;
  right: 0;
  left: auto;
  transform: translateY(-50%) translateX(120%);
  width: 1200px;
  max-width: 95vw;
  height: 95vh;

  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  border-right: none;
  border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
  z-index: 2000;

  box-shadow:
    -10px 0 40px rgba(0, 0, 0, 0.8),
    inset 0 0 50px rgba(0, 0, 0, 0.5);

  padding: 2rem;
  display: flex;
  flex-direction: column;
  opacity: 1;
  visibility: visible;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--text-primary);
  font-family: var(--font-primary);

  background-image:
    radial-gradient(circle at 20% 80%, var(--theme-glow-color-low) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, var(--theme-glow-color-low) 0%, transparent 50%);
}

.sjovneva-modal.active {
  transform: translateY(-50%) translateX(0);
}
*/

/* 3. Header */
.sjovneva-header {
  text-align: center;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--border-primary);
  padding-bottom: 10px;
}

.sjovneva-header h2 {
  font-family: 'Cinzel', serif;
  color: var(--color-primary);
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 0 0 10px var(--theme-glow-color-high);
  margin: 0;
}

/* 4. Selector */
.sjovneva-selector {
  margin-bottom: 20px;
}

#sjovneva-dropdown {
  width: 100%;
  padding: 12px;
  font-size: 1.1rem;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-md);
  font-family: 'Cinzel', serif;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

#sjovneva-dropdown:focus {
  outline: none;
  border-color: var(--color-active);
  box-shadow: 0 0 10px var(--theme-glow-color-high);
}

/* 5. Details Section (Scrollable) */
.sjovneva-content-scroll {
  flex: 1;
  overflow-y: auto;
  padding-right: 10px;
  /* Scrollbar styling matches site defaults usually, but let's ensure */
}

.sjovneva-loading {
  text-align: center;
  font-style: italic;
  color: var(--text-secondary);
  margin-top: 50px;
}

.sjovneva-spell-header {
  text-align: center;
  margin-bottom: 30px;
}

.sjovneva-spell-name {
  font-family: 'Cinzel', serif;
  font-size: 1.8rem;
  color: var(--color-primary);
  margin-bottom: 10px;
  border-bottom: none !important;
  /* Override default h3 border */
}

.sjovneva-incantation {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--text-secondary);
}

.sjovneva-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

/* Side-by-Side Detail Row */
.sjovneva-details-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.sjovneva-details-row .sjovneva-detail-card {
  flex: 1;
}

.sjovneva-detail-card {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border-secondary);
  padding: 15px;
  border-radius: var(--border-radius-md);
}

.sjovneva-detail-card.full-width {
  grid-column: 1 / -1;
}

.sjovneva-detail-title {
  color: var(--color-primary);
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  text-transform: uppercase;
  margin-bottom: 5px;
  opacity: 0.8;
}

/* Warning Box */
.sjovneva-warning-box {
  background: rgba(139, 21, 56, 0.2);
  /* Reddish tint */
  border: 1px solid #d45d5d;
  /* Red border */
  border-left: 4px solid #d45d5d;
  padding: 15px;
  border-radius: var(--border-radius-md);
  margin-bottom: 20px;
}

.sjovneva-warning-title {
  color: #d45d5d;
  font-weight: bold;
  font-family: 'Cinzel', serif;
  margin-bottom: 5px;
}

/* Relationships */
.sjovneva-section-title {
  font-family: 'Cinzel', serif;
  color: var(--color-primary);
  margin-top: 20px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--border-secondary);
  padding-bottom: 5px;
}

.sjovneva-relationships-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.sjovneva-relationship-card {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border-secondary);
  border-radius: var(--border-radius-md);
  padding: 15px;
  height: 100%;
}

.sjovneva-rel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.sjovneva-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}

.sjovneva-dot.dominion {
  background-color: var(--color-success);
}

.sjovneva-dot.opposing {
  background-color: var(--color-danger);
}

.sjovneva-dot.passive {
  background-color: var(--color-warning);
}

.sjovneva-rel-title {
  font-family: 'Cinzel', serif;
  font-weight: bold;
  color: var(--text-primary);
  text-transform: uppercase;
}

.sjovneva-rel-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 15px;
  font-style: italic;
}

.sjovneva-god-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sjovneva-god-list li {
  margin-bottom: 5px;
  font-size: 0.95rem;
}

.sjovneva-god-list .god-name {
  color: var(--color-primary-light);
  font-weight: bold;
}

.sjovneva-god-list .god-domain {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-left: 5px;
}

.sjovneva-no-gods {
  color: var(--text-secondary);
  font-style: italic;
  opacity: 0.6;
}

/* --- Ilhdeinian Currency Converter Styles --- */

/* 1. Pull Tab (Dock) */
#currency-dock {
  position: fixed;
  top: 65%;
  /* Adjusted Spacing */
  right: 0;
  transform: translateY(-50%);
  z-index: 1000;
  width: 60px;
  height: auto;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

#currency-toggle-btn {
  pointer-events: auto;
  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  border-right: none;
  border-radius: 8px 0 0 8px;
  padding: 10px 15px;
  color: var(--color-primary);
  cursor: pointer;
  font-family: 'Cinzel', serif;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  align-items: center;

  box-shadow:
    -4px 0 10px rgba(0, 0, 0, 0.5),
    inset 0 0 10px rgba(0, 0, 0, 0.5);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#currency-toggle-btn:hover {
  background: var(--color-primary);
  color: var(--bg-secondary);
  padding-right: 20px;
  box-shadow:
    -4px 0 15px rgba(212, 175, 55, 0.4),
    inset 0 0 5px rgba(0, 0, 0, 0.2);
  gap: 5px;
}

#currency-toggle-btn .currency-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  /* Flat white */
}

#currency-toggle-btn .currency-icon svg {
  width: 24px;
  height: 24px;
}

#currency-toggle-btn .currency-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 0.1em;
  color: #000;
  /* Ensure black text */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

#currency-toggle-btn:hover .currency-label {
  max-height: 100px;
  opacity: 1;
  margin-top: 5px;
}

/* Active State - Attached to Modal */
#currency-toggle-btn.active {
  position: fixed;
  right: 800px;
  /* Matches Modal Width */
  top: 80%;
  /* Matches Dock Top */
  transform: translateY(-50%);
  z-index: 2001;
  background: var(--bg-secondary);
  border-right: none;
  margin-right: -2px;
  box-shadow: -4px 0 10px rgba(0, 0, 0, 0.5);

  background-image:
    radial-gradient(circle at 20% 80%, var(--theme-glow-color-low) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, var(--theme-glow-color-low) 0%, transparent 50%);
  color: #fff !important;
}

#currency-toggle-btn.active .currency-icon,
#currency-toggle-btn.active .currency-label {
  color: #fff !important;
}

@media (max-width: 900px) {
  #currency-toggle-btn.active {
    right: 90vw;
  }
}

/* 2. Modal Container */
/* 2. Modal Container - Side Drawer */
/* COMMENTED OUT - Conflicts with dropdown style at line 17445 */
/*
.currency-modal {
  position: fixed;
  top: 50%;
  right: 0;
  left: auto;
  transform: translateY(-50%) translateX(120%);
  width: 800px;
  max-width: 90vw;
  height: auto;
  max-height: 90vh;

  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  border-right: none;
  border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
  z-index: 2000;

  box-shadow:
    -10px 0 40px rgba(0, 0, 0, 0.8),
    inset 0 0 50px rgba(0, 0, 0, 0.5);

  padding: 2rem;
  display: flex;
  flex-direction: column;
  opacity: 1;
  visibility: visible;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--text-primary);
  font-family: var(--font-primary);

  background-image:
    radial-gradient(circle at 20% 80%, var(--theme-glow-color-low) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, var(--theme-glow-color-low) 0%, transparent 50%);
}

.currency-modal.active {
  transform: translateY(-50%) translateX(0);
}
*/

/* 3. Header */
.currency-header {
  text-align: center;
  margin-bottom: 25px;
}

.currency-header h2 {
  font-family: 'Cinzel', serif;
  color: var(--color-primary);
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 0 0 10px var(--theme-glow-color-high);
  margin: 0;
}

.currency-subtitle {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-top: 5px;
}

/* 4. Converter Card */
.currency-converter-card {
  background: transparent;
  /* Remove inner box bg */
  border: none;
  /* Remove inner box border */
  padding: 0;
  margin-bottom: 0px;
  /* Removed margin */
  box-shadow: none;
  /* Remove inner box shadow */
}

.currency-input-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .currency-input-group {
    flex-direction: column;
  }
}

.currency-input-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(0, 0, 0, 0.2);
  padding: 15px;
  border-radius: 8px;
  border: 1px solid var(--border-secondary);
  /* Make these the primary 'content boxes' now that the wrapper is gone */
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}

.currency-label {
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  color: var(--color-primary);
  text-transform: uppercase;
}

.currency-select {
  width: 100%;
  padding: 8px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  cursor: pointer;
}

.amount-input {
  width: 100%;
  padding: 10px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-secondary);
  color: var(--text-primary);
  font-size: 1.1rem;
  border-radius: 4px;
}

.amount-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.denomination-info {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 5px;
  border-top: 1px dashed var(--border-secondary);
  padding-top: 5px;
}

.currency-swap-container {
  display: flex;
  justify-content: center;
}

.currency-swap-button {
  background: var(--bg-tertiary);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.currency-swap-button:hover {
  background: var(--color-primary);
  color: var(--bg-secondary);
  transform: rotate(180deg);
}

.currency-result-display {
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
  color: var(--color-primary-light);
  margin-bottom: 0px;
  /* Removed margin */
}

.currency-quick-convert {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.quick-button {
  background: transparent;
  border: 1px solid var(--border-secondary);
  color: var(--text-secondary);
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: var(--font-primary);
  transition: all 0.2s ease;
}

.quick-button:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(212, 175, 55, 0.1);
}

/* 5. Rates Table */
.currency-rates-table {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-secondary);
  border-radius: 8px;
  overflow: hidden;
}

.rates-header {
  background: rgba(0, 0, 0, 0.5);
  padding: 10px;
  text-align: center;
  font-family: 'Cinzel', serif;
  font-weight: bold;
  color: var(--color-primary);
  border-bottom: 1px solid var(--border-secondary);
}

.rates-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--border-secondary);
  /* Grid lines color */
}

.rate-cell {
  background: rgba(0, 0, 0, 0.2);
  padding: 8px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.rate-cell.header {
  background: rgba(0, 0, 0, 0.4);
  color: var(--color-primary);
  font-weight: bold;
  font-size: 0.8rem;
}

/* Old persistent TOC styles removed - unified slide-out drawer styles at top of file */


/* --- Top Bar Actions --- */
.topbar-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  position: relative;
  z-index: 9999 !important;
  /* Ensure above EVERYTHING */
}

.topbar-action-btn {
  background: transparent;
  border: 1px solid transparent;
  /* Cleaner look for icons */
  color: #e0e0e0;
  padding: 0.4rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto !important;
}

.topbar-action-btn:hover,
.topbar-action-btn.active {
  color: #d4af37;
  background: rgba(212, 175, 55, 0.1);
  border-color: rgba(212, 175, 55, 0.3);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}

.topbar-action-btn svg {
  stroke: currentColor;
  width: 24px;
  height: 24px;
}


/* --- Unfurling Modals (Sjovneva & Currency) --- */

/* Common Modal Styles */
.sjovneva-modal,
.currency-modal {
  position: fixed;
  top: 60px;
  /* Attach exactly to bottom of topbar */
  right: 20px;
  /* Align with right edge/buttons roughly */
  width: 800px;
  /* Extra wide for spell details display */
  max-height: 0;
  /* Start collapsed */
  background-color: #121212;
  /* Dark paper */
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");
  border: 1px solid #d4af37;
  border-top: none;
  /* Looks like it comes out of the bar */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9);
  overflow: hidden;
  /* Hide content when closed */
  transition: max-height 0.3s ease, padding 0.3s ease;
  /* Simple pop-out animation */
  z-index: 999;
  /* Below topbar which is z-index: 1000 */
  padding: 0 1.5rem;
  /* No vertical padding initially */
  pointer-events: none;
  /* Disable interaction when closed */
  display: none;
  /* Completely hide when not active */

  /* Scroll effect aesthetic */
  border-radius: 0 0 5px 5px;
}

.sjovneva-modal.active,
.currency-modal.active {
  display: block;
  /* Show when active */
  max-height: 85vh;
  /* Unfurl limit */
  padding: 1.5rem;
  /* Restore padding */
  overflow-y: auto;
  /* Allow scrolling inside if content is long */
  pointer-events: auto;
  /* Enable interaction when active */
}

/* Hide the old "docks" entirely */
#sjovneva-dock,
#currency-dock,
#toc-dock {
  display: none !important;
}

/* --- OVERRIDE: MOBILE MODAL SIZING --- */
@media (max-width: 768px) {

  .sjovneva-modal,
  .currency-modal {
    width: 95% !important;
    max-width: 95vw !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    top: 60px !important;
  }
}

/* ============================================= */
/* CUSTOM DROPDOWN COMPONENT                    */
/* ============================================= */

.custom-dropdown {
  position: relative;
  width: 100%;
  user-select: none;
}

.custom-dropdown-trigger {
  width: 100%;
  padding: 12px 40px 12px 12px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-md);
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  cursor: pointer;
  text-align: left;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.custom-dropdown-trigger::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--text-secondary);
  transition: transform 0.2s ease;
}

.custom-dropdown.open .custom-dropdown-trigger::after {
  transform: translateY(-50%) rotate(180deg);
}

.custom-dropdown-trigger:hover,
.custom-dropdown-trigger:focus {
  outline: none;
  border-color: var(--color-active);
  box-shadow: 0 0 10px var(--theme-glow-color-high);
}

.custom-dropdown-trigger .placeholder {
  color: var(--text-secondary);
  font-style: italic;
}

.custom-dropdown-menu {
  /* Position set dynamically via JS for fixed positioning */
  position: fixed;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  max-height: 300px;
  overflow-y: auto;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}

.custom-dropdown.open .custom-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.custom-dropdown-option {
  padding: 10px 14px;
  cursor: pointer;
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  color: var(--text-primary);
  transition: background-color 0.15s ease, color 0.15s ease;
  border-bottom: 1px solid var(--border-secondary);
}

.custom-dropdown-option:last-child {
  border-bottom: none;
}

.custom-dropdown-option:hover,
.custom-dropdown-option.highlighted {
  background: var(--color-primary);
  color: var(--bg-primary);
}

.custom-dropdown-option.selected {
  background: rgba(var(--color-primary-rgb, 212, 175, 55), 0.2);
  color: var(--color-primary);
}

.custom-dropdown-option.selected:hover,
.custom-dropdown-option.selected.highlighted {
  background: var(--color-primary);
  color: var(--bg-primary);
}

/* Scrollbar styling for dropdown menu */
.custom-dropdown-menu::-webkit-scrollbar {
  width: 8px;
}

.custom-dropdown-menu::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
  border-radius: 4px;
}

.custom-dropdown-menu::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 4px;
}

.custom-dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-light);
}

/* Currency modal specific dropdown adjustments */
.currency-modal .custom-dropdown-trigger {
  padding: 8px 36px 8px 8px;
  font-size: 0.95rem;
}

.currency-modal .custom-dropdown-trigger::after {
  right: 10px;
  border-left-width: 5px;
  border-right-width: 5px;
  border-top-width: 5px;
}

.currency-modal .custom-dropdown-menu {
  max-height: 200px;
}

.currency-modal .custom-dropdown-option {
  padding: 8px 12px;
  font-size: 0.9rem;
}

/* Mobile adjustments for custom dropdown */
@media (max-width: 768px) {
  .custom-dropdown-menu {
    max-height: 250px;
  }

  .custom-dropdown-trigger {
    padding: 10px 36px 10px 10px;
    font-size: 0.95rem;
  }

  .custom-dropdown-option {
    padding: 12px 14px;
  }

  /* Fix for long headings wrapping on mobile (like Acknowledgements) */
  .markdown-body h2 {
    font-size: clamp(1.2rem, 5vw, 2rem) !important;
  }
}