/* ══════════════════════════════════════════════════════════════
   Component — Unit Card (right panel)
   Extracted from shoot/v0.4/style.css + v0.8a overrides
══════════════════════════════════════════════════════════════ */

/* Unit card — themed to the SHOWN unit's owning faction. The
   .side-a / .side-b class set on #unit-card by shared/state/unit-card.js
   provides --owning-faction through colors.css, so all chrome here
   resolves to the right palette regardless of whose turn it is. */
#unit-card {
  position: absolute; bottom: 48px; right: 10px;
  width: 330px; /* v0.8a override (was 300px in v0.4) */
  /* Glass + rounded chrome to match #phase-header / #roll-overlay */
  background: linear-gradient(180deg, rgba(8,12,16,.95), rgba(8,12,16,.84));
  border: 1px solid color-mix(in srgb, var(--owning-faction) 22%, transparent);
  border-top: 2px solid var(--owning-faction);
  border-radius: 14px;
  box-shadow: 0 0 24px color-mix(in srgb, var(--owning-faction) 8%, transparent), 0 12px 40px rgba(0,0,0,.45);
  overflow: hidden;
  z-index: 30; display: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  max-height: calc(100vh - 120px); overflow-y: auto;
}
#unit-card::-webkit-scrollbar { width: 2px; }
#unit-card::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--owning-faction) 8%, transparent); }
#unit-card.visible { display: block; }

/* v2-B panel header (raised background) */
.card-hdr {
  background: var(--bg-raised);
  padding: 10px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--owning-faction) 12%, transparent);
  display: flex; align-items: flex-start; justify-content: space-between;
}
/* v1-D: Anton for unit name */
.card-name {
  font: normal 400 20px/1.1 'Anton', sans-serif;
  color: var(--text-primary);
  text-transform: uppercase; letter-spacing: .04em;
}
/* v2-B subtitle */
.card-faction {
  font: 500 10px/1 'Rajdhani', sans-serif;
  letter-spacing: 2px; color: var(--text-muted);
  text-transform: uppercase; margin-top: 5px;
}
/* #unit-card now uses .side-a / .side-b for side-scoping (sets
   --owning-faction via colors.css). The border-top-color above already
   follows --owning-faction, so explicit side accents aren't needed. */
.card-close {
  color: var(--text-muted); cursor: pointer; font-size: 18px;
  line-height: 1; margin-left: 8px; flex-shrink: 0;
  transition: color .15s; background: none; border: none;
}
.card-close:hover { color: var(--owning-faction); }

/* Stat row inside card */
.card-stats {
  display: flex;
  border-bottom: 1px solid color-mix(in srgb, var(--owning-faction) 6%, transparent);
  background: var(--bg-surface);
}
.stat-cell { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 10px 2px; }
.stat-key  { font: 500 9px/1 'Rajdhani', sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dis); display: block; margin-bottom: 4px; }
.stat-val  { font: 700 20px/1 'Rajdhani', sans-serif; color: var(--text-primary); display: block; }

/* Range toggles */
.card-ranges { display: flex; gap: 4px; padding: 6px 14px; border-bottom: 1px solid color-mix(in srgb, var(--owning-faction) 5%, transparent); background: var(--bg-surface); }
.range-toggle {
  flex: 1; padding: 5px 4px;
  font: 600 9px/1 'Rajdhani', sans-serif; letter-spacing: 1px; text-transform: uppercase;
  background: transparent; border: 1px solid var(--text-dis);
  color: var(--text-muted); cursor: pointer; transition: all .15s;
}
.range-toggle:hover { border-color: var(--text-muted); color: var(--text-sec); }
/* Active "move" range toggle — themed to the card's owning faction. */
.range-toggle.active.move    { background: color-mix(in srgb, var(--owning-faction) 12%, transparent); border-color: color-mix(in srgb, var(--owning-faction) 60%, var(--bg-primary)); color: var(--owning-faction); }
.range-toggle.active.advance { background: var(--strat-tint); border-color: var(--strat-dim); color: var(--strat); }
.range-toggle.active.charge  { background: rgba(204,100,0,.1); border-color: rgba(204,100,0,.4); color: #cc6400; }
.range-toggle.active.ds      { background: rgba(186,126,255,.1); border-color: rgba(186,126,255,.42); color: #ba7eff; }

/* Card sections */
.card-section { padding: 8px 14px; border-bottom: 1px solid color-mix(in srgb, var(--owning-faction) 5%, transparent); background: var(--bg-surface); }
.sec-label {
  font: 600 9px/1 'Rajdhani', sans-serif; letter-spacing: 2px;
  color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px;
}

/* Wargear rows */
.wg-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 6px; margin-bottom: 3px; cursor: pointer;
  border: 1px solid var(--text-dis); font: 600 11px/1 'Rajdhani', sans-serif;
  color: var(--text-muted); transition: all .15s;
}
.wg-row:hover { border-color: var(--text-muted); color: var(--text-sec); }
/* Active wargear row tints to the card's owning faction. */
.wg-row.active { border-color: color-mix(in srgb, var(--owning-faction) 60%, var(--bg-primary)); background: color-mix(in srgb, var(--owning-faction) 12%, transparent); color: var(--owning-faction); }
.wg-circle {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1.5px solid var(--text-dis);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: all .15s;
}
.wg-row.active .wg-circle { background: var(--owning-faction); border-color: var(--owning-faction); }

/* Weapon table (flex grid) */
.card-weapons { padding: 0 14px 8px; background: var(--bg-surface); }
.wt-hdr {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 0 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--owning-faction) 10%, transparent);
}
/* Weapon-table type label + row separators — themed to the card's owner. */
.wt-type { font: 600 9px/1 'Rajdhani', sans-serif; letter-spacing: 2px; color: var(--owning-faction); text-transform: uppercase; flex: 1; }
.wt-col  { font: 600 8px/1 'Rajdhani', sans-serif; letter-spacing: 1px; color: var(--text-dis); text-transform: uppercase; min-width: 26px; text-align: center; }
.wt-row  { padding: 4px 0; border-bottom: 1px solid color-mix(in srgb, var(--owning-faction) 4%, transparent); }
.wt-row:last-child { border-bottom: none; }
.wt-name-row { display: flex; align-items: center; gap: 4px; }
.wt-name { flex: 1; font: 500 13px/1.2 'Rajdhani', sans-serif; color: var(--text-primary); }
.wt-val  { font: 500 12px/1 'Rajdhani', sans-serif; color: var(--text-muted); min-width: 26px; text-align: center; }
.wt-val.ap0 { color: var(--text-muted); }
.wt-val.ap1 { color: var(--text-sec); }
.wt-val.ap2 { color: var(--strat); }
.wt-val.ap3 { color: var(--faction-b); font-weight: 700; }
.wt-val.ap4 { color: var(--bs); font-weight: 700; text-shadow: 0 0 6px rgba(204,32,32,.4); }
.wt-val.dmg { color: var(--faction-a); font-weight: 700; }
.wt-val.stat-buffed { color: #c9a352; font-weight: 700; text-shadow: 0 0 6px rgba(201,163,82,.35); }
.wt-kws { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }

/* Keyword pills */
.kw-pill {
  display: inline-block; font: 600 8px/1 'Rajdhani', sans-serif;
  letter-spacing: .5px; padding: 2px 6px;
  cursor: help; position: relative; text-transform: uppercase;
  transition: filter .15s; border: 1px solid;
}
.kw-pill:hover { filter: brightness(1.4); }
.kw-pill.melee    { background: rgba(204,32,32,.1);   color: #cc4444; border-color: rgba(204,32,32,.3); }
.kw-pill.pistol   { background: var(--faction-a-tint);       color: var(--faction-a); border-color: var(--faction-a-tint2); }
.kw-pill.assault  { background: var(--faction-a-tint);       color: var(--faction-a); border-color: var(--faction-a-tint2); }
.kw-pill.heavy    { background: rgba(85,136,204,.1);  color: #5588cc; border-color: rgba(85,136,204,.25); }
.kw-pill.hazardous{ background: rgba(255,104,32,.1);  color: #ff6820; border-color: rgba(255,104,32,.3); }
.kw-pill.rapid    { background: rgba(68,170,102,.1);  color: #44aa66; border-color: rgba(68,170,102,.25); }
.kw-pill.blast    { background: rgba(204,170,0,.1);   color: #ccaa00; border-color: rgba(204,170,0,.25); }
.kw-pill.melta    { background: rgba(255,64,16,.1);   color: #ff4010; border-color: rgba(255,64,16,.25); }
.kw-pill.other    { background: rgba(42,58,74,.2);    color: var(--text-muted); border-color: var(--text-dis); }

/* Ability pills — same style as kw-pill but amber tint */
.ability-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ability-pill {
  display: inline-block; font: 600 8px/1 'Rajdhani', sans-serif;
  letter-spacing: .5px; padding: 2px 6px;
  cursor: help; text-transform: uppercase;
  transition: filter .15s, box-shadow .2s; border: 1px solid;
  background: rgba(201,163,82,.1); color: #c9a352; border-color: rgba(201,163,82,.25);
}
.ability-pill:hover { filter: brightness(1.4); }

/* ── Triggered ability states (see game/core/triggered-abilities.js) ──
 * Activated abilities are a separate group rendered above the passive
 * abilities list, under their own "ACTIVATED ABILITIES" header. Each
 * pill has one of four state classes:
 *   available — can click now (gold glow + pulse)
 *   active    — buff is live this phase (solid gold, no pulse)
 *   neutral   — can't activate yet (dim, wrong phase or condition unmet)
 *   used      — spent, can't activate again (grey) */
.sec-label-activated {
  color: #ffd700 !important;
  letter-spacing: 1.2px;
}
.ability-pills-activated { margin-bottom: 6px; }

/* Available: glowing gold pill with a gentle pulse. Click to fire. */
.ability-pill.triggered-available {
  background: linear-gradient(180deg, rgba(255,215,0,0.32), rgba(255,180,0,0.14));
  border-color: rgba(255,215,0,0.85);
  color: #fff3a0;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(255,215,0,0.55);
  animation: ability-pill-pulse 1.6s ease-in-out infinite;
}
.ability-pill.triggered-available:hover {
  filter: brightness(1.25);
  box-shadow: 0 0 14px rgba(255,215,0,0.85);
}
@keyframes ability-pill-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255,215,0,0.45); }
  50%      { box-shadow: 0 0 14px rgba(255,215,0,0.85); }
}

/* Active: buff is live — solid gold fill, no pulse, checkmark prefix. */
.ability-pill.triggered-active {
  background: linear-gradient(180deg, rgba(255,215,0,0.45), rgba(201,163,82,0.25));
  border-color: rgba(255,215,0,0.9);
  color: #ffe566;
  cursor: default;
  box-shadow: 0 0 6px rgba(255,215,0,0.35);
}
.ability-pill.triggered-active::before {
  content: '\2713 ';
}
.ability-pill.triggered-active:hover { filter: none; }

/* Used / Spent: greyed, strikethrough, not clickable. */
.ability-pill.triggered-used {
  opacity: 0.38;
  text-decoration: line-through;
  cursor: not-allowed;
  border-color: rgba(120,120,120,0.35);
  box-shadow: none;
}
.ability-pill.triggered-used:hover { filter: none; }

/* Neutral / Inactive: registered but not firable right now (wrong phase
 * or condition not yet met). Dim gold border, no pulse. */
.ability-pill.triggered-neutral {
  background: rgba(201,163,82,.08);
  border-color: rgba(201,163,82,.3);
  color: rgba(201,163,82,.65);
  cursor: help;
}
.ability-pill.triggered-excluded {
  background: rgba(120,120,120,.06);
  border-color: rgba(120,120,120,.3);
  color: rgba(160,160,160,.5);
  cursor: not-allowed;
  opacity: 0.5;
}
/* Inline keyword spans */
.kw-inline { display: inline-block; padding: 1px 5px; font: 700 9px/1.3 'Rajdhani', sans-serif; letter-spacing: .5px; text-transform: uppercase; cursor: help; }
.kw-inline.melee    { background: rgba(204,32,32,.1);  color: #cc4444; border: 1px solid rgba(204,32,32,.2); }
.kw-inline.pistol   { background: var(--faction-a-tint);      color: var(--faction-a); border: 1px solid var(--faction-a-tint2); }
.kw-inline.assault  { background: var(--faction-a-tint);      color: var(--faction-a); border: 1px solid var(--faction-a-tint2); }
.kw-inline.hazardous{ background: rgba(255,104,32,.1); color: #ff6820; border: 1px solid rgba(255,104,32,.25); }
.kw-inline.heavy    { background: rgba(85,136,204,.1); color: #5588cc; border: 1px solid rgba(85,136,204,.2); }
.kw-inline.rapid    { background: rgba(68,170,102,.1); color: #44aa66; border: 1px solid rgba(68,170,102,.2); }
.kw-inline.other    { background: rgba(42,58,74,.15);  color: var(--text-muted); border: 1px solid var(--text-dis); }

/* Buffed keyword pill — injected by an activated ability (Ka'tah, Banner, etc.) */
.kw-pill.kw-buff {
  background: rgba(201,163,82,.18) !important;
  border-color: rgba(201,163,82,.6) !important;
  color: #ffd700 !important;
  box-shadow: 0 0 4px rgba(201,163,82,.3);
}

/* Ability section */
.card-abilities { padding: 8px 14px; background: var(--bg-surface); }

/* Minimized state — only header visible */
#unit-card.minimized .card-stats,
#unit-card.minimized .card-ranges,
#unit-card.minimized #card-wargear,
#unit-card.minimized .card-weapons,
#unit-card.minimized .card-abilities {
  display: none;
}
#unit-card.minimized {
  max-height: none;
  /* keep parent's overflow-hidden so the rounded corners still clip
     children that paint to the edge (e.g. card-weapons bg). */
}

/* Responsive */
@media (max-width: 1200px) { #unit-card { width: 300px; } }