/* ═══════════════════════════════════════════
   HOLY CRUSADES — Medieval Theme
   ═══════════════════════════════════════════ */

/* Medieval fonts: Cinzel (titles), Crimson Text (UI/body) */
/* Loaded via Google Fonts in index.html */

:root {
  --hc-font-title: 'Cinzel', 'Georgia', serif;
  --hc-font-ui: 'Crimson Text', 'Georgia', serif;

  /* Core palette — medieval gold, crimson, sand, steel */
  --hc-cyan: #D4A44A;       /* Gold — replaces cyan as primary accent */
  --hc-magenta: #8B1A1A;    /* Crimson — deep red */
  --hc-gold: #D4A44A;       /* Gold */
  --hc-red: #CC2222;        /* Blood red */
  --hc-green: #2D6B3F;      /* Forest green (Caliphate) */
  --hc-blue: #1A4A8A;       /* Steel blue (Crusader) */

  /* Faction colors */
  --faction-crusader: #C9A84C;  /* Gold cross */
  --faction-caliphate: #2D8B5E; /* Emerald crescent */

  /* Background shades — warm sandstone/parchment (warm medieval palette) */
  --hc-bg: #2C1E10;
  --hc-bg-light: #3D2A16;
  --hc-bg-card: #352414;
  --hc-bg-panel: rgba(44, 30, 16, 0.92);

  /* Text — bright warm ivory */
  --hc-text: #F0E6D0;
  --hc-text-dim: #B8A882;
  --hc-text-bright: #FFFCF0;

  /* Glass — warm gold tint (brighter) */
  --hc-glass-bg: rgba(212, 164, 74, 0.07);
  --hc-glass-border: rgba(212, 164, 74, 0.22);
  --hc-glass-blur: 16px;

  /* Rarity colors — medieval gem tones */
  --rarity-common: #A0937A;     /* Iron/steel */
  --rarity-rare: #4A8BC2;       /* Sapphire blue */
  --rarity-epic: #8B2FC2;       /* Amethyst purple */
  --rarity-legendary: #D4A44A;  /* Gold */

  /* Spacing */
  --hc-radius: 6px;
  --hc-radius-lg: 10px;
  --hc-transition: 0.2s ease;

  /* Safe area */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }

#game-root {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: var(--hc-bg);
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--hc-text);
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

/* ═══ Animated Background ═══ */
.hc-bg-animated {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(212, 164, 74, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 50%, rgba(139, 26, 26, 0.04) 0%, transparent 60%),
    var(--hc-bg);
  animation: hcBgPulse 8s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes hcBgPulse {
  0% { opacity: 0.8; }
  100% { opacity: 1; }
}

/* ═══ Rosewood Carved Frame Border ═══ */
.hc-battle-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border: 10px solid transparent;
  border-image: linear-gradient(
    180deg,
    #5C2E0E 0%,
    #8B4513 8%,
    #A0522D 15%,
    #6B3410 22%,
    #4A2208 30%,
    #7B3B12 38%,
    #A0522D 45%,
    #8B4513 50%,
    #A0522D 55%,
    #7B3B12 62%,
    #4A2208 70%,
    #6B3410 78%,
    #A0522D 85%,
    #8B4513 92%,
    #5C2E0E 100%
  ) 10 stretch;
  box-shadow:
    inset 0 0 0 2px rgba(160, 82, 45, 0.6),
    inset 0 0 0 4px rgba(90, 45, 12, 0.4),
    inset 0 0 12px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(40, 20, 5, 0.8);
}

/* Inner carved detail — ornamental corners */
.hc-battle-frame::before {
  content: '';
  position: absolute;
  inset: -2px;
  border: 3px solid transparent;
  border-image: repeating-linear-gradient(
    90deg,
    rgba(212, 164, 74, 0.3) 0px,
    rgba(139, 69, 19, 0.5) 4px,
    rgba(212, 164, 74, 0.2) 8px,
    rgba(90, 45, 12, 0.4) 12px,
    rgba(212, 164, 74, 0.3) 16px
  ) 3;
}

/* Outer shadow groove for depth */
.hc-battle-frame::after {
  content: '';
  position: absolute;
  inset: -12px;
  border: 2px solid rgba(40, 20, 5, 0.6);
  border-radius: 2px;
  box-shadow:
    inset 0 0 8px rgba(139, 69, 19, 0.3),
    0 0 4px rgba(0, 0, 0, 0.4);
}

/* ═══ Card Art Slideshow Background ═══ */
.hc-card-art-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
  overflow: hidden;
}
.hc-card-art-bg-layer {
  position: absolute;
  top: -5%; left: -5%; right: -5%; bottom: -5%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  transform: scale(1.05);
}
.hc-card-art-bg-layer.active {
  opacity: 1;
}
.hc-card-art-bg-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 18, 0.75) 0%,
    rgba(10, 10, 18, 0.6) 40%,
    rgba(10, 10, 18, 0.75) 100%
  );
  z-index: 1;
}

/* ═══ Campaign Background ═══ */
.hc-campaign-bg {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
  overflow: hidden;
}
.hc-campaign-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ═══ Glass Panel ═══ */
.hc-glass {
  background: var(--hc-glass-bg);
  backdrop-filter: blur(var(--hc-glass-blur));
  -webkit-backdrop-filter: blur(var(--hc-glass-blur));
  border: 1px solid var(--hc-glass-border);
  border-radius: var(--hc-radius-lg);
}

/* ═══ Typography ═══ */
.hc-title {
  font-family: var(--hc-font-title);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--hc-cyan), var(--hc-magenta));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hc-subtitle {
  font-family: var(--hc-font-ui);
  font-size: 13px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--hc-text-dim);
}

/* ═══ Buttons ═══ */
/* ═══ Global Medieval Glass Buttons ═══ */
.hc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(30, 35, 55, 0.85) 0%, rgba(12, 14, 28, 0.95) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--hc-text);
  font-family: var(--hc-font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease, transform 0.15s ease;
  position: relative;
  overflow: hidden;
  /* Semi-3D: top highlight + bottom shadow + outer glow */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(212, 164, 74, 0.06);
  /* Subtle 3D lift */
  transform: perspective(600px) rotateX(1deg);
}

/* Glowing border via pseudo-element */
.hc-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(160, 120, 50, 0.25), rgba(170, 130, 55, 0.1), rgba(100, 15, 15, 0.15));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: opacity 0.3s;
}

/* Glass shimmer sweep — auto-animates */
.hc-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255, 255, 255, 0.08) 40%,
    rgba(212, 164, 74, 0.1) 50%,
    rgba(255, 255, 255, 0.08) 60%,
    transparent 80%
  );
  animation: hcBtnShimmer 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes hcBtnShimmer {
  0%, 100% { left: -120%; }
  50% { left: 120%; }
}

.hc-btn:active::after {
  animation: none;
  left: 120%;
}

.hc-btn:active,
.hc-btn.hc-btn-pressed {
  transform: perspective(600px) rotateX(1deg) scale(0.92);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.4),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 1px 4px rgba(0, 0, 0, 0.5),
    0 0 12px rgba(212, 164, 74, 0.04);
  filter: brightness(1.3);
  transition: all 0.08s ease-out;
}

/* Primary — golden glow + enhanced 3D */
.hc-btn-primary {
  background: linear-gradient(180deg, rgba(44, 30, 16, 0.85) 0%, rgba(25, 15, 8, 0.95) 100%);
  color: var(--hc-cyan);
  box-shadow:
    inset 0 1px 0 rgba(212, 164, 74, 0.15),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    0 0 24px rgba(212, 164, 74, 0.18),
    0 4px 14px rgba(0, 0, 0, 0.4),
    0 0 60px rgba(212, 164, 74, 0.06);
}

.hc-btn-primary::before {
  background: linear-gradient(135deg, rgba(212, 164, 74, 0.6), rgba(180, 140, 60, 0.3), rgba(160, 120, 50, 0.4));
}

.hc-btn-primary:active {
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.5),
    0 0 32px rgba(212, 164, 74, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.5);
  background: linear-gradient(180deg, rgba(50, 30, 18, 0.9) 0%, rgba(30, 20, 10, 0.95) 100%);
}

/* Secondary — crimson glow + enhanced 3D */
.hc-btn-secondary {
  background: linear-gradient(180deg, rgba(45, 12, 12, 0.85) 0%, rgba(25, 5, 5, 0.95) 100%);
  color: var(--hc-magenta);
  box-shadow:
    inset 0 1px 0 rgba(139, 26, 26, 0.12),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(139, 26, 26, 0.12),
    0 4px 14px rgba(0, 0, 0, 0.35),
    0 0 50px rgba(139, 26, 26, 0.04);
}

.hc-btn-secondary::before {
  background: linear-gradient(135deg, rgba(139, 26, 26, 0.45), rgba(120, 20, 20, 0.2), rgba(180, 50, 50, 0.3));
}

.hc-btn-secondary:active {
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.5),
    0 0 28px rgba(139, 26, 26, 0.25),
    0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Danger — red glow */
.hc-btn-danger {
  background: linear-gradient(135deg, rgba(40, 10, 15, 0.8), rgba(25, 5, 10, 0.9));
  color: var(--hc-red);
  box-shadow: 0 0 14px rgba(255, 34, 68, 0.08), 0 2px 12px rgba(0, 0, 0, 0.3), inset 0 0 12px rgba(255, 34, 68, 0.03);
}

.hc-btn-danger::before {
  background: linear-gradient(135deg, rgba(255, 34, 68, 0.35), rgba(200, 0, 40, 0.15), rgba(255, 80, 100, 0.2));
}

/* Gold — amber glow + enhanced 3D */
.hc-btn-gold {
  background: linear-gradient(180deg, rgba(45, 35, 12, 0.85) 0%, rgba(25, 18, 5, 0.95) 100%);
  color: var(--hc-gold);
  box-shadow:
    inset 0 1px 0 rgba(255, 215, 0, 0.15),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    0 0 22px rgba(255, 215, 0, 0.15),
    0 4px 14px rgba(0, 0, 0, 0.35),
    0 0 55px rgba(255, 215, 0, 0.05);
}

.hc-btn-gold::before {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.5), rgba(255, 180, 0, 0.2), rgba(255, 240, 100, 0.3));
}

.hc-btn-gold:active {
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(255, 215, 0, 0.25),
    0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Sizes */
.hc-btn-sm {
  padding: 7px 14px;
  font-size: 11px;
  letter-spacing: 1.5px;
}

.hc-btn-lg {
  padding: 16px 32px;
  font-size: 15px;
  letter-spacing: 4px;
}

/* ═══ CARD COMPONENT — Glass Medieval 3D ═══ */

.hc-card {
  position: relative;
  width: 270px;
  height: 150px;
  border-radius: 12px;
  /* Multi-layer glass background */
  background:
    linear-gradient(165deg, rgba(40, 40, 70, 0.7) 0%, rgba(12, 12, 22, 0.85) 50%, rgba(20, 20, 40, 0.75) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(212, 164, 74, 0.12);
  overflow: hidden;
  cursor: pointer;
  /* 3D depth: perspective lift */
  transform: perspective(800px) rotateX(1deg);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  /* Layered shadow stack: ambient + depth + warm underglow */
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.06) inset,
    0 -1px 0 0 rgba(0, 0, 0, 0.3) inset,
    0 4px 8px rgba(0, 0, 0, 0.3),
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 15px rgba(212, 164, 74, 0.04);
}

/* ── Animated light streak border ── */
.hc-card-border-streak {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
}
/* The streak itself — a bright dot that orbits the card perimeter */
.hc-card-border-streak::before {
  content: '';
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,164,74,0.6) 0%, rgba(212,164,74,0.2) 40%, transparent 70%);
  animation: hcBorderStreak 14s linear infinite;
  /* Start off-screen top-left */
  top: -30px;
  left: -30px;
}

@keyframes hcBorderStreak {
  0%   { top: -30px;  left: -30px;  }
  25%  { top: -30px;  left: calc(100% - 30px); }
  50%  { top: calc(100% - 30px); left: calc(100% - 30px); }
  75%  { top: calc(100% - 30px); left: -30px; }
  100% { top: -30px;  left: -30px;  }
}

/* Rarity-colored streaks */
.hc-card[data-rarity="rare"] .hc-card-border-streak::before {
  background: radial-gradient(circle, rgba(0,204,255,0.65) 0%, rgba(0,204,255,0.2) 40%, transparent 70%);
  animation-duration: 12s;
}
.hc-card[data-rarity="epic"] .hc-card-border-streak::before {
  background: radial-gradient(circle, rgba(204,68,255,0.65) 0%, rgba(204,68,255,0.2) 40%, transparent 70%);
  animation-duration: 10s;
}
.hc-card[data-rarity="legendary"] .hc-card-border-streak::before {
  background: radial-gradient(circle, rgba(255,215,0,0.7) 0%, rgba(255,215,0,0.25) 40%, transparent 70%);
  animation-duration: 8s;
  width: 80px;
  height: 80px;
}
/* Second streak for legendary (offset timing) */
.hc-card[data-rarity="legendary"] .hc-card-border-streak::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,180,0,0.5) 0%, rgba(255,180,0,0.15) 40%, transparent 70%);
  animation: hcBorderStreak 8s linear infinite;
  animation-delay: -4s;
  top: -25px;
  left: -25px;
}

/* Top-edge highlight (simulates light catching the top bevel) */
.hc-card-shine {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(
    175deg,
    rgba(255, 255, 255, 0.09) 0%,
    rgba(255, 255, 255, 0.03) 25%,
    transparent 55%
  );
  pointer-events: none;
  z-index: 5;
}

/* Bottom edge glow line */
.hc-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 164, 74, 0.25), transparent);
  pointer-events: none;
  z-index: 5;
}

/* Left edge accent strip */
.hc-card::before {
  content: '';
  position: absolute;
  top: 10%; bottom: 10%; left: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(212, 164, 74, 0.12), transparent);
  pointer-events: none;
  z-index: 5;
}

.hc-card:active {
  transform: perspective(800px) rotateX(1deg) scale(0.97);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.04) inset,
    0 2px 8px rgba(0, 0, 0, 0.4),
    0 6px 20px rgba(0, 0, 0, 0.5);
}

/* Playable card — pulsing gold border glow */
.hc-card.playable {
  border-color: rgba(212, 164, 74, 0.5);
  animation: hcPlayableGlow 1.8s ease-in-out infinite;
}

@keyframes hcPlayableGlow {
  0%, 100% {
    box-shadow:
      0 1px 0 0 rgba(255,255,255,0.06) inset,
      0 4px 8px rgba(0,0,0,0.3),
      0 12px 40px rgba(0,0,0,0.45),
      0 0 12px rgba(212, 164, 74, 0.25),
      0 0 30px rgba(212, 164, 74, 0.1);
  }
  50% {
    box-shadow:
      0 1px 0 0 rgba(255,255,255,0.08) inset,
      0 4px 8px rgba(0,0,0,0.3),
      0 12px 40px rgba(0,0,0,0.45),
      0 0 20px rgba(212, 164, 74, 0.45),
      0 0 50px rgba(212, 164, 74, 0.2);
  }
}

.hc-card.selected {
  transform: perspective(800px) rotateX(0deg) translateY(-5px);
  border-color: rgba(212, 164, 74, 0.7);
  animation: none;
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.1) inset,
    0 6px 12px rgba(0,0,0,0.3),
    0 16px 48px rgba(0,0,0,0.4),
    0 0 24px rgba(212, 164, 74, 0.5),
    0 0 60px rgba(212, 164, 74, 0.2);
}

.hc-card.targeting {
  animation: hcTargetPulse 0.6s ease-in-out infinite;
}

@keyframes hcTargetPulse {
  0%, 100% { box-shadow: 0 4px 8px rgba(0,0,0,0.3), 0 12px 40px rgba(0,0,0,0.45), 0 0 20px rgba(255,34,68,0.35); }
  50% { box-shadow: 0 4px 8px rgba(0,0,0,0.3), 0 12px 40px rgba(0,0,0,0.45), 0 0 40px rgba(255,34,68,0.6); }
}

/* Can-attack unit — pulsing green border glow */
.hc-card.can-attack {
  border-color: rgba(80, 160, 80, 0.5);
  animation: hcCanAttackGlow 2s ease-in-out infinite;
}

@keyframes hcCanAttackGlow {
  0%, 100% {
    box-shadow:
      0 1px 0 0 rgba(255,255,255,0.06) inset,
      0 4px 8px rgba(0,0,0,0.3),
      0 12px 40px rgba(0,0,0,0.45),
      0 0 12px rgba(80, 160, 80, 0.3),
      0 0 30px rgba(80, 160, 80, 0.1);
  }
  50% {
    box-shadow:
      0 1px 0 0 rgba(255,255,255,0.08) inset,
      0 4px 8px rgba(0,0,0,0.3),
      0 12px 40px rgba(0,0,0,0.45),
      0 0 20px rgba(80, 160, 80, 0.5),
      0 0 50px rgba(80, 160, 80, 0.2);
  }
}

/* ── Rarity depth + glow ── */
.hc-card[data-rarity="common"] {
  /* Subtle steel bevel */
}
.hc-card[data-rarity="rare"] {
  background:
    linear-gradient(165deg, rgba(20, 40, 70, 0.75) 0%, rgba(10, 15, 30, 0.85) 50%, rgba(15, 25, 50, 0.8) 100%);
  box-shadow:
    0 1px 0 0 rgba(100,200,255,0.08) inset,
    0 -1px 0 0 rgba(0,0,0,0.3) inset,
    0 4px 8px rgba(0,0,0,0.3),
    0 12px 40px rgba(0,0,0,0.45),
    0 0 18px rgba(0, 204, 255, 0.12);
}
.hc-card[data-rarity="epic"] {
  background:
    linear-gradient(165deg, rgba(45, 20, 60, 0.75) 0%, rgba(15, 10, 25, 0.85) 50%, rgba(30, 15, 50, 0.8) 100%);
  box-shadow:
    0 1px 0 0 rgba(200,100,255,0.08) inset,
    0 -1px 0 0 rgba(0,0,0,0.3) inset,
    0 4px 8px rgba(0,0,0,0.3),
    0 12px 40px rgba(0,0,0,0.45),
    0 0 22px rgba(204, 68, 255, 0.18);
}
.hc-card[data-rarity="legendary"] {
  background:
    linear-gradient(165deg, rgba(50, 40, 15, 0.75) 0%, rgba(15, 12, 5, 0.85) 50%, rgba(35, 25, 10, 0.8) 100%);
  box-shadow:
    0 1px 0 0 rgba(255,215,100,0.1) inset,
    0 -1px 0 0 rgba(0,0,0,0.3) inset,
    0 4px 8px rgba(0,0,0,0.3),
    0 12px 40px rgba(0,0,0,0.45),
    0 0 28px rgba(255, 215, 0, 0.2),
    inset 0 0 40px rgba(255, 215, 0, 0.03);
  animation: hcLegendaryGlow 2.5s ease-in-out infinite;
}

/* Holographic shimmer overlay for epic+ cards */
.hc-card[data-rarity="epic"] .hc-card-shine,
.hc-card[data-rarity="legendary"] .hc-card-shine {
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.08) 0%,
    rgba(212,164,74,0.04) 20%,
    rgba(139,26,26,0.04) 40%,
    transparent 60%
  );
  animation: hcHoloShimmer 4s ease-in-out infinite;
}

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

@keyframes hcLegendaryGlow {
  0%, 100% {
    box-shadow: 0 1px 0 0 rgba(255,215,100,0.1) inset, 0 4px 8px rgba(0,0,0,0.3), 0 12px 40px rgba(0,0,0,0.45), 0 0 28px rgba(255,215,0,0.2);
  }
  50% {
    box-shadow: 0 1px 0 0 rgba(255,215,100,0.15) inset, 0 4px 8px rgba(0,0,0,0.3), 0 12px 40px rgba(0,0,0,0.45), 0 0 45px rgba(255,215,0,0.4);
  }
}

/* ── Header bar (raised bevel) ── */
.hc-card-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  padding: 5px 8px;
  /* Gradient gives "raised" top feel */
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.04) 0%,
      rgba(0,0,0,0.3) 40%,
      rgba(0,0,0,0.45) 100%
    );
  border-bottom: 1px solid rgba(212, 164, 74, 0.06);
  /* Inner shadow: recessed bottom edge */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  min-height: 26px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

/* Mana cost gem (3D jewel effect) */
.hc-card-cost {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  /* Multi-stop gradient for gem depth */
  background:
    radial-gradient(ellipse at 35% 30%, rgba(120,180,255,0.5) 0%, transparent 60%),
    linear-gradient(145deg, #0055DD 0%, #0033AA 50%, #001166 100%);
  color: white;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* Beveled edge */
  border: 1px solid rgba(80, 150, 255, 0.35);
  border-top-color: rgba(140, 200, 255, 0.5);
  border-bottom-color: rgba(0, 20, 80, 0.6);
  box-shadow:
    0 2px 6px rgba(0, 40, 120, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.hc-card-name {
  font-size: 11px;
  font-weight: 700;
  color: #F0F0FF;
  flex: 1;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-width: 0;
}

.hc-card-tags {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

/* SVG icon base */
.hc-card-svg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hc-card-svg-icon svg {
  width: 1em;
  height: 1em;
  display: block;
}

/* HP badge */
.hc-card-hp {
  font-size: 11px;
  font-weight: 800;
  color: #66DD88;
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(40, 120, 60, 0.2);
  border: 1.5px solid rgba(80, 200, 100, 0.4);
  border-radius: 4px;
  padding: 1px 5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.hc-card-hp .hc-card-hp-icon { font-size: 10px; }
.hc-card-hp.damaged {
  color: #FF6644;
  background: rgba(180, 40, 30, 0.2);
  border-color: rgba(255, 80, 50, 0.4);
}

/* Rarity · Type pill */
.hc-card-pill {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 2px 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--hc-text-dim);
}
.hc-card[data-rarity="rare"] .hc-card-pill {
  color: var(--rarity-rare);
  border-color: rgba(0, 204, 255, 0.2);
  background: rgba(0, 204, 255, 0.06);
}
.hc-card[data-rarity="epic"] .hc-card-pill {
  color: var(--rarity-epic);
  border-color: rgba(204, 68, 255, 0.2);
  background: rgba(204, 68, 255, 0.06);
}
.hc-card[data-rarity="legendary"] .hc-card-pill {
  color: var(--rarity-legendary);
  border-color: rgba(255, 215, 0, 0.25);
  background: rgba(255, 215, 0, 0.08);
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.3);
}

/* ── Body: art (2/3) + attacks (1/3) ── */
.hc-card-body {
  display: flex;
  flex: 1;
  min-height: 0;
  position: relative;
}

/* Art area (recessed into card) */
.hc-card-art {
  width: 66%;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  /* Inset shadow gives "sunken" 3D feel */
  box-shadow:
    inset 2px 2px 6px rgba(0, 0, 0, 0.5),
    inset -1px -1px 4px rgba(0, 0, 0, 0.2),
    inset 0 0 20px rgba(0, 0, 0, 0.15);
}
.hc-card-art-img {
  width: 100%;
  height: 100%;
  /* Cover the slot — anchor to upper portion so faces/heads are visible */
  object-fit: cover;
  object-position: center 15%;
  display: block;
}
/* Tactics/traps are effects not characters — center them */
.hc-card[data-type="tactic"] .hc-card-art-img,
.hc-card[data-type="trap"] .hc-card-art-img {
  object-position: center 30%;
}

/* Art vignette overlay — darkens edges + simulates depth */
.hc-card-art-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 55%, rgba(10, 10, 18, 0.7) 100%),
    linear-gradient(180deg, rgba(10, 10, 18, 0.15) 0%, transparent 20%, transparent 70%, rgba(10, 10, 18, 0.4) 100%),
    radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.2) 100%);
  pointer-events: none;
}

/* Subtype badge on art */
.hc-card-subtype {
  position: absolute;
  bottom: 4px;
  left: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 3px 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--hc-text-dim);
  z-index: 2;
}
.hc-card-subtype[data-subtype="infantry"] { color: var(--hc-cyan); border-color: rgba(212,164,74,0.3); }
.hc-card-subtype[data-subtype="cavalry"] { color: var(--hc-green); border-color: rgba(80,160,80,0.2); }
.hc-card-subtype[data-subtype="siege"] { color: #FF8800; border-color: rgba(255,136,0,0.2); }
.hc-card-subtype[data-subtype="faith"] { color: var(--hc-magenta); border-color: rgba(139,26,26,0.3); }

/* Shield indicator */
.hc-card-shield {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,164,74,0.35) 0%, transparent 70%);
  border: 2px solid var(--hc-cyan);
  box-shadow: 0 0 12px rgba(212, 164, 74, 0.3);
  animation: hcShieldPulse 1.5s ease-in-out infinite;
  z-index: 3;
}

@keyframes hcShieldPulse {
  0%, 100% { opacity: 0.6; box-shadow: 0 0 12px rgba(212,164,74,0.3); }
  50% { opacity: 1; box-shadow: 0 0 20px rgba(212,164,74,0.5); }
}

/* ── Attacks panel (raised glass slab) ── */
.hc-card-attacks {
  width: 34%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 7px;
  /* Multi-layer glass: frosted + gradient depth */
  background:
    linear-gradient(180deg,
      rgba(30, 30, 50, 0.5) 0%,
      rgba(15, 15, 30, 0.7) 50%,
      rgba(20, 20, 40, 0.6) 100%
    );
  /* Left edge: bright divider line (raised edge illusion) */
  border-left: 1px solid rgba(212, 164, 74, 0.1);
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  gap: 3px;
  overflow: hidden;
  position: relative;
}

/* Scan-line texture (CRT/hologram feel) */
.hc-card-attacks::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(212, 164, 74, 0.02) 2px,
    rgba(212, 164, 74, 0.02) 4px
  );
  pointer-events: none;
}

/* Diagonal light streak across attacks panel */
.hc-card-attacks::after {
  content: '';
  position: absolute;
  top: -20%; left: -20%;
  width: 50%;
  height: 140%;
  background: linear-gradient(
    125deg,
    transparent 30%,
    rgba(255, 255, 255, 0.02) 45%,
    rgba(255, 255, 255, 0.04) 50%,
    rgba(255, 255, 255, 0.02) 55%,
    transparent 70%
  );
  pointer-events: none;
  transform: skewX(-15deg);
}

.hc-card-atk-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  z-index: 1;
}

.hc-card-atk-single {
  justify-content: center;
  flex: 1;
}

.hc-card-atk-divider {
  height: 1px;
  margin: 3px 0;
  /* Engraved line: dark top, light bottom */
  background: linear-gradient(90deg, transparent, rgba(212,164,74,0.12), transparent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
}

.hc-card-atk-header {
  display: flex;
  align-items: center;
  gap: 3px;
}

.hc-card-atk-icon {
  font-size: 13px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px currentColor);
}
.hc-card-atk-icon.basic {
  color: var(--hc-red);
}
.hc-card-atk-icon.special {
  color: var(--hc-cyan);
}
.hc-card-atk-icon.trap {
  color: #FF8800;
}
.hc-card-pill-star {
  font-size: 11px;
  color: var(--rarity-legendary);
  filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.5));
}

.hc-card-atk-name {
  font-size: 11px;
  font-weight: 700;
  color: #E8E8F0;
  flex: 1;
  letter-spacing: 0.3px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-width: 0;
}

.hc-card-atk-dmg {
  font-size: 12px;
  font-weight: 800;
  color: #FF6644;
  flex-shrink: 0;
  min-width: 20px;
  text-align: center;
  background: rgba(180, 40, 30, 0.2);
  border: 1.5px solid rgba(255, 80, 50, 0.5);
  border-radius: 4px;
  padding: 1px 4px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.hc-card-atk-dmg.buffed {
  color: #66DD88;
  background: rgba(40, 140, 60, 0.2);
  border-color: rgba(80, 200, 100, 0.5);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.hc-card-atk-desc {
  font-size: 9px;
  line-height: 1.35;
  color: var(--hc-text-dim);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.hc-card-atk-trigger {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--hc-cyan);
  opacity: 0.6;
  margin-top: 1px;
}

.hc-card-atk-empty {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.1);
  text-align: center;
  padding: 6px 0;
}

/* ── Flavor text bar (engraved/recessed strip) ── */
.hc-card-flavor {
  padding: 5px 8px;
  font-size: 9px;
  font-style: italic;
  color: rgba(136, 136, 170, 0.75);
  text-align: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(5,5,15,0.55) 100%);
  /* Engraved: dark top edge, light bottom edge */
  border-top: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.3),
    0 1px 0 rgba(255, 255, 255, 0.02);
  flex-shrink: 0;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ═══ Card - Large Preview ═══ */
.hc-card-lg {
  width: 380px;
  height: 210px;
  border-radius: 14px;
}
.hc-card-lg .hc-card-header { padding: 7px 12px; min-height: 32px; gap: 8px; }
.hc-card-lg .hc-card-cost { width: 28px; height: 28px; font-size: 15px; border-radius: 8px; }
.hc-card-lg .hc-card-name { font-size: 15px; }
.hc-card-lg .hc-card-hp { font-size: 14px; }
.hc-card-lg .hc-card-hp-icon { font-size: 11px; }
.hc-card-lg .hc-card-pill { font-size: 11px; padding: 3px 10px; }
.hc-card-lg .hc-card-subtype { font-size: 10px; padding: 3px 8px; }
.hc-card-lg .hc-card-atk-icon { font-size: 16px; }
.hc-card-lg .hc-card-atk-name { font-size: 13px; }
.hc-card-lg .hc-card-atk-dmg { font-size: 18px; }
.hc-card-lg .hc-card-atk-desc { font-size: 11px; }
.hc-card-lg .hc-card-atk-trigger { font-size: 9px; }
.hc-card-lg .hc-card-flavor { font-size: 11px; padding: 6px 12px; }
.hc-card-lg .hc-card-attacks { padding: 8px 10px; gap: 5px; }
.hc-card-lg .hc-card-shield { width: 24px; height: 24px; }

/* ═══ Card - Mini (board) ═══ */
.hc-card-mini {
  width: 86px;
  height: 52px;
  border-radius: 5px;
}
.hc-card-mini .hc-card-shine { display: none; }
.hc-card-mini::after { display: none; }
.hc-card-mini .hc-card-header { padding: 1px 3px; min-height: 14px; gap: 2px; }
.hc-card-mini .hc-card-cost { width: 13px; height: 13px; font-size: 8px; border-radius: 3px; }
.hc-card-mini .hc-card-name { font-size: 5px; }
.hc-card-mini .hc-card-tags { display: none; }
.hc-card-mini .hc-card-attacks { display: none; }
.hc-card-mini .hc-card-flavor { display: none; }
.hc-card-mini .hc-card-art { width: 100%; }
.hc-card-mini .hc-card-art-overlay { display: none; }
.hc-card-mini .hc-card-subtype { display: none; }
.hc-card-mini .hc-card-body { flex: 1; }

/* ═══ Card - Board (large readable board cards, 2 per side) ═══ */
.hc-card-board {
  width: 150px;
  height: 92px;
  border-radius: 8px;
  overflow: visible;
}
.hc-card-board .hc-card-shine { display: none; }
.hc-card-board::after { display: none; }
/* Keep border streak visible on board cards — brighter + faster orbit */
.hc-card-board .hc-card-border-streak::before {
  width: 40px;
  height: 40px;
  top: -20px;
  left: -20px;
  animation-duration: 8s;
}
.hc-card-board[data-rarity="rare"] .hc-card-border-streak::before { animation-duration: 7s; }
.hc-card-board[data-rarity="epic"] .hc-card-border-streak::before { animation-duration: 6s; }
.hc-card-board[data-rarity="legendary"] .hc-card-border-streak::before { width: 50px; height: 50px; top: -25px; left: -25px; animation-duration: 5s; }
.hc-card-board[data-rarity="legendary"] .hc-card-border-streak::after { animation-duration: 5s; animation-delay: -2.5s; }
.hc-card-board .hc-card-header { padding: 3px 6px; min-height: 24px; gap: 4px; }
.hc-card-board .hc-card-cost { width: 22px; height: 22px; font-family: var(--hc-font-ui); font-size: 12px; border-radius: 4px; }
.hc-card-board .hc-card-name { font-family: var(--hc-font-ui); font-size: 11px; letter-spacing: 0.5px; }
.hc-card-board .hc-card-tags { display: flex; }
.hc-card-board .hc-card-hp { font-size: 14px; font-weight: 800; }
.hc-card-board .hc-card-hp .hc-card-hp-icon { font-size: 12px; }
.hc-card-board .hc-card-pill { display: none; }
.hc-card-board .hc-card-attacks { display: none; }
.hc-card-board .hc-card-flavor { display: none; }
.hc-card-board .hc-card-art { width: 100%; }
.hc-card-board .hc-card-art-overlay { display: none; }
.hc-card-board .hc-card-subtype { display: none; }
.hc-card-board .hc-card-body { flex: 1; }
/* Attack value overlay badge */
.hc-card-board .hc-card-body::after {
  content: attr(data-atk);
  position: absolute;
  bottom: 2px;
  left: 5px;
  font-size: 16px;
  font-weight: 800;
  color: var(--hc-red);
  text-shadow: 0 0 6px rgba(255, 34, 68, 0.5), 0 1px 2px rgba(0,0,0,0.9);
  z-index: 3;
  pointer-events: none;
}
/* Buff badges on board cards */
.hc-card-buff-row {
  position: absolute;
  bottom: 2px;
  right: 4px;
  display: flex;
  gap: 2px;
  z-index: 4;
}
.hc-card-buff-badge {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  background: rgba(212, 164, 74, 0.2);
  border: 1px solid rgba(212, 164, 74, 0.4);
  font-size: 9px;
  font-weight: 700;
  color: var(--hc-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 0 4px rgba(212, 164, 74, 0.5);
}
/* Targeting highlight on board cards */
.hc-card-board.buff-target {
  box-shadow: 0 0 12px rgba(212, 164, 74, 0.6), 0 0 24px rgba(212, 164, 74, 0.3);
  border-color: var(--hc-cyan) !important;
  animation: hcTargetPulse 1s ease-in-out infinite;
}
@keyframes hcTargetPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(212, 164, 74, 0.6), 0 0 24px rgba(212, 164, 74, 0.3); }
  50% { box-shadow: 0 0 18px rgba(212, 164, 74, 0.8), 0 0 32px rgba(212, 164, 74, 0.4); }
}

/* Enemy targeting highlight on opponent board cards */
.hc-card-board.enemy-target {
  box-shadow: 0 0 12px rgba(255, 50, 50, 0.6), 0 0 24px rgba(255, 50, 50, 0.3);
  border-color: var(--hc-red, #ff3333) !important;
  animation: hcEnemyTargetPulse 1s ease-in-out infinite;
  cursor: crosshair;
}
@keyframes hcEnemyTargetPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255, 50, 50, 0.6), 0 0 24px rgba(255, 50, 50, 0.3); }
  50% { box-shadow: 0 0 18px rgba(255, 50, 50, 0.8), 0 0 32px rgba(255, 50, 50, 0.4); }
}
.hc-targeting-banner.hc-targeting-enemy {
  color: #ff3333;
  border-color: rgba(255, 50, 50, 0.3);
  text-shadow: 0 0 8px rgba(255, 50, 50, 0.5);
}

/* ═══ Action Panel (DEPLOY / SWAP / CANCEL) ═══ */
.hc-action-panel {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  background: linear-gradient(180deg, rgba(44, 30, 16, 0.9), rgba(30, 20, 10, 0.92));
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-top: 2px solid rgba(201, 168, 76, 0.3);
  border-radius: 0;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(201, 168, 76, 0.08);
  flex-shrink: 0;
  animation: hcSlideUp 0.15s ease-out;
}
@keyframes hcSlideUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.hc-action-btn {
  position: relative;
  font-family: var(--hc-font-title);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 9px 16px;
  border: none;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(60, 42, 22, 0.85), rgba(40, 28, 14, 0.95));
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.hc-action-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(160, 120, 50, 0.25), rgba(170, 130, 55, 0.1));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.hc-action-btn:active,
.hc-action-btn.hc-btn-pressed { transform: scale(0.9); filter: brightness(1.3); }
.hc-action-play {
  color: var(--hc-cyan);
  background: linear-gradient(135deg, rgba(0, 40, 50, 0.85), rgba(25, 15, 8, 0.95));
  text-shadow: 0 0 8px rgba(212, 164, 74, 0.4);
  box-shadow: 0 0 12px rgba(212, 164, 74, 0.1), 0 2px 8px rgba(0, 0, 0, 0.3);
}
.hc-action-play::before {
  background: linear-gradient(135deg, rgba(212, 164, 74, 0.45), rgba(180, 140, 60, 0.2));
}
.hc-action-play:active { background: linear-gradient(135deg, rgba(44, 30, 16, 0.9), rgba(30, 20, 10, 0.95)); box-shadow: 0 0 20px rgba(212, 164, 74, 0.2); }
.hc-action-play.disabled {
  color: var(--hc-text-dim);
  text-shadow: none;
  opacity: 0.4;
  background: rgba(20, 20, 35, 0.6);
  box-shadow: none;
}
.hc-action-play.disabled::before { opacity: 0.2; }
.hc-action-burn {
  color: #ff6a00;
  background: linear-gradient(135deg, rgba(40, 18, 5, 0.85), rgba(25, 10, 2, 0.95));
  text-shadow: 0 0 8px rgba(255, 106, 0, 0.4);
  box-shadow: 0 0 12px rgba(255, 106, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.3);
}
.hc-action-burn::before {
  background: linear-gradient(135deg, rgba(255, 106, 0, 0.4), rgba(255, 60, 0, 0.15));
}
.hc-action-burn:active { background: linear-gradient(135deg, rgba(50, 22, 6, 0.9), rgba(35, 14, 3, 0.95)); box-shadow: 0 0 20px rgba(255, 106, 0, 0.15); }
.hc-action-burn.disabled { opacity: 0.4; pointer-events: none; }
.hc-action-swap {
  color: var(--hc-gold);
  background: linear-gradient(135deg, rgba(40, 30, 10, 0.85), rgba(25, 18, 5, 0.95));
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.3);
}
.hc-action-swap::before {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.4), rgba(255, 180, 0, 0.15));
}
.hc-action-swap:active { background: linear-gradient(135deg, rgba(50, 38, 12, 0.9), rgba(35, 25, 8, 0.95)); box-shadow: 0 0 20px rgba(255, 215, 0, 0.15); }
.hc-action-pin {
  color: var(--hc-green);
  background: linear-gradient(135deg, rgba(10, 30, 25, 0.85), rgba(5, 18, 15, 0.95));
  text-shadow: 0 0 8px rgba(80, 160, 80, 0.4);
  box-shadow: 0 0 12px rgba(80, 160, 80, 0.08), 0 2px 8px rgba(0, 0, 0, 0.3);
}
.hc-action-pin::before {
  background: linear-gradient(135deg, rgba(80, 160, 80, 0.4), rgba(60, 120, 60, 0.15));
}
.hc-action-pin:active { background: linear-gradient(135deg, rgba(28, 38, 20, 0.9), rgba(18, 22, 12, 0.95)); box-shadow: 0 0 20px rgba(80, 160, 80, 0.15); }
.hc-action-cancel {
  color: var(--hc-text-dim);
  background: linear-gradient(135deg, rgba(25, 25, 35, 0.7), rgba(15, 15, 22, 0.85));
}
.hc-action-cancel::before {
  background: linear-gradient(135deg, rgba(136, 136, 170, 0.2), rgba(100, 100, 130, 0.1));
}
.hc-action-cancel:active { background: rgba(136, 136, 170, 0.1); }

/* ═══ Pinned Card Fan ═══ */
/* ── Unit wrapper (card + pinned indicators) ── */
.hc-board-unit-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Pinned card row below unit */
.hc-pinned-row {
  display: flex;
  justify-content: center;
  gap: 3px;
  margin-top: -2px;
}
.hc-pinned-card {
  padding: 2px 6px;
  background: rgba(10, 10, 18, 0.92);
  border: 1px solid var(--hc-green);
  border-top: none;
  border-radius: 0 0 5px 5px;
  font-family: var(--hc-font-ui);
  font-size: 7px;
  font-weight: 700;
  color: var(--hc-green);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 3px 8px rgba(80, 160, 80, 0.25), inset 0 1px 0 rgba(80, 160, 80, 0.1);
  animation: hcPinGlow 2s ease-in-out infinite alternate;
}
@keyframes hcPinGlow {
  0% { box-shadow: 0 3px 8px rgba(80, 160, 80, 0.2); }
  100% { box-shadow: 0 3px 12px rgba(80, 160, 80, 0.45), 0 0 4px rgba(80, 160, 80, 0.15); }
}
.hc-pinned-card[data-pin-type="shield"] {
  border-color: var(--hc-blue);
  color: var(--hc-blue);
  box-shadow: 0 3px 8px rgba(0, 102, 255, 0.25), inset 0 1px 0 rgba(0, 102, 255, 0.1);
  animation: hcPinGlowShield 2s ease-in-out infinite alternate;
}
@keyframes hcPinGlowShield {
  0% { box-shadow: 0 3px 8px rgba(0, 102, 255, 0.2); }
  100% { box-shadow: 0 3px 12px rgba(0, 102, 255, 0.45), 0 0 4px rgba(0, 102, 255, 0.15); }
}

/* ═══ START SCREEN (game card + START button) ═══ */
.hc-start-screen {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding-top: var(--sat);
  padding-bottom: var(--sab);
  background:
    radial-gradient(ellipse at 50% 30%, rgba(120, 80, 20, 0.35) 0%, transparent 55%),
    radial-gradient(ellipse at 30% 60%, rgba(139, 26, 26, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 70%, rgba(80, 50, 15, 0.15) 0%, transparent 50%),
    linear-gradient(180deg, #1A120A 0%, #2C1E10 40%, #1A120A 100%);
  z-index: 10;
}

.hc-start-card-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hc-start-card-img {
  width: 260px;
  max-width: 70vw;
  border-radius: 16px;
  box-shadow:
    0 0 40px rgba(212, 164, 74, 0.2),
    0 0 80px rgba(180, 120, 40, 0.12),
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 0 120px rgba(212, 164, 74, 0.08);
  position: relative;
  z-index: 2;
  animation: hcStartCardFloat 3s ease-in-out infinite;
}

.hc-start-card-glow {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 164, 74, 0.18) 0%, rgba(180, 120, 40, 0.08) 40%, transparent 70%);
  animation: hcStartGlowPulse 2.5s ease-in-out infinite;
  z-index: 1;
}

@keyframes hcStartCardFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.02); }
}

@keyframes hcStartGlowPulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.15); opacity: 1; }
}

.hc-start-title {
  font-family: var(--hc-font-title);
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 4px;
  background: linear-gradient(135deg, #D4A44A 0%, #8B1A1A 50%, #D4A44A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 12px rgba(212, 164, 74, 0.5)) drop-shadow(0 0 40px rgba(139, 26, 26, 0.2));
  text-align: center;
}

.hc-start-btn {
  background: linear-gradient(180deg, rgba(44, 30, 16, 0.85) 0%, rgba(30, 20, 10, 0.95) 100%) !important;
  color: var(--hc-cyan) !important;
  animation: hcStartBtnPulse 2s ease-in-out infinite;
}
.hc-start-btn::before {
  background: linear-gradient(135deg, rgba(212, 164, 74, 0.5), rgba(180, 120, 40, 0.25), rgba(139, 26, 26, 0.35)) !important;
}

@keyframes hcStartBtnPulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(212,164,74,0.2), 0 0 24px rgba(212,164,74,0.2), 0 4px 14px rgba(0,0,0,0.4); }
  50% { box-shadow: inset 0 1px 0 rgba(212,164,74,0.35), 0 0 44px rgba(212,164,74,0.4), 0 4px 20px rgba(0,0,0,0.5); }
}

/* ═══ TITLE SCREEN — Poster Background ═══ */
.hc-title-poster-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  z-index: 0;
  filter: brightness(0.35) saturate(0.8);
}

.hc-title-poster-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(26, 18, 10, 0.1) 0%,
    rgba(26, 18, 10, 0.3) 30%,
    rgba(26, 18, 10, 0.7) 55%,
    rgba(26, 18, 10, 0.92) 75%,
    rgba(26, 18, 10, 0.98) 100%
  );
  z-index: 0;
}

.hc-title-poster-img {
  width: 160px;
  max-width: 45vw;
  border-radius: 12px;
  box-shadow:
    0 0 30px rgba(212, 164, 74, 0.25),
    0 0 60px rgba(139, 26, 26, 0.12),
    0 12px 40px rgba(0, 0, 0, 0.7);
  animation: hcStartCardFloat 4s ease-in-out infinite;
  margin-bottom: 8px;
}

/* ═══ TITLE SCREEN ═══ */
.hc-title-screen {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: calc(var(--sat) + 12px);
  padding-bottom: calc(var(--sab) + 20px);
  z-index: 1;
}

.hc-title-logo {
  margin-bottom: 12px;
  text-align: center;
  padding: 12px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.hc-title-logo .hc-title {
  font-size: 30px;
  line-height: 1.1;
}

.hc-title-logo .hc-subtitle {
  margin-top: 8px;
}

.hc-title-menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 280px;
  padding: 24px 20px;
}

/* All menu buttons — transparent glass with subtle backdrop blur */
.hc-title-menu .hc-btn {
  background: rgba(10, 14, 28, 0.25) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.hc-title-menu .hc-btn-primary {
  background: rgba(30, 20, 10, 0.3) !important;
  border-color: rgba(212, 164, 74, 0.12) !important;
  box-shadow: 0 0 16px rgba(212, 164, 74, 0.08), 0 2px 10px rgba(0, 0, 0, 0.2);
}

.hc-title-menu .hc-btn-secondary {
  background: rgba(30, 8, 35, 0.25) !important;
  border-color: rgba(139, 26, 26, 0.1) !important;
  box-shadow: 0 0 12px rgba(139, 26, 26, 0.06), 0 2px 10px rgba(0, 0, 0, 0.2);
}

.hc-title-menu .hc-btn-gold {
  background: rgba(35, 28, 8, 0.25) !important;
  border-color: rgba(255, 215, 0, 0.1) !important;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.06), 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Title menu: DECK BUILDER / SCORES / PVP (no extra class) gets green-teal glow */
.hc-title-menu .hc-btn:not(.hc-btn-primary):not(.hc-btn-secondary):not(.hc-btn-gold):not(.hc-btn-exit) {
  background: rgba(6, 20, 16, 0.25) !important;
  color: var(--hc-green);
  border-color: rgba(80, 160, 80, 0.08) !important;
  box-shadow: 0 0 10px rgba(80, 160, 80, 0.04), 0 2px 10px rgba(0, 0, 0, 0.15);
}

.hc-title-menu .hc-btn:not(.hc-btn-primary):not(.hc-btn-secondary):not(.hc-btn-gold):not(.hc-btn-exit)::before {
  background: linear-gradient(135deg, rgba(80, 160, 80, 0.15), rgba(60, 120, 60, 0.06), rgba(80, 160, 80, 0.1));
}

.hc-title-menu .hc-btn:not(.hc-btn-primary):not(.hc-btn-secondary):not(.hc-btn-gold):not(.hc-btn-exit):active {
  box-shadow: 0 0 16px rgba(80, 160, 80, 0.1), 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Menu button active state */
.hc-title-menu .hc-btn:active {
  background: rgba(20, 25, 45, 0.35) !important;
}

.hc-title-menu .hc-btn-exit {
  background: rgba(30, 8, 8, 0.25) !important;
  color: #FF4466;
  border-color: rgba(255, 34, 68, 0.1) !important;
  box-shadow: 0 0 10px rgba(255, 34, 68, 0.04), 0 2px 10px rgba(0, 0, 0, 0.15);
  font-size: 11px;
  margin-top: 4px;
}

.hc-title-version {
  position: absolute;
  bottom: 20px;
  font-size: 10px;
  color: var(--hc-text-dim);
  letter-spacing: 2px;
}

/* Parchment grain texture overlay */
.hc-scanlines {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse at 25% 25%, rgba(212, 164, 74, 0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 75%, rgba(139, 26, 26, 0.02) 0%, transparent 50%);
  pointer-events: none;
  z-index: 999;
}

/* ═══ COLLECTION SCREEN ═══ */
.hc-collection-screen {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  z-index: 1;
  padding-top: var(--sat);
  padding-bottom: var(--sab);
}

.hc-collection-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hc-glass-border);
  background: rgba(10, 10, 18, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hc-collection-header h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--hc-cyan);
}

.hc-collection-filters {
  display: flex;
  gap: 6px;
  padding: 10px 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(10, 10, 18, 0.5);
}

.hc-filter-btn {
  padding: 6px 12px;
  border-radius: 16px;
  border: 1px solid var(--hc-glass-border);
  background: var(--hc-glass-bg);
  color: var(--hc-text-dim);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--hc-transition);
}

.hc-filter-btn.active {
  border-color: var(--hc-cyan);
  color: var(--hc-cyan);
  background: rgba(212, 164, 74, 0.08);
}

.hc-collection-grid {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-content: flex-start;
}

.hc-collection-count {
  font-size: 11px;
  color: var(--hc-text-dim);
}

/* ═══ Card Preview Modal ═══ */
.hc-card-preview-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  gap: 12px;
}

.hc-preview-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.hc-preview-flavor {
  max-width: 280px;
  text-align: center;
  font-size: 12px;
  font-style: italic;
  color: var(--hc-text-dim);
  line-height: 1.5;
}

.hc-preview-hint {
  font-size: 10px;
  color: rgba(212, 164, 74, 0.4);
  letter-spacing: 0.5px;
}

/* ── Fullscreen Art Viewer (pinch-zoom + pan) ── */
.hc-art-fullscreen {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  animation: hcArtFadeIn 0.25s ease;
  overflow: hidden;
  touch-action: none;
}

@keyframes hcArtFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hc-art-fullscreen-container {
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  transition: none;
  cursor: zoom-in;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.hc-art-fullscreen-img {
  width: 92vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow:
    0 0 60px rgba(212, 164, 74, 0.08),
    0 20px 60px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.hc-art-fullscreen-placeholder {
  width: 80vw;
  height: 80vw;
  max-width: 500px;
  max-height: 500px;
  border-radius: 8px;
  pointer-events: none;
}

.hc-art-fullscreen-name {
  position: absolute;
  bottom: max(20px, var(--sab, 20px));
  left: 0; right: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 1px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.hc-art-fullscreen-close {
  position: absolute;
  top: max(16px, var(--sat, 16px));
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.85);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hc-art-zoom-hint {
  position: absolute;
  bottom: max(52px, calc(var(--sab, 20px) + 34px));
  left: 0; right: 0;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(212, 164, 74, 0.4);
  pointer-events: none;
  transition: opacity 0.5s ease;
}

/* ═══ MATCH SETUP SCREEN ═══ */
.hc-match-setup {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  z-index: 1;
  padding-top: var(--sat);
  padding-bottom: var(--sab);
}

.hc-match-setup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(212, 164, 74, 0.08);
  background: linear-gradient(145deg, rgba(30, 20, 12, 0.85), rgba(24, 16, 8, 0.75));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ═══ Chapter Chips ═══ */
.hc-chapter-chip-row {
  display: flex;
  gap: 8px;
  padding: 10px 16px 6px;
  justify-content: center;
}

.hc-chapter-chip {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  border: 2px solid rgba(212, 164, 74, 0.2);
  background: rgba(30, 20, 12, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.hc-chapter-chip:active {
  transform: scale(0.93);
}

.hc-chapter-chip-num {
  font-family: var(--hc-font-ui);
  font-size: 16px;
  font-weight: 700;
  color: rgba(212, 164, 74, 0.6);
}

.hc-chapter-chip-lock {
  font-size: 10px;
  line-height: 1;
  margin-bottom: 1px;
}

.hc-chapter-chip-active {
  border-color: var(--hc-cyan);
  box-shadow: 0 0 12px rgba(212, 164, 74, 0.3), inset 0 0 8px rgba(212, 164, 74, 0.08);
}

.hc-chapter-chip-active .hc-chapter-chip-num {
  color: var(--hc-cyan);
  text-shadow: 0 0 6px rgba(212, 164, 74, 0.5);
}

.hc-chapter-chip-complete .hc-chapter-chip-num {
  color: var(--hc-green);
}

.hc-chapter-chip-complete:not(.hc-chapter-chip-active) {
  border-color: rgba(80, 160, 80, 0.3);
}

.hc-chapter-chip-dot {
  position: absolute;
  bottom: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hc-green);
  box-shadow: 0 0 4px rgba(80, 160, 80, 0.6);
}

.hc-chapter-chip-locked {
  opacity: 0.3;
  pointer-events: none;
}

.hc-chapter-chip-locked .hc-chapter-chip-num {
  color: rgba(255, 255, 255, 0.3);
}

.hc-chapter-subtitle {
  text-align: center;
  font-size: 12px;
  letter-spacing: 1.2px;
  color: var(--hc-gold);
  padding: 4px 16px 2px;
  font-family: var(--hc-font-title);
  font-weight: 700;
}

.hc-chapter-details {
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: 10px;
  color: var(--hc-text-dim);
  padding: 0 16px 6px;
  letter-spacing: 0.5px;
}

.hc-chapter-details span {
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.hc-opponent-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hc-opponent-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, rgba(28, 18, 10, 0.8), rgba(30, 20, 12, 0.9));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: all 0.25s ease;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Glowing border for opponent cards */
.hc-opponent-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(212, 164, 74, 0.2), rgba(170, 130, 55, 0.08), rgba(100, 15, 15, 0.12));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: opacity 0.25s;
}

.hc-opponent-card:active {
  transform: scale(0.98);
  box-shadow: 0 0 18px rgba(212, 164, 74, 0.15), 0 4px 16px rgba(0, 0, 0, 0.4);
}

.hc-opponent-card:active::before {
  background: linear-gradient(135deg, rgba(212, 164, 74, 0.5), rgba(180, 140, 60, 0.3), rgba(120, 20, 20, 0.25));
}

.hc-opponent-card.locked {
  opacity: 0.35;
  pointer-events: none;
}
.hc-opponent-card.locked::before { opacity: 0.15; }

.hc-opponent-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--hc-text-bright);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  font-size: 18px;
  font-weight: 700;
  font-family: var(--hc-font-title);
  border: 2px solid rgba(255, 255, 255, 0.15);
}
.hc-opponent-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.hc-opponent-avatar svg {
  width: 28px;
  height: 28px;
}

.hc-opponent-info {
  flex: 1;
}

.hc-opponent-name {
  font-family: var(--hc-font-ui);
  font-size: 14px;
  font-weight: 700;
  color: var(--hc-text-bright);
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 1px;
}
.hc-defeated-icon {
  display: inline-flex;
  color: var(--hc-green);
  filter: drop-shadow(0 0 4px rgba(80, 160, 80, 0.4));
}

.hc-opponent-desc {
  font-size: 11px;
  color: var(--hc-text-dim);
  margin-top: 3px;
  line-height: 1.3;
}

.hc-opponent-difficulty {
  font-family: var(--hc-font-ui);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 700;
  border: 1px solid;
}

.hc-difficulty-easy { background: rgba(80, 160, 80, 0.08); color: var(--hc-green); border-color: rgba(80, 160, 80, 0.25); box-shadow: 0 0 8px rgba(80, 160, 80, 0.08); }
.hc-difficulty-normal { background: rgba(212, 164, 74, 0.08); color: var(--hc-cyan); border-color: rgba(212, 164, 74, 0.25); box-shadow: 0 0 8px rgba(212, 164, 74, 0.08); }
.hc-difficulty-hard { background: rgba(139, 26, 26, 0.08); color: var(--hc-magenta); border-color: rgba(139, 26, 26, 0.25); box-shadow: 0 0 8px rgba(139, 26, 26, 0.08); }
.hc-difficulty-expert { background: rgba(255, 34, 68, 0.08); color: var(--hc-red); border-color: rgba(255, 34, 68, 0.25); box-shadow: 0 0 8px rgba(255, 34, 68, 0.08); }

/* Badge row (difficulty + deck size side by side) */
.hc-opponent-badge-row {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

/* Deck size badge */
.hc-deck-size-badge {
  font-family: var(--hc-font-ui);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid;
  white-space: nowrap;
}
.hc-deck-size-green { background: rgba(80, 160, 80, 0.08); color: var(--hc-green); border-color: rgba(80, 160, 80, 0.25); }
.hc-deck-size-yellow { background: rgba(255, 215, 0, 0.08); color: var(--hc-gold); border-color: rgba(255, 215, 0, 0.25); }
.hc-deck-size-red { background: rgba(255, 34, 68, 0.08); color: var(--hc-red); border-color: rgba(255, 34, 68, 0.25); }

/* ═══ BATTLE SCREEN ═══ */
.hc-battle-screen {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  z-index: 1;
  padding-top: var(--sat);
  padding-bottom: var(--sab);
  overflow: hidden;
}

.hc-battle-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: var(--hc-bg-panel);
  border-bottom: 1px solid var(--hc-glass-border);
  flex-shrink: 0;
}

.hc-hud-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(80, 160, 80, 0.2);
  background: rgba(0, 0, 0, 0.3);
  color: var(--hc-text-dim);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.2s, border-color 0.2s;
}
.hc-hud-back-btn:active {
  color: var(--hc-cyan);
  border-color: var(--hc-cyan);
}

.hc-hud-vol-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(80, 160, 80, 0.2);
  background: rgba(0, 0, 0, 0.3);
  color: var(--hc-text-dim);
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 4px;
  transition: color 0.2s, border-color 0.2s;
}
.hc-hud-vol-btn:active {
  color: var(--hc-cyan);
  border-color: var(--hc-cyan);
}

/* Shared HUD overlay for non-battle screens */
.hc-screen-hud {
  position: absolute;
  top: calc(var(--sat, 0px) + 12px);
  left: calc(var(--sal, 0px) + 12px);
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 50;
}

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

.hc-battle-name {
  font-family: var(--hc-font-ui);
  font-size: 12px;
  font-weight: 700;
  color: var(--hc-text);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.hc-health-display {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(80, 160, 80, 0.2);
  min-width: 60px;
  justify-content: center;
}

.hc-health-display.hc-hp-damaged {
  animation: hcHpFlash 0.6s ease-out;
  border-color: var(--hc-red);
}

@keyframes hcHpFlash {
  0% { background: rgba(255, 34, 68, 0.5); transform: scale(1.15); }
  30% { background: rgba(255, 34, 68, 0.3); }
  100% { background: rgba(0, 0, 0, 0.4); transform: scale(1); }
}
/* Opponent HP becomes a large, obvious attack target when attacker is selected */
.hc-health-display.attack-target {
  padding: 8px 18px;
  border: 2px solid var(--hc-red);
  background: rgba(255, 34, 68, 0.15);
  box-shadow: 0 0 14px rgba(255, 34, 68, 0.5), 0 0 28px rgba(255, 34, 68, 0.2);
  animation: hcHeroTargetPulse 1s ease-in-out infinite;
  cursor: pointer;
}
@keyframes hcHeroTargetPulse {
  0%, 100% { box-shadow: 0 0 14px rgba(255, 34, 68, 0.5), 0 0 28px rgba(255, 34, 68, 0.2); }
  50% { box-shadow: 0 0 20px rgba(255, 34, 68, 0.7), 0 0 36px rgba(255, 34, 68, 0.3); }
}
/* Targeting banner */
/* Targeting banner — medieval scroll style */
.hc-targeting-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 8px 22px;
  background: rgba(44, 30, 16, 0.85);
  border: 2px solid rgba(201, 168, 76, 0.5);
  border-top: 2px solid rgba(201, 168, 76, 0.6);
  border-bottom: 2px solid rgba(90, 60, 20, 0.6);
  border-radius: 4px;
  font-family: var(--hc-font-title);
  font-size: 11px;
  font-weight: 700;
  color: #F0E6D0;
  letter-spacing: 2px;
  text-transform: uppercase;
  z-index: 10;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  animation: hcTargetBannerPulse 2s ease-in-out infinite;
}

/* Strike hero button — crimson parchment */
.hc-breach-btn {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  padding: 10px 24px;
  background: linear-gradient(180deg, rgba(140, 30, 30, 0.8) 0%, rgba(100, 20, 20, 0.9) 100%);
  border: 2px solid rgba(200, 80, 60, 0.6);
  border-top-color: rgba(220, 120, 80, 0.5);
  border-bottom-color: rgba(80, 20, 10, 0.6);
  border-radius: 4px;
  font-family: var(--hc-font-title);
  font-size: 12px;
  font-weight: 700;
  color: #F0D0B0;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 200, 150, 0.1);
  animation: hcBreachPulse 2s ease-in-out infinite;
}
.hc-breach-btn:active {
  background: linear-gradient(180deg, rgba(160, 40, 40, 0.9) 0%, rgba(120, 30, 30, 0.95) 100%);
  transform: translateX(-50%) scale(0.95);
}
@keyframes hcBreachPulse {
  0%, 100% { box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 200, 150, 0.1); }
  50% { box-shadow: 0 3px 20px rgba(140, 30, 30, 0.5), inset 0 1px 0 rgba(255, 200, 150, 0.15); border-color: rgba(220, 100, 70, 0.8); }
}
@keyframes hcTargetBannerPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.hc-health-icon {
  display: flex;
  align-items: center;
  color: var(--hc-green);
}
.hc-health-icon svg {
  width: 14px;
  height: 14px;
}

.hc-health-value {
  font-family: var(--hc-font-ui);
  font-size: 15px;
  font-weight: 800;
  color: var(--hc-green);
  letter-spacing: 1px;
}

.hc-health-value.low {
  color: var(--hc-red);
  animation: hcHealthPulse 0.8s ease-in-out infinite;
}

@keyframes hcHealthPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Board area */
.hc-board-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4px 8px;
  gap: 2px;
  position: relative;
  overflow: hidden;
  min-height: 0;
}

.hc-board-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
}

.hc-board-row {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.hc-row-back {
  transform: scale(0.92);
  opacity: 0.85;
  margin-top: -2px;
  margin-bottom: -2px;
}

.hc-row-front {
  transform: scale(1);
}

.hc-board-slot {
  width: 155px;
  height: 96px;
  border-radius: 5px;
  border: 1px dashed rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--hc-transition);
}

/* Player board — larger cards filling available space */
.hc-board-player .hc-board-row {
  gap: 10px;
}

.hc-board-player .hc-board-slot {
  width: 184px;
  height: 130px;
}

.hc-board-player .hc-card-board {
  width: 180px;
  height: 126px;
  border-radius: 10px;
}

.hc-board-player .hc-card-board .hc-card-header { padding: 5px 8px; min-height: 28px; gap: 5px; }
.hc-board-player .hc-card-board .hc-card-cost { width: 26px; height: 26px; font-size: 14px; border-radius: 5px; }
.hc-board-player .hc-card-board .hc-card-name { font-size: 13px; letter-spacing: 0.8px; }
.hc-board-player .hc-card-board .hc-card-hp { font-size: 18px; }
.hc-board-player .hc-card-board .hc-card-hp .hc-card-hp-icon { font-size: 15px; }
.hc-board-player .hc-card-board .hc-card-body::after { font-size: 22px; bottom: 4px; left: 6px; }

.hc-board-slot.highlight {
  border-color: var(--hc-cyan);
  background: rgba(212, 164, 74, 0.05);
  box-shadow: 0 0 10px rgba(212, 164, 74, 0.15);
}

.hc-battle-line {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--hc-cyan), var(--hc-magenta), transparent);
  margin: 2px 0;
  opacity: 0.4;
  flex-shrink: 0;
}

/* Opponent hand row */
.hc-opp-hand {
  display: flex;
  justify-content: center;
  gap: 3px;
  padding: 2px 10px;
  flex-shrink: 0;
}

/* Card back (opponent face-down cards) */
.hc-card-back {
  width: 24px;
  height: 34px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(212, 164, 74, 0.12);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}
.hc-card-back-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Attack animations ── */

/* Attacker shake (lunge forward) */
@keyframes hcAttackLunge {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-8px) scale(1.08); }
  60%  { transform: translateY(4px) scale(0.97); }
  100% { transform: translateY(0) scale(1); }
}
.hc-anim-attack {
  animation: hcAttackLunge 0.3s ease-out !important;
  z-index: 50;
}

/* Screen shake on impact */
@keyframes hcScreenShake {
  0%   { transform: translate(0, 0); }
  15%  { transform: translate(-4px, 2px); }
  30%  { transform: translate(5px, -3px); }
  45%  { transform: translate(-3px, 4px); }
  60%  { transform: translate(4px, -1px); }
  75%  { transform: translate(-2px, 3px); }
  90%  { transform: translate(1px, -2px); }
  100% { transform: translate(0, 0); }
}
.hc-anim-screen-shake {
  animation: hcScreenShake 0.35s ease-out;
}

/* Zeal bar */
.hc-pwr-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 3px 10px;
  flex-shrink: 0;
}

.hc-pwr-cell {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid rgba(0, 102, 255, 0.3);
  transition: all var(--hc-transition);
}

.hc-pwr-cell.filled {
  background: var(--hc-blue);
  border-color: var(--hc-blue);
  box-shadow: 0 0 6px rgba(0, 102, 255, 0.4);
}

.hc-pwr-cell.empty {
  background: rgba(0, 102, 255, 0.1);
}

.hc-pwr-label {
  font-family: var(--hc-font-ui);
  font-size: 11px;
  font-weight: 700;
  color: var(--hc-blue);
  letter-spacing: 1px;
  margin-left: 6px;
}

/* Hand area */
.hc-hand-area {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 140px;
  max-height: 150px;
  flex-shrink: 0;
}

/* Hand cards — compact for mobile viewport */
.hc-hand-area .hc-card {
  flex-shrink: 0;
  width: 250px;
  height: 132px;
}
.hc-hand-area .hc-card .hc-card-header { padding: 4px 6px; min-height: 24px; gap: 4px; }
.hc-hand-area .hc-card .hc-card-cost { width: 22px; height: 22px; font-size: 12px; border-radius: 5px; }
.hc-hand-area .hc-card .hc-card-name { font-size: 11px; }
.hc-hand-area .hc-card .hc-card-hp { font-size: 12px; }
.hc-hand-area .hc-card .hc-card-pill { font-size: 9px; padding: 2px 6px; }
.hc-hand-area .hc-card .hc-card-atk-icon { font-size: 12px; }
.hc-hand-area .hc-card .hc-card-atk-name { font-size: 11px; }
.hc-hand-area .hc-card .hc-card-atk-dmg { font-size: 12px; }
.hc-hand-area .hc-card .hc-card-atk-desc { font-size: 9px; }
.hc-hand-area .hc-card .hc-card-attacks { padding: 4px 6px; gap: 3px; }

/* Hand cards — visible light streak rotation (faster than collection for visibility) */
.hc-hand-area .hc-card .hc-card-border-streak::before {
  animation-duration: 10s;
}
.hc-hand-area .hc-card[data-rarity="rare"] .hc-card-border-streak::before { animation-duration: 9s; }
.hc-hand-area .hc-card[data-rarity="epic"] .hc-card-border-streak::before { animation-duration: 8s; }
.hc-hand-area .hc-card[data-rarity="legendary"] .hc-card-border-streak::before { animation-duration: 7s; }
.hc-hand-area .hc-card[data-rarity="legendary"] .hc-card-border-streak::after { animation-duration: 7s; animation-delay: -3.5s; }

/* Hand playable cards get golden glow (inherited from .hc-card.playable animation) */
.hc-hand-area .hc-card.playable {
  border-color: rgba(212, 164, 74, 0.5);
}

/* Deck counter badge */
.hc-deck-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: rgba(0, 102, 255, 0.15);
  border: 1px solid rgba(0, 102, 255, 0.3);
  color: var(--hc-blue);
  font-family: var(--hc-font-ui);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.hc-deck-counter::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 10px;
  margin-right: 3px;
  border-radius: 1px;
  border: 1.5px solid currentColor;
  opacity: 0.7;
}
.hc-deck-counter-opp {
  background: rgba(255, 34, 68, 0.1);
  border-color: rgba(255, 34, 68, 0.25);
  color: var(--hc-red);
}

/* Battle footer */
.hc-battle-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: var(--hc-bg-panel);
  border-top: 1px solid var(--hc-glass-border);
  flex-shrink: 0;
}

.hc-end-turn-btn {
  position: relative;
  padding: 7px 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(0, 40, 50, 0.8), rgba(25, 15, 8, 0.9));
  border: none;
  color: var(--hc-cyan);
  font-family: var(--hc-font-ui);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: hidden;
  box-shadow: 0 0 14px rgba(212, 164, 74, 0.1), 0 2px 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.hc-end-turn-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(212, 164, 74, 0.45), rgba(180, 140, 60, 0.2), rgba(120, 20, 20, 0.2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.hc-mulligan-btn {
  color: var(--hc-yellow, #FFD700);
  background: linear-gradient(135deg, rgba(40, 30, 10, 0.8), rgba(25, 18, 5, 0.9));
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.1), 0 2px 10px rgba(0, 0, 0, 0.3);
}

.hc-mulligan-btn::before {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.45), rgba(255, 180, 0, 0.2));
}

.hc-end-turn-btn:active,
.hc-end-turn-btn.hc-btn-pressed {
  transform: scale(0.92);
  box-shadow: 0 0 22px rgba(212, 164, 74, 0.2), 0 2px 14px rgba(0, 0, 0, 0.4);
  filter: brightness(1.3);
}

.hc-end-turn-btn.waiting {
  opacity: 0.35;
  pointer-events: none;
  color: var(--hc-text-dim);
  background: rgba(20, 20, 35, 0.6);
  box-shadow: none;
}

.hc-end-turn-btn.waiting::before { opacity: 0.15; }

/* ═══ GAME OVER SCREEN ═══ */
.hc-gameover-screen {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  z-index: 50;
  background: rgba(10, 10, 18, 0.95);
}

.hc-gameover-result {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 6px;
  text-transform: uppercase;
}

.hc-gameover-result.win {
  background: linear-gradient(135deg, var(--hc-cyan), var(--hc-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hc-gameover-result.lose {
  color: var(--hc-red);
}

.hc-gameover-stats {
  display: flex;
  gap: 20px;
  text-align: center;
  padding: 16px 24px;
  border-radius: var(--hc-radius-lg);
  background: rgba(10, 10, 18, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(212, 164, 74, 0.08);
}

.hc-gameover-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hc-gameover-stat-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--hc-cyan);
}

.hc-gameover-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--hc-text-dim);
}

.hc-gameover-reward {
  text-align: center;
  padding: 12px 20px;
  margin-top: 8px;
  background: linear-gradient(135deg, rgba(212, 164, 74, 0.15), rgba(139, 26, 26, 0.1));
  border: 1px solid rgba(212, 164, 74, 0.3);
  border-radius: var(--hc-radius-lg);
  max-width: 280px;
  animation: hcRewardGlow 2s ease-in-out infinite alternate;
}

@keyframes hcRewardGlow {
  0% { box-shadow: 0 0 12px rgba(212, 164, 74, 0.2); }
  100% { box-shadow: 0 0 28px rgba(212, 164, 74, 0.5); }
}

.hc-gameover-reward-label {
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--hc-gold);
  font-family: var(--hc-font-title);
  margin-bottom: 4px;
}

.hc-gameover-reward-name {
  font-family: var(--hc-font-title);
  font-size: 16px;
  font-weight: 700;
  color: var(--hc-text-bright);
  margin-bottom: 4px;
}

.hc-gameover-reward-desc {
  font-size: 11px;
  color: var(--hc-cyan);
  margin-bottom: 6px;
}

.hc-gameover-reward-flavor {
  font-size: 10px;
  color: var(--hc-text-dim);
  font-style: italic;
}

.hc-gameover-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 220px;
  margin-top: 12px;
}

/* ═══ SHOP SCREEN ═══ */
.hc-shop-screen {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  z-index: 1;
  padding-top: var(--sat);
  padding-bottom: var(--sab);
}

.hc-shop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 215, 0, 0.08);
  background: linear-gradient(145deg, rgba(30, 20, 12, 0.85), rgba(24, 16, 8, 0.75));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hc-token-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(40, 30, 10, 0.6), rgba(25, 18, 5, 0.7));
  border: 1px solid rgba(255, 215, 0, 0.2);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.06);
}

.hc-token-badge span {
  font-size: 13px;
  font-weight: 700;
  color: var(--hc-gold);
}
.hc-token-icon {
  display: flex;
  align-items: center;
}
.hc-token-icon svg {
  width: 16px;
  height: 16px;
}

/* ── Pack Carousel ── */
.hc-pack-carousel {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
  min-height: 0;
  padding: 8px 0;
}

.hc-pack-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  height: 100%;
}

.hc-pack-track {
  display: flex;
  height: 100%;
  transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: transform;
}

.hc-pack-slide {
  min-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 24px;
}

.hc-pack-image-916 {
  position: relative;
  width: auto;
  height: 100%;
  max-height: 360px;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(255, 215, 0, 0.2);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(255, 215, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  background: rgba(8, 8, 16, 0.9);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hc-pack-image-916:active {
  transform: scale(0.97);
}

.hc-pack-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hc-pack-glow {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 215, 0, 0.12) 0%, transparent 60%);
}

/* Navigation arrows */
.hc-pack-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(12, 12, 24, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.hc-pack-arrow svg {
  width: 18px;
  height: 18px;
}
.hc-pack-arrow:active {
  background: rgba(212, 164, 74, 0.15);
  border-color: var(--hc-cyan);
  color: var(--hc-cyan);
}
.hc-pack-arrow-left { left: 6px; }
.hc-pack-arrow-right { right: 6px; }

/* Dot indicators */
.hc-pack-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 6px 0;
}
.hc-pack-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.25s ease;
}
.hc-pack-dot.active {
  background: var(--hc-gold);
  border-color: var(--hc-gold);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
  transform: scale(1.25);
}

/* Info panel below carousel */
.hc-pack-info-panel {
  padding: 12px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(180deg, transparent, rgba(8, 8, 16, 0.6));
}

.hc-pack-buy-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}

.hc-pack-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--hc-text-bright);
  text-align: center;
}

.hc-pack-desc {
  font-size: 12px;
  color: var(--hc-text-dim);
  text-align: center;
}

.hc-pack-price {
  font-size: 15px;
  font-weight: 800;
  color: var(--hc-gold);
}

/* ═══ PACK OPENING ═══ */
.hc-pack-opening {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  z-index: 50;
  background: transparent;
  padding: var(--sat, 20px) 10px var(--sab, 20px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.hc-pack-opening-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  perspective: 1000px;
  width: 100%;
  max-width: 300px;
}

.hc-pack-card-flip {
  width: 270px;
  height: 150px;
  perspective: 1000px;
  cursor: pointer;
  flex-shrink: 0;
}

.hc-pack-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

.hc-pack-card-inner.flipped {
  transform: rotateY(180deg);
}

.hc-pack-card-back {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  overflow: hidden;
}

.hc-pack-card-back-img {
  /* Card-back image is portrait (1024x1536) — rotate to landscape to match card container */
  width: 150px;
  height: 270px;
  object-fit: cover;
  border-radius: 12px;
  transform: rotate(90deg);
  transform-origin: center center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -135px;
  margin-left: -75px;
}

.hc-pack-card-front {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transform: rotateY(180deg);
}

.hc-pack-hint {
  font-size: 12px;
  color: var(--hc-text-dim);
  text-align: center;
  flex-shrink: 0;
}

/* ═══ DECK BUILDER ═══ */
.hc-deckbuilder {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  z-index: 1;
  padding-top: var(--sat);
  padding-bottom: var(--sab);
}

.hc-deckbuilder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--hc-glass-border);
  background: rgba(10, 10, 18, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hc-deck-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--hc-cyan);
}

.hc-deckbuilder-cards {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-content: flex-start;
}

.hc-deckbuilder-sidebar {
  padding: 10px;
  border-top: 1px solid var(--hc-glass-border);
  max-height: 200px;
  overflow-y: auto;
  background: rgba(10, 10, 18, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hc-deck-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  font-size: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.hc-deck-list-item-name {
  color: var(--hc-text);
  flex: 1;
}

.hc-deck-list-item-cost {
  color: var(--hc-blue);
  font-weight: 700;
  width: 20px;
  text-align: center;
}

.hc-deck-list-item-qty {
  color: var(--hc-text-dim);
  font-size: 10px;
}

/* ═══ DECK SLOTS ═══ */

.hc-deck-slots-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hc-deck-slot {
  position: relative;
  background: rgba(10, 10, 18, 0.8);
  border: 1px solid var(--hc-glass-border);
  border-radius: 8px;
  padding: 12px 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hc-deck-slot-active {
  border-color: var(--hc-cyan);
  box-shadow: 0 0 12px rgba(212, 164, 74, 0.15);
}

.hc-deck-slot-active-badge {
  position: absolute;
  top: -6px;
  right: 10px;
  background: var(--hc-cyan);
  color: #000;
  font-size: 8px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 1px;
}

.hc-deck-slot-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--hc-text);
  margin-bottom: 4px;
}

.hc-deck-slot-size {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 2px;
}

.hc-deck-slot-campaign {
  font-size: 10px;
  color: var(--hc-text-dim);
  font-style: italic;
  margin-bottom: 6px;
}

.hc-deck-slot-exclusive {
  display: inline-block;
  font-size: 8px;
  font-weight: 700;
  color: var(--hc-purple, #a855f7);
  background: rgba(168, 85, 247, 0.15);
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.hc-deck-slot-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.hc-deck-slot-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-style: dashed;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.hc-deck-slot-add:active {
  opacity: 1;
}

.hc-deck-slot-add-icon {
  font-size: 28px;
  color: var(--hc-cyan);
  font-weight: 300;
  line-height: 1;
}

.hc-deck-slot-add-label {
  font-size: 11px;
  color: var(--hc-text-dim);
  margin-top: 4px;
}

/* ═══ DECK EDITOR OPTIONS ═══ */

.hc-deck-options-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px;
  background: rgba(10, 10, 18, 0.5);
  border-bottom: 1px solid var(--hc-glass-border);
  gap: 10px;
}

.hc-deck-size-picker {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hc-deck-size-label {
  font-size: 11px;
  color: var(--hc-text-dim);
  font-weight: 600;
}

.hc-deck-size-select {
  background: rgba(0, 0, 0, 0.5);
  color: var(--hc-cyan);
  border: 1px solid var(--hc-glass-border);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
}

.hc-deck-size-select option {
  background: #0a0a12;
  color: var(--hc-text);
}

.hc-deck-exclusive-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--hc-text-dim);
  cursor: pointer;
}

.hc-deck-exclusive-toggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--hc-purple, #a855f7);
}

.hc-deck-name-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hc-glass-border);
  color: var(--hc-cyan);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  width: 120px;
  padding: 2px 0;
}

.hc-deck-name-input:focus {
  outline: none;
  border-bottom-color: var(--hc-cyan);
}

.hc-deck-card-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--hc-cyan);
  color: #000;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.hc-deck-card-locked {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(168, 85, 247, 0.9);
  color: #fff;
  font-size: 7px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 2px;
  letter-spacing: 0.5px;
  z-index: 5;
}

.hc-deck-card-new {
  position: absolute;
  top: -2px;
  left: -2px;
  background: var(--hc-green, #22c55e);
  color: #000;
  font-size: 7px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 2px;
  letter-spacing: 0.5px;
  z-index: 6;
  box-shadow: 0 0 6px var(--hc-green, #22c55e), 0 0 12px rgba(34, 197, 94, 0.4);
  animation: hcNewPulse 1.5s ease-in-out infinite;
}

@keyframes hcNewPulse {
  0%, 100% { box-shadow: 0 0 6px var(--hc-green, #22c55e), 0 0 12px rgba(34, 197, 94, 0.4); }
  50% { box-shadow: 0 0 10px var(--hc-green, #22c55e), 0 0 20px rgba(34, 197, 94, 0.6); }
}

.hc-deck-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  gap: 8px;
}

.hc-deck-quick-stats {
  display: flex;
  gap: 8px;
  font-size: 9px;
  color: var(--hc-text-dim);
}

.hc-deck-quick-stats span {
  white-space: nowrap;
}

.hc-btn-danger {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #ef4444 !important;
}

.hc-filter-rarity {
  font-size: 9px !important;
  padding: 2px 6px !important;
}

/* ═══ ANIMATIONS ═══ */
.hc-anim-play {
  animation: hcAnimPlay 0.3s ease-out;
}

@keyframes hcAnimPlay {
  0% { transform: scale(1.3); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* vp-anim-attack defined above with hcAttackLunge */

.hc-anim-damage {
  animation: hcAnimDamage 0.3s ease-in-out;
}

@keyframes hcAnimDamage {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(2) saturate(0); }
}

/* ── Card Destruction: Medieval Deprogram Effect ── */
/* ═══ Death Animation — Parchment Burn + Crumble ═══ */
.hc-anim-death {
  animation: hcParchmentBurn 0.7s ease-in forwards;
  position: relative;
}

/* Fire glow edge effect */
.hc-anim-death::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(180, 60, 0, 0.4) 60%, rgba(120, 30, 0, 0.8) 100%);
  pointer-events: none;
  animation: hcBurnEdge 0.7s ease-in forwards;
  border-radius: inherit;
}

/* Ash overlay */
.hc-anim-death::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(40, 20, 5, 0);
  pointer-events: none;
  animation: hcAshOver 0.7s ease-in forwards;
  border-radius: inherit;
}

@keyframes hcParchmentBurn {
  0% { transform: scale(1); opacity: 1; filter: brightness(1); }
  15% { transform: scale(1.02); filter: brightness(1.3) sepia(0.3); }
  30% { transform: scale(1.01) rotate(0.5deg); filter: brightness(1.5) sepia(0.6); opacity: 0.95; }
  50% { transform: scale(0.98) rotate(-0.5deg); filter: brightness(0.8) sepia(1) saturate(1.5); opacity: 0.7; }
  70% { transform: scale(0.92) rotate(1deg); filter: brightness(0.4) sepia(1) saturate(2); opacity: 0.4; }
  85% { transform: scale(0.8) rotate(-0.5deg); filter: brightness(0.2) sepia(1); opacity: 0.2; }
  100% { transform: scale(0.6); filter: brightness(0) sepia(1); opacity: 0; }
}

@keyframes hcBurnEdge {
  0% { opacity: 0; }
  20% { opacity: 0.3; }
  50% { opacity: 0.8; }
  100% { opacity: 0; }
}

@keyframes hcAshOver {
  0% { background: rgba(40, 20, 5, 0); }
  60% { background: rgba(40, 20, 5, 0.4); }
  100% { background: rgba(20, 10, 2, 0.9); }
}

/* Ember particles (spawned by AnimationManager) */
.hc-death-ember {
  will-change: transform, opacity;
}

/* Ash fragments (spawned by AnimationManager) */
.hc-death-ash {
  will-change: transform, opacity;
}

/* Burn overlay (spawned by AnimationManager) */
.hc-death-burn {
  border-radius: 4px;
}

.hc-anim-draw {
  animation: hcAnimDraw 0.3s ease-out;
}

@keyframes hcAnimDraw {
  0% { transform: translateX(40px) scale(0.5); opacity: 0; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}

.hc-anim-heal {
  animation: hcAnimHeal 0.5s ease-in-out;
}

@keyframes hcAnimHeal {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 20px rgba(80, 160, 80, 0.6); }
}

.hc-anim-buff {
  animation: hcAnimBuff 0.4s ease-in-out;
}

@keyframes hcAnimBuff {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); }
}

/* ═══ Tactic/Effect Animations ═══ */

/* Shake + red glow — damage tactic hitting a unit */
.hc-anim-tactic-damage {
  animation: hcTacticDamage 0.6s ease-out !important;
}

@keyframes hcTacticDamage {
  0%   { transform: translateX(0); box-shadow: 0 0 0 rgba(255,34,68,0); filter: brightness(1); }
  10%  { transform: translateX(-6px); box-shadow: 0 0 18px rgba(255,34,68,0.7); filter: brightness(1.8); }
  20%  { transform: translateX(5px); box-shadow: 0 0 24px rgba(255,34,68,0.9); filter: brightness(2); }
  30%  { transform: translateX(-4px); box-shadow: 0 0 20px rgba(255,34,68,0.6); filter: brightness(1.5); }
  40%  { transform: translateX(3px); box-shadow: 0 0 14px rgba(255,34,68,0.4); filter: brightness(1.3); }
  50%  { transform: translateX(-2px); box-shadow: 0 0 10px rgba(255,34,68,0.3); filter: brightness(1.1); }
  100% { transform: translateX(0); box-shadow: 0 0 0 rgba(255,34,68,0); filter: brightness(1); }
}

/* Green shimmer sweep — heal effect */
.hc-anim-tactic-heal {
  animation: hcTacticHeal 0.7s ease-in-out !important;
  position: relative;
  overflow: hidden;
}
.hc-anim-tactic-heal::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(80,160,80,0.35) 40%, rgba(80,160,100,0.5) 50%, rgba(80,160,80,0.35) 60%, transparent 100%);
  animation: hcHealSweep 0.7s ease-in-out forwards;
  pointer-events: none;
  z-index: 10;
  border-radius: inherit;
}

@keyframes hcTacticHeal {
  0%   { box-shadow: 0 0 0 rgba(80,160,80,0); }
  30%  { box-shadow: 0 0 20px rgba(80,160,80,0.6), inset 0 0 16px rgba(80,160,80,0.2); }
  100% { box-shadow: 0 0 0 rgba(80,160,80,0); }
}

@keyframes hcHealSweep {
  0%   { left: -100%; }
  100% { left: 100%; }
}

/* Gold shimmer sweep — buff effect */
.hc-anim-tactic-buff {
  animation: hcTacticBuff 0.7s ease-in-out !important;
  position: relative;
  overflow: hidden;
}
.hc-anim-tactic-buff::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,215,0,0.3) 35%, rgba(255,255,200,0.5) 50%, rgba(255,215,0,0.3) 65%, transparent 100%);
  animation: hcBuffSweep 0.7s ease-in-out forwards;
  pointer-events: none;
  z-index: 10;
  border-radius: inherit;
}

@keyframes hcTacticBuff {
  0%   { box-shadow: 0 0 0 rgba(255,215,0,0); }
  30%  { box-shadow: 0 0 24px rgba(255,215,0,0.6), inset 0 0 16px rgba(255,215,0,0.15); }
  100% { box-shadow: 0 0 0 rgba(255,215,0,0); }
}

@keyframes hcBuffSweep {
  0%   { left: -100%; }
  100% { left: 100%; }
}

/* Blue pulse — shield deploy */
.hc-anim-tactic-shield {
  animation: hcTacticShield 0.6s ease-out !important;
}

@keyframes hcTacticShield {
  0%   { box-shadow: 0 0 0 rgba(0,170,255,0); }
  25%  { box-shadow: 0 0 0 4px rgba(0,170,255,0.6), 0 0 20px rgba(0,170,255,0.4); }
  50%  { box-shadow: 0 0 0 6px rgba(0,170,255,0.3), 0 0 30px rgba(0,170,255,0.3); }
  100% { box-shadow: 0 0 0 0 rgba(0,170,255,0); }
}

/* ═══ Spark Particles (Pongy Supreme-style, DOM-based) ═══ */

.hc-spark {
  position: absolute;
  pointer-events: none;
  z-index: 100;
  will-change: transform, opacity;
}

.hc-spark-flash {
  position: absolute;
  width: 60px;
  height: 60px;
  pointer-events: none;
  z-index: 99;
  will-change: transform, opacity;
}

/* ═══ Turn Indicator ═══ */
.hc-turn-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--hc-cyan);
  text-shadow: 0 0 20px rgba(212, 164, 74, 0.5);
  animation: hcTurnFade 1.5s ease-in-out forwards;
  z-index: 80;
  pointer-events: none;
}

@keyframes hcTurnFade {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* ═══ Damage Number Float ═══ */
.hc-damage-float {
  position: absolute;
  font-size: 22px;
  font-weight: 900;
  color: var(--hc-red);
  text-shadow: 0 0 6px rgba(255, 34, 68, 0.6);
  animation: hcDamageFloat 0.8s ease-out forwards;
  pointer-events: none;
  z-index: 90;
}

@keyframes hcDamageFloat {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-40px); }
}

.hc-heal-float {
  color: var(--hc-green);
  text-shadow: 0 0 6px rgba(80, 160, 80, 0.6);
}

/* ═══ Target Arrow ═══ */
.hc-target-line {
  position: absolute;
  height: 2px;
  background: var(--hc-red);
  box-shadow: 0 0 6px rgba(255, 34, 68, 0.5);
  transform-origin: left center;
  z-index: 70;
  pointer-events: none;
}

/* ═══ Scroll behavior ═══ */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(212, 164, 74, 0.2); border-radius: 2px; }

/* ═══ TOAST SYSTEM ═══ */
.hc-toast-container {
  position: fixed;
  top: calc(var(--sat, 0px) + 90px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 500;
  pointer-events: none;
  width: 90%;
  max-width: 360px;
}

/* Medieval scroll-style toast notifications */
.hc-toast {
  padding: 8px 24px;
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(60, 42, 22, 0.95) 0%, rgba(44, 30, 16, 0.97) 100%);
  border: 1px solid rgba(212, 164, 74, 0.35);
  border-top: 2px solid rgba(212, 164, 74, 0.5);
  border-bottom: 2px solid rgba(90, 60, 20, 0.6);
  color: var(--toast-color, #F0E6D0);
  font-family: var(--hc-font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-align: center;
  white-space: normal;
  word-wrap: break-word;
  max-width: 100%;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(212, 164, 74, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(12px) scale(0.92);
  transition: none;
  position: relative;
  overflow: hidden;
}

/* Parchment texture overlay on toasts */
.hc-toast::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(212, 164, 74, 0.06) 0%, transparent 70%),
    radial-gradient(ellipse at 70% 50%, rgba(139, 26, 26, 0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* Scroll end-caps — decorative left/right edges */
.hc-toast::after {
  content: '✦';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 8px;
  color: rgba(212, 164, 74, 0.4);
  pointer-events: none;
}

.hc-toast-lg {
  font-family: var(--hc-font-title);
  font-size: 14px;
  letter-spacing: 2px;
  padding: 10px 20px;
  border-width: 2px;
  text-transform: uppercase;
  max-width: 100%;
  animation: hcScrollUnfurl 0.4s ease-out 1;
}

@keyframes hcScrollUnfurl {
  0% { opacity: 0; transform: translateY(-8px) scaleX(0.6); }
  50% { opacity: 1; transform: translateY(2px) scaleX(1.02); }
  100% { opacity: 1; transform: translateY(0) scaleX(1); }
}

.hc-toast-enter {
  animation: hcToastIn 0.3s ease-out forwards;
}

.hc-toast-exit {
  animation: hcToastOut 0.4s ease-in forwards;
}

@keyframes hcToastIn {
  0% { opacity: 0; transform: translateY(12px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes hcToastOut {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-16px) scale(0.9); }
}

/* ═══ TUTORIAL ═══ */
.hc-tutorial-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hc-tutorial-msg {
  pointer-events: auto;
  max-width: 320px;
  width: 88%;
  padding: 14px 18px 16px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(20, 14, 8, 0.94);
  border: 1px solid var(--hc-cyan);
  border-radius: 10px;
  box-shadow: 0 0 24px rgba(212, 164, 74, 0.18), inset 0 0 20px rgba(212, 164, 74, 0.03);
  text-align: center;
  animation: hcTutorialIn 0.3s ease-out;
}

.hc-tutorial-step-label {
  font-family: var(--hc-font-ui);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 3px;
  color: rgba(212, 164, 74, 0.4);
  margin-bottom: 8px;
  text-transform: uppercase;
}

.hc-tutorial-msg-text {
  font-family: var(--hc-font-ui);
  font-size: 12px;
  line-height: 1.65;
  color: var(--hc-text);
  white-space: pre-line;
  letter-spacing: 0.5px;
}

.hc-tutorial-btn {
  display: inline-block;
  margin-top: 14px;
  padding: 10px 28px;
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(212, 164, 74, 0.18), rgba(139, 26, 26, 0.12));
  border: 1px solid var(--hc-cyan);
  color: var(--hc-cyan);
  font-family: var(--hc-font-ui);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 44px;
  min-width: 120px;
}

.hc-tutorial-btn:active {
  transform: scale(0.95);
  background: rgba(212, 164, 74, 0.3);
}

/* Progress bar (visual) */
.hc-tutorial-progress-wrap {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.hc-tutorial-progress-bar {
  height: 3px;
  background: var(--hc-cyan);
  border-radius: 2px;
  transition: width 0.4s ease;
  box-shadow: 0 0 6px rgba(212, 164, 74, 0.4);
}
.hc-tutorial-progress-text {
  font-family: var(--hc-font-ui);
  font-size: 10px;
  color: var(--hc-text-dim);
  letter-spacing: 2px;
}

/* Skip tutorial button */
.hc-tutorial-skip-btn {
  position: fixed;
  top: 10px;
  right: 10px;
  pointer-events: auto;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.35);
  font-family: var(--hc-font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 6px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 102;
}
.hc-tutorial-skip-btn:active {
  color: rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.3);
}

.hc-tutorial-highlight {
  position: relative;
  z-index: 99;
  box-shadow: 0 0 0 2px var(--hc-cyan), 0 0 12px rgba(212, 164, 74, 0.4) !important;
  animation: hcTutorialPulse 1.5s ease-in-out infinite;
}

@keyframes hcTutorialPulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--hc-cyan), 0 0 12px rgba(212, 164, 74, 0.3); }
  50% { box-shadow: 0 0 0 3px var(--hc-cyan), 0 0 20px rgba(212, 164, 74, 0.5); }
}

@keyframes hcTutorialIn {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Tutorial complete screen */
.hc-tutorial-complete {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 50;
  padding: 20px;
}

.hc-tutorial-complete-title {
  font-family: var(--hc-font-ui);
  font-size: 22px;
  font-weight: 900;
  color: var(--hc-cyan);
  letter-spacing: 4px;
  text-shadow: 0 0 20px rgba(212, 164, 74, 0.4);
}

/* ═══ INTRO VIDEO ═══ */
.hc-intro-video-screen {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: #000;
  z-index: 200;
}

.hc-intro-video {
  width: 100%;
  max-width: 390px;
  border-radius: 4px;
}

.hc-intro-skip-btn {
  padding: 6px 16px;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--hc-text-dim);
  border-color: var(--hc-text-dim);
}

/* Unmute overlay (shown when video plays muted) */
.hc-unmute-overlay {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 210;
  display: flex;
}
.hc-unmute-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-family: var(--hc-font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  animation: hcUnmutePulse 1.5s ease-in-out infinite;
}
@keyframes hcUnmutePulse {
  0%, 100% { border-color: rgba(255, 255, 255, 0.2); }
  50% { border-color: rgba(212, 164, 74, 0.5); box-shadow: 0 0 10px rgba(212, 164, 74, 0.15); }
}

.hc-tutorial-complete-msg {
  font-family: var(--hc-font-ui);
  font-size: 12px;
  color: var(--hc-text-dim);
  text-align: center;
  line-height: 1.6;
  max-width: 280px;
}

/* ═══ GUIDED TUTORIAL — card locking, flashing, hints ═══ */

.hc-tutorial-allowed-card {
  position: relative;
  z-index: 101;
  box-shadow: 0 0 0 2px var(--hc-cyan), 0 0 14px rgba(212, 164, 74, 0.5) !important;
  animation: hcTutorialCardPulse 1s ease-in-out infinite;
}

@keyframes hcTutorialCardPulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--hc-cyan), 0 0 10px rgba(212, 164, 74, 0.4); }
  50% { box-shadow: 0 0 0 3px #D4A44A, 0 0 22px rgba(212, 164, 74, 0.7); }
}

.hc-tutorial-locked-card {
  opacity: 0.25 !important;
  filter: grayscale(0.9) brightness(0.4);
  transition: opacity 0.3s ease, filter 0.3s ease;
  cursor: not-allowed;
}

/* Brief scale pulse when correct card is tapped */
.hc-tutorial-card-selected {
  animation: hcTutorialCardSelect 0.2s ease-out !important;
}
@keyframes hcTutorialCardSelect {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.hc-tutorial-flash {
  position: relative;
  z-index: 101;
  animation: hcTutorialFlash 0.8s ease-in-out infinite !important;
}

@keyframes hcTutorialFlash {
  0%, 100% {
    box-shadow: 0 0 0 2px var(--hc-cyan), 0 0 8px rgba(212, 164, 74, 0.3);
    border-color: var(--hc-cyan);
  }
  50% {
    box-shadow: 0 0 0 4px #D4A44A, 0 0 28px rgba(212, 164, 74, 0.6);
    border-color: #D4A44A;
  }
}

.hc-tutorial-hint {
  margin-top: 10px;
  font-family: var(--hc-font-ui);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #00ffaa;
  animation: hcTutorialHintBounce 1.2s ease-in-out infinite;
}

@keyframes hcTutorialHintBounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(4px); opacity: 0.7; }
}

.hc-tutorial-msg-top {
  top: 55px;
  transform: translateX(-50%);
  animation: hcTutorialInTop 0.3s ease-out;
}

.hc-tutorial-msg-bottom {
  top: auto;
  bottom: 130px;
  transform: translateX(-50%);
  animation: hcTutorialInBottom 0.3s ease-out;
}

@keyframes hcTutorialInTop {
  0% { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(0.92); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes hcTutorialInBottom {
  0% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.92); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.hc-tutorial-overlay-blocking {
  background: rgba(0, 0, 0, 0.55);
  pointer-events: auto;
}

/* ═══ OPPONENT DIALOGUE (SF2-style Portrait + Dialogue) ═══ */

.hc-dialogue-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #000;
}

/* Background layer — fades in and out gently */
.hc-dialogue-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.1;
  z-index: 0;
}

/* Portrait area — top half */
.hc-dialogue-portrait-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 12px;
  z-index: 2;
  min-height: 0;
  padding-top: env(safe-area-inset-top, 20px);
}

/* Portrait container */
.hc-dialogue-portrait {
  position: relative;
  max-width: 70%;
  max-height: 80%;
  animation: hcPortraitEnter 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes hcPortraitEnter {
  0% { opacity: 0; transform: scale(1.1) translateY(20px); filter: brightness(2) contrast(0.5); }
  30% { opacity: 1; filter: brightness(1.5) contrast(0.8); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: brightness(1) contrast(1); }
}

.hc-dialogue-portrait-img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 55vh;
  object-fit: contain;
  display: block;
  /* Drop shadow to separate from background */
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 60px rgba(212, 164, 74, 0.15));
}

/* Fallback icon when portrait image hasn't been generated */
.hc-dialogue-portrait-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0.6);
}
.hc-dialogue-portrait-fallback svg {
  width: 80px;
  height: 80px;
}

/* Glitch overlay — chromatic aberration + noise */
.hc-dialogue-glitch-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  z-index: 3;
}

/* Active glitch state */
.hc-dialogue-portrait.hc-dialogue-glitching {
  animation: hcPortraitGlitch 0.15s steps(2) infinite;
}
.hc-dialogue-portrait.hc-dialogue-glitching .hc-dialogue-portrait-img {
  filter:
    drop-shadow(var(--glitch-x, 3px) var(--glitch-y, 0) 0 rgba(255, 0, 68, 0.7))
    drop-shadow(calc(var(--glitch-x, 3px) * -1) calc(var(--glitch-y, 0px) * -1) 0 rgba(212, 164, 74, 0.7));
}
.hc-dialogue-portrait.hc-dialogue-glitching .hc-dialogue-glitch-overlay {
  opacity: 1;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0%,
      rgba(212, 164, 74, 0.03) 1px,
      transparent 2px
    );
}

@keyframes hcPortraitGlitch {
  0% { transform: translate(0, 0) skewX(0deg); }
  25% { transform: translate(-2px, 1px) skewX(-0.5deg); }
  50% { transform: translate(1px, -1px) skewX(0.3deg); }
  75% { transform: translate(2px, 0px) skewX(-0.2deg); }
  100% { transform: translate(0, 0) skewX(0deg); }
}

/* Name plate */
.hc-dialogue-nameplate {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  z-index: 2;
}
.hc-dialogue-name {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}
.hc-dialogue-diff {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 2px 8px;
  border-radius: 3px;
  text-transform: uppercase;
}
.hc-dialogue-diff[data-diff="easy"] { color: #88AACC; border: 1px solid rgba(100, 140, 180, 0.4); }
.hc-dialogue-diff[data-diff="normal"] { color: #C9A84C; border: 1px solid rgba(201, 168, 76, 0.4); }
.hc-dialogue-diff[data-diff="hard"] { color: #CC7744; border: 1px solid rgba(180, 100, 60, 0.4); }
.hc-dialogue-diff[data-diff="expert"] { color: #BB4455; border: 1px solid rgba(160, 50, 60, 0.4); }

/* Dialogue box — bottom portion */
.hc-dialogue-box {
  position: relative;
  z-index: 2;
  background: rgba(10, 8, 5, 0.1);
  border-top: 1px solid rgba(201, 168, 76, 0.2);
  padding: 16px 20px 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  min-height: 160px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hc-dialogue-mode-header {
  font-family: var(--hc-font-title);
  font-size: 10px;
  font-weight: 700;
  color: rgba(212, 164, 74, 0.6);
  letter-spacing: 3px;
  text-transform: uppercase;
}
.hc-dialogue-mode-header[data-mode="victory"] { color: rgba(201, 168, 76, 0.8); }
.hc-dialogue-mode-header[data-mode="defeat"] { color: rgba(180, 60, 60, 0.8); }

.hc-dialogue-text {
  font-family: var(--hc-font-ui);
  font-size: 15px;
  font-weight: 600;
  color: #EEEEFF;
  line-height: 1.6;
  letter-spacing: 0.5px;
  min-height: 50px;
  max-height: 100px;
  overflow-y: auto;
  text-shadow: 0 0 8px rgba(212, 164, 74, 0.15);
}

.hc-dialogue-btn-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

/* ═══ CAMPAIGN INTRO (Typewriter Backstory) ═══ */
.hc-campaign-intro {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  padding: calc(var(--sat) + 40px) 20px calc(var(--sab) + 20px);
  z-index: 10;
}

.hc-campaign-intro-header {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 12px;
  font-weight: 700;
  color: #C9A84C;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 16px;
  text-shadow: 0 2px 6px rgba(201,168,76,0.3);
  border-bottom: 1px solid rgba(201,168,76,0.2);
  padding-bottom: 10px;
}

.hc-campaign-intro-text {
  flex: 1;
  overflow-y: auto;
  background: rgba(10, 8, 5, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(201, 168, 76, 0.15);
  border-left: 2px solid rgba(201, 168, 76, 0.3);
  border-radius: 8px;
  padding: 18px 16px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 14px;
  color: rgba(230, 220, 200, 0.9);
  line-height: 1.75;
  white-space: pre-wrap;
  cursor: pointer;
}

.hc-typewriter-cursor {
  display: inline-block;
  width: 2px;
  height: 15px;
  background: #C9A84C;
  margin-left: 1px;
  animation: hcCursorBlink 0.7s step-end infinite;
  vertical-align: text-bottom;
}

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

.hc-campaign-intro-footer {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

/* ═══ Wallet Icon ═══ */
.hc-wallet-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  color: #22C55E;
  margin-right: 2px;
}
.hc-wallet-icon svg {
  width: 100%;
  height: 100%;
}

.hc-token-icon {
  display: inline-flex;
  align-items: center;
  width: 18px;
  height: 18px;
  color: #22C55E;
  margin-right: 4px;
}
.hc-token-icon svg {
  width: 100%;
  height: 100%;
}

/* ═══ Scores Screen ═══ */
.hc-scores-screen {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--sat) + 16px) 16px calc(var(--sab) + 16px);
  min-height: 100vh;
  gap: 20px;
}

.hc-scores-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 400px;
}

.hc-scores-summary {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.hc-scores-stat {
  text-align: center;
  padding: 12px 16px;
  background: var(--hc-glass-bg);
  border: 1px solid var(--hc-glass-border);
  border-radius: var(--hc-radius);
  backdrop-filter: blur(var(--hc-glass-blur));
  -webkit-backdrop-filter: blur(var(--hc-glass-blur));
  min-width: 60px;
}

.hc-scores-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--hc-cyan);
}

.hc-scores-stat-label {
  font-size: 9px;
  color: var(--hc-text-dim);
  letter-spacing: 1.5px;
  margin-top: 4px;
}

.hc-scores-list {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  max-height: 50vh;
  padding: 4px;
}

.hc-scores-empty {
  text-align: center;
  color: var(--hc-text-dim);
  font-size: 13px;
  padding: 32px 16px;
}

.hc-scores-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--hc-glass-bg);
  border: 1px solid var(--hc-glass-border);
  border-radius: var(--hc-radius);
  font-size: 13px;
}

.hc-scores-row.win {
  border-left: 3px solid var(--hc-cyan);
}

.hc-scores-row.loss {
  border-left: 3px solid var(--hc-red);
}

.hc-scores-result {
  font-weight: 700;
  width: 20px;
  text-align: center;
  font-size: 14px;
}

.hc-scores-row.win .hc-scores-result { color: var(--hc-cyan); }
.hc-scores-row.loss .hc-scores-result { color: var(--hc-red); }

.hc-scores-opponent {
  flex: 1;
  color: var(--hc-text);
  letter-spacing: 1px;
}

.hc-scores-score {
  font-weight: 700;
  color: var(--hc-gold);
  font-size: 15px;
}

/* ═══ PvP Button ═══ */
.hc-btn-pvp {
  background: linear-gradient(135deg, rgba(168,128,50,0.35), rgba(212,164,74,0.25));
  border: 1px solid rgba(212,164,74,0.5);
  color: #D4A44A;
  text-shadow: 0 0 10px rgba(212,164,74,0.5);
  box-shadow: 0 0 15px rgba(212,164,74,0.15), inset 0 1px 0 rgba(255,255,255,0.08);
}
.hc-btn-pvp:active {
  background: linear-gradient(135deg, rgba(168,128,50,0.5), rgba(212,164,74,0.4));
  box-shadow: 0 0 25px rgba(212,164,74,0.3);
}

/* ═══ PvP Lobby ═══ */
.hc-pvp-lobby {
  position: relative;
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  background: #1A1206;
  font-family: var(--hc-font-ui, 'Rajdhani', sans-serif);
  padding-top: var(--sat);
  padding-bottom: var(--sab);
}

.hc-pvp-lobby-header {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
}

.hc-pvp-lobby-title {
  font-family: var(--hc-font-title, 'Cinzel', Georgia, serif);
  font-size: 20px; font-weight: 900;
  color: #D4A44A;
  letter-spacing: 4px;
  text-shadow: 0 0 15px rgba(212,164,74,0.5);
}

.hc-pvp-lobby-center {
  position: relative; z-index: 1;
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 24px; padding: 0 32px;
}

.hc-pvp-icon {
  animation: hcPvpPulse 2s ease-in-out infinite;
}

@keyframes hcPvpPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(212,164,74,0.3)); }
  50% { transform: scale(1.08); filter: drop-shadow(0 0 20px rgba(212,164,74,0.6)); }
}

.hc-pvp-lobby-desc {
  font-size: 14px; color: var(--hc-text-dim);
  text-align: center; letter-spacing: 1px;
  line-height: 1.5;
}

.hc-pvp-searching {
  display: flex; flex-direction: column;
  align-items: center; gap: 20px;
}

.hc-pvp-spinner {
  width: 48px; height: 48px;
  border: 3px solid rgba(212,164,74,0.2);
  border-top-color: #D4A44A;
  border-radius: 50%;
  animation: hcSpin 0.8s linear infinite;
}

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

.hc-pvp-search-text {
  font-family: var(--hc-font-title, 'Cinzel', Georgia, serif);
  font-size: 12px; color: #D4A44A;
  letter-spacing: 3px;
  animation: hcBlink 1.2s step-end infinite;
}

@keyframes hcBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.hc-pvp-options {
  display: flex; flex-direction: column;
  gap: 12px; width: 100%;
  max-width: 280px;
}

.hc-pvp-room-code {
  font-family: var(--hc-font-title, 'Cinzel', Georgia, serif);
  font-size: 28px; font-weight: 900;
  color: #D4A44A;
  letter-spacing: 6px;
  text-align: center;
  padding: 12px 20px;
  background: rgba(212,164,74,0.1);
  border: 1px solid rgba(212,164,74,0.4);
  border-radius: 8px;
  cursor: pointer;
  user-select: all;
  text-shadow: 0 0 15px rgba(212,164,74,0.5);
}

.hc-pvp-code-input {
  font-family: var(--hc-font-title, 'Cinzel', Georgia, serif);
  font-size: 16px; font-weight: 700;
  color: #D4A44A;
  background: rgba(212,164,74,0.08);
  border: 1px solid rgba(212,164,74,0.4);
  border-radius: 8px;
  padding: 12px 16px;
  text-align: center;
  letter-spacing: 3px;
  width: 100%;
  max-width: 280px;
  outline: none;
  caret-color: #D4A44A;
}

.hc-pvp-code-input::placeholder {
  color: rgba(212,164,74,0.3);
  letter-spacing: 4px;
}

.hc-pvp-code-input:focus {
  border-color: #D4A44A;
  box-shadow: 0 0 15px rgba(212,164,74,0.2);
}

/* ═══ Concede Button ═══ */
.hc-concede-btn {
  font-family: var(--hc-font-ui, 'Rajdhani', sans-serif);
  font-size: 10px; font-weight: 700;
  color: var(--hc-red);
  background: rgba(255,0,60,0.1);
  border: 1px solid rgba(255,0,60,0.3);
  border-radius: 4px;
  padding: 4px 10px;
  letter-spacing: 2px;
  cursor: pointer;
}

/* ═══ AI Card Reveal Overlay ═══ */
.hc-card-reveal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  pointer-events: none;
  animation: hc-reveal-fade 1s ease-out forwards;
}

.hc-card-reveal-label {
  position: absolute;
  top: 18%;
  left: 0; right: 0;
  text-align: center;
  font-family: var(--hc-font-ui, 'Rajdhani', sans-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--hc-red, #ff003c);
  text-shadow: 0 0 10px rgba(255, 0, 60, 0.8);
}

.hc-card-reveal-card {
  transform: scale(1.4);
  animation: hc-reveal-zoom 0.8s cubic-bezier(0.2, 1, 0.3, 1) forwards;
  filter: drop-shadow(0 0 20px rgba(255, 0, 60, 0.6));
}

@keyframes hc-reveal-zoom {
  0% { transform: scale(0.4) translateY(40px); opacity: 0; }
  40% { transform: scale(1.5); opacity: 1; }
  100% { transform: scale(1.3); opacity: 1; }
}

@keyframes hc-reveal-fade {
  0% { opacity: 0; }
  15% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

/* ═══ Loading Overlay ═══ */
.hc-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(4, 6, 14, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  animation: hcLoadFadeIn 0.15s ease-out;
}
@keyframes hcLoadFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.hc-loading-spinner {
  width: 32px;
  height: 32px;
  border: 2px solid rgba(212, 164, 74, 0.15);
  border-top-color: var(--hc-cyan);
  border-radius: 50%;
  animation: hcSpin 0.8s linear infinite;
}
.hc-loading-text {
  font-family: var(--hc-font-ui);
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--hc-cyan);
  text-transform: uppercase;
  animation: hcBlink 1.2s ease-in-out infinite;
}

/* ═══ Defeat Malfunction Overlay ═══ */
.hc-defeat-flash-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  animation: hcDefeatFlicker 2s steps(1) forwards;
}

.hc-defeat-flash-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0%,
      rgba(255, 0, 68, 0.04) 1px,
      transparent 3px
    );
  animation: hcDefeatScanlines 0.1s linear infinite;
}

.hc-defeat-flash-overlay::after {
  content: 'SYSTEM FAILURE';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--hc-font-ui);
  font-size: 32px;
  font-weight: bold;
  color: #ff0044;
  text-shadow:
    3px 0 0 rgba(212, 164, 74, 0.7),
    -3px 0 0 rgba(255, 0, 68, 0.7),
    0 0 20px rgba(255, 0, 68, 0.5);
  letter-spacing: 8px;
  animation: hcDefeatText 2s steps(3) forwards;
  opacity: 0;
}

@keyframes hcDefeatFlicker {
  0%   { background: transparent; }
  5%   { background: rgba(255, 0, 68, 0.15); }
  8%   { background: transparent; }
  12%  { background: rgba(212, 164, 74, 0.1); }
  15%  { background: transparent; }
  20%  { background: rgba(255, 0, 68, 0.2); }
  22%  { background: transparent; }
  25%  { background: rgba(255, 255, 255, 0.05); }
  30%  { background: rgba(255, 0, 68, 0.25); }
  32%  { background: transparent; }
  38%  { background: rgba(212, 164, 74, 0.15); }
  40%  { background: transparent; }
  45%  { background: rgba(255, 0, 68, 0.3); }
  48%  { background: rgba(255, 255, 255, 0.1); }
  50%  { background: transparent; }
  55%  { background: rgba(255, 0, 68, 0.2); }
  60%  { background: rgba(212, 164, 74, 0.1); }
  65%  { background: rgba(255, 0, 68, 0.35); }
  70%  { background: transparent; }
  75%  { background: rgba(255, 0, 68, 0.15); }
  80%  { background: rgba(255, 0, 68, 0.4); }
  85%  { background: rgba(0, 0, 0, 0.3); }
  90%  { background: rgba(255, 0, 68, 0.2); }
  95%  { background: rgba(0, 0, 0, 0.6); }
  100% { background: rgba(0, 0, 0, 0.95); }
}

@keyframes hcDefeatScanlines {
  0%   { transform: translateY(0); }
  100% { transform: translateY(4px); }
}

@keyframes hcDefeatText {
  0%   { opacity: 0; transform: translate(-50%, -50%) skewX(0deg); }
  20%  { opacity: 0; }
  30%  { opacity: 1; transform: translate(-48%, -50%) skewX(-2deg); }
  35%  { opacity: 0.3; transform: translate(-52%, -50%) skewX(1.5deg); }
  45%  { opacity: 1; transform: translate(-50%, -50%) skewX(0deg); }
  50%  { opacity: 0; }
  60%  { opacity: 1; transform: translate(-50%, -50%) skewX(-1deg); }
  70%  { opacity: 0.5; transform: translate(-49%, -50%) skewX(0.5deg); }
  80%  { opacity: 1; transform: translate(-50%, -50%) skewX(0deg); }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Screen distortion during defeat — applied to game root */
.hc-defeat-distort {
  animation: hcDefeatDistort 2s ease-out forwards;
}

@keyframes hcDefeatDistort {
  0%   { filter: none; transform: none; }
  10%  { filter: hue-rotate(30deg) saturate(2); transform: skewX(-1deg) scale(1.01); }
  15%  { filter: none; transform: skewX(0.5deg); }
  25%  { filter: hue-rotate(-20deg) brightness(1.5); transform: skewX(-0.8deg) translateX(-3px); }
  30%  { filter: none; transform: none; }
  40%  { filter: hue-rotate(15deg) saturate(1.5) brightness(0.8); transform: skewX(1deg) translateX(2px); }
  45%  { filter: invert(0.1) brightness(1.3); transform: skewY(0.3deg); }
  50%  { filter: none; transform: none; }
  60%  { filter: hue-rotate(-10deg) brightness(0.7); transform: skewX(-0.5deg); }
  70%  { filter: saturate(0.5) brightness(0.5); transform: none; }
  80%  { filter: brightness(0.3); }
  90%  { filter: brightness(0.1); }
  100% { filter: brightness(0); }
}

/* ═══ CAMPAIGN MAP ═══ */
.hc-campaign-map {
  width: 100%;
  padding: 8px;
}

.hc-map-header {
  text-align: center;
  margin-bottom: 8px;
}

.hc-map-title {
  font-family: var(--hc-font-title);
  font-size: 16px;
  color: var(--hc-gold);
  letter-spacing: 2px;
  font-weight: 700;
}

.hc-map-subtitle {
  font-size: 10px;
  color: var(--hc-text-dim);
  letter-spacing: 1px;
}

.hc-map-tile {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
  cursor: default;
  min-height: 48px;
}

.hc-map-tile.has-battle {
  cursor: pointer;
}

.hc-map-tile.active {
  border-color: #FFD700;
  animation: hcMapPulse 1.5s ease-in-out infinite;
}

.hc-map-tile:active.has-battle {
  transform: scale(0.96);
}

@keyframes hcMapPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 215, 0, 0.3); }
  50% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); }
}

.hc-map-tile-svg {
  position: absolute;
  inset: 0;
}

.hc-map-tile-svg svg {
  width: 100%;
  height: 100%;
  display: block;
}

.hc-map-tile-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
}

.hc-map-abbr {
  font-family: var(--hc-font-title);
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  letter-spacing: 1px;
}

/* NPC circles on map territories */
.hc-map-npc-row {
  display: flex;
  gap: 3px;
  justify-content: center;
  margin-top: 1px;
}

.hc-map-npc-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}

.hc-map-npc-circle.alive {
  border-color: #FF4444;
  box-shadow: 0 0 8px rgba(255, 68, 68, 0.4), 0 2px 6px rgba(0, 0, 0, 0.5);
}

.hc-map-npc-circle.defeated {
  border-color: #00CC66;
  opacity: 0.6;
  filter: grayscale(0.5);
}

.hc-map-npc-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.hc-map-npc-check {
  position: absolute;
  bottom: -2px;
  right: -2px;
  font-size: 8px;
  color: #00FF88;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  width: 10px;
  height: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.hc-map-battle-badge {
  font-size: 10px;
  animation: hcMapBattlePulse 1.5s ease-in-out infinite;
}

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

.hc-map-won-badge {
  font-size: 10px;
  color: #00FF88;
}

.hc-map-legend {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
  font-size: 9px;
  color: var(--hc-text-dim);
}

.hc-map-legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 3px;
  vertical-align: middle;
}

/* ═══ FACTION SELECT SCREEN ═══ */
.hc-faction-select {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 2;
}

.hc-faction-title {
  font-family: var(--hc-font-title);
  font-size: 22px;
  color: var(--hc-gold);
  letter-spacing: 3px;
  font-weight: 900;
  margin-bottom: 4px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.hc-faction-subtitle {
  font-size: 11px;
  color: var(--hc-text-dim);
  margin-bottom: 28px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.hc-faction-cards {
  display: flex;
  gap: 14px;
  width: 100%;
  max-width: 340px;
}

.hc-faction-card {
  flex: 1;
  cursor: pointer;
  border-radius: 12px;
  border: 2px solid color-mix(in srgb, var(--faction-color, #C9A84C) 30%, transparent);
  background: rgba(20, 14, 8, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 20px 12px;
  text-align: center;
  transition: all 0.3s ease;
}

.hc-faction-card:active {
  transform: scale(0.97) !important;
}

.hc-faction-icon {
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

.hc-faction-name {
  font-family: var(--hc-font-title);
  font-size: 16px;
  letter-spacing: 2px;
  font-weight: 700;
  margin-bottom: 8px;
}

.hc-faction-desc {
  font-size: 10px;
  color: var(--hc-text-dim);
  line-height: 1.5;
  margin-bottom: 12px;
}

.hc-faction-passive {
  font-size: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 10px;
}

.hc-faction-passive-name {
  margin-bottom: 4px;
  font-size: 10px;
}

.hc-faction-passive-desc {
  color: var(--hc-text-dim);
  line-height: 1.4;
}

.hc-faction-footer {
  font-size: 9px;
  color: var(--hc-text-dim);
  margin-top: 24px;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}