:root {
  /* Fluid base: ~16px at 720p, ~22px at 1080p, ~26px at 1440p */
  font-size: clamp(15px, 1vw + 3px, 26px);

  --bg-dark: #0a0e14;
  --bg-card: #1a1f2e;
  --bg-card-hover: #252b3d;
  --bg-field: #12161f;
  --bg-overlay: rgba(5, 8, 12, 1);

  --gold: #d4a853;
  --gold-light: #f0d078;
  --gold-dark: #a67c32;

  --hp-red: #e74c3c;
  --atk-yellow: #f1c40f;
  --mana-blue: #3498db;

  --predator: #c0392b;
  --prey: #27ae60;
  --spell: #2980b9;
  --freespell: #8e44ad;
  --trap: #d35400;

  --text-primary: #f5f5f5;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-gold: rgba(212, 168, 83, 0.5);

  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Barlow', sans-serif;

  /* Font scale (rem-based, relative to fluid root) */
  --font-xs: 0.75rem; /* ~10.5-13.5px */
  --font-sm: 0.875rem; /* ~12.25-15.75px */
  --font-base: 1rem; /* ~14-18px (root size) */
  --font-lg: 1.125rem; /* ~15.75-20.25px */
  --font-xl: 1.375rem; /* ~19.25-24.75px */
  --font-2xl: 1.75rem; /* ~24.5-31.5px */
  --font-3xl: 2.25rem; /* ~31.5-40.5px */

  --card-radius: 8px;
  --transition-fast: 0.15s ease;
  --transition-medium: 0.25s ease;
  --action-bar-safe: clamp(170px, 18vh, 240px);
  --field-max-height: min(66vh, 700px);
  --field-gap: clamp(8px, 1.5vw, 16px);
  --hand-overlap: clamp(24px, 3vw, 48px);

  /* Tooltip dimensions - responsive to viewport */
  --tooltip-info-width: clamp(180px, 20vw, 280px);
  --tooltip-gap: clamp(12px, 1.5vw, 20px);

  /* Minimum heights for zoom stability */
  --min-container-height: 600px;
  --min-pages-height: 500px;
  --min-battlefield-height: 480px;
  --min-hand-height: clamp(90px, 14vh, 140px);
  --min-inspector-height: 200px;
  --min-log-height: 150px;
  --min-piles-height: 80px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Adjust minimums for extreme zoom scenarios */
@media (max-height: 500px) {
  :root {
    --min-container-height: 500px;
    --min-battlefield-height: 380px;
    --min-hand-height: 80px;
    --min-inspector-height: 120px;
    --min-log-height: 120px;
    --min-piles-height: 60px;
  }
}

.hidden {
  display: none;
}

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

html,
body {
  height: 100%;
  overflow: hidden;
  background: var(--bg-dark);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.45;
  width: 100vw;
  max-width: 100vw;
  /* Disable all touch-hold browser behaviors (highlight, context menu, etc.) */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 0);
  background-size: 4px 4px;
  opacity: 0.18;
  z-index: 0;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

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

.game-container {
  position: fixed;
  inset: 0;
  z-index: 1;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-top: calc(12px + var(--safe-top));
  padding-bottom: calc(12px + var(--safe-bottom));
  width: 100vw;
  max-width: 100vw;
  min-width: 320px;
  overflow: hidden;
}

.top-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-gold);
  gap: 12px;
}

/* Minimal top bar - player info moved to scoreboard row */
.top-bar-minimal {
  justify-content: center;
  padding: 4px 18px;
  min-height: 0;
  border-bottom: none;
}

.top-bar-minimal .turn-badge {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
}

.player-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.02);
  padding: 8px 12px;
  border-radius: 999px;
  position: relative;
}

.player-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.player-info.right {
  text-align: right;
  flex-direction: row-reverse;
}

.player-name {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  font-size: var(--font-lg);
}

.ai-speed-toggle {
  background: transparent;
  border: none;
  padding: 0;
  margin-left: 4px;
  font-size: var(--font-base);
  cursor: pointer;
  transition: transform 0.15s;
  vertical-align: middle;
  line-height: 1;
}

.ai-speed-toggle:hover {
  transform: scale(1.15);
}

.ai-speed-toggle:active {
  transform: scale(0.95);
}

.ai-speed-toggle.ai-paused {
  animation: pause-pulse 1.5s ease-in-out infinite;
  color: #ff9800;
}

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

.ai-speed-toggle.ai-lightning {
  animation: lightning-flash 0.8s ease-in-out infinite;
  color: #ffeb3b;
  text-shadow:
    0 0 8px #ffeb3b,
    0 0 12px #ff9800;
}

@keyframes lightning-flash {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.05);
  }
}

.player-stats {
  display: flex;
  gap: 6px;
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.player-badge.is-active {
  box-shadow: 0 0 0 rgba(240, 208, 120, 0.35);
  animation: active-breathe 2.6s ease-in-out infinite;
}

.player-badge.is-active .player-name {
  text-shadow: 0 0 10px rgba(240, 208, 120, 0.65);
}

.turn-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-gold);
  background: rgba(212, 168, 83, 0.1);
  text-align: center;
  min-width: 110px;
  animation: glow 2.5s ease-in-out infinite;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
  z-index: 5;
}

.turn-number {
  display: block;
  font-family: var(--font-display);
  font-size: var(--font-base);
  letter-spacing: 0.08em;
}

.phase-label {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.turn-badge:hover:not(:disabled) {
  transform: translate(-50%, -50%) translateY(-1px);
  box-shadow: 0 6px 18px rgba(212, 168, 83, 0.25);
}

.turn-badge:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.turn-badge:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
}

/* Surrender Button */
.surrender-btn {
  position: absolute;
  left: calc(50% - 130px);
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 4px 8px;
  font-size: var(--font-lg);
  cursor: pointer;
  transition:
    transform 0.15s,
    filter 0.15s;
  opacity: 0.7;
  z-index: 5;
}

.surrender-btn:hover {
  transform: translateY(-50%) scale(1.15);
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.3));
}

.surrender-btn:active {
  transform: translateY(-50%) scale(0.95);
}

/* Surrender Overlay */
.surrender-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2000;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(4px);
}

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

.surrender-dialog {
  background: var(--bg-primary);
  border: 2px solid var(--border-gold);
  border-radius: 16px;
  padding: 32px 48px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  animation: surrender-dialog-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes surrender-dialog-pop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.surrender-title {
  font-family: var(--font-display);
  font-size: var(--font-xl);
  margin-bottom: 12px;
  color: var(--gold);
}

.surrender-message {
  font-size: var(--font-base);
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.surrender-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.surrender-btn-yes,
.surrender-btn-no {
  padding: 10px 28px;
  border-radius: 8px;
  font-size: var(--font-base);
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
  border: none;
}

.surrender-btn-yes {
  background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(229, 62, 62, 0.3);
}

.surrender-btn-yes:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(229, 62, 62, 0.4);
}

.surrender-btn-no {
  background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(66, 153, 225, 0.3);
}

.surrender-btn-no:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(66, 153, 225, 0.4);
}

.pages-container {
  flex: 1;
  position: relative;
  overflow: visible; /* Allow cards to overflow */
  padding: clamp(12px, 2vw, 20px) clamp(8px, 1vw, 14px) 0;
  width: 100%;
  max-width: 100%;
  min-height: var(--min-pages-height); /* Ensure content area doesn't collapse */
}

.page {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(20px);
  transition:
    opacity var(--transition-medium),
    transform var(--transition-medium);
  pointer-events: none;
  overflow: visible; /* Allow hand cards to overflow upward */
}

.page.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.page.exit-left {
  opacity: 0;
  transform: translateX(-20px);
}

.battlefield-layout-three-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(10px, 1.5vw, 18px);
  height: 100%;
  max-height: 100%;
  min-height: var(--min-battlefield-height); /* Prevent collapse at high zoom */
  width: 100%;
  max-width: 100%;
  overflow: visible; /* Allow hand cards to overflow upward */
}

/* Two-column layout (no left inspector) */
.battlefield-layout-two-column {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap: clamp(10px, 1.5vw, 18px);
  height: 100%;
  max-height: 100%;
  min-height: var(--min-battlefield-height);
  width: 100%;
  max-width: 100%;
  overflow: visible;
}

.battlefield-left-column,
.battlefield-right-column {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2vw, 16px);
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  overflow-y: auto; /* Enable scrolling if content is too tall for viewport */
  overflow-x: hidden;
}

.battlefield-center-column {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2vw, 16px); /* Add gap between battlefield and hand */
  min-width: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  position: relative;
  overflow-x: hidden;
  overflow-y: visible; /* Allow cards to overflow upward */
}

.battlefield-layout {
  display: grid;
  grid-template-rows: auto minmax(0, 2.33fr) minmax(0, 1fr); /* opponent strip / field / hand ratio */
  gap: clamp(6px, 1vw, 12px); /* Tighter gap for better packing */
  flex: 1; /* Take available space and shrink as needed */
  min-height: 0; /* Allow to shrink completely if needed */
  min-width: 0;
  width: 100%;
  overflow: visible; /* No scrolling, let it pack tightly */
}

.battlefield-region {
  min-height: 0;
  min-width: 0;
  position: relative;
  overflow: visible; /* Allow cards to overflow */
  display: flex;
  flex-direction: column;
  flex: 1;
}

.battle-effects {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.battlefield {
  display: flex;
  flex-direction: column;
  gap: var(--field-gap);
  flex: 1;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  justify-content: space-between;
  width: 100%;
  max-width: 100%;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--field-gap);
  width: 100%;
  min-height: 0; /* Allow flexbox to manage height */
  flex: 1; /* Take equal space in parent grid */
}

.field-slot {
  background: var(--bg-field);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--card-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: var(--font-sm);
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 4px;
  box-sizing: border-box;
  /* Enable container queries for card-intrinsic sizing */
  container-type: size;
  container-name: field-slot;
}

/* Cards in field slots maintain standard playing card dimensions */
.field-slot .card {
  width: auto;
  height: 100%;
  max-height: 100%;
  aspect-ratio: 5 / 7; /* Standard playing card ratio */
  margin: 0;
  box-sizing: border-box;
}

.field-slot .card .card-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.field-slot .card .card-name {
  font-size: var(--font-xs);
}

.field-slot .card .card-image-container {
  /* Inherit proportions from base card styles */
}

.field-slot .card .card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.field-slot .card .card-stats-row {
  padding: 0 2px;
}

.field-slot .card .card-stat {
  font-size: var(--font-xs);
  padding: 0 2px;
}

.field-slot .card .card-keywords {
  font-size: var(--font-xs);
}

.field-slot .card .card-effect {
  font-size: var(--font-xs);
}

/* Container query sizing for field cards - scales with slot width */
@container field-slot (min-width: 60px) {
  .card .card-name {
    /* Scale font with container width, clamped for readability */
    font-size: clamp(6px, 10cqi, 12px);
  }
  .card .card-stat {
    font-size: clamp(5px, 9cqi, 11px);
  }
  .card .card-keywords {
    font-size: clamp(5px, 8cqi, 10px);
  }
  .card .card-effect {
    font-size: clamp(5px, 8cqi, 10px);
  }
}

@container field-slot (min-width: 100px) {
  .card .card-name {
    font-size: clamp(8px, 11cqi, 14px);
  }
  .card .card-stat {
    font-size: clamp(7px, 10cqi, 12px);
  }
}

/* Fallback for browsers without container query support (~8%) */
@supports not (container-type: size) {
  .field-slot .card .card-name {
    font-size: var(--font-xs);
  }
  .field-slot .card .card-stat {
    font-size: var(--font-xs);
  }
}

.field-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  min-width: 0;
}

.divider-line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.6;
}

.divider-orb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-light), var(--gold-dark));
  box-shadow: 0 0 12px rgba(212, 168, 83, 0.6);
}

.field-divider-text {
  font-size: var(--font-xs);
  letter-spacing: 0.01em;
  color: var(--text-secondary);
  text-align: center;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.mobile-nav-left,
.mobile-nav-right {
  display: none;
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-gold);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--gold-light);
  cursor: pointer;
  transition: all var(--transition-fast);
  z-index: 10;
}

.mobile-nav-left {
  left: 8px;
}

.mobile-nav-right {
  right: 8px;
}

.mobile-nav-left:hover,
.mobile-nav-right:hover {
  background: rgba(212, 168, 83, 0.3);
  transform: scale(1.1);
}

.mobile-nav-left:active,
.mobile-nav-right:active {
  transform: scale(0.95);
}

/* Field Controls (turn button + surrender) in field divider */
.field-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.field-turn-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--border-gold);
  background: rgba(212, 168, 83, 0.1);
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: var(--font-base);
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all var(--transition-fast);
  animation: glow 2.5s ease-in-out infinite;
}

.field-turn-btn:hover:not(:disabled) {
  background: rgba(212, 168, 83, 0.2);
  box-shadow: 0 4px 12px rgba(212, 168, 83, 0.25);
}

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

.field-turn-btn.skip-combat-confirm {
  border-color: #e74c3c;
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.1);
  animation: none;
}

.field-turn-btn.skip-combat-confirm:hover:not(:disabled) {
  background: rgba(231, 76, 60, 0.2);
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.25);
}

/* Turn end flip animation */
.field-turn-btn.turn-flip {
  animation: turn-flip 1.5s cubic-bezier(0.1, 0.7, 0.2, 1);
  pointer-events: none;
}

@keyframes turn-flip {
  0% {
    transform: perspective(400px) rotateX(0deg);
  }
  100% {
    transform: perspective(400px) rotateX(2880deg);
  }
}

.field-turn-number {
  font-weight: 600;
}

.field-phase-label {
  opacity: 0.8;
}

/* AI Thinking Indicator */
.field-phase-label.ai-thinking {
  color: var(--accent-gold, #d4a853);
  animation: ai-thinking-glow 1.5s ease-in-out infinite;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(212, 168, 83, 0.5);
}

@keyframes ai-thinking-glow {
  0%,
  100% {
    opacity: 0.8;
    text-shadow: 0 0 8px rgba(212, 168, 83, 0.3);
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 16px rgba(212, 168, 83, 0.7);
  }
}

.field-surrender-btn {
  background: transparent;
  border: none;
  padding: 6px;
  font-size: var(--font-lg);
  cursor: pointer;
  opacity: 0.7;
  transition: all 0.15s;
}

.field-surrender-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}

.field-resync-btn {
  background: transparent;
  border: none;
  padding: 6px;
  font-size: var(--font-lg);
  cursor: pointer;
  opacity: 0.7;
  transition: all 0.15s;
  display: none;
}

.field-resync-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}

.field-resync-btn.online {
  display: inline-block;
}

.field-resync-btn.resync-success {
  opacity: 1;
  color: #4ade80;
  text-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
  animation: resync-flash 1.5s ease-out forwards;
}

@keyframes resync-flash {
  0% {
    transform: scale(1.2);
  }
  30% {
    transform: scale(1);
  }
  100% {
    opacity: 0.7;
    color: inherit;
    text-shadow: none;
  }
}

/* History button - hidden on desktop, shown on mobile */
.field-history-btn {
  display: none;
  background: transparent;
  border: none;
  padding: 6px;
  font-size: var(--font-lg);
  cursor: pointer;
  opacity: 0.7;
  transition: all 0.15s;
}

.field-history-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}

@media (max-width: 767px) {
  .field-history-btn {
    display: inline-block;
  }
}

.info-toggle {
  position: absolute;
  right: 0;
  font-size: var(--font-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.info-toggle:hover {
  color: var(--gold-light);
  border-color: var(--border-gold);
}

.info-toggle--back {
  position: static;
  padding: 4px 10px;
  font-size: var(--font-sm);
}

.hand-panel {
  display: flex;
  align-items: stretch;
  padding: 0.5vh 16px 1vh;
  background: linear-gradient(180deg, rgba(10, 14, 20, 0.4), rgba(10, 14, 20, 0.95));
  border-top: 1px solid var(--border-subtle);
  box-shadow: 0 -12px 24px rgba(0, 0, 0, 0.4);
  border-radius: 16px 16px 0 0;
  overflow: visible;
  width: 100%;
  box-sizing: border-box;

  /* VIEWPORT-RELATIVE: always 28% of screen height */
  height: 28vh;
  min-height: 28vh;
  flex-shrink: 0;
}

.hand-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: visible;
}

.hand-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 8px;
  flex-shrink: 0;
  height: 2.5vh;
}

.hand-title {
  font-family: var(--font-display);
  font-size: 2vh;
  letter-spacing: 0.05em;
}

.hand-hint {
  font-size: 1.5vh;
  color: var(--text-muted);
}

.hand-grid {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0;
  overflow: visible;
  flex: 1;
  position: relative;
  z-index: 1;
}

.hand-grid .card {
  /* VIEWPORT-RELATIVE: card height is ~22% of viewport, width from aspect ratio */
  height: 22vh;
  width: auto;
  aspect-ratio: 5 / 7;
  flex: 0 0 auto;
  margin-left: calc(var(--hand-overlap, 0px) * -1);
  transform-origin: bottom center;
  /* Cards rest mostly visible with small offset */
  transform: translateY(calc(10% + var(--card-offset-y, 0px))) rotate(var(--card-rotation, 0deg));
  /* Snappy bounce transition */
  transition:
    transform 0.18s cubic-bezier(0.34, 1.3, 0.64, 1),
    box-shadow 0.15s ease-out,
    z-index 0s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  position: relative;
  z-index: calc(10 + var(--card-index, 0));
}

.hand-grid .card:first-child {
  margin-left: 0;
}

.hand-grid .card.hand-focus {
  z-index: 2000;
  /* Lift and enlarge card 1.5x */
  transform: translateY(-60%) scale(1.5) rotate(0deg);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
}

/* Subtler focus on mobile to avoid overflow/clipping */
@media (max-width: 768px) {
  .hand-grid .card.hand-focus {
    z-index: 2000;
    transform: translateY(-25%) scale(1.15) rotate(0deg);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
  }
}

.hand-grid .card .card-name {
  font-size: 1.4vh;
}

.hand-grid .card .card-header {
  padding: 0.5vh 0.6vh;
}

.hand-grid .card .card-footer {
  padding: 0.5vh 0.6vh;
  gap: 0.4vh;
}

.hand-grid .card .card-stat-box {
  padding: 0.3vh 0.5vh;
  gap: 0.3vh;
}

.hand-grid .card .card-stat-box .stat-emoji {
  font-size: 1.3vh;
}

.hand-grid .card .card-stat-box .stat-value {
  font-size: 1.4vh;
}

.hand-grid .card .card-text-area {
  font-size: 1.2vh;
}

.hand-grid .card .card-actions {
  gap: 0.4vh;
}

.hand-grid .card .card-actions button {
  font-size: 1.1vh;
  padding: 0.4vh 0.6vh;
}

/* ============================================================================
   SCOREBOARD ROW (replaces opponent hand strip)
   Shows both players' info with opponent hand cards centered
   ============================================================================ */

.scoreboard-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  min-height: 60px;
  max-height: 60px;
  padding: 6px 14px;
  background: linear-gradient(180deg, rgba(10, 14, 20, 0.6), rgba(10, 14, 20, 0.3));
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0 0 8px 8px;
  overflow: visible;
  flex-shrink: 0;
}

.scoreboard-left,
.scoreboard-right {
  flex: 0 0 auto;
  min-width: 160px;
}

.scoreboard-center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
}

.scoreboard-player {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.2s ease;
}

.scoreboard-left .scoreboard-player {
  flex-direction: row;
}

.scoreboard-right .scoreboard-player {
  flex-direction: row-reverse;
  margin-left: auto;
}

.scoreboard-player .player-name {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  font-size: var(--font-lg);
  white-space: nowrap;
}

.scoreboard-stats {
  display: flex;
  gap: 8px;
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.scoreboard-right .scoreboard-stats {
  flex-direction: row-reverse;
}

.scoreboard-player .emote-toggle {
  padding: 4px 8px;
  font-size: var(--font-base);
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.scoreboard-player .emote-toggle:hover {
  opacity: 1;
}

/* Active player breathing animation on name text */
@keyframes name-breathe {
  0%,
  100% {
    color: #ffffff;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
  }
  50% {
    color: #f0d078;
    text-shadow: 0 0 12px rgba(240, 208, 120, 0.7);
  }
}

.scoreboard-player.is-active .player-name {
  animation: name-breathe 2.6s ease-in-out infinite;
}

/* Preserve gradient names during animation */
.scoreboard-player.is-active .player-name.name-gradient {
  animation: name-breathe-gradient 2.6s ease-in-out infinite;
}

@keyframes name-breathe-gradient {
  0%,
  100% {
    filter: brightness(1) drop-shadow(0 0 4px rgba(255, 255, 255, 0.3));
  }
  50% {
    filter: brightness(1.3) drop-shadow(0 0 12px rgba(240, 208, 120, 0.7));
  }
}

/* Scoreboard row as attack drop zone */
.scoreboard-row.valid-drop-zone {
  background: linear-gradient(180deg, rgba(231, 76, 60, 0.3) 0%, rgba(231, 76, 60, 0.1) 100%);
  border-bottom-color: #e74c3c;
  animation: scoreboard-attack-pulse 1s ease-in-out infinite;
}

.scoreboard-row.invalid-target {
  opacity: 0.5;
}

@keyframes scoreboard-attack-pulse {
  0%,
  100% {
    box-shadow: inset 0 0 20px rgba(231, 76, 60, 0.3);
  }
  50% {
    box-shadow: inset 0 0 30px rgba(231, 76, 60, 0.5);
  }
}

/* Legacy opponent-hand-strip kept for compatibility */
.opponent-hand-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  min-height: 50px;
  max-height: 50px;
  padding: 4px 12px;
  background: linear-gradient(180deg, rgba(10, 14, 20, 0.6), rgba(10, 14, 20, 0.3));
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0 0 8px 8px;
  overflow: visible;
  flex-shrink: 0;
}

.opponent-hand-cards {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: 100%;
  overflow: visible;
}

/* Opponent card back styling */
.opponent-hand-cards .card-back {
  width: 30px;
  height: 42px;
  background: linear-gradient(135deg, #1a2332 0%, #0d1117 100%);
  border: 1px solid var(--border-gold);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-base);
  margin-left: -12px;
  transition:
    transform 0.15s ease,
    margin 0.15s ease,
    box-shadow 0.15s ease;
  position: relative;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.opponent-hand-cards .card-back:first-child {
  margin-left: 0;
}

/* Card back inner pattern */
.opponent-hand-cards .card-back::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(212, 168, 83, 0.2);
  border-radius: 2px;
  pointer-events: none;
}

/* Hover state - card raises slightly */
.opponent-hand-cards .card-back.opponent-hovered {
  transform: translateY(-8px) scale(1.1);
  z-index: 10;
  box-shadow: 0 8px 16px rgba(212, 168, 83, 0.3);
  margin-left: 4px;
  margin-right: 4px;
}

.opponent-hand-cards .card-back.opponent-hovered:first-child {
  margin-left: 0;
}

/* Dragging state - card being dragged (hidden from strip) */
.opponent-hand-cards .card-back.opponent-dragging {
  opacity: 0.3;
  transform: scale(0.9);
}

/* ============================================================================
   AI FLYING CARD ANIMATION
   Card that flies from opponent hand to field
   ============================================================================ */

.ai-flying-card {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  width: 60px;
  height: 84px;
}

.ai-flying-card-back {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: 2px solid #d4a853;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-xl);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(212, 168, 83, 0.3);
  backface-visibility: hidden;
}

/* Card flip reveal animation */
.ai-flying-card.revealing {
  animation: ai-card-reveal 0.2s ease-out forwards;
}

@keyframes ai-card-reveal {
  0% {
    transform: translate(-50%, -50%) scale(1.05) rotateY(0deg);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1) rotateY(90deg);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotateY(180deg);
    opacity: 0;
  }
}

/* ============================================================================
   AI COMBAT VISUAL HIGHLIGHTS
   Selection and targeting glows during AI attacks
   ============================================================================ */

/* Attacker selection - orange pulsing glow */
.ai-attacker-selected {
  animation: ai-attacker-pulse 0.8s ease-in-out infinite !important;
  box-shadow:
    0 0 15px rgba(255, 165, 0, 0.7),
    0 0 30px rgba(255, 165, 0, 0.4),
    inset 0 0 10px rgba(255, 165, 0, 0.2) !important;
  z-index: 100;
}

@keyframes ai-attacker-pulse {
  0%,
  100% {
    box-shadow:
      0 0 15px rgba(255, 165, 0, 0.6),
      0 0 25px rgba(255, 165, 0, 0.3);
  }
  50% {
    box-shadow:
      0 0 25px rgba(255, 165, 0, 0.9),
      0 0 40px rgba(255, 165, 0, 0.5);
  }
}

/* Target consideration - red/orange glow */
.ai-target-considering {
  animation: ai-target-pulse 0.6s ease-in-out infinite !important;
  box-shadow:
    0 0 15px rgba(255, 69, 0, 0.7),
    0 0 30px rgba(255, 69, 0, 0.4),
    inset 0 0 10px rgba(255, 69, 0, 0.2) !important;
  z-index: 99;
}

@keyframes ai-target-pulse {
  0%,
  100% {
    box-shadow:
      0 0 12px rgba(255, 69, 0, 0.6),
      0 0 20px rgba(255, 69, 0, 0.3);
  }
  50% {
    box-shadow:
      0 0 20px rgba(255, 69, 0, 0.9),
      0 0 35px rgba(255, 69, 0, 0.5);
  }
}

/* Player field as target (for direct attacks) */
#player-field.ai-target-considering {
  position: relative;
}

#player-field.ai-target-considering::after {
  content: '';
  position: absolute;
  inset: -5px;
  border: 3px solid rgba(255, 69, 0, 0.6);
  border-radius: 8px;
  animation: ai-target-pulse 0.6s ease-in-out infinite;
  pointer-events: none;
}

/* ============================================================================
   AI HAND CARD SELECTION (Player 0 in AI vs AI mode)
   Visual feedback when AI player 0 selects cards from the bottom hand
   ============================================================================ */

/* AI selecting a card - raise and highlight */
.card.ai-selecting {
  transform: translateY(-20px) scale(1.05) !important;
  box-shadow:
    0 0 20px rgba(100, 200, 255, 0.7),
    0 0 40px rgba(100, 200, 255, 0.4) !important;
  z-index: 1000 !important;
  transition:
    transform 0.2s ease-out,
    box-shadow 0.2s ease-out !important;
}

/* AI dragging a card - faded to show it's being moved */
.card.ai-dragging {
  opacity: 0.3 !important;
  transform: scale(0.95) !important;
  transition:
    opacity 0.15s ease-out,
    transform 0.15s ease-out !important;
}

/* ============================================================================
   AI ATTACK ARROW
   Animated arcing arrow showing attack path from attacker to target
   ============================================================================ */

/* Arrow container - hidden by default, animates in */
.ai-attack-arrow {
  opacity: 0;
  transition: opacity 0.15s ease-out;
}

.ai-attack-arrow.visible {
  opacity: 1;
}

.ai-attack-arrow.fading {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

/* Arrow path - glowing orange stroke with dash animation */
.ai-arrow-path {
  fill: none;
  stroke: rgba(255, 165, 0, 0.9);
  stroke-width: 4;
  stroke-linecap: round;
  filter: url(#arrow-glow);
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation:
    arrow-draw 0.4s ease-out forwards,
    arrow-pulse 1s ease-in-out 0.4s infinite;
}

/* Arrowhead - matching orange with glow */
.ai-arrow-head {
  fill: rgba(255, 165, 0, 0.95);
  filter: url(#arrow-glow);
  opacity: 0;
  animation:
    arrowhead-appear 0.2s ease-out 0.35s forwards,
    arrow-pulse 1s ease-in-out 0.4s infinite;
}

/* Draw animation - line appears progressively */
@keyframes arrow-draw {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* Arrowhead fade in */
@keyframes arrowhead-appear {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Pulsing glow effect */
@keyframes arrow-pulse {
  0%,
  100% {
    stroke: rgba(255, 165, 0, 0.8);
    filter: url(#arrow-glow) drop-shadow(0 0 6px rgba(255, 165, 0, 0.5));
  }
  50% {
    stroke: rgba(255, 200, 50, 1);
    filter: url(#arrow-glow) drop-shadow(0 0 12px rgba(255, 165, 0, 0.8));
  }
}

/* ============================================================================
   OPPONENT CURSOR (Spirit Ball)
   Glowing orb that follows opponent's cursor position
   ============================================================================ */

.opponent-cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease;
  transform: translate(-50%, -50%);
}

.opponent-cursor.active {
  opacity: 1;
}

.cursor-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(212, 168, 83, 0.9) 0%,
    rgba(212, 168, 83, 0.4) 40%,
    transparent 70%
  );
  animation: cursor-pulse 1.5s ease-in-out infinite;
  box-shadow:
    0 0 10px rgba(212, 168, 83, 0.6),
    0 0 20px rgba(212, 168, 83, 0.4),
    0 0 30px rgba(212, 168, 83, 0.2);
}

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

.cursor-trail {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow:
    0 0 6px var(--gold),
    0 0 12px rgba(212, 168, 83, 0.5);
}

/* ============================================================================
   OPPONENT DRAG PREVIEW
   Floating face-down card that follows drag position
   ============================================================================ */

.opponent-drag-preview {
  position: fixed;
  width: 80px;
  height: 112px;
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-5deg);
  transition: opacity 0.15s ease;
}

.opponent-drag-preview.active {
  opacity: 1;
}

.opponent-drag-preview .card-back {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a2332 0%, #0d1117 100%);
  border: 2px solid var(--border-gold);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-xl);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(212, 168, 83, 0.3);
  position: relative;
}

.opponent-drag-preview .card-back::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(212, 168, 83, 0.3);
  border-radius: 4px;
  pointer-events: none;
}

/* ============================================================================
   CARD FLIP ANIMATION
   3D flip effect when opponent plays a card
   ============================================================================ */

.card-flip-container {
  position: fixed;
  perspective: 1000px;
  pointer-events: none;
  z-index: 9997;
}

.card-flip {
  width: 100px;
  height: 140px;
  position: relative;
  transform-style: preserve-3d;
  animation: card-flip-animation 0.2s ease-out forwards;
}

@keyframes card-flip-animation {
  0% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

.card-flip .card-flip-front,
.card-flip .card-flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 6px;
}

.card-flip .card-flip-front {
  background: var(--bg-card);
}

.card-flip .card-flip-back {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, #1a2332 0%, #0d1117 100%);
  border: 2px solid var(--border-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-2xl);
}

.game-log-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: clamp(8px, 1.2vw, 12px);
  padding: clamp(8px, 1.2vw, 14px);
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto; /* Allow scrolling if log content is too tall */
  -webkit-overflow-scrolling: touch; /* Smooth momentum scrolling on iOS Safari */
  touch-action: pan-y; /* Allow vertical scroll, prevent horizontal swipe interference */
  min-height: var(--min-log-height); /* Ensure minimum visibility */
  max-height: 100%; /* Don't exceed parent */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.card-inspector-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: clamp(8px, 1.2vw, 12px);
  padding: clamp(8px, 1.2vw, 14px);
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1vw, 10px);
  flex: 1; /* Allow to grow but can shrink */
  min-height: var(--min-inspector-height); /* Ensure minimum visibility */
  max-height: 100%; /* Don't exceed parent */
  overflow-x: hidden;
  overflow-y: auto; /* Allow scrolling if content is too tall */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.inspector-header,
.log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.inspector-header h3,
.log-header h3 {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  color: var(--gold-light);
  font-size: var(--font-2xl);
  margin: 0;
}

/* Hide mobile close button on desktop */
.mobile-panel-close {
  display: none;
}

.inspector-content {
  flex: 1;
  overflow-y: auto; /* Allow scrolling if content is too tall */
  padding-right: 6px;
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.inspector-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  font-style: italic;
  font-size: var(--font-sm);
}

.inspector-card-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  min-height: 0;
}

.inspector-card-image {
  flex: 0 0 auto;
  width: 100%;
  margin: 0;
}

.inspector-image-container {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: rgba(255, 255, 255, 0.03);
  border: 2px dashed var(--border-subtle);
  border-radius: var(--card-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.inspector-card-image-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--card-radius) - 2px);
}

.inspector-image-placeholder {
  font-size: var(--font-3xl);
  opacity: 0.7;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.inspector-card-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding-right: 6px;
}

.inspector-card-content h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-lg);
  color: var(--text-primary);
  letter-spacing: 0.04em;
}

/* Inspector card name rarity styling */
.inspector-card-content h4.rarity-common {
  color: #4ade80;
  text-shadow: 0 0 6px rgba(74, 222, 128, 0.4);
}

.inspector-card-content h4.rarity-uncommon {
  color: #60a5fa;
  text-shadow: 0 0 8px rgba(96, 165, 250, 0.5);
}

.inspector-card-content h4.rarity-rare {
  color: #c084fc;
  text-shadow: 0 0 10px rgba(192, 132, 252, 0.6);
}

.inspector-card-content h4.rarity-legendary {
  color: #fb923c;
  text-shadow:
    0 0 10px rgba(251, 146, 60, 0.7),
    0 0 20px rgba(251, 146, 60, 0.5);
  animation: legendary-glow 2s ease-in-out infinite;
}

.inspector-card-content h4.rarity-pristine {
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #ffd4e5 15%,
    #d4f1ff 30%,
    #e8d4ff 45%,
    #ffffff 60%,
    #d4ffe8 75%,
    #fff4d4 90%,
    #ffffff 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: pristine-shimmer 3s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.7));
}

.inspector-card-content .meta {
  font-size: var(--font-base);
  color: var(--text-secondary);
  line-height: 1.5;
}

.inspector-card-content .effect {
  font-size: var(--font-base);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 4px;
}

.inspector-card-content .keyword-glossary {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
}

.inspector-card-content .keyword-glossary strong {
  font-size: var(--font-base);
  color: var(--text-primary);
  display: block;
  margin-bottom: 6px;
}

.inspector-card-content .keyword-glossary ul {
  margin: 0;
  padding-left: 16px;
  list-style: none;
}

.inspector-card-content .keyword-glossary li {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin-bottom: 4px;
  line-height: 1.4;
}

.inspector-card-content .keyword-glossary li strong {
  color: var(--text-primary);
}

/* Deck construction mode - full width for content */
.inspector-deck-mode {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding-right: 6px;
}

.inspector-deck-mode h4 {
  margin-top: 0;
  font-size: var(--font-lg);
}

.inspector-deck-mode .meta {
  font-size: var(--font-base);
  line-height: 1.5;
  margin-bottom: 8px;
}

.inspector-deck-mode .effect {
  font-size: var(--font-base);
  line-height: 1.5;
  margin: 12px 0;
}

.inspector-deck-mode .keyword-glossary {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

.inspector-deck-mode .keyword-glossary strong {
  font-size: var(--font-base);
  margin-bottom: 8px;
}

.inspector-deck-mode .keyword-glossary li {
  font-size: var(--font-sm);
  line-height: 1.4;
  margin-bottom: 6px;
}

/* Responsive inspector for mobile */
@media (max-width: 768px) {
  .inspector-card-layout {
    flex-direction: column;
    gap: 12px;
  }

  .inspector-card-image {
    width: 100%;
    max-width: 180px;
    margin: 0 auto;
  }

  .inspector-image-container {
    max-height: 200px;
  }
}

.log-content {
  flex: 1;
  overflow-y: auto;
  padding-right: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  margin-top: 10px;
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.log-entry {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  padding: 4px 6px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  border-left: 2px solid var(--border-gold);
}

.log-turn {
  font-weight: 600;
  color: var(--gold-light);
}

.log-action {
  margin-left: 8px;
}

.log-card-link {
  text-decoration: underline;
  text-decoration-color: var(--border-gold);
  text-underline-offset: 2px;
  cursor: pointer;
  color: var(--text-primary);
  transition:
    color 0.15s ease,
    text-decoration-color 0.15s ease;
}

.log-card-link:hover {
  color: var(--border-gold);
  text-decoration-color: currentColor;
}

.piles-section {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: clamp(8px, 1.2vw, 12px);
  padding: clamp(8px, 1.2vw, 14px);
  margin-top: clamp(8px, 1.2vw, 14px);
  flex-shrink: 0; /* Don't allow shrinking */
  min-height: var(--min-piles-height); /* Ensure piles remain visible */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.piles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(4px, 0.8vw, 8px);
  width: 100%;
}

.pile-item {
  background: rgba(255, 255, 255, 0.02);
  border-radius: clamp(6px, 1vw, 8px);
  padding: clamp(6px, 1vw, 10px);
  text-align: center;
  font-size: var(--font-xs);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s ease;
}

.pile-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.pile-item > span {
  display: block;
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.pile-item strong {
  display: inline;
  font-size: var(--font-lg);
  color: var(--text-primary);
  font-weight: 600;
  white-space: nowrap;
}

/* ============================================
   ADVANTAGE TRACKER
   ============================================ */

.advantage-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(8px, 1vw, 12px);
  margin-bottom: clamp(8px, 1vw, 12px);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
}

.advantage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 4px;
}

.advantage-header span {
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.graph-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: var(--font-sm);
  opacity: 0.6;
  transition: opacity 0.2s;
  padding: 2px 4px;
}

.graph-toggle:hover {
  opacity: 1;
}

.graph-toggle.active {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.advantage-value {
  font-size: var(--font-2xl);
  font-weight: 700;
  font-family: var(--font-display);
  transition: color 0.3s ease;
}

.advantage-description {
  font-size: var(--font-xs);
  color: var(--text-secondary);
  margin-top: 2px;
}

.advantage-graph-container {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  padding: 8px;
  margin-bottom: clamp(8px, 1vw, 12px);
}

.advantage-graph-container canvas {
  width: 100%;
  height: 80px;
  display: block;
  cursor: default;
}

/* ============================================
   HOLOGRAM DISPLAY (Advantage Graph Hover)
   ============================================ */

.hologram-active {
  position: relative;
}

.hologram-active .field-slot {
  position: relative;
}

.hologram-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 180, 255, 0.15);
  border: 2px solid rgba(0, 200, 255, 0.6);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  pointer-events: none;
  backdrop-filter: blur(2px);
  animation: hologram-flicker 2s ease-in-out infinite;
}

@keyframes hologram-flicker {
  0%,
  100% {
    opacity: 0.9;
  }
  50% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0.85;
  }
}

.hologram-creature {
  text-align: center;
  color: #00e5ff;
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.8);
}

.hologram-name {
  font-size: var(--font-sm);
  font-weight: 600;
  margin-bottom: 4px;
}

.hologram-stats {
  font-size: var(--font-sm);
  font-family: var(--font-display);
}

.hologram-atk {
  color: #ff6b6b;
  text-shadow: 0 0 6px rgba(255, 107, 107, 0.6);
}

.hologram-atk.buffed {
  color: #4ade80;
  text-shadow: 0 0 6px rgba(74, 222, 128, 0.8);
}

.hologram-atk.debuffed {
  color: #f87171;
  text-shadow: 0 0 6px rgba(248, 113, 113, 0.8);
}

.hologram-hp-stat {
  color: #4ade80;
  text-shadow: 0 0 6px rgba(74, 222, 128, 0.6);
}

.hologram-hp-stat.damaged {
  color: #fbbf24;
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.8);
}

.hologram-hp-stat.buffed {
  color: #22d3ee;
  text-shadow: 0 0 6px rgba(34, 211, 238, 0.8);
}

.hologram-empty {
  color: rgba(0, 200, 255, 0.5);
  font-size: var(--font-xs);
  font-style: italic;
}

.hologram-creature.will-die {
  color: #ff6b6b;
  text-shadow: 0 0 8px rgba(255, 100, 100, 0.8);
}

.hologram-creature.will-die .hologram-name {
  text-decoration: line-through;
  text-decoration-color: rgba(255, 100, 100, 0.6);
}

.hologram-death-marker {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: var(--font-lg);
  z-index: 101;
  animation: death-pulse 1s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(255, 0, 0, 0.8));
}

@keyframes death-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.8;
  }
}

.hologram-hp {
  font-size: var(--font-xs);
  color: #00e5ff;
  text-shadow: 0 0 6px rgba(0, 229, 255, 0.6);
  margin-top: 4px;
  animation: hologram-flicker 2s ease-in-out infinite;
}

.info-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.info-header h3 {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  color: var(--gold-light);
}

.info-section {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.info-section h3 {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  color: var(--gold-light);
}

.inspector-content {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  max-height: 900px;
  overflow-y: auto; /* Allow scrolling if content is too tall */
}

.log-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 6px;
}

.piles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.pile-item {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  font-size: var(--font-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s ease;
}

.pile-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.pile-item strong {
  display: inline;
  font-size: var(--font-base);
  color: var(--text-primary);
  margin-top: 4px;
  white-space: nowrap;
}

.action-bar {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1vw, 12px);
  padding: clamp(4px, 0.8vw, 8px) clamp(10px, 1.5vw, 20px) clamp(6px, 1vw, 12px);
  height: 0;
  pointer-events: none;
  border-top: none;
  background: transparent;
  width: clamp(320px, 42vw, 680px);
  max-width: 100%;
  position: fixed;
  bottom: calc(0px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  right: auto;
  overflow: hidden;
  box-sizing: border-box;
  transform-origin: bottom center;
  z-index: 12;
}

.action-bar.has-selection,
.action-bar.has-actions {
  padding: clamp(6px, 1vw, 12px) clamp(10px, 1.5vw, 20px) clamp(8px, 1.2vw, 16px);
  height: auto;
  max-height: 50vh;
  pointer-events: auto;
  background: rgba(10, 14, 20, 0.96);
  border-top: 1px solid var(--border-subtle);
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Widen action bar for card selection grids */
.action-bar.has-selection:has(.selection-card) {
  width: clamp(360px, 85vw, 720px);
  max-width: 90vw;
}

/* Selection blocked animation - shown when trying to advance phase with pending selection */
.action-bar.selection-blocked {
  animation: selection-blocked-shake 0.5s ease-in-out;
}

.action-bar.selection-blocked #selection-panel {
  animation: selection-blocked-glow 0.5s ease-in-out;
}

@keyframes selection-blocked-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-4px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(4px);
  }
}

@keyframes selection-blocked-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
    border-color: var(--border-subtle);
  }
  50% {
    box-shadow: 0 0 20px 4px rgba(220, 38, 38, 0.6);
    border-color: #dc2626;
  }
  100% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
    border-color: var(--border-subtle);
  }
}

/* Ensure selection panel has border for glow effect */
#selection-panel:not(:empty) {
  border: 2px solid var(--border-subtle);
  border-radius: 8px;
  padding: 8px 12px;
  transition:
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.action-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 14px);
  width: 100%;
  max-width: min(400px, 90%);
  margin: 0 auto;
}

.action-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: clamp(8px, 1.2vw, 14px);
  padding: clamp(8px, 1.2vw, 14px) clamp(10px, 1.5vw, 18px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1vw, 10px);
  font-weight: 600;
  font-size: var(--font-sm);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
  width: 100%;
  min-height: clamp(32px, 5vh, 44px);
}

.action-btn.primary {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: #2e2211;
  border: none;
}

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

.action-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.selection-panel,
.action-panel {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1vw, 10px);
  font-size: var(--font-base);
  width: 100%;
  max-width: 100%;
}

.action-panel {
  align-items: center;
}

.action-panel .action-buttons {
  width: min(260px, 100%);
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  max-width: min(300px, 90%);
}

.action-panel .action-btn {
  padding: clamp(4px, 0.8vw, 8px) clamp(10px, 1.5vw, 16px);
  min-height: clamp(28px, 4vh, 36px);
  width: 100%;
  max-width: 100%;
}

.selection-panel {
  font-size: var(--font-base);
  width: 100%;
  max-width: 100%;
}

/* Selection panel header with title and hide button */
.selection-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.selection-header strong {
  flex: 1;
}

.hide-panel-btn {
  padding: 4px 8px;
  font-size: var(--font-sm);
  background: var(--bg-card-hover);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.hide-panel-btn:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}

/* Selection panel content wrapper */
.selection-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Minimized state - hide content, show only header */
#selection-panel.minimized .selection-content {
  display: none;
}

#selection-panel.minimized {
  padding: 4px 8px;
}

@keyframes active-breathe {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(240, 208, 120, 0.15);
  }
  50% {
    box-shadow: 0 0 18px rgba(240, 208, 120, 0.45);
  }
}

.selection-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.selection-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  padding: 6px 8px;
  border-radius: 8px;
}

.selection-item.selection-card {
  flex-direction: column;
  align-items: center;
}

.selection-item.selection-card .card {
  width: clamp(140px, 35vw, 200px);
  max-width: 200px;
}

.selection-item button {
  background: var(--bg-card-hover);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: var(--font-sm);
}

/* Recently drawn card indicator for discard selection */
.selection-item.recently-drawn {
  position: relative;
}

.selection-item.recently-drawn::before {
  content: 'New!';
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--prey);
  color: var(--bg-main);
  font-size: var(--font-xs);
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 4px;
  z-index: 10;
  letter-spacing: 0.5px;
}

/* Option bubble styles for discrete effect choices */
.selection-item.option-bubble {
  flex-direction: column;
  align-items: stretch;
  padding: 0;
}

.option-bubble-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-card-hover) 100%);
  border: 2px solid var(--border-gold);
  border-radius: 12px;
  padding: 12px 16px;
  min-width: 140px;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.option-bubble-btn:hover {
  background: linear-gradient(135deg, var(--bg-card-hover) 0%, rgba(212, 168, 83, 0.15) 100%);
  border-color: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(212, 168, 83, 0.25);
}

.option-bubble-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.option-bubble-btn .option-label {
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--gold-light);
  text-align: center;
}

.option-bubble-btn .option-description {
  font-size: var(--font-sm);
  color: var(--text-muted);
  text-align: center;
  line-height: 1.3;
}

/* Selection list layout for option bubbles */
.selection-list:has(.option-bubble) {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* Selection list grid layout for card selections */
.selection-list:has(.selection-card) {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 12px;
  max-width: 100%;
  justify-items: center;
}

/* Tablet: 2-3 columns */
@media (min-width: 540px) {
  .selection-list:has(.selection-card) {
    grid-template-columns: repeat(auto-fit, minmax(150px, 200px));
    justify-content: center;
  }
}

/* Desktop: 3 columns */
@media (min-width: 768px) {
  .selection-list:has(.selection-card) {
    grid-template-columns: repeat(3, minmax(160px, 200px));
    justify-content: center;
  }
}

/* Smaller cards in grid for better fit */
.selection-list:has(.selection-card) .selection-item.selection-card {
  width: 100%;
  max-width: 180px;
  padding: 8px;
}

.selection-list:has(.selection-card) .selection-item.selection-card .card {
  width: 100%;
  max-width: 160px;
}

.selection-list:has(.selection-card) .selection-item.selection-card button {
  width: 100%;
  margin-top: 6px;
  padding: 8px 12px;
}

/* Mobile: ensure cards don't get too small */
@media (max-width: 480px) {
  .selection-list:has(.selection-card) {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    gap: 8px;
  }

  .selection-list:has(.selection-card) .selection-item.selection-card {
    max-width: 160px;
    padding: 6px;
  }

  .selection-list:has(.selection-card) .selection-item.selection-card .card {
    max-width: 140px;
  }
}

/* Very small screens: single column */
@media (max-width: 320px) {
  .selection-list:has(.selection-card) {
    grid-template-columns: 1fr;
  }
}

/* Selection panel layout for card grids */
.selection-panel:has(.selection-card) {
  align-items: center;
}

/* Title above card selection grid */
.selection-panel:has(.selection-card) > strong {
  text-align: center;
  font-size: var(--font-base);
  margin-bottom: 8px;
  color: var(--gold-light);
}

/* Cancel/Confirm button below card selection grid */
.selection-panel:has(.selection-card) > button {
  margin-top: 12px;
  width: 100%;
  max-width: 200px;
  align-self: center;
  padding: 10px 20px;
}

.secondary {
  background: var(--bg-card-hover);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: var(--font-sm);
}

.page-nav {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 80px;
  border: 1px solid var(--border-gold);
  border-radius: 16px;
  background: rgba(10, 14, 20, 0.7);
  color: var(--gold-light);
  z-index: 6;
  transition:
    background var(--transition-fast),
    transform var(--transition-fast);
}

.page-nav svg {
  width: 26px;
  height: 26px;
}

.page-nav:hover {
  background: rgba(212, 168, 83, 0.2);
}

.page-nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.page-nav-left {
  left: 8px;
}

.page-nav-right {
  right: 8px;
}

.page-dots {
  display: none;
  position: absolute;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  gap: 10px;
  z-index: 6;
}

.page-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: transparent;
  transition:
    transform var(--transition-fast),
    background var(--transition-fast);
}

.page-dot.active {
  transform: scale(1.2);
  background: var(--gold);
}

.card {
  background: var(--bg-card);
  border-radius: var(--card-radius);
  border: 2px solid #000;
  position: relative;
  overflow: hidden;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
  aspect-ratio: 5 / 7; /* Standard playing card ratio */
  width: 100%;
  container-type: inline-size;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--mana-blue);
}

.card.type-predator::before {
  background: var(--predator);
}

.card.type-prey::before {
  background: var(--prey);
}

.card.type-spell::before {
  background: var(--spell);
}

.card.type-free-spell::before {
  background: var(--freespell);
}

.card.type-trap::before {
  background: var(--trap);
}

.card-inner {
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.card-header {
  padding: 8px 10px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid var(--border-subtle);
}

/* Card name: auto-sized, never collapses below readable height */
.card-name {
  font-weight: 600;
  font-size: var(--font-sm);
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 2cqi 3cqi;
  background: rgba(0, 0, 0, 0.4);
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-type-label {
  display: none; /* Type info removed from card UI - handled by card border color */
}

/* Stats row: ~10% of card height */
.card-stats-row {
  display: flex;
  gap: 0;
  flex-wrap: nowrap;
  align-items: center;
  flex: 0 0 10%;
  width: 100%;
  padding: 0;
  background: rgba(0, 0, 0, 0.3);
}

/* When only 2 stats (no nutrition), split row in half */
.card-stats-row.two-stats {
  justify-content: space-around;
}

.card-stats-row.two-stats .card-stat {
  flex: 1;
  text-align: center;
}

.card-stat {
  font-size: var(--font-sm);
  padding: 2px 8px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1;
  text-align: center;
}

.card-stat.atk {
  color: var(--atk-yellow);
}

.card-stat.hp {
  color: var(--hp-red);
}

.card-stat.nut {
  color: var(--prey);
}

.card-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  font-size: var(--font-base);
  color: var(--text-primary);
  justify-content: center;
  text-align: center;
  align-items: center;
}

.card-keywords span {
  font-weight: bold;
  text-decoration: underline;
  padding: 0 2px;
}

.card-keywords .keyword-status-deadly {
  background: linear-gradient(135deg, #7c2d2d, #991b1b);
  color: #fca5a5;
  padding: 1px 4px;
  border-radius: 3px;
  text-decoration: none;
  font-size: var(--font-xs);
  animation: pulse-deadly 1.5s ease-in-out infinite;
}

@keyframes pulse-deadly {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.card-effect {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  line-height: 1.25;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* HTML text elements - scaled via CSS container query (cqi) units */
.card-name-text {
  font-size: clamp(8px, 7cqi, 20px);
  font-weight: 600;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-effect-text {
  font-size: clamp(7px, 6cqi, 16px);
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.card-stats-text {
  font-size: clamp(7px, 5.5cqi, 16px);
  font-weight: 600;
  text-align: center;
  display: flex;
  width: 100%;
  gap: 0;
}

.card-stats-text > span {
  flex: 1;
  text-align: center;
  font-weight: 800;
}

.stat-atk {
  color: #f97316;
}
.stat-hp {
  color: #ffffff;
}
.stat-hp.hp-buffed {
  color: #22c55e;
}
.stat-hp.hp-damaged {
  color: #ef4444;
}
.stat-nut {
  color: #3dfe1f;
}

.card-keywords-text {
  font-size: clamp(6px, 4.5cqi, 12px);
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1cqi;
}

.keyword-tag-deadly {
  color: #ef4444;
}

/* Image container: ~50% of card height */
.card-image-container {
  flex: 0 0 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  position: relative;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-image-placeholder {
  font-size: var(--font-xl);
  opacity: 0.6;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-footer {
  padding: 8px 10px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card-footer .card-stats-row {
  display: flex;
  gap: 0;
  align-items: stretch;
  width: 100%;
}

.card-stat-box {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 2px 4px;
  min-width: 0;
}

.card-stat-box .stat-emoji {
  font-size: var(--font-base);
  line-height: 1;
}

.card-stat-box .stat-value {
  font-size: var(--font-base);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    -2px 0 0 #000,
    2px 0 0 #000,
    0 -2px 0 #000,
    0 2px 0 #000;
}

.card-text-area {
  font-size: var(--font-sm);
  line-height: 1.3;
  color: var(--text-secondary);
  text-align: center;
  white-space: pre-line;
  word-wrap: break-word;
  overflow-wrap: break-word;
  padding: 2px 6px;
}

.card-text-area strong {
  font-weight: 600;
  color: var(--text-primary);
}

.card-text-area u {
  text-decoration: underline;
  color: var(--text-primary);
}

/* Content area: ~42% of card height (stats + keywords + effect) */
.card-content-area {
  flex: 0 0 42%;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  min-height: 0; /* Allow flex item to shrink below content size */
}

.card-content-area .card-stats-row {
  flex: 0 0 auto; /* Fixed height based on content */
  min-height: 20px;
  max-height: 24px;
}

.card-content-area .card-keywords {
  flex: 0 0 auto; /* Fixed height based on content */
  padding: 2px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  /*min-height: 16px; taking this out so it doesn't unnecessarily take up space*/
}

.card-content-area .card-effect {
  flex: 1 1 auto; /* Effect takes ALL remaining space */
  overflow: hidden;
  padding: 2px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-height: 0; /* Allow flex item to shrink below content size */
}

.card-actions {
  margin-top: auto;
  display: flex;
  gap: 6px;
}

.card-actions button {
  flex: 1;
  padding: 5px 6px;
  border-radius: 6px;
  font-size: var(--font-sm);
  background: var(--bg-card-hover);
  border: 1px solid var(--border-subtle);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

/* Disable CSS hover for hand cards - JS proximity detection handles this via .hand-focus class */
/* Keep base transform to prevent hover-induced movement */
.hand-grid .card:hover:not(.hand-focus) {
  transform: translateY(calc(10% + var(--card-offset-y, 0px))) scale(1)
    rotate(var(--card-rotation, 0deg));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.card.card-selected {
  border: 3px solid var(--gold);
  box-shadow:
    0 0 20px rgba(212, 168, 83, 0.8),
    0 6px 16px rgba(0, 0, 0, 0.35);
}

.card.back {
  display: grid;
  place-items: center;
  font-size: var(--font-sm);
  color: var(--text-muted);
}

.card-status {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: var(--font-sm);
  z-index: 10;
}

/* Status effect overlays */
.status-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

/* ===== PARALYSIS - Electric Jolting Effect ===== */
.paralysis-overlay {
  background: linear-gradient(
    135deg,
    rgba(255, 240, 0, 0.15) 0%,
    rgba(255, 220, 0, 0.1) 50%,
    rgba(255, 200, 0, 0.15) 100%
  );
  box-shadow:
    inset 0 0 30px rgba(255, 230, 0, 0.4),
    inset 0 0 60px rgba(255, 200, 0, 0.2);
}

/* Electric spark base styling */
.electric-spark {
  position: absolute;
  width: 3px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 255, 100, 0.9) 20%,
    rgba(255, 255, 0, 1) 50%,
    rgba(255, 255, 100, 0.9) 80%,
    transparent 100%
  );
  box-shadow:
    0 0 8px rgba(255, 255, 0, 0.8),
    0 0 15px rgba(255, 230, 0, 0.6),
    0 0 25px rgba(255, 200, 0, 0.4);
  border-radius: 2px;
  opacity: 0;
}

.spark-1 {
  height: 60%;
  top: 10%;
  left: 20%;
  transform: rotate(-15deg);
  animation: spark-jolt-1 0.8s ease-in-out infinite;
}

.spark-2 {
  height: 50%;
  top: 25%;
  right: 25%;
  transform: rotate(20deg);
  animation: spark-jolt-2 0.6s ease-in-out infinite 0.2s;
}

.spark-3 {
  height: 45%;
  bottom: 15%;
  left: 35%;
  transform: rotate(-25deg);
  animation: spark-jolt-3 0.7s ease-in-out infinite 0.4s;
}

.spark-4 {
  height: 55%;
  top: 20%;
  right: 15%;
  transform: rotate(10deg);
  animation: spark-jolt-4 0.5s ease-in-out infinite 0.1s;
}

@keyframes spark-jolt-1 {
  0%,
  100% {
    opacity: 0;
    transform: rotate(-15deg) scaleY(0.3);
  }
  10% {
    opacity: 1;
    transform: rotate(-15deg) scaleY(1);
  }
  20% {
    opacity: 0.3;
    transform: rotate(-10deg) scaleY(0.8);
  }
  30% {
    opacity: 1;
    transform: rotate(-20deg) scaleY(1.1);
  }
  40% {
    opacity: 0;
    transform: rotate(-15deg) scaleY(0.2);
  }
}

@keyframes spark-jolt-2 {
  0%,
  100% {
    opacity: 0;
    transform: rotate(20deg) scaleY(0.2);
  }
  15% {
    opacity: 1;
    transform: rotate(15deg) scaleY(1);
  }
  25% {
    opacity: 0.5;
    transform: rotate(25deg) scaleY(0.9);
  }
  35% {
    opacity: 1;
    transform: rotate(18deg) scaleY(1.05);
  }
  50% {
    opacity: 0;
    transform: rotate(20deg) scaleY(0.3);
  }
}

@keyframes spark-jolt-3 {
  0%,
  100% {
    opacity: 0;
    transform: rotate(-25deg) scaleY(0.4);
  }
  20% {
    opacity: 1;
    transform: rotate(-30deg) scaleY(1);
  }
  35% {
    opacity: 0.4;
    transform: rotate(-20deg) scaleY(0.85);
  }
  45% {
    opacity: 1;
    transform: rotate(-28deg) scaleY(1);
  }
  55% {
    opacity: 0;
    transform: rotate(-25deg) scaleY(0.2);
  }
}

@keyframes spark-jolt-4 {
  0%,
  100% {
    opacity: 0;
    transform: rotate(10deg) scaleY(0.3);
  }
  5% {
    opacity: 1;
    transform: rotate(5deg) scaleY(1.1);
  }
  15% {
    opacity: 0.6;
    transform: rotate(15deg) scaleY(0.9);
  }
  25% {
    opacity: 1;
    transform: rotate(8deg) scaleY(1);
  }
  35% {
    opacity: 0;
    transform: rotate(10deg) scaleY(0.2);
  }
}

/* Overall paralysis flicker */
.paralysis-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 0, 0.1);
  animation: electric-flicker 0.15s steps(2) infinite;
}

@keyframes electric-flicker {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

/* ===== FROZEN - Icicle Formations ===== */
.frozen-overlay {
  background: linear-gradient(
    180deg,
    rgba(200, 230, 255, 0.3) 0%,
    rgba(150, 200, 255, 0.15) 30%,
    rgba(180, 220, 255, 0.2) 100%
  );
  box-shadow:
    inset 0 0 20px rgba(150, 200, 255, 0.5),
    inset 0 0 40px rgba(100, 180, 255, 0.3);
}

/* Frost crystals layer */
.frost-crystals {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.4) 0%, transparent 8%),
    radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.3) 0%, transparent 6%),
    radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.35) 0%, transparent 7%),
    radial-gradient(circle at 25% 75%, rgba(255, 255, 255, 0.3) 0%, transparent 5%),
    radial-gradient(circle at 50% 50%, rgba(200, 230, 255, 0.2) 0%, transparent 25%);
  animation: frost-shimmer 3s ease-in-out infinite;
}

@keyframes frost-shimmer {
  0%,
  100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}

/* Icicle base styling */
.icicle {
  position: absolute;
  background: linear-gradient(
    180deg,
    rgba(200, 230, 255, 0.9) 0%,
    rgba(150, 200, 255, 0.7) 40%,
    rgba(100, 180, 255, 0.5) 70%,
    rgba(180, 220, 255, 0.3) 100%
  );
  clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
  box-shadow:
    0 2px 4px rgba(100, 150, 255, 0.3),
    inset 0 0 5px rgba(255, 255, 255, 0.5);
}

/* Icicle positions - hanging from top edge */
.icicle-top-left {
  width: 8px;
  height: 18px;
  top: 0;
  left: 15%;
  transform: rotate(5deg);
  animation: icicle-drip 2.5s ease-in-out infinite;
}

.icicle-top-center {
  width: 10px;
  height: 24px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  animation: icicle-drip 2.8s ease-in-out infinite 0.3s;
}

.icicle-top-right {
  width: 7px;
  height: 16px;
  top: 0;
  right: 18%;
  transform: rotate(-8deg);
  animation: icicle-drip 2.3s ease-in-out infinite 0.5s;
}

/* Side icicles - horizontal pointing inward */
.icicle-left-center {
  width: 14px;
  height: 6px;
  left: 0;
  top: 45%;
  clip-path: polygon(100% 50%, 0% 0%, 0% 100%);
  animation: icicle-drip 2.6s ease-in-out infinite 0.2s;
}

.icicle-right-center {
  width: 14px;
  height: 6px;
  right: 0;
  top: 40%;
  clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
  animation: icicle-drip 2.4s ease-in-out infinite 0.4s;
}

/* Bottom corner frost buildup */
.icicle-bottom-left {
  width: 20px;
  height: 12px;
  bottom: 0;
  left: 0;
  clip-path: polygon(0% 100%, 0% 40%, 30% 0%, 100% 60%, 100% 100%);
  background: linear-gradient(45deg, rgba(200, 230, 255, 0.8) 0%, rgba(150, 200, 255, 0.5) 100%);
}

.icicle-bottom-right {
  width: 18px;
  height: 10px;
  bottom: 0;
  right: 0;
  clip-path: polygon(100% 100%, 100% 50%, 70% 0%, 0% 70%, 0% 100%);
  background: linear-gradient(-45deg, rgba(200, 230, 255, 0.8) 0%, rgba(150, 200, 255, 0.5) 100%);
}

@keyframes icicle-drip {
  0%,
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
  50% {
    opacity: 0.85;
    transform: scaleY(1.05);
  }
}

/* ===== THAWING - Dissipation Animation ===== */
.thawing-overlay {
  background: linear-gradient(
    180deg,
    rgba(200, 230, 255, 0.3) 0%,
    rgba(150, 200, 255, 0.15) 30%,
    rgba(180, 220, 255, 0.2) 100%
  );
  animation: thaw-dissipate 2.5s ease-out forwards;
}

@keyframes thaw-dissipate {
  0% {
    opacity: 1;
    filter: blur(0px);
  }
  60% {
    opacity: 0.4;
    filter: blur(1px);
  }
  100% {
    opacity: 0;
    filter: blur(3px);
  }
}

/* Melting icicles - drip and fade */
.icicle.melting {
  animation: icicle-melt 2s ease-out forwards !important;
}

@keyframes icicle-melt {
  0% {
    opacity: 1;
    transform: scaleY(1) translateY(0);
  }
  40% {
    opacity: 0.7;
    transform: scaleY(1.3) translateY(5px);
  }
  70% {
    opacity: 0.3;
    transform: scaleY(0.5) translateY(15px);
  }
  100% {
    opacity: 0;
    transform: scaleY(0.1) translateY(25px);
  }
}

/* Melting frost crystals */
.frost-crystals.melting {
  animation: frost-melt 2.5s ease-out forwards !important;
}

@keyframes frost-melt {
  0% {
    opacity: 0.8;
    filter: blur(0px);
  }
  50% {
    opacity: 0.3;
    filter: blur(2px);
  }
  100% {
    opacity: 0;
    filter: blur(5px);
  }
}

/* ===== BARRIER - Golden Oval Protective Glow ===== */
.barrier-overlay {
  background: radial-gradient(
    ellipse 80% 90% at 50% 50%,
    rgba(255, 215, 0, 0.15) 0%,
    rgba(255, 200, 50, 0.1) 40%,
    rgba(255, 180, 0, 0.2) 70%,
    rgba(255, 150, 0, 0.3) 100%
  );
  box-shadow:
    inset 0 0 30px rgba(255, 215, 0, 0.4),
    inset 0 0 60px rgba(255, 200, 0, 0.2),
    0 0 15px rgba(255, 215, 0, 0.5),
    0 0 30px rgba(255, 200, 0, 0.3);
  animation: barrier-pulse 2s ease-in-out infinite;
}

.barrier-overlay::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: inherit;
  border: 2px solid rgba(255, 215, 0, 0.6);
  animation: barrier-shimmer 3s linear infinite;
}

.barrier-overlay::after {
  content: '';
  position: absolute;
  top: 10%;
  left: 15%;
  right: 15%;
  bottom: 10%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 200, 0.2) 0%, transparent 70%);
  animation: barrier-inner-glow 2.5s ease-in-out infinite;
}

@keyframes barrier-pulse {
  0%,
  100% {
    opacity: 0.9;
  }
  50% {
    opacity: 1;
  }
}

@keyframes barrier-shimmer {
  0% {
    opacity: 0.6;
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
  }
  100% {
    opacity: 0.6;
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
  }
}

@keyframes barrier-inner-glow {
  0%,
  100% {
    transform: scale(0.95);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

/* ===== WEBBED - Spider Web Strands ===== */
.webbed-overlay {
  background: rgba(100, 100, 100, 0.1);
}

.web-strand {
  position: absolute;
  width: 50px;
  height: 50px;
  opacity: 0.85;
}

/* Web strand using radial and conic gradients to simulate web pattern */
.web-strand::before,
.web-strand::after {
  content: '';
  position: absolute;
  background: rgba(220, 220, 220, 0.9);
}

/* Radial strands from corner */
.web-strand::before {
  width: 100%;
  height: 2px;
  top: 50%;
  left: 0;
  transform-origin: left center;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
}

.web-strand::after {
  width: 2px;
  height: 100%;
  left: 50%;
  top: 0;
  transform-origin: center top;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
}

.web-top-left {
  top: 0;
  left: 0;
  background:
    linear-gradient(135deg, rgba(220, 220, 220, 0.8) 0%, transparent 60%),
    linear-gradient(125deg, rgba(200, 200, 200, 0.6) 0%, transparent 50%),
    linear-gradient(145deg, rgba(180, 180, 180, 0.5) 0%, transparent 40%);
}

.web-top-left::before {
  transform: rotate(45deg);
}
.web-top-left::after {
  transform: rotate(45deg);
}

.web-top-right {
  top: 0;
  right: 0;
  background:
    linear-gradient(225deg, rgba(220, 220, 220, 0.8) 0%, transparent 60%),
    linear-gradient(235deg, rgba(200, 200, 200, 0.6) 0%, transparent 50%),
    linear-gradient(215deg, rgba(180, 180, 180, 0.5) 0%, transparent 40%);
}

.web-top-right::before {
  transform: rotate(-45deg);
  left: auto;
  right: 0;
  transform-origin: right center;
}
.web-top-right::after {
  transform: rotate(-45deg);
}

.web-bottom-left {
  bottom: 0;
  left: 0;
  background:
    linear-gradient(45deg, rgba(220, 220, 220, 0.8) 0%, transparent 60%),
    linear-gradient(35deg, rgba(200, 200, 200, 0.6) 0%, transparent 50%),
    linear-gradient(55deg, rgba(180, 180, 180, 0.5) 0%, transparent 40%);
}

.web-bottom-left::before {
  transform: rotate(-45deg);
}
.web-bottom-left::after {
  transform: rotate(-45deg);
  top: auto;
  bottom: 0;
  transform-origin: center bottom;
}

.web-bottom-right {
  bottom: 0;
  right: 0;
  background:
    linear-gradient(315deg, rgba(220, 220, 220, 0.8) 0%, transparent 60%),
    linear-gradient(305deg, rgba(200, 200, 200, 0.6) 0%, transparent 50%),
    linear-gradient(325deg, rgba(180, 180, 180, 0.5) 0%, transparent 40%);
}

.web-bottom-right::before {
  transform: rotate(45deg);
  left: auto;
  right: 0;
  transform-origin: right center;
}
.web-bottom-right::after {
  transform: rotate(45deg);
  top: auto;
  bottom: 0;
  transform-origin: center bottom;
}

/* ===== STALKING - Grass Ferns + Darkened Hiding Effect ===== */
.stalking-overlay {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.25) 50%,
    rgba(0, 0, 0, 0.35) 100%
  );
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.3);
}

.grass-fern {
  position: absolute;
  bottom: 0;
  width: 35px;
  height: 45px;
}

/* Fern blades using pseudo-elements */
.grass-fern::before,
.grass-fern::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 4px;
  background: linear-gradient(
    to top,
    rgba(34, 85, 34, 0.95) 0%,
    rgba(50, 120, 50, 0.9) 40%,
    rgba(80, 160, 80, 0.8) 70%,
    rgba(100, 180, 100, 0.6) 100%
  );
  border-radius: 50% 50% 0 0;
}

.fern-left {
  left: 5px;
}

.fern-left::before {
  height: 35px;
  left: 8px;
  transform: rotate(-15deg);
  transform-origin: bottom center;
}

.fern-left::after {
  height: 28px;
  left: 16px;
  transform: rotate(10deg);
  transform-origin: bottom center;
}

.fern-right {
  right: 5px;
}

.fern-right::before {
  height: 32px;
  right: 8px;
  transform: rotate(12deg);
  transform-origin: bottom center;
}

.fern-right::after {
  height: 38px;
  right: 18px;
  transform: rotate(-8deg);
  transform-origin: bottom center;
}

/* Add extra fern blades with box-shadows */
.fern-left::before {
  box-shadow:
    -6px 5px 0 -1px rgba(40, 100, 40, 0.8),
    6px 8px 0 -1px rgba(60, 130, 60, 0.75);
}

.fern-right::before {
  box-shadow:
    6px 6px 0 -1px rgba(40, 100, 40, 0.8),
    -5px 10px 0 -1px rgba(60, 130, 60, 0.75);
}

/* Subtle sway animation for ferns */
.grass-fern {
  animation: fern-sway 3s ease-in-out infinite;
}

.fern-right {
  animation-delay: 0.5s;
}

@keyframes fern-sway {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(2deg);
  }
}

/* ===== SHELL - Hexagonal Scale Armor ===== */
.shell-overlay {
  background: linear-gradient(
    135deg,
    rgba(139, 90, 43, 0.1) 0%,
    rgba(160, 120, 60, 0.05) 50%,
    rgba(139, 90, 43, 0.1) 100%
  );
  box-shadow:
    inset 0 0 15px rgba(180, 140, 80, 0.3),
    0 0 8px rgba(139, 90, 43, 0.4);
}

.shell-scale {
  position: absolute;
  width: 18px;
  height: 20px;
  background: linear-gradient(
    145deg,
    rgba(200, 160, 100, 0.9) 0%,
    rgba(160, 120, 70, 0.85) 30%,
    rgba(120, 85, 50, 0.9) 70%,
    rgba(90, 60, 35, 0.95) 100%
  );
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  box-shadow:
    inset 2px 2px 4px rgba(255, 220, 150, 0.4),
    inset -1px -1px 3px rgba(60, 40, 20, 0.5);
  animation: shell-breathe 2.5s ease-in-out infinite;
}

/* Scale positioning - top edge */
.scale-top-1 {
  top: 2px;
  left: 15%;
}
.scale-top-2 {
  top: 0px;
  left: 45%;
  transform: translateX(-50%);
}
.scale-top-3 {
  top: 2px;
  right: 15%;
}

/* Scale positioning - right edge */
.scale-right-1 {
  top: 25%;
  right: 2px;
}
.scale-right-2 {
  top: 55%;
  right: 2px;
}

/* Scale positioning - bottom edge */
.scale-bottom-1 {
  bottom: 2px;
  left: 15%;
}
.scale-bottom-2 {
  bottom: 0px;
  left: 45%;
  transform: translateX(-50%);
}
.scale-bottom-3 {
  bottom: 2px;
  right: 15%;
}

/* Scale positioning - left edge */
.scale-left-1 {
  top: 25%;
  left: 2px;
}
.scale-left-2 {
  top: 55%;
  left: 2px;
}

.shell-shimmer {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 220, 150, 0.15) 50%,
    transparent 100%
  );
  animation: shell-shimmer-sweep 4s ease-in-out infinite;
}

@keyframes shell-breathe {
  0%,
  100% {
    opacity: 0.85;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

@keyframes shell-shimmer-sweep {
  0%,
  100% {
    left: -50%;
    opacity: 0;
  }
  50% {
    left: 100%;
    opacity: 1;
  }
}

/* Shell depleted state - cracked and faded */
.shell-depleted .shell-scale {
  opacity: 0.3;
  filter: grayscale(60%);
  animation: shell-cracked 0.5s ease-out forwards;
}

.shell-depleted .shell-shimmer {
  display: none;
}

.shell-depleted {
  box-shadow: inset 0 0 10px rgba(100, 80, 50, 0.2);
}

@keyframes shell-cracked {
  0% {
    transform: scale(1);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(0.9);
    opacity: 0.3;
  }
}

/* ===== LURE - Red Pulsing Beacon ===== */
.lure-overlay {
  background: radial-gradient(
    circle at center,
    rgba(220, 50, 50, 0.15) 0%,
    rgba(180, 30, 30, 0.1) 40%,
    transparent 70%
  );
}

.lure-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(255, 80, 80, 0.8);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: lure-pulse 2s ease-out infinite;
}

.ring-1 {
  animation-delay: 0s;
}
.ring-2 {
  animation-delay: 0.4s;
}
.ring-3 {
  animation-delay: 0.8s;
}

@keyframes lure-pulse {
  0% {
    width: 20px;
    height: 20px;
    opacity: 0.9;
    border-color: rgba(255, 100, 100, 0.9);
  }
  100% {
    width: 120px;
    height: 120px;
    opacity: 0;
    border-color: rgba(255, 50, 50, 0);
  }
}

/* Lure arrows pointing inward */
.lure-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  opacity: 0.8;
  animation: lure-arrow-pulse 1.5s ease-in-out infinite;
}

.arrow-top {
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px 5px 0 5px;
  border-color: rgba(255, 80, 80, 0.9) transparent transparent transparent;
}

.arrow-bottom {
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 5px 8px 5px;
  border-color: transparent transparent rgba(255, 80, 80, 0.9) transparent;
}

.arrow-left {
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 5px 8px 5px 0;
  border-color: transparent rgba(255, 80, 80, 0.9) transparent transparent;
}

.arrow-right {
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent rgba(255, 80, 80, 0.9);
}

.arrow-top,
.arrow-bottom {
  animation-delay: 0s;
}
.arrow-left,
.arrow-right {
  animation-delay: 0.75s;
}

@keyframes lure-arrow-pulse {
  0%,
  100% {
    opacity: 0.5;
    transform: translateX(-50%) scale(0.8);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.1);
  }
}

.arrow-left,
.arrow-right {
  animation-name: lure-arrow-pulse-y;
}

@keyframes lure-arrow-pulse-y {
  0%,
  100% {
    opacity: 0.5;
    transform: translateY(-50%) scale(0.8);
  }
  50% {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
  }
}

/* ===== HIDDEN - Semi-Transparent Shimmer ===== */
.hidden-overlay {
  background: rgba(100, 120, 150, 0.1);
  backdrop-filter: blur(0.5px);
}

.hidden-wave {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(150, 180, 220, 0.08) 25%,
    rgba(180, 200, 230, 0.12) 50%,
    rgba(150, 180, 220, 0.08) 75%,
    transparent 100%
  );
  animation: hidden-wave-drift 3s ease-in-out infinite;
}

.wave-1 {
  animation-delay: 0s;
  opacity: 0.7;
}
.wave-2 {
  animation-delay: 1s;
  opacity: 0.5;
}
.wave-3 {
  animation-delay: 2s;
  opacity: 0.6;
}

@keyframes hidden-wave-drift {
  0%,
  100% {
    transform: translateY(-10px);
    opacity: 0.3;
  }
  50% {
    transform: translateY(10px);
    opacity: 0.7;
  }
}

/* Overall card transparency effect for Hidden */
.hidden-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(200, 220, 255, 0.03) 2px,
    rgba(200, 220, 255, 0.03) 4px
  );
  animation: hidden-scanlines 0.1s linear infinite;
}

@keyframes hidden-scanlines {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(4px);
  }
}

/* ===== INVISIBLE - Prismatic Edge Refraction ===== */
.invisible-overlay {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(200, 200, 255, 0.03) 50%,
    rgba(255, 255, 255, 0.05) 100%
  );
  backdrop-filter: blur(1px);
  opacity: 0.9;
}

.prism-edge {
  position: absolute;
  background: linear-gradient(
    90deg,
    rgba(255, 0, 0, 0.3) 0%,
    rgba(255, 165, 0, 0.3) 17%,
    rgba(255, 255, 0, 0.3) 33%,
    rgba(0, 255, 0, 0.3) 50%,
    rgba(0, 150, 255, 0.3) 67%,
    rgba(75, 0, 130, 0.3) 83%,
    rgba(148, 0, 211, 0.3) 100%
  );
  animation: prism-shift 2s linear infinite;
}

.prism-top {
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    rgba(255, 0, 0, 0.4) 0%,
    rgba(255, 165, 0, 0.4) 17%,
    rgba(255, 255, 0, 0.4) 33%,
    rgba(0, 255, 0, 0.4) 50%,
    rgba(0, 150, 255, 0.4) 67%,
    rgba(75, 0, 130, 0.4) 83%,
    rgba(148, 0, 211, 0.4) 100%
  );
}

.prism-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    270deg,
    rgba(255, 0, 0, 0.4) 0%,
    rgba(255, 165, 0, 0.4) 17%,
    rgba(255, 255, 0, 0.4) 33%,
    rgba(0, 255, 0, 0.4) 50%,
    rgba(0, 150, 255, 0.4) 67%,
    rgba(75, 0, 130, 0.4) 83%,
    rgba(148, 0, 211, 0.4) 100%
  );
  animation-direction: reverse;
}

.prism-left {
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(
    180deg,
    rgba(255, 0, 0, 0.4) 0%,
    rgba(255, 165, 0, 0.4) 17%,
    rgba(255, 255, 0, 0.4) 33%,
    rgba(0, 255, 0, 0.4) 50%,
    rgba(0, 150, 255, 0.4) 67%,
    rgba(75, 0, 130, 0.4) 83%,
    rgba(148, 0, 211, 0.4) 100%
  );
  animation-delay: 0.5s;
}

.prism-right {
  top: 0;
  right: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(
    0deg,
    rgba(255, 0, 0, 0.4) 0%,
    rgba(255, 165, 0, 0.4) 17%,
    rgba(255, 255, 0, 0.4) 33%,
    rgba(0, 255, 0, 0.4) 50%,
    rgba(0, 150, 255, 0.4) 67%,
    rgba(75, 0, 130, 0.4) 83%,
    rgba(148, 0, 211, 0.4) 100%
  );
  animation-delay: 0.5s;
  animation-direction: reverse;
}

@keyframes prism-shift {
  0% {
    filter: hue-rotate(0deg);
    opacity: 0.6;
  }
  50% {
    opacity: 0.9;
  }
  100% {
    filter: hue-rotate(360deg);
    opacity: 0.6;
  }
}

/* Inner refraction effect */
.invisible-overlay::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 10%;
  right: 10%;
  bottom: 10%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    rgba(255, 0, 0, 0.05) 0deg,
    rgba(255, 165, 0, 0.05) 60deg,
    rgba(255, 255, 0, 0.05) 120deg,
    rgba(0, 255, 0, 0.05) 180deg,
    rgba(0, 150, 255, 0.05) 240deg,
    rgba(148, 0, 211, 0.05) 300deg,
    rgba(255, 0, 0, 0.05) 360deg
  );
  animation: prism-rotate 6s linear infinite;
  border-radius: inherit;
}

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

/* ===== VENOM - Dripping Green Liquid ===== */
.venom-overlay {
  background: linear-gradient(
    180deg,
    rgba(50, 180, 50, 0.1) 0%,
    transparent 30%,
    transparent 70%,
    rgba(50, 180, 50, 0.15) 100%
  );
}

.venom-drip {
  position: absolute;
  top: -5px;
  width: 8px;
  height: 25px;
  background: linear-gradient(
    180deg,
    rgba(80, 200, 80, 0.9) 0%,
    rgba(50, 180, 50, 0.95) 40%,
    rgba(30, 150, 30, 0.9) 70%,
    rgba(20, 120, 20, 0.85) 100%
  );
  border-radius: 4px 4px 50% 50%;
  animation: venom-drip-fall 2.5s ease-in infinite;
  filter: drop-shadow(0 2px 4px rgba(50, 180, 50, 0.5));
}

/* Drip positioning */
.drip-left-1 {
  left: 12%;
}
.drip-left-2 {
  left: 28%;
  animation-delay: 0.8s;
}
.drip-right-1 {
  right: 12%;
  animation-delay: 0.4s;
}
.drip-right-2 {
  right: 28%;
  animation-delay: 1.2s;
}

@keyframes venom-drip-fall {
  0% {
    top: -5px;
    height: 20px;
    opacity: 0;
  }
  10% {
    opacity: 1;
    height: 25px;
  }
  60% {
    top: 30%;
    height: 30px;
    opacity: 0.9;
  }
  80% {
    top: 70%;
    height: 20px;
    opacity: 0.7;
  }
  95% {
    top: calc(100% - 15px);
    height: 15px;
    opacity: 0.5;
  }
  100% {
    top: calc(100% - 10px);
    height: 10px;
    opacity: 0;
  }
}

.venom-pool {
  position: absolute;
  bottom: 3px;
  left: 10%;
  right: 10%;
  height: 8px;
  background: radial-gradient(
    ellipse 100% 100% at 50% 100%,
    rgba(50, 180, 50, 0.6) 0%,
    rgba(40, 150, 40, 0.4) 50%,
    transparent 100%
  );
  border-radius: 50%;
  animation: venom-pool-pulse 2s ease-in-out infinite;
}

@keyframes venom-pool-pulse {
  0%,
  100% {
    opacity: 0.5;
    transform: scaleX(0.9);
  }
  50% {
    opacity: 0.8;
    transform: scaleX(1.1);
  }
}

/* ===== TOXIC - Green Aura Smoke Wisps ===== */
.toxic-overlay {
  background: radial-gradient(ellipse at center, rgba(80, 200, 80, 0.08) 0%, transparent 60%);
  box-shadow: 0 0 15px rgba(80, 200, 80, 0.2);
}

.toxic-wisp {
  position: absolute;
  width: 20px;
  height: 30px;
  background: radial-gradient(
    ellipse at center,
    rgba(100, 220, 100, 0.6) 0%,
    rgba(80, 200, 80, 0.3) 40%,
    transparent 70%
  );
  border-radius: 50% 50% 30% 30%;
  filter: blur(3px);
  animation: toxic-rise 3s ease-out infinite;
}

/* Wisp positioning - along top edge */
.wisp-1 {
  left: 10%;
  bottom: 70%;
  animation-delay: 0s;
}
.wisp-2 {
  left: 30%;
  bottom: 65%;
  animation-delay: 0.6s;
}
.wisp-3 {
  left: 50%;
  bottom: 70%;
  animation-delay: 1.2s;
  transform: translateX(-50%);
}
.wisp-4 {
  right: 30%;
  bottom: 65%;
  animation-delay: 1.8s;
}
.wisp-5 {
  right: 10%;
  bottom: 70%;
  animation-delay: 2.4s;
}

@keyframes toxic-rise {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.5);
  }
  20% {
    opacity: 0.7;
  }
  80% {
    opacity: 0.4;
  }
  100% {
    opacity: 0;
    transform: translateY(-40px) scale(1.2);
  }
}

/* Subtle toxic glow on border */
.toxic-overlay::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: inherit;
  border: 1px solid rgba(100, 220, 100, 0.3);
  animation: toxic-border-pulse 2s ease-in-out infinite;
}

@keyframes toxic-border-pulse {
  0%,
  100% {
    border-color: rgba(100, 220, 100, 0.2);
    box-shadow: 0 0 5px rgba(100, 220, 100, 0.1);
  }
  50% {
    border-color: rgba(100, 220, 100, 0.5);
    box-shadow: 0 0 12px rgba(100, 220, 100, 0.3);
  }
}

/* ===== ACUITY - Targeting Scanner Effect ===== */
.acuity-overlay {
  background: rgba(0, 150, 255, 0.03);
}

.acuity-scanner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 200, 255, 0.3) 20%,
    rgba(0, 220, 255, 0.8) 50%,
    rgba(0, 200, 255, 0.3) 80%,
    transparent 100%
  );
  box-shadow:
    0 0 10px rgba(0, 200, 255, 0.5),
    0 0 20px rgba(0, 200, 255, 0.3);
  animation: acuity-scan 2.5s ease-in-out infinite;
}

@keyframes acuity-scan {
  0%,
  100% {
    top: 5%;
    opacity: 0.6;
  }
  50% {
    top: 90%;
    opacity: 1;
  }
}

/* Targeting brackets in corners */
.acuity-bracket {
  position: absolute;
  width: 15px;
  height: 15px;
  border-color: rgba(0, 200, 255, 0.7);
  border-style: solid;
  border-width: 0;
  animation: acuity-bracket-pulse 1.5s ease-in-out infinite;
}

.bracket-top-left {
  top: 6px;
  left: 6px;
  border-top-width: 2px;
  border-left-width: 2px;
}

.bracket-top-right {
  top: 6px;
  right: 6px;
  border-top-width: 2px;
  border-right-width: 2px;
}

.bracket-bottom-left {
  bottom: 6px;
  left: 6px;
  border-bottom-width: 2px;
  border-left-width: 2px;
}

.bracket-bottom-right {
  bottom: 6px;
  right: 6px;
  border-bottom-width: 2px;
  border-right-width: 2px;
}

@keyframes acuity-bracket-pulse {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* Scanner readout effect */
.acuity-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 3px,
    rgba(0, 200, 255, 0.02) 3px,
    rgba(0, 200, 255, 0.02) 4px
  );
  pointer-events: none;
}

.card-hit {
  animation: card-hit 0.4s ease-out;
}

.damage-pop {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: var(--font-xl);
  color: #ff3b3b;
  text-shadow: 0 0 10px rgba(255, 59, 59, 0.75);
  animation: damage-pop 0.9s ease-out forwards;
  pointer-events: none;
  z-index: 3;
}

.attack-ghost {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.45));
  z-index: 4;
}

.attack-ghost--slot {
  border-radius: var(--card-radius);
  background: rgba(255, 255, 255, 0.08);
  border: 1px dashed rgba(255, 255, 255, 0.2);
}

.impact-ring {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid rgba(255, 165, 120, 0.8);
  box-shadow: 0 0 18px rgba(255, 115, 80, 0.6);
  transform: translate(-50%, -50%);
  animation: impact-ring 0.5s ease-out forwards;
  pointer-events: none;
  z-index: 3;
}

@keyframes damage-pop {
  0% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0;
  }
  25% {
    transform: translate(-50%, -60%) scale(1.15);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -110%) scale(0.9);
    opacity: 0;
  }
}

@keyframes card-hit {
  0% {
    box-shadow: 0 0 0 rgba(255, 80, 80, 0.6);
  }
  50% {
    box-shadow: 0 0 22px rgba(255, 80, 80, 0.8);
  }
  100% {
    box-shadow: 0 0 0 rgba(255, 80, 80, 0);
  }
}

@keyframes impact-ring {
  0% {
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0.95;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.25);
    opacity: 0;
  }
}

/* Damage shake effect for effect-based damage */
.damage-shake {
  animation: damage-shake 0.5s ease-out;
}

@keyframes damage-shake {
  0%,
  100% {
    transform: translateX(0);
    filter: brightness(1);
  }
  10%,
  50%,
  90% {
    transform: translateX(-4px);
    filter: brightness(0.8) saturate(1.2);
  }
  30%,
  70% {
    transform: translateX(4px);
    filter: brightness(0.8) saturate(1.2);
  }
  25%,
  75% {
    box-shadow: 0 0 15px rgba(255, 80, 80, 0.6);
  }
}

/* Player damage shake effect */
.player-damage-shake {
  animation: player-damage-shake 0.6s ease-out;
}

@keyframes player-damage-shake {
  0%,
  100% {
    transform: translateX(0) scale(1);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-6px) scale(1.05);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(6px) scale(1.05);
  }
  15%,
  45%,
  75% {
    box-shadow:
      0 0 20px rgba(255, 59, 59, 0.8),
      inset 0 0 10px rgba(255, 59, 59, 0.3);
  }
}

/* Player damage pop number */
.player-damage-pop {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: var(--font-2xl);
  font-weight: bold;
  color: #ff3b3b;
  text-shadow:
    0 0 15px rgba(255, 59, 59, 0.9),
    2px 2px 4px rgba(0, 0, 0, 0.5);
  animation: player-damage-pop 1s ease-out forwards;
  pointer-events: none;
  z-index: 1000;
}

@keyframes player-damage-pop {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }
  20% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 1;
  }
  40% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -80%) scale(1.1);
    opacity: 0;
  }
}

/* Heal glow effect */
.heal-glow {
  animation: heal-glow 0.6s ease-out;
}

@keyframes heal-glow {
  0% {
    box-shadow: 0 0 0 rgba(76, 217, 100, 0);
    filter: brightness(1);
  }
  40% {
    box-shadow:
      0 0 25px rgba(76, 217, 100, 0.8),
      inset 0 0 10px rgba(76, 217, 100, 0.3);
    filter: brightness(1.15) saturate(1.1);
  }
  100% {
    box-shadow: 0 0 0 rgba(76, 217, 100, 0);
    filter: brightness(1);
  }
}

/* Heal pop number */
.heal-pop {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: var(--font-xl);
  color: #4cd964;
  text-shadow: 0 0 10px rgba(76, 217, 100, 0.75);
  animation: heal-pop 0.9s ease-out forwards;
  pointer-events: none;
  z-index: 3;
}

@keyframes heal-pop {
  0% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0;
  }
  25% {
    transform: translate(-50%, -60%) scale(1.15);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -110%) scale(0.9);
    opacity: 0;
  }
}

/* ============================================================================
   CONSUMPTION EFFECTS
   ============================================================================ */

.consumption-ghost {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 8px 16px rgba(39, 174, 96, 0.4));
  z-index: 4;
}

.consumption-ghost--slot {
  width: 60px;
  height: 80px;
  background: linear-gradient(135deg, rgba(39, 174, 96, 0.6), rgba(39, 174, 96, 0.3));
  border-radius: var(--card-radius);
  border: 2px solid rgba(39, 174, 96, 0.8);
}

.consumption-complete {
  animation: consumption-complete 0.4s ease-out;
}

@keyframes consumption-complete {
  0% {
    box-shadow: 0 0 0 rgba(39, 174, 96, 0);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 25px rgba(39, 174, 96, 0.8),
      inset 0 0 15px rgba(39, 174, 96, 0.3);
    transform: scale(1.05);
  }
  100% {
    box-shadow: 0 0 0 rgba(39, 174, 96, 0);
    transform: scale(1);
  }
}

.nutrition-pop {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: var(--font-xl);
  color: #27ae60;
  text-shadow:
    0 0 10px rgba(39, 174, 96, 0.8),
    0 0 20px rgba(39, 174, 96, 0.5);
  animation: nutrition-pop 1s ease-out forwards;
  pointer-events: none;
  z-index: 5;
  white-space: nowrap;
}

@keyframes nutrition-pop {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }
  20% {
    transform: translate(-50%, -60%) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -120%) scale(1);
    opacity: 0;
  }
}

/* ============================================================================
   KEYWORD TRIGGER EFFECTS
   ============================================================================ */

.keyword-indicator {
  position: absolute;
  font-size: 72px; /* ~100% of typical card width for visibility */
  transform: translate(-50%, -50%);
  animation: keyword-indicator 0.8s ease-out forwards;
  pointer-events: none;
  z-index: 5;
}

@keyframes keyword-indicator {
  0% {
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0;
  }
  25% {
    transform: translate(-50%, -60%) scale(1.3);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -100%) scale(1);
    opacity: 0;
  }
}

/* Barrier - Blue shield shimmer */
.keyword-barrier {
  animation: keyword-barrier-glow 0.6s ease-out;
}

@keyframes keyword-barrier-glow {
  0% {
    box-shadow:
      0 0 0 rgba(79, 195, 247, 0),
      inset 0 0 0 rgba(79, 195, 247, 0);
  }
  30% {
    box-shadow:
      0 0 30px rgba(79, 195, 247, 0.8),
      inset 0 0 20px rgba(79, 195, 247, 0.4);
  }
  100% {
    box-shadow:
      0 0 0 rgba(79, 195, 247, 0),
      inset 0 0 0 rgba(79, 195, 247, 0);
  }
}

/* Ambush - Orange flash */
.keyword-ambush {
  animation: keyword-ambush-flash 0.5s ease-out;
}

@keyframes keyword-ambush-flash {
  0% {
    box-shadow: 0 0 0 rgba(255, 112, 67, 0);
    filter: brightness(1);
  }
  40% {
    box-shadow: 0 0 25px rgba(255, 112, 67, 0.9);
    filter: brightness(1.3);
  }
  100% {
    box-shadow: 0 0 0 rgba(255, 112, 67, 0);
    filter: brightness(1);
  }
}

/* Toxic - Green poison glow */
.keyword-toxic {
  animation: keyword-toxic-glow 0.6s ease-out;
}

@keyframes keyword-toxic-glow {
  0% {
    box-shadow: 0 0 0 rgba(118, 255, 3, 0);
  }
  30% {
    box-shadow:
      0 0 30px rgba(118, 255, 3, 0.8),
      0 0 50px rgba(118, 255, 3, 0.4);
  }
  100% {
    box-shadow: 0 0 0 rgba(118, 255, 3, 0);
  }
}

/* Neurotoxic - Ice blue freeze effect */
.keyword-neurotoxic {
  animation: keyword-neurotoxic-freeze 0.7s ease-out;
}

@keyframes keyword-neurotoxic-freeze {
  0% {
    box-shadow: 0 0 0 rgba(128, 222, 234, 0);
    filter: hue-rotate(0deg);
  }
  40% {
    box-shadow:
      0 0 35px rgba(128, 222, 234, 0.9),
      inset 0 0 20px rgba(128, 222, 234, 0.5);
    filter: hue-rotate(-20deg);
  }
  100% {
    box-shadow: 0 0 0 rgba(128, 222, 234, 0);
    filter: hue-rotate(0deg);
  }
}

/* Scavenge - Brown earthy glow */
.keyword-scavenge {
  animation: keyword-scavenge-glow 0.5s ease-out;
}

@keyframes keyword-scavenge-glow {
  0% {
    box-shadow: 0 0 0 rgba(161, 136, 127, 0);
  }
  50% {
    box-shadow: 0 0 25px rgba(161, 136, 127, 0.8);
  }
  100% {
    box-shadow: 0 0 0 rgba(161, 136, 127, 0);
  }
}

/* Haste - Yellow lightning flash */
.keyword-haste {
  animation: keyword-haste-flash 0.4s ease-out;
}

@keyframes keyword-haste-flash {
  0% {
    box-shadow: 0 0 0 rgba(255, 235, 59, 0);
    filter: brightness(1);
  }
  30% {
    box-shadow: 0 0 30px rgba(255, 235, 59, 0.9);
    filter: brightness(1.4);
  }
  100% {
    box-shadow: 0 0 0 rgba(255, 235, 59, 0);
    filter: brightness(1);
  }
}

/* Lure - Pink attractive glow */
.keyword-lure {
  animation: keyword-lure-glow 0.5s ease-out;
}

@keyframes keyword-lure-glow {
  0% {
    box-shadow: 0 0 0 rgba(240, 98, 146, 0);
  }
  50% {
    box-shadow:
      0 0 25px rgba(240, 98, 146, 0.8),
      0 0 40px rgba(240, 98, 146, 0.4);
  }
  100% {
    box-shadow: 0 0 0 rgba(240, 98, 146, 0);
  }
}

/* Generic keyword trigger fallback */
.keyword-trigger-generic {
  animation: keyword-generic-pulse 0.5s ease-out;
}

@keyframes keyword-generic-pulse {
  0% {
    box-shadow: 0 0 0 rgba(212, 168, 83, 0);
  }
  50% {
    box-shadow: 0 0 20px rgba(212, 168, 83, 0.7);
  }
  100% {
    box-shadow: 0 0 0 rgba(212, 168, 83, 0);
  }
}

/* Ability Cancel - Red cancel effect for ability removal (e.g., Riptide) */
.ability-cancel {
  animation: ability-cancel-flash 0.6s ease-out;
}

@keyframes ability-cancel-flash {
  0% {
    box-shadow: 0 0 0 rgba(231, 76, 60, 0);
    filter: brightness(1);
  }
  30% {
    box-shadow:
      0 0 30px rgba(231, 76, 60, 0.8),
      0 0 50px rgba(231, 76, 60, 0.4);
    filter: brightness(0.8) saturate(0.5);
  }
  100% {
    box-shadow: 0 0 0 rgba(231, 76, 60, 0);
    filter: brightness(1);
  }
}

/* Cancel emoji indicator that pops up */
.ability-cancel-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  animation: ability-cancel-pop 0.8s ease-out forwards;
  pointer-events: none;
  z-index: 1000;
  text-shadow:
    0 0 10px rgba(231, 76, 60, 0.8),
    0 0 20px rgba(231, 76, 60, 0.5);
}

@keyframes ability-cancel-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }
  30% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3);
  }
  60% {
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1) translateY(-30px);
  }
}

/* ============================================================================
   TURN PULSE - Playable cards glow
   ============================================================================ */

.card.playable-pulse {
  animation: playable-pulse 2s ease-in-out infinite;
}

@keyframes playable-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(212, 168, 83, 0.3);
  }
  50% {
    box-shadow:
      0 0 15px rgba(212, 168, 83, 0.6),
      0 0 25px rgba(212, 168, 83, 0.3);
  }
}

/* Different pulse for creatures that can attack */
.card.can-attack-pulse {
  animation: can-attack-pulse 1.5s ease-in-out infinite;
}

@keyframes can-attack-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(231, 76, 60, 0.3);
  }
  50% {
    box-shadow:
      0 0 12px rgba(231, 76, 60, 0.6),
      0 0 20px rgba(231, 76, 60, 0.3);
  }
}

.overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-medium);
  z-index: 20;
  padding: 24px;
}

.overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* In-game overlays (reaction, setup, pass) use semi-transparent backdrop
   so the player can still see the board state behind the modal */
.reaction-overlay.active,
.setup-overlay.active,
.pass-overlay.active {
  background: rgba(5, 8, 12, 0.55);
  backdrop-filter: blur(3px);
}

.overlay.fading-out {
  opacity: 0;
  transition: opacity 1s ease-out;
  pointer-events: none;
}

.overlay-content {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 18px;
  padding: 20px;
  max-height: 90vh;
  overflow: hidden;
  transform: scale(0.96);
  transition: transform var(--transition-medium);
}

.overlay.active .overlay-content {
  transform: scale(1);
}

/* ============================================================================
   COIN FLIP OVERLAY
   ============================================================================ */

.coin-flip-overlay {
  z-index: 25;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(8px);
}

.coin-flip-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.coin-flip-assignments {
  display: flex;
  gap: 2rem;
  font-family: var(--font-display);
  font-size: var(--font-lg);
  color: var(--gold-light);
}

.coin-flip-player {
  padding: 0.5rem 1rem;
  background: rgba(212, 168, 83, 0.15);
  border: 1px solid var(--border-gold);
  border-radius: 8px;
}

.coin-flip-scene {
  width: clamp(100px, 20vw, 140px);
  height: clamp(100px, 20vw, 140px);
  perspective: 800px;
  perspective-origin: center center;
}

.coin {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform-origin: center center;
}

.coin-face {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(2rem, 7vw, 3rem);
  background: linear-gradient(135deg, #d4a853 0%, #a67c32 50%, #f0d078 100%);
  border: 4px solid #8b6914;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.3),
    inset 0 -2px 4px rgba(0, 0, 0, 0.2),
    0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Gator side (front) */
.coin-face-gator {
  transform: rotateY(0deg);
}

/* Shark side (back) - rotated 180 degrees, emoji flipped to face correctly */
.coin-face-shark {
  transform: rotateY(180deg) scaleX(-1);
}

/* Coin edge - creates thickness illusion */
.coin::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(90deg, #8b6914 0%, #a67c32 50%, #8b6914 100%);
  transform: translateZ(-4px);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

/* Result text */
.coin-flip-result {
  font-family: var(--font-display);
  font-size: var(--font-2xl);
  color: var(--gold-light);
  text-shadow:
    0 0 20px var(--gold),
    0 2px 4px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out;
  min-height: 2.5rem;
}

.coin-flip-result.visible {
  opacity: 1;
  transform: translateY(0);
}

.menu-card {
  width: min(680px, 100%);
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  overflow: visible;
}

/* Stable click zone — fixed position, never animates */
.menu-splash-text {
  position: absolute;
  top: -6px;
  right: -30px;
  width: 210px;
  height: 52px;
  transform: rotate(12deg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  z-index: 2;
}

.menu-splash-text:empty {
  display: none;
}

/* Animated text inside the stable zone */
.menu-splash-text span {
  animation: splash-breathe 3.5s ease-in-out infinite;
  color: var(--gold);
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  max-width: 200px;
  pointer-events: none;
  text-shadow:
    -1px -1px 0 rgba(0, 0, 0, 0.8),
    1px -1px 0 rgba(0, 0, 0, 0.8),
    -1px 1px 0 rgba(0, 0, 0, 0.8),
    1px 1px 0 rgba(0, 0, 0, 0.8),
    0 0 8px rgba(212, 168, 83, 0.4);
}

@keyframes splash-breathe {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

/* Two-column menu layout */
.menu-actions-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 16px;
  align-items: stretch;
}

/* Split Find/Rejoin button container */
.menu-find-match-container {
  display: flex;
  flex-direction: column;
  min-height: 140px;
}

/* Find Game button (top half) */
.menu-find-game {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: #2e2211;
  border-radius: 16px;
  padding: 24px;
  font-weight: 700;
  font-size: var(--font-xl);
  flex: 1;
  cursor: pointer;
  border: none;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

/* When rejoin is visible, adjust border radius */
.menu-find-match-container.has-rejoin .menu-find-game {
  border-radius: 16px 16px 0 0;
  padding-bottom: 16px;
}

.menu-find-game:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(212, 168, 83, 0.3);
}

/* Disable hover transform when rejoin is visible */
.menu-find-match-container.has-rejoin .menu-find-game:hover:not(:disabled) {
  transform: none;
}

.menu-find-game:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.menu-find-game .online-count {
  font-size: var(--font-sm);
  font-weight: 400;
  margin-top: 8px;
}

/* Rejoin Game button (bottom half) */
.menu-rejoin-game {
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, var(--gold-dark), #9a7632);
  color: #2e2211;
  border-radius: 0 0 16px 16px;
  padding: 12px 24px;
  font-weight: 700;
  font-size: var(--font-base);
  cursor: pointer;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  transition: background var(--transition-fast);
}

.menu-rejoin-game:hover:not(:disabled) {
  background: linear-gradient(135deg, #c4983f, #8a6828);
}

.menu-rejoin-game:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Right column stacked buttons */
.menu-right-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.menu-right-stack .btn-secondary {
  flex: 1;
}

/* Other submenu overlay - narrower width */
.other-menu-overlay .menu-card {
  width: min(420px, 100%);
}

.menu-header {
  display: flex;
  gap: 16px;
  align-items: center;
}

.menu-icon {
  font-size: var(--font-2xl);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 10px 14px;
  border: 1px solid var(--border-subtle);
}

.menu-status {
  font-size: var(--font-base);
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-subtle);
}

.menu-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Options overlay */
.options-overlay .options-card {
  width: min(420px, 100%);
}

.options-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
}

.options-label {
  font-size: var(--font-base);
  color: var(--text-primary);
  font-weight: 500;
}

.options-slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.options-slider {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

.options-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-primary);
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.options-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.options-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-primary);
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.options-slider::-moz-range-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.options-value {
  min-width: 40px;
  font-size: var(--font-sm);
  color: var(--text-secondary);
  text-align: right;
}

/* Credits overlay */
.credits-overlay .credits-card {
  width: min(420px, 100%);
}

.credits-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
}

.credits-role {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.credits-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.credits-title {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.credits-name {
  font-size: var(--font-lg);
  color: var(--text-primary);
  font-weight: 600;
}

.credits-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.credits-list li {
  font-size: var(--font-base);
  color: var(--text-primary);
}

/* Changelog overlay */
.changelog-overlay .changelog-card {
  width: min(800px, 100%);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.changelog-content {
  flex: 1;
  overflow-y: auto;
  padding: 0 4px;
  margin-bottom: 16px;
  font-size: var(--font-sm);
  line-height: 1.5;
  color: var(--text-secondary);
}

.changelog-content h2 {
  font-size: var(--font-base);
  color: var(--text-primary);
  margin: 16px 0 8px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.changelog-content h2:first-child {
  margin-top: 0;
}

.changelog-content ul {
  margin: 0;
  padding-left: 20px;
}

.changelog-content li {
  margin: 4px 0;
}

.changelog-footer {
  flex-shrink: 0;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

#game-version {
  cursor: pointer;
  transition: color 0.15s ease;
}

#game-version:hover {
  color: var(--text-primary);
}

.tutorial-card {
  width: 100%;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}

.tutorial-overlay {
  padding: 0;
}

.tutorial-overlay .overlay-content {
  width: 100%;
  height: 100%;
  max-height: 100%;
}

.tutorial-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.tutorial-header h2 {
  margin: 6px 0 4px;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}

.tutorial-eyebrow {
  text-transform: uppercase;
  font-size: var(--font-sm);
  letter-spacing: 0.2em;
  color: var(--text-muted);
  margin: 0;
}

/* Tutorial content container */
.tutorial-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  min-height: 0;
}

/* Tutorial Engine — side-by-side layout */
.tutorial-engine {
  display: flex;
  gap: 24px;
  width: 100%;
  flex: 1;
  min-height: 0;
}

/* Demo stage (left side) */
.tutorial-stage {
  flex: 4;
  min-width: 0;
  background: var(--bg-field);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5%;
  padding: 24px;
  overflow: hidden;
  container-type: size;
  container-name: tutorial-stage;
}

/* Card slots — sized relative to stage container height */
.tutorial-stage-slot {
  opacity: 0;
  transition:
    opacity 0.4s ease-out,
    transform 0.7s ease-in;
  position: relative;
  flex-shrink: 0;
  z-index: 1;
  height: 55cqh;
  aspect-ratio: 5 / 7;
}

.tutorial-stage-slot .card {
  pointer-events: none;
}

/* Floating label inside stage */
.tutorial-stage-label {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255, 165, 0, 0.4);
  border-radius: 12px;
  padding: 8px 18px;
  font-size: var(--font-base);
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease-out;
  z-index: 10;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* Text panel (right side) */
.tutorial-text-panel {
  flex: 1.5;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0;
}

.tutorial-text-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
}

.tutorial-scene-title {
  margin: 0;
  font-size: var(--font-xl);
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}

.tutorial-scene-text {
  font-size: var(--font-base);
  color: var(--text-secondary);
  line-height: 1.6;
}

.tutorial-scene-text p {
  margin: 0 0 8px;
}

.tutorial-note {
  margin-top: 10px;
  font-size: var(--font-sm);
  color: var(--text-muted);
  font-style: italic;
}

/* Damage pop in tutorial */
.tutorial-damage-pop {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 28px;
  font-weight: 900;
  color: #ff4444;
  text-shadow:
    0 0 10px rgba(255, 0, 0, 0.7),
    0 2px 4px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 10;
  animation: tutorial-damage-pop 0.9s ease-out forwards;
}

@keyframes tutorial-damage-pop {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(0.6);
  }
  30% {
    transform: translateX(-50%) translateY(-15px) scale(1.15);
  }
  60% {
    opacity: 1;
    transform: translateX(-50%) translateY(-30px) scale(0.9);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-50px) scale(0.9);
  }
}

/* Attack ghost in tutorial */
.tutorial-attack-ghost {
  pointer-events: none;
  z-index: 1001;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(255, 165, 0, 0.4);
}

/* Tutorial navigation bar — sits atop text panel */
.tutorial-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  flex-shrink: 0;
}

.tutorial-nav-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  width: 36px;
  height: 36px;
  font-size: 18px;
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
  flex-shrink: 0;
}

.tutorial-nav-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.tutorial-nav-counter {
  flex: 1;
  text-align: center;
  font-size: var(--font-sm);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

/* Tutorial highlight effect */
.tutorial-highlight {
  animation: tutorial-highlight-glow 1.5s ease-in-out;
}

@keyframes tutorial-highlight-glow {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(255, 215, 0, 0);
  }
  30%,
  70% {
    box-shadow:
      0 0 20px rgba(255, 215, 0, 0.6),
      0 0 40px rgba(255, 215, 0, 0.3);
  }
}

/* Tutorial stat pulse effect */
.tutorial-pulse-stat .card {
  animation: tutorial-stat-breathe 1.5s ease-in-out;
}

@keyframes tutorial-stat-breathe {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.05);
    filter: brightness(1.15);
  }
}

/* Tutorial heal pop */
.tutorial-heal-pop {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 28px;
  font-weight: 900;
  color: #4caf50;
  text-shadow:
    0 0 10px rgba(76, 175, 80, 0.7),
    0 2px 4px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 10;
  animation: tutorial-damage-pop 0.9s ease-out forwards;
}

/* Tutorial buff pop */
.tutorial-buff-pop {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  font-weight: 900;
  color: #76ff03;
  text-shadow:
    0 0 10px rgba(118, 255, 3, 0.7),
    0 2px 4px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 10;
  animation: tutorial-buff-rise 1s ease-out forwards;
}

@keyframes tutorial-buff-rise {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(0.7);
  }
  30% {
    transform: translateX(-50%) translateY(-20px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-50px) scale(1);
  }
}

/* Tutorial spell burst */
.tutorial-spell-burst {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  z-index: 5;
  animation: tutorial-spell-flash 0.6s ease-out forwards;
}

.tutorial-spell-damage {
  background: radial-gradient(circle, rgba(255, 69, 0, 0.4) 0%, transparent 70%);
}

.tutorial-spell-default {
  background: radial-gradient(circle, rgba(79, 195, 247, 0.4) 0%, transparent 70%);
}

@keyframes tutorial-spell-flash {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  30% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
  .tutorial-engine {
    flex-direction: column;
  }
  .tutorial-stage {
    min-height: 250px;
  }
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 600;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.btn-primary:hover:not(:disabled),
.btn-secondary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
}

.menu-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.multiplayer-overlay .menu-form {
  display: none;
}

.multiplayer-overlay .menu-form.active {
  display: flex;
}

.menu-label {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.menu-input {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text-primary);
}

.menu-input:focus {
  outline: 2px solid rgba(240, 208, 120, 0.5);
  outline-offset: 2px;
}

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

.menu-error {
  min-height: 20px;
  font-size: var(--font-sm);
  color: #f87171;
}

.lobby-code {
  font-family: var(--font-display);
  font-size: var(--font-xl);
  letter-spacing: 0.2em;
  text-align: center;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.06);
}

/* ============================================================================
   AI SETUP OVERLAY
   ============================================================================ */

.ai-setup-section {
  margin-bottom: 20px;
}

/* AI Difficulty Selector */
.ai-difficulty-section {
  margin-bottom: 16px;
}

.ai-difficulty-label {
  display: block;
  font-size: var(--font-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.ai-difficulty-options {
  display: flex;
  gap: 8px;
}

.btn-difficulty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 2px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
}

.btn-difficulty:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text-primary);
}

.btn-difficulty.active {
  background: rgba(212, 168, 83, 0.15);
  border-color: var(--accent-gold);
  color: var(--text-primary);
}

.difficulty-name {
  font-size: var(--font-sm);
  font-weight: 500;
}

.difficulty-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: var(--font-xs);
  font-weight: 700;
  padding: 2px 4px;
  border-radius: 4px;
  background: var(--accent-gold);
  color: var(--bg-card);
  letter-spacing: 0.03em;
}

.difficulty-note {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.3;
}

.ai-deck-options {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.btn-deck-option {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 2px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-deck-option:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.deck-option-icon {
  font-size: var(--font-xl);
}

.deck-option-name {
  font-size: var(--font-base);
}

.ai-saved-decks {
  margin-top: 12px;
}

.menu-select {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--font-base);
  cursor: pointer;
}

.menu-select:focus {
  outline: none;
  border-color: var(--gold);
}

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

/* ============================================================================
   AI VS AI DECK PICKER
   ============================================================================ */

.ai-vs-ai-deck-overlay .menu-card {
  max-width: 800px;
  width: 90vw;
}

.ai-vs-ai-deck-picker {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: center;
  margin: 20px 0;
}

.ai-vs-ai-side {
  flex: 1;
  max-width: 300px;
}

.ai-vs-ai-side h3 {
  font-family: var(--font-display);
  font-size: var(--font-base);
  letter-spacing: 0.05em;
  text-align: center;
  margin: 0 0 12px;
  color: var(--text-secondary);
}

.ai-vs-ai-divider {
  font-family: var(--font-display);
  font-size: var(--font-xl);
  color: var(--gold);
  padding: 60px 10px;
  letter-spacing: 0.1em;
}

.ai-vs-ai-deck-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-vs-ai-deck-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 2px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
  width: 100%;
  text-align: left;
}

.ai-vs-ai-deck-btn:hover:not(.selected) {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.ai-vs-ai-deck-btn.selected {
  background: rgba(74, 222, 128, 0.15);
  border-color: #4ade80;
  position: relative;
}

.ai-vs-ai-deck-btn.selected::after {
  content: '✓';
  position: absolute;
  right: 12px;
  color: #4ade80;
  font-size: var(--font-lg);
  font-weight: bold;
}

.ai-vs-ai-deck-btn .deck-emoji {
  font-size: var(--font-lg);
}

.ai-vs-ai-deck-btn .deck-name {
  font-size: var(--font-base);
  flex: 1;
}

.ai-vs-ai-deck-btn.experimental {
  position: relative;
}

.ai-vs-ai-deck-btn .deck-experimental-badge {
  position: static;
  font-size: var(--font-xs);
  padding: 2px 6px;
  margin-left: auto;
}

/* Bug log styling */
.log-entry.log-bug {
  color: #ff4444;
  text-shadow:
    0 0 8px rgba(255, 0, 0, 0.6),
    0 0 16px rgba(255, 0, 0, 0.4);
  font-weight: bold;
  animation: bug-pulse 2s ease-in-out infinite;
}

@keyframes bug-pulse {
  0%,
  100% {
    text-shadow:
      0 0 8px rgba(255, 0, 0, 0.6),
      0 0 16px rgba(255, 0, 0, 0.4);
  }
  50% {
    text-shadow:
      0 0 12px rgba(255, 0, 0, 0.8),
      0 0 24px rgba(255, 0, 0, 0.6);
  }
}

/* AI thinking indicator */
.log-entry.log-ai-thinking {
  color: #8b5cf6;
  font-style: italic;
  border-left-color: #8b5cf6;
}

/* AI strategic thoughts (threat detection, lethal awareness) */
.log-entry.log-ai-strategic {
  color: #f59e0b;
  font-weight: 500;
  border-left-color: #f59e0b;
}

/* AI decision (card played, attack made) */
.log-entry.log-ai-decision {
  color: #10b981;
  font-weight: 600;
  border-left-color: #10b981;
}

/* AI danger warning */
.log-entry.log-ai-danger {
  color: #ef4444;
  font-weight: 600;
  border-left-color: #ef4444;
  animation: ai-danger-pulse 1s ease-in-out;
}

@keyframes ai-danger-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* AI lethal detected */
.log-entry.log-ai-lethal {
  color: #22c55e;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
  border-left-color: #22c55e;
}

.deck-select-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  min-height: 0;
}

/* Deck select overlay needs explicit height for flex layout to work */
.deck-select-overlay .overlay-content.deck-select-card {
  height: 100vh;
  max-height: 100vh;
}

/* When deck catalog home is showing, ensure proper flex layout for fixed back button */
.deck-select-card:has(.deck-catalog-home) {
  height: 100%;
}

.deck-select-card > .deck-catalog-back-container {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  padding: 16px 0 0;
  margin-top: auto;
}

.deck-select-header {
  display: flex;
  gap: 16px;
  align-items: center;
}

.deck-select-icon {
  font-size: var(--font-2xl);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 10px 14px;
  border: 1px solid var(--border-subtle);
}

.deck-select-header h2 {
  font-family: var(--font-display);
  letter-spacing: 0.05em;
  margin: 0 0 6px;
}

.deck-select-header p {
  margin: 0;
  color: var(--text-secondary);
}

.deck-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  overflow-y: auto;
  padding-right: 6px;
  flex: 1;
  min-height: 0;
}

.deck-select-panel {
  border-radius: 16px;
  padding: 16px;
  border: 1px solid transparent;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  color: #f4f4f4;
  background: rgba(255, 255, 255, 0.06);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.deck-select-panel .deck-emoji {
  font-size: var(--font-xl);
}

.deck-select-panel .deck-name {
  font-size: var(--font-lg);
  font-weight: 600;
}

.deck-select-panel .deck-status {
  font-size: var(--font-sm);
  color: rgba(255, 255, 255, 0.85);
}

.deck-select-panel .deck-meta {
  margin-top: auto;
  font-size: var(--font-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.deck-select-panel:hover:not(.disabled),
.deck-select-panel:focus-visible:not(.disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.4);
}

.deck-select-panel.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-style: dashed;
}

.deck-select-panel--fish {
  background: linear-gradient(135deg, rgba(54, 108, 180, 0.9), rgba(18, 40, 72, 0.95));
}

.deck-select-panel--bird {
  background: linear-gradient(135deg, rgba(200, 160, 40, 0.85), rgba(83, 52, 12, 0.95));
}

.deck-select-panel--mammal {
  background: linear-gradient(135deg, rgba(140, 92, 68, 0.85), rgba(60, 36, 24, 0.95));
}

.deck-select-panel--reptile {
  background: linear-gradient(135deg, rgba(60, 142, 74, 0.85), rgba(22, 66, 35, 0.95));
}

.deck-select-panel--amphibian {
  background: linear-gradient(135deg, rgba(92, 180, 116, 0.85), rgba(26, 92, 54, 0.95));
}

.deck-select-panel--arachnid {
  background: linear-gradient(135deg, rgba(48, 48, 48, 0.85), rgba(20, 20, 20, 0.95));
}

/* Desktop: pentagonal wedge formation for deck selection */
@media (min-width: 769px) {
  .deck-select-overlay .overlay-content.deck-select-card {
    width: 90vw;
    max-width: 1200px;
  }

  .deck-select-grid {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.2);
  }

  /* Hide extra text — just emoji + name in wedges */
  .deck-select-grid .deck-select-panel .deck-status,
  .deck-select-grid .deck-select-panel .deck-meta,
  .deck-select-grid .deck-select-panel .deck-experimental-badge {
    display: none;
  }

  /* Hide back button inside the star grid */
  .deck-select-grid .deck-select-back-btn,
  .deck-select-grid > div:not(.deck-select-panel) {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
  }

  /* All panels: absolute-fill, clipped to wedge */
  .deck-select-grid .deck-select-panel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: none;
    min-height: unset;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0;
    cursor: pointer;
    z-index: 1;
    transition:
      filter 0.35s ease,
      opacity 0.35s ease;
  }

  /* Wedge border lines — thin line overlay via box-shadow (Safari-safe, no clip-path: inherit) */
  .deck-select-grid .deck-select-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    pointer-events: none;
    z-index: 3;
  }

  /* === PENTAGONAL CLIP PATHS === */
  /* 5 wedges from center (50%,50%) to edges, 72° each */
  .deck-select-grid .deck-select-panel--fish {
    -webkit-clip-path: polygon(50% 50%, 13.7% 0%, 86.3% 0%);
    clip-path: polygon(50% 50%, 13.7% 0%, 86.3% 0%);
  }
  .deck-select-grid .deck-select-panel--bird {
    -webkit-clip-path: polygon(50% 50%, 86.3% 0%, 100% 0%, 100% 66.2%);
    clip-path: polygon(50% 50%, 86.3% 0%, 100% 0%, 100% 66.2%);
  }
  .deck-select-grid .deck-select-panel--mammal {
    -webkit-clip-path: polygon(50% 50%, 0% 66.2%, 0% 0%, 13.7% 0%);
    clip-path: polygon(50% 50%, 0% 66.2%, 0% 0%, 13.7% 0%);
  }
  .deck-select-grid .deck-select-panel--reptile {
    -webkit-clip-path: polygon(50% 50%, 100% 66.2%, 100% 100%, 50% 100%);
    clip-path: polygon(50% 50%, 100% 66.2%, 100% 100%, 50% 100%);
  }
  .deck-select-grid .deck-select-panel--amphibian {
    -webkit-clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0% 66.2%);
    clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0% 66.2%);
  }

  /* === POSITION CONTENT AT WEDGE CENTROIDS (padding bias) === */
  .deck-select-grid .deck-select-panel--fish {
    padding-bottom: 66%;
  }
  .deck-select-grid .deck-select-panel--bird {
    padding-left: 56%;
    padding-bottom: 30%;
  }
  .deck-select-grid .deck-select-panel--mammal {
    padding-right: 56%;
    padding-bottom: 30%;
  }
  .deck-select-grid .deck-select-panel--reptile {
    padding-left: 38%;
    padding-top: 48%;
  }
  .deck-select-grid .deck-select-panel--amphibian {
    padding-right: 38%;
    padding-top: 48%;
  }

  /* === WEDGE GRADIENTS (richer than flat color) === */
  .deck-select-grid .deck-select-panel--fish {
    background: radial-gradient(
      ellipse at 50% 20%,
      rgba(70, 140, 220, 0.9) 0%,
      rgba(20, 50, 100, 0.95) 70%
    );
  }
  .deck-select-grid .deck-select-panel--bird {
    background: radial-gradient(
      ellipse at 80% 25%,
      rgba(220, 180, 50, 0.85) 0%,
      rgba(100, 65, 15, 0.95) 70%
    );
  }
  .deck-select-grid .deck-select-panel--mammal {
    background: radial-gradient(
      ellipse at 15% 25%,
      rgba(160, 110, 80, 0.85) 0%,
      rgba(70, 40, 25, 0.95) 70%
    );
  }
  .deck-select-grid .deck-select-panel--reptile {
    background: radial-gradient(
      ellipse at 80% 80%,
      rgba(70, 160, 85, 0.85) 0%,
      rgba(20, 70, 35, 0.95) 70%
    );
  }
  .deck-select-grid .deck-select-panel--amphibian {
    background: radial-gradient(
      ellipse at 20% 80%,
      rgba(100, 200, 130, 0.85) 0%,
      rgba(25, 100, 55, 0.95) 70%
    );
  }

  /* === EMOJI + NAME STYLING === */
  .deck-select-grid .deck-select-panel .deck-emoji {
    font-size: 3rem;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
    transition:
      transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
      filter 0.35s ease;
    z-index: 2;
  }

  .deck-select-grid .deck-select-panel .deck-name {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
    z-index: 2;
    transition:
      transform 0.35s ease,
      letter-spacing 0.35s ease;
  }

  /* === HOVER: brighten wedge, scale content === */
  .deck-select-grid .deck-select-panel:hover:not(.disabled) {
    filter: brightness(1.3) saturate(1.2);
    z-index: 5;
  }

  .deck-select-grid .deck-select-panel:hover .deck-emoji {
    transform: scale(1.3);
    filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.6));
  }

  .deck-select-grid .deck-select-panel:hover .deck-name {
    transform: scale(1.1);
    letter-spacing: 0.12em;
  }

  /* Dim non-hovered wedges when any is hovered */
  .deck-select-grid:has(.deck-select-panel:hover) .deck-select-panel:not(:hover) {
    filter: brightness(0.6) saturate(0.7);
  }

  /* === ACTIVE: press feedback === */
  .deck-select-grid .deck-select-panel:active:not(.disabled) {
    filter: brightness(1.5) saturate(1.4);
  }

  .deck-select-grid .deck-select-panel:active .deck-emoji {
    transform: scale(0.9);
    transition-duration: 0.1s;
  }
}

.deck-select-panel--feline {
  background: linear-gradient(135deg, rgba(193, 154, 107, 0.85), rgba(139, 90, 43, 0.95));
}

.deck-select-panel--crustacean {
  background: linear-gradient(135deg, rgba(220, 100, 50, 0.85), rgba(180, 60, 30, 0.95));
}

.deck-select-panel--insect {
  background: linear-gradient(135deg, rgba(124, 179, 66, 0.85), rgba(56, 100, 28, 0.95));
}

/* Experimental deck badge */
.deck-experimental-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: linear-gradient(135deg, #ff6b35, #f7931e);
  color: #fff;
  font-size: var(--font-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.deck-select-panel.experimental {
  position: relative;
}

.deck-builder {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
}

/* Hearthstone-style 75/25 layout */
.deck-builder-layout {
  display: flex;
  flex: 1;
  gap: 16px;
  min-height: 0;
  overflow: hidden;
}

.deck-builder-main {
  flex: 3;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
}

.deck-builder-sidebar {
  flex: 1;
  max-width: 280px;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(20, 25, 35, 0.95), rgba(15, 20, 28, 0.98));
  border: 2px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.deck-builder-sidebar.drag-active {
  border-color: var(--gold);
  box-shadow:
    0 0 20px rgba(212, 168, 83, 0.3),
    inset 0 0 30px rgba(212, 168, 83, 0.1);
}

.deck-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(212, 168, 83, 0.15), rgba(212, 168, 83, 0.05));
  border-bottom: 1px solid var(--border-gold);
}

.deck-list-title {
  font-family: var(--font-display);
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--gold-light);
  letter-spacing: 0.05em;
}

.deck-list-count {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-secondary);
}

.deck-list-count.complete {
  color: #4caf50;
}

.deck-list-cards {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 0;
}

/* Individual deck list card row - Hearthstone-style with art strip */
.deck-list-row {
  position: relative;
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 10px;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
  background-color: rgba(30, 30, 40, 0.95);
  border-radius: 4px;
  margin: 2px 6px;
  overflow: hidden;
}

/* Art strip on right side - fixed width, crops to fill */
.deck-list-row::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 35%;
  background-image: var(--card-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Gradient overlay - solid dark on left, fading to reveal art on right */
.deck-list-row::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(30, 30, 40, 1) 0%,
    rgba(30, 30, 40, 1) 55%,
    rgba(30, 30, 40, 0.6) 70%,
    rgba(30, 30, 40, 0) 85%
  );
  z-index: 1;
}

.deck-list-row:hover {
  transform: scale(1.02);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.deck-list-row.drag-over {
  box-shadow: 0 0 8px var(--gold);
}

/* Color banner at top of row */
.deck-list-row-banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 2;
}

.deck-list-row-name {
  position: relative;
  z-index: 2;
  font-size: var(--font-sm);
  font-weight: 600;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Color-coded top banner by card type */
.deck-list-row[data-type='Prey'] .deck-list-row-banner {
  background: var(--type-prey);
}

.deck-list-row[data-type='Predator'] .deck-list-row-banner {
  background: var(--type-predator);
}

.deck-list-row[data-type='Spell'] .deck-list-row-banner {
  background: var(--type-spell);
}

.deck-list-row[data-type='Free Spell'] .deck-list-row-banner {
  background: var(--type-free-spell);
}

.deck-list-row[data-type='Trap'] .deck-list-row-banner {
  background: var(--type-trap);
}

/* Drop zone indicator when dragging */
.deck-list-cards.drag-active {
  background: rgba(212, 168, 83, 0.05);
}

.deck-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 24px;
  color: var(--text-secondary);
  text-align: center;
  font-size: var(--font-sm);
}

.deck-list-empty-icon {
  font-size: var(--font-2xl);
  margin-bottom: 8px;
  opacity: 0.5;
}

/* Dragging states for deck cards */
.deck-card.dragging {
  opacity: 0.5;
  transform: scale(0.95);
}

.deck-list-row.dragging {
  opacity: 0.5;
  transform: scale(0.98);
}

/* ============================================================================
   BORDERED DECK LIST ROW (My Decks screen variant)
   Shows type-colored border + rarity strip + rarity-colored name
   ============================================================================ */

.deck-list-row--bordered {
  border: 2px solid transparent;
  border-radius: 6px;
  margin: 4px 6px;
  position: relative;
  padding-left: 14px; /* Extra padding for rarity strip */
}

/* Type-colored outside border */
.deck-list-row--bordered[data-type='Prey'] {
  border-color: var(--prey);
}

.deck-list-row--bordered[data-type='Predator'] {
  border-color: var(--predator);
}

.deck-list-row--bordered[data-type='Spell'] {
  border-color: var(--spell);
}

.deck-list-row--bordered[data-type='Free Spell'] {
  border-color: var(--freespell);
}

.deck-list-row--bordered[data-type='Trap'] {
  border-color: var(--trap);
}

/* Hide top banner in bordered mode (border replaces it) */
.deck-list-row--bordered .deck-list-row-banner {
  display: none;
}

/* Rarity vertical strip on left edge (inside border) */
.deck-list-row-rarity-strip {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  z-index: 3;
  border-radius: 2px 0 0 2px;
}

/* Rarity colors for strip */
.deck-list-row-rarity-strip.rarity-common {
  background: #4ade80;
}

.deck-list-row-rarity-strip.rarity-uncommon {
  background: #60a5fa;
}

.deck-list-row-rarity-strip.rarity-rare {
  background: #c084fc;
}

.deck-list-row-rarity-strip.rarity-legendary {
  background: #fb923c;
  box-shadow: 0 0 6px rgba(251, 146, 60, 0.5);
}

.deck-list-row-rarity-strip.rarity-pristine {
  background: linear-gradient(180deg, #fff, #ffd4e5, #d4f1ff, #e8d4ff);
  animation: pristine-strip-glow 2s linear infinite;
}

@keyframes pristine-strip-glow {
  0%,
  100% {
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
  }
  50% {
    box-shadow: 0 0 12px rgba(255, 212, 229, 0.8);
  }
}

/* Rarity colors for card name text */
.deck-list-row--bordered .deck-list-row-name.rarity-common {
  color: #4ade80;
}

.deck-list-row--bordered .deck-list-row-name.rarity-uncommon {
  color: #60a5fa;
}

.deck-list-row--bordered .deck-list-row-name.rarity-rare {
  color: #c084fc;
}

.deck-list-row--bordered .deck-list-row-name.rarity-legendary {
  color: #fb923c;
  text-shadow: 0 0 8px rgba(251, 146, 60, 0.4);
}

.deck-list-row--bordered .deck-list-row-name.rarity-pristine {
  background: linear-gradient(90deg, #fff, #ffd4e5, #d4f1ff, #e8d4ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: pristine-name-shift 3s ease-in-out infinite;
}

@keyframes pristine-name-shift {
  0%,
  100% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(30deg);
  }
}

/* Cursor hint for deck cards */
.deck-grid .deck-card {
  cursor: pointer;
}

.deck-grid .deck-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.deck-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}

.deck-header h2 {
  font-family: var(--font-display);
  letter-spacing: 0.05em;
}

.deck-status {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.deck-status-item.invalid {
  color: var(--hp-red);
}

.deck-status-success {
  color: #4caf50;
  font-weight: 600;
  padding: 4px 8px;
  background: rgba(76, 175, 80, 0.15);
  border-radius: 4px;
  margin-top: 4px;
}

.deck-status-error {
  color: var(--hp-red);
  font-weight: 600;
  padding: 4px 8px;
  background: rgba(244, 67, 54, 0.15);
  border-radius: 4px;
  margin-top: 4px;
}

.deck-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.deck-name-row label {
  font-weight: 600;
  white-space: nowrap;
}

.deck-name-input {
  flex: 1;
  padding: 4px 8px;
  font-size: var(--font-base);
  font-family: inherit;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  background: var(--bg-primary);
  color: var(--text-primary);
  max-width: 200px;
}

.deck-name-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Deck Filter Input */
.deck-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.deck-filter-input {
  flex: 1;
  padding: 8px 12px;
  font-size: var(--font-base);
  font-family: inherit;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-primary);
  color: var(--text-primary);
}

.deck-filter-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}

.deck-filter-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.deck-filter-clear {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: var(--font-lg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.deck-filter-clear:hover {
  background: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--primary);
}

.deck-filter-clear.hidden {
  display: none;
}

.deck-tabs {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.deck-tab {
  flex: 1;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  color: var(--text-secondary);
}

.deck-tab.active {
  color: var(--gold-light);
  border-color: var(--border-gold);
}

.deck-tab.hidden {
  display: none;
}

.deck-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.deck-panel {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.deck-panel.active {
  display: flex;
}

.deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: min-content;
  gap: 12px;
  flex: 1;
  overflow: auto;
  padding: 4px;
  padding-right: 8px;
  align-content: start;
}

/* Hide drawer toggle and backdrop on desktop (will be overridden by mobile media query) */
.deck-drawer-toggle {
  display: none;
}

.deck-drawer-backdrop {
  display: none;
}

/* Mobile deck builder - 2 column grid with properly sized cards */
@media (max-width: 768px) {
  .deck-select-panel .deck-status,
  .deck-select-panel .deck-meta {
    display: none;
  }

  .deck-select-panel {
    min-height: 60px;
    padding: 10px 14px;
    gap: 4px;
    flex-direction: row;
    align-items: center;
  }

  .deck-select-panel .deck-emoji {
    font-size: 1.8rem;
  }

  .deck-select-panel .deck-name {
    font-size: 1.3rem;
    font-weight: 700;
  }

  .deck-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 4px;
    align-items: start;
  }

  .deck-grid .card {
    width: 100%;
    /* min-height as fallback for browsers where aspect-ratio doesn't work in grid context */
    min-height: 200px;
    aspect-ratio: 5 / 7;
  }

  /* Mobile drawer sidebar */
  .deck-builder-layout {
    position: relative;
  }

  .deck-builder-main {
    flex: 1;
    width: 100%;
  }

  .deck-builder-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 260px;
    max-width: 80vw;
    min-width: unset;
    flex: none;
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    border-radius: 12px 0 0 12px;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
  }

  .deck-builder-sidebar.drawer-open {
    transform: translateX(0);
  }

  /* Drawer backdrop */
  .deck-drawer-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }

  .deck-drawer-backdrop.visible {
    display: block;
  }

  /* Floating toggle button for mobile drawer */
  .deck-drawer-toggle {
    display: flex;
    position: fixed;
    bottom: 100px;
    right: 12px;
    z-index: 998;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    border: 2px solid var(--gold-light);
    color: var(--bg-primary);
    font-size: var(--font-base);
    font-weight: 700;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease;
  }

  .deck-drawer-toggle:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
  }

  .deck-drawer-toggle:active {
    transform: scale(0.95);
  }

  /* My Decks screen - fill full height on mobile */
  .deck-select-overlay.overlay {
    padding: 12px;
  }

  .deck-select-overlay .overlay-content.deck-select-card {
    height: calc(100dvh - 24px);
    max-height: calc(100dvh - 24px);
    min-height: calc(100dvh - 24px);
  }

  /* My Decks horizontal layout - use card grid on mobile */
  .deck-catalog-home--horizontal {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1 1 0;
    min-height: 0;
    padding: 12px;
    gap: 12px;
  }

  /* Force deck columns to fill available space on mobile */
  .deck-catalog-home--horizontal > * {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
  }

  /* On mobile, use the card grid inside the catalog home */
  .deck-catalog-home--horizontal .deck-card-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }

  .deck-column {
    min-height: 150px;
    display: flex;
    flex-direction: column;
  }

  .deck-column-cards {
    max-height: none;
    flex: 1;
    overflow-y: auto;
  }

  .deck-column--view-all,
  .deck-column--create {
    flex: 0 0 auto;
    min-height: 100px;
  }

  .deck-column-body {
    padding: 12px;
    gap: 8px;
  }

  .deck-column-create-btn {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }

  /* Back button fixed at bottom of deck select card on mobile */
  .deck-select-card > .deck-catalog-back-container {
    width: 100%;
    padding: 12px;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-card);
  }
}

.deck-card {
  cursor: pointer;
}

.deck-card.highlighted {
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(212, 168, 83, 0.6);
}

.deck-card.selected::after {
  content: 'Selected';
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.5);
  padding: 2px 6px;
  font-size: var(--font-xs);
  border-radius: 6px;
}

/* Old inspector - hidden, replaced by click-to-expand overlay */
.deck-inspector {
  display: none;
}

.deck-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
  padding-top: 8px;
}

.deck-actions button {
  flex: 1;
  min-width: 100px;
}

.deck-exit {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 600;
  color: var(--text-secondary);
}

.deck-save {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.deck-save.hidden {
  display: none;
}

.deck-load {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.deck-load.hidden {
  display: none;
}

.deck-load-list,
.deck-manage-list {
  display: grid;
  gap: 12px;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.deck-slot {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.deck-slot-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-weight: 600;
}

.deck-slot-meta {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.deck-slot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.deck-slot-actions button {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card-hover);
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.deck-slot-actions button.primary {
  color: var(--text-primary);
  border-color: var(--border-gold);
}

.deck-slot-actions button.danger {
  color: var(--hp-red);
  border-color: rgba(255, 89, 89, 0.6);
}

/* ============================================================================
   DECK LOAD CARD GRID
   Card-shaped deck selection (load/select deck screens)
   ============================================================================ */

.deck-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 16px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

.deck-card {
  aspect-ratio: 2.5/3.5;
  border-radius: 12px;
  border: 2px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 16px 12px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  position: relative;
  overflow: hidden;
  user-select: none;
}
.deck-card:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.deck-card:active {
  transform: scale(0.98);
}
.deck-card.selected {
  border-color: var(--color-primary, #3b82f6);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
}

/* Deck type backgrounds */
.deck-card--fish { background: linear-gradient(135deg, rgba(54,108,180,0.85), rgba(18,40,72,0.95)); }
.deck-card--bird { background: linear-gradient(135deg, rgba(200,160,40,0.8), rgba(83,52,12,0.95)); }
.deck-card--mammal { background: linear-gradient(135deg, rgba(140,92,68,0.8), rgba(60,36,24,0.95)); }
.deck-card--reptile { background: linear-gradient(135deg, rgba(60,142,74,0.8), rgba(22,66,35,0.95)); }
.deck-card--amphibian { background: linear-gradient(135deg, rgba(92,180,116,0.8), rgba(26,92,54,0.95)); }
.deck-card--unknown { background: linear-gradient(135deg, rgba(80,80,100,0.8), rgba(30,30,40,0.95)); }

/* Special action cards */
.deck-card--create {
  background: rgba(40,100,60,0.3);
  border: 2px dashed rgba(80,200,120,0.6);
}
.deck-card--create:hover {
  border-color: rgba(80,200,120,0.9);
  background: rgba(40,100,60,0.5);
}
.deck-card--random {
  background: rgba(180,120,40,0.2);
  border: 2px dashed rgba(220,160,60,0.6);
}
.deck-card--random:hover {
  border-color: rgba(220,160,60,0.9);
  background: rgba(180,120,40,0.4);
}

.deck-card-icon {
  font-size: 48px;
  opacity: 0.9;
}

.deck-card-name {
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  color: var(--text-primary);
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  word-break: break-word;
}

.deck-card-type {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.6);
}

.deck-card-count {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
}

@media (max-width: 400px) {
  .deck-card-grid {
    gap: 10px;
    padding: 10px;
  }
  .deck-card {
    padding: 12px 8px;
  }
  .deck-card-icon {
    font-size: 36px;
  }
  .deck-card-name {
    font-size: 12px;
  }
}

/* ============================================================================
   DECK CATALOG HOME SCREEN
   Card-based layout for deck management
   ============================================================================ */

.deck-catalog-home {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

.deck-catalog-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px 16px;
  min-height: 180px;
  width: 180px;
  flex: 0 0 180px;
  background: var(--bg-card);
  border: 2px solid var(--border-subtle);
  border-radius: 16px;
  transition: all 0.2s ease;
  text-align: center;
}

.deck-catalog-card:hover {
  border-color: var(--border-gold);
  background: var(--bg-card-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.deck-catalog-card--view-all {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 51, 234, 0.1));
  border-color: rgba(59, 130, 246, 0.4);
}

.deck-catalog-card--view-all:hover {
  border-color: rgba(59, 130, 246, 0.8);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(147, 51, 234, 0.2));
}

.deck-catalog-card--filled {
  border-color: var(--border-gold);
}

.deck-catalog-card--empty {
  border-style: dashed;
  opacity: 0.7;
}

.deck-catalog-card--empty:hover {
  opacity: 1;
}

.deck-catalog-card__icon {
  font-size: 48px;
  line-height: 1;
}

.deck-catalog-card__title {
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--text-primary);
}

.deck-catalog-card__subtitle {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.deck-catalog-card__actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.deck-catalog-card__btn {
  padding: 8px 12px;
  font-size: var(--font-lg);
  background: var(--bg-card-hover);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.deck-catalog-card__btn:hover {
  transform: scale(1.1);
}

.deck-catalog-card__btn--edit:hover {
  border-color: var(--border-gold);
  background: rgba(255, 215, 0, 0.1);
}

.deck-catalog-card__btn--delete:hover {
  border-color: var(--hp-red);
  background: rgba(255, 89, 89, 0.1);
}

/* Back button container - now a direct child of deck-select-card, outside scroll area */
.deck-catalog-back-container {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  padding: 16px 20px;
}

.deck-catalog-back-btn {
  padding: 12px 32px;
  font-size: var(--font-base);
  font-weight: 600;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.deck-catalog-back-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-gold);
  background: var(--bg-card-hover);
}

.deck-select-back-btn {
  padding: 10px 20px;
  font-size: var(--font-base);
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  margin-bottom: 8px;
}

.deck-select-back-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-gold);
}

/* ============================================================================
   MY DECKS HORIZONTAL LAYOUT
   Displays saved decks as columns with scrollable card lists
   ============================================================================ */

.deck-catalog-home--horizontal {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 16px;
  padding: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  align-items: stretch;
}

/* Horizontal scrollbar styling */
.deck-catalog-home--horizontal::-webkit-scrollbar {
  height: 10px;
}

.deck-catalog-home--horizontal::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}

.deck-catalog-home--horizontal::-webkit-scrollbar-thumb {
  background: var(--gold-dark);
  border-radius: 5px;
}

.deck-catalog-home--horizontal::-webkit-scrollbar-thumb:hover {
  background: var(--gold);
}

/* Individual deck column */
.deck-column {
  display: flex;
  flex-direction: column;
  width: 240px;
  min-width: 240px;
  max-width: 240px;
  background: rgba(20, 25, 35, 0.95);
  border: 2px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.deck-column--filled {
  border-color: var(--border-gold);
}

.deck-column--filled:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.deck-column--view-all {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(147, 51, 234, 0.15));
  border-color: rgba(59, 130, 246, 0.5);
  cursor: pointer;
}

.deck-column--view-all:hover {
  transform: translateY(-4px);
  border-color: rgba(59, 130, 246, 0.8);
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.2);
}

.deck-column--create {
  border-style: dashed;
  border-color: rgba(39, 174, 96, 0.5);
  cursor: pointer;
}

.deck-column--create:hover {
  transform: translateY(-4px);
  border-color: var(--prey);
  box-shadow: 0 8px 24px rgba(39, 174, 96, 0.2);
}

/* Column header */
.deck-column-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid var(--border-subtle);
}

.deck-column-title {
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deck-column-actions {
  display: flex;
  gap: 8px;
}

.deck-column-btn {
  padding: 6px 10px;
  font-size: var(--font-sm);
  background: var(--bg-card-hover);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.deck-column-btn:hover {
  transform: scale(1.05);
}

.deck-column-btn--edit:hover {
  border-color: var(--border-gold);
  background: rgba(255, 215, 0, 0.1);
}

.deck-column-btn--delete:hover {
  border-color: var(--hp-red);
  background: rgba(255, 89, 89, 0.1);
}

/* Scrollable card list container */
.deck-column-cards {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 4px;
}

.deck-column-cards::-webkit-scrollbar {
  width: 6px;
}

.deck-column-cards::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

.deck-column-cards::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: 3px;
}

/* For View All and Create columns - centered content */
.deck-column-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  gap: 16px;
}

.deck-column-description {
  color: var(--text-secondary);
  font-size: var(--font-sm);
  margin: 0;
}

.deck-column-create-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--prey), #1e8449);
  border: none;
  font-size: 32px;
  color: white;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deck-column-create-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 16px rgba(39, 174, 96, 0.4);
}

.deck-actions .btn-primary {
  flex: 1;
}

.deck-random {
  flex: 0 0 25%;
  background: var(--bg-card-hover);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.deck-random:hover {
  color: var(--gold-light);
  border-color: var(--border-gold);
}

.btn-primary {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: #2e2211;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.setup-card,
.pass-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
}

.setup-icon,
.pass-icon {
  font-size: var(--font-2xl);
}

.setup-rolls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--font-base);
}

.setup-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.setup-button-row {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.setup-actions button {
  background: var(--bg-card-hover);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 8px 12px;
}

/* Reaction Overlay (trap/discard decisions) */
.reaction-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
  width: min(360px, 90%);
}

.reaction-card-preview {
  display: flex;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

.reaction-card-preview .card {
  width: 120px;
  height: auto;
  aspect-ratio: 5 / 7;
  pointer-events: none;
}

.reaction-effect-text {
  color: var(--gold-light);
  font-size: 0.85rem;
  font-style: italic;
  margin-top: 4px;
  padding: 6px 12px;
  background: rgba(212, 168, 83, 0.1);
  border: 1px solid rgba(212, 168, 83, 0.25);
  border-radius: 6px;
}

.reaction-icon {
  font-size: var(--font-2xl);
}

.reaction-timer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-xl);
  font-weight: bold;
  color: var(--text-muted);
}

.reaction-timer.urgent {
  color: var(--text-danger, #e74c3c);
  animation: pulse-urgent 0.5s ease-in-out infinite;
}

@keyframes pulse-urgent {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

.reaction-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.reaction-actions button {
  background: var(--bg-card-hover);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: var(--font-base);
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.reaction-actions button:hover:not(:disabled) {
  background: var(--bg-card-selected, var(--bg-card-hover));
  border-color: var(--border-gold);
}

.reaction-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.reaction-actions button.primary {
  background: var(--bg-accent, #2ecc71);
  border-color: var(--border-accent, #27ae60);
  color: white;
}

.reaction-actions button.secondary {
  background: transparent;
}

/* Extreme zoom / very small viewports */
@media (max-height: 500px) {
  .game-container {
    min-height: 500px; /* Force minimum height */
    overflow: hidden; /* Never scroll - let content clip at edges */
  }

  .battlefield-layout {
    grid-template-rows: minmax(120px, 2.33fr) minmax(80px, 1fr); /* 70/30 ratio, ensure player field stays visible */
    min-height: 200px; /* Reduced but still visible */
  }

  .battlefield-center-column {
    gap: clamp(6px, 1vw, 12px); /* Tighter gap at extreme zoom */
    overflow-x: visible;
  }

  .field-slot {
    min-height: 10vh;
  }

  .card-inspector-panel,
  .game-log-panel {
    min-height: 120px; /* Reduce minimum heights */
  }

  .piles-section {
    min-height: 60px; /* Compact piles */
  }
}

/* Mobile portrait mode - tab-based layout */
@media (max-width: 767px) and (orientation: portrait) {
  /* Compact top bar for mobile portrait */
  .top-bar {
    padding: 8px 10px;
    gap: 6px;
  }

  .player-badge {
    padding: 4px 8px;
    gap: 6px;
  }

  .player-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .player-info.right {
    flex-direction: column;
    align-items: flex-end;
    position: relative;
  }

  /* Position AI speed toggle to left of name on mobile */
  .player-info.right .ai-speed-toggle {
    position: absolute;
    left: -20px;
    top: 0;
    margin: 0;
    font-size: var(--font-base);
  }

  .player-name {
    font-size: var(--font-sm);
  }

  .player-stats {
    font-size: var(--font-sm);
    gap: 4px;
  }

  .turn-badge {
    padding: 4px 10px;
    min-width: 70px;
  }

  .turn-number {
    font-size: var(--font-sm);
  }

  .phase-label {
    font-size: var(--font-xs);
  }

  /* Hide surrender button on mobile - tap player name instead */
  .surrender-btn {
    display: none;
  }

  /* Mobile field divider layout */
  .field-divider {
    padding-left: 8px;
    padding-right: 8px;
    justify-content: space-between;
  }

  .field-divider-text {
    text-align: left;
    flex-shrink: 1;
    min-width: 0; /* Allow text to shrink */
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .field-controls {
    position: relative; /* Remove absolute positioning on mobile */
    right: auto;
    top: auto;
    transform: none;
    flex-shrink: 0;
  }

  /* Hide field buttons on mobile - tap player name instead for surrender */
  .field-surrender-btn,
  .field-resync-btn {
    display: none;
  }

  /* Mobile scoreboard: prevent opponent hand from pushing player names off-screen */
  .scoreboard-row {
    overflow: hidden; /* Prevent horizontal overflow */
    padding: 6px 8px; /* Reduce padding on mobile */
  }

  .scoreboard-left,
  .scoreboard-right {
    flex-shrink: 1; /* Allow shrinking on mobile */
    min-width: 0; /* Remove min-width constraint */
    z-index: 10; /* Above opponent hand cards */
    position: relative; /* Enable z-index */
  }

  .scoreboard-player .player-name {
    font-size: var(--font-sm); /* Smaller name on mobile */
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .scoreboard-center {
    flex: 1 1 0; /* Can shrink to 0 width */
    min-width: 0; /* Allow shrinking below content size */
    overflow: visible; /* Cards can overflow visually */
    position: relative;
  }

  .opponent-hand-cards {
    position: absolute; /* Take out of flow so it doesn't expand parent */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1; /* Below player names/badges */
  }

  .emote-toggle {
    width: 28px;
    height: 28px;
  }

  .emote-toggle-left {
    margin-left: 4px;
  }

  .emote-toggle-right {
    margin-right: 4px;
  }

  .emote-toggle-icon {
    font-size: 0.9rem;
  }

  .battlefield-layout-three-column,
  .battlefield-layout-two-column {
    grid-template-columns: 1fr;
    overflow: hidden;
    position: relative;
    width: 100%;
    max-width: 100%;
  }

  .battlefield-left-column,
  .battlefield-right-column {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-dark);
    z-index: 200; /* Above everything including hand panel */
    overflow-y: auto;
    padding: 12px;
  }

  .battlefield-layout-three-column.show-inspector .battlefield-left-column,
  .battlefield-layout-two-column.show-inspector .battlefield-left-column {
    display: flex;
    flex-direction: column;
  }

  .battlefield-layout-three-column.show-history .battlefield-right-column,
  .battlefield-layout-two-column.show-history .battlefield-right-column {
    display: flex;
    flex-direction: column;
  }

  .battlefield-center-column {
    width: 100%;
    overflow-y: visible; /* Allow hand cards to extend upward */
  }

  .battlefield-layout {
    grid-template-rows: auto minmax(0, 0.9fr) auto; /* Slightly less field space to give room to hand */
    min-height: 0;
  }

  /* Hide old nav arrows on mobile - use history button in field controls instead */
  .mobile-nav-left,
  .mobile-nav-right {
    display: none;
  }

  .pages-container {
    padding: 14px 0 0;
    min-height: 450px;
  }

  .hand-panel {
    padding-bottom: calc(var(--safe-bottom) + 6px);
    padding-left: 8px;
    padding-right: 8px;
    overflow-x: hidden;
  }

  .hand-grid {
    padding: 0;
    overflow-x: hidden;
    max-width: 100%;
    /* Mobile needs larger initial overlap before JS calculates exact value */
    /* Cards are ~22vh*5/7 wide, need significant overlap to fit in viewport */
    --hand-overlap: calc(22vh * 5 / 7 * 0.6);
  }

  .hand-grid.is-dragging,
  .battlefield-center-column.is-dragging {
    overflow: visible !important;
  }

  /* Smaller card text for hand cards on mobile */
  .hand-grid .card .card-name {
    font-size: 9px !important;
    padding-top: 6px !important; /* Clear the colored header stripe */
    flex: 0 0 auto !important; /* Allow natural height instead of fixed % */
    min-height: 18px;
  }

  /* Reduce color stripe height on mobile hand cards */
  .hand-grid .card::before {
    height: 3px;
  }

  .hand-grid .card .card-header {
    padding: 3px 4px !important;
  }

  /* SVG effect text scales automatically - no font-size override needed */
  .hand-grid .card .card-effect {
    padding: 0;
  }

  .hand-grid .card .card-stat {
    font-size: 9px !important;
    padding: 1px 3px;
  }

  .hand-grid .card .card-footer {
    padding: 3px 4px !important;
    gap: 2px;
  }

  .hand-grid .card .card-stat-box {
    padding: 2px 4px !important;
    gap: 2px;
  }

  .hand-grid .card .card-stat-box .stat-emoji {
    font-size: 10px !important;
  }

  .hand-grid .card .card-stat-box .stat-value {
    font-size: 10px !important;
  }

  .hand-grid .card .card-text-area {
    font-size: 7px !important;
    line-height: 1.1;
  }

  .hand-grid .card .card-keywords {
    font-size: 9px !important;
    gap: 1px;
  }

  .hand-grid .card .card-keywords span {
    padding: 0 1px;
  }

  /* Mobile hand cards: rely on desktop layout - SVG effect text scales automatically */

  .hand-grid .card .card-actions button {
    font-size: 9px !important;
    padding: 2px 4px;
  }

  .card-inspector-panel,
  .game-log-panel {
    min-height: 150px;
    height: 100%;
  }

  /* Mobile panel close button */
  .mobile-panel-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--border-gold);
    color: var(--gold-light);
    font-size: var(--font-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
  }

  .mobile-panel-close:hover {
    background: rgba(212, 168, 83, 0.3);
  }

  .inspector-header,
  .log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* Fix action bar visibility on mobile */
  .action-bar.has-selection,
  .action-bar.has-actions {
    max-height: 45dvh; /* Use dynamic viewport height for browser UI */
    padding-bottom: calc(var(--safe-bottom) + 12px); /* Account for iOS home indicator */
  }
}

/* Mobile landscape or wider screens */
@media (max-width: 767px) and (orientation: landscape) {
  .battlefield-layout-three-column {
    grid-template-columns: 1fr 2fr 1fr;
    min-width: 100vw;
    min-height: 400px;
    overflow-x: auto;
  }

  .battlefield-left-column,
  .battlefield-center-column,
  .battlefield-right-column {
    min-width: 280px;
  }

  .pages-container {
    padding: 14px 0 0;
    min-height: 450px;
    overflow-x: auto;
  }

  .card-inspector-panel,
  .game-log-panel {
    min-height: 150px;
  }
}

@media (min-width: 768px) {
  .page-nav,
  .page-dots {
    display: flex;
  }

  .pages-container {
    padding: clamp(16px, 2.5vw, 30px) clamp(30px, 4vw, 80px) 0;
  }

  .action-bar {
    padding: clamp(8px, 1.5vw, 16px) clamp(30px, 4vw, 80px) clamp(12px, 2vw, 24px);
  }

  .overlay-content {
    border-radius: 24px;
  }
}

@media (min-width: 1200px) {
  .pages-container {
    padding: clamp(20px, 3vw, 40px) clamp(60px, 5vw, 120px) 0;
  }

  .field-row {
    gap: clamp(12px, 2vw, 24px);
  }

  .field-slot {
    min-height: clamp(140px, 18vh, 220px);
  }

  .action-bar {
    padding: clamp(12px, 2vw, 24px) clamp(60px, 5vw, 120px) clamp(16px, 2.5vw, 32px);
  }
}

/* Desktop: NEVER allow vertical scrollbar on battle UI */
@media (min-width: 768px) and (hover: hover) {
  html,
  body {
    overflow: hidden !important;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
  }

  .game-container {
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    min-height: 0; /* Remove min-height constraint on desktop */
    overflow: hidden !important;
  }

  .pages-container {
    min-height: 0; /* Remove min-height - let flex handle sizing */
    overflow: hidden;
  }

  .page {
    overflow: hidden;
  }

  .battlefield-layout-two-column,
  .battlefield-layout-three-column {
    min-height: 0; /* Remove min-height constraint */
    max-height: 100%;
    overflow: hidden;
  }

  .battlefield-center-column {
    min-height: 0;
    overflow: hidden;
  }

  .battlefield-right-column,
  .battlefield-left-column {
    min-height: 0;
    overflow: hidden; /* Don't scroll - fit to viewport */
  }

  .game-log-panel {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
  }

  .log-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto; /* Only log content scrolls, not the panel */
  }

  .battlefield-layout {
    min-height: 0;
    overflow: hidden;
  }

  .piles-section {
    flex-shrink: 0;
    min-height: auto;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes glow {
  0% {
    box-shadow: 0 0 8px rgba(212, 168, 83, 0.3);
  }
  50% {
    box-shadow: 0 0 18px rgba(212, 168, 83, 0.6);
  }
  100% {
    box-shadow: 0 0 8px rgba(212, 168, 83, 0.3);
  }
}

/* Start Phase - Attention-grabbing glow */
.turn-badge.phase-start {
  animation: glow-start 1.2s ease-in-out infinite;
  transform: translate(-50%, -50%) scale(1.05);
}

@keyframes glow-start {
  0% {
    box-shadow:
      0 0 15px rgba(212, 168, 83, 0.5),
      0 0 30px rgba(212, 168, 83, 0.3);
  }
  50% {
    box-shadow:
      0 0 30px rgba(212, 168, 83, 0.9),
      0 0 50px rgba(212, 168, 83, 0.5),
      0 0 70px rgba(212, 168, 83, 0.3);
  }
  100% {
    box-shadow:
      0 0 15px rgba(212, 168, 83, 0.5),
      0 0 30px rgba(212, 168, 83, 0.3);
  }
}

/* Drag and Drop Styles */
.draggable-card {
  cursor: grab;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

/* Prevent child elements from interfering with card drag */
.draggable-card * {
  -webkit-user-drag: none;
  user-drag: none;
}

.draggable-card img {
  pointer-events: none;
}

.draggable-card:hover {
  transform: translateY(-2px);
}

.draggable-card.dragging {
  cursor: grabbing;
  opacity: 0.5;
  transform: rotate(5deg) scale(1.05);
  z-index: 1000;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* When drag is in progress, collapse the enlarged hand-focus card back to resting position.
   Chrome doesn't always repaint before setDragImage captures the element, so the CSS
   override ensures the card shrinks even if the class removal hasn't visually applied yet. */
.drag-in-progress .hand-grid .card.hand-focus {
  pointer-events: none;
  transform: translateY(calc(10% + var(--card-offset-y, 0px))) rotate(var(--card-rotation, 0deg)) !important;
  z-index: calc(10 + var(--card-index, 0)) !important;
  box-shadow: none !important;
}

/* Suppress hand card hover enlargement during targeting selection */
.targeting-active .hand-grid .card.hand-focus {
  transform: translateY(calc(10% + var(--card-offset-y, 0px))) rotate(var(--card-rotation, 0deg));
  z-index: calc(10 + var(--card-index, 0));
  box-shadow: none;
}

/* Valid target highlighting */
.valid-target {
  box-shadow:
    0 0 20px rgba(231, 76, 60, 0.8),
    inset 0 0 20px rgba(231, 76, 60, 0.3);
  border: 2px solid #e74c3c;
  animation: target-pulse 1s infinite;
}

.invalid-target {
  opacity: 0.5;
  pointer-events: none;
}

/* Lure creature flash when player tries to attack a non-lure target */
.lure-must-target {
  animation: lure-shake 0.5s ease-in-out !important;
  box-shadow:
    0 0 24px rgba(231, 76, 60, 0.9),
    0 0 48px rgba(231, 76, 60, 0.5) !important;
  z-index: 100;
}

@keyframes lure-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  50%,
  90% {
    transform: translateX(-6px);
  }
  30%,
  70% {
    transform: translateX(6px);
  }
}

.consumption-target {
  box-shadow:
    0 0 20px rgba(241, 196, 15, 0.8),
    inset 0 0 20px rgba(241, 196, 15, 0.3);
  border: 2px solid #f1c40f;
  animation: consumption-pulse 1s infinite;
}

@keyframes target-pulse {
  0%,
  100% {
    box-shadow:
      0 0 20px rgba(231, 76, 60, 0.8),
      inset 0 0 20px rgba(231, 76, 60, 0.3);
  }
  50% {
    box-shadow:
      0 0 30px rgba(231, 76, 60, 1),
      inset 0 0 30px rgba(231, 76, 60, 0.5);
  }
}

@keyframes consumption-pulse {
  0%,
  100% {
    box-shadow:
      0 0 20px rgba(241, 196, 15, 0.8),
      inset 0 0 20px rgba(241, 196, 15, 0.3);
  }
  50% {
    box-shadow:
      0 0 30px rgba(241, 196, 15, 1),
      inset 0 0 30px rgba(241, 196, 15, 0.5);
  }
}

/* On-field effect targeting glow (gold) */
.effect-target {
  animation: effect-target-pulse 1s infinite;
  cursor: pointer !important;
  z-index: 10;
  position: relative;
}

@keyframes effect-target-pulse {
  0%,
  100% {
    box-shadow:
      0 0 8px 2px rgba(255, 200, 50, 0.6),
      inset 0 0 8px rgba(255, 200, 50, 0.2);
  }
  50% {
    box-shadow:
      0 0 16px 6px rgba(255, 200, 50, 0.9),
      inset 0 0 16px rgba(255, 200, 50, 0.4);
  }
}

.effect-target-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Targeting banner */
.targeting-banner {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.92);
  color: #ffd700;
  padding: 28px 24px;
  font-size: 1.1rem;
  z-index: 1000;
  border-top: 2px solid rgba(255, 215, 0, 0.4);
  border-bottom: 2px solid rgba(255, 215, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.targeting-banner .cancel-targeting {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}

.targeting-banner .cancel-targeting:hover {
  background: rgba(255, 255, 255, 0.25);
}

.targeting-banner .skip-targeting {
  background: rgba(255, 200, 50, 0.2);
  color: #ffd700;
  border: 1px solid rgba(255, 215, 0, 0.4);
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}

.targeting-banner .skip-targeting:hover {
  background: rgba(255, 200, 50, 0.35);
}

/* Option selection overlay (chooseOption pre-resolution) */
.option-selection-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.95);
  border: 1px solid rgba(255, 215, 0, 0.4);
  border-radius: 12px;
  padding: 20px 28px;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 240px;
}

.option-selection-header {
  color: #ffd700;
  font-size: 1.1rem;
  text-align: center;
  margin-bottom: 4px;
}

.option-selection-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.option-selection-btn {
  background: rgba(255, 200, 50, 0.15);
  color: #fff;
  border: 1px solid rgba(255, 215, 0, 0.3);
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.15s;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.option-label {
  font-weight: 600;
}

.option-description {
  font-size: 0.8rem;
  color: #aaa;
  font-weight: normal;
}

.option-selection-btn:hover {
  background: rgba(255, 200, 50, 0.35);
  border-color: rgba(255, 215, 0, 0.6);
}

.option-selection-overlay .cancel-targeting {
  background: rgba(255, 255, 255, 0.1);
  color: #aaa;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 6px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  margin-top: 4px;
}

.option-selection-overlay .cancel-targeting:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* Token preview shown on hover for summon options */
.option-token-preview {
  position: absolute;
  left: calc(100% + 16px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.option-preview-card {
  width: 160px;
  height: auto;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.4));
}

/* Card selection overlay (deck tutor, large card picks) */
.card-selection-overlay {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 80dvh;
  background: rgba(0, 0, 0, 0.92);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 16px;
  overflow-y: auto;
}

.card-selection-overlay.minimized {
  max-height: none;
}

.card-selection-overlay.minimized .card-selection-overlay-grid {
  display: none;
}

.card-selection-overlay-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
  color: #ffd700;
  font-size: 1.1rem;
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.95);
  padding: 8px 16px;
  border-radius: 6px;
  width: 100%;
  justify-content: center;
}

.card-selection-overlay-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: min-content;
  gap: 10px;
  overflow-y: auto;
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
}

.card-selection-overlay-grid .card {
  cursor: pointer;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
  width: 100%;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 5 / 7;
  min-height: 0;
  flex: none;
  overflow: hidden;
}

.card-selection-overlay-grid .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 12px 4px rgba(255, 200, 50, 0.5);
}

/* Extended consumption - predator that can consume more prey */
.extended-consumption-active {
  box-shadow:
    0 0 25px rgba(39, 174, 96, 0.9),
    inset 0 0 15px rgba(39, 174, 96, 0.4);
  border: 2px solid #27ae60;
  animation: extended-consumption-pulse 1.5s infinite;
  cursor: grab;
}

.extended-consumption-active:active {
  cursor: grabbing;
}

@keyframes extended-consumption-pulse {
  0%,
  100% {
    box-shadow:
      0 0 25px rgba(39, 174, 96, 0.9),
      inset 0 0 15px rgba(39, 174, 96, 0.4);
  }
  50% {
    box-shadow:
      0 0 35px rgba(39, 174, 96, 1),
      inset 0 0 25px rgba(39, 174, 96, 0.6);
  }
}

/* Drop zone styles */
.field-slot.valid-drop-zone {
  background: rgba(46, 204, 113, 0.2);
  border: 2px dashed #2ecc71;
  animation: drop-zone-pulse 1s infinite;
}

.player-badge.valid-drop-zone {
  background: rgba(231, 76, 60, 0.2);
  border: 2px dashed #e74c3c;
  animation: player-target-pulse 1s infinite;
}

@keyframes drop-zone-pulse {
  0%,
  100% {
    background: rgba(46, 204, 113, 0.2);
    border: 2px dashed #2ecc71;
  }
  50% {
    background: rgba(46, 204, 113, 0.4);
    border: 2px dashed #27ae60;
  }
}

@keyframes player-target-pulse {
  0%,
  100% {
    background: rgba(231, 76, 60, 0.2);
    border: 2px dashed #e74c3c;
  }
  50% {
    background: rgba(231, 76, 60, 0.4);
    border: 2px dashed #c0392b;
  }
}

/* Spell target highlighting (blue) */
.spell-target {
  box-shadow:
    0 0 20px rgba(52, 152, 219, 0.8),
    inset 0 0 20px rgba(52, 152, 219, 0.3);
  border: 2px solid #3498db !important;
  animation: spell-target-pulse 1s infinite;
}

.spell-target.card {
  transform: scale(1.02);
}

@keyframes spell-target-pulse {
  0%,
  100% {
    box-shadow:
      0 0 20px rgba(52, 152, 219, 0.8),
      inset 0 0 20px rgba(52, 152, 219, 0.3);
    border-color: #3498db;
  }
  50% {
    box-shadow:
      0 0 30px rgba(52, 152, 219, 1),
      inset 0 0 30px rgba(52, 152, 219, 0.5);
    border-color: #2980b9;
  }
}

/* Rejection shake when dropping a targeted spell on an invalid target */
.spell-reject-shake {
  animation: spell-reject-shake 0.4s ease-in-out !important;
  box-shadow: 0 0 16px rgba(231, 76, 60, 0.8) !important;
}

@keyframes spell-reject-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  15%,
  45%,
  75% {
    transform: translateX(-5px);
  }
  30%,
  60%,
  90% {
    transform: translateX(5px);
  }
}

/* Spell drop zone (player field area) */
.spell-drop-zone {
  background: rgba(52, 152, 219, 0.15) !important;
  border: 2px dashed #3498db !important;
  animation: spell-drop-zone-pulse 1s infinite;
  border-radius: var(--radius);
}

.player-field.spell-drop-zone {
  background: rgba(52, 152, 219, 0.1) !important;
  box-shadow: inset 0 0 30px rgba(52, 152, 219, 0.2);
}

.field-slot.spell-drop-zone {
  background: rgba(52, 152, 219, 0.2) !important;
}

@keyframes spell-drop-zone-pulse {
  0%,
  100% {
    background: rgba(52, 152, 219, 0.15);
    border: 2px dashed #3498db;
  }
  50% {
    background: rgba(52, 152, 219, 0.25);
    border: 2px dashed #2980b9;
  }
}

/* Epic Victory Screen Styles */
.victory-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.95) 100%);
  display: none; /* Hard hide by default to prevent flash on page load */
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
}

.victory-overlay.show {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

.victory-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
}

.victory-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.victory-rays {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(212, 168, 83, 0.1) 10deg,
    rgba(212, 168, 83, 0.3) 20deg,
    transparent 30deg,
    transparent 60deg,
    rgba(212, 168, 83, 0.1) 70deg,
    rgba(212, 168, 83, 0.3) 80deg,
    transparent 90deg,
    transparent 120deg,
    rgba(212, 168, 83, 0.1) 130deg,
    rgba(212, 168, 83, 0.3) 140deg,
    transparent 150deg,
    transparent 180deg,
    rgba(212, 168, 83, 0.1) 190deg,
    rgba(212, 168, 83, 0.3) 200deg,
    transparent 210deg,
    transparent 240deg,
    rgba(212, 168, 83, 0.1) 250deg,
    rgba(212, 168, 83, 0.3) 260deg,
    transparent 270deg,
    transparent 300deg,
    rgba(212, 168, 83, 0.1) 310deg,
    rgba(212, 168, 83, 0.3) 320deg,
    transparent 330deg,
    transparent 360deg
  );
  animation: victory-rotate 20s linear infinite;
  opacity: 0;
  transition: opacity 2s ease;
}

.victory-overlay.show .victory-rays {
  opacity: 1;
}

@keyframes victory-rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.victory-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.victory-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--gold);
  animation: victory-particle-float 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes victory-particle-float {
  0%,
  100% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) rotate(720deg);
    opacity: 0;
  }
}

.victory-content {
  position: relative;
  text-align: center;
  color: var(--text-primary);
  z-index: 10;
  transform: scale(0.5) rotateX(90deg);
  opacity: 0;
  transition: all 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: auto;
  /* Viewport-relative sizing to fit any screen */
  max-height: 90vh;
  max-width: 90vw;
  overflow-y: auto;
  padding: 2vh 4vw;
}

.victory-overlay.show .victory-content {
  transform: scale(1) rotateX(0deg);
  opacity: 1;
}

.victory-crown {
  font-size: min(12vh, 100px);
  margin-bottom: 1.5vh;
  animation: victory-crown-bounce 2s ease-in-out infinite;
  text-shadow:
    0 0 30px var(--gold),
    0 0 60px var(--gold);
  filter: drop-shadow(0 0 20px var(--gold));
}

@keyframes victory-crown-bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-2vh);
  }
  60% {
    transform: translateY(-1vh);
  }
}

.victory-title {
  font-family: var(--font-display);
  font-size: min(8vh, 5rem);
  font-weight: 900;
  letter-spacing: 0.15em;
  margin: 0 0 1.5vh 0;
  background: linear-gradient(45deg, var(--gold), var(--gold-light), var(--gold));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px rgba(212, 168, 83, 0.5);
  animation: victory-title-glow 2s ease-in-out infinite alternate;
}

@keyframes victory-title-glow {
  from {
    filter: drop-shadow(0 0 20px var(--gold));
  }
  to {
    filter: drop-shadow(0 0 40px var(--gold-light)) drop-shadow(0 0 60px var(--gold));
  }
}

.victory-winner {
  font-family: var(--font-display);
  font-size: min(4vh, 2.5rem);
  font-weight: 600;
  margin: 0 0 1vh 0;
  color: var(--gold-light);
  text-shadow: 0 0 20px var(--gold);
}

.victory-subtitle {
  font-size: min(2.5vh, 1.25rem);
  margin: 0 0 3vh 0;
  color: var(--text-secondary);
  font-weight: 500;
}

.victory-stats {
  display: flex;
  justify-content: center;
  gap: min(4vw, 30px);
  margin: 2vh 0;
  opacity: 0;
  transform: translateY(30px);
  transition: all 1s ease 0.5s;
  flex-wrap: wrap;
}

.victory-overlay.show .victory-stats {
  opacity: 1;
  transform: translateY(0);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: min(2vh, 15px) min(2vw, 15px);
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid var(--border-gold);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  min-width: min(15vw, 100px);
}

.stat-label {
  font-size: min(1.5vh, 0.8rem);
  color: var(--text-secondary);
  margin-bottom: 0.5vh;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.stat-value {
  font-family: var(--font-display);
  font-size: min(3vh, 1.5rem);
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 10px var(--gold);
}

/* Victory Pack Reward */
.victory-reward {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5vh;
  margin: 2vh 0;
  padding: min(2vh, 15px) min(4vw, 30px);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(147, 51, 234, 0.2));
  border: 2px solid #60a5fa;
  border-radius: 12px;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.victory-overlay.show .victory-reward {
  opacity: 1;
  transform: scale(1);
}

.victory-reward.animate {
  animation: reward-pulse 2s ease-in-out infinite;
}

@keyframes reward-pulse {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(96, 165, 250, 0.4);
  }
  50% {
    box-shadow:
      0 0 40px rgba(96, 165, 250, 0.7),
      0 0 60px rgba(147, 51, 234, 0.4);
  }
}

.victory-reward-icon {
  font-size: min(4vh, 2.5rem);
  animation: reward-bounce 1s ease-in-out infinite;
}

@keyframes reward-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.5vh);
  }
}

.victory-reward-text {
  font-size: min(2vh, 1rem);
  font-weight: 700;
  color: #60a5fa;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.victory-actions {
  display: flex;
  gap: min(2vw, 15px);
  justify-content: center;
  opacity: 0;
  transform: translateY(30px);
  transition: all 1s ease 1s;
  margin-top: 2vh;
}

.victory-overlay.show .victory-actions {
  opacity: 1;
  transform: translateY(0);
}

.victory-menu {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: #2e2211;
  box-shadow: 0 10px 30px rgba(212, 168, 83, 0.3);
  padding: min(1.5vh, 12px) min(4vw, 30px);
  font-size: min(2vh, 1rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 100;
  pointer-events: auto;
}

.victory-menu:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px rgba(212, 168, 83, 0.5);
}

/* AI vs AI Auto-restart Countdown */
.victory-countdown {
  margin-top: 20px;
  padding: 15px 25px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  border: 1px solid rgba(100, 200, 255, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
}

.victory-countdown:hover {
  background: rgba(0, 0, 0, 0.7);
  border-color: rgba(255, 100, 100, 0.5);
}

.countdown-text {
  font-size: 1.1rem;
  color: #a0d8ff;
  font-weight: 500;
}

.countdown-number {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 700;
  color: #64d8ff;
  min-width: 1.5em;
  text-align: center;
  animation: countdown-pulse 1s ease-in-out infinite;
}

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

.countdown-hint {
  font-size: 0.85rem;
  color: #888;
  margin-top: 5px;
  transition: color 0.3s ease;
}

.victory-countdown:hover .countdown-hint {
  color: #ff8888;
}

/* Multiplayer Rematch Options */
.victory-rematch-options {
  display: flex;
  flex-direction: column;
  gap: min(1.2vh, 10px);
  align-items: center;
}

.victory-rematch,
.victory-rematch-deck {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: #2e2211;
  box-shadow: 0 8px 25px rgba(212, 168, 83, 0.3);
  padding: min(1.2vh, 10px) min(3.5vw, 28px);
  font-size: min(1.8vh, 0.95rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.victory-rematch:hover:not(:disabled),
.victory-rematch-deck:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(212, 168, 83, 0.5);
}

.victory-main-menu {
  background: rgba(80, 80, 80, 0.6);
  color: #bbb;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  padding: min(1vh, 8px) min(3vw, 24px);
  font-size: min(1.6vh, 0.85rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: min(0.5vh, 5px);
}

.victory-main-menu:hover:not(:disabled) {
  background: rgba(100, 100, 100, 0.7);
  color: #ddd;
}

/* Disabled state for rematch buttons */
.victory-rematch:disabled,
.victory-rematch-deck:disabled,
.victory-main-menu:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Selected state for rematch buttons */
.victory-rematch.selected,
.victory-rematch-deck.selected {
  border: 2px solid #5a5;
  box-shadow: 0 0 20px rgba(100, 255, 100, 0.4);
}

.victory-main-menu.selected {
  border: 2px solid #a55;
  box-shadow: 0 0 15px rgba(255, 100, 100, 0.3);
}

/* Opponent status indicator */
.victory-opponent-status {
  margin-top: min(1.5vh, 12px);
  padding: min(1vh, 8px) min(2vw, 16px);
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  animation: fadeInUp 0.3s ease;
  text-align: center;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.status-accepted {
  color: #5f5;
  font-weight: 500;
  font-size: min(1.6vh, 0.9rem);
}

.status-rejected {
  color: #f55;
  font-weight: 500;
  font-size: min(1.6vh, 0.9rem);
}

/* Victory screen entrance animations */
.victory-overlay.show .victory-crown {
  animation-delay: 0.5s;
}

.victory-overlay.show .victory-title {
  animation-delay: 0.8s;
}

.victory-overlay.show .victory-winner {
  animation-delay: 1.1s;
}

.victory-overlay.show .victory-subtitle {
  animation-delay: 1.4s;
}

/* ============================================================================
   EMOTE SYSTEM
   ============================================================================ */

/* Emote Toggle Button */
.emote-toggle {
  display: none; /* Hidden by default, shown only in online mode */
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #4a5568, #2d3748);
  border: 2px solid #718096;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
}

.emote-toggle-left {
  margin-left: 8px;
  margin-right: auto;
}

.emote-toggle-right {
  margin-right: 8px;
  margin-left: auto;
}

.emote-toggle:hover {
  background: linear-gradient(135deg, #5a6578, #3d4758);
  border-color: #a0aec0;
  transform: scale(1.05);
}

.emote-toggle:active {
  transform: scale(0.95);
}

.emote-toggle.active {
  background: linear-gradient(135deg, #4299e1, #3182ce);
  border-color: #63b3ed;
}

.emote-toggle-icon {
  font-size: 1.1rem;
}

/* Show emote toggles in online mode */
.online-mode .emote-toggle {
  display: flex;
}

/* Emote Panel */
.emote-panel {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
  border: 2px solid #4a5568;
  border-radius: 16px;
  padding: 16px;
  z-index: 1000;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
  min-width: 280px;
}

.emote-panel.active {
  display: block;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

.emote-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #4a5568;
}

.emote-panel-title {
  color: #e2e8f0;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.emote-squelch-btn {
  background: transparent;
  border: 1px solid #4a5568;
  border-radius: 8px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.2s ease;
}

.emote-squelch-btn:hover {
  background: #4a5568;
}

.emote-squelch-btn.active {
  background: #e53e3e;
  border-color: #fc8181;
}

.emote-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.emote-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 8px;
  background: linear-gradient(135deg, #2d3748, #1a202c);
  border: 1px solid #4a5568;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.emote-btn:hover {
  background: linear-gradient(135deg, #4a5568, #2d3748);
  border-color: #718096;
  transform: translateY(-2px);
}

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

.emote-btn-emoji {
  font-size: 1.5rem;
}

.emote-btn-label {
  color: #a0aec0;
  font-size: 0.75rem;
  font-weight: 500;
}

/* Emote Bubble - Player 0 (right side of scoreboard) - bubble appears to LEFT (inner) */
.emote-bubble {
  position: absolute;
  top: 50%;
  left: auto;
  right: 100%;
  transform: translateY(-50%) translateX(10px);
  background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
  border: 2px solid #63b3ed;
  border-radius: 16px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 16px rgba(66, 153, 225, 0.4);
  margin-left: 0;
  margin-right: 8px;
}

.emote-bubble::before {
  content: '';
  position: absolute;
  left: auto;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: none;
  border-left: 8px solid #63b3ed;
}

.emote-bubble::after {
  content: '';
  position: absolute;
  left: auto;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: none;
  border-left: 6px solid #4299e1;
}

.emote-bubble.visible {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  animation: emote-bubble-pop-left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.emote-bubble.fading {
  opacity: 0;
  transform: translateY(-50%) translateX(-10px);
}

@keyframes emote-bubble-pop-left {
  0% {
    transform: translateY(-50%) translateX(0) scale(0.3);
    opacity: 0;
  }
  30% {
    transform: translateY(-50%) translateX(0) scale(1.2);
    opacity: 1;
  }
  45% {
    transform: translateY(-50%) translateX(4px) scale(1.1);
  }
  55% {
    transform: translateY(-50%) translateX(-4px) scale(1.05);
  }
  65% {
    transform: translateY(-50%) translateX(3px) scale(1.02);
  }
  75% {
    transform: translateY(-50%) translateX(-2px) scale(1.01);
  }
  100% {
    transform: translateY(-50%) translateX(0) scale(1);
  }
}

/* Player 1 (left side of scoreboard) - bubble appears to the RIGHT (inner) */
.emote-bubble-player-1 {
  left: 100%;
  right: auto;
  margin-left: 8px;
  margin-right: 0;
  transform: translateY(-50%) translateX(-10px);
}

.emote-bubble-player-1::before {
  left: -8px;
  right: auto;
  border-left: none;
  border-right: 8px solid #63b3ed;
}

.emote-bubble-player-1::after {
  left: -6px;
  right: auto;
  border-left: none;
  border-right: 6px solid #4299e1;
}

.emote-bubble-player-1.visible {
  transform: translateY(-50%) translateX(0);
  animation: emote-bubble-pop-right 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.emote-bubble-player-1.fading {
  transform: translateY(-50%) translateX(10px);
}

@keyframes emote-bubble-pop-right {
  0% {
    transform: translateY(-50%) translateX(0) scale(0.3);
    opacity: 0;
  }
  30% {
    transform: translateY(-50%) translateX(0) scale(1.2);
    opacity: 1;
  }
  45% {
    transform: translateY(-50%) translateX(4px) scale(1.1);
  }
  55% {
    transform: translateY(-50%) translateX(-4px) scale(1.05);
  }
  65% {
    transform: translateY(-50%) translateX(3px) scale(1.02);
  }
  75% {
    transform: translateY(-50%) translateX(-2px) scale(1.01);
  }
  100% {
    transform: translateY(-50%) translateX(0) scale(1);
  }
}

.emote-bubble-emoji {
  font-size: 1.25rem;
}

.emote-bubble-text {
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Emote panel backdrop (click outside to close) */
.emote-panel-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 999;
}

.emote-panel-backdrop.active {
  display: block;
}

/* ============================================================================
   CARD RARITY SYSTEM
   ============================================================================ */

/* Rarity title text effects */
.card-title.rarity-common {
  color: #4ade80;
  text-shadow: 0 0 4px rgba(74, 222, 128, 0.3);
}

.card-title.rarity-uncommon {
  color: #60a5fa;
  text-shadow: 0 0 6px rgba(96, 165, 250, 0.4);
}

.card-title.rarity-rare {
  color: #c084fc;
  text-shadow: 0 0 8px rgba(192, 132, 252, 0.5);
}

.card-title.rarity-legendary {
  color: #fb923c;
  text-shadow:
    0 0 8px rgba(251, 146, 60, 0.6),
    0 0 16px rgba(251, 146, 60, 0.4);
  animation: legendary-glow 2s ease-in-out infinite;
}

@keyframes legendary-glow {
  0%,
  100% {
    text-shadow:
      0 0 8px rgba(251, 146, 60, 0.6),
      0 0 16px rgba(251, 146, 60, 0.4);
  }
  50% {
    text-shadow:
      0 0 12px rgba(251, 146, 60, 0.8),
      0 0 24px rgba(251, 146, 60, 0.5);
  }
}

.card-title.rarity-pristine {
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #ffd4e5 15%,
    #d4f1ff 30%,
    #e8d4ff 45%,
    #ffffff 60%,
    #d4ffe8 75%,
    #fff4d4 90%,
    #ffffff 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: pristine-shimmer 3s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
}

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

/* Rarity indicator gem (optional - for card corners) */
.rarity-gem {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  top: 4px;
  right: 4px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.rarity-gem.common {
  background: #4ade80;
}
.rarity-gem.uncommon {
  background: #60a5fa;
}
.rarity-gem.rare {
  background: #c084fc;
}
.rarity-gem.legendary {
  background: #fb923c;
  box-shadow: 0 0 6px rgba(251, 146, 60, 0.6);
}
.rarity-gem.pristine {
  background: linear-gradient(135deg, #fff, #ffd4e5, #d4f1ff, #e8d4ff);
  animation: pristine-gem-spin 2s linear infinite;
}

@keyframes pristine-gem-spin {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

/* ============================================================================
   IN-GAME CARD RARITY BORDERS
   Applied to cards in hand and on battlefield
   ============================================================================ */

/* Rarity borders for in-game cards - similar to collection but subtler */
.card.rarity-common {
  border-color: #4ade80;
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.25);
}

.card.rarity-uncommon {
  border-color: #60a5fa;
  box-shadow: 0 0 8px rgba(96, 165, 250, 0.3);
}

.card.rarity-rare {
  border-color: #c084fc;
  box-shadow: 0 0 10px rgba(192, 132, 252, 0.35);
}

.card.rarity-legendary {
  border-color: #fb923c;
  box-shadow: 0 0 12px rgba(251, 146, 60, 0.4);
  animation: card-legendary-pulse 2s ease-in-out infinite;
}

@keyframes card-legendary-pulse {
  0%,
  100% {
    box-shadow: 0 0 12px rgba(251, 146, 60, 0.4);
  }
  50% {
    box-shadow: 0 0 18px rgba(251, 146, 60, 0.6);
  }
}

.card.rarity-pristine {
  border-color: #fff;
  box-shadow:
    0 0 15px rgba(255, 255, 255, 0.3),
    0 0 30px rgba(192, 132, 252, 0.15);
  animation: card-pristine-border 3s linear infinite;
}

@keyframes card-pristine-border {
  0% {
    border-color: #fff;
  }
  25% {
    border-color: #ffd4e5;
  }
  50% {
    border-color: #d4f1ff;
  }
  75% {
    border-color: #e8d4ff;
  }
  100% {
    border-color: #fff;
  }
}

/* Rarity name styling for in-game cards (using .card-name class) */
.card-name.rarity-common {
  color: #4ade80;
  text-shadow: 0 0 4px rgba(74, 222, 128, 0.3);
}

.card-name.rarity-uncommon {
  color: #60a5fa;
  text-shadow: 0 0 6px rgba(96, 165, 250, 0.4);
}

.card-name.rarity-rare {
  color: #c084fc;
  text-shadow: 0 0 8px rgba(192, 132, 252, 0.5);
}

.card-name.rarity-legendary {
  color: #fb923c;
  text-shadow:
    0 0 8px rgba(251, 146, 60, 0.6),
    0 0 16px rgba(251, 146, 60, 0.4);
  animation: legendary-glow 2s ease-in-out infinite;
}

.card-name.rarity-pristine {
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #ffd4e5 15%,
    #d4f1ff 30%,
    #e8d4ff 45%,
    #ffffff 60%,
    #d4ffe8 75%,
    #fff4d4 90%,
    #ffffff 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: pristine-shimmer 3s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
}

/* ============================================================================
   GAME HISTORY LOG RARITY COLORS
   ============================================================================ */

.log-card-link.rarity-common {
  color: #4ade80;
}

.log-card-link.rarity-uncommon {
  color: #60a5fa;
}

.log-card-link.rarity-rare {
  color: #c084fc;
}

.log-card-link.rarity-legendary {
  color: #fb923c;
  text-shadow: 0 0 4px rgba(251, 146, 60, 0.4);
}

.log-card-link.rarity-pristine {
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #ffd4e5 20%,
    #d4f1ff 40%,
    #e8d4ff 60%,
    #ffffff 80%,
    #d4ffe8 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: pristine-shimmer 3s ease-in-out infinite;
}

/* ============================================================================
   PROFILE OVERLAY
   ============================================================================ */

.profile-overlay {
  background: rgba(0, 0, 0, 0.9);
}

.profile-overlay .overlay-content {
  width: 95%;
  max-height: 90vh;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.profile-container {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 0;
  height: 100%;
  min-height: 500px;
}

/* Left Panel - Stats & Packs */
.profile-left-panel {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border-right: 1px solid #334155;
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 16px;
  overflow: hidden;
  min-height: 0;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid #334155;
}

.profile-avatar {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #4299e1, #3182ce);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.profile-username {
  font-size: 1.25rem;
  font-weight: 600;
  color: #f1f5f9;
}

/* Profile Tabs */
.profile-tabs {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.profile-tab {
  flex: 1;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #334155;
  background: transparent;
  color: #94a3b8;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.profile-tab:hover {
  background: rgba(51, 65, 85, 0.3);
  color: #e2e8f0;
}

.profile-tab.active {
  background: rgba(59, 130, 246, 0.2);
  border-color: #3b82f6;
  color: #60a5fa;
}

/* Profile Tab Content */
.profile-tab-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* Friends Tab Styles */
.friends-add-section {
  display: flex;
  gap: 8px;
}

.friends-add-input {
  flex: 1;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #334155;
  background: rgba(15, 23, 42, 0.8);
  color: #f1f5f9;
  font-size: 0.875rem;
}

.friends-add-input:focus {
  outline: none;
  border-color: #3b82f6;
}

.friends-add-input::placeholder {
  color: #64748b;
}

.friends-add-btn {
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  background: #3b82f6;
  color: white;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.friends-add-btn:hover {
  background: #2563eb;
}

.friends-add-btn:disabled {
  background: #475569;
  cursor: not-allowed;
}

.friends-add-error {
  color: #f87171;
  font-size: 0.75rem;
  min-height: 18px;
  margin-top: 4px;
}

.friends-add-error.success {
  color: #4ade80;
}

/* Friends Section */
.friends-section {
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 12px;
}

.friends-section-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #64748b;
  margin-bottom: 12px;
}

.friends-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.friends-empty {
  color: #64748b;
  font-size: 0.875rem;
  text-align: center;
  padding: 16px;
}

/* Friend Item */
.friend-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.5);
  border-radius: 8px;
  transition: background 0.2s;
}

.friend-item:hover {
  background: rgba(30, 41, 59, 0.8);
}

.friend-status-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.friend-status-indicator.online {
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
}

.friend-status-indicator.offline {
  background: #475569;
}

.friend-info {
  flex: 1;
  min-width: 0;
}

.friend-username {
  display: block;
  color: #f1f5f9;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-request-status,
.friend-online-status {
  font-size: 0.75rem;
  color: #64748b;
}

.friend-online-status.online {
  color: #4ade80;
}

.friend-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.friend-actions button {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid #334155;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.friend-actions button:hover {
  background: rgba(51, 65, 85, 0.5);
  color: #e2e8f0;
}

.friend-accept-btn:hover {
  background: rgba(74, 222, 128, 0.2) !important;
  border-color: #4ade80 !important;
  color: #4ade80 !important;
}

.friend-reject-btn:hover,
.friend-remove-btn:hover,
.friend-cancel-btn:hover {
  background: rgba(248, 113, 113, 0.2) !important;
  border-color: #f87171 !important;
  color: #f87171 !important;
}

.friend-view-btn:hover {
  background: rgba(59, 130, 246, 0.2) !important;
  border-color: #3b82f6 !important;
  color: #60a5fa !important;
}

.friend-challenge-btn:hover {
  background: rgba(251, 191, 36, 0.2) !important;
  border-color: #fbbf24 !important;
  color: #fbbf24 !important;
}

/* Duel Invite Popup */
.duel-invite-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  animation: fadeIn 0.2s ease;
}

.duel-invite-popup {
  background: var(--bg-card);
  border: 2px solid var(--gold);
  border-radius: 12px;
  padding: 24px;
  min-width: 300px;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  animation: popIn 0.3s ease;
}

@keyframes popIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.duel-invite-header h3 {
  margin: 0 0 16px 0;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: var(--font-xl);
  letter-spacing: 1px;
}

.duel-invite-content {
  margin-bottom: 20px;
}

.duel-invite-content p {
  margin: 0 0 16px 0;
  color: var(--text-primary);
  font-size: var(--font-base);
}

.duel-invite-timer {
  font-size: var(--font-2xl);
  font-weight: bold;
  color: var(--hp-red);
  font-family: var(--font-display);
}

.duel-invite-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.duel-invite-accept,
.duel-invite-decline,
.duel-invite-dismiss {
  padding: 10px 24px;
  border-radius: 8px;
  font-size: var(--font-base);
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.duel-invite-accept {
  background: var(--prey);
  border: none;
  color: white;
}

.duel-invite-accept:hover {
  background: #2ecc71;
  transform: scale(1.05);
}

.duel-invite-decline {
  background: transparent;
  border: 1px solid var(--hp-red);
  color: var(--hp-red);
}

.duel-invite-decline:hover {
  background: rgba(231, 76, 60, 0.2);
}

.duel-invite-dismiss {
  background: var(--bg-card-hover);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
}

.duel-invite-dismiss:hover {
  background: var(--bg-card);
}

.duel-invite-cancel {
  padding: 10px 24px;
  border-radius: 8px;
  font-size: var(--font-base);
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  background: transparent;
  border: 1px solid var(--text-secondary);
  color: var(--text-secondary);
}

.duel-invite-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--text-primary);
  color: var(--text-primary);
}

.duel-invite-starting {
  color: var(--prey);
  font-weight: bold;
  margin-top: 8px;
  animation: pulse 1s ease-in-out infinite;
}

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

/* Friend Profile Modal */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.modal.active {
  opacity: 1;
  visibility: visible;
}

.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}

.modal-content {
  position: relative;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid #334155;
  border-radius: 16px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 24px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.friend-profile-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid #334155;
  margin-bottom: 16px;
}

.friend-profile-avatar {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #4299e1, #3182ce);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.friend-profile-username {
  font-size: 1.25rem;
  font-weight: 600;
  color: #f1f5f9;
  flex: 1;
}

.friend-profile-close {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid #334155;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.friend-profile-close:hover {
  background: rgba(248, 113, 113, 0.2);
  border-color: #f87171;
  color: #f87171;
}

.friend-profile-stats {
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.friend-profile-stats-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #94a3b8;
  margin-bottom: 12px;
}

.friend-profile-stat-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(51, 65, 85, 0.5);
  font-size: 0.875rem;
}

.friend-profile-stat-row:last-child {
  border-bottom: none;
}

.friend-profile-stat-label {
  color: #94a3b8;
}

.friend-profile-stat-value {
  color: #f1f5f9;
  font-weight: 500;
}

.friend-profile-collection {
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 16px;
}

.friend-profile-collection-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #94a3b8;
  margin-bottom: 12px;
}

.friend-profile-collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 12px;
  max-height: 250px;
  overflow-y: auto;
}

.friend-profile-collection-grid .collection-card-wrapper {
  transform: scale(0.8);
  transform-origin: top left;
}

.friend-profile-collection-empty {
  color: #64748b;
  font-size: 0.875rem;
  text-align: center;
  padding: 24px;
}

/* Stats Section */
.profile-stats {
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 16px;
}

.profile-stats-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #94a3b8;
  margin-bottom: 12px;
}

.profile-stat-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(51, 65, 85, 0.5);
  font-size: 0.875rem;
}

.profile-stat-row:last-child {
  border-bottom: none;
}

.profile-stat-label {
  color: #94a3b8;
}

.profile-stat-value {
  color: #f1f5f9;
  font-weight: 500;
}

/* Match History */
.profile-match-history {
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 16px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 120px;
  max-height: 150px;
}

.profile-match-history-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #94a3b8;
  margin-bottom: 12px;
  flex-shrink: 0;
}

#profile-match-list {
  flex: 1;
  overflow-y: auto;
}

.profile-match-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  background: rgba(15, 23, 42, 0.5);
  border-radius: 6px;
  margin-bottom: 6px;
  font-size: 0.8rem;
}

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

.profile-match-players {
  color: #e2e8f0;
}

.profile-match-result {
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
}

.profile-match-result.win {
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
}

.profile-match-result.loss {
  background: rgba(248, 113, 113, 0.2);
  color: #f87171;
}

.profile-match-hp {
  font-weight: 500;
  color: #94a3b8;
  min-width: 60px;
}

.profile-match-hp .hp-win {
  color: #4ade80;
  font-weight: 600;
}

.profile-match-hp .hp-loss {
  color: #f87171;
  font-weight: 600;
}

.profile-match-opponent {
  flex: 1;
  color: #e2e8f0;
}

.profile-match-opponent .match-deck {
  color: #22d3ee;
}

.profile-match-date {
  color: #64748b;
  font-size: 0.75rem;
}

/* Packs Section */
.profile-packs {
  background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%);
  border: 2px solid #3b82f6;
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.profile-packs:hover {
  border-color: #60a5fa;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
}

.profile-packs-label {
  font-size: 0.875rem;
  color: #94a3b8;
  margin-bottom: 8px;
}

.profile-packs-count {
  font-size: 2.5rem;
  font-weight: 700;
  color: #60a5fa;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.profile-packs-icon {
  font-size: 2rem;
}

.profile-packs-hint {
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 8px;
}

.profile-packs.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.profile-packs.disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Back Button */
.profile-back-btn {
  margin-top: auto;
  padding: 12px;
  background: transparent;
  border: 1px solid #475569;
  border-radius: 8px;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
}

.profile-back-btn:hover {
  background: rgba(71, 85, 105, 0.3);
  border-color: #64748b;
  color: #e2e8f0;
}

/* Right Panel - Card Collection */
.profile-right-panel {
  background: #0f172a;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.collection-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(30, 41, 59, 0.5);
  border-bottom: 1px solid #334155;
}

.collection-title {
  font-size: 1rem;
  font-weight: 600;
  color: #f1f5f9;
}

.collection-filter {
  display: flex;
  align-items: center;
  gap: 8px;
}

.collection-filter-label {
  font-size: 0.75rem;
  color: #94a3b8;
}

.collection-filter-select {
  background: #1e293b;
  border: 1px solid #475569;
  border-radius: 6px;
  padding: 6px 12px;
  color: #e2e8f0;
  font-size: 0.875rem;
  cursor: pointer;
}

.collection-filter-select:hover {
  border-color: #64748b;
}

/* Card Grid */
.collection-grid {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 48px;
  align-content: start;
}

/* Collection Card */
.collection-card {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

.collection-card:hover {
  transform: translateY(-4px);
  z-index: 1;
}

.collection-card.not-owned {
  opacity: 0.1;
  filter: grayscale(100%);
}

.collection-card.not-owned:hover {
  opacity: 0.25;
}

/* Rarity borders for collection cards */
.collection-card.rarity-common {
  border-color: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.3);
}

.collection-card.rarity-uncommon {
  border-color: #60a5fa;
  box-shadow: 0 0 10px rgba(96, 165, 250, 0.4);
}

.collection-card.rarity-rare {
  border-color: #c084fc;
  box-shadow: 0 0 12px rgba(192, 132, 252, 0.5);
}

.collection-card.rarity-legendary {
  border-color: #fb923c;
  box-shadow: 0 0 16px rgba(251, 146, 60, 0.5);
  animation: legendary-border-pulse 2s ease-in-out infinite;
}

@keyframes legendary-border-pulse {
  0%,
  100% {
    box-shadow: 0 0 16px rgba(251, 146, 60, 0.5);
  }
  50% {
    box-shadow: 0 0 24px rgba(251, 146, 60, 0.7);
  }
}

.collection-card.rarity-pristine {
  border-color: #fff;
  box-shadow:
    0 0 20px rgba(255, 255, 255, 0.4),
    0 0 40px rgba(192, 132, 252, 0.2);
  animation: pristine-border 3s linear infinite;
}

@keyframes pristine-border {
  0% {
    border-color: #fff;
  }
  25% {
    border-color: #ffd4e5;
  }
  50% {
    border-color: #d4f1ff;
  }
  75% {
    border-color: #e8d4ff;
  }
  100% {
    border-color: #fff;
  }
}

/* Collection card inner content */
.collection-card-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.collection-card-image {
  flex: 1;
  background-size: cover;
  background-position: center;
  background-color: #1e293b;
}

.collection-card-info {
  padding: 6px 8px;
  background: rgba(15, 23, 42, 0.9);
}

.collection-card-name {
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #e2e8f0;
}

/* Collection card wrapper */
.collection-card-wrapper {
  position: relative;
}

/* Empty collection state */
.collection-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 24px;
  color: #64748b;
  font-size: 0.9rem;
}

/* Rarity gem positioning on collection cards */
.collection-card .rarity-gem {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}

/* ============================================================================
   PACK OPENING OVERLAY
   ============================================================================ */

.pack-opening-overlay {
  background: rgba(0, 0, 0, 0.95);
}

.pack-opening-overlay .overlay-content {
  width: 95%;
  padding: 32px;
  text-align: center;
}

.pack-opening-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #f1f5f9;
  margin-bottom: 8px;
}

.pack-opening-subtitle {
  font-size: 0.875rem;
  color: #94a3b8;
  margin-bottom: 32px;
}

/* ============================================================================
   UNOPENED PACK PHASE
   ============================================================================ */

.pack-unopened-phase {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

.pack-unopened {
  position: relative;
  width: 200px;
  height: 240px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  --shake-intensity: 0;
}

.pack-unopened-glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.pack-unopened.shaking .pack-unopened-glow {
  opacity: 1;
  animation: pack-glow-pulse 0.3s ease-in-out infinite;
}

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

.pack-unopened-box {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1e3a5f 0%, #3b82f6 50%, #1e3a5f 100%);
  border: 3px solid #60a5fa;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 10px 40px rgba(59, 130, 246, 0.3),
    inset 0 0 30px rgba(255, 255, 255, 0.1);
  transition: transform 0.1s ease;
}

.pack-unopened.shaking .pack-unopened-box {
  animation: pack-shake 0.1s ease-in-out infinite;
  animation-duration: calc(0.15s - var(--shake-intensity) * 0.1s);
}

@keyframes pack-shake {
  0%,
  100% {
    transform: translateX(0) rotate(0deg);
  }
  25% {
    transform: translateX(calc(-5px * var(--shake-intensity, 1)))
      rotate(calc(-2deg * var(--shake-intensity, 1)));
  }
  75% {
    transform: translateX(calc(5px * var(--shake-intensity, 1)))
      rotate(calc(2deg * var(--shake-intensity, 1)));
  }
}

.pack-unopened-icon {
  font-size: 4rem;
  margin-bottom: 8px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.pack-unopened-label {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Progress Ring */
.pack-progress-ring {
  position: absolute;
  inset: -15px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pack-unopened.shaking .pack-progress-ring {
  opacity: 1;
}

.pack-progress-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.pack-progress-ring .progress-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 4;
}

.pack-progress-ring .progress-fill {
  fill: none;
  stroke: #60a5fa;
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.05s linear;
  filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.8));
}

/* Burst Animation */
.pack-unopened.bursting .pack-unopened-box {
  animation: pack-burst 0.6s ease-out forwards;
}

.pack-unopened.bursting .pack-unopened-glow {
  animation: pack-burst-glow 0.6s ease-out forwards;
}

@keyframes pack-burst {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  30% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

@keyframes pack-burst-glow {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(2);
    opacity: 1;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

/* Hold hint text */
.pack-hold-hint {
  margin-top: 24px;
  font-size: 1rem;
  color: #64748b;
  transition: color 0.3s ease;
}

.pack-unopened.shaking ~ .pack-hold-hint {
  color: #60a5fa;
}

/* Cards phase */
.pack-cards-phase {
  animation: cards-phase-enter 0.5s ease-out;
}

@keyframes cards-phase-enter {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Pack Cards Container */
.pack-cards-container {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 32px;
  flex-wrap: wrap;
  position: relative; /* For halo effect positioning */
}

/* Individual Pack Card */
.pack-card {
  width: 180px;
  height: 252px;
  perspective: 1000px;
  cursor: pointer;
  position: relative; /* Contain the rarity glow */
}

.pack-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.pack-card.revealed .pack-card-inner {
  transform: rotateY(180deg);
}

.pack-card-front,
.pack-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
  overflow: hidden;
}

.pack-card-front {
  background: linear-gradient(135deg, #1e3a5f 0%, #3b82f6 50%, #1e3a5f 100%);
  border: 2px solid #60a5fa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}

.pack-card-front::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    transparent 40%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 60%
  );
  animation: pack-shimmer 2s ease-in-out infinite;
}

@keyframes pack-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.pack-card-back {
  background: #1e293b;
  border: 2px solid #475569;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.pack-card-back .collection-card-inner {
  height: 100%;
}

/* Pack card logo */
.pack-card-logo {
  font-size: 3rem;
  color: rgba(255, 255, 255, 0.8);
}

/* Pack card revealed content */
.pack-card-name {
  font-size: 1rem;
  font-weight: 700;
  padding: 16px 12px 8px;
  text-align: center;
}

.pack-card-type {
  font-size: 0.75rem;
  color: #94a3b8;
  text-align: center;
  padding: 4px 12px;
}

.pack-card-rarity {
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  padding: 8px 12px;
  margin-top: auto;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Pack revealed card (actual card rendering) */
.pack-revealed-card {
  width: 100%;
  height: 100%;
}

.pack-revealed-card.card {
  width: 100%;
  height: 100%;
}

.pack-card-rarity-badge {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
}

/* Pack card name rarity colors */
.pack-card-name.rarity-common {
  color: #4ade80;
}
.pack-card-name.rarity-uncommon {
  color: #60a5fa;
}
.pack-card-name.rarity-rare {
  color: #c084fc;
}
.pack-card-name.rarity-legendary {
  color: #fb923c;
  text-shadow: 0 0 8px rgba(251, 146, 60, 0.5);
}
.pack-card-name.rarity-pristine {
  background: linear-gradient(90deg, #fff, #ffd4e5, #d4f1ff, #e8d4ff, #fff);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: pristine-shimmer 3s ease-in-out infinite;
}

/* Pack save status */
.pack-save-status {
  text-align: center;
  font-size: var(--font-base);
  font-weight: 600;
  min-height: 20px;
  margin: 8px 0;
  transition: color 0.3s ease;
}

/* Pack opening actions */
.pack-opening-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.pack-reveal-all-btn {
  padding: 12px 32px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pack-reveal-all-btn:hover {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  transform: translateY(-2px);
}

.pack-done-btn {
  padding: 12px 32px;
  background: transparent;
  border: 1px solid #475569;
  border-radius: 8px;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pack-done-btn:hover {
  border-color: #64748b;
  color: #e2e8f0;
}

/* ============================================================================
   RARITY REVEAL EFFECTS
   ============================================================================ */

/* Common - simple flip */
.pack-card.revealed.rarity-common {
  animation: common-card-enter 0.6s ease-out;
}

@keyframes common-card-enter {
  0% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.pack-card.revealed.rarity-common .pack-card-back {
  border-color: #4ade80;
  box-shadow: 0 0 15px rgba(74, 222, 128, 0.4);
}

/* Uncommon - subtle glow */
.pack-card.revealed.rarity-uncommon {
  animation: uncommon-card-enter 0.6s ease-out;
}

@keyframes uncommon-card-enter {
  0% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

.pack-card.revealed.rarity-uncommon .pack-card-back {
  border-color: #60a5fa;
  box-shadow: 0 0 20px rgba(96, 165, 250, 0.5);
  animation: uncommon-glow 2s ease-in-out infinite;
}

@keyframes uncommon-glow {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(96, 165, 250, 0.4);
  }
  50% {
    box-shadow: 0 0 30px rgba(96, 165, 250, 0.6);
  }
}

/* Rare - purple burst */
.pack-card.rare-reveal {
  animation: rare-card-enter 0.7s ease-out;
}

@keyframes rare-card-enter {
  0% {
    transform: scale(0.8) rotate(-5deg);
  }
  40% {
    transform: scale(1.15) rotate(2deg);
  }
  60% {
    transform: scale(1.1) rotate(-1deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

.pack-card.revealed.rarity-rare .pack-card-back {
  border-color: #c084fc;
  box-shadow: 0 0 30px rgba(192, 132, 252, 0.6);
  animation: rare-glow 1.5s ease-in-out infinite;
}

@keyframes rare-glow {
  0%,
  100% {
    box-shadow: 0 0 25px rgba(192, 132, 252, 0.5);
  }
  50% {
    box-shadow: 0 0 40px rgba(192, 132, 252, 0.8);
  }
}

/* Legendary - golden explosion */
.pack-card.legendary-reveal {
  animation: legendary-card-enter 0.8s ease-out;
}

@keyframes legendary-card-enter {
  0% {
    transform: scale(0.5) rotate(-10deg);
    filter: brightness(2);
  }
  30% {
    transform: scale(1.3) rotate(5deg);
    filter: brightness(1.5);
  }
  50% {
    transform: scale(1.2) rotate(-3deg);
  }
  70% {
    transform: scale(1.15) rotate(1deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    filter: brightness(1);
  }
}

.pack-card.revealed.rarity-legendary .pack-card-back {
  border-color: #fb923c;
  box-shadow:
    0 0 40px rgba(251, 146, 60, 0.7),
    0 0 60px rgba(251, 146, 60, 0.4);
  animation: legendary-glow 1.2s ease-in-out infinite;
}

@keyframes legendary-glow {
  0%,
  100% {
    box-shadow:
      0 0 30px rgba(251, 146, 60, 0.6),
      0 0 50px rgba(251, 146, 60, 0.3);
  }
  50% {
    box-shadow:
      0 0 50px rgba(251, 146, 60, 0.9),
      0 0 80px rgba(251, 146, 60, 0.5);
  }
}

/* Pristine - rainbow shimmer explosion */
.pack-card.pristine-reveal {
  animation: pristine-card-enter 1s ease-out;
}

@keyframes pristine-card-enter {
  0% {
    transform: scale(0.3) rotate(-15deg);
    filter: brightness(3) saturate(2);
  }
  20% {
    transform: scale(1.4) rotate(8deg);
    filter: brightness(2) saturate(1.5);
  }
  40% {
    transform: scale(1.25) rotate(-5deg);
  }
  60% {
    transform: scale(1.2) rotate(3deg);
  }
  80% {
    transform: scale(1.1) rotate(-1deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    filter: brightness(1) saturate(1);
  }
}

.pack-card.revealed.rarity-pristine .pack-card-back {
  border-color: #fff;
  box-shadow:
    0 0 30px rgba(255, 255, 255, 0.8),
    0 0 60px rgba(255, 212, 229, 0.5),
    0 0 90px rgba(212, 241, 255, 0.3);
  animation: pristine-glow 2s ease-in-out infinite;
}

@keyframes pristine-glow {
  0%,
  100% {
    box-shadow:
      0 0 30px rgba(255, 255, 255, 0.7),
      0 0 50px rgba(255, 212, 229, 0.4),
      0 0 70px rgba(212, 241, 255, 0.3);
  }
  33% {
    box-shadow:
      0 0 40px rgba(212, 241, 255, 0.8),
      0 0 60px rgba(232, 212, 255, 0.5),
      0 0 80px rgba(255, 212, 229, 0.3);
  }
  66% {
    box-shadow:
      0 0 35px rgba(232, 212, 255, 0.8),
      0 0 55px rgba(255, 255, 255, 0.5),
      0 0 75px rgba(212, 241, 255, 0.3);
  }
}

/* ============================================================================
   TILT EFFECT SYSTEM
   ============================================================================ */

/* Card tilt base styles */
.pack-card {
  transform-style: preserve-3d;
}

.pack-card:not(.revealed) {
  cursor: pointer;
}

.pack-card.tilting {
  z-index: 10;
}

/* Shine overlay for tilt effect */
.pack-card-shine {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--shine-x, 50%) var(--shine-y, 50%),
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.1) 20%,
    transparent 50%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  border-radius: 10px;
  z-index: 5;
}

.pack-card.tilting .pack-card-shine {
  opacity: 1;
}

/* ============================================================================
   REVEALED CARD INSPECT HOVER EFFECT
   ============================================================================ */

/* Revealed cards can be hovered to inspect (scale up ~50%) */
.pack-card.revealed {
  cursor: zoom-in;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    z-index 0s;
}

.pack-card.revealed:hover {
  transform: scale(1.5);
  z-index: 100;
}

/* Ensure the flip transform is preserved when hovering */
.pack-card.revealed:hover .pack-card-inner {
  transform: rotateY(180deg);
}

/* Add subtle shadow lift when inspecting */
.pack-card.revealed:hover .pack-card-back {
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(0, 0, 0, 0.2);
}

/* ============================================================================
   PRE-REVEAL RARITY GLOW (FACE-DOWN CARDS)
   ============================================================================ */

/* Rarity glow element - positioned behind card at wrapper level */
.pack-card-rarity-glow {
  position: absolute;
  inset: -12px;
  border-radius: 16px;
  pointer-events: none;
  z-index: 0;
  transform: translate(var(--glow-offset-x, 0px), var(--glow-offset-y, 0px));
  transition:
    transform 0.1s ease-out,
    opacity 0.3s ease;
}

/* Ensure card inner is above glow */
.pack-card-inner {
  z-index: 1;
}

/* Common - very subtle, barely visible */
.pack-card-rarity-glow.glow-common {
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.15);
}

/* Uncommon - soft blue pulse */
.pack-card-rarity-glow.glow-uncommon {
  box-shadow:
    0 0 15px rgba(96, 165, 250, 0.3),
    0 0 25px rgba(96, 165, 250, 0.15);
  animation: pre-reveal-uncommon 2.5s ease-in-out infinite;
}

@keyframes pre-reveal-uncommon {
  0%,
  100% {
    box-shadow:
      0 0 12px rgba(96, 165, 250, 0.25),
      0 0 20px rgba(96, 165, 250, 0.1);
  }
  50% {
    box-shadow:
      0 0 18px rgba(96, 165, 250, 0.4),
      0 0 30px rgba(96, 165, 250, 0.2);
  }
}

/* Rare - purple glow, more noticeable */
.pack-card-rarity-glow.glow-rare {
  box-shadow:
    0 0 20px rgba(192, 132, 252, 0.4),
    0 0 35px rgba(192, 132, 252, 0.2);
  animation: pre-reveal-rare 2s ease-in-out infinite;
}

@keyframes pre-reveal-rare {
  0%,
  100% {
    box-shadow:
      0 0 15px rgba(192, 132, 252, 0.35),
      0 0 25px rgba(192, 132, 252, 0.15);
  }
  50% {
    box-shadow:
      0 0 25px rgba(192, 132, 252, 0.55),
      0 0 45px rgba(192, 132, 252, 0.3);
  }
}

/* Legendary - strong orange glow, eye-catching */
.pack-card-rarity-glow.glow-legendary {
  box-shadow:
    0 0 25px rgba(251, 146, 60, 0.5),
    0 0 45px rgba(251, 146, 60, 0.25),
    0 0 60px rgba(251, 191, 36, 0.15);
  animation: pre-reveal-legendary 1.8s ease-in-out infinite;
}

@keyframes pre-reveal-legendary {
  0%,
  100% {
    box-shadow:
      0 0 20px rgba(251, 146, 60, 0.4),
      0 0 35px rgba(251, 146, 60, 0.2),
      0 0 50px rgba(251, 191, 36, 0.1);
  }
  50% {
    box-shadow:
      0 0 35px rgba(251, 146, 60, 0.65),
      0 0 55px rgba(251, 146, 60, 0.35),
      0 0 75px rgba(251, 191, 36, 0.2);
  }
}

/* Pristine - rainbow shimmer, unmistakable */
.pack-card-rarity-glow.glow-pristine {
  box-shadow:
    0 0 30px rgba(255, 255, 255, 0.6),
    0 0 50px rgba(255, 212, 229, 0.3),
    0 0 70px rgba(212, 241, 255, 0.2);
  animation: pre-reveal-pristine 2.5s ease-in-out infinite;
}

@keyframes pre-reveal-pristine {
  0%,
  100% {
    box-shadow:
      0 0 25px rgba(255, 255, 255, 0.5),
      0 0 40px rgba(255, 212, 229, 0.25),
      0 0 55px rgba(212, 241, 255, 0.15);
  }
  33% {
    box-shadow:
      0 0 35px rgba(212, 241, 255, 0.6),
      0 0 55px rgba(232, 212, 255, 0.35),
      0 0 75px rgba(255, 212, 229, 0.2);
  }
  66% {
    box-shadow:
      0 0 30px rgba(232, 212, 255, 0.55),
      0 0 50px rgba(255, 255, 255, 0.3),
      0 0 65px rgba(212, 241, 255, 0.2);
  }
}

/* Hide rarity glow once revealed */
.pack-card.revealed .pack-card-rarity-glow {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* ============================================================================
   EXPANDING HALO REVEAL EFFECTS (HEARTHSTONE-STYLE)
   ============================================================================ */

/* Halo container - positioned at card center */
.pack-halo-container {
  position: absolute;
  pointer-events: none;
  z-index: 100;
  transform: translate(-50%, -50%);
}

/* Individual expanding ring */
.pack-halo-ring {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, var(--ring-color) 0%, transparent 70%);
  box-shadow:
    0 0 20px var(--ring-color),
    0 0 40px var(--ring-color),
    inset 0 0 20px var(--ring-color);
  animation: halo-expand var(--ring-duration) ease-out forwards;
  animation-delay: var(--ring-delay);
}

@keyframes halo-expand {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  60% {
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(calc(var(--ring-size) / 20));
    opacity: 0;
  }
}

/* Particles for legendary/pristine */
.pack-halo-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  background: var(--particle-color);
  box-shadow:
    0 0 6px var(--particle-color),
    0 0 12px var(--particle-color);
  transform: translate(-50%, -50%);
  animation: particle-burst 0.8s ease-out forwards;
  animation-delay: var(--particle-delay);
}

@keyframes particle-burst {
  0% {
    transform: translate(-50%, -50%) rotate(var(--particle-angle)) translateY(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) rotate(var(--particle-angle))
      translateY(calc(-1 * var(--particle-distance)));
    opacity: 0;
  }
}

/* Legendary halo - golden fire burst */
.pack-halo-container.halo-legendary .pack-halo-ring {
  background: radial-gradient(
    circle,
    rgba(251, 191, 36, 0.9) 0%,
    rgba(251, 146, 60, 0.6) 40%,
    transparent 70%
  );
  box-shadow:
    0 0 30px rgba(251, 146, 60, 0.8),
    0 0 60px rgba(251, 191, 36, 0.5),
    inset 0 0 25px rgba(251, 146, 60, 0.6);
}

/* Pristine halo - white/rainbow burst */
.pack-halo-container.halo-pristine .pack-halo-ring {
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 212, 229, 0.7) 30%,
    rgba(212, 241, 255, 0.4) 60%,
    transparent 80%
  );
  box-shadow:
    0 0 40px rgba(255, 255, 255, 0.9),
    0 0 80px rgba(255, 212, 229, 0.6),
    0 0 120px rgba(212, 241, 255, 0.3),
    inset 0 0 30px rgba(255, 255, 255, 0.8);
}

/* Screen flash for pristine reveals */
.pack-screen-flash {
  position: fixed;
  inset: 0;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.4) 30%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 10000;
  animation: screen-flash 0.6s ease-out forwards;
}

@keyframes screen-flash {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  20% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

/* Uncommon reveal animation */
.pack-card.uncommon-reveal {
  animation: uncommon-card-enter 0.6s ease-out;
}

/* ============================================================================
   PLAYER NAME STYLING EFFECTS
   ============================================================================ */

/* Wave Effect - Per-letter animation */
.name-effect-wave {
  display: inline-flex;
}

.name-wave-char {
  display: inline-block;
  animation: name-wave 1.2s ease-in-out infinite;
}

@keyframes name-wave {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

/* Glow Effect - Pulsing shadow */
.name-effect-glow {
  animation: name-glow 2s ease-in-out infinite;
}

@keyframes name-glow {
  0%,
  100% {
    text-shadow:
      0 0 5px currentColor,
      0 0 10px currentColor;
    filter: brightness(1);
  }
  50% {
    text-shadow:
      0 0 10px currentColor,
      0 0 20px currentColor,
      0 0 30px currentColor;
    filter: brightness(1.2);
  }
}

/* Rainbow Effect - Shimmer gradient */
.name-effect-rainbow {
  background: linear-gradient(
    90deg,
    #ff6b6b 0%,
    #feca57 20%,
    #48dbfb 40%,
    #ff9ff3 60%,
    #54a0ff 80%,
    #ff6b6b 100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: name-rainbow-shimmer 3s linear infinite;
}

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

/* Pulse Effect - Size breathing */
.name-effect-pulse {
  animation: name-pulse 2s ease-in-out infinite;
  transform-origin: center;
  display: inline-block;
}

@keyframes name-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* Shadow Effect - Drop shadow */
.name-effect-shadow {
  text-shadow:
    2px 2px 4px rgba(0, 0, 0, 0.5),
    -1px -1px 2px rgba(255, 255, 255, 0.1);
}

/* Gradient text support */
.name-gradient {
  background-size: 200% 100%;
  animation: name-gradient-shift 3s linear infinite;
}

@keyframes name-gradient-shift {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: 0 0;
  }
}

/* ============================================================================
   NAME STYLE PICKER UI
   ============================================================================ */

.style-preview-section {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  margin-bottom: 16px;
}

.style-preview-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #64748b;
  margin-bottom: 12px;
}

.style-preview-name {
  font-size: 1.5rem;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.style-section {
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}

.style-section-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: #94a3b8;
  margin-bottom: 12px;
}

.style-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.style-option {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid #334155;
  background: rgba(15, 23, 42, 0.5);
  color: #94a3b8;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.style-option:hover {
  background: rgba(51, 65, 85, 0.5);
  color: #e2e8f0;
}

.style-option.selected {
  background: rgba(59, 130, 246, 0.2);
  border-color: #3b82f6;
  color: #60a5fa;
}

.style-color-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.style-color-swatch {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.style-color-swatch:hover {
  transform: scale(1.1);
}

.style-color-swatch.selected {
  border-color: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
  .profile-container {
    grid-template-columns: 1fr;
  }

  .profile-left-panel {
    border-right: none;
    border-bottom: 1px solid #334155;
  }

  .collection-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

  .pack-card {
    width: 130px;
    height: 182px;
  }

  .style-color-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================================================
   CARD HOVER TOOLTIP SYSTEM (Hearthstone-style)
   ============================================================================ */

.card-hover-tooltip {
  position: fixed;
  z-index: 100000 !important;
  pointer-events: none;
  display: flex;
  gap: var(--tooltip-gap);
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}

.card-hover-tooltip.visible {
  opacity: 1;
}

.card-hover-tooltip.position-left {
  flex-direction: row-reverse;
}

.card-hover-tooltip.position-right {
  flex-direction: row;
}

/* Enlarged card preview - uses dynamic width from JS */
.tooltip-card-preview {
  width: var(--tooltip-card-width, 320px);
  flex-shrink: 0;
  /* Enable container queries for card-intrinsic sizing */
  container-type: inline-size;
  container-name: tooltip-preview;
}

.tooltip-card-preview .card {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 7;
  transform: none !important;
  margin: 0;
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.7),
    0 0 30px rgba(212, 168, 83, 0.4);
  border: 2px solid var(--gold);
}

.tooltip-card-preview .card.tooltip-card {
  pointer-events: none;
}

/* Info-only mode (hand cards) - no card preview, just info boxes */
.card-hover-tooltip.info-only .tooltip-card-preview {
  display: none;
}

/* Info boxes container */
.tooltip-info-boxes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: var(--tooltip-info-width);
  /* Enable scrolling when content exceeds viewport */
  max-height: 70vh;
  overflow-y: auto;
}

/* Only enable pointer events on info boxes when tooltip is visible (for scroll wheel) */
.card-hover-tooltip.visible .tooltip-info-boxes {
  pointer-events: auto;
}

/* Individual info box */
.tooltip-info-box {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  min-width: 180px;
}

.tooltip-info-box.keyword-box {
  border-left: 4px solid var(--gold);
}

.tooltip-info-box.status-box {
  border-left: 4px solid var(--hp-red);
}

.tooltip-info-box-title {
  font-family: var(--font-display);
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--gold-light);
  margin-bottom: 6px;
}

.tooltip-info-box-description {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Trigger keyword info box (Slain, Defending, etc.) */
.tooltip-info-box.trigger-box {
  border-left: 4px solid #5bc0de; /* Cyan accent for triggers */
}

/* Flavor text info box (collection/catalog only) */
.tooltip-info-box.flavor-text-box {
  background: linear-gradient(135deg, rgba(212, 168, 83, 0.9), rgba(212, 168, 83, 0.85));
  border-left: 3px solid var(--gold);
  margin-top: 8px;
}

.tooltip-flavor-text {
  font-style: italic;
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--font-sm);
  line-height: 1.6;
  text-align: center;
}

/* Token section header */
.tooltip-token-header {
  font-family: var(--font-display);
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 8px;
  margin-bottom: 4px;
  padding: 0 4px;
}

/* Token preview container */
.tooltip-token-preview {
  display: flex;
  justify-content: center;
  padding: 4px;
}

/* Mini token card */
.tooltip-token-card {
  transform: scale(1);
  transform-origin: top center;
  pointer-events: none;
  margin-bottom: -40px; /* Compensate for scale leaving empty space */
}

/* Ensure token cards maintain 5:7 proportion */
.tooltip-token-preview .card {
  height: 250px;
  width: auto;
  aspect-ratio: 5 / 7;
  overflow: visible;
}

/* Mobile tooltip - smaller, centered, tappable */
@media (max-width: 768px) {
  :root {
    --tooltip-info-width: clamp(140px, 40vw, 200px);
    --tooltip-gap: 8px;
  }

  .card-hover-tooltip {
    /* Center on screen */
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%);
    flex-direction: column;
    align-items: center;
    max-width: 90vw;
    max-height: 85vh;
    /* Keep pointer-events: none when not visible (inherited from base) */
  }

  /* Only enable pointer events when tooltip is VISIBLE on mobile */
  .card-hover-tooltip.visible {
    pointer-events: auto;
  }

  /* Smaller card preview on mobile */
  .tooltip-card-preview {
    width: min(200px, 50vw);
  }

  /* Only enable tapping on card preview when tooltip is visible */
  .card-hover-tooltip.visible .tooltip-card-preview .card.tooltip-card {
    pointer-events: auto;
    cursor: pointer;
  }

  /* Stack info boxes below card on mobile */
  .tooltip-info-boxes {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 90vw;
    max-height: 30vh;
    overflow-y: auto;
  }

  .tooltip-info-box {
    min-width: 140px;
    max-width: 45%;
    font-size: var(--font-sm);
    padding: 8px 10px;
  }

  .tooltip-info-box-title {
    font-size: var(--font-sm);
  }

  .tooltip-info-box-description {
    font-size: var(--font-xs);
  }
}

/* ============================================================================
   SETTINGS BUTTON (Floating Action Button)
   ============================================================================ */

/* Floating Action Button Container */
.settings-button-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none; /* Allow clicks to pass through to elements below */
}

/* Settings FAB Button */
.settings-fab {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
  pointer-events: auto; /* Re-enable clicks on the button itself */
}

.settings-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.settings-fab.active {
  transform: rotate(45deg);
}

.settings-fab-icon {
  font-size: var(--font-xl);
  line-height: 1;
}

/* Settings Menu (Popout) */
.settings-menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateY(10px) scale(0.95);
  pointer-events: none;
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast);
}

.settings-menu.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.settings-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: var(--font-base);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--transition-fast),
    transform var(--transition-fast);
}

.settings-menu-item:hover {
  background: rgba(212, 168, 83, 0.15);
  transform: translateX(-4px);
}

.settings-menu-icon {
  font-size: var(--font-base);
}

/* ============================================================================
   SETTINGS FLOATING OVERLAY
   ============================================================================ */

.settings-floating-overlay {
  z-index: 60;
}

.settings-floating-overlay .overlay-content {
  max-width: 400px;
}

.settings-overlay-card {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
}

.settings-overlay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: rgba(212, 168, 83, 0.1);
  border-bottom: 1px solid var(--border-subtle);
}

.settings-overlay-header h2 {
  margin: 0;
  font-size: var(--font-lg);
  color: var(--text-primary);
}

.settings-overlay-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--font-xl);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition:
    color var(--transition-fast),
    background var(--transition-fast);
}

.settings-overlay-close:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.1);
}

.settings-overlay-body {
  padding: 20px;
}

.settings-section {
  margin-bottom: 16px;
}

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

.settings-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-base);
  color: var(--text-primary);
  margin-bottom: 12px;
}

.settings-label-icon {
  font-size: var(--font-lg);
}

.settings-slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.settings-slider {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border-subtle);
  border-radius: 3px;
  outline: none;
}

.settings-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--gold);
  border-radius: 50%;
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.settings-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.settings-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--gold);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.settings-value {
  min-width: 45px;
  text-align: right;
  font-size: var(--font-base);
  color: var(--gold);
  font-weight: 500;
}

.settings-overlay-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: flex-end;
}

/* ============================================================================
   BUG REPORTING FEATURE
   ============================================================================ */

/* Bug Report Overlay */
.bug-report-overlay {
  z-index: 50;
}

.bug-report-overlay .overlay-content {
  max-width: 600px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.bug-report-card {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
}

/* Bug Report Header */
.bug-report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: rgba(212, 168, 83, 0.1);
  border-bottom: 1px solid var(--border-subtle);
}

.bug-report-header h2 {
  margin: 0;
  font-size: var(--font-lg);
  color: var(--gold-light);
}

.bug-overlay-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: var(--font-base);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.bug-overlay-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

/* Bug Tabs */
.bug-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-subtle);
}

.bug-tab {
  flex: 1;
  padding: 12px 16px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: var(--font-base);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
}

.bug-tab:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.bug-tab.active {
  color: var(--gold);
}

.bug-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold);
}

/* Bug Report Content */
.bug-report-content,
.bug-list-content {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.bug-form-title {
  margin: 0 0 16px;
  font-size: var(--font-base);
  color: var(--text-primary);
}

.bug-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bug-label {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bug-textarea {
  resize: vertical;
  min-height: 80px;
  max-height: 200px;
}

.bug-form-error {
  min-height: 20px;
  font-size: var(--font-sm);
  color: #f87171;
}

.bug-form-error.success {
  color: #4ade80;
}

.bug-form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 8px;
}

.bug-submit-btn,
.bug-cancel-btn {
  padding: 10px 20px;
}

/* Bug List */
.bug-list-loading,
.bug-list-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
}

.bug-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Bug Item */
.bug-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 14px;
  transition: border-color var(--transition-fast);
}

.bug-item:hover {
  border-color: var(--border-gold);
}

/* Status colors */
.bug-item.bug-status-open {
  border-left: 3px solid #fbbf24;
}

.bug-item.bug-status-acknowledged {
  border-left: 3px solid #60a5fa;
}

.bug-item.bug-status-fixed {
  border-left: 3px solid #4ade80;
}

.bug-item.bug-status-wont-fix {
  border-left: 3px solid #94a3b8;
}

.bug-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.bug-category {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 8px;
  border-radius: 4px;
}

.bug-status {
  font-size: var(--font-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bug-status-open .bug-status {
  color: #fbbf24;
}
.bug-status-acknowledged .bug-status {
  color: #60a5fa;
}
.bug-status-fixed .bug-status {
  color: #4ade80;
}
.bug-status-wont-fix .bug-status {
  color: #94a3b8;
}

.bug-title {
  margin: 0 0 6px;
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--text-primary);
}

.bug-description {
  margin: 0 0 10px;
  font-size: var(--font-sm);
  color: var(--text-secondary);
  line-height: 1.4;
  /* Clamp to 3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bug-item-footer {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-sm);
  color: var(--text-muted);
  margin-bottom: 10px;
}

.bug-item-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* Vote Button */
.bug-vote-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: var(--font-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.bug-vote-btn:hover:not(:disabled) {
  background: rgba(212, 168, 83, 0.15);
  border-color: var(--border-gold);
  color: var(--gold);
}

.bug-vote-btn.voted {
  background: rgba(212, 168, 83, 0.2);
  border-color: var(--gold);
  color: var(--gold);
}

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

.vote-count {
  font-weight: 700;
}

/* Status Select */
.bug-status-select {
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: var(--font-sm);
  cursor: pointer;
}

.bug-status-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

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

/* Edit/Delete Buttons */
.bug-edit-btn,
.bug-delete-btn {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: var(--font-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.bug-edit-btn:hover {
  background: rgba(96, 165, 250, 0.15);
  border-color: #60a5fa;
  color: #60a5fa;
}

.bug-delete-btn:hover {
  background: rgba(248, 113, 113, 0.15);
  border-color: #f87171;
  color: #f87171;
}

/* Mobile responsiveness */
@media (max-width: 600px) {
  .settings-button-container {
    bottom: 16px;
    right: 16px;
  }

  .settings-fab {
    width: 44px;
    height: 44px;
  }

  .settings-fab-icon {
    font-size: var(--font-lg);
  }

  .settings-floating-overlay .overlay-content {
    margin: 10px;
  }

  .bug-report-overlay .overlay-content {
    max-height: 90vh;
    margin: 10px;
  }

  .bug-item-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .bug-vote-btn,
  .bug-status-select,
  .bug-edit-btn,
  .bug-delete-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================================
   SIMULATION DASHBOARD
   ============================================================================ */

.simulation-dashboard-overlay {
  z-index: 60;
  background: rgba(5, 8, 12, 0.3); /* Semi-transparent to see game behind */
}

.simulation-dashboard-overlay .overlay-content {
  max-width: 700px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.simulation-dashboard {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
}

/* Dashboard Header */
.sim-dash-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: rgba(52, 152, 219, 0.1);
  border-bottom: 1px solid var(--border-subtle);
}

.sim-dash-header h2 {
  margin: 0;
  font-size: var(--font-lg);
  color: var(--mana-blue);
}

.sim-dash-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: var(--font-base);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.sim-dash-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

/* Status Bar */
.sim-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--font-sm);
}

.sim-status-indicator {
  padding: 4px 12px;
  border-radius: 12px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--font-sm);
  letter-spacing: 0.05em;
}

.sim-status-indicator.stopped {
  background: rgba(148, 163, 184, 0.2);
  color: var(--text-secondary);
}

.sim-status-indicator.running {
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
  animation: pulse 2s ease-in-out infinite;
}

.sim-status-indicator.paused {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

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

.sim-game-count,
.sim-runtime {
  color: var(--text-secondary);
}

/* Tabs */
.sim-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-subtle);
}

.sim-tab {
  flex: 1;
  padding: 12px 16px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: var(--font-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
}

.sim-tab:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.sim-tab.active {
  color: var(--mana-blue);
}

.sim-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--mana-blue);
}

/* Tab Content */
.sim-tab-content {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.sim-section {
  margin-bottom: 24px;
}

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

.sim-section h3 {
  margin: 0 0 12px;
  font-size: var(--font-base);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* Stats Grid */
.sim-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.sim-stat {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}

.sim-stat-value {
  display: block;
  font-size: var(--font-xl);
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-display);
}

.sim-stat-label {
  display: block;
  font-size: var(--font-sm);
  color: var(--text-secondary);
  text-transform: uppercase;
  margin-top: 4px;
}

/* Stats Row */
.sim-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: var(--font-base);
  color: var(--text-secondary);
}

.sim-stats-row strong {
  color: var(--text-primary);
}

/* Win Bar */
.sim-win-bar {
  display: flex;
  height: 32px;
  border-radius: 6px;
  overflow: hidden;
  font-size: var(--font-sm);
  font-weight: 600;
}

.sim-win-p0 {
  background: rgba(74, 222, 128, 0.3);
  color: #4ade80;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
}

.sim-win-p1 {
  background: rgba(248, 113, 113, 0.3);
  color: #f87171;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
}

.sim-draws {
  text-align: center;
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: var(--font-sm);
}

/* Bug List in Dashboard */
.sim-bug-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sim-bug-item {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  padding: 12px;
  border-left: 3px solid var(--text-secondary);
}

.sim-bug-item.sev-critical {
  border-left-color: #ef4444;
}

.sim-bug-item.sev-high {
  border-left-color: #f97316;
}

.sim-bug-item.sev-medium {
  border-left-color: #fbbf24;
}

.sim-bug-item.sev-low {
  border-left-color: #94a3b8;
}

.sim-bug-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.sim-bug-type {
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--font-sm);
}

.sim-bug-count {
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--gold);
}

.sim-bug-message {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin-bottom: 6px;
  line-height: 1.4;
}

.sim-bug-meta {
  display: flex;
  gap: 12px;
  font-size: var(--font-sm);
  color: var(--text-muted);
}

.sim-bug-severity {
  text-transform: uppercase;
  font-weight: 600;
}

/* Severity Bar */
.sim-severity-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sim-severity-bar span {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: var(--font-sm);
  font-weight: 600;
}

.sev-critical {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.sev-high {
  background: rgba(249, 115, 22, 0.2);
  color: #f97316;
}

.sev-medium {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

.sev-low {
  background: rgba(148, 163, 184, 0.2);
  color: #94a3b8;
}

/* Card List */
.sim-card-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sim-card-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  font-size: var(--font-sm);
}

.sim-card-rank {
  color: var(--text-muted);
  font-weight: 600;
  min-width: 24px;
}

.sim-card-name {
  flex: 1;
  color: var(--text-primary);
}

.sim-card-winrate {
  font-weight: 700;
  min-width: 50px;
  text-align: right;
}

.sim-card-winrate.win-high {
  color: #4ade80;
}

.sim-card-winrate.win-low {
  color: #f87171;
}

.sim-card-games {
  color: var(--text-muted);
  font-size: var(--font-sm);
  min-width: 70px;
  text-align: right;
}

.sim-card-impact {
  color: #8f8;
  font-size: var(--font-sm);
  min-width: 50px;
  text-align: right;
}

.sim-balance .sim-section h3 {
  margin-bottom: 8px;
}

.sim-card-bugs {
  color: #fbbf24;
  font-weight: 600;
}

.sim-card-item.bug-involved {
  border-left: 2px solid #fbbf24;
}

/* Synergy List */
.sim-synergy-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sim-synergy-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  font-size: var(--font-sm);
}

.sim-synergy-item.synergy-good {
  border-left: 2px solid #4ade80;
}

.sim-synergy-item.synergy-bad {
  border-left: 2px solid #f87171;
}

.sim-synergy-cards {
  flex: 1;
  color: var(--text-primary);
}

.sim-synergy-score {
  font-weight: 700;
  min-width: 50px;
  text-align: right;
  color: #4ade80;
}

.sim-synergy-item.synergy-bad .sim-synergy-score {
  color: #f87171;
}

.sim-synergy-record {
  color: var(--text-muted);
  font-size: var(--font-sm);
  min-width: 70px;
  text-align: right;
}

/* Enhanced Synergy Display */
.sim-synergy-item {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.sim-synergy-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.sim-synergy-type {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.sim-synergy-type.type-consume {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

.sim-synergy-type.type-free_play {
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
}

.sim-synergy-type.type-same_turn {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

.sim-synergy-type.type-buff {
  background: rgba(168, 85, 247, 0.2);
  color: #c4b5fd;
}

.sim-synergy-type.type-token {
  background: rgba(251, 191, 36, 0.2);
  color: #fcd34d;
}

.sim-synergy-type.type-death {
  background: rgba(107, 114, 128, 0.2);
  color: #9ca3af;
}

.sim-synergy-type.type-trap {
  background: rgba(236, 72, 153, 0.2);
  color: #f9a8d4;
}

.sim-synergy-type.type-legacy {
  background: rgba(107, 114, 128, 0.15);
  color: #9ca3af;
}

.sim-synergy-type.type-other {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
}

.sim-synergy-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}

.sim-synergy-stat {
  font-size: 12px;
  color: var(--text-secondary);
}

.sim-synergy-stat strong {
  color: var(--text-primary);
}

.sim-synergy-stat.lift-high {
  color: #4ade80;
}

.sim-synergy-stat.lift-ok {
  color: #fbbf24;
}

.sim-synergy-stat.lift-low {
  color: #f87171;
}

.sim-synergy-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 11px;
}

.sim-synergy-legend .legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
}

.sim-synergy-note {
  padding: 12px;
  background: rgba(251, 191, 36, 0.1);
  border-radius: 6px;
  margin-bottom: 16px;
  text-align: center;
}

.sim-synergy-note p {
  margin: 0;
  color: var(--text-secondary);
}

/* Empty State */
.sim-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
}

.sim-empty-hint {
  font-size: var(--font-sm);
  color: var(--text-muted);
  margin-top: 8px;
}

.sim-note {
  font-size: var(--font-sm);
  color: var(--text-muted);
  margin-bottom: 12px;
}

/* Actions */
.sim-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--border-subtle);
}

/* Responsive */
@media (max-width: 600px) {
  .sim-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sim-status-bar {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .sim-card-item,
  .sim-synergy-item {
    flex-wrap: wrap;
  }
}

/* ============================================================================
   SPELL VISUAL EFFECTS
   ============================================================================ */

/* Screen shake for meteor/quake effects */
.screen-shake {
  animation: screen-shake 0.3s ease-out;
}

@keyframes screen-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-8px) translateY(4px);
  }
  40% {
    transform: translateX(8px) translateY(-4px);
  }
  60% {
    transform: translateX(-6px) translateY(2px);
  }
  80% {
    transform: translateX(6px) translateY(-2px);
  }
}

/* ============================================================================
   SPELL PROJECTILES
   ============================================================================ */

.spell-projectile {
  position: absolute;
  pointer-events: none;
  z-index: 15;
  transform: translate(-50%, -50%);
}

/* Net projectile - blue mesh */
.spell-projectile--net {
  width: 50px;
  height: 50px;
  border: 3px solid var(--spell-color, #4fc3f7);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    transparent 30%,
    var(--spell-glow, rgba(79, 195, 247, 0.4)) 70%
  );
  box-shadow: 0 0 20px var(--spell-glow, rgba(79, 195, 247, 0.6));
}

.spell-projectile--net::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 2px dashed var(--spell-color, #4fc3f7);
  border-radius: 50%;
  opacity: 0.8;
}

/* Rifle projectile - bullet trail */
.spell-projectile--rifle {
  width: 8px;
  height: 30px;
  background: linear-gradient(to bottom, #ff6b6b, #feca57);
  border-radius: 4px;
  box-shadow:
    0 0 15px rgba(255, 107, 107, 0.8),
    0 0 30px rgba(254, 202, 87, 0.5);
}

/* Harpoon projectile */
.spell-projectile--harpoon {
  width: 12px;
  height: 60px;
  background: linear-gradient(to bottom, #5f6368, #9e9e9e);
  border-radius: 2px;
  clip-path: polygon(50% 0%, 0% 20%, 0% 100%, 100% 100%, 100% 20%);
}

.spell-projectile--harpoon::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 2px;
  height: 100px;
  background: linear-gradient(to bottom, #8b7355, transparent);
  transform: translateX(-50%);
}

/* Dart projectile */
.spell-projectile--dart {
  width: 8px;
  height: 35px;
  background: linear-gradient(to bottom, #e74c3c, #c0392b);
  border-radius: 2px 2px 4px 4px;
  clip-path: polygon(50% 0%, 0% 30%, 0% 100%, 100% 100%, 100% 30%);
}

/* Arrow projectile */
.spell-projectile--arrow {
  width: 6px;
  height: 40px;
  background: linear-gradient(to bottom, #5d4e37, #8b7355);
  border-radius: 1px;
}

.spell-projectile--arrow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 12px solid #5f6368;
}

/* Venom bolt */
.spell-projectile--venom,
.spell-projectile--venom-bolt,
.spell-projectile--venom-small {
  width: 16px;
  height: 16px;
  background: radial-gradient(circle, #76ff03, #558b2f);
  border-radius: 50%;
  box-shadow:
    0 0 15px rgba(118, 255, 3, 0.8),
    0 0 30px rgba(85, 139, 47, 0.5);
}

/* Feather bolt */
.spell-projectile--feather-bolt {
  width: 20px;
  height: 8px;
  background: linear-gradient(90deg, #fff9c4, #ffd54f);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 213, 79, 0.6);
}

/* Web strand */
.spell-projectile--web-strand,
.spell-projectile--web-quick {
  width: 4px;
  height: 80px;
  background: linear-gradient(to bottom, rgba(158, 158, 158, 0.8), rgba(158, 158, 158, 0.2));
}

/* Claw strike */
.spell-projectile--claw {
  width: 60px;
  height: 60px;
  background: transparent;
}

.spell-projectile--claw::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      135deg,
      transparent 40%,
      var(--spell-color, #c19a6b) 40%,
      var(--spell-color, #c19a6b) 45%,
      transparent 45%
    ),
    linear-gradient(
      135deg,
      transparent 50%,
      var(--spell-color, #c19a6b) 50%,
      var(--spell-color, #c19a6b) 55%,
      transparent 55%
    ),
    linear-gradient(
      135deg,
      transparent 60%,
      var(--spell-color, #c19a6b) 60%,
      var(--spell-color, #c19a6b) 65%,
      transparent 65%
    ),
    linear-gradient(
      135deg,
      transparent 70%,
      var(--spell-color, #c19a6b) 70%,
      var(--spell-color, #c19a6b) 75%,
      transparent 75%
    );
  box-shadow: 0 0 20px var(--spell-glow, rgba(141, 110, 99, 0.6));
}

/* Water bolt */
.spell-projectile--water-bolt,
.spell-projectile--leap {
  width: 24px;
  height: 24px;
  background: radial-gradient(circle, #81c784, #4caf50);
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(129, 199, 132, 0.8);
}

/* Fangs */
.spell-projectile--fangs {
  width: 30px;
  height: 20px;
  background: transparent;
}

.spell-projectile--fangs::before,
.spell-projectile--fangs::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 16px;
  background: linear-gradient(to bottom, #e0e0e0, #9e9e9e);
  border-radius: 0 0 4px 4px;
  clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
}

.spell-projectile--fangs::before {
  left: 5px;
  transform: rotate(-15deg);
}

.spell-projectile--fangs::after {
  right: 5px;
  transform: rotate(15deg);
}

/* Shotgun spread */
.spell-projectile--shotgun {
  width: 40px;
  height: 40px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9), transparent 60%);
  box-shadow: 0 0 30px rgba(255, 193, 7, 0.8);
}

/* Projectile flight animation */
@keyframes spell-projectile-fly {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.8);
  }
  80% {
    opacity: 1;
    transform: translate(calc(-50% + var(--target-x)), calc(-50% + var(--target-y))) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--target-x)), calc(-50% + var(--target-y))) scale(1.2);
  }
}

/* Arrow fall animation */
@keyframes spell-arrow-fall {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(var(--target-y));
  }
}

/* ============================================================================
   SPELL IMPACT EFFECTS
   ============================================================================ */

.spell-impact {
  position: absolute;
  pointer-events: none;
  z-index: 16;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border: 3px solid var(--spell-color, #4fc3f7);
  border-radius: 50%;
  box-shadow: 0 0 20px var(--spell-glow, rgba(79, 195, 247, 0.6));
}

@keyframes spell-impact-ring {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

/* Card hit effect */
.spell-hit {
  animation: spell-card-hit 0.5s ease-out;
}

@keyframes spell-card-hit {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
  20% {
    transform: scale(0.95);
    filter: brightness(1.5);
  }
  40% {
    transform: scale(1.05);
    filter: brightness(0.8);
  }
}

/* Flood hit */
.spell-hit-flood {
  animation: spell-hit-flood 0.6s ease-out;
}

@keyframes spell-hit-flood {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateY(-10px) scale(0.9);
    opacity: 0.8;
  }
  100% {
    transform: translateY(20px) scale(0.7);
    opacity: 0;
  }
}

/* Meteor hit */
.spell-hit-meteor {
  animation: spell-hit-meteor 0.5s ease-out;
}

@keyframes spell-hit-meteor {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
  30% {
    transform: scale(1.1);
    filter: brightness(2) sepia(0.5);
  }
  60% {
    transform: scale(0.9);
    filter: brightness(0.6);
  }
}

/* Arrow hit */
.spell-hit-arrow {
  animation: spell-hit-arrow 0.4s ease-out;
}

@keyframes spell-hit-arrow {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(3px);
  }
}

/* Wave hit */
.spell-hit-wave {
  animation: spell-hit-wave 0.4s ease-out;
}

@keyframes spell-hit-wave {
  0%,
  100% {
    transform: translateX(0);
    opacity: 1;
  }
  50% {
    transform: translateX(10px);
    opacity: 0.8;
  }
}

/* ============================================================================
   SPELL AOE EFFECTS
   ============================================================================ */

.spell-aoe {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

/* Flood - Water rising and crashing */
.spell-aoe--flood {
  background: linear-gradient(
    to top,
    rgba(33, 150, 243, 0.8) 0%,
    rgba(33, 150, 243, 0.4) 30%,
    transparent 60%
  );
  animation: spell-flood 1s ease-out forwards;
}

@keyframes spell-flood {
  0% {
    transform: translateY(100%);
    opacity: 0.6;
  }
  40% {
    transform: translateY(0);
    opacity: 0.9;
  }
  60% {
    transform: translateY(-10%);
    opacity: 0.8;
  }
  100% {
    transform: translateY(-30%);
    opacity: 0;
  }
}

/* Darken overlay for meteor */
.spell-aoe--darken {
  background: rgba(0, 0, 0, 0.6);
  animation: spell-darken 1.2s ease-out forwards;
}

@keyframes spell-darken {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Meteor falling */
.spell-aoe--meteor {
  width: 80px;
  height: 80px;
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  background: radial-gradient(circle, #ff6b6b, #f4511e, #bf360c);
  border-radius: 50%;
  box-shadow:
    0 0 40px rgba(255, 107, 107, 0.8),
    0 0 80px rgba(244, 81, 30, 0.6),
    0 20px 60px rgba(191, 54, 12, 0.4);
  animation: spell-meteor-fall 0.8s ease-in forwards;
}

.spell-aoe--meteor::after {
  content: '';
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 100px;
  background: linear-gradient(to top, rgba(255, 107, 107, 0.8), transparent);
  border-radius: 20px;
}

@keyframes spell-meteor-fall {
  0% {
    top: -100px;
    transform: translateX(-50%) scale(0.5);
    opacity: 1;
  }
  70% {
    top: 40%;
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
  85% {
    top: 45%;
    transform: translateX(-50%) scale(1.5);
    opacity: 0.9;
  }
  100% {
    top: 50%;
    transform: translateX(-50%) scale(3);
    opacity: 0;
  }
}

/* Blizzard tint */
.spell-aoe--blizzard-tint {
  background: rgba(129, 212, 250, 0.3);
  animation: spell-blizzard-tint 1.2s ease-out forwards;
}

@keyframes spell-blizzard-tint {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Blizzard storm */
.spell-aoe--blizzard {
  background:
    radial-gradient(2px 2px at 10% 20%, white, transparent),
    radial-gradient(3px 3px at 30% 40%, white, transparent),
    radial-gradient(2px 2px at 50% 15%, white, transparent),
    radial-gradient(3px 3px at 70% 35%, white, transparent),
    radial-gradient(2px 2px at 90% 25%, white, transparent),
    radial-gradient(3px 3px at 20% 60%, white, transparent),
    radial-gradient(2px 2px at 40% 80%, white, transparent),
    radial-gradient(3px 3px at 60% 70%, white, transparent),
    radial-gradient(2px 2px at 80% 55%, white, transparent);
  animation: spell-blizzard 1.2s linear forwards;
}

@keyframes spell-blizzard {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(20px);
  }
}

/* Wave sweep */
.spell-aoe--wave {
  background: linear-gradient(
    calc(90deg * var(--wave-direction, 1)),
    transparent 0%,
    rgba(79, 195, 247, 0.6) 40%,
    rgba(79, 195, 247, 0.8) 50%,
    rgba(79, 195, 247, 0.6) 60%,
    transparent 100%
  );
  animation: spell-wave-sweep 0.8s ease-out forwards;
}

@keyframes spell-wave-sweep {
  0% {
    transform: translateX(calc(-100% * var(--wave-direction, 1)));
    opacity: 0.8;
  }
  100% {
    transform: translateX(calc(100% * var(--wave-direction, 1)));
    opacity: 0;
  }
}

/* Web explosion center */
.spell-aoe--web-center {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(158, 158, 158, 0.8), transparent);
  border-radius: 50%;
}

@keyframes spell-web-explode {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(4);
    opacity: 0;
  }
}

/* Web spread */
.spell-aoe--web-spread {
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 20px,
      rgba(158, 158, 158, 0.3) 20px,
      rgba(158, 158, 158, 0.3) 22px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 20px,
      rgba(158, 158, 158, 0.3) 20px,
      rgba(158, 158, 158, 0.3) 22px
    );
  animation: spell-web-spread 0.8s ease-out forwards;
}

@keyframes spell-web-spread {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

/* Monsoon rain */
.spell-aoe--monsoon {
  background:
    linear-gradient(to bottom, rgba(33, 150, 243, 0.1), rgba(33, 150, 243, 0.4)),
    repeating-linear-gradient(
      100deg,
      transparent,
      transparent 10px,
      rgba(255, 255, 255, 0.1) 10px,
      rgba(255, 255, 255, 0.1) 12px
    );
  animation: spell-monsoon 1s ease-out forwards;
}

@keyframes spell-monsoon {
  0% {
    opacity: 0;
    background-position: 0 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
    background-position: 0 100px;
  }
  100% {
    opacity: 0;
  }
}

/* Lightning flash */
.spell-aoe--lightning {
  background: rgba(255, 255, 255, 0.8);
  animation: spell-lightning 0.1s ease-out;
}

@keyframes spell-lightning {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

/* Shell shatter */
.spell-aoe--shatter {
  background: radial-gradient(
    circle at center,
    transparent 20%,
    rgba(255, 152, 0, 0.3) 40%,
    transparent 60%
  );
  animation: spell-shatter 0.6s ease-out forwards;
}

@keyframes spell-shatter {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* Strike wave */
.spell-aoe--strike {
  background: linear-gradient(
    calc(90deg * var(--wave-direction, 1)),
    transparent 0%,
    rgba(129, 199, 132, 0.5) 45%,
    rgba(129, 199, 132, 0.8) 50%,
    rgba(129, 199, 132, 0.5) 55%,
    transparent 100%
  );
  animation: spell-strike-wave 0.4s ease-out forwards;
}

@keyframes spell-strike-wave {
  0% {
    transform: translateX(calc(-100% * var(--wave-direction, 1)));
  }
  100% {
    transform: translateX(calc(100% * var(--wave-direction, 1)));
  }
}

/* Quake effect */
.spell-aoe--quake {
  background: linear-gradient(to top, rgba(139, 69, 19, 0.4), transparent 50%);
  animation: spell-quake 0.6s ease-out forwards;
}

@keyframes spell-quake {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Generic pulse */
.spell-aoe--pulse {
  background: radial-gradient(
    circle at center,
    var(--spell-glow, rgba(79, 195, 247, 0.6)),
    transparent 70%
  );
  animation: spell-aoe-pulse 0.8s ease-out forwards;
}

@keyframes spell-aoe-pulse {
  0% {
    transform: scale(0.5);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Sunshine rays */
.spell-aoe--sunshine {
  background:
    radial-gradient(circle at 50% -20%, rgba(255, 193, 7, 0.6) 0%, transparent 50%),
    repeating-conic-gradient(
      from 0deg at 50% -20%,
      transparent 0deg,
      rgba(255, 213, 79, 0.3) 5deg,
      transparent 10deg
    );
  animation: spell-sunshine 1s ease-out forwards;
}

@keyframes spell-sunshine {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Roar waves */
.spell-aoe--roar {
  background: radial-gradient(
    circle at center,
    transparent 30%,
    rgba(193, 154, 107, 0.4) 50%,
    transparent 70%
  );
  animation: spell-roar 0.8s ease-out forwards;
}

@keyframes spell-roar {
  0% {
    transform: scale(0.3);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* Pincers snap */
.spell-aoe--pincers {
  position: absolute;
  width: 100px;
  height: 60px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
  animation: spell-pincers 0.5s ease-out forwards;
}

@keyframes spell-pincers {
  0%,
  40% {
    transform: translate(-50%, -50%) scaleX(1.2);
  }
  50% {
    transform: translate(-50%, -50%) scaleX(0.8);
  }
  100% {
    transform: translate(-50%, -50%) scaleX(1);
    opacity: 0;
  }
}

/* Sand churn */
.spell-aoe--sand {
  background: linear-gradient(to top, rgba(194, 178, 128, 0.6), transparent 40%);
  animation: spell-sand 0.8s ease-out forwards;
}

@keyframes spell-sand {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  30% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
  }
}

/* Splash for bounce */
.spell-aoe--splash {
  background: radial-gradient(circle at center, rgba(129, 199, 132, 0.6), transparent 60%);
  animation: spell-splash 0.6s ease-out forwards;
}

@keyframes spell-splash {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Copy shimmer */
.spell-aoe--copy {
  background: radial-gradient(circle at center, rgba(255, 249, 196, 0.5), transparent 50%);
  animation: spell-copy 0.8s ease-out forwards;
}

@keyframes spell-copy {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

/* Utility pulse */
.spell-aoe--utility {
  background: radial-gradient(
    circle at center,
    var(--spell-glow, rgba(129, 199, 132, 0.5)),
    transparent 60%
  );
  animation: spell-utility 0.6s ease-out forwards;
}

@keyframes spell-utility {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

/* ============================================================================
   SPELL BUFF EFFECTS
   ============================================================================ */

/* Buff glow on card */
.spell-buff-glow {
  animation: spell-buff-glow 0.8s ease-out;
}

@keyframes spell-buff-glow {
  0% {
    box-shadow: 0 0 0 rgba(255, 215, 0, 0);
    filter: brightness(1);
  }
  40% {
    box-shadow:
      0 0 30px rgba(255, 215, 0, 0.8),
      0 0 50px rgba(255, 215, 0, 0.4);
    filter: brightness(1.3);
  }
  100% {
    box-shadow: 0 0 0 rgba(255, 215, 0, 0);
    filter: brightness(1);
  }
}

/* Pride buff - golden aura */
.spell-buff-pride {
  animation: spell-buff-pride 1s ease-out;
}

@keyframes spell-buff-pride {
  0% {
    box-shadow: 0 0 0 rgba(193, 154, 107, 0);
  }
  30% {
    box-shadow:
      0 0 40px rgba(193, 154, 107, 0.9),
      0 0 60px rgba(193, 154, 107, 0.5);
  }
  100% {
    box-shadow: 0 0 0 rgba(193, 154, 107, 0);
  }
}

/* Buff pop text */
.spell-buff-pop {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  font-weight: bold;
  color: #4caf50;
  text-shadow:
    0 0 10px rgba(76, 175, 80, 0.8),
    0 2px 4px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 20;
  animation: spell-buff-pop 0.8s ease-out forwards;
}

@keyframes spell-buff-pop {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }
  30% {
    transform: translate(-50%, -70%) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -120%) scale(1);
    opacity: 0;
  }
}

/* Splash effect */
.spell-effect--splash {
  position: absolute;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--spell-color, white), transparent 70%);
  animation: spell-splash-circle 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-splash-circle {
  0% {
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}

/* ============================================================================
   SPELL PARTICLES
   ============================================================================ */

.spell-particle {
  position: absolute;
  pointer-events: none;
  z-index: 15;
}

/* Bubble particle */
.spell-particle--bubble {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.8),
    var(--spell-color, #4fc3f7)
  );
  border: 1px solid rgba(255, 255, 255, 0.5);
  animation: spell-bubble-rise 1s ease-out forwards;
}

@keyframes spell-bubble-rise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-80px) scale(0.5);
    opacity: 0;
  }
}

/* Feather particle */
.spell-particle--feather {
  width: 16px;
  height: 8px;
  background: linear-gradient(90deg, var(--spell-color, #fff9c4), #ffd54f);
  border-radius: 50%;
  animation: spell-feather-fall 1.2s ease-out forwards;
}

@keyframes spell-feather-fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: translateY(100px) rotate(180deg) translateX(20px);
    opacity: 0.8;
  }
  100% {
    transform: translateY(200px) rotate(360deg) translateX(-10px);
    opacity: 0;
  }
}

/* Feather heal - spiraling up */
.spell-particle--feather-heal {
  width: 12px;
  height: 6px;
  background: linear-gradient(90deg, white, #e0e0e0);
  border-radius: 50%;
  animation: spell-feather-spiral 0.8s ease-out forwards;
}

@keyframes spell-feather-spiral {
  0% {
    transform: translateY(0) rotate(0deg) translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-60px) rotate(360deg) translateX(20px);
    opacity: 0;
  }
}

/* Raindrop particle */
.spell-particle--raindrop {
  width: 4px;
  height: 12px;
  background: linear-gradient(to bottom, transparent, var(--spell-color, #81c784));
  border-radius: 0 0 4px 4px;
  animation: spell-rain-fall 0.6s linear forwards;
}

@keyframes spell-rain-fall {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(150px);
    opacity: 0;
  }
}

/* Heal particle - green glow rising */
.spell-particle--heal {
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, #4caf50, transparent);
  border-radius: 50%;
  animation: spell-heal-rise 0.8s ease-out forwards;
}

@keyframes spell-heal-rise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-50px) scale(0.5);
    opacity: 0;
  }
}

/* Sparkle particle */
.spell-particle--sparkle {
  width: 6px;
  height: 6px;
  background: var(--spell-color, #ffd54f);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--spell-color, #ffd54f);
  animation: spell-sparkle-burst 0.6s ease-out forwards;
}

@keyframes spell-sparkle-burst {
  0% {
    transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) translateX(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) translateX(60px);
    opacity: 0;
  }
}

/* ============================================================================
   SPELL STATUS EFFECTS ON CARDS
   ============================================================================ */

/* Freeze effect */
.spell-freeze {
  animation: spell-freeze 1s ease-out;
}

@keyframes spell-freeze {
  0% {
    filter: brightness(1) hue-rotate(0deg);
  }
  30% {
    filter: brightness(1.2) hue-rotate(-30deg);
    box-shadow:
      0 0 30px rgba(129, 212, 250, 0.8),
      inset 0 0 20px rgba(129, 212, 250, 0.4);
  }
  100% {
    filter: brightness(1) hue-rotate(0deg);
  }
}

/* Web effect */
.spell-webbed {
  animation: spell-webbed 1s ease-out;
}

@keyframes spell-webbed {
  0% {
    filter: brightness(1);
  }
  30% {
    filter: brightness(0.9) grayscale(0.3);
    box-shadow: 0 0 20px rgba(158, 158, 158, 0.6);
  }
  100% {
    filter: brightness(1);
  }
}

/* Paralyze effect */
.spell-paralyze {
  animation: spell-paralyze 1s ease-out;
}

@keyframes spell-paralyze {
  0%,
  100% {
    filter: brightness(1);
    transform: scale(1);
  }
  20%,
  60% {
    filter: brightness(0.8) saturate(1.5);
    transform: scale(0.98);
    box-shadow: 0 0 25px rgba(156, 39, 176, 0.7);
  }
}

/* Bounce effect */
.spell-bounce {
  animation: spell-bounce 0.6s ease-out;
}

@keyframes spell-bounce {
  0% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
  30% {
    transform: scale(0.8) translateY(10px);
    opacity: 1;
  }
  100% {
    transform: scale(0.5) translateY(-100px);
    opacity: 0;
  }
}

/* Stalk fade */
.spell-stalk {
  animation: spell-stalk 0.8s ease-out;
}

@keyframes spell-stalk {
  0% {
    filter: brightness(1);
    opacity: 1;
  }
  50% {
    filter: brightness(0.7) sepia(0.3);
    opacity: 0.7;
  }
  100% {
    filter: brightness(1);
    opacity: 1;
  }
}

/* Barrier shimmer */
.spell-barrier {
  animation: spell-barrier 0.8s ease-out;
}

@keyframes spell-barrier {
  0% {
    box-shadow: 0 0 0 rgba(79, 195, 247, 0);
  }
  50% {
    box-shadow:
      0 0 30px rgba(79, 195, 247, 0.8),
      inset 0 0 15px rgba(79, 195, 247, 0.3);
  }
  100% {
    box-shadow: 0 0 0 rgba(79, 195, 247, 0);
  }
}

/* Acuity glow */
.spell-acuity {
  animation: spell-acuity 0.8s ease-out;
}

@keyframes spell-acuity {
  0% {
    box-shadow: 0 0 0 rgba(255, 235, 59, 0);
  }
  50% {
    box-shadow: 0 0 25px rgba(255, 235, 59, 0.8);
  }
  100% {
    box-shadow: 0 0 0 rgba(255, 235, 59, 0);
  }
}

/* Status apply generic */
.spell-status-apply {
  animation: spell-status-apply 0.8s ease-out;
}

@keyframes spell-status-apply {
  0% {
    box-shadow: 0 0 0 var(--spell-glow, rgba(158, 158, 158, 0));
  }
  50% {
    box-shadow: 0 0 25px var(--spell-glow, rgba(158, 158, 158, 0.6));
  }
  100% {
    box-shadow: 0 0 0 var(--spell-glow, rgba(158, 158, 158, 0));
  }
}

/* Shell glow (before shatter) */
.spell-shell-glow {
  animation: spell-shell-glow 0.4s ease-out;
}

@keyframes spell-shell-glow {
  0% {
    box-shadow: 0 0 0 rgba(255, 152, 0, 0);
  }
  100% {
    box-shadow: 0 0 30px rgba(255, 152, 0, 0.9);
  }
}

/* Shell shatter on card */
.spell-shell-shatter {
  animation: spell-card-shatter 0.5s ease-out;
}

@keyframes spell-card-shatter {
  0% {
    transform: scale(1);
    filter: brightness(1.5);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

/* Shell form */
.spell-shell-form {
  animation: spell-shell-form 0.8s ease-out;
}

@keyframes spell-shell-form {
  0% {
    box-shadow: 0 0 0 rgba(255, 204, 128, 0);
  }
  50% {
    box-shadow:
      0 0 30px rgba(255, 204, 128, 0.8),
      inset 0 0 10px rgba(255, 204, 128, 0.3);
  }
  100% {
    box-shadow: 0 0 0 rgba(255, 204, 128, 0);
  }
}

/* Barnacle attach */
.spell-barnacle {
  animation: spell-barnacle 0.6s ease-out;
}

@keyframes spell-barnacle {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 204, 128, 0.6);
  }
}

/* Summon glow on slot */
.spell-summon-glow {
  animation: spell-summon-glow 0.6s ease-out;
}

@keyframes spell-summon-glow {
  0% {
    box-shadow: inset 0 0 0 rgba(255, 255, 255, 0);
  }
  50% {
    box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.6);
  }
  100% {
    box-shadow: inset 0 0 0 rgba(255, 255, 255, 0);
  }
}

/* Tidal pool on card */
.spell-tidal-pool {
  animation: spell-tidal-pool 1s ease-out;
}

@keyframes spell-tidal-pool {
  0% {
    box-shadow: 0 0 0 rgba(79, 195, 247, 0);
  }
  50% {
    box-shadow:
      0 0 25px rgba(79, 195, 247, 0.7),
      0 5px 20px rgba(79, 195, 247, 0.5);
  }
  100% {
    box-shadow: 0 0 0 rgba(79, 195, 247, 0);
  }
}

/* Transform shrink */
.spell-transform {
  animation: spell-transform-shrink 0.5s ease-in forwards;
}

@keyframes spell-transform-shrink {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: scale(0.3) rotate(180deg);
    opacity: 0.5;
  }
}

/* Sacrifice glow */
.spell-sacrifice {
  animation: spell-sacrifice 0.8s ease-out;
}

@keyframes spell-sacrifice {
  0% {
    filter: brightness(1);
    opacity: 1;
  }
  50% {
    filter: brightness(2) saturate(0);
    opacity: 0.8;
  }
  100% {
    filter: brightness(1);
    opacity: 0;
    transform: scale(0.5);
  }
}

/* Heal glow on player */
.spell-heal-glow {
  animation: spell-heal-glow 1s ease-out;
}

@keyframes spell-heal-glow {
  0% {
    box-shadow: 0 0 0 rgba(76, 175, 80, 0);
  }
  50% {
    box-shadow:
      0 0 30px rgba(76, 175, 80, 0.8),
      0 0 50px rgba(76, 175, 80, 0.4);
  }
  100% {
    box-shadow: 0 0 0 rgba(76, 175, 80, 0);
  }
}

/* Revealed hand */
.spell-revealed {
  animation: spell-revealed 1s ease-out;
}

@keyframes spell-revealed {
  0% {
    filter: brightness(1);
  }
  30% {
    filter: brightness(1.5);
    box-shadow: 0 0 30px rgba(255, 213, 79, 0.6);
  }
  100% {
    filter: brightness(1);
  }
}

/* ============================================================================
   SPELL SPECIAL EFFECTS
   ============================================================================ */

/* Venom swirl */
.spell-effect--venom-swirl {
  position: absolute;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%);
  border: 3px solid var(--spell-color, #76ff03);
  border-radius: 50%;
  border-top-color: transparent;
  animation: spell-venom-swirl 0.8s linear forwards;
  pointer-events: none;
}

@keyframes spell-venom-swirl {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) scale(1.5);
    opacity: 0;
  }
}

/* Coil effect */
.spell-effect--coil {
  position: absolute;
  width: 60px;
  height: 60px;
  transform: translate(-50%, -50%);
  border: 4px solid var(--spell-color, #9c27b0);
  border-radius: 50%;
  animation: spell-coil 0.8s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-coil {
  0% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

/* Grass effect for stalk */
.spell-effect--grass {
  position: absolute;
  width: 80px;
  height: 40px;
  transform: translate(-50%, 0);
  background:
    linear-gradient(85deg, transparent 45%, #558b2f 45%, #558b2f 50%, transparent 50%),
    linear-gradient(95deg, transparent 45%, #689f38 45%, #689f38 50%, transparent 50%),
    linear-gradient(80deg, transparent 40%, #7cb342 40%, #7cb342 45%, transparent 45%);
  animation: spell-grass 0.8s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-grass {
  0% {
    transform: translate(-50%, 20px) scaleY(0);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, 0) scaleY(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -10px) scaleY(0.5);
    opacity: 0;
  }
}

/* Roar ring */
.spell-effect--roar-ring {
  position: absolute;
  width: 60px;
  height: 60px;
  transform: translate(-50%, -50%);
  border: 4px solid var(--spell-color, #c19a6b);
  border-radius: 50%;
  animation: spell-roar-ring 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-roar-ring {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

/* Magic swirl for transmogrify */
.spell-effect--swirl {
  position: absolute;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%);
  border: 3px dashed var(--spell-color, #81c784);
  border-radius: 50%;
  animation: spell-swirl 0.5s linear forwards;
  pointer-events: none;
}

@keyframes spell-swirl {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) scale(1.2);
    opacity: 1;
  }
}

/* Poof effect */
.spell-effect--poof {
  position: absolute;
  width: 60px;
  height: 60px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--spell-color, #81c784), transparent 70%);
  border-radius: 50%;
  animation: spell-poof 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-poof {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

/* Draw card effect */
.spell-effect--draw-card {
  position: absolute;
  width: 40px;
  height: 56px;
  left: 50%;
  bottom: 100px;
  background: linear-gradient(135deg, #fff, #e0e0e0);
  border: 2px solid var(--spell-color, #81c784);
  border-radius: 4px;
  box-shadow: 0 0 15px var(--spell-glow, rgba(129, 199, 132, 0.6));
  animation: spell-draw-card 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-draw-card {
  0% {
    transform: translateX(-50%) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateX(var(--target-x, 0))
      translateY(calc(var(--target-y, 0) - 100px)) rotate(10deg);
    opacity: 0;
  }
}

/* Eye effect for reveal */
.spell-effect--eye {
  position: absolute;
  width: 100px;
  height: 50px;
  left: 50%;
  top: 20%;
  transform: translateX(-50%);
  border: 4px solid var(--spell-color, #ffd54f);
  border-radius: 50%;
  animation: spell-eye 1s ease-out forwards;
  pointer-events: none;
}

.spell-effect--eye::before {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #1a237e, #3f51b5);
  border-radius: 50%;
}

@keyframes spell-eye {
  0% {
    transform: translateX(-50%) scaleY(0);
    opacity: 0;
  }
  30% {
    transform: translateX(-50%) scaleY(1);
    opacity: 1;
  }
  70% {
    transform: translateX(-50%) scaleY(1);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) scaleY(0);
    opacity: 0;
  }
}

/* Search glow */
.spell-effect--search {
  position: absolute;
  width: 60px;
  height: 60px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--spell-color, #81c784), transparent 70%);
  border-radius: 50%;
  animation: spell-search 0.8s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-search {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, 50%) scale(0.8);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, 100%) scale(0.5);
    opacity: 0;
  }
}

/* Treasure chest */
.spell-effect--treasure {
  position: absolute;
  width: 60px;
  height: 40px;
  left: 50%;
  top: 60%;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, #8d6e63, #5d4037);
  border: 3px solid #ffd54f;
  border-radius: 4px 4px 8px 8px;
  animation: spell-treasure 1s ease-out forwards;
  pointer-events: none;
}

.spell-effect--treasure::before {
  content: '';
  position: absolute;
  top: -15px;
  left: -3px;
  right: -3px;
  height: 20px;
  background: linear-gradient(to bottom, #a1887f, #8d6e63);
  border: 3px solid #ffd54f;
  border-radius: 8px 8px 0 0;
  transform-origin: bottom;
  animation: spell-treasure-lid 1s ease-out forwards;
}

@keyframes spell-treasure {
  0% {
    transform: translateX(-50%) translateY(50px);
    opacity: 0;
  }
  30% {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
  70% {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(-20px);
    opacity: 0;
  }
}

@keyframes spell-treasure-lid {
  0%,
  30% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(-120deg);
  }
  70% {
    transform: rotateX(-120deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}

/* Trap activation */
.spell-effect--trap {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    var(--spell-glow, rgba(231, 76, 60, 0.4)),
    transparent 50%
  );
  animation: spell-trap 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-trap {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Spider skitter */
.spell-effect--spider {
  position: absolute;
  width: 20px;
  height: 15px;
  background: #424242;
  border-radius: 50%;
  pointer-events: none;
}

@keyframes spell-spider-skitter {
  0% {
    transform: translate(0, 100%);
    opacity: 1;
  }
  100% {
    transform: translate(var(--target-x, 0), var(--target-y, 0));
    opacity: 0;
  }
}

/* ============================================================================
   ENHANCED SPELL EFFECTS - Hearthstone-quality animations
   ============================================================================ */

/* Screen Effects */
.screen-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  animation: screen-flash-fade 0.15s ease-out forwards;
}

@keyframes screen-flash-fade {
  0% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
  }
}

.screen-tint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 99;
}

@keyframes screen-tint-fade {
  0% {
    opacity: var(--opacity, 0.3);
  }
  100% {
    opacity: 0;
  }
}

.screen-darken {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
  pointer-events: none;
  z-index: 98;
}

@keyframes screen-darken-pulse {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.screen-shake--light {
  animation: screen-shake-light 0.1s ease-out;
}

.screen-shake--medium {
  animation: screen-shake-medium 0.15s ease-out;
}

.screen-shake--heavy {
  animation: screen-shake-heavy 0.3s ease-out;
}

@keyframes screen-shake-light {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-3px) translateY(2px);
  }
  75% {
    transform: translateX(3px) translateY(-2px);
  }
}

@keyframes screen-shake-medium {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-5px) translateY(3px);
  }
  40% {
    transform: translateX(5px) translateY(-3px);
  }
  60% {
    transform: translateX(-4px) translateY(2px);
  }
  80% {
    transform: translateX(4px) translateY(-2px);
  }
}

@keyframes screen-shake-heavy {
  0%,
  100% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-10px) translateY(6px) rotate(-1deg);
  }
  20% {
    transform: translateX(10px) translateY(-6px) rotate(1deg);
  }
  30% {
    transform: translateX(-8px) translateY(5px) rotate(-0.5deg);
  }
  40% {
    transform: translateX(8px) translateY(-5px) rotate(0.5deg);
  }
  50% {
    transform: translateX(-6px) translateY(4px);
  }
  60% {
    transform: translateX(6px) translateY(-4px);
  }
  70% {
    transform: translateX(-4px) translateY(2px);
  }
  80% {
    transform: translateX(4px) translateY(-2px);
  }
  90% {
    transform: translateX(-2px) translateY(1px);
  }
}

/* ============================================================================
   NET SPELL - Bespoke Fishing Net Animation
   ============================================================================ */

/* Net bundle that launches and opens mid-flight */
.spell-projectile--net-bundle {
  position: absolute;
  width: 40px;
  height: 50px;
  transform: translate(-50%, -50%) rotate(var(--net-angle, 0deg));
  pointer-events: none;
}

.spell-projectile--net-bundle::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 4px,
      var(--spell-color, #4fc3f7) 4px,
      var(--spell-color, #4fc3f7) 6px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 4px,
      var(--spell-color, #4fc3f7) 4px,
      var(--spell-color, #4fc3f7) 6px
    );
  border-radius: 30% 30% 50% 50%;
  opacity: 0.9;
  animation: net-bundle-expand 0.55s ease-out forwards;
}

@keyframes spell-net-bundle-launch {
  0% {
    transform: translate(-50%, -50%) rotate(var(--net-angle, 0deg)) scale(0.6);
    opacity: 1;
  }
  30% {
    transform: translate(
        calc(-50% + var(--target-x) * 0.3),
        calc(-50% + var(--target-y) * 0.3 - 50px)
      )
      rotate(var(--net-angle, 0deg)) scale(1);
  }
  100% {
    transform: translate(calc(-50% + var(--target-x)), calc(-50% + var(--target-y)))
      rotate(var(--net-angle, 0deg)) scale(1.2);
    opacity: 1;
  }
}

@keyframes net-bundle-expand {
  0% {
    transform: scale(0.5, 0.7);
    border-radius: 30%;
  }
  50% {
    transform: scale(1, 1);
    border-radius: 30% 30% 50% 50%;
  }
  100% {
    transform: scale(1.3, 1.4);
    border-radius: 20% 20% 60% 60%;
  }
}

/* Rope trailing from net */
.spell-effect--net-rope {
  position: absolute;
  left: var(--start-x);
  top: var(--start-y);
  width: 3px;
  height: calc(
    sqrt(pow(calc(var(--end-x) - var(--start-x)), 2) + pow(calc(var(--end-y) - var(--start-y)), 2))
  );
  background: linear-gradient(to bottom, #8b7355, #6b5344);
  transform-origin: top center;
  transform: rotate(
    calc(atan2(calc(var(--end-x) - var(--start-x)), calc(var(--end-y) - var(--start-y))) * -1)
  );
  animation: net-rope-extend 0.5s ease-out forwards;
  pointer-events: none;
  opacity: 0.8;
}

@keyframes net-rope-extend {
  0% {
    clip-path: inset(0 0 100% 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

/* Mesh net that captures target */
.spell-effect--net-mesh {
  position: absolute;
  width: 100px;
  height: 120px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  overflow: visible;
}

.spell-effect--net-mesh::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 8px,
      var(--spell-color, #4fc3f7) 8px,
      var(--spell-color, #4fc3f7) 10px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 8px,
      var(--spell-color, #4fc3f7) 8px,
      var(--spell-color, #4fc3f7) 10px
    );
  border-radius: 20% 20% 50% 50%;
  opacity: 0.7;
}

.net-mesh-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--spell-color, #4fc3f7), transparent);
  transform-origin: left center;
  transform: rotate(var(--line-angle, 0deg));
}

@keyframes spell-net-mesh-capture {
  0% {
    transform: translate(-50%, -80%) scale(1.5, 0.3);
    opacity: 0.3;
  }
  30% {
    transform: translate(-50%, -50%) scale(1.2, 1.2);
    opacity: 0.8;
  }
  60% {
    transform: translate(-50%, -50%) scale(0.9, 1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -30%) scale(0.5, 0.6);
    opacity: 0;
  }
}

/* Net sinker/weight */
.spell-effect--net-sinker {
  position: absolute;
  width: 12px;
  height: 12px;
  background: radial-gradient(circle at 30% 30%, #888, var(--spell-color, #5f6368));
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: net-sinker-drop 0.5s ease-in forwards;
  pointer-events: none;
}

@keyframes net-sinker-drop {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }
  30% {
    transform: translate(-50%, 0%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, 30px) scale(0.8);
    opacity: 0;
  }
}

/* Target captured animation */
.spell-net-captured {
  animation: spell-net-captured 0.9s ease-out forwards !important;
}

@keyframes spell-net-captured {
  0% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.05) rotate(-3deg);
  }
  30% {
    transform: scale(0.95) rotate(3deg);
  }
  50% {
    transform: scale(0.85) rotate(-2deg) translateY(5px);
  }
  70% {
    transform: scale(0.7) translateY(15px);
  }
  100% {
    transform: scale(0.4) translateY(35px);
    opacity: 0.3;
  }
}

/* Net spray particles */
.spell-particle--net-spray {
  position: absolute;
  width: 6px;
  height: 10px;
  background: var(--spell-color, #4fc3f7);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: net-spray 0.4s ease-out forwards;
  pointer-events: none;
}

@keyframes net-spray {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  100% {
    transform: translate(calc(-50% + (random() - 0.5) * 30px), calc(-50% + 20px)) scale(0.3);
    opacity: 0;
  }
}

/* Bubble particle for net capture */
.spell-particle--bubble {
  position: absolute;
  width: 8px;
  height: 8px;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.8),
    var(--spell-color, rgba(79, 195, 247, 0.5))
  );
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: bubble-rise 0.7s ease-out forwards;
  pointer-events: none;
}

@keyframes bubble-rise {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  100% {
    transform: translate(calc(-50% + var(--rise-offset, 0px)), calc(-50% - 60px)) scale(0.5);
    opacity: 0;
  }
}

.spell-effect--water-ring {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 3px solid var(--spell-color, #4fc3f7);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: spell-water-ring 0.6s ease-out forwards;
  animation-delay: var(--ring-delay, 0s);
  pointer-events: none;
}

@keyframes spell-water-ring {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

.spell-particle--water-droplet {
  position: absolute;
  width: 8px;
  height: 12px;
  background: var(--spell-color, #4fc3f7);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform: translate(-50%, -50%);
  animation: spell-water-droplet 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-water-droplet {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(
        calc(-50% + var(--spread, 40px) * cos(var(--angle, 0deg))),
        calc(-50% + var(--spread, 40px) * sin(var(--angle, 0deg)) + 20px)
      )
      scale(0.5);
    opacity: 0;
  }
}

.spell-particle--splash {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--spell-color, #4fc3f7);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: spell-splash-particle 0.4s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-splash-particle {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(
        calc(-50% + var(--spread, 40px) * cos(var(--angle, 0deg))),
        calc(-50% + var(--spread, 40px) * sin(var(--angle, 0deg)))
      )
      scale(0);
    opacity: 0;
  }
}

/* ============================================================================
   RIFLE SPELL - Enhanced
   ============================================================================ */

.spell-effect--crosshair {
  position: absolute;
  width: 60px;
  height: 60px;
  transform: translate(-50%, -50%);
  border: 3px solid #ff4444;
  border-radius: 50%;
  animation: spell-crosshair-lock 0.4s ease-out forwards;
  pointer-events: none;
}

.spell-effect--crosshair::before,
.spell-effect--crosshair::after {
  content: '';
  position: absolute;
  background: #ff4444;
}

.spell-effect--crosshair::before {
  top: 50%;
  left: -10px;
  right: -10px;
  height: 2px;
  transform: translateY(-50%);
}

.spell-effect--crosshair::after {
  left: 50%;
  top: -10px;
  bottom: -10px;
  width: 2px;
  transform: translateX(-50%);
}

@keyframes spell-crosshair-lock {
  0% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }
  70% {
    transform: translate(-50%, -50%) scale(0.95);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

.spell-particle--smoke {
  position: absolute;
  width: 15px;
  height: 15px;
  background: radial-gradient(circle, rgba(100, 100, 100, 0.6), transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: spell-smoke-drift 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-smoke-drift {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.8;
  }
  100% {
    transform: translate(calc(-50% + 10px), calc(-50% - 20px)) scale(1.5);
    opacity: 0;
  }
}

.spell-effect--impact-flash {
  position: absolute;
  width: 80px;
  height: 80px;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.9),
    rgba(255, 200, 100, 0.5),
    transparent
  );
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: spell-impact-flash 0.15s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-impact-flash {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}

.spell-particle--shatter {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--spell-color, #9e9e9e);
  transform: translate(-50%, -50%);
  animation: spell-shatter-fly 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-shatter-fly {
  0% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(
        calc(-50% + var(--spread, 80px) * cos(var(--angle, 0deg))),
        calc(-50% + var(--spread, 80px) * sin(var(--angle, 0deg)) + 30px)
      )
      scale(0.3) rotate(360deg);
    opacity: 0;
  }
}

/* ============================================================================
   RIFLE SPELL - Bespoke Sniper Animation
   ============================================================================ */

/* Scope vignette effect */
.spell-effect--rifle-scope {
  position: absolute;
  width: 200px;
  height: 200px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    transparent 30%,
    rgba(0, 0, 0, 0.7) 70%,
    rgba(0, 0, 0, 0.9) 100%
  );
  animation: rifle-scope-zoom 0.5s ease-out forwards;
  pointer-events: none;
  z-index: 5;
}

@keyframes rifle-scope-zoom {
  0% {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

/* Enhanced crosshair with range-finder */
.spell-effect--rifle-crosshair {
  position: absolute;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 6;
}

.spell-effect--rifle-crosshair::before,
.spell-effect--rifle-crosshair::after {
  content: '';
  position: absolute;
  background: rgba(255, 50, 50, 0.9);
}

.spell-effect--rifle-crosshair::before {
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  transform: translateY(-50%);
}

.spell-effect--rifle-crosshair::after {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
}

.rifle-range-mark {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--mark-offset, 15px));
  width: 10px;
  height: 1px;
  background: rgba(255, 50, 50, 0.6);
  transform: translateX(-50%);
}

@keyframes spell-rifle-crosshair-lock {
  0% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0.3;
  }
  60% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

.spell-effect--rifle-crosshair.locked {
  animation: crosshair-locked-pulse 0.15s ease-in-out 2;
}

@keyframes crosshair-locked-pulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(0.95);
  }
}

/* Muzzle flash */
.spell-effect--rifle-muzzle {
  position: absolute;
  width: 60px;
  height: 60px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(255, 220, 150, 1) 0%,
    rgba(255, 150, 50, 0.8) 40%,
    transparent 70%
  );
  border-radius: 50%;
  animation: rifle-muzzle-flash 0.15s ease-out forwards;
  pointer-events: none;
}

@keyframes rifle-muzzle-flash {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

/* Bullet trace line */
.spell-effect--bullet-trace {
  position: absolute;
  left: var(--start-x);
  top: var(--start-y);
  width: 4px;
  height: calc(
    sqrt(pow(calc(var(--end-x) - var(--start-x)), 2) + pow(calc(var(--end-y) - var(--start-y)), 2))
  );
  background: linear-gradient(
    to bottom,
    rgba(255, 220, 150, 0.9),
    rgba(255, 150, 50, 0.5),
    transparent
  );
  transform-origin: top center;
  transform: rotate(
    calc(atan2(calc(var(--end-x) - var(--start-x)), calc(var(--end-y) - var(--start-y))) * -1)
  );
  animation: bullet-trace-flash 0.2s ease-out forwards;
  pointer-events: none;
}

@keyframes bullet-trace-flash {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Rifle smoke */
.spell-particle--rifle-smoke {
  position: absolute;
  width: 15px;
  height: 15px;
  background: radial-gradient(circle, rgba(150, 150, 150, 0.6) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: rifle-smoke-drift 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes rifle-smoke-drift {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.8;
  }
  100% {
    transform: translate(calc(-50% + (random() - 0.5) * 20px), calc(-50% - 20px)) scale(1.5);
    opacity: 0;
  }
}

/* Impact effect */
.spell-effect--rifle-impact {
  position: absolute;
  width: 50px;
  height: 50px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(255, 100, 100, 0.9) 0%,
    rgba(255, 50, 50, 0.5) 50%,
    transparent 70%
  );
  border-radius: 50%;
  animation: rifle-impact-burst 0.2s ease-out forwards;
  pointer-events: none;
}

@keyframes rifle-impact-burst {
  0% {
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}

/* Shell casing eject */
.spell-particle--shell-casing {
  position: absolute;
  width: 6px;
  height: 14px;
  background: linear-gradient(90deg, #b8860b, #daa520, #b8860b);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  animation: shell-casing-eject 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes shell-casing-eject {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + 40px), calc(-50% + 60px)) rotate(720deg);
    opacity: 0;
  }
}

/* Target elimination */
.spell-rifle-eliminated {
  animation: spell-rifle-eliminated 0.7s ease-out forwards !important;
}

@keyframes spell-rifle-eliminated {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  10% {
    transform: scale(1.15) translateX(-8px);
    filter: brightness(3);
  }
  25% {
    transform: scale(0.9) translateX(6px);
    filter: brightness(2);
  }
  40% {
    transform: scale(0.95) translateX(-4px);
    filter: brightness(1.5);
  }
  60% {
    transform: scale(0.9);
    filter: brightness(1) saturate(0.5);
  }
  100% {
    transform: scale(0.85);
    filter: brightness(0.8) saturate(0.3);
    opacity: 0.6;
  }
}

/* ============================================================================
   HARPOON SPELL - Bespoke Impale & Yank Animation
   ============================================================================ */

/* Barbed harpoon projectile */
.spell-projectile--harpoon-barbed {
  position: absolute;
  width: 14px;
  height: 70px;
  transform: translate(-50%, -50%) rotate(var(--harpoon-angle, 0deg));
  pointer-events: none;
}

.spell-projectile--harpoon-barbed::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 14px;
  height: 25px;
  background: linear-gradient(to bottom, #c0c0c0, #808080);
  transform: translateX(-50%);
  clip-path: polygon(50% 0%, 0% 40%, 20% 40%, 20% 100%, 80% 100%, 80% 40%, 100% 40%);
}

.spell-projectile--harpoon-barbed::after {
  content: '';
  position: absolute;
  top: 25px;
  left: 50%;
  width: 8px;
  height: 45px;
  background: linear-gradient(90deg, #5a4a3a, #8b7355, #5a4a3a);
  transform: translateX(-50%);
  border-radius: 2px;
}

/* Harpoon rope */
.spell-effect--harpoon-rope {
  position: absolute;
  left: var(--start-x);
  top: var(--start-y);
  width: 4px;
  height: calc(
    sqrt(pow(calc(var(--end-x) - var(--start-x)), 2) + pow(calc(var(--end-y) - var(--start-y)), 2))
  );
  background: repeating-linear-gradient(
    to bottom,
    #8b7355 0px,
    #8b7355 4px,
    #6b5344 4px,
    #6b5344 8px
  );
  transform-origin: top center;
  transform: rotate(
    calc(atan2(calc(var(--end-x) - var(--start-x)), calc(var(--end-y) - var(--start-y))) * -1)
  );
  animation: harpoon-rope-extend 0.3s ease-out forwards;
  pointer-events: none;
  opacity: 0.9;
}

.spell-effect--harpoon-rope.taut {
  animation: harpoon-rope-taut 0.2s ease-out forwards;
}

@keyframes harpoon-rope-extend {
  0% {
    clip-path: inset(0 0 100% 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes harpoon-rope-taut {
  0% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.3);
    transform: rotate(
        calc(atan2(calc(var(--end-x) - var(--start-x)), calc(var(--end-y) - var(--start-y))) * -1)
      )
      scaleX(1.1);
  }
  100% {
    filter: brightness(1);
  }
}

/* Embedded harpoon */
.spell-effect--harpoon-embedded {
  position: absolute;
  width: 12px;
  height: 30px;
  transform: translate(-50%, -50%) rotate(var(--harpoon-angle, 0deg));
  pointer-events: none;
  animation: harpoon-embedded-wobble 0.3s ease-out;
}

.spell-effect--harpoon-embedded::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 12px;
  height: 20px;
  background: linear-gradient(to bottom, #c0c0c0, #808080);
  transform: translateX(-50%);
  clip-path: polygon(50% 0%, 0% 50%, 25% 50%, 25% 100%, 75% 100%, 75% 50%, 100% 50%);
}

@keyframes harpoon-embedded-wobble {
  0% {
    transform: translate(-50%, -50%) rotate(var(--harpoon-angle, 0deg));
  }
  25% {
    transform: translate(-50%, -50%) rotate(calc(var(--harpoon-angle, 0deg) + 8deg));
  }
  50% {
    transform: translate(-50%, -50%) rotate(calc(var(--harpoon-angle, 0deg) - 5deg));
  }
  75% {
    transform: translate(-50%, -50%) rotate(calc(var(--harpoon-angle, 0deg) + 2deg));
  }
  100% {
    transform: translate(-50%, -50%) rotate(var(--harpoon-angle, 0deg));
  }
}

/* Target impaled reaction */
.spell-harpoon-impaled {
  animation: harpoon-impaled 0.2s ease-out forwards !important;
}

@keyframes harpoon-impaled {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1) rotate(-3deg);
    filter: brightness(1.5);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

/* Target yanked - shows steal mechanic */
.spell-harpoon-yanked {
  animation: harpoon-yanked 0.5s ease-out forwards !important;
}

@keyframes harpoon-yanked {
  0% {
    transform: scale(1) translate(0, 0);
  }
  30% {
    transform: scale(0.95) translate(calc(var(--yank-x, 0px) * 0.3), calc(var(--yank-y, 0px) * 0.3));
  }
  60% {
    transform: scale(0.9) translate(calc(var(--yank-x, 0px) * 0.6), calc(var(--yank-y, 0px) * 0.6));
    filter: brightness(1.2);
  }
  100% {
    transform: scale(0.85) translate(var(--yank-x, 0px), var(--yank-y, 0px));
    filter: brightness(1);
  }
}

/* Rope tension particles */
.spell-particle--rope-tension {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #8b7355;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: rope-tension-pop 0.3s ease-out forwards;
  pointer-events: none;
}

@keyframes rope-tension-pop {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + (random() - 0.5) * 20px), calc(-50% + (random() - 0.5) * 20px))
      scale(0);
    opacity: 0;
  }
}

/* ============================================================================
   TRANQUILIZER SPELL - Bespoke Sleep Dart Animation
   ============================================================================ */

/* Tranquilizer dart with feathered tail */
.spell-projectile--tranq-dart {
  position: absolute;
  width: 8px;
  height: 35px;
  transform: translate(-50%, -50%) rotate(var(--dart-angle, 0deg));
  pointer-events: none;
}

.spell-projectile--tranq-dart::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 20px;
  background: linear-gradient(to bottom, #c0c0c0, #808080);
  transform: translateX(-50%);
  clip-path: polygon(50% 0%, 0% 20%, 0% 100%, 100% 100%, 100% 20%);
}

.spell-projectile--tranq-dart::after {
  content: '';
  position: absolute;
  top: 18px;
  left: 50%;
  width: 12px;
  height: 15px;
  background: linear-gradient(to bottom, #ff6b6b, #cc5555);
  transform: translateX(-50%);
  clip-path: polygon(50% 0%, 0% 100%, 50% 70%, 100% 100%);
}

@keyframes spell-tranq-dart-arc {
  0% {
    transform: translate(-50%, -50%) rotate(var(--dart-angle, 0deg)) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(
        calc(-50% + var(--target-x) * 0.5),
        calc(-50% + var(--target-y) * 0.5 - 40px)
      )
      rotate(calc(var(--dart-angle, 0deg) + 15deg)) scale(1);
  }
  100% {
    transform: translate(calc(-50% + var(--target-x)), calc(-50% + var(--target-y)))
      rotate(var(--dart-angle, 0deg)) scale(1);
  }
}

/* Dart feather trail */
.spell-particle--dart-feather {
  position: absolute;
  width: 6px;
  height: 10px;
  background: var(--spell-color, #ff6b6b);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform: translate(-50%, -50%);
  animation: dart-feather-drift 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes dart-feather-drift {
  0% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 0.8;
  }
  100% {
    transform: translate(calc(-50% + (random() - 0.5) * 20px), calc(-50% + 15px)) scale(0.5)
      rotate(45deg);
    opacity: 0;
  }
}

/* Dart embedded in target */
.spell-effect--dart-embedded {
  position: absolute;
  width: 6px;
  height: 25px;
  transform: translate(-50%, -50%) rotate(var(--dart-angle, 45deg));
  pointer-events: none;
  animation: dart-embedded-stick 0.3s ease-out;
}

.spell-effect--dart-embedded::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 12px;
  background: #808080;
  transform: translateX(-50%);
}

.spell-effect--dart-embedded::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  width: 10px;
  height: 12px;
  background: #ff6b6b;
  transform: translateX(-50%);
  clip-path: polygon(50% 0%, 0% 100%, 50% 70%, 100% 100%);
}

@keyframes dart-embedded-stick {
  0% {
    transform: translate(-50%, -50%) rotate(calc(var(--dart-angle, 45deg) - 10deg));
  }
  50% {
    transform: translate(-50%, -50%) rotate(calc(var(--dart-angle, 45deg) + 5deg));
  }
  100% {
    transform: translate(-50%, -50%) rotate(var(--dart-angle, 45deg));
  }
}

/* Target hit by tranq */
.spell-tranq-hit {
  animation: spell-tranq-hit 0.2s ease-out forwards !important;
}

@keyframes spell-tranq-hit {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05) rotate(-2deg);
  }
  100% {
    transform: scale(1);
  }
}

/* Target falls asleep */
.spell-tranq-asleep {
  animation: spell-tranq-asleep 1s ease-out forwards !important;
}

@keyframes spell-tranq-asleep {
  0% {
    transform: scale(1) rotate(0deg);
    filter: brightness(1);
  }
  30% {
    transform: scale(0.98) rotate(-3deg);
    filter: brightness(0.9) saturate(0.8);
  }
  60% {
    transform: scale(0.95) rotate(-5deg);
    filter: brightness(0.8) saturate(0.6) hue-rotate(20deg);
  }
  100% {
    transform: scale(0.9) rotate(-8deg);
    filter: brightness(0.7) saturate(0.5) hue-rotate(30deg);
  }
}

/* ZZZ sleep particles */
.spell-particle--zzz {
  position: absolute;
  font-size: 16px;
  font-weight: bold;
  color: #81d4fa;
  text-shadow: 0 0 5px rgba(129, 212, 250, 0.8);
  transform: translate(-50%, -50%);
  animation: zzz-float 0.8s ease-out forwards;
  pointer-events: none;
}

.spell-particle--zzz::before {
  content: 'Z';
}

@keyframes zzz-float {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }
  30% {
    transform: translate(calc(-50% + var(--zzz-index, 0) * 5px), calc(-50% - 20px)) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--zzz-index, 0) * 10px), calc(-50% - 50px)) scale(1.2);
    opacity: 0;
  }
}

/* Frost crystals */
.spell-particle--frost-crystal {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--spell-color, #81d4fa);
  transform: translate(-50%, -50%) rotate(45deg);
  animation: frost-crystal-form 0.5s ease-out forwards;
  pointer-events: none;
}

.spell-particle--frost-crystal::before,
.spell-particle--frost-crystal::after {
  content: '';
  position: absolute;
  background: inherit;
}

.spell-particle--frost-crystal::before {
  width: 100%;
  height: 30%;
  top: 35%;
  left: 0;
}

.spell-particle--frost-crystal::after {
  width: 30%;
  height: 100%;
  top: 0;
  left: 35%;
}

@keyframes frost-crystal-form {
  0% {
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
    opacity: 0;
  }
  50% {
    transform: translate(
        calc(-50% + 20px * cos(var(--angle, 0deg))),
        calc(-50% + 20px * sin(var(--angle, 0deg)))
      )
      rotate(45deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(
        calc(-50% + 30px * cos(var(--angle, 0deg))),
        calc(-50% + 30px * sin(var(--angle, 0deg)))
      )
      rotate(45deg) scale(0.5);
    opacity: 0;
  }
}

/* Cold mist effect */
.spell-effect--cold-mist {
  position: absolute;
  width: 100px;
  height: 60px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse,
    var(--spell-color, rgba(129, 212, 250, 0.5)) 0%,
    transparent 70%
  );
  border-radius: 50%;
  animation: cold-mist-spread 0.8s ease-out forwards;
  pointer-events: none;
}

@keyframes cold-mist-spread {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}

/* ============================================================================
   SHOTGUN SPELL - Bespoke Buckshot Spread Animation
   ============================================================================ */

/* Pump action visual */
.spell-effect--shotgun-pump {
  position: absolute;
  width: 40px;
  height: 15px;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, #5a4a3a, #8b7355, #5a4a3a);
  border-radius: 3px;
  animation: shotgun-pump-action 0.2s ease-out forwards;
  pointer-events: none;
}

@keyframes shotgun-pump-action {
  0% {
    transform: translate(-50%, -50%) translateX(0);
  }
  50% {
    transform: translate(-50%, -50%) translateX(-8px);
  }
  100% {
    transform: translate(-50%, -50%) translateX(0);
    opacity: 0;
  }
}

/* Shell eject */
.spell-particle--shell-eject {
  position: absolute;
  width: 8px;
  height: 18px;
  background: linear-gradient(90deg, #b8860b, #daa520, #b8860b);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  animation: shell-eject-fly 0.4s ease-out forwards;
  pointer-events: none;
}

@keyframes shell-eject-fly {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + 30px), calc(-50% + 40px)) rotate(360deg);
    opacity: 0;
  }
}

/* Shotgun blast */
.spell-effect--shotgun-blast {
  position: absolute;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%) rotate(var(--blast-angle, 0rad));
  pointer-events: none;
}

.spell-effect--shotgun-blast::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 60px;
  background: radial-gradient(
    ellipse at left,
    rgba(255, 220, 100, 1) 0%,
    rgba(255, 150, 50, 0.8) 30%,
    transparent 60%
  );
  transform: translate(-50%, -50%);
  animation: shotgun-blast-flash 0.15s ease-out forwards;
}

@keyframes shotgun-blast-flash {
  0% {
    transform: translate(-50%, -50%) scaleX(0.5);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scaleX(1.5);
    opacity: 0;
  }
}

/* Shotgun smoke */
.spell-effect--shotgun-smoke {
  position: absolute;
  width: 60px;
  height: 60px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(150, 150, 150, 0.7) 0%, transparent 70%);
  border-radius: 50%;
  animation: shotgun-smoke-billow 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes shotgun-smoke-billow {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, calc(-50% - 30px)) scale(2);
    opacity: 0;
  }
}

/* Buckshot pellet */
.spell-projectile--buckshot {
  position: absolute;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle at 30% 30%, #ddd, #888);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

@keyframes spell-buckshot-fly {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--target-x)), calc(-50% + var(--target-y))) scale(0.8);
    opacity: 0.8;
  }
}

/* Pellet trail */
.spell-particle--pellet-trail {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(200, 200, 200, 0.6);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: pellet-trail-fade 0.2s ease-out forwards;
  pointer-events: none;
}

@keyframes pellet-trail-fade {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }
}

/* Buckshot impact spark */
.spell-particle--buckshot-impact {
  position: absolute;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, #fff 0%, var(--spell-color, #ffd54f) 50%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: buckshot-impact-spark 0.3s ease-out forwards;
  pointer-events: none;
}

@keyframes buckshot-impact-spark {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
}

/* Debris particles */
.spell-particle--debris {
  position: absolute;
  width: 5px;
  height: 5px;
  background: #8b7355;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  animation: debris-fly 0.4s ease-out forwards;
  pointer-events: none;
}

@keyframes debris-fly {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + (random() - 0.5) * 40px), calc(-50% + 30px)) rotate(180deg);
    opacity: 0;
  }
}

/* Target blasted by shotgun */
.spell-shotgun-blasted {
  animation: spell-shotgun-blasted 0.6s ease-out forwards !important;
}

@keyframes spell-shotgun-blasted {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  15% {
    transform: scale(1.1) translateX(-5px);
    filter: brightness(2);
  }
  30% {
    transform: scale(0.95) translateX(3px) rotate(-2deg);
    filter: brightness(1.5);
  }
  50% {
    transform: scale(0.9) translateX(-2px) rotate(1deg);
  }
  70% {
    transform: scale(0.92) rotate(-1deg);
    filter: brightness(1);
  }
  100% {
    transform: scale(0.95);
    filter: brightness(0.9);
  }
}

/* ============================================================================
   LEAPFROG SPELL - Bespoke Frog Jumping Animation
   ============================================================================ */

/* Frog projectile */
.spell-projectile--leapfrog {
  position: absolute;
  width: 40px;
  height: 30px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.spell-projectile--leapfrog::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--spell-color, #81c784);
  border-radius: 50% 50% 45% 45%;
  box-shadow:
    inset -5px -5px 10px rgba(0, 0, 0, 0.3),
    0 0 15px var(--spell-color, rgba(129, 199, 132, 0.6));
}

/* Frog eyes */
.spell-projectile--leapfrog::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 12px;
  background:
    radial-gradient(circle at 25% 50%, #fff 3px, #222 4px, transparent 5px),
    radial-gradient(circle at 75% 50%, #fff 3px, #222 4px, transparent 5px);
}

@keyframes leapfrog-crouch {
  0% {
    transform: translate(-50%, -50%) scaleY(1);
  }
  100% {
    transform: translate(-50%, -50%) scaleY(0.7) scaleX(1.1);
  }
}

@keyframes leapfrog-jump {
  0% {
    transform: translate(-50%, -50%) scaleY(0.7) scaleX(1.1);
  }
  30% {
    transform: translate(
        calc(-50% + var(--target-x) * 0.3),
        calc(-50% + var(--target-y) * 0.3 - 60px)
      )
      scaleY(1.2) scaleX(0.9) rotate(-15deg);
  }
  60% {
    transform: translate(
        calc(-50% + var(--target-x) * 0.7),
        calc(-50% + var(--target-y) * 0.7 - 40px)
      )
      scaleY(1.1) rotate(-5deg);
  }
  100% {
    transform: translate(calc(-50% + var(--target-x)), calc(-50% + var(--target-y))) scaleY(0.8)
      scaleX(1.1) rotate(0deg);
  }
}

/* Frog splash trail */
.spell-particle--frog-splash {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--spell-color, #81c784);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: frog-splash-drop 0.4s ease-out forwards;
  pointer-events: none;
  opacity: 0.7;
}

@keyframes frog-splash-drop {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.7;
  }
  100% {
    transform: translate(-50%, calc(-50% + 30px)) scale(0.3);
    opacity: 0;
  }
}

/* Frog impact ring */
.spell-effect--frog-impact {
  position: absolute;
  width: 60px;
  height: 60px;
  transform: translate(-50%, -50%);
  border: 4px solid var(--spell-color, #81c784);
  border-radius: 50%;
  animation: frog-impact-ring 0.4s ease-out forwards;
  pointer-events: none;
}

@keyframes frog-impact-ring {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}

/* Frog splat particles */
.spell-particle--frog-splat {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--spell-color, #81c784);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: frog-splat 0.4s ease-out forwards;
  pointer-events: none;
}

@keyframes frog-splat {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(
        calc(-50% + var(--spread, 40px) * cos(var(--angle, 0deg))),
        calc(-50% + var(--spread, 40px) * sin(var(--angle, 0deg)))
      )
      scale(0.3);
    opacity: 0;
  }
}

/* Target hit by frog */
.spell-frog-landed {
  animation: spell-frog-landed 0.4s ease-out forwards !important;
}

@keyframes spell-frog-landed {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(0.9) translateY(5px);
  }
  60% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* Player badge hit by frog */
.spell-frog-hit-player {
  animation: spell-frog-hit-player 0.5s ease-out forwards !important;
}

@keyframes spell-frog-hit-player {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  20% {
    transform: scale(1.1);
    filter: brightness(1.5);
  }
  40% {
    transform: scale(0.95) rotate(-3deg);
    filter: brightness(1.2);
  }
  60% {
    transform: scale(1.02) rotate(2deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    filter: brightness(1);
  }
}

/* ============================================================================
   BIRDS OF A FEATHER - Bespoke Copy Animation
   ============================================================================ */

/* Source creature glow when being copied */
.spell-being-copied {
  animation: spell-being-copied 0.8s ease-in-out forwards !important;
}

@keyframes spell-being-copied {
  0% {
    filter: brightness(1);
    box-shadow: none;
  }
  30% {
    filter: brightness(1.3);
    box-shadow: 0 0 20px var(--spell-color, #ffd54f);
  }
  70% {
    filter: brightness(1.5);
    box-shadow: 0 0 30px var(--spell-color, #ffd54f);
  }
  100% {
    filter: brightness(1.2);
    box-shadow: 0 0 15px var(--spell-color, #ffd54f);
  }
}

/* Feather burst from source */
.spell-particle--copy-feather-burst {
  position: absolute;
  width: 12px;
  height: 20px;
  background: linear-gradient(to bottom, var(--spell-color, #ffd54f), rgba(255, 255, 255, 0.8));
  border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
  transform: translate(-50%, -50%);
  animation: copy-feather-burst 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes copy-feather-burst {
  0% {
    transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
    opacity: 0;
  }
  30% {
    transform: translate(
        calc(-50% + 30px * cos(var(--angle, 0deg))),
        calc(-50% + 30px * sin(var(--angle, 0deg)))
      )
      scale(1) rotate(45deg);
    opacity: 1;
  }
  100% {
    transform: translate(
        calc(-50% + 50px * cos(var(--angle, 0deg))),
        calc(-50% + 50px * sin(var(--angle, 0deg)))
      )
      scale(0.7) rotate(90deg);
    opacity: 0;
  }
}

/* Feather swirl around source */
.spell-particle--copy-feather-swirl {
  position: absolute;
  width: 10px;
  height: 16px;
  background: linear-gradient(to bottom, var(--spell-color, #ffd54f), rgba(255, 255, 255, 0.6));
  border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
  transform: translate(-50%, -50%);
  animation: copy-feather-swirl 0.6s ease-in-out forwards;
  pointer-events: none;
}

@keyframes copy-feather-swirl {
  0% {
    transform: translate(-50%, -50%) rotate(calc(var(--swirl-index, 0) * 45deg));
    opacity: 0;
  }
  30% {
    transform: translate(
        calc(-50% + 40px * cos(calc(var(--swirl-index, 0) * 45deg))),
        calc(-50% + 40px * sin(calc(var(--swirl-index, 0) * 45deg)))
      )
      rotate(calc(var(--swirl-index, 0) * 45deg + 180deg));
    opacity: 1;
  }
  70% {
    transform: translate(
        calc(-50% + 40px * cos(calc(var(--swirl-index, 0) * 45deg + 180deg))),
        calc(-50% + 40px * sin(calc(var(--swirl-index, 0) * 45deg + 180deg)))
      )
      rotate(calc(var(--swirl-index, 0) * 45deg + 360deg));
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) rotate(calc(var(--swirl-index, 0) * 45deg + 540deg));
    opacity: 0.5;
  }
}

/* Feather streaming to destination */
.spell-particle--copy-feather-stream {
  position: absolute;
  width: 8px;
  height: 14px;
  background: linear-gradient(to bottom, var(--spell-color, #ffd54f), rgba(255, 255, 255, 0.7));
  border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
  transform: translate(-50%, -50%);
  animation: copy-feather-stream 0.5s ease-in forwards;
  pointer-events: none;
}

@keyframes copy-feather-stream {
  0% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--target-x, 0px)), calc(-50% + var(--target-y, 0px)))
      scale(0.6) rotate(720deg);
    opacity: 0.3;
  }
}

/* Copy coalescing effect at destination */
.spell-effect--copy-coalesce {
  position: absolute;
  width: 80px;
  height: 100px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse,
    var(--spell-color, rgba(255, 213, 79, 0.6)) 0%,
    transparent 70%
  );
  border-radius: 10%;
  animation: copy-coalesce 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes copy-coalesce {
  0% {
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

/* Destination slot glow */
.spell-copy-destination {
  animation: copy-destination-glow 0.6s ease-out forwards !important;
}

@keyframes copy-destination-glow {
  0% {
    box-shadow: none;
  }
  50% {
    box-shadow:
      0 0 30px rgba(255, 213, 79, 0.8),
      inset 0 0 20px rgba(255, 213, 79, 0.3);
  }
  100% {
    box-shadow: none;
  }
}

/* ============================================================================
   BIRD'S EYE VIEW - Bespoke Reveal Animation
   ============================================================================ */

/* Giant eye container */
.spell-effect--birds-eye {
  position: absolute;
  width: 120px;
  height: 60px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 100;
}

/* Eye outer glow */
.birds-eye-glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(
    ellipse,
    var(--spell-color, rgba(255, 213, 79, 0.4)) 0%,
    transparent 70%
  );
  border-radius: 50%;
  animation: birds-eye-glow-pulse 0.8s ease-in-out infinite;
}

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

/* Eye white/sclera */
.birds-eye-white {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse, #fff 60%, #f0f0f0 100%);
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 0 20px rgba(0, 0, 0, 0.3),
    inset 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Eye iris */
.birds-eye-iris {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--iris-color, #ffd54f) 0%, #ff8f00 60%, #e65100 100%);
  border-radius: 50%;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}

/* Eye pupil */
.birds-eye-pupil {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 20px;
  transform: translate(-50%, -50%);
  background: #000;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.birds-eye-pupil::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
}

/* Eye opening animation */
@keyframes birds-eye-open {
  0% {
    clip-path: ellipse(50% 0% at 50% 50%);
    opacity: 0;
  }
  50% {
    clip-path: ellipse(50% 30% at 50% 50%);
    opacity: 1;
  }
  100% {
    clip-path: ellipse(50% 50% at 50% 50%);
    opacity: 1;
  }
}

/* Eye looking down */
@keyframes birds-eye-look-down {
  0% {
    transform: translate(-50%, -50%);
  }
  100% {
    transform: translate(-50%, -30%);
  }
}

/* Eye closing */
@keyframes birds-eye-close {
  0% {
    clip-path: ellipse(50% 50% at 50% 50%);
    opacity: 1;
  }
  100% {
    clip-path: ellipse(50% 0% at 50% 50%);
    opacity: 0;
  }
}

/* Scanning beam */
.spell-effect--eye-beam {
  position: absolute;
  width: var(--beam-width, 200px);
  height: 150px;
  background: linear-gradient(
    to bottom,
    var(--spell-color, rgba(255, 213, 79, 0.8)) 0%,
    var(--spell-color, rgba(255, 213, 79, 0.4)) 30%,
    transparent 100%
  );
  clip-path: polygon(40% 0%, 60% 0%, 100% 100%, 0% 100%);
  transform-origin: top center;
  pointer-events: none;
}

@keyframes eye-beam-scan {
  0% {
    transform: scaleX(0.3) scaleY(0);
    opacity: 0;
  }
  20% {
    transform: scaleX(0.5) scaleY(1);
    opacity: 0.8;
  }
  80% {
    transform: scaleX(1) scaleY(1);
    opacity: 0.8;
  }
  100% {
    transform: scaleX(1.2) scaleY(0.8);
    opacity: 0;
  }
}

/* Hand area revealed */
.spell-eye-revealed {
  animation: eye-revealed-glow 2s ease-in-out forwards !important;
}

@keyframes eye-revealed-glow {
  0% {
    filter: brightness(1);
  }
  30% {
    filter: brightness(1.3) drop-shadow(0 0 10px rgba(255, 213, 79, 0.5));
  }
  70% {
    filter: brightness(1.5) drop-shadow(0 0 20px rgba(255, 213, 79, 0.7));
  }
  100% {
    filter: brightness(1);
  }
}

/* Individual card revealed sparkle */
.spell-card-revealed {
  animation: card-revealed-flash 1.5s ease-out forwards !important;
}

@keyframes card-revealed-flash {
  0% {
    filter: brightness(1);
    transform: scale(1);
  }
  20% {
    filter: brightness(1.5);
    transform: scale(1.05);
  }
  50% {
    filter: brightness(1.3);
    transform: scale(1.02);
  }
  100% {
    filter: brightness(1);
    transform: scale(1);
  }
}

/* Eye sparkle particles */
.spell-particle--eye-sparkle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--spell-color, #ffd54f);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: eye-sparkle 0.5s ease-out forwards;
  pointer-events: none;
  box-shadow: 0 0 10px var(--spell-color, #ffd54f);
}

@keyframes eye-sparkle {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
}

/* ============================================================================
   FLOOD SPELL - Enhanced Cinematic
   ============================================================================ */

.spell-aoe--flood-rise {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--spell-color, rgba(33, 150, 243, 0.8)) 0%,
    var(--spell-secondary, rgba(33, 150, 243, 0.4)) 20%,
    transparent 40%
  );
  animation: spell-flood-rise 0.4s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-flood-rise {
  0% {
    transform: translateY(100%);
    opacity: 0.5;
  }
  100% {
    transform: translateY(60%);
    opacity: 0.8;
  }
}

.spell-aoe--flood-wave {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--spell-color, rgba(33, 150, 243, 0.9)) 0%,
    var(--spell-secondary, rgba(33, 150, 243, 0.6)) 40%,
    transparent 70%
  );
  animation: spell-flood-wave 0.7s ease-in-out forwards;
  pointer-events: none;
}

.spell-aoe--flood-wave::before {
  content: '';
  position: absolute;
  top: 25%;
  left: 0;
  right: 0;
  height: 30px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), transparent);
  border-radius: 50%;
  animation: spell-wave-crest 0.7s ease-in-out forwards;
}

@keyframes spell-flood-wave {
  0% {
    transform: translateY(100%);
  }
  40% {
    transform: translateY(0%);
  }
  60% {
    transform: translateY(-15%);
  }
  100% {
    transform: translateY(-40%);
    opacity: 0;
  }
}

@keyframes spell-wave-crest {
  0% {
    transform: scaleY(1);
    opacity: 0.8;
  }
  40% {
    transform: scaleY(1.5);
    opacity: 1;
  }
  100% {
    transform: scaleY(0.5);
    opacity: 0;
  }
}

.spell-particle--flood-bubble {
  position: absolute;
  width: var(--bubble-size, 10px);
  height: var(--bubble-size, 10px);
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.8),
    var(--spell-color, rgba(33, 150, 243, 0.5))
  );
  border-radius: 50%;
  animation: spell-flood-bubble-rise 0.8s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-flood-bubble-rise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.8;
  }
  100% {
    transform: translateY(-150px) translateX(var(--sway, 0)) scale(0.5);
    opacity: 0;
  }
}

.spell-particle--water-spray {
  position: absolute;
  width: 4px;
  height: 8px;
  background: var(--spell-color, rgba(255, 255, 255, 0.8));
  border-radius: 50%;
  animation: spell-water-spray 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-water-spray {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-40px) translateX(calc((random() - 0.5) * 40px)) scale(0.3);
    opacity: 0;
  }
}

.spell-flood-hit {
  animation: spell-flood-hit 0.7s ease-out forwards !important;
}

@keyframes spell-flood-hit {
  0% {
    transform: scale(1) translateY(0);
  }
  30% {
    transform: scale(0.9) translateY(5px) rotate(-3deg);
  }
  50% {
    transform: scale(1.05) translateY(-10px) rotate(2deg);
  }
  70% {
    transform: scale(0.95) translateY(3px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

.spell-effect--creature-splash {
  position: absolute;
  width: 60px;
  height: 30px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, var(--spell-color, rgba(33, 150, 243, 0.6)), transparent);
  animation: spell-creature-splash 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-creature-splash {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2) translateY(-10px);
    opacity: 0;
  }
}

.spell-aoe--flood-recede {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--spell-color, rgba(33, 150, 243, 0.4)) 0%,
    transparent 30%
  );
  animation: spell-flood-recede 0.5s ease-in forwards;
  pointer-events: none;
}

@keyframes spell-flood-recede {
  0% {
    transform: translateY(-30%);
    opacity: 0.6;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}

/* ============================================================================
   METEOR SPELL - Epic Cinematic
   ============================================================================ */

.spell-particle--ember-rise {
  position: absolute;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, #ff6b6b, #f4511e);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 107, 107, 0.8);
  animation: spell-ember-rise 1s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-ember-rise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) translateX(calc((random() - 0.5) * 30px)) scale(0);
    opacity: 0;
  }
}

.spell-effect--meteor-glow {
  position: absolute;
  top: 5%;
  left: 45%;
  width: 60px;
  height: 60px;
  background: radial-gradient(
    circle,
    rgba(255, 150, 50, 0.8),
    rgba(255, 100, 50, 0.4),
    transparent
  );
  border-radius: 50%;
  animation: spell-meteor-glow 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-meteor-glow {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    transform: scale(1.5);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.spell-effect--meteor-trail {
  position: absolute;
  top: 0;
  left: 45%;
  width: 40px;
  height: 200px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--spell-color, rgba(255, 100, 50, 0.8)) 20%,
    var(--spell-secondary, rgba(255, 200, 50, 0.4)) 60%,
    transparent 100%
  );
  transform-origin: top center;
  animation: spell-meteor-trail 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-meteor-trail {
  0% {
    transform: scaleY(0.3) translateY(0);
    opacity: 0.8;
  }
  50% {
    transform: scaleY(1) translateY(100px);
    opacity: 1;
  }
  100% {
    transform: scaleY(0.5) translateY(250px);
    opacity: 0;
  }
}

.spell-particle--meteor-smoke {
  position: absolute;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, rgba(80, 80, 80, 0.6), transparent);
  border-radius: 50%;
  animation: spell-meteor-smoke 0.8s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-meteor-smoke {
  0% {
    transform: scale(0.5);
    opacity: 0.8;
  }
  100% {
    transform: scale(2) translateX(20px);
    opacity: 0;
  }
}

.spell-effect--meteor-shockwave {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  border: 4px solid var(--spell-color, rgba(255, 100, 50, 0.8));
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: spell-meteor-shockwave 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-meteor-shockwave {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(4);
    opacity: 0;
  }
}

.spell-effect--meteor-crater {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 50px;
  background: radial-gradient(ellipse, rgba(50, 30, 20, 0.8), rgba(80, 50, 30, 0.4), transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: spell-meteor-crater 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-meteor-crater {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

.spell-particle--debris {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--spell-color, #8d6e63);
  transform: translate(-50%, -50%);
  animation: spell-debris-fly 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-debris-fly {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(
        calc(-50% + var(--speed, 60px) * cos(var(--angle, 0deg))),
        calc(-50% + var(--speed, 60px) * sin(var(--angle, 0deg)) + 40px)
      )
      scale(0.3) rotate(720deg);
    opacity: 0;
  }
}

.spell-particle--fire-burst {
  position: absolute;
  width: 30px;
  height: 30px;
  background: radial-gradient(circle, #ff6b6b, #f4511e, transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: spell-fire-burst 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-fire-burst {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

.spell-meteor-hit {
  animation: spell-meteor-hit 0.7s ease-out forwards !important;
}

@keyframes spell-meteor-hit {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  20% {
    transform: scale(1.2) translateY(-10px);
    filter: brightness(2) saturate(1.5);
  }
  40% {
    transform: scale(0.8) translateY(5px);
    filter: brightness(1.5);
  }
  60% {
    transform: scale(1.1);
    filter: brightness(1.2);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

.spell-particle--ember-linger {
  position: absolute;
  width: 5px;
  height: 5px;
  background: radial-gradient(circle, #ff6b6b, #f4511e);
  border-radius: 50%;
  animation: spell-ember-linger 0.8s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-ember-linger {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: translateY(-30px) scale(0);
    opacity: 0;
  }
}

/* ============================================================================
   BLIZZARD SPELL - Freezing Storm
   ============================================================================ */

.spell-aoe--frost-creep {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(129, 212, 250, 0.4), transparent 30%),
    radial-gradient(ellipse at 100% 0%, rgba(129, 212, 250, 0.4), transparent 30%),
    radial-gradient(ellipse at 0% 100%, rgba(129, 212, 250, 0.4), transparent 30%),
    radial-gradient(ellipse at 100% 100%, rgba(129, 212, 250, 0.4), transparent 30%);
  animation: spell-frost-creep 1.2s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-frost-creep {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.spell-aoe--blizzard-wind {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.1) 75%,
    transparent 100%
  );
  background-size: 200% 200%;
  animation: spell-blizzard-wind 0.8s linear forwards;
  pointer-events: none;
}

@keyframes spell-blizzard-wind {
  0% {
    background-position: 200% 0%;
    opacity: 0.8;
  }
  100% {
    background-position: -200% 0%;
    opacity: 0;
  }
}

.spell-particle--snowflake {
  position: absolute;
  width: var(--size, 6px);
  height: var(--size, 6px);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(200, 230, 255, 0.6));
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
  animation: spell-snowflake-fall 1s linear forwards;
  pointer-events: none;
}

@keyframes spell-snowflake-fall {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(120vh) translateX(var(--sway, 20px)) rotate(360deg);
    opacity: 0.3;
  }
}

.spell-particle--ice-crystal-form {
  position: absolute;
  width: 12px;
  height: 4px;
  background: linear-gradient(90deg, transparent, rgba(200, 230, 255, 0.9), transparent);
  transform: translate(-50%, -50%) rotate(var(--angle, 0deg));
  transform-origin: center;
  animation: spell-ice-crystal-form 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-ice-crystal-form {
  0% {
    transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) scaleX(0);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) scaleX(1.2);
    opacity: 1;
  }
  100% {
    transform: translate(
        calc(-50% + 25px * cos(var(--angle, 0deg))),
        calc(-50% + 25px * sin(var(--angle, 0deg)))
      )
      rotate(var(--angle, 0deg)) scaleX(0.8);
    opacity: 0;
  }
}

.spell-effect--creature-frost {
  position: absolute;
  width: 70px;
  height: 70px;
  border: 3px solid rgba(200, 230, 255, 0.8);
  border-radius: 10px;
  background: radial-gradient(circle, rgba(200, 230, 255, 0.2), transparent);
  transform: translate(-50%, -50%);
  animation: spell-creature-frost 0.8s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-creature-frost {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
  }
  30% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

.spell-blizzard-freeze {
  animation: spell-blizzard-freeze 1s ease-out forwards !important;
}

@keyframes spell-blizzard-freeze {
  0% {
    filter: brightness(1) saturate(1);
  }
  30% {
    filter: brightness(1.3) saturate(0.5) hue-rotate(180deg);
  }
  60% {
    filter: brightness(1.1) saturate(0.7) hue-rotate(180deg);
  }
  100% {
    filter: brightness(1) saturate(1) hue-rotate(0deg);
  }
}

.spell-particle--snowflake-fade {
  position: absolute;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  animation: spell-snowflake-fade 0.8s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-snowflake-fade {
  0% {
    transform: translateY(0);
    opacity: 0.7;
  }
  100% {
    transform: translateY(80vh);
    opacity: 0;
  }
}

/* ============================================================================
   BUFF EFFECTS - Enhanced Particles
   ============================================================================ */

.spell-particle--fish-bubble {
  position: absolute;
  width: var(--bubble-size, 10px);
  height: var(--bubble-size, 10px);
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.9),
    var(--spell-color, rgba(79, 195, 247, 0.6))
  );
  border-radius: 50%;
  animation: spell-fish-bubble 1s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-fish-bubble {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0.9;
  }
  100% {
    transform: translateY(-120px) translateX(var(--sway, 0)) scale(0.3);
    opacity: 0;
  }
}

.spell-particle--golden-sparkle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, #ffd54f, #ff9800);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 213, 79, 0.8);
  animation: spell-golden-sparkle 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-golden-sparkle {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(0) translateY(-20px);
    opacity: 0;
  }
}

.spell-fish-food-glow {
  animation: spell-fish-food-glow 0.9s ease-out forwards !important;
}

@keyframes spell-fish-food-glow {
  0% {
    filter: brightness(1);
    box-shadow: none;
  }
  30% {
    filter: brightness(1.3);
    box-shadow:
      0 0 20px rgba(79, 195, 247, 0.6),
      0 0 40px rgba(255, 213, 79, 0.4);
  }
  70% {
    filter: brightness(1.2);
    box-shadow:
      0 0 15px rgba(79, 195, 247, 0.4),
      0 0 30px rgba(255, 213, 79, 0.3);
  }
  100% {
    filter: brightness(1);
    box-shadow: none;
  }
}

.spell-particle--feather-drift {
  position: absolute;
  width: 20px;
  height: 8px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--spell-color, #fff9c4) 30%,
    var(--spell-color, #fff9c4) 70%,
    transparent
  );
  border-radius: 50%;
  transform: rotate(var(--rotation, 0deg));
  animation: spell-feather-drift 1.2s ease-in-out forwards;
  pointer-events: none;
}

@keyframes spell-feather-drift {
  0% {
    transform: translateY(0) translateX(0) rotate(var(--rotation, 0deg));
    opacity: 1;
  }
  50% {
    transform: translateY(50vh) translateX(var(--sway, 20px))
      rotate(calc(var(--rotation, 0deg) + 180deg));
    opacity: 0.8;
  }
  100% {
    transform: translateY(100vh) translateX(calc(var(--sway, 20px) * -1))
      rotate(calc(var(--rotation, 0deg) + 360deg));
    opacity: 0;
  }
}

.spell-feather-buff-glow {
  animation: spell-feather-buff-glow 0.9s ease-out forwards !important;
}

@keyframes spell-feather-buff-glow {
  0% {
    filter: brightness(1);
  }
  30% {
    filter: brightness(1.4) drop-shadow(0 0 15px rgba(255, 213, 79, 0.8));
  }
  100% {
    filter: brightness(1);
  }
}

.spell-particle--golden-dust {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #ffd54f;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 213, 79, 0.8);
  animation: spell-golden-dust 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-golden-dust {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(
        calc(var(--spread, 25px) * cos(var(--angle, 0deg))),
        calc(var(--spread, 25px) * sin(var(--angle, 0deg)) - 15px)
      )
      scale(0);
    opacity: 0;
  }
}

/* ============================================================================
   TRANSMOGRIFY (NEWT) - Magical Transformation
   ============================================================================ */

.spell-particle--magic-converge {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--spell-color, #81c784);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--spell-color, rgba(129, 199, 132, 0.8));
  animation: spell-magic-converge 0.3s ease-in forwards;
  pointer-events: none;
}

@keyframes spell-magic-converge {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--target-x, 0), var(--target-y, 0)) scale(0);
    opacity: 0.5;
  }
}

.spell-effect--magic-vortex {
  position: absolute;
  width: 60px;
  height: 60px;
  border: 3px solid var(--spell-color, #81c784);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: spell-magic-vortex 0.8s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-magic-vortex {
  0% {
    transform: translate(-50%, -50%) scale(1.5) rotate(0deg);
    opacity: 0;
  }
  30% {
    transform: translate(-50%, -50%) scale(1) rotate(180deg);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.3) rotate(720deg);
    opacity: 0;
  }
}

.spell-transmogrify-morph {
  animation: spell-transmogrify-morph 0.4s ease-in-out forwards !important;
}

@keyframes spell-transmogrify-morph {
  0% {
    transform: scale(1) rotate(0deg);
    filter: hue-rotate(0deg);
  }
  50% {
    transform: scale(1.1) rotate(-5deg);
    filter: hue-rotate(90deg) brightness(1.2);
  }
  100% {
    transform: scale(0.8) rotate(5deg);
    filter: hue-rotate(180deg) brightness(1.3);
  }
}

.spell-particle--magic-orbit {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--spell-color, #81c784);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--spell-color, rgba(129, 199, 132, 0.8));
  transform: translate(-50%, -50%);
  animation: spell-magic-orbit 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-magic-orbit {
  0% {
    transform: translate(-50%, -50%) rotate(calc(var(--orbit-index, 0) * 45deg)) translateX(40px);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) rotate(calc(var(--orbit-index, 0) * 45deg + 360deg))
      translateX(20px);
    opacity: 0;
  }
}

.spell-transmogrify-poof {
  animation: spell-transmogrify-poof 0.4s ease-out forwards !important;
}

@keyframes spell-transmogrify-poof {
  0% {
    transform: scale(0.8);
    filter: brightness(2) hue-rotate(180deg);
  }
  30% {
    transform: scale(1.3);
    filter: brightness(1.5) hue-rotate(90deg);
  }
  100% {
    transform: scale(1);
    filter: brightness(1) hue-rotate(0deg);
  }
}

.spell-effect--poof-cloud {
  position: absolute;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, var(--spell-color, rgba(129, 199, 132, 0.8)), transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: spell-poof-cloud 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-poof-cloud {
  0% {
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

.spell-particle--poof-sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--spell-color, #81c784);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--spell-secondary, rgba(129, 199, 132, 0.8));
  transform: translate(-50%, -50%);
  animation: spell-poof-sparkle 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-poof-sparkle {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(
        calc(-50% + var(--distance, 40px) * cos(var(--angle, 0deg))),
        calc(-50% + var(--distance, 40px) * sin(var(--angle, 0deg)))
      )
      scale(0);
    opacity: 0;
  }
}

.spell-particle--magic-wisp {
  position: absolute;
  width: 15px;
  height: 15px;
  background: radial-gradient(circle, var(--spell-color, rgba(200, 230, 201, 0.8)), transparent);
  border-radius: 50%;
  animation: spell-magic-wisp 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-magic-wisp {
  0% {
    transform: scale(0.5);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.5) translateY(-30px);
    opacity: 0;
  }
}

.spell-particle--magic-linger {
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--spell-color, #81c784);
  border-radius: 50%;
  animation: spell-magic-linger 0.8s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-magic-linger {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(0) translateY(-20px);
    opacity: 0;
  }
}

/* ============================================================================
   ARROW RAIN - Enhanced
   ============================================================================ */

.spell-particle--arrow-launch {
  position: absolute;
  width: 4px;
  height: 20px;
  background: linear-gradient(to top, #5d4e37, #8b7355);
  animation: spell-arrow-launch 0.4s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-arrow-launch {
  0% {
    transform: translateY(0) rotate(-45deg);
    opacity: 1;
  }
  100% {
    transform: translateY(-150px) translateX(50px) rotate(-45deg);
    opacity: 0;
  }
}

.spell-projectile--arrow-rain {
  width: 4px;
  height: 30px;
  background: linear-gradient(to bottom, #5f6368, #5d4e37);
  position: absolute;
  transform: translate(-50%, 0);
  pointer-events: none;
}

.spell-projectile--arrow-rain::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 10px solid #5f6368;
}

@keyframes spell-arrow-rain {
  0% {
    transform: translate(-50%, 0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, var(--target-y, 150px));
    opacity: 1;
  }
}

.spell-arrow-hit {
  animation: spell-arrow-hit 0.5s ease-out forwards !important;
}

@keyframes spell-arrow-hit {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(0.95) translateY(3px);
  }
  40% {
    transform: scale(1.05) translateY(-2px);
  }
  100% {
    transform: scale(1);
  }
}

.spell-particle--arrow-splinter {
  position: absolute;
  width: 3px;
  height: 8px;
  background: #5d4e37;
  transform: translate(-50%, -50%);
  animation: spell-arrow-splinter 0.4s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-arrow-splinter {
  0% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(
        calc(-50% + var(--spread, 25px) * cos(var(--angle, 0deg))),
        calc(-50% + var(--spread, 25px) * sin(var(--angle, 0deg)) + 15px)
      )
      scale(0.5) rotate(180deg);
    opacity: 0;
  }
}

/* ============================================================================
   MONSOON - Storm Effects
   ============================================================================ */

.spell-aoe--storm-clouds {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(
    to bottom,
    rgba(40, 50, 60, 0.9) 0%,
    rgba(50, 60, 70, 0.7) 50%,
    transparent 100%
  );
  animation: spell-storm-clouds 1.4s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-storm-clouds {
  0% {
    opacity: 0;
    transform: translateY(-20%);
  }
  20% {
    opacity: 1;
    transform: translateY(0);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.spell-particle--heavy-rain {
  position: absolute;
  width: 2px;
  height: 15px;
  background: linear-gradient(to bottom, transparent, var(--spell-color, rgba(129, 199, 132, 0.8)));
  animation: spell-heavy-rain var(--rain-speed, 0.4s) linear forwards;
  pointer-events: none;
}

@keyframes spell-heavy-rain {
  0% {
    transform: translateY(0);
    opacity: 0.8;
  }
  100% {
    transform: translateY(120vh);
    opacity: 0;
  }
}

.spell-effect--lightning-bolt {
  position: absolute;
  top: 0;
  width: 4px;
  height: 60%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.9),
    var(--spell-color, rgba(200, 230, 255, 0.8)),
    rgba(255, 255, 255, 0.9)
  );
  box-shadow:
    0 0 20px rgba(255, 255, 255, 0.8),
    0 0 40px var(--spell-color, rgba(200, 230, 255, 0.6));
  clip-path: polygon(
    0% 0%,
    100% 0%,
    60% 30%,
    100% 30%,
    40% 60%,
    80% 60%,
    50% 100%,
    20% 60%,
    60% 60%,
    0% 30%,
    40% 30%
  );
  animation: spell-lightning-bolt 0.15s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-lightning-bolt {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}

.spell-lightning-flash {
  filter: brightness(2) !important;
  transition: filter 0.05s ease-out;
}

.spell-particle--light-rain {
  position: absolute;
  width: 1px;
  height: 10px;
  background: linear-gradient(to bottom, transparent, var(--spell-color, rgba(129, 199, 132, 0.5)));
  animation: spell-light-rain 0.6s linear forwards;
  pointer-events: none;
}

@keyframes spell-light-rain {
  0% {
    transform: translateY(0);
    opacity: 0.5;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0;
  }
}

/* ============================================================================
   SUNSHINE - Sun Ray Effects
   ============================================================================ */

.spell-effect--clouds-part {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(200, 200, 200, 0.4) 0%, transparent 40%);
  animation: spell-clouds-part 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-clouds-part {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
  }
}

.spell-effect--sun-ray {
  position: absolute;
  top: 0;
  width: var(--ray-width, 40px);
  height: 100%;
  background: linear-gradient(
    to bottom,
    var(--spell-color, rgba(255, 213, 79, 0.8)) 0%,
    var(--spell-color, rgba(255, 213, 79, 0.4)) 50%,
    transparent 100%
  );
  animation: spell-sun-ray 0.8s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-sun-ray {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  30% {
    opacity: 1;
    transform: scaleY(1);
  }
  100% {
    opacity: 0;
    transform: scaleY(1);
  }
}

.spell-sunshine-glow {
  animation: spell-sunshine-glow 1s ease-out forwards !important;
}

@keyframes spell-sunshine-glow {
  0% {
    filter: brightness(1);
  }
  30% {
    filter: brightness(1.4) drop-shadow(0 0 20px rgba(255, 213, 79, 0.8));
  }
  100% {
    filter: brightness(1);
  }
}

.spell-particle--sun-mote {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--spell-color, #ffd54f);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--spell-color, rgba(255, 213, 79, 0.8));
  animation: spell-sun-mote 0.8s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-sun-mote {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(0) translateY(-20px);
    opacity: 0;
  }
}

/* ============================================================================
   GENERIC PARTICLES
   ============================================================================ */

.spell-particle--generic {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--spell-color, #81c784);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--spell-glow, rgba(129, 199, 132, 0.6));
  transform: translate(-50%, -50%);
  animation: spell-generic-particle 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-generic-particle {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(
        calc(-50% + var(--spread, 40px) * cos(var(--angle, 0deg))),
        calc(-50% + var(--spread, 40px) * sin(var(--angle, 0deg)))
      )
      scale(0);
    opacity: 0;
  }
}

.spell-effect--impact-ring {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 3px solid var(--spell-color, #81c784);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: spell-impact-ring-expand 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes spell-impact-ring-expand {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

/* ============================================================================
   SPELL CARD REVEAL ANIMATION
   Hearthstone-style card presentation before spell effect
   ============================================================================ */

.spell-card-reveal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  pointer-events: none;
  perspective: 1000px;
  animation: spell-reveal-entrance 0.3s ease-out forwards;
}

@keyframes spell-reveal-entrance {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.spell-card-reveal.exiting {
  animation: spell-reveal-exit 0.5s ease-in forwards;
}

@keyframes spell-reveal-exit {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    filter: brightness(2) blur(10px);
  }
}

/* Background glow effect */
.spell-reveal-glow {
  position: absolute;
  width: 500px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--spell-theme-glow, rgba(79, 195, 247, 0.4)) 0%,
    transparent 70%
  );
  filter: blur(30px);
  animation: spell-reveal-glow-pulse 1.5s ease-in-out infinite;
}

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

/* Card wrapper for flip animation - 5:7 aspect ratio */
.spell-reveal-card-wrapper {
  width: 250px;
  height: 350px;
  position: relative;
  transform-style: preserve-3d;
  transform: scale(0.5) translateY(100px);
  opacity: 0;
  animation: spell-reveal-card-entrance 0.4s ease-out forwards;
}

@keyframes spell-reveal-card-entrance {
  0% {
    transform: scale(0.5) translateY(100px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.spell-reveal-card-wrapper.flipped .spell-reveal-card-back {
  transform: rotateY(-180deg);
}

.spell-reveal-card-wrapper.flipped .spell-reveal-card-front {
  transform: rotateY(0deg);
}

.spell-card-reveal.exiting .spell-reveal-card-wrapper {
  animation: spell-reveal-card-exit 0.5s ease-in forwards;
}

@keyframes spell-reveal-card-exit {
  0% {
    transform: scale(1) translateY(0);
  }
  50% {
    transform: scale(1.15) translateY(-20px);
  }
  100% {
    transform: scale(0.3) translateY(-150px);
  }
}

/* Card back */
.spell-reveal-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  background: linear-gradient(135deg, #2c1810 0%, #1a0f0a 100%);
  border: 3px solid #8b4513;
  box-shadow:
    0 0 20px rgba(0, 0, 0, 0.5),
    inset 0 0 30px rgba(139, 69, 19, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotateY(0deg);
  transition: transform 0.6s ease-in-out;
}

.card-back-pattern {
  position: absolute;
  inset: 10px;
  border: 2px solid rgba(139, 69, 19, 0.5);
  border-radius: 8px;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(139, 69, 19, 0.1) 10px,
    rgba(139, 69, 19, 0.1) 20px
  );
}

.card-back-logo {
  font-size: 4rem;
  color: #8b4513;
  text-shadow: 0 0 10px rgba(139, 69, 19, 0.5);
  z-index: 1;
}

/* Card front */
.spell-reveal-card-front {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%);
  border: 3px solid var(--spell-theme-color, #4fc3f7);
  box-shadow:
    0 0 30px var(--spell-theme-glow, rgba(79, 195, 247, 0.5)),
    0 10px 40px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: rotateY(180deg);
  transition: transform 0.6s ease-in-out;
}

/* Card header with name */
.spell-reveal-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
}

.spell-reveal-name {
  font-size: 1.3rem;
  font-weight: bold;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  text-align: center;
}

/* Card image area */
.spell-reveal-image-container {
  flex: 1;
  margin: 0 12px;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(180deg, #2a2a3e 0%, #1a1a2e 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
  min-height: 140px;
  max-height: 180px;
}

.spell-reveal-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spell-reveal-image-placeholder {
  font-size: 5rem;
  opacity: 0.7;
}

/* Effect text area */
.spell-reveal-effect {
  padding: 8px 12px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  line-height: 1.3;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Footer with type and tribe */
.spell-reveal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.spell-reveal-type {
  font-size: 0.7rem;
  font-weight: bold;
  color: var(--spell-theme-color, #4fc3f7);
  letter-spacing: 1px;
  text-shadow: 0 0 10px var(--spell-theme-glow, rgba(79, 195, 247, 0.5));
}

.spell-reveal-tribe {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 1px;
}

/* Shimmer effect on the revealed card */
.spell-reveal-card-wrapper.flipped .spell-reveal-card-front::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.3) 45%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.3) 55%,
    transparent 60%
  );
  animation: spell-reveal-shimmer 0.8s ease-out 0.3s forwards;
  opacity: 0;
}

@keyframes spell-reveal-shimmer {
  0% {
    transform: translateX(-100%);
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* ============================================================================
   SUNKEN TREASURE - Bespoke Utility Animation
   ============================================================================ */

.spell-particle--treasure-bubble {
  position: absolute;
  width: var(--bubble-size, 10px);
  height: var(--bubble-size, 10px);
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.6),
    var(--spell-color, rgba(33, 150, 243, 0.4)) 60%,
    transparent
  );
  border-radius: 50%;
  animation: treasure-bubble-rise 1.2s ease-out forwards;
  pointer-events: none;
}

@keyframes treasure-bubble-rise {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-150px) translateX(var(--sway, 20px));
    opacity: 0.6;
  }
  100% {
    transform: translateY(-300px) translateX(calc(var(--sway, 20px) * -1));
    opacity: 0;
  }
}

.spell-effect--treasure-chest {
  position: absolute;
  bottom: 100%;
  width: 80px;
  height: 60px;
  transform: translateX(-50%);
  animation: treasure-chest-rise 1.5s ease-out forwards;
  pointer-events: none;
}

.treasure-chest-base {
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 35px;
  background: linear-gradient(135deg, #8b4513 0%, #654321 50%, #4a3728 100%);
  border-radius: 4px;
  box-shadow: inset 0 -5px 15px rgba(0, 0, 0, 0.4);
}

.treasure-chest-lid {
  position: absolute;
  bottom: 30px;
  left: 5%;
  width: 90%;
  height: 25px;
  background: linear-gradient(135deg, #a0522d 0%, #8b4513 50%, #654321 100%);
  border-radius: 8px 8px 0 0;
  transform-origin: bottom center;
  animation: chest-lid-open 0.5s ease-out 0.7s forwards;
}

.treasure-chest-lock {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  width: 15px;
  height: 15px;
  background: #ffd700;
  border-radius: 50%;
  box-shadow: 0 0 10px #ffd700;
}

@keyframes treasure-chest-rise {
  0% {
    transform: translateX(-50%) translateY(200px);
    opacity: 0;
  }
  60% {
    transform: translateX(-50%) translateY(-20px);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

@keyframes chest-lid-open {
  0% {
    transform: rotateX(0);
  }
  100% {
    transform: rotateX(-110deg);
  }
}

.spell-particle--treasure-kelp {
  position: absolute;
  width: 8px;
  height: 100px;
  background: linear-gradient(to top, var(--spell-color, #2d5a27), transparent);
  animation: kelp-sway 0.8s ease-in-out forwards;
  pointer-events: none;
}

@keyframes kelp-sway {
  0% {
    transform: translateY(0) scaleY(1) rotate(-5deg);
    opacity: 0.7;
  }
  50% {
    transform: translateY(-50px) scaleY(0.7) rotate(5deg);
    opacity: 0.5;
  }
  100% {
    transform: translateY(-100px) scaleY(0.3) rotate(-3deg);
    opacity: 0;
  }
}

.spell-effect--treasure-light {
  position: absolute;
  width: 150px;
  height: 150px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(255, 215, 0, 0.8) 0%,
    rgba(255, 215, 0, 0.4) 30%,
    transparent 70%
  );
  animation: treasure-light-burst 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes treasure-light-burst {
  0% {
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

.spell-particle--treasure-sparkle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--spell-color, #ffd700);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--spell-color, #ffd700);
  animation: treasure-sparkle 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes treasure-sparkle {
  0% {
    transform: translate(-50%, -50%) translateX(0) translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%)
      translateX(calc(cos(var(--angle, 0deg)) * var(--distance, 60px)))
      translateY(calc(sin(var(--angle, 0deg)) * var(--distance, 60px))) scale(0);
    opacity: 0;
  }
}

.spell-particle--treasure-coin,
.spell-particle--treasure-gem,
.spell-particle--treasure-pearl {
  position: absolute;
  transform: translate(-50%, -50%);
  animation: treasure-scatter 0.8s ease-out forwards;
  pointer-events: none;
}

.spell-particle--treasure-coin {
  width: 12px;
  height: 12px;
  background: radial-gradient(circle at 30% 30%, #fff, #ffd700 40%, #b8860b);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

.spell-particle--treasure-gem {
  width: 10px;
  height: 14px;
  background: linear-gradient(135deg, #ff69b4 0%, #e91e63 50%, #ad1457 100%);
  clip-path: polygon(50% 0%, 100% 40%, 80% 100%, 20% 100%, 0% 40%);
  box-shadow: 0 0 8px rgba(233, 30, 99, 0.6);
}

.spell-particle--treasure-pearl {
  width: 10px;
  height: 10px;
  background: radial-gradient(circle at 30% 30%, #fff, #f0f0f0 50%, #ddd);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

@keyframes treasure-scatter {
  0% {
    transform: translate(-50%, -50%) translateX(0) translateY(0) rotate(0);
    opacity: 1;
  }
  60% {
    transform: translate(-50%, -50%) translateX(var(--scatter-x, 50px))
      translateY(var(--scatter-y, -80px)) rotate(360deg);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) translateX(calc(var(--scatter-x, 50px) * 0.8))
      translateY(100px) rotate(540deg);
    opacity: 0;
  }
}

.spell-effect--treasure-mist {
  position: absolute;
  width: 200px;
  height: 60px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse,
    var(--spell-color, rgba(33, 150, 243, 0.3)) 0%,
    transparent 70%
  );
  animation: treasure-mist 1s ease-out forwards;
  pointer-events: none;
}

@keyframes treasure-mist {
  0% {
    transform: translate(-50%, -50%) scaleX(0.5);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scaleX(1.5) translateY(30px);
    opacity: 0;
  }
}

.spell-particle--treasure-linger {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--spell-color, #ffd700);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--spell-color, #ffd700);
  animation: treasure-linger 0.8s ease-out forwards;
  pointer-events: none;
}

@keyframes treasure-linger {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.6;
  }
  100% {
    transform: scale(0) translateY(-20px);
    opacity: 0;
  }
}

/* ============================================================================
   ANGLER - Bespoke Search Animation
   ============================================================================ */

.spell-effect--angler-dark {
  position: absolute;
  width: 150px;
  height: 150px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(0, 20, 40, 0.6) 0%,
    rgba(0, 10, 20, 0.3) 50%,
    transparent 70%
  );
  animation: angler-dark 1.8s ease-out forwards;
  pointer-events: none;
}

@keyframes angler-dark {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }
  20% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  80% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 0;
  }
}

.spell-effect--angler-line {
  position: absolute;
  width: 3px;
  height: 0;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--spell-color, #1a4d7a) 20%,
    var(--spell-color, #1a4d7a) 80%,
    transparent
  );
  animation: angler-line-drop 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes angler-line-drop {
  0% {
    height: 0;
    opacity: 0;
  }
  100% {
    height: 100px;
    opacity: 0.7;
  }
}

.spell-effect--angler-lure {
  position: absolute;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
  animation: angler-lure-dangle 1.4s ease-in-out forwards;
  pointer-events: none;
}

.angler-lure-bulb {
  position: absolute;
  width: 20px;
  height: 20px;
  left: 5px;
  top: 5px;
  background: radial-gradient(
    circle at 30% 30%,
    #fff,
    var(--spell-color, #4fc3f7) 50%,
    var(--spell-color, #2196f3)
  );
  border-radius: 50%;
}

.angler-lure-glow {
  position: absolute;
  width: 40px;
  height: 40px;
  left: -5px;
  top: -5px;
  background: radial-gradient(
    circle,
    var(--spell-glow, rgba(79, 195, 247, 0.6)) 0%,
    transparent 70%
  );
  animation: angler-glow-pulse 0.5s ease-in-out infinite;
}

.angler-lure-filament {
  position: absolute;
  width: 2px;
  height: 15px;
  left: 14px;
  top: -10px;
  background: var(--spell-color, #4fc3f7);
  opacity: 0.6;
}

@keyframes angler-lure-dangle {
  0% {
    transform: translate(-50%, -100px);
  }
  40% {
    transform: translate(-50%, 10px);
  }
  50% {
    transform: translate(-50%, 0) rotate(-5deg);
  }
  60% {
    transform: translate(-50%, 5px) rotate(5deg);
  }
  70% {
    transform: translate(-50%, 0) rotate(-3deg);
  }
  100% {
    transform: translate(-50%, 0) rotate(0);
  }
}

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

.spell-particle--angler-glow {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--spell-color, #4fc3f7);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--spell-color, #4fc3f7);
  animation: angler-particle-float 0.8s ease-out forwards;
  pointer-events: none;
}

@keyframes angler-particle-float {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0) translateX(calc((random() - 0.5) * 60px))
      translateY(calc((random() - 0.5) * 40px));
    opacity: 0;
  }
}

.spell-particle--angler-fish {
  position: absolute;
  width: 15px;
  height: 8px;
  background: var(--spell-color, #1a4d7a);
  border-radius: 50% 30% 30% 50%;
  opacity: 0.5;
  animation: angler-fish-swim 0.8s ease-in-out forwards;
  pointer-events: none;
}

@keyframes angler-fish-swim {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: translateX(calc((var(--target-x) - 100%) * 0.8))
      translateY(calc((var(--target-y) - 100%) * 0.8)) scale(0.5);
    opacity: 0;
  }
}

.spell-particle--search-bubble {
  position: absolute;
  width: 8px;
  height: 8px;
  background: radial-gradient(
    circle at 30% 30%,
    #fff,
    var(--spell-color, #4fc3f7) 50%,
    transparent
  );
  border-radius: 50%;
  animation: search-bubble-rise 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes search-bubble-rise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.8;
  }
  100% {
    transform: translateY(-60px) scale(0.5);
    opacity: 0;
  }
}

/* ============================================================================
   SWAN SONG - Bespoke Heal Animation
   ============================================================================ */

.spell-effect--swan-glow {
  position: absolute;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.2) 40%,
    transparent 70%
  );
  animation: swan-glow 1.6s ease-out forwards;
  pointer-events: none;
}

@keyframes swan-glow {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }
  30% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}

.spell-particle--swan-feather {
  position: absolute;
  width: var(--feather-size, 20px);
  height: calc(var(--feather-size, 20px) * 0.4);
  background: linear-gradient(90deg, transparent 0%, #fff 20%, #fff 80%, transparent 100%);
  border-radius: 50%;
  transform-origin: center;
  animation: swan-feather-spiral 1.2s ease-out forwards;
  animation-delay: var(--spiral-delay, 0s);
  pointer-events: none;
}

@keyframes swan-feather-spiral {
  0% {
    transform: rotate(var(--spiral-angle, 0deg)) translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: rotate(calc(var(--spiral-angle, 0deg) + 720deg)) translateY(-150px) scale(0.3);
    opacity: 0;
  }
}

.spell-particle--swan-sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  box-shadow:
    0 0 6px #fff,
    0 0 12px rgba(255, 255, 255, 0.5);
  animation: swan-sparkle 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes swan-sparkle {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0) translateY(-20px);
    opacity: 0;
  }
}

.spell-effect--swan-heal-pulse {
  position: absolute;
  width: 60px;
  height: 60px;
  transform: translate(-50%, -50%);
  border: 3px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  animation: swan-heal-pulse 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes swan-heal-pulse {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

.spell-effect--swan-barrier {
  position: absolute;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--spell-color, #87ceeb);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(135, 206, 235, 0.2) 0%, transparent 70%);
  animation: swan-barrier-form 0.8s ease-out forwards;
  pointer-events: none;
}

@keyframes swan-barrier-form {
  0% {
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

.spell-particle--barrier-rune {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #87ceeb;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  box-shadow: 0 0 8px #87ceeb;
  animation: barrier-rune 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes barrier-rune {
  0% {
    transform: scale(0) rotate(0);
    opacity: 1;
  }
  50% {
    transform: scale(1.5) rotate(180deg);
    opacity: 1;
  }
  100% {
    transform: scale(0) rotate(360deg);
    opacity: 0;
  }
}

/* ============================================================================
   SIX-LAYERED NEOCORTEX - Bespoke Search Animation
   ============================================================================ */

.spell-effect--neocortex-brain {
  position: absolute;
  width: 120px;
  height: 100px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.neocortex-outline {
  position: absolute;
  inset: 0;
  border: 2px solid var(--spell-color, #f48fb1);
  border-radius: 50% 50% 45% 45%;
  opacity: 0.7;
  animation: neocortex-pulse 0.8s ease-in-out infinite;
}

.neocortex-glow {
  position: absolute;
  inset: -10px;
  background: radial-gradient(
    ellipse,
    var(--spell-glow, rgba(244, 143, 177, 0.3)) 0%,
    transparent 70%
  );
  border-radius: 50%;
  animation: neocortex-glow 0.6s ease-in-out infinite;
}

.neocortex-layers {
  position: absolute;
  inset: 10px;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 8px,
    var(--spell-color, rgba(244, 143, 177, 0.3)) 8px,
    var(--spell-color, rgba(244, 143, 177, 0.3)) 10px
  );
  border-radius: 50% 50% 40% 40%;
  opacity: 0.5;
  animation: neocortex-layers-shift 1s ease-in-out infinite;
}

@keyframes neocortex-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes neocortex-glow {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
}

@keyframes neocortex-layers-shift {
  0%,
  100% {
    background-position: 0 0;
  }
  50% {
    background-position: 5px 0;
  }
}

.spell-effect--neocortex-synapse {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--spell-color, #f48fb1);
  box-shadow: 0 0 6px var(--spell-color, #f48fb1);
  animation: neocortex-synapse 0.4s ease-out forwards;
  pointer-events: none;
}

@keyframes neocortex-synapse {
  0% {
    transform: translate(0, 0);
    opacity: 1;
    width: 2px;
  }
  100% {
    transform: translate(var(--target-x, 30px), var(--target-y, 20px));
    opacity: 0;
    width: 30px;
  }
}

.spell-particle--neocortex-spark {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--spell-color, #fff);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--spell-color, #f48fb1);
  animation: neocortex-spark 0.3s ease-out forwards;
  pointer-events: none;
}

@keyframes neocortex-spark {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

.spell-effect--neocortex-wave {
  position: absolute;
  width: 60px;
  height: 60px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--spell-color, #f48fb1);
  border-radius: 50%;
  animation: neocortex-wave 0.8s ease-out forwards;
  animation-delay: calc(var(--ring-index, 0) * 0.1s);
  pointer-events: none;
}

@keyframes neocortex-wave {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
  }
}

.spell-effect--neocortex-beam {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--spell-color, #f48fb1);
  box-shadow: 0 0 10px var(--spell-color, #f48fb1);
  animation: neocortex-beam 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes neocortex-beam {
  0% {
    transform: translate(0, 0) scaleX(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--target-x, 100px), var(--target-y, 50px)) scaleX(50);
    opacity: 0;
  }
}

.spell-particle--neocortex-memory {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--spell-color, #87ceeb);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  box-shadow: 0 0 8px var(--spell-color, #87ceeb);
  animation: neocortex-memory 0.8s ease-out forwards;
  pointer-events: none;
}

@keyframes neocortex-memory {
  0% {
    transform: translateY(0) rotate(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-80px) rotate(180deg);
    opacity: 0;
  }
}

/* ============================================================================
   CURIOSITY - Bespoke Sacrifice/Draw Animation
   ============================================================================ */

.spell-curiosity-target {
  animation: curiosity-glow 0.5s ease-in-out;
}

@keyframes curiosity-glow {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.3) drop-shadow(0 0 10px var(--spell-color, #f48fb1));
  }
}

.spell-curiosity-dissolve {
  animation: curiosity-dissolve 0.6s ease-out forwards;
}

@keyframes curiosity-dissolve {
  0% {
    transform: scale(1);
    opacity: 1;
    filter: brightness(1);
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
    filter: brightness(1.5) hue-rotate(20deg);
  }
  100% {
    transform: scale(0.8);
    opacity: 0;
    filter: brightness(2) blur(5px);
  }
}

.spell-particle--curiosity-question {
  position: absolute;
  width: 16px;
  height: 16px;
  font-size: 14px;
  line-height: 16px;
  text-align: center;
  color: var(--spell-color, #f48fb1);
  text-shadow: 0 0 8px var(--spell-color, #f48fb1);
  animation: curiosity-question 0.5s ease-out forwards;
  pointer-events: none;
}

.spell-particle--curiosity-question::before {
  content: '?';
}

@keyframes curiosity-question {
  0% {
    transform: scale(0) rotate(-45deg);
    opacity: 1;
  }
  50% {
    transform: scale(1.5) rotate(0);
    opacity: 1;
  }
  100% {
    transform: scale(0) rotate(45deg) translateY(-30px);
    opacity: 0;
  }
}

.spell-particle--curiosity-energy {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--spell-color, #f48fb1);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--spell-glow, rgba(244, 143, 177, 0.8));
  animation: curiosity-energy 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes curiosity-energy {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) translateX(calc(cos(var(--angle, 0deg)) * 50px))
      translateY(calc(sin(var(--angle, 0deg)) * 50px)) scale(1.5);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) translateY(-80px) scale(0);
    opacity: 0;
  }
}

.spell-particle--curiosity-symbol {
  position: absolute;
  width: 24px;
  height: 24px;
  font-size: 20px;
  text-align: center;
  animation: curiosity-symbol 0.8s ease-out forwards;
  pointer-events: none;
}

.spell-particle--curiosity-symbol::before {
  content: var(--symbol, '📖');
}

@keyframes curiosity-symbol {
  0% {
    transform: translateY(0) scale(0);
    opacity: 1;
  }
  30% {
    transform: translateY(-20px) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) scale(0.5);
    opacity: 0;
  }
}

.spell-particle--knowledge-trail {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--spell-color, #f48fb1);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--spell-color, #f48fb1);
  animation: knowledge-trail 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes knowledge-trail {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(0) translateY(-30px);
    opacity: 0;
  }
}

/* ============================================================================
   WARM BLOOD - Bespoke Thaw Animation
   ============================================================================ */

.spell-effect--warm-blood-glow {
  position: absolute;
  width: 150px;
  height: 150px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(255, 152, 0, 0.4) 0%,
    rgba(255, 87, 34, 0.2) 50%,
    transparent 70%
  );
  animation: warm-blood-glow 1s ease-out forwards;
  pointer-events: none;
}

@keyframes warm-blood-glow {
  0% {
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0;
  }
  30% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}

.spell-effect--warm-blood-wave {
  position: absolute;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%);
  border: 3px solid var(--spell-color, #ff9800);
  border-radius: 50%;
  animation: warm-blood-wave 0.8s ease-out forwards;
  animation-delay: calc(var(--wave-index, 0) * 0.15s);
  pointer-events: none;
}

@keyframes warm-blood-wave {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
  }
}

.spell-thawing {
  animation: thawing 0.8s ease-out;
}

@keyframes thawing {
  0% {
    filter: brightness(1) saturate(0.5) hue-rotate(-30deg);
  }
  50% {
    filter: brightness(1.3) saturate(1) hue-rotate(0);
  }
  100% {
    filter: brightness(1) saturate(1);
  }
}

.spell-particle--ice-crack {
  position: absolute;
  width: 15px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #87ceeb, #fff, #87ceeb, transparent);
  transform-origin: left center;
  animation: ice-crack 0.4s ease-out forwards;
  pointer-events: none;
}

@keyframes ice-crack {
  0% {
    transform: rotate(var(--angle, 0deg)) scaleX(0);
    opacity: 1;
  }
  50% {
    transform: rotate(var(--angle, 0deg)) scaleX(1);
    opacity: 1;
  }
  100% {
    transform: rotate(var(--angle, 0deg)) scaleX(1) translateX(10px);
    opacity: 0;
  }
}

.spell-particle--ice-shard-fall {
  position: absolute;
  width: 8px;
  height: 12px;
  background: linear-gradient(135deg, #fff, #87ceeb, #64b5f6);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  animation: ice-shard-fall 0.6s ease-in forwards;
  pointer-events: none;
}

@keyframes ice-shard-fall {
  0% {
    transform: translateY(0) rotate(0);
    opacity: 1;
  }
  100% {
    transform: translateY(60px) rotate(180deg);
    opacity: 0;
  }
}

.spell-particle--steam {
  position: absolute;
  width: 15px;
  height: 15px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.6), transparent);
  border-radius: 50%;
  animation: steam-rise 0.8s ease-out forwards;
  pointer-events: none;
}

@keyframes steam-rise {
  0% {
    transform: translateY(0) scale(0.5);
    opacity: 0.8;
  }
  100% {
    transform: translateY(-50px) translateX(calc((random() - 0.5) * 30px)) scale(1.5);
    opacity: 0;
  }
}

.spell-particle--warm-sparkle {
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--spell-color, #ff9800);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--spell-color, #ff9800);
  animation: warm-sparkle 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes warm-sparkle {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(0) translateY(-15px);
    opacity: 0;
  }
}

/* ============================================================================
   ECDYSIS - Bespoke Regeneration Animation
   ============================================================================ */

.spell-ecdysis-shimmer {
  animation: ecdysis-shimmer 0.6s ease-in-out;
}

@keyframes ecdysis-shimmer {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.2) contrast(1.1);
  }
}

.spell-ecdysis-reveal {
  animation: ecdysis-reveal 0.6s ease-out;
}

@keyframes ecdysis-reveal {
  0% {
    filter: brightness(1.5) saturate(1.5);
  }
  100% {
    filter: brightness(1) saturate(1);
  }
}

.spell-effect--ecdysis-skin {
  position: absolute;
  width: 70px;
  height: 90px;
  transform: translate(-50%, -50%);
  background: linear-gradient(
    135deg,
    rgba(158, 158, 158, 0.3) 0%,
    rgba(189, 189, 189, 0.2) 50%,
    rgba(158, 158, 158, 0.1) 100%
  );
  border: 1px solid rgba(200, 200, 200, 0.3);
  border-radius: 20% 20% 30% 30%;
  animation: ecdysis-skin 1.2s ease-out forwards;
  pointer-events: none;
}

@keyframes ecdysis-skin {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.3;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.3) translateX(30px);
    opacity: 0;
  }
}

.spell-particle--ecdysis-peel {
  position: absolute;
  width: 12px;
  height: 8px;
  background: linear-gradient(90deg, var(--spell-color, #9e9e9e) 0%, rgba(200, 200, 200, 0.5) 100%);
  border-radius: 30%;
  animation: ecdysis-peel 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes ecdysis-peel {
  0% {
    transform: rotate(var(--peel-angle, 0deg)) translateX(0) scale(1) rotateY(0);
    opacity: 0.7;
  }
  100% {
    transform: rotate(var(--peel-angle, 0deg)) translateX(40px) scale(0.5) rotateY(90deg);
    opacity: 0;
  }
}

.spell-particle--ecdysis-scale {
  position: absolute;
  width: 8px;
  height: 10px;
  background: var(--spell-color, #9e9e9e);
  clip-path: polygon(50% 0%, 100% 30%, 100% 100%, 0% 100%, 0% 30%);
  animation: ecdysis-scale-drift 0.8s ease-out forwards;
  pointer-events: none;
}

@keyframes ecdysis-scale-drift {
  0% {
    transform: translateY(0) rotate(0);
    opacity: 0.6;
  }
  100% {
    transform: translateY(50px) translateX(calc((random() - 0.5) * 40px)) rotate(180deg);
    opacity: 0;
  }
}

.spell-effect--ecdysis-shine {
  position: absolute;
  width: 80px;
  height: 100px;
  transform: translate(-50%, -50%);
  background: linear-gradient(
    135deg,
    transparent 40%,
    rgba(255, 255, 255, 0.4) 45%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.4) 55%,
    transparent 60%
  );
  animation: ecdysis-shine 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes ecdysis-shine {
  0% {
    transform: translate(-50%, -50%) translateX(-50px);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) translateX(50px);
    opacity: 0;
  }
}

.spell-particle--ecdysis-sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--spell-color, #4caf50);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--spell-color, #4caf50);
  animation: ecdysis-sparkle 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes ecdysis-sparkle {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) translateX(calc(cos(var(--angle, 0deg)) * 40px))
      translateY(calc(sin(var(--angle, 0deg)) * 40px)) scale(0);
    opacity: 0;
  }
}

.spell-particle--regen-heal {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--spell-color, #4caf50);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--spell-color, #4caf50);
  animation: regen-heal-rise 0.8s ease-out forwards;
  pointer-events: none;
}

@keyframes regen-heal-rise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-60px) scale(0);
    opacity: 0;
  }
}

/* ============================================================================
   SURPRISE - Bespoke Snake Strike Animation
   ============================================================================ */

.spell-particle--snake-grass {
  position: absolute;
  width: 4px;
  height: 20px;
  background: linear-gradient(to top, #2d5a27, var(--spell-color, #4caf50));
  animation: snake-grass-rustle 0.3s ease-out forwards;
  pointer-events: none;
}

@keyframes snake-grass-rustle {
  0% {
    transform: rotate(-10deg) scaleY(1);
    opacity: 0.8;
  }
  30% {
    transform: rotate(15deg) scaleY(1.1);
  }
  60% {
    transform: rotate(-5deg) scaleY(0.9);
  }
  100% {
    transform: rotate(0) scaleY(1);
    opacity: 0;
  }
}

.spell-projectile--snake-strike {
  position: absolute;
  width: 60px;
  height: 20px;
  transform-origin: left center;
  animation: spell-snake-strike 0.2s ease-out forwards;
  pointer-events: none;
}

.snake-head {
  position: absolute;
  right: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  background: var(--spell-color, #8bc34a);
  border-radius: 50% 30% 30% 50%;
  box-shadow: inset -3px 0 6px rgba(0, 0, 0, 0.3);
}

.snake-fangs {
  position: absolute;
  right: -4px;
  top: 6px;
  width: 8px;
  height: 8px;
}

.snake-fangs::before,
.snake-fangs::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 6px;
  background: #fff;
  border-radius: 0 0 50% 50%;
}

.snake-fangs::before {
  left: 0;
}
.snake-fangs::after {
  right: 0;
}

.snake-body {
  position: absolute;
  left: 0;
  top: 5px;
  width: 50px;
  height: 10px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--spell-color, #8bc34a) 20%,
    var(--spell-color, #8bc34a)
  );
  border-radius: 5px;
}

@keyframes spell-snake-strike {
  0% {
    transform: rotate(var(--strike-angle, 0deg)) translateX(0) scaleX(0.3);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: rotate(var(--strike-angle, 0deg)) translateX(var(--target-x, 100px))
      translateY(var(--target-y, 0)) scaleX(1);
    opacity: 1;
  }
}

.spell-particle--snake-trail {
  position: absolute;
  width: 10px;
  height: 6px;
  background: var(--spell-color, #8bc34a);
  border-radius: 50%;
  opacity: 0.5;
  animation: snake-trail-fade 0.2s ease-out forwards;
  pointer-events: none;
}

@keyframes snake-trail-fade {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(0.5);
    opacity: 0;
  }
}

.spell-effect--snake-bite {
  position: absolute;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  border: 3px solid var(--spell-color, #8bc34a);
  border-radius: 50%;
  animation: snake-bite-burst 0.4s ease-out forwards;
  pointer-events: none;
}

@keyframes snake-bite-burst {
  0% {
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}

.spell-effect--fang-marks {
  position: absolute;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.spell-effect--fang-marks::before,
.spell-effect--fang-marks::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 8px;
  background: #c62828;
  border-radius: 50%;
  box-shadow: 0 0 6px #c62828;
  animation: fang-mark-appear 0.3s ease-out forwards;
}

.spell-effect--fang-marks::before {
  left: 3px;
}
.spell-effect--fang-marks::after {
  right: 3px;
}

@keyframes fang-mark-appear {
  0% {
    transform: scaleY(0);
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}

.spell-particle--venom-drip {
  position: absolute;
  width: 6px;
  height: 10px;
  background: linear-gradient(to bottom, var(--spell-color, #8bc34a), #4caf50);
  border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
  animation: venom-drip 0.6s ease-in forwards;
  pointer-events: none;
}

@keyframes venom-drip {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.8;
  }
  100% {
    transform: translateY(40px) scale(0.5);
    opacity: 0;
  }
}

.spell-snake-bitten {
  animation: snake-bitten 0.6s ease-out;
}

@keyframes snake-bitten {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(0.95) rotate(-2deg);
  }
  30% {
    transform: scale(1.05) rotate(1deg);
  }
  50% {
    transform: scale(0.98);
    filter: hue-rotate(30deg) brightness(1.1);
  }
  100% {
    transform: scale(1);
    filter: none;
  }
}

/* ============================================================================
   WHITE MISSILE - Bespoke Quill Projectile Animation
   ============================================================================ */

.spell-projectile--quill {
  position: absolute;
  width: 40px;
  height: 12px;
  transform-origin: center center;
  animation: spell-quill-spin 0.3s linear forwards;
  pointer-events: none;
}

.quill-tip {
  position: absolute;
  right: 0;
  top: 4px;
  width: 0;
  height: 0;
  border-left: 12px solid #333;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

.quill-shaft {
  position: absolute;
  left: 5px;
  right: 10px;
  top: 4px;
  height: 4px;
  background: linear-gradient(90deg, #fff, #e0e0e0);
  border-radius: 1px;
}

.quill-feathers {
  position: absolute;
  left: 0;
  top: 0;
  width: 15px;
  height: 12px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    #fff 20%,
    #f5f5f5 50%,
    #fff 80%,
    transparent 100%
  );
  clip-path: polygon(100% 50%, 0% 0%, 0% 100%);
}

@keyframes spell-quill-spin {
  0% {
    transform: rotate(var(--quill-angle, 0deg)) translateX(0) translateY(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: rotate(calc(var(--quill-angle, 0deg) + 720deg)) translateX(var(--target-x, 100px))
      translateY(var(--target-y, 0));
    opacity: 1;
  }
}

.spell-particle--quill-wisp {
  position: absolute;
  width: 8px;
  height: 4px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  animation: quill-wisp 0.3s ease-out forwards;
  pointer-events: none;
}

@keyframes quill-wisp {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

.spell-effect--quill-embedded {
  position: absolute;
  width: 30px;
  height: 10px;
  transform: translate(-50%, -50%) rotate(var(--embed-angle, 0deg));
  animation: quill-embed-wobble 0.4s ease-out;
  pointer-events: none;
}

.embedded-quill-tip {
  position: absolute;
  right: 0;
  top: 3px;
  width: 0;
  height: 0;
  border-left: 8px solid #333;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
}

.embedded-quill-shaft {
  position: absolute;
  left: 3px;
  right: 6px;
  top: 3px;
  height: 4px;
  background: linear-gradient(90deg, #fff, #e0e0e0);
}

.embedded-quill-feathers {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  background: #fff;
  clip-path: polygon(100% 50%, 0% 0%, 0% 100%);
}

@keyframes quill-embed-wobble {
  0% {
    transform: translate(-50%, -50%) rotate(var(--embed-angle, 0deg)) translateX(5px);
  }
  20% {
    transform: translate(-50%, -50%) rotate(calc(var(--embed-angle, 0deg) - 8deg));
  }
  40% {
    transform: translate(-50%, -50%) rotate(calc(var(--embed-angle, 0deg) + 5deg));
  }
  60% {
    transform: translate(-50%, -50%) rotate(calc(var(--embed-angle, 0deg) - 3deg));
  }
  80% {
    transform: translate(-50%, -50%) rotate(calc(var(--embed-angle, 0deg) + 1deg));
  }
  100% {
    transform: translate(-50%, -50%) rotate(var(--embed-angle, 0deg));
  }
}

.spell-particle--quill-puff {
  position: absolute;
  width: 8px;
  height: 4px;
  background: var(--spell-color, #fff);
  border-radius: 50%;
  opacity: 0.7;
  animation: quill-puff 0.4s ease-out forwards;
  pointer-events: none;
}

@keyframes quill-puff {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.7;
  }
  100% {
    transform: translate(-50%, -50%) translateX(calc(cos(var(--angle, 0deg)) * 25px))
      translateY(calc(sin(var(--angle, 0deg)) * 25px)) scale(0);
    opacity: 0;
  }
}

.spell-quill-hit {
  animation: quill-hit 0.5s ease-out;
}

@keyframes quill-hit {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(0.95) translateX(-3px);
  }
  40% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}

/* ============================================================================
   METEOR - Epic Extinction-Level Board Wipe Animation
   ============================================================================ */

.spell-effect--meteor-distant-glow {
  position: absolute;
  top: 0;
  right: 10%;
  width: 80px;
  height: 80px;
  background: radial-gradient(
    circle,
    var(--spell-color, #ff7043) 0%,
    rgba(255, 112, 67, 0.5) 40%,
    transparent 70%
  );
  border-radius: 50%;
  animation: meteor-distant-glow 0.8s ease-out forwards;
  pointer-events: none;
}

@keyframes meteor-distant-glow {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  30% {
    transform: scale(1.2);
    opacity: 0.8;
  }
  100% {
    transform: scale(2) translateX(-30px) translateY(20px);
    opacity: 0;
  }
}

.spell-particle--meteor-warning-dust {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--spell-color, #8b4513);
  border-radius: 50%;
  animation: meteor-warning-dust 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes meteor-warning-dust {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.6;
  }
  100% {
    transform: translateY(-40px) scale(0);
    opacity: 0;
  }
}

.spell-effect--meteor-sky-rift {
  position: absolute;
  top: 5%;
  left: 50%;
  width: 120px;
  height: 40px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--spell-color, #ff7043) 20%,
    var(--spell-secondary, #f4511e) 50%,
    var(--spell-color, #ff7043) 80%,
    transparent 100%
  );
  border-radius: 50%;
  animation: meteor-sky-rift 0.7s ease-out forwards;
  box-shadow:
    0 0 30px var(--spell-color, #ff7043),
    0 0 60px var(--spell-secondary, #f4511e);
  pointer-events: none;
}

@keyframes meteor-sky-rift {
  0% {
    transform: translateX(-50%) scaleX(0);
    opacity: 0;
  }
  30% {
    transform: translateX(-50%) scaleX(1.2);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) scaleX(0.8) scaleY(1.5);
    opacity: 0;
  }
}

.spell-particle--rift-ember {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--spell-color, #ff7043);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--spell-color, #ff7043);
  animation: rift-ember 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes rift-ember {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(60px) scale(0.3);
    opacity: 0;
  }
}

.spell-aoe--meteor-epic {
  position: absolute;
  left: 50%;
  top: 0;
  width: 70px;
  height: 70px;
  transform: translateX(-50%);
  background: radial-gradient(
    circle at 30% 30%,
    #ffd54f 0%,
    var(--spell-color, #ff7043) 30%,
    var(--spell-secondary, #f4511e) 60%,
    #5d4037 80%,
    #3e2723 100%
  );
  border-radius: 50%;
  box-shadow:
    0 0 40px var(--spell-color, #ff7043),
    0 0 80px var(--spell-secondary, #f4511e),
    inset -10px -10px 20px rgba(0, 0, 0, 0.5);
  animation: meteor-epic-fall 0.35s ease-in forwards;
  pointer-events: none;
}

@keyframes meteor-epic-fall {
  0% {
    transform: translateX(-50%) translateY(0) scale(0.5);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(calc(50vh)) scale(1.2);
    opacity: 1;
  }
}

.spell-effect--meteor-corona {
  position: absolute;
  left: 50%;
  top: 10%;
  width: 120px;
  height: 120px;
  transform: translateX(-50%);
  background: radial-gradient(
    circle,
    transparent 30%,
    var(--spell-color, #ff7043) 50%,
    transparent 70%
  );
  border-radius: 50%;
  animation: meteor-corona 0.4s ease-out forwards;
  pointer-events: none;
}

@keyframes meteor-corona {
  0% {
    transform: translateX(-50%) scale(0.5);
    opacity: 0.8;
  }
  100% {
    transform: translateX(-50%) translateY(calc(50vh - 50px)) scale(0.3);
    opacity: 0;
  }
}

.spell-particle--meteor-fire-trail {
  position: absolute;
  left: 50%;
  top: 5%;
  width: 20px;
  height: 100px;
  transform: translateX(calc(-50% + var(--trail-offset, 0px)));
  background: linear-gradient(
    to bottom,
    var(--spell-color, #ff7043) 0%,
    rgba(255, 112, 67, 0.5) 50%,
    transparent 100%
  );
  border-radius: 10px 10px 50% 50%;
  animation: meteor-fire-trail 0.35s ease-in forwards;
  pointer-events: none;
}

@keyframes meteor-fire-trail {
  0% {
    transform: translateX(calc(-50% + var(--trail-offset, 0px))) translateY(0);
    opacity: 0.8;
  }
  100% {
    transform: translateX(calc(-50% + var(--trail-offset, 0px))) translateY(calc(50vh - 100px));
    opacity: 0;
  }
}

.spell-particle--meteor-smoke-epic {
  position: absolute;
  width: var(--size, 20px);
  height: var(--size, 20px);
  background: radial-gradient(circle, rgba(80, 80, 80, 0.6) 0%, transparent 70%);
  border-radius: 50%;
  animation: meteor-smoke-epic 0.8s ease-out forwards;
  pointer-events: none;
}

@keyframes meteor-smoke-epic {
  0% {
    transform: scale(0.5);
    opacity: 0.6;
  }
  100% {
    transform: scale(2) translateX(30px);
    opacity: 0;
  }
}

.spell-effect--meteor-crater-epic {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 100px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse,
    var(--spell-secondary, #f4511e) 0%,
    var(--spell-color, #ff7043) 30%,
    rgba(93, 64, 55, 0.5) 60%,
    transparent 80%
  );
  border-radius: 50%;
  animation: meteor-crater-epic 0.8s ease-out forwards;
  pointer-events: none;
}

@keyframes meteor-crater-epic {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  30% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

.spell-effect--meteor-shockwave-epic {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50px;
  height: 50px;
  transform: translate(-50%, -50%);
  border: 4px solid var(--spell-color, #ff7043);
  border-radius: 50%;
  animation: meteor-shockwave-epic 0.5s ease-out forwards;
  animation-delay: calc(var(--ring-index, 0) * 0.06s);
  pointer-events: none;
}

@keyframes meteor-shockwave-epic {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
    border-width: 8px;
  }
  100% {
    transform: translate(-50%, -50%) scale(6);
    opacity: 0;
    border-width: 1px;
  }
}

.spell-effect--meteor-fire-pillar {
  position: absolute;
  left: var(--pillar-x, 50%);
  bottom: 20%;
  width: 30px;
  height: 0;
  background: linear-gradient(
    to top,
    var(--spell-color, #ff7043) 0%,
    #ffd54f 50%,
    transparent 100%
  );
  border-radius: 50% 50% 0 0;
  animation: meteor-fire-pillar 0.6s ease-out forwards;
  animation-delay: var(--pillar-delay, 0s);
  pointer-events: none;
}

@keyframes meteor-fire-pillar {
  0% {
    height: 0;
    opacity: 1;
  }
  40% {
    height: 150px;
    opacity: 1;
  }
  100% {
    height: 100px;
    opacity: 0;
  }
}

.spell-particle--meteor-debris-epic {
  position: absolute;
  width: var(--size, 8px);
  height: var(--size, 8px);
  background: var(--spell-color, #ff7043);
  border-radius: 30% 70% 50% 50%;
  box-shadow: 0 0 6px var(--spell-color, #ff7043);
  animation: meteor-debris-epic 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes meteor-debris-epic {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) translateX(calc(cos(var(--angle, 0deg)) * var(--speed, 80px)))
      translateY(calc(sin(var(--angle, 0deg)) * var(--speed, 80px) - 30px)) rotate(720deg)
      scale(0.3);
    opacity: 0;
  }
}

.spell-effect--meteor-creature-burn {
  position: absolute;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--spell-color, #ff7043) 0%, transparent 70%);
  border-radius: 50%;
  animation: meteor-creature-burn 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes meteor-creature-burn {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.9;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 0.7;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
  }
}

.spell-meteor-devastation {
  animation: meteor-devastation 0.8s ease-out;
}

@keyframes meteor-devastation {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  20% {
    transform: scale(0.85) rotate(-3deg);
    filter: brightness(2) saturate(0.5);
  }
  40% {
    transform: scale(1.1) rotate(2deg);
    filter: brightness(1.5) hue-rotate(20deg);
  }
  60% {
    transform: scale(0.95);
    filter: brightness(1.2);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

.spell-particle--meteor-ash {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--spell-color, #4a4a4a);
  border-radius: 50%;
  animation: meteor-ash 1.2s ease-out forwards;
  pointer-events: none;
}

@keyframes meteor-ash {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 0.7;
  }
  100% {
    transform: translateY(120%) translateX(var(--sway, 0px)) rotate(360deg);
    opacity: 0;
  }
}

.spell-particle--ember-aftermath {
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--spell-color, #ff7043);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--spell-color, #ff7043);
  animation: ember-aftermath 1s ease-out forwards;
  pointer-events: none;
}

@keyframes ember-aftermath {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.8;
  }
  100% {
    transform: translateY(-80px) scale(0);
    opacity: 0;
  }
}

/* ============================================================================
   BLIZZARD - Epic Arctic Storm Animation
   ============================================================================ */

.spell-aoe--blizzard-frost-creep {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 0% 0%, var(--spell-color, #b3e5fc) 0%, transparent 40%),
    radial-gradient(ellipse at 100% 0%, var(--spell-secondary, #81d4fa) 0%, transparent 40%),
    radial-gradient(ellipse at 0% 100%, var(--spell-color, #b3e5fc) 0%, transparent 40%),
    radial-gradient(ellipse at 100% 100%, var(--spell-secondary, #81d4fa) 0%, transparent 40%);
  animation: blizzard-frost-creep 1.4s ease-out forwards;
  pointer-events: none;
}

@keyframes blizzard-frost-creep {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0.4;
  }
  70% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
  }
}

.spell-particle--frost-breath {
  position: absolute;
  width: 30px;
  height: 15px;
  background: radial-gradient(ellipse, var(--spell-color, #e1f5fe) 0%, transparent 70%);
  border-radius: 50%;
  animation: frost-breath 0.8s ease-out forwards;
  pointer-events: none;
}

@keyframes frost-breath {
  0% {
    transform: scale(0.5);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.5) translateY(-30px);
    opacity: 0;
  }
}

.spell-effect--blizzard-wind-streak {
  position: absolute;
  left: -10%;
  width: 120%;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--spell-color, #e1f5fe) 20%,
    rgba(255, 255, 255, 0.8) 50%,
    var(--spell-color, #e1f5fe) 80%,
    transparent 100%
  );
  animation: blizzard-wind-streak 0.4s ease-out forwards;
  pointer-events: none;
}

@keyframes blizzard-wind-streak {
  0% {
    transform: translateX(-100%);
    opacity: 0.8;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

.spell-particle--blizzard-snow {
  position: absolute;
  width: var(--size, 6px);
  height: var(--size, 6px);
  background: var(--spell-color, #fff);
  border-radius: 50%;
  box-shadow: 0 0 4px var(--spell-color, #fff);
  animation: blizzard-snow 0.8s ease-in forwards;
  pointer-events: none;
}

@keyframes blizzard-snow {
  0% {
    transform: translateX(0) translateY(0) rotate(0deg);
    opacity: 0.9;
  }
  100% {
    transform: translateX(var(--wind-push, 100%)) translateY(120%) rotate(360deg);
    opacity: 0;
  }
}

.spell-particle--ice-shard-fly {
  position: absolute;
  width: var(--shard-size, 12px);
  height: calc(var(--shard-size, 12px) * 0.4);
  background: linear-gradient(90deg, var(--spell-color, #b3e5fc), #fff);
  clip-path: polygon(0% 50%, 30% 0%, 100% 50%, 30% 100%);
  animation: ice-shard-fly 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes ice-shard-fly {
  0% {
    transform: translateX(0) rotate(-10deg);
    opacity: 0.9;
  }
  100% {
    transform: translateX(120vw) rotate(10deg);
    opacity: 0;
  }
}

.spell-blizzard-encase {
  animation: blizzard-encase 1.1s ease-out;
}

@keyframes blizzard-encase {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  20% {
    transform: scale(0.95);
    filter: brightness(1.3) saturate(0.7) hue-rotate(-20deg);
  }
  50% {
    transform: scale(1.02);
    filter: brightness(1.1) saturate(0.5) hue-rotate(-30deg);
  }
  100% {
    transform: scale(1);
    filter: brightness(1) saturate(0.8);
  }
}

.spell-particle--ice-crystal-burst {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--spell-color, #b3e5fc);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  animation: ice-crystal-burst 0.4s ease-out forwards;
  pointer-events: none;
}

@keyframes ice-crystal-burst {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%)
      translateX(calc(cos(var(--angle, 0deg)) * var(--distance, 30px)))
      translateY(calc(sin(var(--angle, 0deg)) * var(--distance, 30px))) rotate(180deg) scale(0.5);
    opacity: 0;
  }
}

.spell-effect--ice-encase {
  position: absolute;
  width: 70px;
  height: 90px;
  transform: translate(-50%, -50%);
  background: linear-gradient(
    180deg,
    rgba(179, 229, 252, 0.3) 0%,
    rgba(129, 212, 250, 0.4) 50%,
    rgba(179, 229, 252, 0.3) 100%
  );
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  box-shadow:
    inset 0 0 20px rgba(255, 255, 255, 0.3),
    0 0 15px var(--spell-color, #b3e5fc);
  animation: ice-encase 0.9s ease-out forwards;
  pointer-events: none;
}

@keyframes ice-encase {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }
  30% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

.spell-particle--icicle-form {
  position: absolute;
  width: 6px;
  height: var(--icicle-height, 20px);
  background: linear-gradient(
    180deg,
    var(--spell-color, #b3e5fc) 0%,
    #fff 50%,
    rgba(255, 255, 255, 0.5) 100%
  );
  clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
  animation: icicle-form 0.4s ease-out forwards;
  pointer-events: none;
}

@keyframes icicle-form {
  0% {
    transform: scaleY(0);
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    opacity: 0.9;
  }
}

.spell-effect--frost-crack {
  position: absolute;
  width: 60px;
  height: 60px;
  transform: translate(-50%, -50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M30 30 L30 10 M30 30 L45 20 M30 30 L50 35 M30 30 L40 50 M30 30 L20 48 M30 30 L10 40 M30 30 L15 20' stroke='%23b3e5fc' stroke-width='2' fill='none'/%3E%3C/svg%3E")
    center/contain no-repeat;
  animation: frost-crack 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes frost-crack {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

.spell-effect--blizzard-player-hit {
  position: absolute;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--spell-color, #b3e5fc) 0%, transparent 70%);
  border-radius: 50%;
  animation: blizzard-player-hit 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes blizzard-player-hit {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}

.spell-particle--snow-gentle {
  position: absolute;
  width: var(--size, 4px);
  height: var(--size, 4px);
  background: var(--spell-color, #fff);
  border-radius: 50%;
  animation: snow-gentle 1.2s ease-out forwards;
  pointer-events: none;
}

@keyframes snow-gentle {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0.7;
  }
  100% {
    transform: translateY(120%) translateX(20px);
    opacity: 0;
  }
}

.spell-effect--frost-mist-linger {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(179, 229, 252, 0.15) 70%,
    transparent 100%
  );
  animation: frost-mist-linger 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes frost-mist-linger {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 0;
  }
}

/* ============================================================================
   SNAKE WINE - Exotic Healing Elixir Animation
   ============================================================================ */

.spell-effect--snake-wine-vessel {
  position: absolute;
  width: 40px;
  height: 60px;
  transform: translate(-50%, -50%);
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(76, 175, 80, 0.3) 20%,
    var(--spell-color, #ff7043) 40%,
    var(--spell-secondary, #f4511e) 70%,
    #5d4037 90%
  );
  border: 2px solid #8d6e63;
  border-radius: 5px 5px 15px 15px;
  box-shadow:
    inset 0 -20px 30px rgba(76, 175, 80, 0.4),
    0 0 20px var(--spell-color, #ff7043);
  animation: snake-wine-vessel-appear 1.4s ease-out forwards;
  pointer-events: none;
}

.spell-effect--snake-wine-vessel::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 15px;
  background: #5d4037;
  border-radius: 3px 3px 0 0;
}

@keyframes snake-wine-vessel-appear {
  0% {
    transform: translate(-50%, -50%) scale(0) rotate(-10deg);
    opacity: 0;
  }
  20% {
    transform: translate(-50%, -50%) scale(1.1) rotate(5deg);
    opacity: 1;
  }
  80% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.8) rotate(15deg);
    opacity: 0;
  }
}

.spell-particle--wine-mist {
  position: absolute;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, var(--spell-color, #ffccbc) 0%, transparent 70%);
  border-radius: 50%;
  animation: wine-mist 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes wine-mist {
  0% {
    transform: scale(0.5);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.5) translateY(-20px);
    opacity: 0;
  }
}

.spell-effect--wine-snake-coil {
  position: absolute;
  width: 30px;
  height: 50px;
  transform: translate(-50%, -50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 50'%3E%3Cpath d='M15 45 Q5 40 10 30 Q15 20 8 15 Q3 10 15 5' stroke='%232e7d32' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='15' cy='5' r='3' fill='%232e7d32'/%3E%3C/svg%3E")
    center/contain no-repeat;
  animation: wine-snake-coil 0.8s ease-in-out forwards;
  pointer-events: none;
}

@keyframes wine-snake-coil {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
  }
  30% {
    transform: translate(-50%, -50%) scale(1) rotate(10deg);
    opacity: 0.8;
  }
  60% {
    transform: translate(-50%, -50%) scale(1.1) rotate(-5deg);
    opacity: 0.9;
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 0;
  }
}

.spell-effect--wine-liquid-glow {
  position: absolute;
  width: 35px;
  height: 40px;
  transform: translate(-50%, -50%) translateY(10px);
  background: radial-gradient(
    ellipse,
    var(--spell-secondary, #4caf50) 0%,
    var(--spell-color, #ff7043) 50%,
    transparent 80%
  );
  border-radius: 50%;
  animation: wine-liquid-glow 0.9s ease-in-out forwards;
  pointer-events: none;
}

@keyframes wine-liquid-glow {
  0%,
  100% {
    opacity: 0;
  }
  30%,
  70% {
    opacity: 0.7;
    transform: translate(-50%, -50%) translateY(10px) scale(1.1);
  }
}

.spell-particle--wine-bubble {
  position: absolute;
  width: var(--bubble-size, 4px);
  height: var(--bubble-size, 4px);
  background: var(--spell-color, #81c784);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  animation: wine-bubble 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes wine-bubble {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.8;
  }
  100% {
    transform: translateY(-40px) scale(0.5);
    opacity: 0;
  }
}

.spell-effect--wine-drink {
  position: absolute;
  width: 40px;
  height: 60px;
  transform: translate(-50%, -50%);
  background: transparent;
  animation: wine-drink-tip 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes wine-drink-tip {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(45deg) translateY(20px);
  }
}

.spell-effect--wine-stream {
  position: absolute;
  width: 8px;
  height: 40px;
  transform: translate(-50%, 0) rotate(30deg);
  background: linear-gradient(
    180deg,
    var(--spell-color, #ff7043) 0%,
    var(--spell-secondary, #4caf50) 50%,
    rgba(76, 175, 80, 0.3) 100%
  );
  border-radius: 4px;
  animation: wine-stream 0.4s ease-in forwards;
  pointer-events: none;
}

@keyframes wine-stream {
  0% {
    transform: translate(-50%, 0) rotate(30deg) scaleY(0);
    opacity: 0.9;
  }
  50% {
    transform: translate(-50%, 20px) rotate(20deg) scaleY(1);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, 40px) rotate(10deg) scaleY(0.5);
    opacity: 0;
  }
}

.spell-snake-wine-absorb {
  animation: snake-wine-absorb 0.8s ease-out;
}

@keyframes snake-wine-absorb {
  0% {
    filter: brightness(1);
  }
  30% {
    filter: brightness(1.3) hue-rotate(60deg);
    box-shadow: 0 0 30px rgba(76, 175, 80, 0.6);
  }
  60% {
    filter: brightness(1.2) hue-rotate(30deg);
    box-shadow: 0 0 20px rgba(255, 112, 67, 0.4);
  }
  100% {
    filter: brightness(1);
    box-shadow: none;
  }
}

.spell-effect--wine-heal-ring {
  position: absolute;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
  border: 3px solid var(--spell-color, #ff7043);
  border-radius: 50%;
  animation: wine-heal-ring 0.5s ease-out forwards;
  animation-delay: calc(var(--ring-index, 0) * 0.1s);
  pointer-events: none;
}

@keyframes wine-heal-ring {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.9;
    border-width: 4px;
  }
  100% {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
    border-width: 1px;
  }
}

.spell-particle--snake-scale-heal {
  position: absolute;
  width: 8px;
  height: 6px;
  background: var(--spell-color, #4caf50);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  animation: snake-scale-heal 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes snake-scale-heal {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.9;
  }
  100% {
    transform: translate(-50%, -50%) translateX(calc(cos(var(--angle, 0deg)) * 50px))
      translateY(calc(sin(var(--angle, 0deg)) * 50px)) rotate(180deg) scale(0);
    opacity: 0;
  }
}

.spell-particle--wine-sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--spell-color, #ffd700);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--spell-color, #ffd700);
  animation: wine-sparkle 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes wine-sparkle {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

/* ============================================================================
   WHITE HART - Majestic Resurrection Animation
   ============================================================================ */

.spell-particle--hart-mist-rise {
  position: absolute;
  width: var(--mist-width, 40px);
  height: 60px;
  background: radial-gradient(ellipse at bottom, var(--spell-color, #e1f5fe) 0%, transparent 70%);
  border-radius: 50% 50% 0 0;
  animation: hart-mist-rise 1s ease-out forwards;
  pointer-events: none;
}

@keyframes hart-mist-rise {
  0% {
    transform: translateY(0) scaleY(0.5);
    opacity: 0.6;
  }
  100% {
    transform: translateY(-100px) scaleY(1.5);
    opacity: 0;
  }
}

.spell-effect--hart-whisper {
  position: absolute;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
  border: 1px solid var(--spell-color, #b3e5fc);
  border-radius: 50%;
  animation: hart-whisper 0.6s ease-out forwards;
  animation-delay: calc(var(--whisper-index, 0) * 0.08s);
  pointer-events: none;
}

@keyframes hart-whisper {
  0% {
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

.spell-effect--white-hart-spirit {
  position: absolute;
  width: 80px;
  height: 100px;
  transform: translate(-50%, -50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 100'%3E%3Cellipse cx='40' cy='60' rx='20' ry='25' fill='white' opacity='0.9'/%3E%3Cellipse cx='40' cy='35' rx='12' ry='15' fill='white' opacity='0.9'/%3E%3Cpath d='M28 25 Q20 10 15 5 M28 25 Q25 15 20 12 M52 25 Q60 10 65 5 M52 25 Q55 15 60 12' stroke='white' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='35' cy='33' r='2' fill='%2381d4fa'/%3E%3Ccircle cx='45' cy='33' r='2' fill='%2381d4fa'/%3E%3C/svg%3E")
    center/contain no-repeat;
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8));
  animation: white-hart-spirit 1s ease-in-out forwards;
  pointer-events: none;
}

@keyframes white-hart-spirit {
  0% {
    transform: translate(-50%, -50%) scale(0) translateY(50px);
    opacity: 0;
  }
  30% {
    transform: translate(-50%, -50%) scale(1.1) translateY(0);
    opacity: 1;
  }
  70% {
    transform: translate(-50%, -50%) scale(1) translateY(-10px);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.8) translateY(-30px);
    opacity: 0;
  }
}

.spell-particle--hart-light-ray {
  position: absolute;
  width: 4px;
  height: 60px;
  transform: translate(-50%, -50%) rotate(var(--ray-angle, 0deg)) translateY(-50px);
  transform-origin: center bottom;
  background: linear-gradient(to top, var(--spell-color, #e1f5fe), transparent);
  border-radius: 2px;
  animation: hart-light-ray 0.9s ease-out forwards;
  pointer-events: none;
}

@keyframes hart-light-ray {
  0% {
    transform: translate(-50%, -50%) rotate(var(--ray-angle, 0deg)) translateY(-50px) scaleY(0);
    opacity: 0.8;
  }
  40% {
    transform: translate(-50%, -50%) rotate(var(--ray-angle, 0deg)) translateY(-50px) scaleY(1);
    opacity: 0.7;
  }
  100% {
    transform: translate(-50%, -50%) rotate(var(--ray-angle, 0deg)) translateY(-50px) scaleY(0.5);
    opacity: 0;
  }
}

.spell-particle--hart-snowflake {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--spell-color, #fff);
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  animation: hart-snowflake 0.8s ease-out forwards;
  pointer-events: none;
}

@keyframes hart-snowflake {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.2) rotate(90deg);
    opacity: 0.7;
  }
  100% {
    transform: scale(0) rotate(180deg);
    opacity: 0;
  }
}

.spell-effect--hart-resurrection-spark {
  position: absolute;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff 0%, var(--spell-color, #b3e5fc) 50%, transparent 70%);
  border-radius: 50%;
  box-shadow:
    0 0 15px #fff,
    0 0 30px var(--spell-color, #b3e5fc);
  animation: hart-resurrection-spark 0.5s ease-in forwards;
  pointer-events: none;
}

@keyframes hart-resurrection-spark {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, calc(-50% + 80px)) scale(0.5);
    opacity: 0;
  }
}

.spell-effect--hart-magic-circle {
  position: absolute;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--spell-color, #b3e5fc);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(179, 229, 252, 0.2) 0%, transparent 70%);
  box-shadow: 0 0 20px var(--spell-color, #b3e5fc);
  animation: hart-magic-circle 0.7s ease-out forwards;
  pointer-events: none;
}

.spell-effect--hart-magic-circle::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid var(--spell-secondary, #81d4fa);
  border-radius: 50%;
}

@keyframes hart-magic-circle {
  0% {
    transform: translate(-50%, -50%) scale(0) rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2) rotate(90deg);
    opacity: 0.9;
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(180deg);
    opacity: 0;
  }
}

.spell-particle--hart-ice-crystal {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--spell-color, #b3e5fc);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  animation: hart-ice-crystal 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes hart-ice-crystal {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) translateX(calc(cos(var(--angle, 0deg)) * 40px))
      translateY(calc(sin(var(--angle, 0deg)) * 40px)) scale(0.5);
    opacity: 0;
  }
}

.spell-effect--hart-ghost-rise {
  position: absolute;
  width: 60px;
  height: 80px;
  transform: translate(-50%, 0);
  background: linear-gradient(
    to top,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 30%,
    rgba(179, 229, 252, 0.3) 70%,
    transparent 100%
  );
  border-radius: 30px 30px 0 0;
  animation: hart-ghost-rise 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes hart-ghost-rise {
  0% {
    transform: translate(-50%, 0) scaleY(0);
    opacity: 0.7;
  }
  50% {
    transform: translate(-50%, -40px) scaleY(1);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -80px) scaleY(0.5);
    opacity: 0;
  }
}

.spell-particle--hart-frost-burst {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--spell-color, #b3e5fc);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--spell-color, #b3e5fc);
  animation: hart-frost-burst 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes hart-frost-burst {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) translateX(calc(cos(var(--angle, 0deg)) * 50px))
      translateY(calc(sin(var(--angle, 0deg)) * 50px)) scale(0);
    opacity: 0;
  }
}

.spell-effect--hart-ice-coat {
  position: absolute;
  width: 70px;
  height: 90px;
  transform: translate(-50%, -50%);
  background: linear-gradient(
    180deg,
    rgba(179, 229, 252, 0.4) 0%,
    rgba(129, 212, 250, 0.3) 50%,
    rgba(179, 229, 252, 0.2) 100%
  );
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  box-shadow: 0 0 20px var(--spell-color, #b3e5fc);
  animation: hart-ice-coat 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes hart-ice-coat {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

.spell-hart-materialize {
  animation: hart-materialize 0.8s ease-out;
}

@keyframes hart-materialize {
  0% {
    transform: scale(0.8) translateY(20px);
    opacity: 0.5;
    filter: brightness(1.5) saturate(0.5);
  }
  50% {
    transform: scale(1.05) translateY(-5px);
    opacity: 1;
    filter: brightness(1.2) saturate(0.8);
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
    filter: brightness(1);
  }
}

.spell-particle--hart-fade-sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--spell-color, #e1f5fe);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--spell-color, #e1f5fe);
  animation: hart-fade-sparkle 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes hart-fade-sparkle {
  0% {
    transform: scale(1) translateY(0);
    opacity: 0.9;
  }
  100% {
    transform: scale(0) translateY(-40px);
    opacity: 0;
  }
}

/* ============================================================================
   TRAP CARD REVEAL ANIMATION
   ============================================================================ */

/* Trap reveal - springs up with urgency */
.trap-card-reveal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  pointer-events: none;
  perspective: 1000px;
  animation: trap-reveal-entrance 0.2s ease-out forwards;
}

@keyframes trap-reveal-entrance {
  0% {
    opacity: 0;
    background: rgba(255, 50, 50, 0);
  }
  100% {
    opacity: 1;
    background: rgba(255, 50, 50, 0.15);
  }
}

.trap-card-reveal.exiting {
  animation: trap-reveal-exit 0.4s ease-in forwards;
}

@keyframes trap-reveal-exit {
  0% {
    opacity: 1;
    background: rgba(255, 50, 50, 0.15);
  }
  100% {
    opacity: 0;
    background: rgba(255, 50, 50, 0);
    filter: brightness(1.5) blur(5px);
  }
}

/* Warning flash behind card */
.trap-reveal-flash {
  position: absolute;
  width: 600px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 100, 100, 0.5) 0%,
    rgba(255, 50, 50, 0.3) 30%,
    transparent 70%
  );
  filter: blur(40px);
  animation: trap-reveal-flash-pulse 0.3s ease-out;
}

@keyframes trap-reveal-flash-pulse {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
}

/* Card wrapper - springs up from below */
.trap-reveal-card-wrapper {
  width: 250px;
  height: 350px;
  position: relative;
  transform-style: preserve-3d;
  transform: scale(0.3) translateY(300px) rotateX(-30deg);
  opacity: 0;
  animation: trap-reveal-card-spring 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.5) forwards;
}

@keyframes trap-reveal-card-spring {
  0% {
    transform: scale(0.3) translateY(300px) rotateX(-30deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.1) translateY(-20px) rotateX(5deg);
  }
  100% {
    transform: scale(1) translateY(0) rotateX(0deg);
    opacity: 1;
  }
}

.trap-reveal-card-wrapper.flipped .trap-reveal-card-back {
  transform: rotateY(-180deg);
}

.trap-reveal-card-wrapper.flipped .trap-reveal-card-front {
  transform: rotateY(0deg);
}

.trap-card-reveal.exiting .trap-reveal-card-wrapper {
  animation: trap-reveal-card-exit 0.4s ease-in forwards;
}

@keyframes trap-reveal-card-exit {
  0% {
    transform: scale(1) translateY(0);
  }
  100% {
    transform: scale(0.5) translateY(200px) rotateX(20deg);
    opacity: 0;
  }
}

/* Card back - face-down trap with warning style */
.trap-reveal-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  background: linear-gradient(135deg, #3d1a1a 0%, #1a0a0a 100%);
  border: 3px solid #8b2020;
  box-shadow:
    0 0 25px rgba(139, 32, 32, 0.6),
    inset 0 0 30px rgba(139, 32, 32, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotateY(0deg);
  transition: transform 0.4s ease-in-out;
}

.trap-back-pattern {
  position: absolute;
  inset: 10px;
  border: 2px solid rgba(139, 32, 32, 0.6);
  border-radius: 8px;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 15px,
    rgba(139, 32, 32, 0.15) 15px,
    rgba(139, 32, 32, 0.15) 30px
  );
}

.trap-back-icon {
  font-size: 4rem;
  color: #cc4444;
  text-shadow: 0 0 15px rgba(255, 50, 50, 0.7);
  z-index: 1;
  animation: trap-back-icon-pulse 0.5s ease-in-out infinite;
}

@keyframes trap-back-icon-pulse {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.1);
    filter: brightness(1.3);
  }
}

/* Card front - the revealed trap */
.trap-reveal-card-front {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  background: linear-gradient(180deg, #2e1a1a 0%, #1a0f0f 100%);
  border: 3px solid var(--trap-theme-color, #ff6b6b);
  box-shadow:
    0 0 35px var(--trap-theme-glow, rgba(255, 107, 107, 0.6)),
    0 10px 40px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: rotateY(180deg);
  transition: transform 0.4s ease-in-out;
}

/* Card header */
.trap-reveal-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(255, 100, 100, 0.15) 0%, transparent 100%);
}

.trap-reveal-name {
  font-size: 1.25rem;
  font-weight: bold;
  color: white;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  text-align: center;
}

/* Card image area */
.trap-reveal-image-container {
  flex: 1;
  margin: 0 12px;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(180deg, #3e2a2a 0%, #2e1a1a 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
  min-height: 140px;
  max-height: 180px;
}

.trap-reveal-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trap-reveal-image-placeholder {
  font-size: 5rem;
  opacity: 0.8;
}

/* Effect text area */
.trap-reveal-effect {
  padding: 8px 12px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  line-height: 1.3;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Footer */
.trap-reveal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px 10px;
  border-top: 1px solid rgba(255, 100, 100, 0.2);
}

.trap-reveal-type {
  font-size: 0.7rem;
  font-weight: bold;
  color: #ff6b6b;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(255, 107, 107, 0.6);
}

.trap-reveal-tribe {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 1px;
}

/* "TRAP ACTIVATED!" banner */
.trap-reveal-banner {
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 24px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 50, 50, 0.9) 10%,
    rgba(255, 50, 50, 0.9) 90%,
    transparent
  );
  color: white;
  font-size: 1.1rem;
  font-weight: bold;
  letter-spacing: 3px;
  text-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
  animation: trap-banner-entrance 0.3s ease-out 0.1s both;
  white-space: nowrap;
}

@keyframes trap-banner-entrance {
  0% {
    transform: translateX(-50%) scaleX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(-50%) scaleX(1);
    opacity: 1;
  }
}

.trap-card-reveal.exiting .trap-reveal-banner {
  animation: trap-banner-exit 0.3s ease-in forwards;
}

@keyframes trap-banner-exit {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Shimmer effect on the revealed trap */
.trap-reveal-card-wrapper.flipped .trap-reveal-card-front::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 150, 150, 0.4) 45%,
    rgba(255, 200, 200, 0.6) 50%,
    rgba(255, 150, 150, 0.4) 55%,
    transparent 60%
  );
  animation: trap-reveal-shimmer 0.6s ease-out 0.2s forwards;
  opacity: 0;
  pointer-events: none;
}

@keyframes trap-reveal-shimmer {
  0% {
    transform: translateX(-100%);
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Trap burst effect (after reveal) */
.spell-effect--trap-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    var(--spell-glow, rgba(255, 100, 100, 0.6)) 0%,
    transparent 70%
  );
  border-radius: 50%;
  animation: trap-burst 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes trap-burst {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.8;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0.5;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}