/*
  ═══════════════════════════════════════════════════════════════════════
  UNIFIED CARD STYLING SYSTEM
  Battle Card Format as Source of Truth

  Applied to: Gallery, Deck Builder, Battle Hand, Field, Modals, Admin
  ═════════════════════════════════════════════════════════════════════ */

/* BASE BATTLE CARD — shared across all contexts */
.battle-card,
.tcg-card,
.card {
  position: relative;
  background: #181a1e;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  display: flex;
  flex-direction: column;
}

/* ─────────────────────────────────────────────────────
   RARITY SYSTEM — Color scheme + Glows
   ───────────────────────────────────────────────────── */

.battle-card.rarity-common,
.tcg-card.rarity-common,
.card.rarity-common {
  background: #181a1e;
  border-color: rgba(107, 114, 128, 0.38);
}

.battle-card.rarity-uncommon,
.tcg-card.rarity-uncommon,
.card.rarity-uncommon {
  background: #0f1812;
  border-color: rgba(34, 197, 94, 0.42);
}

.battle-card.rarity-rare,
.tcg-card.rarity-rare,
.card.rarity-rare {
  background: #0d1420;
  border-color: rgba(45, 123, 255, 0.48);
}

.battle-card.rarity-epic,
.tcg-card.rarity-epic,
.card.rarity-epic {
  background: #130d1c;
  border-color: rgba(168, 85, 247, 0.82);
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.48), 0 0 42px rgba(168, 85, 247, 0.18);
}

.battle-card.rarity-legendary,
.tcg-card.rarity-legendary,
.card.rarity-legendary {
  background: #1c1500;
  border-color: rgba(255, 215, 0, 0.88);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.52), 0 0 52px rgba(255, 215, 0, 0.2);
}

/* ─────────────────────────────────────────────────────
   FACTION ACCENT STRIPS (left border inset)
   ───────────────────────────────────────────────────── */

.battle-card.nato-card,
.tcg-card.nato-card,
.card.nato-card {
  box-shadow: inset 3px 0 0 rgba(45, 123, 255, 0.55) !important;
}

.battle-card.brics-card,
.tcg-card.brics-card,
.card.brics-card {
  box-shadow: inset 3px 0 0 rgba(255, 61, 61, 0.55) !important;
}

.battle-card.aegis-card,
.tcg-card.aegis-card,
.card.aegis-card {
  box-shadow: inset 3px 0 0 rgba(0, 212, 255, 0.55) !important;
}

/* Rarity Glow + Faction Accent Merge (Epic) */
.battle-card.rarity-epic.nato-card,
.tcg-card.rarity-epic.nato-card,
.card.rarity-epic.nato-card {
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.48), 0 0 42px rgba(168, 85, 247, 0.18),
    inset 3px 0 0 rgba(45, 123, 255, 0.65) !important;
}

.battle-card.rarity-epic.brics-card,
.tcg-card.rarity-epic.brics-card,
.card.rarity-epic.brics-card {
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.48), 0 0 42px rgba(168, 85, 247, 0.18),
    inset 3px 0 0 rgba(255, 61, 61, 0.65) !important;
}

.battle-card.rarity-epic.aegis-card,
.tcg-card.rarity-epic.aegis-card,
.card.rarity-epic.aegis-card {
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.48), 0 0 42px rgba(168, 85, 247, 0.18),
    inset 3px 0 0 rgba(0, 212, 255, 0.65) !important;
}

/* Rarity Glow + Faction Accent Merge (Legendary) */
.battle-card.rarity-legendary.nato-card,
.tcg-card.rarity-legendary.nato-card,
.card.rarity-legendary.nato-card {
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.52), 0 0 52px rgba(255, 215, 0, 0.2),
    inset 3px 0 0 rgba(45, 123, 255, 0.65) !important;
}

.battle-card.rarity-legendary.brics-card,
.tcg-card.rarity-legendary.brics-card,
.card.rarity-legendary.brics-card {
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.52), 0 0 52px rgba(255, 215, 0, 0.2),
    inset 3px 0 0 rgba(255, 61, 61, 0.65) !important;
}

.battle-card.rarity-legendary.aegis-card,
.tcg-card.rarity-legendary.aegis-card,
.card.rarity-legendary.aegis-card {
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.52), 0 0 52px rgba(255, 215, 0, 0.2),
    inset 3px 0 0 rgba(0, 212, 255, 0.65) !important;
}

/* ─────────────────────────────────────────────────────
   INTERACTION STATES
   ───────────────────────────────────────────────────── */

/* Desktop/pointer hover only — avoids layout-shift on touch tap */
@media (hover: hover) and (pointer: fine) {
  .battle-card:hover,
  .tcg-card:hover,
  .card:hover {
    transform: translateY(-3px) scale(1.02);
  }

  .battle-card.rarity-epic:hover,
  .tcg-card.rarity-epic:hover,
  .card.rarity-epic:hover {
    box-shadow: 0 0 24px rgba(168, 85, 247, 0.62), 0 0 56px rgba(168, 85, 247, 0.22) !important;
  }

  .battle-card.rarity-legendary:hover,
  .tcg-card.rarity-legendary:hover,
  .card.rarity-legendary:hover {
    box-shadow: 0 0 28px rgba(255, 215, 0, 0.72), 0 0 64px rgba(255, 215, 0, 0.26) !important;
  }
}

.battle-card:active,
.tcg-card:active,
.card:active {
  transform: scale(0.95);
  transition: transform 0.06s;
}

/* Selected/In-Deck State — much more visible */
.battle-card.selected,
.tcg-card.selected,
.card.selected {
  border-color: #ffd700;
  border-width: 2px;
  background: rgba(255, 215, 0, 0.1);
  box-shadow: 0 0 22px rgba(255, 215, 0, 0.38), inset 0 0 10px rgba(255, 215, 0, 0.08) !important;
  transform: translateY(-2px);
}

/* Disabled/Locked State */
.battle-card.card-locked,
.tcg-card.card-locked,
.card.card-locked {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.battle-card.dbc-full,
.card.dbc-full {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────
   FULL-ART IMAGE (Gallery / Large Display)
   ───────────────────────────────────────────────────── */

.tcg-fullart,
.card-fullart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Icon background — centered emoji for cards without art */
.tcg-icon-bg,
.card-icon-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  padding-bottom: 1.6rem;
  pointer-events: none;
}

.battle-card.rarity-common .card-icon-bg,
.tcg-card.rarity-common .tcg-icon-bg {
  background: radial-gradient(circle at 50% 42%, rgba(107, 114, 128, 0.18) 0%, transparent 70%);
}

.battle-card.rarity-uncommon .card-icon-bg,
.tcg-card.rarity-uncommon .tcg-icon-bg {
  background: radial-gradient(circle at 50% 42%, rgba(34, 197, 94, 0.2) 0%, transparent 70%);
}

.battle-card.rarity-rare .card-icon-bg,
.tcg-card.rarity-rare .tcg-icon-bg {
  background: radial-gradient(circle at 50% 42%, rgba(45, 123, 255, 0.24) 0%, transparent 70%);
}

.battle-card.rarity-epic .card-icon-bg,
.tcg-card.rarity-epic .tcg-icon-bg {
  background: radial-gradient(circle at 50% 42%, rgba(168, 85, 247, 0.3) 0%, transparent 70%);
}

.battle-card.rarity-legendary .card-icon-bg,
.tcg-card.rarity-legendary .tcg-icon-bg {
  background: radial-gradient(circle at 50% 42%, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
}

/* ─────────────────────────────────────────────────────
   CARD CONTENT / LAYOUT AREAS
   ───────────────────────────────────────────────────── */

/* Top row: faction/rarity badges */
.card-top,
.tcg-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: absolute;
  top: 0.28rem;
  left: 0.28rem;
  right: 0.28rem;
  z-index: 4;
}

/* Badges */
.tcg-cost-badge,
.card-cost-badge {
  position: absolute;
  top: 0.28rem;
  left: 0.28rem;
  background: rgba(0, 0, 0, 0.82);
  color: #ffd700;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.62rem;
  padding: 0.05rem 0.28rem;
  letter-spacing: 0.04em;
  z-index: 4;
  line-height: 1.35;
  border-radius: 3px;
  pointer-events: none;
}

.tcg-faction-badge,
.card-faction-badge {
  position: absolute;
  top: 0.28rem;
  right: 0.28rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.44rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.05rem 0.24rem;
  z-index: 4;
  line-height: 1.35;
  border-radius: 2px;
  pointer-events: none;
}

.tcg-faction-badge.nato,
.card-faction-badge.nato {
  background: rgba(45, 123, 255, 0.92);
  color: white;
}

.tcg-faction-badge.brics,
.card-faction-badge.brics {
  background: rgba(255, 45, 45, 0.92);
  color: white;
}

.tcg-faction-badge.aegis,
.card-faction-badge.aegis {
  background: rgba(0, 212, 255, 0.92);
  color: #001a22;
}

/* Bottom gradient footer — name over art */
.tcg-footer,
.card-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.6rem 0.4rem 0.32rem;
  z-index: 4;
  pointer-events: none;
}

.battle-card.rarity-common .card-footer,
.tcg-card.rarity-common .tcg-footer {
  background: linear-gradient(to top, rgba(10, 10, 12, 0.94) 0%, rgba(10, 10, 12, 0.72) 58%, transparent 100%);
}

.battle-card.rarity-uncommon .card-footer,
.tcg-card.rarity-uncommon .tcg-footer {
  background: linear-gradient(to top, rgba(4, 18, 8, 0.94) 0%, rgba(4, 18, 8, 0.72) 58%, transparent 100%);
}

.battle-card.rarity-rare .card-footer,
.tcg-card.rarity-rare .tcg-footer {
  background: linear-gradient(to top, rgba(4, 10, 22, 0.94) 0%, rgba(4, 10, 22, 0.72) 58%, transparent 100%);
}

.battle-card.rarity-epic .card-footer,
.tcg-card.rarity-epic .tcg-footer {
  background: linear-gradient(to top, rgba(10, 4, 22, 0.94) 0%, rgba(10, 4, 22, 0.72) 58%, transparent 100%);
}

.battle-card.rarity-legendary .card-footer,
.tcg-card.rarity-legendary .tcg-footer {
  background: linear-gradient(to top, rgba(18, 12, 0, 0.94) 0%, rgba(18, 12, 0, 0.72) 58%, transparent 100%);
}

.tcg-footer-name,
.card-footer-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #f0e8ff;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─────────────────────────────────────────────────────
   STAT BOXES (ATK / HP / SPD / ARM)
   ───────────────────────────────────────────────────── */

.card-stats,
.modal-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
  margin-bottom: 0.35rem;
}

.stat,
.modal-stat {
  text-align: center;
  padding: 0.45rem 0.25rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
}

.stat-icon,
.mstat-icon {
  font-size: 0.8rem;
  display: block;
  line-height: 1;
  margin-bottom: 0.15rem;
}

.stat-val,
.mstat-val {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
  color: #e8eaed;
}

.stat-name,
.mstat-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.54rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8b9cb6;
  margin-top: 0.1rem;
}

/* ─────────────────────────────────────────────────────
   ABILITY / PERK SECTIONS
   ───────────────────────────────────────────────────── */

.card-ability,
.modal-perk-box {
  background: rgba(255, 215, 0, 0.08);
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 4px;
  padding: 0.4rem;
  margin-top: 0.3rem;
}

.modal-tactical-box {
  background: rgba(0, 180, 255, 0.07);
  border: 1px solid rgba(0, 180, 255, 0.28);
}

.card-ability-name,
.modal-perk-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.62rem;
  text-transform: uppercase;
  color: #ffd700;
  margin-bottom: 0.1rem;
}

.modal-tactical-box .modal-perk-name {
  color: #00c6ff;
}

.card-ability-desc,
.modal-perk-desc {
  font-size: 0.58rem;
  line-height: 1.3;
  color: rgba(240, 232, 255, 0.8);
}

.modal-tac-meta {
  font-size: 0.72rem;
  color: rgba(140, 170, 200, 0.6);
  margin-top: 0.3rem;
}

/* ─────────────────────────────────────────────────────
   RESPONSIVE SIZING
   ───────────────────────────────────────────────────── */

/* Gallery — Large Cards */
.tcg-card {
  aspect-ratio: 5 / 7;
  min-width: 80px;
}

/* Deck Builder / Hand — Medium Cards */
.card.dbc,
.battle-card.hand-card,
.card.hand-card {
  aspect-ratio: auto;
  min-width: 100px;
  max-width: 160px;
}

/* Field / Battle — Variable Size */
.battle-card.field-card,
.card.field-card {
  aspect-ratio: auto;
  min-width: 120px;
  max-width: 200px;
}

/* Modal — Full-width */
.card-inspect-modal {
  width: 100%;
  aspect-ratio: auto;
}

/* ─────────────────────────────────────────────────────
   RARITY BAR — visible color stripe at bottom of tile
   ───────────────────────────────────────────────────── */

.tcg-rarity-bar,
.card-rarity-bar-stripe {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 5;
  pointer-events: none;
}

.tcg-card.rarity-common .tcg-rarity-bar,
.card.rarity-common .card-rarity-bar-stripe {
  background: rgba(107, 114, 128, 0.7);
}

.tcg-card.rarity-uncommon .tcg-rarity-bar,
.card.rarity-uncommon .card-rarity-bar-stripe {
  background: rgba(34, 197, 94, 0.85);
}

.tcg-card.rarity-rare .tcg-rarity-bar,
.card.rarity-rare .card-rarity-bar-stripe {
  background: rgba(45, 123, 255, 0.9);
}

.tcg-card.rarity-epic .tcg-rarity-bar,
.card.rarity-epic .card-rarity-bar-stripe {
  background: rgba(168, 85, 247, 1);
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.75), 0 0 20px rgba(168, 85, 247, 0.35);
}

.tcg-card.rarity-legendary .tcg-rarity-bar,
.card.rarity-legendary .card-rarity-bar-stripe {
  background: linear-gradient(90deg, #ffd700, #ff9500);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.7), 0 0 20px rgba(255, 215, 0, 0.3);
}

/* ─────────────────────────────────────────────────────
   ACCESSIBILITY — Reduced Motion
   ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .battle-card,
  .tcg-card,
  .card {
    transition: none !important;
  }

  .battle-card:active,
  .tcg-card:active,
  .card:active {
    transform: none !important;
  }

  .battle-card.selected,
  .tcg-card.selected,
  .card.selected {
    transform: none !important;
  }
}