/* ========== THEME DEFINITIONS ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: #000;
}

:root {
  --font-body: 'Quattrocento Sans', sans-serif;
  --font-title: 'Metamorphous', 'Cinzel Decorative', serif;
  
  /* Global colors not affected by theme */
  --color-danger: #ef4444;
  --color-danger-hover: #dc2626;
  --color-primary-accent-text: #ffffff; /* For text on primary buttons */

  --elemental-glow-color: transparent;
}

/* Arcane Theme (Default) */
.theme-arcane {
  --theme-bg-primary: #0d1117;
  --theme-bg-secondary: #161b22;
  --theme-bg-tertiary: #1e242b;
  --theme-text-primary: #d0d0d0;
  --theme-text-bright: #f0f8ff;
  --theme-accent-main: #4ec9b0; /* Cyan */
  --theme-accent-secondary: #dcdcaa; /* Yellow */
  --theme-accent-tertiary: #c586c0; /* Purple */
  --theme-border: #30363d;
  --theme-glow: rgba(78, 201, 176, 0.3);
  --theme-grid-color: rgba(78, 201, 176, .07);

  /* Mappings for components using older variable names */
  --color-background-dark: var(--theme-bg-primary);
  --color-background-medium: var(--theme-bg-secondary);
  --color-background-light: var(--theme-bg-tertiary);
  --color-text-base: var(--theme-text-primary);
  --color-text-emphasis: var(--theme-text-bright);
  --color-primary-accent: var(--theme-accent-main);
  --color-highlight: var(--theme-accent-secondary);
  --color-primary-accent-deep: var(--theme-accent-tertiary);
  --color-border: var(--theme-border);
  --color-glow: var(--theme-glow);
  --color-grid: var(--theme-grid-color);
  --color-secondary-bg: var(--theme-bg-tertiary);
  --color-secondary-bg-hover: var(--theme-bg-secondary);
}

/* Runic Theme */
.theme-runic {
  --theme-bg-primary: #101014;
  --theme-bg-secondary: #2a2d34;
  --theme-bg-tertiary: #3c4049;
  --theme-text-primary: #e0e0e0;
  --theme-text-bright: #ffffff;
  --theme-accent-main: #ff4d6d;     /* Glowing Red/Pink */
  --theme-accent-secondary: #ffd60a; /* Gold/Yellow */
  --theme-accent-tertiary: #c17aff; /* Purple/Magenta */
  --theme-border: #4a4e5a;
  --theme-glow: rgba(255, 77, 109, 0.4);
  --shape-hexagon: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  --shape-hexagon-soft: polygon(15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%);

  /* Mappings */
  --color-background-dark: var(--theme-bg-primary);
  --color-background-medium: var(--theme-bg-secondary);
  --color-background-light: var(--theme-bg-tertiary);
  --color-text-base: var(--theme-text-primary);
  --color-text-emphasis: var(--theme-text-bright);
  --color-primary-accent: var(--theme-accent-main);
  --color-highlight: var(--theme-accent-secondary);
  --color-primary-accent-deep: var(--theme-accent-tertiary);
  --color-border: var(--theme-border);
  --color-glow: var(--theme-glow);
  --color-grid: var(--theme-grid-color);
  --color-secondary-bg: var(--theme-bg-tertiary);
  --color-secondary-bg-hover: var(--theme-bg-secondary);
}

/* Forest Theme */
.theme-forest {
  --theme-bg-primary: #1a1d1a;
  --theme-bg-secondary: #252a25;
  --theme-bg-tertiary: #303630;
  --theme-text-primary: #d2d8d2;
  --theme-text-bright: #f2fff2;
  --theme-accent-main: #6a994e; /* Forest Green */
  --theme-accent-secondary: #a7c957; /* Light Green */
  --theme-accent-tertiary: #bc4749; /* Muted Red */
  --theme-border: #4d554d;
  --theme-glow: rgba(106, 153, 78, 0.3);
  --theme-grid-color: rgba(106, 153, 78, .07);

  /* Mappings */
  --color-background-dark: var(--theme-bg-primary);
  --color-background-medium: var(--theme-bg-secondary);
  --color-background-light: var(--theme-bg-tertiary);
  --color-text-base: var(--theme-text-primary);
  --color-text-emphasis: var(--theme-text-bright);
  --color-primary-accent: var(--theme-accent-main);
  --color-highlight: var(--theme-accent-secondary);
  --color-primary-accent-deep: var(--theme-accent-tertiary);
  --color-border: var(--theme-border);
  --color-glow: var(--theme-glow);
  --color-grid: var(--theme-grid-color);
  --color-secondary-bg: var(--theme-bg-tertiary);
  --color-secondary-bg-hover: var(--theme-bg-secondary);
}

/* Cyberpunk Theme */
.theme-cyberpunk {
  --theme-bg-primary: #0a0a1a;
  --theme-bg-secondary: #14142c;
  --theme-bg-tertiary: #2a2a5a;
  --theme-text-primary: #c0c0ff;
  --theme-text-bright: #ffffff;
  --theme-accent-main: #ff00ff; /* Magenta */
  --theme-accent-secondary: #00ffff; /* Cyan */
  --theme-accent-tertiary: #ffff00; /* Yellow */
  --theme-border: #4a4a7a;
  --theme-glow: rgba(255, 0, 255, 0.4);
  --theme-grid-color: rgba(0, 255, 255, 0.07);

  /* Mappings */
  --color-background-dark: var(--theme-bg-primary);
  --color-background-medium: var(--theme-bg-secondary);
  --color-background-light: var(--theme-bg-tertiary);
  --color-text-base: var(--theme-text-primary);
  --color-text-emphasis: var(--theme-text-bright);
  --color-primary-accent: var(--theme-accent-main);
  --color-highlight: var(--theme-accent-secondary);
  --color-primary-accent-deep: var(--theme-accent-tertiary);
  --color-border: var(--theme-border);
  --color-glow: var(--theme-glow);
  --color-grid: var(--theme-grid-color);
  --color-secondary-bg: var(--theme-bg-tertiary);
  --color-secondary-bg-hover: var(--theme-bg-secondary);
}

/* Steampunk Theme */
.theme-steampunk {
  --theme-bg-primary: #3d2b1f;
  --theme-bg-secondary: #5a4b3c;
  --theme-bg-tertiary: #726153;
  --theme-text-primary: #e0d8c7;
  --theme-text-bright: #fffbf0;
  --theme-accent-main: #d4af37;     /* Brass */
  --theme-accent-secondary: #b87333; /* Copper */
  --theme-accent-tertiary: #66b2b2; /* Patina */
  --theme-border: #8c6239;
  --theme-glow: rgba(212, 175, 55, 0.3);
  --theme-grid-color: rgba(184, 115, 51, 0.08);
  --theme-brass-gradient: linear-gradient(145deg, #f0e68c, #d4af37, #b8860b);
  --theme-copper-gradient: linear-gradient(145deg, #e69138, #b87333, #8c5825);

  /* Mappings */
  --color-background-dark: var(--theme-bg-primary);
  --color-background-medium: var(--theme-bg-secondary);
  --color-background-light: var(--theme-bg-tertiary);
  --color-text-base: var(--theme-text-primary);
  --color-text-emphasis: var(--theme-text-bright);
  --color-primary-accent: var(--theme-accent-main);
  --color-highlight: var(--theme-accent-secondary);
  --color-primary-accent-deep: var(--theme-accent-tertiary);
  --color-border: var(--theme-border);
  --color-glow: var(--theme-glow);
  --color-grid: var(--theme-grid-color);
  --color-secondary-bg: var(--theme-bg-tertiary);
  --color-secondary-bg-hover: var(--theme-bg-secondary);
}

/* Solaris Theme */
.theme-solaris {
  --theme-bg-primary: #211900;
  --theme-bg-secondary: #3b2d00;
  --theme-bg-tertiary: #52420f;
  --theme-text-primary: #fff8e1;
  --theme-text-bright: #ffffff;
  --theme-accent-main: #FFC300;
  --theme-accent-secondary: #DAA520;
  --theme-accent-tertiary: #C70039;
  --theme-border: #7a6300;
  --theme-glow: rgba(255, 195, 0, 0.4);
  --theme-grid-color: rgba(218, 165, 32, 0.08);

  /* Mappings */
  --color-background-dark: var(--theme-bg-primary);
  --color-background-medium: var(--theme-bg-secondary);
  --color-background-light: var(--theme-bg-tertiary);
  --color-text-base: var(--theme-text-primary);
  --color-text-emphasis: var(--theme-text-bright);
  --color-primary-accent: var(--theme-accent-main);
  --color-highlight: var(--theme-accent-secondary);
  --color-primary-accent-deep: var(--theme-accent-tertiary);
  --color-border: var(--theme-border);
  --color-glow: var(--theme-glow);
  --color-grid: var(--theme-grid-color);
  --color-secondary-bg: var(--theme-bg-tertiary);
  --color-secondary-bg-hover: var(--theme-bg-secondary);
}

/* Abyssal Theme */
.theme-abyssal {
  --theme-bg-primary: #0c0d2b;
  --theme-bg-secondary: #1a1b4a;
  --theme-bg-tertiary: #2a2c6d;
  --theme-text-primary: #e0e7ff;
  --theme-text-bright: #ffffff;
  --theme-accent-main: #3D5AFE;
  --theme-accent-secondary: #7C4DFF;
  --theme-accent-tertiary: #536DFE;
  --theme-border: #3949ab;
  --theme-glow: rgba(61, 90, 254, 0.4);
  --theme-grid-color: rgba(124, 77, 255, 0.07);

  /* Mappings */
  --color-background-dark: var(--theme-bg-primary);
  --color-background-medium: var(--theme-bg-secondary);
  --color-background-light: var(--theme-bg-tertiary);
  --color-text-base: var(--theme-text-primary);
  --color-text-emphasis: var(--theme-text-bright);
  --color-primary-accent: var(--theme-accent-main);
  --color-highlight: var(--theme-accent-secondary);
  --color-primary-accent-deep: var(--theme-accent-tertiary);
  --color-border: var(--theme-border);
  --color-glow: var(--theme-glow);
  --color-grid: var(--theme-grid-color);
  --color-secondary-bg: var(--theme-bg-tertiary);
  --color-secondary-bg-hover: var(--theme-bg-secondary);
}

/* Crimson Theme */
.theme-crimson {
  --theme-bg-primary: #1f0b0b;
  --theme-bg-secondary: #401313;
  --theme-bg-tertiary: #5e1c1c;
  --theme-text-primary: #ffcdd2;
  --theme-text-bright: #ffffff;
  --theme-accent-main: #E53935;
  --theme-accent-secondary: #C2185B;
  --theme-accent-tertiary: #D81B60;
  --theme-border: #880e4f;
  --theme-glow: rgba(229, 57, 53, 0.4);
  --theme-grid-color: rgba(194, 24, 91, 0.07);

  /* Mappings */
  --color-background-dark: var(--theme-bg-primary);
  --color-background-medium: var(--theme-bg-secondary);
  --color-background-light: var(--theme-bg-tertiary);
  --color-text-base: var(--theme-text-primary);
  --color-text-emphasis: var(--theme-text-bright);
  --color-primary-accent: var(--theme-accent-main);
  --color-highlight: var(--theme-accent-secondary);
  --color-primary-accent-deep: var(--theme-accent-tertiary);
  --color-border: var(--theme-border);
  --color-glow: var(--theme-glow);
  --color-grid: var(--theme-grid-color);
  --color-secondary-bg: var(--theme-bg-tertiary);
  --color-secondary-bg-hover: var(--theme-bg-secondary);
}

/* Personalized Theme (Hook for JS) */
.theme-personalized {
  /* JS will set --color-* variables on the body element. */
  /* These rules map them to the --theme-* variables. */
  --theme-bg-primary: var(--color-background-dark);
  --theme-bg-secondary: var(--color-background-medium);
  --theme-bg-tertiary: var(--color-background-light);
  --theme-text-primary: var(--color-text-base);
  --theme-text-bright: var(--color-text-emphasis);
  --theme-accent-main: var(--color-primary-accent);
  --theme-accent-secondary: var(--color-highlight);
  --theme-accent-tertiary: var(--color-primary-accent-deep);
  --theme-border: var(--color-border);
  --theme-glow: var(--color-glow);
  --theme-grid-color: var(--color-grid);
}


/* ========== BASE STYLES ========== */
body { 
  font-family: var(--font-body); 
  background: var(--theme-bg-primary); 
  color: var(--theme-text-primary); 
  overflow-x: hidden; 
  transition: background-color 0.5s ease, color 0.5s ease;
}

/* Global Hide Scrollbar */
::-webkit-scrollbar {
  display: none;
}
* {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.bottom-tab-wrapper {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: center;
}

.bottom-tab-wrapper .dropdown-menu {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--theme-bg-secondary);
  border: 1px solid var(--theme-border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  min-width: 160px;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.4);
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transition: all 0.3s ease;
}

.bottom-tab-wrapper:hover .dropdown-menu,
.bottom-tab-wrapper .dropdown-menu.show-dropdown {
  max-height: 500px;
  opacity: 1;
  pointer-events: auto;
  padding-bottom: 8px;
}

.bottom-tab-wrapper .dropdown-item {
  padding: 10px 16px;
  justify-content: flex-start;
}
.font-title { font-family: var(--font-title); }
.hidden { display: none !important; }
.page { display: none; }
.page.active { display: block; }

.bg-grid { position: fixed; inset: 0; background-image: linear-gradient(var(--theme-grid-color) 1px,transparent 1px),linear-gradient(90deg,var(--theme-grid-color) 1px,transparent 1px); background-size: 50px 50px; animation: gridMove 20s linear infinite; z-index: -1; }
@keyframes gridMove { to { transform: translate(50px,50px); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeIn .5s ease-out; }
/* Walking Sprite Animations */
@keyframes sprite-walk {
  0% { background-position-x: 0%; }
  33.33% { background-position-x: 50%; }
  66.66% { background-position-x: 100%; }
  100% { background-position-x: 0%; }
}

.animate-sprite-walk {
  animation: sprite-walk 0.8s steps(1) infinite;
}

@keyframes pack-idle-bob {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-10px) rotate(-4deg); }
}

.pack-idle-bob {
  animation: pack-idle-bob 4s ease-in-out infinite;
}

.pack-hover-bob:hover {
  animation: none;
  transform: scale(1.05) translateY(-15px) rotate(0deg);
  z-index: 50;
}
.spinner { border: 2px solid var(--theme-border); border-top: 2px solid var(--theme-accent-main); border-radius: 50%; width: 20px; height: 20px; animation: spin 1s linear infinite; display: inline-block; vertical-align: middle; margin-right: 6px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Particle effect styles */
.particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1; /* Behind content */
}

.particle {
    position: absolute;
    border-radius: 50%;
    animation: rise linear infinite;
}

@keyframes rise {
    from {
        transform: translateY(100vh) scale(0.5);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    to {
        transform: translateY(-10vh) scale(1);
        opacity: 0;
    }
}

/* Central radial glow effect */
.bg-radial-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, var(--theme-glow) 0%, transparent 70%);
    z-index: -1;
}

/* Theme-specific Animations */
@keyframes slow-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes text-flicker {
  0%, 100% { text-shadow: 0 0 4px var(--theme-accent-main), 0 0 8px var(--theme-accent-main), 0 0 12px var(--theme-accent-main); opacity: 1; }
  49% { text-shadow: 0 0 4px var(--theme-accent-main), 0 0 8px var(--theme-accent-main), 0 0 12px var(--theme-accent-main); opacity: 1; }
  50% { text-shadow: none; opacity: 0.8; }
  51% { text-shadow: 0 0 4px var(--theme-accent-main), 0 0 8px var(--theme-accent-main), 0 0 12px var(--theme-accent-main); opacity: 1; }
  60% { text-shadow: 0 0 4px var(--theme-accent-secondary), 0 0 8px var(--theme-accent-secondary); opacity: 0.7; }
  61% { text-shadow: 0 0 4px var(--theme-accent-main), 0 0 8px var(--theme-accent-main), 0 0 12px var(--theme-accent-main); opacity: 1; }
}


/* ========== DECK HUB REWORK ========== */
.deck-hub { display: flex; height: 100vh; }
.deck-sidebar { width: 320px; flex-shrink: 0; background: var(--theme-bg-secondary); border-left: 1px solid var(--theme-border); display: flex; flex-direction: column; gap: 1rem; padding: 1rem; overflow-y: auto; }
.deck-sidebar .panel { background: var(--theme-bg-primary); padding: 1rem; border-radius: 8px; border: 1px solid var(--theme-border); }
.deck-sidebar .panel-header { font-family: var(--font-title); font-size: 1.25rem; color: var(--theme-accent-secondary); display: flex; align-items: center; margin-bottom: 0.75rem; border-bottom: 1px solid var(--theme-border); padding-bottom: 0.5rem; }
.deck-hub-content { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2rem; padding: 2rem; position: relative; }
.deck-hub-header { text-align: center; }
.deck-hub-table { display: flex; align-items: center; justify-content: center; gap: 4rem; perspective: 1500px; }
.deck-pile-container { position: relative; width: 256px; height: 360px; cursor: pointer; transition: transform 0.3s ease; }
.deck-pile-container:hover { transform: scale(1.05) translateY(-10px); }
.deck-pile-container .deck-pile-card { position: absolute; width: 100%; height: 100%; border-radius: 0.75rem; transition: transform 0.3s ease; box-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.deck-pile-container:hover .deck-pile-card:nth-child(1) { transform: translate(8px, -8px) rotate(3deg); }
.deck-pile-container:hover .deck-pile-card:nth-child(2) { transform: translate(4px, -4px) rotate(1.5deg); }
.deck-pile-card:nth-child(1) { transform: translate(4px, -4px); }
.deck-pile-card:nth-child(2) { transform: translate(2px, -2px); }
.revealed-card-slot, .deck-pile-placeholder { width: 256px; height: 360px; border-radius: 0.75rem; }
.deck-pile-placeholder { border: 3px dashed var(--theme-border); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--theme-text-muted); }
.revealed-card-slot { transform-style: preserve-3d; }
@keyframes unveil { from { opacity: 0; transform: translateX(-50px) rotateY(-20deg) scale(0.95); } to { opacity: 1; transform: translateX(0) rotateY(0deg) scale(1); } }
.card-unveil-animation { animation: unveil 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
.deck-hub-controls { margin-top: 1rem; }
.deck-modifiers-list { max-height: 120px; overflow-y: auto; }


/* ========== COMPONENT STYLES ========== */
/* Buttons */
.btn { padding: 10px 24px; border-style: solid; border-width: 2px; font-weight: 700; cursor: pointer; transition: all .3s; text-transform: uppercase; letter-spacing: .5px; font-size: 14px; font-family: 'Orbitron',monospace; }
.theme-runic .btn { clip-path: var(--shape-hexagon); }
#creator-view .btn, #creator-view button { clip-path: none !important; border-radius: 6px; }
.btn:disabled { cursor: not-allowed; filter: grayscale(50%); opacity: 0.7; }
.btn-primary { background: var(--theme-accent-main); border-color: var(--theme-accent-main); color: var(--theme-bg-primary); }
.btn-primary:hover:not(:disabled) { transform: scale(1.05); box-shadow: 0 5px 15px var(--theme-glow); background: color-mix(in srgb, var(--theme-accent-main) 85%, white); }
.btn-secondary { background: var(--theme-bg-tertiary); color: var(--theme-accent-secondary); border-color: var(--theme-accent-secondary); }
.btn-secondary:hover:not(:disabled) { background: var(--theme-accent-secondary); color: var(--theme-bg-primary); }
.btn-danger { background: #b91c1c; color: white; border-color: #b91c1c; }
.btn-danger:hover:not(:disabled) { background: #991b1b; border-color: #991b1b;}
.btn-social { width: 100%; padding: 12px; border: 1px solid var(--theme-border); border-radius: 6px; background: var(--theme-bg-tertiary); color: var(--theme-text-primary); display: flex; align-items: center; justify-content: center; font-size: 14px; margin-bottom: 10px; }
.btn-social:hover { border-color: var(--theme-accent-main); background: var(--theme-bg-secondary); }

/* Inputs & Forms */
.input-field { width: 100%; padding: 10px 12px; background: var(--theme-bg-tertiary); border: 1px solid var(--theme-border); border-radius: 6px; color: var(--theme-text-bright); font-size: 14px; transition: all .3s; }
.input-label { position: absolute; top: -6px; left: 8px; background: var(--theme-bg-secondary); padding: 0 6px; color: var(--theme-accent-main); font-size: 12px; font-weight: 600; }
.quiz-question { margin-bottom: 1rem; }
.quiz-question p { margin-bottom: 0.5rem; font-size: 0.9rem; }
.quiz-question label { margin-right: 1rem; font-size: 0.8rem; cursor: pointer; }
.personality-dropdown summary { cursor: pointer; font-family: var(--font-title); color: var(--theme-accent-secondary); margin-bottom: 10px; }

/* Landing & Auth Pages */
.auth-container { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; }
.auth-box { background: var(--theme-bg-secondary); border: 1px solid var(--theme-border); border-radius: 8px; padding: 40px; width: 100%; max-width: 420px; box-shadow: 0 10px 30px rgba(0,0,0,0.4); position: relative; z-index: 1; }
.theme-runic .auth-box::before { content: ''; position: absolute; inset: -30px; border: 1px solid var(--theme-border); clip-path: var(--shape-hexagon); opacity: 0.3; z-index: -1; pointer-events: none; }
.auth-input { width: 100%; padding: 10px 12px; background: var(--theme-bg-tertiary); border: 1px solid var(--theme-border); border-radius: 6px; color: var(--theme-text-bright); font-size: 14px; margin-bottom: 15px; }


/* ========== APP SHELL & NAVIGATION ========== */
#app-shell-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: var(--theme-bg-primary);
  color: var(--theme-text-primary);
}

.app-header {
  height: 60px; /* Fixed height for header */
  background-color: var(--theme-bg-secondary);
  border-bottom: 1px solid var(--theme-border);
}

#app-body {
  display: flex; /* Mobile-first default */
  flex: 1;
  overflow-y: auto;
}

.main-content {
  flex: 1;
  overflow-y: auto;
  position: relative;
  padding-bottom: 200px; /* Increased for mobile bottom nav safety */
  padding-left: 0;
  padding-right: 0;
}


/* --- Sidebar Navigation (Tablet/Desktop) --- */
.app-nav {
  display: none; /* Hidden on mobile */
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--theme-bg-secondary);
  border-right: 1px solid var(--theme-border);
  overflow-x: hidden;
}

.app-tab {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 12px;
  border-radius: 6px;
  color: var(--theme-text-primary);
  cursor: pointer;
  font-family: var(--font-title);
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
}
.app-tab:hover {
  background: var(--theme-bg-tertiary);
  color: var(--theme-text-bright);
}
.app-tab.active {
  color: var(--theme-accent-main);
  background: color-mix(in srgb, var(--theme-accent-main) 10%, transparent);
}
.app-tab .fa-fw {
  width: 1.25em;
  text-align: center;
}
.app-nav .tab-label {
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* --- Dropdown Menus for Sidebar (Accordion Style) --- */
.app-tab-wrapper {
  /* A simple container for the tab and its dropdown */
}

.dropdown-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  background: none;
}

.app-tab-wrapper:hover > .dropdown-menu,
.app-tab-wrapper > .dropdown-menu.show-dropdown {
  max-height: 500px; /* Animate open */
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 8px 12px 8px 3rem; /* Indent from the main tab */
  border-radius: 4px;
  color: var(--theme-text-primary);
  font-family: var(--font-body);
  font-size: 0.85rem; /* Slightly smaller */
  text-decoration: none;
  white-space: nowrap;
}

.dropdown-item:hover {
  background: var(--theme-bg-tertiary);
  color: var(--theme-text-bright);
}

.dropdown-item i {
  width: 1.25em;
  text-align: center;
  color: var(--theme-accent-tertiary);
}


/* --- Bottom Navigation (Mobile) --- */
.bottom-nav {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--theme-bg-secondary);
  border-top: 1px solid var(--theme-border);
  justify-content: space-around;
  align-items: center;
  z-index: 100;
}

.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--theme-text-primary);
  text-decoration: none;
  font-size: 12px;
  padding: 4px 0;
}
.bottom-nav-item i { font-size: 1.5rem; margin-bottom: 2px; }
.bottom-nav-item.active { color: var(--theme-accent-main); }
.bottom-nav .tab-label { display: block; } /* Show labels on bottom nav */


/* ========== RESPONSIVE BREAKPOINTS ========== */

/* Tablet & Up: Sliding Sidebar */
@media (min-width: 768px) {
  .main-content {
    padding-bottom: 0;
  }
  
  /* #app-body is already display: flex by default, which works for this layout */

  .app-nav {
    display: flex;
    width: 80px; /* Collapsed width */
    flex-shrink: 0;
    transition: width 0.3s ease;
    padding: 1rem 0.75rem;
  }

  .app-nav:hover {
    width: 220px; /* Expanded width */
  }

  .app-nav:hover .tab-label {
    opacity: 1;
    transition-delay: 0.1s; /* Delay label fade-in */
  }
  
  .app-nav .app-tab {
    justify-content: center;
  }

  .app-nav:hover .app-tab {
    justify-content: flex-start;
  }

  .app-nav .tab-label {
      display: block; /* always block, but opacity controls visibility */
  }
  
  .bottom-nav {
    display: none;
  }
}

/* =========================================
   THE ETERNAL FORGE - WHISPS & CHAOS EMBERS
   ========================================= */

/* 1. The Chamber (Base Atmosphere) */
#creator-view {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 40 !important;
    
    /* Deep void with a hint of heat at the bottom */
    background: radial-gradient(circle at 50% 130%, #2a0a05 0%, #0a0202 40%, #000000 100%) !important;
    overflow: hidden !important;

    
}

/* --- The Celestial Altar Theme --- */
#creator-view.realm-gods {
    background: radial-gradient(circle at 50% 0%, #ffffff 0%, #e0e0e0 40%, #c0c0c0 100%) !important;
    transition: background 2s ease-in-out;
}

/* The God-Ray Effect */
#creator-view.realm-gods::before {
    content: "";
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 200%;
    height: 150%;
    background: conic-gradient(from 180deg at 50% 0%, 
        transparent 140deg, 
        rgba(255, 255, 200, 0.4) 170deg, 
        rgba(255, 255, 255, 0.8) 180deg, 
        rgba(255, 255, 200, 0.4) 190deg, 
        transparent 220deg);
    filter: blur(40px);
    z-index: 1;
    pointer-events: none;
    animation: pulseRays 10s ease-in-out infinite alternate;
}

/* Floating Gold Dust */
#creator-view.realm-gods::after {
    background-image: 
        radial-gradient(2px 2px at 10% 10%, #ffd700, transparent),
        radial-gradient(1.5px 1.5px at 30% 50%, #ffffff, transparent),
        radial-gradient(2px 2px at 70% 20%, #ffd700, transparent);
    animation: chaosRise 12s linear infinite; /* Reuse your existing animation but slower */
    opacity: 0.6;
}

@keyframes pulseRays {
    from { opacity: 0.4; transform: translateX(-50%) scale(1); }
    to { opacity: 0.8; transform: translateX(-52%) scale(1.1); }
}


/* 2. Layer 1: Smokey Whisps (Slow, Large, Blur) */
#creator-view::before {
    content: "";
    position: absolute;
    inset: -50%; /* Oversize to allow drifting without edges */
    width: 200%;
    height: 200%;
    
    /* Large, diffuse patches of smoke/heat */
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(255, 80, 0, 0.08), transparent 50%),
        radial-gradient(circle at 80% 40%, rgba(100, 50, 50, 0.1), transparent 40%),
        radial-gradient(circle at 40% 80%, rgba(200, 100, 0, 0.05), transparent 50%);
        
    filter: blur(80px); /* Massive blur for smoke effect */
    animation: driftSmoke 25s ease-in-out infinite alternate;
    z-index: 1;
    pointer-events: none;
}

/* 3. Layer 2: Chaos Embers (Small, Bright, Fast, Wobbly) */
#creator-view::after {
    content: "";
    position: absolute;
    inset: 0;
    height: 200%; /* Tall height for long travel distance */
    
    /* Tiny, sharp, bright sparks */
    background-image: 
        radial-gradient(1px 1px at 10% 90%, #ffffff, transparent),
        radial-gradient(2px 2px at 25% 80%, #ffcc00, transparent),
        radial-gradient(1px 1px at 40% 95%, #ff8800, transparent),
        radial-gradient(1.5px 1.5px at 55% 85%, #ffffff, transparent),
        radial-gradient(2px 2px at 70% 92%, #ffaa00, transparent),
        radial-gradient(1px 1px at 85% 88%, #ffffaa, transparent);
        
    background-size: 100% 40%; /* Repeat pattern vertically */
    background-repeat: repeat;
    
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    
    /* Fast, chaotic rising animation */
    animation: chaosRise 6s linear infinite;
}

/* 4. Focus Mode & Text Layout */
#conversation-log {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Center content on desktop */
    align-items: center !important;
    padding: 2rem !important;
    z-index: 10 !important;
    overflow-y: auto !important; /* Enable scrolling if needed */
    scrollbar-width: none !important;
}
#conversation-log::-webkit-scrollbar {
    display: none !important;
}

@media (max-width: 768px) {
    #conversation-log {
        justify-content: flex-start !important; /* Scroll naturally from the top on mobile */
        padding: calc(4.5rem + env(safe-area-inset-top)) 1rem 220px 1rem !important; /* Generous bottom padding to clear absolute input altar */
    }
}

/* Hide History */
.conversation-log-entry { display: none !important; }

/* THE IMPACT SPUTTER (Preserved from previous version) */
.conversation-log-entry:last-child {
    display: block !important;
    max-width: 900px !important;
    text-align: center !important;
    animation: impactSputter 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

/* Hide user response so only AI question is visible */
.conversation-log-entry.user-message:last-child { display: none !important; }

/* If user message is last, show the AI message before it */
.conversation-log-entry.ai-message:nth-last-child(2):has(+ .user-message:last-child) {
    display: block !important;
    opacity: 0.6 !important;
    transform: scale(0.95);
    filter: blur(2px);
    transition: all 0.5s ease;
}

/* 5. Typography */
.ai-message .message-bubble,
.conversation-log-entry:last-child .message-bubble {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-family: var(--font-title) !important;
    font-size: 27px !important; /* Standardized text size to match the themed selection style ceiling */
    line-height: 1.4 !important;
    color: #ffffff !important;
    text-shadow: 
        0 0 10px rgba(255, 140, 0, 0.9),
        0 0 20px rgba(255, 60, 0, 0.6),
        0 0 40px rgba(100, 0, 0, 0.8) !important;
}

@media (max-width: 768px) {
    .ai-message .message-bubble,
    .conversation-log-entry:last-child .message-bubble {
        font-size: 20px !important; /* Fits perfectly on mobile screens */
        line-height: 1.35 !important;
    }
}



/* User Text Styling */
.user-message {
    opacity: 0.6 !important;
    transform: scale(0.95);
}
.user-message .message-bubble {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-size: 1.25rem !important;
}

/* 6. The Input Altar */
#conversation-input-area {
    position: absolute !important;
    bottom: 60px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 90% !important;
    max-width: 600px !important;
    z-index: 100 !important;
    
    background: rgba(10, 5, 5, 0.8) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 100, 0, 0.2) !important;
    border-top: 2px solid rgba(255, 140, 0, 0.5) !important;
    border-bottom: 2px solid rgba(0,0,0,1) !important;
    box-shadow: 0 20px 50px -10px rgba(0,0,0,1) !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
}

@media (max-width: 768px) {
    #conversation-input-area {
        bottom: 20px !important; /* Bring input area closer to bottom on mobile */
        padding: 1rem !important;
        width: 95% !important;
        border-radius: 8px !important;
    }
}

#conversation-input-area input,
#conversation-input-area textarea {
    background: rgba(0,0,0,0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
    color: #ffddaa !important;
    text-align: center !important;
    font-size: 1.2rem !important;
    transition: all 0.3s ease !important;
}

@media (max-width: 768px) {
    #conversation-input-area input,
    #conversation-input-area textarea {
        font-size: 1rem !important;
        padding: 0.5rem !important;
    }
}

#conversation-input-area input:focus,
#conversation-input-area textarea:focus {
    outline: none !important;
    border-color: #ff8800 !important;
    background: rgba(0,0,0,0.6) !important;
    box-shadow: 0 0 20px rgba(255, 100, 0, 0.15) !important;
}

#conversation-input-area button {
    background: linear-gradient(to bottom, #cc4400, #662200) !important;
    color: #ffccaa !important;
    font-weight: bold !important;
    border: 1px solid #ff6600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-top: 10px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.6) !important;
}

@media (max-width: 768px) {
    #conversation-input-area button {
        padding: 0.5rem !important;
        font-size: 0.9rem !important;
        margin-top: 6px !important;
    }
}

#conversation-controls { display: none !important; }

/* 
   ANIMATIONS 
*/

/* 1. Drifting Smoke (Slow, slight rotation) */
@keyframes driftSmoke {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0.4; }
    100% { transform: translate(-30px, -20px) rotate(3deg); opacity: 0.7; }
}

/* 2. Chaotic Sparks (Fast rise + Horizontal Wiggle) */
@keyframes chaosRise {
    0% {
        transform: translateY(10%) translateX(0) scale(0.5);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    25% {
        transform: translateY(-20%) translateX(10px) scale(0.8);
    }
    50% {
        transform: translateY(-50%) translateX(-15px) scale(1);
    }
    75% {
        transform: translateY(-80%) translateX(5px) scale(0.9);
    }
    100% {
        transform: translateY(-110%) translateX(0) scale(0);
        opacity: 0;
    }
}

/* 3. The Text Sputter (Impact flash) */
@keyframes impactSputter {
    0% { 
        opacity: 0; 
        transform: scale(0.9) translateY(10px);
        filter: blur(8px) brightness(2); 
    }
    20% {
        opacity: 1;
        filter: blur(0) brightness(1.5);
    }
    100% { 
        opacity: 1; 
        transform: scale(1) translateY(0);
        filter: blur(0) brightness(1);
    }
}

/* === NEW: Focus Mode Styles === */
#creator-view.quiz-focus-mode::before {
  content: '';
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  z-index: 40; /* Below content, above main UI */
  animation: fadeIn 0.5s ease;
}
/* Blur the content behind the focus area */
#creator-view.quiz-focus-mode > * {
  filter: blur(5px);
  transform: scale(0.98);
  transition: all 0.5s ease;
}
.focus-content-wrapper {
  position: fixed;
  inset: 0;
  z-index: 50; /* On top of everything */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  /* This is critical to ensure the wrapper itself is NOT blurred */
  filter: none !important;
  transform: none !important;
  animation: fadeIn 0.5s ease forwards;
}

.focus-content {
  background-color: var(--theme-bg-secondary);
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  padding: 2rem;
  width: 100%;
  max-width: 56rem; /* 896px */
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.focus-title {
  font-family: var(--font-title);
  font-size: 1.75rem;
  text-align: center;
  color: var(--theme-accent-main);
  margin-bottom: 1rem;
}

.focus-description {
  text-align: center;
  color: var(--theme-text-primary);
  margin-bottom: 2rem;
}

.choice-button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 48rem; /* 768px */
  margin: 1rem auto;
}
.choice-button {
  width: 100%;
  padding: 1.5rem 1rem;
  font-size: 1.25rem;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.choice-separator {
  font-family: var(--font-title);
  color: var(--theme-accent-tertiary);
  font-size: 1rem;
}
@media(min-width: 768px) {
  .choice-button-container {
    flex-direction: row;
  }
  .choice-separator {
    font-size: 1.25rem;
  }
}

/* === NEW: Generic Button Grid for Focus Mode === */
.button-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}
@media (min-width: 768px) {
  .button-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}
.selection-button {
  padding: 0.75rem 1rem;
  border: 2px solid var(--theme-border);
  background-color: var(--theme-bg-tertiary);
  color: var(--theme-text-primary);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  font-weight: 600;
}
.selection-button:hover:not(:disabled) {
  border-color: var(--theme-accent-secondary);
  color: var(--theme-accent-secondary);
  transform: translateY(-2px);
}
.selection-button.selected {
  border-color: var(--theme-accent-main);
  background-color: color-mix(in srgb, var(--theme-accent-main) 20%, transparent);
  color: var(--theme-text-bright);
  box-shadow: 0 0 10px var(--theme-glow);
}
.selection-button:disabled:not(.selected) {
  opacity: 0.4;
  cursor: not-allowed;
  background-color: var(--theme-bg-tertiary);
  border-color: var(--theme-border);
  color: var(--theme-text-primary);
}

/* === NEW: Multi-part form adjustments for focus mode === */
.multi-part-form-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.multi-part-form-section {
  background-color: var(--theme-bg-primary);
  padding: 1rem;
  border-radius: 6px;
  border: 1px solid var(--theme-border);
}
.multi-part-form-section .section-label {
  font-weight: bold;
  color: var(--theme-accent-secondary);
  margin-bottom: 0.75rem;
  display: block;
}


/* Pantheon Quiz Styles */
.pantheon-quiz-page { display: none; }
.pantheon-quiz-page.active { display: block; animation: fadeIn 0.5s; }

.pantheon-quiz-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 1.5rem;
}

.pantheon-quiz-question {
    background: var(--theme-bg-tertiary);
    border: 1px solid var(--theme-border);
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}
.pantheon-quiz-question p {
    font-weight: 600;
    color: var(--theme-text-bright);
    margin-bottom: 0.75rem;
}
.likert-scale-buttons {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}
.likert-button {
    flex: 1;
    padding: 0.75rem 0.5rem;
    border: 2px solid var(--theme-border);
    border-radius: 6px;
    background: var(--theme-bg-tertiary);
    color: var(--theme-text-primary);
    font-weight: 600;
    font-size: 0.8rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    position: relative;
}
.likert-button:hover {
    border-color: var(--theme-accent-secondary);
    background: color-mix(in srgb, var(--theme-accent-secondary) 15%, transparent);
}
.likert-button input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
}
.likert-button input:checked + span {
    color: var(--theme-accent-main);
}
.likert-button:has(input:checked) {
    border-color: var(--theme-accent-main);
    background: color-mix(in srgb, var(--theme-accent-main) 20%, transparent);
    box-shadow: 0 0 10px var(--theme-glow);
    transform: scale(1.05);
}

/* Dashboard */
.dashboard-grid { 
  display: grid; 
  grid-template-columns: 1fr; /* Mobile-first single column */
  gap: 24px; 
  padding: 16px; 
}
@media (min-width: 768px) {
  .dashboard-grid { 
    padding: 24px;
    grid-template-columns: 1fr 2fr; /* Tablet: 2 columns */
  } 
}
@media (min-width: 1280px) { 
  .dashboard-grid { 
    grid-template-columns: 3fr 5fr 3fr; /* Desktop: 3 columns */
  } 
}
.dashboard-card { 
  background: color-mix(in srgb, var(--theme-bg-secondary) 55%, transparent); 
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 24px; 
  border-radius: 12px; 
  border: 1px solid rgba(255, 255, 255, 0.08); 
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.theme-arcane .dashboard-card {
  position: relative;
}
.theme-arcane .dashboard-card::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 10px; /* card is 8px, so 8+2 */
    background: var(--elemental-glow-color);
    filter: blur(20px);
    opacity: 0.35;
    z-index: -1;
    pointer-events: none;
    transition: background 0.5s ease;
}
.theme-runic .dashboard-card { background: linear-gradient(145deg, var(--theme-bg-tertiary), var(--theme-bg-secondary)); box-shadow: inset 0 1px 1px #ffffff0d, 0 2px 3px #00000066; }
.tooltip{ position:relative; }
.tooltip .tooltiptext{ visibility:hidden; width:220px; background:var(--theme-bg-tertiary); color:var(--theme-text-bright); text-align:left; border-radius:6px; padding:8px 10px; position:absolute; z-index:100; bottom:125%; left:50%; transform:translateX(-50%); font-size:12px; border:1px solid var(--theme-border); }
.tooltip:hover .tooltiptext{ visibility:visible; }

/* Pantheon Alignment Card (Restored) */
.deity-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    color: var(--theme-accent-secondary);
}
.deity-icon svg {
    filter: drop-shadow(0 0 10px var(--theme-accent-secondary));
}
.deity-name {
    font-family: var(--font-title);
    font-size: 1.5rem;
    color: var(--theme-accent-secondary);
}
.deity-title {
    font-size: 0.9rem;
    color: var(--theme-text-primary);
    opacity: 0.8;
}
.deity-lore {
    font-size: 0.8rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--theme-border);
    font-style: italic;
    color: var(--theme-text-primary);
}


/* Eternal Card */
#dashboard-card-container { position: relative; width: 100%; max-width: 300px; margin: 0 auto; aspect-ratio: 1 / 1.727; border-radius: 12px; border: none; box-shadow: none; transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
.theme-runic #dashboard-card-container { aspect-ratio: 1 / 1.15; border: none; box-shadow: 0 10px 30px #00000080, inset 0 0 10px var(--theme-bg-primary); clip-path: var(--shape-hexagon); }
#dashboard-card-container:hover { transform: scale(1.03) rotate(1.5deg); }
#dashboard-card-container::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 150%; height: 150%; background: radial-gradient(circle, var(--theme-glow, rgba(255,255,255,0.1)) 0%, transparent 70%); filter: blur(30px); opacity: 0.7; z-index: 0; transition: background 0.5s ease; }
#dashboard-card-container img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.theme-runic #dashboard-card-container img { border-radius: 0; }

/* ========== NEW ARMORY LAYOUT ========== */
.armory-grid {
  display: grid;
  grid-template-columns: 1fr; /* Mobile first */
  gap: 1.5rem; /* 24px */
  height: 100%;
}

@media (min-width: 1024px) { /* lg breakpoint */
  .armory-grid {
    grid-template-columns: minmax(300px, 1fr) 2fr;
  }
}

.armory-model-container {
  /* Change background to simulate a reflective surface */
  background: linear-gradient(145deg, var(--theme-bg-tertiary), var(--theme-bg-primary));
  /* Create an ornate frame using border and box-shadow */
  border: 10px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(to bottom right, var(--theme-accent-secondary), color-mix(in srgb, var(--theme-border) 50%, black));
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  min-height: 400px;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.7), 0 10px 30px rgba(0,0,0,0.5);
}

.armory-model-container::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Glow from bottom to simulate light from below */
  background: radial-gradient(ellipse at bottom, var(--theme-glow) 0%, transparent 70%);
  z-index: 0;
  opacity: 0.5;
}

/* New pseudo-element for a glass sheen */
.armory-model-container::after {
  content: '';
  position: absolute;
  top: 5%;
  left: 2%;
  width: 96%;
  height: 90%;
  border-radius: 5px;
  background: linear-gradient(to bottom right, rgba(255,255,255,0.15) 10%, transparent 40%, transparent 60%, rgba(255,255,255,0.05) 90%);
  pointer-events: none;
  z-index: 2; /* On top of the image */
}


.armory-model-image {
  position: relative;
  z-index: 1; /* Below the sheen */
  max-width: 100%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
  /* Slightly darken and blend the image to seem "behind glass" */
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5)) brightness(0.95);
  opacity: 0.95;
  mix-blend-mode: lighten;
}


/* ========== NEW PASSIVE RUNES OVERHAUL ========== */
:root {
  --rune-color-element: var(--theme-accent-secondary);
  --rune-color-deity: #d4af37; /* Gold */
  --rune-color-title: #c586c0; /* Purple */
  --rune-color-attribute: var(--theme-accent-main);
  --rune-color-secondary-attribute: #60a5fa; /* Blue */
  --rune-color-background: #a7c957; /* Light Green */
  --rune-color-archetype: #ff4d6d; /* Red/Pink */
  --rune-color-real-world-skill: var(--theme-accent-secondary);
  --rune-color-default: var(--theme-border);
}

/* Binding Runes (now under card) */
.binding-runes-container {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-top: 0.25rem;
}

/* Dynamic Shimmer Effect for Hovering over Eternal Card */
@keyframes eternal-shimmer-sweep {
  0% {
    transform: translateX(-150%) rotate(25deg);
  }
  100% {
    transform: translateX(250%) rotate(25deg);
  }
}

.eternal-shimmer-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease-in-out;
  z-index: 25;
  border-radius: inherit;
}

.eternal-card-hover-container:hover .eternal-shimmer-overlay:not([style*="background"]),
.eternal-shimmer-overlay.eternal-shimmer-active:not([style*="background"]) {
  opacity: 1;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.22) 48%,
    rgba(255, 215, 128, 0.45) 50%,
    rgba(255, 255, 255, 0.22) 52%,
    rgba(255, 255, 255, 0) 70%,
    transparent 100%
  );
  animation: eternal-shimmer-sweep 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.binding-rune {
  --rune-color: var(--rune-color-default);
  width: 58px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  cursor: pointer;
  filter: drop-shadow(0 0 8px var(--rune-color));
}

.binding-rune:hover {
  filter: drop-shadow(0 0 16px var(--rune-color));
  transform: scale(1.1);
}

.binding-rune img, .binding-rune svg {
  width: 40px;
  height: 40px;
  color: var(--rune-color);
  transition: all 0.3s ease;
}

.binding-rune:hover img, .binding-rune:hover svg {
  transform: scale(1.2);
}


/* Other Runes (hidden by default) */
.other-runes-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  padding-top: 1rem;
  border-top: 1px solid var(--theme-border);
  margin-top: 1rem;
}
.other-runes-container.visible {
  display: flex;
}

/* Color assignment via data attribute */
.binding-rune[data-source="Element"], .passive-rune[data-source="Element"] { --rune-color: var(--rune-color-element); }
.binding-rune[data-source="Deity"], .passive-rune[data-source="Deity"] { --rune-color: var(--rune-color-deity); }
.binding-rune[data-source="Title"], .passive-rune[data-source="Title"] { --rune-color: var(--rune-color-title); }
.binding-rune[data-source="Attribute"], .passive-rune[data-source="Attribute"] { --rune-color: var(--rune-color-attribute); }
.binding-rune[data-source="Secondary Attribute"], .passive-rune[data-source="Secondary Attribute"] { --rune-color: var(--rune-color-secondary-attribute); }
.passive-rune[data-source="Background"] { --rune-color: var(--rune-color-background); }
.passive-rune[data-source="Archetype"] { --rune-color: var(--rune-color-archetype); }
.passive-rune[data-source="Real-World Skill"] { --rune-color: var(--rune-color-real-world-skill); }


/* Standard passive rune styling */
.passive-rune {
  --rune-color: var(--rune-color-default);
  width: 46px; /* width * 1.154 for aspect ratio */
  height: 52px;
  background-color: var(--theme-bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  cursor: pointer;
  clip-path: var(--shape-hexagon);
  filter: drop-shadow(0 0 1px var(--rune-color));
}
.passive-rune:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 5px var(--rune-color));
}
.passive-rune img, .passive-rune svg {
  width: 24px;
  height: 24px;
  color: var(--rune-color);
  filter: drop-shadow(0 0 3px var(--rune-color));
}


/* Expand button */
.expand-runes-btn {
  background: none;
  border: 1px solid var(--theme-border);
  color: var(--theme-text-primary);
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  margin: 0 auto;
  display: block;
  transition: all 0.2s;
}
.expand-runes-btn:hover {
  border-color: var(--theme-accent-main);
  color: var(--theme-accent-main);
}
.expand-runes-btn.expanded i {
    transition: transform 0.3s ease;
}
.expand-runes-btn.expanded i {
    transform: rotate(180deg);
}

/* Active Rune styling */
.active-rune {
    position: relative;
    width: 54px;
    height: 62px;
    background-color: var(--theme-bg-tertiary);
    clip-path: var(--shape-hexagon);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
    filter: drop-shadow(0 0 2px color-mix(in srgb, var(--theme-accent-tertiary) 50%, var(--theme-border)));
}
.active-rune:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px var(--theme-accent-tertiary));
}
.active-rune img, .active-rune svg {
    width: 32px;
    height: 32px;
    color: var(--theme-accent-tertiary);
}

/* Element Rune styling (now used inside binding rune) */
.elemental-rune-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.elemental-rune-wrapper img,
.elemental-rune-wrapper svg {
    width: 100%;
    height: 100%;
    color: var(--element-glow-color, var(--theme-accent-main));
    filter: drop-shadow(0 0 8px var(--element-glow-color, var(--theme-glow)));
    transition: all 0.3s ease;
}
.binding-rune:hover .elemental-rune-wrapper img,
.binding-rune:hover .elemental-rune-wrapper svg {
    filter: drop-shadow(0 0 15px var(--element-glow-color, var(--theme-glow)));
}
.rune-glow-Fire { --element-glow-color: #f97316; }
.rune-glow-Water { --element-glow-color: #38bdf8; }
.rune-glow-Air { --element-glow-color: #e5e7eb; }
.rune-glow-Earth { --element-glow-color: #84cc16; }


/* Attribute Bars */
.attribute-bar-label { font-family: 'Orbitron', monospace; font-weight: 700; color: var(--theme-text-bright); font-size: 0.9rem; }
.attribute-bar-track { height: 8px; background: var(--theme-bg-tertiary); border-radius: 4px; overflow: hidden; border: 1px solid var(--theme-border); }
.attribute-bar-fill { height: 100%; background: linear-gradient(90deg, var(--theme-accent-tertiary), var(--theme-accent-main)); border-radius: 4px; transition: width 1s ease-out; }
.attribute-bar-value { font-family: 'Orbitron', monospace; font-weight: 700; color: var(--theme-accent-secondary); text-align: right; font-size: 1rem; }

/* Item & Achievement Cards */
.item-card { background: var(--theme-bg-tertiary); border: 1px solid var(--theme-border); border-radius: 8px; padding: 12px; display: flex; align-items: center; gap: 12px; }
.item-card.selected { border-color: var(--theme-accent-secondary); }
.item-card .icon img { width: 24px; height: 24px; filter: invert(89%) sepia(8%) saturate(99%) hue-rotate(174deg) brightness(91%) contrast(86%); /* Match --theme-text-primary */ }

.secondary-attribute-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    background: var(--theme-bg-tertiary);
    color: var(--theme-text-primary);
    font-size: 0.85rem;
}

/* Currency Icons */
.matter-icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    color: var(--theme-accent-secondary);
}
.rune-fragment-icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    color: var(--theme-accent-main);
}

.achievement-card { perspective: 1000px; width: 180px; height: 250px; cursor: pointer; }
.card-face { border: 2px solid var(--theme-border); }
.card-back { background: var(--theme-bg-tertiary); background-image: repeating-linear-gradient(45deg, var(--theme-bg-tertiary), var(--theme-bg-tertiary) 10px, var(--theme-bg-secondary) 10px, var(--theme-bg-secondary) 20px); }
.card-back .icon { color: var(--theme-accent-secondary); filter: drop-shadow(0 0 10px var(--theme-accent-secondary)); }
.card-back .text { font-family: var(--font-title); color: var(--theme-accent-secondary); }
.card-front { background: var(--theme-bg-secondary); }
.card-front .name { font-family: var(--font-title); color: var(--theme-accent-main); border-bottom: 1px solid var(--theme-border); }
.card-front .icon-container { color: var(--theme-accent-main); text-shadow: 0 0 15px var(--theme-glow); }
.card-front .bonus { color: var(--theme-accent-secondary); }

/* Activity Hub */
.quest-item { background: var(--theme-bg-tertiary); border-left: 3px solid var(--theme-border); padding: 0.5rem 0.75rem; border-radius: 4px;}
.quest-item.completed { border-left-color: var(--theme-accent-main); background-color: color-mix(in srgb, var(--theme-accent-main) 10%, var(--theme-bg-tertiary));}
.quest-item.completed label { text-decoration: line-through; color: #6b7280; }
.quest-item input[type="checkbox"] { accent-color: var(--theme-accent-main); }
.bounty-item {
    background-color: var(--theme-bg-tertiary);
    border: 1px solid var(--theme-border);
    border-left-width: 4px;
    padding: 1rem;
    border-radius: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s;
}
.bounty-item:hover {
    background-color: color-mix(in srgb, var(--theme-bg-tertiary) 80%, white);
}
.task-item {
    background-color: var(--theme-bg-tertiary);
    border: 1px solid var(--theme-border);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.task-status-icon {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.task-item.pending .task-status-icon { background-color: #6b7280; } /* gray */
.task-item.processing .task-status-icon { background-color: #f59e0b; animation: pulse 2s infinite; } /* amber */
.task-item.completed .task-status-icon { background-color: #22c55e; } /* green */
@keyframes pulse { 50% { opacity: .5; } }

.task-name { flex-grow: 1; font-weight: 600; }
.task-status-label { font-size: 0.75rem; text-transform: uppercase; font-weight: 700; padding: 0.25rem 0.5rem; border-radius: 9999px; }
.task-item.pending .task-status-label { background-color: rgba(107, 114, 128, 0.2); color: #9ca3af; }
.task-item.processing .task-status-label { background-color: rgba(245, 158, 11, 0.2); color: #facc15; }
.task-item.completed .task-status-label { background-color: rgba(34, 197, 94, 0.2); color: #4ade80; }

/* Notification */
#notification-container { position: fixed; bottom: 20px; right: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; }
.notification { background-color: var(--theme-bg-secondary); color: var(--theme-text-bright); padding: 12px 18px; border-radius: 6px; border-left: 4px solid var(--theme-accent-main); box-shadow: 0 4px 12px rgba(0,0,0,0.3); font-size: 14px; opacity: 0; transform: translateX(100%); animation: slideIn 0.5s forwards, fadeOut 0.5s 4.5s forwards; }
@keyframes slideIn { to { opacity: 1; transform: translateX(0); } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; transform: translateX(100%); } }
@media (max-width: 767px) {
  #notification-container {
    bottom: 70px; /* Above bottom nav */
    left: 10px;
    right: 10px;
    width: auto;
  }
}


/* ========== CARD FLIP ANIMATION ========== */
.card-container {
  perspective: 1000px;
}
.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.card-container.is-flipped .card-inner {
  transform: rotateY(180deg);
}
.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  border-radius: 0.75rem; /* 12px */
}
.card-back {
  transform: rotateY(180deg);
}

/* ========== TITLE EDIT MODAL ========== */
.title-select-modal {
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.8);
    backdrop-filter: blur(5px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.title-select-modal.visible {
    opacity: 1;
    visibility: visible;
}
.title-modal-content {
    background: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    padding: 2rem;
    width: 100%;
    max-width: 24rem;
    position: relative;
    transform: scale(0.95);
    transition: transform 0.3s;
}
.title-select-modal.visible .title-modal-content {
    transform: scale(1);
}
.close-title-modal-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--theme-text-primary);
    cursor: pointer;
}
.title-select-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 50vh;
    overflow-y: auto;
}
.title-select-list button {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: var(--theme-bg-tertiary);
    border: 1px solid var(--theme-border);
    color: var(--theme-text-bright);
    text-align: left;
    margin-bottom: 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}
.title-select-list button:hover {
    border-color: var(--theme-accent-main);
    background-color: color-mix(in srgb, var(--theme-accent-main) 15%, transparent);
}
.title-select-list button.current-title {
    border-color: var(--theme-accent-secondary);
    font-weight: bold;
}

/* === NEW: Character Modal === */
.character-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.8);
  backdrop-filter: blur(8px);
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
}
.character-modal-content {
  background-color: var(--theme-bg-secondary);
  border: 1px solid var(--theme-border);
  border-radius: 12px;
  width: 90%;
  max-width: 1200px;
  height: 90vh;
  max-height: 800px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
  padding: 1.5rem;
  position: relative;
}
.character-modal-close-btn {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  font-size: 2.5rem;
  color: var(--theme-text-primary);
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;
  transition: color 0.2s;
}
.character-modal-close-btn:hover { color: white; }

.character-modal-preview {
  background-color: var(--theme-bg-primary);
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.character-modal-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.character-modal-controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
}
.control-panel {
  background-color: var(--theme-bg-primary);
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  padding: 1rem;
}
.control-panel h3 {
  font-family: var(--font-title);
  font-size: 1.25rem;
  color: var(--theme-accent-secondary);
  margin-bottom: 0.75rem;
}
.equipment-list {
  max-height: 250px;
  overflow-y: auto;
  space-y: 0.5rem;
  padding-right: 0.5rem;
}
.equipment-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background-color: var(--theme-bg-tertiary);
  padding: 0.5rem;
  border-radius: 4px;
}
.equipment-item .name { font-weight: 600; color: var(--theme-text-bright); }
.equipment-item .slot { font-size: 0.75rem; color: var(--theme-text-primary); }
.icon-button {
  background: none;
  border: 1px solid var(--theme-border);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.icon-button:hover {
  border-color: var(--theme-accent-main);
  color: var(--theme-accent-main);
}
.icon-button.active {
  border-color: var(--theme-accent-secondary);
  color: var(--theme-accent-secondary);
  background-color: color-mix(in srgb, var(--theme-accent-secondary) 15%, transparent);
}
.icon-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.appearance-control {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.appearance-control label {
  font-weight: 600;
  color: var(--theme-text-bright);
}
.custom-file-upload {
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  background-color: var(--theme-bg-tertiary);
  border: 1px solid var(--theme-border);
  border-radius: 4px;
  transition: all 0.2s;
}
.custom-file-upload:hover {
  border-color: var(--theme-accent-main);
  color: var(--theme-accent-main);
}

.modal-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.modal-actions .btn {
  width: 100%;
}


/* ========== AKASHIK NEXUS (ATTUNEMENT VIEW) ========== */
.akashik-nexus-header {
  font-family: var(--font-title);
  font-size: 1.75rem; /* 28px */
  color: var(--theme-accent-secondary);
  border-bottom: 2px solid var(--theme-border);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}

.akashik-nexus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem; /* 24px */
}

.akashik-nexus-card {
  display: flex;
  gap: 1.25rem; /* 20px */
  background: linear-gradient(135deg, rgba(20, 20, 25, 0.7) 0%, rgba(10, 10, 12, 0.85) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 1.25rem;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.05);
}

.akashik-nexus-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(255, 255, 255, 0.15);
  border-left-color: var(--elemental-glow-color, var(--theme-accent-main));
  box-shadow: 0 15px 35px color-mix(in srgb, var(--elemental-glow-color, var(--theme-accent-main)) 25%, transparent), 
              inset 0 1px 2px rgba(255, 255, 255, 0.15);
}

.akashik-nexus-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%);
  transform: skewX(-25deg);
  transition: left 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.akashik-nexus-card:hover::before {
  left: 140%;
}

.akashik-nexus-card-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.08));
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--theme-accent-main);
  filter: drop-shadow(0 0 8px var(--theme-glow));
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.akashik-nexus-card:hover .akashik-nexus-card-icon {
  transform: scale(1.1) rotate(5deg);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.15));
  border-color: var(--elemental-glow-color, var(--theme-accent-main));
  color: #fff;
  filter: drop-shadow(0 0 12px var(--elemental-glow-color, var(--theme-accent-main)));
}

.akashik-nexus-card-icon svg {
  width: 24px;
  height: 24px;
}

.akashik-nexus-card-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.akashik-nexus-card-title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--theme-text-bright);
  letter-spacing: 0.025em;
  transition: color 0.3s ease;
}

.akashik-nexus-card:hover .akashik-nexus-card-title {
  color: #fff;
}

.akashik-nexus-card-desc {
  font-size: 0.85rem;
  color: var(--theme-text-primary);
  margin-top: 0.35rem;
  line-height: 1.4;
  opacity: 0.85;
}

.soul-mirror-card {
  background: linear-gradient(135deg, rgba(20, 20, 25, 0.7) 0%, rgba(10, 10, 12, 0.85) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 4px solid var(--elemental-glow-color, var(--theme-accent-main));
  border-radius: 16px;
  padding: 1.5rem;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.05);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.soul-mirror-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 15px 35px color-mix(in srgb, var(--elemental-glow-color, var(--theme-accent-main)) 20%, transparent), 
              inset 0 1px 2px rgba(255, 255, 255, 0.15);
}

.soul-mirror-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
  transform: skewX(-25deg);
  transition: left 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.soul-mirror-card:hover::before {
  left: 140%;
}

/* ========== PHYSICAL NEXUS ========== */
.physical-nexus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem; /* 24px */
}

.physical-nexus-card {
  display: flex;
  gap: 1rem; /* 16px */
  background-color: var(--theme-bg-tertiary);
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.physical-nexus-card:hover {
  transform: translateY(-5px) scale(1.02);
  border-color: var(--theme-accent-secondary);
  box-shadow: 0 5px 20px color-mix(in srgb, var(--theme-accent-secondary) 50%, transparent);
}

.physical-nexus-card-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  color: var(--theme-accent-secondary);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--theme-accent-secondary) 50%, transparent));
}
.physical-nexus-card-icon svg {
  width: 100%;
  height: 100%;
}

.physical-nexus-card-content {
  flex-grow: 1;
}

.physical-nexus-card-title {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--theme-text-bright);
}

.physical-nexus-card-desc {
  font-size: 0.85rem;
  color: var(--theme-text-primary);
  margin-top: 0.25rem;
}

/* ========== AKASHIK NEXUS TOME MODAL & PHYSICAL WELLNESS MODAL ========== */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
.fade-in { animation: fade-in 0.5s ease-out forwards; }
.fade-out { animation: fade-out 0.5s ease-in forwards; }

/* Physical Attunement Quiz Modal */
.physical-quiz-modal {
    background: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    padding: 2rem;
    width: 100%;
    max-width: 48rem; /* 768px */
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
.quiz-progress-bar {
    width: 100%;
    background-color: var(--theme-bg-tertiary);
    height: 8px;
    border-radius: 4px;
    margin-bottom: 1.5rem;
}
.quiz-progress-bar-fill {
    height: 100%;
    background-color: var(--theme-accent-main);
    border-radius: 4px;
    transition: width 0.3s ease-in-out;
}
.quiz-step { display: none; }
.quiz-step.active { display: block; animation: fadeIn 0.5s; }
.quiz-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--theme-border);
}

.activity-entry {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr auto;
    gap: 0.75rem;
    align-items: center;
    background-color: var(--theme-bg-primary);
    padding: 0.5rem;
    border-radius: 6px;
}

.activity-tome-content {
    background: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    padding: 2rem;
    width: 100%;
    max-width: 56rem; /* 896px */
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.activity-block {
    background-color: var(--theme-bg-primary);
    border: 1px solid var(--theme-border);
    border-radius: 6px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .activity-block {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
    }
}

.activity-details {
    flex-grow: 1;
}

.activity-title {
    font-weight: bold;
    color: var(--theme-text-bright);
}
.activity-desc {
    font-size: 0.85rem;
    color: var(--theme-text-primary);
}
.activity-reward {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--theme-accent-secondary);
}

.activity-actions {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

.tome-close-btn {
  position: fixed;
  top: 1rem;
  right: 1.5rem;
  font-size: 2.5rem;
  color: var(--theme-text-primary);
  background: none;
  border: none;
  cursor: pointer;
  z-index: 100;
  transition: color 0.2s;
}
.tome-close-btn:hover { color: white; }

.themed-tome {
  width: 90vw;
  height: 60vw;
  max-width: 1200px;
  max-height: 800px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(0deg) scale(0.9);
  transition: transform 1s ease-in-out;
  perspective: 2500px;
}
.themed-tome.open {
  transform: rotateY(-30deg) scale(1);
}

.book-pages-container {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
}

.book-page {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  transform-style: preserve-3d;
  transform-origin: left center;
  transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1);
  border: 1px solid var(--theme-border);
}

.book-page.flipped {
  transform: rotateY(-180deg);
}

.page-face {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  padding: 2rem;
  background-color: var(--theme-bg-primary);
  overflow: hidden;
}
.page-face.page-front { /* Right side of the leaf */
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.page-face.page-back { /* Left side of the leaf */
  transform: rotateY(180deg);
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

/* Cover Styling */
.book-page.cover .page-front {
  background: var(--theme-bg-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border-radius: 8px;
  border: 2px solid var(--theme-border);
}
.book-cover-title {
  font-family: var(--font-title);
  font-size: 2.5rem;
  color: var(--theme-text-bright);
  text-align: center;
}
.book-cover-rune {
  width: 120px;
  height: 120px;
  color: var(--theme-accent-main);
  filter: drop-shadow(0 0 10px var(--theme-glow));
}
.book-cover-rune svg { width: 100%; height: 100%; }
.book-cover-instruction {
  font-style: italic;
  color: var(--theme-text-primary);
}

/* Page content */
.page-number {
  position: absolute;
  bottom: 1rem;
  font-size: 0.8rem;
  color: var(--theme-text-primary);
  opacity: 0.5;
}
.page-right .page-number { right: 1.5rem; }
.page-left .page-number { left: 1.5rem; }

.runic-art-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.1;
}
.runic-art {
  width: 70%;
  height: 70%;
  color: var(--theme-accent-secondary);
}

.book-navigation {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--theme-bg-secondary);
  padding: 0.5rem 1rem;
  border-radius: 99px;
  z-index: 101;
  border: 1px solid var(--theme-border);
}
.book-navigation span {
  font-weight: bold;
  color: var(--theme-text-bright);
}
.page-turn-btn { padding: 8px 16px !important; }

/* Content within the pages */
.page-content-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
}

.attunement-skill-block {
  background-color: var(--theme-bg-secondary);
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  overflow: hidden;
}
.skill-block-main { display: flex; }
.skill-block-worldly, .skill-block-arcane { flex: 1; padding: 1rem; }
.skill-block-worldly { border-right: 1px solid var(--theme-border); }
.skill-block-worldly-header {
  font-family: var(--font-title);
  color: var(--theme-accent-secondary);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
.skill-block-course-title {
  font-weight: bold;
  color: var(--theme-text-bright);
  text-decoration: none;
  transition: color 0.2s;
}
.skill-block-course-title:hover { color: var(--theme-accent-main); text-decoration: underline; }
.skill-block-course-provider { font-size: 0.75rem; color: var(--theme-text-primary); }

.skill-block-class-header { display: flex; justify-content: space-between; align-items: flex-start; }
.skill-block-class-name { font-family: var(--font-title); font-size: 1.25rem; color: var(--theme-accent-main); }
.equip-title-btn {
  background: var(--theme-accent-secondary);
  color: var(--theme-bg-primary);
  font-size: 0.75rem;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}
.equip-title-btn:disabled { background: var(--theme-bg-tertiary); color: var(--theme-text-primary); cursor: not-allowed; }

.skill-block-class-desc { font-size: 0.8rem; color: var(--theme-text-primary); margin: 0.25rem 0; }
.skill-block-passive-name { font-weight: bold; font-size: 0.9rem; color: var(--theme-text-bright); margin-top: 0.5rem; }
.skill-block-passive-desc { font-size: 0.8rem; font-style: italic; color: var(--theme-text-primary); }

.skill-block-progress {
  padding: 0.75rem 1rem;
  background-color: var(--theme-bg-tertiary);
  border-top: 1px solid var(--theme-border);
}
.progress-bar-track { background-color: var(--theme-bg-primary); height: 8px; border-radius: 4px; overflow: hidden; }
.progress-bar-fill { background-color: var(--theme-accent-main); height: 100%; border-radius: 4px; transition: width 0.5s; }

.tome-lore-section {
  min-height: 200px;
  background-color: var(--theme-bg-primary);
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  padding: 1rem;
  margin: 1rem 0;
  text-align: left;
  font-style: italic;
  color: var(--theme-text-primary);
  white-space: pre-wrap;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========== SKILLS DASHBOARD VIEW ========== */
.skills-view-switcher {
  display: flex;
  gap: 0.5rem;
  background-color: var(--theme-bg-tertiary);
  padding: 0.25rem;
  border-radius: 0.5rem;
  border: 1px solid var(--theme-border);
}
.skills-view-switcher button {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-weight: 600;
  font-family: var(--font-body);
  border: none;
  background-color: transparent;
  color: var(--theme-text-primary);
  transition: all 0.2s ease-in-out;
}
.skills-view-switcher button.active {
  background-color: var(--theme-accent-main);
  color: var(--theme-bg-primary);
  box-shadow: 0 2px 10px var(--theme-glow);
}

.skills-dashboard {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.skill-advice-card {
    background: linear-gradient(145deg, var(--theme-bg-tertiary), var(--theme-bg-secondary));
    border: 1px solid var(--theme-border);
    padding: 1.5rem;
    border-radius: 8px;
}
.skill-advice-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.skill-advice-content {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--theme-border);
    font-style: italic;
    color: var(--theme-text-primary);
    white-space: pre-wrap; /* Preserves line breaks from AI */
}
.skill-advice-content ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin-top: 0.5rem;
}
.skill-advice-content li {
    margin-bottom: 0.5rem;
}

.skill-group-header {
  font-family: var(--font-title);
  font-size: 1.75rem;
  color: var(--theme-accent-secondary);
  border-bottom: 2px solid var(--theme-border);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}
.skill-widget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}
.skill-widget {
  background-color: var(--theme-bg-secondary);
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: all 0.2s ease;
}
.skill-widget:hover {
  transform: translateY(-4px);
  border-color: var(--theme-accent-main);
}
.skill-widget-header {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.skill-widget-icon {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  filter: invert(68%) sepia(51%) saturate(541%) hue-rotate(115deg) brightness(95%) contrast(89%); /* Match --theme-accent-main */
}
.skill-widget-title {
  font-weight: bold;
  font-size: 1rem;
  color: var(--theme-text-bright);
}
.skill-widget-source {
  font-size: 0.75rem;
  color: var(--theme-accent-secondary);
  font-weight: 600;
  text-transform: uppercase;
}
.skill-widget-desc {
  font-size: 0.8rem;
  color: var(--theme-text-primary);
  flex-grow: 1;
}
.skill-widget-costs {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    font-weight: bold;
    font-family: var(--font-body);
}
.skill-widget-costs .cost-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.skill-widget-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--theme-border);
  padding-top: 0.75rem;
  margin-top: auto;
}
.skill-widget-level {
  font-size: 0.8rem;
  font-weight: bold;
}

/* ========== NEW SKILL TREE (Correctly Scoped for Vanilla & React Trees) ========== */
.skill-tab { font-family: var(--font-title); padding: 8px 16px; border-bottom: 2px solid transparent; cursor: pointer; }
.skill-tab.active { color: var(--theme-accent-main); border-bottom-color: var(--theme-accent-main); }
.skill-tree-content.hidden { display: none; }
.skill-tree-content { display: flex; flex-direction: column; gap: 2.5rem; }

.skill-tree-content .skill-branch { background-color: var(--theme-bg-secondary); border: 1px solid var(--theme-border); border-radius: 8px; padding: 1.5rem; }
.skill-tree-content .skill-branch-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--theme-border); padding-bottom: 1rem; }
.skill-tree-content .skill-branch-icon { width: 32px; height: 32px; filter: invert(68%) sepia(51%) saturate(541%) hue-rotate(115deg) brightness(95%) contrast(89%); /* Match --theme-accent-main */}
.skill-tree-content .skill-branch-title { font-family: var(--font-title); font-size: 1.5rem; color: var(--theme-text-bright); }
.skill-tree-content .skill-branch-tiers { display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; position: relative; }

.skill-tree-content .skill-tier { display: flex; gap: 4rem; align-items: center; position: relative; width: 100%; justify-content: flex-start; flex-wrap: wrap; }

/* Standard Skill Node for vanilla/Durability trees */
.skill-tree-content .skill-node { position: relative; display: flex; align-items: center; gap: 12px; background-color: var(--theme-bg-tertiary); border: 1px solid var(--theme-border); border-radius: 6px; padding: 8px 12px; width: 220px; transition: all 0.3s ease; z-index: 2; }
.theme-runic .skill-tree-content .skill-node { border-width: 2px; border-radius: 0; clip-path: var(--shape-hexagon-soft); width: 250px; height: 70px; padding: 12px 20px; }
.skill-tree-content .skill-node .skill-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter 0.3s ease;
    filter: grayscale(100%) opacity(0.6);
}
.skill-tree-content .skill-node .skill-icon img, .skill-tree-content .skill-node .skill-icon svg { width: 100%; height: 100%; }
.skill-tree-content .skill-node .skill-details { flex: 1; }
.skill-tree-content .skill-node .skill-name { font-family: var(--font-body); font-weight: bold; font-size: 0.9rem; color: var(--theme-text-primary); }
.skill-tree-content .skill-node .skill-level { font-size: 0.75rem; color: var(--theme-accent-secondary); }
.skill-tree-content .skill-node:hover { transform: scale(1.05); border-color: white; z-index: 3; }
.skill-tree-content .skill-node.locked { filter: grayscale(1); opacity: 0.6; }
.skill-tree-content .skill-node.unlockable { cursor: pointer; border-color: var(--theme-accent-secondary); box-shadow: 0 0 10px color-mix(in srgb, var(--theme-accent-secondary) 50%, transparent); }
.skill-tree-content .skill-node.unlocked { border-color: var(--theme-accent-main); }
.skill-tree-content .skill-node.unlocked .skill-icon { filter: invert(68%) sepia(51%) saturate(541%) hue-rotate(115deg) brightness(95%) contrast(89%); }
.skill-tree-content .skill-node.unlockable .skill-icon { filter: invert(88%) sepia(35%) saturate(735%) hue-rotate(352deg) brightness(92%) contrast(87%); }
.skill-tree-content .skill-node.prereq-highlight { border-color: var(--theme-accent-secondary); box-shadow: 0 0 15px 3px color-mix(in srgb, var(--theme-accent-secondary) 50%, transparent); transform: scale(1.05); }

.skill-tree-content .skill-node .btn { font-size: 10px !important; padding: 4px 8px !important; margin-top: 4px; width: 100%; font-family: var(--font-body) !important; letter-spacing: normal !important; text-transform: none !important; }
.theme-runic .skill-tree-content .skill-node .btn { clip-path: none !important; }

/* SVG Connectors for vanilla/Durability trees */
.skill-tree-content .skill-connectors-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.skill-tree-content .skill-connector-path { stroke: var(--theme-border); stroke-width: 2px; fill: none; transition: stroke 0.3s ease, stroke-width 0.3s ease; }
.skill-tree-content .skill-connector-path.highlight { stroke: var(--theme-accent-main); stroke-width: 3px; filter: drop-shadow(0 0 4px var(--theme-glow)); }

/* Tooltip for vanilla/Durability trees */
.skill-tree-content .skill-tooltip { visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.2s linear; position: absolute; z-index: 10; width: 250px; background-color: var(--theme-bg-tertiary); color: white; padding: 10px; border-radius: 6px; border: 1px solid var(--theme-border); left: 105%; top: 50%; transform: translateY(-50%); font-size: 0.8rem; pointer-events: none; }
.skill-tree-content .skill-node:hover .skill-tooltip { visibility: visible; opacity: 1; }

@media (max-width: 767px) {
  .skill-tree-content .skill-tier { flex-direction: column; gap: 2rem; align-items: center; }
  .skill-tree-content .skill-node { width: 90%; max-width: 300px; }
}


/* --- New Celestial Orrery Layout --- */
.skill-orrery-viewport {
  position: relative;
  width: 100%;
  height: calc(100vh - 200px);
  min-height: 600px;
  background-color: #020409;
  background-image:
    radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
    radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
    radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
  background-size: 550px 550px, 350px 350px, 150px 150px;
  background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
  animation: stars-move 180s linear infinite;
  overflow: hidden;
  border-radius: 8px;
}

@keyframes stars-move {
  from { background-position: 0 0, 40px 60px, 130px 270px, 70px 100px; }
  to { background-position: -550px 0, -310px 60px, -120px 270px, -80px 100px; }
}

/* Nebula Cluster View */
.nebula-cluster {
  position: relative;
  width: 100%;
  height: 100%;
  transition: opacity 0.5s ease;
}
.skill-orrery-viewport.tree-expanded .nebula-cluster {
  opacity: 0;
  pointer-events: none;
}

.nebula-star {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s ease;
  will-change: transform;
}
.nebula-star:hover {
  transform: translate(-50%, -50%) scale(1.1);
}
.nebula-star::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--nebula-color-inner) 0%, var(--nebula-color-outer) 70%);
  filter: blur(15px);
  animation: nebula-pulse 5s infinite ease-in-out;
}
.nebula-star-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-title);
  font-size: 1.1rem;
  color: white;
  text-shadow: 0 0 5px black, 0 0 10px var(--nebula-color-inner);
}
@keyframes nebula-pulse {
  50% { transform: scale(1.1); opacity: 0.8; }
}

/* Expanded Tree View */
.expanded-tree-view {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(5px);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}
.skill-orrery-viewport.tree-expanded .expanded-tree-view {
  opacity: 1;
  transform: scale(1);
}

.expanded-tree-viewport {
  flex-grow: 1;
  overflow: auto;
  padding-top: 4rem;
}

.expanded-tree-canvas {
  position: relative;
  margin: 2rem auto;
}
.expanded-tree-close-btn {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 20;
}

/* Re-scoped styles for use inside expanded view */
.expanded-tree-canvas .skill-branch-header {
  position: absolute;
  color: var(--theme-text-bright);
  padding: 8px 16px;
  background: color-mix(in srgb, var(--theme-bg-secondary) 50%, transparent);
  border-radius: 8px;
  border: 1px solid var(--theme-border);
  white-space: nowrap;
  font-size: 1.5rem;
  text-shadow: 0 0 8px var(--theme-accent-main);
  transform: translateX(-50%);
}
.expanded-tree-canvas .skill-node {
  position: absolute; width: 160px; height: 50px; border-radius: 6px; display: flex; align-items: center; gap: 10px; background: radial-gradient(circle, #2a2d34 0%, #101014 80%); border: 2px solid var(--theme-border); 
  transition: box-shadow 0.3s ease, border-color 0.3s ease; 
  z-index: 2; transform: translate(-50%, -50%); padding: 0 10px;
}
.expanded-tree-canvas .skill-node .skill-icon { width: 32px; height: 32px; flex-shrink: 0; filter: grayscale(100%) opacity(0.6); transition: all 0.3s ease; pointer-events: none; }
.expanded-tree-canvas .skill-node .skill-icon img, .expanded-tree-canvas .skill-node .skill-icon svg { width: 100%; height: 100%; }
.expanded-tree-canvas .skill-node .skill-name { font-size: 12px; font-weight: bold; text-align: left; color: var(--theme-text-primary); line-height: 1.2; pointer-events: none; white-space: normal; }
.expanded-tree-canvas .skill-node.locked { filter: grayscale(1); opacity: 0.6; border-color: color-mix(in srgb, var(--theme-border) 70%, transparent); background: radial-gradient(circle, var(--theme-bg-tertiary) 0%, var(--theme-bg-primary) 80%); }
.expanded-tree-canvas .skill-node.unlockable { opacity: 1; filter: none; border-color: var(--theme-accent-secondary); box-shadow: 0 0 16px 2px var(--theme-accent-secondary), inset 0 0 10px 0 color-mix(in srgb, var(--theme-accent-secondary) 50%, transparent); cursor: pointer; }
.expanded-tree-canvas .skill-node.unlocked { opacity: 1; filter: none; border-color: var(--theme-accent-main); box-shadow: 0 0 20px 3px var(--theme-accent-main), inset 0 0 12px 2px color-mix(in srgb, var(--theme-accent-main) 50%, transparent); }
.expanded-tree-canvas .skill-node.unlocked .skill-icon, .expanded-tree-canvas .skill-node.unlockable .skill-icon { filter: none; opacity: 1; }

.expanded-tree-canvas .skill-node.prereq-highlight { 
  border-color: var(--theme-accent-secondary); 
  box-shadow: 0 0 20px 5px var(--theme-accent-secondary); 
  z-index: 10;
  transform: translate(-50%, -50%); /* ADDED: Override any inherited scaling */
}
.expanded-tree-canvas .skill-node:hover { 
  box-shadow: 0 0 20px 5px white; 
  z-index: 10;
  transform: translate(-50%, -50%); /* ADDED: Override any inherited scaling */
}

.expanded-tree-canvas .skill-node .btn { position: absolute; bottom: -25px; font-size: 10px !important; padding: 3px 8px !important; }
.theme-runic .expanded-tree-canvas .skill-node .btn { clip-path: none; }
.expanded-tree-canvas .skill-node .skill-tooltip { left: 50%; top: 110%; transform: translateX(-50%); width: 280px; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.2s linear; position: absolute; z-index: 10; background-color: var(--theme-bg-tertiary); color: white; padding: 10px; border-radius: 6px; border: 1px solid var(--theme-border); font-size: 0.8rem; pointer-events: none; }
.expanded-tree-canvas .skill-node:hover .skill-tooltip { visibility: visible; opacity: 1; }
.expanded-tree-canvas .skill-branch-path { position: absolute; border: 1px dotted color-mix(in srgb, var(--theme-accent-tertiary) 40%, transparent); border-radius: 40px; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--theme-accent-tertiary) 10%, transparent) 0%, transparent 70%); z-index: 0; transform: translate(-50%, -50%); pointer-events: none; padding: 2rem; }
.expanded-tree-canvas .path-header { position: absolute; text-align: center; width: 100%; top: 15px; left: 50%; transform: translateX(-50%); z-index: 1; pointer-events: none; }
.expanded-tree-canvas .path-header .path-title { font-family: var(--font-title); font-size: 1.4rem; color: var(--theme-accent-tertiary); text-shadow: 0 0 5px var(--theme-accent-tertiary); }
.expanded-tree-canvas .path-header .path-description { font-size: 0.8rem; color: var(--theme-text-primary); font-style: italic; opacity: 0.8; max-width: 80%; margin: 0 auto; }

.expanded-tree-viewport .skill-connector-path { stroke: color-mix(in srgb, var(--theme-border) 80%, transparent); stroke-width: 2px; stroke-dasharray: 4 4; fill: none; transition: all 0.3s ease; filter: blur(0.5px); animation: flow 10s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -40; } }
.expanded-tree-viewport .skill-connector-path.highlight { stroke: var(--theme-accent-main); stroke-width: 3px; stroke-dasharray: none; filter: drop-shadow(0 0 4px var(--theme-accent-main)) drop-shadow(0 0 8px var(--theme-accent-main)); animation: none; }
.expanded-tree-viewport .skill-connector-path.prereq-highlight { stroke: var(--theme-accent-secondary); stroke-width: 3px; stroke-dasharray: 4 4; filter: drop-shadow(0 0 4px var(--theme-accent-secondary)); }

/* ========== BATTLE ANIMATIONS & EFFECTS ========== */

/* --- Floating Text --- */
@keyframes float-up {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-60px) scale(1.5);
  }
}

.damage-text {
  font-family: 'Orbitron', monospace;
  font-weight: 900;
  font-size: 1.75rem; /* 28px */
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  animation: float-up 2s ease-out forwards;
  position: absolute;
  pointer-events: none;
}

.damage-text.damage { color: #ef4444; } /* Red */
.damage-text.heal { color: #22c55e; } /* Green */
.damage-text.buff { color: #3b82f6; } /* Blue */
.damage-text.debuff { color: #a855f7; } /* Purple */
.damage-text.keyword { color: #eab308; } /* Yellow */
.damage-text.info { color: #ffffff; } /* White */

/* --- Elemental Advantage Glows --- */
@keyframes elemental-glow-anim {
  0%, 100% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

.elemental-advantage-glow::before,
.elemental-disadvantage-glow::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 1rem; /* 16px, slightly larger than card's rounded-xl */
  animation: elemental-glow-anim 2s infinite ease-in-out;
  z-index: -1;
  pointer-events: none;
}

.elemental-advantage-glow::before {
  background: radial-gradient(circle, rgba(34, 197, 94, 0.5) 0%, transparent 70%);
  box-shadow: 0 0 20px 5px rgba(34, 197, 94, 0.6);
}

.elemental-disadvantage-glow::before {
  background: radial-gradient(circle, rgba(239, 68, 68, 0.5) 0%, transparent 70%);
  box-shadow: 0 0 20px 5px rgba(239, 68, 68, 0.6);
}

/* =========================================
   THE OBSIDIAN TABLETS (Default / Neutral State)
   Replaces the old red/black demon defaults with a neutral Void/Slate theme.
   ========================================= */

.focus-content-wrapper {
    background: rgba(5, 2, 2, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    z-index: 500 !important;
    animation: fadeIn 0.4s ease-out !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* Neutral Container (Void Theme) */
.focus-content {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    color: #e2e8f0 !important;
    font-family: var(--font-body);
    width: 100%;
    max-width: 800px !important;
    max-height: 85vh !important; /* Prevent screen overflow */
    overflow-y: auto !important; /* Enable scrolling */
    padding: 1.5rem !important;
    position: relative;
}

/* Scrollbar Styling for Modal */
.focus-content::-webkit-scrollbar {
    width: 8px;
}
.focus-content::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.3); 
}
.focus-content::-webkit-scrollbar-thumb {
    background: #475569; 
    border-radius: 4px;
}
.focus-content::-webkit-scrollbar-thumb:hover {
    background: #64748b; 
}

/* Neutral Typography */
.focus-title {
    font-family: var(--font-title) !important;
    color: #38bdf8 !important; /* Cyan */
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.4) !important;
    border-bottom: 1px solid #334155;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    text-align: center;
    font-size: 1.8rem !important;
}

.focus-description {
    text-align: center;
    color: #94a3b8 !important; /* Slate Grey */
    font-style: italic;
    margin-bottom: 2rem;
}

/* Neutral Buttons */
.selection-button, 
.choice-button, 
.scenario-button, 
.likert-button {
    background: rgba(30, 41, 59, 0.6) !important; /* Slate 800 */
    border: 1px solid #475569 !important;
    color: #cbd5e1 !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    padding: 1rem !important;
}

.selection-button:hover, 
.choice-button:hover, 
.scenario-button:hover, 
.likert-button:hover {
    background: rgba(51, 65, 85, 0.8) !important;
    border-color: #38bdf8 !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.2) !important;
}

.selection-button.selected, 
.likert-button:has(input:checked) {
    background: #0f172a !important;
    border-color: #38bdf8 !important;
    color: white !important;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.4) !important;
}

/* Neutral Form Fields */
.focus-content input[type="text"],
.focus-content input[type="number"],
.focus-content select,
.focus-content textarea {
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid #334155 !important;
    color: #e2e8f0 !important;
    border-radius: 6px !important;
    padding: 0.75rem !important;
    width: 100%;
}

.focus-content input:focus,
.focus-content textarea:focus {
    border-color: #38bdf8 !important;
    outline: none !important;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.2) !important;
}

/* Neutral Sub-Sections */
.multi-part-form-section, .pantheon-quiz-question {
    background: rgba(30, 41, 59, 0.4) !important;
    border: 1px solid #334155 !important;
    border-radius: 8px !important;
    padding: 1.5rem !important;
    margin-bottom: 1rem !important;
}

.section-label {
    color: #bae6fd !important; /* Light Cyan */
    border-bottom: 1px solid #334155 !important;
    margin-bottom: 0.5rem !important;
    display: block;
    font-weight: bold;
}

/* =========================================
   REALM OVERRIDES (Targeting the Wrapper)
   ========================================= */

/* --- FAE REALM (The Twilight) --- */
.focus-content-wrapper.realm-fae .focus-content {
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
}

.focus-content-wrapper.realm-fae .focus-title {
    color: #f0abfc !important; /* Pink */
    font-family: 'Courgette', cursive !important;
    text-shadow: 0 0 10px #d946ef !important;
    border-bottom: 1px solid #2dd4bf !important;
}

.focus-content-wrapper.realm-fae .selection-button,
.focus-content-wrapper.realm-fae .likert-button {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid #2dd4bf !important;
    color: #ccfbf1 !important;
    border-radius: 12px !important;
}

.focus-content-wrapper.realm-fae .selection-button:hover,
.focus-content-wrapper.realm-fae .likert-button:hover {
    background: rgba(45, 212, 191, 0.2) !important;
    box-shadow: 0 0 15px #2dd4bf !important;
}

.focus-content-wrapper.realm-fae .selection-button.selected {
    background: linear-gradient(135deg, #4c1d95, #2dd4bf) !important;
    border-color: #f0abfc !important;
}

/* --- GODS REALM (The Marble) --- */
.focus-content-wrapper.realm-gods .focus-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.focus-content-wrapper.realm-gods .focus-title {
    color: #b45309 !important; /* Bronze */
    font-family: 'Cinzel Decorative', serif !important;
    text-shadow: none !important;
    border-bottom: 1px solid #cbd5e1 !important;
}

.focus-content-wrapper.realm-gods .selection-button,
.focus-content-wrapper.realm-gods .likert-button {
    background: white !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    border-radius: 2px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
}

.focus-content-wrapper.realm-gods .selection-button:hover,
.focus-content-wrapper.realm-gods .likert-button:hover {
    border-color: #fbbf24 !important;
    background: #fffbeb !important;
    color: #b45309 !important;
}

.focus-content-wrapper.realm-gods .selection-button.selected {
    background: #fbbf24 !important;
    color: #fff !important;
    border-color: #b45309 !important;
}

/* --- DEMON REALM (The Iron) --- */
.focus-content-wrapper.realm-demon .focus-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.focus-content-wrapper.realm-demon .focus-title {
    color: #ef4444 !important;
    font-family: 'Orbitron', sans-serif !important;
    border-bottom: 1px solid #7f1d1d !important;
}

.focus-content-wrapper.realm-demon .selection-button,
.focus-content-wrapper.realm-demon .likert-button {
    background: #1a0505 !important;
    border: 1px solid #7f1d1d !important;
    color: #fca5a5 !important;
    border-radius: 0 !important;
}

.focus-content-wrapper.realm-demon .selection-button:hover,
.focus-content-wrapper.realm-demon .likert-button:hover {
    background: #450a0a !important;
    border-color: #ef4444 !important;
    box-shadow: 0 0 15px #ef4444 !important;
}

.focus-content-wrapper.realm-demon .selection-button.selected {
    background: #7f1d1d !important;
    border-color: #ef4444 !important;
    color: white !important;
}

/* =========================================
   THE DIVINE WRIT (Triptych Selection Cards)
   Fixed for High Visibility & Layout
   ========================================= */

.triptych-container {
    display: grid;
    /* Default: Stacked for mobile */
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
    width: 100%;
    perspective: 1000px;
    padding: 1rem 0;
}

/* Desktop: Force 3 Columns Side-by-Side */
@media (min-width: 1024px) {
    .triptych-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

.triptych-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
    /* Default Dark Glass Theme (Void/Base) */
    background: rgba(15, 23, 42, 0.95); 
    border: 1px solid #475569;
    border-radius: 12px;
    padding: 2.5rem 1.5rem;
    
    /* Ensure text color is light by default */
    color: #e2e8f0; 
    
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    overflow: hidden;
    min-height: 450px; /* Ensure consistent height */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}

/* Hover Effect */
.triptych-card:hover {
    transform: translateY(-8px);
    border-color: #fbbf24; /* Gold border on hover */
    background: rgba(20, 30, 50, 1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    z-index: 10;
}

/* --- 1. Icon Section --- */
.triptych-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 1.5rem;
    color: #cbd5e1; /* Slate-300 default */
    transition: color 0.3s ease, transform 0.3s ease;
}

/* Make sure SVG fills container */
.triptych-icon svg, 
.triptych-icon img {
    width: 100%;
    height: 100%;
    fill: currentColor;
    object-fit: contain;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
}

.triptych-card:hover .triptych-icon {
    color: #fbbf24; /* Gold on hover */
    transform: scale(1.1);
    filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.4));
}

/* --- 2. Header Section --- */
.triptych-header {
    margin-bottom: 1.5rem;
    width: 100%;
    border-bottom: 1px solid #334155;
    padding-bottom: 1rem;
}

.triptych-name {
    font-family: var(--font-title);
    font-size: 1.6rem;
    color: #fbbf24; /* Gold text */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    line-height: 1.2;
}

.triptych-domains {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: #94a3b8; /* Slate-400 */
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

/* --- 3. Body Section (Lore) --- */
.triptych-body {
    flex-grow: 1; /* Pushes footer down */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    width: 100%;
}

.triptych-lore {
    font-family: 'EB Garamond', serif;
    font-size: 1.1rem;
    font-style: italic;
    color: #e2e8f0; /* Slate-200 */
    line-height: 1.6;
}

/* --- 4. Footer Section (Bonus) --- */
.triptych-footer {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #334155;
}

.triptych-bonus-label {
    display: block;
    font-size: 0.7rem;
    color: #38bdf8; /* Cyan */
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 0.1em;
    margin-bottom: 0.25rem;
}

.triptych-bonus-desc {
    font-size: 0.85rem;
    color: #fff;
    font-weight: 500;
    line-height: 1.4;
}

/* Burn Animation for Selection */
@keyframes cardBurn {
    0% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.05); filter: brightness(2); background: white; }
    100% { transform: scale(0); opacity: 0; }
}

.triptych-card.burning {
    animation: cardBurn 0.8s ease-in forwards;
    pointer-events: none;
}


/* =========================================
   REALM THEMES (Critical for Visibility)
   ========================================= */

/* --- GODS REALM (Parchment/High Contrast Theme) --- */
.focus-content-wrapper.realm-gods .triptych-card {
    /* Creamy Parchment Background */
    background: linear-gradient(135deg, #fffbf0 0%, #f8fafc 100%);
    border: 1px solid #d4af37; /* Gold Border */
    color: #1e293b !important; /* Dark Slate Text for readability */
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.15);
}

.focus-content-wrapper.realm-gods .triptych-card:hover {
    border-color: #b45309; /* Darker amber border on hover */
    box-shadow: 0 20px 40px rgba(212, 175, 55, 0.3);
    background: #fff;
}

.focus-content-wrapper.realm-gods .triptych-icon {
    color: #d97706; /* Amber 600 */
}

.focus-content-wrapper.realm-gods .triptych-header {
    border-bottom: 1px solid #cbd5e1; /* Light grey divider */
}

.focus-content-wrapper.realm-gods .triptych-name {
    color: #92400e !important; /* Dark Amber/Bronze Text */
    text-shadow: none;
}

.focus-content-wrapper.realm-gods .triptych-domains {
    color: #64748b; /* Slate 500 */
}

.focus-content-wrapper.realm-gods .triptych-lore {
    color: #334155 !important; /* Slate 700 - High Contrast */
}

.focus-content-wrapper.realm-gods .triptych-footer {
    background: rgba(212, 175, 55, 0.1); /* Light Gold tint */
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.focus-content-wrapper.realm-gods .triptych-bonus-label {
    color: #b45309 !important; /* Bronze */
}

.focus-content-wrapper.realm-gods .triptych-bonus-desc {
    color: #0f172a !important; /* Almost Black */
}


/* --- DEMON REALM (Magma/Dark Theme) --- */
.focus-content-wrapper.realm-demon .triptych-card {
    background: linear-gradient(160deg, #1a0505 0%, #000 100%);
    border: 1px solid #450a0a;
    color: #fee2e2;
}

.focus-content-wrapper.realm-demon .triptych-card:hover {
    border-color: #ef4444;
    box-shadow: 0 0 30px rgba(220, 38, 38, 0.2);
}

.focus-content-wrapper.realm-demon .triptych-icon {
    color: #ef4444; /* Red 500 */
}

.focus-content-wrapper.realm-demon .triptych-name {
    color: #f87171 !important; /* Red 400 */
    text-shadow: 0 0 10px rgba(220, 38, 38, 0.4);
}

.focus-content-wrapper.realm-demon .triptych-domains {
    color: #991b1b; /* Red 800 */
}

.focus-content-wrapper.realm-demon .triptych-lore {
    color: #d1d5db !important;
}

.focus-content-wrapper.realm-demon .triptych-footer {
    background: #2a0a0a;
    border: 1px solid #450a0a;
}

.focus-content-wrapper.realm-demon .triptych-bonus-label {
    color: #ef4444 !important;
}


/* --- FAE REALM (Twilight/Mystic Theme) --- */
.focus-content-wrapper.realm-fae .triptych-card {
    background: rgba(20, 10, 30, 0.85);
    backdrop-filter: blur(10px);
    border: 1px solid #2dd4bf; /* Teal */
    color: #f0fdfa;
}

.focus-content-wrapper.realm-fae .triptych-card:hover {
    border-color: #f0abfc; /* Pink */
    box-shadow: 0 0 30px rgba(216, 180, 254, 0.2);
}

.focus-content-wrapper.realm-fae .triptych-icon {
    color: #2dd4bf;
}

.focus-content-wrapper.realm-fae .triptych-name {
    color: #f0abfc !important;
    text-shadow: 0 0 10px rgba(232, 121, 249, 0.4);
}

.focus-content-wrapper.realm-fae .triptych-domains {
    color: #5eead4;
}

.focus-content-wrapper.realm-fae .triptych-lore {
    color: #e0f2fe !important;
}

.focus-content-wrapper.realm-fae .triptych-footer {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #2dd4bf;
}

/* --- ELDRITCH REALM (Void/Cosmic Theme) --- */
.focus-content-wrapper.realm-eldritch .triptych-card {
    background: #09090b;
    border: 1px solid #4c1d95; /* Violet */
    color: #e9d5ff;
}

.focus-content-wrapper.realm-eldritch .triptych-icon {
    color: #a855f7;
}

.focus-content-wrapper.realm-eldritch .triptych-name {
    color: #d8b4fe !important;
    font-family: monospace; /* Eldritch vibe */
}

/* =========================================
   THE OBSIDIAN TABLETS (Creator Pop-ups)
   ========================================= */

/* 1. The Dark Veil (Overlay) */
.focus-content-wrapper {
    background: rgba(5, 2, 2, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    z-index: 500 !important;
    animation: fadeIn 0.4s ease-out !important;
}

/* 2. The Tablet (Modal Container) */
.focus-content {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    color: #d0d0d0 !important;
    max-width: 900px !important;
    padding: 1.5rem !important;
    position: relative;
}

/* Add subtle noise/texture to the tablet */
.focus-content::before {
    display: none !important;
}

/* 3. Typography - Inscriptions */
.focus-title {
    position: relative;
    z-index: 1;
    font-family: var(--font-title) !important;
    color: #ffaa88 !important;
    text-shadow: 0 0 15px rgba(255, 60, 0, 0.4) !important;
    font-size: 2.2rem !important;
    margin-bottom: 0.5rem !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    text-align: center !important;
    border-bottom: 1px solid #441111 !important;
    padding-bottom: 1.5rem !important;
}

.focus-description {
    position: relative;
    z-index: 1;
    color: #b09090 !important;
    font-style: italic !important;
    font-size: 1.1rem !important;
    text-align: center !important;
    margin-bottom: 2.5rem !important;
    margin-top: 1rem !important;
}

/* 4. Selection Tiles (Grid Options) */
.selection-button {
    position: relative;
    z-index: 1;
    background: rgba(20, 10, 10, 0.6) !important;
    border: 1px solid #442222 !important;
    color: #ccaaaa !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 1rem 1.5rem !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8) !important;
}

.selection-button:hover:not(:disabled) {
    background: rgba(255, 60, 0, 0.1) !important;
    border-color: #ff6600 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 0 20px rgba(255, 60, 0, 0.15) !important;
    text-shadow: 0 0 8px #ff4400 !important;
}

.selection-button.selected {
    background: linear-gradient(135deg, #882200 0%, #441100 100%) !important;
    border-color: #ffaa00 !important;
    color: #ffffff !important;
    box-shadow: 
        0 0 25px rgba(255, 100, 0, 0.3),
        inset 0 0 15px rgba(255, 200, 0, 0.1) !important;
    text-shadow: 0 0 10px #ffaa00 !important;
    transform: scale(1.02);
}

/* 5. Choice Buttons (A vs B - Personality Questions) */
.choice-button {
    position: relative;
    z-index: 1;
    background: rgba(30, 15, 15, 0.4) !important;
    border: 1px solid #553333 !important;
    color: #ddbbbb !important;
    font-size: 1.25rem !important;
    padding: 2rem !important;
    transition: all 0.3s ease !important;
}

.choice-button:hover {
    background: rgba(50, 20, 15, 0.6) !important;
    border-color: #ff5500 !important;
    color: white !important;
    box-shadow: 0 0 30px rgba(255, 60, 0, 0.1) !important;
}

.choice-separator {
    color: #663333 !important;
    font-family: var(--font-title) !important;
    font-weight: bold !important;
    font-size: 1.2rem !important;
    text-shadow: 0 0 10px rgba(0,0,0,0.8) !important;
}

/* 6. Multi-part Form Sections (Combat Prefs) */
.multi-part-form-section {
    position: relative;
    z-index: 1;
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid #331111 !important;
    border-radius: 4px !important;
    padding: 1.5rem !important;
    margin-bottom: 1rem !important;
}

.section-label {
    color: #ff8866 !important;
    font-family: var(--font-title) !important;
    font-size: 1rem !important;
    margin-bottom: 1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-bottom: 1px solid #442222 !important;
    display: block !important;
    padding-bottom: 0.5rem !important;
    width: 100%;
}

/* 7. Inputs inside Modals (Custom Text Entry) */
.focus-content input[type="text"],
.focus-content input[type="number"] {
    background: rgba(10, 5, 5, 0.8) !important;
    border: 1px solid #442222 !important;
    color: #ffccaa !important;
    padding: 14px !important;
    border-radius: 4px !important;
    font-family: var(--font-body) !important;
    font-size: 1.1rem !important;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5) !important;
}

.focus-content input:focus {
    border-color: #ff6600 !important;
    background: rgba(20, 10, 5, 0.9) !important;
    box-shadow: 0 0 15px rgba(255, 80, 0, 0.15) !important;
    outline: none !important;
}

/* 8. Primary Action Buttons in Modals (Continue/Confirm) */
.focus-content .btn-primary {
    background: linear-gradient(to bottom, #cc4400, #882200) !important;
    border: 1px solid #ff6600 !important;
    border-bottom: 3px solid #661100 !important;
    color: #fff !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-weight: bold !important;
    padding: 14px 28px !important;
    margin-top: 24px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5) !important;
    transition: all 0.2s !important;
    text-shadow: 0 1px 2px black !important;
}

.focus-content .btn-primary:hover {
    background: linear-gradient(to bottom, #ff6600, #aa3300) !important;
    box-shadow: 0 0 30px rgba(255, 80, 0, 0.3) !important;
    transform: translateY(-2px) !important;
}

.focus-content .btn-secondary {
    background: transparent !important;
    border: 1px solid #663333 !important;
    color: #aa8888 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.focus-content .btn-secondary:hover {
    border-color: #aa5555 !important;
    color: #ccaaaa !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* 9. "Add" button for custom entries */
.focus-content .flex.gap-2.mt-4 {
    margin-top: 2rem !important;
    padding-top: 1.5rem !important;
    border-top: 1px dashed #442222 !important;
}

/* Scrollbar for modal content */
.focus-content::-webkit-scrollbar {
    width: 8px;
}
.focus-content::-webkit-scrollbar-track {
    background: #1a0505; 
}
.focus-content::-webkit-scrollbar-thumb {
    background: #442222; 
    border-radius: 4px;
}
.focus-content::-webkit-scrollbar-thumb:hover {
    background: #663333; 
}
/* =========================================
   THE OBSIDIAN TABLETS - INNER CONTENT (Quiz & Forms)
   ========================================= */

/* 1. Question Containers (The "Runes" rows) */
.pantheon-quiz-question {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid #331111 !important;
    border-left: 3px solid #882200 !important; /* Accent on left */
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    border-radius: 4px !important;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8) !important;
}

.pantheon-quiz-question p {
    font-family: var(--font-body) !important;
    font-size: 1.1rem !important;
    color: #eebb99 !important; /* Warm text */
    margin-bottom: 1rem !important;
    text-shadow: 0 1px 2px black !important;
    font-weight: 600 !important;
}

/* 2. Likert Scale Container */
.likert-scale-buttons {
    display: flex !important;
    gap: 0.5rem !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* 3. The "Stone" Buttons (Radio Wrappers) */
.likert-button {
    flex: 1 !important;
    position: relative !important;
    height: 50px !important;
    
    /* Dark stone look */
    background: #150505 !important;
    border: 1px solid #442222 !important;
    border-radius: 2px !important;
    
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    color: #664444 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    overflow: hidden !important;
}

/* Text labels inside buttons (Disagree / Agree) */
.likert-button span {
    z-index: 2 !important;
    pointer-events: none; /* Let clicks pass through to input */
}

/* Hover State */
.likert-button:hover {
    border-color: #aa4400 !important;
    background: #251010 !important;
    color: #aa8888 !important;
    box-shadow: 0 0 10px rgba(170, 68, 0, 0.2) !important;
    transform: translateY(-1px);
}

/* Selected State (The "Lit" Rune) - Covers both native checked and class-based checked */
.likert-button:has(input:checked),
.likert-button.checked {
    background: linear-gradient(to bottom, #aa3300, #661100) !important;
    border-color: #ffaa00 !important;
    color: #fff !important;
    
    /* Intense Glow */
    box-shadow: 
        0 0 15px rgba(255, 100, 0, 0.5),
        inset 0 0 10px rgba(255, 200, 100, 0.2) !important;
        
    text-shadow: 0 0 5px #ffcc00 !important;
    transform: scale(1.05) !important;
    z-index: 10 !important;
}

/* Hide the actual radio button but keep it functional */
.likert-button input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Middle indicators (neutral/numbers) styling */
/* Adds a small dot for the middle buttons that have no text */
.likert-button:not(:first-child):not(:last-child) span:empty::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    background: #332222;
    border-radius: 50%;
    box-shadow: inset 0 1px 2px black;
}

.likert-button:not(:first-child):not(:last-child):has(input:checked) span:empty::after {
    background: #ffccaa;
    box-shadow: 0 0 5px white;
}

/* 4. Navigation Buttons (Previous / Next) within Quiz */
.pantheon-quiz-nav {
    margin-top: 2rem !important;
    border-top: 1px solid #442222 !important;
    padding-top: 1.5rem !important;
    display: flex !important;
    justify-content: space-between !important;
}

/* Ensure specific quiz buttons use the tablet button style */
.pantheon-quiz-nav button {
    min-width: 120px !important;
}

/* =========================================
   THE OBSIDIAN TABLETS - SCENARIO & JUDGMENT
   ========================================= */

/* The Grid Layout for Choices */
.scenario-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 2rem;
}

@media (min-width: 768px) {
    .scenario-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* The "Basalt Plate" Buttons */
.scenario-button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    
    /* Dark Stone Texture */
    background: linear-gradient(145deg, #1a0b0b 0%, #0f0505 100%);
    border: 1px solid #3d1f1f;
    border-left: 4px solid #552211; /* Heavy left accent */
    border-radius: 4px;
    
    padding: 1.5rem;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.5);
}

/* Hover Effect: Heating Up */
.scenario-button:hover {
    background: linear-gradient(145deg, #2a1111 0%, #1a0505 100%);
    border-color: #ff5500;
    box-shadow: 
        0 0 20px rgba(255, 80, 0, 0.15), 
        inset 0 0 10px rgba(255, 100, 50, 0.05);
    transform: translateY(-3px);
}

/* Text Styling inside the Button */
.scenario-label {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.1rem;
    color: #eebb99; /* Warm parchment text */
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.2s;
}

.scenario-button:hover .scenario-label {
    color: #ffffff;
    text-shadow: 0 0 8px #ff5500;
}

.scenario-tags {
    font-size: 0.75rem;
    font-style: italic;
    color: #885555; /* Dimmed rust color */
    font-family: monospace;
}

/* The Header Icon (Molten Inlay) */
.scenario-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    /* Magma Text Effect */
    background: linear-gradient(to bottom, #ffffcc 0%, #ff8800 50%, #cc2200 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 15px rgba(255, 60, 0, 0.5));
}
/* Add this to index.css if not already there */
.binding-rune[data-source="Pact"], 
.passive-rune[data-source="Pact"] { 
    --rune-color: #ef4444; /* Vivid Red */
}
.divine-flash {
    position: fixed;
    inset: 0;
    background: white;
    z-index: 1000;
    animation: flashOut 1.5s ease-out forwards;
    pointer-events: none;
}

@keyframes flashOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.divine-sigil-reveal {
    font-size: 8rem;
    color: gold;
    filter: drop-shadow(0 0 20px gold);
    animation: sigilPulse 2s ease-in-out infinite;
}

/* Skill Inspector Animation */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}

.animate-slide-in-right {
  animation: slideInRight 0.3s ease-out forwards;
}

/* Custom Scrollbar for the sidebar */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2); 
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2); 
  border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4); 
}

/* --- Mobile Fixes (Global) --- */
@media (max-width: 767px) {
  #app-body {
    border: none !important;
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  #app-shell-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Hide scrollbars globally but keep functionality */
  html, body, #root, #app-shell-container, #app-body, .main-content, * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .main-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    background: var(--theme-bg-primary) !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Views that should scroll handle their own padding to clear the fixed nav */
  .dashboard-view-container,
  .inventory-view-container,
  .quests-view-container,
  .bio-view-container,
  .web3-view-container {
    padding: 0 8px 90px 8px !important; /* Enough to clear bottom nav, tighter for mobile centering */
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    height: 100% !important;
    max-height: 100% !important;
    box-sizing: border-box !important;
  }

  /* Mobile-optimized Dashboard Grid and Cards using Flex Column to guarantee full constraint */
  .dashboard-grid {
    display: flex !important;
    flex-direction: column !important;
    padding: 12px 8px !important;
    gap: 20px !important;
    max-width: 100% !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .dashboard-grid > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .dashboard-card {
    padding: 16px !important;
    border-radius: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important; /* Prevent any absolute elements/children from causing internal scroll/shift */
  }

  /* Full bleed views */
  .world-view-container,
  .skills-view-container {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    background: #000 !important; /* Ensure black bg for map/skills */
  }

  .world-view-container > div,
  .skills-view-container > div {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }
}

  .tooltip {
    position: relative;
    display: inline-flex;
    cursor: help;
  }

  /* Robust Tooltip System - Global */
  .tooltip .tooltiptext {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    z-index: 99999999 !important;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 260px !important;
    background: rgba(10, 15, 25, 0.98) !important;
    backdrop-filter: blur(24px);
    color: #fff !important;
    text-align: center;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    border: 1px solid var(--theme-accent-main) !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.8) !important;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s;
    white-space: normal !important;
    display: block !important;
    box-sizing: border-box !important;
    word-break: normal !important;
  }

  .tooltip:hover .tooltiptext,
  .tooltip:focus-within .tooltiptext {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0);
  }

  /* Mobile Tooltip Overlay - Fixed at bottom for accessibility */
  @media (max-width: 768px) {
    .tooltip .tooltiptext {
      position: fixed !important;
      bottom: 120px !important;
      left: 20px !important;
      right: 20px !important;
      width: calc(100% - 40px) !important;
      min-width: 0 !important;
      max-width: none !important;
      transform: translateY(30px) !important;
      margin: 0 !important;
      padding: 20px !important;
      font-size: 0.9rem !important;
      border-radius: 20px !important;
      box-shadow: 0 -20px 60px rgba(0,0,0,0.95) !important;
    }

    .tooltip:hover .tooltiptext,
    .tooltip:active .tooltiptext {
      visibility: visible !important;
      opacity: 1 !important;
      transform: translateY(0) !important;
    }
  }

  /* Toggleable Nav Visibility Support */
  #app-shell-container.nav-hidden .app-header {
    transform: translateY(-100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #app-shell-container.nav-hidden .bottom-nav {
    transform: translateY(100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #app-shell-container.nav-hidden .main-content {
    flex: 1 !important;
    height: 100vh !important;
  }
  
  /* Views should use full height when nav is hidden */
  #app-shell-container.nav-hidden .dashboard-view-container,
  #app-shell-container.nav-hidden .inventory-view-container,
  #app-shell-container.nav-hidden .quests-view-container,
  #app-shell-container.nav-hidden .bio-view-container,
  #app-shell-container.nav-hidden .web3-view-container {
    padding-bottom: 2rem !important;
  }

  .app-header, .bottom-nav {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, height 0.4s ease !important;
  }

  /* Modal Styling (Rune & Title) */
  .rune-upgrade-modal-overlay,
  .title-select-modal {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: blur(15px);
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 999999999 !important;
    padding: 20px;
  }

  .rune-upgrade-modal-content,
  .title-modal-content {
    background: var(--theme-bg-secondary) !important;
    border: 2px solid var(--theme-accent-main) !important;
    border-radius: 32px !important;
    padding: 40px !important;
    width: 100%;
    max-width: 520px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 0 60px rgba(var(--theme-accent-main-rgb), 0.3) !important;
    display: flex !important;
    flex-direction: column;
    gap: 24px;
    margin: auto;
    line-height: 1.6 !important;
  }

  @media (max-width: 640px) {
    .rune-upgrade-modal-content,
    .title-modal-content {
      padding: 32px 24px !important;
      border-radius: 24px !important;
      gap: 16px;
      max-width: 95%;
      width: 95%;
    }
    
    .rune-upgrade-modal-content h2,
    .title-modal-content h2 {
      font-size: 1.5rem !important;
      margin-bottom: 0.75rem !important;
    }

    .rune-upgrade-modal-content p,
    .title-modal-content p {
      font-size: 0.95rem !important;
      line-height: 1.5 !important;
    }

    .rune-upgrade-modal-close-btn,
    .close-title-modal-btn {
      top: 12px;
      right: 12px;
      font-size: 20px;
    }
  }

  .rune-upgrade-modal-close-btn,
  .close-title-modal-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: var(--theme-text-muted);
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
  }

  .rune-upgrade-modal-close-btn:hover,
  .close-title-modal-btn:hover {
    color: white;
  }

  .title-select-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 60vh;
    overflow-y: auto;
  }

  /* Fix Character Modal (Portrait mode issues) */
  .character-modal-overlay {
    padding: 0 !important;
    align-items: flex-start !important;
    overflow-y: auto !important;
  }
  
  .character-modal-content {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    overflow-y: visible !important;
    padding: 1rem !important;
    margin: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
  }
  
  .character-modal-preview {
    height: 40vh !important;
    min-height: 300px;
  }

  /* General Modal Fixes */
  .fixed.top-1\/2.left-1\/2 {
    width: 95% !important;
    max-width: none !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
  }

/* ========== TRANSPARENT & GLASSMORPHIC THEMED PANELS ========== */
.inventory-view-container,
.bio-view-container,
.web3-view-container {
  position: relative !important;
  background: transparent !important;
}

/* Make standard cards and backgrounds inside themed views glassmorphic */
.inventory-view-container .bg-theme-bg-secondary,
.inventory-view-container .armory-details-container,
.inventory-view-container .armory-model-container,
.inventory-view-container .inventory-card,
.inventory-view-container .bg-theme-bg-tertiary,
.inventory-view-container .bg-theme-bg-primary,
.bio-view-container .dashboard-card,
.bio-view-container .bg-\[var\(--theme-bg-tertiary\)\] {
  background: color-mix(in srgb, var(--theme-bg-secondary) 40%, transparent) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;
}

.web3-view-container .bg-zinc-900\/50,
.web3-view-container .bg-black\/30,
.web3-view-container .bg-black\/40,
.web3-view-container .bg-zinc-900\/90,
.web3-view-container .bg-zinc-800,
.web3-view-container .border-zinc-800 {
  background: color-mix(in srgb, var(--theme-bg-secondary) 40%, transparent) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;
}

/* TCG Pack Animations */
@keyframes pack-faint-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes pack-hover-bob {
  0%, 100% { transform: translateY(0) scale(1.1); }
  50% { transform: translateY(-12px) scale(1.1); }
}

.pack-idle-bob {
  animation: pack-faint-bob 6s ease-in-out infinite;
}

.pack-hover-bob:hover {
  animation: pack-hover-bob 2s ease-in-out infinite !important;
}



/* --- FIX: Focus Content Mobile Scroll --- */
@media (max-width: 768px) {
    .focus-content-wrapper {
        align-items: flex-start !important; /* Prevent top cutoff when content is taller than screen */
        padding: 2rem 1rem !important;
        overflow-y: auto !important; /* Allow wrapper to scroll if needed */
    }
    .focus-content {
        max-height: none !important; /* Let it expand and be scrolled by wrapper */
        margin: auto 0 !important; /* Center vertically if shorter than viewport, align top if taller */
        padding-bottom: max(2rem, env(safe-area-inset-bottom)) !important;
    }
}

/* --- FIX: Make Creator View Scrollable on Mobile --- */
@media (max-width: 768px) {
    #creator-view {
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
        height: 100dvh !important;
        /* Allow scroll past the input */
        padding-bottom: env(safe-area-inset-bottom) !important;
    }
    #conversation-log {
        position: relative !important;
        inset: auto !important;
        height: auto !important;
        flex: 1 1 auto !important;
        padding: 4.5rem 1rem 2rem 1rem !important;
        overflow-y: visible !important;
    }
    #conversation-input-area {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 0 auto 2rem auto !important;
        width: 95% !important;
        flex: 0 0 auto !important;
    }
}

/* --- 3 COLUMN LAYOUT FIX --- */
.archetype-selector-layout {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 2.5rem;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.rune-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    width: 100%;
    max-width: 200px;
    padding: 1rem 0;
    position: relative;
    user-select: none;
}
.deck-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
    max-width: 340px;
}
.details-column {
    display: flex;
    flex-direction: column;
    background: rgba(12, 10, 15, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(191, 149, 63, 0.3);
    border-radius: 12px;
    padding: 1.5rem;
    flex: 1;
    max-width: 440px;
    position: relative;
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.8), inset 0 0 20px rgba(191, 149, 63, 0.05);
}
@media (max-width: 1024px) {
    .archetype-selector-layout {
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow: visible !important;
    }
    .rune-column {
        display: none !important;
    }
    .deck-column {
        max-width: 100% !important;
        width: 100% !important;
        order: 1 !important;
        padding: 0 1rem !important;
        align-items: center !important;
    }
    .details-column {
        position: fixed !important;
        inset: 0 !important;
        z-index: 9999 !important;
        max-width: 100% !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        border-radius: 0 !important;
        border: none !important;
        margin: 0 !important;
        background: rgba(12, 10, 15, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
    }
}

/* --- SINGLE FORGE LAYOUT RESPONSIVE FIX --- */
.single-forge-layout {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 2.5rem;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .single-forge-layout {
        flex-direction: column !important;
        align-items: center !important;
        gap: 2rem !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 1rem !important;
        overflow: visible !important;
    }
    
    .single-forge-layout .rune-column {
        display: flex !important;
        position: relative !important;
        width: 100% !important;
        max-width: 280px !important;
        min-height: auto !important;
        height: auto !important;
        order: 1 !important;
        padding: 1rem 0 !important;
    }
    
    .single-forge-layout .deck-column {
        display: flex !important;
        position: relative !important;
        width: 100% !important;
        max-width: 340px !important;
        order: 2 !important;
        align-items: center !important;
        gap: 1.5rem !important;
    }
    
    .single-forge-layout .details-column {
        display: flex !important;
        position: relative !important;
        inset: auto !important;
        z-index: 10 !important;
        width: 100% !important;
        max-width: 440px !important;
        height: auto !important;
        border-radius: 12px !important;
        border: 1px solid rgba(191, 149, 63, 0.3) !important;
        background: rgba(12, 10, 15, 0.85) !important;
        backdrop-filter: blur(12px) !important;
        transform: none !important;
        order: 3 !important;
        padding: 1.5rem !important;
    }
}

/* Force SingleCardForge background to fill full viewport height - COMMENTED OUT due to breaking nested map view layout when DevToolsModal is closed */
/*
div#root:nth-of-type(1) > div#app-shell-container:nth-of-type(1) > div#app-body:nth-of-type(2) > main:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1),
div#root:nth-of-type(1) > div#app-shell-container:nth-of-type(1) > div#app-body:nth-of-type(1) > main:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    height: auto !important;
    flex-grow: 1 !important;
    background-color: #0c0a0f !important;
}
*/