/* ============================================
   Solo Leveling Roleplay - Main Styles
   ============================================ */

/* Import Thai Fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&family=Sarabun:wght@100;300;400;500;600;700&display=swap');

/* CSS Variables - Solo Leveling Theme */
:root {
  /* Backgrounds */
  --bg-primary: #0a0e1a;
  --bg-secondary: rgba(26, 31, 46, 0.95);
  --bg-tertiary: #1a1f2e;
  --bg-panel: rgba(26, 31, 46, 0.9);
  
  /* Accents */
  --accent-primary: #4dd4ff;
  --accent-secondary: #2196f3;
  --accent-gold: #ffd700;
  --accent-danger: #ff4655;
  
  /* Borders */
  --border-primary: #3d5a80;
  --border-glow: var(--accent-alpha-50);
  
  /* Status Colors - Fixed semantic colors that don't change with themes */
  --hp-color: #ff4655;
  --mp-color: #4dd4ff;
  --stamina-color: #4ade80;
  --success-color: #4dff4d;
  --accent-dark: #00aaaa;
  
  /* Semantic Status Indicators - Fixed colors for meaningful status */
  --status-info: #4dd4ff;        /* Blue for connecting/syncing */
  --status-success: #4dff4d;     /* Green for success */
  --status-error: #ff4655;       /* Red for errors */
  --status-warning: #fbbf24;     /* Yellow for warnings */
  --status-offline: #888888;     /* Gray for offline */
  
  /* Text */
  --text-primary: #ffffff;
  --text-secondary: #b0b8c4;
  --text-muted: #6b7280;
  
  /* Rarity Colors */
  --rarity-common: #9e9e9e;
  --rarity-uncommon: #4ade80;
  --rarity-rare: #3b82f6;
  --rarity-epic: #a855f7;
  --rarity-legendary: #f59e0b;
  --rarity-mythic: #ef4444;
  
  /* Effects */
  --glow-sm: 0 0 10px var(--accent-primary);
  --glow-md: 0 0 20px var(--accent-primary);
  --glow-lg: 0 0 30px var(--accent-primary);
  --shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.4);
  
  /* Accent Color with Opacity - for backgrounds, borders, shadows */
  --accent-alpha-5: color-mix(in srgb, var(--accent-primary) 5%, transparent);
  --accent-alpha-10: color-mix(in srgb, var(--accent-primary) 10%, transparent);
  --accent-alpha-15: color-mix(in srgb, var(--accent-primary) 15%, transparent);
  --accent-alpha-20: color-mix(in srgb, var(--accent-primary) 20%, transparent);
  --accent-alpha-30: color-mix(in srgb, var(--accent-primary) 30%, transparent);
  --accent-alpha-40: color-mix(in srgb, var(--accent-primary) 40%, transparent);
  --accent-alpha-50: color-mix(in srgb, var(--accent-primary) 50%, transparent);
  
  /* Secondary Accent with Opacity */
  --accent-secondary-alpha-30: color-mix(in srgb, var(--accent-secondary) 30%, transparent);
  --accent-secondary-alpha-35: color-mix(in srgb, var(--accent-secondary) 35%, transparent);
  --accent-secondary-alpha-45: color-mix(in srgb, var(--accent-secondary) 45%, transparent);
}

/* ============================================
   COLOR THEMES
   ============================================ */

/* Shadow Monarch (Default Blue) */
:root[data-color-theme="shadow-monarch"] {
  --accent-primary: #4dd4ff;
  --accent-secondary: #2196f3;
  --accent-gold: #ffd700;
  --accent-danger: #ff4655;
  --border-primary: #3d5a80;
  --border-glow: var(--accent-alpha-50);
  --hp-color: #ff4655;
  --mp-color: #4dd4ff;
  --stamina-color: #4ade80;
  --success-color: #4dff4d;
  --accent-dark: #00aaaa;
}

/* Blood Red Theme */
:root[data-color-theme="blood-red"] {
  --accent-primary: #ff4655;
  --accent-secondary: #dc2626;
  --accent-gold: #ffd700;
  --accent-danger: #ff1744;
  --border-primary: #7f1d1d;
  --border-glow: rgba(255, 70, 85, 0.5);
  --hp-color: #ff1744;
  --mp-color: #ff6b6b;
  --stamina-color: #fca5a5;
  --success-color: #ff4655;
  --accent-dark: #991b1b;
}

/* Shadow Purple Theme */
:root[data-color-theme="shadow-purple"] {
  --accent-primary: #a855f7;
  --accent-secondary: #9333ea;
  --accent-gold: #fbbf24;
  --accent-danger: #e879f9;
  --border-primary: #6b21a8;
  --border-glow: rgba(168, 85, 247, 0.5);
  --hp-color: #e879f9;
  --mp-color: #c084fc;
  --stamina-color: #d8b4fe;
  --success-color: #a855f7;
  --accent-dark: #581c87;
}

/* Golden Hunter Theme */
:root[data-color-theme="golden-hunter"] {
  --accent-primary: #fbbf24;
  --accent-secondary: #f59e0b;
  --accent-gold: #fcd34d;
  --accent-danger: #fb923c;
  --border-primary: #92400e;
  --border-glow: rgba(251, 191, 36, 0.5);
  --hp-color: #fb923c;
  --mp-color: #fbbf24;
  --stamina-color: #fde047;
  --success-color: #facc15;
  --accent-dark: #78350f;
}

/* Emerald Theme */
:root[data-color-theme="emerald"] {
  --accent-primary: #10b981;
  --accent-secondary: #059669;
  --accent-gold: #fbbf24;
  --accent-danger: #ef4444;
  --border-primary: #065f46;
  --border-glow: rgba(16, 185, 129, 0.5);
  --hp-color: #f87171;
  --mp-color: #34d399;
  --stamina-color: #6ee7b7;
  --success-color: #10b981;
  --accent-dark: #064e3b;
}

/* Moonlight Theme */
:root[data-color-theme="moonlight"] {
  --accent-primary: #e0e7ff;
  --accent-secondary: #a5b4fc;
  --accent-gold: #fde68a;
  --accent-danger: #fca5a5;
  --border-primary: #4c4f69;
  --border-glow: rgba(224, 231, 255, 0.5);
  --hp-color: #fca5a5;
  --mp-color: #c7d2fe;
  --stamina-color: #ddd6fe;
  --success-color: #e0e7ff;
  --accent-dark: #6c7086;
}

/* Theme Intensity Modes */
:root[data-theme="light"] {
  --bg-primary: #1a1f2e;
  --bg-secondary: rgba(26, 31, 46, 0.8);
  --bg-tertiary: #232a3a;
  --bg-panel: rgba(26, 31, 46, 0.7);
  --border-primary: #4d6a99;
  --text-secondary: #c0c8d4;
}

:root[data-theme="dark"] {
  --bg-primary: #050709;
  --bg-secondary: rgba(10, 14, 26, 0.98);
  --bg-tertiary: #0f1420;
  --bg-panel: rgba(10, 14, 26, 0.95);
  --border-primary: #2d3a60;
  --text-secondary: #909aaa;
}

/* Reset & Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

body {
  font-family: 'Sarabun', 'Noto Sans Thai', 'Segoe UI', -apple-system, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.7;
  overflow-x: hidden;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Prevent layout shift when scrollbar appears/disappears */
  scrollbar-gutter: stable;
}

/* ============================================
   Logo Styling
   ============================================ */

.logo {
  display: flex;
  align-items: center;
  -webkit-user-select: none; /* Safari 3+ */
  user-select: none;
  white-space: nowrap;
}

.logo-text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Segoe UI', -apple-system, sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  position: relative;
  white-space: nowrap;
}

.logo-solo {
  font-size: 1.5rem;
  background: linear-gradient(135deg, #ffffff 0%, var(--accent-primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px var(--border-glow);
  /* GPU Optimization: Use text-shadow instead of animated filter drop-shadow */
  /* Filter animations are GPU-intensive, text-shadow is more efficient */
  animation: subtlePulse 3s ease-in-out infinite;
  white-space: nowrap;
}

.logo-gemini {
  font-size: 1.5rem;
  background: linear-gradient(90deg, 
    var(--accent-secondary) 0%,
    var(--accent-primary) 25%,
    var(--accent-secondary) 50%,
    var(--accent-primary) 75%,
    var(--accent-secondary) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* GPU Optimization: Use text-shadow instead of filter drop-shadow for better performance */
  text-shadow: 0 0 20px var(--border-glow);
  position: relative;
  animation: shimmer 6s linear infinite;
  white-space: nowrap;
}

.logo-gemini::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
  opacity: 0.6;
}

@keyframes subtlePulse {
  0%, 100% {
    /* GPU Optimization: Animate text-shadow instead of filter for better performance */
    text-shadow: 0 0 20px var(--border-glow);
  }
  50% {
    text-shadow: 0 0 30px var(--border-glow);
  }
}

@keyframes shimmer {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--border-primary);
  border-radius: 5px;
  transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary);
  box-shadow: 0 0 10px var(--accent-primary);
}

/* Firefox Scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-primary) var(--bg-primary);
}

/* Background Animation */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 50%, var(--accent-alpha-5) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, var(--accent-alpha-5) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

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

.glow-text {
  color: var(--accent-primary);
  text-shadow: var(--glow-md);
  font-weight: bold;
}

.glow-border {
  border: 2px solid var(--accent-primary);
  box-shadow: var(--glow-md);
}

/* ============================================
   Modal Styles
   ============================================ */

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  /* GPU Optimization: Only apply backdrop-filter when modal is active */
  backdrop-filter: none;
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.modal.active {
  display: flex;
  /* GPU Optimization: Apply backdrop-filter only when modal is visible */
  /* Note: backdrop-filter is GPU-intensive - only enable when needed */
  backdrop-filter: blur(10px);
  /* Fallback: Use stronger background opacity if backdrop-filter not supported */
  background: rgba(0, 0, 0, 0.85);
}

.modal-content {
  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  border-radius: 12px;
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: var(--shadow-panel);
  position: relative;
  animation: modal-appear 0.3s ease-out;
  box-sizing: border-box;
}

.modal-large {
  max-width: 700px;
  box-sizing: border-box;
}

/* Admin Panel Modal */
.admin-panel-modal {
  max-width: 1000px;
  max-height: 90vh;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Modal Loading Overlay */
.modal-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(5px);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  z-index: 1000;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.modal-loading-overlay.hidden {
  opacity: 0;
  pointer-events: none;
  /* GPU Optimization: Disable backdrop-filter when hidden */
  backdrop-filter: none;
}

.modal-loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid var(--accent-alpha-20);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.modal-loading-text {
  color: var(--accent-primary);
  font-size: 1rem;
  font-weight: 500;
  text-shadow: 0 0 10px var(--accent-alpha-50);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--border-primary);
}

.modal-header h2 {
  color: var(--accent-primary);
  text-shadow: var(--glow-sm);
  font-size: 1.5rem;
  margin: 0;
}

.modal-close {
  background: transparent;
  border: 2px solid var(--border-primary);
  color: var(--text-primary);
  font-size: 2rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}

.modal-close:hover {
  border-color: var(--accent-danger);
  color: var(--accent-danger);
  box-shadow: 0 0 10px var(--accent-danger);
  transform: rotate(90deg);
}

.modal-body {
  color: var(--text-secondary);
}

/* Modal Button Styles */
.modal-btn {
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.modal-btn.primary {
  background: linear-gradient(135deg, var(--accent-primary) 0%, color-mix(in srgb, var(--accent-primary) 80%, transparent) 100%);
  color: var(--bg-primary);
  border-color: var(--accent-primary);
}

.modal-btn.primary:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-primary) 90%, transparent) 0%, var(--accent-primary) 100%);
  box-shadow: 0 0 20px var(--accent-alpha-50);
  transform: translateY(-2px);
}

.modal-btn.primary:active {
  transform: translateY(0);
}

.modal-btn.secondary {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.2);
}

.modal-btn.secondary:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.modal-btn.secondary:active {
  transform: translateY(0);
}

.modal-btn.danger {
  background: linear-gradient(135deg, rgba(255, 70, 85, 0.2) 0%, rgba(255, 70, 85, 0.1) 100%);
  color: var(--hp-color);
  border-color: var(--hp-color);
}

.modal-btn.danger:hover {
  background: linear-gradient(135deg, rgba(255, 70, 85, 0.3) 0%, rgba(255, 70, 85, 0.2) 100%);
  box-shadow: 0 0 20px rgba(255, 70, 85, 0.4);
  transform: translateY(-2px);
}

.modal-btn.danger:active {
  transform: translateY(0);
}

@keyframes modal-appear {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Modal Content Styles */
.info-item {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  margin-bottom: 0.5rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
}

.info-item label {
  color: var(--text-secondary);
  font-weight: 600;
  min-width: 100px;
}

.info-item .info-value {
  color: var(--text-primary);
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-align: right;
  flex: 1;
  margin-left: 1rem;
}

/* Equipment Grid */
.equipment-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

/* Center empty text in equipment grid */
.equipment-grid .empty-text {
  grid-column: 1 / -1;
  text-align: center;
}

/* Equipment Display */
.equipment-slot {
  background: linear-gradient(135deg, var(--bg-tertiary) 0%, rgba(26, 31, 46, 0.95) 100%);
  border: 2px solid var(--border-primary);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  min-height: 200px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.equipment-slot::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
  border-radius: 12px 12px 0 0;
  box-sizing: border-box;
}

.equipment-slot:hover {
  border-color: var(--accent-primary);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px var(--accent-alpha-20);
}

.equipment-slot:hover::before {
  opacity: 1;
}

/* Legendary equipment hover - override with yellow */
.equipment-slot.legendary-item::before {
  background: linear-gradient(90deg, #ffaa00, #ffcc00);
  border-radius: 12px 12px 0 0;
}

.equipment-slot.legendary-item:hover {
  border-color: #ffcc00;
  box-shadow: 0 8px 24px rgba(255, 170, 0, 0.25);
}

.equipment-slot.legendary-item:hover::before {
  opacity: 1;
  background: linear-gradient(90deg, #ffaa00, #ffcc00);
}

@media (hover: none) {
  .equipment-slot:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}

.equipment-slot.empty {
  opacity: 0.5;
}

/* Legendary Item Effects */
.equipment-slot.legendary-item {
  background: linear-gradient(135deg, rgba(255, 170, 0, 0.05) 0%, rgba(255, 120, 0, 0.05) 100%);
  border: 2px solid #ffaa00;
  box-shadow: 
    0 0 10px rgba(255, 170, 0, 0.2),
    0 0 20px rgba(255, 170, 0, 0.1),
    inset 0 0 20px rgba(255, 170, 0, 0.03);
  animation: legendaryPulse 3s ease-in-out infinite;
}

.equipment-slot.legendary-item:hover {
  border-color: #ffcc00;
  transform: translateY(-4px);
  box-shadow: 
    0 8px 24px rgba(255, 170, 0, 0.25),
    0 0 15px rgba(255, 170, 0, 0.3),
    0 0 30px rgba(255, 170, 0, 0.15),
    inset 0 0 25px rgba(255, 170, 0, 0.05);
}

.legendary-glow {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 8px;
  background: linear-gradient(45deg, #ffaa00, #ff7700, #ffaa00, #ff7700);
  background-size: 400% 400%;
  opacity: 0.15;
  filter: blur(8px);
  animation: legendaryGlowAnimation 4s ease infinite;
  z-index: -1;
  pointer-events: none;
}

.legendary-name {
  background: linear-gradient(90deg, #ffaa00, #ffcc00, #ffaa00);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: legendaryTextShine 3s linear infinite;
  text-shadow: 
    0 0 5px rgba(255, 170, 0, 0.3),
    0 0 10px rgba(255, 170, 0, 0.15);
}

@keyframes legendaryPulse {
  0%, 100% {
    box-shadow: 
      0 0 10px rgba(255, 170, 0, 0.2),
      0 0 20px rgba(255, 170, 0, 0.1),
      inset 0 0 20px rgba(255, 170, 0, 0.03);
  }
  50% {
    box-shadow: 
      0 0 15px rgba(255, 170, 0, 0.3),
      0 0 30px rgba(255, 170, 0, 0.15),
      inset 0 0 25px rgba(255, 170, 0, 0.05);
  }
}

@keyframes legendaryGlowAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes legendaryTextShine {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}

.equipment-slot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid var(--accent-alpha-10);
  border-radius: 4px 4px 0 0;
  padding: 0.75rem 1rem;
  margin: -1.5rem -1.5rem 0.75rem -1.5rem;
  position: relative;
}

.equipment-slot-name {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.equipment-item-name {
  color: var(--accent-primary);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  text-shadow: 0 0 10px var(--accent-alpha-30);
  line-height: 1.3;
  position: relative;
}

.equipment-image-preview {
  margin: 1rem auto;
  padding: 0.75rem;
  background: linear-gradient(135deg, rgba(26, 31, 46, 0.9), rgba(20, 30, 48, 0.9));
  border: 2px solid var(--accent-alpha-30);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 250px;
  height: auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  box-shadow: inset 0 0 20px var(--accent-alpha-10), 0 0 15px var(--accent-alpha-20);
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.equipment-image-preview:hover {
  border-color: var(--accent-primary);
  box-shadow: inset 0 0 20px var(--accent-alpha-20), 0 0 25px rgba(77, 212, 255, 0.4);
  transform: translateY(-4px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.equipment-image-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.equipment-image-spinner .loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(77, 212, 255, 0.2);
  border-top: 3px solid var(--accent-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.equipment-image-preview img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 6px;
  object-fit: contain;
  transition: transform 0.3s ease, filter 0.3s ease;
  display: block;
  pointer-events: none;
}

.equipment-image-preview:hover img {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.equipment-rank {
  display: inline-block;
  padding: 0;
  margin-left: auto;
  font-size: 2.5rem;
  font-weight: 900;
  font-family: Impact, 'Arial Black', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1;
}

/* Disable glowing effects for equipment-rank in progression modal items */
.progressionContent .equipment-rank,
#progressionModal .equipment-rank {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)) !important;
  animation: none !important;
}

/* GPU Optimization: Pause rank badge animations when hidden or not in viewport */
.equipment-rank[style*="display: none"],
.equipment-rank[style*="display:none"],
.hidden .equipment-rank,
[style*="display: none"] .equipment-rank,
[style*="display:none"] .equipment-rank,
.equipment-rank:not(.animation-active) {
  animation-play-state: paused !important;
}

/* GPU Optimization: Pause animations for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .rank-a,
  .rank-s,
  .rank-ss,
  .rank-epic,
  .rank-legendary,
  .rank-mythic,
  .logo-solo,
  .logo-gemini {
    animation-play-state: paused !important;
  }
}

/* GPU Optimization: Pause logo animations when tab is hidden (browser optimization) */
@media (prefers-reduced-motion: no-preference) {
  /* Logo animations can be paused when not focused to save GPU */
  /* This will be handled by IntersectionObserver for viewport visibility */
}

/* Rank E - Common Gray */
.rank-e { 
  background: linear-gradient(135deg, #94a3b8, #64748b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

/* Rank D - Common Gray */
.rank-d { 
  background: linear-gradient(135deg, #a8b5c6, #78849a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

/* Rank C - Uncommon Green */
.rank-c { 
  background: linear-gradient(135deg, #86efac, #4ade80, #22c55e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.6)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

/* Rank B - Rare Blue */
.rank-b { 
  background: linear-gradient(135deg, #93c5fd, #60a5fa, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.8)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* Rank A - Epic Purple */
.rank-a { 
  background: linear-gradient(135deg, #e9d5ff, #c084fc, #a855f7, #9333ea);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 15px rgba(168, 85, 247, 1)) 
          drop-shadow(0 0 25px rgba(168, 85, 247, 0.6)) 
          drop-shadow(0 2px 5px rgba(0, 0, 0, 0.6));
  animation: rank-epic-pulse 2s ease-in-out infinite, rank-gradient-shift 3s ease infinite;
  position: relative;
}

/* Rank S - Legendary Gold */
.rank-s { 
  background: linear-gradient(135deg, #fff7b0, #fef08a, #fbbf24, #f59e0b, #eab308, #ca8a04);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 20px rgba(251, 191, 36, 1)) 
          drop-shadow(0 0 35px rgba(251, 191, 36, 0.8)) 
          drop-shadow(0 0 50px rgba(251, 191, 36, 0.4))
          drop-shadow(0 3px 6px rgba(0, 0, 0, 0.8));
  animation: rank-legendary-glow 1.5s ease-in-out infinite, 
             rank-gradient-shift 4s ease infinite,
             rank-legendary-float 3s ease-in-out infinite;
  position: relative;
}

/* Rank SS - Mythic Red */
.rank-ss { 
  background: linear-gradient(135deg, #fef2f2, #fecaca, #ff6b7a, #ff4655, #ef4444, #dc2626);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 25px rgba(255, 70, 85, 1)) 
          drop-shadow(0 0 40px rgba(255, 70, 85, 1)) 
          drop-shadow(0 0 60px rgba(255, 70, 85, 0.6))
          drop-shadow(0 0 80px rgba(255, 70, 85, 0.3))
          drop-shadow(0 4px 10px rgba(0, 0, 0, 0.9));
  animation: rank-mythic-pulse 1.2s ease-in-out infinite, 
             rank-gradient-shift 3s ease infinite,
             rank-mythic-shake 0.5s ease-in-out infinite,
             rank-mythic-float 2.5s ease-in-out infinite;
  position: relative;
}

/* Word-based ranks */
.rank-common { 
  background: linear-gradient(135deg, #94a3b8, #64748b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

.rank-uncommon { 
  background: linear-gradient(135deg, #86efac, #4ade80, #22c55e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.6)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.rank-rare { 
  background: linear-gradient(135deg, #93c5fd, #60a5fa, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.8)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.rank-epic { 
  background: linear-gradient(135deg, #e9d5ff, #c084fc, #a855f7, #9333ea);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 15px rgba(168, 85, 247, 1)) 
          drop-shadow(0 0 25px rgba(168, 85, 247, 0.6)) 
          drop-shadow(0 2px 5px rgba(0, 0, 0, 0.6));
  animation: rank-epic-pulse 2s ease-in-out infinite, rank-gradient-shift 3s ease infinite;
  position: relative;
}

.rank-legendary { 
  background: linear-gradient(135deg, #fff7b0, #fef08a, #fbbf24, #f59e0b, #eab308, #ca8a04);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.8)) 
          drop-shadow(0 0 15px rgba(251, 191, 36, 0.5)) 
          drop-shadow(0 0 25px rgba(251, 191, 36, 0.3))
          drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
  animation: rank-legendary-glow 1.5s ease-in-out infinite, 
             rank-gradient-shift 4s ease infinite,
             rank-legendary-float 3s ease-in-out infinite;
  position: relative;
}

.rank-mythic { 
  background: linear-gradient(135deg, #fef2f2, #fecaca, #ff6b7a, #ff4655, #ef4444, #dc2626);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 25px rgba(255, 70, 85, 1)) 
          drop-shadow(0 0 40px rgba(255, 70, 85, 1)) 
          drop-shadow(0 0 60px rgba(255, 70, 85, 0.6))
          drop-shadow(0 0 80px rgba(255, 70, 85, 0.3))
          drop-shadow(0 4px 10px rgba(0, 0, 0, 0.9));
  animation: rank-mythic-pulse 1.2s ease-in-out infinite, 
             rank-gradient-shift 3s ease infinite,
             rank-mythic-shake 0.5s ease-in-out infinite,
             rank-mythic-float 2.5s ease-in-out infinite;
  position: relative;
}

/* Rank Animations */
@keyframes rank-epic-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 15px rgba(168, 85, 247, 1)) 
            drop-shadow(0 0 25px rgba(168, 85, 247, 0.6)) 
            drop-shadow(0 2px 5px rgba(0, 0, 0, 0.6));
  }
  50% {
    filter: drop-shadow(0 0 25px rgba(168, 85, 247, 1)) 
            drop-shadow(0 0 40px rgba(168, 85, 247, 0.8))
            drop-shadow(0 0 55px rgba(168, 85, 247, 0.4))
            drop-shadow(0 2px 5px rgba(0, 0, 0, 0.6));
  }
}

@keyframes rank-legendary-glow {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.8)) 
            drop-shadow(0 0 15px rgba(251, 191, 36, 0.5)) 
            drop-shadow(0 0 25px rgba(251, 191, 36, 0.3))
            drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
  }
  25% {
    filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.9)) 
            drop-shadow(0 0 20px rgba(251, 191, 36, 0.6)) 
            drop-shadow(0 0 30px rgba(251, 191, 36, 0.4))
            drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
  }
  50% {
    filter: drop-shadow(0 0 15px rgba(251, 191, 36, 1)) 
            drop-shadow(0 0 25px rgba(251, 191, 36, 0.7)) 
            drop-shadow(0 0 35px rgba(251, 191, 36, 0.5))
            drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
  }
  75% {
    filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.9)) 
            drop-shadow(0 0 20px rgba(251, 191, 36, 0.6)) 
            drop-shadow(0 0 30px rgba(251, 191, 36, 0.4))
            drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
  }
}

@keyframes rank-mythic-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 25px rgba(255, 70, 85, 1)) 
            drop-shadow(0 0 40px rgba(255, 70, 85, 1)) 
            drop-shadow(0 0 60px rgba(255, 70, 85, 0.6))
            drop-shadow(0 0 80px rgba(255, 70, 85, 0.3))
            drop-shadow(0 4px 10px rgba(0, 0, 0, 0.9));
    transform: scale(1);
  }
  25% {
    filter: drop-shadow(0 0 35px rgba(255, 70, 85, 1)) 
            drop-shadow(0 0 55px rgba(255, 70, 85, 1)) 
            drop-shadow(0 0 80px rgba(255, 70, 85, 0.8))
            drop-shadow(0 0 110px rgba(255, 70, 85, 0.5))
            drop-shadow(0 0 140px rgba(255, 70, 85, 0.3))
            drop-shadow(0 4px 10px rgba(0, 0, 0, 0.9));
    transform: scale(1.08);
  }
  50% {
    filter: drop-shadow(0 0 45px rgba(255, 70, 85, 1)) 
            drop-shadow(0 0 70px rgba(255, 70, 85, 1)) 
            drop-shadow(0 0 100px rgba(255, 70, 85, 0.9))
            drop-shadow(0 0 130px rgba(255, 70, 85, 0.6))
            drop-shadow(0 0 160px rgba(255, 70, 85, 0.4))
            drop-shadow(0 4px 10px rgba(0, 0, 0, 0.9));
    transform: scale(1.12);
  }
  75% {
    filter: drop-shadow(0 0 35px rgba(255, 70, 85, 1)) 
            drop-shadow(0 0 55px rgba(255, 70, 85, 1)) 
            drop-shadow(0 0 80px rgba(255, 70, 85, 0.8))
            drop-shadow(0 0 110px rgba(255, 70, 85, 0.5))
            drop-shadow(0 0 140px rgba(255, 70, 85, 0.3))
            drop-shadow(0 4px 10px rgba(0, 0, 0, 0.9));
    transform: scale(1.08);
  }
}

@keyframes rank-gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes rank-legendary-float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes rank-mythic-float {
  0%, 100% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-5px) scale(1.12);
  }
}

@keyframes rank-mythic-shake {
  0%, 100% {
    transform: translateX(0) rotate(0deg);
  }
  25% {
    transform: translateX(-1px) rotate(-0.5deg);
  }
  75% {
    transform: translateX(1px) rotate(0.5deg);
  }
}

.equipment-stats {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0.75rem 0;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--accent-alpha-10);
  border-radius: 8px;
}

.equipment-stat {
  color: var(--accent-primary);
  font-size: 0.9rem;
  font-weight: 600;
}

.equipment-stat span {
  text-shadow: var(--glow-sm);
}

.equipment-description {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-top: 0.75rem;
  padding: 0.75rem;
  border-top: 1px solid var(--accent-alpha-10);
  line-height: 1.6;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 6px;
}

/* Settings Modal */
.settings-section {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-primary);
}

.settings-section:last-child {
  border-bottom: none;
}

.settings-section h3 {
  color: var(--accent-primary);
  font-size: 1.1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.settings-description {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

/* Settings Group */
.settings-group {
  margin-bottom: 1.25rem;
}

/* Performance Mode Warning Box - Uses theme colors */
.performance-mode-group {
  background: var(--accent-alpha-10);
  padding: 1rem;
  border-radius: 8px;
  border-left: 4px solid var(--accent-primary);
  box-shadow: inset 0 0 20px var(--accent-alpha-5);
  transition: all 0.3s ease;
}

.performance-mode-group:hover {
  background: var(--accent-alpha-15);
  border-left-color: var(--accent-primary);
  box-shadow: 
    inset 0 0 25px var(--accent-alpha-10),
    0 0 15px var(--accent-alpha-20);
}

.performance-mode-label {
  font-weight: bold;
  color: var(--accent-primary);
  text-shadow: 0 0 10px var(--border-glow);
  font-size: 1rem;
}

.performance-mode-help {
  display: block;
  margin-top: 0.5rem;
  color: var(--text-secondary);
}

.settings-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--text-primary);
}

.settings-value {
  color: var(--accent-primary);
  font-weight: bold;
  font-size: 0.9rem;
}

/* Slider */
.settings-slider {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--bg-tertiary) 0%, var(--accent-alpha-10) 100%);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  margin: 0.5rem 0;
}

.settings-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-dark));
  cursor: pointer;
  box-shadow: 0 0 10px var(--accent-alpha-50);
  border: 2px solid var(--border-primary);
  transition: all 0.2s ease;
}

.settings-slider::-webkit-slider-thumb:hover {
  box-shadow: 0 0 15px color-mix(in srgb, var(--accent-primary) 80%, transparent);
  transform: scale(1.15);
}

.settings-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-dark));
  cursor: pointer;
  box-shadow: 0 0 10px var(--accent-alpha-50);
  border: 2px solid var(--border-primary);
  transition: all 0.2s ease;
}

/* Checkbox */
.settings-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-weight: 500;
  color: var(--text-primary);
  transition: all 0.2s ease;
}

.settings-checkbox-label:hover {
  color: var(--accent-primary);
}

.settings-checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--accent-primary);
}

/* Radio Button Group */
.settings-radio-group {
  display: flex;
  gap: 1.5rem;
  margin: 0.75rem 0;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

.radio-label:hover {
  color: var(--accent-primary);
}

.theme-radio {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent-primary);
}

/* Settings Form */
.settings-form {
  background: var(--bg-tertiary);
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid var(--border-primary);
  margin-bottom: 1rem;
}

.settings-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--text-primary);
}

.settings-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--bg-primary);
  border: 2px solid var(--border-primary);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 0.95rem;
  transition: all 0.2s ease;
  margin-bottom: 0.5rem;
}

.settings-input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 10px var(--accent-alpha-30);
}

.settings-select {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--bg-primary);
  border: 2px solid var(--border-primary);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 0.95rem;
  transition: all 0.2s ease;
  margin-bottom: 0.5rem;
  cursor: pointer;
}

.settings-select:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 10px var(--accent-alpha-30);
}

.settings-select option {
  background: var(--bg-primary);
  color: var(--text-primary);
}

/* Custom Theme Dropdown */
.custom-dropdown {
  position: relative;
  width: 100%;
  -webkit-user-select: none; /* Safari 3+ */
  user-select: none;
}

.dropdown-selected {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--bg-primary);
  border: 2px solid var(--border-primary);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dropdown-selected:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 0 10px var(--accent-alpha-30);
}

.dropdown-arrow {
  color: var(--accent-primary);
  transition: transform 0.3s ease;
}

.custom-dropdown.active .dropdown-arrow {
  transform: rotate(180deg);
}

.dropdown-options {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  background: #1a1f2e;
  /* GPU Optimization: Only apply backdrop-filter when dropdown is active */
  backdrop-filter: none;
  border: 2px solid var(--border-primary);
  border-radius: 6px;
  box-shadow: var(--shadow-panel);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 100;
}

.custom-dropdown.active .dropdown-options {
  max-height: 300px;
  opacity: 1;
  overflow-y: auto;
  /* GPU Optimization: Apply backdrop-filter only when dropdown is visible */
  backdrop-filter: blur(10px);
}

.dropdown-option {
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 1px solid rgba(61, 90, 128, 0.3);
  font-weight: 700;
  font-size: 0.95rem;
}

.dropdown-option:last-child {
  border-bottom: none;
}

.dropdown-option:hover {
  background: rgba(0, 0, 0, 0.4);
  padding-left: 1.25rem;
  transform: translateX(2px);
}

.dropdown-option.active {
  background: rgba(0, 0, 0, 0.5);
  position: relative;
  padding-left: 2rem;
}

.dropdown-option.active::before {
  content: '✓';
  position: absolute;
  left: 0.75rem;
  color: var(--accent-primary);
  font-weight: bold;
}

/* Theme-specific colors */
.theme-name[data-theme="shadow-monarch"],
.dropdown-option[data-theme="shadow-monarch"] {
  color: #4dd4ff;
  text-shadow: 0 0 15px rgba(77, 212, 255, 0.6), 0 2px 4px rgba(0, 0, 0, 0.8);
}

.theme-name[data-theme="blood-red"],
.dropdown-option[data-theme="blood-red"] {
  color: #ff4655;
  text-shadow: 0 0 15px rgba(255, 70, 85, 0.6), 0 2px 4px rgba(0, 0, 0, 0.8);
}

.theme-name[data-theme="shadow-purple"],
.dropdown-option[data-theme="shadow-purple"] {
  color: #a855f7;
  text-shadow: 0 0 15px rgba(168, 85, 247, 0.6), 0 2px 4px rgba(0, 0, 0, 0.8);
}

.theme-name[data-theme="golden-hunter"],
.dropdown-option[data-theme="golden-hunter"] {
  color: #fbbf24;
  text-shadow: 0 0 15px rgba(251, 191, 36, 0.6), 0 2px 4px rgba(0, 0, 0, 0.8);
}

.theme-name[data-theme="emerald"],
.dropdown-option[data-theme="emerald"] {
  color: #10b981;
  text-shadow: 0 0 15px rgba(16, 185, 129, 0.6), 0 2px 4px rgba(0, 0, 0, 0.8);
}

.theme-name[data-theme="moonlight"],
.dropdown-option[data-theme="moonlight"] {
  color: #e0e7ff;
  text-shadow: 0 0 15px rgba(224, 231, 255, 0.6), 0 2px 4px rgba(0, 0, 0, 0.8);
}

.settings-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--bg-primary);
  border: 2px solid var(--border-primary);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 0.95rem;
  transition: all 0.2s ease;
  margin-bottom: 0.5rem;
  font-family: inherit;
  resize: vertical;
  min-height: 80px;
}

.settings-textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 10px var(--accent-alpha-30);
}

.settings-help {
  display: block;
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

.settings-help a {
  color: var(--accent-primary);
  text-decoration: none;
  transition: all 0.2s ease;
}

.settings-help a:hover {
  text-decoration: underline;
  color: var(--accent-dark);
}

/* Settings Actions */
.settings-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: nowrap;
  margin-top: 1rem;
  overflow-x: auto;
}

.settings-actions button {
  flex: 1;
  min-width: 100px;
  white-space: nowrap;
}

/* Settings Status */
.settings-status {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  text-align: center;
  display: none;
}

.settings-status.success {
  display: block;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #22c55e;
}

.settings-status.error {
  display: block;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.settings-status.info {
  display: block;
  background: var(--accent-alpha-10);
  border: 1px solid var(--accent-alpha-30);
  color: var(--accent-primary);
}

/* Settings Info */
.settings-info {
  background: var(--bg-tertiary);
  padding: 1rem;
  border-radius: 8px;
  border-left: 4px solid var(--accent-primary);
}

.settings-info p {
  margin: 0.5rem 0;
  color: var(--text-secondary);
}

.settings-info strong {
  color: var(--accent-primary);
}

/* Danger Button */
.btn-danger {
  background: rgba(239, 68, 68, 0.1);
  border: 2px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  transition: all 0.2s ease;
}

.btn-danger:hover:not(:disabled) {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.2);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}

/* Image Generation Modal */
.equipment-modal .modal-content {
  max-height: 90vh;
  height: auto;
}

.equipment-modal .modal-body {
  max-height: calc(90vh - 100px);
  overflow-y: auto;
  scroll-behavior: smooth;
}

/* Custom scrollbar for equipment modal */
.equipment-modal .modal-body::-webkit-scrollbar {
  width: 8px;
}

.equipment-modal .modal-body::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
  border-radius: 4px;
}

.equipment-modal .modal-body::-webkit-scrollbar-thumb {
  background: var(--accent-alpha-30);
  border-radius: 4px;
}

.equipment-modal .modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary);
}

.image-gen-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

.image-gen-form {
  display: flex;
  flex-direction: column;
}

/* Equipment Modal Redesign */
.equipment-modal-header {
  background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
  border-bottom: 2px solid var(--accent-primary);
  padding: 1.25rem 1.5rem;
}

.equipment-modal-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.equipment-modal-title svg {
  color: var(--accent-primary);
  filter: drop-shadow(0 0 8px rgba(77, 212, 255, 0.4));
}

.equipment-modal-title h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  text-shadow: 0 0 10px rgba(77, 212, 255, 0.3);
}

.equipment-modal-subtitle {
  margin: 0.25rem 0 0 0;
  font-size: 0.9rem;
  color: var(--accent-primary);
  font-weight: 500;
}

.equipment-modal-body {
  padding: 1.5rem;
}

/* Modern Tabs */
.modern-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 0.375rem;
  background: rgba(26, 31, 46, 0.6);
  border: 1px solid var(--accent-alpha-20);
  border-radius: 10px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}

.modern-tabs .method-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  white-space: nowrap;
}

.modern-tabs .method-tab svg {
  transition: all 0.25s ease;
  opacity: 0.7;
}

.modern-tabs .method-tab:hover:not(.active) {
  color: var(--text-primary);
  background: rgba(77, 212, 255, 0.08);
}

.modern-tabs .method-tab:hover:not(.active) svg {
  opacity: 1;
}

.modern-tabs .method-tab.active {
  background: linear-gradient(135deg, #4dd4ff, #2196f3);
  color: #0a0e1a;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(77, 212, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.modern-tabs .method-tab.active svg {
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(10, 14, 26, 0.3));
}

/* Equipment Generation Card */
.equipment-gen-card {
  background: linear-gradient(135deg, rgba(26, 31, 46, 0.9), rgba(26, 31, 46, 0.7));
  border: 1px solid rgba(77, 212, 255, 0.15);
  border-radius: 10px;
  padding: 1.25rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(77, 212, 255, 0.03);
}

.equipment-gen-card .form-group {
  margin-bottom: 1.25rem;
}

/* Modern Label */
.modern-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.95rem;
}

.modern-label svg {
  color: var(--accent-primary);
}

.modern-label small {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 0.85rem;
  margin-left: 0.25rem;
}

/* Modern Dropdown */
.modern-dropdown .dropdown-selected {
  background: rgba(10, 14, 26, 0.6);
  border: 1.5px solid rgba(77, 212, 255, 0.25);
  padding: 0.875rem 1rem;
  border-radius: 8px;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.modern-dropdown .dropdown-selected:hover {
  border-color: var(--accent-primary);
  background: rgba(10, 14, 26, 0.8);
  box-shadow: 0 0 12px rgba(77, 212, 255, 0.25);
}

/* Modern Textarea */
.modern-textarea {
  background: rgba(10, 14, 26, 0.6);
  border: 1.5px solid rgba(77, 212, 255, 0.25);
  border-radius: 8px;
  padding: 0.875rem 1rem;
  color: var(--text-primary);
  font-size: 0.95rem;
  line-height: 1.5;
  resize: vertical;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.modern-textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

.modern-textarea:focus {
  border-color: var(--accent-primary);
  background: rgba(10, 14, 26, 0.8);
  box-shadow: 0 0 12px rgba(77, 212, 255, 0.25), 0 2px 6px rgba(0, 0, 0, 0.2);
  outline: none;
}

/* Cost Info Card */
.cost-info-card {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(251, 146, 60, 0.08));
  border: 1.5px solid rgba(251, 191, 36, 0.35);
  border-radius: 10px;
  padding: 1rem;
  margin-top: 1rem;
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.15);
}

.cost-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  color: #fbbf24;
  font-weight: 700;
  font-size: 1.05rem;
}

.cost-header svg {
  color: #fbbf24;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.4));
}

.cost-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.cost-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.cost-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.cost-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fbbf24;
}

.cost-tip {
  font-size: 0.9rem;
  color: var(--text-secondary);
  padding-top: 1rem;
  border-top: 1px solid rgba(251, 191, 36, 0.2);
}

.cost-tip a {
  color: #fbbf24;
  text-decoration: underline;
  font-weight: 600;
  transition: color 0.2s ease;
}

.cost-tip a:hover {
  color: #fb923c;
}

/* Modern Actions */
.modern-actions {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-top: 1.25rem;
}

.btn-large {
  padding: 1rem 1.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(77, 212, 255, 0.35);
  position: relative;
  overflow: hidden;
}

.btn-large::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.btn-large:hover::before {
  left: 100%;
}

.btn-large:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(77, 212, 255, 0.5);
}

.button-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.equipment-modal .btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  font-size: 0.95rem;
  background: rgba(77, 212, 255, 0.08);
  border: 1.5px solid rgba(77, 212, 255, 0.25);
  color: var(--accent-primary);
  border-radius: 8px;
  transition: all 0.25s ease;
}

.equipment-modal .btn-icon:hover {
  background: rgba(77, 212, 255, 0.15);
  border-color: var(--accent-primary);
  box-shadow: 0 2px 8px rgba(77, 212, 255, 0.2);
}

/* Modern Upload Area */
.modern-upload {
  background: linear-gradient(135deg, rgba(26, 31, 46, 0.6), rgba(10, 14, 26, 0.4));
  border: 2px dashed rgba(77, 212, 255, 0.35);
  border-radius: 12px;
  padding: 2.5rem 2rem;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  margin-bottom: 1.25rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.modern-upload:hover {
  border-color: var(--accent-primary);
  border-style: solid;
  background: linear-gradient(135deg, rgba(77, 212, 255, 0.08), rgba(33, 150, 243, 0.05));
  box-shadow: 0 4px 20px rgba(77, 212, 255, 0.25);
}

.upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.upload-icon-svg {
  color: var(--accent-primary);
  opacity: 0.7;
  transition: all 0.3s ease;
}

.modern-upload:hover .upload-icon-svg {
  opacity: 1;
  transform: translateY(-5px);
  filter: drop-shadow(0 0 15px rgba(77, 212, 255, 0.5));
}

.upload-content h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.25rem;
  font-weight: 700;
}

.upload-content p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 1rem;
}

.upload-content small {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.btn-upload {
  margin-top: 0.5rem;
  padding: 0.875rem 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Modern Preview */
.modern-preview {
  display: flex;
  flex-direction: column;
}

.preview-card {
  background: linear-gradient(135deg, rgba(26, 31, 46, 0.9), rgba(26, 31, 46, 0.7));
  border: 1px solid rgba(77, 212, 255, 0.2);
  border-radius: 10px;
  padding: 1.25rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), inset 0 0 15px rgba(77, 212, 255, 0.04);
  position: sticky;
  top: 0;
  min-height: 520px;
  display: flex;
  flex-direction: column;
}

.preview-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
  color: var(--accent-primary);
  font-weight: 600;
  font-size: 0.95rem;
}

.preview-label svg {
  color: var(--accent-primary);
}

.preview-image-container {
  background: rgba(10, 14, 26, 0.7);
  border: 2px solid rgba(77, 212, 255, 0.25);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 320px;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(77, 212, 255, 0.1);
}

.preview-image-container .generated-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.modern-image-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.btn-use {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 8px;
  background: linear-gradient(135deg, #4dd4ff, #2196f3);
  border: none;
  color: #0a0e1a;
  box-shadow: 0 3px 12px rgba(77, 212, 255, 0.4);
  transition: all 0.25s ease;
}

.btn-use:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 18px rgba(77, 212, 255, 0.6);
}

.btn-regen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  background: rgba(77, 212, 255, 0.1);
  border: 1.5px solid rgba(77, 212, 255, 0.3);
  color: var(--accent-primary);
  transition: all 0.25s ease;
}

.btn-regen:hover {
  background: rgba(77, 212, 255, 0.15);
  border-color: var(--accent-primary);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(77, 212, 255, 0.25);
}

/* Responsive Design for Equipment Modal */
@media (max-width: 1024px) {
  .image-gen-container {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .cost-details {
    grid-template-columns: 1fr;
  }

  .preview-card {
    position: static;
  }

  .equipment-modal .modal-body {
    max-height: none;
  }
}

@media (max-width: 768px) {
  .equipment-modal-header {
    padding: 1.25rem;
  }

  .equipment-modal-title h2 {
    font-size: 1.25rem;
  }

  .equipment-modal-title svg {
    width: 20px;
    height: 20px;
  }

  .equipment-modal-subtitle {
    font-size: 0.85rem;
  }

  .equipment-modal-body {
    padding: 1.5rem;
  }

  .modern-tabs {
    gap: 0.5rem;
    padding: 0.375rem;
  }

  .modern-tabs .method-tab {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
  }

  .modern-tabs .method-tab svg {
    width: 18px;
    height: 18px;
  }

  .equipment-gen-card {
    padding: 1.25rem;
  }

  .cost-info-card {
    padding: 1rem;
  }

  .cost-header {
    font-size: 1rem;
  }

  .cost-details {
    gap: 0.75rem;
  }

  .button-group {
    grid-template-columns: 1fr;
  }

  .modern-upload {
    padding: 2rem 1.5rem;
  }

  .upload-icon-svg {
    width: 48px;
    height: 48px;
  }

  .upload-content h3 {
    font-size: 1.1rem;
  }

  .preview-card {
    padding: 1.25rem;
  }

  .preview-image-container {
    min-height: 250px;
  }
}

@media (max-width: 480px) {
  .equipment-modal-title {
    gap: 0.75rem;
  }

  .equipment-modal-title svg {
    width: 18px;
    height: 18px;
  }

  .equipment-modal-title h2 {
    font-size: 1.1rem;
  }

  .equipment-modal-subtitle {
    font-size: 0.8rem;
  }

  .equipment-modal-body {
    padding: 1rem;
  }

  .modern-tabs {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .equipment-gen-card {
    padding: 1rem;
  }

  .btn-large {
    padding: 1rem 1.25rem;
    font-size: 1rem;
  }

  .equipment-modal .btn-icon {
    font-size: 0.9rem;
    padding: 0.75rem 0.875rem;
  }

  .equipment-modal .btn-icon svg {
    width: 16px;
    height: 16px;
  }

  .modern-upload {
    padding: 1.5rem 1rem;
  }

  .upload-icon-svg {
    width: 40px;
    height: 40px;
  }

  .upload-content h3 {
    font-size: 1rem;
  }

  .upload-content p {
    font-size: 0.9rem;
  }
}

/* Portrait Method Tabs */
.portrait-method-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--border-primary);
}

.method-tab {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--text-secondary);
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.method-tab.active {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
}

.method-tab:hover {
  color: var(--accent-primary);
  background: var(--accent-alpha-5);
}

/* Method Sections */
.method-section {
  display: none;
}

.method-section.active {
  display: block;
}

/* Upload Area */
.upload-area {
  background: var(--bg-tertiary);
  border: 2px dashed var(--border-primary);
  border-radius: 12px;
  padding: 3rem 2rem;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  margin-bottom: 1.5rem;
}

.upload-area:hover {
  border-color: var(--accent-primary);
  background: var(--accent-alpha-5);
}

.upload-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.upload-area p {
  color: var(--text-primary);
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.upload-area small {
  color: var(--text-muted);
  display: block;
  margin-bottom: 1.5rem;
}

.upload-area .btn-primary {
  margin: 0 auto;
}

.form-group {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
}

.form-group label {
  color: var(--text-primary);
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.form-input,
.form-textarea,
.form-select {
  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  color: var(--text-primary);
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  font-family: inherit;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: var(--glow-sm);
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
  font-size: 0.85rem;
}

.form-help {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-top: 0.25rem;
}

.image-gen-actions {
  margin-top: 1rem;
}

.image-gen-actions button {
  width: 100%;
}

.cost-warning {
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.5);
  color: #fbbf24;
  padding: 0.75rem;
  border-radius: 6px;
  margin: 1rem 0;
  font-size: 0.85rem;
  text-align: center;
  line-height: 1.5;
}

.cost-warning strong {
  color: #fbbf24;
  font-weight: 600;
}

.cost-warning small {
  color: #d97706;
  font-size: 0.8rem;
}

.generation-status {
  padding: 1rem;
  border-radius: 6px;
  margin-top: 1rem;
  font-size: 0.9rem;
  text-align: center;
  min-height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.generation-status.loading {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border: 1px solid #3b82f6;
}

.generation-status.success {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border: 1px solid #10b981;
}

.generation-status.error {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid #ef4444;
}

.generated-image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.generated-image {
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: 8px;
  border: 2px solid var(--border-primary);
  box-shadow: var(--glow-md);
}

.image-actions {
  display: flex;
  gap: 1rem;
  width: 100%;
  justify-content: center;
}

.image-actions button {
  min-width: 150px;
}

@media (max-width: 1024px) {
  .image-gen-container {
    grid-template-columns: 1fr;
  }
  
  .image-gen-form {
    order: 1;
  }
  
  .generated-image-container {
    order: 2;
  }
  
  /* Sessions Modal Tablet Optimization */
  .sessions-list {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.85rem;
  }
  
  .session-card-content {
    padding: 1.1rem;
  }
  
  /* Share Modal Tablet Optimization */
  .share-link-container {
    flex-direction: column;
    gap: 0.85rem;
  }
  
  .share-link-input {
    width: 100%;
    font-size: 0.875rem;
  }
  
  .share-link-container .btn-primary {
    width: 100%;
  }
  
  /* Skills Modal Tablet Optimization */
  .modal-large {
    max-width: 95vw;
  }
  
  #skillsContent {
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 1rem;
    overflow-x: hidden;
    width: 100%;
    padding: 0.5rem;
  }
  
  .skill-card {
    border-radius: 10px;
    max-width: 100%;
  }
  
  .skill-header {
    padding: 1.1rem 1.3rem;
  }
  
  .skill-name {
    font-size: 1.15rem;
    word-break: break-word;
  }
  
  .skill-card-body {
    padding: 1.1rem 1.3rem;
  }
  
  /* Equipment Tablet Optimization */
  .equipment-image-preview {
    max-width: 220px;
  }
  
  .equipment-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* Generate Image Button */
.btn-generate-image {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(102, 126, 234, 0.15);
  color: rgba(102, 126, 234, 0.4);
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: auto;
  opacity: 0.3;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.btn-generate-image:hover {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
  border-color: rgba(102, 126, 234, 0.5);
  color: rgba(102, 126, 234, 0.9);
  opacity: 1;
  box-shadow: 0 0 10px rgba(102, 126, 234, 0.2);
}

.btn-generate-image:active {
  transform: scale(0.98);
  opacity: 0.8;
}

/* Quest Display - Redesigned */
.quest-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  text-align: center;
}

.quest-empty-icon {
  color: var(--text-muted);
  opacity: 0.3;
  margin-bottom: 1rem;
}

.quest-empty-text {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.quest-empty-hint {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.quest-header-section {
  margin-bottom: 1.5rem;
}

.quest-status-badge {
  display: inline-block;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
}

.quest-status-badge.active {
  background: linear-gradient(135deg, var(--accent-alpha-20), var(--accent-alpha-10));
  color: var(--accent-primary);
  border: 1px solid var(--accent-primary);
}

.quest-status-badge.completed {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1));
  color: var(--accent-gold);
  border: 1px solid var(--accent-gold);
}

.quest-status-badge.failed {
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.2), rgba(255, 107, 107, 0.1));
  color: var(--hp-color);
  border: 1px solid var(--hp-color);
}

.quest-status-badge.pending {
  background: linear-gradient(135deg, rgba(128, 128, 128, 0.2), rgba(128, 128, 128, 0.1));
  color: var(--text-muted);
  border: 1px solid var(--border-primary);
}

.quest-title {
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  font-weight: bold;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.quest-description {
  color: var(--text-secondary);
  line-height: 1.7;
  font-size: 0.95rem;
}

.quest-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.quest-detail-card {
  background: linear-gradient(135deg, var(--bg-tertiary) 0%, rgba(26, 31, 46, 0.95) 100%);
  border: 2px solid var(--border-primary);
  border-radius: 12px;
  padding: 1.25rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.quest-detail-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.quest-detail-card:hover::before {
  opacity: 1;
}

.quest-detail-card:hover {
  border-color: var(--accent-primary);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px var(--accent-alpha-20);
}

.quest-detail-card.reward-card {
  border-color: rgba(255, 215, 0, 0.4);
}

.quest-detail-card.reward-card::before {
  background: linear-gradient(90deg, var(--accent-gold), #ffaa00);
}

.quest-detail-card.reward-card:hover {
  border-color: var(--accent-gold);
  box-shadow: 0 8px 24px rgba(255, 215, 0, 0.3);
}

@media (hover: none) {
  .quest-detail-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}

.quest-detail-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 0.65rem;
  font-weight: 600;
}

.quest-detail-value {
  font-size: 1.15rem;
  color: var(--accent-primary);
  font-weight: 700;
  text-shadow: 0 0 10px var(--accent-alpha-30);
}

.quest-reward {
  color: var(--accent-gold);
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.quest-section-title {
  font-size: 1rem;
  font-weight: bold;
  color: var(--accent-primary);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--border-primary);
}

.quest-objectives-section,
.quest-notes-section {
  margin-top: 1.5rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(26, 31, 46, 0.9), rgba(20, 30, 48, 0.9));
  border-radius: 12px;
  border: 2px solid var(--border-primary);
}

.quest-objectives-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.quest-objective-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  border: 1px solid var(--accent-alpha-10);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.quest-objective-item:hover {
  border-color: var(--accent-primary);
  transform: translateX(4px);
  box-shadow: 0 0 15px var(--accent-alpha-20);
}

.quest-objective-item.completed {
  opacity: 0.6;
  border-color: var(--accent-gold);
  background: rgba(255, 215, 0, 0.05);
}

.quest-objective-marker {
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 50%;
  background: var(--accent-primary);
  margin-top: 0.4rem;
  box-shadow: 0 0 8px var(--accent-primary);
}

.quest-objective-item.completed .quest-objective-marker {
  background: var(--accent-gold);
  box-shadow: 0 0 8px var(--accent-gold);
}

.quest-objective-text {
  flex: 1;
  color: var(--text-primary);
  line-height: 1.5;
  font-size: 0.9rem;
}

.quest-objective-item.completed .quest-objective-text {
  text-decoration: line-through;
  color: var(--text-muted);
}

.quest-notes-text {
  color: var(--text-secondary);
  line-height: 1.7;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Mobile responsive for quests */
@media (max-width: 768px) {
  .quest-title {
    font-size: 1.25rem;
  }
  
  .quest-details-grid {
    grid-template-columns: 1fr;
  }
  
  .quest-detail-card {
    padding: 0.75rem;
  }
  
  .quest-objectives-section,
  .quest-notes-section {
    padding: 1rem;
  }
}

/* Location & Time Display - Redesigned */
.location-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  text-align: center;
}

.location-empty-icon {
  color: var(--text-muted);
  opacity: 0.3;
  margin-bottom: 1rem;
}

.location-empty-text {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.location-empty-hint {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.location-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1.5rem;
}

.location-card {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.5rem;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-primary);
  border-radius: 12px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.location-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent-primary);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.location-card:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 4px 20px var(--accent-alpha-15);
  transform: translateY(-2px);
}

.location-card:hover::before {
  opacity: 1;
}

.location-card.location-place {
  border-color: var(--accent-alpha-30);
}

.location-card.location-place::before {
  background: var(--accent-primary);
}

.location-card.location-time {
  border-color: rgba(255, 215, 0, 0.3);
}

.location-card.location-time::before {
  background: var(--accent-gold);
}

.location-card.location-time:hover {
  border-color: var(--accent-gold);
  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.15);
}

.location-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  min-width: 56px;
  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  border-radius: 12px;
  color: var(--accent-primary);
  transition: all 0.3s ease;
}

.location-card.location-time .location-card-icon {
  color: var(--accent-gold);
}

.location-card:hover .location-card-icon {
  transform: scale(1.1);
  box-shadow: 0 0 20px currentColor;
}

.location-card-content {
  flex: 1;
  min-width: 0;
}

.location-card-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.location-card-value {
  font-size: clamp(1rem, 3vw, 1.25rem);
  font-weight: bold;
  color: var(--text-primary);
  line-height: 1.4;
  word-break: break-word;
}

/* Mobile responsive for location */
@media (max-width: 768px) {
  .location-cards {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .location-card {
    padding: 1.25rem;
    gap: 1rem;
  }
  
  .location-card-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
  }
  
  .location-card-icon svg {
    width: 24px;
    height: 24px;
  }
  
  .location-card-value {
    font-size: 1rem;
  }
}

/* Party Member */
.party-member {
  background: linear-gradient(135deg, var(--bg-tertiary) 0%, rgba(26, 31, 46, 0.95) 100%);
  border: 2px solid var(--border-primary);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.party-member::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.party-member:hover::before {
  opacity: 1;
}

.party-member:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px var(--accent-alpha-20);
}

@media (hover: none) {
  .party-member:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}

.party-member-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 15px var(--accent-alpha-40);
  box-shadow: 0 0 20px var(--accent-alpha-20);
  border: 3px solid var(--accent-alpha-30);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.party-member:hover .party-member-avatar {
  transform: scale(1.1);
  box-shadow: 0 0 30px var(--accent-alpha-40);
  border-color: var(--accent-primary);
}

.party-member-info {
  flex: 1;
}

.party-member-name {
  color: var(--accent-primary);
  font-size: 1.25rem;
  font-weight: 700;
  text-shadow: 0 0 10px var(--accent-alpha-30);
  margin-bottom: 0.35rem;
}

.party-member-rank {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.party-member-stats {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.85rem;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--accent-alpha-10);
  border-radius: 8px;
}

.stat-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
}

.stat-label {
  color: var(--text-muted);
  font-weight: 600;
  width: 40px;
  text-align: right;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
}

.stat-container {
  flex: 1;
  height: 22px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--accent-alpha-20);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}

.stat-fill {
  height: 100%;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 5px;
}

.stat-bar.hp-bar .stat-fill {
  box-shadow: 0 0 10px var(--hp-color);
}

.stat-bar.mp-bar .stat-fill {
  box-shadow: 0 0 10px var(--mp-color);
}

.stat-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-weight: bold;
  font-size: 0.75rem;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  z-index: 2;
}

/* Relationship */
.relationship-item {
  background: linear-gradient(135deg, var(--bg-tertiary) 0%, rgba(26, 31, 46, 0.95) 100%);
  border: 2px solid var(--border-primary);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.relationship-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.relationship-item:hover::before {
  opacity: 1;
}

.relationship-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px var(--accent-alpha-20);
}

@media (hover: none) {
  .relationship-item:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}

.relationship-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--accent-alpha-10);
}

.relationship-name {
  color: var(--accent-primary);
  font-weight: 700;
  font-size: 1.25rem;
  text-shadow: 0 0 10px var(--accent-alpha-30);
}

.relationship-status {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.relationship-status.positive {
  background: var(--stamina-color);
  color: #000;
}

.relationship-status.neutral {
  background: var(--text-muted);
  color: #fff;
}

.relationship-status.negative {
  background: var(--hp-color);
  color: #fff;
}

.relationship-meter {
  width: 100%;
  height: 12px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--accent-alpha-20);
  border-radius: 8px;
  overflow: hidden;
  margin: 0.85rem 0;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.relationship-meter-fill {
  height: 100%;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 10px currentColor;
}

.relationship-meter-fill.positive {
  background: linear-gradient(90deg, var(--stamina-color), var(--accent-primary));
}

.relationship-meter-fill.negative {
  background: linear-gradient(90deg, var(--hp-color), var(--accent-danger));
}

.relationship-description {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  padding: 0.85rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  margin-top: 0.75rem;
}

/* Relationship Filters */
.relationship-filters {
  margin-bottom: 1.5rem;
}

.filter-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.filter-btn {
  background: rgba(61, 90, 128, 0.4);
  border: 2px solid var(--border-primary);
  color: var(--text-secondary);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-btn:hover {
  background: rgba(61, 90, 128, 0.6);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.filter-btn.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #000;
  font-weight: bold;
  box-shadow: 0 0 10px var(--accent-primary);
}

/* ============================================
   Login Page
   ============================================ */

.login-container {
  text-align: center;
}

.login-header h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  letter-spacing: 2px;
}

.login-header .subtitle {
  color: var(--text-secondary);
  font-size: 1rem;
  margin-bottom: 3rem;
}

.login-options {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.btn-primary {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 2px solid var(--accent-primary);
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.btn-primary:hover {
  background: var(--accent-alpha-10);
  box-shadow: var(--glow-lg);
  transform: translateY(-2px);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 2px solid var(--border-primary);
  padding: 1rem 2rem;
  font-size: 0.95rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.btn-secondary:hover {
  border-color: var(--accent-secondary);
  color: var(--text-primary);
}

.btn-secondary small {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.login-footer {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-primary);
}

.privacy-note {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.link-accent {
  color: var(--accent-primary);
  text-decoration: none;
  transition: color 0.3s;
}

.link-accent:hover {
  color: var(--accent-secondary);
  text-decoration: underline;
}

/* ============================================
   Top Navigation
   ============================================ */

.top-nav {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.85) 100%);
  border-bottom: 2px solid var(--border-primary);
  padding: 1.25rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  box-shadow: 0 8px 32px var(--accent-alpha-10), 0 4px 16px rgba(0, 0, 0, 0.5);
  position: sticky;
  top: 0;
  z-index: 200;
  backdrop-filter: blur(10px);
  /* Extend to full viewport width to cover scrollbar gap */
  width: 100vw;
  margin-left: calc(-1 * (100vw - 100%) / 2);
  margin-right: calc(-1 * (100vw - 100%) / 2);
  box-sizing: border-box;
}

/* Mobile menu backdrop overlay */
.nav-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 199;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  /* GPU Optimization: Only apply backdrop-filter when active */
  backdrop-filter: none;
}

.nav-backdrop.active {
  display: block;
  opacity: 1;
  pointer-events: auto;
  /* GPU Optimization: Apply backdrop-filter only when visible */
  backdrop-filter: blur(4px);
}

.nav-left {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.nav-left .logo {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 2px;
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 30px var(--accent-alpha-50);
  filter: drop-shadow(0 0 15px var(--accent-alpha-30));
  text-transform: uppercase;
  letter-spacing: 1px;
}

.nav-center {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  justify-content: center;
  flex-wrap: wrap;
  position: static;
  max-height: none;
  padding: 0;
  border: none;
  background: none;
  overflow: visible;
}

/* Seamless Navigation Links */
.nav-link {
  background: none;
  border: none;
  color: var(--text-secondary);
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 1.05rem;
  font-weight: 500;
  position: relative;
  letter-spacing: 0.3px;
}

.nav-link::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent-primary) 60%, transparent);
}

.nav-link:hover {
  color: var(--text-primary);
  text-shadow: 0 0 12px var(--accent-alpha-40);
  transform: translateY(-1px);
}

.nav-link:hover::before {
  width: 100%;
}

.nav-link.active {
  color: var(--accent-primary);
  text-shadow: 0 0 10px var(--accent-alpha-50);
  font-weight: 600;
}

.nav-link.active::before {
  width: 100%;
  background: var(--accent-primary);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent-primary) 80%, transparent);
}

.nav-separator {
  color: var(--border-primary);
  opacity: 0.3;
  font-size: 1rem;
  -webkit-user-select: none; /* Safari 3+ */
  user-select: none;
  margin: 0 0.25rem;
  font-weight: 300;
}

/* Keep old nav-btn styles for backward compatibility */
.nav-btn {
  background: transparent;
  border: 2px solid var(--accent-alpha-40);
  color: var(--text-primary);
  padding: 0.65rem 1.25rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.nav-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--accent-alpha-20), transparent);
  transition: left 0.5s ease;
  z-index: -1;
}

.nav-btn:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  box-shadow: 
    0 0 20px var(--accent-alpha-30),
    inset 0 0 20px var(--accent-alpha-5);
  transform: translateY(-2px) scale(1.02);
  background: var(--accent-alpha-5);
}

.nav-btn:hover::before {
  left: 100%;
}

.nav-btn.active {
  border-color: var(--accent-primary);
  background: var(--accent-alpha-10);
  color: var(--accent-primary);
  box-shadow: 0 0 15px var(--accent-alpha-40);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex: 0 0 auto;
}

/* Mobile menu button - Hidden by default, shown on mobile/tablet */
.mobile-menu-btn {
  display: none;
  background: transparent;
  border: 2px solid var(--accent-alpha-30);
  border-radius: 8px;
  color: var(--accent-primary);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem 1rem;
  margin-right: 1rem;
  transition: all 0.3s ease;
  line-height: 1;
}

.mobile-menu-btn:hover {
  background: var(--accent-alpha-10);
  border-color: var(--accent-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--accent-alpha-20);
}

.mobile-menu-btn:active {
  transform: translateY(0);
}

/* Sync Status - Clean Design */
.sync-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  border-radius: 4px;
}

.sync-status:hover {
  background: var(--accent-alpha-5);
}

.sync-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success-color);
  box-shadow: 0 0 8px rgba(77, 255, 77, 0.6);
  transition: all 0.3s ease;
}

.sync-icon {
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-primary);
}

.sync-text {
  color: var(--text-secondary);
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

.sync-status:hover .sync-text {
  color: var(--text-primary);
}

/* Syncing state - Fixed blue to indicate connecting/syncing */
.sync-status.syncing .sync-indicator {
  background: var(--status-info);
  box-shadow: 0 0 10px rgba(77, 212, 255, 0.6);
  animation: pulse-glow 1.5s ease-in-out infinite;
}

.sync-status.syncing .sync-text {
  color: var(--status-info);
}

/* Synced state - Fixed green for success */
.sync-status.synced .sync-indicator {
  background: var(--status-success);
  box-shadow: 0 0 8px rgba(77, 255, 77, 0.6);
}

.sync-status.synced .sync-text {
  color: var(--text-secondary);
}

/* Error state - Fixed red for errors */
.sync-status.error .sync-indicator {
  background: var(--status-error);
  box-shadow: 0 0 10px rgba(255, 70, 85, 0.6);
  animation: pulse-glow 1.5s ease-in-out infinite;
}

.sync-status.error .sync-text {
  color: var(--status-error);
}

/* Offline state - Fixed gray for offline */
.sync-status.offline .sync-indicator {
  background: var(--status-offline);
  box-shadow: none;
}

.sync-status.offline .sync-text {
  color: var(--text-muted);
}

@keyframes pulse-glow {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.2);
  }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* User Profile */
.user-profile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  padding: 0.5rem 1.25rem 0.5rem 0.75rem;
  background: linear-gradient(135deg, rgba(77, 212, 255, 0.08), rgba(77, 212, 255, 0.03));
  border: 1.5px solid var(--accent-alpha-30);
  border-radius: 20px;
  transition: all 0.3s ease;
  overflow: visible;
}

.user-profile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent, var(--accent-alpha-10));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  border-radius: 20px;
}

.user-profile:hover::before {
  opacity: 1;
}

.user-profile:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 0 15px var(--accent-alpha-20);
  transform: translateY(-1px);
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--accent-primary);
  box-shadow: 0 0 8px var(--accent-alpha-30);
  position: relative;
  z-index: 1;
  object-fit: cover;
  transition: all 0.3s ease;
}

/* Guest Avatar Special Styling */
.user-avatar.guest-avatar {
  border: 2px solid var(--accent-primary);
  box-shadow: 0 0 15px var(--accent-alpha-50);
  animation: guest-glow 3s ease-in-out infinite;
}

@keyframes guest-glow {
  0%, 100% {
    box-shadow: 0 0 15px var(--accent-alpha-50);
    border-color: var(--accent-primary);
  }
  50% {
    box-shadow: 0 0 25px color-mix(in srgb, var(--accent-primary) 70%, transparent);
    border-color: var(--accent-secondary);
  }
}

.user-profile:hover .user-avatar.guest-avatar {
  transform: scale(1.1);
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent-primary) 80%, transparent);
}

.user-name {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--text-primary);
  position: relative;
  z-index: 1;
}

.user-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0;
  padding-top: 0.75rem;
  background: transparent;
  min-width: 200px;
  z-index: 1000;
}

.user-dropdown::before {
  content: '';
  display: block;
  height: 0.75rem;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.user-dropdown-content {
  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.user-profile:hover .user-dropdown,
.user-dropdown:hover,
.user-dropdown.active {
  display: block;
}

.user-dropdown-content button {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text-primary);
  padding: 0.85rem 1.25rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  font-weight: 500;
  border-bottom: 1px solid var(--accent-alpha-10);
}

.user-dropdown-content button:last-child {
  border-bottom: none;
}

.user-dropdown-content button:hover {
  background: linear-gradient(90deg, var(--accent-alpha-15), var(--accent-alpha-5));
  color: var(--accent-primary);
  padding-left: 1.5rem;
}

/* ============================================
   Main Container
   ============================================ */

#mainApp {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
}

.main-container {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 2rem;
  padding: 2rem;
  max-width: 1920px;
  margin: 0 auto;
  flex: 1;
  transition: grid-template-columns 0.3s ease;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

@media (max-width: 1200px) {
  .main-container {
    grid-template-columns: 1fr 350px;
  }
}

@media (max-width: 900px) {
  .main-container {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
  }
}

/* ============================================
   Story Section
   ============================================ */

.story-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  align-self: start;
}

.turn-navigation {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(10px);
  border: 2px solid var(--border-primary);
  border-radius: 8px;
  position: relative;
  z-index: 2;
}

.turn-nav-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--accent-alpha-5);
  border: 1px solid var(--accent-alpha-20);
  border-radius: 6px;
  padding: 0.25rem;
}

.turn-nav-controls .turn-btn {
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  min-width: auto;
  background: transparent;
  border: none;
}

.turn-nav-controls .turn-btn:hover {
  background: var(--accent-alpha-10);
  border: none;
}

.turn-counter {
  flex: 0 1 auto;
  text-align: center;
  font-weight: 700;
  color: var(--accent-primary);
  font-size: 0.9rem;
  min-width: 120px;
  padding: 0.5rem 1rem;
}

.turn-nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

/* Ensure all buttons in turn-nav-actions have consistent size */
.turn-nav-actions .turn-btn {
  min-width: 48px;
  width: 48px;
  height: 40px;
  padding: 0.5rem;
  font-size: 1.1rem;
}

.turn-btn {
  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  color: var(--text-primary);
  padding: 0.6rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 38px;
}

.turn-btn:hover:not(:disabled) {
  border-color: var(--accent-primary);
  box-shadow: var(--glow-sm);
  transform: translateY(-2px);
}

.turn-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.prev-btn,
.next-btn {
  padding: 0.6rem 0.8rem;
  font-size: 1.2rem;
  font-weight: bold;
  min-width: 40px;
}

.bookmark-btn:hover {
  border-color: var(--accent-gold);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.note-btn:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 0 10px var(--accent-alpha-30);
}

.delete-btn {
  background: rgba(255, 70, 85, 0.2);
  border: 2px solid var(--hp-color);
  border-width: 2px;
  color: var(--hp-color);
  font-weight: 700;
  font-size: 1.2rem;
  box-shadow: 0 0 8px rgba(255, 70, 85, 0.3);
}

.delete-btn:hover:not(:disabled) {
  background: rgba(255, 70, 85, 0.35);
  border-color: #ff6b7a;
  box-shadow: 0 0 15px rgba(255, 70, 85, 0.6);
  transform: translateY(-2px);
}

.paste-btn {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  border: 2px solid var(--accent-primary);
  color: var(--bg-primary);
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: 0 0 10px var(--accent-alpha-40);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.paste-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #5ce0ff, #3daeff);
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent-primary) 70%, transparent);
  transform: translateY(-2px) scale(1.05);
}

/* Share and Sessions buttons */
.share-btn:hover {
  background: var(--accent-alpha-20);
}

.btn-icon-img {
  width: 20px;
  height: 20px;
  display: block;
  filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
  opacity: 1;
}

.btn-icon-img.gemini-icon {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}

.btn-icon-img.spinning {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.sessions-btn:hover {
  background: var(--accent-alpha-20);
}

/* Refined Turn Action Buttons */
.turn-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0.6rem;
  border-radius: 6px;
  font-size: 1.5rem;
  font-weight: 600;
  border: 2px solid;
  background: var(--bg-tertiary);
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
}

.turn-action-btn .btn-icon {
  display: block;
  line-height: 1;
  transition: all 0.25s ease;
}

.turn-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Primary (Paste) - Cyan Accent */
.turn-action-primary {
  border-color: var(--accent-primary);
  background: var(--accent-alpha-15);
  color: var(--accent-primary);
}

.turn-action-primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent-primary) 25%, transparent);
  box-shadow: 
    0 0 20px var(--accent-alpha-40),
    inset 0 1px 0 var(--accent-alpha-20);
  transform: translateY(-2px);
}

.turn-action-primary:hover:not(:disabled) .btn-icon {
  transform: scale(1.15);
}

.turn-action-primary:active {
  transform: translateY(0);
  background: var(--accent-alpha-30);
}

/* Danger (Delete) - Red Warning */
.turn-action-danger {
  border-color: #ff4655;
  background: rgba(255, 70, 85, 0.12);
  color: #ff6b7a;
}

.turn-action-danger:hover:not(:disabled) {
  background: rgba(255, 70, 85, 0.22);
  border-color: #ff6b7a;
  box-shadow: 
    0 0 20px rgba(255, 70, 85, 0.4),
    inset 0 1px 0 rgba(255, 70, 85, 0.2);
  transform: translateY(-2px);
  color: #ff8590;
}

.turn-action-danger:hover:not(:disabled) .btn-icon {
  transform: scale(1.15);
}

.turn-action-danger:active {
  transform: translateY(0);
  background: rgba(255, 70, 85, 0.3);
}

/* Secondary (Sessions) - Neutral */
.turn-action-secondary {
  border-color: var(--border-primary);
  background: rgba(26, 31, 46, 0.6);
  color: var(--text-secondary);
}

.turn-action-secondary:hover:not(:disabled) {
  border-color: var(--accent-alpha-50);
  background: rgba(61, 90, 128, 0.4);
  box-shadow: 0 0 15px var(--accent-alpha-20);
  transform: translateY(-2px);
  color: var(--accent-primary);
}

.turn-action-secondary:hover:not(:disabled) .btn-icon {
  transform: scale(1.15);
}

.turn-action-secondary:active {
  transform: translateY(0);
  background: rgba(61, 90, 128, 0.5);
}

/* Share Modal */
.share-info {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 1.5rem;
}

.share-description {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.share-link-container {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  align-items: stretch;
}

.share-link-input {
  flex: 1;
  background: var(--bg-primary);
  border: 2px solid var(--border-primary);
  color: var(--text-primary);
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  word-break: break-all;
  -webkit-user-select: all;
  user-select: all;
}

.share-link-input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: var(--glow-sm);
}

.share-link-container .btn-primary {
  padding: 0.75rem 1.5rem;
  white-space: nowrap;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.share-link-container .btn-primary:active {
  transform: scale(0.98);
  transition: transform 0.1s ease;
}

.share-note {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-primary);
  text-align: center;
  line-height: 1.5;
}

/* Import Confirmation Modal */
.import-confirmation-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.import-description {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
  padding: 1rem;
  background: var(--bg-tertiary);
  border-left: 3px solid var(--accent-primary);
  border-radius: 4px;
}

.character-preview {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 1.5rem;
}

.character-preview h3 {
  color: var(--accent-primary);
  font-size: 1.1rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.character-info {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.character-info .info-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--accent-alpha-10);
}

.character-info .info-row:last-child {
  border-bottom: none;
}

.character-info .info-row strong {
  color: var(--text-secondary);
  font-weight: 600;
  min-width: 120px;
}

.character-info .info-row span {
  color: var(--text-primary);
  font-weight: 500;
  text-align: right;
  flex: 1;
}

.import-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  padding-top: 1rem;
}

.import-actions .btn-primary,
.import-actions .btn-secondary {
  flex: 1;
  max-width: 200px;
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
}

.import-actions .btn-primary {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
}

.import-actions .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px var(--accent-alpha-50);
}

.import-actions .btn-secondary {
  background: var(--bg-tertiary);
  border: 2px solid var(--border-primary);
  color: var(--text-secondary);
}

.import-actions .btn-secondary:hover {
  border-color: var(--accent-danger);
  color: var(--accent-danger);
  transform: translateY(-2px);
}

/* Sessions List */
.sessions-actions {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-primary);
}

.sessions-actions .btn-secondary {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Sessions List */
.sessions-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 0.5rem;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Loading State */
.sessions-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  gap: 1rem;
  min-height: 40vh;
  grid-column: 1 / -1;
  width: 100%;
}

.sessions-loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--accent-alpha-10);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: sessions-spinner-rotate 0.8s linear infinite;
}

@keyframes sessions-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.sessions-loading-text {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

/* Empty State */
.sessions-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  text-align: center;
  min-height: 40vh;
  grid-column: 1 / -1;
  width: 100%;
}

.sessions-empty-text {
  color: var(--text-primary);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.sessions-empty-hint {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* Session Card - Redesigned */
.session-card {
  background: linear-gradient(135deg, var(--bg-tertiary) 0%, rgba(26, 31, 46, 0.8) 100%);
  border: 2px solid var(--border-primary);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.session-card:hover {
  border-color: var(--accent-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--accent-alpha-20);
}

.session-card:active {
  transform: translateY(0);
  transition: all 0.1s ease;
}

.session-card-content {
  padding: 1.25rem;
}

.session-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--accent-alpha-10);
}

.session-card-title {
  color: var(--text-primary);
  font-size: 1.15rem;
  font-weight: 700;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 0.75rem;
}

.session-card-rank {
  background: var(--accent-primary);
  color: #000;
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  min-width: 32px;
  box-shadow: 0 0 10px var(--accent-alpha-30);
}

/* Rank Colors */
.session-card-rank.rank-S,
.session-card-rank.rank-SS,
.session-card-rank.rank-SSS {
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  color: #000;
}

.session-card-rank.rank-A {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  color: #000;
}

.session-card-rank.rank-B {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: #000;
}

.session-card-rank.rank-C {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #fff;
}

.session-card-rank.rank-D,
.session-card-rank.rank-E {
  background: linear-gradient(135deg, #94a3b8, #64748b);
  color: #fff;
}

.session-card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.session-stat {
  background: rgba(0, 0, 0, 0.3);
  padding: 0.7rem;
  border-radius: 6px;
  border: 1px solid var(--accent-alpha-10);
}

.session-stat-label {
  display: block;
  color: var(--text-muted);
  font-size: 0.75rem;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.session-stat-value {
  display: block;
  color: var(--accent-primary);
  font-size: 1rem;
  font-weight: 700;
  min-height: 2.6rem;
  line-height: 1.4;
  word-wrap: break-word;
}

.session-card-footer {
  display: flex;
  gap: 0.5rem;
}

.session-btn {
  flex: 1;
  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  color: var(--text-primary);
  padding: 0.65rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.session-btn:hover {
  transform: translateY(-1px);
}

.session-btn:active {
  transform: scale(0.98);
  transition: all 0.1s ease;
}

.session-btn-load {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.session-btn-load:hover {
  background: var(--accent-alpha-15);
  box-shadow: 0 0 15px var(--accent-alpha-30);
}

.session-btn-delete {
  border-color: var(--hp-color);
  color: var(--hp-color);
}

.session-btn-delete:hover {
  background: rgba(255, 70, 85, 0.15);
  box-shadow: 0 0 15px rgba(255, 70, 85, 0.3);
}

.session-btn-delete.loading {
  pointer-events: none;
  opacity: 0.7;
  cursor: not-allowed;
}

.session-btn-delete.loading .session-btn-spinner {
  display: inline-block;
}

.session-btn-spinner {
  display: none;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 2px solid rgba(255, 70, 85, 0.3);
  border-top-color: var(--hp-color);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Story Panel */
.story-panel {
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(10px);
  border: 2px solid var(--border-primary);
  border-radius: 8px;
  padding: 2rem;
  box-shadow: var(--shadow-panel);
  position: relative;
  overflow-y: auto;
  overflow-x: visible;
  flex: 1;
  max-height: 600px;
  width: 100%;
  box-sizing: border-box;
  z-index: 2;
}

.story-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
  animation: glow-pulse 2s ease-in-out infinite;
}

/* Story Text Formatting */
.story-panel strong {
  color: var(--accent-primary);
  font-weight: 600;
  text-shadow: 0 0 8px var(--accent-alpha-20);
}

.story-panel em {
  font-style: italic;
  color: var(--accent-secondary);
  opacity: 0.9;
}

/* Ribbon Bookmark */
.ribbon-bookmark {
  position: absolute !important;
  top: 0 !important;
  right: 40px !important;
  left: auto !important;
  z-index: 100;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: all;
}

.ribbon-bookmark:hover {
  transform: translateY(-3px);
}

.ribbon-bookmark:active {
  transform: translateY(-1px);
}

.ribbon-content {
  width: 50px;
  height: 70px;
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  border: 2px solid var(--border-primary);
  border-top: none;
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 var(--accent-alpha-10),
    0 0 15px var(--accent-alpha-20);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: 
    background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s ease;
  backdrop-filter: blur(10px);
  pointer-events: none;
}

.ribbon-bookmark:hover .ribbon-content {
  background: linear-gradient(135deg, var(--accent-alpha-15) 0%, var(--accent-alpha-10) 100%);
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 var(--accent-alpha-20),
    0 0 25px var(--accent-alpha-40);
}

.ribbon-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 100%);
  pointer-events: none;
}

.bookmark-icon {
  font-size: 1.8rem;
  color: color-mix(in srgb, var(--accent-primary) 90%, transparent);
  text-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 0 10px var(--accent-alpha-30);
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 0 6px var(--accent-alpha-40));
  transition: 
    color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    text-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    filter 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s ease;
  pointer-events: none;
}

.ribbon-bookmark:hover .bookmark-icon {
  transform: scale(1.1);
  color: var(--accent-primary);
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent-primary) 60%, transparent));
}

.ribbon-tail {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 15px solid var(--bg-tertiary);
  position: relative;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
  pointer-events: none;
  transition: border-top-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ribbon-tail::before,
.ribbon-tail::after {
  content: '';
  position: absolute;
  top: -15px;
  width: 0;
  height: 0;
}

.ribbon-tail::before {
  left: -25px;
  border-left: 8px solid transparent;
  border-top: 8px solid rgba(0, 0, 0, 0.2);
}

.ribbon-tail::after {
  right: -25px;
  border-right: 8px solid transparent;
  border-top: 8px solid rgba(0, 0, 0, 0.2);
}

/* Bookmarked state - filled star with accent glow */
.ribbon-bookmark.bookmarked .ribbon-content {
  background: linear-gradient(135deg, var(--accent-alpha-30) 0%, var(--accent-secondary-alpha-35) 100%);
  border-color: var(--accent-alpha-50);
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 var(--accent-alpha-30),
    0 0 20px var(--accent-alpha-50);
}

.ribbon-bookmark.bookmarked:hover .ribbon-content {
  background: linear-gradient(135deg, var(--accent-alpha-40) 0%, var(--accent-secondary-alpha-45) 100%);
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 var(--accent-alpha-40),
    0 0 30px color-mix(in srgb, var(--accent-primary) 70%, transparent);
}

.ribbon-bookmark.bookmarked .ribbon-tail {
  border-top-color: var(--accent-alpha-40);
}

.ribbon-bookmark.bookmarked .bookmark-icon {
  color: var(--accent-primary);
  text-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 0 10px color-mix(in srgb, var(--accent-primary) 80%, transparent);
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent-primary) 80%, transparent));
}

.ribbon-bookmark.bookmarked:hover .bookmark-icon {
  filter: drop-shadow(0 0 18px var(--accent-primary));
}

/* Story Image Upload Button - Bottom Right Position */
.story-image-btn {
  position: absolute !important;
  bottom: 15px !important;
  right: 15px !important;
  left: auto !important;
  width: 45px;
  height: 45px;
  background: linear-gradient(135deg, var(--accent-alpha-15), var(--accent-alpha-10));
  border: 2px solid var(--border-primary);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
}

/* Generate Scene Prompt Button - To the left of image button */
.story-scene-prompt-btn {
  right: 70px !important; /* 15px (base right) + 45px (button width) + 10px (gap) */
  background: linear-gradient(135deg, var(--accent-alpha-15), var(--accent-alpha-10));
}

.story-image-btn svg {
  color: var(--accent-primary);
  transition: all 0.3s ease;
}

.story-image-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--accent-alpha-20), var(--accent-alpha-15));
  border-color: var(--accent-primary);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4), 0 0 20px var(--accent-alpha-30);
  transform: translateY(-2px);
}

.story-image-btn:hover:not(:disabled) svg {
  color: var(--accent-secondary);
  transform: scale(1.1);
}

.story-image-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.story-image-btn.active {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  border-color: var(--accent-primary);
  box-shadow: 0 0 20px var(--accent-alpha-50);
}

.story-image-btn.active svg {
  color: var(--bg-primary);
}

/* Story Image Upload Spots */
.story-image-spot {
  display: block;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 200px;
  margin: 1.5rem auto;
  background: linear-gradient(135deg, var(--accent-alpha-10), var(--accent-alpha-5));
  border: 2px dashed var(--accent-alpha-40);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.story-image-spot::before {
  content: '+';
  font-size: 3rem;
  color: var(--accent-primary);
  font-weight: 600;
  transition: color 0.2s ease;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.story-image-spot:hover {
  background: linear-gradient(135deg, var(--accent-alpha-20), var(--accent-alpha-15));
  border-color: var(--accent-primary);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 20px var(--accent-alpha-30);
}

.story-image-spot:hover::before {
  color: var(--accent-secondary);
}

/* Inline Story Images */
.story-inline-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.5rem auto;
  border: 2px solid var(--border-primary);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
  cursor: pointer;
  
  /* High-quality crisp image rendering */
  image-rendering: -webkit-optimize-contrast; /* Edge 79+ */
  image-rendering: -moz-crisp-edges; /* Firefox */
  image-rendering: crisp-edges; /* Standard */
  -ms-interpolation-mode: bicubic;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
}

.story-inline-image:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 20px var(--accent-alpha-30);
  transform: translateZ(0) scale(1.02);
}

/* Story Image Loading Container */
.story-image-loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  margin: 1.5rem auto;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  border: 2px solid var(--border-primary);
}

/* Story Image Loading Spinner */
.story-image-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-top: 4px solid var(--accent-primary);
  border-radius: 50%;
  animation: story-image-spin 0.8s linear infinite;
}

@keyframes story-image-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Story Image Container with Delete Button */
.story-image-container {
  position: relative;
  display: block;
  margin: 1.5rem auto;
  width: fit-content;
  max-width: 100%;
}

.story-image-container .story-inline-image {
  margin: 0;
}

.story-image-delete-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  background: rgba(255, 70, 85, 0.95);
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  z-index: 10;
  line-height: 1;
  padding: 0;
}

.story-image-delete-btn:hover {
  background: rgba(255, 40, 55, 1);
  border-color: white;
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(255, 70, 85, 0.6);
}

.story-image-delete-btn:active {
  transform: scale(1.05);
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.section-title {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: var(--accent-primary);
  text-shadow: var(--glow-sm);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.title-separator {
  color: var(--border-primary);
  opacity: 0.5;
}

.title-link {
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1.25rem;
  color: var(--accent-primary);
  text-shadow: var(--glow-sm);
  position: relative;
  white-space: nowrap;
}

@media (max-width: 768px) {
  /* Hide bookmark/note links in section title on mobile */
  .title-separator,
  #btnViewBookmarks,
  #btnTurnNote {
    display: none !important;
  }
  
  /* Show mobile bookmark/note buttons in turn nav */
  .mobile-bookmark-btn,
  .mobile-note-btn {
    display: flex !important;
  }
}

.title-link:hover {
  color: var(--text-primary);
  text-shadow: 0 0 15px var(--accent-primary);
  transform: translateY(-1px);
}

.title-link:active {
  transform: translateY(0);
}

/* Story Content Wrapper - Container for content and button */
.story-content-wrapper {
  position: relative;
  width: 100%;
  min-height: 100px;
}

.story-content {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-wrap: break-word;
  padding-bottom: 65px;
}

.story-content strong {
  color: var(--accent-primary);
  text-shadow: var(--glow-sm);
}

/* Override strong tag glow for party tooltips - party tooltips should use gold glow, not cyan */
.story-content strong .party-tooltip,
.story-content .party-tooltip {
  text-shadow: none !important;
  color: var(--accent-gold) !important;
}

.story-content strong .party-tooltip:hover,
.story-content .party-tooltip:hover {
  text-shadow: 0 0 8px var(--accent-gold) !important;
  color: var(--accent-gold) !important;
}

.story-content .bold-white {
  color: var(--text-primary);
  font-weight: bold;
  /* No glow effect */
}

/* ================================================
   GM Note Styling - Choose your preferred style!
   ================================================ */

/* OPTION 1: Whisper Style - Subtle and elegant (uncomment to use)
.story-content .gm-note {
  display: inline-block;
  background: color-mix(in srgb, var(--accent-primary) 3%, transparent);
  border-left: 2px solid var(--accent-alpha-30);
  padding: 0.3rem 0.75rem;
  margin: 0.25rem 0;
  border-radius: 4px;
  color: color-mix(in srgb, var(--accent-primary) 70%, transparent);
  font-weight: 400;
  font-style: italic;
  font-size: 0.95em;
  opacity: 0.85;
  line-height: 1.6;
  max-width: 100%;
  word-wrap: break-word;
  transition: all 0.3s ease;
}

.story-content .gm-note:hover {
  opacity: 1;
  background: var(--accent-alpha-5);
  border-left-color: var(--accent-alpha-50);
}
*/

/* OPTION 2: Minimalist Annotation - Almost invisible (uncomment to use)
.story-content .gm-note {
  display: inline-block;
  background: transparent;
  border: none;
  padding: 0.2rem 0.5rem;
  margin: 0.2rem 0;
  color: var(--text-muted);
  font-weight: 400;
  font-style: italic;
  font-size: 0.9em;
  opacity: 0.7;
  line-height: 1.6;
  max-width: 100%;
  word-wrap: break-word;
  transition: opacity 0.3s ease;
}

.story-content .gm-note:hover {
  opacity: 1;
  color: var(--accent-primary);
}
*/

/* OPTION 3: Soft Glow - Subtle box with elegant inner glow */
.story-content .gm-note {
  display: inline-block;
  background: rgba(20, 30, 48, 0.6);
  border: 1px solid var(--accent-alpha-20);
  padding: 0.35rem 0.8rem;
  margin: 0.3rem 0;
  border-radius: 6px;
  color: color-mix(in srgb, var(--accent-primary) 80%, white);
  font-weight: 400;
  font-style: italic;
  font-size: 0.95em;
  line-height: 1.6;
  max-width: 100%;
  word-wrap: break-word;
  box-shadow: inset 0 0 10px var(--accent-alpha-5);
  transition: all 0.3s ease;
}

.story-content .gm-note:hover {
  border-color: var(--accent-alpha-40);
  box-shadow: inset 0 0 15px var(--accent-alpha-10);
  color: var(--accent-primary);
}

/* OPTION 4: Inline Subtle (uncomment to use)
.story-content .gm-note {
  display: inline;
  background: color-mix(in srgb, var(--accent-primary) 4%, transparent);
  border-bottom: 1px dotted var(--accent-alpha-30);
  padding: 0.1rem 0.3rem;
  color: color-mix(in srgb, var(--accent-primary) 70%, white);
  font-weight: 400;
  font-style: italic;
  font-size: 0.95em;
  line-height: inherit;
  word-wrap: break-word;
  transition: all 0.3s ease;
}

.story-content .gm-note:hover {
  background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
  border-bottom-color: var(--accent-alpha-50);
  color: var(--accent-primary);
}
*/

.story-content div {
  margin: 0;
  padding: 0;
}

/* Skill Tooltip Styles */
.story-content .skill-tooltip {
  color: var(--accent-primary);
  cursor: help;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--accent-primary);
  transition: all 0.2s ease;
  position: relative;
}

.story-content .skill-tooltip:hover {
  color: var(--accent-secondary);
  text-decoration-color: var(--accent-secondary);
  text-shadow: 0 0 8px var(--accent-secondary);
}

.skill-tooltip-popup {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: 300px;
  min-width: 260px;
}

.skill-tooltip-popup.show {
  opacity: 1;
  transform: translateY(0);
}

/* Compact Tooltip Card - Quick read style */
.skill-tooltip-card {
  background: linear-gradient(135deg, var(--bg-tertiary) 0%, rgba(26, 31, 46, 0.98) 100%);
  border: 2px solid var(--border-primary);
  border-radius: 10px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  transition: all 0.2s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  transform: none !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 30px var(--accent-alpha-15);
}

.skill-tooltip-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  opacity: 1;
  z-index: 1;
}

/* Compact Header */
.skill-tooltip-card .skill-tooltip-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0.65rem 0.85rem;
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid var(--accent-alpha-10);
  gap: 0.4rem;
  position: relative;
}

.skill-tooltip-card .skill-tooltip-name {
  color: var(--accent-primary);
  font-size: 0.95rem;
  font-weight: 700;
  text-shadow: 0 0 8px var(--accent-alpha-25);
  line-height: 1.3;
  margin: 0;
  padding: 0;
}

.skill-tooltip-card .skill-tooltip-name::after {
  display: none; /* Remove underline for compact view */
}

.skill-tooltip-card .skill-tooltip-status {
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  text-align: left;
  padding: 0.2rem 0;
}

.skill-tooltip-card .skill-tooltip-status.ready {
  color: #22c55e;
}

.skill-tooltip-card .skill-tooltip-status.cooldown {
  color: #ef4444;
}

/* Compact Body */
.skill-tooltip-body {
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Compact Info Badges - Horizontal layout */
.skill-tooltip-info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.tooltip-info-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.5rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--accent-alpha-15);
  border-radius: 4px;
  font-size: 0.7rem;
  line-height: 1;
}

.tooltip-info-badge.tooltip-passive-badge {
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.3);
}

.tooltip-badge-label {
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.5px;
}

.tooltip-badge-value {
  color: var(--accent-primary);
  font-weight: 700;
  font-size: 0.75rem;
}

.tooltip-passive-badge .tooltip-badge-label {
  color: #a855f7;
}

/* Compact Description */
.skill-tooltip-description {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-secondary);
  margin: 0;
  padding: 0;
}

/* Compact Passive Hint */
.skill-tooltip-passive-hint {
  margin-top: 0.25rem;
  padding: 0.5rem;
  background: rgba(168, 85, 247, 0.08);
  border-left: 2px solid rgba(168, 85, 247, 0.4);
  border-radius: 3px;
}

.tooltip-hint-text {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--text-secondary);
  font-style: italic;
}

/* Party Tooltip Styles */
.story-content .party-tooltip {
  color: var(--accent-gold) !important;
  cursor: help;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--accent-gold);
  transition: all 0.2s ease;
  position: relative;
  /* Override any inherited text-shadow from parent elements */
  text-shadow: none !important;
}

.story-content .party-tooltip:hover {
  color: var(--accent-gold) !important;
  text-decoration-color: var(--accent-gold);
  text-shadow: 0 0 8px var(--accent-gold) !important;
}

.party-tooltip-popup {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: 280px;
  min-width: 240px;
}

.party-tooltip-popup.show {
  opacity: 1;
  transform: translateY(0);
}

/* Compact Party Tooltip Card */
.party-tooltip-card {
  background: linear-gradient(135deg, var(--bg-tertiary) 0%, rgba(26, 31, 46, 0.98) 100%);
  border: 2px solid var(--border-primary);
  border-radius: 10px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  transition: all 0.2s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  transform: none !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 30px color-mix(in srgb, var(--accent-gold) 15%, transparent);
}

.party-tooltip-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-gold), var(--accent-secondary));
  opacity: 1;
  z-index: 1;
}

/* Compact Party Header */
.party-tooltip-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0.65rem 0.85rem;
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid color-mix(in srgb, var(--accent-gold) 15%, transparent);
  gap: 0.35rem;
  position: relative;
}

.party-tooltip-name {
  color: var(--accent-gold);
  font-size: 0.95rem;
  font-weight: 700;
  text-shadow: 0 0 8px color-mix(in srgb, var(--accent-gold) 25%, transparent);
  line-height: 1.3;
  margin: 0;
  padding: 0;
}

.party-tooltip-rank-type {
  font-size: 0.7rem;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Compact Party Body */
.party-tooltip-body {
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Party Stats Row */
.party-tooltip-stat-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}

.party-tooltip-stat {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
}

.party-stat-label {
  color: var(--text-muted);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.party-stat-value {
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.2;
}

.party-stat-value-unknown {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  font-style: italic;
}

.party-stat-percent {
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 500;
  margin-left: 0.25rem;
}

/* Party Stat Bars */
.party-tooltip-bars {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.party-stat-bar {
  height: 4px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.party-stat-bar-fill {
  height: 100%;
  transition: width 0.3s ease;
  border-radius: 2px;
}

.party-stat-bar-hp {
  background: linear-gradient(90deg, #ff4655, rgba(255, 70, 85, 0.7));
  box-shadow: 0 0 6px rgba(255, 70, 85, 0.4);
}

.party-stat-bar-mp {
  background: linear-gradient(90deg, #4dd4ff, rgba(77, 212, 255, 0.7));
  box-shadow: 0 0 6px rgba(77, 212, 255, 0.4);
}

.placeholder-text {
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  padding: 2rem;
}

/* Choices Panel */
.choices-panel {
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(10px);
  border: 2px solid var(--border-primary);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: var(--shadow-panel);
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

.choices-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.choice-button {
  background: var(--bg-tertiary);
  border: 2px solid var(--border-primary);
  border-radius: 6px;
  padding: 1rem 1.5rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
  font-size: 0.95rem;
  position: relative;
  overflow: hidden;
}

.choice-button::before {
  content: '▶';
  margin-right: 0.75rem;
  color: var(--accent-primary);
}

.choice-button:hover:not(:disabled) {
  border-color: var(--accent-primary);
  box-shadow: var(--glow-md);
  transform: translateX(5px);
}

.choice-button:disabled {
  cursor: default;
}

.choice-button.selected {
  background: var(--accent-alpha-10);
  border-color: var(--accent-primary);
  box-shadow: var(--glow-md);
}

.choice-button strong {
  color: #ffffff;
  font-weight: 700;
}

.action-input-container {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  width: 100%;
  box-sizing: border-box;
}

.custom-action-input {
  flex: 1;
  min-width: 0;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-primary);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  color: var(--text-primary);
  font-size: 0.95rem;
  box-sizing: border-box;
}

.custom-action-input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: var(--glow-sm);
}

.custom-action-input::placeholder {
  color: var(--text-muted);
}

.btn-send {
  background: var(--accent-primary);
  border: none;
  color: var(--bg-primary);
  padding: 0.75rem 2rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.95rem;
  box-sizing: border-box;
}

.btn-send:hover {
  box-shadow: var(--glow-lg);
  transform: scale(1.05);
}

.btn-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-help-think {
  background: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--accent-secondary);
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-sizing: border-box;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-help-think:hover {
  background: white;
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 20px var(--accent-alpha-20);
  transform: scale(1.05);
}

.btn-help-think:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================
   Character Section
   ============================================ */

.character-section {
  position: sticky;
  top: 0;
  height: 100%;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  z-index: 2;
}

.character-quick-view {
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(10px);
  border: 2px solid var(--border-primary);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: var(--shadow-panel);
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  height: 100%;
}

/* Character Portrait */
.character-portrait {
  text-align: center;
  margin-bottom: 1.5rem;
}

.portrait-image {
  width: 100%;
  max-width: 300px;
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto 1rem;
  border: 3px solid var(--border-primary);
  border-radius: 12px;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  image-rendering: -webkit-optimize-contrast; /* Edge 79+ */
  image-rendering: -moz-crisp-edges; /* Firefox */
  image-rendering: crisp-edges; /* Standard */
}

.portrait-image:hover {
  border-color: var(--accent-primary);
  box-shadow: var(--glow-md);
  transform: scale(1.02);
}

.portrait-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  text-align: center;
  color: var(--text-secondary);
  font-size: clamp(0.85rem, 2vw, 1rem);
  padding: 1rem;
  line-height: 1.4;
  opacity: 0.7;
  transition: all 0.3s ease;
  pointer-events: none;
  -webkit-user-select: none; /* Safari 3+ */
  user-select: none;
}

.portrait-image:hover .portrait-placeholder {
  opacity: 1;
  color: var(--accent-primary);
}

/* Portrait Loading Spinner */
.portrait-loading-spinner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  z-index: 5;
  backdrop-filter: blur(4px);
}

.portrait-loading-spinner .spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: portrait-spin 0.8s linear infinite;
  box-shadow: 0 0 20px var(--accent-alpha-30);
}

@keyframes portrait-spin {
  to { transform: rotate(360deg); }
}

.character-name {
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  font-weight: 700;
  margin: 0.5rem 0 0.35rem 0;
  color: var(--accent-primary);
  text-align: center;
  line-height: 1.2;
}

.character-hunter-type {
  color: var(--text-secondary);
  font-size: clamp(0.85rem, 2vw, 0.95rem);
  font-weight: 500;
  margin: 0;
  text-align: center;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

/* Cropper Styles */
.cropper-container {
  background: var(--bg-tertiary);
  border: 2px solid var(--border-primary);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  max-height: 500px;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.cropper-image {
  max-width: 100%;
  max-height: 450px;
  display: block;
  width: auto;
  height: auto;
}

/* Cropper.js Library Overrides */
.cropper-container img {
  max-width: 100%;
  display: block;
}

.cropper-crop-box,
.cropper-modal {
  opacity: 0.5;
}

.cropper-view-box {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  box-shadow: 0 0 10px var(--accent-primary);
}

.cropper-controls {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.cropper-controls .btn-primary,
.cropper-controls .btn-secondary {
  padding: 0.75rem 2rem;
  font-size: 0.95rem;
}

/* Status Bars */
.status-bars {
  margin-bottom: 1.5rem;
}

.status-bar-container {
  margin-bottom: 1rem;
}

.status-bar-container:last-child {
  margin-bottom: 0;
}

.status-bar-container label {
  display: block;
  font-size: clamp(0.8rem, 2vw, 0.85rem);
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.status-bar {
  position: relative;
  height: 32px !important;
  min-height: 32px !important;
  background: linear-gradient(90deg, rgba(20, 30, 50, 0.8), rgba(30, 40, 60, 0.8));
  border: 2px solid var(--border-primary);
  border-radius: 12px;
  overflow: hidden;
  display: block !important;
  width: 100%;
}

.status-bar-fill {
  height: 100% !important;
  transition: width 0.5s ease;
  border-radius: 10px;
  display: block !important;
  position: relative;
  z-index: 10;
}

.hp-bar .status-bar-fill {
  background: linear-gradient(90deg, var(--hp-color) 0%, rgba(255, 70, 85, 0.8) 100%) !important;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3), 0 0 15px var(--hp-color) !important;
  min-width: 1px !important;
  height: 100% !important;
  display: block !important;
}

.mp-bar .status-bar-fill {
  background: linear-gradient(90deg, var(--mp-color) 0%, color-mix(in srgb, var(--accent-primary) 80%, transparent) 100%);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3), 0 0 15px var(--mp-color);
  min-width: 1px;
  height: 100%;
}

.status-bar-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--text-primary);
  font-size: clamp(0.75rem, 2vw, 0.85rem);
  font-weight: bold;
  text-shadow: 0 0 8px rgba(0, 0, 0, 1);
  z-index: 999;
  white-space: nowrap;
}

/* Quick Stats */
.quick-stats {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-primary);
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 0;
  font-size: clamp(0.85rem, 2vw, 0.95rem);
  min-height: 44px;
}

.stat-label {
  color: var(--text-secondary);
  white-space: nowrap;
  margin-right: auto;
  text-align: left;
  flex: 0 0 auto;
}

.stat-value {
  color: var(--text-primary);
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
  flex: 0 0 auto;
}

/* Core Stats */
.core-stats {
  margin-bottom: 1.5rem;
}

.subsection-title {
  font-size: clamp(0.95rem, 2.5vw, 1rem);
  margin-bottom: 0.75rem;
  color: var(--accent-primary);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.75rem;
}

.stat-item {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  padding: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 50px;
  transition: all 0.2s ease;
}

.stat-item:hover {
  border-color: var(--accent-primary);
  background: var(--accent-alpha-5);
}

.stat-name {
  color: var(--text-secondary);
  font-size: clamp(0.8rem, 2vw, 0.85rem);
  font-weight: 600;
}

.stat-number {
  color: var(--accent-primary);
  font-size: clamp(1rem, 2.5vw, 1.1rem);
  font-weight: bold;
}

/* Skills Preview */
.skills-preview {
  margin-top: 1.5rem;
}

.skills-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.empty-text {
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  padding: 1rem;
}

/* ============================================
   Notifications
   ============================================ */

.notification-container {
  position: fixed;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  pointer-events: none;
}

/* Position variants */
.notification-container.position-top-right {
  top: 20px;
  right: 20px;
}

.notification-container.position-top-left {
  top: 20px;
  left: 20px;
}

.notification-container.position-bottom-right {
  bottom: 20px;
  right: 20px;
  flex-direction: column-reverse;
}

.notification-container.position-bottom-left {
  bottom: 20px;
  left: 20px;
  flex-direction: column-reverse;
}

.notification-toast {
  background: var(--bg-secondary);
  border: 2px solid var(--accent-primary);
  border-radius: 8px;
  padding: 1rem 1.5rem;
  box-shadow: var(--glow-md), var(--shadow-panel);
  pointer-events: all;
  min-width: 300px;
}

/* Animations based on position */
.notification-container.position-top-right .notification-toast,
.notification-container.position-bottom-right .notification-toast {
  animation: slide-in-right 0.4s ease-out;
}

.notification-container.position-top-left .notification-toast,
.notification-container.position-bottom-left .notification-toast {
  animation: slide-in-left 0.4s ease-out;
}

.notification-toast.success {
  border-color: var(--stamina-color);
  box-shadow: 0 0 20px var(--stamina-color);
}

.notification-toast.error {
  border-color: var(--hp-color);
  box-shadow: 0 0 20px var(--hp-color);
}

.notification-toast.info {
  border-color: var(--accent-secondary);
}

@keyframes slide-in-right {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-left {
  from {
    transform: translateX(-400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ============================================
   Responsive Design
   ============================================ */

/* Tablets and small desktops */
@media (max-width: 1200px) {
  .main-container {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
  }
  
  .story-section {
    order: 1;
    width: 100%;
  }
  
  .character-section {
    position: relative;
    top: 0;
    max-height: none;
    margin-top: 2rem;
    order: 2;
    width: 100%;
  }
  
  .character-quick-view {
    padding: 1.5rem;
  }
  
  .portrait-image {
    max-width: 250px;
  }
  
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  }
}

/* iPad and tablet navigation (768px - 1024px) - Use hamburger menu */
@media (max-width: 1024px) and (min-width: 768px) {
  .top-nav {
    padding: 1rem 1.5rem;
    gap: 1rem;
    flex-wrap: nowrap;
  }
  
  .nav-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
  }
  
  .nav-left .logo {
    font-size: 1.35rem;
    letter-spacing: 1.5px;
    white-space: nowrap;
  }
  
  .mobile-menu-btn {
    display: block;
    font-size: 1.5rem;
    padding: 0.5rem 0.8rem;
    border-radius: 8px;
    transition: all 0.2s ease;
  }
  
  .mobile-menu-btn:hover {
    background: var(--accent-alpha-10);
    color: var(--accent-primary);
  }
  
  .nav-center {
    position: fixed;
    top: 0 !important;
    left: 0;
    width: 320px;
    max-width: 85vw;
    height: 100vh;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border-right: 2px solid var(--border-primary);
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;
    align-items: stretch;
    gap: 0 !important;
    padding: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    scroll-padding: 0 !important;
    scroll-padding-top: 0 !important;
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 200;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
  }
  
  .nav-center > .mobile-menu-header {
    order: -1;
    flex-shrink: 0;
  }
  
  .nav-center.active {
    transform: translateX(0);
    margin-top: 0 !important;
    scroll-padding-top: 0 !important;
  }
  
  .nav-center.active > .mobile-menu-header:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative;
    top: 0 !important;
  }
  
  /* Mobile Menu Header */
  .mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    top: 0 !important;
    padding-top: 0 !important;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 0 !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-top: none;
    border-bottom: 2px solid var(--border-primary);
    background: linear-gradient(135deg, rgba(77, 212, 255, 0.15), rgba(77, 212, 255, 0.08));
    width: 100%;
    flex-shrink: 0;
    min-height: 80px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
  
  .mobile-menu-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-primary);
    margin: 0;
    padding: 0;
    text-shadow: 0 0 15px var(--accent-alpha-40), 0 0 30px var(--accent-alpha-20);
    text-align: left;
    flex: 1;
    pointer-events: none;
    line-height: 1;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
  }
  
  .mobile-menu-close {
    background: transparent;
    border: 1px solid var(--accent-alpha-20);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 1.25rem;
    line-height: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    flex-shrink: 0;
    opacity: 0.7;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    pointer-events: auto;
    z-index: 10;
    position: relative;
  }
  
  .mobile-menu-close:hover {
    background: transparent;
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    opacity: 1;
  }
  
  /* Hide separators on mobile */
  .nav-separator {
    display: none;
  }
  
  /* Mobile Menu Content */
  .mobile-menu-content {
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  
  /* Style nav links for sidebar - matching desktop minimal aesthetic */
  .nav-center .nav-link {
    background: none;
    border: none;
    color: var(--text-secondary);
    padding: 1.25rem 2rem;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 500;
    width: 100%;
    text-align: left;
    display: block;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    letter-spacing: 0.3px;
    min-height: auto;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }
  
  .nav-center .nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 2rem;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px color-mix(in srgb, var(--accent-primary) 60%, transparent);
  }
  
  .nav-center .nav-link:hover {
    background: none;
    color: var(--text-primary);
    text-shadow: 0 0 12px var(--accent-alpha-40);
    transform: translateY(-1px);
    padding-left: 2rem;
  }
  
  .nav-center .nav-link:hover::before {
    width: calc(100% - 4rem);
  }
  
  .nav-center .nav-link.active {
    background: none;
    color: var(--accent-primary);
    text-shadow: 0 0 10px var(--accent-alpha-50);
    font-weight: 600;
    transform: none;
  }
  
  .nav-center .nav-link.active::before {
    width: calc(100% - 4rem);
    background: var(--accent-primary);
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent-primary) 80%, transparent);
  }
  
  .nav-btn {
    padding: 0.9rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    width: 100%;
    border: 2px solid var(--accent-alpha-40);
    min-height: 52px;
    border-radius: 8px;
    justify-content: flex-start;
  }
  
  .nav-btn:hover {
    background: var(--accent-alpha-10);
    border-color: var(--accent-primary);
    transform: translateX(5px);
  }
  
  .nav-right {
    gap: 1.25rem;
    margin-left: auto;
    flex-shrink: 0;
  }
  
  .sync-status {
    font-size: 0.85rem;
    padding: 0.45rem 0.65rem;
  }
  
  .user-profile {
    padding: 0.45rem 1rem 0.45rem 0.65rem;
  }
  
  .user-name {
    font-size: 0.85rem;
  }
  
  .user-avatar {
    width: 30px;
    height: 30px;
  }
}

/* Larger tablets - better spacing */
@media (max-width: 1200px) and (min-width: 1025px) {
  .nav-center {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .nav-btn {
    padding: 0.6rem 0.9rem;
    font-size: 0.8rem;
  }
}

/* Mobile devices */
@media (max-width: 767px) {
  /* Navigation */
  .top-nav {
    padding: 1rem;
    flex-wrap: nowrap;
    gap: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 200;
  }
  
  .nav-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
  }
  
  .nav-left .logo {
    font-size: 1.1rem;
    letter-spacing: 1px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }
  
  .mobile-menu-btn {
    display: block;
  }
  
  .nav-center {
    position: fixed;
    top: 0 !important;
    left: 0;
    width: 300px;
    max-width: 80vw;
    height: 100vh;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border-right: 2px solid var(--border-primary);
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;
    align-items: stretch;
    gap: 0 !important;
    padding: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    scroll-padding: 0 !important;
    scroll-padding-top: 0 !important;
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 200;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
  }
  
  .nav-center > .mobile-menu-header {
    order: -1;
    flex-shrink: 0;
  }
  
  .nav-center.active {
    transform: translateX(0);
    margin-top: 0 !important;
    scroll-padding-top: 0 !important;
  }
  
  .nav-center.active > .mobile-menu-header:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative;
    top: 0 !important;
  }
  
  /* Mobile Menu Header */
  .mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    top: 0 !important;
    padding-top: 0 !important;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
    padding-bottom: 0 !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-top: none;
    border-bottom: 2px solid var(--border-primary);
    background: linear-gradient(135deg, rgba(77, 212, 255, 0.15), rgba(77, 212, 255, 0.08));
    width: 100%;
    flex-shrink: 0;
    min-height: 72px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
  
  .mobile-menu-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--accent-primary);
    margin: 0;
    padding: 0;
    text-shadow: 0 0 15px var(--accent-alpha-40), 0 0 30px var(--accent-alpha-20);
    text-align: left;
    flex: 1;
    pointer-events: none;
    line-height: 1;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
  }
  
  .mobile-menu-close {
    background: transparent;
    border: 1px solid var(--accent-alpha-20);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 1.15rem;
    line-height: 1;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    flex-shrink: 0;
    opacity: 0.7;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    pointer-events: auto;
    z-index: 10;
    position: relative;
  }
  
  .mobile-menu-close:hover {
    background: transparent;
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    opacity: 1;
  }
  
  /* Hide separators on mobile */
  .nav-separator {
    display: none;
  }
  
  /* Mobile Menu Content */
  .mobile-menu-content {
    padding: 1.75rem 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  
  /* Style nav links for sidebar - matching desktop minimal aesthetic */
  .nav-center .nav-link {
    background: none;
    border: none;
    color: var(--text-secondary);
    padding: 1.125rem 1.75rem;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 500;
    width: 100%;
    text-align: left;
    display: block;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    letter-spacing: 0.3px;
    min-height: auto;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }
  
  .nav-center .nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 1.75rem;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px color-mix(in srgb, var(--accent-primary) 60%, transparent);
  }
  
  .nav-center .nav-link:hover {
    background: none;
    color: var(--text-primary);
    text-shadow: 0 0 12px var(--accent-alpha-40);
    transform: translateY(-1px);
    padding-left: 1.75rem;
  }
  
  .nav-center .nav-link:hover::before {
    width: calc(100% - 3.5rem);
  }
  
  .nav-center .nav-link.active {
    background: none;
    color: var(--accent-primary);
    text-shadow: 0 0 10px var(--accent-alpha-50);
    font-weight: 600;
    transform: none;
  }
  
  .nav-center .nav-link.active::before {
    width: calc(100% - 3.5rem);
    background: var(--accent-primary);
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent-primary) 80%, transparent);
  }
  
  .nav-right {
    margin-left: auto;
    gap: 0.75rem;
  }
  
  .nav-btn {
    padding: 0.85rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    border: 2px solid var(--accent-alpha-50);
    border-radius: 8px;
    min-height: 44px;
    width: 100%;
  }
  
  .nav-btn:hover {
    min-height: 44px;
  }
  
  /* Main container */
  .main-container {
    display: flex;
    flex-direction: column;
    padding: 0.85rem;
    padding-top: calc(0.85rem + 80px); /* Account for fixed nav height */
    gap: 1.25rem;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
  }
  
  .story-panel {
    flex: 1;
    max-height: 500px;
    padding: 1.25rem;
  }
  
  /* Smaller ribbon on mobile */
  .ribbon-bookmark {
    right: 20px;
  }
  
  .ribbon-content {
    width: 40px;
    height: 60px;
  }
  
  .bookmark-icon {
    font-size: 1.5rem;
  }
  
  .ribbon-tail {
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 12px solid var(--bg-tertiary);
  }
  
  .ribbon-bookmark.bookmarked .ribbon-tail {
    border-top-color: var(--accent-alpha-40);
  }
  
  .choices-panel {
    padding: 1.25rem;
  }
  
  /* Story content */
  .story-content {
    font-size: 1rem;
    line-height: 1.6;
  }
  
  /* Turn navigation */
  .turn-navigation {
    flex-wrap: wrap;
    padding: 1rem;
    gap: 0.75rem;
  }
  
  .turn-nav-controls {
    width: 100%;
    gap: 0.5rem;
  }
  
  .turn-nav-controls .turn-btn {
    flex: 1;
    min-height: 44px;
    padding: 0.75rem;
  }
  
  .turn-counter {
    width: 100%;
    font-size: 1rem;
    padding: 0.75rem;
  }
  
  .turn-nav-actions {
    width: 100%;
    gap: 0.5rem;
    justify-content: center;
  }
  
  .turn-btn {
    min-height: 44px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    flex: 1;
  }
  
  /* Choices */
  .choice-button {
    padding: 1rem 1.25rem;
    font-size: 1rem;
    min-height: 50px;
  }
  
  .action-input-container {
    gap: 0.5rem;
    align-items: center;
  }
  
  .custom-action-input {
    flex: 1;
    padding: 0.85rem 1rem;
    font-size: 1rem;
    min-height: 44px;
  }
  
  .btn-send {
    padding: 0.85rem 1rem;
    font-size: 1rem;
    min-height: 44px;
    min-width: 44px;
    flex-shrink: 0;
  }
  
  .btn-help-think {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }
  
  /* Modal */
  .modal-content {
    padding: 1.5rem;
    max-width: 95vw;
    margin: 20px auto;
  }
  
  .modal-header h2 {
    font-size: 1.3rem;
  }
  
  /* Sessions Modal Mobile Optimization */
  .sessions-list {
    grid-template-columns: 1fr;
    gap: 0.85rem;
    max-height: 55vh;
    padding-right: 0.25rem;
  }
  
  .session-card-content {
    padding: 1rem;
  }
  
  .session-card-title {
    font-size: 1.05rem;
  }
  
  .session-card-rank {
    padding: 0.25rem 0.65rem;
    font-size: 0.8rem;
    min-width: 28px;
  }
  
  .session-card-stats {
    gap: 0.5rem;
  }
  
  .session-stat {
    padding: 0.6rem;
  }
  
  .session-stat-label {
    font-size: 0.7rem;
  }
  
  .session-stat-value {
    font-size: 0.95rem;
    min-height: 2.4rem;
    line-height: 1.4;
    word-wrap: break-word;
  }
  
  .session-btn {
    padding: 0.6rem 0.85rem;
    font-size: 0.85rem;
    min-height: 44px;
  }
  
  .sessions-actions {
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
  }
  
  /* Share Modal Mobile Optimization */
  .share-info {
    padding: 1.25rem;
  }
  
  .share-description {
    font-size: 0.9rem;
    margin-bottom: 1rem;
  }
  
  .share-link-container {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .share-link-input {
    width: 100%;
    padding: 0.85rem 1rem;
    font-size: 0.85rem;
    min-height: 48px;
  }
  
  .share-link-container .btn-primary {
    width: 100%;
    padding: 0.85rem 1rem;
    min-height: 48px;
  }
  
  .share-note {
    font-size: 0.8rem;
    padding-top: 0.75rem;
  }
  
  /* Skills Modal Mobile Optimization */
  .modal-large {
    max-width: 100%;
    width: 95vw;
    margin: 1rem auto;
  }
  
  .modal-body {
    overflow-x: hidden;
    width: 100%;
    box-sizing: border-box;
    padding: 1rem;
  }
  
  #skillsContent {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0;
    width: 100%;
  }
  
  .skill-card {
    border-radius: 10px;
    max-width: 100%;
    min-width: 0;
  }
  
  .skill-card:hover {
    transform: none;
  }
  
  .skill-header {
    padding: 1rem;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
  }
  
  .skill-copy-btn {
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.3rem;
  }
  
  .skill-copy-btn svg {
    width: 14px;
    height: 14px;
  }
  
  .skill-name {
    font-size: 1.1rem;
    word-break: break-word;
    overflow-wrap: anywhere;
    min-width: 0;
    padding-bottom: 0.65rem;
    margin-bottom: 0.65rem;
  }
  
  .skill-name::after {
    width: 50%;
  }
  
  .skill-status {
    font-size: 0.75rem;
  }
  
  .skill-card-body {
    padding: 1rem;
    gap: 0.85rem;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
  }
  
  .skill-info-row {
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    padding: 0.75rem;
  }
  
  .info-label {
    font-size: 0.7rem;
  }
  
  .info-value {
    font-size: 0.9rem;
  }
  
  .skill-description {
    font-size: 0.9rem;
    padding: 0.75rem;
  }
  
  .skill-passive-effect {
    padding: 0.75rem;
    font-size: 0.9rem;
  }
  
  .passive-effect-label {
    font-size: 0.75rem;
    margin-bottom: 0.4rem;
  }
  
  .passive-effect-text {
    font-size: 0.9rem;
    padding-left: 0.4rem;
  }
  
  .skill-damage-calc {
    padding: 0.75rem;
  }
  
  .calc-formula {
    font-size: 0.8rem;
  }
  
  /* Equipment grid */
  .equipment-grid {
    grid-template-columns: 1fr;
  }
  
  .equipment-slot {
    padding: 1rem;
    border-radius: 10px;
  }
  
  .equipment-item-name {
    font-size: 1.1rem;
  }
  
  .equipment-slot-header {
    margin: -1rem -1rem 0.75rem -1rem;
    padding: 0.65rem 0.85rem;
  }
  
  .equipment-stats {
    padding: 0.75rem;
    gap: 0.65rem;
  }
  
  .equipment-description {
    font-size: 0.9rem;
    padding: 0.65rem;
  }
  
  /* Enemies for mobile */
  .enemy-card {
    border-radius: 10px;
    padding: 1rem;
  }
  
  .enemy-header {
    margin: -1rem -1rem 0.75rem -1rem;
    padding: 0.75rem 1rem;
    gap: 1rem;
  }
  
  .enemy-name {
    font-size: 1.15rem;
  }
  
  .enemy-badge {
    padding: 0.5rem 0.9rem;
    font-size: 0.8rem;
  }
  
  .enemy-info-row {
    padding: 0.85rem;
    gap: 0.75rem;
  }
  
  /* Party for mobile */
  .party-member {
    border-radius: 10px;
    padding: 1rem;
    gap: 1rem;
  }
  
  .party-member-avatar {
    width: 55px;
    height: 55px;
    font-size: 1.6rem;
  }
  
  .party-member-name {
    font-size: 1.15rem;
  }
  
  .party-member-stats {
    padding: 0.85rem;
    gap: 0.75rem;
  }
  
  /* Equipment Image Mobile Fix */
  .equipment-image-preview {
    width: 100%;
    max-width: min(250px, calc(100vw - 4rem));
    height: auto;
    aspect-ratio: 1 / 1;
    padding: 0.5rem;
    margin: 0.75rem auto;
  }
  
  .equipment-image-preview img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
  }
  
  /* Ensure equipment slots are properly sized */
  .equipment-slot {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Mobile ordering - story first, then character */
  .story-section {
    order: 1;
    width: 100%;
    max-width: 100%;
  }
  
  /* Character section */
  .character-section {
    position: relative;
    top: 0;
    width: 100%;
    max-width: 100%;
    order: 2;
  }
  
  .character-quick-view {
    padding: 1rem;
    width: 100%;
    box-sizing: border-box;
  }
  
  .portrait-image {
    max-width: min(200px, 60vw);
    width: 100%;
  }
  
  .status-bars {
    margin-bottom: 1rem;
  }
  
  .status-bar-container {
    margin-bottom: 0.75rem;
  }
  
  .quick-stats {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
  }
  
  .core-stats {
    margin-bottom: 1rem;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
  
  .stat-item {
    padding: 0.5rem 0.65rem;
    min-height: 46px;
  }
  
  /* Notification */
  .notification-toast {
    right: 10px;
    left: 10px;
    min-width: auto;
    max-width: calc(100vw - 20px);
    font-size: 0.95rem;
  }
}

/* Small phones */
@media (max-width: 480px) {
  .top-nav {
    padding: 0.65rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 200;
  }
  
  .nav-left .logo {
    font-size: 1rem;
    letter-spacing: 0.5px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    max-width: calc(100vw - 140px); /* Prevent overlap: account for hamburger menu (left) and user profile (right) */
    padding: 0 15px; /* Allow space for glow effects to extend */
  }
  
  .nav-left .logo .logo-text {
    max-width: 100%;
    /* Don't use overflow: hidden here as it clips glow effects on child elements */
  }
  
  .mobile-menu-btn {
    padding: 0.5rem 0.65rem;
    margin-right: 0.65rem;
    font-size: 1.3rem;
  }
  
  .sync-status {
    display: none;
  }
  
  .user-name {
    display: none;
  }
  
  .user-avatar {
    width: 32px;
    height: 32px;
  }
  
  /* Update menu header for small phones */
  .mobile-menu-header {
    padding-top: 0;
    padding-right: 1rem;
    padding-bottom: 0.85rem;
    padding-left: 1rem;
    margin-top: 0;
    margin-bottom: 0;
  }
  
  .mobile-menu-title {
    font-size: 1rem;
  }
  
  .mobile-menu-close {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    font-size: 1.35rem;
    right: 1rem;
    /* Ensure touch events work properly on Android Chrome */
    -webkit-tap-highlight-color: rgba(77, 212, 255, 0.3);
    touch-action: manipulation;
  }
  
  .mobile-menu-close:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    opacity: 1;
  }
  
  /* Update nav links for small phones */
  .nav-center .nav-link {
    padding: 0.85rem 1rem;
    font-size: 0.9rem;
    min-height: 48px;
    border: none !important;
    border-bottom: none !important;
  }
  
  .nav-center .nav-link:hover {
    padding-left: 1.25rem;
  }
  
  /* Hide separators on small phones */
  .nav-separator {
    display: none;
  }
  
  .nav-btn {
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
  }
  
  /* Sessions Modal for Small Phones */
  .modal-content {
    padding: 1rem;
    width: 95%;
    max-height: 85vh;
  }
  
  .modal-header {
    padding-bottom: 0.85rem;
    margin-bottom: 0.85rem;
  }
  
  .modal-header h2 {
    font-size: 1.15rem;
  }
  
  .modal-close {
    width: 36px;
    height: 36px;
    font-size: 1.75rem;
  }
  
  .sessions-list {
    max-height: 50vh;
    gap: 0.75rem;
  }
}

/* Very small phones (300px and below) - Fix logo overlap */
@media (max-width: 360px) {
  .top-nav {
    padding: 0.5rem 0.4rem;
    gap: 0.5rem;
  }
  
  .nav-left .logo {
    font-size: 0.85rem;
    letter-spacing: 0.3px;
    max-width: calc(100vw - 120px); /* More space reserved for hamburger menu and user profile */
    padding: 0 12px; /* Allow space for glow effects to extend */
  }
  
  .nav-left .logo .logo-text {
    max-width: 100%;
    /* Don't use overflow: hidden here as it clips glow effects on child elements */
  }
  
  .logo-text {
    font-size: 0.85rem;
  }
  
  .logo-solo {
    font-size: 0.85rem !important;
  }
  
  .logo-gemini {
    font-size: 0.85rem !important;
  }
  
  .mobile-menu-btn {
    padding: 0.4rem 0.5rem;
    margin-right: 0.5rem;
    font-size: 1.2rem;
  }
  
  .user-profile {
    padding: 0.4rem 0.5rem 0.4rem 0.5rem;
    gap: 0.4rem;
    min-width: auto;
  }
  
  .user-avatar {
    width: 28px;
    height: 28px;
  }
  
  .nav-right {
    gap: 0.5rem;
    flex-shrink: 0;
  }
}

/* Continue with additional mobile styles for 480px */
@media (max-width: 480px) {
  /* Enemies for small phones */
  .enemy-card {
    border-radius: 8px;
    padding: 0.75rem;
  }
  
  .enemy-header {
    margin: -0.75rem -0.75rem 0.75rem -0.75rem;
    padding: 0.65rem 0.75rem;
    gap: 0.75rem;
  }
  
  .enemy-name {
    font-size: 1.1rem;
  }
  
  .enemy-badge {
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
  }
  
  .enemy-info-row {
    padding: 0.75rem;
    gap: 0.65rem;
  }
  
  /* Party for small phones */
  .party-member {
    border-radius: 8px;
    padding: 0.75rem;
    gap: 0.75rem;
  }
  
  .party-member-avatar {
    width: 45px;
    height: 45px;
    font-size: 1.35rem;
    border: 2px solid var(--accent-alpha-30);
  }
  
  .party-member-name {
    font-size: 1.1rem;
  }
  
  .party-member-stats {
    padding: 0.65rem;
    gap: 0.5rem;
  }
  
  .main-container {
    display: flex;
    flex-direction: column;
    padding: 0.65rem;
    padding-top: calc(0.65rem + 75px); /* Account for fixed nav height */
    gap: 1rem;
  }
  
  /* Mobile ordering - story first, then character */
  .story-section {
    order: 1;
    width: 100%;
  }
  
  .character-section {
    order: 2;
    width: 100%;
  }
  
  .story-panel {
    flex: 1;
    max-height: 400px;
    padding: 1rem;
  }
  
  .choices-panel {
    padding: 0.75rem;
  }
  
  .action-input-container {
    gap: 0.4rem;
    align-items: center;
    margin-top: 0.75rem;
  }
  
  .custom-action-input {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 0.65rem;
    font-size: 0.9rem;
    min-height: 40px;
  }
  
  .btn-send {
    padding: 0.75rem 0.85rem;
    font-size: 0.9rem;
    min-height: 40px;
    min-width: 40px;
    flex-shrink: 0;
  }
  
  .btn-help-think {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }
  
  .story-content {
    font-size: 0.95rem;
  }
  
  .turn-btn {
    padding: 0.65rem 0.75rem;
    font-size: 0.9rem;
    min-height: 40px;
  }
  
  .choice-button {
    padding: 0.85rem 1rem;
    font-size: 0.95rem;
    min-height: 44px;
  }
  
  .portrait-image {
    max-width: min(150px, 50vw);
  }
  
  .character-quick-view {
    padding: 0.85rem;
  }
  
  .status-bars {
    margin-bottom: 0.85rem;
  }
  
  .status-bar-container {
    margin-bottom: 0.65rem;
  }
  
  .quick-stats {
    margin-bottom: 0.85rem;
    padding-bottom: 0.85rem;
  }
  
  .core-stats {
    margin-bottom: 0.85rem;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
  }
  
  .stat-item {
    padding: 0.45rem 0.5rem;
    min-height: 42px;
  }
  
  /* Skills & Enemies styles moved to main section */
  
  /* Keyboard hint button */
  .keyboard-hint-btn {
    display: none;
  }
  
  /* Footer */
  .app-footer {
    padding: 1rem;
  }
  
  .footer-content {
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.8rem;
  }
  
  .footer-left,
  .footer-center,
  .footer-right {
    gap: 0.5rem;
  }
  
  .footer-brand {
    font-size: 0.85rem;
  }
  
  .footer-version {
    font-size: 0.7rem;
  }
  
  .auto-save-indicator {
    top: 5rem;
    right: 1rem;
    padding: 0.5rem 0.75rem;
  }
}

/* ============================================
   Skills & Enemies Display - Redesigned
   ============================================ */

/* Skills Display Container */
#skillsContent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 1.25rem;
  padding: 0.5rem;
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
}

/* Large screens - show more cards per row */
@media (min-width: 1400px) {
  #skillsContent {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 1.5rem;
  }
  
  .skill-card {
    border-radius: 14px;
  }
  
  .skill-header {
    padding: 1.5rem 1.75rem;
  }
  
  .skill-name {
    font-size: 1.35rem;
  }
  
  .skill-card-body {
    padding: 1.5rem 1.75rem;
  }
  
  /* Equipment for tablets */
  .equipment-slot {
    border-radius: 14px;
    padding: 1.75rem;
  }
  
  .equipment-slot-header {
    margin: -1.75rem -1.75rem 1rem -1.75rem;
    padding: 1rem 1.25rem;
  }
  
  .equipment-item-name {
    font-size: 1.35rem;
  }
  
  .equipment-stats {
    padding: 1.25rem;
    gap: 1rem;
  }
  
  .equipment-description {
    padding: 1rem;
    font-size: 1rem;
  }
  
  /* Enemies for tablets */
  .enemy-card {
    border-radius: 14px;
    padding: 1.75rem;
  }
  
  .enemy-header {
    margin: -1.75rem -1.75rem 1.25rem -1.75rem;
    padding: 1rem 1.25rem;
    gap: 1.25rem;
  }
  
  .enemy-name {
    font-size: 1.35rem;
  }
  
  .enemy-badge {
    padding: 0.65rem 1.25rem;
    font-size: 0.9rem;
  }
  
  .enemy-info-row {
    padding: 1.25rem;
    gap: 1rem;
  }
  
  /* Party for tablets */
  .party-member {
    border-radius: 14px;
    padding: 1.75rem;
    gap: 1.25rem;
  }
  
  .party-member-avatar {
    width: 70px;
    height: 70px;
    font-size: 2rem;
  }
  
  .party-member-name {
    font-size: 1.35rem;
  }
  
  .party-member-stats {
    padding: 1.25rem;
    gap: 1rem;
  }
}

/* Empty State for Skills */
#skillsContent .empty-text {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 2rem;
  color: var(--text-muted);
  font-size: 1.1rem;
  background: var(--bg-tertiary);
  border: 2px dashed var(--border-primary);
  border-radius: 12px;
}

.skill-filters {
  margin-bottom: 1.5rem;
}

/* Modern Skill Card Design */
.skill-card {
  background: linear-gradient(135deg, var(--bg-tertiary) 0%, rgba(26, 31, 46, 0.95) 100%);
  border: 2px solid var(--border-primary);
  border-radius: 12px;
  padding: 0;
  margin-bottom: 0;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  display: flex;
  flex-direction: column;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.skill-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.skill-card:hover {
  border-color: var(--accent-primary);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px var(--accent-alpha-20);
}

.skill-card:hover::before {
  opacity: 1;
}

@media (hover: none) {
  .skill-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}

/* Skill Card Header */
.skill-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 1.25rem 1.5rem;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid var(--accent-alpha-10);
  gap: 0;
  position: relative;
}

.skill-name {
  color: var(--accent-primary);
  font-size: 1.25rem;
  font-weight: 700;
  text-shadow: 0 0 10px var(--accent-alpha-30);
  line-height: 1.3;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  position: relative;
}

.skill-name::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-alpha-30), transparent);
}

/* Simple Text-Based Skill Status */
.skill-status {
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  text-align: center;
}

/* Ready State */
.skill-status.ready {
  color: #22c55e;
}

/* Cooldown State */
.skill-status.cooldown {
  color: #ef4444;
}

/* Skill Copy Button */
.skill-copy-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.4;
  transition: all 0.2s ease;
  color: var(--text-secondary);
  border-radius: 4px;
}

.skill-copy-btn:hover {
  opacity: 1;
  background: rgba(77, 212, 255, 0.15);
  color: var(--accent-primary);
}

.skill-copy-btn:active {
  opacity: 0.7;
  transform: scale(0.95);
}

.skill-copy-btn svg {
  width: 16px;
  height: 16px;
}

/* Skill Card Body */
.skill-card-body {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
}

/* Skill Info Grid */
.skill-info-row,
.enemy-info-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--accent-alpha-10);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.skill-info-item,
.enemy-info-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  overflow: hidden;
}

/* Shared info labels and values for Skills & Enemies */
.info-label {
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.info-value {
  color: var(--accent-primary);
  font-size: 1rem;
  font-weight: bold;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.info-value.rank-e,
.info-value.rank-E {
  background: linear-gradient(135deg, #94a3b8, #64748b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
  font-weight: 900;
}

.info-value.rank-d,
.info-value.rank-D {
  background: linear-gradient(135deg, #a8b5c6, #78849a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
  font-weight: 900;
}

.info-value.rank-c,
.info-value.rank-C {
  background: linear-gradient(135deg, #86efac, #4ade80, #22c55e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.6));
  font-weight: 900;
}

.info-value.rank-b,
.info-value.rank-B {
  background: linear-gradient(135deg, #93c5fd, #60a5fa, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.8));
  font-weight: 900;
}

.info-value.rank-a,
.info-value.rank-A {
  background: linear-gradient(135deg, #e9d5ff, #c084fc, #a855f7, #9333ea);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 12px rgba(168, 85, 247, 1)) 
          drop-shadow(0 0 20px rgba(168, 85, 247, 0.5));
  font-weight: 900;
  animation: rank-epic-pulse 2s ease-in-out infinite, rank-gradient-shift 3s ease infinite;
  position: relative;
}

.info-value.rank-s,
.info-value.rank-S {
  background: linear-gradient(135deg, #fff7b0, #fef08a, #fbbf24, #f59e0b, #eab308, #ca8a04);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 15px rgba(251, 191, 36, 1)) 
          drop-shadow(0 0 25px rgba(251, 191, 36, 0.6))
          drop-shadow(0 0 40px rgba(251, 191, 36, 0.3));
  font-weight: 900;
  animation: rank-legendary-glow 1.5s ease-in-out infinite, 
             rank-gradient-shift 4s ease infinite;
  position: relative;
}

.info-value.rank-ss,
.info-value.rank-SS {
  background: linear-gradient(135deg, #fef2f2, #fecaca, #ff6b7a, #ff4655, #ef4444, #dc2626);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 20px rgba(255, 70, 85, 1)) 
          drop-shadow(0 0 35px rgba(255, 70, 85, 0.8))
          drop-shadow(0 0 50px rgba(255, 70, 85, 0.5));
  font-weight: 900;
  animation: rank-mythic-pulse 1.2s ease-in-out infinite, 
             rank-gradient-shift 3s ease infinite;
  position: relative;
}

.skill-description {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(77, 212, 255, 0.08), rgba(77, 212, 255, 0.03));
  margin: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  box-sizing: border-box;
}

/* Passive Effect Section */
.skill-passive-effect {
  padding: 1rem;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.12), rgba(168, 85, 247, 0.05));
  border-top: 1px solid rgba(168, 85, 247, 0.3);
  border-bottom: 1px solid rgba(168, 85, 247, 0.3);
  margin: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  box-sizing: border-box;
}

.passive-effect-label {
  color: #a855f7;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 8px rgba(168, 85, 247, 0.5);
}

.passive-effect-text {
  color: var(--text-primary);
  font-size: 0.95rem;
  line-height: 1.6;
  padding-left: 0.5rem;
}

.skill-damage-calc {
  padding: 1rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--accent-alpha-15);
  margin: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow-x: auto;
  max-width: 100%;
  box-sizing: border-box;
}

.calc-label {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  word-wrap: break-word;
}

.calc-formula {
  color: var(--text-primary);
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
  font-weight: 600;
}

.calc-result {
  color: var(--accent-primary);
  font-weight: bold;
  font-size: 1.1rem;
  text-shadow: var(--glow-sm);
}

/* Enemies Display */
.enemy-card {
  background: linear-gradient(135deg, var(--bg-tertiary) 0%, rgba(26, 31, 46, 0.95) 100%);
  border: 2px solid var(--border-primary);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.enemy-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.enemy-card:hover::before {
  opacity: 1;
}

.enemy-card.boss::before {
  background: linear-gradient(90deg, var(--accent-gold), #ffaa00);
}

.enemy-card.boss {
  border-color: var(--accent-gold);
}

.enemy-card.boss:hover {
  border-color: var(--accent-gold);
  box-shadow: 0 8px 24px rgba(255, 215, 0, 0.3);
}

.enemy-card.normal {
  border-color: var(--border-primary);
}

.enemy-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px var(--accent-alpha-20);
}

@media (hover: none) {
  .enemy-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}

/* Death Overlay */
.enemy-card.dead {
  filter: grayscale(50%);
  opacity: 0.85;
}

.death-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.85) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  backdrop-filter: blur(2px);
  animation: death-overlay-fade-in 0.5s ease-out;
}

.death-text {
  font-size: 4.5rem;
  font-weight: 900;
  font-family: 'Kanit', 'Prompt', 'Chakra Petch', 'Sarabun', 'Noto Sans Thai', sans-serif;
  letter-spacing: 0.3rem;
  color: #fff;
  text-shadow: 
    0 0 30px rgba(220, 38, 38, 1),
    0 0 50px rgba(220, 38, 38, 0.9),
    0 0 70px rgba(220, 38, 38, 0.7),
    0 0 90px rgba(220, 38, 38, 0.5),
    0 4px 12px rgba(0, 0, 0, 1),
    3px 3px 0 rgba(220, 38, 38, 0.8),
    -3px -3px 0 rgba(220, 38, 38, 0.8),
    0 0 5px #fff;
  animation: death-text-pulse 2s ease-in-out infinite;
  position: relative;
}

.death-text::before {
  content: 'พ่ายแพ้';
  position: absolute;
  top: 0;
  left: 0;
  color: rgba(255, 100, 100, 0.6);
  filter: blur(20px);
  opacity: 0.8;
  animation: death-glow-pulse 1.5s ease-in-out infinite;
}

@keyframes death-overlay-fade-in {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(2px);
  }
}

@keyframes death-text-pulse {
  0%, 100% {
    text-shadow: 
      0 0 30px rgba(220, 38, 38, 1),
      0 0 50px rgba(220, 38, 38, 0.9),
      0 0 70px rgba(220, 38, 38, 0.7),
      0 0 90px rgba(220, 38, 38, 0.5),
      0 4px 12px rgba(0, 0, 0, 1),
      3px 3px 0 rgba(220, 38, 38, 0.8),
      -3px -3px 0 rgba(220, 38, 38, 0.8),
      0 0 5px #fff;
    transform: scale(1);
  }
  50% {
    text-shadow: 
      0 0 45px rgba(220, 38, 38, 1),
      0 0 70px rgba(220, 38, 38, 1),
      0 0 95px rgba(220, 38, 38, 0.9),
      0 0 120px rgba(220, 38, 38, 0.7),
      0 4px 12px rgba(0, 0, 0, 1),
      4px 4px 0 rgba(220, 38, 38, 1),
      -4px -4px 0 rgba(220, 38, 38, 1),
      0 0 10px #fff;
    transform: scale(1.08);
  }
}

@keyframes death-glow-pulse {
  0%, 100% {
    opacity: 0.8;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

.enemy-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid var(--accent-alpha-10);
  gap: 1rem;
  position: relative;
  margin: -1.5rem -1.5rem 1rem -1.5rem;
  border-radius: 12px 12px 0 0;
}

.enemy-name {
  color: var(--accent-primary);
  font-size: 1.25rem;
  font-weight: 700;
  text-shadow: 0 0 10px var(--accent-alpha-30);
  line-height: 1.3;
  flex: 1;
  position: relative;
}

.enemy-badge {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--accent-gold);
  color: #000;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.enemy-badge .boss-icon {
  height: 24px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.enemy-card.normal .enemy-badge {
  background: rgba(0, 0, 0, 0.4);
  color: var(--text-muted);
  border: 1px solid var(--border-primary);
  box-shadow: 0 0 5px var(--accent-alpha-10);
}

.enemy-hp {
  margin-top: 1rem;
}

.hp-label {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.hp-bar-container {
  position: relative;
  height: 28px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 70, 85, 0.3);
  border-radius: 6px;
  overflow: hidden;
}

.hp-bar {
  width: 100%;
  height: 100%;
  position: relative;
}

.hp-fill {
  height: 100%;
  transition: width 0.3s ease;
  border-radius: 5px;
  box-shadow: 0 0 10px var(--hp-color);
}

.hp-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--text-primary);
  font-weight: bold;
  font-size: 0.85rem;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
  z-index: 2;
}

/* ============================================
   UI Enhancements
   ============================================ */

/* Keyboard Shortcuts Hint Button */
.keyboard-hint-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-alpha-20), var(--accent-alpha-10));
  border: 2px solid var(--accent-alpha-30);
  color: var(--accent-primary);
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 999;
  opacity: 0.5;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.keyboard-hint-btn:hover {
  opacity: 1;
  background: linear-gradient(135deg, var(--accent-alpha-30), var(--accent-alpha-20));
  border-color: var(--accent-primary);
  box-shadow: 0 0 20px var(--accent-alpha-40);
  transform: scale(1.1);
}

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

/* Character Progression Styles */
.progression-card {
  background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
  border: 2px solid var(--border-primary);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
}

.progression-card:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 0 20px var(--accent-alpha-30);
  transform: translateY(-4px);
}

.progression-icon {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.progression-value {
  font-size: 2rem;
  font-weight: bold;
  color: var(--accent-primary);
  margin-bottom: 0.25rem;
  text-shadow: 0 0 10px var(--accent-alpha-50);
}

.progression-label {
  font-size: 0.9rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.progression-timeline {
  position: relative;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Analytics Stats Styling */
.analytics-stat {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--accent-alpha-5);
  border: 1px solid var(--accent-alpha-20);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.analytics-stat:hover {
  background: var(--accent-alpha-10);
  border-color: var(--accent-alpha-40);
  transform: translateX(4px);
}

.analytics-icon {
  font-size: 2rem;
  opacity: 0.8;
}

.analytics-value {
  font-size: 1.75rem;
  font-weight: bold;
  color: var(--accent-primary);
  text-shadow: 0 0 10px var(--accent-alpha-30);
  line-height: 1;
}

.analytics-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0.25rem;
}

/* Chart.js Custom Styling */
.empty-text {
  color: var(--text-muted);
  font-style: italic;
  opacity: 0.6;
}

/* ========================================
   PROFESSIONAL FEATURES
   ======================================== */

/* Auto-save Indicator */
.auto-save-indicator {
  position: fixed;
  top: 5rem;
  right: 2rem;
  background: linear-gradient(135deg, var(--accent-alpha-15), var(--accent-alpha-5));
  border: 2px solid var(--accent-primary);
  border-radius: 12px;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 9999;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.auto-save-indicator.active {
  opacity: 1;
  transform: translateY(0);
}

.save-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

.save-text {
  color: var(--accent-primary);
  font-size: 0.9rem;
  font-weight: 600;
}

/* Loading Overlay */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(13, 17, 23, 0.95);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  backdrop-filter: blur(5px);
}

.loading-overlay.active {
  display: flex;
  animation: fadeIn 0.3s ease;
}

.loading-spinner-container {
  text-align: center;
}

.loading-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid var(--accent-alpha-20);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  margin: 0 auto 1.5rem;
  animation: spin 0.8s linear infinite;
  position: relative;
}

/* Success state - green checkmark */
.loading-spinner.success {
  border: 4px solid #4ade80;
  animation: none;
}

.loading-spinner.success::before {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  color: #4ade80;
  animation: scaleIn 0.3s ease;
}

/* Error state - red X */
.loading-spinner.error {
  border: 4px solid var(--accent-danger);
  animation: none;
}

.loading-spinner.error::before {
  content: 'X';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  color: var(--accent-danger);
  animation: scaleIn 0.3s ease;
}

@keyframes scaleIn {
  0% {
    transform: translate(-50%, -50%) scale(0);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

.loading-text {
  color: var(--text-primary);
  font-size: 1.1rem;
  font-weight: 600;
  text-shadow: 0 0 10px var(--accent-alpha-50);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Confirmation Dialog */
.confirm-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  backdrop-filter: blur(4px);
}

.confirm-dialog.active {
  display: flex;
  animation: fadeIn 0.2s ease;
}

.confirm-content {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
  border: 2px solid var(--border-primary);
  border-radius: 16px;
  padding: 2rem;
  max-width: 450px;
  width: 90%;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  animation: slideInDown 0.3s ease;
}

.confirm-icon {
  font-size: 3.5rem;
  margin-bottom: 1rem;
  animation: pulse 1.5s ease-in-out infinite;
}

.confirm-title {
  color: var(--accent-primary);
  font-size: 1.5rem;
  margin-bottom: 1rem;
  text-shadow: 0 0 10px var(--accent-alpha-30);
}

.confirm-message {
  color: var(--text-secondary);
  font-size: 1rem;
  margin-bottom: 2rem;
  line-height: 1.6;
  white-space: pre-line;
}

.confirm-actions {
  display: flex;
  gap: 1rem;
}

.confirm-btn {
  flex: 1;
  padding: 0.85rem 1.5rem;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.confirm-yes {
  background: linear-gradient(135deg, var(--accent-primary), color-mix(in srgb, var(--accent-primary) 80%, transparent));
  color: var(--bg-primary);
  border-color: var(--accent-primary);
}

.confirm-yes:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-primary) 90%, transparent), var(--accent-primary));
  box-shadow: 0 0 20px var(--accent-alpha-50);
  transform: translateY(-2px);
}

.confirm-no {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-primary);
}

.confirm-no:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--text-primary);
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Footer */
.app-footer {
  background: var(--bg-primary);
  border-top: 1px solid var(--accent-alpha-10);
  padding: 1.25rem 2rem;
  margin-top: 3rem;
  width: 100%;
  position: relative;
}

/* Hide footer when login modal is active */
body:has(#loginModal.active) .app-footer {
  display: none;
}

.app-footer::before {
  content: '';
  position: absolute;
  top: -3rem;
  left: 0;
  right: 0;
  height: 3rem;
  background: linear-gradient(to bottom, transparent, var(--bg-primary));
  pointer-events: none;
}

.footer-content {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  opacity: 0.85;
}

.footer-left,
.footer-center,
.footer-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.footer-brand {
  color: var(--accent-primary);
  font-weight: 600;
  font-size: 0.95rem;
  text-shadow: 0 0 8px var(--accent-alpha-30);
  letter-spacing: 0.5px;
}

.footer-version {
  background: linear-gradient(135deg, var(--accent-alpha-15), var(--accent-alpha-5));
  color: var(--accent-primary);
  padding: 0.25rem 0.65rem;
  border-radius: 16px;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid var(--accent-alpha-30);
}

.footer-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.status-dot {
  width: 8px;
  height: 8px;
  background: var(--status-success);
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
  box-shadow: 0 0 8px var(--status-success);
}

.status-dot.offline {
  background: var(--status-offline);
  box-shadow: 0 0 8px var(--status-offline);
  animation: none;
}

.status-dot.syncing {
  background: var(--status-info);
  box-shadow: 0 0 8px var(--status-info);
}

@keyframes pulse-dot {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.footer-credit {
  color: var(--text-secondary);
  font-size: 0.85rem;
  opacity: 0.7;
}

/* Enhanced Tooltips */
[title] {
  position: relative;
}

/* Better notification icons */
.notification {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.notification::before {
  content: '';
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.notification.success::before {
  content: '✓';
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(77, 255, 77, 0.2);
  border-radius: 50%;
  color: var(--success-color);
  font-weight: bold;
  font-size: 0.85rem;
}

.notification.error::before {
  content: '✕';
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 70, 85, 0.2);
  border-radius: 50%;
  color: var(--hp-color);
  font-weight: bold;
  font-size: 0.85rem;
}

.notification.info::before {
  content: 'ℹ';
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-alpha-20);
  border-radius: 50%;
  color: var(--accent-primary);
  font-weight: bold;
  font-size: 0.85rem;
}

/* Smooth page transitions */
.main-app {
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Landscape mode optimizations */
@media (max-width: 900px) and (orientation: landscape) {
  .main-container {
    display: flex;
    flex-direction: column;
  }
  
  .story-section {
    order: 1;
    width: 100%;
  }
  
  .character-section {
    margin-top: 1rem;
    order: 2;
    width: 100%;
  }
  
  .portrait-image {
    max-width: 180px;
  }
  
  .status-bar {
    height: clamp(20px, 4vw, 28px);
  }
  
  .stat-row {
    padding: 0.4rem 0;
    min-height: 36px;
  }
  
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));
    gap: 0.5rem;
  }
  
  .stat-item {
    padding: 0.5rem;
    min-height: 40px;
  }
}

/* ============================================
   Desktop Navigation Override
   ============================================ */
@media (min-width: 1025px) {
  .mobile-menu-btn {
    display: none;
  }
  
  .mobile-menu-header {
    display: none !important;
  }
  
  .nav-center {
    display: flex;
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0;
    border: none;
    background: none;
    flex-direction: row;
    opacity: 1;
    visibility: visible;
    transform: none !important;
  }
}

/* ============================================
   Combat Visualizer Styles
   ============================================ */

/* Damage Numbers */
.damage-number {
  position: absolute;
  font-size: 2.5rem;
  font-weight: bold;
  text-shadow: 0 0 10px currentColor, 0 2px 4px rgba(0, 0, 0, 0.8);
  animation: damage-float 1.5s ease-out forwards;
  z-index: 9999;
  pointer-events: none;
  font-family: 'Impact', 'Arial Black', sans-serif;
  letter-spacing: 2px;
}

.damage-damage {
  color: #ff4655;
  text-shadow: 0 0 20px #ff4655, 0 0 40px #ff4655, 0 2px 4px rgba(0, 0, 0, 0.8);
}

.damage-player-damage {
  color: #ff6b6b;
  text-shadow: 0 0 20px #ff6b6b, 0 2px 4px rgba(0, 0, 0, 0.8);
}

.damage-critical-damage {
  color: #ff0000;
  font-size: 3.5rem;
  text-shadow: 0 0 30px #ff0000, 0 0 60px #ff0000, 0 2px 4px rgba(0, 0, 0, 0.8);
  animation: critical-damage-float 1.5s ease-out forwards;
}

.damage-heal {
  color: #4dff4d;
  text-shadow: 0 0 20px #4dff4d, 0 0 40px #4dff4d, 0 2px 4px rgba(0, 0, 0, 0.8);
}

.damage-mp-cost {
  color: var(--mp-color);
  font-size: 1.8rem;
  text-shadow: 0 0 15px var(--mp-color), 0 2px 4px rgba(0, 0, 0, 0.8);
}

.boss-damage {
  font-size: 3.5rem;
  animation: boss-damage-float 2s ease-out forwards;
}

@keyframes damage-float {
  0% {
    opacity: 1;
    transform: translateY(0) scale(0.5);
  }
  10% {
    transform: translateY(-10px) scale(1.2);
  }
  20% {
    transform: translateY(-20px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-100px) scale(0.8);
  }
}

@keyframes critical-damage-float {
  0% {
    opacity: 1;
    transform: translateY(0) scale(0.5) rotate(-5deg);
  }
  10% {
    transform: translateY(-15px) scale(1.3) rotate(5deg);
  }
  20% {
    transform: translateY(-30px) scale(1.1) rotate(-3deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-120px) scale(0.9) rotate(0deg);
  }
}

@keyframes boss-damage-float {
  0% {
    opacity: 1;
    transform: translateY(0) scale(0.3);
  }
  5% {
    transform: translateY(-20px) scale(1.5);
  }
  15% {
    transform: translateY(-40px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translateY(-150px) scale(1);
  }
}

/* Combat Particles */
.combat-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  animation: particle-burst 1s ease-out forwards;
  box-shadow: 0 0 8px currentColor;
}

.skill-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  animation: skill-particle-burst 1.2s ease-out forwards;
}

/* Victory Particles (Geometric Shapes) */
.victory-particle {
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  width: var(--particle-size, 12px);
  height: var(--particle-size, 12px);
  animation: victory-particle-rise 3s ease-out forwards;
}

.victory-particle-circle {
  background: var(--accent-primary);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--accent-primary);
}

.victory-particle-square {
  background: var(--accent-secondary);
  transform: rotate(45deg);
  box-shadow: 0 0 10px var(--accent-secondary);
}

.victory-particle-triangle {
  width: 0;
  height: 0;
  border-left: calc(var(--particle-size, 12px) / 2) solid transparent;
  border-right: calc(var(--particle-size, 12px) / 2) solid transparent;
  border-bottom: var(--particle-size, 12px) solid var(--accent-primary);
  background: transparent;
  filter: drop-shadow(0 0 8px var(--accent-primary));
}

.victory-particle-diamond {
  background: var(--accent-secondary);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  box-shadow: 0 0 10px var(--accent-secondary);
}

@keyframes particle-burst {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--vx), var(--vy)) scale(0);
  }
}

@keyframes skill-particle-burst {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  50% {
    opacity: 0.8;
    transform: translate(calc(var(--vx) * 0.5), calc(var(--vy) * 0.5)) scale(1.5);
  }
  100% {
    opacity: 0;
    transform: translate(var(--vx), var(--vy)) scale(0);
  }
}

@keyframes victory-particle-rise {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0) rotate(0deg);
  }
  10% {
    opacity: 1;
    transform: translateY(-20px) scale(1) rotate(45deg);
  }
  50% {
    opacity: 1;
    transform: translateY(-100px) scale(1.2) rotate(180deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-200px) scale(0.5) rotate(360deg);
  }
}

/* Skill Activation Popup - Clean & Minimal */
/* ================================
   SKILL ACTIVATION POPUP (REDESIGNED)
   ================================ */

.skill-activation-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10001;
  pointer-events: none;
  animation: skill-zoom 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.skill-activation-popup.fade-out {
  animation: skill-fade-out 0.5s ease-out forwards;
}

.skill-container {
  position: relative;
  padding: 1.5rem;
  min-width: 320px;
  max-width: 400px;
}

.skill-content {
  position: relative;
  background: linear-gradient(135deg, rgba(10, 14, 26, 0.95) 0%, rgba(18, 22, 35, 0.95) 100%);
  border: 2px solid;
  border-color: var(--accent-primary);
  padding: 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  backdrop-filter: blur(10px);
  clip-path: polygon(
    0 12px, 12px 0,
    calc(100% - 12px) 0, 100% 12px,
    100% calc(100% - 12px), calc(100% - 12px) 100%,
    12px 100%, 0 calc(100% - 12px)
  );
  overflow: hidden;
}

/* Stat-specific colors */
.skill-container[data-stat="STR"] .skill-content { border-color: #ff4655; }
.skill-container[data-stat="AGI"] .skill-content { border-color: #4ade80; }
.skill-container[data-stat="INT"] .skill-content { border-color: var(--mp-color); }
.skill-container[data-stat="VIT"] .skill-content { border-color: #ffd700; }
.skill-container[data-stat="LUK"] .skill-content { border-color: #a855f7; }

/* Static border glow (no spinning) */
.skill-border-glow {
  position: absolute;
  inset: -2px;
  background: var(--accent-primary);
  opacity: 0.3;
  filter: blur(8px);
  z-index: -1;
  animation: skill-pulse-glow 2s ease-in-out infinite;
  clip-path: polygon(
    0 12px, 12px 0,
    calc(100% - 12px) 0, 100% 12px,
    100% calc(100% - 12px), calc(100% - 12px) 100%,
    12px 100%, 0 calc(100% - 12px)
  );
}

.skill-container[data-stat="STR"] .skill-border-glow { background: #ff4655; }
.skill-container[data-stat="AGI"] .skill-border-glow { background: #4ade80; }
.skill-container[data-stat="INT"] .skill-border-glow { background: var(--mp-color); }
.skill-container[data-stat="VIT"] .skill-border-glow { background: #ffd700; }
.skill-container[data-stat="LUK"] .skill-border-glow { background: #a855f7; }

/* Top indicator bar */
.skill-indicator-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent-primary);
  animation: skill-bar-slide 1.5s ease-in-out infinite;
}

.skill-indicator-bar[data-stat="STR"] { background: #ff4655; }
.skill-indicator-bar[data-stat="AGI"] { background: #4ade80; }
.skill-indicator-bar[data-stat="INT"] { background: var(--mp-color); }
.skill-indicator-bar[data-stat="VIT"] { background: #ffd700; }
.skill-indicator-bar[data-stat="LUK"] { background: #a855f7; }

/* Skill header */
.skill-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.skill-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent-primary);
  text-transform: uppercase;
  letter-spacing: 3px;
  opacity: 0.9;
}

.skill-container[data-stat="STR"] .skill-label { color: #ff4655; }
.skill-container[data-stat="AGI"] .skill-label { color: #4ade80; }
.skill-container[data-stat="INT"] .skill-label { color: var(--mp-color); }
.skill-container[data-stat="VIT"] .skill-label { color: #ffd700; }
.skill-container[data-stat="LUK"] .skill-label { color: #a855f7; }

.skill-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  letter-spacing: 1px;
}

/* Skill details */
.skill-details {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.skill-cost {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(10, 14, 26, 0.7);
  border: 1px solid var(--accent-primary);
  border-radius: 4px;
  font-size: 0.85rem;
}

.cost-icon {
  font-size: 1rem;
}

.cost-value {
  font-weight: 700;
  color: var(--mp-color);
  text-shadow: 0 0 5px var(--accent-alpha-40);
  font-size: 1rem;
}

.cost-label {
  color: var(--text-secondary);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.75rem;
}

.skill-stat-badge {
  padding: 0.4rem 0.75rem;
  background: var(--accent-alpha-10);
  border: 1px solid var(--accent-primary);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.skill-stat-badge[data-stat="STR"] {
  border-color: #ff4655;
  color: #ff4655;
  background: rgba(255, 70, 85, 0.1);
}

.skill-stat-badge[data-stat="AGI"] {
  border-color: #4ade80;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
}

.skill-stat-badge[data-stat="INT"] {
  border-color: var(--mp-color);
  color: var(--mp-color);
  background: var(--accent-alpha-10);
}

.skill-stat-badge[data-stat="VIT"] {
  border-color: #ffd700;
  color: #ffd700;
  background: rgba(255, 215, 0, 0.1);
}

.skill-stat-badge[data-stat="LUK"] {
  border-color: #a855f7;
  color: #a855f7;
  background: rgba(168, 85, 247, 0.1);
}

/* Scan line effect */
.skill-scanline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    var(--accent-primary) 50%, 
    transparent 100%
  );
  animation: skill-scanline 2s ease-in-out infinite;
  opacity: 0.6;
}

/* Corner decorations */
.skill-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid var(--accent-primary);
}

.skill-corner-tl {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
}

.skill-corner-tr {
  top: 0;
  right: 0;
  border-left: none;
  border-bottom: none;
}

.skill-corner-bl {
  bottom: 0;
  left: 0;
  border-right: none;
  border-top: none;
}

.skill-corner-br {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
}

.skill-container[data-stat="STR"] .skill-corner { border-color: #ff4655; }
.skill-container[data-stat="AGI"] .skill-corner { border-color: #4ade80; }
.skill-container[data-stat="INT"] .skill-corner { border-color: var(--mp-color); }
.skill-container[data-stat="VIT"] .skill-corner { border-color: #ffd700; }
.skill-container[data-stat="LUK"] .skill-corner { border-color: #a855f7; }

/* Animations */
@keyframes skill-zoom {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  60% {
    transform: translate(-50%, -50%) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes skill-fade-out {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
}

@keyframes skill-pulse-glow {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes skill-bar-slide {
  0%, 100% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(100%);
  }
}

@keyframes skill-scanline {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100px);
  }
}

/* Combat Start/End Overlays */
/* ================================
   COMBAT START SCREEN (REDESIGNED)
   ================================ */

.combat-start-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(15px);
  z-index: 10000;
  pointer-events: none;
  animation: overlay-appear 0.4s ease-out;
}

.combat-container {
  position: relative;
  width: 550px;
  max-width: 90vw;
  animation: combat-zoom 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.combat-content {
  position: relative;
  z-index: 2;
  background: linear-gradient(135deg,
    var(--bg-secondary) 0%,
    var(--bg-tertiary) 50%,
    var(--bg-secondary) 100%
  );
  border: 2px solid var(--accent-primary);
  border-radius: 12px;
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  box-shadow:
    0 0 60px var(--accent-alpha-40),
    0 0 30px var(--accent-alpha-30),
    inset 0 0 80px var(--accent-alpha-5);
  overflow: hidden;
}

/* Animated border glow */
.combat-border-glow {
  position: absolute;
  inset: -4px;
  background: conic-gradient(
    from 0deg,
    var(--accent-primary),
    var(--accent-secondary),
    var(--accent-primary),
    var(--accent-secondary),
    var(--accent-primary)
  );
  border-radius: 12px;
  z-index: 1;
  animation: combat-border-rotate 3s linear infinite;
  opacity: 0.6;
}

/* Warning bar at top */
.combat-warning-bar {
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg,
    transparent,
    var(--accent-danger) 20%,
    var(--accent-danger) 80%,
    transparent
  );
  box-shadow: 0 0 10px var(--accent-danger);
  animation: combat-warning-pulse 1s ease-in-out infinite;
}

/* Combat icon wrapper */
.combat-icon-wrapper {
  position: relative;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.combat-icon-pulse {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid var(--accent-primary);
  border-radius: 50%;
  animation: combat-icon-pulse 2s ease-in-out infinite;
  opacity: 0.6;
}

/* Boss crown (pure CSS) */
.combat-boss-crown {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  animation: crown-float 2s ease-in-out infinite;
}

.crown-top {
  width: 60px;
  height: 20px;
  background: linear-gradient(135deg, var(--accent-gold), #ffed4e);
  clip-path: polygon(
    0% 100%, 20% 0%, 40% 100%, 
    50% 0%, 60% 100%, 80% 0%, 
    100% 100%, 90% 100%, 80% 20%,
    60% 100%, 50% 20%, 40% 100%,
    20% 20%, 10% 100%
  );
  filter: drop-shadow(0 0 15px var(--accent-gold));
}

.crown-base {
  width: 60px;
  height: 10px;
  background: linear-gradient(180deg, var(--accent-gold), #f59e0b);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 0 15px var(--accent-gold);
}

.combat-boss-image {
  width: 80px;
  height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 0 20px var(--accent-gold));
  animation: boss-pulse 1.5s ease-in-out infinite;
  z-index: 2;
}

/* Combat text */
.combat-title {
  font-size: 3rem;
  font-weight: 900;
  color: var(--accent-primary);
  text-shadow:
    0 0 30px var(--accent-primary),
    0 0 60px var(--accent-alpha-50),
    0 4px 8px rgba(0, 0, 0, 0.8);
  letter-spacing: 8px;
  animation: combat-text-glow 2s ease-in-out infinite;
}

.combat-subtitle {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 6px;
  text-transform: uppercase;
  opacity: 0.8;
}

/* Enemy count display with target reticle */
.combat-enemy-count {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--accent-alpha-30);
  border-radius: 8px;
  animation: combat-count-appear 0.5s ease-out 0.3s both;
}

.enemy-count-icon {
  position: relative;
  width: 40px;
  height: 40px;
}

.target-reticle {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: reticle-scan 2s linear infinite;
}

.reticle-line {
  position: absolute;
  background: var(--accent-danger);
  box-shadow: 0 0 8px var(--accent-danger);
}

.reticle-h {
  width: 100%;
  height: 2px;
  top: 50%;
  transform: translateY(-50%);
}

.reticle-v {
  width: 2px;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.reticle-corner {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid var(--accent-danger);
}

.reticle-tl {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
}

.reticle-tr {
  top: 0;
  right: 0;
  border-left: none;
  border-bottom: none;
}

.reticle-bl {
  bottom: 0;
  left: 0;
  border-right: none;
  border-top: none;
}

.reticle-br {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
}

.enemy-count-text {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.count-number {
  font-size: 2rem;
  font-weight: 900;
  color: var(--accent-danger);
  text-shadow: 0 0 15px var(--accent-danger);
}

.count-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
}

/* Scan line effect */
.combat-scanline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent,
    var(--accent-primary),
    transparent
  );
  animation: combat-scanline-move 2s linear infinite;
  opacity: 0.5;
  will-change: transform;
}

/* Corner decorations */
.combat-corner {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid var(--accent-primary);
  z-index: 3;
  animation: combat-corner-pulse 2s ease-in-out infinite;
}

.combat-corner-tl {
  top: -10px;
  left: -10px;
  border-right: none;
  border-bottom: none;
  border-top-left-radius: 8px;
}

.combat-corner-tr {
  top: -10px;
  right: -10px;
  border-left: none;
  border-bottom: none;
  border-top-right-radius: 8px;
  animation-delay: 0.5s;
}

.combat-corner-bl {
  bottom: -10px;
  left: -10px;
  border-right: none;
  border-top: none;
  border-bottom-left-radius: 8px;
  animation-delay: 1s;
}

.combat-corner-br {
  bottom: -10px;
  right: -10px;
  border-left: none;
  border-top: none;
  border-bottom-right-radius: 8px;
  animation-delay: 1.5s;
}

/* Boss battle alert stripes */
.boss-alert-stripe {
  position: absolute;
  width: 8px;
  height: 100%;
  top: 0;
  background: repeating-linear-gradient(
    45deg,
    var(--accent-gold),
    var(--accent-gold) 10px,
    rgba(0, 0, 0, 0.5) 10px,
    rgba(0, 0, 0, 0.5) 20px
  );
  z-index: 4;
  animation: alert-stripe-scroll 1s linear infinite;
  box-shadow: 0 0 20px var(--accent-gold);
}

.stripe-left {
  left: 0;
}

.stripe-right {
  right: 0;
}

/* Boss battle special effects */
.combat-start-overlay.boss-battle .combat-border-glow {
  background: conic-gradient(
    from 0deg,
    var(--accent-gold),
    var(--accent-danger),
    var(--accent-gold),
    var(--accent-danger),
    var(--accent-gold)
  );
  animation: combat-border-rotate 2s linear infinite;
}

.combat-start-overlay.boss-battle .combat-title {
  color: var(--accent-gold);
  text-shadow:
    0 0 30px var(--accent-gold),
    0 0 60px rgba(255, 215, 0, 0.5),
    0 4px 8px rgba(0, 0, 0, 0.8);
  animation: boss-text-glow 1.5s ease-in-out infinite;
}

.combat-start-overlay.boss-battle .combat-warning-bar {
  background: linear-gradient(90deg,
    transparent,
    var(--accent-gold) 20%,
    var(--accent-danger) 50%,
    var(--accent-gold) 80%,
    transparent
  );
  animation: boss-warning-pulse 0.8s ease-in-out infinite;
}

/* Combat Start Mobile Responsive */
@media (max-width: 768px) {
  .combat-container {
    width: 450px;
  }

  .combat-content {
    padding: 2.5rem 1.5rem;
  }

  .combat-icon-wrapper {
    width: 110px;
    height: 110px;
  }

  .combat-boss-image {
    width: 65px;
    height: 65px;
  }

  .combat-title {
    font-size: 2.5rem;
    letter-spacing: 6px;
  }

  .combat-subtitle {
    font-size: 1rem;
    letter-spacing: 4px;
  }

  .count-number {
    font-size: 1.75rem;
  }
}

@media (max-width: 480px) {
  .combat-container {
    width: 340px;
  }

  .combat-content {
    padding: 2rem 1rem;
    gap: 1rem;
  }

  .combat-icon-wrapper {
    width: 90px;
    height: 90px;
  }

  .combat-icon-pulse {
    border-width: 2px;
  }

  .combat-boss-crown {
    top: -15px;
  }

  .crown-top {
    width: 50px;
    height: 16px;
  }

  .crown-base {
    width: 50px;
    height: 8px;
  }

  .combat-boss-image {
    width: 55px;
    height: 55px;
  }

  .combat-title {
    font-size: 2rem;
    letter-spacing: 4px;
  }

  .combat-subtitle {
    font-size: 0.9rem;
    letter-spacing: 3px;
  }

  .combat-enemy-count {
    padding: 0.75rem 1rem;
  }

  .enemy-count-icon {
    width: 32px;
    height: 32px;
  }

  .reticle-corner {
    width: 10px;
    height: 10px;
  }

  .count-number {
  font-size: 1.5rem;
  }

  .count-label {
    font-size: 0.9rem;
  }

  .combat-corner {
    width: 20px;
    height: 20px;
  }

  .boss-alert-stripe {
    width: 6px;
  }
}

/* ================================
   VICTORY SCREEN (REDESIGNED)
   ================================ */

.combat-end-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(15px);
  z-index: 10000;
  pointer-events: none;
  animation: overlay-appear 0.4s ease-out;
}

.victory-container {
  position: relative;
  width: 500px;
  max-width: 90vw;
  animation: victory-zoom 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.victory-content {
  position: relative;
  z-index: 2;
  background: linear-gradient(135deg, 
    var(--bg-secondary) 0%, 
    var(--bg-tertiary) 50%,
    var(--bg-secondary) 100%
  );
  border: 2px solid var(--accent-primary);
  border-radius: 12px;
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  box-shadow: 
    0 0 60px var(--accent-alpha-40),
    0 0 30px var(--accent-alpha-30),
    inset 0 0 80px var(--accent-alpha-5);
  overflow: hidden;
}

/* Hexagonal border animation */
.victory-hexagon-border {
  position: absolute;
  inset: -4px;
  background: conic-gradient(
    from 0deg,
    var(--accent-primary),
    var(--accent-secondary),
    var(--accent-primary),
    var(--accent-secondary),
    var(--accent-primary)
  );
  border-radius: 12px;
  z-index: 1;
  animation: victory-border-rotate 3s linear infinite;
  opacity: 0.6;
}

/* Victory text */
.victory-title {
  font-size: 3rem;
  font-weight: 900;
  color: var(--accent-primary);
  text-shadow: 
    0 0 30px var(--accent-primary),
    0 0 60px var(--accent-alpha-50),
    0 4px 8px rgba(0, 0, 0, 0.8);
  letter-spacing: 8px;
  animation: victory-text-glow 2s ease-in-out infinite;
}

.victory-subtitle {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 6px;
  text-transform: uppercase;
  opacity: 0.8;
}

/* Accent lines */
.victory-accent-line {
  width: 80%;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent, 
    var(--accent-primary) 30%, 
    var(--accent-primary) 70%, 
    transparent
  );
  box-shadow: 0 0 10px var(--accent-alpha-50);
  animation: victory-line-expand 1s ease-out;
  transform-origin: center;
  will-change: transform, opacity;
}

/* Scan line effect */
.victory-scanline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, 
    transparent, 
    var(--accent-primary), 
    transparent
  );
  animation: victory-scanline 2s linear infinite;
  opacity: 0.5;
  will-change: transform;
}

/* Corner decorations */
.victory-corner {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid var(--accent-primary);
  z-index: 3;
  animation: victory-corner-pulse 2s ease-in-out infinite;
}

.victory-corner-tl {
  top: -10px;
  left: -10px;
  border-right: none;
  border-bottom: none;
  border-top-left-radius: 8px;
}

.victory-corner-tr {
  top: -10px;
  right: -10px;
  border-left: none;
  border-bottom: none;
  border-top-right-radius: 8px;
  animation-delay: 0.5s;
}

.victory-corner-bl {
  bottom: -10px;
  left: -10px;
  border-right: none;
  border-top: none;
  border-bottom-left-radius: 8px;
  animation-delay: 1s;
}

.victory-corner-br {
  bottom: -10px;
  right: -10px;
  border-left: none;
  border-top: none;
  border-bottom-right-radius: 8px;
  animation-delay: 1.5s;
}

/* Victory Screen Mobile Responsive */
@media (max-width: 768px) {
  .victory-container {
    width: 400px;
  }
  
  .victory-content {
    padding: 2rem 1.5rem;
  }
  
  .victory-title {
    font-size: 2.5rem;
    letter-spacing: 6px;
  }
  
  .victory-subtitle {
    font-size: 1rem;
    letter-spacing: 4px;
  }
}

@media (max-width: 480px) {
  .victory-container {
    width: 320px;
  }
  
  .victory-content {
    padding: 1.5rem 1rem;
  }
  
  .victory-title {
    font-size: 2rem;
    letter-spacing: 4px;
  }
  
  .victory-subtitle {
    font-size: 0.9rem;
    letter-spacing: 3px;
  }
  
  .victory-corner {
    width: 20px;
    height: 20px;
  }
}

@keyframes overlay-appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes banner-zoom {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes icon-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

/* Victory Animations */
@keyframes victory-zoom {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  70% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes victory-border-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


@keyframes victory-text-glow {
  0%, 100% {
    text-shadow: 
      0 0 30px var(--accent-primary),
      0 0 60px var(--accent-alpha-50),
      0 4px 8px rgba(0, 0, 0, 0.8);
  }
  50% {
    text-shadow: 
      0 0 40px var(--accent-primary),
      0 0 80px var(--accent-alpha-50),
      0 0 100px var(--accent-alpha-30),
      0 4px 8px rgba(0, 0, 0, 0.8);
  }
}

@keyframes victory-line-expand {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes victory-scanline {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}

@keyframes victory-corner-pulse {
  0%, 100% {
    opacity: 0.6;
    box-shadow: 0 0 5px var(--accent-alpha-30);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 15px var(--accent-alpha-50);
  }
}

/* Combat Start Animations */
@keyframes combat-zoom {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  70% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes combat-border-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes combat-warning-pulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 10px var(--accent-danger);
  }
  50% {
    opacity: 0.6;
    box-shadow: 0 0 5px var(--accent-danger);
  }
}

@keyframes boss-warning-pulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 15px var(--accent-gold);
  }
  50% {
    opacity: 0.8;
    box-shadow: 0 0 25px var(--accent-danger);
  }
}

@keyframes combat-icon-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

@keyframes crown-float {
  0%, 100% {
    transform: translateX(-50%) translateY(0px);
  }
  50% {
    transform: translateX(-50%) translateY(-5px);
  }
}

@keyframes boss-pulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 20px var(--accent-gold));
  }
  50% {
    transform: scale(1.1);
    filter: drop-shadow(0 0 30px var(--accent-gold));
  }
}

@keyframes combat-text-glow {
  0%, 100% {
    text-shadow:
      0 0 30px var(--accent-primary),
      0 0 60px var(--accent-alpha-50),
      0 4px 8px rgba(0, 0, 0, 0.8);
  }
  50% {
    text-shadow:
      0 0 40px var(--accent-primary),
      0 0 80px var(--accent-alpha-50),
      0 0 100px var(--accent-alpha-30),
      0 4px 8px rgba(0, 0, 0, 0.8);
  }
}

@keyframes boss-text-glow {
  0%, 100% {
    text-shadow:
      0 0 30px var(--accent-gold),
      0 0 60px rgba(255, 215, 0, 0.5),
      0 4px 8px rgba(0, 0, 0, 0.8);
  }
  50% {
    text-shadow:
      0 0 50px var(--accent-gold),
      0 0 80px var(--accent-danger),
      0 0 100px rgba(255, 215, 0, 0.3),
      0 4px 8px rgba(0, 0, 0, 0.8);
  }
}

@keyframes combat-count-appear {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes reticle-scan {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

@keyframes combat-scanline-move {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}

@keyframes combat-corner-pulse {
  0%, 100% {
    opacity: 0.6;
    box-shadow: 0 0 5px var(--accent-alpha-30);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 15px var(--accent-alpha-50);
  }
}

@keyframes alert-stripe-scroll {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 28.28px; /* sqrt(20^2 + 20^2) for 45deg */
  }
}

.fade-out {
  animation: fade-out-anim 0.5s ease-out forwards;
}

@keyframes fade-out-anim {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Enemy Death Effect */
.enemy-death-effect {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 2rem;
  background: rgba(0, 0, 0, 0.8);
  border: 2px solid var(--accent-danger);
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(255, 70, 85, 0.5);
  z-index: 9997;
  pointer-events: none;
  animation: death-appear 0.5s ease-out;
}

.death-icon {
  font-size: 3rem;
  filter: drop-shadow(0 0 10px var(--accent-danger));
}

.death-text {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--accent-danger);
  text-shadow: 0 0 10px var(--accent-danger);
}

@keyframes death-appear {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Unified Death Effect (Multiple Enemies) */
/* ================================
   ENEMY DEFEAT SCREEN (REDESIGNED)
   ================================ */

.unified-death-effect {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10000;
  pointer-events: all;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: defeat-appear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.unified-death-effect.fade-out {
  animation: fade-out-anim 0.3s ease-out forwards;
}

.defeat-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(15px);
  z-index: 1;
}

.defeat-container {
  position: relative;
  width: 500px;
  max-width: 90vw;
  z-index: 2;
}

.defeat-content {
  position: relative;
  z-index: 2;
  background: linear-gradient(135deg,
    var(--bg-secondary) 0%,
    var(--bg-tertiary) 50%,
    var(--bg-secondary) 100%
  );
  border: 2px solid var(--accent-danger);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  box-shadow: 
    0 0 60px rgba(255, 70, 85, 0.4),
    0 0 30px rgba(255, 70, 85, 0.3),
    inset 0 0 80px rgba(255, 70, 85, 0.05);
  overflow: hidden;
}

/* Animated border glow */
.defeat-border-glow {
  position: absolute;
  inset: -4px;
  background: conic-gradient(
    from 0deg,
    var(--accent-danger),
    var(--accent-primary),
    var(--accent-danger),
    var(--accent-primary),
    var(--accent-danger)
  );
  border-radius: 12px;
  z-index: 1;
  animation: defeat-border-rotate 3s linear infinite;
  opacity: 0.6;
}

/* Alert bar at top */
.defeat-alert-bar {
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg,
    transparent,
    var(--accent-danger) 20%,
    var(--accent-danger) 80%,
    transparent
  );
  box-shadow: 0 0 10px var(--accent-danger);
  animation: defeat-alert-pulse 1s ease-in-out infinite;
}

/* Header */
.defeat-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid rgba(255, 70, 85, 0.3);
  width: 100%;
}

.defeat-header-text {
  font-size: 2rem;
  font-weight: 900;
  color: var(--accent-danger);
  text-shadow: 
    0 0 30px var(--accent-danger),
    0 0 60px rgba(255, 70, 85, 0.5),
    0 4px 8px rgba(0, 0, 0, 0.8);
  letter-spacing: 6px;
  animation: defeat-text-glow 2s ease-in-out infinite;
}

.defeat-header-subtitle {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 4px;
  text-transform: uppercase;
  opacity: 0.8;
}

/* Enemy list */
.defeat-enemy-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.defeat-enemy-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 1rem;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 70, 85, 0.3);
  border-radius: 8px;
  animation: defeat-item-slide 0.3s ease-out backwards;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.defeat-enemy-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent-danger);
  box-shadow: 0 0 10px var(--accent-danger);
}

.defeat-enemy-item:nth-child(1) { animation-delay: 0.1s; }
.defeat-enemy-item:nth-child(2) { animation-delay: 0.15s; }
.defeat-enemy-item:nth-child(3) { animation-delay: 0.2s; }
.defeat-enemy-item:nth-child(4) { animation-delay: 0.25s; }
.defeat-enemy-item:nth-child(5) { animation-delay: 0.3s; }
.defeat-enemy-item:nth-child(n+6) { animation-delay: 0.35s; }

.defeat-enemy-item.boss-defeat {
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 70, 85, 0.15) 100%);
  border: 2px solid var(--accent-gold);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.defeat-enemy-item.boss-defeat::before {
  background: linear-gradient(180deg, var(--accent-gold), var(--accent-danger));
  box-shadow: 0 0 15px var(--accent-gold);
}

/* Defeat icon (X or boss image with strike) */
.defeat-icon {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.defeat-icon-x {
  position: relative;
  width: 100%;
  height: 100%;
}

.x-line {
  position: absolute;
  width: 100%;
  height: 3px;
  background: var(--accent-danger);
  box-shadow: 0 0 10px var(--accent-danger);
  top: 50%;
  left: 0;
  border-radius: 2px;
}

.x-line-1 {
  transform: translateY(-50%) rotate(45deg);
}

.x-line-2 {
  transform: translateY(-50%) rotate(-45deg);
}

/* Boss defeat icon */
.defeat-icon.boss-icon {
  width: 48px;
  height: 48px;
}

.defeat-boss-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 12px var(--accent-gold)) grayscale(0.3);
  animation: defeat-boss-pulse 1.5s ease-in-out infinite;
}

.defeat-icon-strike {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 4px;
  background: var(--accent-danger);
  transform: translate(-50%, -50%) rotate(-15deg) scaleX(1);
  box-shadow: 0 0 15px var(--accent-danger);
  animation: defeat-strike-draw 0.3s ease-out 0.2s both;
  transform-origin: center;
  will-change: transform;
}

.defeat-enemy-name {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  flex: 1;
}

.defeat-enemy-item.boss-defeat .defeat-enemy-name {
  color: var(--accent-gold);
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
  font-size: 1.1rem;
}

/* Status badge */
.defeat-status-badge {
  padding: 0.25rem 0.75rem;
  background: rgba(255, 70, 85, 0.2);
  border: 1px solid var(--accent-danger);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-danger);
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 0 8px rgba(255, 70, 85, 0.3);
}

.defeat-status-badge.boss-badge {
  background: rgba(255, 215, 0, 0.2);
  border-color: var(--accent-gold);
  color: var(--accent-gold);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

/* Scan line effect */
.defeat-scanline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent,
    var(--accent-danger),
    transparent
  );
  animation: defeat-scanline 2s linear infinite;
  opacity: 0.5;
}

/* Dismiss hint */
.defeat-dismiss-hint {
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  animation: defeat-hint-pulse 2s ease-in-out infinite;
  width: 100%;
}

/* Corner decorations */
.defeat-corner {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid var(--accent-danger);
  z-index: 3;
  animation: defeat-corner-pulse 2s ease-in-out infinite;
}

.defeat-corner-tl {
  top: -10px;
  left: -10px;
  border-right: none;
  border-bottom: none;
  border-top-left-radius: 8px;
}

.defeat-corner-tr {
  top: -10px;
  right: -10px;
  border-left: none;
  border-bottom: none;
  border-top-right-radius: 8px;
  animation-delay: 0.5s;
}

.defeat-corner-bl {
  bottom: -10px;
  left: -10px;
  border-right: none;
  border-top: none;
  border-bottom-left-radius: 8px;
  animation-delay: 1s;
}

.defeat-corner-br {
  bottom: -10px;
  right: -10px;
  border-left: none;
  border-top: none;
  border-bottom-right-radius: 8px;
  animation-delay: 1.5s;
}

/* Defeat Animations */
@keyframes defeat-appear {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes defeat-border-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes defeat-alert-pulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 10px var(--accent-danger);
  }
  50% {
    opacity: 0.6;
    box-shadow: 0 0 5px var(--accent-danger);
  }
}

@keyframes defeat-text-glow {
  0%, 100% {
    text-shadow:
      0 0 30px var(--accent-danger),
      0 0 60px rgba(255, 70, 85, 0.5),
      0 4px 8px rgba(0, 0, 0, 0.8);
  }
  50% {
    text-shadow:
      0 0 40px var(--accent-danger),
      0 0 80px rgba(255, 70, 85, 0.5),
      0 0 100px rgba(255, 70, 85, 0.3),
      0 4px 8px rgba(0, 0, 0, 0.8);
  }
}

@keyframes defeat-item-slide {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes defeat-boss-pulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 12px var(--accent-gold)) grayscale(0.3);
  }
  50% {
    transform: scale(1.1);
    filter: drop-shadow(0 0 18px var(--accent-gold)) grayscale(0.2);
  }
}

@keyframes defeat-strike-draw {
  0% {
    transform: translate(-50%, -50%) rotate(-15deg) scaleX(0);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-15deg) scaleX(1);
  }
}

@keyframes defeat-scanline {
  0% {
    top: 0;
  }
  100% {
    top: 100%;
  }
}

@keyframes defeat-hint-pulse {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

@keyframes defeat-corner-pulse {
  0%, 100% {
    opacity: 0.6;
    box-shadow: 0 0 5px rgba(255, 70, 85, 0.3);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 15px rgba(255, 70, 85, 0.5);
  }
}

/* Flash Effects */
.flash-damage {
  animation: flash-red 0.3s ease-out;
}

.flash-heal {
  animation: flash-green 0.3s ease-out;
}

@keyframes flash-red {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.5) drop-shadow(0 0 20px rgba(255, 70, 85, 0.8));
  }
}

@keyframes flash-green {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.5) drop-shadow(0 0 20px rgba(77, 255, 77, 0.8));
  }
}

/* Pulse Effect */
.pulse-effect {
  animation: pulse-glow 0.6s ease-out;
}

@keyframes pulse-glow {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.05);
    filter: brightness(1.3);
  }
}

/* Screen Shake */
.screen-shake {
  animation: screen-shake-anim 0.5s ease-out;
}

@keyframes screen-shake-anim {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}

/* Floating Combat Text */
.floating-combat-text {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1rem 2rem;
  background: rgba(0, 0, 0, 0.9);
  border: 2px solid var(--accent-primary);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 1.1rem;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  z-index: 9996;
  pointer-events: none;
  animation: floating-text-appear 0.3s ease-out;
}

.floating-warning {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}

.floating-error {
  border-color: var(--accent-danger);
  color: var(--accent-danger);
}

.floating-success {
  border-color: var(--success-color);
  color: var(--success-color);
}

@keyframes floating-text-appear {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* HP/MP Bar Smooth Transitions - Enhanced from Combat Visualizer */
/* Note: Base styles are defined earlier in this file (line ~2438) */
.hp-bar .status-bar-fill,
.mp-bar .status-bar-fill {
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Combat Visualizer Settings */
.combat-visualizer-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-primary);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.combat-visualizer-toggle:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 0 10px var(--accent-alpha-30);
}

.combat-visualizer-toggle.active {
  border-color: var(--accent-primary);
  background: var(--accent-alpha-10);
}

/* Mobile Optimizations */
@media (max-width: 768px) {
  .damage-number {
    font-size: 1.8rem;
  }
  
  .damage-critical-damage,
  .boss-damage {
    font-size: 2.5rem;
  }
  
  .skill-container {
    min-width: 260px;
    max-width: 90vw;
    padding: 1rem;
  }
  
  .skill-content {
    padding: 1.25rem 1rem;
  }
  
  .skill-name {
    font-size: 1.2rem;
  }
  
  .skill-label {
    font-size: 0.65rem;
    letter-spacing: 2px;
  }
  
  .skill-details {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .skill-corner {
    width: 12px;
    height: 12px;
  }
  
  .combat-start-banner,
  .combat-end-banner {
    padding: 2rem 2.5rem;
  }
  
  .combat-start-text,
  .combat-end-text {
    font-size: 2rem;
  }
  
  .combat-start-icon,
  .combat-end-icon {
    font-size: 3.5rem;
  }
}

/* ================================
   ACQUISITION DISPLAY STYLES
   ================================ */

/* Acquisition Overlay - Full screen notification */
.acquisition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  cursor: pointer;
  /* Prevent being affected by parent transforms (e.g., screen shake) */
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.acquisition-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.acquisition-overlay.hide {
  opacity: 0;
}

/* Acquisition Content Card */
.acquisition-content {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  border: 3px solid var(--border-primary);
  border-radius: 16px;
  padding: 2rem 2.5rem;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transform: scale(0.8) translateY(50px);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Ensure content stays in place */
  position: relative;
  pointer-events: auto;
}

.acquisition-overlay.show .acquisition-content {
  transform: scale(1) translateY(0);
}

/* Rarity-specific borders and glows */
.acquisition-rarity-common .acquisition-content {
  border-color: var(--rarity-common);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(158, 158, 158, 0.3);
}

.acquisition-rarity-uncommon .acquisition-content {
  border-color: var(--rarity-uncommon);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(74, 222, 128, 0.4);
}

.acquisition-rarity-rare .acquisition-content {
  border-color: var(--rarity-rare);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(59, 130, 246, 0.5);
}

.acquisition-rarity-epic .acquisition-content {
  border-color: var(--rarity-epic);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(168, 85, 247, 0.6);
  animation: epic-pulse 2s ease-in-out infinite;
}

.acquisition-rarity-legendary .acquisition-content {
  border-color: var(--rarity-legendary);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(245, 158, 11, 0.7);
  animation: legendary-pulse 1.5s ease-in-out infinite;
}

.acquisition-rarity-mythic .acquisition-content {
  border-color: var(--rarity-mythic);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 50px rgba(239, 68, 68, 0.8);
  animation: mythic-pulse 1s ease-in-out infinite;
}

/* Acquisition Header */
.acquisition-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--border-primary);
}

.acquisition-icon {
  font-size: 3rem;
  filter: drop-shadow(0 0 10px currentColor);
  animation: icon-float 2s ease-in-out infinite;
}

.acquisition-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 0 0 10px var(--accent-primary);
}

/* Acquisition Body */
.acquisition-body {
  text-align: center;
}

/* Equipment Header - Slot and Rank */
.acquisition-equipment-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: nowrap;
}

.acquisition-type {
  white-space: nowrap;
}

.acquisition-rank {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
}

.acquisition-rank.rank-E,
.acquisition-rank.rank-D { 
  color: #888888;
}

.acquisition-rank.rank-C { 
  color: #00ff00;
}

.acquisition-rank.rank-B { 
  color: var(--accent-primary);
}

.acquisition-rank.rank-A { 
  color: #ff00ff;
}

.acquisition-rank.rank-S { 
  color: #ffaa00;
}

.acquisition-rank.rank-SS,
.acquisition-rank.rank-Legendary { 
  color: #ff0000;
}

/* Create Equipment Image Button */
.btn-create-equipment-image {
  width: 100%;
  margin-top: 1.5rem;
  background: linear-gradient(135deg, var(--accent-alpha-20) 0%, rgba(147, 112, 219, 0.2) 100%);
  border: 2px solid var(--accent-primary);
  color: var(--accent-primary);
  padding: 0.85rem 1.5rem;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  transition: all 0.3s ease;
  letter-spacing: 0.05em;
}

.btn-create-equipment-image:hover {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--rarity-epic) 100%);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--accent-alpha-40);
  border-color: var(--rarity-epic);
}

.btn-create-equipment-image:active {
  transform: translateY(0);
}

.btn-create-equipment-image .btn-icon {
  font-size: 1.3rem;
}

.acquisition-name {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Rarity-specific name colors */
.acquisition-name.rarity-common { color: var(--rarity-common); }
.acquisition-name.rarity-uncommon { color: var(--rarity-uncommon); }
.acquisition-name.rarity-rare { color: var(--rarity-rare); }
.acquisition-name.rarity-epic { color: var(--rarity-epic); }
.acquisition-name.rarity-legendary { color: var(--rarity-legendary); }
.acquisition-name.rarity-mythic { color: var(--rarity-mythic); }

.acquisition-type {
  font-size: 1rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.acquisition-quantity {
  font-size: 1.2rem;
  color: var(--accent-primary);
  font-weight: 600;
  margin-bottom: 1rem;
}

/* Acquisition Details */
.acquisition-details {
  margin-top: 1.5rem;
  text-align: left;
  background: rgba(0, 0, 0, 0.3);
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid var(--border-primary);
}

/* Queue Hint - Shows remaining items */
.acquisition-queue-hint {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: var(--accent-alpha-15);
  border: 1px solid var(--accent-primary);
  border-radius: 8px;
  text-align: center;
  color: var(--accent-primary);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  animation: queue-hint-pulse 1.5s ease-in-out infinite;
}

/* Close Hint - Shows how to dismiss */
.acquisition-close-hint {
  margin-top: 1rem;
  padding: 0.6rem 1rem;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-style: italic;
  opacity: 0.7;
}

@keyframes queue-hint-pulse {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

.skill-description,
.equipment-description,
.item-description {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 0;
  font-size: 0.95rem;
}

.equipment-description,
.item-description {
  margin-bottom: 1rem;
}

/* Stats Display */
.skill-stats,
.equipment-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.stat-badge {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.stat-badge.stat-STR {
  background: rgba(255, 70, 85, 0.2);
  border: 2px solid #ff4655;
  color: #ff4655;
}

.stat-badge.stat-AGI {
  background: rgba(74, 222, 128, 0.2);
  border: 2px solid #4ade80;
  color: #4ade80;
}

.stat-badge.stat-INT {
  background: color-mix(in srgb, var(--mp-color) 20%, transparent);
  border: 2px solid var(--mp-color);
  color: var(--mp-color);
}

.stat-badge.stat-VIT {
  background: rgba(255, 215, 0, 0.2);
  border: 2px solid #ffd700;
  color: #ffd700;
}

.stat-badge.stat-LUK {
  background: rgba(168, 85, 247, 0.2);
  border: 2px solid #a855f7;
  color: #a855f7;
}

.stat-badge .stat-name {
  margin-right: 0.5rem;
  font-weight: 700;
}

.stat-badge .stat-value {
  font-weight: 600;
  opacity: 0.9;
}

.stat-info {
  color: var(--text-secondary);
  font-size: 0.9rem;
  padding: 0.3rem 0.6rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

/* Old rank badge styles - Removed for future redesign */
/* These styles are no longer used as we've replaced rank badges with a cleaner design */

/* Special Effects Text */
.passive-effect,
.special-effect,
.item-effect {
  margin-top: 1rem;
  padding: 0.75rem;
  background: var(--accent-alpha-10);
  border-left: 3px solid var(--accent-primary);
  border-radius: 4px;
  color: var(--accent-primary);
  font-style: italic;
  font-size: 0.9rem;
}

/* Acquisition Particles */
.acquisition-particle {
  position: fixed;
  pointer-events: none;
  z-index: 10001;
  animation: acquisition-particle-float 2s ease-out forwards;
  opacity: 0;
  /* Prevent being affected by parent transforms (e.g., screen shake) */
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
}

@keyframes acquisition-particle-float {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0);
  }
  20% {
    opacity: 1;
    transform: translate3d(0, -20px, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -150px, 0) scale(0.5);
  }
}

/* Icon Float Animation */
@keyframes icon-float {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -10px, 0);
  }
}

/* Rarity Pulse Animations */
@keyframes epic-pulse {
  0%, 100% {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(168, 85, 247, 0.6);
  }
  50% {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 50px rgba(168, 85, 247, 0.9);
  }
}

@keyframes legendary-pulse {
  0%, 100% {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(245, 158, 11, 0.7);
  }
  50% {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 60px rgba(245, 158, 11, 1);
  }
}

@keyframes mythic-pulse {
  0%, 100% {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 50px rgba(239, 68, 68, 0.8);
  }
  50% {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 70px rgba(239, 68, 68, 1);
  }
}

/* ================================
   EPIC SKILL ACQUISITION
   ================================ */

.skill-acquisition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(10px);
  z-index: 10001;
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 0.6s ease, transform 0.6s ease;
  cursor: pointer;
}

.skill-acquisition-overlay.skill-show {
  opacity: 1;
  transform: scale(1);
}

.skill-acquisition-overlay.skill-fade-out {
  opacity: 0;
  transform: scale(0.95);
}

/* Skill Container */
.skill-acquisition-container {
  position: relative;
  width: 85%;
  max-width: 550px;
  pointer-events: none;
}

/* Animated Background Rays */
.skill-rays {
  position: absolute;
  inset: -100%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    var(--accent-primary) 30deg,
    transparent 60deg,
    transparent 120deg,
    var(--accent-secondary) 150deg,
    transparent 180deg,
    transparent 240deg,
    var(--accent-primary) 270deg,
    transparent 300deg
  );
  animation: skill-rays-rotate 15s linear infinite;
  opacity: 0.15;
  filter: blur(40px);
  pointer-events: none;
}

/* Stat-specific ray colors */
.skill-acquisition-container[data-stat="STR"] .skill-rays {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    #ff4655 30deg,
    transparent 60deg,
    transparent 240deg,
    #ff4655 270deg,
    transparent 300deg
  );
}

.skill-acquisition-container[data-stat="AGI"] .skill-rays {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    #4ade80 30deg,
    transparent 60deg,
    transparent 240deg,
    #4ade80 270deg,
    transparent 300deg
  );
}

.skill-acquisition-container[data-stat="VIT"] .skill-rays {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    #ffd700 30deg,
    transparent 60deg,
    transparent 240deg,
    #ffd700 270deg,
    transparent 300deg
  );
}

.skill-acquisition-container[data-stat="LUK"] .skill-rays {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    #a855f7 30deg,
    transparent 60deg,
    transparent 240deg,
    #a855f7 270deg,
    transparent 300deg
  );
}

/* Main Card - Scoped to acquisition container only */
.skill-acquisition-container .skill-card {
  position: relative;
  background: linear-gradient(135deg, rgba(6, 9, 16, 0.95) 0%, rgba(10, 14, 22, 0.95) 100%);
  border: 3px solid var(--accent-primary);
  padding: 2rem 2rem;
  clip-path: polygon(
    0 20px, 20px 0,
    calc(100% - 20px) 0, 100% 20px,
    100% calc(100% - 20px), calc(100% - 20px) 100%,
    20px 100%, 0 calc(100% - 20px)
  );
  animation: skill-card-entrance 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 
    0 0 60px rgba(0, 212, 255, 0.3),
    inset 0 0 60px rgba(0, 212, 255, 0.03);
  pointer-events: auto;
}

/* Stat-specific card borders */
.skill-acquisition-container[data-stat="STR"] .skill-card {
  border-color: #ff4655;
  box-shadow: 
    0 0 60px rgba(255, 70, 85, 0.3),
    inset 0 0 60px rgba(255, 70, 85, 0.03);
}

.skill-acquisition-container[data-stat="AGI"] .skill-card {
  border-color: #4ade80;
  box-shadow: 
    0 0 60px rgba(74, 222, 128, 0.3),
    inset 0 0 60px rgba(74, 222, 128, 0.03);
}

.skill-acquisition-container[data-stat="INT"] .skill-card {
  border-color: var(--mp-color);
  box-shadow: 
    0 0 60px rgba(0, 212, 255, 0.3),
    inset 0 0 60px rgba(0, 212, 255, 0.03);
}

.skill-acquisition-container[data-stat="VIT"] .skill-card {
  border-color: #ffd700;
  box-shadow: 
    0 0 60px rgba(255, 215, 0, 0.3),
    inset 0 0 60px rgba(255, 215, 0, 0.03);
}

.skill-acquisition-container[data-stat="LUK"] .skill-card {
  border-color: #a855f7;
  box-shadow: 
    0 0 60px rgba(168, 85, 247, 0.3),
    inset 0 0 60px rgba(168, 85, 247, 0.03);
}

/* Card glow effect (pulsing, not rotating) */
.skill-acquisition-container .skill-card-glow {
  position: absolute;
  inset: -4px;
  background: var(--accent-primary);
  opacity: 0.3;
  filter: blur(15px);
  z-index: -1;
  animation: skill-card-pulse 2s ease-in-out infinite;
  clip-path: polygon(
    0 20px, 20px 0,
    calc(100% - 20px) 0, 100% 20px,
    100% calc(100% - 20px), calc(100% - 20px) 100%,
    20px 100%, 0 calc(100% - 20px)
  );
}

.skill-acquisition-container .skill-card-glow[data-stat="STR"] { background: #ff4655; }
.skill-acquisition-container .skill-card-glow[data-stat="AGI"] { background: #4ade80; }
.skill-acquisition-container .skill-card-glow[data-stat="INT"] { background: var(--mp-color); }
.skill-acquisition-container .skill-card-glow[data-stat="VIT"] { background: #ffd700; }
.skill-acquisition-container .skill-card-glow[data-stat="LUK"] { background: #a855f7; }

/* Card Inner Content */
.skill-acquisition-container .skill-card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* Announcement Banner */
.skill-announcement {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  animation: skill-announcement-slide 0.8s ease-out 0.2s both;
}

.skill-announcement-line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
  animation: skill-line-glow 2s ease-in-out infinite;
}

.skill-announcement-text {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-primary);
  letter-spacing: 4px;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0 15px var(--accent-primary);
}

/* Hero Name */
.skill-hero-name {
  font-size: 2rem;
  font-weight: 900;
  color: var(--text-primary);
  text-align: center;
  letter-spacing: 2px;
  line-height: 1.2;
  text-shadow: 
    0 0 30px var(--accent-primary),
    0 0 60px var(--accent-alpha-30),
    0 4px 12px rgba(0, 0, 0, 0.8);
  animation: skill-name-reveal 1s ease-out 0.4s both;
  max-width: 100%;
  word-wrap: break-word;
}

.skill-hero-name[data-stat="STR"] {
  text-shadow: 
    0 0 30px #ff4655,
    0 0 60px rgba(255, 70, 85, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.8);
}

.skill-hero-name[data-stat="AGI"] {
  text-shadow: 
    0 0 30px #4ade80,
    0 0 60px rgba(74, 222, 128, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.8);
}

.skill-hero-name[data-stat="VIT"] {
  text-shadow: 
    0 0 30px #ffd700,
    0 0 60px rgba(255, 215, 0, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.8);
}

.skill-hero-name[data-stat="LUK"] {
  text-shadow: 
    0 0 30px #a855f7,
    0 0 60px rgba(168, 85, 247, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.8);
}

/* Type Badge */
.skill-type-badge {
  padding: 0.5rem 1.5rem;
  background: var(--accent-alpha-10);
  border: 2px solid var(--accent-primary);
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-primary);
  animation: skill-badge-fade 0.6s ease-out 0.6s both;
}

.skill-type-badge[data-stat="STR"] {
  border-color: #ff4655;
  color: #ff4655;
  background: rgba(255, 70, 85, 0.1);
}

.skill-type-badge[data-stat="AGI"] {
  border-color: #4ade80;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
}

.skill-type-badge[data-stat="INT"] {
  border-color: var(--mp-color);
  color: var(--mp-color);
  background: var(--accent-alpha-10);
}

.skill-type-badge[data-stat="VIT"] {
  border-color: #ffd700;
  color: #ffd700;
  background: rgba(255, 215, 0, 0.1);
}

.skill-type-badge[data-stat="LUK"] {
  border-color: #a855f7;
  color: #a855f7;
  background: rgba(168, 85, 247, 0.1);
}

/* Stat Divider */
.skill-stat-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  margin: 0.5rem 0;
  animation: skill-divider-expand 0.8s ease-out 0.7s both;
}

.stat-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
}

.skill-stat-icon {
  padding: 0.4rem 1rem;
  background: rgba(10, 14, 26, 0.8);
  border: 2px solid var(--accent-primary);
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accent-primary);
  box-shadow: 0 0 20px var(--accent-alpha-30);
}

.skill-stat-icon[data-stat="STR"] {
  border-color: #ff4655;
  color: #ff4655;
  box-shadow: 0 0 20px rgba(255, 70, 85, 0.3);
}

.skill-stat-icon[data-stat="AGI"] {
  border-color: #4ade80;
  color: #4ade80;
  box-shadow: 0 0 20px rgba(74, 222, 128, 0.3);
}

.skill-stat-icon[data-stat="INT"] {
  border-color: var(--mp-color);
  color: var(--mp-color);
  box-shadow: 0 0 20px var(--accent-alpha-30);
}

.skill-stat-icon[data-stat="VIT"] {
  border-color: #ffd700;
  color: #ffd700;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.skill-stat-icon[data-stat="LUK"] {
  border-color: #a855f7;
  color: #a855f7;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.3);
}

.skill-divider-simple {
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
  animation: skill-divider-expand 0.8s ease-out 0.7s both;
}

/* Description */
.skill-epic-description {
  font-size: 0.95rem;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.5;
  max-width: 500px;
  padding: 0.5rem 0;
  animation: skill-description-fade 0.8s ease-out 0.8s both;
}

/* Stats Grid */
.skill-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.75rem;
  width: 100%;
  margin: 0.5rem 0;
  animation: skill-stats-fade 0.8s ease-out 0.9s both;
}

.skill-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem;
  background: rgba(10, 14, 26, 0.5);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
}

.skill-stat-item .stat-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.skill-stat-item .stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-primary);
  text-shadow: 0 0 10px var(--accent-alpha-50);
}

.skill-stat-item .stat-value[data-stat="STR"] { color: #ff4655; text-shadow: 0 0 10px rgba(255, 70, 85, 0.5); }
.skill-stat-item .stat-value[data-stat="AGI"] { color: #4ade80; text-shadow: 0 0 10px rgba(74, 222, 128, 0.5); }
.skill-stat-item .stat-value[data-stat="INT"] { color: var(--mp-color); text-shadow: 0 0 10px var(--accent-alpha-50); }
.skill-stat-item .stat-value[data-stat="VIT"] { color: #ffd700; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
.skill-stat-item .stat-value[data-stat="LUK"] { color: #a855f7; text-shadow: 0 0 10px rgba(168, 85, 247, 0.5); }

/* Passive Banner */
.skill-passive-banner {
  width: 100%;
  padding: 0.75rem 1rem;
  background: linear-gradient(90deg, transparent, var(--accent-alpha-10), transparent);
  border-top: 1px solid var(--accent-primary);
  border-bottom: 1px solid var(--accent-primary);
  margin: 0.5rem 0;
  animation: skill-passive-slide 0.8s ease-out 1s both;
}

.skill-passive-banner[data-stat="STR"] {
  border-color: #ff4655;
  background: linear-gradient(90deg, transparent, rgba(255, 70, 85, 0.1), transparent);
}

.skill-passive-banner[data-stat="AGI"] {
  border-color: #4ade80;
  background: linear-gradient(90deg, transparent, rgba(74, 222, 128, 0.1), transparent);
}

.skill-passive-banner[data-stat="VIT"] {
  border-color: #ffd700;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.1), transparent);
}

.skill-passive-banner[data-stat="LUK"] {
  border-color: #a855f7;
  background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.1), transparent);
}

.passive-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent-primary);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  text-align: center;
}

.passive-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.5;
}

/* Dismiss Hint */
.skill-dismiss-hint {
  font-size: 0.7rem;
  color: var(--text-secondary);
  opacity: 0.5;
  letter-spacing: 1px;
  margin-top: 0.5rem;
  animation: skill-hint-fade 1s ease-in-out 1.5s both;
}

/* Corner Decorations */
.skill-acquisition-container .skill-card-corner {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 3px solid var(--accent-primary);
}

.skill-acquisition-container .skill-corner-tl {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
  animation: skill-corner-tl 0.4s ease-out 0.3s both;
}

.skill-acquisition-container .skill-corner-tr {
  top: 0;
  right: 0;
  border-left: none;
  border-bottom: none;
  animation: skill-corner-tr 0.4s ease-out 0.4s both;
}

.skill-acquisition-container .skill-corner-bl {
  bottom: 0;
  left: 0;
  border-right: none;
  border-top: none;
  animation: skill-corner-bl 0.4s ease-out 0.5s both;
}

.skill-acquisition-container .skill-corner-br {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
  animation: skill-corner-br 0.4s ease-out 0.6s both;
}

.skill-acquisition-container .skill-card-corner[data-stat="STR"] { border-color: #ff4655; }
.skill-acquisition-container .skill-card-corner[data-stat="AGI"] { border-color: #4ade80; }
.skill-acquisition-container .skill-card-corner[data-stat="INT"] { border-color: var(--mp-color); }
.skill-acquisition-container .skill-card-corner[data-stat="VIT"] { border-color: #ffd700; }
.skill-acquisition-container .skill-card-corner[data-stat="LUK"] { border-color: #a855f7; }

/* Epic Particles */
.skill-particles-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.skill-epic-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  box-shadow: 0 0 15px currentColor;
  animation: skill-particle-float 4s ease-in-out infinite;
  pointer-events: none;
}

/* Animations */
@keyframes skill-rays-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes skill-card-entrance {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(50px);
  }
  60% {
    transform: scale(1.02) translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes skill-card-pulse {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes skill-announcement-slide {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes skill-line-glow {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

@keyframes skill-name-reveal {
  0% {
    opacity: 0;
    transform: scale(0.8);
    filter: blur(10px);
  }
  60% {
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes skill-badge-fade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes skill-divider-expand {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes skill-description-fade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes skill-stats-fade {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes skill-passive-slide {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes skill-hint-fade {
  0%, 50% {
    opacity: 0;
  }
  100% {
    opacity: 0.6;
  }
}

@keyframes skill-corner-tl {
  from {
    transform: translate(-10px, -10px);
    opacity: 0;
  }
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes skill-corner-tr {
  from {
    transform: translate(10px, -10px);
    opacity: 0;
  }
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes skill-corner-bl {
  from {
    transform: translate(-10px, 10px);
    opacity: 0;
  }
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes skill-corner-br {
  from {
    transform: translate(10px, 10px);
    opacity: 0;
  }
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes skill-particle-float {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) scale(0.5);
    opacity: 0;
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .skill-acquisition-container {
    width: 92%;
    max-width: none;
  }
  
  .skill-acquisition-container .skill-card {
    padding: 1.5rem 1.25rem;
  }
  
  .skill-hero-name {
    font-size: 1.6rem;
  }
  
  .skill-stats-grid {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  
  .skill-announcement-text {
    font-size: 0.6rem;
    letter-spacing: 1.5px;
  }
  
  .skill-acquisition-container .skill-card-corner {
    width: 16px;
    height: 16px;
  }
  
  .skill-epic-description {
    font-size: 0.9rem;
    padding: 0.4rem 0;
  }
  
  .skill-acquisition-container .skill-card-inner {
    gap: 0.75rem;
  }
}

/* Loading Overlay for Equipment Modal */
.acquisition-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10002;
  animation: fadeIn 0.3s ease;
}

.acquisition-loading-content {
  background: var(--bg-secondary);
  border: 2px solid var(--accent-primary);
  border-radius: 12px;
  padding: 2rem 2.5rem;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid var(--accent-alpha-20);
  border-top: 4px solid var(--accent-primary);
  border-radius: 50%;
  margin: 0 auto 1rem;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  color: var(--accent-primary);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
}

/* ================================
   GACHA EQUIPMENT ACQUISITION
   Epic reveal system with rank animations
   ================================ */

.equipment-gacha-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(15px);
  z-index: 10001;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.6s ease;
}

/* Screen flash effect for high ranks */
.equipment-gacha-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, var(--accent-primary) 0%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

.equipment-gacha-overlay.gacha-show {
  opacity: 1;
}

.equipment-gacha-overlay.gacha-fade-out {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Gacha Container */
.equipment-gacha-container {
  position: relative;
  width: 85%;
  max-width: 600px;
  pointer-events: none;
}

/* Background energy rays - STARTS NEUTRAL */
.equipment-gacha-rays {
  position: absolute;
  inset: -150%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    var(--accent-primary) 20deg,
    transparent 40deg,
    transparent 140deg,
    var(--accent-secondary) 160deg,
    transparent 180deg,
    transparent 240deg,
    var(--accent-primary) 260deg,
    transparent 280deg
  );
  animation: gacha-rays-spin 20s linear infinite;
  opacity: 0;
  filter: blur(80px);
  pointer-events: none;
  /* Smooth transition when rank colors are revealed */
  transition: background 0.8s ease, opacity 0.8s ease;
}

/* Main gacha card - STARTS NEUTRAL */
.equipment-gacha-card {
  position: relative;
  background: linear-gradient(135deg, rgba(5, 7, 12, 0.98) 0%, rgba(10, 14, 22, 0.98) 100%);
  border: 4px solid var(--accent-primary);
  padding: 2.5rem 2rem;
  clip-path: polygon(
    0 30px, 30px 0,
    calc(100% - 30px) 0, 100% 30px,
    100% calc(100% - 30px), calc(100% - 30px) 100%,
    30px 100%, 0 calc(100% - 30px)
  );
  box-shadow: 
    0 0 80px rgba(0, 212, 255, 0.4),
    inset 0 0 80px rgba(0, 212, 255, 0.05);
  pointer-events: auto;
  opacity: 0;
  transform: scale(0.5) rotateX(30deg);
  overflow: hidden;
  /* Smooth color transitions when rank is revealed */
  transition: border-color 0.8s ease, box-shadow 0.8s ease;
}

/* Rotating glow effect - STARTS NEUTRAL */
.equipment-gacha-glow {
  position: absolute;
  inset: -6px;
  background: var(--accent-primary);
  opacity: 0;
  filter: blur(30px);
  z-index: -1;
  clip-path: polygon(
    0 30px, 30px 0,
    calc(100% - 30px) 0, 100% 30px,
    100% calc(100% - 30px), calc(100% - 30px) 100%,
    30px 100%, 0 calc(100% - 30px)
  );
  /* Smooth color transition when rank is revealed */
  transition: background 0.8s ease;
}

/* Inner content wrapper */
.equipment-gacha-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  min-height: 380px;
}

/* Press to reveal prompt */
.gacha-press-to-reveal {
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  text-align: center;
  opacity: 0;
  z-index: 5;
  pointer-events: auto;
  cursor: pointer;
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: -1rem;
}

.gacha-reveal-announcement {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
  text-shadow: 0 0 20px var(--accent-primary);
  letter-spacing: 0.05em;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.gacha-reveal-prompt {
  font-size: 1.2rem;
  color: var(--accent-primary);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 0 0 15px var(--accent-alpha-50);
  padding: 1rem 2rem;
  /* Make border more subtle and blend with background */
  border: 2px solid var(--accent-alpha-40);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.4);
  display: inline-block;
  /* Add subtle static glow */
  box-shadow: 0 0 15px var(--accent-alpha-15), inset 0 0 20px var(--accent-alpha-5);
  /* Position relative for shimmer effect */
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Shimmer shine effect that sweeps across the button */
.gacha-reveal-prompt::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 150%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 30%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.05) 70%,
    transparent 100%
  );
  animation: gacha-shimmer-sweep 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

.gacha-reveal-shine {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200%;
  height: 200%;
  /* Make shine more subtle and remove breathing animation */
  background: radial-gradient(circle, var(--accent-alpha-5) 0%, transparent 60%);
  /* Remove breathing animation */
  /* animation: gacha-shine-pulse 3s ease-in-out infinite; */
  opacity: 0.3;
  pointer-events: none;
  z-index: -1;
}

/* Shimmer sweep animation - light sweeps across button with smooth pause */
@keyframes gacha-shimmer-sweep {
  0% {
    left: -150%;
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  25% {
    left: 100%;
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

@keyframes gacha-shine-pulse {
  0%, 100% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1.2);
  }
}

/* Rank reveal container - initially hidden */
.gacha-rank-reveal {
  font-size: 20rem;
  font-weight: 900;
  text-align: center;
  opacity: 0;
  letter-spacing: 0.05em;
  position: absolute;
  line-height: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.3);
  pointer-events: none;
  z-index: 10;
  width: 100%;
}

.gacha-rank-letter {
  display: inline-block;
  background: linear-gradient(180deg, #ffffff 0%, var(--accent-primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: 
    drop-shadow(0 0 40px var(--accent-primary))
    drop-shadow(0 0 80px var(--accent-primary))
    drop-shadow(0 10px 30px rgba(0, 0, 0, 0.8));
  /* Smooth transition when rank colors are revealed */
  transition: filter 0.8s ease;
}

/* Equipment showcase area */
.gacha-equipment-showcase {
  width: 100%;
  opacity: 0;
}

.gacha-equipment-name {
  font-size: 2.5rem;
  font-weight: 900;
  text-align: center;
  color: var(--text-primary);
  letter-spacing: 0.05em;
  line-height: 1.2;
  margin-bottom: 1rem;
  text-shadow: 
    0 0 40px var(--accent-primary),
    0 0 80px var(--accent-alpha-50),
    0 6px 20px rgba(0, 0, 0, 0.9);
  word-wrap: break-word;
  transition: text-shadow 0.5s ease;
}

/* Rank-specific equipment name glow */
.gacha-rank-E .gacha-equipment-name,
.gacha-rank-D .gacha-equipment-name {
  text-shadow: 
    0 0 30px #888888,
    0 0 60px rgba(136, 136, 136, 0.5),
    0 6px 20px rgba(0, 0, 0, 0.9);
}

.gacha-rank-C .gacha-equipment-name {
  text-shadow: 
    0 0 40px #4ade80,
    0 0 80px rgba(74, 222, 128, 0.6),
    0 6px 20px rgba(0, 0, 0, 0.9);
}

.gacha-rank-B .gacha-equipment-name {
  text-shadow: 
    0 0 40px #3b82f6,
    0 0 80px rgba(59, 130, 246, 0.6),
    0 6px 20px rgba(0, 0, 0, 0.9);
}

.gacha-rank-A .gacha-equipment-name {
  text-shadow: 
    0 0 50px #a855f7,
    0 0 90px rgba(168, 85, 247, 0.7),
    0 6px 20px rgba(0, 0, 0, 0.9);
}

.gacha-rank-S .gacha-equipment-name {
  text-shadow: 
    0 0 60px #fbbf24,
    0 0 100px rgba(251, 191, 36, 0.8),
    0 6px 20px rgba(0, 0, 0, 0.9);
}

.gacha-rank-SS .gacha-equipment-name {
  text-shadow: 
    0 0 70px #ef4444,
    0 0 110px rgba(239, 68, 68, 0.8),
    0 6px 20px rgba(0, 0, 0, 0.9);
}

.gacha-rank-Legendary .gacha-equipment-name {
  text-shadow: 
    0 0 80px #ffd700,
    0 0 120px rgba(255, 105, 180, 0.8),
    0 0 150px rgba(138, 43, 226, 0.6),
    0 6px 20px rgba(0, 0, 0, 0.9);
  animation: gacha-legendary-name-glow 2s ease-in-out infinite;
}

@keyframes gacha-legendary-name-glow {
  0%, 100% {
    text-shadow: 
      0 0 80px #ffd700,
      0 0 120px rgba(255, 105, 180, 0.8),
      0 0 150px rgba(138, 43, 226, 0.6),
      0 6px 20px rgba(0, 0, 0, 0.9);
  }
  50% {
    text-shadow: 
      0 0 100px #ffd700,
      0 0 140px rgba(255, 105, 180, 1),
      0 0 180px rgba(138, 43, 226, 0.8),
      0 6px 20px rgba(0, 0, 0, 0.9);
  }
}

.gacha-equipment-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.gacha-slot-badge {
  padding: 0.6rem 1.5rem;
  background: var(--accent-alpha-15);
  border: 2px solid var(--accent-primary);
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent-primary);
}

.gacha-rank-badge {
  padding: 0.6rem 1.5rem;
  background: linear-gradient(135deg, var(--accent-alpha-20), var(--accent-alpha-30));
  border: 2px solid;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 4px;
}

/* Equipment details */
.gacha-equipment-details {
  width: 100%;
  padding: 1.5rem;
  background: rgba(5, 7, 12, 0.6);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  margin-top: 1rem;
}

.gacha-description {
  font-size: 1rem;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.gacha-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.gacha-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background: rgba(10, 14, 26, 0.6);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
}

.gacha-stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.gacha-stat-value {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--accent-primary);
  text-shadow: 0 0 15px var(--accent-alpha-50);
}

.gacha-special-effect {
  width: 100%;
  padding: 1rem;
  background: linear-gradient(90deg, transparent, var(--accent-alpha-15), transparent);
  border-top: 2px solid var(--accent-primary);
  border-bottom: 2px solid var(--accent-primary);
  margin-top: 1rem;
  text-align: center;
}

.gacha-effect-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent-primary);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.gacha-effect-text {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Create image button */
.gacha-create-image-btn {
  width: 100%;
  margin-top: 1.5rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, var(--accent-alpha-20), rgba(147, 112, 219, 0.2));
  border: 2px solid var(--accent-primary);
  border-radius: 12px;
  color: var(--accent-primary);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.gacha-create-image-btn:hover {
  background: linear-gradient(135deg, var(--accent-primary), var(--rarity-epic));
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px var(--accent-alpha-50);
}

.gacha-create-image-btn:active {
  transform: translateY(-1px);
}

/* Dismiss hint */
.gacha-dismiss-hint {
  font-size: 0.75rem;
  color: var(--text-secondary);
  opacity: 0;
  letter-spacing: 1px;
  margin-top: 1rem;
  text-align: center;
}

/* Corner decorations - STARTS NEUTRAL */
.equipment-gacha-corner {
  position: absolute;
  width: 32px;
  height: 32px;
  border: 4px solid var(--accent-primary);
  opacity: 0;
  /* Smooth transition when rank colors are revealed */
  transition: border-color 0.8s ease;
}

.gacha-corner-tl {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
}

.gacha-corner-tr {
  top: 0;
  right: 0;
  border-left: none;
  border-bottom: none;
}

.gacha-corner-bl {
  bottom: 0;
  left: 0;
  border-right: none;
  border-top: none;
}

.gacha-corner-br {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
}

/* Particles container */
.equipment-gacha-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.gacha-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
}

/* RANK-SPECIFIC STYLING */
/* Rank E, D - Common (Gray) */
.gacha-rank-E .equipment-gacha-card,
.gacha-rank-D .equipment-gacha-card {
  border-color: #888888;
  box-shadow: 
    0 0 80px rgba(136, 136, 136, 0.3),
    inset 0 0 80px rgba(136, 136, 136, 0.05);
}

.gacha-rank-E .gacha-rank-letter,
.gacha-rank-D .gacha-rank-letter {
  background: linear-gradient(180deg, #888888, #666666);
  -webkit-background-clip: text;
  background-clip: text;
  filter: 
    drop-shadow(0 0 20px #888888)
    drop-shadow(0 0 40px rgba(136, 136, 136, 0.6))
    drop-shadow(0 10px 30px rgba(0, 0, 0, 0.8));
}

.gacha-rank-E .equipment-gacha-glow,
.gacha-rank-D .equipment-gacha-glow {
  background: #888888;
}

.gacha-rank-E .equipment-gacha-corner,
.gacha-rank-D .equipment-gacha-corner {
  border-color: #888888;
}

.gacha-rank-E .equipment-gacha-rays,
.gacha-rank-D .equipment-gacha-rays {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    #888888 20deg,
    transparent 40deg,
    transparent 240deg,
    #888888 260deg,
    transparent 280deg
  );
}

/* Rank C - Uncommon (Green) */
.gacha-rank-C .equipment-gacha-card {
  border-color: #4ade80;
  box-shadow: 
    0 0 80px rgba(74, 222, 128, 0.4),
    inset 0 0 80px rgba(74, 222, 128, 0.06);
}

.gacha-rank-C .gacha-rank-letter {
  background: linear-gradient(180deg, #4ade80, #22c55e);
  -webkit-background-clip: text;
  background-clip: text;
  filter: 
    drop-shadow(0 0 30px #4ade80)
    drop-shadow(0 0 50px rgba(74, 222, 128, 0.7))
    drop-shadow(0 10px 30px rgba(0, 0, 0, 0.8));
}

.gacha-rank-C .equipment-gacha-glow {
  background: #4ade80;
}

.gacha-rank-C .equipment-gacha-corner {
  border-color: #4ade80;
}

.gacha-rank-C .equipment-gacha-rays {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    #4ade80 20deg,
    transparent 40deg,
    transparent 240deg,
    #4ade80 260deg,
    transparent 280deg
  );
}

/* Rank B - Rare (Blue) */
.gacha-rank-B .equipment-gacha-card {
  border-color: #3b82f6;
  box-shadow: 
    0 0 80px rgba(59, 130, 246, 0.5),
    inset 0 0 80px rgba(59, 130, 246, 0.08);
}

.gacha-rank-B .gacha-rank-letter {
  background: linear-gradient(180deg, #60a5fa, #3b82f6);
  -webkit-background-clip: text;
  background-clip: text;
  filter: 
    drop-shadow(0 0 35px #3b82f6)
    drop-shadow(0 0 60px rgba(59, 130, 246, 0.7))
    drop-shadow(0 10px 30px rgba(0, 0, 0, 0.8));
}

.gacha-rank-B .equipment-gacha-glow {
  background: #3b82f6;
}

.gacha-rank-B .equipment-gacha-corner {
  border-color: #3b82f6;
}

.gacha-rank-B .equipment-gacha-rays {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    #3b82f6 20deg,
    transparent 40deg,
    transparent 240deg,
    #3b82f6 260deg,
    transparent 280deg
  );
}

/* Rank A - Epic */
.gacha-rank-A .equipment-gacha-card {
  border-color: #a855f7;
  box-shadow: 
    0 0 100px rgba(168, 85, 247, 0.6),
    inset 0 0 100px rgba(168, 85, 247, 0.1);
  animation: gacha-epic-pulse 2s ease-in-out infinite;
}

.gacha-rank-A .gacha-rank-letter {
  background: linear-gradient(180deg, #c084fc, #a855f7, #9333ea);
  -webkit-background-clip: text;
  background-clip: text;
  filter: 
    drop-shadow(0 0 50px #a855f7) 
    drop-shadow(0 0 80px #a855f7)
    drop-shadow(0 15px 40px rgba(0, 0, 0, 0.9));
  animation: gacha-rank-glow-pulse 1.5s ease-in-out infinite;
}

.gacha-rank-A .equipment-gacha-rays {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    #a855f7 20deg,
    #c084fc 30deg,
    transparent 40deg,
    transparent 240deg,
    #a855f7 260deg,
    #c084fc 270deg,
    transparent 280deg
  );
  opacity: 0.25;
}

.gacha-rank-A .equipment-gacha-glow {
  background: #a855f7;
  animation: gacha-glow-intense 2s ease-in-out infinite;
}

/* Rank S - Legendary */
.gacha-rank-S .equipment-gacha-card {
  border-color: #fbbf24;
  box-shadow: 
    0 0 120px rgba(251, 191, 36, 0.7),
    0 0 200px rgba(251, 191, 36, 0.4),
    inset 0 0 120px rgba(251, 191, 36, 0.12);
  animation: gacha-legendary-pulse 1.5s ease-in-out infinite;
}

.gacha-rank-S .gacha-rank-letter {
  background: linear-gradient(180deg, #fef08a, #fbbf24, #f59e0b);
  -webkit-background-clip: text;
  background-clip: text;
  filter: 
    drop-shadow(0 0 60px #fbbf24) 
    drop-shadow(0 0 100px #fbbf24)
    drop-shadow(0 0 140px rgba(251, 191, 36, 0.6))
    drop-shadow(0 20px 50px rgba(0, 0, 0, 0.95));
  animation: gacha-rank-legendary-pulse 1.2s ease-in-out infinite;
}

.gacha-rank-S .equipment-gacha-rays {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    #fbbf24 15deg,
    #fef08a 25deg,
    #fbbf24 35deg,
    transparent 45deg,
    transparent 135deg,
    #fbbf24 145deg,
    #fef08a 155deg,
    #fbbf24 165deg,
    transparent 175deg,
    transparent 235deg,
    #fbbf24 245deg,
    #fef08a 255deg,
    #fbbf24 265deg,
    transparent 275deg
  );
  opacity: 0.3;
  animation: gacha-rays-spin 12s linear infinite;
}

.gacha-rank-S .equipment-gacha-glow {
  background: linear-gradient(45deg, #fbbf24, #fef08a, #fbbf24, #f59e0b);
  background-size: 200% 200%;
  animation: gacha-glow-legendary 1.5s ease-in-out infinite;
}

/* Rank SS - Mythic */
.gacha-rank-SS .equipment-gacha-card {
  border-color: #ef4444;
  box-shadow: 
    0 0 150px rgba(239, 68, 68, 0.8),
    0 0 250px rgba(239, 68, 68, 0.5),
    inset 0 0 150px rgba(239, 68, 68, 0.15);
  animation: gacha-mythic-pulse 1s ease-in-out infinite;
}

.gacha-rank-SS .gacha-rank-letter {
  background: linear-gradient(180deg, #fca5a5, #ef4444, #dc2626, #991b1b);
  -webkit-background-clip: text;
  background-clip: text;
  filter: 
    drop-shadow(0 0 70px #ef4444) 
    drop-shadow(0 0 120px #ef4444)
    drop-shadow(0 0 180px rgba(239, 68, 68, 0.7))
    drop-shadow(0 20px 50px rgba(0, 0, 0, 0.95));
  animation: gacha-rank-mythic-pulse 0.8s ease-in-out infinite;
}

.gacha-rank-SS .equipment-gacha-rays {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    #ef4444 10deg,
    #fca5a5 20deg,
    #ef4444 30deg,
    transparent 40deg,
    transparent 80deg,
    #dc2626 90deg,
    #ef4444 100deg,
    #fca5a5 110deg,
    transparent 120deg,
    transparent 160deg,
    #ef4444 170deg,
    #fca5a5 180deg,
    #ef4444 190deg,
    transparent 200deg,
    transparent 240deg,
    #dc2626 250deg,
    #ef4444 260deg,
    #fca5a5 270deg,
    transparent 280deg,
    transparent 320deg,
    #ef4444 330deg,
    transparent 340deg
  );
  opacity: 0.35;
  animation: gacha-rays-spin 8s linear infinite;
}

.gacha-rank-SS .equipment-gacha-glow {
  background: linear-gradient(60deg, #ef4444, #fca5a5, #dc2626, #ef4444);
  background-size: 300% 300%;
  animation: gacha-glow-mythic 1s ease-in-out infinite;
}

/* Rank Legendary - Elegant Prismatic Rainbow */
.gacha-rank-Legendary .equipment-gacha-card {
  border-color: #ffd700;
  box-shadow: 
    0 0 150px rgba(255, 215, 0, 0.5),
    0 0 200px rgba(255, 105, 180, 0.4),
    0 0 250px rgba(138, 43, 226, 0.3),
    inset 0 0 120px rgba(255, 215, 0, 0.15);
  animation: gacha-legendary-pulse 1.8s ease-in-out infinite;
}

.gacha-rank-Legendary .gacha-rank-letter {
  /* Elegant rainbow gradient - jewel tones */
  background: linear-gradient(
    135deg,
    #ffd700 0%,      /* Gold */
    #ff69b4 12.5%,   /* Hot Pink */
    #ff1493 25%,     /* Deep Pink */
    #9370db 37.5%,   /* Medium Purple */
    #4169e1 50%,     /* Royal Blue */
    #00ced1 62.5%,   /* Dark Turquoise */
    #3cb371 75%,     /* Medium Sea Green */
    #ffd700 100%     /* Gold (loop) */
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  filter: 
    drop-shadow(0 0 50px rgba(255, 215, 0, 0.9)) 
    drop-shadow(0 0 80px rgba(255, 105, 180, 0.7))
    drop-shadow(0 0 110px rgba(138, 43, 226, 0.6))
    drop-shadow(0 0 140px rgba(65, 105, 225, 0.5))
    drop-shadow(0 25px 60px rgba(0, 0, 0, 0.95));
  animation: gacha-legendary-gradient-shift 5s linear infinite;
  font-size: 4rem !important; /* Smaller for longer text */
  letter-spacing: 0.2em;
}

/* Legendary letter-by-letter reveal with rainbow sparkle */
.gacha-legendary-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(50px) rotateX(90deg) scale(0.5);
  animation: gacha-legendary-letter-reveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes gacha-legendary-letter-reveal {
  0% {
    opacity: 0;
    transform: translateY(50px) rotateX(90deg) scale(0.5);
  }
  60% {
    transform: translateY(-15px) rotateX(-15deg) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0deg) scale(1);
  }
}

.gacha-rank-Legendary .equipment-gacha-rays {
  background: conic-gradient(
    from 0deg,
    #ffd700 0deg,
    #ff69b4 45deg,
    #9370db 90deg,
    #4169e1 135deg,
    #00ced1 180deg,
    #3cb371 225deg,
    #ffd700 270deg,
    #ff69b4 315deg,
    #ffd700 360deg
  );
  opacity: 0.35;
  animation: gacha-rays-spin 8s linear infinite;
}

.gacha-rank-Legendary .equipment-gacha-glow {
  background: linear-gradient(
    60deg,
    rgba(255, 215, 0, 0.5),
    rgba(255, 105, 180, 0.4),
    rgba(138, 43, 226, 0.4),
    rgba(65, 105, 225, 0.5)
  );
  background-size: 300% 300%;
  animation: gacha-legendary-glow 2s ease-in-out infinite;
}

.gacha-rank-Legendary .equipment-gacha-corner {
  border-color: #ffd700;
  animation: gacha-legendary-corners 2.5s linear infinite;
}

/* ANIMATIONS */
@keyframes gacha-rays-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes gacha-epic-pulse {
  0%, 100% {
    box-shadow: 
      0 0 100px rgba(168, 85, 247, 0.6),
      inset 0 0 100px rgba(168, 85, 247, 0.1);
  }
  50% {
    box-shadow: 
      0 0 130px rgba(168, 85, 247, 0.8),
      inset 0 0 130px rgba(168, 85, 247, 0.15);
  }
}

@keyframes gacha-legendary-pulse {
  0%, 100% {
    box-shadow: 
      0 0 120px rgba(251, 191, 36, 0.7),
      0 0 200px rgba(251, 191, 36, 0.4),
      inset 0 0 120px rgba(251, 191, 36, 0.12);
  }
  50% {
    box-shadow: 
      0 0 150px rgba(251, 191, 36, 0.9),
      0 0 250px rgba(251, 191, 36, 0.6),
      inset 0 0 150px rgba(251, 191, 36, 0.18);
  }
}

@keyframes gacha-mythic-pulse {
  0%, 100% {
    box-shadow: 
      0 0 150px rgba(239, 68, 68, 0.8),
      0 0 250px rgba(239, 68, 68, 0.5),
      inset 0 0 150px rgba(239, 68, 68, 0.15);
  }
  50% {
    box-shadow: 
      0 0 180px rgba(239, 68, 68, 1),
      0 0 300px rgba(239, 68, 68, 0.7),
      inset 0 0 180px rgba(239, 68, 68, 0.22);
  }
}

@keyframes gacha-rank-glow-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 50px #a855f7) drop-shadow(0 0 80px #a855f7);
  }
  50% {
    filter: drop-shadow(0 0 70px #a855f7) drop-shadow(0 0 110px #a855f7);
  }
}

@keyframes gacha-rank-legendary-pulse {
  0%, 100% {
    filter: 
      drop-shadow(0 0 60px #fbbf24) 
      drop-shadow(0 0 100px #fbbf24)
      drop-shadow(0 0 140px rgba(251, 191, 36, 0.6));
  }
  50% {
    filter: 
      drop-shadow(0 0 80px #fbbf24) 
      drop-shadow(0 0 130px #fbbf24)
      drop-shadow(0 0 180px rgba(251, 191, 36, 0.8));
  }
}

@keyframes gacha-rank-mythic-pulse {
  0%, 100% {
    filter: 
      drop-shadow(0 0 70px #ef4444) 
      drop-shadow(0 0 120px #ef4444)
      drop-shadow(0 0 180px rgba(239, 68, 68, 0.7));
  }
  50% {
    filter: 
      drop-shadow(0 0 90px #ef4444) 
      drop-shadow(0 0 150px #ef4444)
      drop-shadow(0 0 220px rgba(239, 68, 68, 0.9));
  }
}

@keyframes gacha-glow-intense {
  0%, 100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.6;
  }
}

@keyframes gacha-glow-legendary {
  0%, 100% {
    opacity: 0.5;
    background-position: 0% 50%;
  }
  50% {
    opacity: 0.7;
    background-position: 100% 50%;
  }
}

@keyframes gacha-glow-mythic {
  0%, 100% {
    opacity: 0.6;
    background-position: 0% 0%;
  }
  50% {
    opacity: 0.8;
    background-position: 100% 100%;
  }
}

@keyframes gacha-legendary-pulse {
  0%, 100% {
    box-shadow: 
      0 0 150px rgba(255, 215, 0, 0.5),
      0 0 200px rgba(255, 105, 180, 0.4),
      0 0 250px rgba(138, 43, 226, 0.3),
      inset 0 0 120px rgba(255, 215, 0, 0.15);
  }
  50% {
    box-shadow: 
      0 0 180px rgba(255, 215, 0, 0.7),
      0 0 240px rgba(255, 105, 180, 0.6),
      0 0 300px rgba(138, 43, 226, 0.5),
      inset 0 0 150px rgba(255, 215, 0, 0.22);
  }
}

@keyframes gacha-legendary-gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes gacha-legendary-glow {
  0%, 100% {
    opacity: 0.5;
    background-position: 0% 0%;
  }
  50% {
    opacity: 0.7;
    background-position: 100% 100%;
  }
}

@keyframes gacha-legendary-corners {
  0% {
    border-color: #ffd700;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
  }
  20% {
    border-color: #ff69b4;
    filter: drop-shadow(0 0 15px rgba(255, 105, 180, 0.8));
  }
  40% {
    border-color: #9370db;
    filter: drop-shadow(0 0 15px rgba(147, 112, 219, 0.8));
  }
  60% {
    border-color: #4169e1;
    filter: drop-shadow(0 0 15px rgba(65, 105, 225, 0.8));
  }
  80% {
    border-color: #00ced1;
    filter: drop-shadow(0 0 15px rgba(0, 206, 209, 0.8));
  }
  100% {
    border-color: #ffd700;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
  }
}

/* Legendary hint shimmer effect (elegant rainbow) */
.gacha-legendary-hint {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
  overflow: hidden;
}

.gacha-legendary-shimmer {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 20%,
    rgba(255, 215, 0, 0.4) 30%,
    rgba(255, 105, 180, 0.5) 40%,
    rgba(147, 112, 219, 0.6) 50%,
    rgba(65, 105, 225, 0.5) 60%,
    rgba(0, 206, 209, 0.4) 70%,
    transparent 80%
  );
  animation: gacha-shimmer-sweep 1.2s ease-out;
}

@keyframes gacha-shimmer-sweep {
  from {
    transform: translate(-100%, -100%) rotate(45deg);
  }
  to {
    transform: translate(100%, 100%) rotate(45deg);
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .equipment-gacha-container {
    width: 95%;
    max-width: none;
    max-height: 95vh;
    overflow: hidden;
    box-sizing: border-box;
  }
  
  .gacha-rank-Legendary .equipment-gacha-container {
    max-height: 90vh;
    overflow: hidden;
    box-sizing: border-box;
  }
  
  .equipment-gacha-card {
    padding: 2rem 1.5rem;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  
  .equipment-gacha-inner {
    min-height: 280px;
    justify-content: flex-start;
    gap: 0.5rem;
    padding-top: 1rem;
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  
  .gacha-equipment-showcase {
    /* Prevent vertical stretching on mobile */
    flex: 0 0 auto;
    width: 100%;
    max-height: fit-content;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  
  .gacha-equipment-details {
    padding: 1rem;
    margin-top: 0.75rem;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  
  .gacha-equipment-slot {
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
    width: 100%;
    box-sizing: border-box;
  }
  
  .gacha-equipment-name {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
  }
  
  .gacha-slot-badge,
  .gacha-rank-badge {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
  }
  
  .gacha-press-to-reveal {
    margin-top: -1.5rem;
    padding: 0 1rem;
  }
  
  .gacha-reveal-announcement {
    font-size: 1.4rem;
  }
  
  .gacha-reveal-prompt {
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
  }
  
  .gacha-rank-reveal {
    font-size: 10rem;
    transform: translate(-50%, -50%) scale(0.3);
    max-height: 100%;
  }
  
  /* Legendary responsive - smaller text on mobile */
  .gacha-rank-Legendary .gacha-rank-letter {
    font-size: 2.5rem !important;
    letter-spacing: 0.15em;
    filter: 
      drop-shadow(0 0 30px rgba(255, 215, 0, 0.9)) 
      drop-shadow(0 0 50px rgba(255, 105, 180, 0.7))
      drop-shadow(0 0 70px rgba(138, 43, 226, 0.6))
      drop-shadow(0 15px 40px rgba(0, 0, 0, 0.95));
  }
  
  .gacha-legendary-letter {
    font-size: inherit;
  }
  
  /* Scale down legendary name glow on mobile */
  .gacha-rank-Legendary .gacha-equipment-name {
    font-size: 1.5rem;
    text-shadow: 
      0 0 50px #ffd700,
      0 0 80px rgba(255, 105, 180, 0.7),
      0 0 100px rgba(138, 43, 226, 0.5),
      0 6px 20px rgba(0, 0, 0, 0.9);
    word-break: break-word;
    line-height: 1.3;
    margin-bottom: 0.5rem;
  }
  
  .gacha-rank-Legendary .gacha-slot-badge,
  .gacha-rank-Legendary .gacha-rank-badge {
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
    letter-spacing: 1px;
  }
  
  /* Reduce legendary effects on mobile for better performance */
  .gacha-rank-Legendary .equipment-gacha-card {
    box-shadow: 
      0 0 100px rgba(255, 215, 0, 0.4),
      0 0 150px rgba(255, 105, 180, 0.3),
      0 0 200px rgba(138, 43, 226, 0.2),
      inset 0 0 80px rgba(255, 215, 0, 0.12);
    padding: 1.5rem 1rem;
    max-height: 85vh;
  }
  
  .gacha-rank-Legendary .equipment-gacha-inner {
    min-height: auto;
    gap: 0.3rem;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 75vh;
    width: 100%;
    box-sizing: border-box;
  }
  
  .gacha-rank-Legendary .gacha-equipment-showcase {
    max-height: none;
    overflow-x: hidden;
    width: 100%;
    box-sizing: border-box;
  }
  
  .gacha-rank-Legendary .gacha-equipment-details {
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  
  .gacha-rank-Legendary .equipment-gacha-rays {
    opacity: 0.25;
  }
  
  .gacha-rank-Legendary .equipment-gacha-glow {
    opacity: 0.5;
  }
  
  .gacha-rank-Legendary .gacha-equipment-details {
    padding: 0.75rem;
    margin-top: 0.5rem;
  }
  
  .gacha-rank-Legendary .gacha-equipment-slot {
    margin-bottom: 0.5rem;
  }
  
  .gacha-rank-Legendary .gacha-description {
    font-size: 0.85rem;
    line-height: 1.3;
    margin-bottom: 0.5rem;
  }
  
  .gacha-rank-Legendary .gacha-stats-grid {
    gap: 0.5rem;
  }
  
  .gacha-rank-Legendary .gacha-stat-item {
    padding: 0.4rem;
  }
  
  .gacha-rank-Legendary .gacha-stat-label,
  .gacha-rank-Legendary .gacha-stat-value {
    font-size: 0.9rem;
  }
  
  .gacha-rank-Legendary .gacha-create-image-btn {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    margin-top: 0.5rem;
  }
  
  .gacha-rank-Legendary .gacha-dismiss-hint {
    font-size: 0.85rem;
    padding: 0.5rem;
  }
  
  .gacha-stats-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    width: 100%;
    box-sizing: border-box;
  }
  
  .gacha-description {
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 0.75rem;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
  }
  
  .gacha-stat-item {
    padding: 0.5rem;
    box-sizing: border-box;
  }
  
  .gacha-create-image-btn {
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .gacha-dismiss-hint {
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .equipment-gacha-corner {
    width: 20px;
    height: 20px;
  }
}

.btn-cancel-loading {
  background: rgba(255, 70, 85, 0.2);
  border: 2px solid var(--accent-danger);
  color: var(--accent-danger);
  padding: 0.6rem 1.5rem;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-cancel-loading:hover {
  background: var(--accent-danger);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 70, 85, 0.4);
}

.btn-cancel-loading:active {
  transform: translateY(0);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .acquisition-content {
    padding: 1.5rem 1.75rem;
    max-width: 90%;
  }
  
  .acquisition-icon {
    font-size: 2.5rem;
  }
  
  .acquisition-title {
    font-size: 1.2rem;
  }
  
  .acquisition-name {
    font-size: 1.5rem;
  }
  
  .acquisition-equipment-header {
    gap: 0.75rem;
  }
  
  .btn-create-equipment-image {
    font-size: 0.9rem;
    padding: 0.75rem 1.2rem;
  }
  
  .acquisition-details {
    padding: 1rem;
  }
  
  .skill-stats,
  .equipment-stats {
    gap: 0.5rem;
  }
}

/* ================================
   MOOD SYSTEM STYLES
   ================================ */

/* Mood container - sits behind everything */
.mood-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* Color overlay for mood atmosphere */
.mood-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: background-color 2s ease, opacity 2s ease, box-shadow 2s ease;
  mix-blend-mode: multiply;
}

/* Particle container */
.mood-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Base particle style */
.mood-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.6;
  /* GPU Optimization: Removed will-change - browser can optimize automatically */
  /* will-change forces GPU layer creation even when not needed, causing high GPU usage */
  /* Visual appearance unchanged - browser will still composite for animations */
}

/* Particle animation variants */
.mood-particle-sparks {
  animation: moodSparkFloat linear infinite;
}

.mood-particle-energy {
  animation: moodEnergyPulse ease-in-out infinite;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.mood-particle-mist {
  animation: moodMistDrift linear infinite;
  /* GPU Optimization: Reduced blur from 3px to 1px for better performance */
  /* Blur is one of the most expensive filter operations */
  filter: blur(1px);
  border-radius: 40%;
  /* Visual note: Slight reduction in softness, but maintains mist-like appearance */
}

.mood-particle-gentle {
  animation: moodGentleFloat ease-in-out infinite;
  opacity: 0.4;
}

.mood-particle-intense {
  animation: moodIntensePulse ease-in-out infinite;
}

.mood-particle-celebration {
  animation: moodCelebration ease-out infinite;
}

.mood-particle-sparkles {
  animation: moodSparkleRise linear infinite;
  opacity: 0.8;
}

/* Particle animations */
@keyframes moodSparkFloat {
  0% {
    transform: translateY(100vh) translateX(0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-10vh) translateX(20px) scale(0.5);
    opacity: 0;
  }
}

@keyframes moodEnergyPulse {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.5) rotate(180deg);
    opacity: 0.4;
  }
}

@keyframes moodMistDrift {
  0% {
    transform: translateX(-10%) translateY(100vh) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 0.3;
  }
  90% {
    opacity: 0.3;
  }
  100% {
    transform: translateX(10%) translateY(-10vh) scale(2);
    opacity: 0;
  }
}

@keyframes moodGentleFloat {
  0%, 100% {
    transform: translateY(0) translateX(0);
    opacity: 0.3;
  }
  50% {
    transform: translateY(-20px) translateX(10px);
    opacity: 0.5;
  }
}

@keyframes moodIntensePulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
    filter: blur(2px);
  }
  50% {
    transform: scale(1.3);
    opacity: 0.5;
    filter: blur(4px);
  }
}

@keyframes moodCelebration {
  0% {
    transform: translateY(0) scale(0);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) scale(1) rotate(720deg);
    opacity: 0;
  }
}

@keyframes moodSparkleRise {
  0% {
    transform: translateY(0) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(-50vh) scale(1);
    opacity: 0;
  }
}

/* Mood intensity classes for different effects */
.mood-intense {
  filter: brightness(0.9) saturate(1.2);
}

.mood-subtle {
  filter: brightness(0.98) saturate(1.05);
}

/* Screen flash effects for mood transitions */
@keyframes moodFlashCombat {
  0% {
    background: rgba(255, 0, 0, 0);
  }
  50% {
    background: rgba(255, 0, 0, 0.3);
  }
  100% {
    background: rgba(255, 0, 0, 0);
  }
}

@keyframes moodFlashEpic {
  0% {
    background: rgba(255, 215, 0, 0);
  }
  50% {
    background: rgba(255, 215, 0, 0.4);
  }
  100% {
    background: rgba(255, 215, 0, 0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .mood-particle {
    width: 2px !important;
    height: 2px !important;
  }
  
  .mood-overlay {
    opacity: 0.8; /* Slightly less intense on mobile */
  }
}

/* ================================
   STORY TIMELINE STYLES
   ================================ */

/* Timeline Controls */
.timeline-controls {
  position: relative;
  background: var(--bg-secondary);
  padding: 1.5rem;
  border-radius: 8px;
  margin-bottom: 2rem;
  border: 2px solid var(--border-primary);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}


.timeline-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.timeline-filter-btn {
  padding: 0.5rem 1rem;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-primary);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.timeline-filter-btn:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.timeline-filter-btn.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--bg-primary);
  font-weight: bold;
}

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

.timeline-action-btn {
  padding: 0.6rem 1.2rem;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  border: none;
  border-radius: 6px;
  color: white;
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.timeline-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--accent-alpha-30);
}

/* Timeline Cards */
.timeline-card {
  background: linear-gradient(135deg, var(--bg-tertiary) 0%, rgba(26, 31, 46, 0.95) 100%);
  border: 2px solid var(--border-primary);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: fadeInUp 0.4s ease both;
  overflow: hidden;
  box-sizing: border-box;
}

.timeline-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.timeline-card:hover::before {
  opacity: 1;
}

.timeline-card:hover {
  border-color: var(--accent-primary);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px var(--accent-alpha-20);
}

@media (hover: none) {
  .timeline-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}

.timeline-card.important {
  border-left-width: 6px;
  border-left-color: var(--accent-secondary);
}

/* Timeline Card Header */
.timeline-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  gap: 1rem;
}

.timeline-turn-info {
  flex: 1;
}

.timeline-turn-number {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--accent-primary);
  margin-bottom: 0.5rem;
  text-shadow: 0 0 10px var(--accent-alpha-30);
}

.timeline-turn-time {
  font-size: 0.8rem;
  color: var(--text-muted);
}

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

.timeline-jump-btn {
  padding: 0.4rem 0.8rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.timeline-jump-btn:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

/* Timeline Events */
.timeline-events {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.timeline-event-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 0.8rem;
  border-radius: 16px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.timeline-event-tag.combat { background: rgba(255, 70, 85, 0.2); color: #ff4655; border: 1px solid #ff4655; }
.timeline-event-tag.rank { background: rgba(255, 215, 0, 0.2); color: #ffd700; border: 1px solid #ffd700; }
.timeline-event-tag.loot { background: rgba(255, 0, 255, 0.2); color: #ff00ff; border: 1px solid #ff00ff; }
.timeline-event-tag.location { background: color-mix(in srgb, var(--accent-primary) 20%, transparent); color: var(--accent-primary); border: 1px solid var(--accent-primary); }
.timeline-event-tag.stat { background: rgba(0, 255, 0, 0.2); color: #00ff00; border: 1px solid #00ff00; }
.timeline-event-tag.critical { background: rgba(255, 0, 0, 0.3); color: #ff0000; border: 1px solid #ff0000; animation: pulse 1s infinite; }

/* Timeline Story */
.timeline-story {
  color: var(--text-primary);
  line-height: 1.8;
  margin-bottom: 1rem;
  padding: 1.25rem;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  border-left: 4px solid var(--accent-primary);
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--accent-alpha-10);
}

.timeline-story.collapsed {
  max-height: 100px;
  overflow: hidden;
  position: relative;
}

.timeline-story.collapsed::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(transparent, var(--bg-tertiary));
}

.timeline-expand-btn {
  color: var(--accent-primary);
  cursor: pointer;
  font-size: 0.85rem;
  margin-top: 0.5rem;
  display: inline-block;
}

.timeline-expand-btn:hover {
  text-decoration: underline;
}

/* Chapter Dividers */
.timeline-chapter {
  text-align: center;
  padding: 2rem 1rem;
  margin: 2rem 0;
  position: relative;
}

.timeline-chapter::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
  transform: translateY(-50%);
}

.timeline-chapter-label {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 0.75rem 2rem;
  background: var(--bg-secondary);
  border: 2px solid var(--accent-primary);
  border-radius: 24px;
  color: var(--accent-primary);
  font-size: 1.1rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Empty State */
.timeline-empty {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-muted);
}

.timeline-empty-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.3;
}

/* Codex UI Styles */
.codex-overview {
  padding: 1rem 0;
}

.codex-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.codex-stat-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
}

.codex-stat-card:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 0 15px var(--accent-alpha-20);
  transform: translateY(-2px);
}

.codex-stat-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.codex-stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent-primary);
  margin-bottom: 0.25rem;
}

.codex-stat-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.codex-current-status {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.codex-current-status h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--accent-primary);
}

/* ============================================
   Timeline Mobile Optimization (≤1024px)
   ============================================ */
@media (max-width: 1024px) {
  .timeline-controls {
    padding: 1.25rem;
    gap: 0.85rem;
    position: relative;
    top: auto;
    margin-bottom: 1.5rem;
  }
  
  .timeline-filter-btn {
    font-size: 0.8rem;
    padding: 0.45rem 0.85rem;
  }
  
  .timeline-action-btn {
    font-size: 0.8rem;
    padding: 0.55rem 1rem;
  }
  
  .timeline-card {
    padding: 1.25rem;
  }
  
  .codex-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.85rem;
  }
}

/* ============================================
   Timeline Mobile Optimization (≤768px)
   ============================================ */
@media (max-width: 768px) {
  /* Fix sticky controls overlapping */
  .timeline-controls {
    position: relative;
    top: auto;
    padding: 1rem;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    z-index: 5;
    border-radius: 8px;
  }
  
  .timeline-filters {
    gap: 0.5rem;
  }
  
  .timeline-filter-btn {
    font-size: 0.8rem;
    padding: 0.4rem 0.75rem;
    flex: 1 1 auto;
    min-width: fit-content;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  
  .timeline-actions {
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  
  .timeline-action-btn {
    flex: 1;
    font-size: 0.85rem;
    padding: 0.6rem 0.85rem;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  
  .timeline-action-btn:hover {
    transform: none;
  }
  
  .timeline-card {
    padding: 1rem;
    margin-bottom: 1rem;
  }
  
  .timeline-card:hover {
    transform: none;
  }
  
  .timeline-card-header {
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
  }
  
  .timeline-turn-number {
    font-size: 1rem;
  }
  
  .timeline-turn-time {
    font-size: 0.75rem;
  }
  
  .timeline-story {
    font-size: 0.9rem;
    padding: 0.85rem;
    max-height: 250px;
  }
  
  .timeline-events {
    gap: 0.4rem;
  }
  
  .timeline-event-tag {
    font-size: 0.75rem;
    padding: 0.3rem 0.65rem;
  }
  
  .timeline-jump-btn {
    font-size: 0.75rem;
    padding: 0.35rem 0.65rem;
    min-height: 36px;
  }
  
  /* Codex Mobile */
  .codex-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  
  .codex-stat-card {
    padding: 1rem;
  }
  
  .codex-stat-icon {
    font-size: 1.5rem;
  }
  
  .codex-stat-value {
    font-size: 1.5rem;
  }
  
  .codex-stat-label {
    font-size: 0.8rem;
  }
  
  .codex-current-status {
    padding: 1rem;
  }
  
  .timeline-chapter {
    padding: 1.5rem 0.5rem;
    margin: 1.5rem 0;
  }
  
  .timeline-chapter-label {
    padding: 0.6rem 1.5rem;
    font-size: 1rem;
  }
}

/* ============================================
   Timeline Small Phone Optimization (≤480px)
   ============================================ */
@media (max-width: 480px) {
  .timeline-controls {
    padding: 0.85rem;
    gap: 0.65rem;
    margin-bottom: 1rem;
  }
  
  .timeline-filter-btn {
    font-size: 0.75rem;
    padding: 0.35rem 0.65rem;
    min-height: 42px;
  }
  
  .timeline-actions {
    flex-direction: column;
    width: 100%;
  }
  
  .timeline-action-btn {
    width: 100%;
    font-size: 0.8rem;
    padding: 0.55rem 0.75rem;
    min-height: 42px;
  }
  
  .timeline-card {
    padding: 0.85rem;
    margin-bottom: 0.85rem;
  }
  
  .timeline-turn-number {
    font-size: 0.95rem;
  }
  
  .timeline-story {
    font-size: 0.85rem;
    padding: 0.75rem;
    line-height: 1.6;
    max-height: 200px;
  }
  
  .timeline-events {
    gap: 0.3rem;
  }
  
  .timeline-event-tag {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
  }
  
  .timeline-expand-btn {
    font-size: 0.8rem;
  }
  
  .timeline-jump-btn {
    font-size: 0.7rem;
    padding: 0.3rem 0.55rem;
    min-height: 34px;
  }
  
  .timeline-chapter {
    padding: 1rem 0.5rem;
    margin: 1rem 0;
  }
  
  .timeline-chapter-label {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
  
  .codex-stats-grid {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }
  
  .codex-stat-card {
    padding: 0.85rem;
  }
  
  .codex-stat-icon {
    font-size: 1.25rem;
  }
  
  .codex-stat-value {
    font-size: 1.25rem;
  }
  
  .codex-stat-label {
    font-size: 0.75rem;
  }
  
  .codex-current-status {
    padding: 0.85rem;
  }
  
  .timeline-empty {
    padding: 3rem 1rem;
  }
  
  .timeline-empty-icon {
    font-size: 3rem;
  }
}

.codex-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

.codex-section {
  margin-bottom: 2rem;
}

.codex-section h3 {
  margin-bottom: 1rem;
  color: var(--accent-primary);
  font-size: 1.25rem;
}

.codex-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.codex-list-item {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  gap: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.codex-list-item:hover {
  border-color: var(--accent-primary);
  background: var(--accent-alpha-5);
  transform: translateX(5px);
}

.codex-list-item.important {
  border-left: 4px solid #ffd700;
}

.codex-item-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.codex-item-content {
  flex: 1;
}

.codex-item-title {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.codex-item-meta {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.codex-item-events {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.codex-tag {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  background: var(--accent-alpha-10);
  border: 1px solid var(--accent-alpha-30);
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--accent-primary);
}

.codex-item-enemies {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.codex-enemy-tag {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  background: rgba(255, 70, 85, 0.1);
  border: 1px solid rgba(255, 70, 85, 0.3);
  border-radius: 4px;
  font-size: 0.75rem;
  color: #ff6b7a;
}

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

.codex-item-card {
  background: var(--bg-tertiary);
  border: 2px solid var(--border-primary);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.codex-item-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 20px var(--accent-alpha-30);
}

.codex-item-card.rank-legendary {
  border-color: #ff00ff;
  box-shadow: 0 0 10px rgba(255, 0, 255, 0.3);
}

.codex-item-card.rank-ss {
  border-color: #ff4655;
  box-shadow: 0 0 10px rgba(255, 70, 85, 0.3);
}

.codex-item-card.rank-s {
  border-color: #ffd700;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.codex-item-card.rank-a {
  border-color: #00ff00;
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
}

.codex-item-rank {
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.codex-item-name {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.codex-item-type {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.codex-timeline {
  position: relative;
  padding-left: 2rem;
}

.codex-timeline::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-primary);
}

.codex-milestone {
  position: relative;
  margin-bottom: 2rem;
  cursor: pointer;
  padding-left: 1rem;
}

.codex-milestone:hover .codex-milestone-content {
  background: var(--accent-alpha-5);
}

.codex-milestone-marker {
  position: absolute;
  left: -1.75rem;
  top: 0.5rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-primary);
  border: 3px solid var(--bg-secondary);
  box-shadow: 0 0 10px var(--accent-alpha-50);
}

.codex-milestone-content {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 1rem;
  transition: all 0.3s ease;
}

.codex-milestone-title {
  font-weight: 600;
  color: var(--accent-primary);
  margin-bottom: 0.25rem;
}

.codex-milestone-meta {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.codex-milestone-stats {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.codex-empty {
  text-align: center;
  padding: 3rem 2rem;
  color: var(--text-muted);
  font-size: 1.125rem;
}

/* Pulse animation */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

/* Responsive - Progression and Analytics Mobile Fixes */
@media (max-width: 768px) {
  /* Progression Modal Mobile Fixes */
  .progression-card {
    padding: 1rem !important;
  }
  
  .progression-value {
    font-size: 1.5rem !important;
  }
  
  .progression-label {
    font-size: 0.75rem !important;
  }
  
  /* Charts mobile responsive */
  .modal-large {
    max-width: 95vw !important;
    margin: 1rem !important;
  }
  
  .modal-body {
    padding: 1rem !important;
  }
  
  /* Analytics stats mobile */
  .analytics-stat {
    padding: 0.75rem !important;
    gap: 0.5rem !important;
  }
  
  .analytics-icon {
    font-size: 1.5rem !important;
  }
  
  .analytics-value {
    font-size: 1.25rem !important;
  }
  
  .analytics-label {
    font-size: 0.7rem !important;
  }
  
  /* Admin Panel Mobile Optimization */
  .admin-panel-modal {
    max-width: 95vw !important;
    max-height: 95vh !important;
    padding: 1rem !important;
    margin: 0.5rem !important;
  }
  
  #adminPanelContent {
    width: 100% !important;
    box-sizing: border-box;
  }
  
  #adminPanelContent > div:first-child {
    margin-bottom: 1rem !important;
  }
  
  #adminPanelContent h3 {
    font-size: 1.1rem !important;
  }
  
  #adminPanelContent p {
    font-size: 0.85rem !important;
  }
  
  /* Quick user buttons */
  .admin-quick-users {
    gap: 0.5rem !important;
  }
  
  #adminPanelContent .quick-user-btn {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.85rem !important;
    flex: 1 1 auto !important;
    min-width: calc(50% - 0.25rem) !important;
  }
  
  /* Input and button container */
  .admin-input-container {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  
  #adminPanelContent .admin-input-container {
    flex-direction: column !important;
  }
  
  #manualUserIdInput {
    width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 0.9rem !important;
    padding: 0.75rem !important;
  }
  
  .fetch-sessions-btn,
  #fetchUserSessionsBtn {
    width: 100% !important;
    padding: 0.75rem !important;
    min-height: 44px !important;
  }
  
  /* Session cards */
  .admin-session-card,
  #manualSessionsContent .session-card,
  #adminPanelContent .session-card {
    padding: 0.75rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  .admin-session-header,
  #manualSessionsContent .session-card > div:first-child,
  #adminPanelContent .session-card > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }
  
  .admin-session-header > div {
    min-width: 100% !important;
    width: 100% !important;
  }
  
  .import-session-btn,
  #manualSessionsContent .import-session-btn,
  #adminPanelContent .import-session-btn {
    width: 100% !important;
    padding: 0.75rem !important;
    min-height: 44px !important;
    font-size: 0.9rem !important;
    min-width: 100% !important;
  }
  
  #manualSessionsContent .session-card > div:last-child,
  #adminPanelContent .session-card > div:last-child {
    font-size: 0.8rem !important;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
    margin-top: 0.5rem !important;
  }
}

/* Smaller mobile devices */
@media (max-width: 480px) {
  .admin-panel-modal {
    max-width: 100vw !important;
    max-height: 100vh !important;
    padding: 0.75rem !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  
  .admin-panel-modal .modal-header {
    padding-bottom: 0.75rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  .admin-panel-modal .modal-header h2 {
    font-size: 1rem !important;
  }
  
  .admin-panel-modal .modal-body {
    padding: 0 !important;
  }
  
  #adminPanelContent {
    padding: 0 !important;
  }
  
  #adminPanelContent h3 {
    font-size: 1rem !important;
  }
  
  .admin-quick-users .quick-user-btn {
    min-width: 100% !important;
    width: 100% !important;
  }
  
  #adminPanelContent .quick-user-btn {
    min-width: 100% !important;
  }
}

/* ============================================
   Image Viewer Overlay (Modular)
   ============================================ */

.image-viewer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
  backdrop-filter: blur(10px);
}

.image-viewer-container {
  width: 90%;
  max-width: 1200px;
  height: 90%;
  max-height: 900px;
  background: var(--bg-secondary);
  border: 2px solid var(--accent-primary);
  border-radius: 16px;
  box-shadow: 0 0 40px rgba(77, 212, 255, 0.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalSlideIn 0.3s ease;
}

.image-viewer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--accent-primary);
}

.image-viewer-title-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}

.image-viewer-title {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.25rem;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(77, 212, 255, 0.5);
  border: 2px solid transparent;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  transition: all 0.3s ease;
  outline: none;
  cursor: text;
}

.image-viewer-title:hover {
  border-color: var(--border-primary);
}

.image-viewer-title:focus {
  border-color: var(--accent-primary);
  background: rgba(77, 212, 255, 0.05);
  box-shadow: 0 0 10px rgba(77, 212, 255, 0.3);
}

.image-viewer-edit-btn {
  background: rgba(77, 212, 255, 0.1);
  border: 2px solid var(--border-primary);
  border-radius: 6px;
  padding: 0.5rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.image-viewer-edit-btn:hover {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(77, 212, 255, 0.5);
}

.image-viewer-edit-btn svg {
  width: 16px;
  height: 16px;
}

.image-viewer-close {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 2rem;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.image-viewer-close:hover {
  background: rgba(255, 70, 85, 0.2);
  color: var(--accent-danger);
  transform: scale(1.1);
}

.image-viewer-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  overflow: hidden;
  background: rgba(10, 14, 26, 0.8);
  position: relative;
  touch-action: pan-y pinch-zoom;
}

#swipeContainer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

#swipeContainer #imageViewerImage {
  position: relative;
  flex-shrink: 0;
  width: auto;
  height: auto;
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.3s ease, opacity 0.3s ease;
}

.preview-image {
  position: absolute;
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 1;
  pointer-events: none;
  filter: none;
  backdrop-filter: none;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.3s ease, opacity 0.3s ease;
}

.prev-image {
  right: 100%;
  margin-right: 20px;
}

.next-image {
  left: 100%;
  margin-left: 20px;
}

.image-viewer-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid var(--border-primary);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
  backdrop-filter: blur(4px);
}

.image-viewer-nav-btn:hover {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 4px 12px rgba(77, 212, 255, 0.5);
}

.image-viewer-nav-btn.prev {
  left: 1.5rem;
}

.image-viewer-nav-btn.next {
  right: 1.5rem;
}

.image-viewer-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.image-viewer-nav-btn svg {
  width: 24px;
  height: 24px;
}

.image-viewer-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.image-viewer-spinner .loading-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(77, 212, 255, 0.2);
  border-top: 4px solid var(--accent-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.image-viewer-spinner .loading-text {
  color: var(--text-secondary);
  font-size: 1rem;
  margin: 0;
  text-shadow: 0 0 10px rgba(77, 212, 255, 0.3);
}

.image-viewer-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  animation: imageZoomIn 0.3s ease;
  /* High quality rendering for portraits */
  image-rendering: -webkit-optimize-contrast; /* Edge 79+ */
  image-rendering: -moz-crisp-edges; /* Firefox */
  image-rendering: crisp-edges; /* Standard */
  transition: box-shadow 0.3s ease, opacity 0.3s ease;
}

@keyframes imageZoomIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.image-viewer-actions {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--bg-tertiary);
  border-top: 1px solid var(--accent-primary);
}

.image-viewer-actions button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.image-viewer-actions .btn-primary {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  border: none;
  color: var(--text-primary);
  box-shadow: 0 4px 12px rgba(77, 212, 255, 0.3);
}

.image-viewer-actions .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(77, 212, 255, 0.5);
}

.image-viewer-actions .btn-secondary {
  background: rgba(77, 212, 255, 0.1);
  border: 1px solid var(--accent-primary);
  color: var(--accent-primary);
}

.image-viewer-actions .btn-secondary:hover {
  background: rgba(77, 212, 255, 0.2);
  transform: translateY(-2px);
}

/* Responsive Design for Image Viewer */
@media (max-width: 768px) {
  .image-viewer-container {
    width: 95%;
    height: 95%;
  }

  .image-viewer-header {
    padding: 1rem;
  }

  .image-viewer-title {
    font-size: 1.1rem;
  }

  .image-viewer-body {
    padding: 1rem;
  }

  .image-viewer-actions {
    padding: 1rem;
    gap: 0.75rem;
    flex-direction: column;
  }

  .image-viewer-actions button {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .image-viewer-container {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .image-viewer-header {
    padding: 0.875rem;
  }

  .image-viewer-title {
    font-size: 1rem;
  }

  .image-viewer-body {
    padding: 0.75rem;
  }

  .image-viewer-actions {
    padding: 0.875rem;
  }

  .image-viewer-actions button {
    padding: 0.625rem 0.875rem;
    font-size: 0.85rem;
  }
}

/* ============================================
   GALLERY STYLES
   ============================================ */

/* Gallery Modal Full Screen */
.gallery-modal-content {
  max-width: 95vw !important;
  width: 95vw !important;
  height: 95vh !important;
  max-height: 95vh !important;
  margin: 2.5vh auto;
  display: flex;
  flex-direction: column;
}

.gallery-header {
  flex-shrink: 0;
  border-bottom: 2px solid var(--border-primary);
  padding: 1.5rem 2rem;
}

.gallery-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accent-primary);
  text-shadow: 0 0 20px rgba(77, 212, 255, 0.5);
}

.gallery-body {
  flex: 1;
  overflow-y: auto;
  padding: 2rem;
  max-height: none !important;
}

.gallery-controls {
  position: relative;
  background: var(--bg-primary);
  padding: 1.5rem;
  border-radius: 12px;
  margin-bottom: 2rem;
  border: 2px solid var(--border-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.gallery-selection-controls {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.gallery-select-btn,
.gallery-delete-selected-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  border: 2px solid var(--accent-alpha-50);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.8);
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.gallery-select-btn:hover {
  background: var(--accent-alpha-10);
  border-color: var(--accent-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(77, 212, 255, 0.2);
}

.gallery-select-btn.active {
  background: rgba(255, 70, 85, 0.15);
  border-color: var(--accent-danger);
  color: var(--accent-danger);
}

.gallery-select-btn.active:hover {
  background: rgba(255, 70, 85, 0.25);
  box-shadow: 0 4px 12px rgba(255, 70, 85, 0.3);
}

.gallery-delete-selected-btn {
  background: rgba(255, 70, 85, 0.15);
  border-color: var(--accent-danger);
  color: var(--accent-danger);
}

.gallery-delete-selected-btn:hover {
  background: rgba(255, 70, 85, 0.25);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 70, 85, 0.3);
}

.gallery-upload-section {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.gallery-upload-btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 0.875rem 1.75rem;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  border: none;
  border-radius: 8px;
  color: var(--bg-primary);
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(77, 212, 255, 0.3);
}

.gallery-upload-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(77, 212, 255, 0.5);
}

.gallery-upload-hint {
  margin-left: 0.5rem;
  font-size: 0.85rem;
  opacity: 0.8;
  font-weight: 400;
}

.gallery-filters {
  display: flex;
  gap: 0.75rem;
}

.gallery-filter-btn {
  position: relative;
  padding: 0.75rem 1.5rem;
  padding-left: 2.5rem;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-primary);
  border-radius: 8px;
  color: var(--text-secondary);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.95rem;
}

.gallery-filter-btn:hover {
  border-color: var(--accent-primary);
  color: var(--text-primary);
}

.gallery-filter-btn .filter-indicator {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border: 2px solid var(--border-primary);
  border-radius: 50%;
  background: transparent;
  transition: all 0.3s ease;
}

.gallery-filter-btn.active {
  background: rgba(77, 212, 255, 0.15);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  font-weight: 600;
}

.gallery-filter-btn.active .filter-indicator {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  box-shadow: 0 0 10px rgba(77, 212, 255, 0.6);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 2rem;
  padding: 0.5rem;
}

@media (min-width: 1920px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 2.5rem;
  }
}

.gallery-item {
  position: relative;
  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  aspect-ratio: 16/9;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.gallery-item:hover {
  transform: translateY(-6px);
  border-color: var(--accent-primary);
  box-shadow: 0 12px 32px rgba(77, 212, 255, 0.4);
}

.gallery-item.selected {
  box-shadow: 0 0 0 4px var(--accent-primary);
  border-color: var(--accent-primary);
  transform: translateY(-6px);
}

.gallery-item-checkbox {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  background: rgba(15, 23, 42, 0.9);
  border: 2px solid var(--border-primary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  cursor: pointer;
  transition: all 0.2s ease;
  pointer-events: auto;
}

.gallery-item-checkbox svg {
  width: 20px;
  height: 20px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.gallery-item.selected .gallery-item-checkbox {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
}

.gallery-item.selected .gallery-item-checkbox svg {
  opacity: 1;
}

.gallery-item-checkbox:hover {
  border-color: var(--accent-primary);
  background: var(--accent-alpha-10);
}

.gallery-item-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  z-index: 2;
  transition: opacity 0.3s ease;
}

.gallery-item-loading .loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(77, 212, 255, 0.2);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.gallery-item-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 1;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.gallery-item-image.loading {
  opacity: 0;
}

.gallery-item-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, 
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 0, 0, 0.7) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
  pointer-events: none;
}

.gallery-item:hover .gallery-item-overlay {
  opacity: 1;
}

.gallery-item-info {
  color: var(--text-primary);
  font-size: 0.85rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.gallery-item-session {
  display: inline-block;
  background: rgba(77, 212, 255, 0.3);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
}

.gallery-item-date {
  opacity: 0.8;
}

.gallery-item-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.gallery-item-btn {
  background: rgba(0, 0, 0, 0.8);
  border: 2px solid var(--border-primary);
  pointer-events: auto;
  border-radius: 8px;
  padding: 0.5rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.85rem;
  line-height: 1;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.gallery-item-btn svg {
  width: 18px;
  height: 18px;
}

.gallery-item-btn:hover {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(77, 212, 255, 0.5);
}

.gallery-item-btn.delete:hover {
  background: #ff4444;
  border-color: #ff4444;
  box-shadow: 0 4px 12px rgba(255, 68, 68, 0.5);
}

.gallery-grid .empty-text {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-secondary);
  padding: 3rem 1rem;
  font-size: 1.1rem;
}

/* Responsive Gallery */
@media (max-width: 1400px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

@media (max-width: 1024px) {
  .gallery-modal-content {
    max-width: 98vw !important;
    width: 98vw !important;
    height: 98vh !important;
    max-height: 98vh !important;
    margin: 1vh auto;
  }

  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .gallery-modal-content {
    max-width: 100vw !important;
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0;
    border-radius: 0;
  }

  .gallery-body {
    padding: 1.5rem;
  }

  .gallery-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 1.25rem;
  }

  .gallery-upload-section {
    width: 100%;
  }

  .gallery-upload-btn {
    width: 100%;
    justify-content: center;
  }

  .gallery-filters {
    width: 100%;
    flex-direction: column;
  }

  .gallery-filter-btn {
    width: 100%;
    text-align: left;
  }

  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    padding: 0.5rem;
  }

  .gallery-item-overlay {
    opacity: 1;
    background: linear-gradient(to bottom, 
      rgba(0, 0, 0, 0.4) 0%,
      rgba(0, 0, 0, 0.2) 50%,
      rgba(0, 0, 0, 0.8) 100%
    );
  }
}

@media (max-width: 480px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .gallery-controls {
    padding: 1rem;
  }
}

/* Performance Mode - Disable all animations and transitions */
body.performance-mode-active *,
body.performance-mode-active *::before,
body.performance-mode-active *::after {
  animation-duration: 0s !important;
  animation-delay: -1ms !important;
  transition-duration: 0s !important;
  transition-delay: -1ms !important;
  transform: none !important;
}

/* Performance Mode - Allow HP/MP bar transitions for smooth updates */
body.performance-mode-active .status-bar-fill,
body.performance-mode-active .hp-fill,
body.performance-mode-active .mp-fill,
body.performance-mode-active .stat-fill {
  transition-duration: 0.3s !important;
  transition-timing-function: ease !important;
}

/* Performance Mode - Allow status bar text positioning */
body.performance-mode-active .status-bar-text,
body.performance-mode-active .hp-text,
body.performance-mode-active .mp-text,
body.performance-mode-active .stat-text {
  transform: translate(-50%, -50%) !important;
}

/* Performance Mode - Disable hover effects */
body.performance-mode-active .skill-card:hover,
body.performance-mode-active .equipment-slot:hover,
body.performance-mode-active .enemy-card:hover,
body.performance-mode-active .party-member:hover,
body.performance-mode-active .quest-detail-card:hover,
body.performance-mode-active .relationship-item:hover,
body.performance-mode-active .timeline-card:hover {
  transform: none !important;
  box-shadow: inherit !important;
}

/* Performance Mode - Disable all glow effects */
body.performance-mode-active .skill-card::before,
body.performance-mode-active .equipment-slot::before,
body.performance-mode-active .enemy-card::before,
body.performance-mode-active .party-member::before,
body.performance-mode-active .quest-detail-card::before,
body.performance-mode-active .relationship-item::before,
body.performance-mode-active .timeline-card::before {
  display: none !important;
}