/* arena.css — Taleweaver Encounter Arena (M4): the embedded fight window a
 * "Fight it out" button opens over the tale. Adversaries render on the LEFT,
 * the player's party on the RIGHT (Ken's layout call); the site autoplays the
 * monster side (there is no GM in a solo tale) while the player acts for their
 * own characters. Sits between .action-modal (z-index 1000) and .roll-modal
 * (1100) so the shared dice-roll modal still stacks visibly on top of a fight.
 */

.arena-overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background-color: rgba(0, 0, 0, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  animation: action-modal-fade-in 120ms ease-out;
}

.arena-card {
  width: min(920px, 100%);
  max-height: min(720px, 92vh);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: var(--space-lg);
  overflow: hidden;
}

.arena-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-sm);
}

.arena-title {
  font-family: var(--font-heading);
  color: var(--color-heading);
  margin: 0;
}

.arena-round {
  font-family: var(--font-heading-ui);
  color: var(--color-text-muted);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.arena-battlefield {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  overflow-y: auto;
  min-height: 0;
}

.arena-side__title {
  font-family: var(--font-heading-ui);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-xs);
}

.arena-side--monsters .arena-side__title { color: var(--color-damage); }
.arena-side--party .arena-side__title { color: var(--color-attack); }

.arena-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.arena-fighter {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-bg);
  transition: box-shadow 150ms ease, border-color 150ms ease;
}

.arena-fighter__art {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.arena-fighter__body {
  flex: 1 1 auto;
  min-width: 0;
}

.arena-fighter.is-active {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}

.arena-fighter.is-defeated {
  opacity: 0.45;
}

/* Plain hit/miss outcome flashes only (Ken's ask, 2026-09-06). A critical
   success/fail is deliberately NOT styled here — Ken's follow-up ask
   (2026-09-06): "I do not want unique critical success or fail animations for
   taleweaver. I want to use the same [ones already elsewhere in the app]." A
   nat20/nat1 instead fires the shared full-screen crit-overlay system
   (window.ShadowDark.queueCritOverlay/queueCritKind, see story.js's
   fireCritBeat) — the exact same beat the character sheet's own attack/cast
   rolls already use, never a bespoke Arena-only effect. A plain landed hit
   flashes the target red; nothing landing is a dim, colorless shake. */
.arena-fighter.is-hit-flash {
  animation: arena-fighter-hit 550ms ease-out;
}

@keyframes arena-fighter-hit {
  0%   { box-shadow: 0 0 0 3px var(--color-damage), 0 0 12px 2px var(--color-damage); transform: scale(1.04); }
  100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
}

.arena-fighter.is-miss-flash {
  animation: arena-fighter-miss 450ms ease-out;
}

@keyframes arena-fighter-miss {
  0%, 100% { transform: translateX(0); opacity: 1; }
  25%  { transform: translateX(-5px); opacity: 0.65; }
  50%  { transform: translateX(5px); opacity: 0.65; }
  75%  { transform: translateX(-2px); opacity: 0.8; }
}

/* The acting fighter's own ring while its attack is in flight — a solid,
   pulsing border reading as "this one is acting". The chosen VICTIM (Ken's
   ask: "add a border around the attacker AND the selected victim") gets a
   dashed outline in the SAME type color instead of a solid ring, so the two
   roles are unmistakable even before the bolt lands. Melee/ranged/spell each
   use the SAME type-color the rest of the app already uses for that category
   (--color-attack steel, --color-ranged steel-blue, --color-cast violet), so
   "what kind of attack is this" reads at a glance before the dice even land. */
.arena-fighter.is-attacking {
  animation: arena-fighter-windup 480ms ease-in-out;
}

@keyframes arena-fighter-windup {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.05); }
  60%  { transform: scale(0.99); }
  100% { transform: scale(1); }
}

.arena-fighter.is-attacking--melee   { box-shadow: 0 0 0 3px var(--color-attack), 0 0 16px 3px var(--color-attack); }
.arena-fighter.is-attacking--ranged  { box-shadow: 0 0 0 3px var(--color-ranged), 0 0 16px 3px var(--color-ranged); }
.arena-fighter.is-attacking--spell   { box-shadow: 0 0 0 3px var(--color-cast), 0 0 16px 3px var(--color-cast); }

.arena-fighter.is-targeted {
  outline-style: dashed;
  outline-width: 3px;
  outline-offset: 3px;
  transition: outline-color 120ms ease;
}

.arena-fighter.is-targeted--melee   { outline-color: var(--color-attack); }
.arena-fighter.is-targeted--ranged  { outline-color: var(--color-ranged); }
.arena-fighter.is-targeted--spell   { outline-color: var(--color-cast); }

/* The traveling "bolt" from the attacker's card to the target's — no new art
   asset, styled per attack type, bigger and brighter than a subtle tell (Ken's
   ask: "make the attack animation more dramatic"). Position AND rotation are
   driven entirely from JS (viewport-relative left/top matching
   getBoundingClientRect, `--arena-bolt-angle` set to the attacker->target
   angle) via the Web Animations API; this class only sets the shape/color/size
   — JS also animates a scale ramp (small -> full -> an "impact" overshoot at
   arrival -> fade), so the bolt visibly punches into the target rather than
   just sliding over and vanishing at a flat size the whole way. */
.arena-bolt {
  position: fixed;
  top: 0;
  left: 0;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1060; /* above the arena card (1050), same family as the roll modal (1100) */
  transform: translate(-50%, -50%);
}

.arena-bolt--melee {
  width: 2.1rem;
  height: 0.42rem;
  border-radius: 2px;
  background-color: var(--color-attack);
  box-shadow: 0 0 4px 1px var(--color-attack), 0 0 16px 5px var(--color-attack);
}

.arena-bolt--ranged {
  width: 1.7rem;
  height: 0.32rem;
  border-radius: 2px;
  background-color: var(--color-ranged);
  box-shadow: 0 0 4px 1px var(--color-ranged), 0 0 14px 4px var(--color-ranged);
}

.arena-bolt--spell {
  width: 1rem;
  height: 1rem;
  background-color: var(--color-cast);
  box-shadow: 0 0 6px 2px var(--color-cast), 0 0 22px 8px var(--color-cast);
}

.arena-fighter__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
}

.arena-fighter__name {
  font-family: var(--font-heading-ui);
  color: var(--color-text);
  font-size: 0.92rem;
}

.arena-fighter__ac {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.arena-fighter__hpbar {
  margin-top: 4px;
  height: 6px;
  border-radius: 3px;
  background-color: var(--color-danger-bg);
  overflow: hidden;
}

.arena-fighter__hpfill {
  height: 100%;
  background-color: var(--color-heal);
  transition: width 300ms ease;
}

.arena-fighter.is-defeated .arena-fighter__hpfill { background-color: var(--color-damage); }

.arena-fighter__hptext {
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.arena-turn {
  min-height: 1.4em;
  font-family: var(--font-heading-ui);
  color: var(--color-heading);
  font-size: 0.95rem;
}

.arena-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.arena-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.arena-action-hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.arena-outcome {
  font-family: var(--font-heading-ui);
  color: var(--color-heading);
  font-size: 1.05rem;
  margin: 0;
}

.arena-log {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-xs);
  max-height: 120px;
  overflow-y: auto;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.arena-log__line {
  padding: 1px 0;
}

@media (prefers-reduced-motion: reduce) {
  .arena-overlay { animation: none; }
  .arena-fighter.is-hit-flash,
  .arena-fighter.is-miss-flash { animation: none; }
  .arena-fighter.is-attacking { animation: none; }
  .arena-fighter__hpfill { transition: none; }
}

@media (max-width: 640px) {
  .arena-battlefield {
    grid-template-columns: 1fr;
  }
}