/* Aetherra — tactical card layout (readable sections + unique art slot) */

.vh-card.vh-tactical {
  --vh-ink: #e2e8f0;
  --vh-accent: #22d3ee;
  --vh-border: rgba(34, 211, 238, 0.35);
  --vh-atk: #fbbf24;
  --vh-hp: #34d399;
  --vh-cost: #7dd3fc;

  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  aspect-ratio: 2.5 / 3.65;
  border-radius: 0.65rem;
  overflow: hidden;
  color: var(--vh-ink);
  background: rgba(2, 6, 23, 0.72);
  border: 1px solid var(--vh-border);
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.42);
  font-size: clamp(0.55rem, 2.8cqw, 0.82rem);
  container-type: inline-size;
  text-align: left;
}

.vh-card.vh-tactical.is-interactive {
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.vh-card.vh-tactical.is-interactive:hover,
.vh-card.vh-tactical.is-interactive:focus-visible {
  transform: translateY(-3px);
  outline: none;
  border-color: rgba(34, 211, 238, 0.65);
  box-shadow:
    0 0 0 2px rgba(34, 211, 238, 0.18),
    0 12px 28px rgba(0, 0, 0, 0.5);
}

.vh-card.vh-tactical.is-selected {
  border-color: rgba(34, 211, 238, 0.85);
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.35), 0 10px 24px rgba(34, 211, 238, 0.18);
}

.vh-primeborn.vh-tactical {
  border-color: rgba(251, 191, 36, 0.55);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.15), 0 8px 24px rgba(0, 0, 0, 0.42);
}

/* ——— Header ——— */
.vh-tac-header {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.45em;
  flex-wrap: wrap;
  padding: 0.55em 0.6em 0.35em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
}

.vh-tac-header-main {
  flex: 1 1 100%;
  min-width: 0;
}

.vh-tac-sub {
  font-size: 0.68em;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
  line-height: 1.2;
  text-align: center;
}

.vh-tac-name {
  margin: 0.12em 0 0;
  font-size: 0.98em;
  font-weight: 800;
  line-height: 1.15;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.vh-tac-header-badges {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.28em;
  flex-wrap: wrap;
  justify-content: center;
  flex: 1 1 100%;
}

.vh-tac-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.55em;
  padding: 0.12em 0.38em;
  border-radius: 0.35em;
  font-size: 0.72em;
  font-weight: 800;
  line-height: 1.1;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.28);
}

.vh-tac-badge-cost {
  color: #bae6fd;
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(14, 116, 144, 0.35);
}

.vh-tac-badge-atk {
  color: #fde68a;
  border-color: rgba(251, 191, 36, 0.35);
  background: rgba(120, 53, 15, 0.35);
}

.vh-tac-badge-hp {
  color: #a7f3d0;
  border-color: rgba(52, 211, 153, 0.35);
  background: rgba(6, 78, 59, 0.35);
}

.vh-tac-badge-mark {
  font-size: 0.85em;
  padding: 0.08em 0.32em;
}

/* ——— Flavor line ——— */
.vh-tac-flavor {
  margin: 0;
  padding: 0.35em 0.6em 0;
  font-size: 0.72em;
  line-height: 1.4;
  color: #94a3b8;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ——— Art window (4:3) ——— */
.vh-tac-art {
  position: relative;
  flex: 0 0 auto;
  margin: 0.45em 0.55em 0.35em;
  aspect-ratio: 4 / 3;
  border-radius: 0.45em;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 45%, rgba(8, 47, 73, 0.85) 100%);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.35);
}

.vh-tac-art-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
}

.vh-tac-art-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #64748b;
}

/* ——— Stat row (5-up) ——— */
.vh-tac-stat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.22em;
  margin: 0 0.55em 0.35em;
}

.vh-tac-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.08em;
  min-height: 2.1em;
  padding: 0.18em 0.12em;
  border-radius: 0.35em;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.vh-tac-stat-label {
  font-size: 0.58em;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
}

.vh-tac-stat-value {
  font-size: 0.78em;
  font-weight: 800;
  color: #f1f5f9;
  line-height: 1;
}

/* ——— Meta grid ——— */
.vh-tac-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.28em 0.45em;
  margin: 0 0.55em 0.35em;
  font-size: 0.68em;
}

.vh-tac-meta-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12em;
  padding: 0.22em 0.35em;
  border-radius: 0.3em;
  background: rgba(255, 255, 255, 0.04);
  text-align: center;
}

.vh-tac-meta-label {
  color: #64748b;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.vh-tac-meta-value {
  color: #cbd5e1;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ——— Abilities ——— */
.vh-tac-abilities {
  margin: auto 0.55em 0.5em;
  padding: 0.35em 0.4em;
  border-radius: 0.4em;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  min-height: 0;
  overflow: hidden;
  text-align: center;
}

.vh-tac-ability-line,
.vh-tac-abilities .vh-rune-tag {
  margin: 0;
  font-size: 0.72em;
  line-height: 1.32;
  color: #cbd5e1;
}

.vh-tac-abilities .vh-rune-kw {
  color: #fbbf24;
  font-weight: 800;
}

.vh-tac-abilities .vh-rune-desc {
  color: #e2e8f0;
}

/* ——— Element accents ——— */
.vh-type-Verdant { --vh-accent: #4ade80; --vh-border: rgba(74, 222, 128, 0.35); }
.vh-type-Emberborn { --vh-accent: #fb923c; --vh-border: rgba(251, 146, 60, 0.35); }
.vh-type-Tidebound { --vh-accent: #38bdf8; --vh-border: rgba(56, 189, 248, 0.35); }
.vh-type-Gale { --vh-accent: #a5f3fc; --vh-border: rgba(165, 243, 252, 0.35); }
.vh-type-Stonekin { --vh-accent: #a8a29e; --vh-border: rgba(168, 162, 158, 0.35); }
.vh-type-Umbral { --vh-accent: #a78bfa; --vh-border: rgba(167, 139, 250, 0.35); }
.vh-type-Aether { --vh-accent: #c4b5fd; --vh-border: rgba(196, 181, 253, 0.35); }
.vh-type-Forged { --vh-accent: #94a3b8; --vh-border: rgba(148, 163, 184, 0.35); }
.vh-type-Neutral { --vh-accent: #94a3b8; --vh-border: rgba(148, 163, 184, 0.3); }

.vh-type-Verdant .vh-tac-art { background: linear-gradient(135deg, #052e16, #14532d 55%, #064e3b); }
.vh-type-Emberborn .vh-tac-art { background: linear-gradient(135deg, #431407, #7c2d12 55%, #9a3412); }
.vh-type-Tidebound .vh-tac-art { background: linear-gradient(135deg, #082f49, #0c4a6e 55%, #155e75); }
.vh-type-Gale .vh-tac-art { background: linear-gradient(135deg, #1e293b, #334155 55%, #475569); }
.vh-type-Stonekin .vh-tac-art { background: linear-gradient(135deg, #292524, #44403c 55%, #57534e); }
.vh-type-Umbral .vh-tac-art { background: linear-gradient(135deg, #3b0764, #581c87 55%, #6b21a8); }
.vh-type-Aether .vh-tac-art { background: linear-gradient(135deg, #4c1d95, #6b21a8 55%, #7e22ce); }
.vh-type-Forged .vh-tac-art { background: linear-gradient(135deg, #0f172a, #334155 55%, #475569); }

/* ——— Size variants ——— */
.vh-tactical.vh-compact .vh-tac-flavor,
.vh-tactical.vh-compact .vh-tac-meta-grid,
.vh-tactical.vh-compact .vh-tac-stat-grid,
.vh-tactical.vh-compact .vh-tac-abilities {
  display: none;
}

.vh-tactical.vh-compact .vh-tac-art {
  flex: 1 1 auto;
  margin-top: 0.35em;
}

.vh-tactical.vh-on-board {
  aspect-ratio: unset;
  height: 100%;
  width: 100%;
}

.vh-tactical.vh-on-board .vh-tac-meta-grid {
  display: none;
}

.vh-tactical.vh-on-board .vh-tac-flavor {
  -webkit-line-clamp: 1;
}

.vh-tactical.vh-hand {
  aspect-ratio: 2.5 / 4.1;
  font-size: clamp(0.66rem, 1.12vw, 0.84rem);
}

.vh-tactical.vh-hand .vh-tac-meta-grid {
  display: none;
}

.vh-tactical.vh-hand .vh-tac-flavor {
  -webkit-line-clamp: 1;
}

.vh-tactical.vh-browser {
  aspect-ratio: 2.5 / 3.85;
  font-size: clamp(0.48rem, 3.4cqw, 0.76rem);
}

.vh-tactical.vh-browser .vh-tac-art {
  aspect-ratio: 4 / 3;
}

.vh-tactical.vh-full {
  aspect-ratio: auto;
  min-height: 22rem;
  max-width: 280px;
}

.vh-tactical.vh-full .vh-tac-abilities {
  flex: 1;
}

/* ——— Board status badges ——— */
.vh-board-badges {
  position: absolute;
  top: 0.2em;
  right: 0.2em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15em;
  max-width: 70%;
  justify-content: flex-end;
  z-index: 6;
  pointer-events: none;
}

.vh-board-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1em;
  padding: 0.05em 0.25em;
  border-radius: 0.35em;
  font-size: 0.62em;
  font-weight: 800;
  line-height: 1.2;
  background: rgba(8, 12, 22, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #e2e8f0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.vh-badge-shield { color: #93c5fd; border-color: rgba(96, 165, 250, 0.5); }
.vh-badge-poison { color: #86efac; border-color: rgba(74, 222, 128, 0.5); }
.vh-badge-burn { color: #fdba74; border-color: rgba(251, 146, 60, 0.5); }
.vh-badge-stun { color: #67e8f9; border-color: rgba(34, 211, 238, 0.5); }
.vh-badge-stealth { color: #d8b4fe; border-color: rgba(192, 132, 252, 0.5); }
.vh-badge-guard { color: #fcd34d; border-color: rgba(251, 191, 36, 0.5); }
.vh-badge-windfury { color: #c4b5fd; border-color: rgba(167, 139, 250, 0.5); }
.vh-badge-exhausted { color: #94a3b8; }

/* ——— Card back ——— */
.vh-card-back {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 2.5 / 3.5;
  border-radius: 1rem;
  background: radial-gradient(circle at 50% 35%, #1e293b, #020617 72%);
  border: 2px solid #334155;
  overflow: hidden;
}

.vh-back-spine {
  position: absolute;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: 0.5em;
  background: linear-gradient(180deg, #38bdf8, transparent, #38bdf8);
}

.vh-back-crown {
  font-size: 2.5em;
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.5));
}

.vh-back-title {
  position: absolute;
  bottom: 0.85em;
  font-size: 0.72em;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #94a3b8;
}

.cards-grid .vh-card {
  height: 100%;
}

.demo-card-wrap {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0 1rem;
}

.demo-card-wrap .vh-card {
  width: min(100%, 280px);
}

/* Legacy aliases for slot scaling hooks */
.vh-art-window,
.vh-tac-art { /* shared hook */ }
.vh-art-img,
.vh-tac-art-img { /* shared hook */ }
.vh-card-name,
.vh-tac-name { /* shared hook */ }