/* ══════════════════════════════════════════════════════════════
   Component — Phase States
   Copied from shared/phase-states.css (verbatim)
   Spent/moved/attacked roster rows, dice, token destroyed
══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   SPENT / MOVED / ATTACKED roster row
══════════════════════════════════════════════════════════════ */
.rail-unit.moved,
.rail-unit.attacked,
.rail-unit.fought {
  background: linear-gradient(90deg, var(--spent-tint) 0%, rgba(8,12,16,.18) 100%);
  border-left-color: var(--spent-dim);
}
.rail-unit.moved:hover,
.rail-unit.attacked:hover,
.rail-unit.fought:hover {
  background: linear-gradient(90deg, var(--spent-tint-2) 0%, rgba(8,12,16,.26) 100%);
}
.rail-unit.moved .rn,
.rail-unit.attacked .rn,
.rail-unit.fought .rn { color: #c2cedb; }
.rail-unit.moved .rc,
.rail-unit.attacked .rc,
.rail-unit.fought .rc  { color: var(--spent); }
.rail-unit.moved.active,
.rail-unit.attacked.active,
.rail-unit.fought.active {
  background: linear-gradient(90deg, rgba(138,152,171,.18) 0%, rgba(8,12,16,.26) 100%);
  border-left-color: var(--spent);
}

/* Unit card title badge */
.card-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.unit-state-badge {
  display: none;
  align-items: center;
  padding: 4px 8px 3px;
  border-radius: 999px;
  border: 1px solid var(--spent-dim);
  background: var(--spent-tint);
  color: var(--spent);
  font: 700 9px/1 'Rajdhani', sans-serif;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.unit-state-badge.visible { display: inline-flex; }

/* ══════════════════════════════════════════════════════════════
   DICE
══════════════════════════════════════════════════════════════ */
.die {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--bg-raised), var(--bg-surface));
  border: 1.5px solid #2a3a4a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 4px 6px rgba(0,0,0,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 22px/1 'Anton', sans-serif;
  color: var(--text-muted);
  position: relative;
  transition: .3s cubic-bezier(.34,1.56,.64,1);
}
.die.success {
  border-color: var(--owning-faction);
  color: var(--owning-faction);
  background: linear-gradient(135deg, #101c24, var(--bg-surface));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--owning-faction) 19%, transparent);
  transform: translateY(-2px);
}
.die.fail {
  border-color: #1c1a20;
  color: #4a3a3a;
  opacity: .4;
  box-shadow: none;
}
.die.enemy-success {
  border-color: var(--text-dis);
  color: color-mix(in srgb, var(--enemy-faction) 60%, #000);
  background: var(--bg-surface);
  opacity: .3;
  box-shadow: none;
}
.die.devastating {
  border-color: #ff3030;
  color: #ff4444;
  background: linear-gradient(135deg, #280808, #1a0404);
  box-shadow: 0 0 14px rgba(255,40,40,.5), 0 0 28px rgba(255,40,40,.2);
  transform: translateY(-3px) scale(1.1);
  position: relative;
  overflow: visible;
}
.die.devastating.flashing { animation: die-flash-devastating .8s ease forwards, devastating-pulse 1.6s ease-in-out .8s infinite; }
@keyframes die-flash-devastating {
  0%   { filter: brightness(1); box-shadow: 0 0 14px rgba(255,40,40,.5); }
  15%  { filter: brightness(2.5); box-shadow: 0 0 30px rgba(255,60,20,.8), 0 0 60px rgba(255,40,40,.3); transform: translateY(-3px) scale(1.15); }
  40%  { filter: brightness(1.4); box-shadow: 0 0 20px rgba(255,40,40,.5); transform: translateY(-3px) scale(1.1); }
  100% { filter: brightness(1.1); box-shadow: 0 0 16px rgba(255,40,40,.5); transform: translateY(-3px) scale(1.1); }
}
@keyframes devastating-pulse {
  0%, 100% { box-shadow: 0 0 14px rgba(255,40,40,.4), 0 0 28px rgba(255,40,40,.15); }
  50%      { box-shadow: 0 0 20px rgba(255,40,40,.6), 0 0 36px rgba(255,40,40,.25); }
}
/* Spark burst on devastating crit */
.die.devastating::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,60,20,.6) 0%, rgba(255,40,40,0) 70%);
  animation: devastating-sparks .7s ease-out forwards;
}
@keyframes devastating-sparks {
  0%   { opacity: 0; transform: scale(.3); }
  15%  { opacity: 1; transform: scale(1); }
  40%  { opacity: .6; transform: scale(1.4); }
  100% { opacity: 0; transform: scale(1.8); }
}
/* Individual spark particles */
.devastating-spark {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #ff6030;
  box-shadow: 0 0 4px #ff4020, 0 0 8px rgba(255,60,20,.5);
  top: 50%; left: 50%;
  pointer-events: none;
  animation: spark-fly .9s ease-out var(--delay, 0ms) forwards;
  opacity: 0;
}
@keyframes spark-fly {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  30%  { opacity: 1; transform: translate(var(--sx), var(--sy)) scale(1.2); }
  100% { opacity: 0; transform: translate(calc(var(--sx) * 1.5), calc(var(--sy) * 1.5)) scale(0); }
}

/* ── Lethal Hits crit animation (gold/amber — mirrors devastating but for hits) ── */
.die.lethal {
  border-color: #d4a020;
  color: #f0c040;
  background: linear-gradient(135deg, #281c08, #1a1204);
  box-shadow: 0 0 14px rgba(212,160,32,.5), 0 0 28px rgba(212,160,32,.2);
  transform: translateY(-3px) scale(1.1);
  position: relative;
  overflow: visible;
}
.die.lethal.flashing { animation: die-flash-lethal .8s ease forwards, lethal-pulse 1.6s ease-in-out .8s infinite; }
@keyframes die-flash-lethal {
  0%   { filter: brightness(1); box-shadow: 0 0 14px rgba(212,160,32,.5); }
  15%  { filter: brightness(2.5); box-shadow: 0 0 30px rgba(240,192,64,.8), 0 0 60px rgba(212,160,32,.3); transform: translateY(-3px) scale(1.15); }
  40%  { filter: brightness(1.4); box-shadow: 0 0 20px rgba(212,160,32,.5); transform: translateY(-3px) scale(1.1); }
  100% { filter: brightness(1.1); box-shadow: 0 0 16px rgba(212,160,32,.5); transform: translateY(-3px) scale(1.1); }
}
@keyframes lethal-pulse {
  0%, 100% { box-shadow: 0 0 14px rgba(212,160,32,.4), 0 0 28px rgba(212,160,32,.15); }
  50%      { box-shadow: 0 0 20px rgba(212,160,32,.6), 0 0 36px rgba(212,160,32,.25); }
}
.die.lethal::after {
  content: '';
  position: absolute; inset: -8px; border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(240,192,64,.6) 0%, rgba(212,160,32,0) 70%);
  animation: lethal-aura .7s ease-out forwards;
}
@keyframes lethal-aura {
  0%   { opacity: 0; transform: scale(.3); }
  15%  { opacity: 1; transform: scale(1); }
  40%  { opacity: .6; transform: scale(1.4); }
  100% { opacity: 0; transform: scale(1.8); }
}
.lethal-spark {
  position: absolute;
  width: 4px; height: 4px; border-radius: 50%;
  background: #f0c040;
  box-shadow: 0 0 4px #d4a020, 0 0 8px rgba(212,160,32,.5);
  top: 50%; left: 50%;
  pointer-events: none;
  animation: spark-fly .9s ease-out var(--delay, 0ms) forwards;
  opacity: 0;
}

/* ── Sustained Hits crit animation (blue — mirrors devastating but for hits) ── */
.die.sustained {
  border-color: #3050ff;
  color: #5070ff;
  background: linear-gradient(135deg, #080f28, #04081a);
  box-shadow: 0 0 14px rgba(48,80,255,.5), 0 0 28px rgba(48,80,255,.2);
  transform: translateY(-3px) scale(1.1);
  position: relative;
  overflow: visible;
}
.die.sustained.flashing { animation: die-flash-sustained .8s ease forwards, sustained-pulse 1.6s ease-in-out .8s infinite; }
@keyframes die-flash-sustained {
  0%   { filter: brightness(1); box-shadow: 0 0 14px rgba(48,80,255,.5); }
  15%  { filter: brightness(2.5); box-shadow: 0 0 30px rgba(80,112,255,.8), 0 0 60px rgba(48,80,255,.3); transform: translateY(-3px) scale(1.15); }
  40%  { filter: brightness(1.4); box-shadow: 0 0 20px rgba(48,80,255,.5); transform: translateY(-3px) scale(1.1); }
  100% { filter: brightness(1.1); box-shadow: 0 0 16px rgba(48,80,255,.5); transform: translateY(-3px) scale(1.1); }
}
@keyframes sustained-pulse {
  0%, 100% { box-shadow: 0 0 14px rgba(48,80,255,.4), 0 0 28px rgba(48,80,255,.15); }
  50%      { box-shadow: 0 0 20px rgba(48,80,255,.6), 0 0 36px rgba(48,80,255,.25); }
}
.die.sustained::after {
  content: '';
  position: absolute; inset: -8px; border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(80,112,255,.6) 0%, rgba(48,80,255,0) 70%);
  animation: sustained-aura .7s ease-out forwards;
}
@keyframes sustained-aura {
  0%   { opacity: 0; transform: scale(.3); }
  15%  { opacity: 1; transform: scale(1); }
  40%  { opacity: .6; transform: scale(1.4); }
  100% { opacity: 0; transform: scale(1.8); }
}
.sustained-spark {
  position: absolute;
  width: 4px; height: 4px; border-radius: 50%;
  background: #7090ff;
  box-shadow: 0 0 4px #3050ff, 0 0 8px rgba(48,80,255,.5);
  top: 50%; left: 50%;
  pointer-events: none;
  animation: spark-fly .9s ease-out var(--delay, 0ms) forwards;
  opacity: 0;
}

.die.enemy-fail {
  border-color: #e03030;
  color: #ff5050;
  background: linear-gradient(135deg, #240808, var(--bg-surface));
  box-shadow: inset 0 1px 0 rgba(255,64,64,.125);
  transform: translateY(-2px);
}

@keyframes die-roll-in {
  0%   { transform: scale(.5) rotate(-20deg); opacity: 0; }
  60%  { transform: scale(1.1) rotate(4deg);  opacity: 1; }
  100% { transform: scale(1)   rotate(0deg); }
}
@keyframes die-flash-success {
  0%   { filter: brightness(1); }
  40%  { filter: brightness(1.5); box-shadow: 0 0 8px color-mix(in srgb, var(--faction-a) 25%, transparent); }
  100% { filter: brightness(1); }
}
@keyframes die-flash-enemy-fail {
  0%   { filter: brightness(1); }
  20%  { filter: brightness(1.8); box-shadow: 0 0 8px rgba(204,32,32,.314); }
  100% { filter: brightness(1); }
}
.die.hazardous-fail {
  border-color: #e0a020;
  color: #ffc040;
  background: linear-gradient(135deg, #241c08, var(--bg-surface));
  box-shadow: inset 0 1px 0 rgba(255,192,64,.19);
  transform: translateY(-2px);
}
.die.rolling           { animation: die-roll-in .4s cubic-bezier(.34,1.56,.64,1) both; }
.die.success.flashing  { animation: die-flash-success .5s ease forwards; }
.die.enemy-fail.flashing { animation: die-flash-enemy-fail .6s ease forwards; }
.die.hazardous-fail.flashing { animation: die-flash-hazardous .6s ease forwards; }

@keyframes die-flash-hazardous {
  0%   { filter: brightness(1); }
  20%  { filter: brightness(1.8); box-shadow: 0 0 8px rgba(255,192,64,.4); }
  100% { filter: brightness(1); }
}

.result-row.hazardous-result,
.result-row.hazardous-result .result-icon,
.result-row.hazardous-result .result-num,
.result-row.hazardous-result .result-label {
  color: #ffc040;
}

/* Dice group / stage / summary layout */
.dice-group       { display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; width: 100%; }
.dice-stage       { display: flex; flex-direction: column; gap: .4rem; }
.dice-stage-label { font: 600 10px/1 'Rajdhani', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dis); }
.dice-row         { display: flex; gap: .4rem; flex-wrap: wrap; }
.dice-summary     { font: 600 12px/1 'Rajdhani', sans-serif; letter-spacing: .1em; color: var(--text-muted); margin-top: .1rem; }
.dice-summary .hi { color: var(--faction-a); }
.dice-summary .lo { color: var(--bs); }

/* Battle-shock dice summary — pass/fail outcome is semantic (not
   faction-themed). Green for PASSED (including re-roll success),
   red matching `.banner-error` for FAILED. Scoped to #bs-result-summary
   so charge / shoot summaries that share `.dice-summary` keep their
   faction-themed `.hi` glow. */
#bs-result-summary .hi { color: #4ade80; }   /* tailwind green-400 */
#bs-result-summary .lo { color: #e84444; }   /* matches .banner-error border */

/* ══════════════════════════════════════════════════════════════
   TOKEN DESTROYED
══════════════════════════════════════════════════════════════ */
@keyframes token-die {
  0%   { opacity: 1; transform: scale(1);   filter: brightness(1); }
  25%  { opacity: 1; transform: scale(1.1); filter: brightness(2) saturate(0); }
  60%  { opacity: .4; transform: scale(.7); }
  100% { opacity: 0; transform: scale(.3); }
}
.anim-die { animation: token-die .7s ease-out forwards; }

/* ══════════════════════════════════════════════════════════════
   HAZARDOUS DICE + RESULT STYLING
══════════════════════════════════════════════════════════════ */
.die.hazardous-fail {
  border-color: #e0a020;
  color: #ffc040;
  background: linear-gradient(135deg, #241c08, var(--bg-surface));
  box-shadow: inset 0 1px 0 rgba(255,192,64,.19);
  transform: translateY(-2px);
}
.die.hazardous-fail.flashing { animation: die-flash-hazardous .6s ease forwards; }
@keyframes die-flash-hazardous {
  0%   { filter: brightness(1); }
  20%  { filter: brightness(1.8); box-shadow: 0 0 8px rgba(255,192,64,.4); }
  100% { filter: brightness(1); }
}
.result-row.hazardous-result,
.result-row.hazardous-result .result-icon,
.result-row.hazardous-result .result-num,
.result-row.hazardous-result .result-label {
  color: #ffc040;
}

/* ══════════════════════════════════════════════════════════════
   DAMAGED PROFILE — board model indicator
══════════════════════════════════════════════════════════════ */
.model-base.model-damaged > circle,
.model-base.model-damaged > rect {
  stroke: #e06020 !important;
  stroke-width: 2.5 !important;
  stroke-dasharray: 4 3;
  animation: damaged-pulse 2s ease-in-out infinite;
}
@keyframes damaged-pulse {
  0%, 100% { stroke-opacity: 0.6; }
  50% { stroke-opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════
   BATTLE-SHOCKED — board model indicator (desaturated + lightning stroke)
══════════════════════════════════════════════════════════════ */
.model-base.model-battleshocked > circle,
.model-base.model-battleshocked > rect {
  stroke: #8844cc !important;
  stroke-width: 2.5 !important;
  stroke-dasharray: 2 4;
  animation: battleshock-pulse 1.5s ease-in-out infinite;
}
.model-base.model-battleshocked {
  opacity: 0.65;
}
@keyframes battleshock-pulse {
  0%, 100% { stroke-opacity: 0.5; }
  50% { stroke-opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════
   DEADLY DEMISE result styling
══════════════════════════════════════════════════════════════ */
.result-row.deadly-demise-result,
.result-row.deadly-demise-result .result-icon,
.result-row.deadly-demise-result .result-num,
.result-row.deadly-demise-result .result-label {
  color: #ff6030;
}

/* Deadly Demise explosion — pulsating rings expanding from center */
@keyframes dd-ring-expand {
  0%   { r: 1;  opacity: 0.9; stroke-width: 4; }
  40%  { opacity: 0.7; }
  100% { r: 72; opacity: 0;   stroke-width: 1; }
}