/* MagicAIl Table — styles: the stage: spells and played cards big in the middle, arrows.
   The styles are split into files in their old order (build 71, before: one style.css); index.html loads them in
   this order, so later rules still win over earlier ones. */

/* ---------- The stage: the stack big in the middle ---------- */

.stage {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}

.stage-dim {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 5, 0.62);
  animation: fade-in 0.2s ease-out;
}

.stage[data-mode="flash"] .stage-dim { background: rgba(4, 7, 5, 0.35); }
/* Spells on the stack: a click on the dimmed background hides the stage. */
.stage[data-mode="stack"] .stage-dim { pointer-events: auto; cursor: pointer; }
/* Already resolved, only staying a moment: no dimming. */
.stage[data-mode="done"] .stage-dim { display: none; }

/* Stage hidden, but spells are still on the stack: the combat area pulses red (the targeted cards pulse blue anyway). */
.combat-arena.stack-waiting {
  cursor: pointer;
  animation: stack-wait 1.6s ease-in-out infinite;
}

@keyframes stack-wait {
  0%, 100% { box-shadow: 0 0 0 1px rgba(224, 121, 95, 0.35), 0 0 10px rgba(224, 121, 95, 0.15); }
  50% { box-shadow: 0 0 0 3px rgba(224, 121, 95, 0.95), 0 0 32px rgba(224, 121, 95, 0.6); }
}

/* Targeted cards: a click brings the hidden stage back. */
body:not(.stage-on) .slot.targeted { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .combat-arena.stack-waiting { animation: none; box-shadow: 0 0 0 3px rgba(224, 121, 95, 0.8); }
}


.stage-arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 2;
}

.stage-arrow {
  fill: none;
  stroke: #5fb3ff;
  stroke-width: 3;
  stroke-dasharray: 9 6;
  opacity: 0.55;
  filter: drop-shadow(0 0 4px rgba(95, 179, 255, 0.8));
  animation: arrow-flow 0.8s linear infinite;
}

.stage-arrow.is-top { opacity: 1; stroke-width: 4; }
.stage-arrow.is-done { opacity: 0.3; animation: none; }

@keyframes arrow-flow { to { stroke-dashoffset: -15; } }

.stage-cards {
  position: fixed;
  /* Upper third of the window, so the combat area and the targets below stay free. */
  top: 34%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: flex-start;
  gap: 22px;
  z-index: 1;
  /* Several spells side by side: smaller, so all of them fit (--n = number of spells, set by js/stage.js). */
  --card-w: clamp(110px, min(15vw, calc(76vw / var(--n, 1) - 22px)), 230px);
}

/* Build 98: at a table for two in combat the stage stands above or below the combat area; when the room there is
   smaller, js/stage.js sets --fit-w and the cards get smaller (at least 110 px). */
.stage-cards[style*="--fit-w"] { --card-w: min(clamp(110px, min(15vw, calc(76vw / var(--n, 1) - 22px)), 230px), var(--fit-w)); }

.stage-card {
  margin: 0;
  pointer-events: auto;
  cursor: zoom-in;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: stage-in 0.3s ease-out;
  filter: brightness(0.75);
  transform: scale(0.9);
}

.stage-card.is-top { filter: none; transform: none; z-index: 1; }

.stage-card .stage-face { box-shadow: 0 0 0 2px #5fb3ff, 0 10px 40px rgba(0, 0, 0, 0.8); }
.flash-card .stage-face { box-shadow: 0 0 0 2px var(--gold), 0 10px 40px rgba(0, 0, 0, 0.8); }
.flash-card { animation: stage-in 0.3s ease-out, flash-out 0.4s ease-in 2s forwards; }

.stage-card figcaption {
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: 10px;
  background: rgba(13, 19, 16, 0.92);
  border: 1px solid var(--border);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-width: calc(var(--card-w) * 1.15);
}

.stage-card:not(.is-top) figcaption { opacity: 0.85; }

/* Already resolved (or countered): stays with the others, a bit faded. */
.stage-card.is-done { filter: brightness(0.6) saturate(0.7); }
.stage-card.is-done .stage-face { box-shadow: 0 0 0 2px var(--border), 0 10px 40px rgba(0, 0, 0, 0.8); }
.stage-card.is-done .stage-who { color: #9fd49a; }
/* Cast in response to the spell left of it: it sits higher, "on top" of the stack. */
.stage-card.is-response { margin-top: -28px; }
/* A spell that another spell targets (e.g. one being countered). */
.stage-card.is-targeted .stage-face { box-shadow: 0 0 0 3px #5fb3ff, 0 0 28px rgba(95, 179, 255, 0.85), 0 10px 40px rgba(0, 0, 0, 0.8); }
.stage-arrow.spell-arrow { opacity: 0.9; }
.stage-response { font-size: 12px; color: #8ccaff; }
.stage-response b { color: #cfe8ff; }

.stage-who { font-size: 12px; color: var(--muted); }
.stage-name { font-size: 16px; font-weight: 600; }
.stage-cost { font-size: 13px; white-space: nowrap; }
.stage-target { font-size: 14px; color: #8ccaff; }
.stage-target b { color: #cfe8ff; }

/* "Hide" sits at the bottom in the middle, blue like the stage — the same spot as the "On the stack … · show" chip. */
.stage-chip {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 41;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid #5fb3ff;
  background: #10212f;
  color: #cfe8ff;
  font: 600 14px var(--font-body);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

/* While a spell is on the stack, its targets are lifted above the dimmed table. */
body.stage-on .slot.targeted,
body.stage-on .stack.targeted,
body.stage-on .life.targeted {
  position: relative;
  z-index: 45;
}

body.stage-on .life.targeted { background: var(--surface); }

@keyframes stage-in {
  from { opacity: 0; transform: translateY(16px) scale(0.92); }
}

@keyframes flash-out {
  to { opacity: 0; transform: scale(0.96); }
}

/* Build 102: the X a spell was cast with, next to its cost. */
.stage-x { margin-left: 6px; padding: 0 6px; border-radius: 8px; background: var(--gold); color: #1a1408; font-weight: 700; font-size: 12px; }