/* ============================================================
   STR Exit Sequences — Non-Victory Combat Resolution Animations
   Covers: medbed, gate defeat, fled
   ============================================================ */

/* ── Shared full-screen overlay ─────────────────────────────── */

.str-exit-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.90);
  z-index: 3100;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Courier New', monospace;
  color: #e0e0e0;
  overflow: hidden;
}

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

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

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

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

/* ============================================================
   MEDBED — Hospital flatline → stabilize
   ============================================================ */

/* Flatline EKG line */
.se-flatline-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.se-flatline-line {
  width: min(80vw, 400px);
  height: 4px;
  background: #ff3333;
  border-radius: 2px;
  box-shadow: 0 0 20px rgba(255, 50, 50, 0.6);
  position: relative;
  overflow: hidden;
}

.se-flatline-pulse {
  position: absolute;
  top: 0; left: -40px;
  width: 40px;
  height: 4px;
  background: linear-gradient(90deg, transparent, #ff6666, transparent);
  animation: se-pulse-scan 1.5s linear infinite;
}

@keyframes se-pulse-scan {
  0%   { left: -40px; }
  100% { left: 100%; }
}

.se-flatline-text {
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: bold;
  color: #ff4444;
  text-shadow: 0 0 20px rgba(255, 68, 68, 0.7);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  animation: se-flatline-blink 0.8s ease-in-out infinite;
}

@keyframes se-flatline-blink {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* Stabilize phase */
.se-stabilize-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  animation: se-stabilize-enter 0.5s ease-out;
}

@keyframes se-stabilize-enter {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.se-heartbeat-line {
  width: min(80vw, 400px);
  height: 4px;
  background: #33cc66;
  border-radius: 2px;
  box-shadow: 0 0 20px rgba(50, 200, 100, 0.5);
  animation: se-heartbeat-throb 0.8s ease-in-out infinite;
}

@keyframes se-heartbeat-throb {
  0%, 100% { box-shadow: 0 0 20px rgba(50, 200, 100, 0.3); }
  50%      { box-shadow: 0 0 40px rgba(50, 200, 100, 0.7); }
}

.se-stabilize-emoji {
  font-size: clamp(3rem, 10vw, 6rem);
  line-height: 1;
  animation: se-stabilize-pulse 1s ease-in-out;
}

@keyframes se-stabilize-pulse {
  0%   { transform: scale(0.5); opacity: 0; }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

.se-stabilize-text {
  font-size: clamp(1rem, 3vw, 1.5rem);
  color: #33cc66;
  text-shadow: 0 0 12px rgba(50, 200, 100, 0.5);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.se-hp-restored {
  font-size: clamp(0.8rem, 2.2vw, 1.1rem);
  color: #88cc88;
  margin-top: 8px;
  animation: se-hp-pop 0.4s ease-out 0.3s both;
}

@keyframes se-hp-pop {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ============================================================
   GATE DEFEAT — Coach disappointment → encouragement
   ============================================================ */

.se-gate-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  animation: se-gate-enter 0.4s ease-out;
}

@keyframes se-gate-enter {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.se-gate-emoji {
  font-size: clamp(3rem, 10vw, 6rem);
  line-height: 1;
}

.se-gate-shrug {
  animation: se-shrug 0.6s ease-in-out;
}

@keyframes se-shrug {
  0%   { transform: rotate(0); }
  25%  { transform: rotate(-5deg) translateY(-4px); }
  50%  { transform: rotate(5deg) translateY(-4px); }
  75%  { transform: rotate(-2deg); }
  100% { transform: rotate(0); }
}

.se-gate-text {
  font-size: clamp(1.2rem, 3.5vw, 1.8rem);
  font-weight: bold;
  color: #ffaa44;
  text-shadow: 0 0 12px rgba(255, 170, 68, 0.5);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.se-gate-subtext {
  font-size: clamp(0.8rem, 2.2vw, 1rem);
  color: #cc9944;
  letter-spacing: 0.08em;
  opacity: 0;
  animation: se-gate-subtext-in 0.4s ease-out 0.5s forwards;
}

@keyframes se-gate-subtext-in {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 0.8; }
}

/* ============================================================
   FLED — Hasty escape
   ============================================================ */

.se-fled-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.se-fled-emoji {
  font-size: clamp(3rem, 10vw, 6rem);
  line-height: 1;
  animation: se-fled-dash 0.6s ease-out;
}

@keyframes se-fled-dash {
  0%   { transform: translateX(-60px) scale(0.7); opacity: 0; }
  60%  { transform: translateX(10px) scale(1.1); opacity: 1; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}

.se-fled-text {
  font-size: clamp(1.2rem, 3.5vw, 1.8rem);
  font-weight: bold;
  color: #aaaaaa;
  text-shadow: 0 0 10px rgba(170, 170, 170, 0.4);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.se-fled-dust {
  font-size: clamp(1.5rem, 4vw, 2rem);
  opacity: 0;
  animation: se-dust-puff 0.8s ease-out 0.2s forwards;
}

@keyframes se-dust-puff {
  0%   { transform: scale(0.5); opacity: 0; }
  40%  { transform: scale(1.3); opacity: 0.7; }
  100% { transform: scale(2); opacity: 0; }
}

/* ============================================================
   Shared — final fade
   ============================================================ */

.se-final-fade {
  animation: se-final-fade 0.4s ease-out forwards;
}

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