/* 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.375rem;
  --border-radius-lg: 0.5rem;
  --border-radius-xl: 0.75rem;
  --border-radius-2xl: 1rem;

  /* 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-grounded: 'Barlow Condensed', 'Impact', 'Arial Narrow', sans-serif;
  --font-fantasy: 'Cinzel', Georgia, serif;
  --font-bloody: 'Libre Baskerville', 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 */
body.dark-mode {
  /* Colors from Reference */
  --color-primary: #5FCBF0;
  /* Cyan accent */
  --color-primary-dark: #01AAD7;
  /* Darker Cyan */
  --color-primary-light: #A5F3FC;
  /* Light Cyan */
  --color-secondary: #94a3b8;
  /* Slate-400 */
  --color-accent: #5FCBF0;

  --theme-glow-color: #5FCBF0;
  --theme-glow-color-low: rgba(95, 203, 240, 0.1);
  --theme-glow-color-high: rgba(95, 203, 240, 0.4);

  --color-gray-50: #020203;
  /* Deep Black/Slate base */
  --color-gray-100: #0a0e12;
  /* Secondary bg */
  --color-gray-200: #1e293b;
  --color-gray-300: #334155;
  --color-gray-400: #475569;
  --color-gray-500: #64748b;
  --color-gray-600: #94a3b8;
  --color-gray-700: #cbd5e1;
  --color-gray-800: #e2e8f0;
  --color-gray-900: #f8fafc;

  --bg-primary: #020203;
  --bg-secondary: #0a0e12;
  --bg-tertiary: #11151a;
  --text-primary: #ffffff;
  --text-secondary: #94a3b8;
  --border-primary: rgba(95, 203, 240, 0.1);
  --border-secondary: rgba(95, 203, 240, 0.2);

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

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

  /* Fonts */
  --font-primary: 'Outfit', 'Inter', -apple-system, sans-serif;
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;

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

/* Typography Enhancements for Dark Mode */
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: var(--font-heading);
  background: linear-gradient(135deg, white 0%, var(--accent-color) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: text-pulse-glow 3s infinite;
}

body.dark-mode strong,
body.dark-mode b {
  color: var(--text-primary);
  background: none;
  -webkit-text-fill-color: initial;
  background-clip: unset;
  -webkit-background-clip: unset;
  font-weight: 700;
}

/* Animated Background Gradient for Dark Mode */
body.dark-mode::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(1, 170, 215, 0.15) 0%, transparent 60%),
    radial-gradient(circle at 80% 20%, rgba(95, 203, 240, 0.1) 0%, transparent 40%);
  z-index: -1;
  animation: bg-pulse 15s ease-in-out infinite alternate;
  pointer-events: 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-primary);
  border-radius: var(--border-radius-sm);
}

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;
}

/* Compact Dice in Roll Log */
.roll-entry .dice-result {
  padding: 0.25rem;
  margin: 0.125rem;
  min-width: 1.75rem;
  min-height: 1.75rem;
  font-size: 0.8rem;
}

.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: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
}

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

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

/* 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: 2rem;
  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 */
body.dark-mode .logo-text {
  background: linear-gradient(135deg, white 0%, var(--color-accent) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 15px rgba(95, 203, 240, 0.3));
  animation: text-pulse-glow 5s infinite;
}

/* 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 */
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;
}

/* Grounded Theme Logo */
body.grounded-theme .logo-text {
  font-family: var(--font-grounded);
  color: #A16207;
  text-shadow:
    2px 2px 0px #000,
    4px 4px 0px rgba(0, 0, 0, 0.5);
  transform: rotate(-2deg);
  letter-spacing: 0.05em;
}

/* 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 {
  font-family: 'Rajdhani', sans-serif;
  color: var(--color-primary);
  text-shadow:
    0 0 10px rgba(255, 107, 0, 0.8),
    0 0 20px rgba(255, 107, 0, 0.4);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Raygun Light Theme Logo */
body.raygun-light-theme .logo-text {
  font-family: 'Rajdhani', sans-serif;
  color: var(--color-primary-dark);
  text-shadow:
    2px 2px 0px rgba(255, 107, 0, 0.2);
  letter-spacing: 0.2em;
}

/* 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 */
body.serpentine-theme .logo-text {
  font-family: 'Cinzel', serif;
  color: var(--color-primary-light);
  text-shadow:
    0 0 10px rgba(46, 139, 87, 0.8),
    2px 2px 0px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.1em;
}

/* 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 */
body.withered-theme .logo-text {
  font-family: 'Cinzel', serif;
  color: #DAA520;
  text-shadow:
    0 0 10px rgba(205, 133, 63, 0.6),
    2px 2px 4px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.1em;
}


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;
}

/* 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;
}

/* Grounded Theme - Post-Apocalyptic Survival */
body.grounded-theme {
  --theme-glow-color: #A16207;
  --theme-glow-color-low: rgba(161, 98, 7, 0.2);
  --theme-glow-color-high: rgba(161, 98, 7, 0.5);

  --color-primary: #6B7280;
  --color-primary-dark: #4B5563;
  --color-primary-light: #9CA3AF;
  --color-secondary: #78716C;
  /* Warm Stone */
  --color-accent: #A16207;
  /* Rust/Warning */

  --color-gray-50: #0F0F0F;
  --color-gray-100: #1C1C1C;
  --color-gray-200: #292929;
  --color-gray-300: #3D3D3D;
  --color-gray-400: #5C5C5C;
  --color-gray-500: #7A7A7A;
  --color-gray-600: #A3A3A3;
  --color-gray-700: #C9C9C9;
  --color-gray-800: #E0E0E0;
  --color-gray-900: #F5F5F5;

  --bg-primary: #0F0F0F;
  --bg-secondary: #1A1918;
  --bg-tertiary: #252322;
  --text-primary: #E0E0E0;
  --text-secondary: #9CA3AF;
  --border-primary: #57534E;
  --border-secondary: #3D3D3D;

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

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

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

  /* Dusty wasteland with cracked earth vibe - Darker */
  background-color: #050505;
  background-image:
    /* Deep vignette */
    radial-gradient(circle at 50% 50%, transparent 20%, #000000 90%),
    /* Grungy noise texture */
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.1) 0px, rgba(0, 0, 0, 0.1) 2px, transparent 2px, transparent 4px),
    /* Base gradient */
    linear-gradient(180deg, #1a1a1a 0%, #000000 100%);
}

body.grounded-theme .character-sheet {
  border: none;
  position: relative;
  background-color: #1c1c1c;
  box-shadow: 0 0 50px rgba(0, 0, 0, 1);
  /* Askew rotation */
  transform: rotate(-0.5deg);
  /* Broken border effect with clip-path */
  clip-path: polygon(0% 0%,
      90% 0%, 92% 2%, 100% 0%,
      100% 90%, 98% 92%, 100% 100%,
      10% 100%, 8% 98%, 0% 100%,
      0% 10%);
  padding: 2rem;
  overflow: hidden;
  /* Contain inner mess */
}

/* Weathered/damaged border effect */
/* Rough border overlay */
body.grounded-theme .character-sheet::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 4px solid #333;
  pointer-events: none;
  z-index: 10;
  background: transparent;
  mix-blend-mode: overlay;
}

/* Corner damage/wear indicators */
body.grounded-theme .character-sheet::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, rgba(87, 83, 78, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

/* Grounded dock buttons */
body.grounded-theme .floating-action-btn {
  border-radius: 2px;
  transform: rotate(1deg);
  border: 2px solid #555;
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.8);
}

body.grounded-theme .floating-action-btn:hover {
  transform: rotate(0deg) scale(1.1);
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.8);
}

/* Uniform "Warm Stone" look for all buttons in Grounded with White Icons */
body.grounded-theme #sheet-button,
body.grounded-theme #campaign-button,
body.grounded-theme #dice-roller-button,
body.grounded-theme #theme-button,
body.grounded-theme #instructions-toggle-button {
  background: var(--color-secondary);
  /* Warm Stone */
  color: #FFFFFF;
}

body.grounded-theme .stats-box,
body.grounded-theme .trait-item {
  border: 2px solid #444;
  background: #111;
  border-radius: 2px;
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.5);
  position: relative;
  transition: transform 0.2s ease;
  transform: rotate(1deg);
}

/* Alternating wear patterns */
/* Alternating rotations for chaos */
body.grounded-theme .trait-item:nth-child(2n) {
  transform: rotate(-1.5deg);
  border-radius: 1px 4px 2px 5px;
  border-color: #554444;
  /* Slight rust tint */
}

body.grounded-theme .trait-item:nth-child(3n) {
  transform: rotate(2deg);
  border-radius: 5px 2px 4px 1px;
}

body.grounded-theme .stats-box:hover,
body.grounded-theme .trait-item:hover {
  border-color: #A16207;
  transform: scale(1.05) rotate(0deg);
  /* Snap to straight on hover */
  box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.8);
  background: #1a1a1a;
  z-index: 10;
}

body.grounded-theme h2,
body.grounded-theme h3 {
  color: #d4d4d4;
  font-family: 'Special Elite', cursive;
  /* Typewriter feel */
  text-shadow: 2px 2px 0px #000;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  transform: rotate(-1deg);
}

body.grounded-theme label {
  color: #888;
  font-family: 'Special Elite', cursive;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.9em;
}

body.grounded-theme input,
body.grounded-theme textarea,
body.grounded-theme select {
  background: #000;
  border: none;
  border-bottom: 2px solid #555;
  border-radius: 0;
  color: #eee;
  font-family: 'Special Elite', cursive;
  box-shadow: none;
  padding: 5px;
}

body.grounded-theme input:focus,
body.grounded-theme textarea:focus,
body.grounded-theme select:focus {
  border-bottom-color: #A16207;
  background: #111;
  outline: none;
}

body.grounded-theme .btn {
  background: #222;
  border: 2px solid #555;
  color: #ccc;
  font-family: 'Special Elite', cursive;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  box-shadow: 4px 4px 0px #000;
  transform: rotate(1deg);
  transition: all 0.2s;
}

body.grounded-theme .btn:hover {
  background: #A16207;
  color: #000;
  border-color: #A16207;
  transform: translate(-2px, -2px) rotate(0deg);
  box-shadow: 6px 6px 0px #000;
}


body.grounded-theme .floating-panel-content,
body.grounded-theme .modal-content {
  background-color: var(--bg-secondary);
  background-image:
    /* Worn texture */
    repeating-linear-gradient(90deg,
      transparent,
      transparent 50px,
      rgba(120, 113, 108, 0.02) 50px,
      rgba(120, 113, 108, 0.02) 51px),
    linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  border: 1px solid rgba(87, 83, 78, 0.4);
  border-radius: 3px 5px 4px 6px / 6px 4px 5px 3px;
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(120, 113, 108, 0.05);
}

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


/* Glow Effects */
body.grounded-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.grounded-theme h1,
body.grounded-theme h2,
body.grounded-theme h3,
body.grounded-theme h4,
body.grounded-theme h5,
body.grounded-theme h6 {
  animation: text-pulse-glow 3s infinite;
}

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

/* 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: 2px solid var(--color-primary);
  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);
}

/* Glitch bar accent across top */
body.neon-theme .character-sheet::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
      var(--color-primary) 0%,
      var(--color-secondary) 25%,
      var(--color-accent) 50%,
      var(--color-secondary) 75%,
      var(--color-primary) 100%);
  box-shadow:
    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;
  /* Torn paper effect */
  clip-path: polygon(0% 0%, 5% 1%, 10% 0%, 15% 2%, 20% 0%, 25% 1%, 30% 0%, 35% 2%, 40% 0%, 45% 1%, 50% 0%,
      55% 1%, 60% 0%, 65% 2%, 70% 0%, 75% 1%, 80% 0%, 85% 2%, 90% 0%, 95% 1%, 100% 0%,
      100% 100%, 95% 99%, 90% 100%, 85% 99%, 80% 100%, 75% 99%, 70% 100%, 65% 99%, 60% 100%,
      55% 99%, 50% 100%, 45% 99%, 40% 100%, 35% 99%, 30% 100%, 25% 99%, 20% 100%, 15% 99%,
      10% 100%, 5% 99%, 0% 100%);
  padding: 2rem;
}

body.delinquent-theme .character-sheet::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 4px solid var(--color-primary);
  clip-path: polygon(0% 0%, 5% 1%, 10% 0%, 15% 2%, 20% 0%, 25% 1%, 30% 0%, 35% 2%, 40% 0%, 45% 1%, 50% 0%,
      55% 1%, 60% 0%, 65% 2%, 70% 0%, 75% 1%, 80% 0%, 85% 2%, 90% 0%, 95% 1%, 100% 0%,
      100% 100%, 95% 99%, 90% 100%, 85% 99%, 80% 100%, 75% 99%, 70% 100%, 65% 99%, 60% 100%,
      55% 99%, 50% 100%, 45% 99%, 40% 100%, 35% 99%, 30% 100%, 25% 99%, 20% 100%, 15% 99%,
      10% 100%, 5% 99%, 0% 100%);
  pointer-events: none;
  opacity: 0.5;
}

/* 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;
}

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;
}

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);
}

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.2rem;
  color: var(--color-primary);
  /* Ink color */
  font-weight: bold;
  padding-bottom: 0px;
}

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.1rem;
  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);
}

/* 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 .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 .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);
}

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.2rem;
  color: var(--color-primary);
  font-weight: bold;
  padding-bottom: 0px;
}

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.1rem;
  transform: rotate(2deg);
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
}

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 - Orange & White Retro Futurism */
body.raygun-gothic-theme {
  --theme-glow-color: #FF6B00;
  --theme-glow-color-low: rgba(255, 107, 0, 0.2);
  --theme-glow-color-high: rgba(255, 107, 0, 0.5);

  --color-primary: #FF6B00;
  /* Vibrant Raygun Orange */
  --color-primary-dark: #CC5500;
  --color-primary-light: #FF8533;
  --color-secondary: #F5F5F5;
  /* Clean White */
  --color-accent: #FFB366;
  /* Soft Orange Glow */

  --color-gray-50: #1A1612;
  /* Warm dark base */
  --color-gray-100: #2A2420;
  --color-gray-200: #3D3530;
  --color-gray-300: #524A42;
  --color-gray-400: #7A6E62;
  --color-gray-500: #A69A8E;
  --color-gray-600: #D4CCC4;
  --color-gray-700: #E8E4E0;
  --color-gray-800: #F5F3F0;
  --color-gray-900: #FFFFFF;

  --bg-primary: #1A1612;
  --bg-secondary: #241E18;
  --bg-tertiary: #2E2620;
  --text-primary: #FFFFFF;
  --text-secondary: #FFB366;
  --border-primary: #FF6B00;
  --border-secondary: #3D3530;

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

  --body-gradient-1: #0F0D0A;
  --body-gradient-2: #1A1612;

  --font-primary: 'Rajdhani', sans-serif;

  /* Retro-futuristic background with scanlines and glow */
  background-color: #0F0D0A;
  background-image:
    /* Scanline effect */
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(255, 107, 0, 0.02) 2px,
      rgba(255, 107, 0, 0.02) 4px),
    /* Orange glow from top */
    radial-gradient(ellipse at 50% -10%, rgba(255, 107, 0, 0.15) 0%, transparent 50%),
    /* Corner accents */
    radial-gradient(circle at 0% 0%, rgba(255, 107, 0, 0.08) 0%, transparent 30%),
    radial-gradient(circle at 100% 100%, rgba(255, 107, 0, 0.06) 0%, transparent 30%),
    /* Base gradient */
    linear-gradient(135deg, var(--body-gradient-1) 0%, var(--body-gradient-2) 100%);
}

body.raygun-gothic-theme .character-sheet {
  border: none;
  position: relative;
  background-color: var(--bg-secondary);
  box-shadow:
    0 0 40px rgba(255, 107, 0, 0.2),
    0 0 80px rgba(255, 107, 0, 0.1),
    inset 0 0 60px rgba(0, 0, 0, 0.5);
  /* Retro panel lines */
  background-image:
    /* Horizontal accent lines */
    linear-gradient(0deg, transparent 98%, rgba(255, 107, 0, 0.1) 98%, rgba(255, 107, 0, 0.1) 100%),
    /* Subtle grid pattern */
    linear-gradient(90deg, transparent 98%, rgba(255, 255, 255, 0.02) 98%);
  background-size: 100% 60px, 60px 100%;
  padding: 2rem;
}

/* Retro-futuristic border with angled corners */
body.raygun-gothic-theme .character-sheet::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 3px solid rgba(255, 107, 0, 0.6);
  pointer-events: none;
  /* Beveled/angled corners */
  clip-path: polygon(0 10px, 10px 0,
      calc(100% - 10px) 0, 100% 10px,
      100% calc(100% - 10px), calc(100% - 10px) 100%,
      10px 100%, 0 calc(100% - 10px));
  box-shadow:
    inset 0 0 20px rgba(255, 107, 0, 0.15),
    0 0 20px rgba(255, 107, 0, 0.2);
}

/* Uniform "Retro Dark" look for all buttons in Raygun Gothic + Tactile Feel */
body.raygun-gothic-theme .floating-action-btn {
  border: 2px solid var(--color-primary);
  border-radius: 8px;
  /* Tactile bevel effect */
  border-bottom-width: 4px;
  border-right-width: 4px;
  clip-path: none;
  /* Remove clip path to allow border bevels to show fully */
  box-shadow:
    inset 2px 2px 0px rgba(255, 255, 255, 0.1),
    0 0 20px rgba(255, 107, 0, 0.3);
}

body.raygun-gothic-theme .floating-action-btn:active {
  transform: translateY(2px) translateX(2px);
  border-bottom-width: 2px;
  border-right-width: 2px;
}

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: var(--bg-tertiary);
  color: var(--color-primary);
}

/* Secondary inner border accent */
body.raygun-gothic-theme .character-sheet::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  pointer-events: none;
  clip-path: polygon(0 8px, 8px 0,
      calc(100% - 8px) 0, 100% 8px,
      100% calc(100% - 8px), calc(100% - 8px) 100%,
      8px 100%, 0 calc(100% - 8px));
}

body.raygun-gothic-theme .stats-box,
body.raygun-gothic-theme .trait-item {
  border: 2px solid rgba(255, 107, 0, 0.4);
  background: linear-gradient(135deg, rgba(36, 30, 24, 0.95) 0%, rgba(46, 38, 32, 0.8) 100%);
  /* Angled corners for retro feel */
  clip-path: polygon(0 6px, 6px 0,
      calc(100% - 6px) 0, 100% 6px,
      100% calc(100% - 6px), calc(100% - 6px) 100%,
      6px 100%, 0 calc(100% - 6px));
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
  position: relative;
}

body.raygun-gothic-theme .stats-box:hover,
body.raygun-gothic-theme .trait-item:hover {
  border-color: rgba(255, 107, 0, 0.7);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.6),
    0 0 25px rgba(255, 107, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: scale(1.01);
}

body.raygun-gothic-theme h2,
body.raygun-gothic-theme h3 {
  color: var(--color-primary);
  text-shadow:
    0 0 15px rgba(255, 107, 0, 0.6),
    0 0 30px rgba(255, 107, 0, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.5);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

body.raygun-gothic-theme label {
  color: var(--color-gray-600);
  text-shadow: 0 0 8px rgba(255, 107, 0, 0.15);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85em;
}

body.raygun-gothic-theme input,
body.raygun-gothic-theme textarea,
body.raygun-gothic-theme select {
  background: linear-gradient(135deg, rgba(26, 22, 18, 0.9) 0%, rgba(36, 30, 24, 0.7) 100%);
  border: 1px solid rgba(255, 107, 0, 0.3);
  color: var(--text-primary);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
  /* Slight angled corners */
  clip-path: polygon(0 3px, 3px 0,
      calc(100% - 3px) 0, 100% 3px,
      100% calc(100% - 3px), calc(100% - 3px) 100%,
      3px 100%, 0 calc(100% - 3px));
}

body.raygun-gothic-theme input:focus,
body.raygun-gothic-theme textarea:focus,
body.raygun-gothic-theme select:focus {
  border-color: rgba(255, 107, 0, 0.6);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.4),
    0 0 15px rgba(255, 107, 0, 0.25);
  outline: none;
}

body.raygun-gothic-theme .btn {
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.8) 0%, rgba(204, 85, 0, 0.9) 100%);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Angled button shape */
  clip-path: polygon(0 4px, 4px 0,
      calc(100% - 4px) 0, 100% 4px,
      100% calc(100% - 4px), calc(100% - 4px) 100%,
      4px 100%, 0 calc(100% - 4px));
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(255, 107, 0, 0.3);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

body.raygun-gothic-theme .btn:hover {
  background: linear-gradient(135deg, rgba(255, 133, 51, 0.9) 0%, rgba(255, 107, 0, 1) 100%);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.6),
    0 0 35px rgba(255, 107, 0, 0.5);
  transform: translateY(-2px);
}

body.raygun-gothic-theme .floating-panel-content,
body.raygun-gothic-theme .modal-content {
  background-color: var(--bg-secondary);
  background-image:
    /* Scanline texture */
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(255, 107, 0, 0.015) 2px,
      rgba(255, 107, 0, 0.015) 4px),
    linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  border: 2px solid rgba(255, 107, 0, 0.5);
  /* Angled panel corners */
  clip-path: polygon(0 12px, 12px 0,
      calc(100% - 12px) 0, 100% 12px,
      100% calc(100% - 12px), calc(100% - 12px) 100%,
      12px 100%, 0 calc(100% - 12px));
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.8),
    0 0 30px rgba(255, 107, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Apply font to all elements */
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: 'Rajdhani', sans-serif;
}


/* Glow Effects */
body.raygun-gothic-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.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: text-pulse-glow 3s infinite;
}

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

/* Raygun Light Theme - Clean White & Orange Retro Futurism */
body.raygun-light-theme {
  --theme-glow-color: #FF6B00;
  --theme-glow-color-low: rgba(255, 107, 0, 0.2);
  --theme-glow-color-high: rgba(255, 107, 0, 0.5);

  --color-primary: #FF6B00;
  --color-primary-dark: #CC5500;
  --color-primary-light: #FF8533;
  --color-secondary: #262626;
  /* Dark contrast */
  --color-accent: #FFB366;

  --color-gray-50: #FFFFFF;
  --color-gray-100: #FAFAFA;
  --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;
  /* Dark text */
  --text-secondary: #CC5500;
  /* Darker orange */
  --border-primary: #FF6B00;
  --border-secondary: #E5E5E5;

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

  --body-gradient-1: #FFFFFF;
  --body-gradient-2: #F5F5F5;

  --font-primary: 'Rajdhani', sans-serif;

  background-color: #FFFFFF;
  background-image:
    /* Scanline effect - very subtle */
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(255, 107, 0, 0.03) 2px,
      rgba(255, 107, 0, 0.03) 4px),
    /* Base gradient */
    linear-gradient(135deg, var(--body-gradient-1) 0%, var(--body-gradient-2) 100%);
}

body.raygun-light-theme .character-sheet {
  border: none;
  position: relative;
  background-color: var(--bg-secondary);
  box-shadow:
    0 0 40px rgba(0, 0, 0, 0.05),
    0 0 80px rgba(255, 107, 0, 0.05);
  /* Retro panel lines - subtle gray/orange */
  background-image:
    linear-gradient(0deg, transparent 98%, rgba(255, 107, 0, 0.1) 98%, rgba(255, 107, 0, 0.1) 100%),
    linear-gradient(90deg, transparent 98%, rgba(0, 0, 0, 0.03) 98%);
  background-size: 100% 60px, 60px 100%;
  padding: 2rem;
}

body.raygun-light-theme .character-sheet::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 3px solid rgba(255, 107, 0, 0.6);
  pointer-events: none;
  clip-path: polygon(0 10px, 10px 0,
      calc(100% - 10px) 0, 100% 10px,
      100% calc(100% - 10px), calc(100% - 10px) 100%,
      10px 100%, 0 calc(100% - 10px));
  box-shadow: inset 0 0 20px rgba(255, 107, 0, 0.1);
}

/* Uniform "Retro Light" look for all buttons in Raygun Light + Tactile Feel */
body.raygun-light-theme .floating-action-btn {
  border: 2px solid var(--color-primary);
  border-radius: 8px;
  /* Tactile bevel effect */
  border-bottom-width: 4px;
  border-right-width: 4px;
  clip-path: none;
  box-shadow:
    inset 1px 1px 0px rgba(255, 255, 255, 0.5),
    0 4px 10px rgba(0, 0, 0, 0.1);
}

body.raygun-light-theme .floating-action-btn:active {
  transform: translateY(2px) translateX(2px);
  border-bottom-width: 2px;
  border-right-width: 2px;
}

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: var(--color-secondary);
  /* Dark charcoal */
  color: #FFF;
}

body.raygun-light-theme .character-sheet::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  pointer-events: none;
  clip-path: polygon(0 8px, 8px 0,
      calc(100% - 8px) 0, 100% 8px,
      100% calc(100% - 8px), calc(100% - 8px) 100%,
      8px 100%, 0 calc(100% - 8px));
}

body.raygun-light-theme .stats-box,
body.raygun-light-theme .trait-item {
  border: 2px solid rgba(255, 107, 0, 0.3);
  background: white;
  /* Clean white for boxes */
  clip-path: polygon(0 6px, 6px 0,
      calc(100% - 6px) 0, 100% 6px,
      100% calc(100% - 6px), calc(100% - 6px) 100%,
      6px 100%, 0 calc(100% - 6px));
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  position: relative;
}

body.raygun-light-theme .stats-box:hover,
body.raygun-light-theme .trait-item:hover {
  border-color: rgba(255, 107, 0, 0.7);
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.1),
    0 0 15px rgba(255, 107, 0, 0.15);
  transform: scale(1.01);
}

body.raygun-light-theme h2,
body.raygun-light-theme h3 {
  color: var(--color-primary-dark);
  text-shadow: none;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

body.raygun-light-theme label {
  color: var(--color-gray-600);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85em;
  font-weight: 600;
}

body.raygun-light-theme input,
body.raygun-light-theme textarea,
body.raygun-light-theme select {
  background: #F8F8F8;
  border: 1px solid rgba(255, 107, 0, 0.3);
  color: var(--text-primary);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  clip-path: polygon(0 3px, 3px 0,
      calc(100% - 3px) 0, 100% 3px,
      100% calc(100% - 3px), calc(100% - 3px) 100%,
      3px 100%, 0 calc(100% - 3px));
}

body.raygun-light-theme input:focus,
body.raygun-light-theme textarea:focus,
body.raygun-light-theme select:focus {
  border-color: rgba(255, 107, 0, 0.8);
  background: white;
  box-shadow: 0 0 0 2px rgba(255, 107, 0, 0.1);
  outline: none;
}

body.raygun-light-theme .btn {
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.9) 0%, rgba(255, 80, 0, 1) 100%);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  clip-path: polygon(0 4px, 4px 0,
      calc(100% - 4px) 0, 100% 4px,
      100% calc(100% - 4px), calc(100% - 4px) 100%,
      4px 100%, 0 calc(100% - 4px));
  box-shadow: 0 4px 10px rgba(255, 107, 0, 0.3);
  transition: all 0.3s ease;
}

body.raygun-light-theme .btn:hover {
  background: linear-gradient(135deg, rgba(255, 133, 51, 1) 0%, rgba(255, 107, 0, 1) 100%);
  box-shadow: 0 4px 15px rgba(255, 107, 0, 0.5);
  transform: translateY(-2px);
}

body.raygun-light-theme .floating-panel-content,
body.raygun-light-theme .modal-content {
  background-color: #FFFFFF;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 107, 0, 0.02) 2px, rgba(255, 107, 0, 0.02) 4px);
  border: 2px solid rgba(255, 107, 0, 0.5);
  clip-path: polygon(0 12px, 12px 0,
      calc(100% - 12px) 0, 100% 12px,
      100% calc(100% - 12px), calc(100% - 12px) 100%,
      12px 100%, 0 calc(100% - 12px));
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

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: 'Rajdhani', sans-serif;
}


/* Glow Effects */
body.raygun-light-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.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: text-pulse-glow 3s infinite;
}

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

/* 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: #FFD700;

  --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 - Snakelike Greens & Purples */
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: #8B008B;
  --color-accent: #9ACD32;

  --color-gray-50: #0A100C;
  --color-gray-100: #121A15;
  --color-gray-200: #1A261E;
  --color-gray-300: #243528;
  --color-gray-400: #3D5A45;
  --color-gray-500: #5E8A6A;
  --color-gray-600: #8BB896;
  --color-gray-700: #B0D4B8;
  --color-gray-800: #D4E8D8;
  --color-gray-900: #F0F8F2;

  --bg-primary: #0A100C;
  --bg-secondary: #121A15;
  --bg-tertiary: #1A261E;
  --text-primary: #F0F8F2;
  --text-secondary: #8BB896;
  --border-primary: #2E8B57;
  --border-secondary: #243528;

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

  --body-gradient-1: #050805;
  --body-gradient-2: #0A100C;

  background-image:
    /* Swamp mist */
    radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(5, 8, 5, 0.95) 75%),
    /* Base */
    linear-gradient(160deg, var(--body-gradient-1) 0%, #0F1A12 50%, #0A0F10 100%);
}

body.serpentine-theme .character-sheet {
  border: none;
  position: relative;
  background-color: var(--bg-secondary);
  box-shadow:
    0 0 35px rgba(46, 139, 87, 0.2),
    0 0 60px rgba(139, 0, 139, 0.08),
    inset 0 0 40px rgba(0, 0, 0, 0.5);
  background-image:
    /* Scale pattern shimmer */
    radial-gradient(ellipse at 50% 100%, rgba(46, 139, 87, 0.06) 0%, transparent 35%);
  padding: 2rem;
}

body.serpentine-theme .character-sheet::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid rgba(46, 139, 87, 0.4);
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(139, 0, 139, 0.15),
    inset 0 0 20px rgba(46, 139, 87, 0.08);
}

/* 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);
}

body.serpentine-theme .stats-box,
body.serpentine-theme .trait-item {
  border: 2px solid rgba(46, 139, 87, 0.3);
  background: linear-gradient(135deg, rgba(10, 16, 12, 0.9) 0%, rgba(18, 26, 21, 0.8) 100%);
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(154, 205, 50, 0.08),
    0 0 10px rgba(46, 139, 87, 0.08);
  transition: all 0.3s ease;
}

body.serpentine-theme .stats-box:hover,
body.serpentine-theme .trait-item:hover {
  border-color: rgba(46, 139, 87, 0.6);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.6),
    0 0 18px rgba(46, 139, 87, 0.2),
    0 0 8px rgba(139, 0, 139, 0.1),
    inset 0 1px 0 rgba(154, 205, 50, 0.12);
  transform: scale(1.01);
}

body.serpentine-theme h2,
body.serpentine-theme h3 {
  color: var(--color-accent);
  text-shadow: 0 0 10px rgba(46, 139, 87, 0.4), 0 2px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.04em;
  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;
}

body.serpentine-theme .btn {
  background: linear-gradient(135deg, rgba(46, 139, 87, 0.35) 0%, rgba(30, 96, 64, 0.45) 100%);
  border: 2px solid rgba(46, 139, 87, 0.5);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.4),
    0 0 8px rgba(46, 139, 87, 0.15);
  transition: all 0.3s ease;
}

body.serpentine-theme .btn:hover {
  background: linear-gradient(135deg, rgba(46, 139, 87, 0.5) 0%, rgba(60, 179, 113, 0.4) 100%);
  border-color: rgba(46, 139, 87, 0.7);
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.5),
    0 0 15px rgba(46, 139, 87, 0.3);
  transform: translateY(-2px);
}

body.serpentine-theme .floating-panel-content,
body.serpentine-theme .modal-content {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  border: 2px solid rgba(46, 139, 87, 0.4);
  box-shadow:
    0 5px 25px rgba(0, 0, 0, 0.7),
    0 0 12px rgba(46, 139, 87, 0.1);
}


/* 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);
}


/* Glow Effects */
body.smoldering-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.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;
}

/* 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 .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;
}

/* Withered Theme - Western Oranges & Yellows */
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: #A0522D;
  --color-primary-light: #DEB887;
  --color-secondary: #DAA520;
  --color-accent: #F4A460;

  --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: #100D08;
  --body-gradient-2: #1A150F;

  background-image:
    /* Desert dust vignette */
    radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(16, 13, 8, 0.9) 75%),
    /* 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 35px rgba(205, 133, 63, 0.2),
    0 0 60px rgba(218, 165, 32, 0.08),
    inset 0 0 40px rgba(0, 0, 0, 0.5);
  background-image:
    /* Dusty texture */
    radial-gradient(ellipse at 50% 0%, rgba(218, 165, 32, 0.04) 0%, transparent 40%);
  padding: 2rem;
}

body.withered-theme .character-sheet::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid rgba(205, 133, 63, 0.4);
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(218, 165, 32, 0.15),
    inset 0 0 20px rgba(205, 133, 63, 0.08);
}

/* Withered dock buttons */
body.withered-theme .floating-action-btn {
  background: var(--bg-secondary);
  border-color: var(--color-primary);
  box-shadow: 0 0 12px rgba(205, 133, 63, 0.35);
}

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(135deg, rgba(205, 133, 63, 0.25) 0%, rgba(160, 82, 45, 0.35) 100%);
  border-color: var(--color-primary);
  color: var(--text-primary);
  box-shadow: 0 0 10px rgba(205, 133, 63, 0.3);
}

body.withered-theme .stats-box,
body.withered-theme .trait-item {
  border: 2px solid rgba(205, 133, 63, 0.3);
  background: linear-gradient(135deg, rgba(26, 21, 15, 0.9) 0%, rgba(42, 34, 24, 0.8) 100%);
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(218, 165, 32, 0.08),
    0 0 10px rgba(205, 133, 63, 0.08);
  transition: all 0.3s ease;
}

body.withered-theme .stats-box:hover,
body.withered-theme .trait-item:hover {
  border-color: rgba(205, 133, 63, 0.6);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.6),
    0 0 18px rgba(205, 133, 63, 0.2),
    inset 0 1px 0 rgba(218, 165, 32, 0.12);
  transform: scale(1.01);
}

body.withered-theme h2,
body.withered-theme h3 {
  color: var(--color-secondary);
  text-shadow: 0 0 8px rgba(218, 165, 32, 0.3), 0 2px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.06em;
  font-weight: 600;
}

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;
}

body.withered-theme .btn {
  background: linear-gradient(135deg, rgba(205, 133, 63, 0.35) 0%, rgba(160, 82, 45, 0.45) 100%);
  border: 2px solid rgba(205, 133, 63, 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(205, 133, 63, 0.15);
  transition: all 0.3s ease;
}

body.withered-theme .btn:hover {
  background: linear-gradient(135deg, rgba(205, 133, 63, 0.5) 0%, rgba(222, 184, 135, 0.4) 100%);
  border-color: rgba(205, 133, 63, 0.7);
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.5),
    0 0 15px rgba(205, 133, 63, 0.3);
  transform: translateY(-2px);
}

body.withered-theme .floating-panel-content,
body.withered-theme .modal-content {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  border: 2px solid rgba(205, 133, 63, 0.4);
  box-shadow:
    0 5px 25px rgba(0, 0, 0, 0.7),
    0 0 12px rgba(205, 133, 63, 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: var(--border-radius-2xl);
  padding: 2rem;
  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.5rem 0.75rem;
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-md);
  font-size: 0.875rem;
  transition: all 0.2s ease;
  background: var(--bg-primary);
  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);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.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);
}

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

.stats-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.stats-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-xl);
  padding: 1.25rem;
  transition: all 0.2s ease;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.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.875rem 0;
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.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 {
  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;
}

.trait-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-primary);
  border: 1px solid transparent;
  border-radius: var(--border-radius-md);
  padding: 0.5rem 0.75rem;
  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: var(--border-radius-lg);
  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;
}

.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 */
@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.375rem 0.25rem;
    font-size: 0.4375rem;
  }

  .dock-btn svg {
    width: 14px;
    height: 14px;
  }

  /* Reposition dock to bottom on mobile */
  /* Reposition dock to bottom on mobile */
  .floating-action-buttons {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    transform: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-bottom: 1.5rem;
    pointer-events: none;
    /* Allow clicks to pass through container */
  }

  .floating-action-buttons>* {
    pointer-events: auto;
    /* Re-enable pointer events on buttons */
  }

  body {
    padding-bottom: 5rem;
  }
}

/* ================================================
   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: var(--border-radius-xl);
  box-shadow: var(--shadow-xl);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: bottom right;
  overflow: hidden;
  padding: 1.25rem;
}

.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;
}

/* 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.grounded-theme-preview {
  border-left: 4px solid #6B7280;
}

.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 #2E8B57;
}

.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 #CD853F;
}

/* 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.grounded-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;
}


/* Legacy button styles (kept for modals and other uses) */
.btn {
  padding: 0.625rem 1rem;
  border: none;
  border-radius: var(--border-radius-lg);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  text-decoration: none;
  color: var(--color-white);
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.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;
}

#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;
}



@media (max-width: 768px) {
  .floating-action-buttons {
    top: auto;
    transform: none;
    bottom: 1rem;
    right: 1rem;
  }

  .floating-action-btn {
    width: 2.75rem;
    height: 2.75rem;
  }

  .floating-action-btn .action-button-icon svg {
    width: 16px;
    height: 16px;
  }
}

.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: 2rem;
  border: 1px solid var(--border-primary);
  width: 90%;
  max-width: 500px;
  border-radius: var(--border-radius-2xl);
  position: relative;
  box-shadow: var(--shadow-xl);
  animation: slideIn 0.3s ease;
}

.instructions-modal-content {
  max-width: 900px;
}

.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;
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-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: 128px;
  height: 128px;
  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;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  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.grounded-theme .roll-btn {
  background: var(--color-primary);
}

body.grounded-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) {
  .main-stats-traits-container {
    grid-template-columns: 280px 1fr;
  }

  .traits-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  #endicott-traits {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1280px) {
  .main-stats-traits-container {
    grid-template-columns: 280px 1fr 280px;
  }

  .main-stats-traits-container .traits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  body {
    padding: 1rem 0.5rem;
  }

  .character-sheet {
    padding: 1rem;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
  }

  .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;
  }

  .tab-button {
    min-width: unset;
    justify-content: center;
  }

  .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;
  }

  .modal-content {
    margin: 5% auto;
    padding: 1.5rem;
    width: 95%;
  }
}

@media (max-width: 480px) {
  .character-sheet {
    padding: 0.875rem;
  }

  .tab-content {
    padding: 0.875rem;
  }
}

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 {
  margin-bottom: 2rem;
}

.tribulations-section h3 {
  text-align: center;
  margin-bottom: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 1rem;
}

.tribulations-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-xl);
  padding: 1rem;
}

.tribulation-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-primary);
  padding: 0.5rem 0.75rem;
  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;
}

/* === Auth Modal Styling === */
.auth-modal-content {
  max-width: 480px;
}

.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-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;
}

/* === 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;
}

#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;
  }
}

/* Allow scrolling in columns when roll log visible */
.campaign-dashboard.has-roll-log .campaign-management-left,
.campaign-dashboard.has-roll-log .campaign-management-right,
.campaign-dashboard.has-roll-log .combat-flow-left,
.campaign-dashboard.has-roll-log .combat-flow-right {
  overflow-y: auto;
  min-height: 0;
}

/* Roll Log Column */
.campaign-dashboard-roll-log {
  display: flex;
  flex-direction: column;
}

.campaign-dashboard-roll-log .roll-log-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.campaign-dashboard-roll-log .card-header {
  flex-shrink: 0;
}


.campaign-dashboard-roll-log #roll-log-display {
  flex: 1;
  overflow-y: scroll;
  min-height: 0;
  max-height: calc(100vh - 12rem);
}


.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 */
}

/* 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;
}

.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;
}

.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);
}

#roll-log-display {
  max-height: 300px;
  overflow-y: auto;
  margin-top: 1rem;
}

.roll-entry {
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-md);
}

.roll-entry.private-roll {
  background: rgba(139, 92, 246, 0.1);
  border-color: var(--color-accent);
}

.roll-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.roll-player {
  font-weight: 600;
  color: var(--text-primary);
}

.roll-timestamp {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.roll-details {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.roll-result {
  margin-top: 0.5rem;
  font-weight: 600;
}

.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;
}


/* 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;
}

.readonly-header {
  text-align: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-primary);
}

.readonly-section {
  margin-bottom: 1.5rem;
}

.readonly-section h3 {
  margin: 0 0 0.75rem 0;
  font-size: 1rem;
  color: var(--color-primary);
}

.readonly-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
}

.readonly-item {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-md);
  padding: 0.75rem;
}

.readonly-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
  font-weight: 500;
}

.readonly-value {
  font-size: 1rem;
  color: var(--text-primary);
  font-weight: 600;
}

.readonly-text {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-md);
  padding: 1rem;
  white-space: pre-wrap;
  font-size: 0.875rem;
  line-height: 1.6;
}

/* === 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-tertiary);
}

@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);
}

.turn-order-item.enemy {
  border-left: 3px solid var(--color-danger);
}

.turn-order-item.player {
  border-left: 3px solid var(--color-success);
}

.turn-order-item.gm-character {
  border-left: 3px solid var(--color-accent, #8b5cf6);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, var(--bg-secondary) 100%);
}

.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;
}

.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: 1rem;
    width: 100%;
    align-items: flex-end;
  }

  .header-right-group .detail-group {
    width: auto;
  }

  .path-level-group {
    flex-grow: 2;
    flex-basis: 0;
    min-width: 150px;
  }

  .path-die-group {
    flex-grow: 0;
    min-width: 80px;
  }

  .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(4, 1fr);
  gap: 0.5rem;
}

.add-enemy-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.add-enemy-form .form-group label {
  font-size: 0.7rem;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.add-enemy-form .form-group input {
  padding: 0.5rem;
  font-size: 0.875rem;
}

.add-enemy-form input[type="text"] {
  flex: 1;
}

/* 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;
  }
}

/* === 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: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  transition: opacity 0.5s ease;
  border-radius: inherit;
}

@keyframes pulse-heal {
  0% {
    box-shadow: inset 0 0 0 transparent;
    opacity: 0;
  }

  50% {
    box-shadow: inset 0 0 60px var(--color-info), inset 0 0 120px 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;
  }

  50% {
    box-shadow: inset 0 0 60px var(--color-danger), inset 0 0 120px var(--color-danger);
    opacity: 0.8;
  }

  100% {
    box-shadow: inset 0 0 0 transparent;
    opacity: 0;
  }
}

.animate-heal {
  animation: pulse-heal 1.2s ease-out forwards;
}

.animate-hurt {
  animation: pulse-hurt 1.2s ease-out forwards;
}

.grecaptcha-badge {
  visibility: hidden;
}

.recaptcha-legal {
  font-size: 0.7em;
  color: var(--text-secondary);
  text-align: center;
  margin-top: 1.5rem;
  opacity: 0.7;
}

.recaptcha-legal a {
  color: var(--text-secondary);
  text-decoration: underline;
}

.recaptcha-legal a:hover {
  color: var(--color-primary);
}