/* ============================================================
   STR Victory Sequence — 5-Phase Animated Combat Resolution
   ============================================================ */

/* ── Full-screen overlay ──────────────────────────────────── */

.str-victory-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 3100; /* Above STR window (2000) and countdown (3000) */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Courier New', monospace;
  color: #e0e0e0;
  overflow: hidden;
}

/* ── Shared phase container ───────────────────────────────── */

.sv-phase {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.sv-fade-out {
  animation: sv-fadeout 0.3s ease-out forwards;
}

@keyframes sv-fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ============================================================
   PHASE 1 — Enemy Death
   ============================================================ */

.sv-enemy-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 30px 50px;
  border: 3px solid rgba(255, 50, 50, 0.6);
  border-radius: 16px;
  background: rgba(40, 10, 10, 0.7);
  box-shadow: 0 0 40px rgba(255, 50, 50, 0.3);
  transition: filter 0.6s ease, opacity 0.4s ease;
}

.sv-enemy-emoji {
  font-size: clamp(4rem, 12vw, 8rem);
  line-height: 1;
  filter: drop-shadow(0 0 20px rgba(255, 50, 50, 0.5));
}

.sv-enemy-eyes {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: bold;
  color: #ff4444;
  text-shadow: 0 0 10px rgba(255, 68, 68, 0.8);
  letter-spacing: 0.05em;
}

/* Hit shake */
.sv-hit-shake {
  animation: sv-shake 0.15s ease-in-out 6;
}

@keyframes sv-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px) rotate(-1deg); }
  75%      { transform: translateX(6px)  rotate(1deg); }
}

/* Desaturation (death draining color) */
.sv-desaturate {
  filter: grayscale(0.8) brightness(0.6);
}

/* Wipe / dissolve out */
.sv-wipe-out {
  animation: sv-wipe 0.5s ease-in forwards;
}

@keyframes sv-wipe {
  0%   { transform: scale(1);   opacity: 1; clip-path: inset(0 0 0 0); }
  40%  { transform: scale(1.05); opacity: 0.7; clip-path: inset(5% 5% 5% 5%); }
  100% { transform: scale(0.6);  opacity: 0; clip-path: inset(30% 30% 30% 30%); }
}

/* ============================================================
   PHASE 2 — Player Reaction
   ============================================================ */

.sv-player-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  animation: sv-player-enter 0.4s ease-out;
}

@keyframes sv-player-enter {
  from { transform: scale(0.7) translateY(30px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);    opacity: 1; }
}

.sv-player-face {
  font-size: clamp(2.2rem, 7vw, 4rem);
  color: #ffffff;
  text-shadow:
    0 0 20px rgba(255, 255, 255, 0.4),
    0 0 60px rgba(255, 200, 50, 0.2);
  transition: transform 0.15s ease;
  white-space: nowrap;
}

.sv-face-bounce {
  animation: sv-bounce 0.2s ease-out;
}

@keyframes sv-bounce {
  0%   { transform: scale(1.3); }
  60%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

.sv-condition-label {
  font-size: clamp(0.9rem, 2.5vw, 1.3rem);
  letter-spacing: 0.15em;
  color: #ffaa00;
  text-shadow: 0 0 12px rgba(255, 170, 0, 0.5);
  text-transform: uppercase;
  animation: sv-label-pulse 1.5s ease-in-out infinite;
}

@keyframes sv-label-pulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

/* ============================================================
   PHASE 3 — Arcade Debrief Reel
   ============================================================ */

.sv-reel-box {
  width: min(90vw, 480px);
  height: min(55vh, 320px);
  overflow: hidden;
  border: 2px solid rgba(255, 170, 0, 0.5);
  border-radius: 10px;
  background: rgba(10, 10, 10, 0.9);
  box-shadow:
    0 0 20px rgba(255, 170, 0, 0.2),
    inset 0 0 40px rgba(0, 0, 0, 0.5);
  padding: 12px 16px;
  position: relative;
}

/* Scanline overlay for arcade feel */
.sv-reel-box::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 4px
  );
  pointer-events: none;
}

.sv-reel-track {
  display: flex;
  flex-direction: column;
  gap: 4px;
  will-change: transform;
}

.sv-reel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  font-size: clamp(0.75rem, 2vw, 0.95rem);
  color: #cccccc;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255, 170, 0, 0.1);
  min-height: 28px;
}

.sv-reel-icon {
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

.sv-reel-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sv-reel-value {
  flex-shrink: 0;
  color: #ffaa00;
  font-weight: bold;
}

/* Final tally banner */
.sv-reel-tally {
  margin-top: 16px;
  padding: 12px 20px;
  background: rgba(255, 170, 0, 0.1);
  border: 2px solid rgba(255, 170, 0, 0.4);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: clamp(0.8rem, 2.2vw, 1rem);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.sv-reel-tally.sv-tally-appear {
  opacity: 1;
  transform: translateY(0);
}

.sv-tally-item {
  white-space: nowrap;
}

.sv-tally-item.sv-positive {
  color: #4caf50;
}

.sv-tally-item.sv-negative {
  color: #ff5252;
}

.sv-tally-divider {
  color: rgba(255, 170, 0, 0.3);
  margin: 0 4px;
}

/* ============================================================
   PHASE 4 — Loot & Card Rewards
   ============================================================ */

.sv-loot-label {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-weight: bold;
  color: #ffaa00;
  text-shadow: 0 0 30px rgba(255, 170, 0, 0.6);
  letter-spacing: 0.1em;
  margin-bottom: 20px;
  animation: sv-loot-label-enter 0.5s ease-out;
}

@keyframes sv-loot-label-enter {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.sv-loot-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: min(90vw, 500px);
}

.sv-loot-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border: 2px solid rgba(255, 200, 50, 0.4);
  border-radius: 10px;
  background: rgba(255, 200, 50, 0.06);
  box-shadow: 0 0 16px rgba(255, 200, 50, 0.15);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.5s ease;
}

.sv-loot-hidden {
  opacity: 0;
  transform: scale(0.3);
}

.sv-loot-pop {
  animation: sv-loot-pop 0.35s ease-out;
}

@keyframes sv-loot-pop {
  0%   { transform: scale(0.3); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}

.sv-loot-emoji {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(255, 200, 50, 0.5));
}

.sv-loot-text {
  font-size: clamp(0.7rem, 1.8vw, 0.9rem);
  color: #e0d8c0;
  text-align: center;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Card-type loot gets special glow */
.sv-loot-item[data-type="card"],
.sv-loot-item[data-type="charm"],
.sv-loot-item[data-type="stolen"] {
  border-color: rgba(100, 200, 255, 0.4);
  box-shadow: 0 0 16px rgba(100, 200, 255, 0.2);
}

.sv-loot-item[data-type="stolen"] {
  border-color: rgba(255, 100, 100, 0.4);
  box-shadow: 0 0 16px rgba(255, 100, 100, 0.2);
}

/* ============================================================
   PHASE 5 — Gentle Window Close
   ============================================================ */

.sv-vignette-collapse {
  animation: sv-vignette 0.5s ease-in forwards;
}

@keyframes sv-vignette {
  from {
    box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
  }
  to {
    box-shadow: inset 0 0 200px 80px rgba(0, 0, 0, 0.95);
  }
}

.sv-final-fade {
  animation: sv-final-fade 0.5s ease-out forwards;
}

@keyframes sv-final-fade {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ============================================================
   Post-combat scatter nodes (currency/ammo bouncing on map)
   ============================================================ */

.sv-scatter-node {
  position: absolute;
  font-size: clamp(1rem, 3vw, 1.5rem);
  pointer-events: auto;
  cursor: pointer;
  z-index: 500;
  animation: sv-scatter-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: transform 0.2s ease, opacity 0.3s ease;
  filter: drop-shadow(0 0 6px rgba(255, 200, 50, 0.6));
}

.sv-scatter-node:hover {
  transform: scale(1.3);
}

.sv-scatter-node.sv-scatter-collected {
  transform: scale(0) !important;
  opacity: 0 !important;
}

@keyframes sv-scatter-bounce {
  0%   { transform: scale(0) translateY(0); opacity: 0; }
  40%  { transform: scale(1.3) translateY(-30px); opacity: 1; }
  70%  { transform: scale(0.9) translateY(5px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* Idle bob for uncollected scatter nodes */
.sv-scatter-node.sv-scatter-idle {
  animation: sv-scatter-bob 2s ease-in-out infinite;
}

@keyframes sv-scatter-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}