/**
 * Spelling Heroes - Mortal Kombat Style Boss Battle
 * Retro pixel art fighting game aesthetic
 */

/* Import pixel font */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
  /* MK-inspired color palette */
  --mk-black: #0a0a0a;
  --mk-dark: #1a1a2e;
  --mk-purple: #4a0e4e;
  --mk-red: #c73659;
  --mk-orange: #ff6f3c;
  --mk-yellow: #ffc93c;
  --mk-green: #2ecc71;
  --mk-blue: #155263;
  --mk-gold: #f1c40f;
  --mk-white: #ecf0f1;

  /* Pixel border style */
  --pixel-border: 4px solid;
  --pixel-shadow:
    4px 4px 0 #000,
    -4px -4px 0 #000,
    4px -4px 0 #000,
    -4px 4px 0 #000;
}

/* Base MK styling */
.mk-mode {
  font-family: 'Press Start 2P', monospace;
  background: var(--mk-black);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.mk-mode * {
  font-family: 'Press Start 2P', monospace;
}

/* Scanline overlay effect */
.mk-scanlines::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.1) 0px,
    rgba(0, 0, 0, 0.1) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  z-index: 9999;
}

/* ============================================
   VS SCREEN - Boss Entrance
   ============================================ */

.vs-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, var(--mk-dark) 0%, var(--mk-purple) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: vs-flash 0.1s ease-out;
}

@keyframes vs-flash {
  0% { filter: brightness(3); }
  100% { filter: brightness(1); }
}

.vs-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  width: 100%;
  max-width: 1000px;
  padding: 20px;
}

.vs-fighter {
  display: flex;
  align-items: center;
  gap: 15px;
  animation: vs-slide-in 0.5s ease-out forwards;
}

.vs-fighter.player {
  transform: translateX(-100vw);
  flex-direction: row;
}

.vs-fighter.enemy {
  transform: translateX(100vw);
  animation-delay: 0.2s;
  flex-direction: row;
}

@keyframes vs-slide-in {
  to { transform: translateX(0); }
}

.vs-fighter-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.vs-fighter-portrait {
  width: 180px;
  height: 180px;
  background: var(--mk-dark);
  border: 5px solid var(--mk-yellow);
  box-shadow: var(--pixel-shadow);
  background-size: cover;
  background-position: center;
}

.vs-fighter.player .vs-fighter-portrait {
  border-color: var(--mk-green);
  box-shadow: 0 0 30px rgba(46, 204, 113, 0.6), var(--pixel-shadow);
}

.vs-fighter.enemy .vs-fighter-portrait {
  border-color: var(--mk-red);
  box-shadow: 0 0 30px rgba(199, 54, 89, 0.6), var(--pixel-shadow);
}

.vs-fighter-name {
  font-size: clamp(10px, 2.5vw, 16px);
  text-shadow: var(--pixel-shadow);
  text-transform: uppercase;
}

.vs-fighter-name.player {
  color: var(--mk-green);
}

.vs-fighter-name.enemy {
  color: var(--mk-red);
}

/* VS Screen Ladders */
.vs-ladder {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.vs-ladder-rung {
  width: 35px;
  height: 22px;
  background: var(--mk-dark);
  border: 2px solid var(--mk-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: var(--mk-white);
  opacity: 0.5;
}

.vs-ladder-rung.player-start {
  background: var(--mk-green);
  border-color: var(--mk-green);
  opacity: 1;
  box-shadow: 0 0 10px var(--mk-green);
}

.vs-ladder-rung.enemy-start {
  background: var(--mk-red);
  border-color: var(--mk-red);
  opacity: 1;
  box-shadow: 0 0 10px var(--mk-red);
}

.vs-text {
  font-size: clamp(36px, 10vw, 80px);
  color: var(--mk-red);
  text-shadow:
    6px 6px 0 #000,
    -6px -6px 0 #000,
    6px -6px 0 #000,
    -6px 6px 0 #000;
  animation: vs-pulse 0.5s ease-in-out infinite alternate;
  margin: 0 20px;
}

@keyframes vs-pulse {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}

.vs-subtitle {
  font-size: clamp(10px, 2.5vw, 18px);
  color: var(--mk-yellow);
  text-shadow: var(--pixel-shadow);
  letter-spacing: 4px;
  margin-top: 30px;
  animation: subtitle-pulse 1s ease-in-out infinite;
}

@keyframes subtitle-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Mobile tap prompt on VS screen */
.vs-tap-prompt {
  font-size: clamp(12px, 3vw, 16px);
  color: var(--mk-green);
  text-shadow: var(--pixel-shadow);
  letter-spacing: 3px;
  margin-top: 40px;
  animation: tap-pulse 0.8s ease-in-out infinite;
}

@keyframes tap-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.05); }
}

/* Old sprite style (deprecated but kept for compatibility) */
.vs-fighter-sprite {
  width: 150px;
  height: 150px;
  background: var(--mk-dark);
  border: var(--pixel-border) var(--mk-yellow);
  box-shadow: var(--pixel-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  margin: 0 auto 20px;
}

.vs-word-preview {
  font-size: clamp(10px, 2.5vw, 18px);
  color: var(--mk-white);
  text-shadow: var(--pixel-shadow);
  letter-spacing: 4px;
}

/* SPELL! announcement */
.spell-announce {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: clamp(48px, 12vw, 120px);
  color: var(--mk-yellow);
  text-shadow:
    8px 8px 0 var(--mk-red),
    -8px -8px 0 var(--mk-red),
    8px -8px 0 var(--mk-red),
    -8px 8px 0 var(--mk-red);
  z-index: 10001;
  animation: spell-announce 1s ease-out forwards;
}

@keyframes spell-announce {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  70% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

/* ============================================
   BATTLE ARENA
   ============================================ */

.mk-arena {
  background:
    linear-gradient(180deg, var(--mk-dark) 0%, var(--mk-purple) 50%, var(--mk-dark) 100%);
  min-height: 100vh;
  padding: 20px;
  position: relative;
}

/* Health bars */
.mk-health-bar {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 100;
  background: rgba(0, 0, 0, 0.8);
  padding: 10px 20px;
  border: var(--pixel-border) var(--mk-yellow);
}

.health-segment {
  width: 100px;
  height: 20px;
  background: var(--mk-dark);
  border: 2px solid var(--mk-white);
  position: relative;
  overflow: hidden;
}

.health-fill {
  height: 100%;
  background: linear-gradient(180deg, var(--mk-green) 0%, #27ae60 100%);
  transition: width 0.3s ease;
}

.health-fill.low {
  background: linear-gradient(180deg, var(--mk-red) 0%, #a93226 100%);
}

.health-fill.medium {
  background: linear-gradient(180deg, var(--mk-orange) 0%, #d35400 100%);
}

/* Pixel hearts */
.mk-hearts {
  display: flex;
  gap: 8px;
}

.mk-heart {
  width: 32px;
  height: 32px;
  background: var(--mk-red);
  position: relative;
  transform: rotate(-45deg);
  animation: heart-idle 1s ease-in-out infinite;
}

.mk-heart::before,
.mk-heart::after {
  content: '';
  position: absolute;
  width: 32px;
  height: 32px;
  background: var(--mk-red);
  border-radius: 50%;
}

.mk-heart::before {
  top: -16px;
  left: 0;
}

.mk-heart::after {
  top: 0;
  left: 16px;
}

.mk-heart.lost {
  background: var(--mk-dark);
  animation: heart-break 0.5s ease-out forwards;
}

.mk-heart.lost::before,
.mk-heart.lost::after {
  background: var(--mk-dark);
}

@keyframes heart-idle {
  0%, 100% { transform: rotate(-45deg) scale(1); }
  50% { transform: rotate(-45deg) scale(1.1); }
}

@keyframes heart-break {
  0% { transform: rotate(-45deg) scale(1); filter: brightness(1); }
  50% { transform: rotate(-45deg) scale(1.3); filter: brightness(2); }
  100% { transform: rotate(-45deg) scale(0.8); filter: brightness(0.5); }
}

/* Round counter */
.mk-round {
  font-size: clamp(10px, 2vw, 14px);
  color: var(--mk-yellow);
  text-shadow: var(--pixel-shadow);
  text-align: center;
  margin-bottom: 20px;
}

/* ============================================
   WORD MONSTER DISPLAY
   ============================================ */

.mk-monster-container {
  text-align: center;
  margin: 60px 0 30px;
}

.mk-monster {
  width: 200px;
  height: 200px;
  margin: 0 auto 20px;
  background: var(--mk-dark);
  border: var(--pixel-border) var(--mk-red);
  box-shadow: var(--pixel-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  position: relative;
  animation: monster-idle 2s ease-in-out infinite;
}

@keyframes monster-idle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.mk-monster.hit {
  animation: monster-hit 0.3s ease-out;
}

@keyframes monster-hit {
  0% { transform: translateX(0); filter: brightness(1); }
  25% { transform: translateX(-20px); filter: brightness(2) hue-rotate(90deg); }
  50% { transform: translateX(20px); filter: brightness(2) hue-rotate(-90deg); }
  75% { transform: translateX(-10px); filter: brightness(1.5); }
  100% { transform: translateX(0); filter: brightness(1); }
}

.mk-monster.defeated {
  animation: monster-defeat 1s ease-out forwards;
}

@keyframes monster-defeat {
  0% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.2) rotate(10deg); opacity: 1; filter: brightness(3); }
  100% { transform: scale(0) rotate(720deg); opacity: 0; }
}

.mk-word-display {
  font-size: clamp(14px, 4vw, 28px);
  color: var(--mk-yellow);
  text-shadow: var(--pixel-shadow);
  letter-spacing: 8px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.mk-word-hint {
  font-size: clamp(8px, 2vw, 12px);
  color: var(--mk-white);
  opacity: 0.8;
}

/* ============================================
   INPUT AREA
   ============================================ */

.mk-input-area {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.mk-input {
  width: 100%;
  padding: 16px;
  font-size: clamp(14px, 3vw, 20px);
  text-align: center;
  background: var(--mk-dark);
  border: var(--pixel-border) var(--mk-yellow);
  color: var(--mk-white);
  text-transform: uppercase;
  letter-spacing: 4px;
  outline: none;
}

.mk-input:focus {
  border-color: var(--mk-green);
  box-shadow: 0 0 20px var(--mk-green);
}

.mk-input.correct {
  border-color: var(--mk-green);
  animation: input-correct 0.5s ease;
}

.mk-input.wrong {
  border-color: var(--mk-red);
  animation: input-wrong 0.5s ease;
}

@keyframes input-correct {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes input-wrong {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px); }
  40% { transform: translateX(10px); }
  60% { transform: translateX(-10px); }
  80% { transform: translateX(10px); }
}

.mk-submit {
  width: 100%;
  padding: 16px;
  margin-top: 16px;
  font-size: clamp(12px, 2.5vw, 16px);
  background: linear-gradient(180deg, var(--mk-red) 0%, #a93226 100%);
  border: var(--pixel-border) var(--mk-yellow);
  color: var(--mk-yellow);
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.2s ease;
}

.mk-submit:hover {
  background: linear-gradient(180deg, var(--mk-orange) 0%, var(--mk-red) 100%);
  transform: scale(1.02);
}

.mk-submit:active {
  transform: scale(0.98);
}

/* ============================================
   FEEDBACK & EFFECTS
   ============================================ */

/* Screen shake */
.mk-shake {
  animation: screen-shake 0.5s ease-out;
}

@keyframes screen-shake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-10px, -10px); }
  20% { transform: translate(10px, 10px); }
  30% { transform: translate(-10px, 10px); }
  40% { transform: translate(10px, -10px); }
  50% { transform: translate(-5px, -5px); }
  60% { transform: translate(5px, 5px); }
  70% { transform: translate(-5px, 5px); }
  80% { transform: translate(5px, -5px); }
  90% { transform: translate(-2px, -2px); }
}

/* Screen flash */
.mk-flash-green {
  animation: flash-green 0.3s ease-out;
}

@keyframes flash-green {
  0% { filter: brightness(1); }
  50% { filter: brightness(2) hue-rotate(90deg); }
  100% { filter: brightness(1); }
}

.mk-flash-red {
  animation: flash-red 0.3s ease-out;
}

@keyframes flash-red {
  0% { filter: brightness(1); }
  50% { filter: brightness(2) hue-rotate(-30deg); }
  100% { filter: brightness(1); }
}

/* Combo text */
.mk-combo {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(24px, 6vw, 48px);
  color: var(--mk-yellow);
  text-shadow: var(--pixel-shadow);
  animation: combo-fly 1s ease-out forwards;
  z-index: 1000;
  pointer-events: none;
}

@keyframes combo-fly {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -100%) scale(1.5);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -200%) scale(1);
    opacity: 0;
  }
}

/* Result text */
.mk-result {
  font-size: clamp(16px, 4vw, 32px);
  text-align: center;
  margin: 20px 0;
  min-height: 50px;
}

.mk-result.correct {
  color: var(--mk-green);
  text-shadow: var(--pixel-shadow);
  animation: result-bounce 0.5s ease;
}

.mk-result.wrong {
  color: var(--mk-red);
  text-shadow: var(--pixel-shadow);
}

@keyframes result-bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* ============================================
   VICTORY / DEFEAT SCREENS
   ============================================ */

.mk-victory-screen,
.mk-defeat-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  text-align: center;
  padding: 20px;
}

.mk-victory-screen {
  background: linear-gradient(135deg, var(--mk-dark) 0%, #1a472a 100%);
}

.mk-defeat-screen {
  background: linear-gradient(135deg, var(--mk-dark) 0%, #4a1a1a 100%);
}

.mk-victory-text {
  font-size: clamp(32px, 10vw, 80px);
  color: var(--mk-gold);
  text-shadow:
    6px 6px 0 var(--mk-green),
    -6px -6px 0 var(--mk-green),
    6px -6px 0 var(--mk-green),
    -6px 6px 0 var(--mk-green);
  animation: victory-pulse 0.5s ease-in-out infinite alternate;
  margin-bottom: 30px;
}

.mk-defeat-text {
  font-size: clamp(32px, 10vw, 80px);
  color: var(--mk-red);
  text-shadow:
    6px 6px 0 #000,
    -6px -6px 0 #000,
    6px -6px 0 #000,
    -6px 6px 0 #000;
  animation: defeat-shake 0.5s ease-in-out infinite;
  margin-bottom: 30px;
}

@keyframes victory-pulse {
  from { transform: scale(1); filter: brightness(1); }
  to { transform: scale(1.05); filter: brightness(1.2); }
}

@keyframes defeat-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.mk-flawless {
  font-size: clamp(14px, 4vw, 24px);
  color: var(--mk-yellow);
  text-shadow: var(--pixel-shadow);
  animation: flawless-glow 1s ease-in-out infinite alternate;
}

@keyframes flawless-glow {
  from { text-shadow: var(--pixel-shadow), 0 0 10px var(--mk-yellow); }
  to { text-shadow: var(--pixel-shadow), 0 0 30px var(--mk-yellow), 0 0 60px var(--mk-gold); }
}

.mk-stats {
  font-size: clamp(10px, 2.5vw, 16px);
  color: var(--mk-white);
  margin: 20px 0;
  line-height: 2;
}

.mk-retry-btn,
.mk-continue-btn {
  padding: 16px 32px;
  font-size: clamp(12px, 2.5vw, 16px);
  margin: 10px;
  background: linear-gradient(180deg, var(--mk-purple) 0%, var(--mk-dark) 100%);
  border: var(--pixel-border) var(--mk-yellow);
  color: var(--mk-yellow);
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.2s ease;
}

.mk-retry-btn:hover,
.mk-continue-btn:hover {
  background: linear-gradient(180deg, var(--mk-red) 0%, var(--mk-purple) 100%);
  transform: scale(1.05);
}

/* ============================================
   MONSTER SPRITES (CSS Art)
   ============================================ */

/* Week 9: Phantom/Ghost monster */
.monster-phantom {
  background: transparent;
  position: relative;
}

.monster-phantom::before {
  content: '👻';
  font-size: 100px;
  animation: phantom-float 2s ease-in-out infinite;
  filter: drop-shadow(0 0 20px var(--mk-purple));
}

@keyframes phantom-float {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.9;
  }
  50% {
    transform: translateY(-20px) scale(1.1);
    opacity: 0.6;
  }
}

/* Generic monster types */
.monster-shadow::before { content: '👿'; }
.monster-beast::before { content: '🐉'; }
.monster-ant::before { content: '🐜'; }
.monster-elemental::before { content: '🔥'; }
.monster-shapeshifter::before { content: '🦎'; }
.monster-blob::before { content: '🫠'; }

/* ============================================
   LADDER DISPLAY
   ============================================ */

.mk-ladder {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 100;
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
  border: 2px solid var(--mk-yellow);
  border-radius: 4px;
}

.mk-ladder-rung {
  width: 60px;
  height: 30px;
  background: var(--mk-dark);
  border: 2px solid var(--mk-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--mk-white);
  opacity: 0.5;
  transition: all 0.3s ease;
}

.mk-ladder-rung.current {
  background: var(--mk-yellow);
  border-color: var(--mk-gold);
  color: var(--mk-black);
  opacity: 1;
  transform: scale(1.1);
  box-shadow: 0 0 20px var(--mk-yellow);
  font-weight: bold;
}

.mk-ladder-rung.completed {
  background: var(--mk-green);
  border-color: var(--mk-green);
  opacity: 0.8;
}

.mk-ladder-rung.top {
  background: var(--mk-gold);
  border-color: var(--mk-yellow);
}

.mk-ladder-rung.top.current {
  animation: rung-glow 0.5s ease-in-out infinite alternate;
}

@keyframes rung-glow {
  from { box-shadow: 0 0 20px var(--mk-yellow); }
  to { box-shadow: 0 0 40px var(--mk-gold), 0 0 60px var(--mk-yellow); }
}

/* Ladder climb animation */
.mk-ladder-rung.climbing {
  animation: rung-climb 0.5s ease-out;
}

@keyframes rung-climb {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); background: var(--mk-green); }
  100% { transform: scale(1.1); }
}

/* Ladder fall animation */
.mk-ladder-rung.falling {
  animation: rung-fall 0.5s ease-out;
}

@keyframes rung-fall {
  0% { transform: scale(1.1); }
  50% { transform: scale(0.8); background: var(--mk-red); }
  100% { transform: scale(1.1); }
}

/* ============================================
   TIMER BAR
   ============================================ */

.mk-timer-container {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 500px;
  z-index: 100;
}

.mk-timer-label {
  font-size: 10px;
  color: var(--mk-yellow);
  text-align: center;
  margin-bottom: 5px;
}

.mk-timer-bar {
  height: 20px;
  background: var(--mk-dark);
  border: 3px solid var(--mk-yellow);
  position: relative;
  overflow: hidden;
}

.mk-timer-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--mk-green) 0%, var(--mk-green) 100%);
  transition: width 0.1s linear;
  position: relative;
}

.mk-timer-fill.warning {
  background: linear-gradient(90deg, var(--mk-orange) 0%, var(--mk-yellow) 100%);
}

.mk-timer-fill.danger {
  background: linear-gradient(90deg, var(--mk-red) 0%, var(--mk-orange) 100%);
  animation: timer-pulse 0.3s ease-in-out infinite;
}

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

.mk-timer-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  color: var(--mk-white);
  text-shadow: 2px 2px 0 #000;
  z-index: 1;
}

/* Time's up flash */
.mk-timer-bar.times-up {
  animation: times-up-flash 0.5s ease-out;
}

@keyframes times-up-flash {
  0%, 100% { border-color: var(--mk-yellow); }
  50% { border-color: var(--mk-red); box-shadow: 0 0 30px var(--mk-red); }
}

/* ============================================
   LIVING PORTRAIT ANIMATIONS
   ============================================ */

/* Idle breathing animation - subtle scale pulse */
@keyframes portrait-breathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

/* Idle sway animation with breathing */
@keyframes portrait-idle {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  25% {
    transform: translateY(-2px) scale(1.01);
  }
  50% {
    transform: translateY(0) scale(1.02);
  }
  75% {
    transform: translateY(2px) scale(1.01);
  }
}

/* Player glow pulse */
@keyframes player-glow-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(46, 204, 113, 0.4),
                0 0 40px rgba(46, 204, 113, 0.2),
                inset 0 0 20px rgba(46, 204, 113, 0.1);
  }
  50% {
    box-shadow: 0 0 35px rgba(46, 204, 113, 0.6),
                0 0 60px rgba(46, 204, 113, 0.3),
                inset 0 0 30px rgba(46, 204, 113, 0.2);
  }
}

/* Enemy glow pulse */
@keyframes enemy-glow-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(199, 54, 89, 0.4),
                0 0 40px rgba(199, 54, 89, 0.2),
                inset 0 0 20px rgba(199, 54, 89, 0.1);
  }
  50% {
    box-shadow: 0 0 35px rgba(199, 54, 89, 0.6),
                0 0 60px rgba(199, 54, 89, 0.3),
                inset 0 0 30px rgba(199, 54, 89, 0.2);
  }
}

/* Battle portrait base - ensure positioning for child elements (like defeat X) */
.mk-fighter-portrait {
  position: relative;
  overflow: visible;
}

/* Battle portrait base - living effect */
.mk-fighter-portrait.living {
  animation: portrait-idle 4s ease-in-out infinite;
}

/* Player portrait - green glow */
.mk-fighter-panel.player .mk-fighter-portrait.living {
  animation: portrait-idle 4s ease-in-out infinite,
             player-glow-pulse 2.5s ease-in-out infinite;
}

/* Enemy portrait - red glow */
.mk-fighter-panel.enemy .mk-fighter-portrait.living {
  animation: portrait-idle 4s ease-in-out infinite,
             enemy-glow-pulse 2.5s ease-in-out infinite;
}

/* Pause idle animation during reactions */
.mk-fighter-portrait.portrait-shake,
.mk-fighter-portrait.portrait-damage,
.mk-fighter-portrait.portrait-hit {
  animation-name: none !important;
}

/* ============================================
   PORTRAIT SHAKE ANIMATIONS (Reactions)
   ============================================ */

.portrait-shake {
  animation: portrait-shake 0.5s ease-out !important;
}

@keyframes portrait-shake {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-8px) rotate(-2deg); }
  20% { transform: translateX(8px) rotate(2deg); }
  30% { transform: translateX(-8px) rotate(-2deg); }
  40% { transform: translateX(8px) rotate(2deg); }
  50% { transform: translateX(-4px) rotate(-1deg); }
  60% { transform: translateX(4px) rotate(1deg); }
  70% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

.portrait-hit {
  animation: portrait-hit 0.4s ease-out;
}

@keyframes portrait-hit {
  0% { transform: scale(1); filter: brightness(1); }
  25% { transform: scale(0.95); filter: brightness(2); }
  50% { transform: scale(1.05); filter: brightness(1.5); }
  100% { transform: scale(1); filter: brightness(1); }
}

.portrait-damage {
  animation: portrait-damage 0.5s ease-out;
}

@keyframes portrait-damage {
  0% { transform: scale(1); filter: brightness(1); }
  20% { transform: scale(1.1); filter: brightness(2) hue-rotate(-30deg); }
  40% { transform: scale(0.9) translateX(-5px); }
  60% { transform: scale(1.05) translateX(5px); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* ============================================
   ENEMY HEALTH BAR
   ============================================ */

.mk-enemy-health {
  width: 100%;
  max-width: 200px;
  margin-top: 15px;
}

.mk-enemy-health-label {
  font-size: 8px;
  color: var(--mk-red);
  text-align: center;
  margin-bottom: 5px;
}

.mk-enemy-health-bar {
  height: 20px;
  background: var(--mk-dark);
  border: 3px solid var(--mk-red);
  position: relative;
  overflow: hidden;
}

.mk-enemy-health-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--mk-red) 0%, #ff4444 100%);
  transition: width 0.3s ease;
  position: relative;
}

.mk-enemy-health-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 100%);
}

.mk-enemy-health-segments {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
}

.mk-health-segment-divider {
  flex: 1;
  border-right: 2px solid var(--mk-dark);
}

.mk-health-segment-divider:last-child {
  border-right: none;
}

/* Player Health Bar (matching enemy style) */
.mk-player-health {
  width: 100%;
  max-width: 200px;
  margin-top: 15px;
}

.mk-player-health-label {
  font-size: 8px;
  color: var(--mk-green);
  text-align: center;
  margin-bottom: 5px;
}

.mk-player-health-bar {
  height: 20px;
  background: var(--mk-dark);
  border: 3px solid var(--mk-green);
  position: relative;
  overflow: hidden;
}

.mk-player-health-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--mk-green) 0%, #44ff44 100%);
  transition: width 0.3s ease;
  position: relative;
}

.mk-player-health-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 100%);
}

.mk-player-health-segments {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
}

.mk-player-segment-divider {
  flex: 1;
  border-right: 2px solid var(--mk-dark);
}

.mk-player-segment-divider:last-child {
  border-right: none;
}

/* Player Hearts (legacy - keeping for backwards compatibility) */
.mk-player-hearts {
  display: flex;
  gap: 8px;
  margin-top: 15px;
  justify-content: center;
}

.mk-player-heart {
  width: 28px;
  height: 28px;
  background: var(--mk-red);
  position: relative;
  transform: rotate(-45deg);
  transition: all 0.3s ease;
}

.mk-player-heart::before,
.mk-player-heart::after {
  content: '';
  position: absolute;
  width: 28px;
  height: 28px;
  background: var(--mk-red);
  border-radius: 50%;
}

.mk-player-heart::before {
  top: -14px;
  left: 0;
}

.mk-player-heart::after {
  top: 0;
  left: 14px;
}

.mk-player-heart.lost {
  background: var(--mk-dark);
  opacity: 0.3;
}

.mk-player-heart.lost::before,
.mk-player-heart.lost::after {
  background: var(--mk-dark);
}

.mk-player-heart.breaking {
  animation: heart-break-anim 0.5s ease-out forwards;
}

@keyframes heart-break-anim {
  0% { transform: rotate(-45deg) scale(1); filter: brightness(1); }
  30% { transform: rotate(-45deg) scale(1.3); filter: brightness(2); }
  100% { transform: rotate(-45deg) scale(0.8); filter: brightness(0.3); }
}

/* Round/Fight indicator */
.mk-fight-indicator {
  position: fixed;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--mk-yellow);
  text-shadow: var(--pixel-shadow);
  z-index: 100;
  background: rgba(0,0,0,0.7);
  padding: 8px 20px;
  border: 2px solid var(--mk-yellow);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 600px) {
  .vs-container {
    flex-direction: column;
    gap: 15px;
  }

  .vs-fighter {
    gap: 10px;
  }

  .vs-fighter-portrait {
    width: 120px;
    height: 120px;
  }

  .vs-ladder-rung {
    width: 28px;
    height: 18px;
    font-size: 7px;
  }

  .vs-text {
    margin: 10px 0;
  }

  .vs-fighter-sprite {
    width: 100px;
    height: 100px;
    font-size: 48px;
  }

  .mk-monster {
    width: 150px;
    height: 150px;
    font-size: 60px;
  }

  .mk-health-bar {
    flex-direction: column;
    gap: 10px;
    padding: 8px;
  }

  .health-segment {
    width: 80px;
    height: 16px;
  }

  /* Ladder - smaller on mobile */
  .mk-ladder {
    right: 5px;
    gap: 2px;
  }

  .mk-ladder-rung {
    width: 40px;
    height: 22px;
    font-size: 8px;
  }
}

/* ============================================
   DRAGON BOSS ENTRANCE
   ============================================ */

.dragon-entrance {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a0a0a 50%, #0a0a0a 100%);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dragon-vs-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
}

.dragon-player-side {
  text-align: center;
}

.dragon-player-portrait {
  width: 200px;
  height: 200px;
  border: 4px solid var(--mk-green);
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  box-shadow: 0 0 30px rgba(46, 204, 113, 0.5);
}

.dragon-player-name {
  font-size: 14px;
  color: var(--mk-green);
  margin-top: 15px;
  text-shadow: 2px 2px 0 #000;
}

.dragon-vs-text {
  font-size: 48px;
  color: var(--mk-yellow);
  text-shadow:
    4px 4px 0 var(--mk-red),
    -2px -2px 0 #000;
  animation: vs-pulse 0.5s ease-in-out infinite alternate;
}

.dragon-boss-side {
  text-align: center;
}

.dragon-portrait-slam {
  width: 300px;
  height: 300px;
  border: 6px solid var(--mk-red);
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  box-shadow:
    0 0 50px rgba(199, 54, 89, 0.8),
    0 0 100px rgba(199, 54, 89, 0.4);
  animation: dragonSlam 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes dragonSlam {
  0% {
    transform: translateY(-150vh) scale(2) rotate(-10deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  70% {
    transform: translateY(30px) scale(1.1) rotate(5deg);
  }
  85% {
    transform: translateY(-15px) scale(1) rotate(-2deg);
  }
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

.dragon-boss-name {
  font-size: 18px;
  color: var(--mk-red);
  margin-top: 15px;
  text-shadow: 2px 2px 0 #000, 0 0 20px var(--mk-red);
  animation: dragon-name-glow 1s ease-in-out infinite alternate;
}

@keyframes dragon-name-glow {
  from { text-shadow: 2px 2px 0 #000, 0 0 10px var(--mk-red); }
  to { text-shadow: 2px 2px 0 #000, 0 0 30px var(--mk-red), 0 0 50px var(--mk-orange); }
}

.dragon-final-boss-text {
  font-size: 36px;
  color: var(--mk-orange);
  margin-top: 40px;
  text-shadow:
    4px 4px 0 var(--mk-red),
    -2px -2px 0 #000;
  animation: final-boss-pulse 0.3s ease-in-out infinite alternate;
  letter-spacing: 8px;
}

@keyframes final-boss-pulse {
  from {
    transform: scale(1);
    text-shadow: 4px 4px 0 var(--mk-red), 0 0 20px var(--mk-orange);
  }
  to {
    transform: scale(1.05);
    text-shadow: 4px 4px 0 var(--mk-red), 0 0 40px var(--mk-orange), 0 0 60px var(--mk-yellow);
  }
}

/* Dragon entrance responsive */
@media (max-width: 768px) {
  .dragon-vs-container {
    flex-direction: column;
    gap: 20px;
  }

  .dragon-player-portrait {
    width: 120px;
    height: 120px;
  }

  .dragon-portrait-slam {
    width: 180px;
    height: 180px;
  }

  .dragon-vs-text {
    font-size: 32px;
  }

  .dragon-final-boss-text {
    font-size: 24px;
    letter-spacing: 4px;
  }

  .dragon-player-name,
  .dragon-boss-name {
    font-size: 10px;
  }
}

/* ============================================
   PERFECT SKIP OVERLAY
   ============================================ */

.mk-perfect-skip {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #1a1a2e 0%, #4a1a6b 50%, #1a1a2e 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: perfect-skip-flash 0.2s ease-out;
}

@keyframes perfect-skip-flash {
  0% { filter: brightness(3); }
  100% { filter: brightness(1); }
}

.perfect-skip-text {
  font-size: 48px;
  color: var(--mk-gold);
  text-shadow:
    4px 4px 0 #000,
    0 0 30px var(--mk-gold),
    0 0 60px var(--mk-yellow);
  animation: perfect-text-pulse 0.5s ease-in-out infinite alternate;
  letter-spacing: 4px;
}

@keyframes perfect-text-pulse {
  from {
    transform: scale(1);
    filter: brightness(1);
  }
  to {
    transform: scale(1.1);
    filter: brightness(1.3);
  }
}

.perfect-skip-stars {
  font-size: 48px;
  margin: 30px 0;
  animation: star-cascade 0.8s ease-out;
  text-shadow: 0 0 20px var(--mk-yellow);
}

@keyframes star-cascade {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.3) rotate(10deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.perfect-skip-sub {
  font-size: 24px;
  color: var(--mk-red);
  text-shadow:
    2px 2px 0 #000,
    0 0 20px var(--mk-red);
  animation: dragon-awaits-flicker 0.15s infinite;
  letter-spacing: 6px;
}

@keyframes dragon-awaits-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Perfect skip responsive */
@media (max-width: 768px) {
  .perfect-skip-text {
    font-size: 28px;
    letter-spacing: 2px;
  }

  .perfect-skip-stars {
    font-size: 32px;
    margin: 20px 0;
  }

  .perfect-skip-sub {
    font-size: 16px;
    letter-spacing: 3px;
  }
}

/* ============================================
   ENHANCED BATTLE EFFECTS - Living Fights!
   ============================================ */

/* Background Particle Container */
.battle-particles {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* Floating Battle Particles */
.battle-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: particle-float 8s ease-in-out infinite;
}

.battle-particle.ember {
  background: radial-gradient(circle, var(--mk-orange) 0%, transparent 70%);
  box-shadow: 0 0 10px var(--mk-orange), 0 0 20px var(--mk-red);
  animation: ember-float 4s ease-in-out infinite;
}

.battle-particle.spark {
  background: var(--mk-yellow);
  box-shadow: 0 0 8px var(--mk-yellow), 0 0 15px var(--mk-gold);
  animation: spark-float 3s ease-in-out infinite;
}

.battle-particle.magic {
  background: radial-gradient(circle, var(--mk-purple) 0%, transparent 70%);
  box-shadow: 0 0 15px var(--mk-purple);
  animation: magic-float 6s ease-in-out infinite;
}

@keyframes particle-float {
  0%, 100% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0.3;
  }
  25% {
    transform: translateY(-30px) translateX(15px) scale(1.2);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-60px) translateX(-10px) scale(0.8);
    opacity: 0.4;
  }
  75% {
    transform: translateY(-30px) translateX(-15px) scale(1.1);
    opacity: 0.5;
  }
}

@keyframes ember-float {
  0%, 100% {
    transform: translateY(100vh) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: translateY(90vh) scale(1);
  }
  90% {
    opacity: 0.6;
    transform: translateY(10vh) scale(0.5);
  }
  100% {
    transform: translateY(0) scale(0);
    opacity: 0;
  }
}

@keyframes spark-float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(-100px) rotate(360deg);
    opacity: 0;
  }
}

@keyframes magic-float {
  0%, 100% {
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 0.2;
  }
  50% {
    transform: translateY(-50px) scale(1.5) rotate(180deg);
    opacity: 0.5;
  }
}

/* ============================================
   ATTACK EFFECTS
   ============================================ */

/* Player Attack Animation (on correct answer) */
.portrait-attack {
  animation: portrait-attack 0.6s ease-out !important;
}

@keyframes portrait-attack {
  0% {
    transform: translateX(0) scale(1);
    filter: brightness(1);
  }
  20% {
    transform: translateX(30px) scale(1.15);
    filter: brightness(1.5);
  }
  40% {
    transform: translateX(50px) scale(1.2);
    filter: brightness(2) saturate(1.5);
  }
  60% {
    transform: translateX(30px) scale(1.1);
    filter: brightness(1.3);
  }
  100% {
    transform: translateX(0) scale(1);
    filter: brightness(1);
  }
}

/* Enemy Hit Animation (more dramatic damage) */
.portrait-hit-heavy {
  animation: portrait-hit-heavy 0.6s ease-out !important;
}

@keyframes portrait-hit-heavy {
  0% {
    transform: scale(1) translateX(0);
    filter: brightness(1);
  }
  15% {
    transform: scale(1.1) translateX(-10px);
    filter: brightness(2.5);
  }
  30% {
    transform: scale(0.9) translateX(20px) rotate(5deg);
    filter: brightness(1.5) hue-rotate(-30deg);
  }
  50% {
    transform: scale(1.05) translateX(-15px) rotate(-3deg);
    filter: brightness(1.2);
  }
  70% {
    transform: scale(0.95) translateX(10px) rotate(2deg);
  }
  100% {
    transform: scale(1) translateX(0) rotate(0deg);
    filter: brightness(1);
  }
}

/* Projectile/Spell Effect */
.spell-projectile {
  position: fixed;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, var(--mk-yellow) 0%, var(--mk-orange) 50%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 500;
  box-shadow:
    0 0 30px var(--mk-yellow),
    0 0 60px var(--mk-orange),
    0 0 90px var(--mk-red);
  animation: spell-fly 0.4s ease-in forwards;
}

@keyframes spell-fly {
  0% {
    opacity: 1;
    transform: scale(0.5);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}

/* Impact Burst Effect */
.impact-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  pointer-events: none;
  z-index: 100;
  animation: impact-expand 0.5s ease-out forwards;
}

.impact-burst::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--mk-yellow) 0%, var(--mk-orange) 30%, transparent 70%);
  border-radius: 50%;
  animation: impact-flash 0.3s ease-out forwards;
}

@keyframes impact-expand {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

@keyframes impact-flash {
  0% {
    opacity: 1;
    filter: brightness(3);
  }
  100% {
    opacity: 0;
    filter: brightness(1);
  }
}

/* ============================================
   SCREEN SHAKE VARIATIONS
   ============================================ */

/* Light shake - correct answers */
.mk-shake-light {
  animation: screen-shake-light 0.3s ease-out;
}

@keyframes screen-shake-light {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3px, -3px); }
  40% { transform: translate(3px, 3px); }
  60% { transform: translate(-2px, 2px); }
  80% { transform: translate(2px, -2px); }
}

/* Heavy shake - wrong answers, boss attacks */
.mk-shake-heavy {
  animation: screen-shake-heavy 0.6s ease-out;
}

@keyframes screen-shake-heavy {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  10% { transform: translate(-15px, -10px) rotate(-1deg); }
  20% { transform: translate(15px, 10px) rotate(1deg); }
  30% { transform: translate(-12px, 8px) rotate(-0.5deg); }
  40% { transform: translate(12px, -8px) rotate(0.5deg); }
  50% { transform: translate(-8px, -5px) rotate(-0.3deg); }
  60% { transform: translate(8px, 5px) rotate(0.3deg); }
  70% { transform: translate(-5px, 3px); }
  80% { transform: translate(5px, -3px); }
  90% { transform: translate(-2px, 2px); }
}

/* Epic shake - boss entrance, final blow */
.mk-shake-epic {
  animation: screen-shake-epic 0.8s ease-out;
}

@keyframes screen-shake-epic {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  5% { transform: translate(-20px, -15px) rotate(-2deg) scale(1.02); }
  10% { transform: translate(20px, 15px) rotate(2deg) scale(0.98); }
  15% { transform: translate(-18px, 12px) rotate(-1.5deg) scale(1.01); }
  20% { transform: translate(18px, -12px) rotate(1.5deg) scale(0.99); }
  30% { transform: translate(-15px, -10px) rotate(-1deg); }
  40% { transform: translate(15px, 10px) rotate(1deg); }
  50% { transform: translate(-10px, 8px) rotate(-0.5deg); }
  60% { transform: translate(10px, -8px) rotate(0.5deg); }
  70% { transform: translate(-6px, 5px); }
  80% { transform: translate(6px, -5px); }
  90% { transform: translate(-3px, 3px); }
}

/* ============================================
   TENSION EFFECTS - Low Timer
   ============================================ */

/* Portrait pulse when timer low */
.portrait-tense {
  animation: portrait-tense 0.5s ease-in-out infinite !important;
}

@keyframes portrait-tense {
  0%, 100% {
    box-shadow: 0 0 20px rgba(199, 54, 89, 0.4);
  }
  50% {
    box-shadow: 0 0 40px rgba(199, 54, 89, 0.8), 0 0 60px rgba(255, 0, 0, 0.4);
  }
}

/* Screen edge vignette when timer critical */
.timer-critical-vignette {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 50;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(139, 0, 0, 0.4) 100%);
  animation: vignette-pulse 0.5s ease-in-out infinite alternate;
}

@keyframes vignette-pulse {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}

/* ============================================
   VICTORY/DEFEAT ENHANCED EFFECTS
   ============================================ */

/* Victory explosion particles */
.victory-burst {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: var(--mk-gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1500;
  box-shadow: 0 0 20px var(--mk-gold), 0 0 40px var(--mk-yellow);
  animation: victory-particle 1s ease-out forwards;
}

@keyframes victory-particle {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--end-x, 100px), var(--end-y, -100px)) scale(0.5);
  }
}

/* Defeat crack effect */
.defeat-crack {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1500;
  background:
    linear-gradient(45deg, transparent 48%, var(--mk-red) 49%, var(--mk-red) 51%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, var(--mk-red) 49%, var(--mk-red) 51%, transparent 52%);
  background-size: 100px 100px;
  animation: crack-appear 0.3s ease-out forwards;
  opacity: 0.3;
}

@keyframes crack-appear {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 0.3;
    transform: scale(1);
  }
}

/* ============================================
   WORD DISPLAY ENHANCEMENTS
   ============================================ */

/* Word glow on hover/focus */
.mk-word-display.active {
  animation: word-glow 1s ease-in-out infinite alternate;
}

@keyframes word-glow {
  from {
    text-shadow: 4px 4px 0 #000, 0 0 10px var(--mk-yellow);
  }
  to {
    text-shadow: 4px 4px 0 #000, 0 0 30px var(--mk-yellow), 0 0 50px var(--mk-gold);
  }
}

/* Typing feedback - letter by letter reveal effect */
.letter-reveal {
  display: inline-block;
  animation: letter-pop 0.2s ease-out;
}

@keyframes letter-pop {
  0% {
    transform: scale(0) translateY(20px);
    opacity: 0;
  }
  60% {
    transform: scale(1.3) translateY(-5px);
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/* ============================================
   COMBO STREAK ENHANCEMENTS
   ============================================ */

/* Fire trail on high streak */
.streak-fire {
  position: relative;
}

.streak-fire::after {
  content: '🔥';
  position: absolute;
  top: -10px;
  right: -20px;
  font-size: 20px;
  animation: fire-dance 0.3s ease-in-out infinite alternate;
}

@keyframes fire-dance {
  from {
    transform: translateY(0) rotate(-10deg);
  }
  to {
    transform: translateY(-5px) rotate(10deg);
  }
}

/* Ultra combo screen effect */
.ultra-combo-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 40;
  background: linear-gradient(
    45deg,
    transparent 0%,
    rgba(241, 196, 15, 0.1) 50%,
    transparent 100%
  );
  animation: combo-sweep 1s linear infinite;
}

@keyframes combo-sweep {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* ============================================
   CHARACTER ABILITY EFFECTS
   ============================================ */

/* Ability Name Announcement */
.ability-announce {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px;
  color: var(--mk-yellow);
  text-shadow:
    4px 4px 0 #000,
    -2px -2px 0 #000,
    0 0 30px var(--ability-color, var(--mk-red));
  z-index: 1500;
  pointer-events: none;
  animation: ability-announce 1.2s ease-out forwards;
  letter-spacing: 4px;
}

@keyframes ability-announce {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }
  40% {
    transform: translate(-50%, -50%) scale(1);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -80%) scale(0.8);
  }
}

/* Base Projectile */
.ability-projectile {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
}

/* WIZARD - Magic Bolt (purple energy orb) */
.ability-magic_bolt {
  width: 50px;
  height: 50px;
  background: radial-gradient(circle, #fff 0%, #9b59b6 40%, transparent 70%);
  border-radius: 50%;
  box-shadow:
    0 0 30px #9b59b6,
    0 0 60px #8e44ad,
    0 0 90px #9b59b6;
  animation: magic-bolt-spin 0.3s linear infinite;
}

@keyframes magic-bolt-spin {
  from { transform: rotate(0deg) scale(1); }
  to { transform: rotate(360deg) scale(1.1); }
}

/* KNIGHT - Sword Slash (arc slash effect) */
.ability-sword_slash {
  width: 120px;
  height: 60px;
  background: linear-gradient(90deg, transparent 0%, #c0c0c0 30%, #fff 50%, #c0c0c0 70%, transparent 100%);
  clip-path: polygon(0 50%, 30% 0, 100% 40%, 100% 60%, 30% 100%);
  box-shadow: 0 0 20px #fff;
  animation: sword-slash 0.3s ease-out forwards;
}

@keyframes sword-slash {
  0% {
    transform: rotate(-30deg) scaleX(0);
    opacity: 1;
  }
  50% {
    transform: rotate(15deg) scaleX(1.2);
  }
  100% {
    transform: rotate(30deg) scaleX(1);
    opacity: 0.8;
  }
}

/* NINJA - Shuriken (spinning star) */
.ability-shuriken {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #2c3e50 0%, #7f8c8d 50%, #2c3e50 100%);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  box-shadow: 0 0 15px #2c3e50;
  animation: shuriken-spin 0.15s linear infinite;
}

@keyframes shuriken-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* NATURE MAGE - Flower Power (big sine wave with fading trail) */
.ability-nature_vines {
  width: 150px;
  height: 150px;
  background-image: url('../assets/effects/flower_attack.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 0 25px rgba(39, 174, 96, 1));
  margin-left: -75px;
  margin-top: -75px;
  animation: flower-big-wave 0.25s ease-in-out infinite;
}

/* Fading particle trail - follows with delay */
.ability-nature_vines::before {
  content: '✿';
  position: absolute;
  top: 50%;
  right: 120%;
  font-size: 40px;
  color: rgba(46, 204, 113, 0.6);
  text-shadow: 0 0 15px rgba(39, 174, 96, 0.8);
  transform: translateY(-50%);
  animation: flower-big-wave 0.25s ease-in-out infinite 0.08s;
  opacity: 0.5;
}

/* Second fading particle - more delay, more faded */
.ability-nature_vines::after {
  content: '✿';
  position: absolute;
  top: 50%;
  right: 180%;
  font-size: 30px;
  color: rgba(46, 204, 113, 0.4);
  text-shadow: 0 0 10px rgba(39, 174, 96, 0.5);
  transform: translateY(-50%);
  animation: flower-big-wave 0.25s ease-in-out infinite 0.15s;
  opacity: 0.3;
}

@keyframes flower-big-wave {
  0% { transform: translateY(-60px); }
  50% { transform: translateY(60px); }
  100% { transform: translateY(-60px); }
}

/* FIRE WARRIOR - Flame Burst (fireball) */
.ability-fire_blast {
  width: 70px;
  height: 70px;
  background: radial-gradient(circle, #fff 0%, #f1c40f 20%, #e74c3c 50%, #c0392b 80%, transparent 100%);
  border-radius: 50%;
  box-shadow:
    0 0 40px #e74c3c,
    0 0 80px #f39c12,
    0 0 120px #e74c3c;
  animation: fire-flicker 0.1s ease-in-out infinite alternate;
}

@keyframes fire-flicker {
  from {
    transform: scale(1) rotate(-5deg);
    filter: brightness(1);
  }
  to {
    transform: scale(1.1) rotate(5deg);
    filter: brightness(1.3);
  }
}

/* GOBLIN - Pencil Throw (custom pencil image) */
.ability-pencil_throw {
  width: 200px;
  height: 200px;
  background-image: url('../assets/effects/goblin_attack.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 0 10px rgba(243, 156, 18, 0.8)) blur(1px);
  /* Offset to center the projectile on its position */
  margin-left: -100px;
  margin-top: -100px;
  /* Spin animation */
  animation: pencil-spin 0.3s linear infinite;
}

@keyframes pencil-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* GHOST - Ghostly Wail (screen-wide wave) */
.ability-ghost_scream {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(236, 240, 241, 0.3) 70%, transparent 100%);
  pointer-events: none;
  animation: ghost-wail 0.8s ease-out forwards;
}

@keyframes ghost-wail {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(2);
  }
}

/* Sound wave rings for ghost */
.ghost-ring {
  position: fixed;
  border: 4px solid rgba(236, 240, 241, 0.6);
  border-radius: 50%;
  pointer-events: none;
  animation: ghost-ring-expand 0.6s ease-out forwards;
}

@keyframes ghost-ring-expand {
  0% {
    width: 50px;
    height: 50px;
    opacity: 1;
  }
  100% {
    width: 300px;
    height: 300px;
    opacity: 0;
  }
}

/* DARK WIZARD - Shadow Bolt (dark energy) */
.ability-dark_magic {
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, #9b59b6 0%, #1a1a2e 50%, #000 100%);
  border-radius: 50%;
  box-shadow:
    0 0 30px #1a1a2e,
    0 0 60px #9b59b6,
    inset 0 0 20px #000;
  animation: dark-pulse 0.2s ease-in-out infinite alternate;
}

@keyframes dark-pulse {
  from {
    transform: scale(1);
    filter: brightness(0.8);
  }
  to {
    transform: scale(1.15);
    filter: brightness(1.2);
  }
}

/* ROBOT - Robot Charge (mechanical rush) */
.ability-robot_charge {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #7f8c8d 0%, #bdc3c7 30%, #7f8c8d 50%, #95a5a6 70%, #7f8c8d 100%);
  border: 4px solid #2c3e50;
  border-radius: 8px;
  position: relative;
  box-shadow:
    0 0 20px #7f8c8d,
    inset 0 0 10px rgba(0,0,0,0.5);
  animation: robot-shake 0.05s linear infinite;
}

.ability-robot_charge::before {
  content: '⚡';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  animation: robot-spark 0.1s ease-in-out infinite alternate;
}

@keyframes robot-shake {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

@keyframes robot-spark {
  from { opacity: 0.5; }
  to { opacity: 1; }
}

/* DRAGON - Dragon Breath (massive fire wave) */
.ability-dragon_breath {
  position: fixed;
  width: 100%;
  height: 200px;
  left: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(231, 76, 60, 0.3) 20%,
    rgba(241, 196, 15, 0.5) 40%,
    rgba(231, 76, 60, 0.7) 60%,
    rgba(192, 57, 43, 0.5) 80%,
    transparent 100%
  );
  pointer-events: none;
  animation: dragon-breath 0.8s ease-out forwards;
}

@keyframes dragon-breath {
  0% {
    transform: scaleX(0);
    transform-origin: right center;
    opacity: 1;
  }
  50% {
    transform: scaleX(1.2);
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
    opacity: 0;
  }
}

/* Dragon fire particles */
.dragon-ember {
  position: fixed;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, #f1c40f 0%, #e74c3c 100%);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 10px #e74c3c;
  animation: dragon-ember-fly 0.8s ease-out forwards;
}

@keyframes dragon-ember-fly {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(var(--ember-x, -200px)) translateY(var(--ember-y, 0)) scale(0.3);
  }
}

/* Enemy Portrait Attack Animation */
.portrait-enemy-attack {
  animation: portrait-enemy-attack 0.6s ease-out !important;
}

@keyframes portrait-enemy-attack {
  0% {
    transform: translateX(0) scale(1);
    filter: brightness(1);
  }
  20% {
    transform: translateX(-30px) scale(1.15);
    filter: brightness(1.5);
  }
  40% {
    transform: translateX(-50px) scale(1.2);
    filter: brightness(2) saturate(1.5);
  }
  60% {
    transform: translateX(-30px) scale(1.1);
    filter: brightness(1.3);
  }
  100% {
    transform: translateX(0) scale(1);
    filter: brightness(1);
  }
}

/* Player getting hit animation */
.portrait-player-hit {
  animation: portrait-player-hit 0.5s ease-out !important;
}

@keyframes portrait-player-hit {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  20% {
    transform: scale(0.9) translateX(-10px);
    filter: brightness(2) hue-rotate(-20deg);
  }
  40% {
    transform: scale(1.05) translateX(15px);
    filter: brightness(1.5) hue-rotate(-20deg);
  }
  60% {
    transform: scale(0.95) translateX(-8px);
  }
  100% {
    transform: scale(1) translateX(0);
    filter: brightness(1);
  }
}

/* ============================================
   QUICK TRANSITION ANIMATIONS
   For Round 2-5 fast fight starts
   ============================================ */

@keyframes quick-flash {
  0% { opacity: 0; }
  50% { opacity: 1; background: rgba(255, 255, 255, 0.2); }
  100% { opacity: 1; background: rgba(0, 0, 0, 0.8); }
}

@keyframes round-slam {
  0% {
    transform: scale(3) translateY(-50px);
    opacity: 0;
  }
  60% {
    transform: scale(0.9);
    opacity: 1;
  }
  80% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes fight-appear {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ============================================
   Epic Score Builder Animations
   For Champion/Victory screen score tally
   ============================================ */

@keyframes championPulse {
  0%, 100% {
    transform: scale(1);
    text-shadow: 0 0 20px var(--mk-gold), 0 0 40px var(--mk-gold);
  }
  50% {
    transform: scale(1.05);
    text-shadow: 0 0 30px var(--mk-gold), 0 0 60px var(--mk-gold), 0 0 90px var(--mk-orange);
  }
}

@keyframes bonusFlash {
  0% {
    opacity: 0;
    transform: translateX(-30px) scale(0.8);
    background: rgba(255, 215, 0, 0.5);
  }
  50% {
    opacity: 1;
    transform: translateX(5px) scale(1.05);
    background: rgba(255, 215, 0, 0.3);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    background: transparent;
  }
}

@keyframes finalScoreReveal {
  0% {
    opacity: 0;
    transform: scale(0.5);
    filter: brightness(3);
  }
  40% {
    opacity: 1;
    transform: scale(1.3);
    filter: brightness(2);
  }
  70% {
    transform: scale(0.95);
    filter: brightness(1.2);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes speedLabelPop {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-10deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.2) rotate(3deg);
  }
  75% {
    transform: scale(0.9) rotate(-2deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes scoreCountUp {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
    color: var(--mk-yellow);
  }
  100% {
    transform: scale(1);
  }
}

/* Score builder container styles */
.score-builder-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(10, 10, 10, 0.95) 0%, rgba(74, 14, 78, 0.95) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10001;
}

.score-builder-title {
  font-size: 2.5rem;
  color: var(--mk-gold);
  animation: championPulse 1.5s ease-in-out infinite;
  margin-bottom: 30px;
  text-align: center;
}

.score-builder-card {
  background: linear-gradient(180deg, rgba(26, 26, 46, 0.9) 0%, rgba(10, 10, 10, 0.95) 100%);
  border: 4px solid var(--mk-gold);
  border-radius: 8px;
  padding: 30px 40px;
  min-width: 350px;
  box-shadow: 0 0 30px rgba(241, 196, 15, 0.3), inset 0 0 20px rgba(0, 0, 0, 0.5);
}

.score-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 2px dotted rgba(255, 255, 255, 0.2);
  font-size: 0.9rem;
}

.score-row:last-child {
  border-bottom: none;
}

.score-row.final-score {
  border-top: 3px solid var(--mk-gold);
  margin-top: 15px;
  padding-top: 20px;
  font-size: 1.3rem;
}

.score-label {
  color: var(--mk-white);
}

.score-value {
  color: var(--mk-yellow);
  min-width: 80px;
  text-align: right;
}

.score-value.bonus {
  color: var(--mk-green);
}

.score-value.final {
  color: var(--mk-gold);
  font-size: 1.5rem;
}

.speed-achievement {
  text-align: center;
  margin-top: 25px;
  font-size: 1.1rem;
  color: var(--mk-orange);
  text-shadow: 0 0 10px var(--mk-orange);
}

/* Hide keyboard on non-touch devices */
body.no-touch .mk-keyboard {
  display: none !important;
}

body.no-touch .mk-center-arena {
  padding-bottom: 20px;
}

/* ============================================
   DEFEAT X-SLAM TRANSITION
   No overlay - portrait only effects
   ============================================ */

/* Red X that slams onto defeated enemy portrait */
.defeat-x-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 100;
  pointer-events: none;
  animation: x-slam 0.25s ease-out forwards;
}

/* Image inside the X mark container */
.defeat-x-mark img {
  width: 180px;
  height: auto;
  filter: drop-shadow(0 0 10px rgba(200, 0, 0, 0.8));
}

@keyframes x-slam {
  0% {
    transform: translate(-50%, -50%) scale(4) rotate(-30deg);
    opacity: 0;
  }
  60% {
    transform: translate(-50%, -50%) scale(0.85) rotate(8deg);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Portrait goes grayscale when defeated - ONLY the portrait */
.mk-fighter-portrait.portrait-defeated {
  filter: grayscale(100%) brightness(0.5) !important;
  transition: filter 0.15s ease;
}

/* Portrait drops away animation */
.mk-fighter-portrait.portrait-dropping {
  animation: portrait-drop-away 0.4s ease-in forwards !important;
}

@keyframes portrait-drop-away {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(120vh) rotate(30deg);
    opacity: 0;
  }
}

/* ============================================
   OPPONENT CARD STACK
   Shows remaining opponents as fanned cards
   ============================================ */

.opponent-card-stack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 260px;
  pointer-events: none;
  z-index: 0;
}

.opponent-card {
  position: absolute;
  width: 260px;
  height: 260px;
  background-size: cover;
  background-position: center;
  border: 4px solid #444;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}

/* Fanned card positions - cards fan to the LEFT (behind enemy portrait on right side)
   nth-child(1) = boss (back, lowest z-index)
   Last child = current opponent (front, highest z-index) */
.opponent-card:nth-child(1) { transform: translateX(-40px) rotate(-8deg); z-index: 1; }
.opponent-card:nth-child(2) { transform: translateX(-32px) rotate(-6deg); z-index: 2; }
.opponent-card:nth-child(3) { transform: translateX(-24px) rotate(-4deg); z-index: 3; }
.opponent-card:nth-child(4) { transform: translateX(-16px) rotate(-2deg); z-index: 4; }
.opponent-card:nth-child(5) { transform: translateX(-8px) rotate(0deg); z-index: 5; }
.opponent-card:nth-child(6) { transform: translateX(0px) rotate(2deg); z-index: 6; }

/* Card fly-off animation when defeated - flies off to the right */
.opponent-card.card-defeated {
  animation: card-fly-off 0.5s ease-in forwards;
}

@keyframes card-fly-off {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  100% {
    transform: translateX(400px) translateY(150px) rotate(45deg);
  }
}

/* New front card slams forward after previous card is removed */
.opponent-card.card-slam-forward {
  animation: card-slam-forward 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes card-slam-forward {
  0% {
    transform: translateY(-80px) scale(1.1);
  }
  60% {
    transform: translateY(15px) scale(1.05);
  }
  80% {
    transform: translateY(-5px) scale(1);
  }
  100% {
    transform: translateY(0) translateX(0) rotate(2deg) scale(1);
  }
}

/* Card slide forward animation */
.opponent-card.card-advance {
  animation: card-slide-forward 0.3s ease-out forwards;
}

@keyframes card-slide-forward {
  0% {
    transform: var(--start-transform);
  }
  100% {
    transform: var(--end-transform);
  }
}

/* Card hidden state (before slam animation) - starts above screen */
.opponent-card.card-hidden {
  transform: translateY(-600px) rotate(-15deg);
}

/* Card slam-in animations - fly up and slam down into position */
.opponent-card.card-swirl-in:nth-child(1) { animation: card-slam-to-pos1 0.4s cubic-bezier(0.6, 0, 0.7, 0.2) forwards; }
.opponent-card.card-swirl-in:nth-child(2) { animation: card-slam-to-pos2 0.4s cubic-bezier(0.6, 0, 0.7, 0.2) forwards; }
.opponent-card.card-swirl-in:nth-child(3) { animation: card-slam-to-pos3 0.4s cubic-bezier(0.6, 0, 0.7, 0.2) forwards; }
.opponent-card.card-swirl-in:nth-child(4) { animation: card-slam-to-pos4 0.4s cubic-bezier(0.6, 0, 0.7, 0.2) forwards; }
.opponent-card.card-swirl-in:nth-child(5) { animation: card-slam-to-pos5 0.4s cubic-bezier(0.6, 0, 0.7, 0.2) forwards; }
.opponent-card.card-swirl-in:nth-child(6) { animation: card-slam-to-pos6 0.4s cubic-bezier(0.6, 0, 0.7, 0.2) forwards; }

/* Boss (back of stack) - slams down hard */
@keyframes card-slam-to-pos1 {
  0% { transform: translateY(-600px) rotate(-15deg); }
  70% { transform: translateY(20px) translateX(-40px) rotate(-8deg); }
  85% { transform: translateY(-10px) translateX(-40px) rotate(-8deg); }
  100% { transform: translateY(0) translateX(-40px) rotate(-8deg); }
}

@keyframes card-slam-to-pos2 {
  0% { transform: translateY(-600px) rotate(-15deg); }
  70% { transform: translateY(20px) translateX(-32px) rotate(-6deg); }
  85% { transform: translateY(-10px) translateX(-32px) rotate(-6deg); }
  100% { transform: translateY(0) translateX(-32px) rotate(-6deg); }
}

@keyframes card-slam-to-pos3 {
  0% { transform: translateY(-600px) rotate(-15deg); }
  70% { transform: translateY(20px) translateX(-24px) rotate(-4deg); }
  85% { transform: translateY(-10px) translateX(-24px) rotate(-4deg); }
  100% { transform: translateY(0) translateX(-24px) rotate(-4deg); }
}

@keyframes card-slam-to-pos4 {
  0% { transform: translateY(-600px) rotate(-15deg); }
  70% { transform: translateY(20px) translateX(-16px) rotate(-2deg); }
  85% { transform: translateY(-10px) translateX(-16px) rotate(-2deg); }
  100% { transform: translateY(0) translateX(-16px) rotate(-2deg); }
}

@keyframes card-slam-to-pos5 {
  0% { transform: translateY(-600px) rotate(-15deg); }
  70% { transform: translateY(20px) translateX(-8px) rotate(0deg); }
  85% { transform: translateY(-10px) translateX(-8px) rotate(0deg); }
  100% { transform: translateY(0) translateX(-8px) rotate(0deg); }
}

/* Next opponent (front of stack) */
@keyframes card-slam-to-pos6 {
  0% { transform: translateY(-600px) rotate(-15deg); }
  70% { transform: translateY(20px) translateX(0px) rotate(2deg); }
  85% { transform: translateY(-10px) translateX(0px) rotate(2deg); }
  100% { transform: translateY(0) translateX(0px) rotate(2deg); }
}

/* Round announcement - NO background overlay */
.round-announce-quick {
  position: fixed;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1500;
  pointer-events: none;
}

.round-announce-quick span {
  font-size: clamp(24px, 8vw, 42px);
  color: var(--mk-yellow);
  font-family: 'Press Start 2P', cursive;
  text-shadow:
    4px 4px 0 #000,
    -2px -2px 0 #000,
    0 0 30px var(--mk-yellow),
    0 0 60px var(--mk-orange);
  animation: round-slam 0.5s ease-out forwards;
  display: block;
  white-space: nowrap;
}

@keyframes round-slam {
  0% {
    transform: scale(4);
    opacity: 0;
  }
  50% {
    transform: scale(0.9);
    opacity: 1;
  }
  70% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}