/* Broken Arrow TCG - Game Styles */
/* Dark military aesthetic, mobile-first */
/* Dynamic card count (see CARDS array), draw-based battle, faction passives */

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

:root {
  --bg-dark: #0a0c10;
  --bg-card: #11141c;
  --bg-card-hover: #181c28;
  --accent-red: #ff2d2d;
  --accent-orange: #ff6b35;
  --accent-gold: #ffd700;
  --text-primary: #f0f3f8;
  --text-secondary: #c4cdd9;
  --border-subtle: rgba(255,255,255,0.08);
  --nato-blue: #2d7bff;
  --brics-red: #ff3d3d;
  --aegis-teal: #00e5ff;
  --hp-green: #22c55e;
  --hp-yellow: #eab308;
  --hp-red: #ef4444;
}

body {
  font-family: 'Space Grotesk', sans-serif;
  background: var(--bg-dark);
  color: var(--text-primary);
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}

/* ── Battle scroll lock — applied via JS when Game.screen === 'battle' ──
   Prevents page scroll that breaks card drag mechanics on mobile.
   Only active during active battle; all other screens remain scrollable. */
html.saw-battle-lock,
html.saw-battle-lock body {
  overflow: hidden !important;
  height: 100%;
  overscroll-behavior: none;
}

/* ═══ SCREEN TRANSITIONS ═══ */
#game-root {
  min-height: 100vh;
  position: relative;
}

.screen {
  min-height: 100vh;
  padding: 1.5rem;
  animation: fadeIn 0.4s ease;
}

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

/* ═══════════════════════════════════════════════════════════════
   UNIFIED CARD STYLING — Battle Card Style as Source of Truth
   Applied across: Battle, Hand, Gallery, Admin, Deck Builder
   ═══════════════════════════════════════════════════════════════ */

/* ── TYPE-BASED LEFT BORDER COLOR PALETTE (Reusable) ── */
.bt-type-infantry  { border-left-color: #22c55e !important; }
.bt-type-aircraft  { border-left-color: #3b82f6 !important; }
.bt-type-vehicle   { border-left-color: #f97316 !important; }
.bt-type-naval     { border-left-color: #ef4444 !important; }
.bt-type-equipment { border-left-color: #eab308 !important; }
.bt-type-support   { border-left-color: #a855f7 !important; }

/* ═══ SHARED COMPONENTS ═══ */
.game-header {
  text-align: center;
  margin-bottom: 1.5rem;
  padding-top: 0.5rem;
}

.game-header .badge {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-red);
  border: 1px solid rgba(255,45,45,0.3);
  padding: 0.3rem 1rem;
  display: inline-block;
  margin-bottom: 1rem;
}

.game-header h1 {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 6vw, 3rem);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.02em;
}

.game-header p {
  color: var(--text-secondary);
  margin-top: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.4;
}

.btn {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: none;
  padding: 0.8rem 2.5rem;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: var(--accent-red);
  color: white;
}

.btn-primary:hover {
  background: #ff4444;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(255,45,45,0.3);
}

.btn-primary:disabled {
  background: #333;
  color: #666;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-secondary {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

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

.back-btn {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-left: 2px solid rgba(255,255,255,0.08);
  cursor: pointer;
  padding: 0.4rem 0.75rem;
  margin-bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.2s, border-color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.back-btn:hover {
  color: var(--text-primary);
  border-color: rgba(255,255,255,0.2);
}

/* ═══ FACTION SELECT SCREEN ═══ */
.faction-select {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 1.5rem;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,45,45,0.06) 0%, transparent 60%),
    var(--bg-dark);
}

.faction-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 700px;
  width: 100%;
  margin-top: 2rem;
}

@media (max-width: 540px) {
  .faction-options {
    grid-template-columns: 1fr;
    max-width: 340px;
  }
}

.faction-option {
  padding: 2rem 1.5rem;
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all 0.25s;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: var(--bg-card);
  -webkit-tap-highlight-color: transparent;
}

.faction-option::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  transition: height 0.25s;
}

.faction-option.nato::before { background: var(--nato-blue); }
.faction-option.brics::before { background: var(--brics-red); }

.faction-option::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.25s;
}

.faction-option.nato::after {
  background: linear-gradient(135deg, rgba(45,123,255,0.07) 0%, transparent 60%);
}

.faction-option.brics::after {
  background: linear-gradient(135deg, rgba(255,61,61,0.07) 0%, transparent 60%);
}

.faction-option:hover {
  transform: translateY(-4px);
}

.faction-option:hover::after {
  opacity: 1;
}

.faction-option:hover::before {
  height: 4px;
}

.faction-option.nato:hover {
  border-color: rgba(45,123,255,0.4);
  box-shadow: 0 8px 32px rgba(45,123,255,0.12);
}

.faction-option.brics:hover {
  border-color: rgba(255,61,61,0.4);
  box-shadow: 0 8px 32px rgba(255,61,61,0.12);
}

.faction-option .faction-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 2.2rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.3rem;
}

.faction-option.nato .faction-name { color: var(--nato-blue); }
.faction-option.brics .faction-name { color: var(--brics-red); }

.faction-option .passive-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 0.75rem;
}

.faction-option .passive-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.faction-cards-count {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-top: 0.75rem;
  opacity: 0.7;
}

.card-count-badge {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: 2rem;
  padding: 0.4rem 1rem;
  border: 1px solid var(--border-subtle);
}

/* ═══ DECK BUILDER SCREEN ═══ */
.deck-builder {
  max-width: 1100px;
  margin: 0 auto;
  padding-bottom: 100px;
}

.budget-bar {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  position: sticky;
  top: 0;
  z-index: 10;
}

.budget-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.budget-label {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.budget-value {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
}

.budget-value.over { color: var(--accent-red); }
.budget-value.ok { color: var(--hp-green); }

.budget-meter {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.budget-fill {
  height: 100%;
  background: var(--hp-green);
  transition: width 0.3s, background 0.3s;
}

.budget-fill.warn { background: var(--hp-yellow); }
.budget-fill.over { background: var(--accent-red); }

.deck-info {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.deck-count {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.deck-type-dist {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.type-chip {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.65rem;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.03);
  padding: 0.15rem 0.4rem;
  letter-spacing: 0.05em;
  opacity: 0.5;
}

.type-chip.has-cards {
  opacity: 1;
  color: var(--accent-gold);
  background: rgba(255,215,0,0.08);
}

/* ═══ FILTER & SORT ═══ */
.filter-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.filter-tab {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 2rem;
  text-align: center;
}

.filter-tab:hover {
  color: var(--text-primary);
  border-color: rgba(255,255,255,0.15);
}

.filter-tab.active {
  color: var(--accent-gold);
  border-color: rgba(255,215,0,0.3);
  background: rgba(255,215,0,0.05);
}

.sort-row {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.sort-label {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-right: 0.2rem;
}

.sort-btn {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.6rem;
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
}

.sort-btn.active {
  color: var(--accent-gold);
  border-color: rgba(255,215,0,0.3);
}

.sort-btn:hover {
  color: var(--text-primary);
}

/* ═══ CARD POOL ═══ */
.card-pool {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 0.5rem;
}

@media (max-width: 400px) {
  .card-pool {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
  }
}

@media (min-width: 768px) {
  .card-pool {
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 0.6rem;
  }
}

/* ═══ CARD COMPONENT — UNIFIED BATTLE CARD FORMAT ═══ */
/* All cards use the battle card aesthetic: dark bg + rarity colors + faction accent */
.card {
  background: var(--bg-card);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 0;
  position: relative;
  overflow: hidden;
  transition: all 0.2s;
  cursor: pointer;
  user-select: none;
  display: flex;
  flex-direction: column;
  aspect-ratio: auto;
}

/* Rarity: background color + border. Glow ONLY for Epic & Legendary */
.card.rarity-common    { background: #181a1e; border-color: rgba(107,114,128,0.38); }
.card.rarity-uncommon  { background: #0f1812; border-color: rgba(34,197,94,0.42); }
.card.rarity-rare      { background: #0d1420; border-color: rgba(45,123,255,0.48); }
.card.rarity-epic      { background: #130d1c; border-color: rgba(168,85,247,0.72); box-shadow: 0 0 12px rgba(168,85,247,0.22), 0 0 30px rgba(168,85,247,0.08); }
.card.rarity-legendary { background: #1c1500; border-color: rgba(255,215,0,0.74); box-shadow: 0 0 15px rgba(255,215,0,0.3), 0 0 38px rgba(255,215,0,0.1); }

/* Faction left accent strip (inset shadow) */
.card.nato-card  { box-shadow: inset 3px 0 0 rgba(45,123,255,0.55) !important; }
.card.brics-card { box-shadow: inset 3px 0 0 rgba(255,61,61,0.55) !important; }
.card.aegis-card { box-shadow: inset 3px 0 0 rgba(0,212,255,0.55) !important; }

/* Epic + Legendary: merge rarity glow + faction accent */
.card.rarity-epic.nato-card   { box-shadow: 0 0 12px rgba(168,85,247,0.22), 0 0 30px rgba(168,85,247,0.08), inset 3px 0 0 rgba(45,123,255,0.5) !important; }
.card.rarity-epic.brics-card  { box-shadow: 0 0 12px rgba(168,85,247,0.22), 0 0 30px rgba(168,85,247,0.08), inset 3px 0 0 rgba(255,61,61,0.5) !important; }
.card.rarity-epic.aegis-card  { box-shadow: 0 0 12px rgba(168,85,247,0.22), 0 0 30px rgba(168,85,247,0.08), inset 3px 0 0 rgba(0,212,255,0.5) !important; }
.card.rarity-legendary.nato-card  { box-shadow: 0 0 15px rgba(255,215,0,0.3), 0 0 38px rgba(255,215,0,0.1), inset 3px 0 0 rgba(45,123,255,0.5) !important; }
.card.rarity-legendary.brics-card { box-shadow: 0 0 15px rgba(255,215,0,0.3), 0 0 38px rgba(255,215,0,0.1), inset 3px 0 0 rgba(255,61,61,0.5) !important; }
.card.rarity-legendary.aegis-card { box-shadow: 0 0 15px rgba(255,215,0,0.3), 0 0 38px rgba(255,215,0,0.1), inset 3px 0 0 rgba(0,212,255,0.5) !important; }

.card:hover {
  transform: translateY(-3px) scale(1.02);
}

.card.rarity-epic:hover    { box-shadow: 0 0 20px rgba(168,85,247,0.42), 0 0 44px rgba(168,85,247,0.14) !important; }
.card.rarity-legendary:hover { box-shadow: 0 0 24px rgba(255,215,0,0.55), 0 0 52px rgba(255,215,0,0.16) !important; }

.card:active {
  transform: scale(0.95);
  transition: transform 0.06s;
}

.card.selected {
  border-color: var(--accent-gold);
  background: rgba(255,215,0,0.06);
  box-shadow: 0 0 14px rgba(255,215,0,0.12) !important;
}

.card.nato-card { border-left: 2px solid rgba(45,123,255,0.4); }
.card.brics-card { border-left: 2px solid rgba(255,61,61,0.4); }

/* Card wrapper — now inner content container */
.card-content {
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.4rem;
}

.card-icon {
  font-size: 1.3rem;
  line-height: 1;
  flex-shrink: 0;
}

.card-deploy {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.68rem;
  background: rgba(0,0,0,0.82);
  color: var(--accent-gold);
  padding: 0.05rem 0.28rem;
  letter-spacing: 0.04em;
  min-width: 1.2rem;
  text-align: center;
  border-radius: 3px;
  line-height: 1.35;
}

.card-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
  margin-bottom: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #f0e8ff;
}

.card-type-label {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.35rem;
}

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

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

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

.stat-val {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--text-primary);
}

.stat-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.54rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: 0.1rem;
}

.card-desc {
  font-size: 0.62rem;
  color: var(--text-secondary);
  line-height: 1.35;
  margin-top: 0.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Ability/Perk section (passive + tactical) */
.card-ability {
  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;
  font-size: 0.58rem;
}

.card-ability-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.62rem;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 0.1rem;
}

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

/* Faction boost badge */
.faction-boost-badge {
  position: absolute;
  top: 0.3rem;
  right: 2rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.45rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(255,215,0,0.15);
  color: var(--accent-gold);
  padding: 0.1rem 0.25rem;
}

/* Selection checkmark */
.card .selected-check {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  width: 1.1rem;
  height: 1.1rem;
  background: var(--accent-gold);
  color: var(--bg-dark);
  font-size: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.2s;
}

.card.selected .selected-check {
  opacity: 1;
}

/* ═══ DEPLOY BUTTON (fixed bottom) ═══ */
.deploy-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border-subtle);
  padding: 0.75rem 1.5rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  z-index: 20;
}

.deploy-bar .deck-summary {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--text-secondary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ═══ DECK BUILDER COMPACT TILE (DBC) — UNIFIED BATTLE CARD ═══ */
/* DBC inherits all battle card styling; responsive sizing handled separately */

.card.dbc {
  padding: 0.65rem 0.65rem 0.5rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.card.dbc:hover {
  transform: translateY(-2px) scale(1.01);
}

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

.card.dbc.dbc-full:hover {
  transform: none;
  border-color: var(--border-subtle);
}

.dbc-top {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.25rem;
}

.dbc-icon {
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}

.dbc-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
}

.dbc-deploy {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  background: rgba(255,215,0,0.15);
  color: var(--accent-gold);
  padding: 0.1rem 0.3rem;
  min-width: 1.2rem;
  text-align: center;
  flex-shrink: 0;
  line-height: 1.2;
}

.dbc-hp {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.58rem;
  color: var(--text-secondary);
  margin-top: 0.08rem;
}

/* ═══ DBC V2 — ARSENAL-STYLE CARDS (matches landing page carousel) ═══ */

/* Override compact padding with more breathing room */
.card.dbc {
  padding: 0.65rem 0.65rem 0.5rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

/* Top row: icon left, cost badge right */
.dbc2-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.35rem;
}

.dbc2-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.dbc2-cost {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--accent-gold);
  background: rgba(255,215,0,0.12);
  border: 1px solid rgba(255,215,0,0.2);
  padding: 0.1rem 0.35rem;
  line-height: 1.4;
}

/* Card name — bold + prominent */
.dbc2-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
  margin-bottom: 0.22rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
}

/* Faction pill + type row */
.dbc2-meta {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  margin-bottom: 0.38rem;
  flex-wrap: wrap;
}

.dbc2-faction {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.08rem 0.3rem;
  font-weight: 700;
}

.dbc2-type-text {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Inline stats row with icons */
.dbc2-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.3rem;
  margin-bottom: 0.3rem;
}

.dbc2-s {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.62rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.08rem;
  white-space: nowrap;
}

.dbc2-s b {
  font-weight: 700;
  font-size: 0.7rem;
  color: var(--text-primary);
}

/* Footer: ability name + in-deck badge */
.dbc2-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  min-height: 1rem;
}

.dbc2-ability {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--nato-blue);
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.dbc2-no-ability {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.5;
}

/* "IN DECK" check badge shown when selected */
.dbc2-in-deck {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-gold);
  background: rgba(255,215,0,0.12);
  border: 1px solid rgba(255,215,0,0.25);
  padding: 0.06rem 0.3rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Small info button (bottom-right) — opens inspect modal */
.dbc2-info-btn {
  position: absolute;
  bottom: 0.28rem;
  right: 0.28rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.3);
  font-size: 0.6rem;
  width: 1.2rem;
  height: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  font-family: 'Space Grotesk', sans-serif;
  line-height: 1;
  padding: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.dbc2-info-btn:hover {
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
}

/* Selected card state: gold border + tint (no separate checkmark needed) */
.card.dbc.selected {
  border-color: var(--accent-gold);
  background: rgba(255,215,0,0.06);
  box-shadow: 0 0 14px rgba(255,215,0,0.12);
}

/* Deck-full cards (non-selected): dimmed, no hover transform */
.card.dbc.dbc-full {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* ═══ CARD INSPECT MODAL ═══ */

.card-inspect-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 1rem;
  animation: fadeIn 0.15s ease;
}

.card-inspect-modal {
  background: #0f1218;
  border: 1px solid rgba(255,255,255,0.1);
  max-width: 420px;
  width: 100%;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 8px;
}

.card-inspect-modal::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}

.card-inspect-modal.rarity-common::before { background: #6b7280; }
.card-inspect-modal.rarity-uncommon::before { background: #22c55e; }
.card-inspect-modal.rarity-rare::before { background: var(--nato-blue); }
.card-inspect-modal.rarity-legendary::before { background: linear-gradient(90deg, var(--accent-gold), var(--accent-orange)); }
.card-inspect-modal.rarity-epic::before { background: #a855f7; }

/* Unified modal card display — uses battle card format */
.card-inspect-modal .modal-card-face {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

.inspect-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  width: 1.8rem;
  height: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.75rem;
  transition: all 0.2s;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
}

.inspect-close:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.1);
}

.inspect-icon {
  font-size: 3.2rem;
  text-align: center;
  margin: 0.75rem 0 0.75rem;
  line-height: 1;
}

.inspect-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
  gap: 0.5rem;
}

.inspect-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
  flex: 1;
}

.inspect-rarity-badge {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  background: rgba(255,255,255,0.08);
  color: var(--text-secondary);
  padding: 0.2rem 0.5rem;
  white-space: nowrap;
}

.rarity-badge-common { color: #9ca3af; }
.rarity-badge-uncommon { color: #22c55e; background: rgba(34,197,94,0.1); }
.rarity-badge-rare { color: var(--nato-blue); background: rgba(45,123,255,0.1); }
.rarity-badge-legendary { color: var(--accent-gold); background: rgba(255,215,0,0.1); }
.rarity-badge-epic { color: #a855f7; background: rgba(168,85,247,0.1); }

.inspect-subtype {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.72rem;
  color: var(--text-secondary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.65rem;
}

.inspect-hp-label {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  color: var(--text-secondary);
  margin-top: 0.35rem;
  margin-bottom: 0.75rem;
}

.inspect-stats-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.25rem;
  margin-bottom: 0.9rem;
}

.isb {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-subtle);
  padding: 0.4rem 0.15rem;
  text-align: center;
}

.isb-icon {
  font-size: 0.85rem;
  margin-bottom: 0.12rem;
  line-height: 1;
}

.isb-val {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  margin-bottom: 0.1rem;
}

.isb-lbl {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.47rem;
  color: var(--text-secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.inspect-abilities {
  margin-bottom: 0.9rem;
}

.inspect-ability {
  font-size: 0.82rem;
  line-height: 1.5;
  margin-bottom: 0.35rem;
}

.ia-name {
  color: #c8e86c;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
}

.ia-desc {
  color: var(--text-secondary);
}

.inspect-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
  font-style: italic;
  margin-bottom: 0.9rem;
}

/* Add/Remove to deck button */
.btn-inspect-deck {
  width: 100%;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: none;
  padding: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 0.25rem;
  display: block;
}

.btn-deck-add {
  background: var(--accent-red);
  color: white;
}

.btn-deck-add:hover {
  background: #ff4444;
}

.btn-deck-remove {
  background: transparent;
  border: 1px solid rgba(255,215,0,0.4) !important;
  color: var(--accent-gold);
}

.btn-deck-remove:hover {
  background: rgba(255,215,0,0.08);
}

.btn-deck-disabled {
  background: #1e2230;
  color: #444;
  cursor: not-allowed;
  border: 1px solid #222 !important;
}

/* ═══ BATTLE SCREEN ═══ */
.battle-screen {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 0.75rem;
  padding-bottom: 1rem;
  animation: none; /* Suppress fadeIn re-trigger on every renderBattle() call */
}

.battle-header {
  text-align: center;
  padding: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.battle-faction {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.battle-faction.nato { color: var(--nato-blue); }
.battle-faction.brics { color: var(--brics-red); }

.turn-counter {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-gold);
  white-space: nowrap;
}

/* Pile info */
.pile-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.4rem 0;
}

.pile-badge {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-subtle);
}

.pile-badge.enemy { color: var(--brics-red); }
.pile-badge.friendly { color: var(--nato-blue); }

.pile-label {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Field */
.field {
  padding: 0.3rem 0;
}

.field-label {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.field-label .unit-count {
  color: var(--accent-gold);
}

.field-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
  gap: 0.4rem;
}

@media (max-width: 400px) {
  .field-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.empty-field {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
  font-size: 0.7rem;
  color: var(--text-secondary);
  opacity: 0.4;
  text-align: center;
  padding: 0.75rem;
  border: 1px dashed rgba(255,255,255,0.08);
}

/* Battle card (compact) */
.battle-card {
  background: #141826;
  border: 1px solid rgba(147, 51, 234, 0.35);
  border-radius: 8px;
  padding: 0.4rem;
  position: relative;
  transition: all 0.3s;
  overflow: hidden;
  /* When inside field-slot, size to fill the slot */
}

.field-slot .battle-card {
  width: 100%;
  height: 100%;
  padding: 0.3rem; /* reduce padding to fit content better in small slot */
}

.battle-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}

.battle-card.rarity-common::before { background: #6b7280; }
.battle-card.rarity-uncommon::before { background: #22c55e; }
.battle-card.rarity-rare::before { background: var(--nato-blue); }
.battle-card.rarity-legendary::before { background: linear-gradient(90deg, var(--accent-gold), var(--accent-orange)); }
.battle-card.rarity-epic::before { background: #a855f7; }

.battle-card.attacking {
  box-shadow: 0 0 20px rgba(255,215,0,0.4);
  border-color: var(--accent-gold);
  z-index: 5;
}

.battle-card.defending {
  box-shadow: 0 0 20px rgba(255,45,45,0.4);
  border-color: var(--accent-red);
}

.battle-card.destroyed {
  opacity: 0.15;
  transform: scale(0.9);
  border-color: rgba(255,45,45,0.3);
}

.battle-card.just-deployed {
  animation: deployPulse 0.6s ease;
}

@keyframes deployPulse {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.05); box-shadow: 0 0 20px rgba(255,215,0,0.3); }
  100% { transform: scale(1); opacity: 1; }
}

.battle-card.hit-flash {
  animation: hitFlash 0.4s ease;
}

@keyframes hitFlash {
  0%   { background: var(--bg-card); }
  20%  { background: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.9) !important; }
  55%  { background: rgba(255,45,45,0.45); border-color: rgba(255,45,45,0.8) !important; }
  100% { background: var(--bg-card); }
}

.battle-card .bc-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.15rem;
}

.battle-card .bc-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.battle-card .bc-icon {
  font-size: 0.8rem;
  margin-right: 0.2rem;
}

.battle-card .bc-fp {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.65rem;
  color: var(--accent-orange);
}

/* Boost indicator on battle cards */
.bc-boost {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.5rem;
  color: var(--accent-gold);
  letter-spacing: 0.05em;
}

/* Battle card mini stats */
.bc-stats {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.1rem;
  flex-wrap: wrap;
}

.bc-stat {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.5rem;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
}

.bc-stat span {
  color: var(--text-primary);
}

/* HP Bar */
.hp-bar-container {
  width: 100%;
  height: 5px;
  background: rgba(255,255,255,0.06);
  position: relative;
  margin-top: 0.2rem;
  overflow: hidden;
}

.hp-bar {
  height: 100%;
  transition: width 0.5s ease, background 0.3s;
  background: var(--hp-green);
}

.hp-bar.medium { background: var(--hp-yellow); }
.hp-bar.low { background: var(--hp-red); }

.hp-text {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.55rem;
  color: var(--text-secondary);
  text-align: right;
  margin-top: 0.05rem;
}

/* Speed indicator on battle cards */
.bc-speed {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.55rem;
  color: var(--accent-gold);
  position: absolute;
  bottom: 0.2rem;
  right: 0.3rem;
}

/* Damage number float */
.damage-float {
  position: absolute;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--accent-red);
  pointer-events: none;
  z-index: 100;
  text-shadow: 0 0 12px rgba(255,45,45,0.7), 0 2px 4px rgba(0,0,0,0.8);
  animation: floatUp 0.95s ease forwards;
  white-space: nowrap;
}

.damage-float.miss {
  color: var(--text-secondary);
  font-size: 1rem;
  text-shadow: none;
}

.damage-float.crit {
  color: #ffd700;
  font-size: 2rem;
  text-shadow: 0 0 16px rgba(255,215,0,0.9), 0 0 32px rgba(255,215,0,0.5), 0 2px 4px rgba(0,0,0,0.8);
  animation: floatUpCrit 0.95s ease forwards;
}

.damage-float.dodge {
  color: #7dd3fc;
  font-size: 1.1rem;
  text-shadow: 0 0 12px rgba(125,211,252,0.8), 0 2px 4px rgba(0,0,0,0.8);
}

@keyframes floatUp {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  25%  { opacity: 1; transform: translateX(-50%) translateY(-18px) scale(1.15); }
  70%  { opacity: 0.9; transform: translateX(-50%) translateY(-38px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-56px) scale(0.75); }
}

@keyframes floatUpCrit {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0) scale(0.8); }
  15%  { opacity: 1; transform: translateX(-50%) translateY(-10px) scale(1.35); }
  55%  { opacity: 1; transform: translateX(-50%) translateY(-32px) scale(1.1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-60px) scale(0.8); }
}

/* ═══ DRAW PHASE PANEL ═══ */
.draw-phase-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  padding: 0.75rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  margin-top: auto;
  text-align: center;
  position: sticky;
  bottom: 0;
  z-index: 10;
}

.draw-phase-panel.active {
  border-color: rgba(255,215,0,0.2);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
}

.draw-label {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 0.5rem;
}

.type-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}

@media (min-width: 500px) {
  .type-buttons {
    grid-template-columns: repeat(6, 1fr);
  }
}

.type-draw-btn {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 0.5rem 0.3rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

.type-draw-btn:hover:not(.empty):not(:disabled) {
  border-color: var(--accent-gold);
  background: rgba(255,215,0,0.05);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255,215,0,0.1);
}

.type-draw-btn:active:not(.empty):not(:disabled) {
  transform: scale(0.95);
}

.type-draw-btn.empty {
  opacity: 0.25;
  cursor: not-allowed;
}

.tdb-icon {
  font-size: 1.2rem;
  line-height: 1;
}

.tdb-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.tdb-count {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
  font-size: 0.5rem;
  color: var(--text-secondary);
}

/* ═══ BATTLE LOG (legacy — wrapper handles layout now) ═══ */
.battle-log {
  max-height: 140px;
  overflow-y: auto;
  font-size: 0.7rem;
  scroll-behavior: smooth;
  transition: max-height 0.3s ease;
}

.log-entry {
  padding: 0.25rem 0.6rem;
  border-bottom: 1px solid rgba(255,255,255,0.02);
  animation: logSlide 0.3s ease;
  line-height: 1.3;
}

@keyframes logSlide {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

.log-entry .attacker { color: var(--accent-gold); font-weight: 600; }
.log-entry .defender { color: var(--accent-orange); font-weight: 600; }
.log-entry .damage { color: var(--accent-red); font-weight: 700; }
.log-entry .miss { color: var(--text-secondary); font-style: italic; }
.log-entry .kill { color: var(--accent-red); font-weight: 700; }
.log-entry .draw-log { color: var(--text-secondary); }
.log-entry .boost-text { color: var(--accent-gold); font-weight: 600; }

.log-entry .round-marker {
  color: var(--accent-gold);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.65rem;
  padding: 0.3rem 0.6rem;
  background: rgba(255,215,0,0.05);
}

.log-entry .auto-end {
  color: rgba(255,215,0,0.55);
  font-style: italic;
  font-size: 0.65rem;
}

/* ═══ PASSIVE INDICATOR ═══ */
.passive-indicator {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-gold);
  background: rgba(255,215,0,0.08);
  padding: 0.3rem 0.8rem;
  display: inline-block;
  margin-bottom: 0.75rem;
}

/* ═══ RESULTS SCREEN ═══ */
.results-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

.results-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(255,255,255,0.01) 3px,
    rgba(255,255,255,0.01) 4px
  );
  z-index: 0;
}

.results-screen > * { position: relative; z-index: 1; }

.result-debrief-label {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  padding: 0.3rem 1rem;
  margin-bottom: 1.5rem;
  display: inline-block;
}

.result-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: clamp(3.5rem, 12vw, 7rem);
  text-transform: uppercase;
  line-height: 0.85;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}

.result-title.victory {
  color: var(--accent-gold);
  text-shadow:
    0 0 40px rgba(255,215,0,0.3),
    0 0 80px rgba(255,215,0,0.1);
  animation: victoryPulse 2.5s ease-in-out infinite;
}

.result-title.defeat {
  color: var(--accent-red);
  text-shadow:
    0 0 40px rgba(255,45,45,0.3),
    0 0 80px rgba(255,45,45,0.1);
}

@keyframes victoryPulse {
  0%, 100% { text-shadow: 0 0 40px rgba(255,215,0,0.3), 0 0 80px rgba(255,215,0,0.1); }
  50% { text-shadow: 0 0 60px rgba(255,215,0,0.5), 0 0 120px rgba(255,215,0,0.2); }
}

.result-subtitle {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

.result-divider {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  margin: 0 auto 2rem;
}

.result-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-bottom: 1rem;
  max-width: 360px;
  width: 100%;
}

.result-stat {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-subtle);
  padding: 0.75rem 0.5rem;
  position: relative;
}

.result-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255,255,255,0.06);
}

.result-stat .rs-value {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--accent-gold);
  line-height: 1;
}

.result-stat .rs-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 0.15rem;
}

.result-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1.5rem;
}
.result-campaign-nav {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.btn-drone-nav {
  position: relative;
  overflow: hidden;
}
.btn-drone-nav::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(0,255,136,0.15) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform 0s;
}
.btn-drone-nav:hover::after {
  transform: translateX(100%);
  transition: transform 0.5s ease;
}

/* ═══ SCREEN SHAKE ═══ */
.shake {
  animation: shake 0.3s ease;
}

.shake-intense {
  animation: shakeIntense 0.45s ease;
}

.shake-kill {
  animation: shakeKill 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px) rotate(-0.6deg); }
  40% { transform: translateX(5px) rotate(0.6deg); }
  60% { transform: translateX(-4px) rotate(-0.4deg); }
  80% { transform: translateX(4px) rotate(0.4deg); }
}

@keyframes shakeIntense {
  0%, 100% { transform: translateX(0) translateY(0); }
  15% { transform: translateX(-10px) translateY(-4px) rotate(-1.2deg); }
  30% { transform: translateX(10px) translateY(3px) rotate(1.2deg); }
  45% { transform: translateX(-7px) translateY(-2px) rotate(-0.9deg); }
  60% { transform: translateX(7px) translateY(2px) rotate(0.9deg); }
  75% { transform: translateX(-5px) rotate(-0.5deg); }
  90% { transform: translateX(5px) rotate(0.5deg); }
}

@keyframes shakeKill {
  0%, 100% { transform: translateX(0) translateY(0); }
  10% { transform: translateX(-14px) translateY(-5px) rotate(-1.8deg); }
  22% { transform: translateX(14px) translateY(4px) rotate(1.8deg); }
  34% { transform: translateX(-10px) translateY(-3px) rotate(-1.2deg); }
  46% { transform: translateX(10px) translateY(3px) rotate(1.2deg); }
  58% { transform: translateX(-7px) translateY(-2px) rotate(-0.7deg); }
  70% { transform: translateX(7px) translateY(2px) rotate(0.7deg); }
  82% { transform: translateX(-4px) rotate(-0.3deg); }
  92% { transform: translateX(4px) rotate(0.3deg); }
}

/* ═══ ROUND FLASH ═══ */
@keyframes roundFlash {
  0% { background-color: var(--bg-dark); }
  25% { background-color: rgba(255, 215, 0, 0.06); }
  100% { background-color: var(--bg-dark); }
}

.round-flash {
  animation: roundFlash 0.6s ease;
}

/* ═══ UNIT DESTRUCTION ═══ */
@keyframes explode {
  0% { transform: scale(1); filter: brightness(1); opacity: 1; }
  20% { transform: scale(1.15); filter: brightness(3); opacity: 1; }
  40% { transform: scale(1.1); filter: brightness(2) hue-rotate(15deg); opacity: 0.9; }
  60% { transform: scale(0.95); filter: brightness(1.5); opacity: 0.8; }
  80% { transform: scale(0.92); filter: brightness(1); opacity: 0.6; }
  100% { transform: scale(0.9); opacity: 0.2; }
}

.battle-card.exploding {
  animation: explode 0.4s ease forwards;
  border-color: var(--accent-orange) !important;
  box-shadow: 0 0 30px rgba(255, 107, 53, 0.8) !important;
  z-index: 10;
}

/* ═══ DODGE FLASH ═══ */
.battle-card.dodge-flash {
  animation: dodgeFlash 0.4s ease;
}

@keyframes dodgeFlash {
  0%, 100% { background: var(--bg-card); }
  40% { background: rgba(34, 211, 238, 0.15); border-color: rgba(34, 211, 238, 0.6); }
}

/* ═══ ENGAGE BUTTON PULSE ═══ */
.btn-engage {
  position: relative;
  overflow: hidden;
}

.btn-engage::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.1) 50%, transparent 60%);
  transform: translateX(-100%);
  animation: btnShine 2.5s ease infinite;
}

@keyframes btnShine {
  0% { transform: translateX(-100%); }
  50%, 100% { transform: translateX(200%); }
}

/* ═══ SCROLLBAR ═══ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

/* ═══ PASSIVE INDICATOR ═══ */
.passive-indicator {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-gold);
  background: rgba(255,215,0,0.08);
  padding: 0.3rem 0.8rem;
  display: inline-block;
  margin-bottom: 1rem;
}

/* Battle card mini stats */
.bc-stats {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.2rem;
  flex-wrap: wrap;
}

.bc-stat {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.55rem;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
}

.bc-stat span {
  color: var(--text-primary);
}

/* Battle card ability name */
.bc-ability {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.5rem;
  color: var(--accent-gold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.7;
}

/* Speed indicator on battle cards */
.bc-speed {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.6rem;
  color: var(--accent-gold);
  position: absolute;
  bottom: 0.3rem;
  right: 0.4rem;
}

/* Stealth visual indicator */
.battle-card.stealthed {
  border-color: rgba(147,51,234,0.4);
  box-shadow: 0 0 10px rgba(147,51,234,0.15);
}

.battle-card.stealthed::after {
  content: '';
  background: url('/icons/ui/ghost.svg') center/contain no-repeat;
  filter: invert(1);
  opacity: 0.7;
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  width: 0.9rem;
  height: 0.9rem;
  display: block;
}

/* Filter tabs for deck builder */
.filter-tabs {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.filter-tabs::-webkit-scrollbar { display: none; }

.filter-tab {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 0.3rem 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-tab:hover {
  color: var(--text-primary);
  border-color: rgba(255,255,255,0.15);
}

.filter-tab.active {
  color: var(--accent-gold);
  border-color: rgba(255,215,0,0.3);
  background: rgba(255,215,0,0.05);
}

/* Selection checkmark */
.card .selected-check {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 1.2rem;
  height: 1.2rem;
  background: var(--accent-gold);
  color: var(--bg-dark);
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.2s;
}

.card.selected .selected-check {
  opacity: 1;
}

/* ═══ PHASE BANNER ═══ */
.phase-banner {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.4rem 1rem;
  margin-bottom: 0.5rem;
  border: 1px solid transparent;
  transition: all 0.3s;
}

.phase-banner.phase-deploy {
  color: var(--accent-gold);
  background: rgba(255,215,0,0.06);
  border-color: rgba(255,215,0,0.2);
}

.phase-banner.phase-attack {
  color: var(--accent-orange);
  background: rgba(255,107,53,0.06);
  border-color: rgba(255,107,53,0.2);
}

/* Unified player turn */
.phase-banner.phase-player {
  color: var(--accent-gold);
  background: rgba(255,215,0,0.06);
  border-color: rgba(255,215,0,0.2);
}

.phase-banner.phase-ai {
  color: var(--brics-red);
  background: rgba(255,61,61,0.06);
  border-color: rgba(255,61,61,0.2);
}

/* ═══ PHASE TRANSITION OVERLAY ═══ */
@keyframes phaseBgFade {
  0%   { background: rgba(0,0,0,0); }
  15%  { background: rgba(0,0,0,0.55); }
  65%  { background: rgba(0,0,0,0.45); }
  100% { background: rgba(0,0,0,0); }
}

@keyframes phaseTransitionScale {
  0%   { transform: scale(0.7); opacity: 0; letter-spacing: 0.1em; }
  20%  { transform: scale(1.04); opacity: 1; letter-spacing: 0.35em; }
  45%  { transform: scale(1.0);  opacity: 1; letter-spacing: 0.3em; }
  70%  { transform: scale(1.0);  opacity: 0.8; letter-spacing: 0.3em; }
  100% { transform: scale(1.06); opacity: 0; letter-spacing: 0.3em; }
}

.phase-transition-banner {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem 2.5rem;
  border: 2px solid;
  animation: phaseTransitionScale 0.6s ease-out forwards;
}

.phase-transition-banner.phase-attack {
  color: var(--accent-orange);
  border-color: rgba(255,107,53,0.8);
  background: rgba(255,107,53,0.12);
  text-shadow: 0 0 24px rgba(255,107,53,0.6), 0 0 60px rgba(255,107,53,0.3);
  box-shadow: 0 0 40px rgba(255,107,53,0.25), inset 0 0 20px rgba(255,107,53,0.05);
}

.phase-transition-banner.phase-deploy {
  color: var(--accent-gold);
  border-color: rgba(255,215,0,0.8);
  background: rgba(255,215,0,0.08);
  text-shadow: 0 0 24px rgba(255,215,0,0.6), 0 0 60px rgba(255,215,0,0.3);
  box-shadow: 0 0 40px rgba(255,215,0,0.2), inset 0 0 20px rgba(255,215,0,0.05);
}

/* ═══ ENGAGE BUTTON STYLE ═══ */
.engage-btn-style {
  background: linear-gradient(135deg, rgba(255,107,53,0.2), rgba(255,45,45,0.12));
  color: var(--accent-orange);
  border: 1px solid rgba(255,107,53,0.65);
  font-weight: 700;
  letter-spacing: 0.12em;
}

.engage-btn-style:hover {
  background: linear-gradient(135deg, rgba(255,107,53,0.32), rgba(255,45,45,0.22));
  border-color: rgba(255,107,53,0.9);
  box-shadow: 0 0 14px rgba(255,107,53,0.45);
  transform: translateY(-1px);
}

/* ═══ EMPTY FIELD PLACEHOLDER ═══ */
.empty-field {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 0.75rem 1rem;
  border: 1px dashed rgba(255,255,255,0.06);
  text-align: center;
  opacity: 0.6;
}

/* ═══ HAND SECTION ═══ */
.hand-section {
  border-top: 1px solid var(--border-subtle);
  padding: 0.75rem 0 0;
  margin-top: 0.5rem;
}

.hand-label {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 0.5rem;
}

.hand-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.5rem;
}

@media (max-width: 400px) {
  .hand-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ═══ HAND CARD (mini deployable card) ═══ */
.hand-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  padding: 0.6rem;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  user-select: none;
}

.hand-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}

.hand-card.rarity-common::before { background: #6b7280; }
.hand-card.rarity-uncommon::before { background: #22c55e; }
.hand-card.rarity-rare::before { background: var(--nato-blue); }
.hand-card.rarity-legendary::before { background: linear-gradient(90deg, var(--accent-gold), var(--accent-orange)); }
.hand-card.rarity-epic::before { background: #a855f7; }

.hand-card.nato-card { border-left: 2px solid rgba(45,123,255,0.5); }
.hand-card.brics-card { border-left: 2px solid rgba(255,61,61,0.5); }

.hand-card:not(.cant-afford):hover {
  border-color: var(--accent-gold);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255,215,0,0.15);
}

.hand-card.cant-afford {
  opacity: 0.35;
  cursor: not-allowed;
}

.hc-icon {
  font-size: 1.1rem;
  line-height: 1;
  margin-bottom: 0.25rem;
}

.hc-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin-bottom: 0.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hc-stats {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.6rem;
  color: var(--text-secondary);
  margin-bottom: 0.3rem;
}

.hc-cost {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--accent-gold);
  background: rgba(255,215,0,0.1);
  padding: 0.1rem 0.4rem;
  display: inline-block;
  margin-bottom: 0.3rem;
}

.hc-cost.cant-afford-cost {
  color: var(--accent-red);
  background: rgba(255,45,45,0.1);
}

.hc-deploy-btn {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-gold);
  border: 1px solid rgba(255,215,0,0.25);
  padding: 0.15rem 0.4rem;
  transition: all 0.2s;
}

.hand-card:not(.cant-afford):hover .hc-deploy-btn {
  background: var(--accent-gold);
  color: var(--bg-dark);
}

.hc-cant-afford {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-red);
}

/* ═══ BATTLE CONTROLS ROW ═══ */
.controls-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.control-hint {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ═══ LOG EXTRAS ═══ */
.log-entry .cost { color: var(--accent-gold); font-weight: 600; }
.log-entry .sub-marker {
  color: var(--accent-orange);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  letter-spacing: 0.1em;
  font-size: 0.65rem;
  text-transform: uppercase;
  padding: 0.2rem 0.75rem;
  background: rgba(255,107,53,0.05);
}

/* ═══════════════════════════════════════════════════════
   BATTLE SCREEN V2 — MOCKUP LAYOUT
   ═══════════════════════════════════════════════════════ */

/* Override screen padding for battle */
.battle-screen {
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* ── TOP BAR ── */
.battle-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem 0.5rem;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 20;
}

.btb-enemy {
  flex: 1;
  min-width: 0;
}

.btb-enemy-label {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-red);
  margin-bottom: 0.2rem;
}

/* ── Compact side tags replacing verbose "ENEMY FORCES" / "YOUR FORCES" labels ── */
.btb-side-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.18rem;
}
.btb-side-enemy { color: var(--accent-red); }
.btb-side-player { color: #22c55e; }
.btb-side-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.btb-dot-enemy  { background: var(--accent-red); box-shadow: 0 0 4px var(--accent-red); }
.btb-dot-player { background: #22c55e;            box-shadow: 0 0 4px #22c55e; }

/* Player HP section (mirrors btb-enemy) */
.btb-player {
  flex: 1;
  min-width: 0;
  text-align: right;
}

.btb-player-label {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #22c55e;
  margin-bottom: 0.2rem;
  display: none; /* replaced by .btb-side-tag */
}

.btb-player .btb-hp-row {
  flex-direction: row-reverse;
}

.btb-player .btb-hp-val {
  color: #22c55e;
}

.btb-player .btb-meta {
  text-align: right;
}

.btb-hp-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.15rem;
}

.btb-hp-track {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 0;
  overflow: hidden;
  position: relative;
}

.btb-hp-fill {
  height: 100%;
  transition: width 0.4s ease, background 0.3s;
}
.hp-fill-green { background: var(--accent-red); } /* enemy HP = red */
.hp-fill-yellow { background: var(--hp-yellow); }
.hp-fill-red { background: #660000; }

/* Player HP bar — green/yellow/red (friendly) */
.btb-player-hp-fill.hp-fill-green { background: #22c55e; }
.btb-player-hp-fill.hp-fill-yellow { background: var(--hp-yellow); }
.btb-player-hp-fill.hp-fill-red { background: #ff3333; }

/* ── PLAYER HP ENHANCEMENTS — more visible ── */

/* Make player HP bar taller than enemy bar for visual distinction */
.btb-player .btb-hp-track {
  height: 10px;
  border: 1px solid rgba(34,197,94,0.18);
}

/* Make player HP value more prominent */
.btb-player .btb-hp-val {
  font-size: 1rem;
  font-weight: 800;
  min-width: 2.8rem;
}

/* Player label — slightly larger */
.btb-player-label {
  font-size: 0.65rem !important;
}

/* ── CRITICAL HP: pulse + red border when ≤ 30% ── */
@keyframes hpCritPulse {
  0%, 100% { border-color: rgba(255,51,51,0); box-shadow: none; }
  50%       { border-color: rgba(255,51,51,0.55); box-shadow: 0 0 8px rgba(255,51,51,0.3); }
}

.btb-player.hp-critical {
  border: 1px solid rgba(255,51,51,0);
  padding: 3px;
  margin: -3px;
  border-radius: 1px;
  animation: hpCritPulse 0.9s ease-in-out infinite;
}

/* Critical HP text pulses red */
@keyframes hpValCritPulse {
  0%, 100% { color: #22c55e; }
  50% { color: #ff4444; }
}

.btb-player.hp-critical .btb-player-hp-val {
  animation: hpValCritPulse 0.9s ease-in-out infinite;
}

.btb-hp-val {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--accent-red);
  white-space: nowrap;
}

.btb-meta {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.btb-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
}

.btb-turn {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-gold);
}

.btb-phase {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border: 1px solid;
}

.btb-phase.phase-deploy {
  color: var(--accent-gold);
  border-color: rgba(255,215,0,0.4);
  background: rgba(255,215,0,0.06);
}

.btb-phase.phase-attack {
  color: var(--accent-orange);
  border-color: rgba(255,107,53,0.4);
  background: rgba(255,107,53,0.06);
}

/* Unified player turn phase */
.btb-phase.phase-player {
  color: var(--accent-gold);
  border-color: rgba(255,215,0,0.4);
  background: rgba(255,215,0,0.06);
}

.btb-phase.phase-ai {
  color: var(--accent-red);
  border-color: rgba(255,45,45,0.4);
  background: rgba(255,45,45,0.06);
}

/* LAST ACTION amber pulse — shown when player has exactly 1 action left */
@keyframes lastActionPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,160,0,0.7); border-color: rgba(255,160,0,0.9); color: #ffa000; }
  40%  { box-shadow: 0 0 0 8px rgba(255,160,0,0); border-color: rgba(255,215,0,0.6); color: var(--accent-gold); }
  100% { box-shadow: 0 0 0 0 rgba(255,160,0,0); border-color: rgba(255,215,0,0.4); }
}

.btb-phase.last-action-pulse {
  animation: lastActionPulse 1.2s ease-out forwards;
}

/* ── MATCH PHASE FLOW INDICATOR (3-phase: Setup → Skirmish → Finisher) ── */
.btb-match-phase {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.75;
}
.btb-match-phase.mphase-setup    { color: #7ecfff; }
.btb-match-phase.mphase-skirmish { color: var(--accent-gold); }
.btb-match-phase.mphase-finisher { color: var(--accent-orange); }
.btb-match-phase.mphase-overtime { color: var(--accent-red); animation: lastActionPulse 1.4s ease-in-out infinite; }

.btb-dp-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--accent-gold);
  padding: 0.2rem 0.6rem;
  background: rgba(255,215,0,0.05);
  flex-shrink: 0;
}

.btb-dp-num {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--accent-gold);
  line-height: 1;
}

.btb-dp-lbl {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.45rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.2;
}

/* Banking HUD: deploy points box highlights when carrying banked credits */
.btb-dp-banked {
  border-color: #00e5ff;
  background: rgba(0,229,255,0.07);
  box-shadow: 0 0 8px rgba(0,229,255,0.3);
}
.btb-dp-banked .btb-dp-num { color: #00e5ff; }
.btb-dp-banked .btb-dp-lbl { color: #00e5ff; opacity: 0.85; }

/* Deploy points counter — red when depleted */
.btb-dp-zero { border-color: rgba(255,68,68,0.45) !important; background: rgba(255,68,68,0.05) !important; }
.btb-dp-zero .btb-dp-num { color: #ff4444 !important; animation: dpZeroPulse 1.2s ease-in-out infinite; }
.btb-dp-zero .btb-dp-lbl { color: rgba(255,100,100,0.6) !important; }
@keyframes dpZeroPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ── SECONDARY BUTTONS (LOG + MUTE) in top bar ── */
.btb-secondary-btns {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex-shrink: 0;
  align-self: stretch;
  justify-content: center;
}

/* Compact sizes for top-bar integration — keep visual small but hit area ≥44px */
.btb-secondary-btns .log-fab {
  padding: 0.2rem 0.5rem;
  font-size: 0.6rem;
  min-height: 44px;
  min-width: 44px;
}

.btb-secondary-btns .mute-fab {
  padding: 0.15rem 0.4rem;
  font-size: 0.75rem;
  min-height: 44px;
  min-width: 44px;
}

/* ══ COMPACT BATTLE TILE (new design) ══ */
.battle-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.35rem 0.3rem 0.3rem;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  gap: 0.08rem;
}

/* Type-based left border colors */
.battle-tile.bt-type-infantry { border-left: 3px solid #22c55e; }
.battle-tile.bt-type-aircraft { border-left: 3px solid #3b82f6; }
.battle-tile.bt-type-vehicle  { border-left: 3px solid #f97316; }
.battle-tile.bt-type-naval    { border-left: 3px solid #ef4444; }
.battle-tile.bt-type-equipment { border-left: 3px solid #eab308; }
.battle-tile.bt-type-support  { border-left: 3px solid #a855f7; }

/* Cost badge — top-right corner */
.bt-cost-badge {
  position: absolute;
  top: 0.2rem;
  right: 0.25rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.65rem;
  color: var(--accent-gold);
  background: rgba(0,0,0,0.35);
  border-radius: 3px;
  padding: 0 0.2rem;
  line-height: 1.5;
}

/* Large type icon */
.bt-icon {
  font-size: 1.5rem;
  line-height: 1;
  margin-top: 0.3rem;
  margin-bottom: 0.05rem;
}

/* Truncated card name */
.bt-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.66rem; /* was 0.58rem — increased for readability at minimum 90px card width */
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  color: var(--text-primary);
  line-height: 1.1;
}

/* Boost badge */
.bt-boost {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.5rem;
  color: var(--accent-gold);
  letter-spacing: 0.04em;
}

/* HP bar */
.bt-hp-bar-wrap {
  width: 100%;
  height: 5px;
  background: rgba(255,255,255,0.12);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 0.18rem;
  border: 0.5px solid rgba(255,255,255,0.15);
}

.bt-hp-bar {
  height: 100%;
  background: var(--hp-green);
  border-radius: 2px;
  transition: width 0.4s ease, background 0.3s;
}

.bt-hp-bar.medium { background: var(--hp-yellow); }
.bt-hp-bar.low    { background: var(--hp-red); }

/* HP numbers */
.bt-hp-nums {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.52rem;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.2;
}

/* SPENT overlay */
.bt-spent-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  border-radius: 6px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  pointer-events: none;
}

/* ── TYPE MATCHUP ARROWS (shown on enemy units when attacker is selected) ── */
.bt-matchup-arrow {
  position: absolute;
  top: 0.22rem;
  left: 0.22rem;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  z-index: 5;
  animation: matchup-pulse 1.2s ease-in-out infinite;
}
.bt-matchup-strong {
  color: #22c55e;
  text-shadow: 0 0 6px rgba(34, 197, 94, 0.85);
}
.bt-matchup-weak {
  color: #ef4444;
  text-shadow: 0 0 6px rgba(239, 68, 68, 0.85);
}
@keyframes matchup-pulse {
  0%, 100% { opacity: 1; transform: translateY(0); }
  50% { opacity: 0.65; transform: translateY(-1px); }
}

/* ── HAND TILE (same compact style, horizontal scroll) ── */
.hand-tile {
  flex-shrink: 0;
  width: 82px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 0.35rem 0.3rem 0.3rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.08rem;
  overflow: hidden;
  user-select: none;
  transition: all 0.15s;
}

/* Rarity top line on hand tiles */
.hand-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}
.hand-tile.rarity-common::before    { background: #6b7280; }
.hand-tile.rarity-uncommon::before  { background: #22c55e; }
.hand-tile.rarity-rare::before      { background: var(--nato-blue); }
.hand-tile.rarity-legendary::before { background: linear-gradient(90deg, var(--accent-gold), var(--accent-orange)); }
.hand-tile.rarity-epic::before { background: #a855f7; }

/* Type left border on hand tiles */
.hand-tile.bt-type-infantry  { border-left: 3px solid #22c55e; }
.hand-tile.bt-type-aircraft  { border-left: 3px solid #3b82f6; }
.hand-tile.bt-type-vehicle   { border-left: 3px solid #f97316; }
.hand-tile.bt-type-naval     { border-left: 3px solid #ef4444; }
.hand-tile.bt-type-equipment { border-left: 3px solid #eab308; }
.hand-tile.bt-type-support   { border-left: 3px solid #a855f7; }

.hand-tile.ht-affordable {
  cursor: pointer;
}

.hand-tile.ht-affordable:hover {
  border-color: var(--accent-gold);
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(255,215,0,0.15);
}

.hand-tile.ht-affordable:active {
  transform: scale(0.95);
}

.hand-tile.ht-cant-afford {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

/* ── FIELD ZONES ── */
.field-zone-v2 {
  min-height: auto;
  padding: 0;
  display: contents; /* make field-zone transparent, let grid through */
}

.enemy-field-v2 {
  border: 1px dashed rgba(255,45,45,0.2);
  background: rgba(255,45,45,0.02);
  margin: 0.4rem 0.75rem 0;
  padding: 0.35rem 0.4rem;
  /* Grid is applied by .field-slot-grid inside */
}

.player-field-v2 {
  border: 1px dashed rgba(255,215,0,0.15);
  background: rgba(255,215,0,0.01);
  margin: 0 0.75rem 0;
  padding: 0.35rem 0.4rem;
  /* Grid is applied by .field-slot-grid inside */
}

/* ═══ DYNAMIC CARD SLOTS — cards size to fill field space ═══ */

/* Flex row container — card width driven by --field-card-width CSS var set per render */
.field-slot-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.35rem;
  padding: 0 0.2rem;
  margin: 0;
  width: 100%;
  height: auto; /* natural height — determined by card aspect-ratio (width × 7/5) */
  overflow-x: auto;   /* scroll horizontally if 5 cards exceed field width */
  overflow-y: visible;
  scrollbar-width: none;        /* Firefox: hide scrollbar */
  -ms-overflow-style: none;     /* IE/Edge: hide scrollbar */
  -webkit-overflow-scrolling: touch;
  align-items: center;
  justify-content: center;     /* center when cards fit; flex-start when scrolling */
  box-sizing: border-box;
}

.field-slot-grid::-webkit-scrollbar {
  display: none; /* Chrome/Safari: hide scrollbar */
}

/* Individual slot — sized by CSS variable computed per unit count */
.field-slot {
  flex-shrink: 0;
  width: var(--field-card-width, 100px);
  aspect-ratio: 5 / 7; /* portrait card shape; height = width × 7/5 */
  position: relative;
  min-height: 0;
}

/* Card within slot fills it completely */
.field-slot .battle-card {
  width: 100%;
  height: 100%;
  flex: none;
  max-width: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ═══ TWO-ROW GRID — 4 units (2+2) and 5 units (3+2) ═══
   Cards stay at the golden 3-unit size. No shrinking, no scrolling. */

/* Container: column-direction flex that stacks the two rows */
.field-slot-grid.field-two-row {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.28rem;          /* gap between top row and bottom row */
  overflow-x: hidden;    /* no horizontal scroll needed anymore */
  overflow-y: visible;
  justify-content: center;
  align-items: center;
  height: auto;
}

/* Each individual row — centered horizontally */
.field-two-row-line {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.35rem;
  justify-content: center;
  align-items: center;
}

/* Slots inside two-row lines use the same aspect-ratio sizing */
.field-two-row-line .field-slot {
  flex-shrink: 0;
  aspect-ratio: 5 / 7;
  position: relative;
  min-height: 0;
}

/* Staggered formation rows (legacy, kept for backward compat) */
.field-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 0.35rem;
}

.field-row .battle-card {
  flex: 1;
  min-width: 0;
  max-width: 100px;
}

/* Back row (2 cards) gets slightly wider cards for visual balance */
.field-row-back .battle-card {
  max-width: 115px;
}

.empty-field-zone-msg {
  width: 100%;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.3;
  text-align: center;
  padding: 0.4rem 0.5rem;
}

/* ── DIRECT STRIKE READY STATE ── */
.direct-strike-ready {
  opacity: 1 !important;
  color: #f97316 !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  animation: direct-strike-pulse 0.9s ease-in-out infinite alternate;
  text-shadow: 0 0 8px rgba(249, 115, 22, 0.7);
  cursor: crosshair;
}

@keyframes direct-strike-pulse {
  from { opacity: 0.6; text-shadow: 0 0 6px rgba(249, 115, 22, 0.5); }
  to   { opacity: 1;   text-shadow: 0 0 14px rgba(249, 115, 22, 0.95); }
}

.direct-attack-zone {
  border: 1px solid rgba(249, 115, 22, 0.5) !important;
  box-shadow: inset 0 0 20px rgba(249, 115, 22, 0.15), 0 0 12px rgba(249, 115, 22, 0.2) !important;
  animation: direct-zone-glow 0.9s ease-in-out infinite alternate;
}

@keyframes direct-zone-glow {
  from { opacity: 0.7; }
  to   { opacity: 1; }
}

/* ── BATTLEFIELD DIVIDER ── */
.battlefield-label-bar {
  text-align: center;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.5;
  padding: 0.3rem 0;
  position: relative;
}

.battlefield-label-bar::before,
.battlefield-label-bar::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 28%;
  height: 1px;
  background: var(--border-subtle);
}
.battlefield-label-bar::before { left: 2%; }
.battlefield-label-bar::after { right: 2%; }

/* ── HAND HEADER BAR ── */
.hand-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem 0.3rem;
  border-top: 1px solid var(--border-subtle);
  margin-top: 0.3rem;
  gap: 0.5rem;
}

.hand-bar-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hand-bar-label {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Action buttons (ATTACK → / END TURN → / ENEMY TURN) */
.action-btn {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  padding: 0.55rem 1.2rem;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.attack-btn-style {
  background: #b8ff00;
  color: #0a0c10;
}

.attack-btn-style:hover {
  background: #ccff00;
  transform: translateY(-1px);
}

.end-turn-btn-style {
  background: var(--accent-orange);
  color: white;
}

.end-turn-btn-style:hover {
  background: #ff8040;
  transform: translateY(-1px);
}

.enemy-turn-btn-style {
  background: rgba(255,255,255,0.05);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  cursor: not-allowed;
}

/* ── ATTACK HINT ── */
.atk-hint {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.25rem 0.75rem;
  margin: 0 0.75rem;
}

.atk-hint-select {
  color: var(--accent-gold);
  background: rgba(255,215,0,0.06);
  border: 1px solid rgba(255,215,0,0.2);
}

.atk-hint-target {
  color: var(--accent-red);
  background: rgba(255,45,45,0.06);
  border: 1px solid rgba(255,45,45,0.25);
}

/* ── HAND SCROLL ROW ── */
.hand-scroll-row {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.5rem 0.75rem 0.75rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.hand-scroll-row::-webkit-scrollbar { display: none; }

.hand-empty-v2 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.65rem;
  color: var(--text-secondary);
  opacity: 0.4;
  text-align: center;
  padding: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── HAND CARD V2 (mockup style) ── */
.hand-card-v2 {
  flex-shrink: 0;
  width: 120px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  padding: 0.5rem;
  position: relative;
  transition: all 0.2s;
  user-select: none;
}

.hand-card-v2.hcv2-affordable {
  cursor: pointer;
  border-color: rgba(255,255,255,0.1);
}

.hand-card-v2.hcv2-affordable:hover {
  border-color: var(--accent-gold);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(255,215,0,0.15);
}

.hand-card-v2.hcv2-affordable:active {
  transform: scale(0.96);
}

.hand-card-v2.hcv2-cant-afford {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

.hcv2-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.3rem;
}

.hcv2-icon {
  font-size: 1.4rem;
  line-height: 1;
}

.hcv2-cost {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--accent-gold);
  background: rgba(255,215,0,0.12);
  border: 1px solid rgba(255,215,0,0.3);
  padding: 0.05rem 0.35rem;
  line-height: 1.2;
}

.hcv2-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin-bottom: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hcv2-sub {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: 0.3rem;
}

.hcv2-stats {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.6rem;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.hcv2-hp {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.65rem;
  color: #f87171;
  margin-bottom: 0.15rem;
}

.hcv2-ability {
  font-family: 'Rajdhani', sans-serif;
  font-style: italic;
  font-size: 0.55rem;
  color: var(--accent-gold);
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── LOG FAB ── */
/* FAB container — houses LOG + MUTE buttons */
/* Positioned bottom-LEFT so it never covers the ATTACK button (bottom-right) */
.battle-fabs {
  position: fixed;
  bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
  left: 0.75rem;
  display: flex;
  flex-direction: row;
  gap: 0.4rem;
  z-index: 30;
}

.log-fab {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.log-fab:hover {
  color: var(--text-primary);
  border-color: rgba(255,255,255,0.2);
}

.mute-fab {
  font-size: 1rem;
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  padding: 0.3rem 0.55rem;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mute-fab:hover {
  color: var(--text-primary);
  border-color: rgba(255,255,255,0.2);
  background: var(--bg-card-hover);
}

/* ── BATTLE LOG OVERLAY ── */
.blog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

.blog-modal {
  background: var(--bg-card);
  border-top: 1px solid var(--border-subtle);
  width: 100%;
  max-width: 800px;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.blog-hdr {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
}

.blog-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-gold);
  flex: 1;
}

.blog-count {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.6rem;
  color: var(--text-secondary);
}

.blog-close {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.2rem 0.4rem;
}

.blog-close:hover { color: var(--text-primary); }

.blog-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
  font-size: 0.7rem;
  scroll-behavior: smooth;
}

/* ── BATTLE CARD ATTACK PHASE STATES ── */
.battle-card.can-attack-unit {
  cursor: pointer;
  border-color: rgba(255,215,0,0.3);
}

.battle-card.can-attack-unit:hover {
  border-color: var(--accent-gold);
  box-shadow: 0 0 12px rgba(255,215,0,0.25);
}

.battle-card.selected-attacker {
  border-color: #84cc16 !important;
  box-shadow: 0 0 18px rgba(132,204,22,0.9), 0 0 36px rgba(132,204,22,0.5), inset 0 0 12px rgba(132,204,22,0.15) !important;
  background: rgba(132,204,22,0.1) !important;
  animation: attackerGlow 0.7s ease-in-out infinite alternate;
}

@keyframes attackerGlow {
  from { box-shadow: 0 0 18px rgba(132,204,22,0.9), 0 0 36px rgba(132,204,22,0.5), inset 0 0 12px rgba(132,204,22,0.15); }
  to   { box-shadow: 0 0 28px rgba(132,204,22,1),   0 0 56px rgba(132,204,22,0.7), inset 0 0 18px rgba(132,204,22,0.25); }
}

.battle-card.has-attacked-unit {
  opacity: 0.5;
  filter: grayscale(0.3);
}

.battle-card.target-enemy-unit {
  cursor: crosshair;
  border-color: rgba(255,45,45,0.5);
  box-shadow: 0 0 12px rgba(255,45,45,0.25);
  animation: targetPulse 0.8s ease infinite;
}

@keyframes targetPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255,45,45,0.25); }
  50% { box-shadow: 0 0 20px rgba(255,45,45,0.5); }
}

/* log entry colors from v2 context */
.log-entry .evade { color: #22d3ee; font-weight: 600; }
.log-entry .ability { color: var(--accent-gold); }
.log-entry .crit { color: var(--accent-orange); font-weight: 700; }

/* ═══ DRAW PHASE ═══ */
.phase-draw {
  background: rgba(147, 51, 234, 0.2);
  color: #c084fc;
  border: 1px solid rgba(147, 51, 234, 0.4);
}

/* ══ DRAW TYPE OVERLAY ══ */
.draw-type-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  animation: fadeIn 0.18s ease;
}

.draw-type-modal {
  background: linear-gradient(145deg, rgba(25, 15, 40, 0.98), rgba(15, 10, 28, 0.98));
  border: 1px solid rgba(147, 51, 234, 0.5);
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
  min-width: 260px;
  max-width: 90vw;
  overflow: hidden;
  box-shadow:
    0 0 40px rgba(147, 51, 234, 0.25),
    0 20px 60px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(147, 51, 234, 0.2);
  animation: slideUpFade 0.2s ease;
}

@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

.draw-type-modal-header {
  text-align: center;
  margin-bottom: 1.25rem;
}

.draw-type-modal-title {
  display: block;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c084fc;
  margin-bottom: 0.3rem;
}

.draw-type-modal-sub {
  display: block;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(192, 132, 252, 0.5);
  text-transform: uppercase;
}

.draw-type-modal-body {
  display: flex;
  justify-content: center;
  width: 100%;
  overflow: hidden;
}

.draw-empty-msg {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.85rem;
  color: rgba(192, 132, 252, 0.6);
  text-align: center;
  padding: 0.5rem 0;
}

.draw-type-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: center;
}

.draw-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  background: rgba(147, 51, 234, 0.12);
  border: 1px solid rgba(147, 51, 234, 0.45);
  border-radius: 10px;
  padding: 0.65rem 0.9rem;
  min-width: 68px;
  color: #e8eaed;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.draw-type-btn:hover {
  background: rgba(147, 51, 234, 0.28);
  border-color: rgba(147, 51, 234, 0.75);
  box-shadow: 0 0 14px rgba(147, 51, 234, 0.28);
  transform: translateY(-1px);
}

.draw-type-btn:active {
  background: rgba(147, 51, 234, 0.45);
  transform: scale(0.95) translateY(0);
}

.draw-type-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.draw-type-name {
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.07em;
  color: #d4b8f0;
}

.draw-type-count {
  background: rgba(147, 51, 234, 0.3);
  border-radius: 4px;
  padding: 0 0.35rem;
  font-size: 0.62rem;
  color: #c084fc;
  letter-spacing: 0.03em;
}

/* ══ DRAW CARD PICKER (2nd step — choose specific card) ══ */
.draw-pick-modal {
  max-width: 340px;
}

.draw-pick-body {
  flex-direction: column;
  width: 100%;
}

.draw-pick-cards {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: 100%;
}

.draw-pick-card-btn {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: #141826;
  border: 1px solid rgba(147, 51, 234, 0.35);
  border-radius: 10px;
  padding: 0.55rem 0.75rem;
  color: #e2d5f5;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.12s, border-color 0.12s, transform 0.1s, box-shadow 0.12s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.draw-pick-card-btn:hover {
  background: rgba(147, 51, 234, 0.26);
  border-color: rgba(147, 51, 234, 0.72);
  box-shadow: 0 0 12px rgba(147, 51, 234, 0.25);
  transform: translateY(-1px);
}

.draw-pick-card-btn:active {
  background: rgba(147, 51, 234, 0.42);
  transform: scale(0.97);
}

.dpc-icon {
  font-size: 1.9rem;
  line-height: 1;
  flex-shrink: 0;
}

.dpc-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
}

.dpc-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.dpc-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #f0e8ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.dpc-cost {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-gold);
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.28);
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.dpc-type {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7c6fa0;
  margin-top: -0.1rem;
}

.dpc-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.7rem;
  color: #b8a0d0;
}

.dpc-ability {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: fit-content;
  max-width: 100%;
}

.dpc-inspect-hint {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(147, 51, 234, 0.6);
  text-transform: uppercase;
  margin-left: auto;
  flex-shrink: 0;
  align-self: center;
}

.draw-pick-back-btn {
  margin-top: 0.8rem;
  background: transparent;
  border: 1px solid rgba(147, 51, 234, 0.28);
  border-radius: 8px;
  color: rgba(180, 150, 210, 0.65);
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0.4rem 1rem;
  cursor: pointer;
  width: 100%;
  transition: all 0.12s;
  -webkit-tap-highlight-color: transparent;
}

.draw-pick-back-btn:hover {
  background: rgba(147, 51, 234, 0.14);
  border-color: rgba(147, 51, 234, 0.5);
  color: #d4b8f0;
}

.hand-bar-draw-hint {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(192, 132, 252, 0.65);
  animation: pulse 1.4s ease infinite;
}

.draw-phase-dimmed {
  opacity: 0.4;
  pointer-events: none;
}

/* ══════════════════════════════════════════════
   DRAW PHASE — BOTTOM SHEET CARD PICKER
══════════════════════════════════════════════ */

.draw-bottom-sheet {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
}

.draw-bottom-dim {
  position: absolute;
  inset: 0;
  animation: dbsDimIn 0.2s ease forwards;
}

@keyframes dbsDimIn {
  from { background: rgba(0, 0, 0, 0); }
  to   { background: rgba(0, 0, 0, 0.5); }
}

.draw-bottom-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(0deg, #0d0a1a 0%, rgba(18, 10, 30, 0.97) 100%);
  border-top: 1px solid rgba(147, 51, 234, 0.5);
  border-radius: 20px 20px 0 0;
  padding: 0 1rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
  pointer-events: auto;
  animation: dbsPanelSlideUp 0.25s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  box-shadow:
    0 -4px 30px rgba(147, 51, 234, 0.2),
    0 -1px 0 rgba(147, 51, 234, 0.3);
}

@keyframes dbsPanelSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.draw-bottom-panel.dismissing {
  animation: dbsPanelSlideDown 0.18s ease-in forwards;
}

@keyframes dbsPanelSlideDown {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}

.draw-bottom-handle {
  width: 40px;
  height: 4px;
  background: rgba(147, 51, 234, 0.4);
  border-radius: 2px;
  margin: 0.65rem auto 0.5rem;
}

.draw-bottom-header {
  text-align: center;
  margin-bottom: 0.85rem;
}

.draw-bottom-title {
  display: block;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c084fc;
  margin-bottom: 0.2rem;
}

.draw-bottom-sub {
  display: block;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(192, 132, 252, 0.45);
  text-transform: uppercase;
}

/* ── Card tiles row ── */
.dbs-cards {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
}

.dbs-card-tile {
  position: relative;
  flex: 1;
  min-width: 88px;
  max-width: 130px;
  background: #141826;
  border: 1px solid rgba(147, 51, 234, 0.35);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  display: flex;
  flex-direction: column;
}

.dbs-card-tile:hover {
  border-color: rgba(147, 51, 234, 0.7);
  box-shadow: 0 0 14px rgba(147, 51, 234, 0.25);
  transform: translateY(-2px);
}

.dbs-card-tile:active {
  transform: scale(0.96);
}

.dbs-card-tile.dbs-selected {
  border-color: #fbbf24;
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.45);
  transform: scale(1.04);
  animation: dbsSelectPulse 0.15s ease;
}

.dbs-card-tile.dbs-rejected {
  opacity: 0.3;
  transform: scale(0.94);
}

@keyframes dbsSelectPulse {
  0%   { box-shadow: 0 0 0 rgba(251, 191, 36, 0); }
  50%  { box-shadow: 0 0 28px rgba(251, 191, 36, 0.65); }
  100% { box-shadow: 0 0 20px rgba(251, 191, 36, 0.45); }
}

/* Card art area */
.dbs-tile-art {
  width: 100%;
  aspect-ratio: 1 / 0.82;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(147, 51, 234, 0.18);
}

.dbs-tile-art-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dbs-tile-icon {
  font-size: 2.2rem;
  line-height: 1;
}

/* Card info body */
.dbs-tile-body {
  padding: 0.45rem 0.45rem 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  flex: 1;
}

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

/* Type badge */
.dbs-tile-type {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.07rem 0.32rem;
  border-radius: 3px;
  width: fit-content;
  line-height: 1.4;
}

.dbs-type-unit        { background: rgba(34, 197, 94, 0.15);  color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.3); }
.dbs-type-armament    { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
.dbs-type-support     { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }
.dbs-type-supply      { background: rgba(20, 184, 166, 0.15); color: #2dd4bf; border: 1px solid rgba(20, 184, 166, 0.3); }
.dbs-type-air         { background: rgba(165, 180, 252, 0.15); color: #a5b4fc; border: 1px solid rgba(165, 180, 252, 0.3); }
.dbs-type-naval       { background: rgba(14, 165, 233, 0.15); color: #38bdf8; border: 1px solid rgba(14, 165, 233, 0.3); }
.dbs-type-cyber       { background: rgba(236, 72, 153, 0.15); color: #f472b6; border: 1px solid rgba(236, 72, 153, 0.3); }
.dbs-type-intelligence { background: rgba(168, 85, 247, 0.15); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.3); }

/* Stats 2x2 grid */
.dbs-tile-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.15rem;
  margin-top: 0.12rem;
}

.dbs-tile-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(0, 0, 0, 0.28);
  border-radius: 4px;
  padding: 0.14rem 0.08rem;
}

.dbs-ts-val {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: #e8e0f5;
  line-height: 1;
}

.dbs-ts-lbl {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.48rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(180, 160, 210, 0.55);
  line-height: 1.2;
}

/* Ability tag */
.dbs-tile-ability {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.57rem;
  font-weight: 600;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
  border-radius: 3px;
  padding: 0.07rem 0.28rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.08rem;
  line-height: 1.3;
}

/* Inspect info button (top-right of tile) */
.dbs-tile-info-btn {
  position: absolute;
  top: 0.28rem;
  right: 0.28rem;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid rgba(147, 51, 234, 0.4);
  color: rgba(192, 132, 252, 0.8);
  font-size: 0.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.12s, border-color 0.12s;
  -webkit-tap-highlight-color: transparent;
}

.dbs-tile-info-btn:hover {
  background: rgba(147, 51, 234, 0.32);
  border-color: rgba(147, 51, 234, 0.8);
}

/* ══════════════════════════════════════════════
   FIELD META ROW — unit count + discard pile
═══════════════════════════════════════════════ */
.field-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.2rem 0.6rem;
  gap: 0.5rem;
}

.field-count-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.field-count-label.field-full-label {
  color: #f97316;
  animation: field-full-pulse 1.4s ease-in-out infinite;
}

@keyframes field-full-pulse {
  0%, 100% { opacity: 1; color: #f97316; }
  50%       { opacity: 0.65; color: #fb923c; }
}

.discard-btn {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 5px;
  color: #94a3b8;
  cursor: pointer;
  padding: 0.15rem 0.5rem;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.discard-btn:active {
  background: rgba(148, 163, 184, 0.2);
  transform: scale(0.95);
}

.discard-empty {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.35);
}

/* ── FIELD FULL WARNING ── */
.field-full-warning {
  text-align: center;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f97316;
  background: rgba(249, 115, 22, 0.1);
  border: 1px solid rgba(249, 115, 22, 0.3);
  border-radius: 6px;
  padding: 0.3rem 0.8rem;
  margin: 0.15rem 0.5rem;
  animation: pulse 1s ease infinite;
}

/* ── DISCARD MODAL ── */
.discard-modal {
  max-height: 70vh;
}

.discard-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem;
}

.discard-empty-msg {
  text-align: center;
  color: var(--text-secondary);
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.75rem;
  padding: 1rem;
  opacity: 0.6;
}

.discard-card-entry {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  flex-wrap: wrap;
}

.discard-card-entry.rarity-rare {
  border-color: rgba(59,130,246,0.3);
}

.discard-card-entry.rarity-legendary {
  border-color: rgba(234,179,8,0.4);
}

.dce-icon { font-size: 1.1rem; }

.dce-name {
  flex: 1;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #e8eaed;
}

.dce-stats {
  display: flex;
  gap: 0.4rem;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.dce-ability {
  width: 100%;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c084fc;
  margin-top: 0.1rem;
}

/* ═══════════════════════════════════════════════════════
   WAR TABLE OVERHAUL — FULL-SCREEN BATTLEFIELD
   ═══════════════════════════════════════════════════════ */

/* Force full viewport: battlefield dominates */
.battle-screen {
  height: 100vh; /* fallback for older browsers */
  height: 100dvh; /* dynamic viewport — excludes browser chrome on iOS */
  overflow: hidden !important;
  min-height: unset !important;
}

/* Prevent body/html scroll while battle is active — iOS Safari fix */
html:has(#battle-screen),
body:has(#battle-screen) {
  overflow: hidden;
  height: 100%;
}

/* Constrain game root to exact viewport — eliminates grey dead space on iOS */
html:has(#battle-screen) #game-root,
body:has(#battle-screen) #game-root {
  height: 100dvh;
  overflow: hidden;
  min-height: unset;
}

/* ── BATTLE ARENA — the war table ── */
.battle-arena {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  /* Topographic dark map aesthetic — tactical contour lines over dark terrain */
  background:
    /* Topographic contour rings — enemy side (top) */
    radial-gradient(ellipse 110% 55% at 50% 25%, transparent 42%, rgba(0,200,80,0.024) 43%, transparent 44%),
    radial-gradient(ellipse 85% 42% at 50% 25%, transparent 35%, rgba(0,200,80,0.02) 36%, transparent 37%),
    radial-gradient(ellipse 60% 30% at 50% 25%, transparent 27%, rgba(0,200,80,0.016) 28%, transparent 29%),
    radial-gradient(ellipse 38% 19% at 50% 25%, transparent 20%, rgba(0,200,80,0.012) 21%, transparent 22%),
    /* Topographic contour rings — player side (bottom) */
    radial-gradient(ellipse 110% 55% at 50% 75%, transparent 42%, rgba(0,200,80,0.024) 43%, transparent 44%),
    radial-gradient(ellipse 85% 42% at 50% 75%, transparent 35%, rgba(0,200,80,0.02) 36%, transparent 37%),
    radial-gradient(ellipse 60% 30% at 50% 75%, transparent 27%, rgba(0,200,80,0.016) 28%, transparent 29%),
    radial-gradient(ellipse 38% 19% at 50% 75%, transparent 20%, rgba(0,200,80,0.012) 21%, transparent 22%),
    /* Fine tactical grid */
    repeating-linear-gradient(0deg, transparent 0px, transparent 31px, rgba(0,180,70,0.028) 32px),
    repeating-linear-gradient(90deg, transparent 0px, transparent 31px, rgba(0,180,70,0.028) 32px),
    /* Dark tactical base — deep olive-black */
    linear-gradient(180deg,
      #050a06 0%,
      #07100a 25%,
      #080f0a 50%,
      #060e08 75%,
      #040906 100%
    );
}

/* ── BATTLE ARENA SMOKE / HAZE — CSS-only animated drift ── */
.battle-arena::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 25% at 20% 40%, rgba(180,220,160,0.04) 0%, transparent 70%),
    radial-gradient(ellipse 50% 20% at 80% 60%, rgba(160,210,140,0.035) 0%, transparent 70%),
    radial-gradient(ellipse 70% 30% at 55% 50%, rgba(200,230,180,0.025) 0%, transparent 70%);
  animation: smoke-drift-a 18s ease-in-out infinite alternate;
}
.battle-arena::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 45% 18% at 65% 35%, rgba(150,200,130,0.03) 0%, transparent 70%),
    radial-gradient(ellipse 55% 22% at 30% 65%, rgba(170,215,150,0.035) 0%, transparent 70%);
  animation: smoke-drift-b 22s ease-in-out infinite alternate-reverse;
}
@keyframes smoke-drift-a {
  from { transform: translateX(-8px) translateY(-4px); opacity: 0.7; }
  to   { transform: translateX(10px) translateY(6px);  opacity: 1;   }
}
@keyframes smoke-drift-b {
  from { transform: translateX(6px) translateY(3px);  opacity: 0.6; }
  to   { transform: translateX(-10px) translateY(-5px); opacity: 1; }
}

/* ── TERRAIN LAYER — electronic wireframe landscape ── */
.terrain-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url('/terrain.svg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* Subtle scanline shimmer to reinforce the terminal/display feel */
  mix-blend-mode: screen;
}

/* ── FOG / HAZE LAYER ── */
.fog-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    /* Top fog bank — slightly reduced to let terrain breathe at top */
    radial-gradient(ellipse 100% 30% at 50% 0%, rgba(4,8,12,0.85) 0%, transparent 100%),
    /* Bottom fog bank */
    radial-gradient(ellipse 100% 30% at 50% 100%, rgba(4,8,12,0.85) 0%, transparent 100%),
    /* Left edge shadow */
    radial-gradient(ellipse 28% 100% at 0% 50%, rgba(0,0,0,0.30) 0%, transparent 100%),
    /* Right edge shadow */
    radial-gradient(ellipse 28% 100% at 100% 50%, rgba(0,0,0,0.30) 0%, transparent 100%);
}

/* ── ENEMY & PLAYER HALVES — equal vertical split ── */
.battle-half {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 3;
}

.enemy-half {
  /* Very faint enemy-side red tint from top */
  background: linear-gradient(180deg, rgba(220,30,30,0.06) 0%, transparent 80%);
}

.player-half {
  /* Very faint player-side gold tint from bottom */
  background: linear-gradient(0deg, rgba(255,215,0,0.04) 0%, transparent 80%);
}

/* Field zones fill their respective halves */
.enemy-half .enemy-field-v2 {
  display: flex !important; /* override display:contents from .field-zone-v2 base */
  flex: 1;
  min-height: 0;
  margin: 0 0.5rem 0;
  border: 1px solid rgba(255,45,45,0.18) !important;
  background: rgba(255,45,45,0.025) !important;
  align-items: center;   /* vertically center the field-slot-grid */
  justify-content: center;
  overflow: visible; /* allow cards to show fully — battle-arena clips at its level */
  padding: 0.2rem 0;
}

.player-half .player-field-v2 {
  display: flex !important; /* override display:contents from .field-zone-v2 base */
  flex: 1;
  min-height: 0;
  margin: 0 0.5rem 0;
  border: 1px solid rgba(255,215,0,0.12) !important;
  background: rgba(255,215,0,0.018) !important;
  align-items: center;   /* vertically center the field-slot-grid */
  justify-content: center;
  overflow: visible; /* allow cards to show fully — battle-arena clips at its level */
  padding: 0.2rem 0;
}

/* Compact field meta rows inside halves */
.fmr-enemy {
  padding: 0.2rem 0.6rem 0.15rem;
  flex-shrink: 0;
}

.fmr-player {
  padding: 0.15rem 0.6rem 0.2rem;
  flex-shrink: 0;
}

/* Tactical battlefield divider — golden seam */
.battlefield-label-bar {
  flex-shrink: 0 !important;
  z-index: 4;
  position: relative;
  margin: 0 !important;
  padding: 0.18rem 0 !important;
  background: rgba(255,215,0,0.03);
  border-top: 1px solid rgba(255,215,0,0.18) !important;
  border-bottom: 1px solid rgba(255,215,0,0.18) !important;
  box-shadow: 0 0 18px rgba(255,215,0,0.06), inset 0 0 24px rgba(255,215,0,0.03);
}

.battlefield-label-bar::before { left: 5% !important; width: 20% !important; }
.battlefield-label-bar::after  { right: 5% !important; width: 20% !important; }

/* Unit depth shadows */
.battle-tile {
  box-shadow: 0 4px 18px rgba(0,0,0,0.8), 0 1px 4px rgba(0,0,0,0.6) !important;
}

/* ── BOTTOM STRIP — compact command console ── */
.battle-bottom-strip {
  flex-shrink: 0;
  background: linear-gradient(0deg, #06080d 0%, rgba(9,11,17,0.98) 100%);
  border-top: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.7);
  position: relative;
  z-index: 10;
}

/* Tighten hand bar within bottom strip */
.battle-bottom-strip .hand-bar {
  padding: 0.35rem 0.75rem 0.2rem;
  margin-top: 0 !important;
  border-top: none !important;
}

/* Tighten hand scroll within bottom strip */
.battle-bottom-strip .hand-scroll-row {
  padding: 0.2rem 0.75rem 0.45rem;
}

/* Tighten attack hint within bottom strip */
.battle-bottom-strip .atk-hint {
  margin: 0.08rem 0.75rem 0.05rem;
  padding: 0.18rem 0.75rem;
}

/* ═══ MAIN MENU ═══ */

.main-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 1.5rem;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(45,123,255,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 20% 80%, rgba(45,123,255,0.06) 0%, transparent 50%),
    var(--bg-dark);
}

.mm-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 440px;
}

.mm-badge {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--nato-blue);
  border: 1px solid rgba(45,123,255,0.3);
  padding: 0.3rem 1rem;
  margin-bottom: 1.5rem;
  display: inline-block;
}

.mm-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: clamp(3rem, 15vw, 5rem);
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-align: center;
  margin-bottom: 0;
}

.mm-amp {
  color: var(--nato-blue);
}

.mm-sub {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: 0.3rem;
  margin-bottom: 3rem;
}

.mm-modes {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.mm-mode {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  padding: 1.4rem 1.5rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.mm-mode::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--nato-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s;
}

.mm-mode:hover::before,
.mm-mode:active::before {
  transform: scaleX(1);
}

.mm-mode:hover,
.mm-mode:active {
  border-color: rgba(45,123,255,0.25);
  background: var(--bg-card-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(45,123,255,0.08);
}

.mm-mode-quick::before {
  background: var(--accent-gold);
}

.mm-mode-quick:hover,
.mm-mode-quick:active {
  border-color: rgba(255,215,0,0.25);
  box-shadow: 0 4px 20px rgba(255,215,0,0.08);
}

.mm-mode-icon {
  font-size: 2rem;
  min-width: 2.5rem;
  text-align: center;
  line-height: 1;
}

.mm-mode-content {
  flex: 1;
}

.mm-mode-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 0.15rem;
}

.mm-mode-quick .mm-mode-name {
  color: var(--accent-gold);
}

.mm-mode-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.mm-mode-arrow {
  font-size: 1.6rem;
  color: var(--text-secondary);
  transition: transform 0.2s, color 0.2s;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
}

.mm-mode:hover .mm-mode-arrow,
.mm-mode:active .mm-mode-arrow {
  transform: translateX(4px);
  color: var(--text-primary);
}

/* ═══ CASUAL MODE — Main Menu Button ═══ */

.mm-mode-casual::before {
  background: #22c55e;
}

.mm-mode-casual:hover,
.mm-mode-casual:active {
  border-color: rgba(34, 197, 94, 0.3);
  box-shadow: 0 4px 20px rgba(34, 197, 94, 0.1);
}

.mm-mode-casual .mm-mode-name {
  color: #22c55e;
}

.mm-mode-tag-casual {
  display: inline-block;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #22c55e;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.4);
  padding: 1px 6px;
  border-radius: 2px;
  margin-bottom: 0.25rem;
}

/* ═══ CASUAL MODE — Battle Top Bar Badge ═══ */

.btb-mode-badge {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 2px;
  margin-top: 2px;
}

.btb-mode-casual {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.35);
}

/* ═══ CASUAL MODE — Auto-Deploy Suggestion Glow ═══ */

@keyframes suggest-pulse {
  0%, 100% { box-shadow: 0 0 8px 2px rgba(34, 197, 94, 0.5), 0 0 16px 4px rgba(34, 197, 94, 0.2); }
  50%       { box-shadow: 0 0 14px 5px rgba(34, 197, 94, 0.7), 0 0 24px 8px rgba(34, 197, 94, 0.3); }
}

.hfc-suggest {
  animation: suggest-pulse 1.8s ease-in-out infinite;
  border: 1.5px solid rgba(34, 197, 94, 0.7) !important;
  z-index: 60 !important;
}

.hfc-suggest-badge {
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.48rem;
  color: #22c55e;
  background: rgba(0, 0, 0, 0.88);
  border: 1px solid rgba(34, 197, 94, 0.7);
  border-radius: 3px;
  padding: 1px 4px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  z-index: 10;
  pointer-events: none;
  white-space: nowrap;
  /* Casual mode "best play" indicator — marks highest value/cost card player can afford */
}

.mm-footer {
  margin-top: 2.5rem;
  text-align: center;
}

.mm-home-link {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s;
}

.mm-home-link:hover {
  color: var(--text-primary);
}

/* ═══ QUICK PLAY — FACTION SELECT ADDITIONS ═══ */

.qp-section {
  margin-top: 2rem;
  padding-top: 1.5rem;
  text-align: center;
}

.qp-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.qp-divider::before,
.qp-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.1);
}

.qp-divider span {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}

.qp-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 0.4rem;
}

.qp-subtitle {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 1.2rem;
  line-height: 1.4;
}

.qp-faction-btns {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.qp-faction-btn {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.7rem 1.8rem;
  border: 2px solid;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.qp-nato {
  color: var(--nato-blue);
  border-color: rgba(45,123,255,0.4);
}

.qp-nato:hover, .qp-nato:active {
  background: rgba(45,123,255,0.12);
  border-color: var(--nato-blue);
}

.qp-brics {
  color: var(--brics-red);
  border-color: rgba(255,61,61,0.4);
}

.qp-brics:hover, .qp-brics:active {
  background: rgba(255,61,61,0.12);
  border-color: var(--brics-red);
}

/* ═══ QUICK PLAY SCREEN ═══ */

.quick-play-screen {
  max-width: 600px;
  margin: 0 auto;
  padding-bottom: 2rem;
}

.playstyle-options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.playstyle-option {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.07);
  border-left: 3px solid var(--ps-color, #ffd700);
  cursor: pointer;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
}

.playstyle-option::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ps-color, #ffd700);
  opacity: 0;
  transition: opacity 0.2s;
}

.playstyle-option:hover::before,
.playstyle-option:active::before {
  opacity: 0.04;
}

.playstyle-option:hover {
  border-color: rgba(255,255,255,0.15);
  transform: translateX(2px);
}

.ps-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
  width: 2.5rem;
  text-align: center;
  position: relative;
}

.ps-content {
  flex: 1;
  position: relative;
}

.ps-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ps-color, #ffd700);
  margin-bottom: 0.1rem;
}

.ps-tagline {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.3rem;
}

.ps-desc {
  font-size: 0.78rem;
  color: rgba(139,156,182,0.8);
  line-height: 1.4;
}

.ps-arrow {
  font-size: 1.5rem;
  color: var(--ps-color, #ffd700);
  opacity: 0.5;
  flex-shrink: 0;
  position: relative;
  transition: transform 0.2s, opacity 0.2s;
}

.playstyle-option:hover .ps-arrow {
  transform: translateX(3px);
  opacity: 0.9;
}

/* ═══════════════════════════════════════════════════════════
   PERK FLASH — Visual indicator when perk activates
   ═══════════════════════════════════════════════════════════ */

.perk-flash {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, rgba(255,215,0,0.95), rgba(255,140,0,0.95));
  color: #000;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 900;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  pointer-events: none;
  z-index: 50;
  white-space: nowrap;
  box-shadow: 0 0 8px rgba(255,215,0,0.8);
  animation: perkFlashAnim 1.6s ease forwards;
}

@keyframes perkFlashAnim {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  15%  { opacity: 1; transform: translate(-50%, -70%) scale(1.1); }
  60%  { opacity: 1; transform: translate(-50%, -80%) scale(1.0); }
  100% { opacity: 0; transform: translate(-50%, -100%) scale(0.9); }
}

/* ── Perk ability line on battle cards ── */
.bc-ability {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffd700;
  background: rgba(255,215,0,0.12);
  border: 1px solid rgba(255,215,0,0.3);
  border-radius: 2px;
  padding: 0.08rem 0.3rem;
  margin: 0.1rem 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.bc-ability:hover {
  background: rgba(255,215,0,0.22);
  border-color: rgba(255,215,0,0.6);
}

/* ── Battle inspect modal (perk details) ── */
.battle-inspect-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 1100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.battle-inspect-modal {
  background: var(--surface-1, #1a2332);
  border: 1px solid rgba(255,215,0,0.3);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  padding: 1.2rem 1rem calc(2rem + env(safe-area-inset-bottom, 0px));
  width: 100%;
  max-width: 480px;
  position: relative;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.6);
}

.bi-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
}

.bi-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.bi-icon {
  font-size: 2rem;
}

.bi-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
}

.bi-faction {
  font-size: 0.7rem;
  color: var(--text-secondary);
  letter-spacing: 0.1em;
}

.bi-perk-box {
  background: rgba(255,215,0,0.08);
  border: 1px solid rgba(255,215,0,0.3);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.6rem;
}

.bi-perk-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffd700;
  margin-bottom: 0.25rem;
}

.bi-perk-desc {
  font-size: 0.82rem;
  color: rgba(200,215,230,0.9);
  line-height: 1.45;
}

.bi-stats-row {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.bi-stat {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  padding: 0.2rem 0.4rem;
  font-size: 0.72rem;
  color: var(--text-secondary);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
}

.bi-hp-bar {
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  margin-bottom: 0.5rem;
  overflow: hidden;
}

.bi-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #4ade80);
  border-radius: 2px;
  transition: width 0.3s;
}

.bi-hp-fill.medium { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.bi-hp-fill.low    { background: linear-gradient(90deg, #ef4444, #f87171); }

/* ── Hand card inspect extras ── */
.bi-hp-label {
  font-size: 0.72rem;
  color: var(--text-secondary);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
}

.bi-deploy-btn {
  display: block;
  width: 100%;
  margin-top: 0.85rem;
  padding: 0.65rem 1rem;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.1s, opacity 0.15s;
}

.bi-deploy-btn:active {
  transform: scale(0.97);
}

.bi-deploy-btn.bi-deploy-blocked {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-secondary);
  cursor: default;
  opacity: 0.7;
}

/* Battle inspect — ATTACK action button (red/orange military strike) */
.bi-deploy-btn.bi-attack-btn {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  border: 1px solid rgba(239,68,68,0.4);
  letter-spacing: 0.16em;
  font-size: 1rem;
  box-shadow: 0 0 16px rgba(239,68,68,0.35);
}
.bi-deploy-btn.bi-attack-btn:hover {
  background: linear-gradient(135deg, #f87171, #dc2626);
}

/* Battle inspect — CANCEL selection button (muted) */
.bi-deploy-btn.bi-attack-cancel-btn {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--text-secondary);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
}
.bi-deploy-btn.bi-attack-cancel-btn:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

.ht-inspectable {
  cursor: pointer;
}

/* ── Log ability highlight ── */
.log-entry .ability {
  color: #ffd700;
  font-weight: 600;
}

/* ── Battle log entry-level color classification ── */
.log-entry { color: rgba(232,234,237,0.85); }

.log-entry.log-kill {
  border-left: 3px solid rgba(255,45,45,0.7);
  padding-left: 0.5rem;
  background: rgba(255,45,45,0.05);
  color: rgba(232,234,237,0.95);
}

.log-entry.log-ability {
  border-left: 3px solid rgba(255,215,0,0.6);
  padding-left: 0.5rem;
  background: rgba(255,215,0,0.04);
  color: rgba(232,234,237,0.9);
}

.log-entry.log-heal {
  border-left: 3px solid rgba(34,197,94,0.7);
  padding-left: 0.5rem;
  background: rgba(34,197,94,0.04);
  color: rgba(232,234,237,0.9);
}

/* ═══════════════════════════════════════════════════════════════
   UI POLISH — NON-BATTLE SCREENS
   Dark/tactical military aesthetic pass
   ═══════════════════════════════════════════════════════════════ */

/* ── Scanlines overlay utility (applies to menu/lobby screens) ── */
.screen-scanlines::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(255,255,255,0.008) 3px,
    rgba(255,255,255,0.008) 4px
  );
  pointer-events: none;
  z-index: 0;
}

.screen-scanlines > * { position: relative; z-index: 1; }

/* ── Main menu scanlines + corner decoration ── */
.main-menu {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,45,45,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 20% 80%, rgba(45,123,255,0.05) 0%, transparent 50%),
    var(--bg-dark);
}

.mm-stats-line {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(139,156,182,0.5);
  margin-bottom: 2.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.mm-stats-line .ml-dot {
  width: 3px;
  height: 3px;
  background: rgba(255,45,45,0.4);
  display: inline-block;
  flex-shrink: 0;
}

/* ── Corner bracket decoration ── */
.tac-corner-box {
  position: relative;
  padding: 0.5rem;
}

.tac-corner-box::before,
.tac-corner-box::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: rgba(255,45,45,0.25);
  border-style: solid;
}

.tac-corner-box::before {
  top: 0; left: 0;
  border-width: 1px 0 0 1px;
}

.tac-corner-box::after {
  bottom: 0; right: 0;
  border-width: 0 1px 1px 0;
}

/* ── Tactical label / badge ── */
.tac-label {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.tac-label::before,
.tac-label::after {
  content: '';
  display: inline-block;
  width: 20px;
  height: 1px;
  background: rgba(255,255,255,0.12);
}

/* ── Game header badge animation ── */
.game-header .badge {
  animation: badgeFadeIn 0.6s ease both;
}

@keyframes badgeFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.game-header h1 {
  animation: titleFadeIn 0.5s ease 0.1s both;
}

@keyframes titleFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Faction select VS divider ── */
.faction-vs-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  max-width: 700px;
  width: 100%;
  margin-top: 2rem;
}

.faction-vs-label {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.15);
  flex-shrink: 0;
}

.faction-vs-row .fvs-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
}

/* ── Quick play screen improvements ── */
.qp-faction-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border: 1px solid;
  margin-bottom: 1.25rem;
}

.qp-faction-pill.nato { color: var(--nato-blue); border-color: rgba(45,123,255,0.3); background: rgba(45,123,255,0.06); }
.qp-faction-pill.brics { color: var(--brics-red); border-color: rgba(255,61,61,0.3); background: rgba(255,61,61,0.06); }

/* ── Deck builder & faction select: blue accent (matches landing page) ── */
.deck-builder .btn-primary,
.faction-select .btn-primary {
  background: var(--nato-blue);
  box-shadow: none;
}
.deck-builder .btn-primary:hover,
.faction-select .btn-primary:hover {
  background: #4a91ff;
  box-shadow: 0 4px 20px rgba(45,123,255,0.35);
  transform: translateY(-1px);
}
.faction-select .game-header .badge {
  color: var(--nato-blue);
  border-color: rgba(45,123,255,0.3);
}

/* ── Deck builder improvements ── */
.db-faction-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.db-faction-badge {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border: 1px solid;
}

.db-faction-badge.nato {
  color: var(--nato-blue);
  border-color: rgba(45,123,255,0.3);
  background: rgba(45,123,255,0.06);
}

.db-faction-badge.brics {
  color: var(--brics-red);
  border-color: rgba(255,61,61,0.3);
  background: rgba(255,61,61,0.06);
}

.db-faction-bar-line {
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

/* ── Deck builder budget bar improvements ── */
.budget-bar {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-top: 2px solid rgba(255,255,255,0.06);
  padding: 0.65rem 1rem;
  margin-bottom: 0.75rem;
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(8px);
}

/* ── Deploy bar upgrade ── */
.deploy-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(17,20,28,0.97);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 0.75rem 1.5rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  z-index: 20;
  backdrop-filter: blur(10px);
}

/* ── Filter tab improvements ── */
.filter-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
}

/* ── Screen fade transition ── */
@keyframes screenSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.screen {
  animation: screenSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Suppress entry animation on deck-builder re-renders (modal/filter state changes).
   Prevents screenSlideIn transform from creating a stacking context on re-rendered .screen. */
.screen.no-anim {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ── Button active press effect (mobile) ── */
.btn:active {
  transform: scale(0.97) !important;
  transition: transform 0.05s !important;
}

.mm-mode:active {
  transform: scale(0.99) !important;
}

/* ── Faction select screen background ── */
.faction-select {
  background:
    radial-gradient(ellipse 70% 50% at 30% 80%, rgba(45,123,255,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 70% 20%, rgba(255,61,61,0.04) 0%, transparent 60%),
    var(--bg-dark);
}

/* ── Game badge pill for screens that show faction ── */
.screen-faction-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.3rem 0.9rem;
  border: 1px solid;
  margin-bottom: 0.75rem;
}

.screen-faction-badge.nato {
  color: var(--nato-blue);
  border-color: rgba(45,123,255,0.25);
  background: rgba(45,123,255,0.05);
}

.screen-faction-badge.brics {
  color: var(--brics-red);
  border-color: rgba(255,61,61,0.25);
  background: rgba(255,61,61,0.05);
}

/* ── Quick play playstyle grid (desktop) ── */
@media (min-width: 640px) {
  .playstyle-options {
    gap: 0.75rem;
  }

  .playstyle-option {
    padding: 1.2rem 1.5rem;
  }
}

/* ── Results screen background for victory/defeat ── */
.results-screen.results-victory {
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255,215,0,0.06) 0%, transparent 70%),
    var(--bg-dark);
}

.results-screen.results-defeat {
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255,45,45,0.06) 0%, transparent 70%),
    var(--bg-dark);
}

/* ── Passive indicator improvement ── */
.passive-indicator {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-gold);
  background: rgba(255,215,0,0.06);
  border: 1px solid rgba(255,215,0,0.15);
  padding: 0.25rem 0.75rem;
  display: inline-block;
  margin-bottom: 0.75rem;
}

/* ── Faction option name size refinement ── */
.faction-option .faction-name {
  font-size: 2.5rem;
  letter-spacing: 0.02em;
}

/* ── Card count badge improvement ── */
.card-count-badge {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(139,156,182,0.5);
  margin-top: 2rem;
  padding: 0.35rem 1rem;
  border: 1px solid rgba(255,255,255,0.05);
}

.log-entry.log-heal .ability {
  color: #4ade80;
}

.log-entry.log-normal {
  border-left: 3px solid rgba(255,255,255,0.08);
  padding-left: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   MILITARY DOSSIER CARD TEMPLATE — UNIFIED REDESIGN
   ═══════════════════════════════════════════════════════════════ */

/* ── Faction Badges (subtle, consistent across factions) ── */
.fbadge-nato {
  background: rgba(45,123,255,0.18);
  color: #6aa0ff;
  border: 1px solid rgba(45,123,255,0.3);
}
.fbadge-brics {
  background: rgba(255,61,61,0.15);
  color: #ff7878;
  border: 1px solid rgba(255,61,61,0.25);
}

/* Override old faction border-left on deck builder cards — unified neutral border */
.card.dbc {
  border-left: 1px solid var(--border-subtle) !important;
}
.card.dbc.selected {
  border-left: 1px solid var(--accent-gold) !important;
}

/* ── DBC Card: Art Area ── */
.dbc-art {
  position: relative;
  text-align: center;
  padding: 0.55rem 0 0.4rem;
  background: rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin: -0.45rem -0.45rem 0.3rem;
}
.dbc-art-icon {
  font-size: 1.9rem;
  line-height: 1;
  display: block;
}
.dbc-faction-badge {
  position: absolute;
  top: 0.2rem;
  right: 0.28rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.42rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.07rem 0.22rem;
  line-height: 1.5;
}
.dbc-rarity-corner {
  position: absolute;
  top: 0.2rem;
  left: 0.28rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.4rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.07rem 0.2rem;
  line-height: 1.5;
}
.dbc-rarity-common    { color: #9ca3af; background: rgba(156,163,175,0.1); border: 1px solid rgba(156,163,175,0.2); }
.dbc-rarity-uncommon  { color: #22c55e; background: rgba(34,197,94,0.1);   border: 1px solid rgba(34,197,94,0.2); }
.dbc-rarity-rare      { color: #60a5fa; background: rgba(96,165,250,0.1);  border: 1px solid rgba(96,165,250,0.2); }
.dbc-rarity-epic      { color: #a855f7; background: rgba(168,85,247,0.1);  border: 1px solid rgba(168,85,247,0.25); }
.dbc-rarity-legendary { color: var(--accent-gold); background: rgba(255,215,0,0.1); border: 1px solid rgba(255,215,0,0.25); }

/* ── DBC Card: Name ── */
.dbc-name-v2 {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0.22rem;
  line-height: 1.2;
}

/* ── DBC Card: Stats Grid (3×2) ── */
.dbc-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.14rem;
}
.dbc-stat {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.065);
  text-align: center;
  padding: 0.2rem 0.06rem 0.14rem;
}
.dbc-stat-val {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.84rem;
  line-height: 1;
  color: var(--text-primary);
  display: block;
}
.dbc-stat-lbl {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.41rem;
  letter-spacing: 0.07em;
  color: var(--text-secondary);
  text-transform: uppercase;
  display: block;
  margin-top: 0.05rem;
}
.dbc-stat-cost {
  background: rgba(255,215,0,0.045);
  border-color: rgba(255,215,0,0.15);
}
.dbc-stat-cost .dbc-stat-val { color: var(--accent-gold); }

/* ── Hand Tile: Key Stats (FPR + ARM) ── */
.ht-key-stats {
  display: flex;
  gap: 0.2rem;
  margin: 0.1rem 0 0.04rem;
  justify-content: center;
}
.ht-stat {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.6rem;
  color: var(--text-secondary);
  white-space: nowrap;
}
.ht-faction-badge {
  position: absolute;
  bottom: 0.24rem;
  left: 0.22rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.4rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.06rem 0.18rem;
  line-height: 1.4;
}

/* ── Battle Tile: Header Bar ── */
.bt-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.06rem;
  min-height: 1.1rem;
}
.bt-cost-inline {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.65rem;
  background: rgba(255,215,0,0.2);
  color: var(--accent-gold);
  padding: 0 0.22rem;
  line-height: 1.5;
}
.bt-faction-badge {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.4rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.06rem 0.18rem;
  line-height: 1.4;
}

/* ── Battle Tile: Mini Stats Grid (3×2) ── */
.bt-stats-mini {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.05rem;
  margin: 0.08rem 0;
}
.bts-item {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.58rem; /* was 0.5rem — increased for readability */
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
  background: rgba(255,255,255,0.03);
  padding: 0.06rem 0.02rem;
}
.bts-hp {
  color: var(--hp-green);
  font-size: 0.52rem;
  font-weight: 700;
}

/* ── Inspect Modal: Art Header ── */
.inspect-art-header {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.4rem 1rem;
  margin: 0 -1.25rem 0.85rem;
  position: relative;
  min-height: 110px;
}
.inspect-art-icon {
  font-size: 4rem;
  line-height: 1;
}
.inspect-rarity-corner {
  position: absolute;
  top: 0.45rem;
  right: 0.5rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.12rem 0.38rem;
}
.inspect-faction-pill {
  position: absolute;
  top: 0.45rem;
  left: 0.5rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.1rem 0.32rem;
}
.inspect-type-tag {
  position: absolute;
  bottom: 0.4rem;
  left: 0.5rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  text-transform: uppercase;
}
.inspect-name-row {
  margin-bottom: 0.5rem;
}
.inspect-hp-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.inspect-hp-label-inline {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.68rem;
  color: var(--text-secondary);
  white-space: nowrap;
}
/* DEP stat cell highlight in inspect modal */
.isb.isb-cost {
  background: rgba(255,215,0,0.04);
  border-color: rgba(255,215,0,0.15);
}
.isb.isb-cost .isb-val { color: var(--accent-gold); }

/* ── Battle Inspect Modal: Dossier Enhancements ── */
.battle-inspect-modal.rarity-uncommon::before { background: #22c55e; }
.battle-inspect-modal.rarity-rare::before     { background: #60a5fa; }
.battle-inspect-modal.rarity-legendary::before { background: linear-gradient(90deg, var(--accent-gold), var(--accent-orange)); }
.battle-inspect-modal.rarity-epic::before { background: #a855f7; }
.battle-inspect-modal::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: #6b7280;
  border-radius: 12px 12px 0 0;
}
.bi-art-header {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1rem 0.9rem;
  margin: 0 -1rem 0.7rem;
  position: relative;
  min-height: 90px;
}
.bi-art-icon-lg {
  font-size: 3.2rem;
  line-height: 1;
}
.bi-rarity-corner {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.1rem 0.28rem;
}
.bi-faction-pill {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.52rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.09rem 0.28rem;
}
.bi-type-tag {
  position: absolute;
  bottom: 0.35rem;
  left: 0.5rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.48rem;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  text-transform: uppercase;
}
.bi-hp-label {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.65rem;
  color: var(--text-secondary);
  margin: 0.3rem 0 0.6rem;
}

/* ── Battle Inspect: Stats Grid ── */
.bi-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.22rem;
  margin-bottom: 0.6rem;
}
.bis-cell {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  text-align: center;
  padding: 0.42rem 0.1rem 0.32rem;
}
.bis-cell-cost {
  background: rgba(255,215,0,0.04);
  border-color: rgba(255,215,0,0.15);
}
.bis-val {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--text-primary);
  display: block;
}
.bis-lbl {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.5rem;
  letter-spacing: 0.07em;
  color: var(--text-secondary);
  text-transform: uppercase;
  display: block;
  margin-top: 0.1rem;
}
.bis-cell-cost .bis-val { color: var(--accent-gold); }

/* ═══════════════════════════════════════════════════════════════
   UFO EASTER EGG — CLASSIFIED
═══════════════════════════════════════════════════════════════ */

#ufo-glitch-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  animation: ufoOverlayIn 0.15s ease, ufoOverlayOut 0.4s ease 2.2s forwards;
  pointer-events: none;
  overflow: hidden;
}

@keyframes ufoOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ufoOverlayOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* CRT scanlines */
.ufo-glitch-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 255, 120, 0.04) 2px,
    rgba(0, 255, 120, 0.04) 4px
  );
  animation: ufoScanlines 0.08s steps(1) infinite;
  pointer-events: none;
}
@keyframes ufoScanlines {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(2px); }
  100% { transform: translateY(0); }
}

/* Glitch flicker on the whole overlay */
#ufo-glitch-overlay {
  animation: ufoOverlayIn 0.15s ease, ufoGlitchFlicker 0.1s steps(1) 3, ufoOverlayOut 0.4s ease 2.2s forwards;
}
@keyframes ufoGlitchFlicker {
  0%, 100% { filter: brightness(1) hue-rotate(0deg); }
  25%  { filter: brightness(1.4) hue-rotate(90deg) contrast(1.3); }
  50%  { filter: brightness(0.7) hue-rotate(-20deg); }
  75%  { filter: brightness(1.6) hue-rotate(160deg) contrast(1.5); }
}

/* CLASSIFIED stamp */
.ufo-classified-stamp {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: clamp(2.8rem, 10vw, 5.5rem);
  letter-spacing: 0.18em;
  color: #ff2020;
  text-shadow: 0 0 40px rgba(255, 32, 32, 0.8), 0 0 80px rgba(255, 32, 32, 0.4);
  border: 4px solid #ff2020;
  padding: 0.15em 0.5em;
  transform: rotate(-8deg);
  animation: ufoStampIn 0.2s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
  position: relative;
  z-index: 2;
}
@keyframes ufoStampIn {
  from { transform: rotate(-8deg) scale(2.5); opacity: 0; }
  to   { transform: rotate(-8deg) scale(1);   opacity: 1; }
}

/* Warning line */
.ufo-warn-line {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: clamp(0.65rem, 2.5vw, 0.9rem);
  letter-spacing: 0.12em;
  color: #2d9bff;
  text-shadow: 0 0 12px rgba(45, 155, 255, 0.7);
  margin-top: 1.2rem;
  animation: ufoWarnIn 0.3s ease 0.45s both;
  position: relative;
  z-index: 2;
}
@keyframes ufoWarnIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Big UFO icon */
.ufo-icon-big {
  font-size: clamp(3rem, 12vw, 5rem);
  margin-top: 1.5rem;
  animation: ufoIconFloat 0.8s ease-in-out 0.5s both, ufoIconPulse 1.2s ease-in-out 1.3s infinite;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 0 20px rgba(0, 220, 255, 0.8));
}
@keyframes ufoIconFloat {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ufoIconPulse {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 20px rgba(0, 220, 255, 0.8)); }
  50%       { transform: translateY(-6px) scale(1.05); filter: drop-shadow(0 0 35px rgba(0, 220, 255, 1)); }
}

/* UFO hand card — special glowing treatment */
.ufo-hand-card {
  border: 2px solid rgba(0, 220, 255, 0.8) !important;
  box-shadow: 0 0 16px rgba(0, 220, 255, 0.5), 0 0 32px rgba(0, 220, 255, 0.2) !important;
  background: linear-gradient(160deg, rgba(0, 30, 50, 0.95), rgba(0, 10, 20, 0.98)) !important;
  animation: ufoCardPulse 1.8s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}
.ufo-hand-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 220, 255, 0.06) 0%, transparent 60%);
  pointer-events: none;
}
@keyframes ufoCardPulse {
  0%, 100% { box-shadow: 0 0 16px rgba(0, 220, 255, 0.5), 0 0 32px rgba(0, 220, 255, 0.2); }
  50%       { box-shadow: 0 0 24px rgba(0, 220, 255, 0.8), 0 0 48px rgba(0, 220, 255, 0.35); }
}

/* ═══ HAND POPUP OVERLAY ═══ */
.hand-popup-overlay {
  position: fixed;
  inset: 0;
  background: transparent; /* no backdrop — battlefield fully visible */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1000;
  pointer-events: none; /* let taps pass through to battlefield except on card children */
}

.hand-popup-modal {
  background: transparent; /* cards float over battlefield — no panel */
  border: none;
  border-radius: 0;
  box-shadow: none;
  width: 100%;
  max-height: none;
  display: flex;
  flex-direction: column;
  pointer-events: none; /* pass-through, card children re-enable */
}

@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.hand-popup-header {
  display: none; /* no header bar — free-floating hand has no containing panel */
}

.hand-popup-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-gold);
}

.hand-popup-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s;
}

.hand-popup-close:hover {
  color: var(--accent-gold);
}

.hand-popup-body {
  flex: 1;
  overflow: visible; /* cards can lift/scale above container */
  padding: 0;
  -webkit-overflow-scrolling: touch;
  pointer-events: none; /* pass-through; cards re-enable */
}

/* hand-popup-cards is now a passthrough — fan wrapper handles layout */
.hand-popup-cards {
  display: block;
  pointer-events: none;
}

/* ═══ HAND FAN LAYOUT ═══ */
.hand-fan-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px));
  pointer-events: none; /* wrapper is transparent; cards re-enable */
}

.hand-fan-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 52px 16px 0; /* 52px = 38px lift + 8px scale expansion + 6px buffer */
  position: relative;
  width: 100%;
  pointer-events: none; /* only cards are interactive */
}

.hand-fan-card {
  position: relative;
  width: 68px;
  height: 96px;
  border-radius: 8px;
  background: #181a1e;
  border: 1.5px solid rgba(255,255,255,0.1);
  overflow: hidden;
  cursor: pointer;
  transform-origin: bottom center;
  transform: rotate(var(--fan-r, 0deg));
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.2s ease,
              filter 0.2s ease;
  flex-shrink: 0;
  margin-left: -22px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto; /* re-enable — parent chain has pointer-events:none */
}

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

/* Rarity backgrounds + borders. Glow ONLY for Epic & Legendary */
.hand-fan-card.rarity-common    { background: #181a1e; border-color: rgba(107,114,128,0.38); }
.hand-fan-card.rarity-uncommon  { background: #0f1812; border-color: rgba(34,197,94,0.42); }
.hand-fan-card.rarity-rare      { background: #0d1420; border-color: rgba(45,123,255,0.48); }
.hand-fan-card.rarity-epic      { background: #130d1c; border-color: rgba(168,85,247,0.72); box-shadow: 0 0 10px rgba(168,85,247,0.22), 0 0 24px rgba(168,85,247,0.08); }
.hand-fan-card.rarity-legendary { background: #1c1500; border-color: rgba(255,215,0,0.74); box-shadow: 0 0 12px rgba(255,215,0,0.3), 0 0 30px rgba(255,215,0,0.1); }

/* Faction left accent */
.hand-fan-card.nato-card  { box-shadow: inset 2px 0 0 rgba(45,123,255,0.5); }
.hand-fan-card.brics-card { box-shadow: inset 2px 0 0 rgba(255,61,61,0.5); }
.hand-fan-card.aegis-card { box-shadow: inset 2px 0 0 rgba(0,212,255,0.5); }
.hand-fan-card.rarity-epic.nato-card   { box-shadow: 0 0 10px rgba(168,85,247,0.22), 0 0 24px rgba(168,85,247,0.08), inset 2px 0 0 rgba(45,123,255,0.5); }
.hand-fan-card.rarity-epic.brics-card  { box-shadow: 0 0 10px rgba(168,85,247,0.22), 0 0 24px rgba(168,85,247,0.08), inset 2px 0 0 rgba(255,61,61,0.5); }
.hand-fan-card.rarity-epic.aegis-card  { box-shadow: 0 0 10px rgba(168,85,247,0.22), 0 0 24px rgba(168,85,247,0.08), inset 2px 0 0 rgba(0,212,255,0.5); }
.hand-fan-card.rarity-legendary.nato-card  { box-shadow: 0 0 12px rgba(255,215,0,0.3), 0 0 30px rgba(255,215,0,0.1), inset 2px 0 0 rgba(45,123,255,0.5); }
.hand-fan-card.rarity-legendary.brics-card { box-shadow: 0 0 12px rgba(255,215,0,0.3), 0 0 30px rgba(255,215,0,0.1), inset 2px 0 0 rgba(255,61,61,0.5); }
.hand-fan-card.rarity-legendary.aegis-card { box-shadow: 0 0 12px rgba(255,215,0,0.3), 0 0 30px rgba(255,215,0,0.1), inset 2px 0 0 rgba(0,212,255,0.5); }

/* Selected card lifts up, scales, glows gold */
.hand-fan-card.hfc-selected {
  transform: translateY(-38px) rotate(0deg) scale(1.15) !important;
  box-shadow: 0 10px 36px rgba(255,215,0,0.45), 0 0 0 2px var(--accent-gold) !important;
  z-index: 50 !important;
}

/* Unaffordable cards dim */
.hand-fan-card.hfc-dimmed {
  opacity: 0.38;
  filter: grayscale(0.5);
}

/* Cost badge — top right corner */
.hfc-cost {
  position: absolute;
  top: 4px; right: 4px;
  background: rgba(0,0,0,0.85);
  color: var(--accent-gold);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.68rem;
  border-radius: 3px;
  padding: 1px 4px;
  z-index: 3;
  letter-spacing: 0.03em;
  pointer-events: none;
}

/* Off-faction tax: cost badge turns amber with a "+" flag */
.hfc-cost-taxed {
  color: #ff9900;
  background: rgba(255,100,0,0.18);
  border: 1px solid rgba(255,100,0,0.4);
}

/* Unaffordable card: cost badge turns red to signal "can't play" */
.hand-fan-card.hfc-dimmed .hfc-cost {
  color: #f87171;
  background: rgba(220, 50, 50, 0.22);
  border: 1px solid rgba(220, 50, 50, 0.4);
}
.hfc-tax-flag {
  font-size: 0.55rem;
  vertical-align: super;
  color: #ff9900;
  font-weight: 900;
  letter-spacing: -0.05em;
}

/* Full-art image fills card face */
.hfc-fullart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Icon background for no-art cards */
.hfc-icon-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  padding-bottom: 1rem;
  pointer-events: none;
}
.hand-fan-card.rarity-common    .hfc-icon-bg { background: radial-gradient(circle at 50% 40%, rgba(107,114,128,0.18) 0%, transparent 68%); }
.hand-fan-card.rarity-uncommon  .hfc-icon-bg { background: radial-gradient(circle at 50% 40%, rgba(34,197,94,0.2) 0%, transparent 68%); }
.hand-fan-card.rarity-rare      .hfc-icon-bg { background: radial-gradient(circle at 50% 40%, rgba(45,123,255,0.24) 0%, transparent 68%); }
.hand-fan-card.rarity-epic      .hfc-icon-bg { background: radial-gradient(circle at 50% 40%, rgba(168,85,247,0.3) 0%, transparent 68%); }
.hand-fan-card.rarity-legendary .hfc-icon-bg { background: radial-gradient(circle at 50% 40%, rgba(255,215,0,0.3) 0%, transparent 68%); }

/* Bottom gradient footer — name strip */
.hfc-footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 0.8rem 0.25rem 0.2rem;
  z-index: 3;
  pointer-events: none;
}
.hand-fan-card.rarity-common    .hfc-footer { background: linear-gradient(to top, rgba(10,10,12,0.94) 0%, rgba(10,10,12,0.7) 58%, transparent 100%); }
.hand-fan-card.rarity-uncommon  .hfc-footer { background: linear-gradient(to top, rgba(4,18,8,0.94) 0%, rgba(4,18,8,0.7) 58%, transparent 100%); }
.hand-fan-card.rarity-rare      .hfc-footer { background: linear-gradient(to top, rgba(4,10,22,0.94) 0%, rgba(4,10,22,0.7) 58%, transparent 100%); }
.hand-fan-card.rarity-epic      .hfc-footer { background: linear-gradient(to top, rgba(10,4,22,0.94) 0%, rgba(10,4,22,0.7) 58%, transparent 100%); }
.hand-fan-card.rarity-legendary .hfc-footer { background: linear-gradient(to top, rgba(18,12,0,0.94) 0%, rgba(18,12,0,0.7) 58%, transparent 100%); }

/* Name label in footer */
.hfc-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.55rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f0e8ff;
  text-align: center;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Hand Fan Detail Panel ─── */
.hand-fan-detail {
  width: 100%;
  background: rgba(255, 215, 0, 0.04);
  border: 1px solid rgba(255, 215, 0, 0.18);
  border-radius: 8px;
  padding: 10px 12px 12px;
  margin-top: 10px;
  animation: fadeIn 0.15s ease;
}

.hfd-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}
.hfd-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--accent-gold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
}
.hfd-meta {
  display: flex;
  align-items: center;
  gap: 5px;
}
.hfd-faction-pill {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
}
.hfd-type-tag {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.65rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* 6-cell stats grid */
.hfd-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  margin-bottom: 8px;
}
.hfd-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  padding: 4px 2px;
  gap: 1px;
}
.hfds-icon { font-size: 0.65rem; line-height: 1; }
.hfds-val {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-primary);
  line-height: 1;
}
.hfds-lbl {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.48rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Ability block */
.hfd-ability {
  background: rgba(255, 140, 0, 0.06);
  border-left: 2px solid var(--accent-orange);
  border-radius: 0 4px 4px 0;
  padding: 5px 8px;
  margin-bottom: 8px;
}
.hfd-ability-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--accent-orange);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 2px;
}
.hfd-ability-desc {
  font-size: 0.65rem;
  color: var(--text-secondary);
  line-height: 1.4;
  display: block;
}

/* Deploy button */
.hfd-deploy-btn {
  width: 100%;
  padding: 9px 12px;
  background: linear-gradient(135deg, rgba(255,215,0,0.18), rgba(255,165,0,0.08));
  border: 1px solid rgba(255,215,0,0.4);
  color: var(--accent-gold);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: block;
}
.hfd-deploy-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(255,215,0,0.28), rgba(255,165,0,0.14));
  border-color: rgba(255,215,0,0.65);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(255,215,0,0.22);
}
.hfd-deploy-btn:active:not(:disabled) {
  transform: scale(0.97);
}
.hfd-deploy-blocked {
  opacity: 0.38;
  cursor: not-allowed;
  border-color: rgba(255,255,255,0.08);
  color: var(--text-secondary);
  background: transparent;
}

/* ═══ HAND TOGGLE BUTTON ═══ */
.hand-bar-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hand-toggle-btn {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(255,215,0,0.1);
  color: var(--accent-gold);
  border: 1px solid rgba(255,215,0,0.25);
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 4px;
}

.hand-toggle-btn:hover {
  background: rgba(255,215,0,0.15);
  border-color: rgba(255,215,0,0.4);
  transform: translateY(-1px);
}

.hand-toggle-btn:active {
  transform: scale(0.96);
}

/* ═══ FIELD 5 UNITS LAYOUT ═══ */
/* Note: card sizing is handled dynamically via --field-card-width CSS variable.
   No shrinking transform — cards maintain their computed size at all unit counts. */
.field-5units {
  /* no extra constraints — dynamic sizing handles layout */
}

.field-5units .battle-card,
.field-5units .battle-tile {
  /* REMOVED: transform: scale(0.88) — cards no longer shrink at 5 units */
  width: 100%;
  min-width: 0;
}

/* ══ DRAW PICKER INSPECT OVERLAY ══ */
/* Sits above draw picker (z-index 1200) so player can preview before choosing */
.dpi-backdrop {
  z-index: 1300 !important;
}

.dpi-choose-btn {
  background: linear-gradient(135deg, #d97706, #b45309) !important;
  border: none !important;
  color: #fff !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.1em !important;
}

.dpi-choose-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.dpi-choose-btn:active {
  transform: scale(0.97);
}

.dpi-back-btn {
  display: block;
  width: 100%;
  margin-top: 0.55rem;
  padding: 0.45rem 1rem;
  background: transparent;
  border: 1px solid rgba(147, 51, 234, 0.3);
  border-radius: 8px;
  color: rgba(147, 51, 234, 0.75);
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  touch-action: manipulation;
}

.dpi-back-btn:hover {
  background: rgba(147, 51, 234, 0.1);
  border-color: rgba(147, 51, 234, 0.55);
}

.dpi-back-btn:active {
  transform: scale(0.97);
}

/* ═══ PAUSE OVERLAY ═══ */
.pause-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.pause-modal {
  background: #11141c;
  border: 1px solid rgba(45,123,255,0.35);
  padding: 2rem 2.5rem;
  text-align: center;
  min-width: 240px;
  max-width: 320px;
  width: 90%;
  box-shadow: 0 0 40px rgba(45,123,255,0.15);
}

.pause-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  color: #e8eaed;
}

.pause-btn-resume {
  display: block;
  width: 100%;
  padding: 0.75rem;
  background: #2d7bff;
  color: white;
  border: none;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  margin-bottom: 0.75rem;
  transition: background 0.2s;
  touch-action: manipulation;
}

.pause-btn-resume:hover { background: #4d8fff; }

.pause-btn-exit {
  display: block;
  width: 100%;
  padding: 0.72rem;
  background: transparent;
  color: #8b9cb6;
  border: 1px solid rgba(255,255,255,0.1);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  touch-action: manipulation;
}

.pause-btn-exit:hover { color: #e8eaed; border-color: rgba(255,255,255,0.25); }

.pause-btn-exit-confirm {
  display: block;
  width: 100%;
  padding: 0.72rem;
  background: rgba(255,45,45,0.1);
  color: #ff6b6b;
  border: 1px solid rgba(255,45,45,0.3);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  touch-action: manipulation;
}

.pause-btn-exit-confirm:hover { background: rgba(255,45,45,0.2); }

.pause-confirm-msg {
  font-size: 0.9rem;
  color: #e8eaed;
  margin-bottom: 1.2rem;
  line-height: 1.5;
}

.pause-confirm-sub {
  display: block;
  font-size: 0.75rem;
  color: #8b9cb6;
  margin-top: 0.25rem;
}

/* Pause button in top bar */
.pause-fab {
  font-size: 0.85rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  color: #8b9cb6;
  padding: 0.28rem 0.55rem;
  cursor: pointer;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  transition: all 0.2s;
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pause-fab:hover { color: #e8eaed; border-color: rgba(255,255,255,0.2); }
.pause-fab:active { transform: scale(0.95); }

/* ═══ ACCOUNT UI (MAIN MENU) ═══ */
.mm-account-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.6rem;
  flex-wrap: wrap;
}

.mm-account-user {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2d7bff;
}

.mm-logout-btn {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: transparent;
  color: #8b9cb6;
  border: 1px solid rgba(255,255,255,0.08);
  padding: 0.2rem 0.55rem;
  cursor: pointer;
  transition: color 0.2s;
}

.mm-logout-btn:hover { color: #e8eaed; }

.mm-login-link {
  display: block;
  margin-top: 0.6rem;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2d7bff;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.mm-login-link:hover { opacity: 1; }

/* ═══ ACCOUNT UI (RESULTS SCREEN) ═══ */
.result-account-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1rem;
  padding: 0.6rem 1rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-wrap: wrap;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}

.result-account-saved {
  color: #4ade80;
  font-weight: 600;
}

.result-account-hint {
  color: #8b9cb6;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.result-login-link {
  color: #2d7bff;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: color 0.2s;
}

.result-login-link:hover { color: #4d8fff; }

/* ═══════════════════════════════════════════════════════════════
   UNIFIED CARD STYLING — Applied Across All Views
   Gallery, Deck Builder, Admin — Match Battle Card Style
   ═══════════════════════════════════════════════════════════════ */

/* ── GALLERY CARD UNIFICATION ── */
.gcard {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0.35rem 0.3rem 0.3rem !important;
  gap: 0.08rem !important;
  position: relative;
  overflow: hidden;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 6px !important;
  transition: all 0.2s !important;
}

.gcard::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 2;
}

.gcard.rarity-common::before    { background: #6b7280; }
.gcard.rarity-uncommon::before  { background: #22c55e; }
.gcard.rarity-rare::before      { background: var(--nato-blue); }
.gcard.rarity-legendary::before { background: linear-gradient(90deg, var(--accent-gold), var(--accent-orange)); }
.gcard.rarity-epic::before { background: #a855f7; }

.gcard.nato-card    { border-left: 3px solid var(--nato-blue) !important; }
.gcard.brics-card   { border-left: 3px solid var(--brics-red) !important; }

.gcard-image {
  width: 100% !important;
  aspect-ratio: 1/1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.8rem !important;
  background: rgba(0,0,0,0.3) !important;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 0.1rem !important;
  flex-shrink: 0;
}

.gcard-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

.gcard-image .faction-overlay {
  position: absolute;
  top: 0.3rem; right: 0.3rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  padding: 0.1rem 0.3rem;
  text-transform: uppercase;
  z-index: 3;
  border-radius: 2px;
}

.gcard-image .faction-overlay.nato { background: rgba(45,123,255,0.75); color: white; }
.gcard-image .faction-overlay.brics { background: rgba(255,45,45,0.75); color: white; }

.gcard-body {
  padding: 0.25rem 0.2rem !important;
  width: 100% !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.04rem !important;
  flex: 1;
}

.gcard-name {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.55rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  line-height: 1.1 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  color: var(--text-primary) !important;
  margin-bottom: 0 !important;
}

.gcard-meta {
  font-size: 0.45rem !important;
  color: var(--text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-family: 'Rajdhani', sans-serif !important;
  margin-bottom: 0.04rem !important;
  font-weight: 600;
}

.gcard-stats {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.08rem !important;
  width: 100% !important;
  margin-top: 0.04rem;
}

.gcard-stat {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.15rem !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 0.42rem !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
}

.gcard-stat .sicon { font-size: 0.65rem !important; opacity: 0.8; }
.gcard-stat .sval { color: var(--text-primary) !important; }

.rarity-label {
  position: absolute !important;
  bottom: 0.35rem !important;
  right: 0.4rem !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.4rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  opacity: 0.6 !important;
  z-index: 3;
}

.rarity-legendary .rarity-label { color: var(--accent-gold) !important; opacity: 1 !important; }
.rarity-rare .rarity-label { color: var(--nato-blue) !important; }
.rarity-uncommon .rarity-label { color: #22c55e !important; }

.gcard:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4) !important;
  border-color: var(--accent-gold) !important;
}

.gcard.nato-card:hover {
  border-color: rgba(45,123,255,0.5) !important;
  box-shadow: 0 6px 18px rgba(45,123,255,0.2) !important;
}

.gcard.brics-card:hover {
  border-color: rgba(255,45,45,0.5) !important;
  box-shadow: 0 6px 18px rgba(255,45,45,0.2) !important;
}

/* ── ADMIN CARD UNIFICATION ── */
.acard {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 0.3rem 0.25rem 0.25rem !important;
  gap: 0.06rem !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 6px !important;
  position: relative;
  overflow: hidden;
}

.acard::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}

.acard.rarity-common::before    { background: #6b7280; }
.acard.rarity-uncommon::before  { background: #22c55e; }
.acard.rarity-rare::before      { background: var(--nato-blue); }
.acard.rarity-legendary::before { background: linear-gradient(90deg, var(--accent-gold), var(--accent-orange)); }
.acard.rarity-epic::before { background: #a855f7; }

.acard.has-image { border-left: 3px solid #22c55e; }

.acard-preview {
  width: 100% !important;
  aspect-ratio: 1/1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,0.4) !important;
  position: relative;
  font-size: 1.3rem !important;
  overflow: hidden;
  border-radius: 3px;
  margin-bottom: 0.08rem !important;
}

.acard-preview img {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.acard-info {
  padding: 0.2rem 0.15rem !important;
  width: 100% !important;
  text-align: center !important;
  font-size: 0.38rem;
  display: flex;
  flex-direction: column;
  gap: 0.02rem;
}

.acard-name {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.38rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary) !important;
}

.acard-meta {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 0.33rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text-secondary) !important;
  font-weight: 600;
}

/* ── DECK BUILDER CARD UNIFICATION ── */
.dbc {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 6px !important;
  position: relative;
  overflow: hidden;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 0.3rem 0.25rem !important;
  gap: 0.06rem !important;
  transition: all 0.2s;
}

.dbc::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 2;
}

.dbc.rarity-common::before    { background: #6b7280; }
.dbc.rarity-uncommon::before  { background: #22c55e; }
.dbc.rarity-rare::before      { background: var(--nato-blue); }
.dbc.rarity-legendary::before { background: linear-gradient(90deg, var(--accent-gold), var(--accent-orange)); }
.dbc.rarity-epic::before { background: #a855f7; }

.dbc.nato-card { border-left: 3px solid var(--nato-blue) !important; }
.dbc.brics-card { border-left: 3px solid var(--brics-red) !important; }

.dbc-image {
  width: 100% !important;
  aspect-ratio: 1/1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.6rem !important;
  background: rgba(0,0,0,0.3) !important;
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  margin-bottom: 0.08rem !important;
}

.dbc-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: absolute !important;
}

.dbc2-name {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.52rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  text-align: center !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100% !important;
  line-height: 1.1;
  color: var(--text-primary) !important;
  padding: 0 0.1rem;
}

.dbc:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
  border-color: var(--accent-gold) !important;
}

.dbc-full {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* ── MODAL INSPECTION CARDS ── */
.card-inspect-modal,
.battle-inspect-modal {
  background: var(--bg-card) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
}

.card-inspect-modal::before,
.battle-inspect-modal::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 8px 8px 0 0;
  z-index: 2;
}

.card-inspect-modal.rarity-common::before,
.battle-inspect-modal.rarity-common::before { background: #6b7280; }

.card-inspect-modal.rarity-uncommon::before,
.battle-inspect-modal.rarity-uncommon::before { background: #22c55e; }

.card-inspect-modal.rarity-rare::before,
.battle-inspect-modal.rarity-rare::before { background: var(--nato-blue); }

.card-inspect-modal.rarity-legendary::before,
.battle-inspect-modal.rarity-legendary::before { background: linear-gradient(90deg, var(--accent-gold), var(--accent-orange)); }

.card-inspect-modal.rarity-epic::before,
.battle-inspect-modal.rarity-epic::before { background: #a855f7; }

/* ═══════════════════════════════════════════════════════════════
   TCG UNIFIED CARD TEMPLATE — v4
   Aspect ratio: 5:7 (portrait playing card ~2.5:3.5)
   Used on: deck builder, arsenal, battle hand popup
   ═══════════════════════════════════════════════════════════════ */

.tcg-card {
  position: relative;
  background: #181a1e;
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  aspect-ratio: 5 / 7;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Rarity: background color + border. Glow ONLY for Epic & Legendary */
.tcg-card.rarity-common    { background: #181a1e; border-color: rgba(107,114,128,0.38); }
.tcg-card.rarity-uncommon  { background: #0f1812; border-color: rgba(34,197,94,0.42); }
.tcg-card.rarity-rare      { background: #0d1420; border-color: rgba(45,123,255,0.48); }
.tcg-card.rarity-epic      { background: #130d1c; border-color: rgba(168,85,247,0.72); box-shadow: 0 0 12px rgba(168,85,247,0.22), 0 0 30px rgba(168,85,247,0.08); }
.tcg-card.rarity-legendary { background: #1c1500; border-color: rgba(255,215,0,0.74); box-shadow: 0 0 15px rgba(255,215,0,0.3), 0 0 38px rgba(255,215,0,0.1); }

/* Faction left accent strip (inset shadow) */
.tcg-card.nato-card  { box-shadow: inset 3px 0 0 rgba(45,123,255,0.55); }
.tcg-card.brics-card { box-shadow: inset 3px 0 0 rgba(255,61,61,0.55); }
.tcg-card.aegis-card { box-shadow: inset 3px 0 0 rgba(0,212,255,0.55); }
/* Epic — merge rarity glow + faction accent */
.tcg-card.rarity-epic.nato-card   { box-shadow: 0 0 12px rgba(168,85,247,0.22), 0 0 30px rgba(168,85,247,0.08), inset 3px 0 0 rgba(45,123,255,0.5); }
.tcg-card.rarity-epic.brics-card  { box-shadow: 0 0 12px rgba(168,85,247,0.22), 0 0 30px rgba(168,85,247,0.08), inset 3px 0 0 rgba(255,61,61,0.5); }
.tcg-card.rarity-epic.aegis-card  { box-shadow: 0 0 12px rgba(168,85,247,0.22), 0 0 30px rgba(168,85,247,0.08), inset 3px 0 0 rgba(0,212,255,0.5); }
/* Legendary — merge rarity glow + faction accent */
.tcg-card.rarity-legendary.nato-card  { box-shadow: 0 0 15px rgba(255,215,0,0.3), 0 0 38px rgba(255,215,0,0.1), inset 3px 0 0 rgba(45,123,255,0.5); }
.tcg-card.rarity-legendary.brics-card { box-shadow: 0 0 15px rgba(255,215,0,0.3), 0 0 38px rgba(255,215,0,0.1), inset 3px 0 0 rgba(255,61,61,0.5); }
.tcg-card.rarity-legendary.aegis-card { box-shadow: 0 0 15px rgba(255,215,0,0.3), 0 0 38px rgba(255,215,0,0.1), inset 3px 0 0 rgba(0,212,255,0.5); }

/* Hover */
.tcg-card:hover { transform: translateY(-2px); border-color: rgba(147, 51, 234, 0.7); box-shadow: 0 0 14px rgba(147, 51, 234, 0.25); }
.tcg-card.rarity-epic:hover    { box-shadow: 0 0 20px rgba(168,85,247,0.42), 0 0 44px rgba(168,85,247,0.14) !important; }
.tcg-card.rarity-legendary:hover { box-shadow: 0 0 24px rgba(255,215,0,0.55), 0 0 52px rgba(255,215,0,0.16) !important; }
.tcg-card:active { transform: scale(0.96); }

/* Selected state (deck builder) */
.tcg-card.selected {
  border-color: var(--accent-gold);
  background: rgba(255,215,0,0.06);
  box-shadow: 0 0 14px rgba(255,215,0,0.14);
}

/* Deck full: dimmed, no interaction */
.tcg-card.deck-full {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* ── Art area: top 42% of card ── */
.tcg-art {
  position: relative;
  flex: 0 0 42%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
  overflow: hidden;
  border-bottom: 1px solid rgba(147, 51, 234, 0.18);
}

.tcg-art-icon {
  font-size: 2.0rem;
  line-height: 1;
  z-index: 1;
  pointer-events: none;
}

.tcg-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* ── Gallery-style full-art image (fills entire card face) ── */
.tcg-fullart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  pointer-events: none;
  z-index: 1;
}

/* ── Icon background for no-art gallery-style cards ── */
.cbf-icon-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  padding-bottom: 1.4rem;
  pointer-events: none;
  z-index: 1;
}
.cbf-icon-bg.rarity-common    { background: radial-gradient(circle at 50% 42%, rgba(107,114,128,0.22) 0%, transparent 68%); }
.cbf-icon-bg.rarity-uncommon  { background: radial-gradient(circle at 50% 42%, rgba(34,197,94,0.24) 0%, transparent 68%); }
.cbf-icon-bg.rarity-rare      { background: radial-gradient(circle at 50% 42%, rgba(45,123,255,0.28) 0%, transparent 68%); }
.cbf-icon-bg.rarity-epic      { background: radial-gradient(circle at 50% 42%, rgba(168,85,247,0.34) 0%, transparent 68%); }
.cbf-icon-bg.rarity-legendary { background: radial-gradient(circle at 50% 42%, rgba(255,215,0,0.34) 0%, transparent 68%); }

/* ── Bottom gradient name strip (gallery style) ── */
.tcg-footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.6rem 0.4rem 0.32rem;
  z-index: 4;
  pointer-events: none;
}
.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%); }
.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%); }
.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%); }
.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%); }
.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 {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #f0e8ff;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Card Art Photo Support ── */

/* Inspect modal art photo (deck builder) */
.inspect-art-header {
  overflow: hidden;
}
.inspect-art-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
}
.inspect-art-header .inspect-art-icon,
.inspect-art-header .inspect-rarity-corner,
.inspect-art-header .inspect-faction-pill,
.inspect-art-header .inspect-type-tag {
  position: relative;
  z-index: 1;
}

/* Battle inspect modal art photo */
.bi-art-header {
  overflow: hidden;
}
.bi-art-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
}
.bi-art-header .bi-art-icon-lg,
.bi-art-header .bi-rarity-corner,
.bi-art-header .bi-faction-pill,
.bi-art-header .bi-type-tag {
  position: relative;
  z-index: 1;
}

/* Battle tile / hand tile compact art */
.bt-icon.bt-icon-art {
  width: 100%;
  height: 2.8rem;
  margin-top: 0.3rem;
  margin-bottom: 0.05rem;
  overflow: hidden;
  border-radius: 3px;
  font-size: 0;
}
.bt-icon.bt-icon-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Draw picker row compact art */
.dpc-icon.dpc-icon-art {
  width: 2.6rem;
  height: 2.6rem;
  overflow: hidden;
  border-radius: 4px;
  flex-shrink: 0;
  font-size: 0;
}
.dpc-icon.dpc-icon-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Cost badge — top-left of art */
.tcg-cost-badge {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  background: #b8940a;
  color: #fffbe6;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.62rem;
  padding: 0.06rem 0.3rem;
  letter-spacing: 0.04em;
  z-index: 3;
  line-height: 1.35;
  display: flex;
  align-items: center;
  gap: 0.08rem;
}

/* Faction badge — top-right of art */
.tcg-faction-badge {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.46rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.06rem 0.26rem;
  z-index: 3;
  line-height: 1.35;
}

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

/* ── Body: name + type + stats + ability ── */
.tcg-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0.45rem 0.45rem 0.4rem;
  gap: 0.18rem;
  min-height: 0;
  overflow: hidden;
}

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

/* Type label */
.tcg-type-line {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-secondary);
  line-height: 1;
}

/* Divider */
.tcg-sep {
  height: 1px;
  background: var(--border-subtle);
  flex-shrink: 0;
}

/* Stats: 2×2 grid matching Tactical Briefing design */
.tcg-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.15rem;
  margin-top: 0.12rem;
  flex-shrink: 0;
}

.tcg-stat-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(0, 0, 0, 0.28);
  border-radius: 4px;
  padding: 0.14rem 0.08rem;
  font-family: 'Rajdhani', sans-serif;
}

.tcg-stat-cell .tsc-icon { display: none; }
.tcg-stat-cell .tsc-val  { font-family: 'Rajdhani', sans-serif; font-size: 0.8rem; font-weight: 700; color: #e8e0f5; line-height: 1; }
.tcg-stat-cell .tsc-lbl  { font-family: 'Rajdhani', sans-serif; font-size: 0.48rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(180, 160, 210, 0.55); line-height: 1.2; }

/* Ability name */
.tcg-ability-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.57rem;
  font-weight: 600;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
  border-radius: 3px;
  padding: 0.07rem 0.28rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.08rem;
  line-height: 1.3;
}

/* In-deck badge (legacy — no longer rendered, kept for safety) */
.tcg-in-deck { display: none; }

/* Rarity corner label */
.tcg-rarity-label {
  position: absolute;
  bottom: 0.2rem;
  right: 0.28rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.4rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.5;
  z-index: 2;
}

.tcg-card.rarity-legendary .tcg-rarity-label { color: var(--accent-gold); opacity: 0.9; }
.tcg-card.rarity-epic      .tcg-rarity-label { color: #a855f7; opacity: 0.9; }
.tcg-card.rarity-rare      .tcg-rarity-label { color: var(--nato-blue); opacity: 0.8; }
.tcg-card.rarity-uncommon  .tcg-rarity-label { color: #22c55e; opacity: 0.8; }

/* Gold bubble — add/remove indicator in deck builder */
.tcg-select-bubble {
  position: absolute;
  bottom: 0.3rem;
  right: 0.3rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 215, 0, 0.45);
  background: transparent;
  cursor: pointer;
  padding: 0;
  z-index: 4;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, transform 0.1s ease;
  flex-shrink: 0;
}

/* Filled = in deck */
.tcg-select-bubble.is-selected {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  box-shadow: 0 0 7px rgba(255, 215, 0, 0.65);
}

/* Deck full: non-selected bubbles greyed out / non-interactive */
.tcg-select-bubble.is-full {
  border-color: rgba(255, 255, 255, 0.15);
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* Hover: preview fill */
.tcg-select-bubble:not(.is-selected):not(.is-full):hover {
  border-color: var(--accent-gold);
  background: rgba(255, 215, 0, 0.25);
  transform: scale(1.1);
}

/* Active tap feedback */
.tcg-select-bubble:active {
  transform: scale(0.9);
}

/* ── Arsenal grid: 2 cols mobile → wider on desktop ── */
.arsenal-tcg-grid {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 0.75rem 4rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
}

@media (min-width: 480px) {
  .arsenal-tcg-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
  }
}

@media (min-width: 768px) {
  .arsenal-tcg-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding: 0 1.5rem 4rem;
    max-width: 1300px;
  }
}

@media (min-width: 1100px) {
  .arsenal-tcg-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ═══════════════════════════════════════════════════════════════
   PROGRESSION SYSTEM — XP, Levels, Choice Packs
   ═══════════════════════════════════════════════════════════════ */

/* ── Main Menu Progression Bar ── */
.mm-progression {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(45,123,255,0.07);
  border: 1px solid rgba(45,123,255,0.18);
  border-radius: 0;
  padding: 0.7rem 1rem;
  margin: 0.75rem 0 1.25rem;
  max-width: 480px;
  width: 100%;
}

.mm-prog-left {
  flex: 1;
  min-width: 0;
}

.mm-prog-level {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

.mm-prog-lvl-num {
  color: var(--accent-blue);
  font-weight: 700;
  font-size: 0.85rem;
}

.mm-prog-xpbar-wrap {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 0.25rem;
}

.mm-prog-xpbar {
  height: 100%;
  background: var(--accent-blue);
  border-radius: 2px;
  transition: width 0.6s ease;
  box-shadow: 0 0 6px rgba(45,123,255,0.5);
}

.mm-prog-xp-text {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
}

.mm-profile-btn {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid rgba(45,123,255,0.3);
  color: var(--accent-blue);
  padding: 0.5rem 0.8rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.mm-profile-btn:hover { background: rgba(45,123,255,0.12); border-color: var(--accent-blue); }
.mm-profile-btn--alert { border-color: var(--accent-gold); color: var(--accent-gold); animation: mm-pulse 1.5s ease-in-out infinite; }

@keyframes mm-pulse {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 10px rgba(255,215,0,0.4); }
}

.mm-choice-badge {
  background: var(--accent-gold);
  color: #000;
  font-size: 0.6rem;
  font-weight: 900;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Results Screen XP Block ── */
.result-xp-block {
  margin: 0.5rem auto 1rem;
  max-width: 340px;
  width: 100%;
  text-align: center;
}

.result-xp-earned {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--accent-blue);
  margin-bottom: 0.3rem;
}

.result-levelup {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  color: var(--accent-gold);
  text-transform: uppercase;
  animation: levelup-flash 0.6s ease-in-out 3;
  margin-bottom: 0.4rem;
}

@keyframes levelup-flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.result-xp-bar-wrap {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.3rem;
}

.result-xp-bar {
  height: 100%;
  background: var(--accent-blue);
  border-radius: 3px;
  transition: width 1s ease;
  box-shadow: 0 0 8px rgba(45,123,255,0.5);
}

.result-xp-meta {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  text-transform: uppercase;
}

/* ── Credits Earned (Results Screen) ── */
.result-credits-block {
  margin: 0.3rem auto 0.8rem;
  max-width: 340px;
  width: 100%;
  text-align: center;
  background: rgba(255, 200, 50, 0.06);
  border: 1px solid rgba(255, 200, 50, 0.22);
  border-radius: 3px;
  padding: 0.55rem 0.8rem;
}

.rcb-earned {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: 0.2rem;
}

.rcb-icon {
  font-size: 1rem;
  color: #ffd755;
  filter: drop-shadow(0 0 4px rgba(255,215,85,0.6));
}

.rcb-amount {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  color: #ffd755;
  text-shadow: 0 0 8px rgba(255,215,85,0.4);
}

.rcb-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: rgba(255, 215, 85, 0.7);
  text-transform: uppercase;
  align-self: center;
}

.rcb-total {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: rgba(216,232,255,0.5);
  text-transform: uppercase;
}

/* ── Profile Screen ── */
.profile-screen {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow-y: auto;
  background: var(--bg-dark);
}

.profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(17,20,28,0.95);
  position: sticky;
  top: 0;
  z-index: 10;
}

.profile-back-btn {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  transition: color 0.2s;
}

.profile-back-btn:hover { color: var(--text-primary); }

.profile-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.profile-user {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--accent-blue);
}

.profile-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
}

/* Level card */
.profile-level-card {
  background: rgba(45,123,255,0.07);
  border: 1px solid rgba(45,123,255,0.2);
  padding: 1.5rem 1.25rem;
  text-align: center;
}

.profile-level-num {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 900;
  font-size: 4rem;
  line-height: 1;
  color: var(--accent-blue);
  margin-bottom: 0.1rem;
}

.profile-level-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.profile-xpbar-wrap {
  width: 100%;
  height: 8px;
  background: rgba(255,255,255,0.07);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.4rem;
}

.profile-xpbar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-blue), #5b9fff);
  border-radius: 4px;
  transition: width 0.8s ease;
  box-shadow: 0 0 10px rgba(45,123,255,0.4);
}

.profile-xp-text {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
}

.profile-total-xp {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: rgba(139,156,182,0.5);
  margin-top: 0.2rem;
}

/* Profile sections */
.profile-section {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  padding: 1rem;
}

.profile-section-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

.profile-collection-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.profile-coll-num {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  color: var(--accent-gold);
  line-height: 1;
}

.profile-coll-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.profile-coll-pct {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--accent-gold);
  margin-left: auto;
}

.profile-coll-bar-wrap {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}

.profile-coll-bar {
  height: 100%;
  background: var(--accent-gold);
  border-radius: 2px;
  transition: width 0.8s ease;
}

/* Stats grid */
.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.profile-stat {
  text-align: center;
  padding: 0.5rem 0;
}

.profile-stat-val {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--text-primary);
  line-height: 1;
}

.profile-stat-lbl {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: 0.2rem;
}

/* Pending choices section */
.profile-pending-info {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.85rem;
  color: var(--accent-gold);
  margin-bottom: 0.75rem;
}

.profile-open-pack-btn {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(255,215,0,0.1);
  border: 1px solid rgba(255,215,0,0.4);
  color: var(--accent-gold);
  padding: 0.7rem 1.5rem;
  cursor: pointer;
  width: 100%;
  transition: all 0.2s;
  animation: mm-pulse 1.5s ease-in-out infinite;
}

.profile-open-pack-btn:hover {
  background: rgba(255,215,0,0.18);
  border-color: var(--accent-gold);
}

/* ── Choice Pack Modal ── */
#choice-pack-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  backdrop-filter: blur(6px);
}

.choice-pack-modal {
  background: var(--bg-card);
  border: 1px solid rgba(45,123,255,0.3);
  max-width: 520px;
  width: 100%;
  padding: 1.5rem 1.25rem 1.25rem;
  text-align: center;
  position: relative;
}

.choice-pack-badge {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 0.5rem;
}

.choice-pack-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
  color: var(--text-primary);
}

.choice-pack-sub {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

.choice-pack-cards {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

/* Card flip animation */
.choice-card {
  width: 120px;
  height: 165px;
  perspective: 800px;
  cursor: pointer;
  flex-shrink: 0;
}

.choice-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: none;
}

.choice-card--flipped .choice-card-inner {
  animation: card-flip 0.5s ease forwards;
  animation-delay: var(--delay, 0s);
}

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

.choice-card-back,
.choice-card-front {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 0;
}

.choice-card-back {
  background: linear-gradient(135deg, #0f1219 0%, #1a2234 50%, #0f1219 100%);
  border: 1px solid rgba(45,123,255,0.2);
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.choice-card-back::after {
  content: '';
  background: url('/icons/ui/zap.svg') center/contain no-repeat;
  filter: invert(1);
  opacity: 0.3;
  display: block;
  width: 2rem;
  height: 2rem;
}

.choice-card-front {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-top-width: 3px;
  padding: 0.6rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  transform: rotateY(0deg); /* start hidden — see animation */
}

/* Initial state: front is hidden until flip */
.choice-card--flip .choice-card-inner {
  transform: rotateY(180deg);
}

.choice-card-icon {
  font-size: 1.8rem;
  line-height: 1;
}

.choice-card-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.2;
}

.choice-card-meta {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}

.choice-card-faction {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

.choice-card-type {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.55rem;
  color: var(--text-secondary);
}

.choice-card-rarity {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  font-weight: 700;
}

.choice-card-ability {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.55rem;
  color: var(--accent-blue);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0.8;
}

.choice-card-select-btn {
  margin-top: auto;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(45,123,255,0.15);
  border: 1px solid rgba(45,123,255,0.35);
  color: var(--accent-blue);
  padding: 0.25rem 0.5rem;
  width: 100%;
  text-align: center;
  transition: all 0.2s;
}

.choice-card:hover .choice-card-select-btn {
  background: rgba(45,123,255,0.3);
  border-color: var(--accent-blue);
}

.choice-pack-footer {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.7;
}

/* Collection complete modal */
.choice-pack-modal--complete .choice-pack-title {
  font-size: 3rem;
}

.choice-confirm-btn {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: rgba(45,123,255,0.15);
  border: 1px solid rgba(45,123,255,0.4);
  color: var(--accent-blue);
  padding: 0.7rem 2rem;
  cursor: pointer;
  margin-top: 1rem;
  transition: all 0.2s;
}

.choice-confirm-btn:hover { background: rgba(45,123,255,0.25); }

/* ── CAMPAIGN MISSION RESULTS BADGE ── */
.result-campaign-badge {
  margin: 0 auto 1.2rem;
  max-width: 340px;
  background: rgba(45,255,100,0.06);
  border: 1px solid rgba(45,255,100,0.2);
  border-left: 3px solid #22c55e;
  padding: 0.75rem 1rem;
  text-align: left;
}

.rcb-mission {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #22c55e;
  margin-bottom: 0.2rem;
}

.rcb-challenge {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-gold);
}

/* Mobile responsiveness for choice pack */
@media (max-width: 400px) {
  .choice-card { width: 100px; height: 140px; }
  .choice-pack-cards { gap: 0.5rem; }
}

/* ═══════════════════════════════════════════════════════════════
   TCG CARD — BATTLE CONTEXT MODIFIERS
   Same .tcg-card template everywhere; scale per context only.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Field cards: deployed units on the battlefield ─── */
/* Layout handled by flex rows — formation determined by renderFieldFormation() */

.tcg-card.tcg-card--field {
  box-shadow: 0 4px 18px rgba(0,0,0,0.8), 0 1px 4px rgba(0,0,0,0.6) !important;
}

.tcg-card.tcg-card--field .tcg-art-icon {
  font-size: 1.2rem;
}

.tcg-card.tcg-card--field .tcg-body {
  padding: 0.18rem 0.2rem 0.16rem;
  gap: 0.06rem;
}

.tcg-card.tcg-card--field .tcg-name {
  font-size: 0.52rem;
}

.tcg-card.tcg-card--field .tcg-type-pill {
  font-size: 0.38rem;
  padding: 0.04rem 0.2rem;
}

.tcg-card.tcg-card--field .tcg-stat-cell .tsc-val  { font-size: 0.58rem; }
.tcg-card.tcg-card--field .tcg-stat-cell .tsc-lbl  { font-size: 0.38rem; }

.tcg-card.tcg-card--field .tcg-ability-name {
  font-size: 0.38rem;
}

/* ═══════════════════════════════════════════════════════════════
   BATTLE UNIT TOKENS — compact horizontal strips replacing portrait cards
   ═══════════════════════════════════════════════════════════════ */

/* Token field container — vertical stack, fills the field zone */
.bt-token-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0.3rem 0.5rem;
  width: 100%;
  box-sizing: border-box;
}

/* Individual unit token — horizontal strip */
.bt-token {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  padding: 7px 9px 7px 7px;
  border-radius: 6px;
  background: rgba(14, 17, 26, 0.88);
  border: 1px solid rgba(255,255,255,0.07);
  border-left: 3px solid rgba(255,255,255,0.2);
  cursor: pointer;
  position: relative;
  transition: background 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
  min-height: 46px;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* Faction left-border accent */
.bt-token-nato  { border-left-color: #4a9eff; }
.bt-token-brics { border-left-color: #ff4444; }
.bt-token-aegis { border-left-color: #a855f7; }

/* Rarity subtle glow on left edge */
.bt-token.rarity-rare      { box-shadow: -2px 0 8px rgba(74,158,255,0.22); }
.bt-token.rarity-legendary { box-shadow: -2px 0 12px rgba(255,215,0,0.32); }
.bt-token.rarity-epic      { box-shadow: -2px 0 10px rgba(168,85,247,0.28); }

/* ── Icon section (emoji + boost badge) ── */
.bt-token-icon {
  font-size: 1.45rem;
  line-height: 1;
  flex-shrink: 0;
  position: relative;
  width: 30px;
  text-align: center;
}

.bt-token-boost {
  position: absolute;
  top: -5px;
  right: -10px;
  font-size: 0.5rem;
  background: rgba(255,215,0,0.92);
  color: #0a0a0a;
  padding: 1px 3px;
  border-radius: 3px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* ── Body — name row + HP bar row ── */
.bt-token-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bt-token-name-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.bt-token-name {
  font-size: 0.7rem;
  font-weight: 700;
  color: #dde0ec;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  flex: 1;
  min-width: 0;
}

.bt-token-state-lbl {
  font-size: 0.5rem;
  font-weight: 800;
  color: #84cc16;
  letter-spacing: 0.07em;
  flex-shrink: 0;
  text-transform: uppercase;
}

.bt-token-spent-lbl {
  color: rgba(255,255,255,0.28);
}

.bt-token-matchup {
  font-size: 0.62rem;
  flex-shrink: 0;
}

.bt-token-hp-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.bt-token-hp-track {
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow: hidden;
}

.bt-token-hp-fill {
  height: 100%;
  background: #22c55e;
  border-radius: 3px;
  transition: width 0.28s ease;
}

.bt-token-hp-fill.medium { background: #eab308; }
.bt-token-hp-fill.low    { background: #ef4444; }

.bt-token-hp-nums {
  font-size: 0.56rem;
  color: rgba(255,255,255,0.52);
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ── Faction badge (right side) ── */
.bt-token-badge {
  font-size: 0.45rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 2px 5px;
  border-radius: 3px;
  flex-shrink: 0;
  text-transform: uppercase;
}

.bt-badge-nato  { background: rgba(74,158,255,0.15); color: #6ab4ff; border: 1px solid rgba(74,158,255,0.28); }
.bt-badge-brics { background: rgba(255,68,68,0.15);  color: #ff6666; border: 1px solid rgba(255,68,68,0.28); }
.bt-badge-aegis { background: rgba(168,85,247,0.15); color: #b57aff; border: 1px solid rgba(168,85,247,0.28); }

/* ── Interactive states ── */
.bt-token-can-attack {
  border-left-color: #84cc16 !important;
  background: rgba(132,204,22,0.07);
}
.bt-token-can-attack:hover,
.bt-token-can-attack:active {
  background: rgba(132,204,22,0.14);
  box-shadow: 0 0 12px rgba(132,204,22,0.28), -2px 0 8px rgba(132,204,22,0.2);
}

.bt-token-attacking {
  border-left-color: #84cc16 !important;
  border-color: rgba(132,204,22,0.5);
  background: rgba(132,204,22,0.11);
  box-shadow: 0 0 16px rgba(132,204,22,0.35), -2px 0 10px rgba(132,204,22,0.25);
}

.bt-token-target {
  border-left-color: #ef4444 !important;
  border-color: rgba(239,68,68,0.42);
  background: rgba(239,68,68,0.08);
  cursor: crosshair;
}
.bt-token-target:hover,
.bt-token-target:active {
  background: rgba(239,68,68,0.16);
  box-shadow: 0 0 14px rgba(239,68,68,0.4), -2px 0 8px rgba(239,68,68,0.25);
}

.bt-token-spent {
  opacity: 0.45;
}

.bt-token-destroyed {
  opacity: 0.18;
  filter: grayscale(1);
  pointer-events: none;
}

/* ── Combat animation overrides for tokens ── */
.bt-token.attacking {
  box-shadow: 0 0 20px rgba(255,215,0,0.45), -2px 0 12px rgba(255,215,0,0.35);
  border-color: rgba(255,215,0,0.65);
}
.bt-token.defending {
  box-shadow: 0 0 20px rgba(255,45,45,0.45), -2px 0 12px rgba(255,45,45,0.35);
  border-color: rgba(255,45,45,0.65);
}

/* ── Empty field placeholder ── */
.bt-field-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;
  opacity: 0.22;
}
.bt-field-empty-text {
  font-size: 0.62rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ─── Hand cards: player hand popup grid ─── */
.tcg-card.tcg-card--hand .tcg-art-icon {
  font-size: 1.4rem;
}

/* Afford/cant-afford states on tcg-card */
.tcg-card.ht-affordable {
  cursor: pointer;
}

.tcg-card.ht-affordable:hover {
  border-color: var(--accent-gold);
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(255,215,0,0.15);
}

.tcg-card.ht-affordable:active {
  transform: scale(0.95);
}

.tcg-card.ht-cant-afford {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

/* ─── Draw phase cards: 3 options in a horizontal grid ─── */
.draw-pick-cards--tcg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  width: 100%;
  overflow: hidden;
}

.draw-pick-modal {
  max-width: 360px;
}

.tcg-card.tcg-card--draw {
  border-color: rgba(147,51,234,0.35);
  background: rgba(147,51,234,0.07);
}

.tcg-card.tcg-card--draw:hover {
  border-color: rgba(147,51,234,0.75);
  background: rgba(147,51,234,0.18);
}

.tcg-card.tcg-card--draw .tcg-art-icon {
  font-size: 1.5rem;
}

.tcg-draw-hint {
  position: absolute;
  bottom: 0.18rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.36rem;
  color: rgba(255,255,255,0.3);
  white-space: nowrap;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  z-index: 2;
}

/* ─── Discard pile cards: destroyed units in a grid ─── */
.discard-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  gap: 0.5rem;
  overflow-y: auto;
  align-items: start;
}

.tcg-card.tcg-card--discard {
  opacity: 0.55;
  filter: grayscale(0.6);
  cursor: default;
  pointer-events: none;
}

.tcg-card.tcg-card--discard .tcg-art-icon {
  font-size: 1.3rem;
}

/* ─── HP bar within tcg-card body (field + hand) ─── */
.tcg-hp-bar-wrap {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
  margin-top: auto;
}

.tcg-hp-bar {
  height: 100%;
  background: var(--hp-green);
  border-radius: 2px;
  transition: width 0.4s ease, background 0.3s;
}

.tcg-hp-bar.medium { background: var(--hp-yellow); }
.tcg-hp-bar.low    { background: var(--hp-red); }

/* HP stat cell color coding */
.tsc-hp-val         { color: var(--hp-green); }
.tsc-hp-val.medium  { color: var(--hp-yellow); }

/* ═══════════════════════════════════════════════════════════════
   TUTORIAL OVERLAY SYSTEM
   ═══════════════════════════════════════════════════════════════ */

/* ── SKIP TUTORIAL button (top-right, always visible during tutorial) ── */
.tut-skip-btn {
  position: fixed;
  top: calc(5px + env(safe-area-inset-top, 0px));
  right: calc(8px + env(safe-area-inset-right, 0px));
  z-index: 5100;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.4);
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.22rem 0.55rem;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  pointer-events: auto;
}
.tut-skip-btn:hover {
  color: rgba(255,255,255,0.75);
  border-color: rgba(255,255,255,0.4);
}

/* ── TOOLTIP CARD ── */
.tut-tooltip {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4900;
  background: rgba(8, 12, 22, 0.97);
  border: 1px solid rgba(45, 123, 255, 0.5);
  box-shadow: 0 0 24px rgba(45, 123, 255, 0.18), 0 6px 24px rgba(0,0,0,0.75);
  padding: 0.9rem 1.1rem;
  max-width: min(92vw, 340px);
  width: calc(100vw - 2rem);
  font-family: 'Space Grotesk', sans-serif;
  pointer-events: auto;
}

/* Position variants */
.tut-pos-bottom {
  bottom: calc(190px + env(safe-area-inset-bottom, 0px)); /* above hand area */
  animation: tut-slide-up 0.22s ease-out;
}
.tut-pos-top {
  top: calc(72px + env(safe-area-inset-top, 0px));
  animation: tut-slide-down 0.22s ease-out;
}
.tut-pos-center {
  top: 50%;
  transform: translate(-50%, -50%);
  animation: tut-scale-in 0.2s ease-out;
}

@keyframes tut-slide-up {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes tut-slide-down {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes tut-scale-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.tut-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.5rem;
}
.tut-icon {
  font-size: 0.95rem;
  flex-shrink: 0;
}
.tut-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2d7bff;
}
.tut-body {
  font-size: 0.8rem;
  color: #b8c4d8;
  line-height: 1.55;
  margin-bottom: 0.75rem;
}
.tut-body strong {
  color: #e8eaed;
}
.tut-ok-btn {
  width: 100%;
  background: rgba(45, 123, 255, 0.12);
  border: 1px solid rgba(45, 123, 255, 0.38);
  color: #4d96ff;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.45rem 0;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  display: block;
}
.tut-ok-btn:hover {
  background: rgba(45, 123, 255, 0.24);
  border-color: rgba(45, 123, 255, 0.65);
  color: #6daeff;
}

/* ── "How to Play" mode button on main menu ── */
.mm-mode-tutorial {
  border-color: rgba(45, 123, 255, 0.25) !important;
}
.mm-mode-tutorial .mm-mode-name {
  color: #7aaaff !important;
}

/* ── New player hint under tutorial button ── */
.mm-newplayer-hint {
  text-align: center;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.68rem;
  color: rgba(45, 123, 255, 0.7);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 0.3rem;
  animation: tut-beacon 2.2s ease-in-out infinite;
}
@keyframes tut-beacon {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1; }
}

/* ── Tutorial results banner ── */
.result-tutorial-banner {
  text-align: center;
  background: rgba(45, 123, 255, 0.07);
  border: 1px solid rgba(45, 123, 255, 0.28);
  padding: 0.9rem 1.4rem;
  margin: 0 auto 1.5rem;
  max-width: 380px;
  font-family: 'Rajdhani', sans-serif;
}
.result-tutorial-banner .rtb-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2d7bff;
  margin-bottom: 0.25rem;
}
.result-tutorial-banner .rtb-text {
  font-size: 0.78rem;
  color: #8b9cb6;
  line-height: 1.4;
}
.tsc-hp-val.low     { color: var(--hp-red); }

/* ═══════════════════════════════════════════════════════════════
   TUTORIAL v2 — BUBBLE + ARROW SYSTEM
   ═══════════════════════════════════════════════════════════════ */

/* ── Instruction bubble (mirrors .tut-tooltip styling) ── */
.tut-bubble {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4900;
  background: rgba(8, 12, 22, 0.97);
  border: 1px solid rgba(45, 123, 255, 0.5);
  box-shadow: 0 0 24px rgba(45, 123, 255, 0.18), 0 6px 24px rgba(0,0,0,0.75);
  padding: 0.9rem 1.1rem;
  max-width: min(92vw, 340px);
  width: calc(100vw - 2rem);
  font-family: 'Space Grotesk', sans-serif;
  pointer-events: auto;
}
.tut-bubble.tut-pos-bottom {
  bottom: calc(190px + env(safe-area-inset-bottom, 0px));
  animation: tut-slide-up 0.22s ease-out;
}
.tut-bubble.tut-pos-top {
  top: calc(72px + env(safe-area-inset-top, 0px));
  animation: tut-slide-down 0.22s ease-out;
}
.tut-bubble.tut-pos-center {
  top: 50%;
  transform: translate(-50%, -50%);
  animation: tut-scale-in 0.2s ease-out;
}

/* ── Animated arrow pointer ── */
.tut-arrow {
  position: fixed;
  z-index: 6000;
  font-size: 2.2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(45, 123, 255, 0.8));
  color: #4d96ff;
}
.tut-arrow.tut-arrow-bottom { animation: tut-bounce-down 0.8s ease-in-out infinite; }
.tut-arrow.tut-arrow-top    { animation: tut-bounce-up   0.8s ease-in-out infinite; }
.tut-arrow.tut-arrow-right  { animation: tut-bounce-left 0.8s ease-in-out infinite; }
.tut-arrow.tut-arrow-left   { animation: tut-bounce-right 0.8s ease-in-out infinite; }

@keyframes tut-bounce-down {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
@keyframes tut-bounce-up {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(8px); }
}
@keyframes tut-bounce-left {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(-8px); }
}
@keyframes tut-bounce-right {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(8px); }
}

/* ── Tutorial complete screen ── */
.tut-complete-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1.2rem 3rem;
  overflow-y: auto;
}
.tut-complete-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 1.4rem auto 1.2rem;
  max-width: 280px;
  width: 100%;
}
.tut-check-item {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #4ade80;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  background: rgba(74, 222, 128, 0.06);
  border: 1px solid rgba(74, 222, 128, 0.22);
}
.tut-complete-msg {
  text-align: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.82rem;
  color: #8b9cb6;
  line-height: 1.6;
  margin-bottom: 2rem;
  max-width: 300px;
}

/* ── Post-tutorial mode explainer + deckbuilding screens ── */
.tut-mode-screen {
  overflow-y: auto;
  justify-content: flex-start;
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   SKIRMISH HUB — mode list base styles
   ═══════════════════════════════════════════════════════════════ */

.skirmish-modes {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 500px;
  margin: 0 auto;
}

.skirmish-mode {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}

.skirmish-mode:hover {
  border-color: rgba(255,255,255,0.15);
  background: var(--bg-card-hover);
}

.skirmish-mode--soon {
  opacity: 0.45;
  cursor: default;
}

.skirmish-mode--preset {
  border-color: rgba(34,197,94,0.2);
}

.skirmish-mode--preset:hover {
  border-color: rgba(34,197,94,0.5);
  background: rgba(34,197,94,0.05);
}

.skirmish-mode-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.skirmish-mode-content {
  flex: 1;
  min-width: 0;
}

.skirmish-mode-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 0.15rem;
}

.skirmish-mode-tag {
  display: inline-block;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #22c55e;
  background: rgba(34,197,94,0.1);
  padding: 0.05rem 0.35rem;
  margin-bottom: 0.2rem;
}

.skirmish-mode-tag--soon {
  color: #6b7280;
  background: rgba(107,114,128,0.1);
}

.skirmish-mode-tag--preset {
  color: #22c55e;
  background: rgba(34,197,94,0.1);
}

.skirmish-mode-desc {
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.skirmish-mode-arrow {
  font-size: 1.5rem;
  color: var(--text-secondary);
  flex-shrink: 0;
}

/* Preset banner for new players */
.skirmish-preset-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  background: rgba(34,197,94,0.06);
  border: 1px solid rgba(34,197,94,0.2);
  margin-bottom: 0.75rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.spb-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 0.05rem; }

.spb-link {
  background: none;
  border: none;
  color: #22c55e;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  font-size: inherit;
  text-decoration: underline;
  font-family: inherit;
}

/* ═══════════════════════════════════════════════════════════════
   DECK BUILDER — filter tabs
   ═══════════════════════════════════════════════════════════════ */

.filter-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.filter-group {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.filter-tab {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.55rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}

.filter-tab:hover {
  border-color: rgba(255,255,255,0.2);
  color: var(--text-primary);
}

.filter-tab.active {
  background: rgba(45,123,255,0.15);
  border-color: rgba(45,123,255,0.5);
  color: #2d7bff;
}

/* NATO filter tab */
.filter-tab--nato.active {
  background: rgba(45,123,255,0.15);
  border-color: rgba(45,123,255,0.5);
  color: #2d7bff;
}

/* BRICS filter tab */
.filter-tab--brics.active {
  background: rgba(255,61,61,0.12);
  border-color: rgba(255,61,61,0.4);
  color: #ff3d3d;
}

/* Rarity filter tabs */
.filter-tab--common.active    { background: rgba(107,114,128,0.15); border-color: #6b7280; color: #9ca3af; }
.filter-tab--uncommon.active  { background: rgba(34,197,94,0.12);   border-color: #22c55e; color: #22c55e; }
.filter-tab--rare.active      { background: rgba(45,123,255,0.15);  border-color: #2d7bff; color: #2d7bff; }
.filter-tab--epic.active      { background: rgba(168,85,247,0.15);   border-color: #a855f7; color: #a855f7; }
.filter-tab--legendary.active { background: rgba(255,215,0,0.12);   border-color: #ffd700; color: #ffd700; }

/* ═══════════════════════════════════════════════════════════════
   DECK BUILDER CARDS — type + rarity meta row
   ═══════════════════════════════════════════════════════════════ */

.tcg-meta-row {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex-wrap: wrap;
}

.tcg-type-pill {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.07rem 0.32rem;
  border-radius: 3px;
  width: fit-content;
  line-height: 1.4;
  white-space: nowrap;
  /* Default — overridden by tcg-type-* */
  background: rgba(255,255,255,0.05);
  color: var(--text-secondary);
  border: 1px solid rgba(255,255,255,0.08);
}

/* Color-coded type variants (mirrors dbs-type-* system) */
.tcg-type-unit        { background: rgba(34, 197, 94, 0.15);  color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.3); }
.tcg-type-armament    { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
.tcg-type-support     { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }
.tcg-type-supply      { background: rgba(20, 184, 166, 0.15); color: #2dd4bf; border: 1px solid rgba(20, 184, 166, 0.3); }
.tcg-type-air         { background: rgba(165, 180, 252, 0.15); color: #a5b4fc; border: 1px solid rgba(165, 180, 252, 0.3); }
.tcg-type-naval       { background: rgba(14, 165, 233, 0.15); color: #38bdf8; border: 1px solid rgba(14, 165, 233, 0.3); }
.tcg-type-cyber       { background: rgba(236, 72, 153, 0.15); color: #f472b6; border: 1px solid rgba(236, 72, 153, 0.3); }
.tcg-type-intelligence { background: rgba(168, 85, 247, 0.15); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.3); }
.tcg-type-infantry    { background: rgba(34, 197, 94, 0.15);  color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.3); }
.tcg-type-aircraft    { background: rgba(165, 180, 252, 0.15); color: #a5b4fc; border: 1px solid rgba(165, 180, 252, 0.3); }
.tcg-type-vehicle     { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
/* Equipment (displayed as SHOCK) — red */
.tcg-type-equipment   { background: rgba(239, 68, 68, 0.15);  color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }

/* Tactical Maneuver badge — bottom-right corner of art area (deck builder / collection cards) */
.tcg-tac-badge {
  position: absolute;
  bottom: 0.28rem;
  right: 0.28rem;
  background: rgba(245, 158, 11, 0.88);
  color: #fff8e6;
  font-size: 0.52rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  box-shadow: 0 0 5px rgba(245, 158, 11, 0.7);
  pointer-events: none;
  line-height: 1;
}

/* Tactical Maneuver dot — top-left corner on battle hand fan cards */
.hfc-tac-dot {
  position: absolute;
  top: 5px;
  left: 5px;
  background: rgba(245, 158, 11, 0.9);
  color: #fff8e6;
  font-size: 0.52rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.75);
  pointer-events: none;
  line-height: 1;
}

.tcg-rarity-pill {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.45rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.06rem 0.22rem;
  border: 1px solid transparent;
  white-space: nowrap;
}

/* Sort row */
.sort-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.sort-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.65rem;
  color: var(--text-secondary);
  letter-spacing: 0.08em;
}

.sort-btn {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}

.sort-btn:hover { border-color: rgba(255,255,255,0.2); color: var(--text-primary); }
.sort-btn.active { background: rgba(255,215,0,0.1); border-color: rgba(255,215,0,0.4); color: var(--accent-gold); }

/* ═══════════════════════════════════════════════════════════════
   PRESET SELECT SCREEN
   ═══════════════════════════════════════════════════════════════ */

.preset-select-screen .game-header {
  padding-top: 0;
}

.preset-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 500px;
  margin: 0 auto 1.5rem;
}

.preset-option {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--ps-color, #2d7bff);
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}

.preset-option:hover {
  background: var(--bg-card-hover);
  border-right-color: rgba(255,255,255,0.15);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

.preset-option-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
  line-height: 1;
}

.preset-option-content {
  flex: 1;
  min-width: 0;
}

.preset-option-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 0.1rem;
}

.preset-option-tagline {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ps-color, #2d7bff);
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

.preset-option-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.preset-faction-badge {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.1rem 0.35rem;
}

.preset-card-count {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.6rem;
  color: var(--text-secondary);
  letter-spacing: 0.06em;
}

.preset-option-arrow {
  font-size: 1.4rem;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.preset-custom-link {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
  padding: 1rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.preset-custom-btn {
  background: none;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}

.preset-custom-btn:hover {
  border-color: rgba(255,255,255,0.2);
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════
   PRESET DECK VIEW SCREEN
   ═══════════════════════════════════════════════════════════════ */

.preset-deck-view-screen {
  padding-bottom: 6rem; /* space for sticky deploy bar */
}

.pdv-meta-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.pdv-dot {
  opacity: 0.4;
}

.pdv-faction { /* color set inline */ }
.pdv-rarity { color: #22c55e; }

.pdv-type-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.pdv-type-chip {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  padding: 0.2rem 0.5rem;
}

.pdv-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.pdv-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  padding: 0.45rem 0.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.pdv-card-rarity-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}

.pdv-card-icon {
  font-size: 1.2rem;
  line-height: 1;
}

.pdv-card-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-primary);
  line-height: 1.2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.pdv-card-badges {
  display: flex;
  gap: 0.2rem;
  flex-wrap: wrap;
}

.pdv-badge {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.05rem 0.25rem;
}

.pdv-badge--type {
  color: var(--text-secondary);
  background: rgba(255,255,255,0.05);
}

.pdv-card-cost {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.6rem;
  color: var(--accent-gold);
  margin-top: auto;
}

.pdv-deploy-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border-subtle);
  padding: 0.9rem 1.5rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  z-index: 10;
  max-width: 100%;
}

.pdv-deploy-info {
  display: flex;
  flex-direction: column;
}

.pdv-deploy-label {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
  line-height: 1;
}

.pdv-deploy-sub {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 0.15rem;
}

.pdv-deploy-btn {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: #22c55e;
  color: #000;
  border: none;
  padding: 0.7rem 2rem;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.pdv-deploy-btn:hover {
  background: #16a34a;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(34,197,94,0.4);
}

/* ═══════════════════════════════════════════════════════════════
   AEGIS FACTION — Third faction styling
   Color: #00e5ff (teal/cyan — corrupted network aesthetic)
   ═══════════════════════════════════════════════════════════════ */

/* Faction selection card — AEGIS */
.faction-option.aegis::before { background: var(--aegis-teal); }
.faction-option.aegis::after {
  background: linear-gradient(135deg, rgba(0,229,255,0.07) 0%, transparent 60%);
}
.faction-option.aegis:hover {
  border-color: rgba(0,229,255,0.4);
  box-shadow: 0 8px 32px rgba(0,229,255,0.12);
}
.faction-option.aegis .faction-name { color: var(--aegis-teal); }

/* 3-column faction options grid */
.faction-options--3 {
  grid-template-columns: 1fr 1fr 1fr;
  max-width: 900px;
}
@media (max-width: 700px) {
  .faction-options--3 {
    grid-template-columns: 1fr;
    max-width: 340px;
  }
}

/* Screen faction badge */
.screen-faction-badge.aegis {
  color: var(--aegis-teal);
  border-color: rgba(0,229,255,0.25);
  background: rgba(0,229,255,0.05);
}

/* Deck builder faction badge */
.db-faction-badge.aegis {
  color: var(--aegis-teal);
  border-color: rgba(0,229,255,0.3);
  background: rgba(0,229,255,0.06);
}

/* Deck builder filter tab — AEGIS */
.filter-tab--aegis.active {
  background: rgba(0,229,255,0.10);
  border-color: rgba(0,229,255,0.4);
  color: var(--aegis-teal);
}

/* Card faction border — deck builder card view */
.card.aegis-card { border-left: 2px solid rgba(0,229,255,0.4); }

/* Battle hand card */
.hand-card.aegis-card { border-left: 2px solid rgba(0,229,255,0.5); }

/* Gallery card */
.gcard.aegis-card    { border-left: 3px solid var(--aegis-teal) !important; }
.gcard.aegis-card:hover {
  border-color: rgba(0,229,255,0.7) !important;
  box-shadow: 0 6px 24px rgba(0,229,255,0.15) !important;
}

/* Deck builder compact card */
.dbc.aegis-card { border-left: 3px solid var(--aegis-teal) !important; }

/* TCG card in deck builder */
.tcg-card.aegis-card  { border-left: 2px solid rgba(0,229,255,0.5); }
.tcg-card.aegis-card:hover  { border-color: rgba(0,229,255,0.6); box-shadow: 0 4px 20px rgba(0,229,255,0.15); }

/* Faction badge pill in battle/inspect overlays */
.fbadge-aegis {
  background: rgba(0,229,255,0.15);
  color: #00e5ff;
  border: 1px solid rgba(0,229,255,0.3);
}

/* ═══════════════════════════════════════════════════════════════
   DECK BUILDER UX OVERHAUL — Auto-Build, View Deck, Filter Panel,
   Floating Deploy FAB, Deck Review Modal
   ═══════════════════════════════════════════════════════════════ */

/* ── Auto-Build Bar ─────────────────────────────────────────── */
.db-auto-build-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.db-auto-build-btn {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-gold);
  background: rgba(255,215,0,0.1);
  border: 1px solid rgba(255,215,0,0.35);
  border-radius: 6px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.db-auto-build-btn:hover {
  background: rgba(255,215,0,0.18);
  border-color: rgba(255,215,0,0.55);
}

.db-auto-build-hint {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.7rem;
  color: var(--text-secondary);
  letter-spacing: 0.06em;
}

/* ── Auto-Builder Modal ─────────────────────────────────────── */
.auto-builder-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.auto-builder-modal {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-width: 480px;
  padding: 1.25rem 1.25rem calc(2rem + env(safe-area-inset-bottom, 0px));
  max-height: 90dvh;
  overflow-y: auto;
}

.abm-header {
  text-align: center;
  margin-bottom: 1.25rem;
}
.abm-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.18em;
  color: var(--accent-gold);
}
.abm-sub {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.72rem;
  color: var(--text-secondary);
  letter-spacing: 0.06em;
  margin-top: 0.2rem;
}

.abm-playstyles {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.abm-playstyle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 0.65rem 0.9rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  border-left: 3px solid var(--ps-color, var(--accent-gold));
}
.abm-playstyle:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
}

.abm-ps-icon { font-size: 1.4rem; min-width: 1.8rem; text-align: center; }

.abm-ps-content { flex: 1; min-width: 0; }
.abm-ps-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--text-primary);
  text-transform: uppercase;
}
.abm-ps-tagline {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.68rem;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
  margin-top: 0.1rem;
}

.abm-ps-arrow {
  font-size: 1.2rem;
  color: var(--text-secondary);
}

.abm-cancel {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 0.5rem;
  width: 100%;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.abm-cancel:hover { color: var(--text-primary); border-color: rgba(255,255,255,0.2); }

/* ── View Deck Button (in type-dist row) ────────────────────── */
.db-view-deck-btn {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-gold);
  background: rgba(255,215,0,0.08);
  border: 1px solid rgba(255,215,0,0.25);
  border-radius: 5px;
  padding: 0.25rem 0.55rem;
  cursor: pointer;
  margin-left: auto;
  transition: background 0.15s;
  white-space: nowrap;
}
.db-view-deck-btn:hover { background: rgba(255,215,0,0.15); }

/* ── Filter Toggle Row ──────────────────────────────────────── */
.db-filter-toggle-row {
  margin-bottom: 0.5rem;
}

.db-filter-toggle-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: left;
}
.db-filter-toggle-btn.open {
  border-color: rgba(255,215,0,0.35);
  background: rgba(255,215,0,0.05);
  border-radius: 8px 8px 0 0;
}
.db-filter-toggle-btn:hover { border-color: rgba(255,255,255,0.15); }

.db-flt-icon { font-size: 0.85rem; }

.db-flt-label {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-primary);
  white-space: nowrap;
}

.db-flt-summary {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.65rem;
  color: var(--accent-gold);
  letter-spacing: 0.05em;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.db-flt-chevron {
  font-size: 0.6rem;
  color: var(--text-secondary);
  margin-left: auto;
}

/* ── Filter Panel (expanded) ────────────────────────────────── */
.db-filter-panel {
  background: var(--bg-card);
  border: 1px solid rgba(255,215,0,0.25);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 0.75rem 0.85rem 0.85rem;
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.db-fp-section { display: flex; flex-direction: column; gap: 0.3rem; }

.db-fp-label {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.db-fp-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

/* ── Floating Deploy FAB ────────────────────────────────────── */
.db-deploy-fab {
  position: fixed;
  bottom: 5rem;
  right: 1.1rem;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  background: #2d7bff;
  border: none;
  border-radius: 50px;
  padding: 0.7rem 1.1rem;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(45,123,255,0.55), 0 0 0 2px rgba(45,123,255,0.2);
  transition: transform 0.15s, box-shadow 0.15s;
  animation: fabPop 0.25s ease-out;
}
.db-deploy-fab:hover {
  transform: scale(1.07);
  box-shadow: 0 6px 28px rgba(45,123,255,0.65), 0 0 0 3px rgba(45,123,255,0.25);
}
.db-deploy-fab:active { transform: scale(0.96); }

.db-deploy-fab-icon { font-size: 1.2rem; line-height: 1; }
.db-deploy-fab-label {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

@keyframes fabPop {
  0%   { transform: scale(0.6); opacity: 0; }
  70%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Deck Review Modal ──────────────────────────────────────── */
.deck-review-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  z-index: 400;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.deck-review-modal {
  background: #0f1117;
  border: 1px solid var(--border-subtle);
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-width: 520px;
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.drm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.drm-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.drm-count {
  color: var(--accent-gold);
  margin-left: 0.5rem;
}
.drm-close {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.25rem 0.4rem;
  border-radius: 5px;
  transition: color 0.15s;
}
.drm-close:hover { color: var(--text-primary); }

.drm-type-row {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.drm-empty {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-align: center;
  padding: 2rem;
}

/* ── Deck Review Carousel (arsenal-style 2-row horizontal scroll) ── */
.drm-carousel-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.75rem 0.75rem 1rem;
}

.drm-carousel-track {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: 130px;
  gap: 0.5rem;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  padding-bottom: 0.5rem;
}

.drm-carousel-track:active { cursor: grabbing; }

.drm-carousel-track::-webkit-scrollbar { height: 4px; }
.drm-carousel-track::-webkit-scrollbar-track { background: transparent; }
.drm-carousel-track::-webkit-scrollbar-thumb { background: rgba(45,123,255,0.3); border-radius: 2px; }

.drm-carousel-cell {
  scroll-snap-align: start;
  width: 130px;
  position: relative;
}

/* Cards in the deck review carousel: fixed 130px wide, aspect-ratio gives height */
.drm-carousel-cell .tcg-card {
  width: 130px;
}

/* ── db-mode-tag ────────────────────────────────────────────── */
.db-mode-tag {
  font-size: 0.58rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  text-transform: uppercase;
  margin-left: 0.35rem;
  vertical-align: middle;
}
.db-mode-tag--sandbox {
  background: rgba(139,92,246,0.18);
  color: #a78bfa;
  border: 1px solid rgba(139,92,246,0.3);
}
.db-mode-tag--xp {
  background: rgba(34,197,94,0.12);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,0.3);
}

/* ── db-pool-label ──────────────────────────────────────────── */
.db-pool-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.65rem;
  color: var(--text-secondary);
  letter-spacing: 0.06em;
  margin-left: 0.4rem;
}

/* ═══════════════════════════════════════════════════════════════
   CARD INSPECT MODAL (Deck Builder Info Button)
   ═══════════════════════════════════════════════════════════════ */

.card-inspect-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(3px);
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

@media (min-width: 600px) {
  .card-inspect-backdrop {
    align-items: center;
  }
}

.card-inspect-modal {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  animation: slideUpFade 0.3s ease;
  position: relative;
  z-index: 101;
}

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 600px) {
  .card-inspect-modal {
    border-radius: 4px;
    animation: scaleFade 0.3s ease;
  }
}

@keyframes scaleFade {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.card-inspect-modal.rarity-common {
  border-top: 3px solid #6b7280;
}
.card-inspect-modal.rarity-uncommon {
  border-top: 3px solid #22c55e;
}
.card-inspect-modal.rarity-rare {
  border-top: 3px solid var(--nato-blue);
}
.card-inspect-modal.rarity-legendary {
  border-top: 3px solid var(--accent-gold);
  box-shadow: 0 0 20px rgba(255,215,0,0.15);
}

.inspect-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.25rem 0.35rem;
  transition: color 0.15s;
  z-index: 2;
}

.inspect-close:hover {
  color: var(--text-primary);
}

.inspect-art-header {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.inspect-art-icon {
  font-size: 3rem;
  line-height: 1;
  z-index: 1;
}

.inspect-art-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.inspect-rarity-corner,
.inspect-faction-pill,
.inspect-type-tag {
  position: absolute;
  z-index: 2;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.inspect-rarity-corner {
  bottom: 0.5rem;
  right: 0.5rem;
  color: var(--text-primary);
}

.dbc-rarity-legendary {
  color: var(--accent-gold);
}

.dbc-rarity-rare {
  color: var(--nato-blue);
}

.dbc-rarity-uncommon {
  color: #22c55e;
}

.inspect-faction-pill {
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.3rem 0.6rem;
}

.inspect-type-tag {
  top: 0.5rem;
  left: 0.5rem;
  background: rgba(0, 0, 0, 0.5);
  padding: 0.25rem 0.5rem;
  color: var(--text-primary);
}

/* Tactical ability indicator badge — shown in inspect art header */
.inspect-tac-pill {
  position: absolute;
  z-index: 2;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  top: 2.4rem;
  left: 0.5rem;
  background: rgba(245, 158, 11, 0.85);
  color: #fff8e6;
  padding: 0.2rem 0.45rem;
  border-radius: 3px;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
}

.inspect-name-row {
  padding: 1rem 1rem 0.5rem;
}

.inspect-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  line-height: 1.2;
}

.inspect-hp-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
}

.hp-bar-container {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.hp-bar {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #eab308);
  border-radius: 3px;
}

.inspect-hp-label-inline {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--text-primary);
  white-space: nowrap;
}

.inspect-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.isb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

.isb-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.isb-val {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
}

.isb-lbl {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.6rem;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.isb-cost {
  color: var(--accent-gold);
}

.isb-cost .isb-val {
  color: var(--accent-gold);
}

.inspect-abilities {
  padding: 0.8rem 1rem;
}

.inspect-ability {
  background: rgba(91, 159, 255, 0.08);
  border: 1px solid rgba(91, 159, 255, 0.2);
  border-left: 3px solid rgba(91, 159, 255, 0.5);
  padding: 0.6rem 0.8rem;
  border-radius: 4px;
}

.ia-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: #5b9fff;
  text-transform: uppercase;
}

.ia-desc {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-left: 0.4rem;
}

.inspect-desc {
  padding: 0.8rem 1rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.btn-inspect-deck {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.8rem 1rem;
  border: none;
  cursor: pointer;
  margin: 1rem;
  border-radius: 4px;
  transition: all 0.2s;
}

.btn-inspect-deck.btn-deck-add {
  background: #2d7bff;
  color: white;
}

.btn-inspect-deck.btn-deck-add:hover:not(:disabled) {
  background: #4d8fff;
  box-shadow: 0 0 12px rgba(45, 123, 255, 0.3);
}

.btn-inspect-deck.btn-deck-remove {
  background: rgba(255, 68, 68, 0.2);
  color: #ff4444;
  border: 1px solid rgba(255, 68, 68, 0.4);
}

.btn-inspect-deck.btn-deck-remove:hover {
  background: rgba(255, 68, 68, 0.3);
  border-color: rgba(255, 68, 68, 0.6);
}

.btn-inspect-deck.btn-deck-disabled,
.btn-inspect-deck:disabled {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  cursor: not-allowed;
  opacity: 0.5;
}


/* ═══════════════════════════════════════════════════════════════
   DECK BUILDER SCREEN
   ═══════════════════════════════════════════════════════════════ */

.deck-builder {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: 6rem;
}

/* ── Header ── */
.budget-bar {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 1rem;
}

.budget-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.budget-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.budget-value {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--accent-gold);
}

.budget-value.ok { color: #22c55e; }
.budget-value.warning { color: var(--accent-orange); }
.budget-value.danger { color: #ff4444; }

.budget-meter {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.budget-fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, var(--accent-gold));
  transition: width 0.3s ease;
  border-radius: 3px;
}

.budget-fill.warning { background: linear-gradient(90deg, var(--accent-orange), #ff6b35); }
.budget-fill.danger { background: linear-gradient(90deg, #ff4444, #ff6b35); }

.deck-type-dist {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
}

.type-chip {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  border-radius: 3px;
}

.type-chip.has-cards {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
  color: #22c55e;
}

.db-view-deck-btn {
  margin-left: auto;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 3px;
}

.db-view-deck-btn:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
}

.db-clear-deck-btn {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid rgba(255, 80, 80, 0.3);
  color: rgba(255, 100, 100, 0.75);
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 3px;
  margin-left: 0.4rem;
}

.db-clear-deck-btn:hover {
  background: rgba(255, 60, 60, 0.1);
  border-color: rgba(255, 80, 80, 0.6);
  color: #ff6464;
}

/* ── Filter & Sort Toggle ── */
.db-filter-toggle-row {
  display: flex;
  gap: 0.5rem;
}

.db-filter-toggle-btn {
  flex: 1;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 0.6rem 1rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 4px;
}

.db-filter-toggle-btn:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}

.db-filter-toggle-btn.open {
  background: rgba(91, 159, 255, 0.15);
  border-color: rgba(91, 159, 255, 0.3);
  color: var(--text-primary);
}

.db-flt-icon { font-size: 1rem; }

.db-flt-label { color: var(--text-secondary); flex: 1; text-align: left; }

.db-flt-summary {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.65rem;
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.db-flt-chevron { margin-left: 0.5rem; }

/* ── Filter Panel ── */
.db-filter-panel {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 1rem;
  animation: slideDown 0.2s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 500px;
  }
}

.db-fp-section {
  margin-bottom: 1rem;
}

.db-fp-section:last-child { margin-bottom: 0; }

.db-fp-label {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  display: block;
}

.db-fp-row {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.filter-tab {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
  border-radius: 3px;
}

.filter-tab:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
}

.filter-tab.active {
  background: var(--nato-blue);
  color: white;
  border-color: var(--nato-blue);
}

.filter-tab--nato.active { background: var(--nato-blue); }
.filter-tab--brics.active { background: #ff3d3d; }
.filter-tab--aegis.active { background: #00e5ff; }

.filter-tab--common.active { background: #6b7280; }
.filter-tab--uncommon.active { background: #22c55e; }
.filter-tab--rare.active { background: var(--nato-blue); }
.filter-tab--epic.active { background: #a855f7; }
.filter-tab--legendary.active { background: var(--accent-gold); }

.sort-btn {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  transition: all 0.15s;
  border-radius: 3px;
  white-space: nowrap;
}

.sort-btn:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
}

.sort-btn.active {
  background: var(--accent-gold);
  color: #0a0c10;
  border-color: var(--accent-gold);
  font-weight: 700;
}

/* ── Card Grid ── */
.card-pool {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media (min-width: 480px) {
  .card-pool {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9rem;
  }
}

@media (min-width: 768px) {
  .card-pool {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }
}

/* ── Deploy Bar (Bottom Fixed) ── */
.deploy-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(10, 12, 16, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-subtle);
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  z-index: 20;
}

@media (max-width: 600px) {
  .deploy-bar {
    padding: 0.6rem 1rem;
    gap: 0.6rem;
  }
}

.deck-summary {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.75rem;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Deploy FAB (Floating Action Button) ── */
.db-deploy-fab {
  position: fixed;
  bottom: 4.5rem;
  right: 1.5rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2d7bff, #4d8fff);
  border: none;
  color: white;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  box-shadow: 0 4px 16px rgba(45, 123, 255, 0.3);
  transition: all 0.2s ease;
  z-index: 25;
  animation: fabPulse 0.6s ease-in-out infinite;
}

@keyframes fabPulse {
  0%, 100% {
    box-shadow: 0 4px 16px rgba(45, 123, 255, 0.3);
  }
  50% {
    box-shadow: 0 6px 24px rgba(45, 123, 255, 0.5);
  }
}

.db-deploy-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 32px rgba(45, 123, 255, 0.6);
}

.db-deploy-fab:active {
  transform: scale(0.95);
}

.db-deploy-fab-icon {
  font-size: 1.4rem;
  line-height: 1;
}

.db-deploy-fab-label {
  font-size: 0.48rem;
  line-height: 1;
}

@media (max-width: 480px) {
  .db-deploy-fab {
    bottom: 4.2rem;
    right: 1rem;
    width: 48px;
    height: 48px;
  }

  .db-deploy-fab-icon {
    font-size: 1.2rem;
  }

  .db-deploy-fab-label {
    font-size: 0.4rem;
  }
}

/* ── Button Styles ── */
.btn {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.7rem 1.5rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 4px;
}

.btn-primary {
  background: var(--nato-blue);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: #4d8fff;
  box-shadow: 0 0 12px rgba(45, 123, 255, 0.3);
}

.btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}


/* ═══════════════════════════════════════════════════════════════
   BATTLEFIELD CAROUSEL v2 — Full-size swipeable TCG cards
   Task #504460: Replace token rows with full card carousel
   ═══════════════════════════════════════════════════════════════ */

/* Override field zones: clip carousel horizontally, center vertically */
.enemy-half .enemy-field-v2,
.player-half .player-field-v2 {
  overflow: hidden !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  padding: 0 !important;
}

/* Outer wrapper fills the entire field zone */
.bf-carousel-outer {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

/* Scrollable carousel row */
.bf-carousel {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  display: flex;
  align-items: center;
  padding: 8px 0;
  box-sizing: border-box;
}

.bf-carousel::-webkit-scrollbar { display: none; }

/* Track: flex row with center-padding so first/last card can scroll to center */
.bf-carousel-track {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
  /* Center padding = 50% container - half card width (81.4/2 = 40.7px) */
  padding-left: calc(50% - 40.7px);
  padding-right: calc(50% - 40.7px);
}

/* Each carousel slot */
.bf-carousel-item {
  flex-shrink: 0;
  scroll-snap-align: center;
  position: relative;
  width: 81.4px;
  height: 114px;
  transition: transform 0.15s ease, filter 0.15s ease;
}

/* Cards fill their carousel slot exactly */
.bf-carousel-item .tcg-card,
.bf-carousel-item .battle-card {
  width: 81.4px !important;
  height: 114px !important;
  box-sizing: border-box;
}

/* Ensure card content doesn't overflow the fixed size */
.bf-carousel-item .tcg-card {
  aspect-ratio: unset !important;
  overflow: hidden !important;
}

/* ── Empty carousel states ── */
.bf-carousel-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.2);
  font-size: 0.65rem;
  font-family: var(--font-tactical);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 0 1rem;
}

/* Legacy: kept for any code that still references direct-strike-ready */
.bf-carousel-empty.direct-strike-ready {
  color: #ef4444;
  font-size: 0.72rem;
  animation: carouselDirectPulse 0.9s ease-in-out infinite;
  cursor: crosshair;
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

/* Field cleared state — subtle confirmation that commander is now the target */
.bf-carousel-empty-clear {
  color: rgba(249, 115, 22, 0.55) !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.2em !important;
  animation: field-clear-pulse 1.4s ease-in-out infinite alternate;
}
@keyframes field-clear-pulse {
  from { opacity: 0.45; }
  to   { opacity: 0.85; }
}

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

/* ── Attack state indicators ── */

/* Can-attack: subtle gold border pulse */
.bf-carousel-item .battle-card.can-attack-unit {
  animation: carouselCanAttack 1.8s ease-in-out infinite;
}

@keyframes carouselCanAttack {
  0%, 100% { box-shadow: 0 0 5px rgba(255,215,0,0.25); }
  50%       { box-shadow: 0 0 14px rgba(255,215,0,0.55), 0 0 28px rgba(255,215,0,0.2); }
}

/* Selected attacker: lift + strong glow */
.bf-carousel-item .battle-card.selected-attacker {
  transform: translateY(-5px);
  z-index: 10;
}

/* Target enemies: red pulse */
.bf-carousel-item .battle-card.target-enemy-unit {
  animation: carouselTargetPulse 0.75s ease-in-out infinite;
}

@keyframes carouselTargetPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255,45,45,0.3); }
  50%       { box-shadow: 0 0 20px rgba(255,45,45,0.7), 0 0 40px rgba(255,45,45,0.3); }
}

/* Spent/attacked units: dimmed */
.bf-carousel-item .battle-card.has-attacked-unit {
  filter: grayscale(0.4) brightness(0.7);
  opacity: 0.65;
}

/* Destroyed units in carousel: heavy dim */
.bf-carousel-item .battle-card.destroyed {
  filter: grayscale(0.9) brightness(0.4);
  opacity: 0.4;
}

/* ── Matchup arrows: TOP-LEFT corner (right side may be obscured by peeking card) ── */
.bf-carousel .bt-matchup-arrow {
  bottom: auto !important;
  top: 0.25rem !important;
  left: 0.25rem !important;
  font-size: 0.8rem !important;
}

/* ── ATTACK action badge on selected attacker ── */
.bf-carousel-attack-badge {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #84cc16;
  color: #000;
  font-size: 0.55rem;
  font-weight: 900;
  font-family: var(--font-tactical);
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 12;
  box-shadow: 0 0 8px rgba(132, 204, 22, 0.6);
  animation: attackBadgePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes attackBadgePop {
  from { transform: translateX(-50%) scale(0.5); opacity: 0; }
  to   { transform: translateX(-50%) scale(1);   opacity: 1; }
}

/* ── HP bar on carousel cards (bold, clearly visible) ── */
.bf-carousel-item .bt-hp-bar-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: rgba(0, 0, 0, 0.6);
  z-index: 6;
  border-radius: 0 0 2px 2px;
  overflow: hidden;
}

.bf-carousel-item .bt-hp-bar {
  height: 100%;
  background: #22c55e;
  transition: width 0.3s ease;
}

.bf-carousel-item .bt-hp-bar.medium { background: #eab308; }
.bf-carousel-item .bt-hp-bar.low    { background: #ef4444; }

/* ── Current HP overlay on cards: compact badge ── */
.bf-carousel-hp-badge {
  position: absolute;
  bottom: 6px;
  right: 3px;
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  font-size: 0.48rem;
  font-family: var(--font-tactical);
  font-weight: 700;
  padding: 1px 3px;
  border-radius: 2px;
  z-index: 7;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,0.1);
}

/* ═══════════════════════════════════════════════════════════════
   CBF — Carousel Battle Field card overrides
   Uses standard tcg-card template + battle-specific overlays
   ═══════════════════════════════════════════════════════════════ */

/* Base carousel battle card — inherits .tcg-card */
.cbf-card {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  /* aspect-ratio is set by tcg-card, overridden by carousel-item fixed size */
  aspect-ratio: unset !important;
  width: 81.4px !important;
  height: 114px !important;
}

/* Shrink art area slightly to give more room to stats in battle */
.cbf-card .tcg-art {
  flex: 0 0 38%;
}

.cbf-card .tcg-art-icon {
  font-size: 1.4rem;
}

/* Compact body for carousel */
.cbf-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0.12rem 0.15rem 0.1rem !important;
  gap: 0.04rem !important;
  overflow: hidden;
}

.cbf-body .tcg-name {
  font-size: 0.48rem !important;
  line-height: 1.1;
}

.cbf-body .tcg-type-line {
  font-size: 0.34rem !important;
  opacity: 0.7;
}

.cbf-body .tcg-sep {
  margin: 0.04rem 0 !important;
  height: 1px;
}

.cbf-body .tcg-stats-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 0.05rem !important;
}

.cbf-body .tcg-stat-cell {
  font-size: 0.4rem !important;
  padding: 0.04rem 0.06rem !important;
  gap: 0.03rem !important;
  white-space: nowrap;
}

.cbf-body .tcg-stat-cell .tsc-icon {
  font-size: 0.38rem !important;
}

.cbf-body .tcg-stat-cell .tsc-val {
  font-size: 0.42rem !important;
  font-weight: 700;
}

/* HP cell in stats — slightly highlighted */
.cbf-hp-cell {
  background: rgba(34, 197, 94, 0.12) !important;
  border-color: rgba(34, 197, 94, 0.25) !important;
}

/* ── HP bar track — absolute overlay at card bottom ── */
.cbf-hp-bar-track {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(0, 0, 0, 0.55);
  z-index: 8;
  border-radius: 0 0 2px 2px;
  overflow: hidden;
  pointer-events: none;
}

.cbf-hp-bar {
  height: 100%;
  background: #22c55e;
  transition: width 0.3s ease;
  border-radius: 0 0 2px 0;
}

.cbf-hp-bar.medium { background: #eab308; }
.cbf-hp-bar.low    { background: #ef4444; }

/* ── State overlay badges ── */
.cbf-attack-badge,
.cbf-spent-badge {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.44rem;
  font-weight: 900;
  font-family: var(--font-tactical);
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: 2px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 9;
  text-shadow: none;
}

.cbf-attack-badge {
  background: #84cc16;
  color: #000;
  box-shadow: 0 0 6px rgba(132, 204, 22, 0.6);
  animation: cbfAttackBadge 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.cbf-spent-badge {
  background: rgba(80, 80, 80, 0.85);
  color: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.15);
}

@keyframes cbfAttackBadge {
  from { transform: translateX(-50%) scale(0.5); opacity: 0; }
  to   { transform: translateX(-50%) scale(1);   opacity: 1; }
}

/* ── Damage preview badge — shown on enemy cards when attacker selected ── */
.cbf-dmg-preview {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(220, 50, 50, 0.88);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  pointer-events: none;
  z-index: 9;
  font-family: 'Rajdhani', sans-serif;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  border: 1px solid rgba(255,100,100,0.4);
  animation: cbfDmgPreviewIn 0.18s ease both;
}
.cbf-dmg-preview.cbf-dmg-abduct {
  background: rgba(120, 60, 200, 0.88);
  border-color: rgba(180, 120, 255, 0.4);
  font-size: 0.5rem;
  padding: 2px 4px;
}
@keyframes cbfDmgPreviewIn {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Speed / attack order badge ── */
.cbf-speed-badge {
  position: absolute;
  bottom: 22px;
  left: 3px;
  background: rgba(0, 80, 160, 0.78);
  color: #7dd3fc;
  font-size: 0.55rem;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  pointer-events: none;
  z-index: 9;
  font-family: 'Rajdhani', sans-serif;
  border: 1px solid rgba(125, 211, 252, 0.28);
}

/* ── Boost badge (FP/HP bonus) on art ── */
.cbf-boost-badge {
  position: absolute;
  bottom: 3px;
  right: 3px;
  background: rgba(255,215,0,0.9);
  color: #000;
  font-size: 0.42rem;
  font-weight: 900;
  font-family: var(--font-tactical);
  padding: 1px 3px;
  border-radius: 2px;
  z-index: 3;
  pointer-events: none;
}

/* ── Attack state overrides for cbf cards ── */
.bf-carousel-item .cbf-card.can-attack-unit {
  border-color: rgba(255,215,0,0.35) !important;
  animation: cbfCanAttack 1.8s ease-in-out infinite;
}

@keyframes cbfCanAttack {
  0%, 100% { box-shadow: 0 2px 8px rgba(255,215,0,0.2); }
  50%       { box-shadow: 0 4px 16px rgba(255,215,0,0.55), 0 0 28px rgba(255,215,0,0.2); }
}

.bf-carousel-item .cbf-card.selected-attacker {
  transform: translateY(-5px) scale(1.03);
  border-color: #84cc16 !important;
  box-shadow: 0 0 18px rgba(132,204,22,0.9), 0 0 36px rgba(132,204,22,0.5), inset 0 0 12px rgba(132,204,22,0.15) !important;
  background: rgba(132,204,22,0.08) !important;
  z-index: 10;
  animation: cbfAttackerGlow 0.7s ease-in-out infinite alternate;
}

@keyframes cbfAttackerGlow {
  from { box-shadow: 0 0 18px rgba(132,204,22,0.9), 0 0 36px rgba(132,204,22,0.5); }
  to   { box-shadow: 0 0 28px rgba(132,204,22,1),   0 0 56px rgba(132,204,22,0.7); }
}

.bf-carousel-item .cbf-card.target-enemy-unit {
  cursor: crosshair;
  border-color: rgba(255,45,45,0.6) !important;
  animation: cbfTargetPulse 0.75s ease-in-out infinite;
}

@keyframes cbfTargetPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255,45,45,0.3); }
  50%       { box-shadow: 0 0 22px rgba(255,45,45,0.75), 0 0 44px rgba(255,45,45,0.3); }
}

.bf-carousel-item .cbf-card.has-attacked-unit {
  filter: grayscale(0.45) brightness(0.65);
  opacity: 0.6;
}

.bf-carousel-item .cbf-card.destroyed {
  filter: grayscale(0.9) brightness(0.35);
  opacity: 0.35;
  pointer-events: none;
}

/* ── Hit flash animation on carousel cards ── */
.cbf-card.hit-flash {
  animation: cbfHitFlash 0.4s ease !important;
}

@keyframes cbfHitFlash {
  0%   { filter: brightness(1); }
  20%  { filter: brightness(2.5) saturate(0.3); background: rgba(255,45,45,0.3); }
  100% { filter: brightness(1); background: transparent; }
}

/* ── Dodge flash ── */
.cbf-card.dodge-flash {
  animation: cbfDodgeFlash 0.4s ease !important;
}

@keyframes cbfDodgeFlash {
  0%, 100% { background: var(--bg-card); }
  40% { background: rgba(34, 211, 238, 0.15); border-color: rgba(34, 211, 238, 0.6) !important; }
}

/* ── Attack/defend highlight via highlightUnit() ── */
.cbf-card.attacking {
  box-shadow: 0 0 20px rgba(255,215,0,0.5) !important;
  border-color: var(--accent-gold) !important;
  z-index: 5;
}

.cbf-card.defending {
  box-shadow: 0 0 20px rgba(255,45,45,0.5) !important;
  border-color: var(--accent-red) !important;
}

/* ── Perk flash text in carousel context ── */
.bf-carousel-item .perk-flash {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  font-size: 0.55rem;
  font-weight: 900;
  color: var(--accent-gold);
  text-shadow: 0 0 8px rgba(255,215,0,0.8);
  white-space: nowrap;
  pointer-events: none;
  animation: cbfPerkFlash 1.6s ease-out forwards;
}

@keyframes cbfPerkFlash {
  0%   { opacity: 1;   transform: translateX(-50%) translateY(0); }
  100% { opacity: 0;   transform: translateX(-50%) translateY(-18px); }
}

/* ── Matchup arrows: TOP-LEFT corner for carousel ── */
.cbf-card .bt-matchup-arrow {
  bottom: auto !important;
  top: 0.25rem !important;
  left: 0.25rem !important;
  font-size: 0.85rem !important;
}

/* ════════════════════════════════════════════════════════
   TACTICAL MANEUVER SYSTEM — Battle Token UI
   ════════════════════════════════════════════════════════ */

/* Passive perk pill on battle token */
.bt-perk-pill {
  font-size: 0.62rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ffd700;
  background: rgba(255,215,0,0.1);
  border: 1px solid rgba(255,215,0,0.25);
  border-radius: 3px;
  padding: 1px 4px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
}

/* Tactical maneuver button on battle token */
.bt-tac-btn {
  display: block;
  width: 100%;
  margin-top: 3px;
  padding: 2px 5px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s, transform 0.1s;
}

.bt-tac-btn.bt-tac-ready {
  background: linear-gradient(135deg, #00c6ff, #0072ff);
  color: #fff;
  box-shadow: 0 0 6px rgba(0,198,255,0.5);
}
.bt-tac-btn.bt-tac-ready:hover {
  background: linear-gradient(135deg, #00dfff, #0090ff);
  transform: scale(1.02);
}
.bt-tac-btn.bt-tac-ready:active {
  transform: scale(0.97);
}

.bt-tac-btn.bt-tac-cooldown {
  background: rgba(80,80,100,0.5);
  color: rgba(180,180,200,0.6);
  cursor: not-allowed;
  box-shadow: none;
}

/* Enemy tactical indicator (read-only) */
.bt-tac-enemy {
  font-size: 0.6rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  color: rgba(255,100,100,0.75);
  margin-top: 2px;
  padding: 1px 3px;
  background: rgba(255,50,50,0.07);
  border: 1px solid rgba(255,50,50,0.2);
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ════════════════════════════════════════════════════════
   TACTICAL MANEUVER SYSTEM — Inspect Modal
   ════════════════════════════════════════════════════════ */

.bi-section-header {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(180,200,220,0.5);
  margin-bottom: 0.3rem;
}

.bi-passive-box {
  background: rgba(255,215,0,0.07);
  border: 1px solid rgba(255,215,0,0.25);
  border-radius: 6px;
  padding: 0.55rem 0.75rem;
  margin-bottom: 0.5rem;
}

.bi-tactical-box {
  background: rgba(0,180,255,0.07);
  border: 1px solid rgba(0,180,255,0.3);
  border-radius: 6px;
  padding: 0.55rem 0.75rem;
  margin-bottom: 0.5rem;
}

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

.bi-tac-meta {
  font-size: 0.72rem;
  color: rgba(160,185,210,0.7);
  margin-top: 0.3rem;
  letter-spacing: 0.04em;
}

.bi-tac-ready {
  color: #4cff88;
  font-weight: 700;
}

.bi-tac-cooldown {
  color: rgba(200,150,100,0.85);
}

.bi-tac-use-btn {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.45rem 0.6rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: linear-gradient(135deg, #00c6ff, #0072ff);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0,198,255,0.4);
  transition: background 0.15s, transform 0.1s;
}
.bi-tac-use-btn:hover {
  background: linear-gradient(135deg, #00dfff, #0090ff);
  transform: scale(1.02);
}
.bi-tac-use-btn:active {
  transform: scale(0.97);
}

.bi-tac-use-btn.bi-tac-use-blocked {
  background: rgba(60,70,90,0.7);
  color: rgba(150,160,180,0.5);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* ════════════════════════════════════════════════════════
   TACTICAL MANEUVER SYSTEM — Deck Builder Inspect
   ════════════════════════════════════════════════════════ */

.inspect-tactical {
  background: rgba(0,180,255,0.07);
  border: 1px solid rgba(0,180,255,0.25);
  border-radius: 6px;
  padding: 0.55rem 0.75rem;
  margin-bottom: 0.5rem;
}

.inspect-tactical .ia-name {
  color: #00c6ff;
}

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

/* ═══════════════════════════════════════════════════════════════
   DRAG-TO-TARGET ATTACK SYSTEM
   ═══════════════════════════════════════════════════════════════ */

/* Laser line animation — SVG stroke-dashoffset march */
@keyframes dt-laser-march {
  to { stroke-dashoffset: -30; }
}
.dt-laser-anim {
  animation: dt-laser-march 0.35s linear infinite;
  stroke-dashoffset: 0;
}

/* Player unit selected as attacker source */
.cbf-card.dt-targeting-source,
.bf-carousel-item .cbf-card.dt-targeting-source {
  box-shadow:
    0 0 0 2px #84cc16,
    0 0 18px rgba(132,204,22,0.55),
    0 0 36px rgba(132,204,22,0.22);
  border-color: #84cc16 !important;
  transform: scale(1.03);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* Enemy unit highlighted while dragging over it */
.cbf-card.dt-hover-target,
.bf-carousel-item .cbf-card.dt-hover-target {
  box-shadow:
    0 0 0 2px #ff4400,
    0 0 20px rgba(255,68,0,0.6),
    0 0 40px rgba(255,68,0,0.25);
  outline: none;
  transform: scale(1.04);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

/* Non-targetable (Support/Supply) enemy cards */
.cbf-card.non-targetable-unit,
.bf-carousel-item .cbf-card.non-targetable-unit {
  opacity: 0.55;
  filter: grayscale(40%);
  cursor: not-allowed;
}
.cbf-card.non-targetable-unit::after,
.bf-carousel-item .cbf-card.non-targetable-unit::after {
  content: '';
  background: url('/icons/ui/ban.svg') center/contain no-repeat;
  filter: invert(0.8) sepia(1) saturate(8) hue-rotate(-20deg);
  display: block;
  position: absolute;
  top: 6px; right: 6px;
  font-size: 14px;
  line-height: 1;
  z-index: 2;
}

/* ── Attack Selection Popup ── */
#attack-popup {
  background: rgba(8, 14, 24, 0.97);
  border: 1px solid rgba(255, 102, 34, 0.55);
  border-radius: 8px;
  padding: 12px 12px 10px;
  box-shadow:
    0 0 0 1px rgba(255,102,34,0.15),
    0 8px 32px rgba(0,0,0,0.7),
    0 0 24px rgba(255,68,0,0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: ap-slide-in 0.12s ease-out both;
}

@keyframes ap-slide-in {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ap-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255,102,34,0.25);
  padding-bottom: 8px;
}

.ap-reticle {
  font-size: 14px;
  line-height: 1;
}

.ap-title {
  font-family: 'Bebas Neue', 'Press Start 2P', sans-serif;
  font-size: 11px;
  color: #ff8844;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 145px;
}

.ap-btn {
  display: block;
  width: 100%;
  padding: 9px 12px;
  margin: 0 0 6px;
  background: rgba(255, 68, 0, 0.12);
  border: 1px solid rgba(255, 68, 0, 0.4);
  border-radius: 5px;
  color: #fff;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 14px;
  letter-spacing: 1.5px;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s, border-color 0.1s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.ap-btn:hover, .ap-btn:active {
  background: rgba(255, 68, 0, 0.28);
  border-color: rgba(255, 68, 0, 0.7);
}

.ap-basic-btn {
  background: rgba(255, 68, 0, 0.15);
  border-color: rgba(255, 68, 0, 0.5);
  color: #ffcc88;
}

.ap-tac-btn {
  background: rgba(132, 204, 22, 0.1);
  border-color: rgba(132, 204, 22, 0.4);
  color: #a8e044;
  font-size: 12px;
}
.ap-tac-btn:hover, .ap-tac-btn:active {
  background: rgba(132, 204, 22, 0.22);
  border-color: rgba(132, 204, 22, 0.6);
}

.ap-tac-disabled {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}

.ap-cd {
  font-size: 10px;
  opacity: 0.75;
  margin-left: 4px;
  font-family: sans-serif;
}

.ap-cancel-btn {
  display: block;
  width: 100%;
  padding: 6px;
  background: transparent;
  border: 1px solid rgba(100, 100, 120, 0.3);
  border-radius: 4px;
  color: rgba(150, 150, 170, 0.7);
  font-size: 11px;
  letter-spacing: 1px;
  cursor: pointer;
  text-align: center;
  font-family: 'Bebas Neue', sans-serif;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  margin-top: 2px;
}
.ap-cancel-btn:hover, .ap-cancel-btn:active {
  background: rgba(100,100,120,0.12);
  color: rgba(200,200,220,0.9);
}

/* ── Hint text in attack phase ── */
.atk-hint-drag {
  font-size: 0.72rem;
  color: rgba(132,204,22,0.75);
  text-align: center;
  padding: 4px 8px;
  letter-spacing: 0.5px;
}

/* Enable drag on can-attack units — must override base 'manipulation' */
.bf-carousel-item .cbf-card.can-attack-unit {
  touch-action: none;
  -webkit-touch-callout: none;
  user-select: none;
}


/* ═══ POKER HAND DRAW PICKER ═══ */

.draw-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
}

.draw-picker-dim {
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: all;
}

.draw-picker-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: all;
  padding: 1rem 0 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.draw-picker-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(147, 51, 234, 0.9);
  text-shadow: 0 1px 6px rgba(0,0,0,0.8);
}

.draw-picker-sub {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

.draw-picker-fan {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  height: 230px;
  width: 100%;
  padding-bottom: 1rem;
}

.draw-picker-card {
  position: absolute;
  width: 100px;
  height: 148px;
  border-radius: 10px;
  background: #181a1e;
  border: 1.5px solid rgba(255,255,255,0.15);
  overflow: hidden;
  cursor: pointer;
  transform-origin: bottom center;
  transform: translateX(var(--dpc-x, 0px)) rotate(var(--dpc-r)) translateY(var(--dpc-lift));
  transition: transform 0.2s ease, box-shadow 0.15s ease;
  display: flex;
  flex-direction: column;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.draw-picker-card:hover,
.draw-picker-card:active {
  transform: translateX(var(--dpc-x, 0px)) rotate(var(--dpc-r)) translateY(calc(var(--dpc-lift) - 20px)) scale(1.08) !important;
  box-shadow: 0 12px 32px rgba(147,51,234,0.45), 0 0 0 2px rgba(147,51,234,0.7) !important;
  z-index: 20 !important;
}

.draw-picker-card.rarity-common    { background: #181a1e; border-color: rgba(107,114,128,0.38); }
.draw-picker-card.rarity-uncommon  { background: #0f1812; border-color: rgba(34,197,94,0.42); }
.draw-picker-card.rarity-rare      { background: #0d1420; border-color: rgba(45,123,255,0.48); }
.draw-picker-card.rarity-epic      { background: #130d1c; border-color: rgba(168,85,247,0.72); box-shadow: 0 0 10px rgba(168,85,247,0.22); }
.draw-picker-card.rarity-legendary { background: #1c1500; border-color: rgba(255,215,0,0.74); box-shadow: 0 0 12px rgba(255,215,0,0.3); }

.draw-picker-card.dbs-selected {
  transform: translateX(var(--dpc-x, 0px)) rotate(0deg) translateY(-30px) scale(1.12) !important;
  z-index: 25 !important;
  box-shadow: 0 16px 40px rgba(0,220,100,0.45), 0 0 0 2px #22c55e !important;
  animation: dbsCardAccept 0.25s ease forwards;
}

.draw-picker-card.dbs-rejected {
  opacity: 0.25;
  filter: grayscale(0.7);
  transform: translateX(var(--dpc-x, 0px)) rotate(var(--dpc-r)) translateY(20px) scale(0.9) !important;
}

/* Drag-to-select: active drag state */
.draw-picker-card.dpc-dragging {
  cursor: grabbing;
  z-index: 50 !important;
}

/* Suppress hover/active lift while another card is being dragged */
.draw-picker-fan.has-drag .draw-picker-card:not(.dpc-dragging):hover,
.draw-picker-fan.has-drag .draw-picker-card:not(.dpc-dragging):active {
  transform: translateX(var(--dpc-x, 0px)) rotate(var(--dpc-r)) translateY(var(--dpc-lift)) !important;
  box-shadow: none !important;
}

/* Prevent browser scroll/pan from fighting the drag gesture */
.draw-picker-fan {
  touch-action: none;
}

/* Subtle drop-zone hint strip that appears below the fan during drag */
.draw-picker-drop-hint {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(34, 197, 94, 0);
  transition: color 0.25s ease;
  pointer-events: none;
  white-space: nowrap;
  padding-bottom: 0.3rem;
}

.draw-picker-fan.has-drag .draw-picker-drop-hint {
  color: rgba(34, 197, 94, 0.75);
  text-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
}

.dpc-fullart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  pointer-events: none;
  z-index: 1;
}

.dpc-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  padding-bottom: 1.4rem;
  pointer-events: none;
  z-index: 1;
}

.dpc-cost {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0,0,0,0.85);
  color: var(--accent-gold);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0 4px;
  border-radius: 3px;
  z-index: 5;
  pointer-events: none;
}

.dpc-footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.6rem 0.4rem 0.35rem;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(to top, rgba(4,4,8,0.98) 0%, rgba(4,4,8,0.88) 50%, rgba(4,4,8,0.4) 75%, transparent 100%);
}

.dpc-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.65rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.7);
}

/* Quick-stat pills shown on draw picker cards for instant at-a-glance info */
.dpc-quickstats {
  display: flex;
  gap: 4px;
  margin-top: 2px;
}

.dpc-qs {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.55rem;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 2px;
  background: rgba(0,0,0,0.5);
  color: rgba(255,255,255,0.8);
}

.dpc-qs-atk { color: #ff6b35; }
.dpc-qs-hp  { color: #22c55e; }

.dpc-stats {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}

.dpc-stat {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.58rem;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}

.dpc-info-btn {
  position: absolute;
  bottom: 3px;
  right: 3px;
  background: rgba(0,0,0,0.7);
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 0.7rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 5;
}

/* ═══ HOLD-TO-INSPECT TOOLTIP ═══ */

#hand-hold-tooltip {
  position: fixed;
  z-index: 2000;
  pointer-events: none;
  animation: fadeIn 0.15s ease;
}

/* No background, no border, no container — just floating text with rarity-colored glow */
.hand-hold-tooltip {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0.35rem 0.5rem;
  min-width: 130px;
  max-width: 185px;
}

.hht-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  margin-bottom: 0.1rem;
  line-height: 1.1;
}

.hht-type {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
  opacity: 0.8;
}

.hht-stats {
  display: flex;
  gap: 6px;
  margin-bottom: 0.3rem;
  flex-wrap: wrap;
}

.hht-stat {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
}

.hht-stat b {
  font-weight: 900;
}

.hht-ability {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  padding-top: 0.25rem;
  border-top: none;
}

.hht-ability-desc {
  display: block;
  font-size: 0.6rem;
  font-weight: 400;
  margin-top: 0.1rem;
  opacity: 0.8;
}

.hht-callsign {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.05rem;
  line-height: 1.1;
}

.hht-tactical {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  padding-top: 0.25rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.hht-doctrine {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.58rem;
  font-weight: 500;
  font-style: italic;
  padding-top: 0.25rem;
  margin-top: 0.15rem;
  border-top: 1px dashed rgba(255,255,255,0.15);
  line-height: 1.3;
  opacity: 0.9;
}

.doctrine-label {
  display: block;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 0.15rem;
}

/* Rarity-colored glow on all tooltip text */
.hand-hold-tooltip.rarity-common .hht-name,
.hand-hold-tooltip.rarity-common .hht-callsign,
.hand-hold-tooltip.rarity-common .hht-type,
.hand-hold-tooltip.rarity-common .hht-stat,
.hand-hold-tooltip.rarity-common .hht-ability,
.hand-hold-tooltip.rarity-common .hht-tactical,
.hand-hold-tooltip.rarity-common .hht-ability-desc,
.hand-hold-tooltip.rarity-common .hht-doctrine {
  color: #c8ccd4;
  text-shadow: 0 0 8px rgba(107,114,128,0.95), 0 0 16px rgba(107,114,128,0.55);
}

.hand-hold-tooltip.rarity-uncommon .hht-name,
.hand-hold-tooltip.rarity-uncommon .hht-callsign,
.hand-hold-tooltip.rarity-uncommon .hht-type,
.hand-hold-tooltip.rarity-uncommon .hht-stat,
.hand-hold-tooltip.rarity-uncommon .hht-ability,
.hand-hold-tooltip.rarity-uncommon .hht-tactical,
.hand-hold-tooltip.rarity-uncommon .hht-ability-desc,
.hand-hold-tooltip.rarity-uncommon .hht-doctrine {
  color: #6ee78a;
  text-shadow: 0 0 8px rgba(34,197,94,0.95), 0 0 18px rgba(34,197,94,0.55);
}

.hand-hold-tooltip.rarity-rare .hht-name,
.hand-hold-tooltip.rarity-rare .hht-callsign,
.hand-hold-tooltip.rarity-rare .hht-type,
.hand-hold-tooltip.rarity-rare .hht-stat,
.hand-hold-tooltip.rarity-rare .hht-ability,
.hand-hold-tooltip.rarity-rare .hht-tactical,
.hand-hold-tooltip.rarity-rare .hht-ability-desc,
.hand-hold-tooltip.rarity-rare .hht-doctrine {
  color: #7ab8ff;
  text-shadow: 0 0 8px rgba(45,123,255,0.95), 0 0 18px rgba(45,123,255,0.55);
}

.hand-hold-tooltip.rarity-epic .hht-name,
.hand-hold-tooltip.rarity-epic .hht-callsign,
.hand-hold-tooltip.rarity-epic .hht-type,
.hand-hold-tooltip.rarity-epic .hht-stat,
.hand-hold-tooltip.rarity-epic .hht-ability,
.hand-hold-tooltip.rarity-epic .hht-tactical,
.hand-hold-tooltip.rarity-epic .hht-ability-desc,
.hand-hold-tooltip.rarity-epic .hht-doctrine {
  color: #c084fc;
  text-shadow: 0 0 8px rgba(168,85,247,1.0), 0 0 20px rgba(168,85,247,0.65);
}

.hand-hold-tooltip.rarity-legendary .hht-name,
.hand-hold-tooltip.rarity-legendary .hht-callsign,
.hand-hold-tooltip.rarity-legendary .hht-type,
.hand-hold-tooltip.rarity-legendary .hht-stat,
.hand-hold-tooltip.rarity-legendary .hht-ability,
.hand-hold-tooltip.rarity-legendary .hht-tactical,
.hand-hold-tooltip.rarity-legendary .hht-ability-desc,
.hand-hold-tooltip.rarity-legendary .hht-doctrine {
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255,215,0,1.0), 0 0 22px rgba(255,215,0,0.7);
}

.hand-fan-card.hfc-held-lift {
  transform: translateY(-20px) rotate(var(--fan-r)) scale(1.08) !important;
  box-shadow: 0 8px 24px rgba(255,215,0,0.35), 0 0 0 1px rgba(255,215,0,0.5) !important;
  z-index: 60 !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* ═══ DRAG TO DEPLOY GHOST ═══ */

.hand-drag-ghost {
  border-radius: 10px;
  border: 1.5px solid rgba(255,215,0,0.6);
  background: #181a1e;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.8), 0 0 0 2px rgba(255,215,0,0.3);
  display: flex;
  flex-direction: column;
}

.hand-drag-ghost.rarity-common    { background: #181a1e; border-color: rgba(107,114,128,0.6); }
.hand-drag-ghost.rarity-uncommon  { background: #0f1812; border-color: rgba(34,197,94,0.6); }
.hand-drag-ghost.rarity-rare      { background: #0d1420; border-color: rgba(45,123,255,0.7); }
.hand-drag-ghost.rarity-epic      { background: #130d1c; border-color: rgba(168,85,247,0.8); }
.hand-drag-ghost.rarity-legendary { background: #1c1500; border-color: rgba(255,215,0,0.9); }

.hdg-footer {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.6rem;
  color: #fff;
  text-align: center;
  padding: 3px 4px;
  background: rgba(0,0,0,0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-field-v2.deploy-drop-target {
  box-shadow: inset 0 0 0 2px rgba(34, 197, 94, 0.7);
  background: rgba(34, 197, 94, 0.06) !important;
}

/* ═══ HAND SCROLL FOR 6+ CARDS ═══ */

.hand-fan-row-scroll {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  scrollbar-width: none;
  pointer-events: auto; /* scrollable row needs pointer events for touch scroll */
}

.hand-fan-row-scroll::-webkit-scrollbar {
  display: none;
}

/* ═══════════════════════════════════════════════════════
   BATTLEFIELD UNIT FLOATING INSPECT
   Replaces modal popup — stats float around the card
   No background panels, no containers, just glowing text
   ═══════════════════════════════════════════════════════ */

#battle-unit-float-inspect {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 2600;
  pointer-events: none;
  animation: fadeIn 0.12s ease;
}

#draw-picker-float-inspect {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1400;
  pointer-events: none;
  animation: fadeIn 0.12s ease;
}

.bufi-backdrop {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: auto;
}

/* All floating panels: fixed, no background, Rajdhani bold */
.bufi-left,
.bufi-right,
.bufi-dep,
.bufi-perk,
.bufi-actions {
  position: fixed;
  pointer-events: auto;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  line-height: 1.25;
  animation: fadeIn 0.12s ease;
  /* No background, no border — pure floating text */
  background: none;
  border: none;
}

/* ── Left panel: Faction · Rarity · Type ── */
.bufi-left {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

/* ── Right panel: stat rows ── */
.bufi-right {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.bufi-label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.25;
}

.bufi-stat-row {
  font-size: 0.82rem;
  white-space: nowrap;
}

.bufi-val {
  font-weight: 900;
  font-size: 1rem;
}

.bufi-lbl {
  font-weight: 600;
  font-size: 0.78rem;
  opacity: 0.9;
}

/* ── DEP row ── */
.bufi-dep {
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-align: center;
  white-space: nowrap;
}

/* Off-faction tax in inspect overlay DEP display */
.bufi-dep-taxed { color: #ff9900; }
.bufi-dep-tax-note {
  font-size: 0.7em;
  opacity: 0.75;
  font-weight: 600;
}

/* ── Perk section ── */
.bufi-perk {
  max-width: 210px;
  text-align: center;
}

.bufi-perk-header {
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 2px;
}

.bufi-perk-name {
  font-size: 0.82rem;
  font-weight: 800;
  margin-bottom: 2px;
}

.bufi-perk-desc {
  font-size: 0.65rem;
  font-weight: 500;
  line-height: 1.35;
  opacity: 0.88;
  max-width: 200px;
}

/* ── Action buttons ── */
.bufi-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  white-space: nowrap;
}

.bufi-action-btn {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 4px;
  border: 1.5px solid currentColor;
  cursor: pointer;
  background: rgba(0,0,0,0.65);
  transition: background 0.15s ease, opacity 0.15s ease;
}

.bufi-action-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.bufi-attack-btn {
  color: #f97316;
  border-color: rgba(249,115,22,0.7);
}
.bufi-attack-btn:hover:not(:disabled) { background: rgba(249,115,22,0.22); }

.bufi-cancel-btn {
  color: #94a3b8;
  border-color: rgba(148,163,184,0.5);
}
.bufi-cancel-btn:hover { background: rgba(148,163,184,0.15); }

.bufi-tac-btn {
  color: #facc15;
  border-color: rgba(250,204,21,0.6);
}
.bufi-tac-btn:hover:not(:disabled) { background: rgba(250,204,21,0.18); }
.bufi-tac-blocked { color: #64748b; border-color: rgba(100,116,139,0.4); }

/* ══════════════════════════════════════════
   RARITY COLOUR VARIANTS — text + glow
   ══════════════════════════════════════════ */

/* Common — grey */
.bufi-rarity-common .bufi-label,
.bufi-rarity-common .bufi-stat-row,
.bufi-rarity-common .bufi-val,
.bufi-rarity-common .bufi-lbl,
.bufi-rarity-common .bufi-dep,
.bufi-rarity-common .bufi-perk-header,
.bufi-rarity-common .bufi-perk-name,
.bufi-rarity-common .bufi-perk-desc {
  color: #c8ccd4;
  text-shadow: 0 0 7px rgba(107,114,128,0.9), 0 0 14px rgba(107,114,128,0.5);
}

/* Uncommon — green */
.bufi-rarity-uncommon .bufi-label,
.bufi-rarity-uncommon .bufi-stat-row,
.bufi-rarity-uncommon .bufi-val,
.bufi-rarity-uncommon .bufi-lbl,
.bufi-rarity-uncommon .bufi-dep,
.bufi-rarity-uncommon .bufi-perk-header,
.bufi-rarity-uncommon .bufi-perk-name,
.bufi-rarity-uncommon .bufi-perk-desc {
  color: #6ee78a;
  text-shadow: 0 0 7px rgba(34,197,94,0.95), 0 0 16px rgba(34,197,94,0.5);
}

/* Rare — blue */
.bufi-rarity-rare .bufi-label,
.bufi-rarity-rare .bufi-stat-row,
.bufi-rarity-rare .bufi-val,
.bufi-rarity-rare .bufi-lbl,
.bufi-rarity-rare .bufi-dep,
.bufi-rarity-rare .bufi-perk-header,
.bufi-rarity-rare .bufi-perk-name,
.bufi-rarity-rare .bufi-perk-desc {
  color: #7ab8ff;
  text-shadow: 0 0 7px rgba(45,123,255,0.95), 0 0 16px rgba(45,123,255,0.5);
}

/* Epic — purple */
.bufi-rarity-epic .bufi-label,
.bufi-rarity-epic .bufi-stat-row,
.bufi-rarity-epic .bufi-val,
.bufi-rarity-epic .bufi-lbl,
.bufi-rarity-epic .bufi-dep,
.bufi-rarity-epic .bufi-perk-header,
.bufi-rarity-epic .bufi-perk-name,
.bufi-rarity-epic .bufi-perk-desc {
  color: #c084fc;
  text-shadow: 0 0 7px rgba(168,85,247,1.0), 0 0 18px rgba(168,85,247,0.6);
}

/* Legendary — gold */
.bufi-rarity-legendary .bufi-label,
.bufi-rarity-legendary .bufi-stat-row,
.bufi-rarity-legendary .bufi-val,
.bufi-rarity-legendary .bufi-lbl,
.bufi-rarity-legendary .bufi-dep,
.bufi-rarity-legendary .bufi-perk-header,
.bufi-rarity-legendary .bufi-perk-name,
.bufi-rarity-legendary .bufi-perk-desc {
  color: #ffd700;
  text-shadow: 0 0 7px rgba(255,215,0,1.0), 0 0 20px rgba(255,215,0,0.65);
}

/* ══════════════════════════════════════════════════════════
   HAND CARD FLOATING INSPECT
   Same mechanic as battlefield bufi — stats float around card
   Card is lifted (hfc-selected) then overlay shows around it
   ══════════════════════════════════════════════════════════ */

#hand-card-float-inspect {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 2700; /* above hand popup (1000) and bufi (2600) */
  pointer-events: none;
  animation: fadeIn 0.12s ease;
}

/* Deploy button inside floating hand inspect */
.bufi-deploy-btn {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 4px;
  border: 1.5px solid rgba(34,197,94,0.75);
  color: #4ade80;
  cursor: pointer;
  background: rgba(0,0,0,0.7);
  pointer-events: auto;
  transition: background 0.15s ease;
}
.bufi-deploy-btn:hover { background: rgba(34,197,94,0.22); }

.bufi-deploy-blocked {
  border-color: rgba(100,116,139,0.4);
  color: #64748b;
  cursor: default;
}
.bufi-deploy-blocked:hover { background: rgba(0,0,0,0.7); }

/* ═══════════════════════════════════════════════════════════════
   Task #513688: 3-front / 2-back battlefield grid layout
   Visual only — no gameplay changes.
   ═══════════════════════════════════════════════════════════════ */

/* Override carousel field-zone constraints so grid can center itself */
.enemy-half .enemy-field-v2,
.player-half .player-field-v2 {
  overflow: visible !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.2rem 0 !important;
}

/* Grid outer: two-row stack, centered in the field zone */
.bf-grid-outer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 5px;
  padding: 2px 4px;
  box-sizing: border-box;
}

/* Each row: flex row, centered */
.bf-grid-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Card slots */
.bf-grid-item {
  flex-shrink: 0;
  position: relative;
  width: 72px;
  height: 100px;
}

/* Back row: slightly receded for depth */
.bf-back-item {
  transform: scale(0.91);
  opacity: 0.88;
}

/* Cards fill their grid slot */
.bf-grid-item .tcg-card,
.bf-grid-item .battle-card {
  width: 72px !important;
  height: 100px !important;
  box-sizing: border-box;
}

.bf-grid-item .tcg-card {
  aspect-ratio: unset !important;
  overflow: hidden !important;
}

/* ── Attack state animations on grid cards ── */
.bf-grid-item .battle-card.can-attack-unit {
  animation: carouselCanAttack 1.8s ease-in-out infinite;
}
.bf-grid-item .battle-card.selected-attacker {
  transform: translateY(-4px);
  z-index: 10;
}
.bf-grid-item .battle-card.target-enemy-unit {
  animation: carouselTargetPulse 0.75s ease-in-out infinite;
}
.bf-grid-item .battle-card.has-attacked-unit {
  filter: grayscale(0.4) brightness(0.7);
  opacity: 0.65;
}
.bf-grid-item .battle-card.destroyed {
  filter: grayscale(0.9) brightness(0.4);
  opacity: 0.4;
}

/* ── CBF card states in grid ── */
.bf-grid-item .cbf-card.can-attack-unit {
  border-color: rgba(255,215,0,0.35) !important;
  animation: cbfCanAttack 1.8s ease-in-out infinite;
}
.bf-grid-item .cbf-card.selected-attacker {
  transform: translateY(-4px) scale(1.03);
  border-color: #84cc16 !important;
  box-shadow: 0 0 18px rgba(132,204,22,0.9), 0 0 36px rgba(132,204,22,0.5), inset 0 0 12px rgba(132,204,22,0.15) !important;
}
.bf-grid-item .cbf-card.target-enemy-unit {
  cursor: crosshair;
  border-color: rgba(255,45,45,0.6) !important;
  animation: cbfTargetPulse 0.75s ease-in-out infinite;
}
.bf-grid-item .cbf-card.has-attacked-unit {
  filter: grayscale(0.45) brightness(0.65);
  opacity: 0.6;
}
.bf-grid-item .cbf-card.destroyed {
  filter: grayscale(0.9) brightness(0.35);
  opacity: 0.35;
  pointer-events: none;
}

/* ── Drag-targeting states in grid ── */
.bf-grid-item .cbf-card.dt-targeting-source {
  box-shadow:
    0 0 0 2px #84cc16,
    0 0 18px rgba(132,204,22,0.55),
    0 0 36px rgba(132,204,22,0.25) !important;
}
.bf-grid-item .cbf-card.dt-hover-target {
  box-shadow:
    0 0 0 2px #ff4400,
    0 0 20px rgba(255,68,0,0.6),
    0 0 40px rgba(255,68,0,0.25) !important;
}

/* ── Non-targetable in grid ── */
.bf-grid-item .cbf-card.non-targetable-unit {
  opacity: 0.55;
  filter: grayscale(40%);
  cursor: not-allowed;
}
.bf-grid-item .cbf-card.non-targetable-unit::after {
  content: '';
  background: url('/icons/ui/ban.svg') center/contain no-repeat;
  filter: invert(0.8) sepia(1) saturate(8) hue-rotate(-20deg);
  display: block;
  position: absolute;
  top: 6px; right: 6px;
  font-size: 0.7rem;
}

/* ── HP bar in grid ── */
.bf-grid-item .bt-hp-bar-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(0,0,0,0.4);
  overflow: hidden;
}

/* ── Matchup arrows in grid ── */
.bf-grid-item .bt-matchup-arrow {
  bottom: auto !important;
  top: 0.25rem !important;
  left: 0.25rem !important;
  right: auto !important;
}

/* ── Attack badge in grid ── */
.bf-grid-item .bf-carousel-attack-badge {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}

/* ── HP badge in grid ── */
.bf-grid-item .bf-carousel-hp-badge {
  position: absolute;
  bottom: 6px;
  right: 3px;
}

/* ── Perk flash in grid ── */
.bf-grid-item .perk-flash {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
}

/* ── Touch action for can-attack units in grid ── */
.bf-grid-item .cbf-card.can-attack-unit {
  touch-action: none;
  -webkit-touch-callout: none;
  user-select: none;
}

/* ═══════════════════════════════════════════════════════════════
   PERSISTENT BATTLE HAND — always-on, auto-collapse
   ═══════════════════════════════════════════════════════════════ */

.battle-hand-persistent {
  position: fixed;
  bottom: 58px; /* above bottom strip */
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Collapsed: fully invisible — no ghost bleed over battlefield */
.battle-hand-persistent.bhp-collapsed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(80px);
}

/* ═══════════════════════════════════════════════════════════════
   UNIVERSAL CARD INSPECT OVERLAY
   Centers card with dark glow — used for ALL inspect contexts
   ═══════════════════════════════════════════════════════════════ */

.uci-overlay {
  position: fixed;
  inset: 0;
  z-index: 3500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: fadeIn 0.18s ease;
}

.uci-overlay.uci-closing {
  animation: fadeOut 0.2s ease forwards;
}

.uci-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.88);
}

.uci-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  max-width: 300px;
  width: 100%;
  animation: uciPanelIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes uciPanelIn {
  from { transform: scale(0.75) translateY(20px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

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

.uci-close-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  background: rgba(20,20,25,0.95);
  border: 1px solid rgba(255,255,255,0.2);
  color: #aaa;
  font-size: 0.85rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: color 0.15s;
}
.uci-close-btn:hover { color: #fff; border-color: rgba(255,255,255,0.5); }

/* Card face */
.uci-card-face {
  position: relative;
  width: 160px;
  height: 220px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.15);
  flex-shrink: 0;
  box-shadow: 0 0 40px rgba(0,0,0,0.9), 0 0 80px rgba(0,0,0,0.5);
}

.uci-art-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d1018;
}

.uci-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.uci-art-icon {
  font-size: 5rem;
  line-height: 1;
}

/* Rarity border glow */
.uci-card-face.uci-rarity-common    { border-color: rgba(107,114,128,0.5); background: #181a1e; }
.uci-card-face.uci-rarity-uncommon  { border-color: rgba(34,197,94,0.55); background: #0f1812; }
.uci-card-face.uci-rarity-rare      { border-color: rgba(45,123,255,0.6); background: #0d1420; box-shadow: 0 0 40px rgba(0,0,0,0.9), 0 0 30px rgba(45,123,255,0.2); }
.uci-card-face.uci-rarity-epic      { border-color: rgba(168,85,247,0.75); background: #130d1c; box-shadow: 0 0 40px rgba(0,0,0,0.9), 0 0 40px rgba(168,85,247,0.3); }
.uci-card-face.uci-rarity-legendary { border-color: rgba(255,215,0,0.8); background: #1c1500; box-shadow: 0 0 40px rgba(0,0,0,0.9), 0 0 50px rgba(255,215,0,0.35); }

.uci-faction-tag {
  position: absolute;
  top: 6px;
  left: 6px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.75);
  color: rgba(255,255,255,0.8);
  padding: 1px 5px;
  border-radius: 3px;
  z-index: 5;
}

.uci-rarity-tag {
  position: absolute;
  top: 6px;
  right: 6px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.75);
  color: rgba(255,255,255,0.75);
  padding: 1px 5px;
  border-radius: 3px;
  z-index: 5;
}

.uci-cost-tag {
  position: absolute;
  bottom: 6px;
  right: 6px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  background: rgba(0,0,0,0.85);
  color: #fbbf24;
  padding: 1px 6px;
  border-radius: 3px;
  z-index: 5;
}

/* Info panel */
.uci-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: rgba(8,12,16,0.95);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 0.75rem;
}

.uci-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e8eaf0;
  line-height: 1.1;
}

.uci-type {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(136,204,255,0.55);
  margin-top: -0.3rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.uci-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.3rem;
}

.uci-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,0.04);
  border-radius: 5px;
  padding: 0.35rem 0.25rem;
  border: 1px solid rgba(255,255,255,0.06);
}

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

.uci-stat-lbl {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  color: rgba(136,204,255,0.5);
  margin-top: 2px;
}

.uci-ability {
  background: rgba(0,136,255,0.06);
  border: 1px solid rgba(0,136,255,0.15);
  border-radius: 5px;
  padding: 0.5rem 0.6rem;
}

.uci-tac {
  background: rgba(147,51,234,0.07);
  border-color: rgba(147,51,234,0.2);
}

.uci-ability-header {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(136,204,255,0.5);
  margin-bottom: 0.2rem;
}

.uci-ability-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  color: #fbbf24;
  line-height: 1.2;
}

.uci-ability-desc {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.7rem;
  color: rgba(200,215,230,0.75);
  line-height: 1.4;
  margin-top: 0.2rem;
}

.uci-desc {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.7rem;
  color: rgba(200,215,230,0.65);
  line-height: 1.4;
  font-style: italic;
}

.uci-cooldown {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.65rem;
  color: rgba(136,204,255,0.55);
  margin-top: 0.2rem;
}

/* Rarity glow on overlay */
.uci-rarity-epic .uci-name { color: #d8b4fe; text-shadow: 0 0 10px rgba(168,85,247,0.5); }
.uci-rarity-legendary .uci-name { color: #ffd700; text-shadow: 0 0 12px rgba(255,215,0,0.55); }

/* Action buttons */
.uci-actions {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}

.uci-btn {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 8px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 120px;
  text-align: center;
}

.uci-btn-add {
  background: rgba(0,136,255,0.15);
  border: 1.5px solid rgba(0,136,255,0.55);
  color: #60a5fa;
}
.uci-btn-add:hover { background: rgba(0,136,255,0.28); }

.uci-btn-deploy {
  background: rgba(34,197,94,0.12);
  border: 1.5px solid rgba(34,197,94,0.55);
  color: #4ade80;
}
.uci-btn-deploy:hover { background: rgba(34,197,94,0.25); }

.uci-btn-attack {
  background: rgba(239,68,68,0.12);
  border: 1.5px solid rgba(239,68,68,0.55);
  color: #f87171;
}
.uci-btn-attack:hover { background: rgba(239,68,68,0.25); }

.uci-btn-tac {
  background: rgba(147,51,234,0.12);
  border: 1.5px solid rgba(147,51,234,0.55);
  color: #c084fc;
}
.uci-btn-tac:hover { background: rgba(147,51,234,0.25); }

.uci-btn-cancel {
  background: rgba(100,116,139,0.12);
  border: 1.5px solid rgba(100,116,139,0.4);
  color: #94a3b8;
}

.uci-btn-blocked {
  background: rgba(40,40,50,0.5);
  border: 1px solid rgba(100,116,139,0.3);
  color: #475569;
  cursor: default;
  opacity: 0.65;
}

.uci-btn-recall {
  background: rgba(14, 40, 60, 0.85);
  border: 1.5px solid rgba(125, 211, 252, 0.38);
  color: #7dd3fc;
}
.uci-btn-recall:hover {
  background: rgba(20, 60, 90, 0.9);
  border-color: rgba(125, 211, 252, 0.65);
}

/* ═══════════════════════════════════════════════════════════════
   SHOCK & AWE TARGETING VISUALS
   ═══════════════════════════════════════════════════════════════ */

/* Player half dims when targeting (SHOCK card drag or unit attack drag) */
.battle-arena.shock-targeting-active .player-half,
.battle-arena.unit-targeting-active .player-half {
  filter: brightness(0.35) saturate(0.3);
  transition: filter 0.15s ease;
  pointer-events: none;
}

/* Enemy units pulse as targetable during SHOCK drag */
.battle-arena.shock-targeting-active .enemy-half .field-unit-token {
  animation: shock-pulse-glow 0.9s ease-in-out infinite;
  cursor: crosshair;
}

/* Locked-on enemy unit — red border + glow */
.shock-target-hover {
  border: 2px solid #ff2200 !important;
  box-shadow: 0 0 18px rgba(255, 34, 0, 0.7), 0 0 6px rgba(255, 34, 0, 0.4) !important;
  animation: shock-lock-pulse 0.4s ease-in-out infinite !important;
}

@keyframes shock-pulse-glow {
  0%, 100% { box-shadow: 0 0 6px rgba(255, 100, 34, 0.3); border-color: rgba(255,100,34,0.4); }
  50%       { box-shadow: 0 0 16px rgba(255, 100, 34, 0.6); border-color: rgba(255,100,34,0.8); }
}

@keyframes shock-lock-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 34, 0, 0.8); }
  50%       { box-shadow: 0 0 30px rgba(255, 34, 0, 1.0), 0 0 8px #ff2200; }
}

/* SHOCK card type badge — distinct from AWE */
.tcg-type-pill.tcg-type-shock {
  background: rgba(255, 80, 20, 0.18);
  color: #ff6622;
  border: 1px solid rgba(255, 80, 20, 0.45);
}
.tcg-type-pill.tcg-type-awe {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
}
.tcg-type-pill.tcg-type-supply {
  background: rgba(134, 239, 172, 0.12);
  color: #86efac;
  border: 1px solid rgba(134, 239, 172, 0.35);
}

/* SHOCK card in hand — orange glow border */
.hand-fan-card.cardtype-SHOCK {
  border-color: rgba(255, 100, 34, 0.6) !important;
  box-shadow: 0 0 10px rgba(255, 100, 34, 0.25);
}
.hand-fan-card.cardtype-SHOCK::after {
  content: 'SHOCK';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.05em;
  color: #ff6622;
  text-shadow: 0 0 6px rgba(255,100,34,0.6);
}

/* AWE card in hand — blue glow border */
.hand-fan-card.cardtype-AWE {
  border-color: rgba(56, 189, 248, 0.55) !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
}
.hand-fan-card.cardtype-AWE::after {
  content: 'AWE';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.05em;
  color: #38bdf8;
  text-shadow: 0 0 6px rgba(56,189,248,0.5);
}

/* AWE unit on field — subtle blue ambient glow */
.field-unit-token.cardtype-awe {
  border: 1.5px solid rgba(56,189,248,0.45);
  box-shadow: 0 0 10px rgba(56,189,248,0.12);
}

/* Special attack tactical button — gold glow */
.bt-tac-btn {
  animation: tac-ready-pulse 1.5s ease-in-out infinite;
}
@keyframes tac-ready-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(250,204,21,0.2); }
  50%       { box-shadow: 0 0 12px rgba(250,204,21,0.5), 0 0 4px rgba(250,204,21,0.3); }
}

/* ── SHOCK config block inside universal inspect panel ── */
.uci-shock-config {
  background: rgba(200, 50, 30, 0.1);
  border: 1px solid rgba(255, 100, 34, 0.35);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 6px 0;
}
.uci-shock-header {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #ff6622;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.uci-shock-row {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #ccd6e8;
  margin-bottom: 2px;
}
.uci-shock-row span:first-child {
  color: rgba(255,255,255,0.45);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.uci-shock-row span:last-child {
  font-weight: 700;
  color: #ffd166;
}


/* ═══════════════════════════════════════════════════════════════════════════
   ISOMETRIC SVG ICON SYSTEM — Replaces emoji unit type icons
   ════════════════════════════════════════════════════════════════════════ */

/* Base img tag for all SVG unit icons */
.unit-icon-img {
  display: inline-block;
  object-fit: contain;
  flex-shrink: 0;
  image-rendering: auto;
  vertical-align: middle;
  pointer-events: none;
  /* Prevent img from stretching in flex containers */
  max-width: 100%;
  max-height: 100%;
}

/* ── Card Art area (deck builder, hand, discard pile) ── */
.tcg-art-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0; /* silence any stray text */
}

/* Deck builder card icon container */
.pdv-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.2rem;
  font-size: 0;
}

/* Hand fan card icon background */
.hfc-icon-bg {
  align-items: center;
  justify-content: center;
  font-size: 0;
}

/* Battlefield card icon background (gallery style) */
.cbf-icon-bg {
  align-items: center;
  justify-content: center;
  font-size: 0;
}

/* Draw picker card icon */
.dpc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
}

/* Universal card inspect art icon */
.uci-art-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0;
}

/* Inspect modal art area */
.inspect-art-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0;
}

/* Battle field card (compact bt-icon) */
.bt-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
}

/* Battle token icon */
.bt-token-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 0;
}

/* Campaign choice card icon */
.choice-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  font-size: 0;
  margin: 0.3rem 0;
}

/* Filter tabs (type filter buttons) — make icon fit in button */
.filter-tab .unit-icon-img {
  display: block;
  margin: 0 auto;
}

/* Type chips (deck composition summary) */
.type-chip .unit-icon-img,
.pdv-type-chip .unit-icon-img {
  margin-right: 2px;
}

/* Drag ghost card icon */
.hand-drag-ghost .unit-icon-img {
  max-width: 44px;
  max-height: 44px;
}

/* Ensure bt-token-icon img displays cleanly */
.bt-token-icon > .unit-icon-img {
  width: 26px;
  height: 26px;
}

/* Field card specific overrides */
.tcg-card.tcg-card--field .tcg-art-icon {
  font-size: 0;
}
.tcg-card.tcg-card--hand .tcg-art-icon {
  font-size: 0;
}
.tcg-card.tcg-card--draw .tcg-art-icon {
  font-size: 0;
}
.tcg-card.tcg-card--discard .tcg-art-icon {
  font-size: 0;
}
.cbf-card .tcg-art-icon {
  font-size: 0;
}

/* ═══════════════════════════════════════════════════════════
   UI Icons — Lucide SVG (replaces all emoji sitewide)
   ═══════════════════════════════════════════════════════════ */
.ui-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  /* Invert dark SVG strokes to white for dark theme */
  filter: invert(1) brightness(0.92);
  opacity: 0.88;
  position: relative;
  top: -1px;
  pointer-events: none;
}
/* Tab navigation icons */
.tab-icon .ui-icon { width: 20px; height: 20px; opacity: 0.82; }
/* Mode select screen icons */
.mm-mode-icon .ui-icon,
.mm-mode-icon > img.ui-icon { width: 36px; height: 36px; opacity: 1; top: 0; }
/* Skirmish mode icons */
.skirmish-mode-icon .ui-icon,
.skirmish-mode-icon > img.ui-icon { width: 28px; height: 28px; opacity: 1; top: 0; }
/* Deploy cost badge */
.tcg-cost-badge .ui-icon,
.pdv-card-cost .ui-icon {
  width: 11px; height: 11px; top: 0;
  filter: invert(1) sepia(1) saturate(4) hue-rotate(10deg) brightness(1.3);
  opacity: 1;
}
/* Deck stat pills */
.di-stats-pills .ui-icon { width: 11px; height: 11px; top: 0; }
/* In-deck checkmark */
.tcg-deck-check .ui-icon {
  width: 11px; height: 11px; top: 0;
  filter: invert(1) sepia(1) saturate(8) hue-rotate(90deg) brightness(1.3);
  opacity: 1;
}
/* Warning pills */
.bld-warning-pill .ui-icon {
  width: 11px; height: 11px; top: 0;
  filter: invert(1) sepia(1) saturate(6) hue-rotate(-20deg);
}
/* Battle perk pill icons */
.bt-perk-pill .ui-icon { width: 11px; height: 11px; top: 0; }
/* Tactical ability button */
.bt-tac-btn .ui-icon,
.bt-tac-ready .ui-icon { width: 11px; height: 11px; top: 0; }
/* Inspect stat blocks */
.isb-icon .ui-icon,
.isb-icon > img.ui-icon { width: 14px; height: 14px; top: 0; }
/* Ability names */
.uci-ability-name .ui-icon,
.ia-name .ui-icon { width: 13px; height: 13px; top: 0; }
/* Auth gate icon */
.auth-gate-icon .ui-icon,
.auth-gate-icon > img.ui-icon { width: 40px; height: 40px; top: 0; opacity: 0.7; }
/* HQ avatar level indicator */
#hq-avatar .ui-icon,
#hq-avatar > img.ui-icon { width: 28px; height: 28px; top: 0; }
/* Quick-play loadout icon */
#qplo-icon .ui-icon,
#qplo-icon > img.ui-icon { width: 28px; height: 28px; top: 0; opacity: 1; }
/* BDS deck icon */
#bds-icon .ui-icon,
#bds-icon > img.ui-icon { width: 22px; height: 22px; top: 0; }
/* Sort/filter buttons */
.sort-btn .ui-icon,
.filter-tab .ui-icon { width: 12px; height: 12px; top: 0; opacity: 0.8; }
/* Damage floats */
.damage-float .ui-icon { width: 10px; height: 10px; top: 0; filter: invert(1); }
/* Field full warning */
.field-full-warning .ui-icon { width: 14px; height: 14px; top: 0; filter: invert(0.8) sepia(1) saturate(6) hue-rotate(330deg); }
/* Log ability icons */
span.ability .ui-icon,
span.kill .ui-icon { width: 11px; height: 11px; top: 0; opacity: 0.8; }
/* Close buttons */
.deck-picker-close .ui-icon,
.drm-close .ui-icon,
.di-header-close .ui-icon,
.uci-close-btn .ui-icon { width: 12px; height: 12px; top: 0; }

/* ═══════════════════════════════════════════════════════════════
   LEVEL-UP CEREMONY OVERLAY
   ═══════════════════════════════════════════════════════════════ */

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

/* Full-screen overlay */
#levelup-ceremony-overlay {
  position: fixed;
  inset: 0;
  z-index: 9900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.88);
  animation: levelup-overlay-in 0.35s ease-out;
}
#levelup-ceremony-overlay.levelup-overlay--milestone {
  background: rgba(0, 0, 0, 0.92);
}
@keyframes levelup-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Ceremony card */
.levelup-ceremony {
  position: relative;
  width: min(92vw, 400px);
  background: linear-gradient(160deg, #0d1117 0%, #0f1620 60%, #090d12 100%);
  border: 1px solid rgba(45, 123, 255, 0.35);
  border-radius: 4px;
  padding: 2.2rem 1.8rem 1.8rem;
  text-align: center;
  overflow: hidden;
  animation: levelup-ceremony-in 0.5s cubic-bezier(0.22, 0.9, 0.36, 1.0);
}
.levelup-ceremony--milestone {
  border-color: rgba(255, 215, 0, 0.60);
  background: linear-gradient(160deg, #11100a 0%, #1a1508 60%, #0c0b06 100%);
  box-shadow: 0 0 40px rgba(255, 215, 0, 0.12), 0 0 80px rgba(255, 215, 0, 0.06);
}
@keyframes levelup-ceremony-in {
  from { opacity: 0; transform: scale(0.88) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Corner brackets — tactical HUD feel */
.levelup-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: rgba(45, 123, 255, 0.55);
  border-style: solid;
}
.levelup-ceremony--milestone .levelup-corner { border-color: rgba(255, 215, 0, 0.65); }
.levelup-corner--tl { top: 8px; left: 8px;  border-width: 2px 0 0 2px; }
.levelup-corner--tr { top: 8px; right: 8px; border-width: 2px 2px 0 0; }
.levelup-corner--bl { bottom: 8px; left: 8px;  border-width: 0 0 2px 2px; }
.levelup-corner--br { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; }

/* CRT scanlines */
.levelup-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.08) 3px, rgba(0,0,0,0.08) 4px);
  pointer-events: none;
  z-index: 0;
}
.levelup-ceremony > *:not(.levelup-scanlines) { position: relative; z-index: 1; }

/* LEVEL UP badge row */
.levelup-badge-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.4rem;
}
.levelup-badge-icon {
  width: 28px;
  height: 28px;
  background: rgba(45, 123, 255, 0.2);
  border: 1px solid rgba(45, 123, 255, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.levelup-ceremony--milestone .levelup-badge-icon {
  background: rgba(255, 215, 0, 0.15);
  border-color: rgba(255, 215, 0, 0.6);
}
.levelup-badge-text {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #2d7bff;
  animation: levelup-flash 0.55s ease-in-out 4;
}
.levelup-ceremony--milestone .levelup-badge-text {
  color: #ffd700;
}
@keyframes levelup-flash {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

/* Level number display */
.levelup-level-block {
  margin-bottom: 0.8rem;
}
.levelup-level-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.35em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  margin-bottom: 0.1rem;
}
.levelup-level-num {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 900;
  font-size: 5rem;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 30px rgba(45, 123, 255, 0.5);
  letter-spacing: -0.02em;
  animation: levelup-num-in 0.6s cubic-bezier(0.12, 0.9, 0.3, 1.3);
}
.levelup-ceremony--milestone .levelup-level-num {
  color: #ffd700;
  text-shadow: 0 0 30px rgba(255, 215, 0, 0.5), 0 0 60px rgba(255, 215, 0, 0.2);
}
@keyframes levelup-num-in {
  from { opacity: 0; transform: scale(1.3); }
  to   { opacity: 1; transform: scale(1); }
}

/* Rank display */
.levelup-rank-display {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  justify-content: center;
  margin-bottom: 1.2rem;
}
.levelup-rank-stripe {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.12);
  max-width: 60px;
}
.levelup-rank-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.levelup-ceremony--milestone .levelup-rank-title {
  color: #ffd700;
}

/* Milestone flare text */
.levelup-milestone-flare {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  color: #ffd700;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  opacity: 0.85;
  animation: levelup-flash 0.7s ease-in-out 5;
}

/* Milestone bonus cards */
.levelup-bonus-section {
  margin: 0 0 1.2rem;
  padding: 0.8rem 0.6rem;
  background: rgba(255, 215, 0, 0.06);
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 3px;
}
.levelup-bonus-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  color: #ffd700;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
  opacity: 0.85;
}
.levelup-bonus-cards {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
}

/* Bonus card flip */
.levelup-bonus-card {
  width: 80px;
  height: 110px;
  perspective: 600px;
}
.lbc-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.55s ease-in-out;
}
.levelup-bonus-card--flipped .lbc-inner {
  transform: rotateY(180deg);
}
.lbc-back, .lbc-front {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 4px;
}
.lbc-back {
  background: linear-gradient(135deg, #0d1420 0%, #1a2035 100%);
  border: 1px solid rgba(255, 215, 0, 0.3);
  background-image: repeating-linear-gradient(
    45deg, transparent, transparent 4px,
    rgba(255,215,0,0.03) 4px, rgba(255,215,0,0.03) 8px
  );
}
.lbc-front {
  transform: rotateY(180deg);
  background: #0d1420;
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding: 0.4rem 0.2rem;
}
.lbc-icon { opacity: 0.85; }
.lbc-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.52rem;
  letter-spacing: 0.05em;
  color: #fff;
  text-align: center;
  line-height: 1.2;
  padding: 0 2px;
}
.lbc-rarity {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.45rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Pack hint */
.levelup-pack-hint {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.35);
  margin-bottom: 1.1rem;
  text-transform: uppercase;
}

/* Dismiss button */
.levelup-dismiss-btn {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(45, 123, 255, 0.18);
  border: 1px solid rgba(45, 123, 255, 0.5);
  border-radius: 3px;
  padding: 0.55rem 1.6rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.levelup-dismiss-btn:hover,
.levelup-dismiss-btn:active {
  background: rgba(45, 123, 255, 0.32);
  border-color: rgba(45, 123, 255, 0.8);
}
.levelup-ceremony--milestone .levelup-dismiss-btn {
  background: rgba(255, 215, 0, 0.12);
  border-color: rgba(255, 215, 0, 0.5);
}
.levelup-ceremony--milestone .levelup-dismiss-btn:hover {
  background: rgba(255, 215, 0, 0.25);
  border-color: rgba(255, 215, 0, 0.8);
}

/* ═══════════════════════════════════════════════════════════════
   POST-MATCH XP BREAKDOWN
   ═══════════════════════════════════════════════════════════════ */

.result-xp-breakdown {
  margin-bottom: 0.5rem;
  font-family: 'Rajdhani', sans-serif;
  width: 100%;
  max-width: 220px;
  margin-left: auto;
  margin-right: auto;
}
.rxb-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  padding: 0.15rem 0;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.05em;
}
.rxb-bonus { color: #22c55e; }
.rxb-total {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  font-weight: 700;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.85);
}
.rxb-val { font-weight: 700; }
.rxb-mode {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.45);
}
.result-levelup-hint {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  color: #ffd700;
  text-transform: uppercase;
  margin-top: 0.4rem;
  animation: levelup-flash 0.7s ease-in-out 3;
}

/* ═══════════════════════════════════════════════════════════════
   PROFILE — COLLECTION SPLIT TRACKER
   ═══════════════════════════════════════════════════════════════ */

.profile-rank-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 0.6rem;
}

.profile-coll-track {
  margin-bottom: 0.1rem;
}
.profile-coll-track-header {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.3rem;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
}
.pct-label {
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
}
.pct-sep {
  color: rgba(255,255,255,0.3);
  font-weight: 400;
  margin: 0 1px;
}
.pct-hint {
  flex: 1;
  color: rgba(255,255,255,0.3);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pct-count {
  color: rgba(255,255,255,0.5);
  font-weight: 600;
  font-size: 0.65rem;
}

/* AEGIS bar — cyan variant */
.profile-coll-bar--aegis {
  background: linear-gradient(90deg, #06b6d4 0%, #22d3ee 100%) !important;
}

/* ═══════════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION
   Disable animations and transitions for users who prefer reduced
   motion (vestibular disorders, epilepsy sensitivity, etc.)
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  /* Disable all animations and transitions globally */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Specifically kill screen shake */
  .screen-shake {
    animation: none !important;
  }

  /* Disable damage number float-up animations */
  .damage-pop, .dmg-float, [class*="damage-num"], [class*="dmg-pop"] {
    animation: none !important;
    opacity: 1 !important;
  }

  /* Disable glow pulses */
  [class*="glow"], [class*="pulse"], [class*="shimmer"] {
    animation: none !important;
  }

  /* Disable card hover transforms */
  .card:hover, .hand-card:hover {
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   END TURN FLOATING ACTION BUTTON
   Appears only during attack sub-phase — frees battlefield space
   ═══════════════════════════════════════════════════════════════ */

.end-turn-fab {
  position: fixed;
  bottom: 68px;
  right: 14px;
  z-index: 950;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent-orange, #f97316);
  border: none;
  border-radius: 6px;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(249, 115, 22, 0.45), 0 2px 8px rgba(0,0,0,0.5);
  animation: etfab-appear 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.end-turn-fab:hover {
  background: #fb923c;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(249, 115, 22, 0.55), 0 2px 8px rgba(0,0,0,0.5);
}

.end-turn-fab:active {
  transform: scale(0.95);
}

@keyframes etfab-appear {
  from { opacity: 0; transform: translateY(12px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Attack phase label in hand bar (replaces END TURN button slot) */
.hand-bar-phase-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}

.hand-bar-phase-label.phase-attack-label {
  color: rgba(249, 115, 22, 0.8);
  background: rgba(249, 115, 22, 0.1);
  border: 1px solid rgba(249, 115, 22, 0.25);
}

/* ═══════════════════════════════════════════════════════════════
   BATTLE LOADING / BRIEFING SCREEN
   Shown between mode selection and battlefield — military themed
   ═══════════════════════════════════════════════════════════════ */

.lbs-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 1.5rem;
  background: #0a0c10;
  position: relative;
  overflow: hidden;
}

/* scanline overlay */
.lbs-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 255, 100, 0.012) 3px,
    rgba(0, 255, 100, 0.012) 4px
  );
  pointer-events: none;
  z-index: 0;
}

.lbs-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  max-width: 360px;
  width: 100%;
  animation: fadeIn 0.5s ease;
}

/* ── Top section ── */
.lbs-top {
  text-align: center;
}

.lbs-mode-badge {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(0, 229, 255, 0.65);
  text-transform: uppercase;
  border: 1px solid rgba(0, 229, 255, 0.2);
  display: inline-block;
  padding: 0.18rem 0.8rem;
  border-radius: 2px;
  margin-bottom: 0.65rem;
}

.lbs-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #e8eaed;
  text-transform: uppercase;
  line-height: 1;
  animation: lbsPulse 2.2s ease-in-out infinite;
}

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

.lbs-faction-line {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--text-secondary);
  margin-top: 0.45rem;
  text-transform: uppercase;
}

/* ── Radar ── */
.lbs-radar-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lbs-radar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 255, 100, 0.3);
  position: relative;
  background: radial-gradient(circle, rgba(0, 12, 6, 0.95) 0%, rgba(0, 20, 10, 0.9) 100%);
  box-shadow: 0 0 24px rgba(0, 255, 100, 0.07), inset 0 0 20px rgba(0, 255, 100, 0.04);
}

.lbs-radar-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0, 255, 100, 0.12);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.lbs-ring1 { width: 48%; height: 48%; }
.lbs-ring2 { width: 74%; height: 74%; }

/* cross-hair */
.lbs-radar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(to right,
      transparent calc(50% - 0.5px),
      rgba(0, 255, 100, 0.1) calc(50% - 0.5px),
      rgba(0, 255, 100, 0.1) calc(50% + 0.5px),
      transparent calc(50% + 0.5px)),
    linear-gradient(to bottom,
      transparent calc(50% - 0.5px),
      rgba(0, 255, 100, 0.1) calc(50% - 0.5px),
      rgba(0, 255, 100, 0.1) calc(50% + 0.5px),
      transparent calc(50% + 0.5px));
}

.lbs-radar-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(0, 255, 100, 0.5) 0deg,
    rgba(0, 255, 100, 0.12) 45deg,
    transparent 65deg
  );
  animation: radarSpin 2s linear infinite;
  transform-origin: center;
}

@keyframes radarSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.lbs-radar-blip {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #00ff64;
  box-shadow: 0 0 7px #00ff64;
  transform: translate(-50%, -50%);
  animation: blipPulse 1.6s ease-in-out infinite;
}

.lbs-radar-blip.lbs-blip-dim {
  background: rgba(0, 255, 100, 0.45);
  box-shadow: 0 0 4px rgba(0, 255, 100, 0.4);
  animation-delay: 0.6s;
}

@keyframes blipPulse {
  0%, 100% { opacity: 1;   transform: translate(-50%, -50%) scale(1); }
  50%       { opacity: 0.3; transform: translate(-50%, -50%) scale(0.5); }
}

/* ── Bottom briefing ── */
.lbs-bottom {
  text-align: center;
  width: 100%;
}

.lbs-tip-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(0, 229, 255, 0.55);
  text-transform: uppercase;
  margin-bottom: 0.55rem;
}

.lbs-tip {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.97rem;
  font-weight: 500;
  color: rgba(232, 234, 237, 0.82);
  line-height: 1.55;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid rgba(0, 229, 255, 0.4);
  background: rgba(255, 255, 255, 0.025);
  border-radius: 2px;
  margin-bottom: 1.2rem;
  animation: tipFadeIn 0.7s ease;
}

@keyframes tipFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

.lbs-bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
}

.lbs-bar {
  width: 100%;
  max-width: 260px;
  height: 3px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 2px;
  overflow: hidden;
}

.lbs-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #00ff64, #00e5ff);
  border-radius: 2px;
  animation: lbsBarFill 2.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes lbsBarFill {
  from { width: 4%; }
  to   { width: 100%; }
}

.lbs-bar-status {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: rgba(139, 156, 182, 0.5);
  text-transform: uppercase;
  animation: lbsPulse 1.5s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════
   COMMANDER CARD MECHANIC
   — sits at the side of the enemy half during normal play
   — slides to center when all enemy units are destroyed
   — player attacks commander to win
═══════════════════════════════════════════════════════════════ */

/* Commander zone: absolute-positioned inside enemy-half */
.enemy-half {
  position: relative;
}

/* When attack drag is active and field is clear — commander pulses brighter */
.battle-arena.unit-targeting-active .enemy-half.commander-exposed .commander-card {
  border-color: rgba(249, 115, 22, 1) !important;
  box-shadow: 0 0 24px rgba(249, 115, 22, 0.6), 0 0 50px rgba(249, 115, 22, 0.25) !important;
  transform: scale(1.05);
  transition: transform 0.2s ease, border-color 0.2s, box-shadow 0.2s;
}

.commander-card-zone {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  transition: right 0.45s cubic-bezier(0.34, 1.2, 0.64, 1),
              transform 0.45s cubic-bezier(0.34, 1.2, 0.64, 1),
              left 0.45s cubic-bezier(0.34, 1.2, 0.64, 1);
  pointer-events: none;
}

/* When field is empty: slide to center */
.enemy-half.commander-exposed .commander-card-zone {
  right: auto;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  pointer-events: auto;
}

.commander-card {
  width: 62px;
  min-height: 80px;
  background: linear-gradient(160deg, #0f1a12 0%, #0c1410 100%);
  border: 1px solid rgba(80, 160, 100, 0.3);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
  cursor: default;
}

/* Scanlines overlay on commander card */
.commander-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(0,0,0,0.12) 2px, rgba(0,0,0,0.12) 3px);
  pointer-events: none;
  z-index: 1;
}

/* Faction colored top bar */
.commander-card-topbar {
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, rgba(80,140,100,0.6), rgba(80,140,100,0.2));
  border-radius: 2px 2px 0 0;
  margin-bottom: 3px;
}
.commander-card-topbar.nato-bar {
  background: linear-gradient(90deg, rgba(74,158,255,0.7), rgba(74,158,255,0.2));
}
.commander-card-topbar.brics-bar {
  background: linear-gradient(90deg, rgba(255,107,53,0.7), rgba(255,107,53,0.2));
}

.commander-card-icon {
  font-size: 1.3rem;
  line-height: 1;
  margin: 2px 0;
  position: relative;
  z-index: 2;
  opacity: 0.75;
  filter: drop-shadow(0 0 4px rgba(0,200,80,0.3));
}

.commander-card-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(160, 220, 170, 0.6);
  text-transform: uppercase;
  text-align: center;
  position: relative;
  z-index: 2;
  line-height: 1.2;
}

.commander-card-hp-track {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.commander-card-hp-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
  background: #22c55e;
}
.commander-card-hp-fill.hp-fill-yellow { background: #eab308; }
.commander-card-hp-fill.hp-fill-red { background: #ef4444; }

.commander-card-hp-val {
  font-family: 'Share Tech Mono', 'Rajdhani', monospace;
  font-size: 0.5rem;
  color: rgba(200, 240, 200, 0.55);
  text-align: center;
  letter-spacing: 0.04em;
  position: relative;
  z-index: 2;
  margin-top: 1px;
}

/* Exposed state — when all enemies cleared */
.enemy-half.commander-exposed .commander-card {
  width: 80px;
  min-height: 100px;
  border-color: rgba(249, 115, 22, 0.7);
  box-shadow:
    0 0 12px rgba(249, 115, 22, 0.35),
    0 0 30px rgba(249, 115, 22, 0.15),
    inset 0 0 12px rgba(249, 115, 22, 0.06);
  cursor: crosshair;
  animation: commander-exposed-pulse 1.1s ease-in-out infinite alternate;
}

@keyframes commander-exposed-pulse {
  from { border-color: rgba(249, 115, 22, 0.55); box-shadow: 0 0 10px rgba(249, 115, 22, 0.25), 0 0 24px rgba(249, 115, 22, 0.1); }
  to   { border-color: rgba(249, 115, 22, 0.9);  box-shadow: 0 0 18px rgba(249, 115, 22, 0.5),  0 0 40px rgba(249, 115, 22, 0.22); }
}

.commander-attack-hint {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #f97316;
  text-align: center;
  text-transform: uppercase;
  margin-top: 4px;
  animation: commander-hint-blink 0.8s ease-in-out infinite alternate;
  text-shadow: 0 0 8px rgba(249, 115, 22, 0.7);
  position: relative;
  z-index: 2;
}
@keyframes commander-hint-blink {
  from { opacity: 0.65; }
  to   { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   DEAD CARD SLIDE EXIT ANIMATION
   Cards slide off to the discard pile area when destroyed
═══════════════════════════════════════════════════════════════ */

@keyframes card-slide-exit-left {
  0%   { transform: translateX(0) translateY(0) rotate(0deg) scale(1); opacity: 1; }
  60%  { transform: translateX(-60px) translateY(20px) rotate(-8deg) scale(0.85); opacity: 0.6; }
  100% { transform: translateX(-100px) translateY(30px) rotate(-14deg) scale(0.6); opacity: 0; }
}
@keyframes card-slide-exit-right {
  0%   { transform: translateX(0) translateY(0) rotate(0deg) scale(1); opacity: 1; }
  60%  { transform: translateX(60px) translateY(20px) rotate(8deg) scale(0.85); opacity: 0.6; }
  100% { transform: translateX(100px) translateY(30px) rotate(14deg) scale(0.6); opacity: 0; }
}

.card-slide-exit-left {
  animation: card-slide-exit-left 0.45s ease-in forwards !important;
  pointer-events: none !important;
}
.card-slide-exit-right {
  animation: card-slide-exit-right 0.45s ease-in forwards !important;
  pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   SHOCK CARD STATUS LABEL
   Orange glow label shown in the inspect panel beside card name
═══════════════════════════════════════════════════════════════ */

.uci-shock-status-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(249, 115, 22, 0.12);
  border: 1px solid rgba(249, 115, 22, 0.4);
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #f97316;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(249, 115, 22, 0.6);
  box-shadow: 0 0 6px rgba(249, 115, 22, 0.2);
  animation: shock-label-pulse 1.4s ease-in-out infinite alternate;
  margin-top: 3px;
}
@keyframes shock-label-pulse {
  from { box-shadow: 0 0 4px rgba(249, 115, 22, 0.15); border-color: rgba(249, 115, 22, 0.35); }
  to   { box-shadow: 0 0 10px rgba(249, 115, 22, 0.4); border-color: rgba(249, 115, 22, 0.65); }
}

.uci-shock-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  align-items: center;
}

.uci-shock-meta-pill {
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  color: rgba(200, 200, 200, 0.5);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 2px;
  padding: 1px 5px;
  font-weight: 600;
  text-transform: uppercase;
}

/* Shock card: orange left border in hand fan */
.hand-fan-card.cardtype-SHOCK {
  border-left: 2px solid rgba(249, 115, 22, 0.5);
  box-shadow: inset -4px 0 12px rgba(249, 115, 22, 0.07);
}
.hand-fan-card.cardtype-SHOCK::after {
  content: '⚡';
  position: absolute;
  bottom: 18px;
  right: 4px;
  font-size: 0.55rem;
  opacity: 0.75;
  color: #f97316;
  text-shadow: 0 0 6px rgba(249,115,22,0.7);
  z-index: 5;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   UNIVERSAL SLIDE / TRANSITION POLISH
   All elements entering or leaving use consistent transitions
═══════════════════════════════════════════════════════════════ */

/* Battlefield cards: smooth entry */
.bf-grid-item {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Direct strike zone: removed — replaced by commander card */
/* (kept for backward compat with AI direct strike code) */

/* ═══════════════════════════════════════════════════════════════
   GENERAL VISUAL CLEANUP
═══════════════════════════════════════════════════════════════ */

/* Tighten enemy half field meta row */
.field-meta-row.fmr-enemy {
  padding: 2px 8px 1px;
}
.field-meta-row.fmr-player {
  padding: 1px 8px 2px;
}

/* Sharper battlefield divider */
.battlefield-label-bar {
  letter-spacing: 0.22em;
}

/* Hand bar cleaner alignment */
.hand-bar {
  align-items: center;
}

/* Discard empty text consistency */
.discard-empty {
  opacity: 0.38;
}

/* Phase labels: tighter padding */
.btb-phase {
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   DRONE OPERATOR HUD — SHOCK BLUE / AWE ORANGE VISUAL OVERHAUL
   Task #547775 — Satellite background, floating HUD, faction identity colors
   ══════════════════════════════════════════════════════════════════════════ */

/* ── New faction color tokens ── */
:root {
  --shock-blue:       #00f0ff;
  --shock-blue-dim:   rgba(0,240,255,0.12);
  --shock-blue-glow:  rgba(0,240,255,0.4);
  --awe-orange:       #ff6b35;
  --awe-orange-dim:   rgba(255,107,53,0.12);
  --awe-orange-glow:  rgba(255,107,53,0.4);
}

/* ════════════════════════════════════════════════════════════
   1. BATTLE SCREEN — SATELLITE/DRONE FEED BACKGROUND
   Full-screen satellite overhead view behind all UI layers.
   Dark desaturated earth tones — no green tint. UAV/drone cam.
   ════════════════════════════════════════════════════════════ */
.battle-screen {
  /* Satellite overhead terrain — dark desaturated earth, NO green */
  background:
    /* Overhead terrain patches — dark brown, dry clay, arid earth */
    radial-gradient(ellipse 72% 38% at 28% 22%, rgba(55,42,22,0.28) 0%, transparent 65%),
    radial-gradient(ellipse 55% 28% at 78% 38%, rgba(40,38,30,0.22) 0%, transparent 58%),
    radial-gradient(ellipse 85% 42% at 52% 68%, rgba(32,38,28,0.24) 0%, transparent 68%),
    radial-gradient(ellipse 48% 32% at 18% 62%, rgba(50,36,22,0.18) 0%, transparent 58%),
    radial-gradient(ellipse 62% 32% at 82% 72%, rgba(28,32,22,0.20) 0%, transparent 62%),
    radial-gradient(ellipse 35% 20% at 60% 15%, rgba(22,26,18,0.16) 0%, transparent 55%),
    /* Tactical grid — cyan satellite grid overlay */
    repeating-linear-gradient(0deg, transparent 0px, transparent 47px, rgba(0,240,255,0.018) 48px),
    repeating-linear-gradient(90deg, transparent 0px, transparent 47px, rgba(0,240,255,0.018) 48px),
    /* UAV video feed scan-lines */
    repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(0,0,0,0.06) 2px, rgba(0,0,0,0.06) 3px),
    /* Dark terrain base — near-black with slight warm tone */
    linear-gradient(180deg, #060809 0%, #080a08 25%, #070908 50%, #080a07 75%, #060808 100%);
  position: relative;
}

/* Global scan-line overlay for the whole battle screen */
.battle-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px, transparent 2px,
    rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 3px
  );
}

/* Subtle vignette — drone camera edge darkening */
.battle-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse 95% 90% at 50% 50%, transparent 55%, rgba(0,0,0,0.45) 100%);
}

/* Arena is now transparent — satellite bg shows from battle-screen */
.battle-arena {
  background: transparent !important;
}

/* Kill arena smoke pseudo-elements (replaced by global bg on battle-screen) */
.battle-arena::before,
.battle-arena::after {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════
   2. BATTLE TOP BAR — TRUE FLOATING HUD (position:absolute)
   Lifts out of flex flow entirely. Arena expands to fill all
   freed space. Cards get bigger. The whole point.
   ════════════════════════════════════════════════════════════ */
.battle-top-bar {
  /* Float above the arena — zero height in flex column layout */
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 20 !important;
  /* Transparent gradient fade — no gray box */
  background: linear-gradient(
    180deg,
    rgba(2,5,4,0.92) 0%,
    rgba(2,5,4,0.75) 60%,
    transparent 100%
  ) !important;
  border-bottom: none !important;
  padding: 0.5rem 0.75rem 0.9rem !important;
  /* Prevent interaction with arena below the transparent gradient */
  pointer-events: none !important;
}

/* Re-enable clicks on buttons within the HUD */
.battle-top-bar button,
.battle-top-bar a,
.battle-top-bar [onclick] {
  pointer-events: auto !important;
}

/* Horizontal dual-faction HUD accent line at bottom of top bar */
.battle-top-bar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,107,53,0.4) 15%,
    rgba(255,107,53,0.18) 40%,
    rgba(0,240,255,0.18) 60%,
    rgba(0,240,255,0.4) 85%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Ensure top-bar children sit above the pseudo-element */
.battle-top-bar > * { position: relative; z-index: 1; }

/* Battle arena fills full height now that top bar is absolute */
.battle-screen > .battle-arena {
  flex: 1 !important;
  /* Add top padding so enemy field content starts below the floating HUD */
  padding-top: 56px !important;
}

/* Enemy half top padding — ensure field-meta-row clears the HUD */
.battle-screen > .battle-arena > .enemy-half {
  padding-top: 0 !important;
}

/* ════════════════════════════════════════════════════════════
   3. FACTION COLORS — ENEMY = AWE ORANGE / PLAYER = SHOCK BLUE
   ════════════════════════════════════════════════════════════ */

/* ── ENEMY SIDE → AWE ORANGE ── */
.btb-side-enemy              { color: #ff6b35 !important; }
.btb-dot-enemy               { background: #ff6b35 !important; box-shadow: 0 0 5px rgba(255,107,53,0.8) !important; }
.btb-hp-val                  { color: #ff6b35 !important; }
.hp-fill-green               { background: #ff6b35 !important; }   /* enemy HP bar */
.hp-fill-red                 { background: #8b1a00 !important; }   /* enemy low HP */

/* ── PLAYER SIDE → SHOCK BLUE ── */
.btb-side-player             { color: #00f0ff !important; }
.btb-dot-player              { background: #00f0ff !important; box-shadow: 0 0 5px rgba(0,240,255,0.8) !important; }
.btb-player .btb-hp-val      { color: #00f0ff !important; }
.btb-player-hp-fill.hp-fill-green  { background: #00f0ff !important; }
.btb-player-hp-fill.hp-fill-yellow { background: rgba(0,200,220,0.75) !important; }
.btb-player-hp-fill.hp-fill-red    { background: #ff3333 !important; }

/* Player HP track — shock blue border */
.btb-player .btb-hp-track {
  border-color: rgba(0,240,255,0.22) !important;
}

/* Critical HP text pulse — stays red for urgency */
@keyframes hpValCritPulse {
  0%, 100% { color: #00f0ff; }
  50%       { color: #ff4444; }
}

/* ── DEPLOY POINTS BOX — SHOCK BLUE (player resource) ── */
.btb-dp-box {
  border-color: rgba(0,240,255,0.5) !important;
  background: rgba(0,240,255,0.05) !important;
  box-shadow: 0 0 14px rgba(0,240,255,0.12), inset 0 0 8px rgba(0,240,255,0.04) !important;
  border-radius: 0 !important;
  /* Angular HUD telemetry readout shape */
  clip-path: polygon(
    0 5px, 5px 0, calc(100% - 5px) 0, 100% 5px,
    100% calc(100% - 5px), calc(100% - 5px) 100%,
    5px 100%, 0 calc(100% - 5px)
  );
}
.btb-dp-num { color: #00f0ff !important; }
.btb-dp-lbl { color: rgba(0,240,255,0.6) !important; }

/* Banked deploy points — keep electric cyan styling */
.btb-dp-banked {
  border-color: rgba(0,240,255,0.7) !important;
  background: rgba(0,240,255,0.08) !important;
  box-shadow: 0 0 18px rgba(0,240,255,0.25) !important;
}

/* ── HP TRACKS — angular skewed telemetry bars ── */
.btb-hp-track {
  clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
  background: rgba(255,255,255,0.07) !important;
  border-radius: 0 !important;
}

/* ════════════════════════════════════════════════════════════
   4. FIELD ZONES — FACTION COLORS + TARGETING BRACKET GLOWS
   ════════════════════════════════════════════════════════════ */

/* ENEMY FIELD → AWE ORANGE */
.enemy-half .enemy-field-v2 {
  border-color: rgba(255,107,53,0.3) !important;
  background: rgba(255,107,53,0.03) !important;
  box-shadow:
    inset 0 0 24px rgba(255,107,53,0.05),
    0 0 0 1px rgba(255,107,53,0.12) !important;
  position: relative;
}

/* PLAYER FIELD → SHOCK BLUE */
.player-half .player-field-v2 {
  border-color: rgba(0,240,255,0.28) !important;
  background: rgba(0,240,255,0.028) !important;
  box-shadow:
    inset 0 0 24px rgba(0,240,255,0.05),
    0 0 0 1px rgba(0,240,255,0.1) !important;
  position: relative;
}

/* ENEMY HALF — awe orange tint */
.enemy-half {
  background: linear-gradient(180deg, rgba(255,107,53,0.06) 0%, transparent 80%) !important;
}

/* PLAYER HALF — shock blue tint */
.player-half {
  background: linear-gradient(0deg, rgba(0,240,255,0.04) 0%, transparent 80%) !important;
}

/* ════════════════════════════════════════════════════════════
   5. BATTLEFIELD DIVIDER — DUAL FACTION SEAM
   ════════════════════════════════════════════════════════════ */
.battlefield-label-bar {
  background: rgba(0,0,0,0.2) !important;
  /* Dual-faction gradient borders */
  border-top: 1px solid rgba(255,107,53,0.35) !important;
  border-bottom: 1px solid rgba(0,240,255,0.35) !important;
  box-shadow:
    0 -2px 12px rgba(255,107,53,0.1),
    0 2px 12px rgba(0,240,255,0.1) !important;
  /* Label text styling */
  color: rgba(255,255,255,0.25) !important;
  letter-spacing: 0.28em !important;
  font-size: 0.48rem !important;
}
/* Divider accent lines */
.battlefield-label-bar::before {
  border-color: rgba(255,107,53,0.45) !important;
  left: 5% !important; width: 16% !important;
}
.battlefield-label-bar::after {
  border-color: rgba(0,240,255,0.45) !important;
  right: 5% !important; width: 16% !important;
}

/* ════════════════════════════════════════════════════════════
   6. PHASE INDICATORS — UPDATED COLORS
   ════════════════════════════════════════════════════════════ */

/* Deploy phase → Shock Blue */
.btb-phase.phase-deploy {
  color: #00f0ff !important;
  border-color: rgba(0,240,255,0.4) !important;
  background: rgba(0,240,255,0.06) !important;
}

/* Attack phase → Awe Orange */
.btb-phase.phase-attack {
  color: #ff6b35 !important;
  border-color: rgba(255,107,53,0.4) !important;
  background: rgba(255,107,53,0.06) !important;
}

/* Player turn → Shock Blue (unified) */
.btb-phase.phase-player {
  color: #00f0ff !important;
  border-color: rgba(0,240,255,0.35) !important;
  background: rgba(0,240,255,0.05) !important;
}

/* AI turn → Awe Orange */
.btb-phase.phase-ai {
  color: #ff6b35 !important;
  border-color: rgba(255,107,53,0.4) !important;
  background: rgba(255,107,53,0.06) !important;
}

/* Turn counter — Military LED segment display aesthetic */
.btb-turn {
  font-family: 'Share Tech Mono', 'Rajdhani', monospace !important;
  color: #00f0ff !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.22em !important;
  text-shadow:
    0 0 6px rgba(0,240,255,0.6),
    0 0 14px rgba(0,240,255,0.25) !important;
  background: rgba(0,240,255,0.06) !important;
  border: 1px solid rgba(0,240,255,0.2) !important;
  padding: 0.1rem 0.4rem !important;
  border-radius: 0 !important;
  clip-path: polygon(
    3px 0, 100% 0, 100% calc(100% - 3px),
    calc(100% - 3px) 100%, 0 100%, 0 3px
  ) !important;
}

/* Phase skip button — small "ATTACK" sub-button under DEPLOYING */
.btb-phase-skip-btn {
  display: block !important;
  margin: 0.2rem auto 0 !important;
  padding: 0.1rem 0.5rem !important;
  font-family: 'Rajdhani', monospace !important;
  font-size: 0.5rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(255,107,53,0.75) !important;
  background: rgba(255,107,53,0.06) !important;
  border: 1px solid rgba(255,107,53,0.28) !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  clip-path: polygon(
    3px 0, 100% 0, 100% calc(100% - 3px),
    calc(100% - 3px) 100%, 0 100%, 0 3px
  ) !important;
  pointer-events: auto !important;
}
.btb-phase-skip-btn:hover {
  color: #ff6b35 !important;
  background: rgba(255,107,53,0.12) !important;
  border-color: rgba(255,107,53,0.5) !important;
}

/* ════════════════════════════════════════════════════════════
   7. END TURN FAB — AWE ORANGE WITH ANGULAR HUD SHAPE
   ════════════════════════════════════════════════════════════ */
.end-turn-fab {
  background: linear-gradient(135deg, #ff6b35 0%, #e04e1a 100%) !important;
  border: 1px solid rgba(255,107,53,0.5) !important;
  border-radius: 0 !important;
  box-shadow:
    0 4px 22px rgba(255,107,53,0.55),
    0 0 0 1px rgba(255,107,53,0.25),
    0 2px 8px rgba(0,0,0,0.6) !important;
  clip-path: polygon(
    6px 0, 100% 0, 100% calc(100% - 6px),
    calc(100% - 6px) 100%, 0 100%, 0 6px
  );
  font-family: 'Rajdhani', 'Share Tech Mono', monospace !important;
  letter-spacing: 0.14em !important;
}
.end-turn-fab:hover {
  background: linear-gradient(135deg, #ff7d49 0%, #f05f2a 100%) !important;
  box-shadow:
    0 6px 30px rgba(255,107,53,0.7),
    0 0 0 1px rgba(255,107,53,0.45),
    0 2px 8px rgba(0,0,0,0.6) !important;
}

/* Attack phase label in hand bar */
.hand-bar-phase-label.phase-attack-label {
  color: #ff6b35 !important;
  background: rgba(255,107,53,0.1) !important;
  border-color: rgba(255,107,53,0.35) !important;
}

/* ════════════════════════════════════════════════════════════
   8. ENGAGE BUTTON — SHOCK BLUE ANGULAR HUD SHAPE
   ════════════════════════════════════════════════════════════ */
button.btn-engage {
  background: rgba(0,240,255,0.1) !important;
  border: 1px solid rgba(0,240,255,0.45) !important;
  color: #00f0ff !important;
  border-radius: 0 !important;
  clip-path: polygon(
    6px 0, 100% 0, 100% calc(100% - 6px),
    calc(100% - 6px) 100%, 0 100%, 0 6px
  );
  text-shadow: 0 0 8px rgba(0,240,255,0.4) !important;
}
button.btn-engage:hover {
  background: rgba(0,240,255,0.2) !important;
  box-shadow: 0 0 20px rgba(0,240,255,0.3) !important;
}

/* ════════════════════════════════════════════════════════════
   9. SECONDARY FAB BUTTONS — DRONE HUD STYLE
   ════════════════════════════════════════════════════════════ */
.log-fab, .mute-fab, .pause-fab {
  background: rgba(0,0,0,0.55) !important;
  border: 1px solid rgba(0,240,255,0.22) !important;
  color: rgba(0,240,255,0.65) !important;
  border-radius: 0 !important;
}
.log-fab:hover, .mute-fab:hover, .pause-fab:hover {
  border-color: rgba(0,240,255,0.5) !important;
  color: rgba(0,240,255,0.95) !important;
  background: rgba(0,240,255,0.09) !important;
  box-shadow: 0 0 10px rgba(0,240,255,0.15) !important;
}

/* ════════════════════════════════════════════════════════════
   10. BOTTOM STRIP — SHOCK BLUE BORDER
   ════════════════════════════════════════════════════════════ */
.battle-bottom-strip {
  border-top: 1px solid rgba(0,240,255,0.2) !important;
  background: linear-gradient(0deg, #040a08 0%, rgba(5,10,8,0.97) 100%) !important;
  position: relative;
  z-index: 10;
}

/* ════════════════════════════════════════════════════════════
   11. FIELD META ROWS — HUD TELEMETRY LABELS
   ════════════════════════════════════════════════════════════ */
.field-count-label {
  color: rgba(0,240,255,0.45) !important;
  font-family: 'Rajdhani', 'Share Tech Mono', monospace !important;
  font-size: 0.5rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}
.fmr-enemy .field-count-label {
  color: rgba(255,107,53,0.45) !important;
}

/* Discard buttons — muted HUD style */
.discard-btn {
  color: rgba(255,107,53,0.55) !important;
  border-color: rgba(255,107,53,0.2) !important;
  background: rgba(255,107,53,0.04) !important;
  border-radius: 0 !important;
  font-family: 'Rajdhani', monospace !important;
  letter-spacing: 0.08em !important;
}
.discard-btn:hover {
  color: rgba(255,107,53,0.9) !important;
  border-color: rgba(255,107,53,0.45) !important;
  background: rgba(255,107,53,0.08) !important;
}

/* ════════════════════════════════════════════════════════════
   12. DRAW PHASE HINT — SHOCK BLUE
   ════════════════════════════════════════════════════════════ */
.hand-bar-draw-hint {
  color: rgba(0,240,255,0.65) !important;
  border: 1px solid rgba(0,240,255,0.25) !important;
  background: rgba(0,240,255,0.05) !important;
}

/* Attack hint text — HUD readout style */
.atk-hint {
  color: rgba(0,240,255,0.55) !important;
  border-left-color: rgba(0,240,255,0.3) !important;
  font-family: 'Rajdhani', 'Share Tech Mono', monospace !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.06em !important;
}

/* ════════════════════════════════════════════════════════════
   13. ENEMY TURN BUTTON STYLE — AWE ORANGE
   ════════════════════════════════════════════════════════════ */
button.enemy-turn-btn-style {
  color: rgba(255,107,53,0.45) !important;
  border-color: rgba(255,107,53,0.2) !important;
  background: rgba(255,107,53,0.04) !important;
  border-radius: 0 !important;
}

/* ════════════════════════════════════════════════════════════
   14. HAND LABEL — HUD TELEMETRY FONT
   ════════════════════════════════════════════════════════════ */
.hand-bar-label {
  color: rgba(0,240,255,0.45) !important;
  font-family: 'Rajdhani', monospace !important;
  font-size: 0.52rem !important;
  letter-spacing: 0.1em !important;
}

/* ════════════════════════════════════════════════════════════
   15. COMMANDER CARD — AWE ORANGE (enemy side target)
   ════════════════════════════════════════════════════════════ */

/* Commander card border and base tint → awe orange */
.commander-card {
  border-color: rgba(255,107,53,0.3) !important;
  background: linear-gradient(160deg, #130d08 0%, #100b06 100%) !important;
  border-radius: 0 !important;
}

/* Top bar strips → awe orange for all enemy commanders */
.commander-card-topbar,
.commander-card-topbar.nato-bar,
.commander-card-topbar.brics-bar {
  background: linear-gradient(90deg, rgba(255,107,53,0.65), rgba(255,107,53,0.2)) !important;
}

/* Commander HP bar → orange, goes dark red when low */
.commander-card-hp-fill {
  background: #ff6b35 !important;
}
.commander-card-hp-fill.hp-fill-yellow { background: rgba(255,100,40,0.75) !important; }
.commander-card-hp-fill.hp-fill-red    { background: #cc2200 !important; }

/* Commander HP value text */
.commander-card-hp-val { color: rgba(255,180,140,0.6) !important; }

/* Commander label text */
.commander-card-label { color: rgba(255,160,120,0.6) !important; }

/* Icon glow → awe orange */
.commander-card-icon {
  filter: drop-shadow(0 0 4px rgba(255,107,53,0.45)) !important;
  opacity: 0.8 !important;
}

/* Exposed state → intensify awe orange danger pulse */
.enemy-half.commander-exposed .commander-card {
  border-color: rgba(255,107,53,0.8) !important;
  box-shadow:
    0 0 16px rgba(255,107,53,0.4),
    0 0 32px rgba(255,107,53,0.2),
    inset 0 0 12px rgba(255,107,53,0.08) !important;
}

/* Targeting active on exposed commander → orange laser-lock */
.battle-arena.unit-targeting-active .enemy-half.commander-exposed .commander-card {
  border-color: rgba(255,107,53,1.0) !important;
  box-shadow:
    0 0 0 2px rgba(255,107,53,0.6),
    0 0 20px rgba(255,107,53,0.6),
    0 0 40px rgba(255,107,53,0.3) !important;
}

/* ════════════════════════════════════════════════════════════
   16. BATTLE LOG MODAL — SHOCK BLUE HUD AESTHETIC
   ════════════════════════════════════════════════════════════ */
.blog-title { color: #00f0ff !important; }
.blog-hdr { border-bottom-color: rgba(0,240,255,0.15) !important; }

/* ════════════════════════════════════════════════════════════
   END DRONE OPERATOR HUD OVERHAUL
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   17. GAMEPLAY DEPTH — POSITIONING GRID, COMBAT TAGS, CHARGE-UP
   ════════════════════════════════════════════════════════════ */

/* ── Empty slot outlines — always visible grid structure ── */
.bf-empty-slot {
  width: 72px;
  height: 100px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
}

/* Player slots — Shock Blue glow */
.slot-glow-player {
  border: 1.5px dashed rgba(0, 240, 255, 0.35);
  background: rgba(0, 240, 255, 0.03);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.12), inset 0 0 10px rgba(0, 240, 255, 0.05);
  animation: slotPulsePlayer 3s ease-in-out infinite;
}

/* Enemy slots — Awe Orange glow */
.slot-glow-enemy {
  border: 1.5px dashed rgba(255, 107, 53, 0.35);
  background: rgba(255, 107, 53, 0.03);
  box-shadow: 0 0 8px rgba(255, 107, 53, 0.12), inset 0 0 10px rgba(255, 107, 53, 0.05);
  animation: slotPulseEnemy 3s ease-in-out infinite;
}

@keyframes slotPulsePlayer {
  0%, 100% { border-color: rgba(0, 240, 255, 0.25); box-shadow: 0 0 6px rgba(0, 240, 255, 0.10); }
  50% { border-color: rgba(0, 240, 255, 0.50); box-shadow: 0 0 14px rgba(0, 240, 255, 0.25); }
}
@keyframes slotPulseEnemy {
  0%, 100% { border-color: rgba(255, 107, 53, 0.25); box-shadow: 0 0 6px rgba(255, 107, 53, 0.10); }
  50% { border-color: rgba(255, 107, 53, 0.50); box-shadow: 0 0 14px rgba(255, 107, 53, 0.25); }
}

/* Slot label text */
.bf-slot-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.bf-slot-label {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.45;
  color: #fff;
  font-weight: bold;
}
.bf-slot-hint {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 7px;
  letter-spacing: 1px;
  opacity: 0.3;
  color: #00f0ff;
}

/* ── Ability Charge-Up Overlay ("Weapons Loading") ── */
.cbf-charge-overlay {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(255, 140, 0, 0.85), rgba(255, 80, 0, 0.7));
  border-top: 1px solid rgba(255, 160, 0, 0.7);
  text-align: center;
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  font-weight: bold;
  color: #fff;
  padding: 2px 2px;
  letter-spacing: 0.5px;
  text-shadow: 0 0 8px rgba(255, 200, 0, 1.0);
  z-index: 20;
  pointer-events: none;
  animation: chargeGlow 1.2s ease-in-out infinite;
}

@keyframes chargeGlow {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1.0; box-shadow: 0 -2px 8px rgba(255,140,0,0.6); }
}

/* ── Ability Cooldown (Reload) Overlay ── */
.cbf-cooldown-overlay {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  background: rgba(30, 40, 60, 0.82);
  border-top: 1px solid rgba(100, 150, 255, 0.4);
  text-align: center;
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  font-weight: bold;
  color: rgba(150, 180, 255, 0.9);
  padding: 2px 2px;
  letter-spacing: 0.5px;
  z-index: 20;
  pointer-events: none;
  opacity: 0.85;
}

/* ── Front-Row Protection Badge ("SHIELDED") ── */
.cbf-protected-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 107, 53, 0.18);
  border: 1px solid rgba(255, 107, 53, 0.6);
  border-radius: 4px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px;
  font-weight: bold;
  color: rgba(255, 160, 100, 0.95);
  padding: 3px 5px;
  letter-spacing: 1.5px;
  pointer-events: none;
  z-index: 25;
  text-shadow: 0 0 6px rgba(255,107,53,0.8);
  white-space: nowrap;
}

/* Protected unit state — can't be clicked */
.bf-grid-item .cbf-card.protected-unit {
  cursor: not-allowed;
  filter: brightness(0.65) saturate(0.6);
  opacity: 0.75;
  border-color: rgba(255, 107, 53, 0.25) !important;
}

/* Dimmed variant (visible but not currently the attack target) */
.bf-grid-item .cbf-card.protected-unit-dim {
  filter: brightness(0.75) saturate(0.7);
  opacity: 0.7;
}

/* ── Combat tag matchup arrows: also handle player-side cards in inspection ── */
.cbf-charge-overlay + .cbf-cooldown-overlay {
  display: none; /* don't show both at once */
}

/* ════════════════════════════════════════════════════════════
   END GAMEPLAY DEPTH SYSTEMS
   ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   BATTLE SCREEN VISUAL REDESIGN — Task #561381
   Mobile-first tactical command aesthetic. Marvel Snap / Pokémon
   TCG Live level polish. No mechanic changes — visual/layout only.
   ════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────
   1. TOP HUD: SECONDARY CONTROLS — compact horizontal row
   Removes the tall 3-button column eating into battlefield space
   ────────────────────────────────────────────────────────── */
.btb-secondary-btns {
  flex-direction: row !important;
  gap: 3px !important;
  align-items: center !important;
  align-self: center !important;
  justify-content: flex-end !important;
}

.btb-secondary-btns .log-fab,
.btb-secondary-btns .mute-fab,
.btb-secondary-btns .pause-fab {
  min-height: 34px !important;
  min-width: 34px !important;
  padding: 0.15rem 0.4rem !important;
  font-size: 0.52rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ──────────────────────────────────────────────────────────
   2. TOP HUD: PHASE LABEL — single, clear, no skip button clutter
   (btb-phase-skip-btn removed from JS — CSS safety hide too)
   ────────────────────────────────────────────────────────── */
.btb-phase-skip-btn {
  display: none !important;
}

/* Slightly tighter btb-center gap now that skip button is gone */
.btb-center {
  gap: 0.15rem !important;
}

/* ──────────────────────────────────────────────────────────
   3. BOTTOM COMMAND BAR — proper TCG command console
   Clear left/right split: info left, action right.
   ────────────────────────────────────────────────────────── */
.saw-cmd-bar {
  /* Override existing battle-bottom-strip flex to give the new row proper layout */
}

.saw-cmd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  min-height: 52px;
}

.saw-cmd-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.saw-cmd-counts {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-family: 'Rajdhani', 'Share Tech Mono', monospace;
}

.saw-cmd-stat {
  font-weight: 700;
  font-size: 0.9rem;
  color: rgba(0, 240, 255, 0.8);
  letter-spacing: 0.05em;
  font-family: 'Rajdhani', monospace;
  line-height: 1;
}

.saw-cmd-lbl {
  font-size: 0.45rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(0, 240, 255, 0.38);
  font-family: 'Rajdhani', monospace;
  font-weight: 600;
}

.saw-cmd-sep {
  color: rgba(0, 240, 255, 0.2);
  font-size: 0.7rem;
  margin: 0 0.1rem;
}

.saw-cmd-action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* ── Remove old hand-bar padding when inside new command bar ── */
.saw-cmd-bar .hand-bar {
  display: none !important; /* hand-bar is not used in the new saw-cmd-bar */
}

/* Ensure atk-hint inside saw-cmd-left looks clean */
.saw-cmd-left .atk-hint {
  margin: 0 !important;
  padding: 0.15rem 0 !important;
  border-left: 2px solid rgba(0,240,255,0.35) !important;
  padding-left: 0.5rem !important;
  font-size: 0.55rem !important;
}

/* ──────────────────────────────────────────────────────────
   4. HAND CARDS — wider with visible names (no 12-char JS chop)
   Bigger cards → cards are the star, like a real TCG
   ────────────────────────────────────────────────────────── */
.hand-fan-card {
  width: 80px !important;
  height: 110px !important;
  margin-left: -18px !important;
}

/* First card: reset negative margin */
.hand-fan-card:first-child {
  margin-left: 0 !important;
}

/* Card name: larger font now that cards are wider */
.hfc-name {
  font-size: 0.62rem !important;
  letter-spacing: 0.03em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Footer gradient: slightly taller for the bigger cards */
.hfc-footer {
  padding: 1rem 0.3rem 0.25rem !important;
}

/* Cost badge: stays top-right */
.hfc-cost {
  font-size: 0.72rem !important;
  padding: 1px 5px !important;
}

/* Selected card: bigger lift for taller card */
.hand-fan-card.hfc-selected {
  transform: translateY(-40px) rotate(0deg) scale(1.12) !important;
}

/* Fan row padding: accommodate slightly taller cards */
.hand-fan-row {
  padding: 56px 16px 0 !important;
}

/* Icon bg: scale up for bigger card area */
.hfc-icon-bg {
  font-size: 2.1rem !important;
  padding-bottom: 1.2rem !important;
}

/* ──────────────────────────────────────────────────────────
   5. ENGAGE BUTTON — primary CTA, prominent in command bar
   ────────────────────────────────────────────────────────── */
button.btn-engage {
  font-size: 0.82rem !important;
  padding: 0.52rem 1.1rem !important;
  letter-spacing: 0.12em !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

/* Enemy turn button: keeps its muted style but better padding */
button.enemy-turn-btn-style {
  padding: 0.45rem 0.8rem !important;
  font-size: 0.7rem !important;
  white-space: nowrap !important;
}

/* Attack phase label in command bar */
.hand-bar-phase-label.phase-attack-label {
  font-size: 0.7rem !important;
  padding: 0.3rem 0.6rem !important;
  white-space: nowrap !important;
}

/* Draw phase hint */
.hand-bar-draw-hint {
  padding: 0.3rem 0.6rem !important;
  font-size: 0.65rem !important;
  white-space: nowrap !important;
}

/* ──────────────────────────────────────────────────────────
   6. END TURN FAB — repositioned for new command bar height
   ────────────────────────────────────────────────────────── */
.end-turn-fab {
  bottom: 72px !important;  /* above the taller command bar */
  right: 16px !important;
  font-size: 0.88rem !important;
  padding: 0.6rem 1.2rem !important;
}

/* ──────────────────────────────────────────────────────────
   7. PERSISTENT HAND — position above the new command bar
   ────────────────────────────────────────────────────────── */
.battle-hand-persistent {
  bottom: 60px !important; /* aligns above the command bar */
}

/* ──────────────────────────────────────────────────────────
   8. FIELD META ROWS — more breathing room & cleaner spacing
   ────────────────────────────────────────────────────────── */
.fmr-enemy {
  padding: 0.25rem 0.75rem 0.2rem !important;
}

.fmr-player {
  padding: 0.2rem 0.75rem 0.25rem !important;
}

/* Field zone borders: tighter margin for more card space */
.enemy-half .enemy-field-v2 {
  margin: 0 0.4rem 0 !important;
}

.player-half .player-field-v2 {
  margin: 0 0.4rem 0 !important;
}

/* ──────────────────────────────────────────────────────────
   9. BATTLEFIELD DIVIDER — minimal, crisp seam
   ────────────────────────────────────────────────────────── */
.battlefield-label-bar {
  padding: 0.08rem 0 !important;
}

/* ──────────────────────────────────────────────────────────
   10. DESKTOP — scale up the redesign gracefully
   ────────────────────────────────────────────────────────── */
@media (min-width: 600px) {
  .hand-fan-card {
    width: 88px !important;
    height: 122px !important;
    margin-left: -14px !important;
  }
  .hfc-name {
    font-size: 0.68rem !important;
  }
  button.btn-engage {
    font-size: 0.9rem !important;
    padding: 0.6rem 1.4rem !important;
  }
  .saw-cmd-stat {
    font-size: 1rem !important;
  }
  .btb-secondary-btns .log-fab,
  .btb-secondary-btns .mute-fab,
  .btb-secondary-btns .pause-fab {
    min-height: 38px !important;
    min-width: 38px !important;
  }
}

/* ════════════════════════════════════════════════════════════
   END BATTLE SCREEN VISUAL REDESIGN — Task #561381
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   BATTLE UX OVERHAUL — TIER 1A (Task #561993)
   Clean 2-row board, damage preview, status icons, turn timer
   ════════════════════════════════════════════════════════════ */

/* ── 1. EMPTY SLOTS — minimal, recede unless actively deploying ── */
/* Override: all empty slots invisible by default — no wireframe clutter */
.bf-empty-slot {
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  animation: none !important;
}
/* Hide FRONT/BACK labels — too noisy when empty */
.bf-slot-label { display: none !important; }
.bf-slot-hint  { display: none !important; }

/* During deploy phase — reveal subtle outline for player slots only */
.battle-arena[data-phase="deploy"] .bf-empty-slot.slot-glow-player {
  border: 1px dashed rgba(0, 240, 255, 0.18) !important;
  background: rgba(0, 240, 255, 0.018) !important;
  box-shadow: none !important;
  animation: none !important;
}
/* Enemy empty slots always invisible — player doesn't control them */
.battle-arena[data-phase="deploy"] .bf-empty-slot.slot-glow-enemy {
  border: none !important;
  background: none !important;
}

/* ── 2. TURN TIMER ── */
.btb-turn-timer {
  font-family: 'Share Tech Mono', 'Rajdhani', monospace;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.45);
  min-width: 34px;
  text-align: center;
  line-height: 1;
  transition: color 0.3s;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 0.12rem 0.35rem;
  clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}
.btb-turn-timer.timer-ai {
  display: none; /* hide during AI turn */
}
.btb-turn-timer.timer-warning {
  color: #fbbf24 !important;
  border-color: rgba(251,191,36,0.35) !important;
  animation: timerPulse 1s ease-in-out infinite;
}
.btb-turn-timer.timer-critical {
  color: #ef4444 !important;
  border-color: rgba(239,68,68,0.5) !important;
  box-shadow: 0 0 8px rgba(239,68,68,0.25) !important;
  animation: timerPulse 0.5s ease-in-out infinite;
}
@keyframes timerPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

/* ── 3. DAMAGE PREVIEW MODAL ── */
.dmg-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 8500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 70px;
  background: rgba(0,0,0,0.25);
  animation: dmgBgIn 0.15s ease-out;
}
@keyframes dmgBgIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.dmg-preview-panel {
  background: rgba(6, 10, 14, 0.98);
  border: 1px solid rgba(255, 107, 53, 0.45);
  border-top: 2px solid rgba(255, 107, 53, 0.75);
  padding: 0.8rem 1.1rem 0.9rem;
  min-width: 260px;
  max-width: 340px;
  width: calc(100% - 2rem);
  animation: previewSlideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: 'Rajdhani', sans-serif;
  position: relative;
  overflow: hidden;
}
.dmg-preview-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 3px
  );
}
@keyframes previewSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dmg-preview-header {
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  margin-bottom: 0.55rem;
  position: relative;
}
.dmg-preview-matchup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 0.65rem;
  position: relative;
}
.dmg-preview-attacker, .dmg-preview-target {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.dmg-preview-attacker { color: #00f0ff; }
.dmg-preview-target   { color: #ff6b35; }
.dmg-preview-arrow    { color: rgba(255,255,255,0.25); font-size: 0.75rem; flex-shrink: 0; }
.dmg-preview-damage {
  text-align: center;
  margin-bottom: 0.55rem;
  position: relative;
}
.dmg-preview-number {
  font-size: 2.4rem;
  font-weight: 700;
  color: #ff6b35;
  letter-spacing: -0.02em;
  line-height: 1;
  text-shadow: 0 0 24px rgba(255,107,53,0.45);
}
.dmg-preview-number.dmg-kill {
  color: #ef4444;
  text-shadow: 0 0 20px rgba(239,68,68,0.5);
}
.dmg-preview-number.dmg-weak {
  color: rgba(255,107,53,0.5);
  text-shadow: none;
}
.dmg-preview-sublabel {
  font-size: 0.54rem;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  margin-top: 0.15rem;
}
.dmg-preview-sublabel.sublabel-kill { color: rgba(239,68,68,0.7); }
.dmg-preview-meta {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  margin-bottom: 0.6rem;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.35);
  position: relative;
}
.dmg-preview-meta span { text-transform: uppercase; }
.dmg-preview-meta .meta-val {
  color: rgba(255,255,255,0.65);
  font-weight: 700;
}
.dmg-preview-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  position: relative;
}
.dmg-preview-btn {
  padding: 0.55rem 0.5rem;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.14s;
  background: transparent;
}
.dmg-preview-confirm {
  border-color: rgba(255,107,53,0.55);
  color: #ff6b35;
}
.dmg-preview-confirm:active { background: rgba(255,107,53,0.15); }
.dmg-preview-cancel {
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.4);
}
.dmg-preview-cancel:active { background: rgba(255,255,255,0.06); }

/* ── 4. STATUS EFFECT ICONS on deployed cards ── */
.cbf-status-icons {
  position: absolute;
  bottom: 20px; /* sit above HP bar */
  left: 3px;
  right: 3px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2px;
  pointer-events: none;
  z-index: 16;
}
.cbf-status-icon {
  display: flex;
  align-items: center;
  background: rgba(0,0,0,0.82);
  padding: 1px 3px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 6.5px;
  font-weight: bold;
  letter-spacing: 0.5px;
  border-radius: 2px;
  white-space: nowrap;
  line-height: 1.3;
}
.cbf-status-arming   { color: #ffa040; border: 1px solid rgba(255,140,0,0.5); }
.cbf-status-cooldown { color: #80aaff; border: 1px solid rgba(100,150,255,0.4); }
.cbf-status-debuff-acc { color: #ff7070; border: 1px solid rgba(255,80,80,0.4); }
.cbf-status-debuff-fp  { color: #ffaa60; border: 1px solid rgba(255,140,60,0.4); }
.cbf-status-buff-fp    { color: #60ff90; border: 1px solid rgba(60,255,100,0.4); }
.cbf-status-shield     { color: #90c8ff; border: 1px solid rgba(120,180,255,0.4); }
.cbf-status-stun       { color: #ffee60; border: 1px solid rgba(255,230,60,0.4); }

/* Hide the old large text overlays — replaced by icon badges */
.cbf-charge-overlay,
.cbf-cooldown-overlay {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════
   END TIER 1A OVERHAUL — Task #561993
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   TIER 1C — Confidence Meter + Progression UI — Task #562006
   ════════════════════════════════════════════════════════════ */

/* ── Main Menu: Confidence Row (inside mm-prog-left) ── */
.mm-conf-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.mm-conf-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,187,0,0.65);
  white-space: nowrap;
  flex-shrink: 0;
}

.mm-conf-bar-wrap {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.07);
  border-radius: 2px;
  overflow: visible;
  position: relative;
}

.mm-conf-bar {
  height: 100%;
  background: linear-gradient(90deg, rgba(255,187,0,0.7), rgba(255,140,0,0.9));
  border-radius: 2px;
  transition: width 0.7s ease;
  box-shadow: 0 0 5px rgba(255,187,0,0.4);
}

.mm-conf-marker {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 8px;
  background: rgba(255,255,255,0.25);
  transform: translateX(-50%);
  border-radius: 1px;
}

.mm-conf-pct {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.55rem;
  color: rgba(255,187,0,0.7);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 2.8rem;
  text-align: right;
}

/* ── Post-Match Results: Confidence Block ── */
.result-conf-block {
  margin: 0.75rem auto 0;
  max-width: 340px;
  width: 100%;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 0.6rem;
  text-align: left;
}

.result-conf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}

.result-conf-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,187,0,0.7);
}

.result-conf-gain {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.65rem;
  color: rgba(255,187,0,0.9);
  font-weight: 700;
}

.result-conf-bar-wrap {
  width: 100%;
  margin-bottom: 0.3rem;
}

.result-conf-bar-bg {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.07);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}

.result-conf-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 3px;
  transition: width 0.8s ease;
}

.result-conf-bar-prev {
  background: rgba(255,187,0,0.25);
  /* Previous meter state — shown faintly beneath the new fill */
  z-index: 1;
}

.result-conf-bar-fill:not(.result-conf-bar-prev) {
  background: linear-gradient(90deg, rgba(255,187,0,0.8), rgba(255,120,0,0.95));
  box-shadow: 0 0 6px rgba(255,187,0,0.4);
  z-index: 2;
}

.result-conf-tmark {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: rgba(255,255,255,0.3);
  transform: translateX(-50%);
  z-index: 3;
}

.result-conf-meta {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  text-align: right;
}

.result-conf-milestone {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: rgba(255,215,0,0.9);
  margin-top: 0.3rem;
  text-align: center;
  animation: conf-pulse 1s ease-out;
}

@keyframes conf-pulse {
  0%   { opacity: 0; transform: scale(0.9); }
  60%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

/* ════════════════════════════════════════════════════════════
   END TIER 1C — Confidence Meter — Task #562006
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   TIER 3C — PvP Emote System
   Quick-tap emote bar shown only during PvP battles.
   Emote overlay animates in from top when opponent sends.
   ════════════════════════════════════════════════════════════ */

/* ── Emote bar — fixed bottom-left, above command bar ── */
.pvp-emote-bar {
  position: fixed;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  left: 8px;
  display: flex;
  gap: 4px;
  z-index: 300;
  pointer-events: all;
}

.pvp-emote-btn {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(0, 200, 255, 0.6);
  background: rgba(5, 12, 8, 0.88);
  border: 1px solid rgba(0, 200, 255, 0.2);
  padding: 0.28rem 0.55rem;
  cursor: pointer;
  transition: all 0.15s;
  min-width: 40px;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  /* Angular clip — military feel */
  clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
}

.pvp-emote-btn:hover,
.pvp-emote-btn:active {
  color: #00c8ff;
  border-color: rgba(0, 200, 255, 0.55);
  background: rgba(0, 200, 255, 0.12);
  transform: translateY(-1px);
}

.pvp-emote-btn.pvp-emote-sent {
  color: #00ff88;
  border-color: rgba(0, 255, 136, 0.45);
  background: rgba(0, 255, 136, 0.08);
}

/* ── Incoming emote overlay — animates in from top ── */
#pvp-emote-incoming {
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 800;
  pointer-events: none;
  animation: emoteSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#pvp-emote-incoming.pvp-emote-out {
  animation: emoteSlideOut 0.35s ease forwards;
}

@keyframes emoteSlideIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(0.9); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes emoteSlideOut {
  from { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  to   { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(0.92); }
}

.pvp-emote-bubble {
  background: rgba(6, 13, 8, 0.93);
  border: 1px solid rgba(255, 107, 53, 0.45);
  border-top: 2px solid rgba(255, 107, 53, 0.7);
  padding: 0.4rem 1rem 0.35rem;
  text-align: center;
  min-width: 100px;
  backdrop-filter: blur(8px);
  /* Angular military clip */
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
}

.pvp-emote-sender {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.48rem;
  letter-spacing: 0.18em;
  color: rgba(255, 107, 53, 0.7);
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
}

.pvp-emote-text {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  color: #ff6b35;
  text-shadow: 0 0 12px rgba(255, 107, 53, 0.5);
  text-transform: uppercase;
  display: block;
  line-height: 1.1;
}

/* ════════════════════════════════════════════════════════════
   END TIER 3C — PvP Emote System
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   MATCH SCREEN — Warfront & Breach Swipeable Panels
   ════════════════════════════════════════════════════════════ */

.match-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #0a0a0f;
  overflow: hidden;
  z-index: 1000;
}

.match-screen .back-btn {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1002;
}

.match-screen-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 80px 20px 20px;
}

.match-panels {
  flex: 1;
  display: flex;
  overflow: hidden;
  transform: translateX(0);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius: 12px;
}

.match-panels.match-panels--initialized .match-panel--active {
  animation: matchPanelIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes matchPanelIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.match-panel {
  min-width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.match-panel-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Warfront Panel — Dark tactical war room */
.match-panel--warfront .match-panel-bg {
  background:
    linear-gradient(180deg, rgba(10,20,30,0.95) 0%, rgba(5,15,25,0.98) 100%),
    repeating-linear-gradient(0deg, transparent 0px, transparent 40px, rgba(0,255,136,0.03) 40px, rgba(0,255,136,0.03) 41px),
    repeating-linear-gradient(90deg, transparent 0px, transparent 40px, rgba(0,255,136,0.03) 40px, rgba(0,255,136,0.03) 41px);
  background-size: 100% 100%, 40px 40px, 40px 40px;
}

/* Breach Panel — Fast kinetic */
.match-panel--breach .match-panel-bg {
  background:
    linear-gradient(160deg, rgba(30,15,10,0.95) 0%, rgba(20,10,5,0.98) 100%),
    repeating-linear-gradient(-45deg, transparent 0px, transparent 20px, rgba(255,150,50,0.02) 20px, rgba(255,150,50,0.02) 21px);
}

.match-panel--warfront .match-panel-bg::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(0,255,136,0.05) 0%, transparent 50%);
  animation: warfrontScan 8s linear infinite;
}

@keyframes warfrontScan {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.match-panel--breach .match-panel-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,150,50,0.1), transparent);
  animation: breachSweep 3s ease-in-out infinite;
}

@keyframes breachSweep {
  0%, 100% { transform: translateX(-30%); }
  50% { transform: translateX(30%); }
}

.match-panel-content {
  position: relative;
  z-index: 1;
  max-width: 400px;
  text-align: center;
}

.match-panel-header {
  margin-bottom: 20px;
}

.match-panel-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  font-size: 3.5rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.match-panel--warfront .match-panel-title {
  color: #00ff88;
  text-shadow: 0 0 30px rgba(0,255,136,0.5), 0 0 60px rgba(0,255,136,0.2);
}

.match-panel--breach .match-panel-title {
  color: #ff9600;
  text-shadow: 0 0 30px rgba(255,150,0,0.5), 0 0 60px rgba(255,150,0,0.2);
}

.match-panel-tag {
  display: inline-block;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  padding: 4px 16px;
  border-radius: 3px;
  margin-top: 8px;
}

.match-panel--warfront .match-panel-tag {
  background: rgba(0,255,136,0.1);
  border: 1px solid rgba(0,255,136,0.3);
  color: #00ff88;
}

.match-panel--breach .match-panel-tag {
  background: rgba(255,150,0,0.1);
  border: 1px solid rgba(255,150,0,0.3);
  color: #ff9600;
}

.match-panel-desc {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.1rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
  margin-bottom: 25px;
}

.match-panel-stats {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 25px;
}

.match-stat {
  text-align: center;
}

.match-stat-label {
  display: block;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.15em;
  margin-bottom: 4px;
}

.match-stat-value {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1rem;
}

.match-panel--warfront .match-stat-value {
  color: #00ffaa;
}

.match-panel--breach .match-stat-value {
  color: #ffaa00;
}

/* Online Beacon */
.match-online-beacon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(0,255,136,0.3);
  border-radius: 4px;
}

.match-online-beacon--amber {
  border-color: rgba(255,150,0,0.3);
}

.match-beacon-pulse {
  width: 8px;
  height: 8px;
  background: #00ff88;
  border-radius: 50%;
  box-shadow: 0 0 10px #00ff88;
  animation: beaconPulse 2s ease-in-out infinite;
}

.match-beacon-pulse--fast {
  background: #ff9600;
  box-shadow: 0 0 10px #ff9600;
  animation: beaconPulse 1s ease-in-out infinite;
}

.match-online-beacon--amber .match-beacon-pulse {
  background: #ff9600;
  box-shadow: 0 0 10px #ff9600;
}

@keyframes beaconPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

.match-beacon-text {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.8);
}

/* Dot Indicators */
.match-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 20px 0;
}

.match-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.match-dot--active {
  background: #00ff88;
  box-shadow: 0 0 10px rgba(0,255,136,0.5);
}

.match-screen-container:has(.match-panel--breach.match-panel--active) .match-dot--active {
  background: #ff9600;
  box-shadow: 0 0 10px rgba(255,150,0,0.5);
}

/* Mode Info Panel */
.match-info {
  min-height: 150px;
  padding: 15px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  margin-bottom: 20px;
}

.match-mode-info {
  font-family: 'Rajdhani', sans-serif;
}

.match-mode-info h3 {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  margin-bottom: 12px;
}

.match-mode-info--warfront h3 {
  color: #00ff88;
}

.match-mode-info--breach h3 {
  color: #ff9600;
}

.match-mode-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.match-mode-info li {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
}

.match-mode-info li strong {
  color: rgba(255,255,255,0.9);
}

/* Play Button */
.match-play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 18px;
  background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%);
  border: none;
  border-radius: 8px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.15em;
  color: #000;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
}

.match-play-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,255,136,0.3);
}

.match-play-btn:active {
  transform: translateY(0);
}

.match-screen-container:has(.match-panel--breach.match-panel--active) .match-play-btn {
  background: linear-gradient(135deg, #ff9600 0%, #cc7700 100%);
}

.match-screen-container:has(.match-panel--breach.match-panel--active) .match-play-btn:hover {
  box-shadow: 0 8px 25px rgba(255,150,0,0.3);
}

.match-play-icon {
  font-size: 1.4rem;
}

/* Mobile responsive */
@media (max-width: 480px) {
  .match-panel-title {
    font-size: 2.5rem;
  }

  .match-panel-stats {
    gap: 15px;
  }

  .match-mode-info ul {
    grid-template-columns: 1fr;
  }
}