/* ═══════════════════════════════════════════════════════════════════════════
   GRAND SAGA: FUTURA — ENGINE STYLESHEET · SABER ACADEMY EDITION v2
   ─────────────────────────────────────────────────────────────────────────
   Design direction: the engine's OWN best language — the campaign-card HUD
   corner brackets, sharp corners, glowing 1px cyan edges, Orbitron display
   voice, translucent "engage" buttons descended from .begin-combat-btn —
   unified under the website's palette (one cyan #00d9ff, violet-black
   panels, hairline #2c1a52, gold reserved for Saga / lore / victory).
   Edited surgically IN PLACE. Sections:
   · SABER ACADEMY SKIN v2 tokens (just below the engine :root)
   · restyled: generic modals · map frame + side panel (overhauled) ·
     results screen (redesigned) · story VN modal + Saga box (overhauled) ·
     loadout stats box (refined)
   · RESPONSIVE HARMONISATION LAYER at the end of the file (final say over
     the engine's overlapping 767/768 · 575/600 · 1199/1200 breakpoints)
   Untouched: combat, campaign select, initialise, house select, loadout
   layouts, card reveal, outposts, leaderboard, map art, all animations.
   NOTE: this file exists in TWO places — gm-engine/styles.css AND
   public/gm-engine/styles.css. Update both; hard-refresh or bump the
   <link> to styles.css?v=3 to defeat caching.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Core palette - Cyberpunk */
    --bg-deep: #0a0b12;
  --bg-mid: #12141f;
  --bg-surface: #1a1c2e;
  --bg-elevated: #242842;
  /* Accent Colors */
    --accent-primary: #00f3ff;
  --accent-secondary: #8b5cf6;
  --accent-tertiary: #3b82f6;
  --accent-warning: #f59e0b;
  --accent-danger: #ef4444;
  --accent-success: #22c55e;
  --accent-pink: #ec4899;
  /* Element colors */
    --element-void: #4b0082;
  --element-lightning: #00bfff;
  --element-blood: #8b0000;
  /* Text Colors */
  --text-secondary: #ccc;
  --text-muted: rgba(255, 255, 255, 0.5);
  /* Comic Panel Effects */
    --panel-border: 6px solid #fff;
  --panel-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  /* Typography */
  --font-body: 'Rajdhani', sans-serif;
  --font-comic: 'Bangers', cursive;
  /* Card dimensions */
  --card-height: 95px;
  --item-size: 55px;
  /* Core Colors */
    --bg-primary: #0a0b12;
  --bg-secondary: #12141f;
  --bg-tertiary: #1a1c2e;
  --bg-panel: rgba(26, 28, 46, 0.95);
  --yellow: #ffde03;
  /* Element Colors */
    --element-fire: #ff4500;
  --element-fire-glow: rgba(255, 69, 0, 0.6);
  --element-lightning-glow: rgba(0, 191, 255, 0.6);
  --element-void-glow: rgba(75, 0, 130, 0.6);
  --element-aether: #40e0d0;
  --element-aether-glow: rgba(64, 224, 208, 0.6);
  --element-chroma: #9370db;
  --element-chroma-glow: rgba(147, 112, 219, 0.6);
  --element-blood-glow: rgba(139, 0, 0, 0.6);
  --element-physical: #94a3b8;
  --element-physical-glow: rgba(148, 163, 184, 0.4);
  /* Text */
    --text-primary: #ffffff;
  /* Fonts */
    --font-display: 'Orbitron', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
  /* Card Dimensions */
    --card-width: 70px;
  /* Transitions */
    --transition-fast: 0.2s ease;
  --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Faction Colors - Base definitions */
    /* Stellen Alliance (was "stellaris") */
    --faction-stellen: #00f3ff;
    --faction-stellen-glow: rgba(0, 243, 255, 0.4);
    --faction-stellen-rgb: 0, 243, 255;

    /* Aori */
    --faction-aori: #ff003c;
    --faction-aori-glow: rgba(255, 0, 60, 0.4);
    --faction-aori-rgb: 255, 0, 60;

    /* Mori Clan */
    --faction-mori: #ff8c00;
    --faction-mori-glow: rgba(255, 140, 0, 0.4);
    --faction-mori-rgb: 255, 140, 0;

    /* Revolution */
    --faction-revolution: #9d4edd;
    --faction-revolution-glow: rgba(157, 78, 221, 0.4);
    --faction-revolution-rgb: 157, 78, 221;

    /* Emperor's Hand (was "emperor") */
    --faction-emperors-hand: #ffd700;
    --faction-emperors-hand-glow: rgba(255, 215, 0, 0.4);
    --faction-emperors-hand-rgb: 255, 215, 0;

    /* Dynamic Team Colors - Set by JS */
    --team-a-color: var(--faction-aori);
    --team-a-glow: var(--faction-aori-glow);
    --team-a-rgb: 255, 0, 60;
    --team-b-color: var(--faction-mori);
    --team-b-glow: var(--faction-mori-glow);
    --team-b-rgb: 255, 140, 0;

    /* Default faction colors (overridden by [data-faction]) */
    --faction-color: var(--accent-primary);
    --faction-glow: rgba(0, 243, 255, 0.4);
    --faction-rgb: 0, 243, 255;
    --primary: #00BFFF;
    --myth: #00B3D852;
    --myth-hover: inset 0 0 28px 15px #09d6ff;
    --accent: #FFD700;
    /*--card-background: #1a1a1a;
  */
    --card-border: #333;
  /* Animation controls */
  --animation-speed: 1;
  --pulse-intensity: 1;
  --orb-size: 850px;
  /* Fire Shield colors */
  --shield-fire-color-main: 255, 69, 0;
  --shield-fire-color-alt: 255, 140, 0;
  --shield-fire-color-glow: 255, 200, 100;
  /* Lightning Shield colors */
  --shield-lightning-color-main: 0, 191, 255;
  --shield-lightning-color-alt: 30, 144, 255;
  --shield-lightning-color-glow: 200, 230, 255;
  /* Void Shield colors */
  --shield-void-color-main: 75, 0, 130;
  --shield-void-color-alt: 138, 43, 226;
  --shield-void-color-glow: 200, 150, 255;
  /* Aether Shield colors */
  --shield-aether-color-main: 64, 224, 208;
  --shield-aether-color-alt: 0, 206, 209;
  --shield-aether-color-glow: 200, 255, 255;
  /* Blood Shield colors */
  --shield-blood-color-main: 139, 0, 0;
  --shield-blood-color-alt: 220, 20, 60;
  --shield-blood-color-glow: 255, 150, 150;
  /* Physical Shield colors */
  --shield-physical-color-main: 112, 128, 144;
  --shield-physical-color-alt: 169, 169, 169;
  --shield-physical-color-glow: 192, 192, 192;
  /* Primary Color Palette 
  --gs-primary: #09f501;
  --gs-secondary: #ff0081;
  --dark: #0d0221;
  --light: #e7fff8;
  --bg: #0a0a0a;
  --gs-accent: #7d12ff;
  --rejuvenation-color: #E0FFFF;
  */
  /* Animation Timing Variables */
  --combat-duration: 2.5s;
  --environmental-delay: 0s;
  --environmental-duration: 1.5s;
  --indicator-pulse-speed: 2s;
  --tooltip-delay: 0.3s;
  --effect-fade-speed: 0.5s;
  --outpost-glow-speed: 3s;
  /* Legacy Color Support */
  --legacy-cyan: #00d9ff; /* BUGFIX: was #01f5f23a — 23% alpha made results headings near-invisible */
  --legacy-orange: #ff6600;
  --legacy-white: #ffffff;
  --legacy-black: #000000;
  /* cyberpunk story manager styling */
  --cyber-bg-dark: #0a0a0f;
  --cyber-bg-panel: rgba(15, 15, 25, 0.95);
  --cyber-cyan: #00f0ff;
  --cyber-magenta: #ff00aa;
  --cyber-yellow: #f0ff00;
  --cyber-green: #00ff66;
  --cyber-red: #ff3366;
  --cyber-orange: #ff6600;
  --cyber-gold: #ffd700;
  --cyber-cyan-glow: 0 0 20px rgba(0, 240, 255, 0.5), 0 0 40px rgba(0, 240, 255, 0.3);
  --cyber-magenta-glow: 0 0 20px rgba(255, 0, 170, 0.5), 0 0 40px rgba(255, 0, 170, 0.3);
  --cyber-green-glow: 0 0 20px rgba(0, 255, 102, 0.5), 0 0 40px rgba(0, 255, 102, 0.3);
  --dialogue-slide-duration: 0.5s;
  --dialogue-slide-easing: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SABER ACADEMY SKIN v2 — palette from the website, geometry from the engine.
   The structural signature is the campaign-card HUD corner bracket (sharp
   corners, inset L-brackets, glowing 1px cyan edges); Orbitron remains the
   display voice; gold is reserved for Saga / lore / victory. One cyan.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --color-void: #060112;
  --color-abyss: #0a0118;
  --color-panel: #120826;
  --color-panel-2: #1a0b33;
  --color-line: #2c1a52;
  --color-ash: #9d92c2;
  --color-bone: #eeeaff;
  --color-accent: #00d9ff;
  --color-accent-dim: #0b5f74;
  --color-signal: #7fe7ff;
  --color-violet: #9370db;
  --color-gold: #ffd700;
  --color-saga: #37ff8b;
  /* HUD bracket colour — recolour per surface (gold panels, house panels) */
  --bk: rgba(0, 217, 255, 0.8);
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.4;
  min-height: 100vh;
  overflow-x: hidden;
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(70, 10, 138, 0.8) rgba(20, 10, 40, 0.8);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.4);
  border-radius: 4px;
  border: 1px solid rgba(96, 0, 255, 0.2);
}

::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
  border-radius: 4px;
  border: 1px solid rgba(162, 0, 255, 0.4);
  box-shadow: 0 0 10px rgba(162, 0, 255, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--faction-rgb, 139, 92, 246), 0.7);
  box-shadow: 0 0 20px rgba(162, 0, 255, 0.8),
        0 0 40px rgba(162, 0, 255, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border-color: rgba(200, 0, 255, 0.6);
}

::-webkit-scrollbar-thumb:active {
  background: linear-gradient(
        180deg,
        rgba(220, 0, 255, 1) 0%,
        rgba(180, 0, 255, 1) 100%
    );
  box-shadow: 0 0 30px rgba(162, 0, 255, 1),
        inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-corner {
  background: rgba(15, 10, 30, 0.9);
}

.story-summary-container::-webkit-scrollbar-thumb,
.combat-log-content::-webkit-scrollbar-thumb {
  animation: scrollbarGlow 3s ease-in-out infinite;
}

#background-logo {
  /* Smaller size */
  width: 100%;
  max-width: 900px;
  /* Centered */
  margin: 0 auto;
}

#background-logo img {
  width: 100%;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

h6 {
  font-family: 'Orbitron', sans-serif;
  color: white;
  text-align: center;
  font-size: 13px;
  font-weight: 300;
}

h6.disclaimer {
  font-family: 'Orbitron', sans-serif;
  color: white;
  text-align: center;
  font-size: 12px;
  font-weight: 300;
  max-width: 800px;
  margin: 40px auto;
}

.disclaimer {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-bottom: 30px;
}

.loading-bar {
  width: 800px;
  height: 12px;
  background: rgba(20, 5, 40, 0.8);
  border: 1px solid rgba(0, 255, 255, 0.4);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 30px;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

.loading-progress {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #01f5f2, #4169E1, #8a2be2);
  transition: width 0.3s ease;
  animation: loading 3s ease-in-out forwards;
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.6);
  position: relative;
}

.loading-text {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 1.2rem;
  color: #01f5f2;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
}

.placeholder-text {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--text-muted);
  text-align: center;
}

#video-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  pointer-events: none;
  overflow: hidden;
}

#youtube-player {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
}

#fallback-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('assets/backgrounds/kenshiro_abbe_A_pov_highly_detailed_first_person_perspective_sc_8ed2709e-d6f9-4804-a0ac-91a9f88a0677.png');
  background-size: cover;
  background-position: center;
  z-index: -11;
}

.vs-background-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.vs-background-container.active {
  opacity: 1;
  z-index: 1;
}

.vs-background-transition {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  z-index: 10;
  pointer-events: none;
  transition: opacity 0.6s ease-in-out;
}

.vs-background-transition.fade-in {
  opacity: 1;
}

[data-faction="stellen"] {
  --faction-color: var(--faction-stellen);
  --faction-glow: var(--faction-stellen-glow);
  --faction-rgb: var(--faction-stellen-rgb);
}

[data-faction="aori"] {
  --faction-color: var(--faction-aori);
  --faction-glow: var(--faction-aori-glow);
  --faction-rgb: var(--faction-aori-rgb);
}

[data-faction="mori"] {
  --faction-color: var(--faction-mori);
  --faction-glow: var(--faction-mori-glow);
  --faction-rgb: var(--faction-mori-rgb);
}

[data-faction="revolution"] {
  --faction-color: var(--faction-revolution);
  --faction-glow: var(--faction-revolution-glow);
  --faction-rgb: var(--faction-revolution-rgb);
}

[data-faction="emperors-hand"] {
  --faction-color: var(--faction-emperors-hand);
  --faction-glow: var(--faction-emperors-hand-glow);
  --faction-rgb: var(--faction-emperors-hand-rgb);
}

.fighter-setup-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

.fighter-setup-container,
#vs-screen,
.battle-area,
.team-container,
.team-roster,
.team-roster .character-card {
  overflow: visible !important;
}

.setup-background {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 25% 50%, rgba(var(--team-a-rgb), 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 50%, rgba(var(--team-b-rgb), 0.15) 0%, transparent 50%),
        linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, #0d0221 100%);
  z-index: -3;
}

.setup-grid-overlay {
  position: fixed;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: -2;
  animation: gridPulse 8s ease-in-out infinite;
}

.setup-vignette {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, 0) 100%);
  z-index: -1;
  pointer-events: none;
}

.corner-accents {
  position: relative;
}

.corner-accents::before,
.corner-accents::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: rgba(var(--faction-rgb, 139, 92, 246), 0.4);
  transition: border-color var(--transition-fast);
  pointer-events: none;
}

.corner-accents::before {
  top: 4px;
  left: 4px;
  border-left: 2px solid;
  border-top: 2px solid;
}

.corner-accents::after {
  bottom: 4px;
  right: 4px;
  border-right: 2px solid;
  border-bottom: 2px solid;
}

.corner-accents:hover::before,
.corner-accents:hover::after {
  border-color: var(--faction-color, var(--accent-primary));
}

.setup-tabs {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 100;
  padding: 8px;
  border-radius: 4px;
  backdrop-filter: blur(10px);
}

.tab-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 26px;
  background: rgba(20, 20, 35, 0.8);
  border: 2px solid #444;
  color: #666;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 3px;
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.tab-btn:hover {
  border-color: #666;
  color: #888;
}

.tab-btn.active {
  background: rgba(0, 243, 255, 0.2);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  box-shadow: 0 0 30px rgba(0, 243, 255, 0.3);
  text-shadow: 0 0 10px rgba(0, 243, 255, 0.8);
}

.tab-btn .tab-icon {
  font-size: 16px;
}

.match-format-selector {
  position: fixed;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 16px;
  z-index: 90;
}

.format-option {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.format-option input {
  display: none;
}

.format-label {
  padding: 12px 32px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  background: rgba(20, 20, 35, 0.8);
  border: 2px solid #444;
  color: #666;
  transition: all var(--transition-fast);
}

.format-option:hover .format-label {
  border-color: #666;
  color: #888;
}

.format-option input:checked + .format-label {
  background: rgba(0, 243, 255, 0.2);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  box-shadow: 0 0 30px rgba(0, 243, 255, 0.3);
  text-shadow: 0 0 10px rgba(0, 243, 255, 0.8);
}

.tab-content {
  display: none;
  min-height: 100vh;
  /*padding: 120px 40px 100px;*/
  animation: fadeIn 0.4s ease;
}

.tab-content.active {
  display: block;
}

.stat-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  padding: 10px 18px;
  background: rgba(10, 11, 18, 0.9);
  border-left: 3px solid var(--accent-primary);
  backdrop-filter: blur(10px);
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

.stat-badge-label {
  font-family: var(--font-display);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--text-muted);
}

.stat-badge-value {
  font-weight: 700;
}

.stat-badge.ap .stat-badge-value {
  color: var(--accent-success);
}

.stat-badge.dam .stat-badge-value {
  color: var(--accent-danger);
}

.stat-badge.fp .stat-badge-value {
  color: var(--yellow);
}

.stat-badge.element {
  text-transform: capitalize;
  font-family: var(--font-body);
  font-size: 0.8rem;
}

.stat-badge.element[data-element="fire"] .stat-badge-value {
  color: var(--element-fire);
}

.stat-badge.element[data-element="lightning"] .stat-badge-value {
  color: var(--element-lightning);
}

.stat-badge.element[data-element="void"] .stat-badge-value {
  color: var(--element-void);
}

.stat-badge.element[data-element="aether"] .stat-badge-value {
  color: var(--element-aether);
}

.stat-badge.element[data-element="chroma"] .stat-badge-value {
  color: var(--element-chroma);
}

.stat-badge.element[data-element="blood"] .stat-badge-value {
  color: var(--element-blood);
}

.stat-badge.element[data-element="physical"] .stat-badge-value {
  color: var(--element-physical);
}

.stat-badge.element[data-element="cybernetics"] .stat-badge-value {
  color: var(--accent-primary);
}

.stat-badge.sigil .stat-badge-value {
  color: var(--accent-pink);
}

.faction-fp-display {
  position: relative;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 100px;
}

.fp-hexagon {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, 
        rgba(0, 243, 255, 0.15) 0%, 
        rgba(0, 243, 255, 0.05) 50%,
        rgba(0, 243, 255, 0.02) 100%
    );
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border: 2px solid transparent;
  box-shadow: inset 0 0 30px rgba(0, 243, 255, 0.1),
        0 0 20px rgba(0, 243, 255, 0.1);
  animation: fpHexPulse 3s ease-in-out infinite;
}

.fp-hexagon::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(180deg, 
        rgba(0, 243, 255, 0.4) 0%, 
        rgba(0, 243, 255, 0.1) 100%
    );
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: -1;
  opacity: 0.5;
}

.fp-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.fp-label {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 3px;
  color: rgba(0, 243, 255, 0.7);
  text-transform: uppercase;
}

.fp-value {
  font-family: var(--font-mono);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--accent-primary);
  text-shadow: 0 0 10px rgba(0, 243, 255, 0.8),
        0 0 20px rgba(0, 243, 255, 0.5),
        0 0 30px rgba(0, 243, 255, 0.3);
  line-height: 1;
}

.mobile-fp-display {
  display: none;
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  align-items: center;
  gap: 20px;
  padding: 12px 24px;
  background: rgba(10, 10, 20, 0.95);
  border: 2px solid rgba(0, 243, 255, 0.3);
  border-radius: 8px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(0, 243, 255, 0.1),
        inset 0 0 30px rgba(0, 0, 0, 0.5);
}

.mobile-fp-team {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 70px;
}

.mobile-fp-hex {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, 
        rgba(0, 243, 255, 0.12) 0%, 
        rgba(0, 243, 255, 0.03) 100%
    );
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  box-shadow: inset 0 0 20px rgba(0, 243, 255, 0.1);
}

.mobile-fp-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.mobile-fp-label {
  font-family: var(--font-display);
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--text-muted);
}

.mobile-fp-value {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-primary);
  text-shadow: 0 0 10px rgba(0, 243, 255, 0.6);
  line-height: 1;
}

.mobile-fp-unit {
  font-family: var(--font-display);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 2px;
  color: rgba(0, 243, 255, 0.6);
}

.mobile-fp-vs {
  font-size: 1.2rem;
  color: var(--accent-primary);
  text-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
  animation: fpVsPulse 2s ease-in-out infinite;
}

.team-container {
  flex: 1;
  display: flex;
  align-items: center;
}

.team-container.left {
  justify-content: flex-end;
  padding-right: 96px;
}

.team-container.right {
  justify-content: flex-start;
  padding-left: 96px;
}

.team-roster {
  display: flex;
  align-items: flex-end;
  gap: -10px;
}

.team-container.right .team-roster {
  flex-direction: row-reverse;
}

/* =============================================================================
CHARACTER PORTRAIT 
============================================================================= */

.character-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s ease;
}

.character-card.hidden {
  display: none;
}

.team-roster .character-card {
  margin: 0 -16px;
}

.team-roster .character-card.center {
  z-index: 20;
  transform: translateY(-32px) scale(1.1);
  margin: 0 8px;
}

.team-roster .character-card:hover {
  transform: translateY(-48px) scale(1.08);
  z-index: 25;
}

.team-roster .character-card.center:hover {
  transform: translateY(-64px) scale(1.15);
}

.team-roster .character-card.side {
  z-index: 10;
}
.character-portrait {
  position: relative;
  border-radius: 0;                          /* sharp corners */
  overflow: hidden;
  background: linear-gradient(180deg, rgba(20, 20, 35, 0.9) 0%, rgba(10, 10, 20, 0.95) 100%);
  box-shadow: 0 0 30px var(--faction-glow), inset 0 0 40px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(var(--faction-rgb), 0.6);   /* thin frame, dynamic colour */
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-color: rgba(50, 50, 70, 0.5);
}

.character-portrait:hover {
  box-shadow: 0 0 40px var(--faction-glow), inset 0 0 40px rgba(0, 0, 0, 0.5);
  border-color: var(--faction-color);
}

.portrait-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, rgba(var(--faction-rgb), 0.15) 0%, transparent 70%);
}

.portrait-placeholder .silhouette {
  width: 55%;
  height: 65%;
  opacity: 0.4;
  fill: var(--faction-color);
}

.portrait-image {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  border-radius: 0;
}

.portrait-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    z-index: 5;
    background: linear-gradient(90deg, transparent, var(--faction-color), transparent);
    box-shadow: 0 0 15px var(--faction-color);
}

.character-portrait .corner {
  position: absolute;
  width: 22px;                               /* was 32px — matches modal bracket arms */
  height: 22px;
  z-index: 6;
  color: var(--faction-color, var(--accent-primary));   /* dynamic */
}

.character-portrait .corner.tl {
  top: 0;
  left: 0;
  border-left: 3px solid;                    /* was 6px — system bracket weight */
  border-top: 3px solid;
}

.character-portrait .corner.tr {
  top: 0;
  right: 0;
  border-right: 3px solid;
  border-top: 3px solid;
}

.character-portrait .corner.bl {
  bottom: 0;
  left: 0;
  border-left: 3px solid;
  border-bottom: 3px solid;
}

.character-portrait .corner.br {
  bottom: 0;
  right: 0;
  border-right: 3px solid;
  border-bottom: 3px solid;
}

.portrait-edit-btn {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 48px;
  height: 48px;
  background: rgba(10, 10, 20, 0.9);
  border: 2px solid var(--accent-primary);
  border-radius: 50%;
  color: var(--accent-primary);
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(0, 243, 255, 0.3);
  z-index: 10;
}

.character-portrait:hover .portrait-edit-btn {
  opacity: 1;
}

.portrait-edit-btn:hover {
  background: var(--accent-primary);
  color: var(--bg-primary);
  transform: scale(1.1);
  box-shadow: 0 0 30px rgba(0, 243, 255, 0.5);
}

.team-roster .character-portrait {
  width: 360px;
  height: 520px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* =============================================================================
ACCESS CORE BUTTON — decrypt-style scrambling text
============================================================================= */

.btn-decrypt {
    display: inline-block;
    padding: 14px 36px;
    font-family: 'Share Tech Mono', 'Courier New', monospace;
    font-size: 1.4rem;
    letter-spacing: 3px;
    color: #ff0000;
    background: rgba(12, 1, 1, 0.555);
    border: 1px solid #ff0000;
    margin-top: 60px;
    cursor: pointer;
    text-transform: uppercase;
    min-width: 250px;
    max-width: 400px;
    text-align: center;
    transition: background 0.3s, box-shadow 0.3s, text-shadow 0.3s;
    text-shadow: 0 0 6px rgba(255, 0, 0, 0.5);
}

.btn-decrypt:hover {
    color: #15ff00;
    background: rgba(1, 12, 2, 0.555);
    border: 1px solid #2bff00;    box-shadow: 0 0 22px rgba(0, 255, 0, 0.4);
    text-shadow: 0 0 10px rgba(0, 255, 21, 0.8);
}

.btn-decrypt:active {
    transform: scale(0.98);
}

.btn-decrypt:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
    border-style: dashed;
    text-shadow: none;
    box-shadow: none;
}

/* ── SABER SKIN v2: modal actions are scaled-down kin of .begin-combat-btn —
   translucent cyan "engage" primaries, dark secondaries. The terminal
   red/green decrypt look survives untouched on the loading screen. ────── */
.modal .btn-decrypt {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-ash);
  background: rgba(13, 2, 33, 0.7);
  border: 1px solid var(--color-line);
  border-radius: 0;
  cursor: pointer;
  text-shadow: none;
  box-shadow: none;
  transition: border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, background 150ms ease;
  font-size: 12px;
  padding: 12px 26px;
  margin-top: 0;
  min-width: 0;
}
.modal .btn-decrypt:hover {
  color: var(--color-bone);
  background: rgba(13, 2, 33, 0.7);
  border-color: rgba(0, 217, 255, 0.6);
  box-shadow: 0 0 18px rgba(0, 217, 255, 0.15), inset 0 0 18px rgba(0, 217, 255, 0.06);
  text-shadow: none;
  transform: none;
}
.modal .btn-decrypt:disabled {
  border-style: solid;
  opacity: 0.45;
}
.modal .btn-decrypt > span:last-child { display: none; }
.modal #confirm-result,
.modal #save-edit,
.modal #confirm-load-campaign,
.modal #initiate-combat {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-accent);
  background: linear-gradient(180deg, rgba(0, 217, 255, 0.25) 0%, rgba(0, 217, 255, 0.08) 100%);
  border: 1px solid var(--color-accent);
  border-radius: 0;
  cursor: pointer;
  text-shadow: 0 0 12px rgba(0, 217, 255, 0.6);
  box-shadow: 0 0 20px rgba(0, 217, 255, 0.2), inset 0 0 20px rgba(0, 217, 255, 0.06);
  transition: box-shadow 150ms ease, background 150ms ease;
  font-size: 12px;
  padding: 12px 26px;
}
.modal #confirm-result:hover,
.modal #save-edit:hover,
.modal #confirm-load-campaign:hover,
.modal #initiate-combat:hover {
  background: linear-gradient(180deg, rgba(0, 217, 255, 0.38) 0%, rgba(0, 217, 255, 0.14) 100%);
  border-color: var(--color-accent);
  color: var(--color-accent);
  box-shadow: 0 0 32px rgba(0, 217, 255, 0.4), inset 0 0 28px rgba(0, 217, 255, 0.12);
  transform: none;
}

/* =============================================================================
   HOUSE SELECTION — VS STYLE
   ============================================================================= */

#house-selection {
    position: relative;
    z-index: 0;                       /* stacking context for ambient layers */
    min-height: 100vh;
    padding: 120px 40px 140px;
    box-sizing: border-box;
    overflow-x: hidden;
    background: transparent;

    /* Background logo size.
       48vw keeps each logo just under half the viewport so its centre
       can sit at 25% / 75% without the outer edge clipping off-screen.
       Hard ceiling is 50vw — anything above that overflows the edge.
       If you want logos LARGER than 50vw you have to give up
       "centred in each half" and edge-anchor them instead. */
    --bg-flag-size: clamp(440px, 48vw, 1400px);
}

#house-selection h1 {
    position: relative;
    z-index: 50;
    text-align: center;
    margin: 0 0 40px;
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-size: 2.5rem;
    color: var(--accent-primary, #00d4ff);
    text-transform: uppercase;
    letter-spacing: 4px;
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
}

.house-battle-area {
    position: relative;
    min-height: calc(100vh - 320px);
    align-items: center;
}

.house-side {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 600px;
}

.house-side.left  { padding-right: 96px; }
.house-side.right { padding-left: 96px; }

/* Empty state: hide the big & small flags (the carousel stays put) */
.house-side.is-empty .bg-faction-flag,
.house-side.is-empty .faction-flag {
    opacity: 0;
    pointer-events: none;
}
.house-side .bg-faction-flag,
.house-side .faction-flag {
    transition: opacity 0.3s ease;
}

/* Locked side (defender): hide the cycle arrows */
.house-side[data-locked="true"] .carousel-nav { visibility: hidden; }

/* ─── Background faction logos: centred in their respective halves ──────── */

#house-selection .bg-faction-flag {
    position: fixed;
    top: 50%;
    width: var(--bg-flag-size);
    height: var(--bg-flag-size);
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
}

#house-selection .bg-faction-flag.left {
    left: 10%;
    transform: translate(-50%, -50%);
}

#house-selection .bg-faction-flag.right {
    left: 90%;
    transform: translate(-50%, -50%);
}

/* Inner pieces scale with the container (no more fixed px) */
#house-selection .bg-flag-shape {
    width: 180%;
    height: 180%;
}

#house-selection .bg-emblem-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.8;
}

/* =============================================================================
   ACOLYTE LOADOUT — VS STYLE
   ============================================================================= */
.battle-area {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 220px);
  padding: 0 20px;
}

/* ─── Background faction flags (large hex emblems) ──────────────────────── */

.bg-faction-flag {
  position: fixed;
  top: 50%;
  /* Size inherits from --bg-flag-size if set on a parent (e.g. #house-selection),
     otherwise falls back to this default. Hard ceiling is 50vw — beyond that
     the centred-in-half logo overflows the viewport edge. */
  width: var(--bg-flag-size, clamp(440px, 48vw, 1400px));
  height: var(--bg-flag-size, clamp(440px, 48vw, 1400px));
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}

.bg-faction-flag.left {
  left: 0%;
  transform: translate(-50%, -50%);
}

.bg-faction-flag.right {
  left: 100%;
  transform: translate(-50%, -50%);
}

.bg-flag-glow {
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  opacity: 0.5;
  box-shadow: inset 0 0 60px var(--faction-glow), 0 0 100px rgba(var(--faction-rgb), 0.2);
}

.bg-flag-emblem {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.bg-flag-shape {
  width: 180%;
  height: 180%;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /*background: linear-gradient(180deg, var(--faction-color) 0%, rgba(var(--faction-rgb), 0.1) 100%);*/
  box-shadow: 0 0 80px var(--faction-glow);
}

.bg-emblem-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.95;
}

/* ─── Corner faction flags (small, top-anchored) ────────────────────────── */

.faction-flag {
  position: fixed;
  top: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 35;
}

.faction-flag.left  { left:  40px; }
.faction-flag.right { right: 40px; }

.flag-pole {
  width: 6px;
  height: 64px;
  background: linear-gradient(180deg, var(--faction-color) 0%, rgba(var(--faction-rgb), 0.4) 100%);
  box-shadow: 0 0 8px var(--faction-color);
}

.flag-emblem {
  width: 228px;
  height: 228px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 20, 0);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border: 2px solid var(--faction-color);
  box-shadow: 0 0 20px var(--faction-glow), inset 0 0 20px rgba(0, 0, 0, 0.5);
}

.flag-emblem .emblem-image {
  width: 180px;
  height: 180px;
  object-fit: contain;
}

.faction-name {
  margin-top: 16px;
  padding: 4px 16px;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 4px;
  background: rgba(10, 10, 20, 0);
  color: var(--faction-color);
  text-shadow: 0 0 8px var(--faction-glow);
}

.faction-flag.left  .faction-name { border-left:  2px solid var(--faction-color); }
.faction-flag.right .faction-name { border-right: 2px solid var(--faction-color); }

/* ─── Carousel ────────────────────────────────────────────────────────────── */

.house-carousel {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px;
}

.carousel-nav {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 20, 0.85);
    border: 2px solid var(--faction-color, var(--accent-primary, #00d4ff));
    color: var(--faction-color, var(--accent-primary, #00d4ff));
    font-size: 1.2rem;
    font-family: var(--font-display, 'Orbitron', sans-serif);
    cursor: pointer;
    transition: all 0.2s ease;
    clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
    text-shadow: 0 0 8px var(--faction-glow, rgba(0, 243, 255, 0.5));
    box-shadow: 0 0 15px var(--faction-glow, rgba(0, 243, 255, 0.3));
}

.carousel-nav:hover {
    background: rgba(var(--faction-rgb, 0, 243, 255), 0.2);
    transform: scale(1.08);
    box-shadow: 0 0 25px var(--faction-glow, rgba(0, 243, 255, 0.6));
}
.carousel-nav:active { transform: scale(0.95); }

.house-side.is-empty .carousel-nav {
    border-color: rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.6);
    text-shadow: none;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
}
.house-side.is-empty .carousel-nav:hover {
    border-color: rgba(255, 255, 255, 0.7);
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

/* ─── Centerpiece ─────────────────────────────────────────────────────────── */

.carousel-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    min-width: 40px;
}

/*.carousel-logo-frame {
    position: relative;
    width: 900px;
    height: 900px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 20, 0.85);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    border: 2px solid var(--faction-color, rgba(255, 255, 255, 0.3));
    box-shadow: 0 0 30px var(--faction-glow, rgba(255, 255, 255, 0.1)),
                inset 0 0 20px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}*/

.carousel-logo-img {
    width: 840px;
    height: 840px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px var(--faction-glow, rgba(255, 255, 255, 0.3)));
}
.house-side.is-empty .carousel-logo-img { display: none; }

.carousel-empty-placeholder {
    display: none;
    width: 840px;
    height: 840px;
    align-items: center;
    justify-content: center;
}
.house-side.is-empty .carousel-empty-placeholder {
    display: flex;
}
.empty-hex-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.1));
    animation: emptyPulse 3s ease-in-out infinite;
}

@keyframes emptyPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.carousel-empty-icon {
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-size: 5rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.25);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
}

.carousel-house-name {
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--faction-color, rgba(255, 255, 255, 0.5));
    text-shadow: 0 0 12px var(--faction-glow, transparent);
    text-align: center;
    min-height: 1.4em;
}
.house-side.is-empty .carousel-house-name {
    color: rgba(255, 255, 255, 0.4);
    text-shadow: none;
    letter-spacing: 3px;
}

.carousel-house-status {
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 3px;
    padding: 4px 12px;
    min-height: 1em;
    text-transform: uppercase;
}
.carousel-house-status.defending {
    color: #FFD700;
    border: 1px solid #FFD700;
    background: rgba(255, 215, 0, 0.1);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
}
.carousel-house-status.challenging {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.05);
}

#house-selection .carousel-nav {
    /* Reset browser defaults & inherited button styling */
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    margin: 0;
    padding: 0;
    outline: none;

    /* Layout */
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Visual */
    /*background: rgba(10, 10, 20, 0.85);*/
    border: 2px solid var(--faction-color, var(--accent-primary, #00d4ff));
    color: var(--faction-color, var(--accent-primary, #00d4ff));
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
    text-shadow: 0 0 8px var(--faction-glow, rgba(0, 243, 255, 0.5));
    box-shadow: 0 0 15px var(--faction-glow, rgba(0, 243, 255, 0.3));
}

#house-selection .carousel-nav:hover {
    background: rgba(var(--faction-rgb, 0, 243, 255), 0.2);
    transform: scale(1.08);
    box-shadow: 0 0 25px var(--faction-glow, rgba(0, 243, 255, 0.6));
}

#house-selection .carousel-nav:active {
    transform: scale(0.95);
}

#house-selection .house-side.is-empty .carousel-nav {
    border-color: rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.6);
    text-shadow: none;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
}

#house-selection .house-side.is-empty .carousel-nav:hover {
    border-color: rgba(255, 255, 255, 0.7);
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

/* ─── Outpost notice (above VS) ───────────────────────────────────────────── */

.outpost-card-notice-vs {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(10, 10, 20, 0.92);
    border: 2px solid rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.2),
                inset 0 0 20px rgba(0, 0, 0, 0.5);
    max-width: 360px;
    backdrop-filter: blur(8px);
}

.outpost-card-notice-vs .notice-card-img {
    width: 280px;
    height: 158px;
    object-fit: cover;
    border: 1px solid rgba(255, 215, 0, 0.4);
}
.outpost-card-notice-vs .notice-card-name {
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #FFD700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
    text-align: center;
}
.outpost-card-notice-vs .notice-card-bonus {
    font-family: var(--font-body, 'Rajdhani', sans-serif);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    line-height: 1.3;
}
.outpost-card-notice-vs .notice-card-bonus strong { color: #FFD700; }

/* ─── Bottom buttons ──────────────────────────────────────────────────────── */

.house-action-area {
    display: flex;
    gap: 24px;
}

.begin-combat-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
    text-shadow: none;
}
.begin-combat-btn:disabled:hover {
    transform: none;
    background: linear-gradient(180deg, rgba(0, 243, 255, 0.15) 0%, rgba(0, 243, 255, 0.05) 100%);
}

.begin-combat-btn.secondary {
    background: linear-gradient(180deg, rgba(255, 80, 80, 0.2) 0%, rgba(255, 80, 80, 0.05) 100%);
    border-color: rgba(255, 80, 80, 0.7);
    color: rgba(255, 120, 120, 0.95);
    box-shadow: 0 0 25px rgba(255, 80, 80, 0.25);
    text-shadow: 0 0 12px rgba(255, 80, 80, 0.6);
}
.begin-combat-btn.secondary:hover {
    background: linear-gradient(180deg, rgba(255, 80, 80, 0.3) 0%, rgba(255, 80, 80, 0.1) 100%);
    box-shadow: 0 0 40px rgba(255, 80, 80, 0.45);
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1199px) {
    #house-selection { padding: 100px 20px 200px; }
    #house-selection h1 { font-size: 1.8rem; letter-spacing: 3px; }

    .house-battle-area { flex-direction: column; gap: 60px; }
    .house-side { min-height: auto; padding: 0 !important; }

    .outpost-card-notice-vs {
        position: relative;
        top: auto; left: auto; transform: none;
        margin: 0 auto 20px;
    }

    .vs-divider { padding: 0; }
    .carousel-logo-frame { width: 160px; height: 160px; }
    .carousel-logo-img { width: 110px; height: 110px; }
    .carousel-house-name { font-size: 1.1rem; }

    .house-action-area { flex-direction: column; gap: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAME PLATE (VS Screen)
   ═══════════════════════════════════════════════════════════════════════════ */
.name-plate {
    margin-top: 20px;
    padding: 12px 32px;
    text-align: center;
    min-width: 240px;
    background: rgba(10, 10, 20, 0.9);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
    border-bottom: 3px solid var(--faction-color);
}

.character-name {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--faction-color);
    text-shadow: 0 0 10px var(--faction-glow);
}

.character-class {
    font-size: 18px;
    letter-spacing: 2px;
    color: var(--text-muted);
    margin-top: 4px;
}

.hover-stats {
  position: fixed;
  top: 0;
  width: 320px;
  height: 580px;
  background: rgba(10, 10, 20, 0.95);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0), 0 0 20px var(--faction-glow);
  border-color: var(--faction-color);
}

.team-left .character-card .hover-stats {
  transform: translateX(60px);
  text-align: right;
  border-right: 0px solid var(--faction-color);
  border-radius: 0px 0 0 9px;
}

.team-right .character-card .hover-stats {
  transform: translateX(-60px);
  text-align: left;
  border-right: 0px solid var(--faction-color);
  border-radius: 0 0px 0px 0;
}

.team-roster .character-card:hover .hover-stats {
  opacity: 1;
  transform: translateX(0);
  z-index: 100;
}

.hover-stats-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 25px;
}

.team-left .hover-stats-content {
  align-items: flex-start;
}

.team-right .hover-stats-content {
  align-items: flex-start;
}

.hover-stat-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 2px;
  color: var(--faction-color);
  text-shadow: 0 0 10px var(--faction-glow);
}

.hover-stat-class {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 2px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 15px;
}

.hover-stats-badges {
  display: flex;
  gap: 15px;
  margin-bottom: 10px;
}

.team-left .hover-stats-badges {
  justify-content: flex-end;
}

.team-right .hover-stats-badges {
  justify-content: flex-start;
}

.hover-stats .stat-badge {
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.hover-stats .stat-badge-value {
  font-size: 1.3rem;
}

.hover-stats .stat-badge.element,
.hover-stats .stat-badge.sigil {
  flex-direction: row;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
}

.team-left .hover-stats .stat-badge.element,
.team-left .hover-stats .stat-badge.sigil {
  flex-direction: row-reverse;
}

.hover-stats .stat-badge.element .stat-badge-value,
.hover-stats .stat-badge.sigil .stat-badge-value {
  font-size: 0.9rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VS DIVIDER
   ═══════════════════════════════════════════════════════════════════════════ */
.vs-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    padding: 0 40px;
}

.vs-line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 640px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 30%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0.3) 70%,
        transparent 100%
    );
}

.vs-badge {
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(30, 30, 50, 0.95) 0%, rgba(10, 10, 20, 0.9) 100%);
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.8), inset 0 0 50px rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 2;
}

.vs-text {
    font-family: var(--font-display);
    font-size: 64px;
    font-weight: 900;
    letter-spacing: -2px;
    background: linear-gradient(180deg, #ffffff 0%, #888888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.combat-start-area {
  position: fixed;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
}

.begin-combat-btn {
  position: relative;
  padding: 20px 64px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 6px;
  text-transform: uppercase;
  background: linear-gradient(180deg, rgba(0, 243, 255, 0.3) 0%, rgba(0, 243, 255, 0.1) 100%);
  border: 3px solid var(--accent-primary);
  color: var(--accent-primary);
  cursor: pointer;
  box-shadow: 0 0 40px rgba(0, 243, 255, 0.4), inset 0 0 40px rgba(0, 243, 255, 0.1);
  text-shadow: 0 0 20px var(--accent-primary);
  transition: all var(--transition-fast);
  overflow: hidden;
}

.begin-combat-btn:hover {
  transform: scale(1.05);
  background: linear-gradient(180deg, rgba(0, 243, 255, 0.4) 0%, rgba(0, 243, 255, 0.2) 100%);
  box-shadow: 0 0 60px rgba(0, 243, 255, 0.6), inset 0 0 60px rgba(0, 243, 255, 0.2);
}

.begin-combat-btn:active {
  transform: scale(0.98);
}

.begin-combat-btn .btn-text {
  position: relative;
  z-index: 2;
}

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

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

.begin-combat-btn .btn-border {
  display: none;
}

.loadout-container {
  max-width: 1800px;
  margin: 0 auto;
}

.debug-faction-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 15px;
  background: rgba(255, 0, 0, 0.1);
  border: 2px dashed rgba(255, 0, 0, 0.3);
  border-radius: 8px;
}

.debug-label {
  font-family: var(--font-display);
  font-size: 12px;
  color: #ff6b6b;
  letter-spacing: 2px;
}

.faction-select-btn {
  padding: 8px 16px;
  background: rgba(20, 20, 35, 0.8);
  border: 2px solid #444;
  color: #666;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.faction-select-btn:hover {
  border-color: #888;
  color: #aaa;
}

.faction-select-btn.active {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: rgba(0, 243, 255, 0.2);
  box-shadow: 0 0 15px rgba(0, 243, 255, 0.3);
}

.faction-select-btn[data-house="aori"].active {
  border-color: var(--faction-aori);
  color: var(--faction-aori);
  background: rgba(255, 0, 60, 0.2);
  box-shadow: 0 0 15px var(--faction-aori-glow);
}

.faction-select-btn[data-house="mori"].active {
  border-color: var(--faction-mori);
  color: var(--faction-mori);
  background: rgba(255, 140, 0, 0.2);
  box-shadow: 0 0 15px var(--faction-mori-glow);
}

.faction-select-btn[data-house="stellen"].active {
  border-color: var(--faction-stellaris);
  color: var(--faction-stellaris);
  background: rgba(0, 243, 255, 0.2);
  box-shadow: 0 0 15px var(--faction-stellaris-glow);
}

.faction-select-btn[data-house="emperors-hand"].active {
  border-color: var(--faction-emperor);
  color: var(--faction-emperor);
  background: rgba(255, 215, 0, 0.2);
  box-shadow: 0 0 15px var(--faction-emperor-glow);
}

.faction-select-btn[data-house="revolution"].active {
  border-color: var(--faction-revolution);
  color: var(--faction-revolution);
  background: rgba(157, 78, 221, 0.2);
  box-shadow: 0 0 15px var(--faction-revolution-glow);
}

.loadout-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
  padding: 30px 0;
  overflow: visible;
}

.loadout-bg-emblem {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 550px;
  height: 550px;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
  left: 40px;
}

.loadout-emblem-shape {
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(180deg, var(--faction-color) 0%, rgba(var(--faction-rgb), 0.1) 100%);
}

.loadout-emblem-image {
  width: 340px;
  height: 340px;
  object-fit: contain;
  opacity: 0.8;
}

.loadout-emblem-glow {
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  opacity: 0.5;
  box-shadow: 0 0 60px var(--faction-glow);
}

.loadout-title-group {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 24px;
}

.loadout-logo-frame {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 20, 0.9);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border: 2px solid var(--faction-color);
  box-shadow: 0 0 20px var(--faction-glow), inset 0 0 15px rgba(0, 0, 0, 0.5);
}

.loadout-team-logo {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.loadout-team-name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--faction-color);
  text-shadow: 0 0 20px var(--faction-glow);
}

.fighters-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 40px;
}

.character-card.loadout-card {
  position: relative;
  border-radius: 12px;
  padding: 20px;
  transition: all var(--transition-fast);
  width: 100%;
  align-items: stretch;
}

.active-effects {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 15px;
  min-height: 30px;
  flex-wrap: wrap;
  position: absolute;
  top: 15px;
  max-width: 140px;
  z-index: 25;
  padding: 8px;
}

.effect-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(var(--faction-rgb), 0.5);
  border-radius: 4px;
  font-size: 1.2rem;
  animation: effectFloat 2s ease-in-out infinite;
  z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

.effect-icon.resistance {
  border-color: var(--accent-success);
}

.effect-icon.immunity {
  border-color: var(--accent-primary);
}

.effect-icon.weakness {
  border-color: var(--accent-danger);
}

.effect-icon.buff {
  border-color: var(--yellow);
}

.fighter-content {
  display: flex;
  gap: 15px;
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARD SLOTS - Faction-themed
   ═══════════════════════════════════════════════════════════════════════════ */
.card-slots-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.card-slot {
    position: relative;
    width: var(--card-width);
    height: var(--card-height);
    background: linear-gradient(145deg, rgba(20, 22, 40, 0.8), rgba(10, 12, 25, 0.9));
    border: 2px solid rgba(var(--faction-rgb), 0.2);
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Corner accents on card slots */
.card-slot::before,
.card-slot::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-color: rgba(var(--faction-rgb), 0.4);
    transition: all var(--transition-fast);
}

.card-slot::before {
    top: 4px;
    left: 4px;
    border-left: 2px solid;
    border-top: 2px solid;
}

.card-slot::after {
    bottom: 4px;
    right: 4px;
    border-right: 2px solid;
    border-bottom: 2px solid;
}

.card-slot:hover {
    border-color: var(--faction-color);
    transform: translateX(5px);
    box-shadow: 0 0 20px var(--faction-glow), inset 0 0 30px rgba(var(--faction-rgb), 0.1);
}

.card-slot:hover::before,
.card-slot:hover::after {
    border-color: var(--faction-color);
}

.card-slot .slot-label {
    font-family: var(--font-display);
    font-size: 0.5rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    letter-spacing: 1px;
    padding: 5px;
    pointer-events: none;
    text-transform: uppercase;
}

.card-slot.filled {
    border-color: var(--faction-color);
    box-shadow: 0 0 15px var(--faction-glow), inset 0 0 20px rgba(var(--faction-rgb), 0.1);
}

.card-slot.filled::before,
.card-slot.filled::after {
    border-color: var(--faction-color);
}

.card-slot.filled .slot-label {
    display: none;
}

.card-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

/* Slot type specific colors when filled (override faction for gameplay clarity) */
.card-slot[data-slot="armor"].filled { 
    border-color: #94a3b8;
    box-shadow: 0 0 15px rgba(148, 163, 184, 0.3), inset 0 0 20px rgba(148, 163, 184, 0.1);
}
.card-slot[data-slot="armor"].filled::before,
.card-slot[data-slot="armor"].filled::after { border-color: #94a3b8; }

.card-slot[data-slot="weapon1"].filled,
.card-slot[data-slot="weapon2"].filled { 
    border-color: #ef4444;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.3), inset 0 0 20px rgba(239, 68, 68, 0.1);
}
.card-slot[data-slot="weapon1"].filled::before,
.card-slot[data-slot="weapon1"].filled::after,
.card-slot[data-slot="weapon2"].filled::before,
.card-slot[data-slot="weapon2"].filled::after { border-color: #ef4444; }

.card-slot[data-slot="sigil"].filled { 
    border-color: #ec4899;
    box-shadow: 0 0 15px rgba(236, 72, 153, 0.3), inset 0 0 20px rgba(236, 72, 153, 0.1);
}
.card-slot[data-slot="sigil"].filled::before,
.card-slot[data-slot="sigil"].filled::after { border-color: #ec4899; }

.card-slot[data-slot="ability"].filled { 
    border-color: #22d3ee;
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.3), inset 0 0 20px rgba(34, 211, 238, 0.1);
}
.card-slot[data-slot="ability"].filled::before,
.card-slot[data-slot="ability"].filled::after { border-color: #22d3ee; }

.card-slot[data-slot="creature"].filled { 
    border-color: #a855f7;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.3), inset 0 0 20px rgba(168, 85, 247, 0.1);
}
.card-slot[data-slot="creature"].filled::before,
.card-slot[data-slot="creature"].filled::after { border-color: #a855f7; }

/* Fighter Profile */
.fighter-profile {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Loadout portrait sizing */
.loadout-card .character-portrait {
    width: 100%;
    height: 500px;
    margin-bottom: 15px;
    cursor: pointer;
}

.fighter-profile {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loadout-card .character-portrait {
  width: 100%;
  height: 500px;
  margin-bottom: 15px;
  cursor: pointer;
}

.stat-bar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.bar-label {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-muted);
  width: 35px;
}

.bar-track {
  flex: 1;
  height: 20px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.bar-fill {
  height: 100%;
  transition: width 0.5s ease;
  position: relative;
}

.bar-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  z-index: 2;
}

.health-fill {
  background: linear-gradient(90deg, var(--accent-danger) 0%, var(--accent-warning) 50%, var(--accent-success) 100%);
  background-size: 200% 100%;
}

.charge-bar .bar-track {
  overflow: visible;
}

.charge-fill {
  width: 100%;
  position: relative;
}

.charge-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 3px;
}

.charge-bar[data-element="physical"] .charge-fill {
  background: linear-gradient(90deg, #64748b, #94a3b8);
}

.charge-bar[data-element="lightning"] .charge-fill {
  background: linear-gradient(90deg, #0066cc, #00bfff, #00ffff);
  box-shadow: 0 0 10px var(--element-lightning-glow), inset 0 0 10px rgba(255, 255, 255, 0.3);
  animation: lightningFlicker 0.1s infinite;
}

.charge-bar[data-element="lightning"] .charge-particles::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 100%;
  background: repeating-linear-gradient(90deg, transparent 0px, transparent 10px, rgba(255, 255, 255, 0.8) 10px, rgba(255, 255, 255, 0.8) 12px);
  animation: lightningBolts 0.2s linear infinite;
}

.charge-bar[data-element="fire"] .charge-fill {
  background: linear-gradient(90deg, #8b0000, #ff4500, #ff6600, #ffaa00);
  box-shadow: 0 0 15px var(--element-fire-glow), inset 0 -5px 10px rgba(139, 0, 0, 0.5);
  animation: fireGlow 0.5s ease-in-out infinite alternate;
}

.charge-bar[data-element="fire"] .charge-particles::before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 150%;
  background: radial-gradient(ellipse at 20% 100%, #ff4500 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, #ff6600 0%, transparent 40%),
        radial-gradient(ellipse at 80% 100%, #ffaa00 0%, transparent 50%);
  animation: fireFlicker 0.3s ease-in-out infinite;
  filter: blur(2px);
}

.charge-bar[data-element="void"] .charge-fill {
  background: linear-gradient(90deg, #1a0033, #4b0082, #6a0dad);
  box-shadow: 0 0 15px var(--element-void-glow), inset 0 0 20px rgba(0, 0, 0, 0.8);
  animation: voidPulse 2s ease-in-out infinite;
}

.charge-bar[data-element="void"] .charge-particles::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(75, 0, 130, 0.5) 70%);
  animation: voidSwirl 3s linear infinite;
}

.charge-bar[data-element="aether"] .charge-fill {
  background: linear-gradient(90deg, #006666, #40e0d0, #7fffd4);
  box-shadow: 0 0 15px var(--element-aether-glow), inset 0 0 10px rgba(255, 255, 255, 0.4);
  animation: aetherGlow 2s ease-in-out infinite;
}

.charge-bar[data-element="aether"] .charge-particles::before {
  content: '';
  position: absolute;
  inset: -10px;
  background: radial-gradient(circle at 20% 50%, rgba(127, 255, 212, 0.6) 0%, transparent 30%),
        radial-gradient(circle at 80% 50%, rgba(64, 224, 208, 0.6) 0%, transparent 30%);
  animation: aetherWisp 3s ease-in-out infinite;
  filter: blur(3px);
}

.charge-bar[data-element="chroma"] .charge-fill {
  background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff);
  background-size: 200% 100%;
  animation: chromaShift 2s linear infinite;
  box-shadow: 0 0 15px var(--element-chroma-glow);
}

.charge-bar[data-element="chroma"] .charge-particles::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
  background-size: 50% 100%;
  animation: chromaShine 1.5s ease-in-out infinite;
}

.charge-bar[data-element="blood"] .charge-fill {
  background: linear-gradient(90deg, #2d0000, #8b0000, #a00000);
  box-shadow: 0 0 10px var(--element-blood-glow), inset 0 0 15px rgba(0, 0, 0, 0.6);
  animation: bloodPulse 1s ease-in-out infinite;
}

.charge-bar[data-element="blood"] .charge-particles::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(139, 0, 0, 0.8) 0%, transparent 70%);
  animation: heartbeat 1s ease-in-out infinite;
}

.charge-bar[data-element="cybernetics"] .charge-fill {
  background: linear-gradient(90deg, #004466, #00aacc, #00f3ff);
  box-shadow: 0 0 15px rgba(0, 243, 255, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.2);
}

.fighter-name-input {
  width: 100%;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(var(--faction-rgb), 0.3);
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
  letter-spacing: 2px;
  margin-bottom: 8px;
  transition: all var(--transition-fast);
}

.fighter-name-input:focus {
  outline: none;
  border-color: var(--faction-color);
  box-shadow: 0 0 10px var(--faction-glow);
}

.fighter-name-input::placeholder {
  color: var(--text-muted);
}

.house-items-section {
  border-radius: 8px;
  padding: 30px 20px;
  text-align: center;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(var(--faction-rgb), 0.3);
  margin-top: 20px;
  box-shadow: 0 0 20px rgba(var(--faction-rgb), 0.1), inset 0 0 30px rgba(0, 0, 0, 0.3);
  transition: all var(--transition-fast);
}

.house-items-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 4px;
  color: var(--faction-color);
  margin-bottom: 25px;
  text-shadow: 0 0 15px var(--faction-glow);
}

.house-items-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.item-slot {
  position: relative;
  width: 90px;
  height: 120px;
  background: linear-gradient(145deg, rgba(36, 40, 66, 0.6), rgba(26, 28, 46, 0.8));
  border: 1px dashed rgba(245, 158, 11, 0.3);
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  overflow: visible;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.4);
  animation: cardFloat 4s ease-in-out infinite;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.item-slot::before,
.item-slot::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  transition: all var(--transition-fast);
  color: rgba(var(--faction-rgb), 0.4);
}

.item-slot::before {
  top: 5px;
  left: 5px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
}

.item-slot::after {
  bottom: 5px;
  right: 5px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

.item-slot:hover {
  /*border-color: var(--accent-warning, #f59e0b);*/
  transform: translateY(-4px) scale(1.05);
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3),
        0 8px 20px rgba(245, 158, 11, 0.25);
  animation-play-state: paused;
  border-style: solid;
}

.item-slot:hover::before,
.item-slot:hover::after {
  color: var(--faction-color);
}

.item-slot .item-label {
  font-family: var(--font-display);
  font-size: 0.6rem;
  color: var(--text-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 8px;
  text-align: center;
}

.item-slot.filled {
  border-color: var(--accent-warning, #f59e0b);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
  border-style: solid;
  background-color: rgba(245, 158, 11, 0.1);
}

.item-slot.filled::before,
.item-slot.filled::after {
  color: var(--faction-color);
}

.item-slot.filled .item-label {
  display: none;
}

.item-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}

/* =============================================================================
   LOADOUT STATS SUMMARY PANEL
   Fixed sidebar panel displaying team totals and individual fighter stats
   ============================================================================= */
/* LOADOUT STATS SUMMARY PANEL */

.loadout-stats-summary {
  position: fixed;
  top: 180px;
  right: 30px;
  width: 300px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.loadout-house-totals {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 24px;
  background: rgba(13, 2, 33, 0.94);
  border: 1px solid rgba(var(--faction-rgb), 0.3);
  border-right: 3px solid var(--faction-color);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.55), 0 0 18px rgba(var(--faction-rgb), 0.12);
}

.loadout-house-totals-title {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: right;
  margin-bottom: 8px;
  color: var(--faction-color);
  text-shadow: 0 0 8px var(--faction-glow);
}

.loadout-total-item {
  display: flex;
  align-items: baseline;
  gap: 14px;
  justify-content: flex-end;
}

.loadout-total-label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.loadout-total-value {
  font-family: var(--font-mono);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
}

.loadout-total-value.total-ap {
  color: var(--accent-success);
  text-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
}

.loadout-total-value.total-dam {
  color: var(--accent-danger);
  text-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
}

.loadout-total-value.total-fp {
  color: var(--yellow);
  text-shadow: 0 0 12px rgba(255, 222, 3, 0.5);
}

.loadout-stats-header {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 3px;
  padding: 12px 18px;
  background: rgba(10, 10, 20, 0.9);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  text-align: right;
  border-right: 3px solid var(--faction-color);
  margin-top: 8px;
  color: var(--faction-color);
  text-shadow: 0 0 8px var(--faction-glow);
}

.loadout-fighter-stat-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px;
  background: rgba(10, 10, 20, 0.85);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  border-right: 3px solid rgba(var(--faction-rgb), 0.5);
  align-items: flex-end;
  transition: all var(--transition-fast);
}

.loadout-fighter-stat-row:hover {
  background: rgba(15, 15, 30, 0.95);
  border-color: var(--faction-color);
}

.loadout-fighter-stat-row.hidden {
  display: none;
}

.loadout-fighter-stat-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--faction-color);
}

.loadout-fighter-stat-class {
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 1px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: -4px;
}

.loadout-fighter-stat-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  width: 100%;
  align-items: flex-end;
}

.loadout-fighter-stat-core {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
}

.loadout-stats-summary .stat-badge {
  gap: 6px;
}

.loadout-stats-summary .stat-badge-label {
  font-size: 0.65rem;
}

.loadout-stats-summary .stat-badge-value {
  font-size: 1.1rem;
}

.loadout-stats-summary .stat-badge.element,
.loadout-stats-summary .stat-badge.sigil {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  justify-content: flex-end;
  flex-direction: row-reverse;
}

.loadout-stats-summary .stat-badge.element .stat-badge-label,
.loadout-stats-summary .stat-badge.sigil .stat-badge-label {
  font-size: 0.65rem;
  min-width: 50px;
  text-align: right;
}

.loadout-stats-summary .stat-badge.element .stat-badge-value,
.loadout-stats-summary .stat-badge.sigil .stat-badge-value {
  font-size: 0.95rem;
}

/* =============================================================================
        GLOBAL
   ============================================================================= */

.container {
  width: 100%;
  height: 100%;
  /*position: relative;*/
}

  .screen {
    max-width: 100%;
    left: 0;
    transform: none;
    padding: 15px;
  }

    .screen {
    padding: 10px;
  }

.screen {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
  /*background: var(--bg-deep);*/
}

.screen.active {
  display: flex;
  pointer-events: auto;
  opacity: 1;
}

#combat-screen.screen.active {
  display: block;
  padding: 0;
}

.screen h1 {
  font-family: var(--font-display);
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 30px;
  color: var(--accent-primary);
  text-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
}

#current-screen-display {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 0.65rem;
  color: var(--accent-success);
}

/* =============================================================================
        MODAL GENERAL
   ============================================================================= */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(5px);
}

.modal-overlay.active {
  display: flex;
}

.modal-content {
  padding: 30px;
  max-width: 1230px;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalSlideIn 0.3s ease;
  
  width: 1230px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background: rgba(13, 2, 33, 0.96);
  border: 1px solid rgba(0, 217, 255, 0.22);
  border-radius: 0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  color: var(--color-bone);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0, 217, 255, 0.18);
  background: linear-gradient(180deg, rgba(0, 217, 255, 0.05) 0%, transparent 100%);
  border-radius: 0;
  flex-shrink: 0;
}

.modal-header h3 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-accent);
  text-shadow: 0 0 14px rgba(0, 217, 255, 0.4);
  margin: 0;
}

.modal-close {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--color-ash);
  font-size: 18px;
  font-family: var(--font-display);
  cursor: pointer;
  transition: color 150ms ease, text-shadow 150ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  border: none;
  color: var(--color-accent);
  text-shadow: 0 0 10px rgba(0, 217, 255, 0.6);
  box-shadow: none;
  transform: none;
}

/* =============================================================================
        PORTRAIT MODAL
   ============================================================================= */

.portrait-modal {
  width: 700px;
}

.portrait-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
  margin-bottom: 25px;
  padding: 15px;
  
  max-height: 400px;
  overflow-y: auto;
  border-radius: 0;
  border: 1px solid var(--color-line);
  background: rgba(6, 1, 18, 0.45);
}

.portrait-option {
    width: 200px;                /* ADD: Fixed width */
    aspect-ratio: 1 / 1;        /* CHANGE: From 3/4 to 1/1 for square */
    background: linear-gradient(145deg, rgba(20, 22, 40, 0.9), rgba(10, 12, 25, 0.95));
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 0px;
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
}

.portrait-option::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px;
  width: 12px;
  height: 12px;
  border-left: 2px solid rgba(var(--faction-rgb, 139, 92, 246), 0.4);
  border-top: 2px solid rgba(var(--faction-rgb, 139, 92, 246), 0.4);
  z-index: 2;
  transition: all var(--transition-fast);
}

.portrait-option::after {
  content: '';
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 12px;
  height: 12px;
  border-right: 2px solid rgba(var(--faction-rgb, 139, 92, 246), 0.4);
  border-bottom: 2px solid rgba(var(--faction-rgb, 139, 92, 246), 0.4);
  z-index: 2;
  transition: all var(--transition-fast);
}

.portrait-option:hover {
  border-color: var(--accent-primary);
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(0, 243, 255, 0.4), inset 0 0 20px rgba(0, 243, 255, 0.1);
}

.portrait-option:hover::before,
.portrait-option:hover::after {
  border-color: var(--accent-primary);
}

.portrait-option.selected {
  border-color: var(--yellow);
  box-shadow: 0 0 25px rgba(255, 222, 3, 0.5), inset 0 0 20px rgba(255, 222, 3, 0.1);
}

.portrait-option.selected::before,
.portrait-option.selected::after {
  border-color: var(--yellow);
}

.portrait-option img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.upload-section {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(var(--faction-rgb, 139, 92, 246), 0.2);
}

.upload-btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-ash);
  background: rgba(13, 2, 33, 0.7);
  border: 1px solid var(--color-line);
  border-radius: 0;
  cursor: pointer;
  text-shadow: none;
  box-shadow: none;
  transition: border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, background 150ms ease;
  font-size: 12px;
  padding: 12px 28px;
}

.upload-btn:hover {
  color: var(--color-bone);
  background: rgba(13, 2, 33, 0.7);
  border-color: rgba(0, 217, 255, 0.6);
  box-shadow: 0 0 18px rgba(0, 217, 255, 0.15), inset 0 0 18px rgba(0, 217, 255, 0.06);
  text-shadow: none;
  transform: none;
}

.upload-note {
  margin-top: 10px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* =============================================================================
        CARD MODAL
   ============================================================================= */

.card-modal {
  width: 900px;
}

/* =============================================================================
        CARD SEARCH
   ============================================================================= */

.card-search {
  margin-bottom: 20px;
}

.card-search input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(var(--faction-rgb, 139, 92, 246), 0.3);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: #fff;
  margin-bottom: 15px;
}

.card-search input:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.card-filters {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  justify-content: center;
}

.filter-btn {
  padding: 12px 24px;
  background: rgba(20, 20, 35, 0.8);
  border: 2px solid #444;
  color: #666;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.filter-btn:hover {
  border-color: #666;
  color: #888;
}

.filter-btn.active {
  background: rgba(0, 243, 255, 0.2);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  box-shadow: 0 0 20px rgba(0, 243, 255, 0.3);
  text-shadow: 0 0 8px rgba(0, 243, 255, 0.8);
}

/* =============================================================================
        CARDS IN MODALS
   ============================================================================= */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 15px;
  max-height: 400px;
  overflow-y: auto;
  padding: 15px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(var(--faction-rgb, 139, 92, 246), 0.2);
}

.card-option {
  position: relative;
  aspect-ratio: 7/9.5;
  background: linear-gradient(145deg, rgba(20, 22, 40, 0.9), rgba(10, 12, 25, 0.95));
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.card-option::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px;
  width: 12px;
  height: 12px;
  border-left: 2px solid rgba(var(--faction-rgb, 139, 92, 246), 0.4);
  border-top: 2px solid rgba(var(--faction-rgb, 139, 92, 246), 0.4);
  z-index: 2;
  transition: all var(--transition-fast);
}

.card-option::after {
  content: '';
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 12px;
  height: 12px;
  border-right: 2px solid rgba(var(--faction-rgb, 139, 92, 246), 0.4);
  border-bottom: 2px solid rgba(var(--faction-rgb, 139, 92, 246), 0.4);
  z-index: 2;
  transition: all var(--transition-fast);
}

.card-option:hover {
  border-color: var(--accent-primary);
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 15px 30px rgba(0, 243, 255, 0.3), inset 0 0 30px rgba(0, 243, 255, 0.1);
}

.card-option:hover::before,
.card-option:hover::after {
  border-color: var(--accent-primary);
}

.card-option img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.card-option .card-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 8px 8px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.95));
  font-family: var(--font-display);
  font-size: 0.55rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 1px;
  color: var(--text-secondary);
  text-transform: uppercase;
}

/* =============================================================================
        DEBUG
   ============================================================================= */

#debug-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.95);
  border-bottom: 2px solid var(--accent-primary);
  padding: 8px 15px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

#debug-nav::before {
  content: 'DEBUG:';
  font-family: var(--font-display);
  font-size: 0.65rem;
  color: var(--accent-primary);
  margin-right: 10px;
}

.debug-btn {
  padding: 5px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--accent-primary);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 0.6rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.debug-btn:hover, .debug-btn.active {
  background: var(--accent-primary);
  color: #000;
}

/* =============================================================================
        CAMPAIGN SELECTION
   ============================================================================= */

#campaign-selection {
  text-align: center;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  padding: 40px 20px;
  box-sizing: border-box;
  padding-top: max(150px, 5vh);
  background: #0a0b1275;
}

#campaign-selection h1 {
  margin-top: 0;
  margin-bottom: 20px;
}

.campaigns-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

.campaign {
  width: 280px;
  height: 500px !important;
  background-color: rgba(13, 2, 33, 0.5);
  border: 6px solid var(--myth);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.campaign:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.2) 100%);
  z-index: 1;
  transition: all 0.4s ease;

}

.campaign-content {
  position: relative;
  z-index: 2;
  padding: 20px;
  width: 100%;
}

.campaign h3 {
  font-size: 1.2em;
  margin: 0;
  color: var(--light);
  transition: color 0.3s ease;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}

.campaign:hover {
  transform: translateY(-10px) scale(.90);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.7);
    box-shadow: var(--myth-hover);
  transition: all 0.4s ease;
}

.campaign[data-campaign="citadel"] {
  background-image: url('https://rrxzozvjmhfscano.public.blob.vercel-storage.com/uploads/ea645693-bbb7-46a4-bd80-275475553704.jpg');
  background-size: cover;
  background-position: center;
}

.campaign[data-campaign="basilisk"] {
  background-image: url('https://rrxzozvjmhfscano.public.blob.vercel-storage.com/uploads/808fa0df-2fec-4b13-af58-72fbcf94c233.jpg');
  background-size: cover;
  background-position: top center;
}

.campaign[data-campaign="chrysalet"] {
  background-image: url('https://rrxzozvjmhfscano.public.blob.vercel-storage.com/uploads/900491ba-147c-4529-9a48-b74c735423cb.jpg');
  background-size: cover;
  background-position: center;
}

.campaign[data-campaign="hallowed-plains"] {
  background-image: url('https://rrxzozvjmhfscano.public.blob.vercel-storage.com/uploads/37162805-2f96-4177-8a5a-25b167275b45.jpg');
  background-size: cover;
  background-position: center;
}

.campaign[data-campaign="karrow-temple"] {
  background-image: url('https://rrxzozvjmhfscano.public.blob.vercel-storage.com/uploads/86b578d3-ef19-4b98-ac32-4c09b3b78f33.jpg');
  background-size: cover;
  background-position: center;
}

.grand-saga-title-img {
    max-width: 100%;
    height: auto;
    transition: filter 0.3s ease;
    display: block;
    margin: 0 auto;   /* centers the image, removes inline gap */
    margin-bottom: 0px;
    margin-top: -260px;
}

.campaign-title-img {
    max-width: 80%;
    height: auto;
    transition: filter 0.3s ease;
    display: block;
    margin: 0 auto;   /* centers the image, removes inline gap */
    margin-bottom: -80px;
    margin-top: -60px;
}

.campaign-title-img:hover {
    /* brightness(0) invert(1) forces the image to solid white,
       then drop-shadow layers add the red glow */
    filter: brightness(0) invert(1)
            drop-shadow(0 0 8px #ff0000)
            drop-shadow(0 0 16px #ff0000);
}

/* "THE BATTLE FOR" */
.battle-for-heading {
    font-family: "Red Rose", Sans-serif;
    font-size: 30px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1em;
    letter-spacing: 10px;
    color: #ff0000;
}

/* "VALENORS KEEP" */
.keep-heading {
    font-family: "Rajdhani", Sans-serif;
    font-size: 52px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 0.9em;
    color: var(--e-global-color-57f90de);
}

/* "CHAPTER x" subheading */
.campaign-chapter {
    font-family: "Rajdhani", Sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1em;
    margin-bottom: 8px;
    color: var(--e-global-color-57f90de);
}

/* kill the <h1> default margins so the image sits tight */
#campaign-selection h1 {
    margin: 0;
}

.battle-for-heading {
    margin: 2px 0 0 0;   /* gap below the image */
}

.keep-heading {
    margin: 14px 0 0 0;    /* small gap below BATTLE FOR */
    margin-bottom: 40px;
}

/* campaign title */
.campaign-content h3 {
    font-family: "Rajdhani", Sans-serif;
    font-size: 24px;
    font-weight: 800;
    line-height: 0.9em;
    color: var(--e-global-color-57f90de);
}

/* =============================================================================
   ACCESSIBLE CAMPAIGN — .btn-hud (cyan HUD) aesthetic
   Resting: thin cyan. Hover: cyan glow-up. Selected: green lock-in.
   ============================================================================= */

/* Sharp corners, thin cyan border at rest (overrides base 6px myth border) */
.campaign:not(.locked) {
    border: 2px solid rgba(0, 229, 255, 0.3);
    border-radius: 0;
    transition: all 0.3s ease;
}

/* Inset HUD corner brackets — drawn inside because the card clips overflow.
   Uses ::after since ::before is the base gradient overlay. */
.campaign:not(.locked)::after {
    content: '';
    position: absolute;
    inset: 6px;
    pointer-events: none;
    z-index: 4;
    opacity: 0.5;
    transition: all 0.3s ease;
    background:
        linear-gradient(#00e5ff,#00e5ff) top left     / 14px 2px no-repeat,
        linear-gradient(#00e5ff,#00e5ff) top left     / 2px 14px no-repeat,
        linear-gradient(#00e5ff,#00e5ff) top right    / 14px 2px no-repeat,
        linear-gradient(#00e5ff,#00e5ff) top right    / 2px 14px no-repeat,
        linear-gradient(#00e5ff,#00e5ff) bottom left  / 14px 2px no-repeat,
        linear-gradient(#00e5ff,#00e5ff) bottom left  / 2px 14px no-repeat,
        linear-gradient(#00e5ff,#00e5ff) bottom right / 14px 2px no-repeat,
        linear-gradient(#00e5ff,#00e5ff) bottom right / 2px 14px no-repeat;
}

/* HOVER — .btn-hud activated look: cyan glow, brackets grow, no lift */
.campaign:not(.locked):hover {
    border-color: #00e5ff;
    transform: none;
    box-shadow: 0 0 24px rgba(0, 229, 255, 0.35), 0 10px 25px rgba(0,0,0,0.5);
}

.campaign:not(.locked):hover::after {
    inset: 4px;
    opacity: 1;
    background:
        linear-gradient(#00e5ff,#00e5ff) top left     / 24px 2px no-repeat,
        linear-gradient(#00e5ff,#00e5ff) top left     / 2px 24px no-repeat,
        linear-gradient(#00e5ff,#00e5ff) top right    / 24px 2px no-repeat,
        linear-gradient(#00e5ff,#00e5ff) top right    / 2px 24px no-repeat,
        linear-gradient(#00e5ff,#00e5ff) bottom left  / 24px 2px no-repeat,
        linear-gradient(#00e5ff,#00e5ff) bottom left  / 2px 24px no-repeat,
        linear-gradient(#00e5ff,#00e5ff) bottom right / 24px 2px no-repeat,
        linear-gradient(#00e5ff,#00e5ff) bottom right / 2px 24px no-repeat;
}

.campaign:not(.locked):hover .campaign-content h3 {
    color: #fff;
    text-shadow: 0 0 10px #00e5ff;
}

/* SELECTED — green lock-in, wins over hover (placed after, equal specificity).
   Expanded brackets stay, recoloured green. */
.campaign:not(.locked).selected {
    border-color: #15ff00;
    transform: none;
    box-shadow: 0 0 24px rgba(0, 255, 136, 0.4), 0 10px 25px rgba(0,0,0,0.5);
}

.campaign:not(.locked).selected::after,
.campaign:not(.locked).selected:hover::after {
    inset: 4px;
    opacity: 1;
    background:
        linear-gradient(#15ff00,#15ff00) top left     / 24px 2px no-repeat,
        linear-gradient(#15ff00,#15ff00) top left     / 2px 24px no-repeat,
        linear-gradient(#15ff00,#15ff00) top right    / 24px 2px no-repeat,
        linear-gradient(#15ff00,#15ff00) top right    / 2px 24px no-repeat,
        linear-gradient(#15ff00,#15ff00) bottom left  / 24px 2px no-repeat,
        linear-gradient(#15ff00,#15ff00) bottom left  / 2px 24px no-repeat,
        linear-gradient(#15ff00,#15ff00) bottom right / 24px 2px no-repeat,
        linear-gradient(#15ff00,#15ff00) bottom right / 2px 24px no-repeat;
}

/* Keep green on the border even while hovering a selected card */
.campaign:not(.locked).selected:hover {
    border-color: #15ff00;
    box-shadow: 0 0 24px rgba(0, 255, 136, 0.4), 0 10px 25px rgba(0,0,0,0.5);
}

.campaign:not(.locked).selected .campaign-content h3 {
    color: #fff;
    text-shadow: 0 0 10px #15ff00;
}

/* =============================================================================
   LOCKED CAMPAIGN  — PURGE aesthetic (static fade-to-black + warning stripes)
   ============================================================================= */

/* Card surface: thin red border, sharp corners, no lift, no animation */
.campaign.locked {
    border: 2px solid rgba(255, 0, 64, 0.45);
    border-radius: 0;
    cursor: not-allowed;
    transition: none;
}

/* Repurpose the base ::before — fade to black + static diagonal warning stripes
   (mirrors .theme-purge .modal-content) */
.campaign.locked::before {
    background:
        repeating-linear-gradient(
            45deg,
            transparent 0,
            transparent 24px,
            rgba(255, 0, 64, 0.06) 24px,
            rgba(255, 0, 64, 0.06) 48px
        ),
        linear-gradient(0deg,
            rgba(0,0,0,0.92) 0%,
            rgba(0,0,0,0.82) 50%,
            rgba(0,0,0,0.78) 100%);
    z-index: 1;
}

/* Four corner brackets (mirrors .modal-content::before/::after corner accents).
   Inset 2px so overflow:hidden + the card border don't clip them. */
.campaign.locked::after {
    content: '';
    position: absolute;
    inset: 2px;
    pointer-events: none;
    z-index: 4;
    background:
        linear-gradient(#ff0040,#ff0040) top left     / 26px 3px no-repeat,
        linear-gradient(#ff0040,#ff0040) top left     / 3px 26px no-repeat,
        linear-gradient(#ff0040,#ff0040) top right    / 26px 3px no-repeat,
        linear-gradient(#ff0040,#ff0040) top right    / 3px 26px no-repeat,
        linear-gradient(#ff0040,#ff0040) bottom left  / 26px 3px no-repeat,
        linear-gradient(#ff0040,#ff0040) bottom left  / 3px 26px no-repeat,
        linear-gradient(#ff0040,#ff0040) bottom right / 26px 3px no-repeat,
        linear-gradient(#ff0040,#ff0040) bottom right / 3px 26px no-repeat;
}

/* Locked cards are inert on hover — no lift, no scale */
.campaign.locked:hover {
    transform: none !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

/* --- Diamond warning icon (mirrors .prg-warning-icon, flashing) ------------- */
.locked-icon {
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 84px;
    height: 84px;
    border: 3px solid #ff0040;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff0040;
    box-shadow: 0 0 30px rgba(255,0,64,0.5), inset 0 0 20px rgba(255,0,64,0.2);
    z-index: 5;
    animation: locked-icon-pulse 1.2s ease-in-out infinite;
}
.locked-icon span {
    transform: rotate(-45deg);
    font-family: 'Orbitron', sans-serif;
    font-size: 2.6rem;
    font-weight: 900;
    text-shadow: 0 0 16px #ff0040;
}
@keyframes locked-icon-pulse {
    0%, 100% { box-shadow: 0 0 30px rgba(255,0,64,0.5), inset 0 0 20px rgba(255,0,64,0.2); }
    50%      { box-shadow: 0 0 50px #ff0040, inset 0 0 35px rgba(255,0,64,0.4); }
}

/* --- LOCKED badge (mirrors the .btn-danger PURGE button) -------------------- */
.locked-overlay {
    position: absolute;
    top: 62%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 12px 32px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #ff0040;
    background: transparent;
    border: 1px solid #ff0040;
    overflow: hidden;
    z-index: 5;
    text-shadow: 0 0 10px rgba(255,0,64,0.8);
}
/* The diagonal stripe wash that the PURGE button reveals on hover —
   here it's always present since the whole card is the "hover" state */
.locked-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        45deg, transparent, transparent 10px,
        rgba(255,0,64,0.18) 10px, rgba(255,0,64,0.18) 20px);
    z-index: -1;
}

/* Dim the title so the warning dominates */
.campaign.locked .campaign-content h3 {
    color: rgba(255,255,255,0.4);
    text-shadow: 0 0 6px rgba(255,0,64,0.4);
}

/* =============================================================================
        HOUSE SELECTION
   ============================================================================= */
/*
#house-selection {
  text-align: center;
  padding: 20px;
  min-height: 100vh;
  overflow-y: auto;
  /*display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  padding-top: max(150px, 5vh);
  background: #0a0b1275;
}

#house-selection h1 {
  margin-top: 0;
  margin-bottom: 30px;
  font-family: 'Orbitron', sans-serif;
  font-size: 2.5rem;
  color: #00d4ff;
  text-transform: uppercase;
  letter-spacing: 4px;
  text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
}

.houses-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 40px 0;
  max-width: 1200px;
  margin-bottom: 40px;
}

.house {
  width: 180px;
  height: 220px;
  background-color: rgba(13, 2, 33, 0.8);
  border: 2px solid #333;
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #1a1a2e, #0d0d1a);
}

.house:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent, rgba(0, 243, 255, 0.1), transparent);
  transition: all 0.5s ease;
}

.house:hover:before {
  background: linear-gradient(45deg, transparent, rgba(0, 243, 255, 0.3), transparent);
}

.house img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  transition: transform 0.3s ease;
  margin-bottom: 15px;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
}

.house h3 {
  margin-top: 15px;
  font-size: 0.85rem;
  transition: color 0.3s ease;
  font-family: 'Orbitron', sans-serif;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}

.house:hover {
  border-color: #00d4ff;
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
}

.house:hover img {
  transform: scale(1.1);
}

.house.selected:before {
  background: linear-gradient(45deg, transparent, rgba(255, 0, 60, 0.2), transparent);
}

.house.selected h3 {
  color: var(--secondary);
}

.selected-houses {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin: 30px 0;
}

.selected-house {
  width: 280px;
  height: 420px;
  background-color: rgba(13, 2, 33, 0.6);
  border: 2px dashed rgba(0, 243, 255, 0.3);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.selected-house p {
  color: #666;  
  font-weight: 700px;
  margin-bottom: 10px;
}

.selected-house-content p {
  color: white;
  font-weight: 700px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
  margin: 0;
}

.selected-house-content {
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}

.selected-house-content img {
  width: 290px;
  height: 290px;
  object-fit: contain;
  margin-bottom: 15px;
}

.selected-house-content h4 {
  margin-top: 5px;
  font-size: 1rem;
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  margin: 10px 0 5px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.house::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(0, 212, 255, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.house:hover::before {
  opacity: 1;
}

.house.selected::after {
  content: '✓';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  background: #15ff00;
  color: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
}

.house.defending {
  border-color: #FFD700 !important;
  background: linear-gradient(145deg, #2e2a1a, #1a1a0d);
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
  cursor: not-allowed;
  border: 3px solid #FFD700 !important;
  opacity: 0.7 !important;
  pointer-events: none !important;
  position: relative !important;
}

.house.disabled {
  opacity: 0.5 !important;
  pointer-events: none !important;
  filter: grayscale(100%);
}

.defending-label {
  position: absolute !important;
  top: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: #FFD700 !important;
  color: #000 !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  font-weight: bold !important;
  border-radius: 4px !important;
  z-index: 10 !important;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 1px;
}

.selected-house h3 {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a2e;
  padding: 5px 15px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.75rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 2px;
  border: 1px solid #333;
  border-radius: 4px;
}

.selected-houses::after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Bangers', cursive;
  font-size: 3rem;
  color: #ff4444;
  text-shadow: 0 0 20px rgba(255, 68, 68, 0.8),
                 0 0 40px rgba(255, 68, 68, 0.4);
  z-index: 5;
}

#house-selection .action-buttons {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

/* ── SABER SKIN v2: results actions — engage-style pair ── */
#results-screen .btn-decrypt {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-ash);
  background: rgba(13, 2, 33, 0.7);
  border: 1px solid var(--color-line);
  border-radius: 0;
  cursor: pointer;
  text-shadow: none;
  box-shadow: none;
  transition: border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, background 150ms ease;
  font-size: 13px;
  padding: 16px 36px;
  margin-top: 0;
  min-width: 220px;
}
#results-screen .btn-decrypt:hover {
  color: var(--color-bone);
  background: rgba(13, 2, 33, 0.7);
  border-color: rgba(0, 217, 255, 0.6);
  box-shadow: 0 0 18px rgba(0, 217, 255, 0.15), inset 0 0 18px rgba(0, 217, 255, 0.06);
  text-shadow: none;
  transform: none;
}
#results-screen .btn-decrypt > span:last-child { display: none; }
#results-screen #export-results {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-accent);
  background: linear-gradient(180deg, rgba(0, 217, 255, 0.25) 0%, rgba(0, 217, 255, 0.08) 100%);
  border: 1px solid var(--color-accent);
  border-radius: 0;
  cursor: pointer;
  text-shadow: 0 0 12px rgba(0, 217, 255, 0.6);
  box-shadow: 0 0 20px rgba(0, 217, 255, 0.2), inset 0 0 20px rgba(0, 217, 255, 0.06);
  transition: box-shadow 150ms ease, background 150ms ease;
  font-size: 13px;
  padding: 16px 36px;
}
#results-screen #export-results:hover {
  background: linear-gradient(180deg, rgba(0, 217, 255, 0.38) 0%, rgba(0, 217, 255, 0.14) 100%);
  border-color: var(--color-accent);
  color: var(--color-accent);
  box-shadow: 0 0 32px rgba(0, 217, 255, 0.4), inset 0 0 28px rgba(0, 217, 255, 0.12);
  transform: none;
}
*/

/* =============================================================================
        BUTTONS
   ============================================================================= */

/* =============================================================================
        CYBER BUTTON
   ============================================================================= */

.cybr-btn {
  font-family: 'Orbitron', sans-serif !important;
  font-size: var(--font-size) !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  padding: 0 30px !important;
  background: transparent !important;
  color: var(--color) !important;
  border: 0 !important;
  border-radius: 4px;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden;
  transition: background 0.2s !important;
  --primary-hue: 180;
  --primary-lightness: 50;
  --color: hsl(var(--primary-hue), 100%, var(--primary-lightness));
  --font-size: 16px;
  --shadow-primary: hsl(var(--primary-hue), 100%, calc(var(--primary-lightness) - 15%));
  --shadow-secondary: hsl(var(--secondary-hue), 60%, calc(var(--primary-lightness) + 10%));
  --clip: polygon(0 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  --border: 2px;
  --shimmy-distance: 5;
  --clip-one: polygon(0 2%, 100% 2%, 100% 95%, 95% 95%, 95% 90%, 85% 90%, 85% 95%, 8px 95%, 0 70%);
  --clip-two: polygon(0 78%, 100% 78%, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8px 100%, 0 78%);
  --clip-three: polygon(0 44%, 100% 44%, 100% 54%, 95% 54%, 95% 54%, 85% 54%, 85% 54%, 8px 54%, 0 54%);
  --clip-four: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8px 0, 0 0);
  --clip-five: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8px 0, 0 0);
  --clip-six: polygon(0 40%, 100% 40%, 100% 85%, 95% 85%, 95% 85%, 85% 85%, 85% 85%, 8px 85%, 0 70%);
  --clip-seven: polygon(0 63%, 100% 63%, 100% 80%, 95% 80%, 95% 80%, 85% 80%, 85% 80%, 8px 80%, 0 70%);
  font-weight: 700 !important;
  outline: transparent !important;
  min-width: 200px !important;
  height: 50px !important;
  line-height: 50px !important;
  margin: 20px auto !important;
  display: block !important;
}

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

.cybr-btn:disabled {
  background: #333;
  color: #666;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
  --primary-hue: 200;
  --primary-lightness: 30;
}

.cybr-btn__glitch {
  display: none;
  position: absolute;
  top: calc(var(--border) * -1);
  left: calc(var(--border) * -1);
  right: calc(var(--border) * -1);
  bottom: calc(var(--border) * -1);
  background: var(--shadow-primary);
  text-shadow: 2px 2px var(--shadow-primary), -2px -2px var(--shadow-secondary);
  clip-path: var(--clip);
  animation: glitch 2s infinite;
}

/* =============================================================================
        BATTLE MAP
   ============================================================================= */

#battle-map {
  text-align: center;
  padding: 20px;
  min-height: 0vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /*height: 100%;*/
  background-image: url('https://rrxzozvjmhfscano.public.blob.vercel-storage.com/uploads/23658402-8b39-40f9-b883-d95445504bbf.png'); /*Background comic style image*/
  background-size: cover;
  background-position: center;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  padding-top: max(0px, 5vh);
  color: #ffffff;
}

#battle-map h1 {
  margin-top: 50px;
  margin-bottom: 20px;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--color-accent);
  text-shadow: 0 0 20px rgba(0, 217, 255, 0.4);
}

#battle-map.screen.active {
  position: absolute;
  inset: 0;
  height: 100%;            /* fill .container, don't grow to content */
  justify-content: flex-start;
  overflow-y: auto;
}

.battle-map-container {
  margin: 20px auto;
  max-width: 2100px;
  width: 100%;
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: row; 
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  color: #ffffff;
}

.map-area {
  position: relative;
  width: 1800px;
  min-height: 1280px;
  
  background-color: rgba(13, 2, 33, 0.85);
  overflow: hidden;
  cursor: grab;
  border: 1px solid rgba(0, 217, 255, 0.25);
  border-radius: 0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.map-area::before {
  content: '';
  position: absolute;
  inset: 6px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
  background:
    linear-gradient(var(--bk), var(--bk)) top left     / 14px 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) top left     / 2px 14px no-repeat,
    linear-gradient(var(--bk), var(--bk)) top right    / 14px 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) top right    / 2px 14px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom left  / 14px 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom left  / 2px 14px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom right / 14px 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom right / 2px 14px no-repeat;
}

.map-area:active {
  cursor: grabbing;
}

.map-container {
  width: 100%;
  height: 100%;
  position: relative;
  top: 0;
  left: 0;
  background-color: rgba(13, 2, 33, 0.85);
  overflow: hidden;
  transform-origin: center;
  transition: transform 0.3s ease;
}

#citadel-map {
  width: 1800px;
  height: 1280px !important;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(0.8);
  transform-origin: 0 0;
  /* Changed from center center for pan compatibility */
  background-image: url('https://rrxzozvjmhfscano.public.blob.vercel-storage.com/uploads/cfb39287-2954-43cf-95c5-35d3f8941adf.jpg');
  /*battle map*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
}

#citadel-map::after {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 15px;
  background: linear-gradient(180deg, 
              rgba(0, 243, 255, 0.2) 0%, 
              rgba(0, 243, 255, 0.1) 50%, 
              transparent 100%);
  pointer-events: none;
  animation: crtRefresh 8s linear infinite;
  opacity: 0.5;
}

.map-container-initialized {
  position: relative;
  width: 100%;
  height: 900px;
  background-image: url('https://rrxzozvjmhfscano.public.blob.vercel-storage.com/uploads/8b6d6dfe-2499-42ca-a777-2eb9d9b07616.jpg');
  background-size: cover;
  background-position: center;
  overflow: visible;
}
/* =============================================================================
   MAP CONTROLS
   ============================================================================= */

.map-controls {
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: none;
  border: none;
  border-radius: 8px;
  margin: 0 0 15px 0;
  box-shadow: none;
  padding: 10px;
  display: flex;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
  position: absolute;
  z-index: 1000;
  color: #ffffff;
  top: 10px;
  right: 10px;
}

.map-zoom-controls {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background-color: rgba(13, 2, 33, 0.7);
  padding: 5px;
  border-radius: 4px;
  border: 1px solid var(--primary);
}

.map-zoom-btn {
  width: 30px;
  height: 30px;
  background-color: rgba(13, 2, 33, 0.8);
  border: 1px solid var(--primary);
  color: var(--primary);
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-zoom-btn:hover {
  background-color: var(--primary);
  color: var(--dark);
}

.map-controls-additional {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
  border-radius: 8px;
  display: flex;
  gap: 5px;
  z-index: 1000;
}

.map-control-btn {
  padding: 5px 10px;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.3s ease;
  background: rgba(13, 2, 33, 0.8);
  color: var(--color-bone);
  border: 1px solid var(--color-line);
  border-radius: 0;
  font-family: var(--font-display);
}

.campaign-controls {
  display: none;
}

/* Sticky container that holds .map-view-controls in the page flex layout */
.map-side-panel {
  flex: 0 0 300px;
  position: sticky;
  top: 20px;
  align-self: flex-start;
}

.map-view-controls {
  /* Now lives inside .map-side-panel — sized by parent, not absolutely positioned */
  width: 100%;
  height: auto;
  max-height: 80vh;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  
  
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  position: relative;
  background: rgba(13, 2, 33, 0.96);
  border: 1px solid rgba(0, 217, 255, 0.22);
  border-radius: 0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.map-view-controls::before {
  content: '';
  position: absolute;
  inset: 6px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.55;
  background:
    linear-gradient(var(--bk), var(--bk)) top left     / 14px 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) top left     / 2px 14px no-repeat,
    linear-gradient(var(--bk), var(--bk)) top right    / 14px 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) top right    / 2px 14px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom left  / 14px 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom left  / 2px 14px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom right / 14px 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom right / 2px 14px no-repeat;
}

.map-view-controls > * {
  position: relative;
  z-index: 1;
}

.map-view-controls.hidden {
  transform: translateX(calc(100% + 30px));
  opacity: 0;
  pointer-events: none;
}

.map-view-controls h4 {
  margin: 0 0 15px 0;
  padding-bottom: 12px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 3px;
  text-shadow: 0 0 12px rgba(0, 217, 255, 0.35);
  border-bottom: 1px solid rgba(0, 217, 255, 0.18);
  flex-shrink: 0;
}

.map-view-controls::-webkit-scrollbar-thumb {
  background: var(--color-accent-dim);
  border-radius: 0;
  box-shadow: none;
}

.map-view-controls::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent);
  box-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
}

.map-view-actions {
  flex-shrink: 0;
  padding-top: 12px;
  border-top: 1px solid var(--color-line);
}

.map-view-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  
  padding: 12px 0;
  margin: 5px 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.map-view-content h4 {
  margin: 0 0 10px 0;
  padding: 0 0 8px 0;
  font-size: 0.75em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  letter-spacing: 1px;
}

.map-view-content::-webkit-scrollbar {
  width: 6px;
}

.map-view-content::-webkit-scrollbar-track {
  background: rgba(6, 1, 18, 0.5);
  border-radius: 0;
}

.map-view-content::-webkit-scrollbar-thumb {
  background: var(--color-accent-dim);
  border-radius: 0;
  border: none;
}

.map-view-content::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent);
}

/* =============================================================================
   CAMPAIGN VIEW
   ============================================================================= */

.campaign-action-btns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.campaign-btn-small {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-ash);
  background: rgba(13, 2, 33, 0.7);
  border: 1px solid var(--color-line);
  border-radius: 0;
  cursor: pointer;
  text-shadow: none;
  box-shadow: none;
  transition: border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, background 150ms ease;
  font-size: 9px;
  letter-spacing: 1px;
  padding: 10px 6px;
}

.campaign-btn-small:hover {
  color: var(--color-gold);
  background: rgba(13, 2, 33, 0.7);
  border-color: rgba(255, 215, 0, 0.5);
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.15);
  transform: none;
}

.back-to-campaign-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  
  padding: 12px 15px;
  cursor: pointer;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: all 0.3s ease;
  font-family: var(--font-display);
  background: rgba(13, 2, 33, 0.7);
  border: 1px solid rgba(255, 215, 0, 0.4);
  border-radius: 0;
  color: var(--color-gold);
}

.back-to-campaign-btn:hover {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.25) 0%, rgba(255, 215, 0, 0.15) 100%);
  border-color: rgba(255, 215, 0, 0.5);
  box-shadow: 0 5px 20px rgba(255, 215, 0, 0.2),
              0 0 15px rgba(255, 215, 0, 0.1);
  transform: translateY(-2px);
}

.view-toggle-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 15px;
  flex-shrink: 0;
}

.view-btn {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-ash);
  background: rgba(13, 2, 33, 0.7);
  border: 1px solid var(--color-line);
  border-radius: 0;
  cursor: pointer;
  text-shadow: none;
  box-shadow: none;
  transition: border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, background 150ms ease;
  font-size: 9.5px;
  letter-spacing: 1.5px;
  padding: 11px 8px;
}

.view-btn:hover {
  color: var(--color-bone);
  background: rgba(13, 2, 33, 0.7);
  border-color: rgba(0, 217, 255, 0.6);
  box-shadow: 0 0 18px rgba(0, 217, 255, 0.15), inset 0 0 18px rgba(0, 217, 255, 0.06);
  text-shadow: none;
  transform: none;
}

.view-btn.active {
  color: var(--color-accent);
  background: linear-gradient(180deg, rgba(0, 217, 255, 0.22) 0%, rgba(0, 217, 255, 0.07) 100%);
  border-color: var(--color-accent);
  text-shadow: 0 0 10px rgba(0, 217, 255, 0.55);
  box-shadow: 0 0 16px rgba(0, 217, 255, 0.2), inset 0 0 16px rgba(0, 217, 255, 0.07);
}

.view-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 3px;
  background: #ffd700;
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.legend-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  margin: 6px 0;
  font-size: 0.85em;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s ease;
  gap: 10px;
  color: #e0e0e0;
}

.legend-item:last-child {
  margin-bottom: 0;
}

.legend-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateX(3px);
}

.legend-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.legend-color {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  border-radius: 3px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  display: inline-block;
}

.legend-count {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.1em;
  font-weight: bold;
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
  min-width: 24px;
  text-align: right;
}

/* =============================================================================
        OUTPOSTS
   ============================================================================= */

.outpost.occupied {
  background: #FFD700;
  border-color: #FFA500;
}

.outpost:hover {
  transform: translate(-50%, -50%) scale(1.5);
  z-index: 20;
}

.map-control-btn:hover {
  background: var(--accent);
}

.outpost-preview img {
  width: 150px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
}

/* =============================================================================
        STRATEGIC INFO
   ============================================================================= */

.strategic-info {
  margin: 15px 0;
  padding: 10px;
  background: rgba(0, 30, 60, 0.6);
  border-radius: 6px;
  color: #e0e0e0;
}

.strategic-info h4 {
  color: var(--accent);
  margin-bottom: 8px;
  justify-self: left !important;
}

.strategic-info > div:first-of-type {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  font-size: 0.9em;
  color: #ffffff;
}

.strategic-info > div:last-of-type {
  margin-top: 8px;
  font-size: 0.9em;
  color: #ffffff;
}

/* =============================================================================
        OCCUPATION STATUS
   ============================================================================= */

.occupation-status {
  margin: 10px 0;
  padding: 10px;
  background: rgba(255, 100, 100, 0.2);
  border: 1px solid #FF6B6B;
  border-radius: 4px;
  color: #ff8888;
}

.occupation-status p:first-child {
  color: #ffffff;
  font-weight: bold;
}

.occupation-status p:last-child {
  font-size: 0.9em;
  color: #FFD700;
}

.neutral-status {
  margin: 10px 0;
  padding: 10px;
  background: rgba(100, 200, 255, 0.15);
  border: 1px solid #64c8ff;
  border-radius: 4px;
  color: #88ccff;
}

/* =============================================================================
        OUTPOST TOOLTIP
   ============================================================================= */

.outpost-tooltip {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 100;
  max-width: 350px;
  width: 300px;
  min-width: 280px;
  border: 2px solid var(--primary);
  visibility: hidden;
  box-shadow: 0 0 30px rgba(0, 243, 255, 0.7), 0 10px 30px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(12px);
  line-height: 1.5;
  text-align: left;
}

/* =============================================================================
        PANEL TOGGLE
   ============================================================================= */

.panel-toggle-btn {
  position: absolute;
  top: 10px;
  z-index: 999;
  width: 44px;
  height: 44px;
  
  
  cursor: pointer;
  font-size: 18px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 2, 33, 0.92);
  color: var(--color-ash);
  border: 1px solid rgba(0, 217, 255, 0.3);
  border-radius: 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  font-family: var(--font-display);
}

.panel-toggle-btn:hover {
  background: rgba(13, 2, 33, 0.95);
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: scale(1.05);
  box-shadow: 0 0 18px rgba(0, 217, 255, 0.25);
}

.panel-toggle-btn.toggle-map-view {
  right: 10px;
}

.panel-toggle-btn.hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
}

.panel-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-family: 'Orbitron', sans-serif;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.panel-close-btn:hover {
  background: rgba(255, 100, 100, 0.2);
  border-color: rgba(255, 100, 100, 0.5);
  color: #ff6464;
  transform: rotate(90deg);
}

/* Inside the modal family the close control is a quiet ✕ that charges cyan */
.modal-content .panel-close-btn {
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--color-ash);
  font-family: var(--font-display);
  font-size: 16px;
}
.modal-content .panel-close-btn:hover {
  background: transparent;
  border: none;
  color: var(--color-accent);
  text-shadow: 0 0 10px rgba(0, 217, 255, 0.6);
  transform: none;
}

/* =============================================================================
   CARD SLOTS (COMBAT ARENA)
   ============================================================================= */
.cards-bay { display: flex; flex-direction: column; gap: 15px; }
.cards-bay-label { font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--text-muted); }
.equipment-slots { display: flex; gap: 12px; flex-wrap: wrap; }

.equipment-slots .card-slot {
    position: relative;
    width: 120px;
    height: 180px;
    background: linear-gradient(145deg, rgba(36, 40, 66, 0.5), rgba(26, 28, 46, 0.6));
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible;
    animation: cardFloat 4s ease-in-out infinite;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.equipment-slots .card-slot:nth-child(1) { animation-delay: 0s; }
.equipment-slots .card-slot:nth-child(2) { animation-delay: 0.3s; }
.equipment-slots .card-slot:nth-child(3) { animation-delay: 0.6s; }
.equipment-slots .card-slot:nth-child(4) { animation-delay: 0.9s; }
.equipment-slots .card-slot:nth-child(5) { animation-delay: 1.2s; }

@keyframes cardFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.equipment-slots .card-slot:hover { border-color: rgba(139, 92, 246, 0.5); transform: translateY(-12px) scale(1.05); box-shadow: 0 20px 40px rgba(139, 92, 246, 0.3); animation-play-state: paused; }

.equipment-slots .card-slot.empty { border-style: dashed; border-color: rgba(139, 92, 246, 0.15); animation: none; }
.equipment-slots .card-slot.empty::before { content: attr(data-slot-type); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 0.55rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; text-align: center; padding: 10px; opacity: 0.5; }

.equipment-slots .card-slot img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
/*.equipment-slots .card-slot .card-type-badge { position: absolute; bottom: 6px; left: 6px; right: 6px; background: rgba(0,0,0,0.85); padding: 4px 6px; font-family: var(--font-display); font-size: 0.5rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; text-align: center; color: var(--accent-secondary); border-radius: 3px; backdrop-filter: blur(5px); }

/* =============================================================================
CARDS COMBAT AREA
================================================================================ */

.item-slot.filled span {
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 0.5rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
  padding: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.2;
  word-break: break-word;
}

.equipment-slots,
.cards-bay,
.combatant-side,
.combat-content {
  overflow: visible;
}

.card-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, rgba(10, 10, 30, 0.98), rgba(20, 20, 50, 0.95));
  border: 2px solid #00d4ff;
  border-radius: 8px;
  padding: 12px 15px;
  min-width: 200px;
  max-width: 280px;
  z-index: 0;
  pointer-events: none;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.4),
        0 5px 30px rgba(0, 0, 0, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  animation: tooltipFadeIn 0.15s ease-out;
}

.card-slot:hover .card-tooltip {
  display: block;
}

.card-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: #00d4ff;
}

.tooltip-name {
  font-size: 14px;
  font-weight: bold;
  color: #00d4ff;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
  border-bottom: 1px solid rgba(0, 212, 255, 0.3);
  padding-bottom: 6px;
}

.tooltip-stats {
  font-size: 13px;
  font-weight: bold;
  color: #15ff00;
  margin-bottom: 6px;
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
  z-index: 20;
}

.tooltip-class,
.tooltip-creature-class {
  font-size: 11px;
  color: #aaa;
  margin-bottom: 4px;
  font-style: italic;
}

.tooltip-element {
  font-size: 12px;
  color: #ffaa00;
  margin-bottom: 4px;
  text-shadow: 0 0 5px rgba(255, 170, 0, 0.3);
}

.tooltip-sigil-type {
  font-size: 12px;
  color: #ff66ff;
  margin-bottom: 4px;
}

.tooltip-resist {
  font-size: 11px;
  color: #00ff00;
  margin-bottom: 3px;
}

.tooltip-weak {
  font-size: 11px;
  color: #ff4444;
  margin-bottom: 3px;
}

.tooltip-immune {
  font-size: 11px;
  color: #00ffff;
  margin-bottom: 3px;
  font-weight: bold;
}

.tooltip-trigger {
  font-size: 11px;
  color: #aaaaff;
  margin-bottom: 3px;
}

.tooltip-cooldown {
  font-size: 11px;
  color: #ffff00;
  margin-bottom: 3px;
}

.tooltip-effects {
  font-size: 11px;
  color: #ff88ff;
  margin-bottom: 3px;
}

.tooltip-duration {
  font-size: 11px;
  color: #88ffff;
  margin-bottom: 3px;
}

.tooltip-desc {
  font-size: 11px;
  color: #999;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  line-height: 1.5;
  font-style: italic;
}

.card-slot.depletable-weapon {
  border-color: #ff6600;
  box-shadow: 0 0 10px rgba(255, 102, 0, 0.3);
}

.card-slot.depleted {
  border-color: #666;
}

.uses-counter {
  font-family: 'Orbitron', monospace;
}

.card-slot.ghostly {
  animation: ghostPulse 2s infinite ease-in-out;
}

.card-slot.tooltip-below .card-tooltip {
  bottom: auto;
  top: calc(100% + 10px);
}

.card-slot.tooltip-below .card-tooltip::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #00d4ff;
}

.stat-uses {
  color: #f5a623;
  text-shadow: 0 0 8px rgba(245, 166, 35, 0.5);
}

.stat-heal {
  color: #15ff00;
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
}

.stat-duration {
  color: #88ffff;
  text-shadow: 0 0 8px rgba(136, 255, 255, 0.5);
}

.tooltip-target {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 11px;
  background: rgba(245, 166, 35, 0.05);
}

.target-label {
  color: #f5a623;
  font-weight: 700;
  letter-spacing: 1px;
}

.target-value {
  color: #ccc;
  text-transform: capitalize;
}

.tooltip-range {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 11px;
  background: rgba(0, 212, 255, 0.05);
}

.range-label {
  color: #00d4ff;
  font-weight: 700;
  letter-spacing: 1px;
}

.range-value {
  color: #ccc;
  text-transform: capitalize;
}

.tooltip-effect-list {
  padding: 4px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-left: 2px solid rgba(255, 136, 255, 0.3);
  margin-left: 12px;
}

.tooltip-effect-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #aaa;
}

.tooltip-effect-item .effect-icon {
  font-size: 12px;
}

.tooltip-effect-item .effect-desc {
  text-transform: capitalize;
}

.tooltip-armed {
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  background: linear-gradient(90deg, rgba(245, 166, 35, 0.2) 0%, rgba(245, 166, 35, 0.05) 100%);
  border-left: 3px solid #f5a623;
  animation: armedPulse 1s infinite;
}

.armed-label {
  color: #f5a623;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(245, 166, 35, 0.5);
}

.armed-value {
  color: #ffd700;
  font-style: italic;
}

.tooltip-flavor {
  padding: 6px 12px 10px;
  background: rgba(0, 0, 0, 0.2);
}

.tooltip-flavor p {
  margin: 0;
  font-size: 10px;
  color: #666;
  font-style: italic;
  line-height: 1.4;
  text-align: center;
}

.item-slot.depleted {
  border-color: #444;
  box-shadow: none;
}

.item-slot.depleted::after {
  content: '✕';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: rgba(255, 0, 0, 0.5);
  text-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
}

.item-slot .card-tooltip {
  min-width: 180px;
  max-width: 250px;
  z-index: 20;
}

.item-slot .card-tooltip .tooltip-name {
  font-size: 12px;
  letter-spacing: 1px;
}

.item-slot .card-tooltip .tooltip-stats-bar {
  padding: 6px 10px;
  font-size: 11px;
}

.item-slot .card-tooltip .tooltip-desc p {
  font-size: 10px;
}

.tooltip-crystal,
.tooltip-absorb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 11px;
  background: rgba(147, 112, 219, 0.1);
}

.crystal-label,
.absorb-label {
  color: #9370DB;
  font-weight: 700;
  letter-spacing: 1px;
}

.crystal-value,
.absorb-value {
  color: #ccc;
  font-family: 'Orbitron', monospace;
}

.tooltip-restriction {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 11px;
  background: rgba(255, 71, 87, 0.05);
}

.restriction-label {
  color: #ff4757;
  font-weight: 700;
  letter-spacing: 1px;
}

.restriction-value {
  color: #ccc;
  text-transform: capitalize;
}

.tooltip-applies {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 11px;
  background: rgba(155, 89, 182, 0.1);
}

.applies-label {
  color: #9B59B6;
  font-weight: 700;
  letter-spacing: 1px;
}

.applies-value {
  color: #ccc;
  text-transform: capitalize;
}

.item-slot:hover .card-tooltip {
  display: block;
}

.items-tray,
.items-section {
  overflow: visible;
}

.card-slot .card-tooltip,
.item-slot .card-tooltip {
  opacity: 1 !important;
}

.card-slot:hover .card-tooltip,
.item-slot:hover .card-tooltip {
  display: block;
  opacity: 1 !important;
}

#start-combat {
  margin-top: 20px;
}

.card-slot.sacrificeable {
  cursor: pointer;
  border: 3px solid #8B0000;
  box-shadow: 0 0 20px rgba(139, 0, 0, 0.8);
  animation: sacrifice-pulse 2s infinite;
}

.sacrifice-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(139, 0, 0, 0.3), rgba(255, 0, 0, 0.3));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.sacrifice-icon {
  font-size: 40px;
  animation: skull-bob 1s infinite;
}

.sacrifice-label {
  font-size: 12px;
  font-weight: bold;
  color: #FF0000;
  text-shadow: 0 0 10px black;
  margin-top: 5px;
}

.card-slot.sacrificing {
  animation: sacrifice-fade 0.5s forwards;
}

.item-slot.armable {
  cursor: pointer;
  border: 3px solid #FFD700;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
}

.arm-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.arm-icon {
  font-size: 35px;
}

.arm-label {
  font-size: 10px;
  font-weight: bold;
  color: #FFD700;
  text-shadow: 0 0 5px black;
  margin-top: 3px;
}

.item-slot.arming {
  animation: arm-flash 0.3s;
}

.trigger-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 69, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.trigger-icon {
  font-size: 45px;
  animation: trigger-pulse 0.5s infinite;
}

.trigger-label {
  font-size: 11px;
  font-weight: bold;
  color: #FFFFFF;
  text-shadow: 0 0 10px #FF4500;
  margin-top: 5px;
  animation: trigger-blink 1s infinite;
}

.item-slot.triggering {
  animation: explosion 0.5s forwards;
}

.card-slot.summoned {
  border: 3px solid #00CED1;
  box-shadow: 0 0 20px rgba(0, 206, 209, 0.8);
  animation: summon-glow 2s infinite;
}

.summon-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  background: rgba(0, 206, 209, 0.9);
  color: black;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: bold;
}

/* =============================================================================
        SIGIL VISUALS
   ============================================================================= */

/* ─── Sigil Match: Holy (full-width motes + aura wash + pulse ring) ─── */
.equipment-slots .card-slot.sigil-matched {
    border-color: rgba(255, 215, 0, 0.9);
    overflow: visible;
    /* steady glow — no animation here, so no hard pop */
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.4),
        0 0 18px rgba(255, 215, 0, 0.7),
        0 0 36px rgba(255, 215, 0, 0.4),
        inset 0 0 14px rgba(255, 215, 0, 0.4);
}

/* Outward pulse ring */
.equipment-slots .card-slot.sigil-matched::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 8px;            /* match parent corners */
    border: 2px solid rgba(255, 213, 74, 0.9);
    pointer-events: none;
    z-index: 3;
    animation: sigil-holy-ring 2.2s ease-out infinite;
}
@keyframes sigil-holy-ring {
    0%   { inset: -2px;  opacity: 0.85; }
    100% { inset: -18px; opacity: 0; }
}

/* Breathing aura wash (full width, rising fade) */
.equipment-slots .card-slot.sigil-matched::after {
    content: '';
    position: absolute;
    inset: -6px;                   /* extend slightly past the border so the bloom feels soft-edged */
    border-radius: 8px;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(circle at 50% 60%,
            rgba(255, 213, 74, 0.35),
            transparent 70%),
        linear-gradient(to top,
            rgba(255, 213, 74, 0.42),
            rgba(255, 213, 74, 0.10) 55%,
            transparent);
    mix-blend-mode: screen;
    animation: sigil-holy-aura 2.4s ease-in-out infinite;
}

@keyframes sigil-holy-aura {
    0%, 100% { opacity: 0.45; transform: scale(0.99); }
    50%      { opacity: 0.9;  transform: scale(1.02); }
}

/* Rising mana motes — full-width spread */
.equipment-slots .card-slot.sigil-matched .mote {
    position: absolute;
    bottom: 4px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff6c8, #ffd54a 60%, rgba(255, 213, 74, 0));
    pointer-events: none;
    z-index: 2;
    animation: sigil-mote-rise 2.8s linear infinite;
}
.equipment-slots .card-slot.sigil-matched .mote:nth-child(1) { left: 8%;  animation-delay: 0s; }
.equipment-slots .card-slot.sigil-matched .mote:nth-child(2) { left: 24%; animation-delay: 1.4s; }
.equipment-slots .card-slot.sigil-matched .mote:nth-child(3) { left: 40%; animation-delay: 0.6s; }
.equipment-slots .card-slot.sigil-matched .mote:nth-child(4) { left: 54%; animation-delay: 2.1s; }
.equipment-slots .card-slot.sigil-matched .mote:nth-child(5) { left: 70%; animation-delay: 1s; }
.equipment-slots .card-slot.sigil-matched .mote:nth-child(6) { left: 86%; animation-delay: 1.8s; }
.equipment-slots .card-slot.sigil-matched .mote:nth-child(7) { left: 16%; animation-delay: 0.9s; width: 4px; height: 4px; }
.equipment-slots .card-slot.sigil-matched .mote:nth-child(8) { left: 62%; animation-delay: 2.4s; width: 4px; height: 4px; }
.equipment-slots .card-slot.sigil-matched .mote:nth-child(9) { left: 92%; animation-delay: 0.3s; width: 4px; height: 4px; }
@keyframes sigil-mote-rise {
    0%   { transform: translateY(0) scale(0.5);     opacity: 0; }
    12%  { opacity: 1; }
    82%  { opacity: 0.85; }
    100% { transform: translateY(-156px) scale(1.05); opacity: 0; }
}

#arena-root .mote {
            animation-delay: calc(var(--arena-clock, 0s) + var(--mote-delay, 0s)) !important;
        }

.veil-tag-overlay {
    position: absolute;
    top: 2px; right: 2px;
    width: 34%; height: 34%;
    min-width: 22px; min-height: 22px;
    background: rgba(20, 5, 40, 0.9);
    border: 1px solid #9966ff;
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    z-index: 5;
    pointer-events: none;   /* clicks pass through to the slot */
}
.veil-tag-overlay .veil-mark { font-size: 14px; line-height: 1; }
.veil-tag-overlay.revealed-tag { border-color: #ff4757; background: rgba(60, 5, 5, 0.9); }
.veil-tag-overlay .tag-name { display: none; }   /* name shown via tooltip later; keeps overlay compact */
.veil-target { outline: 2px solid #9966ff; }

/* =============================================================================
   DEAD CODE
   -----------------------------------------------------------------------------
   These rules are preserved but currently match no elements in the HTML.
   Selectors reference classes/structures (.weapon-slots, .equipment-slot
   singular, .armor-slot / .weapon-slot / .sigil-slot / .ability-slot /
   .creature-slot, .setup-slot, .card-display, .house-items, .items-fp-total,
   .items-container, .locked-text) that are not present in either the combat
   screen or the loadout screen. Kept here for reference / future revival.
   ============================================================================= */
/*
.weapon-slots {
  display: flex;
  gap: 10px;
}

.equipment-slot h5 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 3px;
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 0.55rem;
  font-weight: 600;
  color: rgba(139, 92, 246, 0.8);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.equipment-slot.empty {
  border-style: dashed;
}

.equipment-slot.setup-slot {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.equipment-slot .card-display {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.equipment-slot.armor-slot.filled {
  border-color: #94a3b8;
}

.equipment-slot.weapon-slot.filled {
  border-color: #ef4444;
}

.equipment-slot.sigil-slot.filled {
  border-color: #ec4899;
}

.equipment-slot.ability-slot.filled {
  border-color: #22d3ee;
}

.equipment-slot.creature-slot.filled {
  border-color: #a855f7;
}

.house-items {
  flex: 1;
  max-width: 720px;
  min-width: 320px;
  background: linear-gradient(145deg, rgba(26, 28, 46, 0.9), rgba(18, 20, 31, 0.95));
  border: 2px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  padding: 15px 20px;
  position: relative;
}

.house-items::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(245, 158, 11, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245, 158, 11, 0.08) 1px, transparent 1px);
  background-size: 25px 25px;
  opacity: 0.4;
  pointer-events: none;
  border-radius: 8px;
  mask-image: radial-gradient(ellipse at center, transparent 30%, black 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 30%, black 80%);
}

.house-items h3 {
  margin: 0 0 10px 0;
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--accent-warning, #f59e0b);
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

.items-fp-total {
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--yellow, #ffde03);
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}

.items-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.equipment-slot.locked {
  cursor: not-allowed !important;
  opacity: 0.5;
  background: linear-gradient(135deg, rgba(50, 50, 50, 0.5), rgba(30, 30, 30, 0.5));
  border: 2px dashed #666;
}

.locked-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #999;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}

/* ─── Sigil Trumped: Dim & Dead (drained + scar + ash drift) ─── 
.equipment-slots .card-slot.sigil-trumped {
    border-color: rgba(85, 90, 95, 0.45);
    overflow: hidden;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.5),
        inset 0 0 22px rgba(0, 0, 0, 0.6);
}
/* Drain the sigil art itself 
.equipment-slots .card-slot.sigil-trumped .sigil-img {
    filter: grayscale(1) brightness(0.3);
}
/* Darkness welling up from below 
.equipment-slots .card-slot.sigil-trumped::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 6px;
    pointer-events: none;
    z-index: 3;
    background: linear-gradient(to top,
        rgba(8, 10, 14, 0.7),
        rgba(8, 10, 14, 0.2) 65%,
        transparent);
}
/* Dim grey scar 
.equipment-slots .card-slot.sigil-trumped::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 130%;
    height: 3px;
    transform: translate(-50%, -50%) rotate(-32deg);
    background: linear-gradient(90deg,
        transparent,
        rgba(170, 170, 175, 0.55) 30%,
        rgba(170, 170, 175, 0.55) 70%,
        transparent);
    pointer-events: none;
    z-index: 4;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}

/* Drifting ash 
.equipment-slots .card-slot.sigil-trumped .ash {
    position: absolute;
    bottom: 50px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(150, 150, 155, 0.6);
    pointer-events: none;
    z-index: 4;
    animation: sigil-ash-rise 4.6s linear infinite;
}
.equipment-slots .card-slot.sigil-trumped .ash:nth-child(2) { left: 42%; animation-delay: 0.8s; }
.equipment-slots .card-slot.sigil-trumped .ash:nth-child(3) { left: 54%; animation-delay: 2.8s; }
@keyframes sigil-ash-rise {
    0%   { transform: translateY(0) translateX(0) scale(0.7); opacity: 0; }
    20%  { opacity: 0.7; }
    100% { transform: translateY(-90px) translateX(8px) scale(1.1); opacity: 0; }
}

*/

/* =============================================================================
   STORY & LEADERBOARD STYLES
   -----------------------------------------------------------------------------
   TABLE OF CONTENTS
     1. STORY DIALOGUE — INLINE (legacy / dynamic)
     2. STORY OBJECTIVES PANEL — INLINE (legacy / dynamic)
     3. STORY VN MODAL ............................. #story-dialogue-modal
        3a. Modal shell & backdrop
        3b. House bar
        3c. Content layout
        3d. Portrait section
        3e. Character info header
        3f. Textbox & line-type indicator
        3g. Rescue overlay
        3h. Controls
        3i. House transition overlay
        3j. House colour palette (data-house-id)
     4. STORY SAGA BUTTON
     5. STORY SUMMARY MODAL ........................ #story-summary-modal
        5a. Container, header, close
        5b. House tabs
        5c. Body, scrollbar, house RGB tokens
        5d. House banner
        5e. Section grid (shared shell)
        5f. Characters list
        5g. Objectives list
        5h. Territory list
        5i. Rivalries list
        5j. Footer
        5k. Section / card stagger animations
     6. LEADERBOARD OVERLAY ........................ #leaderboard-overlay
     7. XP DETAILS MODAL ........................... #xp-details-modal-container
     8. LEADERBOARD ENTRY (MINI)
   ============================================================================= */

/* =============================================================================
   1. STORY DIALOGUE — INLINE (legacy / dynamic, not present in static HTML)
   ============================================================================= */

.story-dialogue-container {
  width: 100%;
  max-width: 900px;
  margin: 20px auto;
  padding: 15px;
  background: linear-gradient(135deg, rgba(20, 20, 35, 0.95) 0%, rgba(30, 30, 50, 0.95) 100%);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .story-dialogue-container,
.dark-mode .story-dialogue-container {
  background: linear-gradient(135deg, rgba(10, 10, 20, 0.98) 0%, rgba(20, 20, 35, 0.98) 100%);
}

/* --- Rivalry banner ---------------------------------------------------------- */

.rivalry-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px 20px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(139, 0, 0, 0.3) 0%, rgba(80, 0, 0, 0.3) 100%);
  border-radius: 8px;
  border: 1px solid rgba(255, 69, 0, 0.3);
  animation: rivalryPulse 2s ease-in-out infinite;
}

.rivalry-banner.nemesis {
  background: linear-gradient(135deg, rgba(200, 0, 0, 0.4) 0%, rgba(100, 0, 0, 0.4) 100%);
  border-color: rgba(255, 0, 0, 0.5);
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.2),
              inset 0 0 30px rgba(255, 0, 0, 0.1);
}

.rivalry-icon {
  font-size: 2em;
  margin-bottom: 5px;
  text-shadow: 0 0 10px rgba(255, 69, 0, 0.5);
}

.rivalry-text {
  font-size: 1.2em;
  font-weight: bold;
  color: #ff4500;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-shadow: 0 0 10px rgba(255, 69, 0, 0.5);
}

.rivalry-history {
  font-size: 0.85em;
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
  text-align: center;
  margin-top: 8px;
  max-width: 600px;
}

/* --- Rescue section ---------------------------------------------------------- */

.story-rescue-section {
  margin-bottom: 25px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(0, 150, 0, 0.2) 0%, rgba(0, 100, 0, 0.2) 100%);
  border-radius: 10px;
  border: 2px solid rgba(0, 255, 100, 0.4);
  animation: rescueGlow 1.5s ease-in-out infinite;
}

.rescue-alert {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 15px;
}

.rescue-icon {
  font-size: 2em;
  animation: rescueBounce 0.5s ease-in-out infinite alternate;
}

.rescue-text {
  font-size: 1.5em;
  font-weight: bold;
  color: #00ff64;
  text-transform: uppercase;
  letter-spacing: 4px;
  text-shadow: 0 0 15px rgba(0, 255, 100, 0.6);
  animation: rescueFlash 1s ease-in-out infinite;
}

.rescue-character-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px 25px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(0, 255, 100, 0.3);
  margin-top: 10px;
}

.rescue-character-name {
  font-size: 1.3em;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 255, 100, 0.5);
}

.rescue-character-title {
  font-size: 0.95em;
  color: rgba(255, 255, 255, 0.8);
  font-style: italic;
  margin-top: 4px;
}

.rescue-character-house {
  font-size: 0.85em;
  color: rgba(0, 255, 100, 0.8);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 8px;
}

/* --- Dialogue sections ------------------------------------------------------- */

.story-dialogue-section {
  margin-bottom: 20px;
}

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

.dialogue-section-header {
  font-size: 0.9em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 3px;
  padding: 10px 15px;
  margin-bottom: 15px;
  border-radius: 6px;
  text-align: center;
}

.winner-dialogue .dialogue-section-header {
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 215, 0, 0.1) 50%, rgba(255, 215, 0, 0.2) 100%);
  color: #ffd700;
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.loser-dialogue .dialogue-section-header {
  background: linear-gradient(90deg, rgba(100, 100, 100, 0.2) 0%, rgba(100, 100, 100, 0.1) 50%, rgba(100, 100, 100, 0.2) 100%);
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* --- Character dialogue card ------------------------------------------------- */

.character-dialogue {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.character-dialogue:hover {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.character-dialogue.winner {
  border-left: 4px solid #ffd700;
}

.character-dialogue.loser {
  border-left: 4px solid rgba(255, 255, 255, 0.3);
  opacity: 0.85;
}

.character-dialogue:last-child {
  margin-bottom: 0;
}

.character-dialogue-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.character-portrait-frame {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  /* border: 2px solid rgba(255, 255, 255, 0.3); */
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  flex-shrink: 0;
}

/* NOTE: `.character-info` is ALSO used inside #combat-screen .character-panel.
   These absolute-positioning declarations may conflict with combat-screen rules
   defined in another stylesheet. Review if changing combat-screen layout. */
.character-info {
  flex: 1;
  padding: 25px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

.character-title {
  font-size: 0.85em;
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
  margin-bottom: 4px;
}

.character-role {
  font-size: 0.7em;
  color: rgba(255, 215, 0, 0.8);
  text-transform: uppercase;
  letter-spacing: 1px;
  background: rgba(255, 215, 0, 0.1);
  padding: 2px 8px;
  border-radius: 10px;
  display: inline-block;
}

.character-dialogue.loser .character-role {
  color: rgba(150, 150, 150, 0.8);
  background: rgba(150, 150, 150, 0.1);
}

.character-dialogue-content {
  padding-left: 75px;
}

/* --- Dialogue lines (per-type styling) --------------------------------------- */

.dialogue-line {
  font-size: 0.95em;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 10px;
  padding: 10px 15px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  border-left: 3px solid transparent;
  position: relative;
  animation: dialogueFadeIn 0.5s ease-out forwards;
  opacity: 0;
  transform: translateX(-10px);
}

.dialogue-line:last-child {
  margin-bottom: 0;
}

.dialogue-line.greeting {
  border-left-color: rgba(100, 200, 255, 0.5);
  font-style: italic;
  color: rgba(100, 200, 255, 0.9);
}

.dialogue-line.battle_context {
  border-left-color: rgba(255, 165, 0, 0.5);
  font-weight: 500;
}

.dialogue-line.rivalry {
  border-left-color: rgba(255, 69, 0, 0.6);
  background: rgba(255, 69, 0, 0.05);
  font-weight: 600;
}

.dialogue-line.sphere,
.dialogue-line.sphere_dominance,
.dialogue-line.sphere_first,
.dialogue-line.sphere_loss,
.dialogue-line.sphere_expelled {
  border-left-color: rgba(147, 112, 219, 0.5);
}

.dialogue-line.outpost {
  border-left-color: rgba(32, 178, 170, 0.5);
}

.dialogue-line.district_control {
  border-left-color: rgba(255, 215, 0, 0.6);
  background: rgba(255, 215, 0, 0.05);
  font-weight: 600;
}

.dialogue-line.rescue {
  border-left-color: rgba(0, 255, 100, 0.6);
  background: rgba(0, 255, 100, 0.05);
  font-weight: 600;
}

.dialogue-line.gratitude {
  border-left-color: rgba(0, 200, 150, 0.5);
}

.dialogue-line.warning {
  border-left-color: rgba(255, 100, 100, 0.5);
  background: rgba(255, 100, 100, 0.05);
}

.dialogue-line.objective_progress {
  border-left-color: rgba(100, 149, 237, 0.5);
}

.dialogue-line.objective_complete {
  border-left-color: rgba(50, 205, 50, 0.6);
  background: rgba(50, 205, 50, 0.05);
  font-weight: 600;
}

.dialogue-line.closing {
  border-left-color: rgba(200, 200, 200, 0.3);
  font-style: italic;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9em;
}

.dialogue-line.typing {
  overflow: hidden;
  white-space: nowrap;
  animation: typing 2s steps(40, end),
             dialogueFadeIn 0.3s ease-out forwards;
}

/* =============================================================================
   2. STORY OBJECTIVES PANEL — INLINE (legacy / dynamic)
   ============================================================================= */

.story-objectives-panel {
  margin-top: 20px;
  padding: 15px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.objectives-header {
  font-size: 0.85em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.objective-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.objective-item:last-child {
  border-bottom: none;
}

.objective-status {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7em;
  flex-shrink: 0;
}

.objective-status.incomplete {
  background: rgba(100, 100, 100, 0.3);
  border: 2px solid rgba(100, 100, 100, 0.5);
}

.objective-status.in-progress {
  background: rgba(255, 165, 0, 0.3);
  border: 2px solid rgba(255, 165, 0, 0.5);
  color: #ffa500;
}

.objective-status.complete {
  background: rgba(50, 205, 50, 0.3);
  border: 2px solid rgba(50, 205, 50, 0.5);
  color: #32cd32;
}

.objective-name {
  flex: 1;
  font-size: 0.85em;
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.objective-progress {
  font-size: 0.8em;
  color: rgba(255, 255, 255, 0.5);
}

/* =============================================================================
   3. STORY VN MODAL (Visual Novel dialogue) — #story-dialogue-modal
   ============================================================================= */

/* --- 3a. Modal shell & backdrop --------------------------------------------- */

.story-vn-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.story-vn-modal.active {
  display: flex;
  opacity: 1;
}

.story-vn-modal.entering {
  display: flex;
  animation: modalFadeIn 0.5s ease forwards;
}

.story-vn-modal.exiting {
  animation: modalFadeOut 0.4s ease forwards;
}

.story-vn-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(0 0 0 / 40%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.story-vn-container {
  position: relative;
  width: 90%;
  max-width: 900px;
  min-height: 400px;
  
  
  overflow: hidden;
  transform: scale(0.95);
  transition: transform 0.4s ease, border-color 0.3s ease;
  --bk: var(--house-color, rgba(0, 217, 255, 0.8));
  background: rgba(13, 2, 33, 0.97);
  border: 1px solid var(--color-line);
  border-radius: 0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
}

/* HUD brackets take the speaking house's colour */
.story-vn-container::before {
  content: '';
  position: absolute;
  inset: 6px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.55;
  background:
    linear-gradient(var(--bk), var(--bk)) top left     / 14px 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) top left     / 2px 14px no-repeat,
    linear-gradient(var(--bk), var(--bk)) top right    / 14px 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) top right    / 2px 14px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom left  / 14px 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom left  / 2px 14px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom right / 14px 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom right / 2px 14px no-repeat;
  opacity: 0.45;
  z-index: 5;
}

.story-vn-modal.active .story-vn-container {
  transform: scale(1);
}

.story-vn-container.character-transitioning {
  animation: characterTransition 0.6s ease;
}

.story-vn-container.house-transitioning {
  animation: houseTransition 0.8s ease;
}

/* --- 3b. House bar ----------------------------------------------------------- */

.story-vn-house-bar {
  padding: 12px 20px;
  text-align: center;
  font-size: 0.85em;
  font-weight: bold;
  text-transform: uppercase;
  transition: background 0.4s ease, color 0.4s ease;
  font-family: var(--font-display);
  letter-spacing: 3px;
  border-bottom: 1px solid var(--color-line);
}

.story-vn-container[data-house="winner"] .story-vn-house-bar {
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 215, 0, 0.1) 50%, rgba(255, 215, 0, 0.2) 100%);
  color: #ffd700;
}

.story-vn-container[data-house="loser"] .story-vn-house-bar {
  background: linear-gradient(90deg, rgba(150, 150, 150, 0.2) 0%, rgba(150, 150, 150, 0.1) 50%, rgba(150, 150, 150, 0.2) 100%);
  color: #aaa;
}

/* --- 3c. Content layout ------------------------------------------------------ */

.story-vn-content {
  display: flex;
  padding: 25px;
  gap: 25px;
  min-height: 320px;
  transition: flex-direction 0.4s ease;
}

.story-vn-container[data-position="left"] .story-vn-content {
  flex-direction: row;
}

.story-vn-container[data-position="right"] .story-vn-content {
  flex-direction: row-reverse;
}

/* --- 3d. Portrait section ---------------------------------------------------- */

.story-vn-portrait-section {
  flex: 0 0 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-vn-portrait-frame {
  position: relative;
  width: 200px;
  height: 260px;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
  border-radius: 0;
  border: 1px solid var(--house-color, var(--color-line));
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3), 0 0 22px rgba(0, 0, 0, 0.5);
}

.story-vn-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.story-vn-portrait-img.loaded {
  opacity: 1;
  transform: scale(1);
}

.story-vn-portrait-img.portrait-error {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.story-vn-portrait-frame.entering {
  animation: portraitEnter 0.6s ease forwards;
}

/* --- 3e. Character info header ---------------------------------------------- */

.story-vn-dialogue-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.story-vn-character-info {
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.story-vn-character-name {
  font-size: 1.5em;
  color: #fff;
  text-shadow: 0 0 20px var(--house-color, rgba(100, 100, 255, 0.5));
  margin-bottom: 4px;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 1px;
}

.story-vn-character-name.visible {
  opacity: 1;
  transform: translateX(0);
}

.story-vn-character-title {
  font-size: 1em;
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
  margin-bottom: 6px;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
}

.story-vn-character-title.visible {
  opacity: 1;
  transform: translateX(0);
}

.story-vn-character-role {
  display: inline-block;
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 4px 12px;
  
  color: var(--house-color, #888);
  border: 1px solid var(--house-color, rgba(255, 255, 255, 0.2));
  opacity: 0;
  transition: opacity 0.4s ease 0.4s;
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.05);
}

.story-vn-character-role.visible {
  opacity: 1;
}

/* --- 3f. Textbox & line-type indicator -------------------------------------- */

.story-vn-textbox {
  flex: 1;
  
  padding: 20px;
  position: relative;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  background: rgba(6, 1, 18, 0.55);
  border: 1px solid var(--color-line);
  border-radius: 0;
}

.story-vn-text-content {
  /* flex: 1;  -- use if you want the box to stretch with content */
  min-height: 350px;
  font-size: 1.1em;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.95);
}

.story-vn-cursor {
  display: inline-block;
  color: var(--house-color, #ffd700);
  animation: cursorBlink 0.8s ease-in-out infinite;
  margin-left: 2px;
}

.story-vn-cursor.hidden {
  display: none;
}

.story-vn-line-type-indicator {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 8px;
  opacity: 0.5;
  transition: background 0.3s ease, color 0.3s ease;
  font-family: var(--font-body);
  border-radius: 0;
}

.story-vn-line-type-indicator.greeting {
  background: rgba(100, 200, 255, 0.2);
  color: #64c8ff;
}

.story-vn-line-type-indicator.battle_context {
  background: rgba(255, 165, 0, 0.2);
  color: #ffa500;
}

.story-vn-line-type-indicator.rivalry {
  background: rgba(255, 69, 0, 0.2);
  color: #ff4500;
}

.story-vn-line-type-indicator.sphere {
  background: rgba(147, 112, 219, 0.2);
  color: #9370db;
}

.story-vn-line-type-indicator.rescue {
  background: rgba(0, 255, 100, 0.2);
  color: #00ff64;
}

.story-vn-line-type-indicator.objective_complete {
  background: rgba(50, 205, 50, 0.2);
  color: #32cd32;
}

.story-vn-line-type-indicator.closing {
  background: rgba(150, 150, 150, 0.2);
  color: #999;
}

.story-vn-line-type-indicator.system {
  background: rgba(255, 255, 255, 0.1);
  color: #ccc;
  font-style: italic;
}

/* --- 3g. Rescue overlay ------------------------------------------------------ */

.story-vn-rescue-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 100, 50, 0.95) 0%, rgba(0, 60, 30, 0.95) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  animation: rescueFlash 0.3s ease;
}

.rescue-alert-icon {
  font-size: 4em;
  margin-bottom: 15px;
  animation: rescueBounce 0.6s ease-in-out infinite alternate;
}

.rescue-alert-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.8em;
  font-weight: bold;
  color: #00ff64;
  text-transform: uppercase;
  letter-spacing: 4px;
  text-shadow: 0 0 30px rgba(0, 255, 100, 0.6);
  margin-bottom: 20px;
}

.story-vn-rescue-overlay .rescue-character-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.4em;
  color: #fff;
  margin-bottom: 8px;
}

.story-vn-rescue-overlay .rescue-character-title {
  font-size: 1em;
  color: rgba(255, 255, 255, 0.8);
  font-style: italic;
}

/* --- 3h. Controls (acknowledge, progress) ----------------------------------- */

.story-vn-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 15px 25px 20px;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid var(--color-line);
}

.story-vn-acknowledge-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 34px;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-accent);
  background: linear-gradient(180deg, rgba(0, 217, 255, 0.25) 0%, rgba(0, 217, 255, 0.08) 100%);
  border: 1px solid var(--color-accent);
  border-radius: 0;
  cursor: pointer;
  text-shadow: 0 0 12px rgba(0, 217, 255, 0.6);
  box-shadow: 0 0 20px rgba(0, 217, 255, 0.2), inset 0 0 20px rgba(0, 217, 255, 0.06);
  transition: box-shadow 150ms ease, background 150ms ease;
  font-size: 12px;
  position: relative;
  overflow: hidden;
}

.story-vn-acknowledge-btn:hover {
  background: linear-gradient(180deg, rgba(0, 217, 255, 0.38) 0%, rgba(0, 217, 255, 0.14) 100%);
  border-color: var(--color-accent);
  color: var(--color-accent);
  box-shadow: 0 0 32px rgba(0, 217, 255, 0.4), inset 0 0 28px rgba(0, 217, 255, 0.12);
  transform: none;
}

.story-vn-acknowledge-btn:active {
  transform: translateY(0);
}

.story-vn-acknowledge-btn .btn-icon {
  transition: transform 0.3s ease;
}

.story-vn-acknowledge-btn:hover .btn-icon {
  transform: translateX(3px);
}

.story-vn-acknowledge-btn.pulsing {
  animation: gsAckPulse 1.6s ease-in-out infinite;
}

@keyframes gsAckPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(0, 217, 255, 0.2), inset 0 0 20px rgba(0, 217, 255, 0.06); }
  50% { box-shadow: 0 0 34px rgba(0, 217, 255, 0.45), inset 0 0 26px rgba(0, 217, 255, 0.12); }
}

.story-vn-progress {
  font-size: 0.8em;
  font-family: var(--font-body);
  color: var(--color-ash);
  letter-spacing: 1px;
}

/* --- 3i. House transition overlay ------------------------------------------- */

.story-vn-house-transition {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  animation: transitionFadeIn 0.4s ease;
}

.transition-content {
  display: flex;
  align-items: center;
  gap: 30px;
}

.transition-from-house,
.transition-to-house {
  font-size: 1.3em;
  font-weight: bold;
  padding: 15px 25px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: var(--font-display);
  border-radius: 0;
}

.transition-from-house {
  background: rgba(100, 100, 100, 0.3);
  border: 2px solid rgba(100, 100, 100, 0.5);
  color: #888;
  animation: slideOutLeft 0.6s ease forwards;
}

.transition-arrow {
  font-size: 2em;
  color: #ffd700;
  animation: arrowPulse 0.6s ease-in-out infinite alternate;
}

.transition-to-house {
  background: rgba(255, 215, 0, 0.2);
  border: 2px solid rgba(255, 215, 0, 0.5);
  color: #ffd700;
  animation: slideInRight 0.6s ease forwards;
}

/* --- 3j. House colour palette (--house-color CSS var) ----------------------- */

.story-vn-container[data-house-id="aori"]            { --house-color: #FF4500; }
.story-vn-container[data-house-id="emperors-hand"]   { --house-color: #FFD700; }
.story-vn-container[data-house-id="revolution"]      { --house-color: #FF6B35; }
.story-vn-container[data-house-id="stellen"]         { --house-color: #00CED1; }
.story-vn-container[data-house-id="mori"]            { --house-color: #8B008B; }

/* =============================================================================
   4. STORY SAGA BUTTON
   ============================================================================= */

.story-saga-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-gold);
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.22) 0%, rgba(255, 215, 0, 0.07) 100%);
  border: 1px solid rgba(255, 215, 0, 0.75);
  border-radius: 0;
  cursor: pointer;
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.55);
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.18), inset 0 0 18px rgba(255, 215, 0, 0.05);
  transition: box-shadow 150ms ease, background 150ms ease;
  font-size: 10px;
  overflow: hidden;
}

.story-saga-btn:hover {
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.32) 0%, rgba(255, 215, 0, 0.12) 100%);
  border-color: var(--color-gold);
  color: var(--color-gold);
  box-shadow: 0 0 28px rgba(255, 215, 0, 0.35), inset 0 0 24px rgba(255, 215, 0, 0.1);
  transform: none;
}

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

.saga-btn-icon {
  font-size: 1.1em;
  filter: none;
}

.saga-btn-text {
  position: relative;
  z-index: 1;
}

.saga-btn-glow {
  display: none;
}

.story-saga-btn:hover .saga-btn-glow {
  animation: none;
  opacity: 0;
}

/* =============================================================================
   5. STORY SUMMARY MODAL — #story-summary-modal
   ============================================================================= */

/* --- 5a. Container, header, close ------------------------------------------- */

.story-summary-modal {
  z-index: 10001;
}

.story-summary-modal.active {
  display: flex;
}

.story-summary-container {
  position: relative;
  width: 95%;
  max-width: 1100px;
  max-height: 90vh;
  
  
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
  --bk: rgba(255, 215, 0, 0.6);
  background: rgba(13, 2, 33, 0.97);
  border: 1px solid rgba(255, 215, 0, 0.35);
  border-radius: 0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.75), 0 0 60px rgba(255, 215, 0, 0.06);
}

.story-summary-container::before {
  content: '';
  position: absolute;
  inset: 6px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.55;
  background:
    linear-gradient(var(--bk), var(--bk)) top left     / 14px 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) top left     / 2px 14px no-repeat,
    linear-gradient(var(--bk), var(--bk)) top right    / 14px 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) top right    / 2px 14px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom left  / 14px 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom left  / 2px 14px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom right / 14px 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom right / 2px 14px no-repeat;
  opacity: 0.5;
  z-index: 5;
}

.story-summary-modal.active .story-summary-container {
  transform: scale(1);
  opacity: 1;
}

.story-summary-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 30px;
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.07) 0%, transparent 100%);
  border-bottom: 1px solid rgba(255, 215, 0, 0.25);
}

.header-decoration {
  flex: 1;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 215, 0, 0.5) 100%);
  height: 1px;
}

.header-decoration.right {
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.5) 0%, transparent 100%);
}

.header-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 20px;
  
  color: #ffd700;
  text-transform: uppercase;
  
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 1.1em;
  font-weight: 700;
  letter-spacing: 5px;
  text-shadow: 0 0 18px rgba(255, 215, 0, 0.45);
}

.header-icon {
  font-size: 1.3em;
  animation: headerIconPulse 3s ease-in-out infinite;
}

.story-summary-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--color-ash);
  font-size: 1.2em;
  font-family: var(--font-display);
  cursor: pointer;
  transition: color 150ms ease, text-shadow 150ms ease;
}

.story-summary-close:hover {
  background: transparent;
  border: none;
  color: var(--color-gold);
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
  transform: none;
}

/* --- 5b. House tabs ---------------------------------------------------------- */

.story-house-tabs {
  display: flex;
  justify-content: center;
  gap: 5px;
  padding: 15px 20px;
  
  flex-wrap: wrap;
  border-bottom: 1px solid var(--color-line);
  background: rgba(6, 1, 18, 0.4);
}

.story-house-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 18px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.7em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: 0;
}

.story-house-tab:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.05);
}

.story-house-tab.active {
  color: var(--tab-color);
  background: rgba(255, 255, 255, 0.1);
}

.tab-icon-img-wrapper {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.tab-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Default: grayscale white icons */
  filter: brightness(0) invert(1) opacity(0.5);
  transition: all 0.3s ease;
}

.story-house-tab:hover .tab-icon-img-wrapper {
  transform: scale(1.15);
}

.story-house-tab:hover .tab-icon-img {
  filter: brightness(0) invert(1) opacity(0.8);
}

/* Per-house tab colour (--tab-color) + active/hover icon filter */
.story-house-tab[data-house="aori"] {
  --tab-color: #e60000;
}

.story-house-tab[data-house="aori"].active .tab-icon-img {
  filter: brightness(0) saturate(100%) invert(12%) sepia(100%) saturate(7466%) hue-rotate(0deg) brightness(98%) contrast(117%) drop-shadow(0 0 8px rgba(230, 0, 0, 0.6));
}

.story-house-tab[data-house="aori"]:hover .tab-icon-img {
  filter: brightness(0) saturate(100%) invert(12%) sepia(100%) saturate(7466%) hue-rotate(0deg) brightness(98%) contrast(117%) opacity(0.8);
}

.story-house-tab[data-house="emperors-hand"] {
  --tab-color: #ffee00;
}

.story-house-tab[data-house="emperors-hand"].active .tab-icon-img {
  filter: brightness(0) saturate(100%) invert(93%) sepia(79%) saturate(2055%) hue-rotate(359deg) brightness(104%) contrast(106%) drop-shadow(0 0 8px rgba(255, 238, 0, 0.6));
}

.story-house-tab[data-house="emperors-hand"]:hover .tab-icon-img {
  filter: brightness(0) saturate(100%) invert(93%) sepia(79%) saturate(2055%) hue-rotate(359deg) brightness(104%) contrast(106%) opacity(0.8);
}

.story-house-tab[data-house="revolution"] {
  --tab-color: #a200ff;
}

.story-house-tab[data-house="revolution"].active .tab-icon-img {
  filter: brightness(0) saturate(100%) invert(20%) sepia(99%) saturate(7497%) hue-rotate(274deg) brightness(103%) contrast(107%) drop-shadow(0 0 8px rgba(162, 0, 255, 0.6));
}

.story-house-tab[data-house="revolution"]:hover .tab-icon-img {
  filter: brightness(0) saturate(100%) invert(20%) sepia(99%) saturate(7497%) hue-rotate(274deg) brightness(103%) contrast(107%) opacity(0.8);
}

.story-house-tab[data-house="stellen"] {
  --tab-color: #00CED1;
}

.story-house-tab[data-house="stellen"].active .tab-icon-img {
  filter: brightness(0) saturate(100%) invert(64%) sepia(99%) saturate(1844%) hue-rotate(152deg) brightness(95%) contrast(101%) drop-shadow(0 0 8px rgba(0, 206, 209, 0.6));
}

.story-house-tab[data-house="stellen"]:hover .tab-icon-img {
  filter: brightness(0) saturate(100%) invert(64%) sepia(99%) saturate(1844%) hue-rotate(152deg) brightness(95%) contrast(101%) opacity(0.8);
}

.story-house-tab[data-house="mori"] {
  --tab-color: #ee7009;
}

.story-house-tab[data-house="mori"].active .tab-icon-img {
  filter: brightness(0) saturate(100%) invert(44%) sepia(99%) saturate(1844%) hue-rotate(13deg) brightness(98%) contrast(101%) drop-shadow(0 0 8px rgba(238, 112, 9, 0.6));
}

.story-house-tab[data-house="mori"]:hover .tab-icon-img {
  filter: brightness(0) saturate(100%) invert(44%) sepia(99%) saturate(1844%) hue-rotate(13deg) brightness(98%) contrast(101%) opacity(0.8);
}

.tab-name {
  white-space: nowrap;
}

.tab-underline {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  background: currentColor;
  transform: translateX(-50%);
  transition: width 0.3s ease;
  border-radius: 0;
  height: 2px;
}

.story-house-tab.active .tab-underline {
  width: 80%;
  background: var(--tab-color);
  box-shadow: 0 0 10px var(--tab-color);
}

/* --- 5c. Body, scrollbar, house RGB tokens ---------------------------------- */

.story-summary-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  /* Custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 215, 0, 0.3) rgba(0, 0, 0, 0.2);
}

.story-summary-body::-webkit-scrollbar {
  width: 8px;
}

.story-summary-body::-webkit-scrollbar-track {
  background: rgba(6, 1, 18, 0.5);
  border-radius: 0;
}

.story-summary-body::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.3);
  border-radius: 0;
}

.story-summary-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 215, 0, 0.5);
}

/* House RGB tokens — exposed to children via --house-rgb */
.story-summary-body[data-house="aori"]            { --house-rgb: 230, 0, 0; }
.story-summary-body[data-house="emperors-hand"]   { --house-rgb: 255, 238, 0; }
.story-summary-body[data-house="revolution"]      { --house-rgb: 162, 0, 255; }
.story-summary-body[data-house="stellen"]         { --house-rgb: 0, 206, 209; }
.story-summary-body[data-house="mori"]            { --house-rgb: 238, 112, 9; }

/* --- 5d. House banner -------------------------------------------------------- */

.story-house-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(var(--house-rgb, 100, 100, 100), 0.15) 0%, rgba(var(--house-rgb, 100, 100, 100), 0.05) 100%);
  border: 1px solid rgba(var(--house-rgb, 100, 100, 100), 0.3);
  border-radius: 0;
}

.banner-logo {
  width: 80px;
  height: 80px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 10px rgba(var(--house-rgb, 100, 100, 100), 0.5));
}

.banner-info {
  flex: 1;
}

.banner-house-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.6em;
  font-weight: bold;
  color: rgb(var(--house-rgb, 255, 255, 255));
  text-shadow: 0 0 20px rgba(var(--house-rgb, 100, 100, 100), 0.5);
  margin: 0 0 8px 0;
}

.banner-house-theme {
  font-size: 0.95em;
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
  margin: 0;
  line-height: 1.4;
}

/* --- 5e. Section grid (shared shell) ---------------------------------------- */

.story-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.story-section {
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px);
  animation: sectionFadeIn 0.4s ease forwards;
  background: rgba(6, 1, 18, 0.45);
  border: 1px solid var(--color-line);
  border-radius: 0;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--color-line);
}

.section-icon {
  font-size: 1.2em;
}

.section-header h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--color-bone);
}

.section-content {
  padding: 15px;
  max-height: 250px;
  overflow-y: auto;
}

/* --- 5f. Characters list ----------------------------------------------------- */

.story-character-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.03);
  
  transition: all 0.3s ease;
  border-radius: 0;
  border: 1px solid var(--color-line);
}

.story-objective-card,
.story-territory-card,
.story-rivalry-card {
  border-radius: 0;
  border-color: var(--color-line);
}

.story-character-card:last-child {
  margin-bottom: 0;
}

.story-character-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

.story-character-card.inactive {
  opacity: 0.5;
}

.story-character-card.rescued {
  border-color: rgba(0, 255, 100, 0.3);
  background: rgba(0, 255, 100, 0.05);
}

.character-portrait-small {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.character-portrait-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.character-info-small {
  flex: 1;
  min-width: 0;
}

.character-name-small {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.9em;
  font-weight: bold;
  color: #fff;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.character-title-small {
  font-size: 0.75em;
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.character-status {
  padding: 4px 10px;
  font-size: 0.65em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 12px;
  white-space: nowrap;
}

.character-status.active {
  background: rgba(100, 200, 100, 0.2);
  color: #64c864;
  border: 1px solid rgba(100, 200, 100, 0.3);
}

.character-status.imprisoned {
  background: rgba(255, 100, 100, 0.2);
  color: #ff6464;
  border: 1px solid rgba(255, 100, 100, 0.3);
}

.character-status.rescued {
  background: rgba(0, 255, 100, 0.2);
  color: #00ff64;
  border: 1px solid rgba(0, 255, 100, 0.3);
}

/* --- 5g. Objectives list ----------------------------------------------------- */

.story-objective-card {
  padding: 12px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s ease;
}

.story-objective-card:last-child {
  margin-bottom: 0;
}

.story-objective-card.complete {
  border-color: rgba(50, 205, 50, 0.4);
  background: rgba(50, 205, 50, 0.05);
  box-shadow: 0 0 20px rgba(50, 205, 50, 0.2);
  animation: pulse-glow 3s ease-in-out infinite;
}

.objective-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.objective-status-icon {
  font-size: 1.2em;
  filter: drop-shadow(0 0 4px currentColor);
}

.objective-progress-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
}

.objective-progress-text {
  font-size: 0.7em;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
  margin-bottom: 4px;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.5px;
}

.objective-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(var(--house-rgb, 100, 100, 200), 0.8), rgba(var(--house-rgb, 100, 100, 200), 1));
  border-radius: 3px;
  transition: width 0.5s ease;
  box-shadow: 0 0 10px rgba(var(--house-rgb, 100, 100, 200), 0.6);
}

.story-objective-card.complete .objective-progress-fill {
  background: linear-gradient(90deg, #32cd32, #50fa7b);
  box-shadow: 0 0 15px rgba(50, 205, 50, 0.8);
}

.objective-description {
  font-size: 0.8em;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
  margin-bottom: 8px;
}

.objective-requirements {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.requirement-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 6px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.requirement-group:first-child {
  border-top: none;
  padding-top: 0;
}

.requirement-group-label {
  font-family: 'Orbitron', sans-serif;
  font-weight: bold;
  font-size: 0.75em;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-right: 6px;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
  white-space: nowrap;
}

.milestone-group {
  justify-content: center;
  padding: 12px;
  background: rgba(255, 215, 0, 0.05);
  border: 1px dashed rgba(255, 215, 0, 0.3);
  border-radius: 6px;
}

.milestone-group .requirement-group-label {
  color: rgba(255, 215, 0, 0.9);
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
  font-size: 0.85em;
}

/* Requirement tag — base, then per-type colour, then states, then hovers */

.requirement-tag {
  display: inline-block;
  padding: 4px 10px;
  font-size: 0.65em;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Courier New', monospace;
  transition: all 0.3s ease;
  cursor: help;
  white-space: nowrap;
  line-height: 1.4;
  animation: tag-appear 0.3s ease forwards;
}

.requirement-tag:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.requirement-tag.district  { border-color: rgba(100, 150, 255, 0.2); }
.requirement-tag.outpost   { border-color: rgba(255, 200, 100, 0.2); }
.requirement-tag.sphere    { border-color: rgba(100, 255, 255, 0.2); }
.requirement-tag.character { border-color: rgba(255, 100, 255, 0.2); }

.requirement-tag.controlled {
  background: rgba(50, 205, 50, 0.15);
  border-color: rgba(50, 205, 50, 0.4);
  color: #50fa7b;
  box-shadow: 0 0 8px rgba(50, 205, 50, 0.3);
}

.requirement-tag.controlled:hover {
  background: rgba(50, 205, 50, 0.2);
  box-shadow: 0 0 12px rgba(50, 205, 50, 0.5);
  transform: translateY(-2px);
}

.requirement-tag.imprisoned {
  background: rgba(255, 50, 50, 0.15);
  border-color: rgba(255, 50, 50, 0.4);
  color: #ff6b6b;
  box-shadow: 0 0 8px rgba(255, 50, 50, 0.3);
}

.requirement-tag.imprisoned:hover {
  background: rgba(255, 50, 50, 0.2);
  box-shadow: 0 0 12px rgba(255, 50, 50, 0.5);
  transform: translateY(-2px);
}

.requirement-tag.district:hover {
  border-color: rgba(100, 150, 255, 0.4);
  box-shadow: 0 0 8px rgba(100, 150, 255, 0.3);
}

.requirement-tag.outpost:hover {
  border-color: rgba(255, 200, 100, 0.4);
  box-shadow: 0 0 8px rgba(255, 200, 100, 0.3);
}

.requirement-tag.sphere:hover {
  border-color: rgba(100, 255, 255, 0.4);
  box-shadow: 0 0 8px rgba(100, 255, 255, 0.3);
}

.requirement-tag.character:hover {
  border-color: rgba(255, 100, 255, 0.4);
  box-shadow: 0 0 8px rgba(255, 100, 255, 0.3);
}

.requirement-tag.district.controlled:hover,
.requirement-tag.outpost.controlled:hover,
.requirement-tag.sphere.controlled:hover,
.requirement-tag.character.controlled:hover {
  border-color: rgba(50, 205, 50, 0.6);
  box-shadow: 0 0 15px rgba(50, 205, 50, 0.6);
}

/* Stagger animation delays for requirement-tag siblings */
.requirement-tag:nth-child(1) { animation-delay: 0s; }
.requirement-tag:nth-child(2) { animation-delay: 0.05s; }
.requirement-tag:nth-child(3) { animation-delay: 0.1s; }
.requirement-tag:nth-child(4) { animation-delay: 0.15s; }
.requirement-tag:nth-child(5) { animation-delay: 0.2s; }
.requirement-tag:nth-child(6) { animation-delay: 0.25s; }
.requirement-tag:nth-child(7) { animation-delay: 0.3s; }
.requirement-tag:nth-child(8) { animation-delay: 0.35s; }

.objective-reward {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(255, 215, 0, 0.08);
  border-left: 3px solid rgba(255, 215, 0, 0.6);
  border-radius: 4px;
  font-size: 0.75em;
  font-family: 'Courier New', monospace;
  color: rgba(255, 235, 150, 0.9);
  letter-spacing: 0.5px;
  box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.1);
}

.objective-reward::before {
  content: '▸ ';
  color: rgba(255, 215, 0, 0.8);
  font-weight: bold;
  margin-right: 4px;
}

/* --- 5h. Territory list ------------------------------------------------------ */

.story-territory-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 10px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  animation: slideInRight 0.4s ease forwards;
  opacity: 0;
}

.story-territory-card:last-child {
  margin-bottom: 0;
}

.story-territory-card:hover {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateX(5px);
}

.story-territory-card.complete {
  border-color: rgba(0, 255, 100, 0.5);
  background: rgba(0, 255, 100, 0.05);
}

.story-territory-card.majority {
  border-color: rgba(255, 200, 0, 0.5);
  background: rgba(255, 200, 0, 0.05);
}

.story-territory-card.partial {
  border-color: rgba(255, 100, 100, 0.5);
  background: rgba(255, 100, 100, 0.05);
}

.territory-icon-container {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-territory-card.complete .territory-icon-container {
  border-color: rgba(0, 255, 100, 0.4);
  background: rgba(0, 255, 100, 0.1);
}

.story-territory-card.majority .territory-icon-container {
  border-color: rgba(255, 200, 0, 0.4);
  background: rgba(255, 200, 0, 0.1);
}

.story-territory-card.partial .territory-icon-container {
  border-color: rgba(255, 100, 100, 0.4);
  background: rgba(255, 100, 100, 0.1);
}

.territory-icon-large {
  font-size: 1.5em;
  line-height: 1;
}

.territory-info-container {
  flex: 1;
  min-width: 0;
}

.territory-name-large {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.9em;
  font-weight: bold;
  color: #fff;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.territory-sphere-small {
  font-size: 0.75em;
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
  margin-bottom: 6px;
}

.territory-progress-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.territory-progress-bar-inline {
  flex: 1;
  height: 6px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  overflow: hidden;
}

.territory-progress-fill-inline {
  height: 100%;
  transition: width 0.5s ease;
  border-radius: 3px;
}

.territory-progress-fill-inline.complete {
  background: linear-gradient(90deg, #00ff64, #00aa44);
}

.territory-progress-fill-inline.majority {
  background: linear-gradient(90deg, #ffc800, #ff8800);
}

.territory-progress-fill-inline.partial {
  background: linear-gradient(90deg, #ff6464, #cc3333);
}

.territory-progress-text-inline {
  font-size: 0.7em;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  font-family: 'Courier New', monospace;
}

.territory-status-badge {
  padding: 4px 10px;
  font-size: 0.65em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 12px;
  white-space: nowrap;
}

.territory-status-badge.complete {
  background: rgba(0, 255, 100, 0.2);
  color: #00ff64;
  border: 1px solid rgba(0, 255, 100, 0.3);
}

.territory-status-badge.majority {
  background: rgba(255, 200, 0, 0.2);
  color: #ffc800;
  border: 1px solid rgba(255, 200, 0, 0.3);
}

.territory-status-badge.partial {
  background: rgba(255, 100, 100, 0.2);
  color: #ff6464;
  border: 1px solid rgba(255, 100, 100, 0.3);
}

.no-territory-message {
  text-align: center;
  padding: 30px;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}

/* ----- 5h. LEGACY territory layout (parallel to the *-large/*-inline classes
        above). Verify which markup is in use before deleting either set. ----- */

.territory-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.territory-icon {
  font-size: 28px;
  min-width: 40px;
  text-align: center;
}

.territory-info {
  flex: 1;
}

.territory-name {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 2px;
}

.territory-sphere {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.territory-status {
  font-size: 11px;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 4px;
  text-align: center;
  min-width: 90px;
}

.territory-status.complete {
  background: rgba(0, 255, 100, 0.2);
  color: #00ff64;
  border: 1px solid rgba(0, 255, 100, 0.4);
}

.territory-status.majority {
  background: rgba(255, 200, 0, 0.2);
  color: #ffc800;
  border: 1px solid rgba(255, 200, 0, 0.4);
}

.territory-status.partial {
  background: rgba(255, 100, 100, 0.2);
  color: #ff6464;
  border: 1px solid rgba(255, 100, 100, 0.4);
}

.territory-progress {
  margin-top: 8px;
}

.territory-progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 4px;
}

.territory-progress-fill {
  height: 100%;
  transition: width 0.5s ease;
  border-radius: 4px;
}

.territory-progress-fill.complete {
  background: linear-gradient(90deg, #00ff64, #00aa44);
}

.territory-progress-fill.majority {
  background: linear-gradient(90deg, #ffc800, #ff8800);
}

.territory-progress-fill.partial {
  background: linear-gradient(90deg, #ff6464, #cc3333);
}

.territory-progress-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  text-align: right;
}

/* --- 5i. Rivalries list ------------------------------------------------------ */

.story-rivalry-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.story-rivalry-card:last-child {
  margin-bottom: 0;
}

.story-rivalry-card.nemesis {
  border-color: rgba(255, 0, 0, 0.4);
  background: rgba(255, 0, 0, 0.05);
}

.story-rivalry-card.hostile {
  border-color: rgba(255, 100, 0, 0.3);
  background: rgba(255, 100, 0, 0.03);
}

.rivalry-attitude-icon {
  font-size: 1.3em;
}

.rivalry-info {
  flex: 1;
}

.rivalry-house-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.85em;
  font-weight: bold;
  color: #fff;
}

.rivalry-attitude {
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.rivalry-attitude.nemesis    { color: #ff4444; }
.rivalry-attitude.hostile    { color: #ff8844; }
.rivalry-attitude.rival      { color: #ffaa44; }
.rivalry-attitude.neutral    { color: #888;    }
.rivalry-attitude.uneasy     { color: #aa88ff; }
.rivalry-attitude.respectful { color: #44aaff; }

.rivalry-evolved {
  font-size: 0.7em;
  color: rgba(255, 215, 0, 0.9);
  margin-top: 4px;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
  animation: pulse 2s ease-in-out infinite;
}

/* --- 5j. Footer -------------------------------------------------------------- */

.story-summary-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 25px;
  background: rgba(0, 0, 0, 0.25);
  border-top: 1px solid var(--color-line);
}

.footer-stats {
  display: flex;
  gap: 30px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stat-label {
  font-size: 0.8em;
  text-transform: uppercase;
  font-family: var(--font-body);
  color: var(--color-ash);
  letter-spacing: 1.5px;
}

.stat-value {
  font-size: 1.1em;
  
  transition: all 0.3s ease;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-gold);
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.35);
}

.story-summary-close-btn {
  padding: 12px 28px;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-ash);
  background: rgba(13, 2, 33, 0.7);
  border: 1px solid var(--color-line);
  border-radius: 0;
  cursor: pointer;
  text-shadow: none;
  box-shadow: none;
  transition: border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, background 150ms ease;
  font-size: 11px;
}

.story-summary-close-btn:hover {
  color: var(--color-gold);
  background: rgba(13, 2, 33, 0.7);
  border-color: rgba(255, 215, 0, 0.6);
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.15);
  transform: none;
}

/* --- 5k. Section / card stagger animations ---------------------------------- */

.characters-section  { animation-delay: 0.1s; }
.objectives-section  { animation-delay: 0.2s; }
.territory-section   { animation-delay: 0.3s; }
.rivalries-section   { animation-delay: 0.4s; }

.story-character-card,
.story-objective-card,
.story-territory-card,
.story-rivalry-card {
  opacity: 0;
  animation: cardFadeIn 0.3s ease forwards;
}

.section-content > *:nth-child(1) { animation-delay: 0.1s;  }
.section-content > *:nth-child(2) { animation-delay: 0.15s; }
.section-content > *:nth-child(3) { animation-delay: 0.2s;  }
.section-content > *:nth-child(4) { animation-delay: 0.25s; }
.section-content > *:nth-child(5) { animation-delay: 0.3s;  }

/* =============================================================================
   6. LEADERBOARD OVERLAY — #leaderboard-overlay
   ============================================================================= */

/* --- 6a. Header buttons (close, refresh) ------------------------------------ */

.leaderboard-header .panel-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
}

.leaderboard-refresh-btn {
  position: absolute;
  top: 12px;
  right: 52px;            /* sits to the left of the close button */
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-family: 'Orbitron', sans-serif;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.leaderboard-refresh-btn:hover {
  background: rgba(0, 255, 255, 0.15);
  color: #01f5f2;
  border-color: rgba(0, 255, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 2px 10px rgba(0, 255, 255, 0.3);
}

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

.leaderboard-refresh-btn.refreshing .refresh-icon {
  animation: refreshSpin 0.6s ease-in-out;
}

.refresh-icon {
  display: block;
  transition: transform 0.3s ease;
}

/* --- 6b. Overlay, backdrop, panel ------------------------------------------- */

.leaderboard-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.leaderboard-overlay.active {
  display: flex;
  opacity: 1;
}

.leaderboard-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.leaderboard-panel {
  position: relative;
  width: 90%;
  max-width: 900px;
  max-height: 90vh;
  background: linear-gradient(135deg, rgba(20, 20, 40, 0.98) 0%, rgba(30, 30, 60, 0.98) 100%);
  border-radius: 0px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6),
              0 0 40px rgba(100, 100, 200, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
  transform: scale(0.95);
  transition: transform 0.4s ease;
  z-index: 1;
}

.leaderboard-overlay.active .leaderboard-panel {
  transform: scale(1);
}

/* --- 6c. Header & subtitle --------------------------------------------------- */

.leaderboard-header {
  position: relative;
  padding: 20px 30px;
  background: linear-gradient(90deg, rgba(0, 255, 255, 0.1) 0%, rgba(255, 0, 255, 0.1) 100%);
  border-bottom: 2px solid rgba(0, 255, 255, 0.3);
  text-align: center;
}

.leaderboard-header h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.8em;
  font-weight: bold;
  color: #01f5f2;
  margin: 0;
  /* text-shadow: 0 0 10px rgba(0, 255, 255, 0.8); */
  text-transform: uppercase;
  letter-spacing: 3px;
}

.leaderboard-subtitle {
  font-size: 0.9em;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 5px;
  font-style: italic;
}

/* --- 6d. Entries list & scrollbar ------------------------------------------- */

.leaderboard-entries {
  padding: 20px;
  max-height: calc(90vh - 140px);
  overflow-y: auto;
  /* Custom scrollbar — matches story modal */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 255, 255, 0.3) rgba(0, 0, 0, 0.2);
}

.leaderboard-entries::-webkit-scrollbar {
  width: 8px;
}

.leaderboard-entries::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.leaderboard-entries::-webkit-scrollbar-thumb {
  background: rgba(0, 255, 255, 0.3);
  border-radius: 4px;
}

.leaderboard-entries::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 255, 255, 0.5);
}

/* --- 6e. Entry rows & rank badges ------------------------------------------- */

.leaderboard-entry {
  display: grid;
  grid-template-columns: 60px 1fr 40% 80px 100px;
  gap: 15px;
  align-items: center;
  padding: 15px;
  margin-bottom: 15px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  transition: all 0.3s ease;
  animation: slideInLeft 0.4s ease forwards;
  opacity: 0;
}

.leaderboard-entry:nth-child(1) { animation-delay: 0.1s; }
.leaderboard-entry:nth-child(2) { animation-delay: 0.2s; }
.leaderboard-entry:nth-child(3) { animation-delay: 0.3s; }
.leaderboard-entry:nth-child(4) { animation-delay: 0.4s; }
.leaderboard-entry:nth-child(5) { animation-delay: 0.5s; }

.leaderboard-entry:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(0, 255, 255, 0.4);
  transform: translateX(5px);
}

.rank-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.rank-number {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.9em;
  font-weight: bold;
  color: #fff;
}

.rank-first .rank-badge {
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  border-color: #ffd700;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}

.rank-first .rank-number { color: #000; }

.rank-second .rank-badge {
  background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
  border-color: #c0c0c0;
}

.rank-second .rank-number { color: #000; }

.rank-third .rank-badge {
  background: linear-gradient(135deg, #cd7f32, #e89652);
  border-color: #cd7f32;
}

.rank-third .rank-number { color: #000; }

/* --- 6f. House info, XP bar, milestones ------------------------------------- */

.house-info-leaderboard {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.house-name-leaderboard {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.1em;
  font-weight: bold;
  color: #fff;
}

.house-stats-leaderboard {
  display: flex;
  gap: 10px;
  align-items: center;
}

.xp-value {
  font-family: 'orbitron';
  font-size: 0.95em;
  color: #01f5f2;
}

.frozen-badge {
  font-size: 0.7em;
  padding: 2px 8px;
  background: rgba(100, 150, 255, 0.2);
  border: 1px solid rgba(100, 150, 255, 0.4);
  border-radius: 10px;
  color: #88ccff;
}

.xp-bar-container {
  position: relative;
  height: 30px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.xp-bar {
  height: 100%;
  border-radius: 15px;
  transition: width 0.8s ease;
  position: relative;
  overflow: hidden;
}

.xp-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

.xp-percentage {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.8em;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}

.milestone-indicator {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.9em;
  color: #ffd700;
  text-align: center;
}

/* --- 6g. View-details button ------------------------------------------------- */

.view-details-btn {
  padding: 8px 16px;
  background: rgba(0, 255, 255, 0.1);
  border: 1px solid rgba(0, 255, 255, 0.3);
  color: #01f5f2;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.8em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.view-details-btn:hover {
  background: rgba(0, 255, 255, 0.2);
  border-color: rgba(0, 255, 255, 0.6);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.4);
}

/* --- 6h. Frozen state -------------------------------------------------------- */

.leaderboard-entry.frozen {
  opacity: 0.7;
  border-color: rgba(100, 150, 255, 0.3);
}

.leaderboard-entry.frozen .xp-bar {
  background: linear-gradient(90deg, #6496ff88, #88ccffff) !important;
}

/* =============================================================================
   7. XP DETAILS MODAL — #xp-details-modal-container
   ============================================================================= */

/* --- 7a. Container & shell -------------------------------------------------- */

#xp-details-modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;            /* sits above leaderboard */
  animation: fadeIn 0.3s ease;
}

.xp-details-modal {
  width: 90%;
  max-width: 600px;
  background: linear-gradient(135deg, rgba(20, 20, 40, 0.98), rgba(30, 30, 50, 0.98));
  border: 2px solid rgba(0, 255, 255, 0.4);
  border-radius: 10px;
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
  animation: scaleIn 0.3s ease;
  overflow: hidden;
}

/* --- 7b. Header & body ------------------------------------------------------- */

.xp-details-header {
  position: relative;
  padding: 20px;
  padding-right: 50px;       /* space reserved for close button */
  background: rgba(0, 255, 255, 0.1);
  border-bottom: 2px solid rgba(0, 255, 255, 0.3);
}

.xp-details-header h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.3em;
  font-weight: bold;
  color: #01f5f2;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.xp-details-body {
  padding: 20px;
  max-height: 70vh;
  overflow-y: auto;
  /* Custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 255, 255, 0.3) rgba(0, 0, 0, 0.2);
}

.xp-details-body::-webkit-scrollbar {
  width: 8px;
}

.xp-details-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.xp-details-body::-webkit-scrollbar-thumb {
  background: rgba(0, 255, 255, 0.3);
  border-radius: 4px;
}

.xp-details-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 255, 255, 0.5);
}

/* --- 7c. Frozen notice ------------------------------------------------------- */

.frozen-notice {
  padding: 15px;
  background: rgba(100, 150, 255, 0.15);
  border: 1px solid rgba(100, 150, 255, 0.4);
  border-radius: 8px;
  color: #88ccff;
  margin-bottom: 20px;
  text-align: center;
  font-family: 'Orbitron', sans-serif;
}

/* --- 7d. Breakdown & milestones sections ------------------------------------ */

.xp-breakdown-section,
.milestones-section {
  margin-bottom: 25px;
}

.xp-breakdown-section h4,
.milestones-section h4 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.1em;
  font-weight: bold;
  color: #01f5f2;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.breakdown-item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.2s ease;
}

.breakdown-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.breakdown-item.highlight {
  background: rgba(255, 215, 0, 0.1);
  border-color: rgba(255, 215, 0, 0.3);
  color: #ffd700;
}

.breakdown-total {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  margin-top: 10px;
  background: rgba(0, 255, 255, 0.1);
  border: 2px solid rgba(0, 255, 255, 0.3);
  border-radius: 8px;
  font-family: 'Orbitron', sans-serif;
  font-weight: bold;
  font-size: 1.1em;
  color: #01f5f2;
}

/* --- 7e. Milestone badges grid ---------------------------------------------- */

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

.milestone-badge {
  padding: 12px;
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 8px;
  text-align: center;
  transition: all 0.3s ease;
}

.milestone-badge:hover {
  background: rgba(255, 215, 0, 0.2);
  transform: translateY(-2px);
}

.milestone-icon {
  font-size: 1.8em;
  display: block;
  margin-bottom: 5px;
}

.milestone-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.75em;
  color: rgba(255, 255, 255, 0.8);
  display: block;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* =============================================================================
   8. LEADERBOARD ENTRY (MINI) — used inside the XP Details modal
   ============================================================================= */

.leaderboard-entry-mini {
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 8px 10px !important;
  margin-bottom: 8px;
}

.leaderboard-entry-mini:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  transform: translateX(3px);
}

.leaderboard-entry-mini.rank-first {
  border-left: 3px solid #ffd700;
  background: rgba(255, 215, 0, 0.05) !important;
}

.leaderboard-entry-mini.rank-second {
  border-left: 3px solid #c0c0c0;
  background: rgba(192, 192, 192, 0.05) !important;
}

.leaderboard-entry-mini.rank-third {
  border-left: 3px solid #cd7f32;
  background: rgba(205, 127, 50, 0.05) !important;
}

.rank-badge-mini {
  display: inline-block;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.75em;
  font-weight: bold;
  margin-right: 8px;
}

.xp-display-mini {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.xp-value-mini {
  font-family: 'Courier New', monospace;
  font-size: 0.85em;
  color: #01f5f2;
  font-weight: bold;
}

.milestone-mini {
  font-size: 0.7em;
  color: #ffd700;
}

/* =============================================================================
        CARD REVEAL
   ============================================================================= */

.card-reveal-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.card-reveal-modal.active {
  opacity: 1;
  pointer-events: all;
}

.card-reveal-modal.exiting {
  opacity: 0;
  pointer-events: none;
}

.card-reveal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.card-reveal-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  transform: scale(0.8);
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card-reveal-modal.active .card-reveal-container {
  transform: scale(1);
  opacity: 1;
}

.card-reveal-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 700px;
  border-radius: 20px;
  background: radial-gradient(
        ellipse at center,
        var(--glow-color, #00ff00) 0%,
        transparent 70%
    );
  filter: blur(40px);
  opacity: 0;
  animation: cardGlowPulse 2s ease-in-out infinite;
}

.card-reveal-image-container {
  position: relative;
  width: 430px;
  height: 600px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(0, 255, 0, 0.3),
        0 0 60px rgba(0, 255, 0, 0.2),
        0 20px 60px rgba(0, 0, 0, 0.8);
  animation: cardFloat 3s ease-in-out infinite;
}

.card-reveal-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-reveal-info {
  position: relative;
  text-align: center;
  color: white;
  max-width: 500px;
}

.card-reveal-unlock-badge {
  font-size: 1.5rem;
  font-weight: bold;
  color: #00ff00;
  text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
  margin-bottom: 1rem;
  animation: badgePulse 2s ease-in-out infinite;
}

.card-reveal-character-name {
  font-size: 2.5rem;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(255, 255, 255, 0.3);
  margin-bottom: 0.5rem;
  letter-spacing: 1px;
}

.card-reveal-character-title {
  font-size: 1.2rem;
  color: #cccccc;
  font-style: italic;
  margin-bottom: 1rem;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
}

.card-reveal-message {
  font-size: 1.1rem;
  color: #aaaaaa;
  margin-bottom: 20px;
  line-height: 1.6;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
}

.card-reveal-rarity {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  border-radius: 20px;
  font-weight: bold;
  font-size: 0.9rem;
  letter-spacing: 2px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.card-reveal-rarity.common {
  background: #666666;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(102, 102, 102, 0.5);
}

.card-reveal-rarity.uncommon {
  background: linear-gradient(135deg, #00ff00, #00cc00);
  color: #000000;
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
}

.card-reveal-rarity.rare {
  background: linear-gradient(135deg, #0080ff, #0060cc);
  color: #ffffff;
  box-shadow: 0 0 20px rgba(0, 128, 255, 0.5);
}

.card-reveal-rarity.epic {
  background: linear-gradient(135deg, #a020f0, #8010d0);
  color: #ffffff;
  box-shadow: 0 0 20px rgba(160, 32, 240, 0.5);
}

.card-reveal-rarity.legendary {
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  color: #000000;
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
  animation: legendaryGlow 2s ease-in-out infinite;
}

.card-reveal-glow[style*="--glow-color: #888888"] {
  background: radial-gradient(
        ellipse at center,
        #888888 0%,
        transparent 70%
    );
}

.card-reveal-glow[style*="--glow-color: #00ff00"] {
  background: radial-gradient(
        ellipse at center,
        #00ff00 0%,
        transparent 70%
    );
}

.card-reveal-glow[style*="--glow-color: #0080ff"] {
  background: radial-gradient(
        ellipse at center,
        #0080ff 0%,
        transparent 70%
    );
}

.card-reveal-glow[style*="--glow-color: #a020f0"] {
  background: radial-gradient(
        ellipse at center,
        #a020f0 0%,
        transparent 70%
    );
}

.card-reveal-glow[style*="--glow-color: #ffd700"] {
  background: radial-gradient(
        ellipse at center,
        #ffd700 0%,
        transparent 70%
    );
}

.card-reveal-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  opacity: 0.1;
  animation: particleFloat 20s linear infinite;
  pointer-events: none;
}

.card-reveal-image-container::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 70%
    );
  animation: cardShine 3s ease-in-out infinite;
  pointer-events: none;
}

.outpost-card-notice {
  background: rgba(0, 50, 100, 0.9);
  border: 2px solid var(--primary);
  border-radius: 8px;
  padding: 15px;
  margin: 10px 0;
  color: white;
}

.outpost-card-preview {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-bottom: 10px;
}

.outpost-card-preview img {
  border-radius: 4px;
  border: 1px solid var(--primary);
}

.card-info h3 {
  margin: 0 0 5px 0;
  color: var(--accent);
}

.occupation-bonus {
  font-size: 12px;
  color: #FFD700;
  font-style: italic;
}

.card-preview img {
  border-radius: 8px;
  border: 2px solid var(--accent);
}

.card-effects h4,
.occupation-bonus h4 {
  color: var(--accent);
  margin: 10px 0 5px 0;
}

.occupation-warning {
  background: rgba(255, 100, 100, 0.2);
  border: 1px solid #FF6B6B;
  border-radius: 4px;
  padding: 10px;
  margin-top: 10px;
}

.outpost:hover .outpost-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-15px);
}

.house.selected {
  border: 3px solid var(--accent) !important;
  box-shadow: 0 0 15px rgb(255 186 0 / 50%);
}

.selected-house.filled {
  border: 2px solid #ff0081;
  background: rgb(111 42 83 / 47%);
}

.outpost-modal-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.outpost-card-display {
  flex: 0 0 180px;
}

.outpost-info-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.outpost-card {
  position: relative;
  width: 180px;
  height: 250px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #00d4ff;
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
  background: #0a0a0a;
}

.outpost-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.outpost-card-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
  color: #00d4ff;
  font-weight: bold;
  text-align: center;
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.occupation-bonus-container {
  margin: 5px 0;
  padding: 10px;
  background: rgba(0, 200, 100, 0.15);
  border: 1px solid #00c864;
  border-radius: 4px;
  color: #88ffaa;
}

.occupation-bonus-container h4 {
  margin: 0 0 5px 0;
  font-size: 0.9em;
  color: #15ff00;
}

.map-legend {
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 243, 255, 0.3);
  max-height: 300px;
  overflow-y: auto;
}

.map-legend h4 {
  margin: 0 0 10px 0;
  color: var(--yellow);
  font-size: 0.95em;
  font-weight: bold;
}

.legend-color.hex {
  width: 18px;
  height: 20px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border: none;
}

.map-legend .legend-item .district-controlled {
  color: var(--yellow);
  font-weight: bold;
}

.map-legend::-webkit-scrollbar {
  width: 6px;
}

.map-legend::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.map-legend::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 3px;
}

.map-legend::-webkit-scrollbar-thumb:hover {
  background: var(--yellow);
}

.effect-icon-overlay,
.district-icon-overlay {
  position: absolute;
  top: 100%;
  left: 100%;
  transform: translate(-50%, -50%);
  font-size: 0px;
  pointer-events: none;
  z-index: 5;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
}

.district-icon-overlay {
  font-size: 0px;
}

.outpost-hex.size-sm .effect-icon-overlay,
.outpost-hex.size-sm .district-icon-overlay {
  font-size: 13px;
}

.outpost-hex.size-lg .effect-icon-overlay,
.outpost-hex.size-lg .district-icon-overlay {
  font-size: 25px;
}

.outpost-hex.size-xl .effect-icon-overlay,
.outpost-hex.size-xl .district-icon-overlay {
  font-size: 18px;
}

.outpost-effect {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  z-index: 8;
  border: 2px solid rgba(255, 255, 255, 0.8);
  animation: effectOrbit 8s linear infinite;
  box-shadow: 0 0 10px currentColor;
}

.outpost-effect.irradiated {
  background: radial-gradient(circle, #7FFF00, #9ACD32);
  animation: effectOrbit 8s linear infinite, radiationEffect 2s ease-in-out infinite alternate;
}

.outpost-effect.rejuvenation {
  background: radial-gradient(circle, #00FFFF, #40E0D0);
  animation: effectOrbit 8s linear infinite, rejuvenationEffect 2s ease-in-out infinite alternate;
}

.outpost-effect.arcana {
  background: radial-gradient(circle, #FF00FF, #9932CC);
  animation: effectOrbit 8s linear infinite, arcanaEffect 2s ease-in-out infinite alternate;
}

.outpost-effect.cybernetics {
  background: radial-gradient(circle, #1E90FF, #00BFFF);
  animation: effectOrbit 8s linear infinite, cyberneticsEffect 1s ease-in-out infinite alternate;
}

.outpost-effect.poisoned {
  background: radial-gradient(circle, #9ACD32, #228B22);
  animation: effectOrbit 8s linear infinite, poisonEffect 3s ease-in-out infinite alternate;
}

.outpost-effect.weapons-cache {
  background: radial-gradient(circle, #FFA500, #FF8C00);
  animation: effectOrbit 8s linear infinite, weaponsEffect 1.5s ease-in-out infinite alternate;
}

.outpost-effect.power-generation {
  background: radial-gradient(circle, #FFFF00, #FFD700);
  animation: effectOrbit 8s linear infinite, powerEffect 1s ease-in-out infinite alternate;
}

.combat-arena {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.background-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.background-image {
  position: absolute;
  inset: 0;
  background-image: url('https://rrxzozvjmhfscano.public.blob.vercel-storage.com/uploads/23658402-8b39-40f9-b883-d95445504bbf.png'); /*comic style background*/ 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.7) saturate(1.3);
}

.background-fallback {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 150% 100% at 50% 100%, rgba(139, 92, 246, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 20%, rgba(34, 211, 238, 0.3) 0%, transparent 40%),
        radial-gradient(ellipse at 80% 30%, rgba(236, 72, 153, 0.2) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 50%, rgba(59, 130, 246, 0.15) 0%, transparent 60%),
        linear-gradient(180deg, #050508 0%, #0a0b12 20%, #12141f 50%, #1a1c2e 80%, #0a0b12 100%);
  z-index: -1;
}

.background-city {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to top, 
        rgba(10, 11, 18, 0.95) 0%,
        rgba(10, 11, 18, 0.7) 30%,
        transparent 100%
    );
  z-index: 1;
}

.background-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 20%, rgba(10, 11, 18, 0.6) 100%),
        linear-gradient(180deg, rgba(10, 11, 18, 0.4) 0%, transparent 20%, transparent 80%, rgba(10, 11, 18, 0.6) 100%);
  z-index: 2;
}

.scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.08) 2px,
        rgba(0, 0, 0, 0.08) 4px
    );
  pointer-events: none;
  z-index: 3;
}

.glow-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
}

.glow-particles::before,
.glow-particles::after {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  filter: blur(80px);
  animation: floatGlow 8s ease-in-out infinite;
}

.glow-particles::before {
  background: rgba(139, 92, 246, 0.3);
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.glow-particles::after {
  background: rgba(34, 211, 238, 0.25);
  bottom: 30%;
  right: 15%;
  animation-delay: -4s;
}

.combat-content {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    max-width: 1800px;
    margin: 0 auto;
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 0;
    place-content: center;
    place-items: center;
}

.combat-header {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 50;
  padding: 10px 0;
  min-height: 80px;
}

.narrator-box {
  position: relative;
  background: #fff;
  border: 3px solid #000;
  padding: 8px 20px;
  max-width: 550px;
  min-width: 300px;
  margin-top: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  /* Start hidden */
    transform: scale(0);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.narrator-box.show {
  transform: scale(1);
  opacity: 1;
}

.narrator-label {
  position: absolute;
  top: -12px;
  left: 15px;
  background: #000;
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 4px 10px;
  text-transform: uppercase;
}

.narrator-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.narrator-turn {
  font-family: var(--font-comic);
  font-size: 1.8rem;
  color: #000;
  letter-spacing: 1px;
  text-align: center;
  min-height: 30px;
}

.narrator-box.defeat {
  background: #fee2e2;
  border-color: var(--accent-danger);
}

.narrator-box.defeat .narrator-label {
  background: var(--accent-danger);
}

.narrator-box.defeat .narrator-turn {
  color: var(--accent-danger);
}

.narrator-box.victory {
  background: #dcfce7;
  border-color: var(--accent-success);
}

.narrator-box.victory .narrator-label {
  background: var(--accent-success);
}

.narrator-box.victory .narrator-turn {
  color: var(--accent-success);
}

.narrator-box.pop-out {
  animation: narratorPopOut 0.3s ease-in forwards;
}

.narrator-box.pop-in {
  animation: narratorPopIn 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.narrator-box.shake {
  animation: narratorShake 0.4s ease-out;
}

.combatant-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  margin-top: -80px;
  z-index: 0;
}

.combatant-side.player {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  align-items: flex-start;
  padding-left: clamp(10px, 3vw, 60px);
}

.combatant-side.opponent {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  align-items: flex-end;
  padding-right: clamp(10px, 3vw, 60px);
}

.character-wrapper {
  position: relative;
  display: flex;
  align-items: flex-start;
  z-index: 0;
}

.combatant-side.player .character-wrapper {
  flex-direction: row;
}

.combatant-side.opponent .character-wrapper {
  flex-direction: row-reverse;
}

.character-panel {
  position: relative;
  width: 580px;
  height: 700px;
  background: linear-gradient(145deg, rgba(26, 28, 46, 0.95), rgba(18, 20, 31, 0.98));
  border: var(--panel-border);
  box-shadow: var(--panel-shadow);
  transform: rotate(-1deg);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: visible !important;
}

.combatant-side.opponent .character-panel {
  transform: rotate(1deg);
}

.character-portrait img {
  width: 100%;
  height: 160%;
  object-fit: cover;
  object-position: center top;
  filter: contrast(1.1) saturate(1.1);
}

.character-portrait::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(transparent, rgba(26, 28, 46, 0.98));
}

.floating-stats {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  margin-top: 30px;
  animation: floatStats 3s ease-in-out infinite;
}

.combatant-side.player .floating-stats {
  margin-left: clamp(10px, 1.5vw, 30px);
  align-items: flex-start;
}

.combatant-side.opponent .floating-stats {
  margin-right: clamp(10px, 1.5vw, 30px);
  align-items: flex-end;
}

.stat-badge:hover {
  transform: translateX(5px);
  border-left-width: 5px;
}

.combatant-side.opponent .stat-badge {
  border-left: none;
  border-right: 3px solid var(--accent-primary);
}

.combatant-side.opponent .stat-badge:hover {
  transform: translateX(-5px);
  border-right-width: 5px;
}

.stat-badge.ap {
  border-color: var(--accent-tertiary);
}

.stat-badge.dam {
  border-color: var(--accent-danger);
}

.stat-badge.elem {
  border-color: var(--element-lightning);
}

.stat-badge.elem2 {
  border-color: var(--element-fire);
}

.stat-badge.sigil {
  border-color: var(--accent-pink);
}

.stat-badge .label {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.9rem;
}

.stat-badge .value {
  font-weight: 700;
}

.stat-badge.ap .value {
  color: var(--accent-tertiary);
}

.stat-badge.dam .value {
  color: var(--accent-danger);
}

.stat-badge.elem .value {
  color: var(--element-lightning);
}

.stat-badge.elem2 .value {
  color: var(--element-fire);
}

.stat-badge.sigil .value {
  color: var(--accent-pink);
}

.character-panel.damage-shake {
  animation: damageShake 0.5s ease-out;
}

.character-panel.damage-shake::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, transparent 40%, rgba(239, 68, 68, 0.5) 50%, transparent 60%);
  animation: damageFlash 0.5s ease-out;
  pointer-events: none;
}

.character-panel.positive-effect {
  animation: positiveGlow 0.8s ease-out;
}

.character-panel.positive-effect::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, transparent 40%, rgba(34, 197, 94, 0.5) 50%, transparent 60%);
  animation: positiveFlash 0.8s ease-out;
  pointer-events: none;
}

.charge-bar-container {
  position: relative;
  height: 20px;
  margin-top: 8px;
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

.charge-bar-segments {
  position: absolute;
  inset: 0;
  display: flex;
  pointer-events: none;
  z-index: 3;
}

.charge-bar-segments::before,
.charge-bar-segments::after,
.charge-bar-segments span::before,
.charge-bar-segments span::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(0, 0, 0, 0.6);
}

.charge-bar-segments::before {
  left: 25%;
}

.charge-bar-segments::after {
  left: 50%;
}

.charge-bar-segments span::before {
  left: 75%;
}

.charge-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #166534 0%, #22c55e 50%, #4ade80 100%);
  transition: width 0.3s ease, filter 0.3s ease;
  position: relative;
  z-index: 1;
}

.charge-bar-fill[data-stage="1"] {
  background: linear-gradient(90deg, #14532d 0%, #166534 100%);
  filter: brightness(0.7);
}

.charge-bar-fill[data-stage="2"] {
  background: linear-gradient(90deg, #166534 0%, #22c55e 100%);
  filter: brightness(0.85);
}

.charge-bar-fill[data-stage="3"] {
  background: linear-gradient(90deg, #22c55e 0%, #4ade80 100%);
  filter: brightness(1);
}

.charge-bar-fill[data-stage="4"] {
  background: linear-gradient(90deg, #4ade80 0%, #86efac 100%);
  filter: brightness(1.1);
  animation: chargeReady 1s ease-in-out infinite;
}

.charge-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, transparent 50%, rgba(0, 0, 0, 0.2) 100%);
}

.charge-bar-glow {
  position: absolute;
  inset: -4px;
  background: transparent;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.charge-bar-container.charged .charge-bar-glow {
  opacity: 1;
  box-shadow: 0 0 15px rgba(74, 222, 128, 0.6), 0 0 30px rgba(74, 222, 128, 0.4), inset 0 0 15px rgba(74, 222, 128, 0.3);
  animation: chargeGlow 1.5s ease-in-out infinite;
}

.charge-bar-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
  z-index: 4;
  letter-spacing: 1px;
}

.charge-bar-text.ready {
  color: #4ade80;
  text-shadow: 0 0 10px rgba(74, 222, 128, 0.8);
  animation: readyPulse 1s ease-in-out infinite;
}

.charge-bar-container.cooldown .charge-bar-fill {
  background: linear-gradient(90deg, #374151 0%, #4b5563 100%);
  filter: grayscale(1) brightness(0.6);
  animation: none;
}

.charge-bar-container.cooldown .charge-bar-glow {
  opacity: 0;
}

.cooldown-sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
  transform: translateX(-100%);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
}

.charge-bar-container.cooldown .cooldown-sweep {
  opacity: 1;
  animation: cooldownSweep 2s linear infinite;
}

.charge-bar-text.cooldown {
  color: var(--accent-warning);
}

.combatant-side.player .active-effects {
  left: 15px;
}

.combatant-side.opponent .active-effects {
  right: 15px;
  justify-content: flex-end;
}

.effect-orb {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.effect-orb:hover {
  transform: scale(1.2);
  z-index: 30;
}

.effect-glow {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  pointer-events: none;
}

.effect-duration {
  position: absolute;
  bottom: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 9px;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.effect-tooltip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) scale(0);
  background: rgba(10, 11, 18, 0.98);
  border: 2px solid rgba(255, 255, 255, 0.3);
  padding: 10px 14px;
  min-width: 140px;
  max-width: 180px;
  z-index: 100;
  opacity: 0;
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  pointer-events: none;
}

.effect-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.3);
}

.effect-tooltip::before {
  content: '';
  position: absolute;
  top: calc(100% - 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(10, 11, 18, 0.98);
  z-index: 1;
}

.effect-orb:hover .effect-tooltip {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.effect-tooltip-name {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.effect-tooltip-desc {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

.effect-tooltip-duration {
  font-family: var(--font-display);
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.effect-orb[data-element="void"] {
  background: radial-gradient(circle, #a855f7 0%, #7c3aed 50%, #4c1d95 100%);
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.6);
}

.effect-orb[data-element="void"] .effect-glow {
  background: radial-gradient(circle, rgba(139, 92, 246, 0.4) 0%, transparent 70%);
  animation: voidSwirl 3s linear infinite;
}

.effect-orb[data-element="void"] .effect-tooltip-name {
  color: #a855f7;
}

.effect-orb[data-element="lightning"] {
  background: radial-gradient(circle, #67e8f9 0%, #22d3ee 50%, #0891b2 100%);
  box-shadow: 0 0 15px rgba(34, 211, 238, 0.6);
}

.effect-orb[data-element="lightning"] .effect-glow {
  background: radial-gradient(circle, rgba(34, 211, 238, 0.5) 0%, transparent 70%);
  animation: lightningCrackle 0.3s ease-in-out infinite;
}

.effect-orb[data-element="lightning"] .effect-tooltip-name {
  color: #22d3ee;
}

.effect-orb[data-element="fire"] {
  background: radial-gradient(circle, #fbbf24 0%, #f97316 40%, #dc2626 100%);
  box-shadow: 0 0 15px rgba(249, 115, 22, 0.6);
}

.effect-orb[data-element="fire"] .effect-glow {
  background: radial-gradient(circle, rgba(251, 191, 36, 0.5) 0%, transparent 70%);
  animation: flamePulse 0.8s ease-in-out infinite alternate;
}

.effect-orb[data-element="fire"] .effect-tooltip-name {
  color: #f97316;
}

.effect-orb[data-element="poison"] {
  background: radial-gradient(circle, #86efac 0%, #22c55e 50%, #15803d 100%);
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.6);
}

.effect-orb[data-element="poison"] .effect-glow {
  background: radial-gradient(circle, rgba(34, 197, 94, 0.4) 0%, transparent 70%);
  animation: poisonBubble 1.5s ease-in-out infinite;
}

.effect-orb[data-element="poison"] .effect-tooltip-name {
  color: #22c55e;
}

.effect-orb[data-element="resistant"] {
  background: radial-gradient(circle, #f1f5f9 0%, #94a3b8 50%, #64748b 100%);
  box-shadow: 0 0 15px rgba(148, 163, 184, 0.6);
}

.effect-orb[data-element="resistant"] .effect-glow {
  background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.4) 50%, transparent 60%);
  animation: resistantShimmer 2s ease-in-out infinite;
}

.effect-orb[data-element="resistant"] .effect-tooltip-name {
  color: #94a3b8;
}

.effect-orb[data-element="stimulant"] {
  background: radial-gradient(circle, #f9a8d4 0%, #ec4899 50%, #9d174d 100%);
  box-shadow: 0 0 15px rgba(236, 72, 153, 0.6);
}

.effect-orb[data-element="stimulant"] .effect-glow {
  background: radial-gradient(circle, rgba(236, 72, 153, 0.5) 0%, transparent 70%);
  animation: stimPulse 0.4s ease-in-out infinite;
}

.effect-orb[data-element="stimulant"] .effect-tooltip-name {
  color: #ec4899;
}

.dialogue-box {
  position: absolute;
  background: #fff;
  color: #000;
  padding: 12px 18px;
  border: 4px solid #000;
  font-family: var(--font-comic);
  font-size: 1.5rem;
  max-width: 260px;
  text-align: center;
  z-index: 100;
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  pointer-events: none;
}

.dialogue-box.show {
  opacity: 1;
  transform: scale(1);
}

.combatant-side.player .character-panel .dialogue-box {
  top: -70px;
  right: 20px;
  left: auto;
  transform-origin: bottom right;
}

.combatant-side.opponent .character-panel .dialogue-box {
  top: -70px;
  left: 30px;
  right: auto;
  border-radius: 10px 10px 0 10px;
  transform-origin: bottom left;
}

.dialogue-box::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 15px;
  border: 8px solid transparent;
  border-top: 10px solid #fff;
  border-left: 10px solid #fff;
}

.dialogue-box::before {
  content: '';
  position: absolute;
  bottom: -22px;
  left: 11px;
  border: 10px solid transparent;
  border-top: 12px solid #000;
  border-left: 12px solid #000;
}

.combatant-side.opponent .character-panel .dialogue-box::after {
  left: auto;
  right: 15px;
  border-left-color: transparent;
  border-right: 10px solid #fff;
}

.combatant-side.opponent .character-panel .dialogue-box::before {
  left: auto;
  right: 11px;
  border-left-color: transparent;
  border-right: 14px solid #000;
}

.combatant-side.player .dialogue-box::after {
  right: 20px;
  border-right: 10px solid #fff;
}

.combatant-side.opponent .dialogue-box::after {
  left: 20px;
  border-left: 10px solid #fff;
}

.combatant-side.player .dialogue-box::before {
  right: 17px;
  border-right: 12px solid #000;
}

.combatant-side.opponent .dialogue-box::before {
  left: 17px;
  border-left: 12px solid #000;
}

.character-panel .dialogue-box {
  top: -60px;
  right: 30px;
  z-index: 100;
}

#playerDialogue {
  top: 15px;
  right: 15px;
  left: auto !important;
  border-radius: 10px 10px 0 10px;
  transform-origin: bottom right;
}

#playerDialogue.show {
  transform: scale(1);
}

#playerDialogue::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 20px;
  right: auto;
  border: 8px solid transparent;
  border-top: 10px solid #fff;
  border-left: 10px solid #fff;
  border-right-color: transparent;
}

#playerDialogue::before {
  content: '';
  position: absolute;
  bottom: -22px;
  left: 16px;
  right: auto;
  border: 10px solid transparent;
  border-top: 12px solid #000;
  border-left: 12px solid #000;
  border-right-color: transparent;
}

#opponentDialogue {
  top: 15px;
  left: 15px;
  right: auto !important;
  border-radius: 10px 10px 10px 0;
  transform-origin: bottom left;
}

#opponentDialogue.show {
  transform: scale(1);
}

#opponentDialogue::after {
  content: '';
  position: absolute;
  bottom: -15px;
  right: 20px;
  left: auto;
  border: 8px solid transparent;
  border-top: 10px solid #fff;
  border-right: 10px solid #fff;
  border-left-color: transparent;
}

#opponentDialogue::before {
  content: '';
  position: absolute;
  bottom: -22px;
  right: 16px;
  left: auto;
  border: 10px solid transparent;
  border-top: 12px solid #000;
  border-right: 12px solid #000;
  border-left-color: transparent;
}

.combatant-side.opponent .character-name {
  text-align: right;
}

.health-bar-container {
  position: relative;
  height: 40px;
  background: rgba(0,0,0,0.7);
  border: 3px solid rgba(255,255,255,0.4);
  overflow: hidden;
}

.health-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-danger) 0%, var(--accent-warning) 50%, var(--accent-success) 100%);
  background-size: 200% 100%;
  transition: width 0.5s ease, background-position 0.5s ease;
  position: relative;
}

.health-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 50%, rgba(0,0,0,0.2) 100%);
}

.health-bar-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.9);
}

.creature-popup {
  position: fixed;
  bottom: 200px;
  z-index: 100;
  background: linear-gradient(145deg, rgba(26, 28, 46, 0.98), rgba(18, 20, 31, 0.99));
  border: 4px solid #fff;
  padding: 20px;
  width: 280px;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  pointer-events: none;
}

.creature-popup.player {
  left: 120px;
  transform: scale(0) rotate(-2deg);
  box-shadow: 8px 8px 0 rgba(0,0,0,0.8), 0 0 40px rgba(236, 72, 153, 0.4);
}

.creature-popup.opponent {
  right: 120px;
  transform: scale(0) rotate(2deg);
  box-shadow: -8px 8px 0 rgba(0,0,0,0.8), 0 0 40px rgba(236, 72, 153, 0.4);
}

.creature-popup.player.show {
  transform: scale(1) rotate(-2deg);
  opacity: 1;
}

.creature-popup.opponent.show {
  transform: scale(1) rotate(2deg);
  opacity: 1;
}

.creature-popup .dialogue-box {
  position: absolute;
  top: -50px;
  background: #fff;
  color: #000;
  padding: 10px 15px;
  border: 3px solid #000;
  font-family: var(--font-comic);
  font-size: 1.1rem;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.6);
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s ease 0.2s;
  z-index: 20;
}

.creature-popup.player .dialogue-box {
  right: 20px;
  border-radius: 15px 15px 15px 0;
}

.creature-popup.opponent .dialogue-box {
  left: 20px;
  border-radius: 15px 15px 0 15px;
}

.creature-popup.show .dialogue-box {
  opacity: 1;
  transform: scale(1);
}

.creature-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /*border: 3px solid rgba(255,255,255,0.4);*/
  margin-bottom: 15px;
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5));
  transition: all 0.3s ease;
}

.creature-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  color: var(--accent-pink);
  text-shadow: 0 0 15px var(--accent-pink);
}

.creature-action {
  font-family: var(--font-comic);
  font-size: 1.8rem;
  text-align: center;
  color: #fff;
  margin-top: 10px;
  text-shadow: 3px 3px 0 var(--accent-danger);
}

.cards-bay {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.cards-bay-label {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.equipment-slots {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.card-slot:nth-child(1) {
  animation-delay: 0s;
}

.card-slot:nth-child(2) {
  animation-delay: 0.3s;
}

.card-slot:nth-child(3) {
  animation-delay: 0.6s;
}

.card-slot:nth-child(4) {
  animation-delay: 0.9s;
}

.card-slot:nth-child(5) {
  animation-delay: 1.2s;
}

.card-slot.empty {
  border-style: dashed;
  border-color: rgba(139, 92, 246, 0.15);
  animation: none;
  opacity: 0.7;
}

.card-slot.empty::before {
  content: attr(data-slot-type);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.55rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  padding: 10px;
  opacity: 0.5;
}

/*.card-slot .card-type-badge {
  position: absolute;
  bottom: 6px;
  left: 6px;
  right: 6px;
  background: rgba(0,0,0,0.85);
  padding: 4px 6px;
  font-family: var(--font-display);
  font-size: 0.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  color: var(--accent-secondary);
  border-radius: 3px;
  backdrop-filter: blur(5px);
}*/

.items-section {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: clamp(20px, 3vw, 40px);
  width: 100%;
  max-width: 1600px;
}

.items-tray {
  display: flex;
  gap: 10px;
  overflow: visible;
}

.item-slot:nth-child(1) {
  animation-delay: 0.1s;
}

.item-slot:nth-child(2) {
  animation-delay: 0.25s;
}

.item-slot:nth-child(3) {
  animation-delay: 0.4s;
}

.item-slot:nth-child(4) {
  animation-delay: 0.55s;
}

.item-slot:nth-child(5) {
  animation-delay: 0.7s;
}

.item-slot:nth-child(6) {
  animation-delay: 0.85s;
}

.item-slot.empty {
  background: rgba(36, 40, 66, 0.3);
  border: 1px dashed rgba(245, 158, 11, 0.2);
  animation: none;
}

.combatant-side.opponent .equipment-slots {
  justify-content: flex-end;
}

.combatant-side.opponent .items-tray {
  justify-content: flex-end;
}

.combatant-side.opponent .cards-bay-label {
  text-align: right;
}

.item-slot.armed {
  box-shadow: 0 0 25px rgba(255, 69, 0, 0.9);
  border: 3px solid #FF4500;
  animation: itemArmedGlow 1.5s ease-in-out infinite;
  transform: translateY(-8px) scale(1.1);
  z-index: 10;
  border-color: #f5a623;
  cursor: pointer;
}

.item-slot.armed::after {
  content: 'ARMED';
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--accent-warning);
  text-shadow: 0 0 10px var(--accent-warning);
  white-space: nowrap;
}

.item-charge-overlay {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: bold;
  color: #FFD700;
  white-space: nowrap;
}

.item-uses-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  background: #00FF00;
  color: black;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: bold;
}

.item-element-icon {
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 20px;
}

.item-label {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: bold;
  color: #E6E6FA;
  white-space: nowrap;
}

.additional-controls {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.additional-controls .ability-btn,
.additional-controls .stimulant-warning {
  flex: 1 1 auto;
  min-width: 150px;
}

.center-area {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  z-index: 10;
  pointer-events: none;
}

.vs-emblem {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: floatSlow 3s ease-in-out infinite;
}

.vs-emblem::before {
  content: '';
  position: absolute;
  inset: -30px;
  background: radial-gradient(circle, rgba(239, 68, 68, 0.4) 0%, transparent 70%);
  animation: vsPulse 2s ease-in-out infinite;
}

.combat-content .action-buttons {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  pointer-events: auto;
}

.action-btn {
  position: relative;
  padding: 18px 40px;
  min-width: 200px;
  background: linear-gradient(145deg, rgba(26, 28, 46, 0.95), rgba(36, 40, 66, 0.95));
  border: 4px solid #fff;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(139, 92, 246, 0.2);
  transition: all 0.2s ease;
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px));
}

.action-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7), 0 0 30px rgba(139, 92, 246, 0.4);
}

.action-btn:active {
  transform: translateY(2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.action-btn.player-hit {
  border-color: var(--accent-danger);
  background: linear-gradient(145deg, rgba(239, 68, 68, 0.4), rgba(26, 28, 46, 0.95));
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(239, 68, 68, 0.3);
}

.action-btn.player-hit:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7), 0 0 40px rgba(239, 68, 68, 0.5);
}

.action-btn.opponent-hit {
  border-color: var(--accent-tertiary);
  background: linear-gradient(145deg, rgba(59, 130, 246, 0.4), rgba(26, 28, 46, 0.95));
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(59, 130, 246, 0.3);
}

.action-btn.opponent-hit:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7), 0 0 40px rgba(59, 130, 246, 0.5);
}

.battle-notification-container {
  position: fixed;
  top: 120px;
  /* Below match header if you have one  */
    left: 50%;
  transform: translateX(-50%);
  width: 400px;
  max-width: 90vw;
  z-index: 55;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  /* Below narrator box */
    right: 30px;
}

.battle-notification {
  position: relative;
  background: #fff;
  border: 3px solid #000;
  padding: 12px 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  font-family: var(--font-comic);
  font-size: 1.1rem;
  color: #000;
  text-align: center;
  letter-spacing: 0.5px;
  width: 100%;
  /* Full width of container  */
    /* Start hidden  */
    opacity: 0;
  transform: translateX(50px) scale(0.8);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  pointer-events: auto;
  /* Start hidden */
    opacity: 0;
}

.battle-notification.show {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.battle-notification.fade-out {
  opacity: 0;
  transform: translateX(50px) scale(0.8);
  transition: all 0.4s ease-in;
}

.battle-notification.fire,
.battle-notification.fire-damage {
  background: #FFF5F0;
  border-color: #FF4500;
  color: #8B0000;
}

.battle-notification.lightning,
.battle-notification.lightning-damage {
  background: #F0F8FF;
  border-color: #00BFFF;
  color: #004080;
}

.battle-notification.void,
.battle-notification.void-damage {
  background: #F5F0FF;
  border-color: #4B0082;
  color: #2E0854;
}

.battle-notification.blood,
.battle-notification.blood-damage {
  background: #FFF0F0;
  border-color: #8B0000;
  color: #4B0000;
}

.battle-notification.aether,
.battle-notification.aether-damage {
  background: #F0FFFF;
  border-color: #40E0D0;
  color: #006666;
}

.battle-notification.chroma,
.battle-notification.chroma-damage {
  background: linear-gradient(135deg, #FFF 0%, #F0F8FF 50%, #FFF5F0 100%);
  border-color: #9370DB;
  color: #4B0082;
}

.battle-notification.poison,
.battle-notification.poison-damage {
  background: #F0FFF0;
  border-color: #9ACD32;
  color: #556B2F;
}

.battle-notification.radiation,
.battle-notification.radiation-damage {
  background: #F5FFF0;
  border-color: #32CD32;
  color: #006400;
}

.battle-notification.arcana,
.battle-notification.arcana-damage {
  background: #F5F0FF;
  border-color: #8A2BE2;
  color: #4B0082;
}

.battle-notification.cybernetics,
.battle-notification.cybernetics-damage {
  background: #F0FFFF;
  border-color: #00FFFF;
  color: #006B6B;
}

.battle-notification.dodge {
  background: #FFFACD;
  border-color: #FFD700;
  color: #8B6914;
  font-size: 1.3rem;
  font-weight: 700;
  text-shadow: 1px 1px 0 rgba(255, 215, 0, 0.3);
}

.battle-notification.defeat {
  background: #FFE4E1;
  border-color: #FF0000;
  color: #8B0000;
  font-size: 1.3rem;
  font-weight: 700;
}

.battle-notification.super-effective {
  background: #FFF9E6;
  border-color: #FFD700;
  color: #B8860B;
  font-size: 1.2rem;
  font-weight: 700;
  animation: notificationGlow 1s ease-in-out infinite;
}

.battle-notification.resisted {
  background: #E6F3FF;
  border-color: #4DA6FF;
  color: #1E5A8E;
  opacity: 0.85;
}

.battle-notification.damage {
  background: #FFF0F0;
  border-color: #FF4444;
  color: #8B0000;
}

.battle-notification::before {
  content: 'COMBAT';
  position: absolute;
  top: -10px;
  left: 15px;
  background: #000;
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 3px 8px;
  text-transform: uppercase;
}

.battle-notification.defeat::before {
  content: 'K.O.';
  background: #FF0000;
}

.battle-notification.dodge::before {
  content: 'EVADE';
  background: #FFD700;
  color: #000;
}

.battle-notification.super-effective::before {
  content: 'CRITICAL';
  background: #FFD700;
  color: #000;
}

.battle-notification.resisted::before {
  content: 'RESIST';
  background: #4DA6FF;
}

.combat-footer {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
}

.combat-log {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  z-index: 3;
  pointer-events: auto;
  min-width: 400px;
  cursor: default;
}

.combat-log-content {
  padding: 15px 20px;
  max-height: 950px;
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(26, 28, 46, 0.95);
  border: 2px solid rgba(139, 92, 246, 0.5);
  border-bottom: none;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  transform-origin: bottom center;
  transform: scaleY(1);
  opacity: 1;
  transition: transform 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
}

.combat-log-content.collapsed {
  transform: scaleY(0);
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}

.combat-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 40px;
  background: linear-gradient(145deg, rgba(139, 92, 246, 0.4), rgba(26, 28, 46, 0.95));
  border: 2px solid rgba(139, 92, 246, 0.5);
  border-radius: 0 0 8px 8px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: grab;
  transition: all 0.2s ease;
}

.combat-log-header:hover {
  background: linear-gradient(145deg, rgba(139, 92, 246, 0.6), rgba(26, 28, 46, 0.95));
  border-color: rgba(139, 92, 246, 0.8);
}

.combat-log-header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.combat-log-count {
  font-family: var(--font-comic);
  font-size: 1.1rem;
  color: var(--accent-secondary);
  text-shadow: 2px 2px 0 #000;
}

.combat-log-toggle {
  transition: transform 0.3s ease;
}

.combat-log-toggle.collapsed {
  transform: rotate(180deg);
}

.log-entry {
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.4);
  border-left: 4px solid var(--text-muted);
  animation: logSlideIn 0.3s ease-out;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.log-entry.damage {
  border-color: var(--accent-danger);
}

.log-entry.heal {
  border-color: var(--accent-success);
}

.log-entry.ability {
  border-color: var(--accent-secondary);
}

.log-entry.creature {
  border-color: var(--accent-pink);
}

.log-entry .actor {
  color: var(--text-primary);
  font-weight: 600;
}

.log-entry .action {
  font-family: var(--font-comic);
  font-size: 1.3rem;
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 #000;
}

.log-entry.damage .action {
  color: var(--accent-danger);
  text-shadow: 2px 2px 0 #000, 0 0 10px var(--accent-danger);
}

.log-entry.heal .action {
  color: var(--accent-success);
  text-shadow: 2px 2px 0 #000, 0 0 10px var(--accent-success);
}

.log-entry .value {
  font-family: var(--font-comic);
  font-size: 1.5rem;
  color: #fff;
  margin: 0 4px;
}

.log-entry.damage .value {
  text-shadow: 3px 3px 0 var(--accent-danger), 0 0 15px var(--accent-danger);
}

.log-entry.heal .value {
  color: var(--accent-success);
  text-shadow: 3px 3px 0 #000, 0 0 15px var(--accent-success);
}

.log-entry .text {
  color: var(--text-secondary);
}

.combat-log-content::-webkit-scrollbar {
  width: 8px;
}

.combat-log-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.4);
}

.combat-log-content::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
  border-radius: 4px;
}

.combat-log.dragging {
  opacity: 0.9;
  box-shadow: 0 10px 40px rgba(139, 92, 246, 0.5);
}

.combat-log-header:active {
  cursor: grabbing;
}

.combat-log-header::before {
  content: '⋮⋮';
  margin-right: 12px;
  opacity: 0.5;
  font-size: 1.2rem;
  letter-spacing: -3px;
}

.damage-number {
  position: absolute;
  font-family: var(--font-comic);
  font-size: 3rem;
  color: var(--accent-danger);
  text-shadow: 4px 4px 0 #000, 0 0 30px var(--accent-danger);
  pointer-events: none;
  animation: damageFloat 1s ease-out forwards;
  z-index: 50;
}

.damage-number.heal {
  color: var(--accent-success);
  text-shadow: 4px 4px 0 #000, 0 0 30px var(--accent-success);
}

.combat-flash {
  position: fixed;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
}

.combat-flash.active {
  animation: flashBang 0.3s ease-out;
}

.outpost-hex {
  position: absolute;
  cursor: pointer;
  transition: all 0.3s ease;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.outpost-hex svg {
  width: 110%;
  height: 110%;
  filter: drop-shadow(0 0 8px var(--hex-color, #00BFFF));
  transition: filter 0.3s ease;
}

.outpost-hex .hex-border {
  fill: none;
  stroke: var(--hex-color, #00BFFF);
  stroke-width: 8;
  transition: all 0.3s ease;
}

.outpost-hex .hex-center {
  fill: var(--hex-color, #00BFFF);
  transition: all 0.3s ease;
}

.outpost-hex:hover {
  transform: translate(-50%, -50%) scale(1.1);
  z-index: 20;
}

.outpost-hex:hover svg {
  filter: drop-shadow(0 0 15px var(--hex-color, #00BFFF));
}

.outpost-hex.size-sm {
  width: 30px;
  height: 35px;
}

.outpost-hex.size-md {
  width: 35px;
  height: 40px;
}

.outpost-hex.size-lg {
  width: 40px;
  height: 45px;
}

.outpost-hex.size-xl {
  width: 45px;
  height: 50px;
}

.outpost-hex .effect-icon-overlay {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 0px;
  /* outter circle */
    height: 0px;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  z-index: 11;
  border: 1px solid var(--hex-color, #00BFFF);
}

.outpost-hex .connection-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  background: rgba(255, 255, 255, 0.95);
  color: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: bold;
  z-index: 11;
}

.outpost-hex .outpost-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid var(--hex-color, #00BFFF);
  padding: 8px 12px;
  border-radius: 5px;
  font-size: 7px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  /* Add this */
    pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  /* Update transition */
    margin-bottom: 10px;
  z-index: 100;
}

.outpost-hex:hover .outpost-tooltip {
  opacity: 1;
  visibility: visible;
}

.outpost-name {
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #e0e0e0;
  /* Changed from var(--primary) for better readability */
  font-size: 12px;
  font-weight: bold;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.9);
  pointer-events: none;
  text-align: center;
  opacity: 0.9;
  transition: all var(--effect-fade-speed) ease;
  background: linear-gradient(135deg, rgba(13, 2, 33, 0.9), rgba(20, 5, 40, 0.9));
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid var(--primary);
  backdrop-filter: blur(5px);
}

.outpost:hover .outpost-name {
  opacity: 1;
  color: var(--yellow);
  transform: translateX(-50%) scale(1.1);
  border-color: var(--yellow);
}

.outpost.occupied:hover .outpost-name {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.9),
    0 0 4px var(--yellow);
}

.outpost-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--primary);
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.4));
}

.outpost-tooltip h4 {
  margin: 0 0 10px 0;
  color: var(--yellow);
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid rgba(255, 222, 3, 0.4);
  padding-bottom: 8px;
}

.outpost-tooltip .status {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.85em;
  font-weight: bold;
  margin-bottom: 10px;
  color: #ffffff;
}

.outpost-tooltip .status.occupied {
  background-color: rgba(255, 222, 3, 0.2);
  border: 1px solid var(--yellow);
  color: var(--yellow);
}

.outpost-tooltip .status.destroyed {
  background-color: rgba(255, 0, 60, 0.2);
  border: 1px solid var(--secondary);
  color: var(--secondary);
}

.outpost-tooltip .effects {
  margin: 10px 0;
  color: #e0e0e0;
}

.outpost-tooltip .effects-title {
  font-size: 1em;
  color: var(--primary);
  margin-bottom: 6px;
  font-weight: bold;
}

.outpost-tooltip .effects-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.effects-list {
  margin-top: 0px;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 4px;
  align-items: center;
  justify-content: flex-start;
}

.effects-list > * {
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  width: auto !important;
  min-width: 30px;
  max-width: 60px;
}

.outpost-tooltip .effect-badge {
  display: inline-block;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 0.75em;
  font-weight: bold;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

.effect-badge.irradiated {
  background-color: rgba(127, 255, 0, 0.2);
  border-color: #7FFF00;
  color: #7FFF00;
}

.effect-badge.rejuvenation {
  background-color: rgba(0, 255, 255, 0.2);
  border-color: #00FFFF;
  color: #00FFFF;
}

.effect-badge.arcana {
  background-color: rgba(153, 50, 204, 0.2);
  border-color: #9932CC;
  color: #FF00FF;
}

.effect-badge.cybernetics {
  background-color: rgba(30, 144, 255, 0.2);
  border-color: #1E90FF;
  color: #1E90FF;
}

.effect-badge.poisoned {
  background-color: rgba(154, 205, 50, 0.2);
  border-color: #9ACD32;
  color: #9ACD32;
}

.effect-badge.weapons-cache {
  background-color: rgba(255, 165, 0, 0.2);
  border-color: #FFA500;
  color: #FFA500;
}

.effect-badge.power-generation {
  background-color: rgba(255, 255, 0, 0.2);
  border-color: #FFFF00;
  color: #FFFF00;
}

.outpost-tooltip .coordinates {
  margin-top: 10px;
  font-size: 0.8em;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  font-family: 'Share Tech Mono', monospace;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 6px;
}

.outpost-tooltip p,
.outpost-tooltip span:not(.effect-badge):not(.status),
.outpost-tooltip div:not(.effects):not(.effects-list):not(.coordinates) {
  color: #e0e0e0;
}

.outpost-tooltip strong,
.outpost-tooltip b {
  color: #ffffff;
}

.outpost-tooltip .outpost-info,
.outpost-tooltip .outpost-details,
.outpost-tooltip .strategic-value {
  color: #d0d0d0;
  margin: 5px 0;
}

.outpost-tooltip .effect-description {
  color: #c0c0c0;
  font-size: 0.85em;
  font-style: italic;
  margin-top: 3px;
}

.outpost-tooltip .district-header {
  font-size: 1.1em;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 8px;
}

.outpost-tooltip .district-control {
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 4px;
  margin: 6px 0;
  text-align: center;
}

.outpost-tooltip .district-control.full-control {
  background: rgba(0, 255, 0, 0.15);
  border: 1px solid #00FF00;
  color: #00FF00;
}

.outpost-tooltip .district-control.dominant {
  background: rgba(255, 200, 0, 0.15);
  border: 1px solid #FFC800;
  color: #FFC800;
}

.outpost-tooltip .district-control.contested {
  background: rgba(255, 100, 100, 0.15);
  border: 1px solid #FF6464;
  color: #FF6464;
}

.outpost-tooltip .district-control.neutral {
  background: rgba(150, 150, 150, 0.15);
  border: 1px solid #999999;
  color: #CCCCCC;
}

.outpost-tooltip .district-bonus {
  font-size: 0.8em;
  color: #00FF00;
  font-style: italic;
  margin: 4px 0 8px 0;
  padding: 4px;
  background: rgba(0, 255, 0, 0.05);
  border-radius: 3px;
}

.outpost-tooltip .district-tied {
  font-size: 0.85em;
  color: #FF6464;
  text-align: center;
  margin-bottom: 6px;
}

.outpost-tooltip .district-breakdown {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  padding: 8px;
  margin: 8px 0;
}

.outpost-tooltip .breakdown-header {
  font-weight: bold;
  color: var(--primary);
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(0, 243, 255, 0.3);
}

.outpost-tooltip .house-control-row {
  font-size: 0.85em;
  color: #e0e0e0;
  padding: 2px 0;
}

.outpost-tooltip .neutral-count {
  font-size: 0.8em;
  color: #888888;
  margin-top: 4px;
}

.outpost-tooltip .destroyed-count {
  font-size: 0.8em;
  color: #666666;
}

.outpost-tooltip .outpost-owner {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.85em;
  color: var(--yellow);
}

.outpost-tooltip .outpost-neutral {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.85em;
  color: #00BFFF;
}

.outpost-tooltip .outpost-destroyed {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.85em;
  color: #666666;
}

.outpost-tooltip .strategic-tier {
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 4px;
  margin: 6px 0;
  text-align: center;
}

.outpost-tooltip .strategic-tier.critical {
  background: rgba(255, 0, 0, 0.15);
  border: 1px solid #FF0000;
  color: #FF4444;
}

.outpost-tooltip .strategic-tier.high {
  background: rgba(255, 140, 0, 0.15);
  border: 1px solid #FF8C00;
  color: #FF8C00;
}

.outpost-tooltip .strategic-tier.moderate {
  background: rgba(255, 215, 0, 0.15);
  border: 1px solid #FFD700;
  color: #FFD700;
}

.outpost-tooltip .strategic-tier.standard {
  background: rgba(135, 206, 235, 0.15);
  border: 1px solid #87CEEB;
  color: #87CEEB;
}

.outpost-tooltip .strategic-factors {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  padding: 8px;
  margin: 8px 0;
  font-size: 0.85em;
}

.outpost-tooltip .strategic-factors div {
  padding: 2px 0;
  color: #d0d0d0;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  backdrop-filter: blur(8px);
}

.modal.show,
.modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-content::before {
  content: '';
  position: absolute;
  inset: 6px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.55;
  background:
    linear-gradient(var(--bk), var(--bk)) top left     / 14px 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) top left     / 2px 14px no-repeat,
    linear-gradient(var(--bk), var(--bk)) top right    / 14px 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) top right    / 2px 14px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom left  / 14px 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom left  / 2px 14px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom right / 14px 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom right / 2px 14px no-repeat;
}

.modal-header,
.modal-body,
.modal-actions {
  position: relative;
  z-index: 1;
}

.modal-header h2 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-accent);
  text-shadow: 0 0 14px rgba(0, 217, 255, 0.4);
  margin: 0;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--color-line);
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  color: #e0e0e0;
}

.modal-body::-webkit-scrollbar {
  width: 10px;
}

.modal-body::-webkit-scrollbar-track {
  background: rgba(6, 1, 18, 0.5);
  border-radius: 0;
}

.modal-body::-webkit-scrollbar-thumb {
  background: var(--color-accent-dim);
  border-radius: 0;
  border: none;
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent);
  box-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
}

.equipment-slot.card-with-image {
  border-color: var(--primary, #00BFFF);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /*border-color: var(--primary, #00BFFF);*/
}

.equipment-slot.card-with-image:hover {
  box-shadow: 0 0 25px rgba(0, 191, 255, 0.7);
  filter: brightness(0.8) contrast(1.1);
}

.card-info {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.95));
  color: white;
  padding: 8px 6px 6px;
  font-size: 11px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  position: absolute;
  z-index: 12;
  border-radius: 0 0 6px 6px;
}

.equipment-slot:hover .card-info {
  opacity: 1;
  transform: translateY(0);
}

.card-name-overlay {
  font-weight: bold;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
  color: #01f5f2;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid #444;
  padding-bottom: 4px;
}

.card-stats-overlay {
  font-size: 14px;
  color: #fff;
  opacity: 0.95;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
  font-weight: 600;
  margin-bottom: 6px;
}

.empty-slot-content:hover {
  /*background: rgba(255, 255, 255, 0.1);
  */
    border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.7);
}

.card {
  position: relative;
  width: 300px;
  height: 400px;
  border: 2px solid #333;
  border-radius: 8px;
  /*background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
  */
    cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
  margin: 5px;
}

.card:hover {
  border-color: var(--primary, #00BFFF);
  box-shadow: 0 0 15px rgba(0, 191, 255, 0.4);
  transform: translateY(-5px);
  /* ADD THIS LINE: */
    filter: brightness(0.7);
}

.equipment-slot:hover {
  /*border-color: var(--primary, #00BFFF);
  */
    transform: translateY(-2px);
  /* ADD THIS LINE: */
    filter: brightness(0.8);
  border-color: rgba(139, 92, 246, 0.6);
  transform: translateY(-4px);
  filter: brightness(1.1);
  /* Just add a glow effect instead of an overlay */
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
  transition: all 0.3s ease;
  border-style: solid;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4),
        0 8px 20px rgba(139, 92, 246, 0.2);
}

.card,
.equipment-slot {
  transition: all 0.3s ease, filter 0.3s ease;
}

.card.card-with-image {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.card.card-with-image .card-header,
.card.card-with-image .card-stats,
.card.card-with-image .card-description {
  position: relative;
  z-index: 2;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  background: rgba(0, 0, 0, 0.6);
  margin: 2px;
  padding: 4px;
  border-radius: 4px;
}

.card.card-with-image .card-name {
  color: white;
  font-weight: bold;
}

.fighter-a .equipment-slot,
.fighter-b .equipment-slot {
  width: 220px;
  height: 310px;
  margin: 2px;
}

.fighter-a .card-info,
.fighter-b .card-info {
  font-size: 10px;
  padding: 6px 4px 4px;
}

.fighter-a .card-name-overlay,
.fighter-b .card-name-overlay {
  font-size: 9px;
}

.fighter-a .card-stats-overlay,
.fighter-b .card-stats-overlay {
  font-size: 8px;
}

.item-btn.card-with-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  font-weight: bold;
  border: 2px solid var(--primary, #00BFFF);
}

.item-btn.card-with-image:hover {
  box-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
  transform: scale(1.05);
}

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  pointer-events: none;
  transition: background 0.3s ease;
}

.equipment-slot:hover .card-overlay {
  background: rgba(0, 0, 0, 0.2);
}

.card-element {
  position: absolute;
  bottom: 4px;
  left: 4px;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: bold;
  color: white;
  text-transform: uppercase;
  z-index: 3;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.equipment-slot.equipment-equipped {
  animation: equipmentGlow 1.5s ease-out;
}

.card-with-image .card-header,
.card-with-image .card-stats,
.card-with-image .card-description {
  background: rgba(0, 0, 0, 0.7) !important;
  color: white !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
  border-radius: 4px;
  margin: 2px;
  padding: 4px;
}

.equipment-slot.filled {
  border-color: var(--yellow, #ffde03);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3),
        0 0 10px rgba(255, 222, 3, 0.2);
  border-style: solid;
}

.equipment-slot.filled h5 {
  display: none;
visibility: hidden;
  opacity: 0;

}

.equipment-slot.filled:hover {
  border-color: var(--accent, #FFD700);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
  filter: brightness(0.9);
}

.equipment-slot::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(
        75deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.1) 20%,
        rgba(255, 255, 255, 0.4) 40%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0.4) 60%,
        rgba(255, 255, 255, 0.1) 80%,
        rgba(255, 255, 255, 0) 100%
    );
  transform: skewX(-20deg);
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.equipment-slot.filled::after {
  animation: cardShine 6s ease-in-out infinite;
  opacity: 0.4;
}

.equipment-slot:hover::after {
  animation: cardShineHover 1.5s ease-out;
  opacity: 1;
}

.equipment-slot.card-with-image::before {
  content: attr(data-element);
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 9px;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 4px;
  border: 1px solid var(--primary, #00BFFF);
  z-index: 15;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s ease;
}

.equipment-slot.card-with-image:hover::before {
  opacity: 1;
  transform: scale(1);
}

.fighter-equipment {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 10px;
  margin-bottom: 20px;
}

#results-screen {
  text-align: center;
  padding: 20px;
  min-height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  padding-top: max(150px, 5vh);
  background: #0a0b1259;
}

#results-screen h1 {
  margin-top: 0;
  margin-bottom: 30px;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--color-accent);
  text-shadow: 0 0 20px rgba(0, 217, 255, 0.4);
}

.final-results {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  gap: 20px;
  margin: 20px 0;
  width: 100%;
  justify-self: center;
  max-width: 1800px;
  align-items: start;
}

.winning-house {
  background-color: rgba(13, 2, 33, 0.7);
  border: 2px solid var(--yellow);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
}

.house-result {
  position: relative;
  background: rgba(13, 2, 33, 0.82);
  border: 1px solid rgba(0, 217, 255, 0.25);
  border-radius: 0;
  padding: 24px 20px;
  text-align: center;
  height: 100%;
  justify-items: center !important;
  justify-content: center !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.house-result.winner {
  --bk: rgba(255, 215, 0, 0.85);
  border-color: rgba(255, 215, 0, 0.75);
  background: rgba(13, 2, 33, 0.82);
  box-shadow: 0 0 24px rgba(255, 215, 0, 0.25), 0 10px 25px rgba(0, 0, 0, 0.5), inset 0 0 40px rgba(255, 215, 0, 0.06);
}

.house-logo {
  width: 120px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0 auto 20px;
  /* Increased from 150px original */
  /* Reduced margin */
  /* Add subtle border */
  height: 120px;
  border: none;
  border-radius: 0;
  filter: drop-shadow(0 0 14px rgba(0, 217, 255, 0.25));
}

.house-result.winner .house-logo {
  filter: drop-shadow(0 0 18px rgba(255, 215, 0, 0.45));
}

.house-logo img {
  width: 150px;
  height: 150px;
  object-fit: contain;
  margin-bottom: 15px;
}

.house-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;
  color: var(--color-bone);
}

.victory-count {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--color-accent);
  text-shadow: 0 0 16px rgba(0, 217, 255, 0.45);
}

.house-result.winner .victory-count {
  color: var(--color-gold);
  text-shadow: 0 0 18px rgba(255, 215, 0, 0.5);
}

.match-summary {
  position: relative;
  background: rgba(13, 2, 33, 0.82);
  border: 1px solid rgba(0, 217, 255, 0.25);
  border-radius: 0;
  padding: 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.match-summary::before {
  content: '';
  position: absolute;
  inset: 6px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.55;
  background:
    linear-gradient(var(--bk), var(--bk)) top left     / 14px 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) top left     / 2px 14px no-repeat,
    linear-gradient(var(--bk), var(--bk)) top right    / 14px 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) top right    / 2px 14px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom left  / 14px 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom left  / 2px 14px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom right / 14px 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom right / 2px 14px no-repeat;
}

.match-summary h2 {
  text-align: center;
  margin-bottom: 20px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-accent);
  text-shadow: 0 0 14px rgba(0, 217, 255, 0.4);
}

.matches-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.matches-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}

.match-row {
  display: grid;
  grid-template-columns: 50px 1fr 1fr;
  gap: 15px;
  background: rgba(6, 1, 18, 0.55);
  padding: 15px;
  border: 1px solid var(--color-line);
  border-radius: 0;
  align-items: center;
  margin-bottom: 10px;
}

.match-result {
  background: #0a0a0a;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.match-number {
  font-weight: 700;
  color: #cccccc;
}

.match-number-display {
  background: linear-gradient(180deg, rgba(0, 217, 255, 0.3) 0%, rgba(0, 217, 255, 0.1) 100%);
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  text-shadow: 0 0 10px rgba(0, 217, 255, 0.6);
  width: 40px;
  height: 40px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
}

.match-fighter {
  padding: 10px;
  border-radius: 5px;
}

.match-fighter.winner {
  background: rgba(0, 217, 255, 0.07);
  border: 1px solid rgba(0, 217, 255, 0.55);
  color: var(--color-bone);
  padding: 15px;
  border-radius: 0;
  box-shadow: inset 0 0 18px rgba(0, 217, 255, 0.06);
}

.match-fighter.loser {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--color-line);
  color: var(--color-ash);
  padding: 15px;
  border-radius: 0;
}

.match-fighter h4 {
  margin: 0 0 8px 0;
  font-size: 1rem;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.match-fighter p {
  margin: 4px 0;
  font-size: 0.9rem;
  text-align: center;
  opacity: 0.9;
}

.match-fighters {
  font-size: 0.9rem;
}

.match-winner {
  font-weight: 700;
  color: var(--color-saga);
  text-shadow: 0 0 10px rgba(55, 255, 139, 0.4);
}

.outpost-result {
  /*background: #0a0a0a;
  /*border: 1px solid #333;
  /*border-radius: 4px;
  */
  padding: 15px;
  text-align: center;
}

.action-buttons {
  display: flex;
  justify-content: center;
  justify-self: center;
  max-width: 1800px;
  /* Increased gap */
  flex-wrap: wrap;
    position: relative;
    z-index: 10;
  gap: 20px;
  margin-top: 36px;
}

.houses-result {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}

.button-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 30px auto;
  flex-wrap: wrap;
  align-items: center;
}

.button-container .cybr-btn {
  min-width: 200px;
  height: 50px;
  margin: 10px 0;
  flex: 0 1 auto;
}

.house-result.loser {
  --bk: rgba(157, 146, 194, 0.35);
  border-color: var(--color-line);
  opacity: 0.82;
}

.house-result::before {
  content: '';
  position: absolute;
  inset: 6px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.55;
  background:
    linear-gradient(var(--bk), var(--bk)) top left     / 14px 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) top left     / 2px 14px no-repeat,
    linear-gradient(var(--bk), var(--bk)) top right    / 14px 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) top right    / 2px 14px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom left  / 14px 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom left  / 2px 14px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom right / 14px 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom right / 2px 14px no-repeat;
}

.btn {
  padding: 12px 24px !important;
  border: none !important;
  border-radius: 4px !important;
  font-family: 'Orbitron', monospace !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  font-size: 14px !important;
  display: inline-block !important;
  text-decoration: none !important;
  text-align: center !important;
}

.btn.primary {
  background: var(--legacy-cyan) !important;
  color: var(--legacy-black) !important;
}

.btn.primary:hover {
  background: #00cccc !important;
  box-shadow: 0 0 10px var(--legacy-cyan) !important;
}

.btn.secondary {
  background: transparent !important;
  color: var(--legacy-cyan) !important;
  border: 1px solid var(--legacy-cyan) !important;
}

.btn.secondary:hover {
  background: var(--legacy-cyan) !important;
  color: var(--legacy-black) !important;
}

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

.combat-btn {
  padding: 15px 30px !important;
  background: var(--legacy-orange) !important;
  color: var(--legacy-white) !important;
  border: none !important;
  border-radius: 4px !important;
  font-family: 'Orbitron', monospace !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  font-size: 16px !important;
  margin: 10px !important;
  transition: all 0.3s ease !important;
}

.combat-btn:hover {
  background: #ff4400 !important;
  box-shadow: 0 0 15px var(--legacy-orange) !important;
}

.cybr-btn:hover {
  --primary-hue: 0;
  --primary-lightness: 50;
}

.cybr-btn:after,
.cybr-btn:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  clip-path: var(--clip);
  z-index: -1;
}

.cybr-btn:before {
  background: var(--shadow-primary);
  transform: translate(var(--border), 0);
}

.cybr-btn:after {
  background: var(--color);
}

.cybr-btn:hover .cybr-btn__glitch {
  display: block;
}

.cybr-btn__glitch:before {
  content: '';
  position: absolute;
  top: calc(var(--border) * 1);
  right: calc(var(--border) * 1);
  bottom: calc(var(--border) * 1);
  left: calc(var(--border) * 1);
  clip-path: var(--clip);
  background: var(--color);
  z-index: -1;
}

#loading-screen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
  background: #000000;
  z-index: 9999;
  padding: 0 !important;
  max-width: none !important;
  overflow: hidden;
}

#loading-screen::before {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: radial-gradient(circle, rgba(0, 255, 255, 0.15) 20%, rgba(13, 2, 33, 0.85) 40%, transparent 70%);
  filter: blur(80px);
  animation: breathingGlow 6s ease-in-out infinite;
}

#loading-screen::after {
  content: '';
  position: absolute;
  top: -150%;
  left: -150%;
  width: 400%;
  height: 400%;
  background: radial-gradient(circle, rgba(13, 2, 33, 0.85) 15%, rgba(0, 255, 255, 0.06) 35%, transparent 60%);
  filter: blur(120px);
  animation: breathingGlow 8s ease-in-out infinite reverse;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100% !important;
  text-align: center;
  position: relative;
  z-index: 1;
}

.loading-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('https://rrxzozvjmhfscano.public.blob.vercel-storage.com/uploads/5612d187-ac9c-496a-8f7e-cd16d2a522fb.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.3;
  /* Adjust for more/less visibility */
    z-index: -1;
  pointer-events: none;
}

.loading-container h1 {
  font-family: 'Orbitron', monospace;
  font-size: 4rem;
  font-weight: 700;
  margin-bottom: 50px;
  color: #01f5f2;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
}

.loading-progress::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
}

#loading-screen.active {
  opacity: 1;
  visibility: visible;
}

#loading-screen:not(.active) {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.card-display {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.equipment-slot {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: all 0.3s ease;
  width: 90px;
  height: 120px;
  background: linear-gradient(145deg, rgba(26, 28, 46, 0.8), rgba(10, 11, 18, 0.9));
  border: 2px dashed rgba(139, 92, 246, 0.3);
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4);
}

.equipment-slot.filled .card-display {
  background-color: rgba(0, 0, 0, 0.3);
}

.card-basic-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.6) 50%, transparent);
  padding: 8px;
  color: white;
  pointer-events: none;
  min-height: 40px;
  z-index: 1;
  text-align: center;
  transition: all 0.3s ease;
}

.card-name-basic {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 2px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  transition: text-shadow 0.3s ease;
}

.card-stats-basic {
  font-size: 10px;
  opacity: 0.9;
  color: #ccc;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  transition: text-shadow 0.3s ease;
}

.card-info-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.95);
  border: 2px solid #01f5f2;
  border-radius: 6px;
  padding: 15px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  transition-delay: 0s;
  /* No delay on hide */
    z-index: 10000;
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(0, 255, 255, 0.3);
}

.equipment-slot:hover .card-info-hover {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.1s;
}

.equipment-slot::before {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  width: 25px;
  /* Increased width */
    height: 100%;
  z-index: 9999;
  pointer-events: auto;
}

.creature-slot::before,
.ability-slot::before {
  left: auto;
  right: 100%;
}

.weapon-slots .weapon-slot:last-child:hover .card-info-hover {
  left: auto;
  right: calc(100% + 10px);
}

.weapon-slots .weapon-slot:last-child::before {
  left: auto;
  right: 100%;
}

.card-class-overlay {
  font-size: 12px;
  color: #888;
  margin-bottom: 10px;
  font-style: italic;
}

.card-element-overlay,
.card-focus-overlay,
.card-activation-overlay {
  font-size: 12px;
  color: #ffaa00;
  margin-bottom: 6px;
  padding: 3px 6px;
  background: rgba(255, 170, 0, 0.1);
  border-left: 3px solid #ffaa00;
}

.card-resistances {
  font-size: 12px;
  margin-bottom: 6px;
  padding: 3px 6px;
  color: #00ff00;
  background: rgba(0, 255, 0, 0.1);
  border-left: 3px solid #00ff00;
}

.card-weaknesses {
  font-size: 12px;
  margin-bottom: 6px;
  padding: 3px 6px;
  color: #ff6666;
  background: rgba(255, 0, 0, 0.1);
  border-left: 3px solid #ff6666;
}

.card-description-overlay {
  font-size: 11px;
  color: #ccc;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #444;
  line-height: 1.4;
  font-style: italic;
}

.equipment-slot:hover .card-basic-info {
  background: linear-gradient(to top, 
        rgba(0,0,0,0.95), 
        rgba(0,0,0,0.7) 50%, 
        transparent);
}

.equipment-slot:hover .card-basic-info .card-name-basic {
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 1),
        0 0 8px rgba(255, 255, 255, 0.3);
}

.equipment-slot:hover .card-basic-info .card-stats-basic {
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 1),
        0 0 6px rgba(255, 255, 255, 0.2);
}

.empty-slot-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: #666;
  font-size: 12px;
  padding: 20px 10px;
}

.empty-slot-title {
  font-weight: bold;
  margin-bottom: 4px;
  font-size: 11px;
}

.empty-slot-subtitle {
  font-size: 10px;
  opacity: 0.7;
}

.empty-slot-available .empty-slot-title {
  color: #00ff00;
}

.empty-slot-locked .empty-slot-title {
  color: #ff4444;
}

.equipment-slot:not(.filled) .card-info-hover {
  display: none;
}

.equipment-slot .empty-slot-content:hover + .card-info-hover,
.equipment-slot:has(.empty-slot-content) .card-info-hover {
  display: none !important;
}

.card-resistance,
.resistance-radiation,
.resistance-arcana,
.resistance-fire,
.resistance-blood,
.resistance-void,
.resistance-chrome,
.resistance-lightning,
.resistance-aether,
.resistance-chroma,
.resistance-rejuvenation,
.resistance-poisoned {
  display: inline-block;
  margin: 2px;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.5px;
}

.card-resistance.radiation,
.card-resistance.irradiated,
.resistance.radiation,
.resistance-radiation {
  background-color: rgba(127, 255, 0, 0.2);
  border: 1px solid rgba(127, 255, 0, 0.5);
  color: #7FFF00;
  box-shadow: 0 0 5px rgba(127, 255, 0, 0.3);
}

.card-resistance.rejuvenation,
.resistance.rejuvenation,
.resistance-rejuvenation {
  background-color: rgba(224, 255, 255, 0.2);
  border: 1px solid rgba(224, 255, 255, 0.5);
  color: #E0FFFF;
  box-shadow: 0 0 5px rgba(224, 255, 255, 0.3);
}

.card-resistance.arcana,
.resistance-arcana {
  background-color: rgba(153, 50, 204, 0.2);
  border: 1px solid #9932CC;
  color: #FF00FF;
}

.card-resistance.fire,
.resistance-fire {
  background-color: rgba(255, 69, 0, 0.2);
  border: 1px solid rgba(255, 69, 0, 0.5);
  color: #FF4500;
}

.card-resistance.blood,
.resistance-blood {
  background-color: rgba(220, 20, 60, 0.2);
  border: 1px solid rgba(220, 20, 60, 0.5);
  color: #DC143C;
}

.card-resistance.void,
.resistance-void {
  background-color: rgba(138, 43, 226, 0.2);
  border: 1px solid rgba(138, 43, 226, 0.5);
  color: #8A2BE2;
}

.card-resistance.lightning,
.resistance-lightning {
  background-color: rgba(0, 255, 255, 0.2);
  border: 1px solid rgba(0, 255, 255, 0.5);
  color: #00FFFF;
}

.card-resistance.aether,
.resistance-aether {
  background-color: rgba(64, 224, 208, 0.2);
  border: 1px solid rgba(64, 224, 208, 0.5);
  color: #40E0D0;
}

.card-resistance.chroma,
.resistance-chroma {
  background: linear-gradient(45deg, rgba(255, 0, 255, 0.2), rgba(0, 255, 255, 0.2), rgba(255, 255, 0, 0.2));
  border: 1px solid #FF00FF;
  color: #FFF;
  animation: chromaResistanceShimmer 2s infinite linear;
}

.card-resistance.poison,
.card-resistance.poisoned,
.resistance-poison,
.resistance-poisoned {
  background-color: rgba(154, 205, 50, 0.2);
  border: 1px solid rgba(154, 205, 50, 0.5);
  color: #9ACD32;
  box-shadow: 0 0 5px rgba(154, 205, 50, 0.3);
}

.card-resistance.ice {
  background-color: rgba(135, 206, 235, 0.2);
  border: 1px solid rgba(135, 206, 235, 0.5);
  color: #87CEEB;
}

.card-resistance.chrome {
  background-color: rgba(192, 192, 192, 0.2);
  border: 1px solid rgba(192, 192, 192, 0.5);
  color: #C0C0C0;
}

.card-weakness {
  display: inline-block;
  margin: 2px;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
  background-color: rgba(255, 0, 0, 0.1);
  border: 1px solid rgba(255, 0, 0, 0.3);
  color: #ff6666;
}

.card-special {
  display: inline-block;
  margin-top: 5px;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 0.8em;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.card-special.rejuvenation {
  background-color: rgba(224, 255, 255, 0.2);
  border: 1px solid rgba(224, 255, 255, 0.5);
  color: #E0FFFF;
  box-shadow: 0 0 5px rgba(224, 255, 255, 0.3);
}

.card-special.deflection {
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

.card-special.environmental {
  background-color: rgba(46, 125, 50, 0.2);
  border: 1px solid rgba(46, 125, 50, 0.5);
  color: #2E7D32;
  box-shadow: 0 0 5px rgba(46, 125, 50, 0.3);
}

.card-sigil-type {
  font-size: 0.8em;
  color: var(--yellow);
  margin-top: 8px;
  margin-bottom: 5px;
  text-align: center;
  padding: 3px 6px;
  background-color: rgba(255, 222, 3, 0.2);
  border: 1px solid rgba(255, 222, 3, 0.4);
  border-radius: 3px;
  text-transform: uppercase;
  font-weight: bold;
  display: inline-block;
  letter-spacing: 1px;
  box-shadow: 0 0 3px rgba(255, 222, 3, 0.2);
}

[class^="effect-"] {
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: bold;
  margin: 2px;
  text-transform: uppercase;
  color: #ffffff;
}

.effect-cybernetics {
  background-color: rgba(30, 144, 255, 0.2);
  border: 1px solid rgba(30, 144, 255, 0.5);
  color: #1E90FF;
}

.effect-irradiated {
  background-color: rgba(127, 255, 0, 0.2);
  border: 1px solid rgba(127, 255, 0, 0.5);
  color: #7FFF00;
}

.effect-rejuvenation {
  background-color: rgba(0, 255, 127, 0.2);
  border: 1px solid rgba(0, 255, 127, 0.5);
  color: #00FF7F;
}

.effect-arcana {
  background-color: rgba(153, 50, 204, 0.2);
  border: 1px solid #9932CC;
  color: #FF00FF;
}

.effect-poisoned {
  background-color: rgba(154, 205, 50, 0.2);
  border: 1px solid rgba(154, 205, 50, 0.5);
  color: #9ACD32;
}

.effect-weapons-cache {
  background-color: rgba(255, 69, 0, 0.2);
  border: 1px solid rgba(255, 69, 0, 0.5);
  color: #FF4500;
}

.effect-power-generation {
  background-color: rgba(255, 215, 0, 0.2);
  border: 1px solid rgba(255, 215, 0, 0.5);
  color: #FFD700;
}

.card-filters select {
  padding: 8px 12px;
  background: #333;
  border: 1px solid #555;
  border-radius: 4px;
  color: #ffffff;
  font-family: 'Roboto', sans-serif;
}

.cards-container {
  display: block;
  padding: 20px;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  text-align: center;
  box-sizing: border-box;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  justify-content: center;
  align-items: start;
  background: rgba(13, 2, 33, 0.5);
  border-radius: 10px;
}

.card-item {
  display: flex;
  width: 300px;
  height: 420px;
  margin: 10px;
  vertical-align: top;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--primary);
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
}

.card-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1;
  border-radius: 5px;
  pointer-events: none;
  transition: background 0.3s ease;
}

.card-item:hover::before {
  background: rgba(0,0,0,0.85);
}

.card-item > * {
  position: relative;
  z-index: 2;
}

.card-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 243, 255, 0.3);
  border-color: var(--yellow);
}

.card-content {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  z-index: 2;
}

.card-image {
  display: none;
}

.card-title,
.card-stats,
.card-type,
.card-effect,
.card-description,
.card-sigil-type,
.card-resistance,
.card-ap,
.card-dam,
.card-special {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.card-item:hover .card-title,
.card-item:hover .card-stats,
.card-item:hover .card-type,
.card-item:hover .card-effect,
.card-item:hover .card-description,
.card-item:hover .card-sigil-type,
.card-item:hover .card-resistance,
.card-item:hover .card-ap,
.card-item:hover .card-dam,
.card-item:hover .card-special {
  opacity: 1;
  visibility: visible;
}

.card-title {
  font-size: 1em;
  color: var(--yellow);
  text-align: center;
  margin-bottom: 15px;
  font-weight: bold;
}

.card-stats {
  display: flex;
  justify-content: center;
  gap: 30px;
  font-size: 0.9em;
  margin-bottom: 10px;
  font-weight: bold;
}

.card-ap {
  color: var(--primary);
}

.card-dam {
  color: var(--secondary);
}

.card-type {
  font-size: 0.8em;
  color: var(--accent);
  margin: 8px 0;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
}

.card-effect {
  font-size: 0.8em;
  color: var(--primary);
  margin: 8px 0;
  text-align: center;
  font-weight: bold;
}

.card-description {
  font-size: 0.75em;
  color: var(--light);
  margin: 8px 0;
  text-align: center;
  line-height: 1.3;
}

.clear-card {
  background-color: rgba(255, 0, 60, 0.2);
  border: 2px dashed var(--secondary);
  transition: all 0.3s ease;
}

.clear-card:hover {
  background-color: rgba(255, 0, 60, 0.4);
  border-style: solid;
  transform: translateY(-5px);
}

.clear-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 20px;
}

.clear-icon {
  font-size: 2.5em;
  color: var(--secondary);
  margin-bottom: 10px;
}

.clear-text {
  color: var(--light);
  font-weight: bold;
  text-align: center;
}

.card-search-container {
  display: flex;
  align-items: center;
  margin: 10px 0;
  background: rgba(20, 20, 40, 0.8);
  border: 1px solid #3c0c77;
  border-radius: 4px;
  padding: 0 10px;
  width: 95%;
}

.card-search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--primary);
  font-family: 'Orbitron', sans-serif;
  padding: 8px;
  outline: none;
}

.search-icon {
  color: var(--primary);
  opacity: 0.7;
}

.no-results-message {
  padding: 20px;
  text-align: center;
  color: var(--primary);
  font-style: italic;
}

.filter-info {
  padding: 5px 10px;
  background: rgba(13, 2, 33, 0.7);
  border-radius: 4px;
  margin: 5px 10px;
  font-size: 0.8em;
  color: var(--primary);
}

.fighter, 
.fighter-a, 
.fighter-b,
.fighter-card,
.fighter-display,
.damage-indicator,
.equipment-slot,
.card-slot {
  will-change: transform, opacity, box-shadow;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

#combat-screen,
.combat-display,
.fighters-display {
  overflow: visible;
}

.debug-animation {
  border: 3px dashed #FF00FF;
  position: relative;
}

.debug-animation::after {
  content: 'ANIM DEBUG';
  position: absolute;
  top: -20px;
  left: 0;
  background: #FF00FF;
  color: #FFF;
  padding: 2px 5px;
  font-size: 10px;
  font-weight: bold;
}

.battle-notification.immune {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.9), rgba(255, 255, 255, 0.8));
  color: #1a1a2e;
  border: 2px solid #ffd700;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

.deflect-debug-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  background: linear-gradient(45deg, #ffde03, #ffa500);
  color: #000;
  font-size: 0.8em;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 6px;
  box-shadow: 0 0 8px rgba(255, 222, 3, 0.8);
  z-index: 100;
  animation: pulseBadge 1s infinite alternate;
}

.damage-indicator[class*="deflect-indicator"] {
  font-size: 1.2em;
  padding: 4px 10px;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
  border: 1px solid #fff;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
  color: #000;
  font-weight: bold;
  text-shadow: none;
  animation: deflectIndicatorPulse 0.5s infinite alternate;
}

@keyframes damageFloatRise {
    0%   { opacity: 0; transform: translateX(-50%) translateY(12px) scale(0.6); }
    12%  { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1.15); }
    26%  {             transform: translateX(-50%) translateY(-8px) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-85px) scale(1); }
}

.lightning-deflect-indicator {
  background: linear-gradient(45deg, #00FFFF, #00BFFF);
  border: 2px solid #00FFFF;
  color: white;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.7);
}

.fire-deflect-indicator {
  background: linear-gradient(45deg, #FF4500, #FF8C00);
  border: 2px solid #FF4500;
  color: white;
  text-shadow: 0 0 5px rgba(255, 69, 0, 0.7);
}

.chroma-deflect-indicator {
  background: linear-gradient(45deg, #FF00FF, #9932CC);
  border: 2px solid #FF00FF;
  color: white;
  text-shadow: 0 0 5px rgba(255, 0, 255, 0.7);
}

.blood-deflect-indicator {
  background: linear-gradient(45deg, #8B0000, #DC143C);
  border: 2px solid #8B0000;
  color: white;
  text-shadow: 0 0 5px rgba(139, 0, 0, 0.7);
}

.aether-deflect-indicator {
  background: linear-gradient(45deg, #40E0D0, #20B2AA);
  border: 2px solid #40E0D0;
  color: white;
  text-shadow: 0 0 5px rgba(64, 224, 208, 0.7);
}

.void-deflect-indicator {
  background: linear-gradient(45deg, #4B0082, #8A2BE2);
  border: 2px solid #4B0082;
  color: white;
  text-shadow: 0 0 5px rgba(75, 0, 130, 0.7);
}

.dam-value.biohazard-reduced {
  color: #22c55e;
  text-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
  animation: biohazard-pulse 2s infinite;
}

.dam-value.biohazard-reduced::after {
  content: "↓";
  font-size: 0.8em;
  color: #22c55e;
  margin-left: 2px;
  animation: bounce 1s infinite;
}

.ability-btn.streak-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  background: #2C3E50;
  border: 2px solid #34495E;
  color: white;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ability-btn.streak-charging {
  animation: streak-charging-pulse 2s ease-in-out infinite;
  border-color: rgba(255, 215, 0, 0.5);
}

.ability-btn.streak-charging::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  width: var(--progress, 0%);
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 215, 0, 0.3), 
    rgba(255, 215, 0, 0.1)
  );
  transition: width 0.5s ease;
  z-index: 0;
}

.ability-btn.streak-btn > * {
  position: relative;
  z-index: 1;
}

.ability-btn.streak-active {
  animation: streak-active-glow 1.5s ease-in-out infinite;
  border-color: rgba(255, 215, 0, 0.8);
  background: linear-gradient(135deg, #3C4B2C, #4A5D38);
}

.ability-btn.streak-max {
  animation: streak-max-blaze 1s ease-in-out infinite;
  border-color: rgba(255, 69, 0, 0.9);
  background: linear-gradient(135deg, #8B2500, #FF4500);
  color: white;
}

.ability-btn.streak-inactive {
  opacity: 0.6;
  border-color: rgba(128, 128, 128, 0.5);
  background: #1C2833;
}

.ability-btn.streak-charging[data-progress="75"],
.ability-btn.streak-charging[data-progress="100"] {
  animation: streak-ready-pulse 0.8s ease-in-out infinite;
}

.ability-btn.streak-btn.streak-activating {
  animation: streak-activation-burst 0.5s ease-out;
}

.stat-poisoned {
  color: #4B8B3B !important;
  text-shadow: 0 0 10px #4B8B3B;
  animation: pulse 2s infinite;
}

.stat-contaminated {
  color: #6B8E23 !important;
  text-shadow: 0 0 15px #6B8E23;
  animation: pulse 2s infinite, shake 0.1s infinite;
}

.stat-underdog {
  font-weight: bold;
}

.stat-streak {
  font-weight: bold;
  font-style: italic;
}

.stat-divine {
  color: #FFD700 !important;
  text-shadow: 0 0 20px #FFD700, 0 0 30px #FFF;
  animation: shimmer 2s infinite;
}

.dam-value.dam-underdog {
  font-weight: bold;
  transition: all 0.3s ease;
}

.dam-value.dam-underdog-low {
  color: #FFA500;
  text-shadow: 0 0 5px rgba(255, 165, 0, 0.5);
  transform: scale(1.05);
}

.dam-value.dam-underdog-medium {
  color: #FF6347;
  text-shadow: 0 0 10px rgba(255, 99, 71, 0.7);
  transform: scale(1.1);
  animation: pulse-glow 1.5s infinite;
}

.dam-value.dam-underdog-high {
  color: #FF4500;
  text-shadow: 0 0 15px rgba(255, 69, 0, 0.9);
  transform: scale(1.15);
  animation: pulse-glow 1s infinite;
}

.dam-value.dam-underdog-max {
  color: #DC143C;
  text-shadow: 0 0 20px rgba(220, 20, 60, 1),
                 0 0 30px rgba(255, 0, 0, 0.5);
  transform: scale(1.2);
  animation: pulse-glow 0.5s infinite, shake-scale 0.1s infinite;
}

.dam-value.dam-poison {
  color: #4B8B3B;
  text-shadow: 0 0 10px rgba(75, 139, 59, 0.7);
  animation: poison-pulse 2s infinite;
}

.dam-value.dam-streak {
  color: #FFD700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
  font-style: italic;
}

.stat-display .dam-value.dam-underdog {
  font-weight: bold;
  transition: all 0.3s ease;
}

.dam-value.biohazard-reduced,
.dam-value.dam-poison {
  color: #4B8B3B !important;
  text-shadow: 0 0 10px rgba(75, 139, 59, 0.7);
  animation: poison-pulse 2s infinite;
}

.dam-value.dam-debuffed {
  color: #ff6b6b !important;
  text-shadow: 0 0 8px rgba(255, 107, 107, 0.7);
  animation: debuff-pulse 2s infinite;
}

.dam-value.dam-buffed {
  color: #00bfff !important;
  text-shadow: 0 0 10px rgba(0, 191, 255, 0.7);
  animation: buff-glow 1.5s infinite;
}

#creature-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  display: none;
}

#creature-overlay.active {
  display: block;
}

.creature-container {
  position: absolute;
  width: 600px;
  height: 800px;
  top: 80%;
  transform: translateY(-50%);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  border: 0px !important;
}

.creature-container.fighter1 {
  left: -350px;
}

.creature-container.fighter2 {
  right: -350px;
}

.creature-container.fighter1.show {
  left: 100px;
  opacity: 1;
}

.creature-container.fighter2.show {
  right: 100px;
  opacity: 1;
}

.creature-container.fighter2 .creature-image {
  transform: scaleX(-1);
}

.creature-image.damage-animation {
  animation: creature-take-damage 1.2s ease-out;
}

.creature-image.heal-animation {
  animation: creature-heal 1.5s ease-in-out;
}

.creature-image.hit-animation {
  animation: creature-deal-hit 1s ease-out;
}

.creature-image.shield-animation {
  animation: creature-shield 1.5s ease-in-out;
}

.creature-image.arcana-animation {
  animation: creature-arcana 2s ease-in-out;
}

.creature-image.buff-animation {
  animation: creature-buff 1.5s ease-in-out;
}

.creature-container.entrance {
  animation: creature-entrance 0.8s ease-out forwards;
}

.creature-container.exit {
  animation: creature-exit 0.6s ease-out forwards;
}

.creature-label {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  border: 2px solid rgba(255, 255, 255, 0.3);
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.dodge-afterimage {
  animation: dodge-afterimage 0.6s ease-out;
  position: relative;
}

.dodge-afterimage::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 70%);
  animation: dodge-flash 0.6s ease-out;
  pointer-events: none;
}

.fighter.rejuvenation-environmental,
.rejuvenation-environmental {
  animation: rejuvenation-environmental var(--environmental-duration) ease-out var(--environmental-delay) !important;
  border: 2px solid var(--rejuvenation-color) !important;
  box-shadow: 0 0 15px rgba(224, 255, 255, 0.4) !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: #E0FFFF !important;
}

.fighter.radiation-environmental,
.radiation-environmental {
  animation: radiation-environmental var(--environmental-duration) ease-in-out var(--environmental-delay) !important;
  filter: drop-shadow(0 0 3px rgba(127, 255, 0, 0.2));
  border-width: 2px !important;
  border-style: solid !important;
  border-color: #7FFF00 !important;
  box-shadow: 0 0 15px rgba(127, 255, 0, 0.4) !important;
}

.fighter.poison-environmental,
.poison-environmental {
  animation: poison-environmental var(--environmental-duration) ease-out var(--environmental-delay) !important;
  filter: drop-shadow(0 0 5px rgba(154, 205, 50, 0.3));
  border-width: 2px !important;
  border-style: solid !important;
  border-color: #9ACD32 !important;
  box-shadow: 0 0 15px rgba(154, 205, 50, 0.4) !important;
}

.fighter.cybernetics-environmental,
.cybernetics-environmental {
  animation: cybernetics-pulse 1.2s ease-out !important;
  filter: contrast(1) brightness(1);
}

.fighter.radiation-damage,
.radiation-damage {
  animation: radiation-pulse 1.1s ease-out !important;
}

.fighter.armed,
.armed {
  animation: armed-preparation 0.8s ease-out !important;
  border: 2px solid rgba(255, 215, 0, 0.6) !important;
}

.fighter.damaged,
.fighter.takeDamage {
  animation: takeDamage var(--combat-duration) ease-out !important;
  border-width: 2px !important;
  border-style: solid !important;
}

.fighter.heavy-damage {
  animation: takeDamage var(--combat-duration) ease-out, 
             damageShake 0.6s ease-out !important;
  border-width: 4px !important;
  border-style: solid !important;
}

.fighter.fire-damage,
.fire-damage {
  animation: fire-pulse var(--combat-duration) ease-out !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: #FF4500 !important;
  box-shadow: 0 0 15px rgba(255, 69, 0, 0.4) !important;
}

.fighter.lightning-damage,
.lightning-damage {
  animation: lightning-pulse 2s ease-out !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: #00FFFF !important;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.4) !important;
}

.fighter.void-damage,
.void-damage {
  animation: void-pulse 3s ease-out !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: #4B0082 !important;
  box-shadow: 0 0 15px rgba(75, 0, 130, 0.4) !important;
}

.fighter.aether-damage,
.aether-damage {
  animation: aether-pulse var(--combat-duration) ease-out !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: #40E0D0 !important;
  box-shadow: 0 0 15px rgba(64, 224, 208, 0.4) !important;
}

.fighter.blood-damage,
.blood-damage {
  animation: blood-pulse var(--combat-duration) ease-out !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: #8B0000 !important;
  box-shadow: 0 0 15px rgba(139, 0, 0, 0.4) !important;
}

.fighter.chroma-damage,
.chroma-damage {
  animation: chroma-pulse 3s linear !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: #FF00FF !important;
  box-shadow: 0 0 15px rgba(255, 0, 255, 0.4) !important;
}

.fighter.arcana-damage,
.arcana-damage {
  animation: arcana-pulse var(--combat-duration) ease-in-out !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: #9932CC !important;
  box-shadow: 0 0 15px rgba(153, 50, 204, 0.4) !important;
}

.fighter.cybernetics-damage,
.cybernetics-damage {
  animation: cybernetics-pulse var(--combat-duration) ease-out !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: #00FFFF !important;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.4) !important;
}

/* SHADOW — monochrome with alternating black/white inversion */
.shadow-active {
    animation: shadow-flicker 1.2s linear infinite !important;
}

@keyframes shadow-flicker {
    0%     { filter: grayscale(100%) brightness(0.85) invert(0); }
    49.9%  { filter: grayscale(100%) brightness(0.85) invert(0); }
    50%    { filter: grayscale(100%) brightness(0.85) invert(1); }
    100%   { filter: grayscale(100%) brightness(0.85) invert(1); }
}

.sphere-shield {
  /* Default shield colors (blue) - using unique variable names */
  --shield-orb-main: 100, 149, 237;
  --shield-orb-alt: 65, 105, 225;
  --shield-orb-glow: 173, 216, 230;
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--orb-size);
  height: var(--orb-size);
  transform: translate(-50%, -50%) translateZ(0);
  pointer-events: none;
  z-index: 100;
  /* Above fighter content but below UI */
  display: none;
  perspective: 1000px;
  transform-style: preserve-3d;
}

.sphere-shield.shield-active {
  display: block !important;
}

.orb-body {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  transform: translateZ(0);
  will-change: transform, box-shadow;
  transform-style: preserve-3d;
  background: radial-gradient(circle at 30% 30%, 
      rgba(255, 255, 255, 0.9) 0%,
      rgba(var(--shield-orb-glow), 0.7) 5%,
      rgba(var(--shield-orb-main), 0.5) 15%,
      rgba(var(--shield-orb-main), 0.4) 30%,
      rgba(var(--shield-orb-alt), 0.3) 45%,
      rgba(var(--shield-orb-alt), 0.25) 60%,
      rgba(var(--shield-orb-main), 0.2) 75%,
      transparent 90%);
  box-shadow: 0 0 calc(60px * var(--pulse-intensity)) rgba(var(--shield-orb-main), 0.6),
    0 0 calc(120px * var(--pulse-intensity)) rgba(var(--shield-orb-alt), 0.4),
    inset -15px -15px 30px rgba(0, 0, 0, 0.2),
    inset 15px 15px 30px rgba(var(--shield-orb-glow), 0.3);
}

.orb-body::before {
  content: '';
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle at 70% 70%, 
    transparent 30%, 
    rgba(255, 255, 255, 0.1) 50%, 
    transparent 70%);
  transform: rotate(-45deg) translateZ(10px);
  pointer-events: none;
}

.orb-body::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 2px 0 0 rgba(255, 0, 0, 0.1),
    inset -2px 0 0 rgba(0, 255, 255, 0.1);
  mix-blend-mode: screen;
  opacity: 0.5;
  pointer-events: none;
}

.surface-container {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  mask-image: radial-gradient(circle, black 40%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle, black 40%, transparent 70%);
  transform: translateZ(0);
  will-change: transform;
}

.surface-grid {
  position: absolute;
  width: 300%;
  height: 100%;
  left: -100%;
  top: 0;
  background-image: repeating-linear-gradient(
      90deg,
      transparent,
      transparent 20px,
      rgba(var(--shield-orb-main), 0.3) 20px,
      rgba(var(--shield-orb-main), 0.3) 22px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 20px,
      rgba(var(--shield-orb-main), 0.2) 20px,
      rgba(var(--shield-orb-main), 0.2) 22px
    );
  animation: surface-rotate calc(6s / var(--animation-speed)) linear infinite;
  transform: translateZ(0);
  will-change: transform;
}

.hex-pattern {
  position: absolute;
  width: 300%;
  height: 100%;
  left: -100%;
  top: 0;
  opacity: 0.4;
  background-image: radial-gradient(circle, rgba(var(--shield-orb-main), 0.3) 2px, transparent 2px),
    radial-gradient(circle, rgba(var(--shield-orb-main), 0.3) 2px, transparent 2px);
  background-size: 30px 52px;
  background-position: 0 0, 15px 26px;
  animation: hex-rotate calc(8s / var(--animation-speed)) linear infinite;
  transform: translateZ(0);
  will-change: transform;
}

.distortion-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  transform-style: preserve-3d;
}

.distortion-band {
  position: absolute;
  height: 100%;
  width: 15%;
  left: -15%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--shield-orb-main), 0.15) 50%,
    transparent 100%
  );
  transform: translateZ(0);
  will-change: transform, opacity;
}

.distortion-band:nth-child(1) {
  animation: band-move calc(4s / var(--animation-speed)) ease-in-out infinite;
}

.distortion-band:nth-child(2) {
  animation: band-move calc(4s / var(--animation-speed)) ease-in-out infinite 1s;
}

.distortion-band:nth-child(3) {
  animation: band-move calc(4s / var(--animation-speed)) ease-in-out infinite 2s;
}

.distortion-band:nth-child(4) {
  animation: band-move calc(4s / var(--animation-speed)) ease-in-out infinite 3s;
}

.energy-flow {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  opacity: 0.6;
}

.energy-stream {
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--shield-orb-main), 0.8) 10%,
    rgba(var(--shield-orb-glow), 1) 50%,
    rgba(var(--shield-orb-main), 0.8) 90%,
    transparent 100%
  );
  transform: translateZ(0);
  will-change: opacity;
}

.energy-stream:nth-child(1) {
  top: 25%;
  transform: translateY(-50%) scaleX(0.6) translateZ(0);
  animation: energy-pulse calc(3s / var(--animation-speed)) ease-in-out infinite;
}

.energy-stream:nth-child(2) {
  top: 40%;
  transform: translateY(-50%) scaleX(0.85) translateZ(0);
  animation: energy-pulse calc(3s / var(--animation-speed)) ease-in-out infinite 0.5s;
}

.energy-stream:nth-child(3) {
  top: 50%;
  transform: translateY(-50%) translateZ(0);
  animation: energy-pulse calc(3s / var(--animation-speed)) ease-in-out infinite 1s;
}

.energy-stream:nth-child(4) {
  top: 60%;
  transform: translateY(-50%) scaleX(0.85) translateZ(0);
  animation: energy-pulse calc(3s / var(--animation-speed)) ease-in-out infinite 1.5s;
}

.energy-stream:nth-child(5) {
  top: 75%;
  transform: translateY(-50%) scaleX(0.6) translateZ(0);
  animation: energy-pulse calc(3s / var(--animation-speed)) ease-in-out infinite 2s;
}

.meridians {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  opacity: 0.2;
  transform-style: preserve-3d;
}

.meridian {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(var(--shield-orb-main), 0.2);
  transform-style: preserve-3d;
}

.meridian:nth-child(1) {
  transform: rotateY(0deg) translateZ(0);
  border-width: 2px;
  opacity: 0.4;
}

.meridian:nth-child(2) {
  transform: rotateY(45deg) translateZ(0);
  opacity: 0.2;
}

.meridian:nth-child(3) {
  transform: rotateY(90deg) translateZ(0);
  border-width: 1px;
  opacity: 0.1;
}

.orb-highlight {
  position: absolute;
  width: 40%;
  height: 40%;
  top: 15%;
  left: 15%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(255, 255, 255, 0.3) 30%,
    transparent 70%
  );
  filter: blur(10px);
  animation: highlight-shift calc(10s / var(--animation-speed)) ease-in-out infinite;
  transform: translateZ(20px);
}

.particle-field {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform-style: preserve-3d;
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(var(--shield-orb-main), 0.8);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(var(--shield-orb-main), 0.6);
  transform: translateZ(0);
  will-change: transform, opacity;
}

.particle:nth-child(1) {
  top: 20%;
  left: 10%;
  --x1: 0px;
  --y1: 0px;
  --x2: 30px;
  --y2: -20px;
  --scale1: 1;
  --scale2: 1.5;
  animation: float-universal calc(6s / var(--animation-speed)) infinite;
}

.particle:nth-child(2) {
  top: 70%;
  left: 80%;
  --x1: 0px;
  --y1: 0px;
  --x2: -25px;
  --y2: -30px;
  --scale1: 1;
  --scale2: 1.3;
  animation: float-universal calc(7s / var(--animation-speed)) infinite;
}

.particle:nth-child(3) {
  top: 40%;
  left: 90%;
  --x1: 0px;
  --y1: 0px;
  --x2: -20px;
  --y2: 25px;
  --scale1: 1;
  --scale2: 1.4;
  animation: float-universal calc(8s / var(--animation-speed)) infinite;
}

.particle:nth-child(4) {
  top: 80%;
  left: 20%;
  --x1: 0px;
  --y1: 0px;
  --x2: 35px;
  --y2: 15px;
  --scale1: 1;
  --scale2: 1.2;
  animation: float-universal calc(5s / var(--animation-speed)) infinite;
}

.particle:nth-child(5) {
  top: 10%;
  left: 60%;
  --x1: 0px;
  --y1: 0px;
  --x2: 15px;
  --y2: -35px;
  --scale1: 1;
  --scale2: 1.6;
  animation: float-universal calc(9s / var(--animation-speed)) infinite;
}

.particle:nth-child(6) {
  top: 60%;
  left: 40%;
  --x1: 0px;
  --y1: 0px;
  --x2: -30px;
  --y2: 20px;
  --scale1: 1;
  --scale2: 1.3;
  animation: float-universal calc(6.5s / var(--animation-speed)) infinite;
}

.sphere-shield.shield-activating {
  display: block !important;
  animation: orb-materialize 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.sphere-shield.shield-deactivating {
  animation: orb-dematerialize 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.sphere-shield.shield-active .orb-body {
  animation: active-pulse calc(2s / var(--animation-speed)) ease-in-out infinite;
}

.sphere-shield.shield-damaged .orb-body {
  animation: damage-flash 0.3s ease-out;
}

.sphere-shield.shield-protecting {
  animation: shield-forcefield 0.4s ease-in-out !important;
}

.sphere-shield.shield-low-integrity .orb-body {
  animation: integrity-warning 1s ease-in-out infinite;
}

.sphere-shield.shield-fire {
  --shield-orb-main: var(--shield-fire-color-main);
  --shield-orb-alt: var(--shield-fire-color-alt);
  --shield-orb-glow: var(--shield-fire-color-glow);
}

.sphere-shield.shield-fire .particle {
  animation: float-universal calc(4s / var(--animation-speed)) infinite, flicker 0.2s infinite;
}

.sphere-shield.shield-lightning {
  --shield-orb-main: var(--shield-lightning-color-main);
  --shield-orb-alt: var(--shield-lightning-color-alt);
  --shield-orb-glow: var(--shield-lightning-color-glow);
}

.sphere-shield.shield-lightning .energy-stream {
  animation: energy-pulse calc(1.5s / var(--animation-speed)) ease-in-out infinite, electric-spark 0.1s infinite;
}

.sphere-shield.shield-void {
  --shield-orb-main: var(--shield-void-color-main);
  --shield-orb-alt: var(--shield-void-color-alt);
  --shield-orb-glow: var(--shield-void-color-glow);
}

.sphere-shield.shield-void .orb-body {
  animation: active-pulse calc(2s / var(--animation-speed)) ease-in-out infinite, void-warp 5s ease-in-out infinite;
}

.sphere-shield.shield-aether {
  --shield-orb-main: var(--shield-aether-color-main);
  --shield-orb-alt: var(--shield-aether-color-alt);
  --shield-orb-glow: var(--shield-aether-color-glow);
}

.sphere-shield.shield-aether .distortion-band {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--shield-orb-main), 0.3) 25%,
    rgba(var(--shield-orb-glow), 0.5) 50%,
    rgba(var(--shield-orb-main), 0.3) 75%,
    transparent 100%
  );
}

.sphere-shield.shield-blood {
  --shield-orb-main: var(--shield-blood-color-main);
  --shield-orb-alt: var(--shield-blood-color-alt);
  --shield-orb-glow: var(--shield-blood-color-glow);
}

.sphere-shield.shield-blood .particle {
  animation: float-universal calc(8s / var(--animation-speed)) infinite, blood-drip 3s ease-in infinite;
}

.sphere-shield.shield-physical {
  --shield-orb-main: var(--shield-physical-color-main);
  --shield-orb-alt: var(--shield-physical-color-alt);
  --shield-orb-glow: var(--shield-physical-color-glow);
}

.fighter.shield-damage {
  /* Preserve existing shield-damage animation if needed */
  position: relative;
}

.aetherial-shield-indicator {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, rgba(64, 224, 208, 0.95), rgba(0, 206, 209, 0.95));
  padding: 5px 15px;
  border-radius: 50%;
  font-size: 12px;
  letter-spacing: 1px;
  display: flex;
  backdrop-filter: blur(10px);
  z-index: 15;
  top: -8px;
  right: -8px;
  width: 45px;
  height: 45px;
  border: 2px solid #40E0D0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 15px rgba(64, 224, 208, 0.7);
  animation: shieldPulse var(--indicator-pulse-speed) infinite;
}

.sphere-shield.shield-active ~ .aetherial-shield-indicator {
  display: block;
}

.damage-indicator.shield-indicator {
  z-index: 102;
}

.fighter.nullify-damage,
.fighter.purge-damage,
.fighter.dispel-damage,
.nullify-damage,
.purge-damage,
.dispel-damage {
  animation: dark-magic-cleanse var(--combat-duration, 1s) ease-out !important;
  position: relative;
  overflow: visible;
}

.fighter.nullify-damage::before,
.fighter.purge-damage::before,
.fighter.dispel-damage::before,
.nullify-damage::before,
.purge-damage::before,
.dispel-damage::before {
  content: '';
  position: absolute;
  top: -15px;
  left: -15px;
  right: -15px;
  bottom: -15px;
  background: radial-gradient(circle at 20% 30%, rgba(75, 0, 130, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(138, 43, 226, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 60% 20%, rgba(148, 0, 211, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(0, 0, 0, 0.4) 0%, transparent 60%),
    linear-gradient(90deg, transparent 48%, rgba(75, 0, 130, 0.2) 49%, rgba(75, 0, 130, 0.2) 51%, transparent 52%),
    linear-gradient(0deg, transparent 48%, rgba(138, 43, 226, 0.15) 49%, rgba(138, 43, 226, 0.15) 51%, transparent 52%);
  animation: dark-smoke-swirl-glitch var(--combat-duration, 1s) ease-out;
  pointer-events: none;
  z-index: 5;
  border-radius: inherit;
}

.fighter.nullify-damage::after,
.fighter.purge-damage::after,
.fighter.dispel-damage::after,
.nullify-damage::after,
.purge-damage::after,
.dispel-damage::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  height: 150%;
  transform: translate(-50%, -50%) scale(0);
  background: url('https://grandsaga.online/wp-content/uploads/2025/07/Arcana-Dispel.png') center/contain no-repeat;
  filter: drop-shadow(0 0 25px rgba(75, 0, 130, 1))
    drop-shadow(0 0 50px rgba(138, 43, 226, 0.9))
    drop-shadow(0 0 75px rgba(148, 0, 211, 0.7))
    drop-shadow(0 0 100px rgba(0, 0, 0, 0.8))
    brightness(2)
    contrast(2.5)
    saturate(2);
  animation: dramatic-arcane-manifestation var(--combat-duration, 1s) ease-out;
  pointer-events: none;
  z-index: 15;
  mix-blend-mode: screen;
}

.fighter.dispel-damage::before,
.dispel-damage::before {
  background: linear-gradient(45deg, transparent 0%, rgba(75, 0, 130, 0.4) 25%, transparent 50%, rgba(138, 43, 226, 0.3) 75%, transparent 100%),
    linear-gradient(-45deg, transparent 0%, rgba(148, 0, 211, 0.3) 25%, transparent 50%, rgba(0, 0, 0, 0.5) 75%, transparent 100%),
    linear-gradient(90deg, transparent 48%, rgba(75, 0, 130, 0.3) 49%, rgba(75, 0, 130, 0.3) 51%, transparent 52%),
    linear-gradient(0deg, transparent 48%, rgba(138, 43, 226, 0.2) 49%, rgba(138, 43, 226, 0.2) 51%, transparent 52%),
    radial-gradient(circle at center, rgba(75, 0, 130, 0.2) 0%, transparent 70%);
  animation: digital-corruption var(--combat-duration, 1s) ease-out;
}

.fighter.nullify-damage:hover,
.fighter.purge-damage:hover,
.fighter.dispel-damage:hover {
  box-shadow: 0 0 30px rgba(75, 0, 130, 0.6),
    0 0 50px rgba(138, 43, 226, 0.4) !important;
  filter: brightness(0.9) contrast(1.2) hue-rotate(280deg) !important;
}

.fighter.light-cleanse,
.fighter.light-purify,
.fighter.light-sanctify,
.light-cleanse,
.light-purify,
.light-sanctify {
  animation: divine-radiance var(--combat-duration, 1.2s) ease-out !important;
  position: relative;
  overflow: visible;
}

.fighter.light-cleanse::before,
.fighter.light-purify::before,
.fighter.light-sanctify::before,
.light-cleanse::before,
.light-purify::before,
.light-sanctify::before {
  content: '';
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  background: radial-gradient(circle at 30% 20%, rgba(255, 215, 0, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 50% 30%, rgba(255, 248, 220, 0.2) 0%, transparent 60%),
    radial-gradient(circle at 20% 70%, rgba(255, 255, 224, 0.15) 0%, transparent 50%),
    linear-gradient(45deg, transparent 0%, rgba(255, 215, 0, 0.1) 25%, transparent 50%, rgba(255, 255, 255, 0.1) 75%, transparent 100%),
    linear-gradient(-45deg, transparent 0%, rgba(255, 248, 220, 0.1) 25%, transparent 50%, rgba(255, 255, 224, 0.08) 75%, transparent 100%);
  animation: divine-light-rays var(--combat-duration, 1.2s) ease-out;
  pointer-events: none;
  z-index: 5;
  border-radius: inherit;
}

.fighter.light-cleanse::after,
.fighter.light-purify::after,
.fighter.light-sanctify::after,
.light-cleanse::after,
.light-purify::after,
.light-sanctify::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140%;
  height: 140%;
  transform: translate(-50%, -50%) scale(0);
  background: url('https://grandsaga.online/wp-content/uploads/2025/07/Divine-Hand-Gold.png') center/contain no-repeat;
  filter: drop-shadow(0 0 20px rgba(255, 215, 0, 1))
    drop-shadow(0 0 40px rgba(255, 255, 255, 0.8))
    drop-shadow(0 0 60px rgba(255, 248, 220, 0.6))
    drop-shadow(0 0 80px rgba(255, 255, 224, 0.4))
    brightness(1.8)
    contrast(1.3)
    saturate(1.5);
  animation: divine-hand-manifestation var(--combat-duration, 1.2s) ease-out;
  pointer-events: none;
  z-index: 15;
  mix-blend-mode: screen;
}

.fighter.light-purify::before,
.light-purify::before {
  background: radial-gradient(circle at 25% 25%, rgba(255, 215, 0, 0.4) 0%, transparent 40%),
    radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.35) 0%, transparent 40%),
    radial-gradient(circle at 50% 10%, rgba(255, 248, 220, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 10% 50%, rgba(255, 255, 224, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 90% 50%, rgba(255, 215, 0, 0.2) 0%, transparent 60%),
    linear-gradient(0deg, transparent 0%, rgba(255, 255, 255, 0.15) 25%, transparent 50%, rgba(255, 215, 0, 0.15) 75%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(255, 248, 220, 0.12) 25%, transparent 50%, rgba(255, 255, 224, 0.12) 75%, transparent 100%);
  animation: divine-blessing-particles var(--combat-duration, 1.2s) ease-out;
}

.fighter.light-sanctify::before,
.light-sanctify::before {
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 0%, rgba(255, 215, 0, 0.2) 30%, transparent 60%),
    conic-gradient(from 0deg, rgba(255, 215, 0, 0.2), rgba(255, 255, 255, 0.15), rgba(255, 248, 220, 0.1), rgba(255, 255, 224, 0.08), rgba(255, 215, 0, 0.2));
  animation: divine-protection-aura var(--combat-duration, 1.2s) ease-out;
}

.fighter.light-cleanse:hover,
.fighter.light-purify:hover,
.fighter.light-sanctify:hover {
  box-shadow: 0 0 40px rgba(255, 215, 0, 0.6),
    0 0 60px rgba(255, 255, 255, 0.4) !important;
  filter: brightness(1.3) contrast(1.1) saturate(1.5) !important;
}

.creature-slot.ghostly,
.creature-card.ghostly .creature-image,
.fighter-creature-display.ghostly img {
  filter: brightness(1.4)
        saturate(0.2)
        hue-rotate(200deg)
        opacity(0.8);
  box-shadow: 0 0 30px rgba(147, 112, 219, 0.7);
}

.creature-card.ghostly {
  border: 2px solid #9370DB;
  background: linear-gradient(135deg, #4B008222 0%, #8A2BE222 100%);
}

.fighter-creature-display.ghostly {
  border: 2px solid #9370DB;
  box-shadow: 0 0 20px rgba(147, 112, 219, 0.5);
}

.creature-container.ghostly {
  border: 2px solid #9370DB;
  box-shadow: 0 0 30px rgba(147, 112, 219, 0.6);
}

.creature-container.ghostly .creature-image {
  filter: brightness(1.4)
        saturate(0.2)
        hue-rotate(200deg)
        opacity(0.8);
}

.creature-slot.ghostly .card-info-hover {
  filter: brightness(1.4)
        saturate(0.2)
        hue-rotate(200deg);
  border: 2px solid #9370DB;
  background: linear-gradient(135deg, #4B008266 0%, #8A2BE266 100%);
  box-shadow: 0 0 30px rgba(147, 112, 219, 0.8);
}

.creature-slot.ghostly .card-info-hover .card-name-overlay,
.creature-slot.ghostly .card-info-hover .card-stats-overlay,
.creature-slot.ghostly .card-info-hover .card-description-overlay {
  color: #E6E6FA;
  text-shadow: 0 0 10px rgba(147, 112, 219, 0.8);
}

.creature-slot.ghostly .card-info-hover h3,
.creature-slot.ghostly .card-info-hover h4 {
  color: #DDA0DD;
  text-shadow: 0 0 8px rgba(147, 112, 219, 0.6);
}

.fighter.summoning-magic,
.summoning-magic {
  animation: hellish-summoning var(--combat-duration, 1.8s) ease-out !important;
  position: relative;
  overflow: visible;
}

.fighter.summoning-magic::before {
  content: '';
  position: absolute;
  top: -25px;
  left: -25px;
  right: -25px;
  bottom: -25px;
  background: linear-gradient(45deg, 
            transparent 0%, 
            rgba(255, 0, 0, 0.8) 20%, 
            transparent 25%,
            transparent 30%,
            rgba(255, 69, 0, 0.6) 35%,
            transparent 40%,
            transparent 60%,
            rgba(139, 0, 0, 0.7) 65%,
            transparent 70%,
            transparent 80%,
            rgba(220, 20, 60, 0.5) 85%,
            transparent 90%
        ),
        radial-gradient(circle at 30% 40%, rgba(255, 0, 0, 0.6) 0%, transparent 40%),
        radial-gradient(circle at 70% 60%, rgba(139, 0, 0, 0.5) 0%, transparent 35%);
  animation: lightning-flash 1.8s ease-out;
  pointer-events: none;
  z-index: 5;
  border-radius: inherit;
  opacity: 0;
}

.fighter.summoning-magic::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  transform: translate(-50%, -50%) scale(0);
  background: url('https://grandsaga.online/wp-content/uploads/2025/07/Possession.png') center/contain no-repeat;
  filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.8))
        drop-shadow(0 0 20px rgba(139, 0, 0, 0.6))
        brightness(1.5)
        contrast(1.3);
  animation: evil-face-manifestation 1.8s ease-out;
  pointer-events: none;
  z-index: 10;
  mix-blend-mode: screen;
}

.fighter.banishing-magic,
.banishing-magic {
  animation: banish-dissipate var(--combat-duration, 1.5s) ease-in !important;
  position: relative;
  overflow: visible;
}

.fighter.banishing-magic::before {
  content: '';
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  background: radial-gradient(circle at 30% 30%, rgba(255, 215, 0, 0.3) 0%, transparent 60%),
        radial-gradient(circle at 70% 70%, rgba(255, 165, 0, 0.2) 0%, transparent 60%),
        radial-gradient(circle at 50% 20%, rgba(128, 128, 128, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(160, 160, 160, 0.15) 0%, transparent 55%),
        radial-gradient(circle at 80% 30%, rgba(96, 96, 96, 0.1) 0%, transparent 45%),
        linear-gradient(45deg, transparent 40%, rgba(128, 128, 128, 0.1) 50%, transparent 60%),
        linear-gradient(-45deg, transparent 40%, rgba(160, 160, 160, 0.08) 50%, transparent 60%);
  animation: death-veil-dispersal var(--combat-duration, 1.5s) ease-in;
  pointer-events: none;
  z-index: 5;
  border-radius: inherit;
}

.fighter.banishing-magic::after,
.banishing-magic::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 160%;
  height: 160%;
  transform: translate(-50%, -50%) scale(0);
  background: url('https://grandsaga.online/wp-content/uploads/2025/07/Possession.png') center/contain no-repeat;
  filter: drop-shadow(0 0 25px rgba(128, 128, 128, 1))
        drop-shadow(0 0 50px rgba(160, 160, 160, 0.8))
        drop-shadow(0 0 75px rgba(192, 192, 192, 0.6))
        drop-shadow(0 0 100px rgba(96, 96, 96, 0.4))
        brightness(2.5)
        contrast(2)
        saturate(0)
        grayscale(1);
  animation: skull-banishment var(--combat-duration, 1.5s) ease-in;
  pointer-events: none;
  z-index: 20;
  mix-blend-mode: luminosity;
}

.fighter.enhancement-buff,
.enhancement-buff {
  animation: power-up-boost var(--combat-duration, 1.2s) ease-out !important;
  position: relative;
  overflow: visible;
}

.fighter.enhancement-buff::after {
  content: '✦ ★ ✦';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  color: rgba(255, 215, 0, 0.9);
  text-shadow: 0 0 10px rgba(255, 255, 0, 1),
        0 0 20px rgba(255, 215, 0, 0.8);
  animation: sparkle-burst 1.2s ease-out;
  pointer-events: none;
  z-index: 10;
  letter-spacing: 4px;
}

.fighter.vulnerability-debuff,
.vulnerability-debuff {
  animation: weakness-applied var(--combat-duration, 1s) ease-out !important;
  position: relative;
  overflow: visible;
}

.fighter.vulnerability-debuff::after {
  content: '⚠';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: rgba(255, 69, 0, 0.9);
  text-shadow: 0 0 10px rgba(255, 0, 0, 1),
        0 0 20px rgba(255, 69, 0, 0.8);
  animation: warning-pulse 1s ease-out;
  pointer-events: none;
  z-index: 10;
}

.nano-repair-effect {
  animation: nano-repair-enhance 1.2s ease-out;
  position: relative;
}

.nanoswarm-damage {
  animation: nanoswarm-consume 1.3s ease-in-out;
  filter: hue-rotate(5deg) contrast(1.05);
}

.nano-repair-indicator {
  color: #00FF7F !important;
  text-shadow: 0 0 10px #00FF7F60, 
        0 0 20px #00FF7F40,
        2px 2px 4px rgba(0,0,0,0.8) !important;
  animation: floatUp 1.5s ease-out forwards, nanoRepairPulse 0.4s ease-out;
  font-family: 'Courier New', monospace !important;
  letter-spacing: 1px !important;
}

.nanoswarm-indicator {
  color: #00FF00 !important;
  text-shadow: 0 0 10px #00FF0060, 2px 2px 4px rgba(0,0,0,0.8) !important;
  animation: floatUp 1.5s ease-out forwards, nanoSwarm 0.5s ease-in-out;
}

.nano-card:hover {
  box-shadow: 0 0 15px rgba(0, 255, 0, 0.4);
  border-color: #00FF00;
  transition: all 0.3s ease;
}

.nano-drain-card:hover {
  box-shadow: 0 0 15px rgba(255, 107, 53, 0.4);
  border-color: #FF6B35;
}

.nano-repair-card:hover {
  box-shadow: 0 0 15px rgba(0, 255, 127, 0.4);
  border-color: #00FF7F;
}

.nano-drain-damage {
  animation: nano-container-shake 1.6s cubic-bezier(0.4, 0.0, 0.6, 1);
  position: relative;
  overflow: visible;
}

.nano-drain-damage::before {
  content: '🤖 🤖 🤖 🤖 🤖 🤖 🤖 🤖';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 12px;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  word-spacing: 20px;
  letter-spacing: 10px;
  animation: nano-swarm-rise-1 1.6s cubic-bezier(0.2, 0.0, 0.3, 1);
  pointer-events: none;
  z-index: 4;
  opacity: 0;
}

.nano-drain-damage::after {
  content: '🤖 🤖 🤖 🤖 🤖 🤖 🤖 🤖';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 12px;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  word-spacing: 15px;
  letter-spacing: 8px;
  animation: nano-swarm-rise-2 1.6s cubic-bezier(0.2, 0.0, 0.3, 1);
  animation-delay: 0.3s;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
}

.nano-drain-indicator {
  color: #FF6B35 !important;
  text-shadow: -3px 0 #00FFFF,
        3px 0 #FF00FF,
        0 0 10px #FF6B3580, 
        0 0 20px #FF6B3540,
        2px 2px 4px rgba(0,0,0,0.9) !important;
  animation: floatUp 1.5s ease-out forwards, 
        cyberpunkGlitch 0.12s infinite;
  font-family: 'Courier New', monospace !important;
  font-weight: bold !important;
  letter-spacing: 2px !important;
}

.ability-card.streak-monitoring {
  position: relative;
  overflow: visible;
}

.streak-progress {
  animation: pulse-gold 1s ease-in-out infinite;
}

.streak-progress-bar {
  box-shadow: 0 0 5px #FFD700;
}

.ability-card.streak-active {
  box-shadow: 0 0 15px #FFD700;
  border-color: #FFD700;
}

.ability-card.streak-active::before {
  content: '🔥';
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 20px;
  animation: flame-flicker 0.5s ease-in-out infinite alternate;
}

.nano-repair-effect::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 255, 127, 0.2) 40%,
        rgba(0, 255, 127, 0.4) 50%,
        rgba(0, 255, 127, 0.2) 60%,
        transparent 100%
    );
  animation: nano-repair-matrix-sweep 1.2s ease-out;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}

.nano-repair-effect::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
            0deg,
            transparent 0px,
            rgba(0, 255, 127, 0.1) 1px,
            transparent 2px,
            transparent 10px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgba(0, 255, 127, 0.08) 1px,
            transparent 2px,
            transparent 15px
        );
  animation: nano-repair-grid-scan 1.2s ease-out;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
  opacity: 0;
}

.ability-btn[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}

.ability-btn[disabled]:hover {
  transform: none;
}

.ability-btn:disabled[title*="cooldown"] {
  background: linear-gradient(
        90deg,
        #4A5F7E 0%,
        #5A6F8E 50%,
        #4A5F7E 100%
    );
  background-size: 200% 100%;
  animation: cooldownPulse 2s ease-in-out infinite;
}

.damage-indicator {
  position: absolute !important;
  top: -15px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  color: white !important;
  font-size: 14px !important;
  font-weight: bold !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 100 !important;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8) !important;
  animation: floatUp 2s ease-out forwards !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.fire-indicator {
  background: linear-gradient(45deg, rgba(255, 69, 0, 0.9), rgba(255, 140, 0, 0.9)) !important;
  border-color: #FF4500 !important;
  box-shadow: 0 0 8px rgba(255, 69, 0, 0.8) !important;
}

.lightning-indicator {
  background: linear-gradient(45deg, rgba(0, 255, 255, 0.9), rgba(0, 191, 255, 0.9)) !important;
  border-color: #00FFFF !important;
  box-shadow: 0 0 8px rgba(0, 255, 255, 0.8) !important;
}

.void-indicator {
  background: linear-gradient(45deg, rgba(75, 0, 130, 0.9), rgba(138, 43, 226, 0.9)) !important;
  border-color: #4B0082 !important;
  box-shadow: 0 0 8px rgba(75, 0, 130, 0.8) !important;
}

.aether-indicator {
  background: linear-gradient(45deg, rgba(64, 224, 208, 0.9), rgba(32, 178, 170, 0.9)) !important;
  border-color: #40E0D0 !important;
  box-shadow: 0 0 8px rgba(64, 224, 208, 0.8) !important;
}

.blood-indicator {
  background: linear-gradient(45deg, rgba(139, 0, 0, 0.9), rgba(178, 34, 34, 0.9)) !important;
  border-color: #8B0000 !important;
  box-shadow: 0 0 8px rgba(139, 0, 0, 0.8) !important;
}

.chroma-indicator {
  background: linear-gradient(45deg, 
    rgba(255, 0, 255, 0.9),
    rgba(0, 255, 255, 0.9),
    rgba(255, 255, 0, 0.9),
    rgba(255, 0, 255, 0.9)) !important;
  background-size: 400% 400% !important;
  animation: chromaIndicatorShift 2s linear infinite, floatUp 2s ease-out forwards !important;
  border-color: #FF00FF !important;
  box-shadow: 0 0 8px rgba(255, 0, 255, 0.8) !important;
}

.radiation-indicator {
  background: linear-gradient(45deg, rgba(127, 255, 0, 0.9), rgba(154, 205, 50, 0.9)) !important;
  border-color: #7FFF00 !important;
  box-shadow: 0 0 8px rgba(127, 255, 0, 0.8) !important;
  color: #50FF50;
  text-shadow: 0 0 12px #50FF50,
        0 0 24px #32FF32,
        0 0 36px #228B22,
        2px 2px 6px rgba(0,0,0,0.9);
  animation: thickRadiationGlow 1.8s ease-out forwards;
  position: relative;
}

.poison-indicator {
  background: linear-gradient(45deg, rgba(154, 205, 50, 0.9), rgba(128, 255, 0, 0.9)) !important;
  border-color: #9ACD32 !important;
  box-shadow: 0 0 8px rgba(154, 205, 50, 0.8) !important;
}

.arcana-indicator {
  background: linear-gradient(45deg, 
    rgba(153, 50, 204, 0.9),
    rgba(138, 43, 226, 0.9),
    rgba(123, 104, 238, 0.9)) !important;
  border-color: #9932CC !important;
  box-shadow: 0 0 8px rgba(153, 50, 204, 0.8) !important;
  color: #9370DB !important;
  text-shadow: 0 0 12px #9370DB,
        0 0 24px #8A2BE2,
        0 0 36px #4B0082,
        2px 2px 6px rgba(0,0,0,0.9) !important;
  animation: arcanaFireGlow 1.8s ease-out forwards !important;
  position: relative;
  z-index: 1000;
}

.rejuvenation-indicator {
  background: linear-gradient(45deg, 
    rgba(224, 255, 255, 0.9),
    rgba(255, 255, 255, 0.9),
    rgba(240, 248, 255, 0.9)) !important;
  color: #000 !important;
  border-color: #E0FFFF !important;
  box-shadow: 0 0 8px rgba(224, 255, 255, 0.8) !important;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.5) !important;
}

.cybernetics-indicator {
  background: linear-gradient(45deg, rgba(0, 255, 255, 0.9), rgba(0, 191, 255, 0.9)) !important;
  color: #FF0000 !important;
  border-color: #00FFFF !important;
  box-shadow: 0 0 8px rgba(0, 255, 255, 0.8) !important;
  text-shadow: 0 0 12px #FF0000,
        0 0 24px #FF4444,
        0 0 36px #AA0000,
        2px 2px 6px rgba(0,0,0,0.9) !important;
  animation: cyberneticsGlow 1.8s ease-out forwards !important;
  position: relative;
  z-index: 1000;
}

.hit-indicator {
  background: linear-gradient(45deg, 
    rgba(255, 215, 0, 0.9),
    rgba(255, 165, 0, 0.9)) !important;
  color: #000 !important;
  border-color: #FFD700 !important;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.8) !important;
  text-shadow: 0 0 2px rgba(255, 165, 0, 0.5) !important;
}

.resistance-indicator {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  z-index: 10;
  border: 2px solid rgba(255, 255, 255, 0.6);
  animation: resistancePulse var(--indicator-pulse-speed) ease-in-out infinite alternate;
}

.resistance-indicator.radiation {
  background: radial-gradient(circle, #7FFF00, #9ACD32);
  color: #000;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}

.resistance-indicator.arcana {
  background: radial-gradient(circle, #9932CC, #8A2BE2);
  color: #FFF;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}

.resistance-indicator.poisoned {
  background: radial-gradient(circle, #9ACD32, #228B22);
  color: #000;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}

.resistance-indicator.fire {
  background: radial-gradient(circle, #FF4500, #FF8C00);
  color: #FFF;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}

.resistance-indicator.lightning {
  background: radial-gradient(circle, #00FFFF, #00BFFF);
  color: #000;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}

.resistance-indicator.void {
  background: radial-gradient(circle, #4B0082, #8A2BE2);
  color: #FFF;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}

.resistance-indicator.blood {
  background: radial-gradient(circle, #8B0000, #DC143C);
  color: #FFF;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}

.resistance-indicator.aether {
  background: radial-gradient(circle, #40E0D0, #20B2AA);
  color: #000;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}

.resistance-indicator.chroma {
  background: linear-gradient(45deg, #FF00FF, #00FFFF, #FFFF00, #FF00FF);
  background-size: 200% 200%;
  animation: chromaResistance 2s linear infinite, resistancePulse var(--indicator-pulse-speed) ease-in-out infinite alternate;
  color: #FFF;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
}

.shield-icon {
  font-size: 18px;
  line-height: 1;
  color: #000;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
}

.shield-count {
  font-size: 11px;
  font-weight: bold;
  color: #000;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
  margin-top: -2px;
}

.shield-tooltip {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(13, 2, 33, 0.95);
  color: #40E0D0;
  padding: 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  border: 1px solid #40E0D0;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 100;
}

.aetherial-shield-indicator:hover .shield-tooltip {
  opacity: 1;
}

.shield-protecting {
  animation: shieldBlock 0.4s ease-in-out !important;
}

.shield-block-text {
  color: #40E0D0 !important;
  font-weight: bold !important;
  text-shadow: 0 0 4px rgba(64, 224, 208, 0.8),
    0 0 8px rgba(255, 255, 255, 0.6) !important;
  font-size: 14px !important;
}

.shield-immunity-text {
  color: #FFFFFF !important;
  font-weight: bold !important;
  text-shadow: 0 0 4px rgba(255, 255, 255, 1),
    0 0 8px rgba(64, 224, 208, 0.8) !important;
  font-size: 16px !important;
}

.stimulant-indicator {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 32px;
  height: 32px;
  background: linear-gradient(45deg, #FFD700, #FFF8DC, #FFFF00);
  border: 2px solid #DAA520;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  z-index: 15;
  animation: stimulantPulse var(--indicator-pulse-speed, 2s) infinite;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.8),
    inset 0 0 10px rgba(255, 255, 255, 0.3);
}

.stimulant-icon {
  color: #8B4513;
  font-size: 16px;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.8),
    0 0 4px rgba(255, 215, 0, 0.6);
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3));
}

.stimulant-count {
  position: absolute;
  bottom: -8px;
  right: -8px;
  background: linear-gradient(45deg, #DAA520, #FFD700);
  color: #FFFFFF;
  border: 2px solid #B8860B;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.6),
    inset 0 0 4px rgba(255, 255, 255, 0.3);
}

.stimulant-indicator .stimulant-tooltip {
  position: absolute;
  bottom: 38px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.95), rgba(218, 165, 32, 0.95));
  color: #FFFFFF;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  min-width: 120px;
  text-align: center;
  z-index: 100;
  border: 1px solid #DAA520;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.4),
    inset 0 0 8px rgba(255, 255, 255, 0.2);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
}

.stimulant-indicator:hover .stimulant-tooltip {
  opacity: 1;
}

.blood-drain-indicator {
  position: absolute;
  top: -12px;
  left: -12px;
  width: 30px;
  height: 30px;
  background: linear-gradient(45deg, #8B0000, #DC143C);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  z-index: 15;
  animation: bloodPulse var(--indicator-pulse-speed) infinite;
  box-shadow: 0 0 12px rgba(139, 0, 0, 0.8);
}

.blood-icon {
  color: #FFF;
  font-size: 14px;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}

.blood-count {
  position: absolute;
  bottom: -10px;
  right: -10px;
  background: #8B0000;
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  border: 2px solid #DC143C;
}

.blood-drain-indicator .blood-tooltip {
  position: absolute;
  bottom: 35px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(139, 0, 0, 0.9);
  color: white;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 10px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  min-width: 100px;
  text-align: center;
  z-index: 100;
}

.blood-drain-indicator:hover .blood-tooltip {
  opacity: 1;
}

.molotov-armed-indicator {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  background: linear-gradient(45deg, #FF4500, #FF8C00);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  z-index: 15;
  animation: molotovPulse 1.5s infinite;
  box-shadow: 0 0 8px rgba(255, 69, 0, 0.7);
}

.molotov-burn-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 25px;
  height: 25px;
  background: linear-gradient(45deg, #FF4500, #FF8C00);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: white;
  z-index: 15;
  animation: burnFlicker 1s infinite alternate;
  box-shadow: 0 0 10px rgba(255, 69, 0, 0.8);
}

.molotov-armed-indicator .molotov-tooltip,
.molotov-burn-indicator .burn-tooltip {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.95);
  color: white;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 10px;
  line-height: 1.2;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 100;
  border: 1px solid rgba(255, 69, 0, 0.5);
  text-align: center;
  font-weight: bold;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
  min-width: 100px;
}

.molotov-armed-indicator:hover .molotov-tooltip,
.molotov-burn-indicator:hover .burn-tooltip {
  opacity: 1;
}

.cybernetics-status-indicator {
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  background: linear-gradient(45deg, #00FFFF, #00BFFF);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #000;
  z-index: 15;
  animation: cyberneticsPulse var(--indicator-pulse-speed) infinite;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
  font-weight: bold;
}

.cybernetics-tooltip {
  display: none;
  position: absolute;
  top: 25px;
  left: -50px;
  background-color: rgba(0, 0, 0, 0.9);
  color: #00FFFF;
  padding: 5px;
  border-radius: 4px;
  font-size: 10px;
  white-space: nowrap;
  z-index: 20;
  border: 1px solid #00FFFF;
}

.cybernetics-status-indicator:hover .cybernetics-tooltip {
  display: block;
}

.physical-armed-indicator {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  background: linear-gradient(45deg, #708090, #A0A0A0);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  z-index: 15;
  animation: physicalPulse 1.5s infinite;
  box-shadow: 0 0 8px rgba(112, 128, 144, 0.7);
}

.lightning-armed-indicator {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  background: linear-gradient(45deg, #00BFFF, #87CEEB);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  z-index: 15;
  animation: lightningPulse 1.5s infinite;
  box-shadow: 0 0 8px rgba(0, 191, 255, 0.7);
}

.void-armed-indicator {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  background: linear-gradient(45deg, #4B0082, #8A2BE2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  z-index: 15;
  animation: voidPulse 1.5s infinite;
  box-shadow: 0 0 8px rgba(75, 0, 130, 0.7);
}

.aether-armed-indicator {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  background: linear-gradient(45deg, #40E0D0, #00CED1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  z-index: 15;
  animation: aetherPulse 1.5s infinite;
  box-shadow: 0 0 8px rgba(64, 224, 208, 0.7);
}

.blood-armed-indicator {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  background: linear-gradient(45deg, #8B0000, #DC143C);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  z-index: 15;
  animation: bloodPulse 1.5s infinite;
  box-shadow: 0 0 8px rgba(139, 0, 0, 0.7);
}

.chroma-armed-indicator {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  background: linear-gradient(45deg, #9370DB, #DA70D6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  z-index: 15;
  animation: chromaPulse 1.5s infinite;
  box-shadow: 0 0 8px rgba(147, 112, 219, 0.7);
}

.fire-burn-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 25px;
  height: 25px;
  background: linear-gradient(45deg, #FF4500, #FF8C00);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: white;
  z-index: 15;
  animation: fireBurnFlicker 1s infinite alternate;
  box-shadow: 0 0 10px rgba(255, 69, 0, 0.8);
}

.physical-burn-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 25px;
  height: 25px;
  background: linear-gradient(45deg, #708090, #A0A0A0);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: white;
  z-index: 15;
  animation: physicalBurnFlicker 1s infinite alternate;
  box-shadow: 0 0 10px rgba(112, 128, 144, 0.8);
}

.lightning-burn-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 25px;
  height: 25px;
  background: linear-gradient(45deg, #00BFFF, #87CEEB);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: white;
  z-index: 15;
  animation: lightningBurnFlicker 1s infinite alternate;
  box-shadow: 0 0 10px rgba(0, 191, 255, 0.8);
}

.void-burn-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 25px;
  height: 25px;
  background: linear-gradient(45deg, #4B0082, #8A2BE2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: white;
  z-index: 15;
  animation: voidBurnFlicker 1s infinite alternate;
  box-shadow: 0 0 10px rgba(75, 0, 130, 0.8);
}

.aether-burn-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 25px;
  height: 25px;
  background: linear-gradient(45deg, #40E0D0, #00CED1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: white;
  z-index: 15;
  animation: aetherBurnFlicker 1s infinite alternate;
  box-shadow: 0 0 10px rgba(64, 224, 208, 0.8);
}

.blood-burn-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 25px;
  height: 25px;
  background: linear-gradient(45deg, #8B0000, #DC143C);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: white;
  z-index: 15;
  animation: bloodBurnFlicker 1s infinite alternate;
  box-shadow: 0 0 10px rgba(139, 0, 0, 0.8);
}

.chroma-burn-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 25px;
  height: 25px;
  background: linear-gradient(45deg, #9370DB, #DA70D6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: white;
  z-index: 15;
  animation: chromaBurnFlicker 1s infinite alternate;
  box-shadow: 0 0 10px rgba(147, 112, 219, 0.8);
}

.physical-armed-indicator .physical-tooltip,
.lightning-armed-indicator .lightning-tooltip,
.void-armed-indicator .void-tooltip,
.aether-armed-indicator .aether-tooltip,
.blood-armed-indicator .blood-tooltip,
.chroma-armed-indicator .chroma-tooltip,
.physical-burn-indicator .physical-burn-tooltip,
.lightning-burn-indicator .lightning-burn-tooltip,
.void-burn-indicator .void-burn-tooltip,
.aether-burn-indicator .aether-burn-tooltip,
.blood-burn-indicator .blood-burn-tooltip,
.chroma-burn-indicator .chroma-burn-tooltip {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.95);
  color: white;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 10px;
  line-height: 1.2;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 100;
  border: 1px solid rgba(255, 255, 255, 0.3);
  text-align: center;
  font-weight: bold;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
  min-width: 100px;
}

.physical-armed-indicator:hover .physical-tooltip,
.lightning-armed-indicator:hover .lightning-tooltip,
.void-armed-indicator:hover .void-tooltip,
.aether-armed-indicator:hover .aether-tooltip,
.blood-armed-indicator:hover .blood-tooltip,
.chroma-armed-indicator:hover .chroma-tooltip,
.physical-burn-indicator:hover .physical-burn-tooltip,
.lightning-burn-indicator:hover .lightning-burn-tooltip,
.void-burn-indicator:hover .void-burn-tooltip,
.aether-burn-indicator:hover .aether-burn-tooltip,
.blood-burn-indicator:hover .blood-burn-tooltip,
.chroma-burn-indicator:hover .chroma-burn-tooltip {
  opacity: 1;
}

.environmental-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  /* Behind combat screen but above background */
    display: none;
  overflow: hidden;
}

.environmental-screen.radiation {
  display: block;
  height: 100vh;
  /* Only lower half of screen */
    bottom: 0;
  top: auto;
  background: linear-gradient(
        to top,
        rgba(50, 205, 50, 0.6) 0%,     /* Moderate green at bottom */
        rgba(50, 205, 50, 0.4) 25%,    /* Medium */
        rgba(50, 205, 50, 0.25) 40%,   /* Light */
        rgba(50, 205, 50, 0.1) 45%,    /* Very light */
        transparent 50%,               /* Transparent at 50% - middle of screen */
        transparent 100%               /* Stays transparent to top */
    );
  animation: radiationMistFlow 6s ease-in-out infinite;
  /* Full screen height */
    top: 0;
  bottom: auto;
}

.environmental-screen.radiation::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(ellipse at 20% 80%, rgba(80, 255, 80, 0.5) 2px, transparent 3px),
        radial-gradient(ellipse at 60% 90%, rgba(100, 255, 100, 0.4) 2px, transparent 3px),
        radial-gradient(ellipse at 85% 75%, rgba(120, 255, 120, 0.3) 2px, transparent 3px),
        radial-gradient(ellipse at 40% 95%, rgba(50, 255, 50, 0.5) 2px, transparent 3px);
  background-size: 400px 200px,
        300px 150px,
        500px 250px,
        350px 175px;
  animation: radiationParticlesDrift 15s linear infinite;
  opacity: 0.7;
}

.environmental-screen.radiation::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70%;
  /* Most of the lower half */
    background-image: radial-gradient(circle at 15% 70%, rgba(60, 255, 60, 0.3) 1px, transparent 2px),
        radial-gradient(circle at 45% 85%, rgba(80, 255, 80, 0.25) 1px, transparent 2px),
        radial-gradient(circle at 75% 78%, rgba(100, 255, 100, 0.3) 1px, transparent 2px),
        radial-gradient(circle at 25% 92%, rgba(70, 255, 70, 0.4) 1px, transparent 2px);
  background-size: 200px 100px,
        180px 90px,
        220px 110px,
        160px 80px;
  animation: radiationDenseParticles 20s linear infinite;
  opacity: 0.6;
}

.environmental-screen.cybernetics {
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 10;
  background: linear-gradient(
        180deg,
        rgba(20, 20, 40, 0.4) 0%,     /* Dark blue-grey at top */
        rgba(30, 30, 50, 0.3) 25%,    /* Slightly lighter */
        rgba(40, 40, 60, 0.2) 50%,    /* Mid fade */
        rgba(50, 50, 70, 0.1) 75%,    /* Very light */
        transparent 100%              /* Clear bottom */
    );
  animation: panopticonAtmosphere 10s ease-in-out infinite,
        gridShift 25s linear infinite,
        surveillanceGlow 8s ease-in-out infinite;
  overflow: hidden;
  background-image: linear-gradient(0deg, rgba(255, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 0, 0, 0.02) 1px, transparent 1px),
        radial-gradient(ellipse at 50% -10%, rgba(255, 0, 0, 0.05) 0%, transparent 40%);
  background-size: 80px 80px, 
        120px 120px, 
        200% 60%;
}

.environmental-screen.cybernetics::before {
  content: '';
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  background: radial-gradient(
        circle,
        rgba(255, 0, 0, 1) 0%,
        rgba(255, 50, 50, 0.9) 30%,
        rgba(255, 100, 100, 0.6) 60%,
        rgba(255, 0, 0, 0.3) 80%,
        transparent 100%
    );
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(255, 0, 0, 1),
        0 0 60px rgba(255, 0, 0, 0.8),
        0 0 90px rgba(255, 0, 0, 0.6),
        0 0 120px rgba(255, 0, 0, 0.4);
  animation: eyePulse 3s ease-in-out infinite,
        lightningEyeEffect 15s linear infinite;
  z-index: 4;
}

.environmental-screen.cybernetics::after {
  content: '';
  position: absolute;
  top: -20px;
  /* Start from the eye position */
    left: 50%;
  width: 4px;
  height: 120vh;
  /* Extends beyond screen */
    background: linear-gradient(
        180deg,
        rgba(255, 0, 0, 1) 0%,          /* Bright red at source */
        rgba(255, 50, 50, 0.9) 10%,     /* Strong red */
        rgba(255, 100, 100, 0.8) 25%,   /* Medium red */
        rgba(255, 150, 150, 0.6) 50%,   /* Fading */
        rgba(255, 200, 200, 0.4) 75%,   /* Very faint */
        rgba(255, 255, 255, 0.2) 90%,   /* Almost transparent */
        transparent 100%                /* Invisible at end */
    );
  transform-origin: 50% 0%;
  /* Rotate from the top (eye position) */
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.8),
        0 0 16px rgba(255, 0, 0, 0.6),
        0 0 24px rgba(255, 0, 0, 0.4),
        0 0 32px rgba(255, 0, 0, 0.2);
  animation: panopticonScan 15s linear infinite;
  z-index: 3;
  /* Enhanced laser beam with reflection */
    filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.8))
        drop-shadow(0 0 16px rgba(255, 0, 0, 0.6))
        drop-shadow(0 0 24px rgba(255, 0, 0, 0.4))
        drop-shadow(0 0 32px rgba(255, 0, 0, 0.2));
}

.environmental-screen.cybernetics,
.environmental-screen.cybernetics::before,
.environmental-screen.cybernetics::after {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform, opacity;
}

.environmental-screen.arcana {
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 10;
  animation: arcanaMistFlow 6s ease-in-out infinite,
        orb1Movement 20s linear infinite,
        orb1Pulse 3s ease-in-out infinite alternate;
  background-image: url('https://rrxzozvjmhfscano.public.blob.vercel-storage.com/uploads/877e8004-3731-432a-8d44-36159c4ab2b0.png'),
        url('https://rrxzozvjmhfscano.public.blob.vercel-storage.com/uploads/877e8004-3731-432a-8d44-36159c4ab2b0.png'),
        url('https://rrxzozvjmhfscano.public.blob.vercel-storage.com/uploads/877e8004-3731-432a-8d44-36159c4ab2b0.png'),
        url('https://rrxzozvjmhfscano.public.blob.vercel-storage.com/uploads/877e8004-3731-432a-8d44-36159c4ab2b0.png'),
        url('https://rrxzozvjmhfscano.public.blob.vercel-storage.com/uploads/877e8004-3731-432a-8d44-36159c4ab2b0.png'),
        url('https://rrxzozvjmhfscano.public.blob.vercel-storage.com/uploads/877e8004-3731-432a-8d44-36159c4ab2b0.png'),
        url('https://rrxzozvjmhfscano.public.blob.vercel-storage.com/uploads/877e8004-3731-432a-8d44-36159c4ab2b0.png');
  background-size: 80px 80px,    /* Orb 1 - Large */
        60px 60px,    /* Orb 2 - Medium */
        70px 70px,    /* Orb 3 - Medium-Large */
        45px 45px,    /* Orb 4 - Small */
        55px 55px,    /* Orb 5 - Medium-Small */
        65px 65px,    /* Orb 6 - Medium */
        40px 40px;
  background-repeat: no-repeat;
  background-position: 20% 30%,      /* Orb 1 */
        70% 60%,      /* Orb 2 */
        85% 25%,      /* Orb 3 */
        15% 80%,      /* Orb 4 */
        45% 15%,      /* Orb 5 */
        90% 70%,      /* Orb 6 */
        30% 85%;
  filter: hue-rotate(270deg) brightness(1.4) saturate(1.8);
  /* Orb 7 - Small */
    background-repeat: no-repeat;
  /* Orb 7 */
    animation: arcanaMistFlow 6s ease-in-out infinite,
        orb1Movement 20s linear infinite,
        orb2Movement 25s linear infinite 3s,
        orb3Movement 18s linear infinite 6s,
        orb4Movement 22s linear infinite 2s,
        orb5Movement 28s linear infinite 8s,
        orb6Movement 16s linear infinite 4s,
        orb7Movement 24s linear infinite 7s,
        orbsGlow 4s ease-in-out infinite alternate;
}

.environmental-screen.arcana::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60%;
  background: linear-gradient(
        135deg,
        rgba(147, 112, 219, 0.6) 0%,
        rgba(138, 43, 226, 0.4) 25%,
        rgba(75, 0, 130, 0.3) 50%,
        rgba(139, 69, 19, 0.2) 75%,
        transparent 100%
    );
  animation: arcanaParticlesDrift 18s linear infinite;
  z-index: 1;
  bottom: 0;
  background-image: radial-gradient(ellipse at 15% 70%, rgba(147, 112, 219, 0.6) 2px, transparent 3px),
        radial-gradient(ellipse at 45% 85%, rgba(138, 43, 226, 0.5) 2px, transparent 3px),
        radial-gradient(ellipse at 75% 78%, rgba(75, 0, 130, 0.4) 2px, transparent 3px),
        radial-gradient(ellipse at 25% 90%, rgba(186, 85, 211, 0.6) 2px, transparent 3px),
        radial-gradient(ellipse at 65% 65%, rgba(148, 0, 211, 0.5) 2px, transparent 3px);
  background-size: 350px 175px,
        280px 140px,
        420px 210px,
        300px 150px,
        380px 190px;
  opacity: 0.8;
}

.environmental-screen.arcana::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70%;
  background-image: radial-gradient(circle at 20% 75%, rgba(138, 43, 226, 0.4) 1px, transparent 2px),
        radial-gradient(circle at 50% 85%, rgba(147, 112, 219, 0.3) 1px, transparent 2px),
        radial-gradient(circle at 80% 70%, rgba(75, 0, 130, 0.5) 1px, transparent 2px),
        radial-gradient(circle at 30% 95%, rgba(186, 85, 211, 0.4) 1px, transparent 2px),
        radial-gradient(circle at 70% 80%, rgba(148, 0, 211, 0.3) 1px, transparent 2px);
  background-size: 180px 90px,
        200px 100px,
        160px 80px,
        220px 110px,
        190px 95px;
  animation: arcanaDenseParticles 25s linear infinite;
  opacity: 0.7;
  z-index: 2;
}

.environmental-screen.arcana,
.environmental-screen.arcana::before,
.environmental-screen.arcana::after {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

.combat-highlight-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.combat-highlight-overlay.active {
  opacity: 1;
}

.highlight-content {
  text-align: center;
  transform: scale(0.5);
  opacity: 0;
  animation: highlightPopIn 0.3s ease forwards;
}

.combat-highlight-overlay.active .highlight-content {
  transform: scale(1);
  opacity: 1;
}

.highlight-text {
  font-size: 4rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 0 0 20px currentColor,
        0 0 40px currentColor,
        0 4px 8px rgba(0, 0, 0, 0.8);
  animation: highlightPulse 0.5s ease infinite alternate;
}

.highlight-text-physical {
  color: #C0C0C0;
}

.highlight-text-fire {
  color: #FF4500;
  text-shadow: 0 0 30px #FF4500, 0 0 60px #FF6B00, 0 4px 8px rgba(0, 0, 0, 0.8);
}

.highlight-text-lightning {
  color: #00BFFF;
  text-shadow: 0 0 30px #00BFFF, 0 0 60px #00E5FF, 0 4px 8px rgba(0, 0, 0, 0.8);
}

.highlight-text-void {
  color: #8B00FF;
  text-shadow: 0 0 30px #8B00FF, 0 0 60px #4B0082, 0 4px 8px rgba(0, 0, 0, 0.8);
}

.highlight-text-radiation {
  color: #32CD32;
  text-shadow: 0 0 30px #32CD32, 0 0 60px #7FFF00, 0 4px 8px rgba(0, 0, 0, 0.8);
}

.highlight-text-chroma {
  background: linear-gradient(90deg, #FF0000, #FF7F00, #FFFF00, #00FF00, #0000FF, #8B00FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: chromaShift 1s linear infinite, highlightPulse 0.5s ease infinite alternate;
}

.highlight-text-blood {
  color: #8B0000;
  text-shadow: 0 0 30px #8B0000, 0 0 60px #DC143C, 0 4px 8px rgba(0, 0, 0, 0.8);
}

.highlight-text-aether {
  color: #40E0D0;
  text-shadow: 0 0 30px #40E0D0, 0 0 60px #00CED1, 0 4px 8px rgba(0, 0, 0, 0.8);
}

.highlight-text-arcana {
  color: #9370DB;
  text-shadow: 0 0 30px #9370DB, 0 0 60px #8A2BE2, 0 4px 8px rgba(0, 0, 0, 0.8);
}

.highlight-text-cybernetics {
  color: #00FFFF;
  text-shadow: 0 0 30px #00FFFF, 0 0 60px #00CED1, 0 4px 8px rgba(0, 0, 0, 0.8);
}

.highlight-text-streak {
  color: #FFD700;
  text-shadow: 0 0 30px #FFD700, 0 0 60px #FFA500, 0 4px 8px rgba(0, 0, 0, 0.8);
}

.highlight-text-streak-legendary {
  color: #FFD700;
  font-size: 5rem;
  text-shadow: 0 0 40px #FFD700,
        0 0 80px #FFA500,
        0 0 120px #FF4500,
        0 4px 8px rgba(0, 0, 0, 0.8);
  animation: legendaryPulse 0.3s ease infinite alternate;
}

.highlight-text-streak-broken {
  color: #FF4444;
  text-shadow: 0 0 30px #FF0000, 0 0 60px #8B0000, 0 4px 8px rgba(0, 0, 0, 0.8);
}

.highlight-text-first-blood {
  color: #DC143C;
  text-shadow: 0 0 30px #DC143C, 0 0 60px #8B0000, 0 4px 8px rgba(0, 0, 0, 0.8);
}

.highlight-text-flawless {
  color: #FFD700;
  font-size: 5rem;
  text-shadow: 0 0 40px #FFD700,
        0 0 80px #FFFFFF,
        0 0 120px #FFD700,
        0 4px 8px rgba(0, 0, 0, 0.8);
}

.highlight-text-comeback {
  color: #00FF00;
  font-size: 5rem;
  text-shadow: 0 0 40px #00FF00, 0 0 80px #32CD32, 0 4px 8px rgba(0, 0, 0, 0.8);
}

.highlight-text-one-shot {
  color: #FF0000;
  font-size: 5rem;
  text-shadow: 0 0 40px #FF0000, 0 0 80px #8B0000, 0 4px 8px rgba(0, 0, 0, 0.8);
}

.highlight-text-kill {
  color: #FF4444;
  text-shadow: 0 0 30px #FF0000, 0 0 60px #8B0000, 0 4px 8px rgba(0, 0, 0, 0.8);
}

.highlight-fullscreen-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}

.combat-highlight-overlay.fullscreen .highlight-fullscreen-effect {
  opacity: 1;
}

.highlight-fire-obliterate {
  background: radial-gradient(circle at center, 
        rgba(255, 69, 0, 0.3) 0%, 
        rgba(255, 69, 0, 0.1) 50%, 
        transparent 70%);
  animation: fireFullscreen 2s ease;
}

.highlight-lightning-obliterate {
  background: radial-gradient(circle at center, 
        rgba(0, 191, 255, 0.4) 0%, 
        transparent 60%);
  animation: lightningFullscreen 2s ease;
}

.highlight-void-obliterate {
  background: radial-gradient(circle at center, 
        rgba(75, 0, 130, 0.5) 0%, 
        rgba(139, 0, 255, 0.2) 40%,
        transparent 70%);
  animation: voidFullscreen 2s ease;
}

.highlight-radiation-obliterate {
  background: radial-gradient(circle at center, 
        rgba(50, 205, 50, 0.4) 0%, 
        rgba(127, 255, 0, 0.2) 40%,
        transparent 70%);
  animation: radiationFullscreen 2s ease;
}

.highlight-chroma-obliterate {
  background: conic-gradient(
        from 0deg,
        rgba(255, 0, 0, 0.3),
        rgba(255, 127, 0, 0.3),
        rgba(255, 255, 0, 0.3),
        rgba(0, 255, 0, 0.3),
        rgba(0, 0, 255, 0.3),
        rgba(139, 0, 255, 0.3),
        rgba(255, 0, 0, 0.3)
    );
  animation: chromaFullscreen 2s ease;
}

.highlight-blood-obliterate {
  background: radial-gradient(circle at center, 
        rgba(139, 0, 0, 0.5) 0%, 
        rgba(220, 20, 60, 0.2) 40%,
        transparent 70%);
  animation: bloodFullscreen 2s ease;
}

.highlight-aether-obliterate {
  background: radial-gradient(circle at center, 
        rgba(64, 224, 208, 0.4) 0%, 
        rgba(0, 206, 209, 0.2) 40%,
        transparent 70%);
  animation: aetherFullscreen 2s ease;
}

.highlight-arcana-obliterate {
  background: radial-gradient(circle at center, 
        rgba(147, 112, 219, 0.5) 0%, 
        rgba(138, 43, 226, 0.2) 40%,
        transparent 70%);
  animation: arcanaFullscreen 2s ease;
}

.highlight-cyber-obliterate {
  background: repeating-linear-gradient(
            0deg,
            transparent,
            transparent 10px,
            rgba(0, 255, 255, 0.1) 10px,
            rgba(0, 255, 255, 0.1) 20px
        ),
        radial-gradient(circle at center, 
            rgba(0, 255, 255, 0.3) 0%, 
            transparent 60%);
  animation: cyberFullscreen 2s ease;
}

.highlight-hit-obliterate {
  background: radial-gradient(circle at center, 
        rgba(192, 192, 192, 0.4) 0%, 
        rgba(128, 128, 128, 0.2) 40%,
        transparent 70%);
  animation: physicalFullscreen 2s ease;
}

.highlight-flawless {
  background: radial-gradient(circle at center, 
        rgba(255, 215, 0, 0.4) 0%, 
        rgba(255, 255, 255, 0.2) 30%,
        transparent 60%);
  animation: flawlessFullscreen 3s ease;
}

.highlight-comeback {
  background: radial-gradient(circle at center, 
        rgba(0, 255, 0, 0.3) 0%, 
        rgba(50, 205, 50, 0.15) 40%,
        transparent 70%);
  animation: comebackFullscreen 2.5s ease;
}

.highlight-one-shot {
  background: radial-gradient(circle at center, 
        rgba(255, 0, 0, 0.4) 0%, 
        rgba(139, 0, 0, 0.2) 40%,
        transparent 70%);
  animation: oneShotFullscreen 2.5s ease;
}

.highlight-streak-broken-legendary {
  background: linear-gradient(45deg, 
        rgba(255, 0, 0, 0.2) 0%, 
        transparent 50%,
        rgba(255, 0, 0, 0.2) 100%);
  animation: streakBrokenFullscreen 1.8s ease;
}

.highlight-reflection-kill {
  background: radial-gradient(circle at center, 
        rgba(147, 112, 219, 0.4) 0%, 
        rgba(138, 43, 226, 0.2) 40%,
        transparent 70%);
  animation: reflectionFullscreen 2s ease;
}

.environmental-screen.power-generation {
  opacity: 1;
  visibility: visible;
  display: block !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

.environmental-screen.power-generation::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: lightningScreenFlash 1.2s ease-out forwards;
  z-index: 1;
}

.environmental-screen.power-generation::after {
  content: '';
  position: absolute;
  top: -5%;
  left: 50%;
  transform: translateX(-50%);
  width: 450px;
  height: 110vh;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 800' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='3' d='M 50 0 L 55 80 L 70 85 L 45 200 L 60 205 L 40 350 L 58 355 L 35 500 L 55 510 L 48 650 L 52 655 L 50 800'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 5px #ffffff)
            drop-shadow(0 0 15px #00dfff) 
            drop-shadow(0 0 30px #00dfff) 
            drop-shadow(0 0 60px #00dfff)
            drop-shadow(0 0 100px #0088ff);
  animation: lightningBoltStrike 1.2s ease-out forwards;
  z-index: 2;
}

.environmental-screen.power-generation .highlight-fullscreen-effect {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 200px;
  background: radial-gradient(ellipse at center bottom,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(0, 223, 255, 0.8) 10%,
        rgba(0, 136, 255, 0.4) 40%,
        transparent 70%);
  animation: lightningImpactGlow 1.2s ease-out forwards;
  z-index: 3;
}

.toasty-image {
  position: fixed;
  bottom: 0;
  width: 400px;
  height: auto;
  z-index: 10001;
  opacity: 0;
  pointer-events: none;
}

.toasty-image.from-left {
  left: -500px;
  transform: scaleX(-1);
  animation: toastySlideFromLeft 1.5s ease-out forwards;
}

.toasty-image.from-right {
  right: -500px;
  animation: toastySlideFromRight 1.5s ease-out forwards;
}

.combat-highlight-overlay.toasty-active .highlight-content {
  position: fixed !important;
  bottom: 250px !important;
  left: 0;
  right: 0;
  top: auto !important;
  transform: none !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.highlight-text.toasty-text {
  font-size: 4rem;
  color: #FF4500;
  text-shadow: 0 0 20px #FF4500,
        0 0 40px #FF6B00,
        3px 3px 0 #000,
        -3px -3px 0 #000,
        3px -3px 0 #000,
        -3px 3px 0 #000;
  animation: toastyTextPop 1.5s ease-out forwards;
  opacity: 1 !important;
}

.highlight-text.toasty-text.text-left {
  margin-left: 400px;
}

.highlight-text.toasty-text.text-right {
  margin-right: 400px;
}

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

.mb-20 {
  margin-bottom: 20px;
}

.hidden {
  display: none !important;
}

.fade-in {
  animation: fadeIn 0.5s ease-in;
}

.legacy-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.legacy-container {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.legacy-screen {
  display: none;
  width: 100%;
  height: 100%;
  padding: 20px;
  position: absolute;
  top: 0;
  left: 0;
}

.legacy-screen.active {
  display: block;
}

/* =============================================================================
   FIGHTER SETUP
   ============================================================================= */

#fighter-setup {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
  padding-top: clamp(80px, 10vh, 120px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /*background: #0a0b1259;*/
}

#fighter-setup h1 {
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  letter-spacing: 4px;
  color: var(--primary, #00f3ff);
  text-shadow: 0 0 20px rgba(0, 243, 255, 0.5);
  margin: 0;
}

.houses-display {
  display: flex;
  justify-content: center;
  gap: clamp(20px, 3vw, 40px);
  width: 100%;
  max-width: 1600px;
}

.house-display {
  flex: 1;
  max-width: 720px;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(145deg, rgba(26, 28, 46, 0.95), rgba(18, 20, 31, 0.98));
  border: 2px solid rgba(139, 92, 246, 0.4);
  border-radius: 8px;
  padding: 20px;
  position: relative;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}

.house-display::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(139, 92, 246, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139, 92, 246, 0.1) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.3;
  pointer-events: none;
  border-radius: 8px;
  mask-image: radial-gradient(ellipse at center, transparent 20%, black 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 20%, black 70%);
}

.house-display::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 8px;
  pointer-events: none;
  background: linear-gradient(to right, #fff 0, #fff 12px, transparent 12px) top left / 100% 2px no-repeat,
        linear-gradient(to right, #fff 0, #fff 12px, transparent 12px) bottom left / 100% 2px no-repeat,
        linear-gradient(to bottom, #fff 0, #fff 12px, transparent 12px) top left / 2px 100% no-repeat,
        linear-gradient(to bottom, #fff 0, #fff 12px, transparent 12px) top right / 2px 100% no-repeat,
        linear-gradient(to right, transparent calc(100% - 12px), #fff calc(100% - 12px)) top right / 100% 2px no-repeat,
        linear-gradient(to right, transparent calc(100% - 12px), #fff calc(100% - 12px)) bottom right / 100% 2px no-repeat;
}

.house-display.winner {
  border-color: var(--yellow, #ffde03);
  box-shadow: 0 0 30px rgba(255, 222, 3, 0.4);
}

.house-display.loser {
  border-color: var(--secondary, #ff003c);
  box-shadow: 0 0 20px rgba(255, 0, 60, 0.3);
  opacity: 0.7;
}

.house-info {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid rgba(139, 92, 246, 0.3);
  position: relative;
  z-index: 1;
}

.house-info img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.5));
  flex-shrink: 0;
}

.house-info h3 {
  flex: 1;
  margin: 0;
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--yellow, #ffde03);
  text-shadow: 0 0 10px rgba(255, 222, 3, 0.4);
}

.focus-points-total {
  padding: 8px 16px;
  background: rgba(10, 11, 18, 0.9);
  border-left: 3px solid var(--primary, #00f3ff);
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary, #00f3ff);
  text-shadow: 0 0 8px rgba(0, 243, 255, 0.5);
  backdrop-filter: blur(5px);
}

.fighters-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  position: relative;
  z-index: 1;
}

.fighter-setup,
.fighter-setup-row {
  background: rgba(10, 11, 18, 0.6);
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 6px;
  padding: 12px;
  transition: all 0.3s ease;
}

.fighter-setup:hover,
.fighter-setup-row:hover {
  border-color: rgba(139, 92, 246, 0.5);
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.2);
}

.fighter-name-input input {
  width: 100%;
  max-width: 250px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 4px;
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.fighter-name-input input:focus {
  outline: none;
  border-color: var(--primary, #00f3ff);
  box-shadow: 0 0 10px rgba(0, 243, 255, 0.3);
}

.fighter-name-input input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.fighter-class {
  font-family: var(--font-body, 'Roboto', sans-serif);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 4px;
}

.fp-display {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(0, 191, 255, 0.15);
  border: 1px solid rgba(0, 191, 255, 0.4);
  border-radius: 4px;
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 0.8rem;
  font-weight: 600;
  color: #00BFFF;
  margin-bottom: 10px;
}

@keyframes scrollbarGlow {
    0%, 100% { 
        box-shadow: 
            0 0 10px rgba(162, 0, 255, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    50% { 
        box-shadow: 
            0 0 20px rgba(162, 0, 255, 0.8),
            0 0 40px rgba(162, 0, 255, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }
}

@keyframes gridPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fpHexPulse {
    0%, 100% { 
        box-shadow: inset 0 0 30px rgba(0, 243, 255, 0.1), 0 0 20px rgba(0, 243, 255, 0.1);
    }
    50% { 
        box-shadow: inset 0 0 40px rgba(0, 243, 255, 0.2), 0 0 30px rgba(0, 243, 255, 0.2);
    }
}

@media (max-width: 1199px) {
  .faction-fp-display {
    display: none;
  }
  .mobile-fp-display {
    display: flex;
  }

  .battle-area {
    flex-direction: column;
    gap: 40px;
    padding: 20px;
    min-height: auto;
  }
  .team-container {
    justify-content: center !important;
    padding: 0 !important;
  }
  .team-container.right .team-roster {
    flex-direction: row;
  }
  .vs-divider {
    padding: 20px 0;
  }
  .vs-line {
    width: 400px;
    height: 4px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.3) 70%, transparent 100%);
  }
  .vs-badge {
    width: 140px;
    height: 140px;
  }
  .vs-text {
    font-size: 48px;
  }
  .bg-faction-flag {
    display: none;
  }
  .faction-flag {
    top: 80px;
  }
  .faction-flag.left {
    left: 20px;
  }
  .faction-flag.right {
    right: 20px;
  }
  .flag-emblem {
    width: 100px;
    height: 100px;
  }
  .flag-emblem .emblem-image {
    width: 60px;
    height: 60px;
  }
  .faction-name {
    font-size: 12px;
    letter-spacing: 3px;
  }
  .fighters-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
  .fighters-row .character-card:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 500px;
    margin: 0 auto;
  }
  .hover-stats {
    display: none;
  }
  .team-roster .character-portrait {
    width: 300px;
    height: 430px;
  }
  .loadout-card .character-portrait {
    height: 420px;
  }
  .house-items-row {
    gap: 15px;
  }
  .item-slot {
    width: 80px;
    height: 108px;
  }
}

@media (max-width: 991px) {
  .faction-fp-display {
    display: none;
  }
  .tab-content {
    padding: 140px 20px 100px;
  }
  .setup-tabs {
    top: 15px;
    gap: 6px;
    padding: 6px;
  }
  .tab-btn {
    padding: 10px 18px;
    font-size: 12px;
    letter-spacing: 2px;
    gap: 10px;
  }
  .tab-btn .tab-icon {
    font-size: 14px;
  }
  .match-format-selector {
    top: 80px;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 20px;
  }
  .format-label {
    padding: 10px 20px;
    font-size: 12px;
    letter-spacing: 2px;
  }
  .team-roster .character-portrait {
    width: 260px;
    height: 370px;
  }
  .team-roster .character-card {
    margin: 0 -12px;
  }
  .team-roster .character-card.center {
    transform: translateY(-24px) scale(1.08);
    margin: 0 6px;
  }
  .name-plate {
    padding: 10px 24px;
    min-width: 200px;
  }
  .character-name {
    font-size: 18px;
    letter-spacing: 3px;
  }
  .character-class {
    font-size: 14px;
  }
  .fighters-row {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .fighters-row .character-card:nth-child(3) {
    max-width: none;
  }
  .loadout-card .character-portrait {
    height: 380px;
  }
  .fighter-content {
    flex-direction: column;
    align-items: center;
  }
  .card-slots-column {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
  }
  .card-slot {
    width: 65px;
    height: 88px;
  }
  .card-slot .slot-label {
    font-size: 0.45rem;
  }
  .faction-flag {
    display: none;
  }
  .loadout-header {
    padding: 20px 0;
    margin-bottom: 30px;
  }
  .loadout-bg-emblem {
    width: 400px;
    height: 400px;
    left: 50%;
    transform: translateX(-50%);
  }
  .loadout-logo-frame {
    width: 60px;
    height: 60px;
  }
  .loadout-team-logo {
    width: 38px;
    height: 38px;
  }
  .loadout-team-name {
    font-size: 1.3rem;
    letter-spacing: 3px;
  }
  .debug-faction-selector {
    flex-wrap: wrap;
    gap: 8px;
  }
  .faction-select-btn {
    padding: 6px 12px;
    font-size: 10px;
  }
  .begin-combat-btn {
    padding: 16px 48px;
    font-size: 16px;
    letter-spacing: 4px;
  }
  .combat-start-area {
    bottom: 30px;
  }
  .modal-content {
    padding: 20px;
    max-width: 95vw;
  }
  .portrait-modal {
    width: 95vw;
  }
  .portrait-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
  .card-modal {
    width: 95vw;
  }
  .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 12px;
  }
}

@keyframes fpVsPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

@media (max-width: 575px) {
  .mobile-fp-display {
    bottom: 90px;
    gap: 12px;
    padding: 10px 16px;
  }
  .mobile-fp-team {
    width: 65px;
    height: 55px;
  }
  .mobile-fp-value {
    font-size: 1.2rem;
  }
  .mobile-fp-label {
    font-size: 0.45rem;
  }
  .tab-content {
    padding: 120px 10px 80px;
  }
  .setup-tabs {
    top: 10px;
    padding: 4px;
  }
  .tab-btn {
    padding: 8px 12px;
  }
  .match-format-selector {
    top: 60px;
    gap: 6px;
  }
  .format-label {
    padding: 6px 10px;
    font-size: 10px;
    letter-spacing: 1px;
  }
  .team-roster .character-portrait {
    width: 240px;
    height: 340px;
  }
  .character-portrait .corner {
    width: 20px;
    height: 20px;
  }
  .character-portrait .corner.tl,
    .character-portrait .corner.tr,
    .character-portrait .corner.bl,
    .character-portrait .corner.br {
    border-width: 4px;
  }
  .name-plate {
    padding: 8px 16px;
    min-width: 160px;
  }
  .character-name {
    font-size: 14px;
    letter-spacing: 2px;
  }
  .character-class {
    font-size: 12px;
  }
  .vs-line {
    width: 200px;
  }
  .vs-badge {
    width: 100px;
    height: 100px;
  }
  .vs-text {
    font-size: 32px;
  }
  .loadout-card .character-portrait {
    height: 300px;
  }
  .card-slots-column {
    gap: 8px;
  }
  .card-slot {
    width: 55px;
    height: 75px;
  }
  .card-slot .slot-label {
    font-size: 0.4rem;
    padding: 3px;
  }
  .card-slot::before,
    .card-slot::after {
    width: 8px;
    height: 8px;
  }
  .stat-bar {
    gap: 6px;
  }
  .bar-label {
    font-size: 0.6rem;
    width: 28px;
  }
  .bar-track {
    height: 16px;
  }
  .bar-value {
    font-size: 0.6rem;
  }
  .fighter-name-input {
    font-size: 0.8rem;
    padding: 6px 10px;
  }
  .loadout-logo-frame {
    width: 50px;
    height: 50px;
  }
  .loadout-team-logo {
    width: 32px;
    height: 32px;
  }
  .loadout-team-name {
    font-size: 0.9rem;
    letter-spacing: 2px;
  }
  .loadout-bg-emblem {
    width: 250px;
    height: 250px;
  }
  .house-items-row {
    gap: 8px;
  }
  .item-slot {
    width: 60px;
    height: 82px;
  }
  .item-slot::before,
    .item-slot::after {
    width: 8px;
    height: 8px;
  }
  .debug-faction-selector {
    padding: 10px;
  }
  .debug-label {
    font-size: 10px;
    width: 100%;
    text-align: center;
  }
  .faction-select-btn {
    padding: 5px 8px;
    font-size: 9px;
    letter-spacing: 1px;
  }
  .begin-combat-btn {
    padding: 12px 28px;
    font-size: 12px;
    letter-spacing: 2px;
  }
  .combat-start-area {
    bottom: 20px;
  }
  .modal-content {
    padding: 15px;
    border-radius: 8px;
  }
  .modal-header h3 {
    font-size: 1rem;
    letter-spacing: 2px;
  }
  .modal-close {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
  .portrait-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 10px;
    max-height: 300px;
  }
  .upload-btn {
    padding: 10px 20px;
    font-size: 12px;
  }
  .card-search input {
    padding: 10px 12px;
    font-size: 0.9rem;
  }
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 10px;
    max-height: 280px;
  }
  .card-option .card-name {
    font-size: 0.5rem;
    padding: 8px 4px 4px;
  }
  .loadout-total-label {
    font-size: 0.65rem;
  }
  .loadout-total-value {
    font-size: 1.3rem;
  }
  .loadout-fighter-stat-name {
    font-size: 0.9rem;
  }
  .loadout-fighter-stat-class {
    font-size: 0.7rem;
  }
  .loadout-stats-summary .stat-badge-value {
    font-size: 1rem;
  }
}

@keyframes effectFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes lightningFlicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

@keyframes lightningBolts {
    from { transform: translateX(-20px); }
    to { transform: translateX(0); }
}

@keyframes fireGlow {
    from { box-shadow: 0 0 15px var(--element-fire-glow); }
    to { box-shadow: 0 0 25px var(--element-fire-glow), 0 0 35px rgba(255, 69, 0, 0.3); }
}

@keyframes fireFlicker {
    0%, 100% { transform: scaleY(1) translateY(0); opacity: 0.8; }
    50% { transform: scaleY(1.1) translateY(-2px); opacity: 1; }
}

@keyframes voidPulse {
    0%, 100% { box-shadow: 0 0 15px var(--element-void-glow), inset 0 0 20px rgba(0, 0, 0, 0.8); }
    50% { box-shadow: 0 0 25px var(--element-void-glow), inset 0 0 30px rgba(0, 0, 0, 0.9); }
}

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

@keyframes aetherGlow {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 1; }
}

@keyframes aetherWisp {
    0%, 100% { transform: translateX(0) scale(1); }
    50% { transform: translateX(10px) scale(1.1); }
}

@keyframes chromaShift {
    from { background-position: 0% 50%; }
    to { background-position: 200% 50%; }
}

@keyframes chromaShine {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(200%); }
}

@keyframes bloodPulse {
    0%, 100% { box-shadow: 0 0 10px var(--element-blood-glow); }
    50% { box-shadow: 0 0 20px var(--element-blood-glow), 0 0 30px rgba(139, 0, 0, 0.4); }
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    15% { transform: scale(1.1); opacity: 0.8; }
    30% { transform: scale(1); opacity: 0.5; }
    45% { transform: scale(1.05); opacity: 0.7; }
    60% { transform: scale(1); opacity: 0.5; }
}

@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(-30px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (min-width: 1600px) {
  .team-roster .character-portrait {
    width: 400px;
    height: 580px;
  }
  .loadout-card .character-portrait {
    height: 550px;
  }
  .loadout-stats-summary {
    width: 320px;
  }
  .vs-badge {
    width: 200px;
    height: 200px;
  }
  .vs-text {
    font-size: 72px;
  }
}

@media (max-width: 1599px) and (min-width: 1400px) {
  .loadout-stats-summary {
    width: 280px;
  }
  .bg-faction-flag {
    width: 600px;
    height: 600px;
  }
}

@media (max-width: 1399px) {
  .loadout-stats-summary {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
    padding: 0 20px;
  }
  .loadout-house-totals {
    flex-direction: row;
    gap: 30px;
    align-items: center;
    border-right: none;
    border-bottom: 3px solid var(--faction-color);
    width: 100%;
    max-width: 600px;
  }
  .loadout-house-totals-title {
    text-align: center;
    margin-bottom: 0;
  }
  .loadout-total-item {
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .loadout-stats-header {
    display: none;
  }
  .loadout-fighter-stat-row {
    flex: 1;
    min-width: 200px;
    max-width: 280px;
    border-right: none;
    border-bottom: 3px solid rgba(var(--faction-rgb), 0.5);
    align-items: center;
  }
  .loadout-fighter-stat-row:hover {
    border-color: var(--faction-color);
  }
  .loadout-fighter-stat-details {
    align-items: center;
  }
  .loadout-fighter-stat-core {
    justify-content: center;
  }
  .loadout-stats-summary .stat-badge.element,
    .loadout-stats-summary .stat-badge.sigil {
    justify-content: center;
    flex-direction: row;
  }
}

@media (max-width: 767px) {
  .tab-content {
    padding: 130px 15px 90px;
  }
  .setup-tabs {
    width: calc(100% - 20px);
    justify-content: center;
  }
  .tab-btn {
    padding: 8px 14px;
    font-size: 11px;
    letter-spacing: 1px;
  }
  .tab-btn .tab-text {
    display: none;
  }
  .tab-btn .tab-icon {
    font-size: 18px;
  }
  .match-format-selector {
    top: 70px;
  }
  .format-label {
    padding: 8px 14px;
    font-size: 11px;
  }
  .team-roster {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .team-roster .character-card {
    margin: 0;
  }
  .team-roster .character-card.center {
    transform: none;
    order: -1;
  }
  .team-roster .character-card:hover,
    .team-roster .character-card.center:hover {
    transform: scale(1.02);
  }
  .team-roster .character-portrait {
    width: 280px;
    height: 400px;
  }
  .vs-line {
    width: 280px;
  }
  .vs-badge {
    width: 120px;
    height: 120px;
  }
  .vs-text {
    font-size: 40px;
  }
  .loadout-card .character-portrait {
    height: 350px;
  }
  .loadout-header {
    padding: 15px 0;
  }
  .loadout-title-group {
    flex-direction: column;
    gap: 12px;
  }
  .loadout-team-name {
    font-size: 1.1rem;
    text-align: center;
  }
  .loadout-bg-emblem {
    width: 300px;
    height: 300px;
  }
  .house-items-section {
    padding: 20px 15px;
  }
  .house-items-title {
    font-size: 0.9rem;
    margin-bottom: 20px;
  }
  .house-items-row {
    gap: 12px;
  }
  .item-slot {
    width: 70px;
    height: 95px;
  }
  .item-slot .item-label {
    font-size: 0.5rem;
  }
  .loadout-house-totals {
    flex-direction: column;
    gap: 15px;
  }
  .loadout-total-value {
    font-size: 1.5rem;
  }
  .loadout-fighter-stat-row {
    min-width: 100%;
  }
  .begin-combat-btn {
    padding: 14px 36px;
    font-size: 14px;
    letter-spacing: 3px;
  }
  .portrait-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .card-filters {
    flex-wrap: wrap;
    gap: 8px;
  }
  .filter-btn {
    padding: 8px 16px;
    font-size: 10px;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .tab-content {
    padding-top: 80px;
  }
  .setup-tabs {
    top: 5px;
  }
  .match-format-selector {
    top: 45px;
  }
  .team-roster .character-portrait {
    width: 180px;
    height: 260px;
  }
  .vs-badge {
    width: 80px;
    height: 80px;
  }
  .vs-text {
    font-size: 28px;
  }
  .combat-start-area {
    bottom: 10px;
  }
  .begin-combat-btn {
    padding: 10px 24px;
    font-size: 11px;
  }
}

@media (hover: none) and (pointer: coarse) {
  .card-slot:hover,
    .item-slot:hover,
    .character-card:hover {
    transform: none;
  }
  .team-roster .character-card:hover,
    .team-roster .character-card.center:hover {
    transform: none;
  }
  .portrait-edit-btn {
    opacity: 1;
  }
  .card-slot,
    .item-slot {
    -webkit-tap-highlight-color: transparent;
  }
}

@media print {
  .setup-tabs,
    .match-format-selector,
    .combat-start-area,
    .debug-faction-selector,
    .modal-overlay {
    display: none !important;
  }
  .tab-content {
    display: block !important;
    padding: 20px;
  }
  .setup-background,
    .setup-grid-overlay,
    .setup-vignette {
    display: none;
  }
  .story-dialogue-container {
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: none;
  }
  .character-dialogue {
    background: #f9f9f9;
    border: 1px solid #ddd;
  }
  .dialogue-line {
    color: #333;
    background: #fff;
  }
  .rivalry-banner,
    .story-rescue-section {
    background: #f0f0f0;
    border: 1px solid #ccc;
    animation: none;
  }
  .card-reveal-modal {
    display: none !important;
  }
}

@keyframes floatUp {
  0% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -30px);
  }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes glitch {
  0% {
    text-shadow: 2px 2px var(--shadow-primary), -2px -2px var(--shadow-secondary);
    clip-path: var(--clip-one);
  }
  2% {
    clip-path: var(--clip-two);
  }
  4% {
    clip-path: var(--clip-three);
  }
  6% {
    clip-path: var(--clip-four);
  }
  8% {
    clip-path: var(--clip-five);
  }
  10% {
    clip-path: var(--clip-six);
  }
  12% {
    clip-path: var(--clip-seven);
  }
  100% {
    text-shadow: 2px 2px var(--shadow-primary), -2px -2px var(--shadow-secondary);
    clip-path: var(--clip-one);
  }
}

@keyframes cardShine {
  0% { 
    left: -120%; 
    opacity: 0;
  }
  5% {
    opacity: 0.6;
  }
  15% { 
    left: 120%; 
    opacity: 0.8;
  }
  20% {
    opacity: 0.4;
  }
  100% { 
    left: 120%; 
    opacity: 0;
  }
}

@keyframes crtRefresh {
  0% { top: -5%; }
  100% { top: 105%; }
}

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

@keyframes rivalryPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 69, 0, 0.2); }
    50% { box-shadow: 0 0 25px rgba(255, 69, 0, 0.4); }
}

@keyframes rescueGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(0, 255, 100, 0.2); }
    50% { box-shadow: 0 0 30px rgba(0, 255, 100, 0.4); }
}

@keyframes rescueBounce {
    0% { transform: scale(1); }
    100% { transform: scale(1.2); }
}

@keyframes rescueFlash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes dialogueFadeIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 768px) {
  .story-dialogue-container {
    padding: 10px;
    margin: 10px;
  }
  .character-dialogue-header {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
  .character-dialogue-content {
    padding-left: 0;
  }
  .rivalry-banner {
    padding: 12px 15px;
  }
  .rivalry-text {
    font-size: 1em;
    letter-spacing: 2px;
  }
  .rescue-text {
    font-size: 1.2em;
    letter-spacing: 2px;
  }
  .dialogue-line {
    padding: 8px 12px;
    font-size: 0.9em;
  }
  .story-vn-container {
    width: 95%;
    max-width: none;
    margin: 10px;
  }
  .story-vn-content {
    flex-direction: column !important;
    padding: 15px;
    gap: 15px;
  }
  .story-vn-portrait-section {
    flex: 0 0 auto;
  }
  .story-vn-portrait-frame {
    width: 150px;
    height: 195px;
  }
  .story-vn-character-name {
    font-size: 1.2em;
  }
  .story-vn-text-content {
    font-size: 1em;
  }
  .story-vn-acknowledge-btn {
    padding: 10px 20px;
    font-size: 0.8em;
  }
  .tab-icon-img-wrapper {
    width: 28px;
    height: 28px;
  }
  .story-house-tab {
    padding: 10px 14px;
    font-size: 0.65em;
  }
  .requirement-tag {
    font-size: 0.7em;
    padding: 5px 10px;
  }
  .requirement-group {
    flex-direction: column;
    align-items: flex-start;
  }
  .requirement-group-label {
    width: 100%;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .leaderboard-panel {
    width: 95%;
    max-width: none;
    margin: 10px;
  }
  .leaderboard-entry {
    grid-template-columns: 50px 1fr;
    gap: 10px;
  }
  .rank-badge {
    width: 40px;
    height: 40px;
  }
  .xp-bar-container,
    .milestone-indicator,
    .view-details-btn {
    grid-column: 1 / -1;
  }
  .xp-details-modal {
    width: 95%;
    margin: 10px;
  }
  .card-reveal-image-container {
    width: 300px;
    height: 450px;
  }
  .card-reveal-character-name {
    font-size: 2rem;
  }
  .card-reveal-character-title {
    font-size: 1rem;
  }
  .card-reveal-message {
    font-size: 1rem;
  }
  .card-reveal-glow {
    width: 350px;
    height: 500px;
  }
  .card-reveal-unlock-badge {
    font-size: 1.2rem;
  }
  .battle-notification-container {
    width: 90vw;
  }
  .equipment-slot {
    width: 60px;
    height: 90px;
  }
  .card-info {
    font-size: 9px;
    padding: 6px 3px 3px;
  }
  .card-name-overlay {
    font-size: 9px;
  }
  .card-stats-overlay {
    font-size: 8px;
  }
  .card {
    width: 120px;
    height: 160px;
  }
  .card-info-hover {
    width: 200px;
    font-size: 11px;
    padding: 10px;
  }
  .toasty-image {
    width: 300px;
  }
  .toasty-image.from-left {
    left: -300px;
    animation: toastySlideFromLeftMobile 1.5s ease-out forwards;
  }
  .toasty-image.from-right {
    right: -300px;
    animation: toastySlideFromRightMobile 1.5s ease-out forwards;
  }
  @keyframes toastySlideFromLeftMobile {
    0% { left: -300px;
    opacity: 0;
    }
        15% { left: 15px;
    }
        70% { left: 15px;
    }
        100% { left: -300px;
  }
}

  @keyframes toastySlideFromRightMobile {
    0% { right: -300px;
    opacity: 0;
    }
        15% { right: 15px;
    }
        70% { right: 15px;
    }
        100% { right: -300px;
  }
}

  .highlight-text.toasty-text {
    font-size: 2.5rem;
  }
  .highlight-text.toasty-text.text-left {
    margin-left: 200px;
  }
  .highlight-text.toasty-text.text-right {
    margin-right: 200px;
  }
  .combat-highlight-overlay.toasty-active .highlight-content {
    bottom: 150px !important;
  }
  .highlight-text {
    font-size: 2.5rem;
  }
  .highlight-text-streak-legendary,
    .highlight-text-flawless,
    .highlight-text-comeback,
    .highlight-text-one-shot {
    font-size: 3rem;
  }

  #campaign-selection,
  #house-selection,
  #results-screen {
    justify-content: flex-start;
    padding-top: 40px;
  }

/* =============================================================================
   TEAM LOADOUT — VS STYLE
   ============================================================================= */

  .combat-arena {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 0 15px;
    margin-top: 20px;
    overflow: visible;
  }
  .combat-arena .fighter {
    width: 100%;
    max-width: 100%;
  }
  .combat-arena .combat-controls {
    order: 1;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    /*background-color: rgba(13, 2, 33, 0.7);
    */
    border: 1px solid var(--primary);
    border-radius: 10px;
    margin: 20px 0;
  }
  .vs-display {
    font-size: 2em;
    margin: 10px 0;
  }
  .combat-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 100%;
  }
  .combat-btn {
    min-width: 120px;
    margin: 5px;
  }
  .item-use-section {
    grid-template-columns: 1fr;
    gap: 15px;
    width: 100%;
  }
  .house-a-items, .house-b-items {
    width: 100%;
  }
  .houses-display {
    flex-direction: column;
    gap: 20px;
  }
  .house-display {
    width: 100%;
    margin: 0;
    padding: 15px;
  }
  .items-section {
    flex-direction: column;
    gap: 20px;
  }
  .house-items {
    width: 100%;
  }
  .items-container {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
  }
  .fighter-setup-row {
    padding: 15px;
  }
  .fighter-equipment-setup {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
  }
  .final-results {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 15px;
  }
  .winning-house {
    width: 100%;
    padding: 15px;
  }
  .house-logo {
    width: 100px;
    height: 100px;
    margin: 10px auto;
  }
  .match-summary {
    width: 100%;
    padding: 15px;
  }
  .matches-container {
    max-height: 300px;
  }
  .match-row {
    grid-template-columns: 30px 1fr 1fr;
    gap: 8px;
    padding: 8px;
  }
  .match-fighter {
    padding: 6px;
  }
  .match-fighter h4 {
    font-size: 0.9em;
  }
  .match-fighter p {
    font-size: 0.8em;
  }
  .action-buttons {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
  .action-buttons button {
    width: 100%;
    margin: 0;
  }
  .houses-result {
    flex-direction: column;
    gap: 15px;
  }
  .house-display .house-logo {
    width: 80px;
    height: 80px;
  }
  .house-display h2 {
    font-size: 1.3em;
  }
  .house-display h3 {
    font-size: 1.1em;
  }
  .button-container {
    flex-direction: column;
    gap: 10px;
  }
  .button-container .cybr-btn {
    width: 100%;
    max-width: 300px;
  }
  .outpost-tooltip {
    width: 240px;
    min-width: 200px;
    max-width: 260px;
    padding: 10px 12px;
    font-size: 0.85em;
  }
  .outpost-tooltip h4 {
    font-size: 1em;
  }
  .effect-badge {
    font-size: 0.65em;
    padding: 1px 4px;
  }
  .card-tooltip {
    width: calc(100% - 10px);
    min-width: 180px;
    max-width: 280px;
    padding: 10px 12px;
    font-size: 0.9em;
  }
  .tooltip-title {
    font-size: 0.9em;
  }
  .tooltip-stats {
    font-size: 0.8em;
  }
  .tooltip-effect {
    font-size: 0.75em;
  }
  .molotov-armed-indicator,
  .molotov-burn-indicator {
    width: 18px;
    height: 18px;
    font-size: 10px;
  }
  .molotov-armed-indicator .molotov-tooltip,
  .molotov-burn-indicator .burn-tooltip {
    font-size: 9px;
    padding: 4px 6px;
  }
  .molotov-burn-indicator .burn-count {
    width: 10px;
    height: 10px;
    font-size: 7px;
  }
  .houses-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .map-controls {
    flex-direction: column;
    align-items: center;
  }
  .cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

@media (max-width: 480px) {
  .character-portrait-frame {
    width: 50px;
    height: 50px;
  }
  .character-name {
    font-size: 1em;
  }
  .character-title {
    font-size: 0.8em;
  }
  .rivalry-history {
    font-size: 0.75em;
  }
  .story-vn-portrait-frame {
    width: 120px;
    height: 156px;
  }
  .story-vn-house-bar {
    font-size: 0.75em;
    padding: 8px 15px;
  }
  .story-vn-textbox {
    min-height: 100px;
    padding: 15px;
  }
  .tab-icon-img-wrapper {
    width: 24px;
    height: 24px;
  }
  .story-house-tab {
    padding: 8px 10px;
    font-size: 0.6em;
  }
  .tab-name {
    font-size: 0.9em;
  }
  .card-reveal-image-container {
    width: 250px;
    height: 375px;
  }
  .card-reveal-character-name {
    font-size: 1.5rem;
  }
  .card-reveal-character-title {
    font-size: 0.9rem;
  }
  .card-reveal-message {
    font-size: 0.9rem;
    padding: 0 1rem;
  }
  .card-reveal-glow {
    width: 300px;
    height: 450px;
  }
  .card-reveal-unlock-badge {
    font-size: 1rem;
  }
  .card-reveal-rarity {
    font-size: 0.8rem;
    padding: 0.4rem 1rem;
  }
  .card-reveal-container {
    gap: 1.5rem;
  }
  .equipment-slot {
    width: 50px;
    height: 75px;
  }
  .card-info {
    font-size: 8px;
    padding: 4px 2px 2px;
  }
  .card-name-overlay {
    font-size: 8px;
  }
  .card-stats-overlay {
    font-size: 7px;
  }
  .highlight-text {
    font-size: 1.8rem;
  }
  .highlight-text-streak-legendary,
    .highlight-text-flawless,
    .highlight-text-comeback,
    .highlight-text-one-shot {
    font-size: 2.2rem;
  }
  .outpost-tooltip {
    width: 200px;
    min-width: 180px;
    max-width: 220px;
    padding: 8px 10px;
    font-size: 0.8em;
  }
  .outpost-tooltip h4 {
    font-size: 0.95em;
  }
}

@keyframes typing {
    from { max-width: 0; }
    to { max-width: 100%; }
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes characterTransition {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.98); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes houseTransition {
    0% { transform: scale(1) translateX(0); opacity: 1; }
    40% { transform: scale(0.9) translateX(-30px); opacity: 0; }
    60% { transform: scale(0.9) translateX(30px); opacity: 0; }
    100% { transform: scale(1) translateX(0); opacity: 1; }
}

@keyframes portraitGlow {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.1); opacity: 0.6; }
}

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

@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@keyframes btnPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(100, 100, 200, 0.4); }
    50% { box-shadow: 0 0 0 10px rgba(100, 100, 200, 0); }
}

@keyframes transitionFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideOutLeft {
    0% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(-30px); opacity: 0.3; }
}

@keyframes arrowPulse {
    from { transform: scale(1); opacity: 0.7; }
    to { transform: scale(1.2); opacity: 1; }
}

@keyframes slideInRight {
    0% { transform: translateX(30px); opacity: 0.3; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes sagaGlow {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; }
}

@keyframes headerIconPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5)); }
    50% { transform: scale(1.1); filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8)); }
}

@media (prefers-reduced-motion: reduce) {
  .tab-icon-img,
    .tab-icon-img-wrapper,
    .story-house-tab {
    transition: none;
  }

}

  .card-reveal-modal,
    .card-reveal-container,
    .card-reveal-glow,
    .card-reveal-image-container,
    .card-reveal-unlock-badge,
    .card-reveal-dismiss-text,
    .card-reveal-rarity.legendary {
    animation: none !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
  }
  .surface-grid,
  .hex-pattern,
  .distortion-band,
  .energy-stream,
  .particle,
  .orb-highlight {
    animation: none !important;
  }
  .sphere-shield.shield-activating {
    animation: simple-fade 0.3s ease-in-out forwards;
  }

  @keyframes simple-fade {
    0% { opacity: 0;
    }
    100% { opacity: 1;
  }
}
  .environmental-screen.cybernetics::after {
    animation-duration: 30s;
  }
  .environmental-screen.cybernetics::before {
    animation-duration: 6s;
  }
  .environmental-screen.cybernetics {
    animation-duration: 20s, 50s, 16s;
  }
  .environmental-screen.arcana {
    animation-duration: 12s, 40s, 50s, 36s, 44s, 56s, 32s, 48s, 8s;
  }

@keyframes tag-appear {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 8px rgba(50, 205, 50, 0.3);
    }
    50% {
        box-shadow: 0 0 15px rgba(50, 205, 50, 0.6);
    }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes shimmer {
    to {
        left: 100%;
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 900px) {
  .story-summary-grid {
    grid-template-columns: 1fr;
  }
  .story-house-tabs {
    gap: 3px;
  }
  .story-house-tab {
    padding: 8px 12px;
  }
  .tab-name {
    font-size: 0.6em;
  }
  .modal-content {
    max-width: 700px;
    width: 98vw;
  }
  .cards-container {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    padding: 10px;
  }
  .cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    max-width: 98vw;
    padding: 10px;
  }
  .battle-map-container .map-controls {
    padding: 8px 0 8px 0;
  }
}

@media (max-width: 600px) {
  .story-summary-container {
    width: 98%;
    max-height: 95vh;
  }
  .header-title {
    font-size: 1em;
    letter-spacing: 2px;
  }
  .header-decoration {
    display: none;
  }
  .story-house-tabs {
    padding: 10px;
  }
  .story-house-tab {
    padding: 6px 8px;
    flex: 1;
    min-width: 0;
  }
  .tab-icon {
    font-size: 1.2em;
  }
  .tab-name {
    display: none;
  }
  .story-house-banner {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  .banner-logo {
    width: 60px;
    height: 60px;
  }
  .banner-house-name {
    font-size: 1.2em;
  }
  .footer-stats {
    flex-direction: column;
    gap: 8px;
  }
  .story-summary-footer {
    flex-direction: column;
    gap: 15px;
  }
  .modal-content {
    max-width: 98vw;
    width: 98vw;
    padding: 8px;
  }
  .cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    max-height: 400px;
    overflow-y: auto;
  }
  .card-item {
    max-width: 98vw;
    min-width: 0;
  }
  .equipment-slot {
    width: 75px;
    height: 100px;
  }
  .item-slot {
    width: 60px;
    height: 80px;
  }
  .house-info {
    flex-wrap: wrap;
  }
  .house-info img {
    width: 50px;
    height: 50px;
  }
}

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

@keyframes cardFadeIn {
    to { opacity: 1; }
}

@keyframes cardGlowPulse {
    0%, 100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

@keyframes cardFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes badgePulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

@keyframes legendaryGlow {
    0%, 100% {
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
    }
    50% {
        box-shadow: 0 0 50px rgba(255, 215, 0, 0.9);
    }
}

@media (prefers-contrast: high) {
  .card-reveal-backdrop {
    background: rgba(0, 0, 0, 1);
  }
  .card-reveal-character-name,
    .card-reveal-character-title,
    .card-reveal-message {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
  }
}

@media (hover: hover) and (pointer: fine) {
  .card-reveal-modal:hover {
    cursor: pointer;
  }
  .card-reveal-image-container {
    transition: transform 0.3s ease;
  }
  .card-reveal-modal.active .card-reveal-image-container:hover {
    transform: translateY(-5px) scale(1.02);
  }
}

@keyframes particleFloat {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50px);
    }
}

@media (prefers-color-scheme: light) {
  .card-reveal-backdrop {
    background: rgba(0, 0, 0, 0.3);
  }
}

@keyframes effectOrbit {
  0% { transform: rotate(0deg) translateX(25px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(25px) rotate(-360deg); }
}

@keyframes radiationEffect {
  from { 
    box-shadow: 0 0 10px #7FFF00;
    filter: brightness(1);
  }
  to { 
    box-shadow: 0 0 18px #7FFF00, 0 0 30px rgba(127, 255, 0, 0.6);
    filter: brightness(1.3);
  }
}

@keyframes rejuvenationEffect {
  from { 
    box-shadow: 0 0 10px #00FFFF;
    transform: rotate(0deg) translateX(25px) rotate(0deg) scale(1);
  }
  to { 
    box-shadow: 0 0 18px #00FFFF, 0 0 30px rgba(0, 255, 255, 0.6);
    transform: rotate(0deg) translateX(25px) rotate(0deg) scale(1.2);
  }
}

@keyframes arcanaEffect {
  from { 
    box-shadow: 0 0 10px #FF00FF;
    filter: hue-rotate(0deg);
  }
  to { 
    box-shadow: 0 0 18px #FF00FF, 0 0 30px rgba(255, 0, 255, 0.6);
    filter: hue-rotate(30deg);
  }
}

@keyframes cyberneticsEffect {
  from { 
    box-shadow: 0 0 10px #1E90FF;
    filter: brightness(1) contrast(1);
  }
  to { 
    box-shadow: 0 0 18px #1E90FF, 0 0 30px rgba(30, 144, 255, 0.6);
    filter: brightness(1.4) contrast(1.2);
  }
}

@keyframes poisonEffect {
  from { 
    box-shadow: 0 0 10px #9ACD32;
    filter: hue-rotate(0deg) saturate(1);
  }
  to { 
    box-shadow: 0 0 18px #9ACD32, 0 0 30px rgba(154, 205, 50, 0.6);
    filter: hue-rotate(20deg) saturate(1.3);
  }
}

@keyframes weaponsEffect {
  from { 
    box-shadow: 0 0 10px #FFA500;
    transform: rotate(0deg) translateX(25px) rotate(0deg);
  }
  to { 
    box-shadow: 0 0 18px #FFA500, 0 0 30px rgba(255, 165, 0, 0.6);
    transform: rotate(0deg) translateX(25px) rotate(0deg) scale(1.1);
  }
}

@keyframes powerEffect {
  from { 
    box-shadow: 0 0 10px #FFFF00;
    filter: brightness(1);
  }
  to { 
    box-shadow: 0 0 18px #FFFF00, 0 0 30px rgba(255, 255, 0, 0.6);
    filter: brightness(1.5);
  }
}

@keyframes floatGlow {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
    50% { transform: translate(30px, -20px) scale(1.2); opacity: 0.8; }
}

@media (min-width: 2000px) {
  .combat-content {
    max-width: 2000px;
    padding: 20px 60px;
  }
  .combatant-side.player {
    margin-left: 0;
  }
  .combatant-side.opponent {
    margin-right: 0;
  }
  .creature-popup.player {
    left: calc(50vw - 780px);
  }
  .creature-popup.opponent {
    right: calc(50vw - 780px);
  }
  .combat-log {
    max-width: 700px;
  }
}

@keyframes narratorPopOut {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0); opacity: 0; }
}

@keyframes narratorPopIn {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes narratorShake {
    0%, 100% { transform: scale(1) translateX(0); }
    20% { transform: scale(1) translateX(-5px); }
    40% { transform: scale(1) translateX(5px); }
    60% { transform: scale(1) translateX(-5px); }
    80% { transform: scale(1) translateX(3px); }
}

@keyframes floatStats {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes chargeReady { 0%, 100% { filter: brightness(1.1); } 50% { filter: brightness(1.3); } }

@keyframes chargeGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(74, 222, 128, 0.6), 0 0 30px rgba(74, 222, 128, 0.4); }
    50% { box-shadow: 0 0 25px rgba(74, 222, 128, 0.8), 0 0 50px rgba(74, 222, 128, 0.5); }
}

@keyframes readyPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

@keyframes cooldownSweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

@keyframes lightningCrackle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.1); } }

@keyframes flamePulse { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.15); opacity: 1; } }

@keyframes poisonBubble { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.05) translateY(-2px); } 75% { transform: scale(0.95) translateY(2px); } }

@keyframes resistantShimmer { 0% { transform: translateX(-100%) rotate(45deg); } 100% { transform: translateX(100%) rotate(45deg); } }

@keyframes stimPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

@media (min-width: 1920px) {
  .creature-popup.player {
    left: calc(50vw - 840px);
  }
  .creature-popup.opponent {
    right: calc(50vw - 840px);
  }
  .combat-log {
    max-width: 700px;
  }
}

@keyframes armedPulse {
    0%, 100% { box-shadow: 0 0 15px var(--accent-warning), 0 0 30px var(--accent-warning), 0 0 45px rgba(245, 158, 11, 0.4); }
    50% { box-shadow: 0 0 20px var(--accent-warning), 0 0 40px var(--accent-warning), 0 0 60px rgba(245, 158, 11, 0.6); }
}

@keyframes notificationGlow {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    }
    50% {
        box-shadow: 0 4px 20px rgba(255, 215, 0, 0.8),
                    0 0 30px rgba(255, 215, 0, 0.4);
    }
}

@media (max-width: 1400px) {
  .battle-notification-container {
    width: 350px;
    right: 20px;
  }
  .battle-notification {
    font-size: 1rem;
    padding: 10px 16px;
  }
  .card-info-hover {
    width: 250px;
    font-size: 90%;
  }
  .card-name-overlay {
    font-size: 16px;
  }
}

@media (max-width: 1200px) {
  .battle-notification-container {
    top: 100px;
    width: 300px;
    right: 15px;
  }
  .battle-notification {
    font-size: 0.95rem;
    padding: 8px 14px;
  }
  .card-info-hover {
    width: 240px;
    font-size: 12px;
    padding: 12px;
  }
  .equipment-slot:hover .card-info-hover {
    top: auto;
    bottom: 105%;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  .creature-slot:hover .card-info-hover,
    .ability-slot:hover .card-info-hover,
    .weapon-slots .weapon-slot:last-child:hover .card-info-hover {
    top: auto;
    bottom: 105%;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  .modal-content {
    max-width: 98vw;
  }

  .combat-arena {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .combat-controls {
    order: -1;
  }
  .final-results {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .houses-display,
    .items-section {
    flex-direction: column;
    align-items: center;
  }
  .house-display,
    .house-items {
    max-width: 100%;
    width: 100%;
  }
}

@keyframes floatSlow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

@keyframes vsPulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.4); opacity: 0.9; } }

@keyframes damageShake { 0%, 100% { transform: translateX(0) rotate(-1deg); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-15px) rotate(-4deg); } 20%, 40%, 60%, 80% { transform: translateX(15px) rotate(2deg); } }

@keyframes damageFlash { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }

@keyframes positiveGlow { 0%, 100% { box-shadow: var(--panel-shadow); } 50% { box-shadow: var(--panel-shadow), 0 0 60px var(--accent-success); } }

@keyframes positiveFlash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }

@keyframes logSlideIn { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }

@keyframes damageFloat {
    0% { opacity: 1; transform: translateY(0) scale(0.5); }
    50% { opacity: 1; transform: translateY(-40px) scale(1.3); }
    100% { opacity: 0; transform: translateY(-80px) scale(1); }
}

@keyframes flashBang { 0% { opacity: 0.9; } 100% { opacity: 0; } }

@keyframes equipmentGlow {
    0% { box-shadow: 0 0 0 rgba(0, 191, 255, 0); }
    50% { box-shadow: 0 0 20px rgba(0, 191, 255, 0.8); }
    100% { box-shadow: 0 0 0 rgba(0, 191, 255, 0); }
}

@keyframes cardShineHover {
    0% { left: -120%; opacity: 0; }
    20% { opacity: 1; }
    40% { left: 120%; opacity: 1; }
    100% { left: 120%; opacity: 0; }
}

@keyframes breathingGlow {
  0%, 100% { 
    transform: scale(0.8) rotate(0deg);
    opacity: 0.7;
  }
  50% { 
    transform: scale(1.2) rotate(180deg);
    opacity: 1;
  }
}

@keyframes loading {
  to { width: 100%; }
}

@keyframes chromaResistanceShimmer {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

@keyframes pulseBadge {
  from { opacity: 0.8; transform: scale(1); }
  to { opacity: 1; transform: scale(1.1); }
}

@keyframes deflectIndicatorPulse {
  from { transform: scale(1) translate(-50%, 0); }
  to { transform: scale(1.2) translate(-40%, 0); }
}

@keyframes biohazard-pulse {
  0%, 100% { 
    color: #22c55e;
    text-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
  }
  50% { 
    color: #16a34a;
    text-shadow: 0 0 12px rgba(34, 197, 94, 0.8);
  }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes streak-charging-pulse {
  0%, 100% { 
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.2);
  }
  50% { 
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
  }
}

@keyframes streak-active-glow {
  0%, 100% { 
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
    transform: scale(1);
  }
  50% { 
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.9);
    transform: scale(1.02);
  }
}

@keyframes streak-max-blaze {
  0%, 100% { 
    box-shadow: 0 0 15px rgba(255, 69, 0, 0.7);
    transform: scale(1);
  }
  50% { 
    box-shadow: 0 0 30px rgba(255, 69, 0, 1), 
                0 0 40px rgba(255, 140, 0, 0.5);
    transform: scale(1.03);
  }
}

@keyframes streak-ready-pulse {
  0%, 100% { 
    box-shadow: 0 0 10px rgba(0, 255, 127, 0.4);
    border-color: rgba(0, 255, 127, 0.6);
  }
  50% { 
    box-shadow: 0 0 20px rgba(0, 255, 127, 0.8);
    border-color: rgba(0, 255, 127, 0.9);
  }
}

@keyframes streak-activation-burst {
  0% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(255, 215, 0, 1),
                0 0 50px rgba(255, 255, 255, 0.5);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
  }
}

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

@keyframes poison-pulse {
    0%, 100% { 
        opacity: 1;
        filter: brightness(1) hue-rotate(0deg);
    }
    50% { 
        opacity: 0.8;
        filter: brightness(0.8) hue-rotate(-10deg);
    }
}

@keyframes shake-scale {
    0%, 100% { transform: scale(1.2) translateX(0); }
    25% { transform: scale(1.2) translateX(-1px); }
    75% { transform: scale(1.2) translateX(1px); }
}

@keyframes debuff-pulse {
    0%, 100% { 
        opacity: 1;
        filter: brightness(1);
    }
    50% { 
        opacity: 0.85;
        filter: brightness(0.9);
    }
}

@keyframes buff-glow {
    0%, 100% { 
        opacity: 1;
        filter: brightness(1);
    }
    50% { 
        opacity: 1;
        filter: brightness(1.2);
    }
}

@keyframes creature-take-damage {
    0% { 
        filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5)) brightness(1);
        transform: translate(0, 0) scale(1);
    }
    15% { 
        filter: drop-shadow(0 0 60px rgba(255, 255, 255, 1)) brightness(1.8);
        transform: translate(-8px, 4px) scale(1.1) rotate(-3deg);
    }
    30% { 
        filter: drop-shadow(0 0 50px rgba(255, 0, 0, 1)) brightness(1.5) contrast(1.3);
        transform: translate(10px, -6px) scale(1.08) rotate(4deg);
    }
    45% { 
        filter: drop-shadow(0 0 40px rgba(255, 255, 255, 0.8)) brightness(1.6);
        transform: translate(-6px, 3px) scale(1.05) rotate(-2deg);
    }
    60% { 
        filter: drop-shadow(0 0 30px rgba(255, 0, 60, 0.7)) brightness(1.3) saturate(1.5);
        transform: translate(4px, -2px) scale(1.02) rotate(1deg);
    }
    100% { 
        filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5)) brightness(1);
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
}

@keyframes creature-heal {
    0% { 
        filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5)) brightness(1);
        transform: scale(1);
    }
    25% { 
        filter: drop-shadow(0 0 40px rgba(0, 255, 128, 0.8)) brightness(1.3);
        transform: scale(1.05);
    }
    50% { 
        filter: drop-shadow(0 0 60px rgba(0, 255, 0, 1)) brightness(1.5) saturate(1.3);
        transform: scale(1.08);
    }
    75% { 
        filter: drop-shadow(0 0 40px rgba(128, 255, 128, 0.8)) brightness(1.3);
        transform: scale(1.05);
    }
    100% { 
        filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5)) brightness(1);
        transform: scale(1);
    }
}

@keyframes creature-deal-hit {
    0% { 
        filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5)) brightness(1);
        transform: scale(1) translateX(0);
    }
    20% { 
        filter: drop-shadow(0 0 30px rgba(255, 140, 0, 0.8)) brightness(1.4);
        transform: scale(1.1) translateX(-20px);
    }
    40% { 
        filter: drop-shadow(0 0 50px rgba(255, 69, 0, 1)) brightness(1.6) saturate(1.5);
        transform: scale(1.15) translateX(30px);
    }
    60% { 
        filter: drop-shadow(0 0 40px rgba(255, 140, 0, 0.9)) brightness(1.4);
        transform: scale(1.1) translateX(-15px);
    }
    80% { 
        filter: drop-shadow(0 0 30px rgba(255, 69, 0, 0.6)) brightness(1.2);
        transform: scale(1.05) translateX(10px);
    }
    100% { 
        filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5)) brightness(1);
        transform: scale(1) translateX(0);
    }
}

@keyframes creature-shield {
    0% { 
        filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5)) brightness(1);
        transform: scale(1);
    }
    50% { 
        filter: drop-shadow(0 0 60px rgba(0, 255, 255, 1)) brightness(1.5) saturate(1.3);
        transform: scale(1.1);
    }
    100% { 
        filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5)) brightness(1);
        transform: scale(1);
    }
}

@keyframes creature-arcana {
    0% { 
        filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5)) brightness(1) hue-rotate(0deg);
        transform: scale(1) rotate(0deg);
    }
    25% { 
        filter: drop-shadow(0 0 40px rgba(153, 50, 204, 0.9)) brightness(1.4) hue-rotate(90deg);
        transform: scale(1.05) rotate(2deg);
    }
    50% { 
        filter: drop-shadow(0 0 60px rgba(153, 50, 204, 1)) brightness(1.6) hue-rotate(180deg);
        transform: scale(1.1) rotate(-2deg);
    }
    75% { 
        filter: drop-shadow(0 0 40px rgba(153, 50, 204, 0.8)) brightness(1.3) hue-rotate(270deg);
        transform: scale(1.05) rotate(1deg);
    }
    100% { 
        filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5)) brightness(1) hue-rotate(360deg);
        transform: scale(1) rotate(0deg);
    }
}

@keyframes creature-buff {
    0% { 
        filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5)) brightness(1);
        transform: scale(1);
    }
    25% { 
        filter: drop-shadow(0 0 40px rgba(255, 215, 0, 0.8)) brightness(1.3);
        transform: scale(1.05) translateY(-5px);
    }
    50% { 
        filter: drop-shadow(0 0 60px rgba(255, 215, 0, 1)) brightness(1.5);
        transform: scale(1.1) translateY(-10px);
    }
    75% { 
        filter: drop-shadow(0 0 40px rgba(255, 215, 0, 0.8)) brightness(1.3);
        transform: scale(1.05) translateY(-5px);
    }
    100% { 
        filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5)) brightness(1);
        transform: scale(1) translateY(0);
    }
}

@keyframes creature-entrance {
    0% {
        opacity: 0;
        transform: translateY(-50%) scale(0.8);
    }
    50% {
        opacity: 1;
        transform: translateY(-50%) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}

@keyframes creature-exit {
    0% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
    50% {
        opacity: 0.5;
        transform: translateY(-50%) scale(0.9);
    }
    100% {
        opacity: 0;
        transform: translateY(-50%) scale(0.8);
    }
}

@keyframes takeDamage {
  0% { 
    box-shadow: 0 0 0 rgba(255, 0, 60, 0);
    border-color: var(--primary);
    background-color: transparent;
    transform: translate(0, 0) scale(1);
    filter: brightness(1);
  }
  8% { 
    box-shadow: 0 0 60px rgba(255, 255, 255, 1);
    border-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.3);
    transform: translate(-6px, 3px) scale(1.08) rotate(-2deg);
    filter: brightness(1.8);
  }
  20% { 
    box-shadow: 0 0 50px rgba(255, 0, 0, 1);
    border-color: #ff0000;
    background-color: rgba(255, 0, 0, 0.4);
    transform: translate(8px, -4px) scale(1.06) rotate(3deg);
    filter: brightness(1.5) contrast(1.3);
  }
  32% { 
    box-shadow: 0 0 45px rgba(255, 255, 255, 0.9);
    border-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.25);
    transform: translate(-5px, 2px) scale(1.04) rotate(-1deg);
    filter: brightness(1.6);
  }
  45% { 
    box-shadow: 0 0 40px rgba(255, 0, 60, 0.8);
    border-color: #cc0000;
    background-color: rgba(255, 0, 60, 0.3);
    transform: translate(4px, -3px) scale(1.02) rotate(1deg);
    filter: brightness(1.3) saturate(1.5);
  }
  58% { 
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.6);
    border-color: #ffcccc;
    background-color: rgba(255, 255, 255, 0.15);
    transform: translate(-2px, 1px) scale(1.01) rotate(-0.5deg);
    filter: brightness(1.2);
  }
  72% { 
    box-shadow: 0 0 20px rgba(255, 0, 60, 0.4);
    border-color: #ff6666;
    background-color: rgba(255, 0, 60, 0.1);
    transform: translate(1px, -1px) scale(1.005) rotate(0.2deg);
    filter: brightness(1.1);
  }
  85% { 
    box-shadow: 0 0 10px rgba(255, 0, 60, 0.2);
    border-color: #ff9999;
    background-color: rgba(255, 0, 60, 0.05);
    transform: translate(-0.5px, 0.5px) scale(1.002) rotate(-0.1deg);
    filter: brightness(1.05);
  }
  100% { 
    box-shadow: 0 0 0 rgba(255, 0, 60, 0);
    border-color: var(--primary);
    background-color: transparent;
    transform: translate(0, 0) scale(1) rotate(0deg);
    filter: brightness(1);
  }
}

@keyframes fire-pulse {
  0% { 
    filter: drop-shadow(0 0 5px rgba(255, 69, 0, 0.5)) brightness(1) saturate(1);
    transform: scale(1);
  }
  8% { 
    filter: drop-shadow(0 0 25px rgba(255, 140, 0, 0.9)) brightness(1.4) saturate(1.3);
    transform: scale(1.02) rotate(0.5deg);
  }
  16% { 
    filter: drop-shadow(0 0 40px rgba(255, 69, 0, 1)) brightness(1.6) saturate(1.5);
    transform: scale(1.04) rotate(-0.5deg);
  }
  24% { 
    filter: drop-shadow(0 0 30px rgba(255, 140, 0, 0.8)) brightness(1.3) saturate(1.2);
    transform: scale(1.03) rotate(0.3deg);
  }
  32% { 
    filter: drop-shadow(0 0 45px rgba(255, 69, 0, 1)) brightness(1.7) saturate(1.6);
    transform: scale(1.05) rotate(-0.3deg);
  }
  40% { 
    filter: drop-shadow(0 0 35px rgba(255, 140, 0, 0.9)) brightness(1.4) saturate(1.3);
    transform: scale(1.02) rotate(0.2deg);
  }
  50% { 
    filter: drop-shadow(0 0 50px rgba(255, 69, 0, 1)) brightness(1.8) saturate(1.7);
    transform: scale(1.06) rotate(-0.2deg);
  }
  60% { 
    filter: drop-shadow(0 0 30px rgba(255, 140, 0, 0.8)) brightness(1.3) saturate(1.2);
    transform: scale(1.03) rotate(0.1deg);
  }
  70% { 
    filter: drop-shadow(0 0 25px rgba(255, 69, 0, 0.7)) brightness(1.2) saturate(1.1);
    transform: scale(1.01) rotate(-0.1deg);
  }
  80% { 
    filter: drop-shadow(0 0 20px rgba(255, 140, 0, 0.6)) brightness(1.1) saturate(1.05);
    transform: scale(1) rotate(0deg);
  }
  90% { 
    filter: drop-shadow(0 0 15px rgba(255, 69, 0, 0.4)) brightness(1.05) saturate(1.02);
    transform: scale(1) rotate(0deg);
  }
  100% { 
    filter: drop-shadow(0 0 5px rgba(255, 69, 0, 0.2)) brightness(1) saturate(1);
    transform: scale(1);
  }
}

@keyframes lightning-pulse {
  0% { 
    filter: drop-shadow(0 0 0 rgba(0, 255, 255, 0)) brightness(1);
    transform: scale(1);
  }
  3% { 
    filter: drop-shadow(0 0 50px rgba(0, 255, 255, 1)) brightness(2.2);
    transform: scale(1.08) skew(1deg);
  }
  6% { 
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.3)) brightness(0.9);
    transform: scale(0.98) skew(-0.5deg);
  }
  9% { 
    filter: drop-shadow(0 0 60px rgba(0, 255, 255, 1)) brightness(2.5);
    transform: scale(1.1) skew(-1deg);
  }
  12% { 
    filter: drop-shadow(0 0 5px rgba(0, 255, 255, 0.2)) brightness(0.8);
    transform: scale(0.97) skew(0.5deg);
  }
  18% { 
    filter: drop-shadow(0 0 45px rgba(0, 255, 255, 0.9)) brightness(2);
    transform: scale(1.06) skew(0.8deg);
  }
  21% { 
    filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.25)) brightness(0.85);
    transform: scale(0.99) skew(-0.3deg);
  }
  27% { 
    filter: drop-shadow(0 0 55px rgba(0, 255, 255, 1)) brightness(2.3);
    transform: scale(1.09) skew(-0.7deg);
  }
  30% { 
    filter: drop-shadow(0 0 12px rgba(0, 255, 255, 0.4)) brightness(0.9);
    transform: scale(0.98) skew(0.2deg);
  }
  36% { 
    filter: drop-shadow(0 0 40px rgba(0, 255, 255, 0.8)) brightness(1.8);
    transform: scale(1.05) skew(0.4deg);
  }
  42% { 
    filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.5)) brightness(1.2);
    transform: scale(1.02) skew(-0.2deg);
  }
  50% { 
    filter: drop-shadow(0 0 30px rgba(0, 255, 255, 0.7)) brightness(1.5);
    transform: scale(1.03) skew(0.1deg);
  }
  65% { 
    filter: drop-shadow(0 0 25px rgba(0, 255, 255, 0.6)) brightness(1.3);
    transform: scale(1.01) skew(0deg);
  }
  80% { 
    filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.4)) brightness(1.1);
    transform: scale(1) skew(0deg);
  }
  100% { 
    filter: drop-shadow(0 0 0 rgba(0, 255, 255, 0)) brightness(1);
    transform: scale(1);
  }
}

@keyframes void-pulse {
  0% { 
    filter: drop-shadow(0 0 0 rgba(75, 0, 130, 0)) blur(0px) invert(0) contrast(1);
    transform: scale(1);
  }
  20% { 
    filter: drop-shadow(0 0 30px rgba(75, 0, 130, 0.8)) blur(2px) invert(0.1) contrast(1.3);
    transform: scale(0.95) rotateX(5deg);
  }
  40% { 
    filter: drop-shadow(0 0 50px rgba(75, 0, 130, 1)) blur(3px) invert(0.2) contrast(1.5);
    transform: scale(0.9) rotateX(10deg) rotateY(3deg);
  }
  60% { 
    filter: drop-shadow(0 0 40px rgba(75, 0, 130, 0.9)) blur(2px) invert(0.15) contrast(1.4);
    transform: scale(0.92) rotateX(8deg) rotateY(-2deg);
  }
  80% { 
    filter: drop-shadow(0 0 25px rgba(75, 0, 130, 0.6)) blur(1px) invert(0.05) contrast(1.1);
    transform: scale(0.97) rotateX(3deg);
  }
  100% { 
    filter: drop-shadow(0 0 0 rgba(75, 0, 130, 0)) blur(0px) invert(0) contrast(1);
    transform: scale(1);
  }
}

@keyframes aether-pulse {
  0% { 
    filter: drop-shadow(0 0 5px rgba(64, 224, 208, 0.3)) brightness(1) saturate(1);
    transform: scale(1);
  }
  25% { 
    filter: drop-shadow(0 0 35px rgba(64, 224, 208, 0.9)) brightness(1.6) saturate(1.4);
    transform: scale(1.04);
  }
  50% { 
    filter: drop-shadow(0 0 50px rgba(64, 224, 208, 1)) brightness(1.8) saturate(1.6);
    transform: scale(1.06);
  }
  75% { 
    filter: drop-shadow(0 0 30px rgba(64, 224, 208, 0.8)) brightness(1.4) saturate(1.2);
    transform: scale(1.03);
  }
  100% { 
    filter: drop-shadow(0 0 5px rgba(64, 224, 208, 0.3)) brightness(1) saturate(1);
    transform: scale(1);
  }
}

@keyframes blood-pulse {
  0% { 
    filter: drop-shadow(0 0 5px rgba(139, 0, 0, 0.4)) brightness(1) contrast(1);
    transform: scale(1);
  }
  15% { 
    filter: drop-shadow(0 0 25px rgba(139, 0, 0, 0.8)) brightness(1.3) contrast(1.4);
    transform: scale(1.02) translateY(-1px);
  }
  30% { 
    filter: drop-shadow(0 0 40px rgba(139, 0, 0, 1)) brightness(1.5) contrast(1.6);
    transform: scale(1.04) translateY(-2px);
  }
  45% { 
    filter: drop-shadow(0 0 35px rgba(139, 0, 0, 0.9)) brightness(1.4) contrast(1.5);
    transform: scale(1.03) translateY(-1px);
  }
  60% { 
    filter: drop-shadow(0 0 30px rgba(139, 0, 0, 0.8)) brightness(1.3) contrast(1.3);
    transform: scale(1.02) translateY(0px);
  }
  75% { 
    filter: drop-shadow(0 0 20px rgba(139, 0, 0, 0.6)) brightness(1.2) contrast(1.2);
    transform: scale(1.01) translateY(0px);
  }
  100% { 
    filter: drop-shadow(0 0 5px rgba(139, 0, 0, 0.4)) brightness(1) contrast(1);
    transform: scale(1);
  }
}

@keyframes chroma-pulse {
  0% { 
    filter: drop-shadow(0 0 15px rgba(255, 0, 255, 0.9)) hue-rotate(0deg) saturate(1.5);
    transform: scale(1);
  }
  10% { 
    filter: drop-shadow(0 0 25px rgba(255, 0, 255, 1)) hue-rotate(36deg) saturate(1.6);
    transform: scale(1.02);
  }
  20% { 
    filter: drop-shadow(0 0 20px rgba(0, 255, 255, 1)) hue-rotate(72deg) saturate(1.7);
    transform: scale(1.04);
  }
  30% { 
    filter: drop-shadow(0 0 25px rgba(0, 255, 0, 1)) hue-rotate(108deg) saturate(1.6);
    transform: scale(1.03);
  }
  40% { 
    filter: drop-shadow(0 0 20px rgba(255, 255, 0, 1)) hue-rotate(144deg) saturate(1.7);
    transform: scale(1.05);
  }
  50% { 
    filter: drop-shadow(0 0 25px rgba(255, 69, 0, 1)) hue-rotate(180deg) saturate(1.8);
    transform: scale(1.06);
  }
  60% { 
    filter: drop-shadow(0 0 20px rgba(255, 0, 0, 1)) hue-rotate(216deg) saturate(1.7);
    transform: scale(1.04);
  }
  70% { 
    filter: drop-shadow(0 0 25px rgba(138, 43, 226, 1)) hue-rotate(252deg) saturate(1.6);
    transform: scale(1.03);
  }
  80% { 
    filter: drop-shadow(0 0 20px rgba(75, 0, 130, 1)) hue-rotate(288deg) saturate(1.5);
    transform: scale(1.02);
  }
  90% { 
    filter: drop-shadow(0 0 25px rgba(139, 0, 139, 1)) hue-rotate(324deg) saturate(1.6);
    transform: scale(1.01);
  }
  100% { 
    filter: drop-shadow(0 0 15px rgba(255, 0, 255, 0.9)) hue-rotate(360deg) saturate(1.5);
    transform: scale(1);
  }
}

@keyframes dodge-afterimage {
  0% { 
    filter: brightness(1) blur(0px);
    transform: translateX(0) scale(1);
  }
  15% {
    filter: brightness(3) blur(1px);
    transform: translateX(-15px) scale(1.05);
  }
  30% {
    filter: brightness(3) blur(1px);
    transform: translateX(20px) scale(1.05);
  }
  45% {
    filter: brightness(3) blur(1px);
    transform: translateX(-10px) scale(1.05);
  }
  60% {
    filter: brightness(2) blur(0.5px);
    transform: translateX(5px) scale(1.02);
  }
  100% { 
    filter: brightness(1) blur(0px);
    transform: translateX(0) scale(1);
  }
}

@keyframes dodge-flash {
  0%, 100% { opacity: 0; }
  20% { opacity: 0.9; }
  40% { opacity: 0.7; }
  60% { opacity: 0.5; }
}

@keyframes arcana-pulse {
  0% { 
    filter: drop-shadow(0 0 10px rgba(153, 50, 204, 0.6)) brightness(1) blur(0px);
    transform: scale(1) rotate(0deg);
  }
  25% { 
    filter: drop-shadow(0 0 30px rgba(153, 50, 204, 0.9)) brightness(1.4) blur(1px);
    transform: scale(1.03) rotate(1deg);
  }
  50% { 
    filter: drop-shadow(0 0 45px rgba(153, 50, 204, 1)) brightness(1.6) blur(2px);
    transform: scale(1.05) rotate(-1deg);
  }
  75% { 
    filter: drop-shadow(0 0 35px rgba(153, 50, 204, 0.8)) brightness(1.3) blur(1px);
    transform: scale(1.02) rotate(0.5deg);
  }
  100% { 
    filter: drop-shadow(0 0 10px rgba(153, 50, 204, 0.6)) brightness(1) blur(0px);
    transform: scale(1) rotate(0deg);
  }
}

@keyframes cybernetics-pulse {
  0% { 
    box-shadow: 0 0 0 rgba(0, 255, 255, 0);
    filter: contrast(1) brightness(1);
    transform: translate(0, 0) scale(1);
  }
  10% { 
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.8);
    filter: contrast(1.5) brightness(1.3);
    transform: translate(-3px, 1px) scale(1.02);
  }
  20% { 
    box-shadow: 0 0 40px rgba(0, 255, 255, 1);
    filter: contrast(1.8) brightness(1.5);
    transform: translate(3px, -1px) scale(1.04);
  }
  30% { 
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.7);
    filter: contrast(1.3) brightness(1.2);
    transform: translate(-2px, 0px) scale(1.01);
  }
  40% { 
    box-shadow: 0 0 35px rgba(0, 255, 255, 0.9);
    filter: contrast(1.6) brightness(1.4);
    transform: translate(2px, 1px) scale(1.03);
  }
  50% { 
    box-shadow: 0 0 45px rgba(0, 255, 255, 1);
    filter: contrast(2) brightness(1.6);
    transform: translate(-1px, -1px) scale(1.05);
  }
  60% { 
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.8);
    filter: contrast(1.4) brightness(1.3);
    transform: translate(1px, 0px) scale(1.02);
  }
  70% { 
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
    filter: contrast(1.2) brightness(1.1);
    transform: translate(-1px, 0px) scale(1.01);
  }
  80% { 
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
    filter: contrast(1.1) brightness(1.05);
    transform: translate(0px, 0px) scale(1);
  }
  100% { 
    box-shadow: 0 0 0 rgba(0, 255, 255, 0);
    filter: contrast(1) brightness(1);
    transform: translate(0, 0) scale(1);
  }
}

@keyframes cybernetics-environmental {
  0% { 
    filter: contrast(1) brightness(1) drop-shadow(0 0 0 rgba(0, 255, 255, 0));
    transform: scale(1);
  }
  25% { 
    filter: contrast(1.3) brightness(1.2) drop-shadow(0 0 15px rgba(0, 255, 255, 0.6));
    transform: scale(1.01);
  }
  50% { 
    filter: contrast(1.6) brightness(1.4) drop-shadow(0 0 25px rgba(0, 255, 255, 0.8));
    transform: scale(1.02);
  }
  75% { 
    filter: contrast(1.4) brightness(1.3) drop-shadow(0 0 20px rgba(0, 255, 255, 0.7));
    transform: scale(1.015);
  }
  100% { 
    filter: contrast(1) brightness(1) drop-shadow(0 0 0 rgba(0, 255, 255, 0));
    transform: scale(1);
  }
}

@keyframes poison-environmental {
  0% { 
    filter: drop-shadow(0 0 5px rgba(154, 205, 50, 0.3)) brightness(1) hue-rotate(0deg);
    transform: scale(1);
  }
  20% { 
    filter: drop-shadow(0 0 20px rgba(154, 205, 50, 0.7)) brightness(0.9) hue-rotate(5deg);
    transform: scale(0.99) skew(0.5deg);
  }
  40% { 
    filter: drop-shadow(0 0 30px rgba(154, 205, 50, 0.9)) brightness(0.8) hue-rotate(10deg);
    transform: scale(0.98) skew(-0.5deg);
  }
  60% { 
    filter: drop-shadow(0 0 25px rgba(154, 205, 50, 0.8)) brightness(0.85) hue-rotate(8deg);
    transform: scale(0.985) skew(0.3deg);
  }
  80% { 
    filter: drop-shadow(0 0 15px rgba(154, 205, 50, 0.6)) brightness(0.95) hue-rotate(3deg);
    transform: scale(0.995) skew(-0.2deg);
  }
  100% { 
    filter: drop-shadow(0 0 5px rgba(154, 205, 50, 0.3)) brightness(1) hue-rotate(0deg);
    transform: scale(1);
  }
}

@keyframes rejuvenation-environmental {
  0% { 
    filter: drop-shadow(0 0 5px rgba(224, 255, 255, 0.4)) brightness(1);
    transform: scale(1);
  }
  25% { 
    filter: drop-shadow(0 0 15px rgba(224, 255, 255, 0.7)) brightness(1.15);
    transform: scale(1.01);
  }
  50% { 
    filter: drop-shadow(0 0 25px rgba(224, 255, 255, 0.9)) brightness(1.25);
    transform: scale(1.02);
  }
  75% { 
    filter: drop-shadow(0 0 20px rgba(224, 255, 255, 0.8)) brightness(1.2);
    transform: scale(1.015);
  }
  100% { 
    filter: drop-shadow(0 0 5px rgba(224, 255, 255, 0.4)) brightness(1);
    transform: scale(1);
  }
}

@keyframes radiation-environmental {
  0% { 
    filter: drop-shadow(0 0 3px rgba(127, 255, 0, 0.2)) opacity(1);
    transform: scale(1);
  }
  33% { 
    filter: drop-shadow(0 0 12px rgba(127, 255, 0, 0.5)) opacity(0.97);
    transform: scale(1.005);
  }
  66% { 
    filter: drop-shadow(0 0 18px rgba(127, 255, 0, 0.7)) opacity(0.95);
    transform: scale(1.01);
  }
  100% { 
    filter: drop-shadow(0 0 3px rgba(127, 255, 0, 0.2)) opacity(1);
    transform: scale(1);
  }
}

@keyframes radiation-pulse {
    0% { 
        filter: drop-shadow(0 0 3px rgba(127, 255, 0, 0.2)) brightness(1);
        transform: scale(1);
        box-shadow: 0 0 0 rgba(127, 255, 0, 0);
    }
    25% { 
        filter: drop-shadow(0 0 12px rgba(127, 255, 0, 0.6)) brightness(1.1);
        transform: scale(1.01);
        box-shadow: 0 0 15px rgba(127, 255, 0, 0.4);
    }
    50% { 
        filter: drop-shadow(0 0 18px rgba(127, 255, 0, 0.8)) brightness(1.15);
        transform: scale(1.02);
        box-shadow: 0 0 25px rgba(127, 255, 0, 0.6);
    }
    75% { 
        filter: drop-shadow(0 0 15px rgba(127, 255, 0, 0.7)) brightness(1.1);
        transform: scale(1.01);
        box-shadow: 0 0 20px rgba(127, 255, 0, 0.5);
    }
    100% { 
        filter: drop-shadow(0 0 3px rgba(127, 255, 0, 0.2)) brightness(1);
        transform: scale(1);
        box-shadow: 0 0 0 rgba(127, 255, 0, 0);
    }
}

@keyframes armed-preparation {
    0% { 
        box-shadow: 0 0 0 rgba(255, 215, 0, 0);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
        transform: scale(1.01);
    }
    100% { 
        box-shadow: 0 0 5px rgba(255, 215, 0, 0.2);
        transform: scale(1);
    }
}

@keyframes surface-rotate {
  0% { transform: translateX(0) translateZ(0); }
  100% { transform: translateX(33.33%) translateZ(0); }
}

@keyframes hex-rotate {
  0% { transform: translateX(0) translateZ(0); }
  100% { transform: translateX(33.33%) translateZ(0); }
}

@keyframes band-move {
  0% {
    left: -15%;
    transform: scaleX(0.5) scaleY(0.9) translateZ(0);
    opacity: 0;
  }
  15% {
    opacity: 0.6;
    transform: scaleX(0.7) scaleY(0.95) translateZ(0);
  }
  50% {
    left: 42.5%;
    transform: scaleX(1.2) scaleY(1) translateZ(0);
    opacity: 0.8;
  }
  85% {
    opacity: 0.6;
    transform: scaleX(0.7) scaleY(0.95) translateZ(0);
  }
  100% {
    left: 100%;
    transform: scaleX(0.5) scaleY(0.9) translateZ(0);
    opacity: 0;
  }
}

@keyframes energy-pulse {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.8; }
}

@keyframes highlight-shift {
  0%, 100% { transform: translate(0, 0) translateZ(20px); }
  33% { transform: translate(10px, -5px) translateZ(20px); }
  66% { transform: translate(-5px, 5px) translateZ(20px); }
}

@keyframes float-universal {
  0%, 100% { 
    transform: translate(var(--x1), var(--y1)) scale(var(--scale1)) translateZ(0); 
    opacity: 0.8; 
  }
  50% { 
    transform: translate(var(--x2), var(--y2)) scale(var(--scale2)) translateZ(0); 
    opacity: 1; 
  }
}

@keyframes orb-materialize {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.1) translateZ(0);
    filter: blur(20px);
  }
  50% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.1) translateZ(0);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) translateZ(0);
    filter: blur(0);
  }
}

@keyframes orb-dematerialize {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) translateZ(0);
    filter: blur(0);
  }
  50% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.1) translateZ(0);
    filter: blur(2px);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.1) translateZ(0);
    filter: blur(20px);
  }
}

@keyframes active-pulse {
  0%, 100% {
    box-shadow: 
      0 0 calc(60px * var(--pulse-intensity)) rgba(var(--shield-orb-main), 0.6),
      0 0 calc(120px * var(--pulse-intensity)) rgba(var(--shield-orb-alt), 0.4),
      inset -15px -15px 30px rgba(0, 0, 0, 0.2),
      inset 15px 15px 30px rgba(var(--shield-orb-glow), 0.3);
  }
  50% {
    box-shadow: 
      0 0 calc(80px * var(--pulse-intensity)) rgba(var(--shield-orb-main), 0.8),
      0 0 calc(160px * var(--pulse-intensity)) rgba(var(--shield-orb-alt), 0.6),
      inset -15px -15px 30px rgba(0, 0, 0, 0.2),
      inset 15px 15px 30px rgba(var(--shield-orb-glow), 0.4);
  }
}

@keyframes damage-flash {
  0% { filter: brightness(1) hue-rotate(0deg); }
  50% { filter: brightness(2) hue-rotate(-20deg) saturate(2); }
  100% { filter: brightness(1) hue-rotate(0deg); }
}

@keyframes shield-forcefield {
  0%, 100% { 
    transform: translate(-50%, -50%) translateX(0px);
    filter: brightness(1) contrast(1);
  }
  25% { 
    transform: translate(-50%, -50%) translateX(-2px);
    filter: brightness(1.3) contrast(1.3);
  }
  50% { 
    transform: translate(-50%, -50%) translateX(2px);
    filter: brightness(1.5) contrast(1.5);
  }
  75% { 
    transform: translate(-50%, -50%) translateX(-1px);
    filter: brightness(1.3) contrast(1.3);
  }
}

@keyframes integrity-warning {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(0.7) sepia(0.3); }
}

@keyframes shield-shatter {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
    filter: blur(20px);
  }
}

@keyframes flicker {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; filter: brightness(1.5); }
}

@keyframes electric-spark {
  0%, 90%, 100% { transform: translateY(-50%) scaleY(1); }
  95% { transform: translateY(-50%) scaleY(3); filter: brightness(2); }
}

@keyframes void-warp {
  0%, 100% { filter: hue-rotate(0deg) saturate(1); }
  50% { filter: hue-rotate(30deg) saturate(1.5); }
}

@keyframes blood-drip {
  0%, 70% { transform: translateY(0); }
  100% { transform: translateY(20px); opacity: 0; }
}

@keyframes dark-magic-cleanse {
  0% { 
    transform: scale(1);
    filter: brightness(1) contrast(1) hue-rotate(0deg) saturate(1);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  5% { 
    transform: scale(1.01) skewX(2deg);
    filter: brightness(0.8) contrast(1.2) hue-rotate(270deg) saturate(1.3);
    box-shadow: 
      0 0 15px rgba(75, 0, 130, 0.5),
      inset 0 0 15px rgba(0, 0, 0, 0.2);
  }
  10% { 
    transform: scale(1.02) skewX(-1deg);
    filter: brightness(0.7) contrast(1.3) hue-rotate(270deg) saturate(1.5);
    box-shadow: 
      0 0 20px rgba(75, 0, 130, 0.6),
      inset 0 0 20px rgba(0, 0, 0, 0.3);
  }
  15% { 
    transform: scale(1.03) skewX(3deg);
    filter: brightness(0.9) contrast(1.1) hue-rotate(280deg) saturate(1.2);
    box-shadow: 
      0 0 18px rgba(75, 0, 130, 0.7),
      inset 0 0 18px rgba(0, 0, 0, 0.25);
  }
  25% { 
    transform: scale(1.05) skewX(0deg);
    filter: brightness(0.5) contrast(1.5) hue-rotate(290deg) saturate(1.8);
    box-shadow: 
      0 0 30px rgba(75, 0, 130, 0.8),
      0 0 50px rgba(138, 43, 226, 0.4),
      inset 0 0 30px rgba(0, 0, 0, 0.5);
  }
  35% { 
    transform: scale(1.07) skewX(-2deg);
    filter: brightness(0.4) contrast(1.6) hue-rotate(310deg) saturate(2);
    box-shadow: 
      0 0 35px rgba(75, 0, 130, 0.9),
      0 0 60px rgba(138, 43, 226, 0.5),
      inset 0 0 35px rgba(0, 0, 0, 0.6);
  }
  40% { 
    transform: scale(1.08) skewX(1deg);
    filter: brightness(0.3) contrast(1.8) hue-rotate(320deg) saturate(2.2);
    box-shadow: 
      0 0 40px rgba(75, 0, 130, 1),
      0 0 70px rgba(138, 43, 226, 0.6),
      0 0 100px rgba(148, 0, 211, 0.3),
      inset 0 0 40px rgba(0, 0, 0, 0.7);
  }
  55% { 
    transform: scale(1.07) skewX(-1deg);
    filter: brightness(0.35) contrast(1.7) hue-rotate(305deg) saturate(2);
    box-shadow: 
      0 0 38px rgba(75, 0, 130, 0.95),
      0 0 65px rgba(138, 43, 226, 0.55),
      inset 0 0 38px rgba(0, 0, 0, 0.65);
  }
  60% { 
    transform: scale(1.06) skewX(2deg);
    filter: brightness(0.4) contrast(1.6) hue-rotate(300deg) saturate(1.8);
    box-shadow: 
      0 0 35px rgba(75, 0, 130, 0.9),
      0 0 60px rgba(138, 43, 226, 0.5),
      inset 0 0 35px rgba(0, 0, 0, 0.6);
  }
  75% { 
    transform: scale(1.04) skewX(0deg);
    filter: brightness(0.55) contrast(1.4) hue-rotate(285deg) saturate(1.4);
    box-shadow: 
      0 0 28px rgba(75, 0, 130, 0.8),
      0 0 48px rgba(138, 43, 226, 0.4),
      inset 0 0 28px rgba(0, 0, 0, 0.45);
  }
  80% { 
    transform: scale(1.03) skewX(-1deg);
    filter: brightness(0.6) contrast(1.3) hue-rotate(280deg) saturate(1.3);
    box-shadow: 
      0 0 25px rgba(75, 0, 130, 0.7),
      0 0 45px rgba(138, 43, 226, 0.3),
      inset 0 0 25px rgba(0, 0, 0, 0.4);
  }
  90% { 
    transform: scale(1.01) skewX(1deg);
    filter: brightness(0.8) contrast(1.1) hue-rotate(275deg) saturate(1.1);
    box-shadow: 
      0 0 15px rgba(75, 0, 130, 0.5),
      0 0 25px rgba(138, 43, 226, 0.2),
      inset 0 0 15px rgba(0, 0, 0, 0.2);
  }
  100% { 
    transform: scale(1) skewX(0deg);
    filter: brightness(1) contrast(1) hue-rotate(0deg) saturate(1);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
}

@keyframes dark-smoke-swirl-glitch {
  0% {
    opacity: 0;
    transform: rotate(0deg) scale(0.8) translateX(0px);
    filter: hue-rotate(0deg) brightness(1);
  }
  12% {
    opacity: 0.6;
    transform: rotate(25deg) scale(0.95) translateX(-2px);
    filter: hue-rotate(15deg) brightness(1.2);
  }
  15% {
    opacity: 0.8;
    transform: rotate(35deg) scale(1) translateX(3px);
    filter: hue-rotate(25deg) brightness(0.8);
  }
  20% {
    opacity: 0.7;
    transform: rotate(45deg) scale(1) translateX(0px);
    filter: hue-rotate(30deg) brightness(1);
  }
  35% {
    opacity: 0.9;
    transform: rotate(120deg) scale(1.15) translateX(-1px);
    filter: hue-rotate(60deg) brightness(1.1);
  }
  38% {
    opacity: 1;
    transform: rotate(140deg) scale(1.18) translateX(2px);
    filter: hue-rotate(70deg) brightness(0.9);
  }
  50% {
    opacity: 1;
    transform: rotate(180deg) scale(1.2) translateX(0px);
    filter: hue-rotate(90deg) brightness(1);
  }
  65% {
    opacity: 0.8;
    transform: rotate(230deg) scale(1.15) translateX(-2px);
    filter: hue-rotate(115deg) brightness(1.2);
  }
  68% {
    opacity: 0.6;
    transform: rotate(245deg) scale(1.12) translateX(1px);
    filter: hue-rotate(125deg) brightness(0.8);
  }
  80% {
    opacity: 0.5;
    transform: rotate(270deg) scale(1.1) translateX(0px);
    filter: hue-rotate(135deg) brightness(1);
  }
  92% {
    opacity: 0.2;
    transform: rotate(330deg) scale(0.95) translateX(-1px);
    filter: hue-rotate(165deg) brightness(1.1);
  }
  95% {
    opacity: 0.1;
    transform: rotate(345deg) scale(0.92) translateX(2px);
    filter: hue-rotate(175deg) brightness(0.9);
  }
  100% {
    opacity: 0;
    transform: rotate(360deg) scale(0.9) translateX(0px);
    filter: hue-rotate(180deg) brightness(1);
  }
}

@keyframes dramatic-arcane-manifestation {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0) rotate(-180deg);
    filter: 
      drop-shadow(0 0 25px rgba(75, 0, 130, 1))
      drop-shadow(0 0 50px rgba(138, 43, 226, 0.9))
      brightness(0.3)
      contrast(3)
      saturate(0.5);
  }
  10% {
    opacity: 0.2;
    transform: translate(-50%, -50%) scale(0.3) rotate(-144deg);
    filter: 
      drop-shadow(0 0 30px rgba(75, 0, 130, 1))
      drop-shadow(0 0 60px rgba(138, 43, 226, 1))
      drop-shadow(0 0 90px rgba(148, 0, 211, 0.8))
      brightness(1.5)
      contrast(2.8)
      saturate(1.5);
  }
  20% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(0.6) rotate(-108deg);
    filter: 
      drop-shadow(0 0 35px rgba(75, 0, 130, 1))
      drop-shadow(0 0 70px rgba(138, 43, 226, 1))
      drop-shadow(0 0 105px rgba(148, 0, 211, 0.9))
      drop-shadow(0 0 140px rgba(0, 0, 0, 0.7))
      brightness(2.5)
      contrast(3.2)
      saturate(2.5);
  }
  30% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(0.9) rotate(-72deg);
    filter: 
      drop-shadow(0 0 40px rgba(75, 0, 130, 1))
      drop-shadow(0 0 80px rgba(138, 43, 226, 1))
      drop-shadow(0 0 120px rgba(148, 0, 211, 1))
      drop-shadow(0 0 160px rgba(0, 0, 0, 0.9))
      brightness(3)
      contrast(3.5)
      saturate(3);
  }
  40% {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(1.1) rotate(-36deg);
    filter: 
      drop-shadow(0 0 45px rgba(75, 0, 130, 1))
      drop-shadow(0 0 90px rgba(138, 43, 226, 1))
      drop-shadow(0 0 135px rgba(148, 0, 211, 1))
      drop-shadow(0 0 180px rgba(0, 0, 0, 1))
      brightness(3.5)
      contrast(4)
      saturate(3.5);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3) rotate(0deg);
    filter: 
      drop-shadow(0 0 50px rgba(75, 0, 130, 1))
      drop-shadow(0 0 100px rgba(138, 43, 226, 1))
      drop-shadow(0 0 150px rgba(148, 0, 211, 1))
      drop-shadow(0 0 200px rgba(0, 0, 0, 1))
      brightness(4)
      contrast(4.5)
      saturate(4);
  }
  60% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1.25) rotate(18deg);
    filter: 
      drop-shadow(0 0 48px rgba(75, 0, 130, 1))
      drop-shadow(0 0 96px rgba(138, 43, 226, 1))
      drop-shadow(0 0 144px rgba(148, 0, 211, 1))
      drop-shadow(0 0 192px rgba(0, 0, 0, 0.95))
      brightness(3.8)
      contrast(4.2)
      saturate(3.8);
  }
  70% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.15) rotate(36deg);
    filter: 
      drop-shadow(0 0 42px rgba(75, 0, 130, 1))
      drop-shadow(0 0 84px rgba(138, 43, 226, 1))
      drop-shadow(0 0 126px rgba(148, 0, 211, 1))
      drop-shadow(0 0 168px rgba(0, 0, 0, 0.9))
      brightness(3.2)
      contrast(3.8)
      saturate(3.2);
  }
  80% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1) rotate(54deg);
    filter: 
      drop-shadow(0 0 35px rgba(75, 0, 130, 0.9))
      drop-shadow(0 0 70px rgba(138, 43, 226, 0.9))
      drop-shadow(0 0 105px rgba(148, 0, 211, 0.8))
      drop-shadow(0 0 140px rgba(0, 0, 0, 0.8))
      brightness(2.5)
      contrast(3.2)
      saturate(2.5);
  }
  90% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(0.8) rotate(72deg);
    filter: 
      drop-shadow(0 0 25px rgba(75, 0, 130, 0.7))
      drop-shadow(0 0 50px rgba(138, 43, 226, 0.7))
      drop-shadow(0 0 75px rgba(148, 0, 211, 0.6))
      drop-shadow(0 0 100px rgba(0, 0, 0, 0.6))
      brightness(1.8)
      contrast(2.5)
      saturate(1.8);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5) rotate(90deg);
    filter: 
      drop-shadow(0 0 10px rgba(75, 0, 130, 0.3))
      drop-shadow(0 0 20px rgba(138, 43, 226, 0.3))
      drop-shadow(0 0 30px rgba(148, 0, 211, 0.2))
      brightness(1)
      contrast(1.5)
      saturate(1);
  }
}

@keyframes digital-corruption {
  0% {
    opacity: 0;
    transform: rotate(0deg) scale(0.5) translateX(0px) translateY(0px);
    filter: hue-rotate(0deg) contrast(1);
  }
  10% {
    opacity: 0.6;
    transform: rotate(18deg) scale(0.8) translateX(-3px) translateY(2px);
    filter: hue-rotate(30deg) contrast(1.5);
  }
  15% {
    opacity: 0.8;
    transform: rotate(27deg) scale(0.9) translateX(4px) translateY(-1px);
    filter: hue-rotate(45deg) contrast(2);
  }
  25% {
    opacity: 0.8;
    transform: rotate(45deg) scale(1.1) translateX(-2px) translateY(3px);
    filter: hue-rotate(60deg) contrast(1.8);
  }
  50% {
    opacity: 1;
    transform: rotate(90deg) scale(1.3) translateX(1px) translateY(-2px);
    filter: hue-rotate(90deg) contrast(2.2);
  }
  75% {
    opacity: 0.6;
    transform: rotate(135deg) scale(1.1) translateX(-4px) translateY(1px);
    filter: hue-rotate(120deg) contrast(1.6);
  }
  100% {
    opacity: 0;
    transform: rotate(180deg) scale(0.8) translateX(2px) translateY(-3px);
    filter: hue-rotate(150deg) contrast(1);
  }
}

@keyframes divine-radiance {
  0% { 
    transform: scale(1);
    filter: brightness(1) contrast(1) saturate(1);
    box-shadow: 0 0 0 rgba(255, 215, 0, 0);
  }
  10% { 
    transform: scale(1.02);
    filter: brightness(1.2) contrast(1.1) saturate(1.3);
    box-shadow: 
      0 0 15px rgba(255, 215, 0, 0.4),
      0 0 25px rgba(255, 255, 255, 0.2);
  }
  25% { 
    transform: scale(1.05);
    filter: brightness(1.4) contrast(1.2) saturate(1.6);
    box-shadow: 
      0 0 25px rgba(255, 215, 0, 0.6),
      0 0 40px rgba(255, 255, 255, 0.3),
      0 0 60px rgba(255, 248, 220, 0.2);
  }
  40% { 
    transform: scale(1.08);
    filter: brightness(1.7) contrast(1.4) saturate(2);
    box-shadow: 
      0 0 35px rgba(255, 215, 0, 0.8),
      0 0 55px rgba(255, 255, 255, 0.5),
      0 0 80px rgba(255, 248, 220, 0.3),
      inset 0 0 20px rgba(255, 255, 255, 0.2);
  }
  60% { 
    transform: scale(1.06);
    filter: brightness(1.5) contrast(1.25) saturate(1.8);
    box-shadow: 
      0 0 30px rgba(255, 215, 0, 0.7),
      0 0 45px rgba(255, 255, 255, 0.4),
      0 0 70px rgba(255, 248, 220, 0.25);
  }
  80% { 
    transform: scale(1.03);
    filter: brightness(1.3) contrast(1.15) saturate(1.4);
    box-shadow: 
      0 0 20px rgba(255, 215, 0, 0.5),
      0 0 35px rgba(255, 255, 255, 0.3);
  }
  100% { 
    transform: scale(1);
    filter: brightness(1) contrast(1) saturate(1);
    box-shadow: 0 0 0 rgba(255, 215, 0, 0);
  }
}

@keyframes divine-light-rays {
  0% {
    opacity: 0;
    transform: scale(0.8);
    filter: brightness(1) blur(0px);
  }
  20% {
    opacity: 0.6;
    transform: scale(1);
    filter: brightness(1.3) blur(1px);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
    filter: brightness(2) blur(3px);
  }
  80% {
    opacity: 0.5;
    transform: scale(1.05);
    filter: brightness(1.3) blur(1px);
  }
  100% {
    opacity: 0;
    transform: scale(0.9);
    filter: brightness(1) blur(0px);
  }
}

@keyframes divine-hand-manifestation {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    filter: 
      drop-shadow(0 0 20px rgba(255, 215, 0, 1))
      drop-shadow(0 0 40px rgba(255, 255, 255, 0.8))
      brightness(0.5)
      contrast(2)
      saturate(0.5);
  }
  15% {
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(0.4);
    filter: 
      drop-shadow(0 0 30px rgba(255, 215, 0, 1))
      drop-shadow(0 0 60px rgba(255, 255, 255, 1))
      drop-shadow(0 0 90px rgba(255, 248, 220, 0.8))
      brightness(2.5)
      contrast(1.6)
      saturate(2.5);
  }
  30% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(0.8);
    filter: 
      drop-shadow(0 0 35px rgba(255, 215, 0, 1))
      drop-shadow(0 0 70px rgba(255, 255, 255, 1))
      drop-shadow(0 0 105px rgba(255, 248, 220, 0.9))
      drop-shadow(0 0 140px rgba(255, 255, 224, 0.6))
      brightness(3)
      contrast(1.4)
      saturate(3);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
    filter: 
      drop-shadow(0 0 45px rgba(255, 215, 0, 1))
      drop-shadow(0 0 90px rgba(255, 255, 255, 1))
      drop-shadow(0 0 135px rgba(255, 248, 220, 1))
      drop-shadow(0 0 180px rgba(255, 255, 224, 0.8))
      brightness(4)
      contrast(1)
      saturate(4);
  }
  70% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.05);
    filter: 
      drop-shadow(0 0 35px rgba(255, 215, 0, 0.9))
      drop-shadow(0 0 70px rgba(255, 255, 255, 0.9))
      drop-shadow(0 0 105px rgba(255, 248, 220, 0.8))
      drop-shadow(0 0 140px rgba(255, 255, 224, 0.6))
      brightness(3)
      contrast(1.3)
      saturate(3);
  }
  85% {
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(0.8);
    filter: 
      drop-shadow(0 0 25px rgba(255, 215, 0, 0.6))
      drop-shadow(0 0 50px rgba(255, 255, 255, 0.6))
      drop-shadow(0 0 75px rgba(255, 248, 220, 0.5))
      brightness(2)
      contrast(1.6)
      saturate(2);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
    filter: 
      drop-shadow(0 0 10px rgba(255, 215, 0, 0.2))
      drop-shadow(0 0 20px rgba(255, 255, 255, 0.2))
      brightness(1.2)
      contrast(1.8)
      saturate(1.2);
  }
}

@keyframes divine-blessing-particles {
  0% {
    opacity: 0;
    transform: scale(0.6);
    filter: brightness(1) blur(0px);
  }
  25% {
    opacity: 0.7;
    transform: scale(1);
    filter: brightness(1.5) blur(2px);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
    filter: brightness(2.2) blur(4px);
  }
  75% {
    opacity: 0.6;
    transform: scale(1.1);
    filter: brightness(1.6) blur(2px);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
    filter: brightness(1) blur(0px);
  }
}

@keyframes divine-protection-aura {
  0% {
    opacity: 0;
    transform: scale(0.7) rotate(0deg);
    filter: brightness(1);
  }
  30% {
    opacity: 0.8;
    transform: scale(1.1) rotate(108deg);
    filter: brightness(1.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.4) rotate(180deg);
    filter: brightness(2.5);
  }
  70% {
    opacity: 0.7;
    transform: scale(1.2) rotate(252deg);
    filter: brightness(1.9);
  }
  100% {
    opacity: 0;
    transform: scale(0.9) rotate(360deg);
    filter: brightness(1.2);
  }
}

@keyframes hellish-summoning {
    0% { 
        transform: scale(1) rotate(0deg);
        filter: brightness(1) contrast(1) saturate(1);
        box-shadow: 0 0 0 rgba(220, 20, 60, 0);
    }
    15% { 
        transform: scale(1.05) rotate(-2deg);
        filter: brightness(2) contrast(1.5) saturate(2);
        box-shadow: 
            0 0 20px rgba(255, 0, 0, 1),
            0 0 40px rgba(139, 0, 0, 0.8),
            0 0 60px rgba(220, 20, 60, 0.6);
    }
    30% { 
        transform: scale(1.12) rotate(1deg);
        filter: brightness(0.3) contrast(2) saturate(0.5);
        box-shadow: 
            0 0 5px rgba(255, 0, 0, 0.4),
            0 0 10px rgba(139, 0, 0, 0.2);
    }
    45% { 
        transform: scale(1.18) rotate(-1deg);
        filter: brightness(3) contrast(2) saturate(3);
        box-shadow: 
            0 0 30px rgba(255, 0, 0, 1),
            0 0 60px rgba(139, 0, 0, 0.9),
            0 0 90px rgba(220, 20, 60, 0.7),
            inset 0 0 20px rgba(255, 69, 0, 0.5);
    }
    60% { 
        transform: scale(1.08) rotate(2deg);
        filter: brightness(0.2) contrast(1.8) saturate(0.3);
        box-shadow: 
            0 0 8px rgba(255, 0, 0, 0.3),
            0 0 15px rgba(139, 0, 0, 0.2);
    }
    75% { 
        transform: scale(1.15) rotate(-1deg);
        filter: brightness(2.5) contrast(1.8) saturate(2.5);
        box-shadow: 
            0 0 25px rgba(255, 0, 0, 0.95),
            0 0 50px rgba(139, 0, 0, 0.8),
            0 0 75px rgba(220, 20, 60, 0.6);
    }
    90% { 
        transform: scale(1.05) rotate(0deg);
        filter: brightness(1.5) contrast(1.3) saturate(1.5);
        box-shadow: 
            0 0 15px rgba(255, 0, 0, 0.7),
            0 0 30px rgba(139, 0, 0, 0.5);
    }
    100% { 
        transform: scale(1) rotate(0deg);
        filter: brightness(1) contrast(1) saturate(1);
        box-shadow: 0 0 0 rgba(220, 20, 60, 0);
    }
}

@keyframes lightning-flash {
    0%, 10%, 25%, 40%, 55%, 85%, 100% { 
        opacity: 0; 
        transform: rotate(0deg) scale(1);
    }
    5%, 15%, 30%, 45%, 60%, 80% { 
        opacity: 1; 
        transform: rotate(2deg) scale(1.1);
    }
    8%, 18%, 35%, 50%, 65%, 83% { 
        opacity: 0.3; 
        transform: rotate(-1deg) scale(1.05);
    }
}

@keyframes evil-face-manifestation {
    0% { 
        opacity: 0; 
        transform: translate(-50%, -50%) scale(0) rotate(-180deg);
        filter: 
            drop-shadow(0 0 10px rgba(255, 0, 0, 0.8))
            drop-shadow(0 0 20px rgba(139, 0, 0, 0.6))
            brightness(0.5)
            contrast(2);
    }
    20% { 
        opacity: 0.3; 
        transform: translate(-50%, -50%) scale(0.4) rotate(-90deg);
        filter: 
            drop-shadow(0 0 15px rgba(255, 0, 0, 1))
            drop-shadow(0 0 30px rgba(139, 0, 0, 0.8))
            brightness(2)
            contrast(1.8);
    }
    50% { 
        opacity: 0.9; 
        transform: translate(-50%, -50%) scale(1.2) rotate(0deg);
        filter: 
            drop-shadow(0 0 20px rgba(255, 0, 0, 1))
            drop-shadow(0 0 40px rgba(139, 0, 0, 0.9))
            drop-shadow(0 0 60px rgba(220, 20, 60, 0.7))
            brightness(3)
            contrast(2);
    }
    70% { 
        opacity: 0.7; 
        transform: translate(-50%, -50%) scale(1.1) rotate(5deg);
        filter: 
            drop-shadow(0 0 18px rgba(255, 0, 0, 0.9))
            drop-shadow(0 0 35px rgba(139, 0, 0, 0.8))
            brightness(2.5)
            contrast(1.8);
    }
    100% { 
        opacity: 0; 
        transform: translate(-50%, -50%) scale(0.8) rotate(10deg);
        filter: 
            drop-shadow(0 0 5px rgba(255, 0, 0, 0.3))
            drop-shadow(0 0 10px rgba(139, 0, 0, 0.2))
            brightness(1)
            contrast(1);
    }
}

@keyframes banish-dissipate {
    0% { 
        transform: scale(1);
        filter: brightness(1) blur(0px) hue-rotate(0deg);
        opacity: 1;
        box-shadow: 0 0 0 rgba(255, 215, 0, 0);
    }
    15% { 
        transform: scale(1.03);
        filter: brightness(1.2) blur(0.5px) hue-rotate(15deg);
        opacity: 0.95;
        box-shadow: 
            0 0 15px rgba(255, 215, 0, 0.4),
            0 0 25px rgba(255, 165, 0, 0.2);
    }
    25% { 
        transform: scale(1.05);
        filter: brightness(1.3) blur(1px) hue-rotate(30deg);
        opacity: 0.9;
        box-shadow: 
            0 0 20px rgba(255, 215, 0, 0.6),
            0 0 40px rgba(255, 165, 0, 0.3);
    }
    40% { 
        transform: scale(1.03);
        filter: brightness(1.1) blur(1.5px) hue-rotate(20deg);
        opacity: 0.8;
        box-shadow: 
            0 0 18px rgba(255, 215, 0, 0.5),
            0 0 35px rgba(255, 165, 0, 0.25);
    }
    50% { 
        transform: scale(1.02);
        filter: brightness(0.8) blur(2px) hue-rotate(10deg);
        opacity: 0.6;
        box-shadow: 
            0 0 15px rgba(255, 215, 0, 0.4),
            0 0 30px rgba(255, 165, 0, 0.2);
    }
    65% { 
        transform: scale(1);
        filter: brightness(0.6) blur(2.5px) hue-rotate(5deg);
        opacity: 0.45;
        box-shadow: 
            0 0 12px rgba(255, 215, 0, 0.3),
            0 0 25px rgba(255, 165, 0, 0.15);
    }
    75% { 
        transform: scale(0.98);
        filter: brightness(0.5) blur(3px) hue-rotate(0deg);
        opacity: 0.3;
        box-shadow: 
            0 0 10px rgba(255, 215, 0, 0.2),
            0 0 20px rgba(255, 165, 0, 0.1);
    }
    85% { 
        transform: scale(0.97);
        filter: brightness(0.4) blur(3.5px) hue-rotate(-5deg);
        opacity: 0.2;
        box-shadow: 
            0 0 8px rgba(255, 215, 0, 0.15),
            0 0 15px rgba(255, 165, 0, 0.08);
    }
    100% { 
        transform: scale(0.95);
        filter: brightness(0.3) blur(4px) hue-rotate(-10deg);
        opacity: 1; /* Return to normal at end */
        box-shadow: 0 0 0 rgba(255, 215, 0, 0);
    }
}

@keyframes dispersing-particles {
    0% {
        opacity: 0;
        transform: scale(1) rotate(0deg);
        filter: brightness(1);
    }
    20% {
        opacity: 0.6;
        transform: scale(1.1) rotate(18deg);
        filter: brightness(1.3);
    }
    30% {
        opacity: 0.8;
        transform: scale(1.2) rotate(30deg);
        filter: brightness(1.5);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.4) rotate(45deg);
        filter: brightness(1.2);
    }
    70% {
        opacity: 0.4;
        transform: scale(1.5) rotate(60deg);
        filter: brightness(0.9);
    }
    85% {
        opacity: 0.2;
        transform: scale(1.7) rotate(75deg);
        filter: brightness(0.7);
    }
    100% {
        opacity: 0;
        transform: scale(2) rotate(90deg);
        filter: brightness(0.5);
    }
}

@keyframes skull-banishment {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0) rotate(0deg) skewX(0deg) skewY(0deg);
        filter: 
            drop-shadow(0 0 25px rgba(128, 128, 128, 1))
            drop-shadow(0 0 50px rgba(160, 160, 160, 0.8))
            brightness(1)
            contrast(1.5)
            saturate(0)
            grayscale(1);
    }
    8% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(0.4) rotate(-8deg) skewX(2deg) skewY(-1deg);
        filter: 
            drop-shadow(0 0 30px rgba(128, 128, 128, 1))
            drop-shadow(0 0 60px rgba(160, 160, 160, 0.9))
            drop-shadow(0 0 90px rgba(192, 192, 192, 0.7))
            brightness(2)
            contrast(2)
            saturate(0)
            grayscale(1);
    }
    15% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(0.7) rotate(-12deg) skewX(-1deg) skewY(2deg);
        filter: 
            drop-shadow(0 0 35px rgba(128, 128, 128, 1))
            drop-shadow(0 0 70px rgba(160, 160, 160, 1))
            drop-shadow(0 0 105px rgba(192, 192, 192, 0.8))
            brightness(2.3)
            contrast(2.2)
            saturate(0)
            grayscale(1);
    }
    25% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1) rotate(-15deg) skewX(1deg) skewY(-1deg);
        filter: 
            drop-shadow(0 0 40px rgba(128, 128, 128, 1))
            drop-shadow(0 0 80px rgba(160, 160, 160, 1))
            drop-shadow(0 0 120px rgba(192, 192, 192, 0.9))
            drop-shadow(0 0 160px rgba(96, 96, 96, 0.6))
            brightness(2.5)
            contrast(2.5)
            saturate(0)
            grayscale(1);
    }
    35% {
        opacity: 0.85;
        transform: translate(-50%, -50%) scale(1.2) rotate(-18deg) skewX(-2deg) skewY(1deg);
        filter: 
            drop-shadow(0 0 45px rgba(128, 128, 128, 1))
            drop-shadow(0 0 90px rgba(160, 160, 160, 1))
            drop-shadow(0 0 135px rgba(192, 192, 192, 1))
            drop-shadow(0 0 180px rgba(96, 96, 96, 0.7))
            brightness(2.8)
            contrast(3)
            saturate(0)
            grayscale(1);
    }
    45% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.4) rotate(-20deg) skewX(3deg) skewY(-2deg);
        filter: 
            drop-shadow(0 0 50px rgba(128, 128, 128, 1))
            drop-shadow(0 0 100px rgba(160, 160, 160, 1))
            drop-shadow(0 0 150px rgba(192, 192, 192, 1))
            drop-shadow(0 0 200px rgba(96, 96, 96, 0.8))
            brightness(3)
            contrast(3.5)
            saturate(0)
            grayscale(1);
    }
    55% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1.35) rotate(-25deg) skewX(-1deg) skewY(3deg);
        filter: 
            drop-shadow(0 0 48px rgba(128, 128, 128, 0.9))
            drop-shadow(0 0 96px rgba(160, 160, 160, 0.9))
            drop-shadow(0 0 144px rgba(192, 192, 192, 0.8))
            brightness(2.8)
            contrast(3.2)
            saturate(0)
            grayscale(1);
    }
    65% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1.2) rotate(-30deg) skewX(4deg) skewY(-3deg);
        filter: 
            drop-shadow(0 0 40px rgba(128, 128, 128, 0.8))
            drop-shadow(0 0 80px rgba(160, 160, 160, 0.7))
            drop-shadow(0 0 120px rgba(192, 192, 192, 0.6))
            brightness(2.5)
            contrast(2.8)
            saturate(0)
            grayscale(1);
    }
    75% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1) rotate(-40deg) skewX(-5deg) skewY(4deg);
        filter: 
            drop-shadow(0 0 35px rgba(128, 128, 128, 0.6))
            drop-shadow(0 0 70px rgba(160, 160, 160, 0.5))
            brightness(2.2)
            contrast(2.5)
            saturate(0)
            grayscale(1);
    }
    82% {
        opacity: 0.35;
        transform: translate(-50%, -50%) scale(0.8) rotate(-50deg) skewX(6deg) skewY(-5deg);
        filter: 
            drop-shadow(0 0 28px rgba(128, 128, 128, 0.5))
            drop-shadow(0 0 56px rgba(160, 160, 160, 0.4))
            brightness(2)
            contrast(2.2)
            saturate(0)
            grayscale(1);
    }
    88% {
        opacity: 0.2;
        transform: translate(-50%, -50%) scale(0.6) rotate(-65deg) skewX(-7deg) skewY(6deg);
        filter: 
            drop-shadow(0 0 20px rgba(128, 128, 128, 0.4))
            drop-shadow(0 0 40px rgba(160, 160, 160, 0.3))
            brightness(1.8)
            contrast(2)
            saturate(0)
            grayscale(1);
    }
    94% {
        opacity: 0.1;
        transform: translate(-50%, -50%) scale(0.4) rotate(-80deg) skewX(8deg) skewY(-7deg);
        filter: 
            drop-shadow(0 0 15px rgba(128, 128, 128, 0.3))
            drop-shadow(0 0 30px rgba(160, 160, 160, 0.2))
            brightness(1.5)
            contrast(1.8)
            saturate(0)
            grayscale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.2) rotate(-100deg) skewX(-10deg) skewY(8deg);
        filter: 
            drop-shadow(0 0 10px rgba(128, 128, 128, 0.2))
            drop-shadow(0 0 20px rgba(160, 160, 160, 0.1))
            brightness(1.2)
            contrast(1.5)
            saturate(0)
            grayscale(1);
    }
}

@keyframes death-veil-dispersal {
    0% {
        opacity: 0;
        transform: scale(1) rotate(0deg);
        filter: brightness(1) blur(0px);
    }
    20% {
        opacity: 0.6;
        transform: scale(1.1) rotate(20deg);
        filter: brightness(1.3) blur(1px);
    }
    40% {
        opacity: 0.8;
        transform: scale(1.3) rotate(40deg);
        filter: brightness(1.6) blur(2px);
    }
    60% {
        opacity: 0.6;
        transform: scale(1.5) rotate(60deg);
        filter: brightness(1.2) blur(3px);
    }
    80% {
        opacity: 0.3;
        transform: scale(1.8) rotate(80deg);
        filter: brightness(0.8) blur(4px);
    }
    100% {
        opacity: 0;
        transform: scale(2.2) rotate(100deg);
        filter: brightness(0.5) blur(5px);
    }
}

@keyframes power-up-boost {
    0% { 
        transform: scale(1);
        filter: brightness(1) contrast(1);
        box-shadow: 0 0 0 rgba(255, 215, 0, 0);
    }
    20% { 
        transform: scale(1.15);
        filter: brightness(1.4) contrast(1.2);
        box-shadow: 
            0 0 20px rgba(255, 215, 0, 0.8),
            0 0 40px rgba(255, 255, 0, 0.4);
    }
    40% { 
        transform: scale(1.3);
        filter: brightness(1.6) contrast(1.3);
        box-shadow: 
            0 0 30px rgba(255, 215, 0, 1),
            0 0 60px rgba(255, 255, 0, 0.6),
            inset 0 0 20px rgba(255, 255, 255, 0.3);
    }
    60% { 
        transform: scale(1.2);
        filter: brightness(1.4) contrast(1.2);
        box-shadow: 
            0 0 25px rgba(255, 215, 0, 0.9),
            0 0 50px rgba(255, 255, 0, 0.5);
    }
    80% { 
        transform: scale(1.1);
        filter: brightness(1.2) contrast(1.1);
        box-shadow: 
            0 0 15px rgba(255, 215, 0, 0.6),
            0 0 30px rgba(255, 255, 0, 0.3);
    }
    100% { 
        transform: scale(1);
        filter: brightness(1) contrast(1);
        box-shadow: 0 0 0 rgba(255, 215, 0, 0);
    }
}

@keyframes sparkle-burst {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3);
    }
    30% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }
    70% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
}

@keyframes weakness-applied {
    0% { 
        transform: scale(1);
        filter: brightness(1) hue-rotate(0deg);
        box-shadow: 0 0 0 rgba(255, 69, 0, 0);
    }
    25% { 
        transform: scale(0.95);
        filter: brightness(0.8) hue-rotate(15deg);
        box-shadow: 
            0 0 15px rgba(255, 69, 0, 0.6),
            0 0 30px rgba(255, 0, 0, 0.3);
    }
    50% { 
        transform: scale(0.9);
        filter: brightness(0.7) hue-rotate(25deg);
        box-shadow: 
            0 0 20px rgba(255, 69, 0, 0.8),
            0 0 40px rgba(255, 0, 0, 0.4),
            inset 0 0 15px rgba(255, 69, 0, 0.2);
    }
    75% { 
        transform: scale(0.95);
        filter: brightness(0.8) hue-rotate(15deg);
        box-shadow: 
            0 0 15px rgba(255, 69, 0, 0.6),
            0 0 30px rgba(255, 0, 0, 0.3);
    }
    100% { 
        transform: scale(1);
        filter: brightness(1) hue-rotate(0deg);
        box-shadow: 0 0 0 rgba(255, 69, 0, 0);
    }
}

@keyframes warning-pulse {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    30% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.3);
    }
    70% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
}

@keyframes nano-repair-enhance {
    0% { 
        box-shadow: 0 0 5px #00FF7F, inset 0 0 10px rgba(0, 255, 127, 0.2);
        border: 2px solid rgba(0, 255, 127, 0.3);
        filter: brightness(1) saturate(1);
    }
    20% { 
        box-shadow: 0 0 12px #00FF7F, inset 0 0 15px rgba(0, 255, 127, 0.3);
        border: 2px solid rgba(0, 255, 127, 0.5);
        filter: brightness(1.1) saturate(1.2);
        transform: scale(1.02);
    }
    40% { 
        box-shadow: 0 0 20px #00FF7F, inset 0 0 25px rgba(0, 255, 127, 0.5);
        border: 2px solid rgba(0, 255, 127, 0.7);
        filter: brightness(1.2) saturate(1.4);
        transform: scale(1.04);
    }
    60% { 
        box-shadow: 0 0 25px #00FF7F, inset 0 0 30px rgba(0, 255, 127, 0.6);
        border: 2px solid rgba(0, 255, 127, 0.8);
        filter: brightness(1.3) saturate(1.5);
        transform: scale(1.05);
    }
    80% { 
        box-shadow: 0 0 15px #00FF7F, inset 0 0 20px rgba(0, 255, 127, 0.4);
        border: 2px solid rgba(0, 255, 127, 0.6);
        filter: brightness(1.1) saturate(1.2);
        transform: scale(1.02);
    }
    100% { 
        box-shadow: 0 0 8px #00FF7F, inset 0 0 12px rgba(0, 255, 127, 0.2);
        border: 2px solid rgba(0, 255, 127, 0.4);
        filter: brightness(1.05) saturate(1.1);
        transform: scale(1);
    }
}

@keyframes nanoswarm-consume {
    0% { 
        box-shadow: 0 0 5px #00FF00;
        border: 2px solid rgba(0, 255, 0, 0.3);
    }
    15% { 
        box-shadow: 0 0 10px #00FF00, inset 0 0 15px rgba(0, 255, 0, 0.3);
        border: 2px solid rgba(0, 255, 0, 0.5);
        transform: scale(0.99) rotate(0.5deg);
    }
    30% { 
        box-shadow: 0 0 15px #00FF00, inset 0 0 20px rgba(0, 255, 0, 0.4);
        border: 2px solid rgba(0, 255, 0, 0.7);
        transform: scale(0.98) rotate(-0.5deg);
    }
    45% { 
        box-shadow: 0 0 20px #00FF00, inset 0 0 25px rgba(0, 255, 0, 0.5);
        border: 2px solid rgba(0, 255, 0, 0.8);
        transform: scale(0.97) rotate(0.8deg);
    }
    60% { 
        box-shadow: 0 0 25px #00FF00, inset 0 0 30px rgba(0, 255, 0, 0.6);
        border: 2px solid rgba(0, 255, 0, 0.9);
        transform: scale(0.96) rotate(-0.8deg);
    }
    75% { 
        box-shadow: 0 0 20px #00FF00, inset 0 0 25px rgba(0, 255, 0, 0.5);
        border: 2px solid rgba(0, 255, 0, 0.7);
        transform: scale(0.97) rotate(0.5deg);
    }
    90% { 
        box-shadow: 0 0 10px #00FF00, inset 0 0 15px rgba(0, 255, 0, 0.3);
        border: 2px solid rgba(0, 255, 0, 0.5);
        transform: scale(0.99) rotate(-0.2deg);
    }
    100% { 
        box-shadow: 0 0 5px #00FF00;
        border: 2px solid rgba(0, 255, 0, 0.3);
        transform: scale(1) rotate(0deg);
    }
}

@keyframes nanoPulse {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.1); }
}

@keyframes nanoEnhance {
    0% { transform: translateX(-50%) scale(1) rotate(0deg); }
    30% { transform: translateX(-50%) scale(1.15) rotate(2deg); }
    60% { transform: translateX(-50%) scale(1.1) rotate(-1deg); }
    100% { transform: translateX(-50%) scale(1) rotate(0deg); }
}

@keyframes nanoSwarm {
    0% { transform: translateX(-50%) scale(1); }
    20% { transform: translateX(-50%) scale(0.95) rotate(1deg); }
    40% { transform: translateX(-50%) scale(1.05) rotate(-1deg); }
    60% { transform: translateX(-50%) scale(0.98) rotate(0.5deg); }
    80% { transform: translateX(-50%) scale(1.02) rotate(-0.5deg); }
    100% { transform: translateX(-50%) scale(1) rotate(0deg); }
}

@keyframes nano-container-shake {
    0%, 100% { 
        transform: translateX(0);
        box-shadow: 0 0 5px #FF6B35;
        filter: brightness(1);
    }
    10% { 
        transform: translateX(-2px);
        box-shadow: 0 0 10px #FF6B35;
    }
    20% { 
        transform: translateX(3px);
        filter: brightness(1.1);
    }
    30% { 
        transform: translateX(-2px);
        box-shadow: 0 0 15px #FF6B35;
    }
    40% { 
        transform: translateX(2px);
    }
    50% { 
        transform: translateX(-3px);
        filter: brightness(1.05);
    }
    60% { 
        transform: translateX(2px);
        box-shadow: 0 0 12px #FF6B35;
    }
    70% { 
        transform: translateX(-1px);
    }
    80% { 
        transform: translateX(2px);
        filter: brightness(1.02);
    }
    90% { 
        transform: translateX(-1px);
        box-shadow: 0 0 8px #FF6B35;
    }
}

@keyframes nano-swarm-rise-1 {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
        filter: brightness(1);
    }
    5% {
        opacity: 1;
        filter: brightness(1.3);
    }
    10% {
        transform: translateY(-50px) translateX(15px) rotate(5deg);
        opacity: 1;
    }
    20% {
        transform: translateY(-100px) translateX(-20px) rotate(-8deg);
    }
    30% {
        transform: translateY(-150px) translateX(25px) rotate(12deg);
    }
    40% {
        transform: translateY(-200px) translateX(-15px) rotate(-6deg);
        opacity: 1;
    }
    50% {
        transform: translateY(-250px) translateX(30px) rotate(10deg);
    }
    60% {
        transform: translateY(-300px) translateX(-25px) rotate(-9deg);
        opacity: 0.9;
    }
    70% {
        transform: translateY(-350px) translateX(20px) rotate(7deg);
        opacity: 0.7;
    }
    80% {
        transform: translateY(-400px) translateX(-10px) rotate(-4deg);
        opacity: 0.5;
    }
    90% {
        transform: translateY(-450px) translateX(15px) rotate(3deg);
        opacity: 0.2;
    }
    100% {
        transform: translateY(-500px) translateX(-5px) rotate(-2deg);
        opacity: 0;
    }
}

@keyframes nano-swarm-rise-2 {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
        filter: brightness(1);
    }
    5% {
        opacity: 1;
        filter: brightness(1.2);
    }
    10% {
        transform: translateY(-40px) translateX(-18px) rotate(-7deg);
        opacity: 1;
    }
    20% {
        transform: translateY(-90px) translateX(22px) rotate(10deg);
    }
    30% {
        transform: translateY(-140px) translateX(-28px) rotate(-11deg);
    }
    40% {
        transform: translateY(-190px) translateX(18px) rotate(8deg);
        opacity: 1;
    }
    50% {
        transform: translateY(-240px) translateX(-24px) rotate(-9deg);
    }
    60% {
        transform: translateY(-290px) translateX(20px) rotate(6deg);
        opacity: 0.9;
    }
    70% {
        transform: translateY(-340px) translateX(-15px) rotate(-5deg);
        opacity: 0.7;
    }
    80% {
        transform: translateY(-390px) translateX(12px) rotate(4deg);
        opacity: 0.5;
    }
    90% {
        transform: translateY(-440px) translateX(-8px) rotate(-3deg);
        opacity: 0.2;
    }
    100% {
        transform: translateY(-490px) translateX(10px) rotate(2deg);
        opacity: 0;
    }
}

@keyframes cyberpunkGlitch {
    0% { 
        transform: translateX(-50%) translateX(0) skewX(0deg);
        text-shadow: 
            -3px 0 #00FFFF,
            3px 0 #FF00FF,
            0 0 10px #FF6B3580,
            2px 2px 4px rgba(0,0,0,0.9);
    }
    14% { 
        transform: translateX(-50%) translateX(-3px) skewX(3deg);
        text-shadow: 
            -5px 0 #00FFFF,
            5px 0 #FF00FF,
            0 0 15px #FF6B3580,
            2px 2px 4px rgba(0,0,0,0.9);
    }
    28% { 
        transform: translateX(-50%) translateX(4px) skewX(-4deg);
        text-shadow: 
            4px 0 #00FFFF,
            -4px 0 #FF00FF,
            0 0 12px #FF6B3580,
            2px 2px 4px rgba(0,0,0,0.9);
    }
    42% { 
        transform: translateX(-50%) translateX(-2px) skewX(2deg);
        text-shadow: 
            -4px 0 #00FFFF,
            4px 0 #FF00FF,
            0 0 18px #FF6B3580,
            2px 2px 4px rgba(0,0,0,0.9);
    }
    57% { 
        transform: translateX(-50%) translateX(3px) skewX(-2deg);
        text-shadow: 
            3px 0 #00FFFF,
            -3px 0 #FF00FF,
            0 0 14px #FF6B3580,
            2px 2px 4px rgba(0,0,0,0.9);
    }
    71% { 
        transform: translateX(-50%) translateX(-4px) skewX(3deg);
        text-shadow: 
            -5px 0 #00FFFF,
            5px 0 #FF00FF,
            0 0 16px #FF6B3580,
            2px 2px 4px rgba(0,0,0,0.9);
    }
    85% { 
        transform: translateX(-50%) translateX(2px) skewX(-1deg);
        text-shadow: 
            2px 0 #00FFFF,
            -2px 0 #FF00FF,
            0 0 11px #FF6B3580,
            2px 2px 4px rgba(0,0,0,0.9);
    }
    100% { 
        transform: translateX(-50%) translateX(-1px) skewX(1deg);
        text-shadow: 
            -3px 0 #00FFFF,
            3px 0 #FF00FF,
            0 0 13px #FF6B3580,
            2px 2px 4px rgba(0,0,0,0.9);
    }
}

@keyframes pulse-gold {
    0% { opacity: 0.8; }
    50% { opacity: 1; }
    100% { opacity: 0.8; }
}

@keyframes flame-flicker {
    0% { transform: scale(1) rotate(-5deg); }
    100% { transform: scale(1.1) rotate(5deg); }
}

@keyframes nano-repair-matrix-sweep {
    0% {
        left: -100%;
        opacity: 0;
    }
    25% {
        left: -25%;
        opacity: 0.8;
    }
    75% {
        left: 25%;
        opacity: 0.8;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

@keyframes nano-repair-grid-scan {
    0% {
        opacity: 0;
        transform: scaleY(0);
    }
    30% {
        opacity: 0.6;
        transform: scaleY(0.8);
    }
    70% {
        opacity: 0.8;
        transform: scaleY(1);
    }
    100% {
        opacity: 0;
        transform: scaleY(1);
    }
}

@keyframes nanoRepairPulse {
    0% { 
        transform: translateX(-50%) scale(1) rotate(0deg);
    }
    30% { 
        transform: translateX(-50%) scale(1.15) rotate(2deg);
        text-shadow: 
            0 0 15px #00FF7F80, 
            0 0 25px #00FF7F60,
            0 0 35px #00FF7F40,
            2px 2px 4px rgba(0,0,0,0.8);
    }
    60% { 
        transform: translateX(-50%) scale(1.1) rotate(-1deg);
    }
    100% { 
        transform: translateX(-50%) scale(1) rotate(0deg);
    }
}

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

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

@keyframes resistancePulse {
  from { transform: scale(1); opacity: 0.8; }
  to { transform: scale(1.1); opacity: 1; }
}

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

@keyframes shieldPulse {
  0%, 100% { 
    box-shadow: 0 0 15px rgba(64, 224, 208, 0.7);
    transform: scale(1);
  }
  50% { 
    box-shadow: 0 0 25px rgba(64, 224, 208, 1);
    transform: scale(1.1);
  }
}

@keyframes shieldBlock {
  0% { 
    box-shadow: 0 0 15px rgba(64, 224, 208, 0.7);
    transform: scale(1);
    border-color: #40E0D0;
  }
  25% { 
    box-shadow: 0 0 35px rgba(255, 255, 255, 1);
    transform: scale(1.3);
    border-color: #FFFFFF;
  }
  75% { 
    box-shadow: 0 0 30px rgba(64, 224, 208, 0.9);
    transform: scale(1.1);
    border-color: #40E0D0;
  }
  100% { 
    box-shadow: 0 0 15px rgba(64, 224, 208, 0.7);
    transform: scale(1);
    border-color: #40E0D0;
  }
}

@keyframes stimulantPulse {
  0%, 100% { 
    box-shadow: 
      0 0 15px rgba(255, 215, 0, 0.8),
      inset 0 0 10px rgba(255, 255, 255, 0.3);
    transform: scale(1);
    background: linear-gradient(45deg, #FFD700, #FFF8DC, #FFFF00);
  }
  50% { 
    box-shadow: 
      0 0 25px rgba(255, 215, 0, 1),
      0 0 35px rgba(255, 255, 255, 0.6),
      inset 0 0 15px rgba(255, 255, 255, 0.5);
    transform: scale(1.15);
    background: linear-gradient(45deg, #FFFF00, #FFFFFF, #FFD700);
  }
}

@keyframes molotovPulse {
  0%, 100% { 
    transform: scale(1); 
    opacity: 0.9;
    box-shadow: 0 0 8px rgba(255, 69, 0, 0.7);
  }
  50% { 
    transform: scale(1.2); 
    opacity: 1;
    box-shadow: 0 0 15px rgba(255, 69, 0, 1);
  }
}

@keyframes burnFlicker {
  0% { 
    background: linear-gradient(45deg, #FF4500, #FF8C00);
    box-shadow: 0 0 10px rgba(255, 69, 0, 0.8);
  }
  100% { 
    background: linear-gradient(45deg, #FF8C00, #FFD700);
    box-shadow: 0 0 15px rgba(255, 140, 0, 1);
  }
}

@keyframes cyberneticsPulse {
  0%, 100% { 
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
    filter: brightness(1);
  }
  50% { 
    box-shadow: 0 0 20px rgba(0, 255, 255, 1);
    filter: brightness(1.3);
  }
}

@keyframes physicalPulse {
  0%, 100% { 
    transform: scale(1); 
    opacity: 0.9;
    box-shadow: 0 0 8px rgba(112, 128, 144, 0.7);
  }
  50% { 
    transform: scale(1.2); 
    opacity: 1;
    box-shadow: 0 0 15px rgba(112, 128, 144, 1);
  }
}

@keyframes lightningPulse {
  0%, 100% { 
    transform: scale(1); 
    opacity: 0.9;
    box-shadow: 0 0 8px rgba(0, 191, 255, 0.7);
  }
  50% { 
    transform: scale(1.2); 
    opacity: 1;
    box-shadow: 0 0 15px rgba(0, 191, 255, 1);
  }
}

@keyframes aetherPulse {
  0%, 100% { 
    transform: scale(1); 
    opacity: 0.9;
    box-shadow: 0 0 8px rgba(64, 224, 208, 0.7);
  }
  50% { 
    transform: scale(1.2); 
    opacity: 1;
    box-shadow: 0 0 15px rgba(64, 224, 208, 1);
  }
}

@keyframes chromaPulse {
  0%, 100% { 
    transform: scale(1); 
    opacity: 0.9;
    box-shadow: 0 0 8px rgba(147, 112, 219, 0.7);
  }
  50% { 
    transform: scale(1.2); 
    opacity: 1;
    box-shadow: 0 0 15px rgba(147, 112, 219, 1);
  }
}

@keyframes fireBurnFlicker {
  0% { 
    background: linear-gradient(45deg, #FF4500, #FF8C00);
    box-shadow: 0 0 10px rgba(255, 69, 0, 0.8);
  }
  100% { 
    background: linear-gradient(45deg, #FF8C00, #FFD700);
    box-shadow: 0 0 15px rgba(255, 140, 0, 1);
  }
}

@keyframes physicalBurnFlicker {
  0% { 
    background: linear-gradient(45deg, #708090, #A0A0A0);
    box-shadow: 0 0 10px rgba(112, 128, 144, 0.8);
  }
  100% { 
    background: linear-gradient(45deg, #A0A0A0, #C0C0C0);
    box-shadow: 0 0 15px rgba(160, 160, 160, 1);
  }
}

@keyframes lightningBurnFlicker {
  0% { 
    background: linear-gradient(45deg, #00BFFF, #87CEEB);
    box-shadow: 0 0 10px rgba(0, 191, 255, 0.8);
  }
  100% { 
    background: linear-gradient(45deg, #87CEEB, #E0FFFF);
    box-shadow: 0 0 15px rgba(135, 206, 235, 1);
  }
}

@keyframes voidBurnFlicker {
  0% { 
    background: linear-gradient(45deg, #4B0082, #8A2BE2);
    box-shadow: 0 0 10px rgba(75, 0, 130, 0.8);
  }
  100% { 
    background: linear-gradient(45deg, #8A2BE2, #9370DB);
    box-shadow: 0 0 15px rgba(138, 43, 226, 1);
  }
}

@keyframes aetherBurnFlicker {
  0% { 
    background: linear-gradient(45deg, #40E0D0, #00CED1);
    box-shadow: 0 0 10px rgba(64, 224, 208, 0.8);
  }
  100% { 
    background: linear-gradient(45deg, #00CED1, #AFEEEE);
    box-shadow: 0 0 15px rgba(0, 206, 209, 1);
  }
}

@keyframes bloodBurnFlicker {
  0% { 
    background: linear-gradient(45deg, #8B0000, #DC143C);
    box-shadow: 0 0 10px rgba(139, 0, 0, 0.8);
  }
  100% { 
    background: linear-gradient(45deg, #DC143C, #FF1493);
    box-shadow: 0 0 15px rgba(220, 20, 60, 1);
  }
}

@keyframes chromaBurnFlicker {
  0% { 
    background: linear-gradient(45deg, #9370DB, #DA70D6);
    box-shadow: 0 0 10px rgba(147, 112, 219, 0.8);
  }
  100% { 
    background: linear-gradient(45deg, #DA70D6, #EE82EE);
    box-shadow: 0 0 15px rgba(218, 112, 214, 1);
  }
}

@keyframes radiationMistFlow {
    0% {
        opacity: 0.8;
        transform: translateX(0px);
        filter: brightness(1);
    }
    25% {
        opacity: 0.9;
        transform: translateX(-3px);
        filter: brightness(1.1);
    }
    50% {
        opacity: 1;
        transform: translateX(2px);
        filter: brightness(1.2);
    }
    75% {
        opacity: 0.95;
        transform: translateX(-1px);
        filter: brightness(1.1);
    }
    100% {
        opacity: 0.8;
        transform: translateX(0px);
        filter: brightness(1);
    }
}

@keyframes radiationParticlesDrift {
    0% {
        transform: translateX(0px) translateY(0px);
    }
    25% {
        transform: translateX(-5px) translateY(-3px);
    }
    50% {
        transform: translateX(3px) translateY(-5px);
    }
    75% {
        transform: translateX(-3px) translateY(-2px);
    }
    100% {
        transform: translateX(0px) translateY(0px);
    }
}

@keyframes radiationDenseParticles {
    0% {
        transform: translateX(0px);
    }
    33% {
        transform: translateX(-3px);
    }
    66% {
        transform: translateX(3px);
    }
    100% {
        transform: translateX(0px);
    }
}

@keyframes thickRadiationGlow {
    0% {
        opacity: 0;
        transform: translateY(0px) scale(0.9);
        color: #50FF50;
    }
    50% {
        opacity: 1;
        transform: translateY(-18px) scale(1.3);
        color: #70FF70;
        text-shadow: 
            0 0 18px #50FF50,
            0 0 30px #32FF32,
            0 0 42px #228B22,
            0 0 54px #006400;
    }
    100% {
        opacity: 0;
        transform: translateY(-30px) scale(1);
        color: #32FF32;
    }
}

@keyframes lightningBackgroundEffect {
    0% {
        background: linear-gradient(180deg, rgba(20, 20, 40, 0.4) 0%, rgba(30, 30, 50, 0.3) 25%, rgba(40, 40, 60, 0.2) 50%, rgba(50, 50, 70, 0.1) 75%, transparent 100%);
        filter: brightness(1) contrast(1);
    }
    24% {
        background: linear-gradient(180deg, rgba(20, 20, 40, 0.4) 0%, rgba(30, 30, 50, 0.3) 25%, rgba(40, 40, 60, 0.2) 50%, rgba(50, 50, 70, 0.1) 75%, transparent 100%);
        filter: brightness(1) contrast(1);
    }
    /* TARGET LOCK - Background turns red/black */
    25% {
        background: linear-gradient(180deg, rgba(60, 0, 0, 0.8) 0%, rgba(40, 0, 0, 0.6) 25%, rgba(30, 0, 0, 0.4) 50%, rgba(20, 0, 0, 0.2) 75%, transparent 100%);
        filter: brightness(0.7) contrast(1.8) saturate(2);
    }
    26% {
        background: linear-gradient(180deg, rgba(80, 0, 0, 0.9) 0%, rgba(60, 0, 0, 0.7) 25%, rgba(40, 0, 0, 0.5) 50%, rgba(25, 0, 0, 0.3) 75%, transparent 100%);
        filter: brightness(0.6) contrast(2) saturate(2.5);
    }
    27% {
        background: linear-gradient(180deg, rgba(100, 0, 0, 1) 0%, rgba(80, 0, 0, 0.8) 25%, rgba(50, 0, 0, 0.6) 50%, rgba(30, 0, 0, 0.4) 75%, transparent 100%);
        filter: brightness(0.5) contrast(2.5) saturate(3);
    }
    /* LIGHTNING BLAST - Screen flashes bright white */
    28% {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 240, 255, 0.7) 25%, rgba(220, 220, 255, 0.5) 50%, rgba(200, 200, 255, 0.3) 75%, rgba(180, 180, 255, 0.1) 100%);
        filter: brightness(3) contrast(1) saturate(0.5);
    }
    29% {
        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 25%, rgba(240, 240, 255, 0.6) 50%, rgba(220, 220, 255, 0.4) 75%, rgba(200, 200, 255, 0.2) 100%);
        filter: brightness(4) contrast(0.8) saturate(0.3);
    }
    /* FADE BACK */
    30% {
        background: linear-gradient(180deg, rgba(120, 0, 0, 0.8) 0%, rgba(80, 0, 0, 0.6) 25%, rgba(50, 0, 0, 0.4) 50%, rgba(30, 0, 0, 0.2) 75%, transparent 100%);
        filter: brightness(0.8) contrast(1.5) saturate(2);
    }
    32% {
        background: linear-gradient(180deg, rgba(60, 0, 0, 0.5) 0%, rgba(40, 0, 0, 0.3) 25%, rgba(30, 0, 0, 0.2) 50%, rgba(20, 0, 0, 0.1) 75%, transparent 100%);
        filter: brightness(0.9) contrast(1.2) saturate(1.5);
    }
    /* RESUME NORMAL */
    35% {
        background: linear-gradient(180deg, rgba(20, 20, 40, 0.4) 0%, rgba(30, 30, 50, 0.3) 25%, rgba(40, 40, 60, 0.2) 50%, rgba(50, 50, 70, 0.1) 75%, transparent 100%);
        filter: brightness(1) contrast(1);
    }
    100% {
        background: linear-gradient(180deg, rgba(20, 20, 40, 0.4) 0%, rgba(30, 30, 50, 0.3) 25%, rgba(40, 40, 60, 0.2) 50%, rgba(50, 50, 70, 0.1) 75%, transparent 100%);
        filter: brightness(1) contrast(1);
    }
}

@keyframes lightningEyeEffect {
    0% {
        background: radial-gradient(circle, rgba(255, 0, 0, 1) 0%, rgba(255, 50, 50, 0.9) 30%, rgba(255, 100, 100, 0.6) 60%, rgba(255, 0, 0, 0.3) 80%, transparent 100%);
        box-shadow: 0 0 30px rgba(255, 0, 0, 1), 0 0 60px rgba(255, 0, 0, 0.8), 0 0 90px rgba(255, 0, 0, 0.6), 0 0 120px rgba(255, 0, 0, 0.4);
    }
    24% {
        background: radial-gradient(circle, rgba(255, 0, 0, 1) 0%, rgba(255, 50, 50, 0.9) 30%, rgba(255, 100, 100, 0.6) 60%, rgba(255, 0, 0, 0.3) 80%, transparent 100%);
        box-shadow: 0 0 30px rgba(255, 0, 0, 1), 0 0 60px rgba(255, 0, 0, 0.8), 0 0 90px rgba(255, 0, 0, 0.6), 0 0 120px rgba(255, 0, 0, 0.4);
    }
    /* TARGETING MODE - Eye intensifies */
    25% {
        background: radial-gradient(circle, rgba(255, 0, 0, 1) 0%, rgba(255, 100, 0, 1) 20%, rgba(255, 150, 0, 0.8) 40%, rgba(255, 200, 0, 0.6) 60%, rgba(255, 255, 0, 0.4) 80%, transparent 100%);
        box-shadow: 0 0 50px rgba(255, 0, 0, 1), 0 0 100px rgba(255, 100, 0, 1), 0 0 150px rgba(255, 150, 0, 0.8), 0 0 200px rgba(255, 200, 0, 0.6);
    }
    26% {
        background: radial-gradient(circle, rgba(200, 100, 255, 1) 0%, rgba(150, 50, 255, 1) 20%, rgba(100, 0, 255, 0.9) 40%, rgba(50, 0, 200, 0.7) 60%, rgba(0, 0, 150, 0.5) 80%, transparent 100%);
        box-shadow: 0 0 60px rgba(200, 100, 255, 1), 0 0 120px rgba(150, 50, 255, 1), 0 0 180px rgba(100, 0, 255, 0.8), 0 0 240px rgba(50, 0, 200, 0.6);
    }
    27% {
        background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(200, 200, 255, 1) 20%, rgba(150, 150, 255, 0.9) 40%, rgba(100, 100, 255, 0.7) 60%, rgba(50, 50, 255, 0.5) 80%, transparent 100%);
        box-shadow: 0 0 80px rgba(255, 255, 255, 1), 0 0 160px rgba(200, 200, 255, 1), 0 0 240px rgba(150, 150, 255, 0.8), 0 0 320px rgba(100, 100, 255, 0.6);
    }
    /* LIGHTNING BLAST - Eye goes pure white */
    28% {
        background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 40%, rgba(240, 240, 255, 0.9) 60%, rgba(220, 220, 255, 0.7) 80%, rgba(200, 200, 255, 0.5) 100%);
        box-shadow: 0 0 100px rgba(255, 255, 255, 1), 0 0 200px rgba(255, 255, 255, 1), 0 0 300px rgba(240, 240, 255, 0.8), 0 0 400px rgba(220, 220, 255, 0.6);
    }
    29% {
        background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 70%, rgba(240, 240, 255, 0.7) 85%, rgba(220, 220, 255, 0.5) 100%);
        box-shadow: 0 0 150px rgba(255, 255, 255, 1), 0 0 300px rgba(255, 255, 255, 1), 0 0 450px rgba(255, 255, 255, 0.8), 0 0 600px rgba(240, 240, 255, 0.6);
    }
    /* COOL DOWN */
    30% {
        background: radial-gradient(circle, rgba(255, 150, 150, 1) 0%, rgba(255, 100, 100, 0.9) 30%, rgba(255, 50, 50, 0.7) 60%, rgba(255, 0, 0, 0.5) 80%, transparent 100%);
        box-shadow: 0 0 60px rgba(255, 150, 150, 1), 0 0 120px rgba(255, 100, 100, 0.8), 0 0 180px rgba(255, 50, 50, 0.6), 0 0 240px rgba(255, 0, 0, 0.4);
    }
    32% {
        background: radial-gradient(circle, rgba(255, 0, 0, 1) 0%, rgba(255, 50, 50, 0.9) 30%, rgba(255, 100, 100, 0.6) 60%, rgba(255, 0, 0, 0.3) 80%, transparent 100%);
        box-shadow: 0 0 35px rgba(255, 0, 0, 1), 0 0 70px rgba(255, 0, 0, 0.8), 0 0 105px rgba(255, 0, 0, 0.6), 0 0 140px rgba(255, 0, 0, 0.4);
    }
    /* BACK TO NORMAL */
    35% {
        background: radial-gradient(circle, rgba(255, 0, 0, 1) 0%, rgba(255, 50, 50, 0.9) 30%, rgba(255, 100, 100, 0.6) 60%, rgba(255, 0, 0, 0.3) 80%, transparent 100%);
        box-shadow: 0 0 30px rgba(255, 0, 0, 1), 0 0 60px rgba(255, 0, 0, 0.8), 0 0 90px rgba(255, 0, 0, 0.6), 0 0 120px rgba(255, 0, 0, 0.4);
    }
    100% {
        background: radial-gradient(circle, rgba(255, 0, 0, 1) 0%, rgba(255, 50, 50, 0.9) 30%, rgba(255, 100, 100, 0.6) 60%, rgba(255, 0, 0, 0.3) 80%, transparent 100%);
        box-shadow: 0 0 30px rgba(255, 0, 0, 1), 0 0 60px rgba(255, 0, 0, 0.8), 0 0 90px rgba(255, 0, 0, 0.6), 0 0 120px rgba(255, 0, 0, 0.4);
    }
}

@keyframes panopticonScan {
    0% {
        transform: translateX(-50%) rotate(-45deg);
        opacity: 0.9;
        width: 3px;
        background: linear-gradient(180deg, rgba(255, 0, 0, 1) 0%, rgba(255, 50, 50, 0.9) 10%, rgba(255, 100, 100, 0.8) 25%, rgba(255, 150, 150, 0.6) 50%, rgba(255, 200, 200, 0.4) 75%, rgba(255, 255, 255, 0.2) 90%, transparent 100%);
        box-shadow: 0 0 8px rgba(255, 0, 0, 0.8), 0 0 16px rgba(255, 0, 0, 0.6), 0 0 24px rgba(255, 0, 0, 0.4), 0 0 32px rgba(255, 0, 0, 0.2);
    }
    8% {
        transform: translateX(-50%) rotate(-20deg);
        opacity: 1;
        width: 5px;
        background: linear-gradient(180deg, rgba(255, 0, 0, 1) 0%, rgba(255, 50, 50, 0.9) 10%, rgba(255, 100, 100, 0.8) 25%, rgba(255, 150, 150, 0.6) 50%, rgba(255, 200, 200, 0.4) 75%, rgba(255, 255, 255, 0.2) 90%, transparent 100%);
        box-shadow: 0 0 8px rgba(255, 0, 0, 0.8), 0 0 16px rgba(255, 0, 0, 0.6), 0 0 24px rgba(255, 0, 0, 0.4), 0 0 32px rgba(255, 0, 0, 0.2);
    }
    20% {
        transform: translateX(-50%) rotate(10deg);
        opacity: 1;
        width: 6px;
        background: linear-gradient(180deg, rgba(255, 0, 0, 1) 0%, rgba(255, 50, 50, 0.9) 10%, rgba(255, 100, 100, 0.8) 25%, rgba(255, 150, 150, 0.6) 50%, rgba(255, 200, 200, 0.4) 75%, rgba(255, 255, 255, 0.2) 90%, transparent 100%);
        box-shadow: 0 0 8px rgba(255, 0, 0, 0.8), 0 0 16px rgba(255, 0, 0, 0.6), 0 0 24px rgba(255, 0, 0, 0.4), 0 0 32px rgba(255, 0, 0, 0.2);
    }
    /* DRAMATIC PAUSE AND LOCK-ON */
    25% {
        transform: translateX(-50%) rotate(15deg);
        opacity: 1;
        width: 8px;
        background: linear-gradient(180deg, rgba(255, 100, 0, 1) 0%, rgba(255, 150, 0, 0.9) 10%, rgba(255, 200, 0, 0.8) 25%, rgba(255, 255, 0, 0.6) 50%, rgba(255, 255, 100, 0.4) 75%, rgba(255, 255, 200, 0.2) 90%, transparent 100%);
        box-shadow: 0 0 20px rgba(255, 100, 0, 1), 0 0 40px rgba(255, 150, 0, 0.8), 0 0 60px rgba(255, 200, 0, 0.6), 0 0 80px rgba(255, 255, 0, 0.4);
    }
    26% {
        /* DRAMATIC FREEZE - Beam stops and thickens */
        transform: translateX(-50%) rotate(15deg);
        opacity: 1;
        width: 12px;
        background: linear-gradient(180deg, rgba(200, 100, 255, 1) 0%, rgba(180, 120, 255, 0.9) 10%, rgba(160, 140, 255, 0.8) 25%, rgba(140, 160, 255, 0.6) 50%, rgba(120, 180, 255, 0.4) 75%, rgba(255, 255, 255, 0.8) 90%, transparent 100%);
        box-shadow: 
            0 0 30px rgba(200, 100, 255, 1),
            0 0 60px rgba(180, 120, 255, 0.8),
            0 0 90px rgba(160, 140, 255, 0.6),
            0 0 120px rgba(140, 160, 255, 0.4);
    }
    27% {
        /* CHARGE UP - Massive beam width */
        transform: translateX(-50%) rotate(15deg);
        opacity: 1;
        width: 20px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(220, 180, 255, 1) 10%, rgba(200, 160, 255, 0.9) 25%, rgba(180, 140, 255, 0.7) 50%, rgba(160, 120, 255, 0.5) 75%, rgba(255, 255, 255, 0.9) 90%, transparent 100%);
        box-shadow: 
            0 0 50px rgba(255, 255, 255, 1),
            0 0 100px rgba(200, 100, 255, 1),
            0 0 150px rgba(180, 120, 255, 0.8),
            0 0 200px rgba(160, 140, 255, 0.6);
    }
    28% {
        /* LIGHTNING BLAST - MAXIMUM WIDTH AND BRIGHTNESS */
        transform: translateX(-50%) rotate(15deg);
        opacity: 1;
        width: 30px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 20%, rgba(240, 240, 255, 1) 40%, rgba(220, 220, 255, 0.9) 60%, rgba(200, 200, 255, 0.7) 80%, rgba(180, 180, 255, 0.5) 90%, transparent 100%);
        box-shadow: 
            0 0 80px rgba(255, 255, 255, 1),
            0 0 160px rgba(255, 255, 255, 0.8),
            0 0 240px rgba(200, 100, 255, 0.6),
            0 0 320px rgba(180, 120, 255, 0.4),
            0 0 400px rgba(160, 140, 255, 0.2);
    }
    29% {
        /* LIGHTNING PEAK - PURE WHITE DEVASTATION */
        transform: translateX(-50%) rotate(15deg);
        opacity: 1;
        width: 35px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 1) 50%, rgba(240, 240, 255, 0.9) 70%, rgba(220, 220, 255, 0.7) 85%, rgba(200, 200, 255, 0.5) 95%, transparent 100%);
        box-shadow: 
            0 0 120px rgba(255, 255, 255, 1),
            0 0 240px rgba(255, 255, 255, 0.9),
            0 0 360px rgba(200, 100, 255, 0.7),
            0 0 480px rgba(180, 120, 255, 0.5),
            0 0 600px rgba(160, 140, 255, 0.3);
    }
    30% {
        /* FADE OUT - Lightning dissipates */
        transform: translateX(-50%) rotate(15deg);
        opacity: 0.8;
        width: 20px;
        background: linear-gradient(180deg, rgba(255, 200, 200, 1) 0%, rgba(255, 150, 150, 0.9) 10%, rgba(255, 100, 100, 0.8) 25%, rgba(255, 50, 50, 0.6) 50%, rgba(255, 0, 0, 0.4) 75%, rgba(255, 255, 255, 0.2) 90%, transparent 100%);
        box-shadow: 
            0 0 40px rgba(255, 0, 0, 0.8),
            0 0 80px rgba(255, 0, 0, 0.6),
            0 0 120px rgba(255, 0, 0, 0.4),
            0 0 160px rgba(255, 0, 0, 0.2);
    }
    32% {
        /* RETURN TO NORMAL */
        transform: translateX(-50%) rotate(15deg);
        opacity: 0.9;
        width: 6px;
        background: linear-gradient(180deg, rgba(255, 0, 0, 1) 0%, rgba(255, 50, 50, 0.9) 10%, rgba(255, 100, 100, 0.8) 25%, rgba(255, 150, 150, 0.6) 50%, rgba(255, 200, 200, 0.4) 75%, rgba(255, 255, 255, 0.2) 90%, transparent 100%);
        box-shadow: 0 0 8px rgba(255, 0, 0, 0.8), 0 0 16px rgba(255, 0, 0, 0.6), 0 0 24px rgba(255, 0, 0, 0.4), 0 0 32px rgba(255, 0, 0, 0.2);
    }
    /* RESUME NORMAL SCANNING */
    35% {
        transform: translateX(-50%) rotate(-30deg);
        opacity: 1;
        width: 5px;
        background: linear-gradient(180deg, rgba(255, 0, 0, 1) 0%, rgba(255, 50, 50, 0.9) 10%, rgba(255, 100, 100, 0.8) 25%, rgba(255, 150, 150, 0.6) 50%, rgba(255, 200, 200, 0.4) 75%, rgba(255, 255, 255, 0.2) 90%, transparent 100%);
        box-shadow: 0 0 8px rgba(255, 0, 0, 0.8), 0 0 16px rgba(255, 0, 0, 0.6), 0 0 24px rgba(255, 0, 0, 0.4), 0 0 32px rgba(255, 0, 0, 0.2);
    }
    50% {
        transform: translateX(-50%) rotate(25deg);
        opacity: 1;
        width: 7px;
        background: linear-gradient(180deg, rgba(255, 0, 0, 1) 0%, rgba(255, 50, 50, 0.9) 10%, rgba(255, 100, 100, 0.8) 25%, rgba(255, 150, 150, 0.6) 50%, rgba(255, 200, 200, 0.4) 75%, rgba(255, 255, 255, 0.2) 90%, transparent 100%);
        box-shadow: 0 0 8px rgba(255, 0, 0, 0.8), 0 0 16px rgba(255, 0, 0, 0.6), 0 0 24px rgba(255, 0, 0, 0.4), 0 0 32px rgba(255, 0, 0, 0.2);
    }
    65% {
        transform: translateX(-50%) rotate(-10deg);
        opacity: 1;
        width: 5px;
        background: linear-gradient(180deg, rgba(255, 0, 0, 1) 0%, rgba(255, 50, 50, 0.9) 10%, rgba(255, 100, 100, 0.8) 25%, rgba(255, 150, 150, 0.6) 50%, rgba(255, 200, 200, 0.4) 75%, rgba(255, 255, 255, 0.2) 90%, transparent 100%);
        box-shadow: 0 0 8px rgba(255, 0, 0, 0.8), 0 0 16px rgba(255, 0, 0, 0.6), 0 0 24px rgba(255, 0, 0, 0.4), 0 0 32px rgba(255, 0, 0, 0.2);
    }
    80% {
        transform: translateX(-50%) rotate(40deg);
        opacity: 1;
        width: 4px;
        background: linear-gradient(180deg, rgba(255, 0, 0, 1) 0%, rgba(255, 50, 50, 0.9) 10%, rgba(255, 100, 100, 0.8) 25%, rgba(255, 150, 150, 0.6) 50%, rgba(255, 200, 200, 0.4) 75%, rgba(255, 255, 255, 0.2) 90%, transparent 100%);
        box-shadow: 0 0 8px rgba(255, 0, 0, 0.8), 0 0 16px rgba(255, 0, 0, 0.6), 0 0 24px rgba(255, 0, 0, 0.4), 0 0 32px rgba(255, 0, 0, 0.2);
    }
    100% {
        transform: translateX(-50%) rotate(-45deg);
        opacity: 0.9;
        width: 3px;
        background: linear-gradient(180deg, rgba(255, 0, 0, 1) 0%, rgba(255, 50, 50, 0.9) 10%, rgba(255, 100, 100, 0.8) 25%, rgba(255, 150, 150, 0.6) 50%, rgba(255, 200, 200, 0.4) 75%, rgba(255, 255, 255, 0.2) 90%, transparent 100%);
        box-shadow: 0 0 8px rgba(255, 0, 0, 0.8), 0 0 16px rgba(255, 0, 0, 0.6), 0 0 24px rgba(255, 0, 0, 0.4), 0 0 32px rgba(255, 0, 0, 0.2);
    }
}

@keyframes gridShift {
    0% {
        background-position: 0 0, 0 0;
    }
    25% {
        background-position: -15px -8px, 8px -15px;
    }
    50% {
        background-position: -30px -15px, 15px -30px;
    }
    75% {
        background-position: -15px -8px, 8px -15px;
    }
    100% {
        background-position: 0 0, 0 0;
    }
}

@keyframes surveillanceGlow {
    0% {
        background-position: 0 0, 0 0, 50% -10%;
    }
    25% {
        background-position: -15px -8px, 8px -15px, 45% -8%;
    }
    50% {
        background-position: -30px -15px, 15px -30px, 55% -12%;
    }
    75% {
        background-position: -15px -8px, 8px -15px, 48% -9%;
    }
    100% {
        background-position: 0 0, 0 0, 50% -10%;
    }
}

@keyframes cyberneticsGlow {
    0% {
        opacity: 0;
        transform: translateY(0px) scale(0.9);
        color: #FF0000;
        text-shadow: 
            0 0 8px #FF0000,
            0 0 16px #FF4444,
            0 0 24px #AA0000;
    }
    25% {
        opacity: 0.8;
        transform: translateY(-8px) scale(1.1);
        color: #FF4444;
        text-shadow: 
            0 0 12px #FF0000,
            0 0 24px #FF4444,
            0 0 36px #AA0000,
            0 0 48px #660000;
    }
    50% {
        opacity: 1;
        transform: translateY(-16px) scale(1.3);
        color: #FF6666;
        text-shadow: 
            0 0 16px #FF0000,
            0 0 32px #FF4444,
            0 0 48px #AA0000,
            0 0 64px #660000;
    }
    75% {
        opacity: 0.9;
        transform: translateY(-24px) scale(1.2);
        color: #FF4444;
        text-shadow: 
            0 0 12px #FF0000,
            0 0 24px #FF4444,
            0 0 36px #AA0000;
    }
    100% {
        opacity: 0;
        transform: translateY(-32px) scale(1);
        color: #AA0000;
        text-shadow: 
            0 0 8px #FF0000,
            0 0 16px #AA0000;
    }
}

@keyframes arcanaMistFlow {
    0% {
        opacity: 0.8;
        transform: translateX(0px);
        filter: brightness(1) hue-rotate(0deg);
    }
    25% {
        opacity: 0.9;
        transform: translateX(-2px);
        filter: brightness(1.1) hue-rotate(10deg);
    }
    50% {
        opacity: 1;
        transform: translateX(3px);
        filter: brightness(1.2) hue-rotate(20deg);
    }
    75% {
        opacity: 0.95;
        transform: translateX(-1px);
        filter: brightness(1.1) hue-rotate(10deg);
    }
    100% {
        opacity: 0.8;
        transform: translateX(0px);
        filter: brightness(1) hue-rotate(0deg);
    }
}

@keyframes arcanaParticlesDrift {
    0% {
        transform: translateX(0px) translateY(0px);
    }
    25% {
        transform: translateX(-8px) translateY(-5px);
    }
    50% {
        transform: translateX(5px) translateY(-8px);
    }
    75% {
        transform: translateX(-5px) translateY(-3px);
    }
    100% {
        transform: translateX(0px) translateY(0px);
    }
}

@keyframes arcanaDenseParticles {
    0% {
        transform: translateX(0px);
    }
    33% {
        transform: translateX(-5px);
    }
    66% {
        transform: translateX(5px);
    }
    100% {
        transform: translateX(0px);
    }
}

@keyframes orb1Movement {
    0% { background-position: 20% 30%; }
    10% { background-position: 35% 25%; }
    20% { background-position: 50% 40%; }
    30% { background-position: 65% 20%; }
    40% { background-position: 80% 35%; }
    50% { background-position: 75% 60%; }
    60% { background-position: 60% 75%; }
    70% { background-position: 40% 80%; }
    80% { background-position: 25% 65%; }
    90% { background-position: 15% 45%; }
    100% { background-position: 20% 30%; }
}

@keyframes orb1Pulse {
    0% {
        filter: hue-rotate(270deg) brightness(1.2) saturate(1.6) drop-shadow(0 0 20px rgba(147, 112, 219, 0.8));
    }
    50% {
        filter: hue-rotate(280deg) brightness(1.8) saturate(2.2) drop-shadow(0 0 40px rgba(147, 112, 219, 1));
    }
    100% {
        filter: hue-rotate(270deg) brightness(1.2) saturate(1.6) drop-shadow(0 0 20px rgba(147, 112, 219, 0.8));
    }
}

@keyframes orb2Movement {
    0% { background-position: 20% 30%, 70% 60%, 85% 25%, 15% 80%, 45% 15%, 90% 70%, 30% 85%; }
    15% { background-position: 20% 30%, 65% 45%, 85% 25%, 15% 80%, 45% 15%, 90% 70%, 30% 85%; }
    30% { background-position: 20% 30%, 55% 30%, 85% 25%, 15% 80%, 45% 15%, 90% 70%, 30% 85%; }
    45% { background-position: 20% 30%, 40% 20%, 85% 25%, 15% 80%, 45% 15%, 90% 70%, 30% 85%; }
    60% { background-position: 20% 30%, 25% 35%, 85% 25%, 15% 80%, 45% 15%, 90% 70%, 30% 85%; }
    75% { background-position: 20% 30%, 35% 55%, 85% 25%, 15% 80%, 45% 15%, 90% 70%, 30% 85%; }
    90% { background-position: 20% 30%, 55% 70%, 85% 25%, 15% 80%, 45% 15%, 90% 70%, 30% 85%; }
    100% { background-position: 20% 30%, 70% 60%, 85% 25%, 15% 80%, 45% 15%, 90% 70%, 30% 85%; }
}

@keyframes orb3Movement {
    0% { background-position: 20% 30%, 70% 60%, 85% 25%, 15% 80%, 45% 15%, 90% 70%, 30% 85%; }
    20% { background-position: 20% 30%, 70% 60%, 75% 15%, 15% 80%, 45% 15%, 90% 70%, 30% 85%; }
    40% { background-position: 20% 30%, 70% 60%, 60% 10%, 15% 80%, 45% 15%, 90% 70%, 30% 85%; }
    60% { background-position: 20% 30%, 70% 60%, 50% 20%, 15% 80%, 45% 15%, 90% 70%, 30% 85%; }
    80% { background-position: 20% 30%, 70% 60%, 70% 30%, 15% 80%, 45% 15%, 90% 70%, 30% 85%; }
    100% { background-position: 20% 30%, 70% 60%, 85% 25%, 15% 80%, 45% 15%, 90% 70%, 30% 85%; }
}

@keyframes orb4Movement {
    0% { background-position: 20% 30%, 70% 60%, 85% 25%, 15% 80%, 45% 15%, 90% 70%, 30% 85%; }
    25% { background-position: 20% 30%, 70% 60%, 85% 25%, 25% 70%, 45% 15%, 90% 70%, 30% 85%; }
    50% { background-position: 20% 30%, 70% 60%, 85% 25%, 35% 85%, 45% 15%, 90% 70%, 30% 85%; }
    75% { background-position: 20% 30%, 70% 60%, 85% 25%, 10% 90%, 45% 15%, 90% 70%, 30% 85%; }
    100% { background-position: 20% 30%, 70% 60%, 85% 25%, 15% 80%, 45% 15%, 90% 70%, 30% 85%; }
}

@keyframes orb5Movement {
    0% { background-position: 20% 30%, 70% 60%, 85% 25%, 15% 80%, 45% 15%, 90% 70%, 30% 85%; }
    30% { background-position: 20% 30%, 70% 60%, 85% 25%, 15% 80%, 55% 10%, 90% 70%, 30% 85%; }
    60% { background-position: 20% 30%, 70% 60%, 85% 25%, 15% 80%, 35% 5%, 90% 70%, 30% 85%; }
    100% { background-position: 20% 30%, 70% 60%, 85% 25%, 15% 80%, 45% 15%, 90% 70%, 30% 85%; }
}

@keyframes orb6Movement {
    0% { background-position: 20% 30%, 70% 60%, 85% 25%, 15% 80%, 45% 15%, 90% 70%, 30% 85%; }
    33% { background-position: 20% 30%, 70% 60%, 85% 25%, 15% 80%, 45% 15%, 85% 60%, 30% 85%; }
    66% { background-position: 20% 30%, 70% 60%, 85% 25%, 15% 80%, 45% 15%, 95% 80%, 30% 85%; }
    100% { background-position: 20% 30%, 70% 60%, 85% 25%, 15% 80%, 45% 15%, 90% 70%, 30% 85%; }
}

@keyframes orb7Movement {
    0% { background-position: 20% 30%, 70% 60%, 85% 25%, 15% 80%, 45% 15%, 90% 70%, 30% 85%; }
    40% { background-position: 20% 30%, 70% 60%, 85% 25%, 15% 80%, 45% 15%, 90% 70%, 40% 75%; }
    80% { background-position: 20% 30%, 70% 60%, 85% 25%, 15% 80%, 45% 15%, 90% 70%, 20% 95%; }
    100% { background-position: 20% 30%, 70% 60%, 85% 25%, 15% 80%, 45% 15%, 90% 70%, 30% 85%; }
}

@keyframes orbsGlow {
    0% {
        filter: hue-rotate(270deg) brightness(1.2) saturate(1.6) drop-shadow(0 0 15px rgba(147, 112, 219, 0.6));
    }
    50% {
        filter: hue-rotate(285deg) brightness(1.8) saturate(2.1) drop-shadow(0 0 35px rgba(147, 112, 219, 1));
    }
    100% {
        filter: hue-rotate(270deg) brightness(1.2) saturate(1.6) drop-shadow(0 0 15px rgba(147, 112, 219, 0.6));
    }
}

@keyframes arcanaFireGlow {
    0% {
        opacity: 0;
        transform: translateY(0px) scale(0.9);
        color: #9370DB;
    }
    25% {
        opacity: 0.8;
        transform: translateY(-10px) scale(1.2);
        color: #8A2BE2;
    }
    50% {
        opacity: 1;
        transform: translateY(-18px) scale(1.4);
        color: #DDA0DD;
    }
    75% {
        opacity: 0.9;
        transform: translateY(-25px) scale(1.2);
        color: #8A2BE2;
    }
    100% {
        opacity: 0;
        transform: translateY(-35px) scale(1);
        color: #4B0082;
    }
}

@keyframes highlightPopIn {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    70% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes highlightPulse {
    from { transform: scale(1); filter: brightness(1); }
    to { transform: scale(1.05); filter: brightness(1.2); }
}

@keyframes legendaryPulse {
    from { 
        transform: scale(1); 
        filter: brightness(1) drop-shadow(0 0 20px gold);
    }
    to { 
        transform: scale(1.08); 
        filter: brightness(1.3) drop-shadow(0 0 40px gold);
    }
}

@keyframes fireFullscreen {
    0% { opacity: 0; transform: scale(0.8); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.2); }
}

@keyframes lightningFullscreen {
    0%, 10%, 20%, 30% { opacity: 1; }
    5%, 15%, 25% { opacity: 0.3; }
    100% { opacity: 0; }
}

@keyframes voidFullscreen {
    0% { opacity: 0; filter: blur(10px); }
    30% { opacity: 1; filter: blur(0px); }
    100% { opacity: 0; filter: blur(20px); }
}

@keyframes radiationFullscreen {
    0% { opacity: 0; }
    20% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 0; }
}

@keyframes chromaFullscreen {
    0% { opacity: 0; transform: rotate(0deg) scale(0.8); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: rotate(180deg) scale(1.5); }
}

@keyframes bloodFullscreen {
    0% { opacity: 0; }
    10% { opacity: 1; }
    30% { opacity: 0.8; }
    100% { opacity: 0; }
}

@keyframes aetherFullscreen {
    0% { opacity: 0; filter: blur(5px); }
    30% { opacity: 1; filter: blur(0px); }
    70% { opacity: 0.8; }
    100% { opacity: 0; filter: blur(10px); }
}

@keyframes arcanaFullscreen {
    0% { opacity: 0; transform: scale(0.5); }
    30% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.3); }
}

@keyframes cyberFullscreen {
    0% { opacity: 0; }
    10% { opacity: 1; }
    20% { opacity: 0.5; }
    30% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes physicalFullscreen {
    0% { opacity: 0; transform: scale(0.9); }
    20% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.1); }
}

@keyframes flawlessFullscreen {
    0% { opacity: 0; transform: scale(0.5); }
    20% { opacity: 1; transform: scale(1); }
    80% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.1); }
}

@keyframes comebackFullscreen {
    0% { opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes oneShotFullscreen {
    0% { opacity: 0; transform: scale(2); }
    20% { opacity: 1; transform: scale(1); }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes streakBrokenFullscreen {
    0% { opacity: 0; }
    10% { opacity: 1; }
    20% { opacity: 0.5; }
    30% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes reflectionFullscreen {
    0% { opacity: 0; transform: rotate(-10deg); }
    30% { opacity: 1; transform: rotate(0deg); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: rotate(10deg); }
}

@keyframes lightningScreenFlash {
    0% { background: rgba(200, 230, 255, 0); }
    5% { background: rgba(200, 230, 255, 0.8); }
    10% { background: rgba(200, 230, 255, 0.2); }
    15% { background: rgba(200, 230, 255, 0.9); }
    20% { background: rgba(200, 230, 255, 0.1); }
    25% { background: rgba(200, 230, 255, 0.6); }
    35% { background: rgba(200, 230, 255, 0); }
    100% { background: rgba(200, 230, 255, 0); }
}

@keyframes lightningBoltStrike {
    0% {
        opacity: 0;
        clip-path: inset(100% 0 0 0);
    }
    8% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
    12% { opacity: 0.3; }
    16% { opacity: 1; }
    20% { opacity: 0.4; }
    25% { opacity: 1; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes lightningImpactGlow {
    0% { opacity: 0; transform: translateX(-50%) scaleX(0.2) scaleY(0.3); }
    10% { opacity: 1; transform: translateX(-50%) scaleX(1.5) scaleY(1.2); }
    20% { opacity: 0.5; transform: translateX(-50%) scaleX(1.2) scaleY(1); }
    30% { opacity: 1; transform: translateX(-50%) scaleX(1.3) scaleY(1.1); }
    50% { opacity: 0.8; transform: translateX(-50%) scaleX(1) scaleY(1); }
    100% { opacity: 0; transform: translateX(-50%) scaleX(0.8) scaleY(0.6); }
}

@keyframes toastySlideFromLeft {
    0% {
        left: -500px;
        opacity: 0;
    }
    15% {
        left: 30px;
        opacity: 1;
    }
    70% {
        left: 30px;
        opacity: 1;
    }
    100% {
        left: -500px;
        opacity: 0;
    }
}

@keyframes toastySlideFromRight {
    0% {
        right: -500px;
        opacity: 0;
    }
    15% {
        right: 30px;
        opacity: 1;
    }
    70% {
        right: 30px;
        opacity: 1;
    }
    100% {
        right: -500px;
        opacity: 0;
    }
}

@keyframes toastyTextPop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    15% {
        transform: scale(1.2);
        opacity: 1;
    }
    25% {
        transform: scale(1);
        opacity: 1;
    }
    70% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.8);
        opacity: 0;
    }
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes ghostPulse {
    0%, 100% { 
        filter: brightness(1) hue-rotate(0deg);
        box-shadow: 0 0 10px rgba(100, 200, 255, 0.3);
    }
    50% { 
        filter: brightness(1.3) hue-rotate(15deg);
        box-shadow: 0 0 25px rgba(100, 200, 255, 0.6);
    }
}

@keyframes itemArmedGlow {
    0%, 100% {
        box-shadow: 
            0 0 15px rgba(245, 166, 35, 0.6),
            0 0 30px rgba(245, 166, 35, 0.3);
    }
    50% {
        box-shadow: 
            0 0 25px rgba(245, 166, 35, 0.8),
            0 0 50px rgba(245, 166, 35, 0.5);
    }
}

@keyframes sacrifice-pulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(139, 0, 0, 0.8);
    }
    50% {
        box-shadow: 0 0 40px rgba(255, 0, 0, 1);
    }
}

@keyframes skull-bob {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
}

@keyframes sacrifice-fade {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.5) rotate(180deg);
        filter: brightness(2);
    }
}

@keyframes arm-flash {
    0%, 100% { 
        filter: brightness(1);
    }
    50% { 
        filter: brightness(2);
        box-shadow: 0 0 30px #FFD700;
    }
}

@keyframes armed-pulse {
    0%, 100% {
        box-shadow: 0 0 25px rgba(255, 69, 0, 0.9);
    }
    50% {
        box-shadow: 0 0 45px rgba(255, 69, 0, 1);
        transform: scale(1.05);
    }
}

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

@keyframes trigger-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes explosion {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.3);
        filter: brightness(3);
    }
    100% {
        transform: scale(0.8);
        filter: brightness(0.5);
        opacity: 0.5;
    }
}

@keyframes summon-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(0, 206, 209, 0.8);
    }
    50% {
        box-shadow: 0 0 35px rgba(0, 255, 255, 1);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARD SLOTS (FIGHTER SETUP) - Faction-themed
   ═══════════════════════════════════════════════════════════════════════════ */
.card-slots-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.card-slots-column .card-slot {
    position: relative;
    width: var(--card-width);
    height: var(--card-height);
    background: linear-gradient(145deg, rgba(20, 22, 40, 0.8), rgba(10, 12, 25, 0.9));
    border: 2px solid rgba(var(--faction-rgb), 0.2);
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Corner accents on card slots */
.card-slots-column .card-slot::before,
.card-slots-column .card-slot::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-color: rgba(var(--faction-rgb), 0.4);
    transition: all var(--transition-fast);
}

.card-slots-column .card-slot::before {
    top: 4px;
    left: 4px;
    border-left: 2px solid;
    border-top: 2px solid;
}

.card-slots-column .card-slot::after {
    bottom: 4px;
    right: 4px;
    border-right: 2px solid;
    border-bottom: 2px solid;
}

.card-slots-column .card-slot:hover {
    border-color: var(--faction-color);
    transform: translateX(5px);
    box-shadow: 0 0 20px var(--faction-glow), inset 0 0 30px rgba(var(--faction-rgb), 0.1);
}

.card-slots-column .card-slot:hover::before,
.card-slots-column .card-slot:hover::after {
    border-color: var(--faction-color);
}

.card-slots-column .card-slot .slot-label {
    font-family: var(--font-display);
    font-size: 0.5rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    letter-spacing: 1px;
    padding: 5px;
    pointer-events: none;
    text-transform: uppercase;
}

.card-slots-column .card-slot.filled {
    border-color: var(--faction-color);
    box-shadow: 0 0 15px var(--faction-glow), inset 0 0 20px rgba(var(--faction-rgb), 0.1);
}

.card-slots-column .card-slot.filled::before,
.card-slots-column .card-slot.filled::after {
    border-color: var(--faction-color);
}

.card-slots-column .card-slot.filled .slot-label {
    display: none;
}

.card-slots-column .card-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

/* Slot type specific colors when filled (override faction for gameplay clarity) */
.card-slots-column .card-slot[data-slot="armor"].filled { 
    border-color: #94a3b8;
    box-shadow: 0 0 15px rgba(148, 163, 184, 0.3), inset 0 0 20px rgba(148, 163, 184, 0.1);
}
.card-slots-column .card-slot[data-slot="armor"].filled::before,
.card-slots-column .card-slot[data-slot="armor"].filled::after { border-color: #94a3b8; }

.card-slots-column .card-slot[data-slot="weapon1"].filled,
.card-slots-column .card-slot[data-slot="weapon2"].filled { 
    border-color: #ef4444;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.3), inset 0 0 20px rgba(239, 68, 68, 0.1);
}
.card-slots-column .card-slot[data-slot="weapon1"].filled::before,
.card-slots-column .card-slot[data-slot="weapon1"].filled::after,
.card-slots-column .card-slot[data-slot="weapon2"].filled::before,
.card-slots-column .card-slot[data-slot="weapon2"].filled::after { border-color: #ef4444; }

.card-slots-column .card-slot[data-slot="sigil"].filled { 
    border-color: #ec4899;
    box-shadow: 0 0 15px rgba(236, 72, 153, 0.3), inset 0 0 20px rgba(236, 72, 153, 0.1);
}
.card-slots-column .card-slot[data-slot="sigil"].filled::before,
.card-slots-column .card-slot[data-slot="sigil"].filled::after { border-color: #ec4899; }

.card-slots-column .card-slot[data-slot="ability"].filled { 
    border-color: #22d3ee;
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.3), inset 0 0 20px rgba(34, 211, 238, 0.1);
}
.card-slots-column .card-slot[data-slot="ability"].filled::before,
.card-slots-column .card-slot[data-slot="ability"].filled::after { border-color: #22d3ee; }

.card-slots-column .card-slot[data-slot="creature"].filled { 
    border-color: #a855f7;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.3), inset 0 0 20px rgba(168, 85, 247, 0.1);
}
.card-slots-column .card-slot[data-slot="creature"].filled::before,
.card-slots-column .card-slot[data-slot="creature"].filled::after { border-color: #a855f7; }

/* ═══════════════════════════════════════════════════════════════════════════
   SABER ACADEMY SKIN v2 — RESPONSIVE HARMONISATION LAYER
   Placed last so it has the FINAL SAY: the engine's overlapping breakpoint
   families (767px vs 768px, 575px vs 600px, 1199px vs 1200px) wrote
   conflicting rules for the same components across eras. Every rule below
   settles those disagreements at the canonical widths, and fills the gaps
   found in audit: campaign cards (fixed 280×500, no rules), the loading
   screen, the 1800px map frame, the fixed loadout stats panel, and
   oversized action buttons.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tablets and small laptops ── */
@media (max-width: 1199px) {
  /* loadout stats: fixed-right panel overlaps the roster below this width —
     return it to the flow, full width, above the roster */
  .loadout-stats-summary {
    position: static;
    width: auto;
    max-width: 560px;
    margin: 0 auto 20px;
  }
}

@media (max-width: 991px) {
  /* battle map: side panel drops below the map, both full width */
  .battle-map-container {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .map-side-panel {
    flex: none;
    width: 100%;
    position: static;
    order: 2;
  }
  .map-view-controls { max-height: none; }
  .map-area {
    width: 100%;
    min-height: 62vh;
  }
}

/* ── Phones (canonical: 768 / 575) ── */
@media (max-width: 768px) {
  /* modals */
  .modal-content { width: 100%; max-width: 100%; padding: 16px; }
  .modal-header { padding: 12px 14px; margin-bottom: 14px; }
  .modal-actions { flex-direction: column; align-items: stretch; }
  .modal .btn-decrypt { width: 100%; }

  /* campaign select: cards had no responsive rules at all */
  .campaigns-container { gap: 16px; padding: 0 12px; }
  .campaign { width: min(280px, 45vw); height: 400px !important; }

  /* results */
  .final-results { grid-template-columns: 1fr; }
  #results-screen { padding-top: 40px; }
  .action-buttons { flex-direction: column; align-items: stretch; gap: 14px; width: 100%; max-width: 420px; }
  #results-screen .btn-decrypt { width: 100%; min-width: 0; }

  /* story VN: kill the 350px empty minimum on phones */
  .story-vn-text-content { min-height: 0; }
}

@media (max-width: 575px) {
  /* titles */
  #battle-map h1,
  #results-screen h1,
  #campaign-selection h1 {
    font-size: 1.35rem;
    letter-spacing: 2px;
    margin-top: 20px;
  }

  /* campaign cards go single column, cinematic ratio */
  .campaign { width: min(420px, 92vw); height: 300px !important; }

  /* loading screen CTA never overflows */
  .btn-decrypt {
    min-width: 0;
    width: min(320px, 88vw);
    font-size: 1.05rem;
    padding: 12px 20px;
    letter-spacing: 2px;
  }

  /* house select: FINAL SAY on the vs divider (767 vs 575 disagreement) */
  .vs-badge { width: 90px; height: 90px; border-width: 3px; }
  .vs-text { font-size: 30px; }
  .vs-line { height: 220px; }

  .map-area { min-height: 55vh; }
  .story-summary-footer { flex-direction: column; align-items: stretch; gap: 12px; }
  .story-summary-close-btn { width: 100%; }
}

/* ── Touch targets ── */
@media (hover: none) and (pointer: coarse) {
  .modal .btn-decrypt,
  #results-screen .btn-decrypt,
  .view-btn,
  .story-saga-btn,
  .story-vn-acknowledge-btn,
  .story-summary-close-btn,
  .upload-btn,
  .campaign-btn-small {
    min-height: 44px;
  }
  .modal-close,
  .modal-content .panel-close-btn,
  .story-summary-close {
    width: 44px;
    height: 44px;
  }
}

/* ── Reduced motion for the skinned surfaces ── */
@media (prefers-reduced-motion: reduce) {
  .modal-content,
  .story-vn-modal.entering,
  .story-vn-modal.exiting,
  .story-vn-acknowledge-btn.pulsing {
    animation: none !important;
  }
  .modal .btn-decrypt,
  #results-screen .btn-decrypt,
  .view-btn,
  .story-saga-btn,
  .story-vn-acknowledge-btn,
  .story-summary-close-btn,
  .upload-btn,
  .campaign-btn-small,
  .panel-toggle-btn {
    transition: none !important;
    transform: none !important;
  }
}

/* ═══ END SABER ACADEMY SKIN v2 ══════════════════════════════════════════ */