/* ============================================================
   KINGDOM DRAW -- ANIMATIONS & TRANSITIONS
   ============================================================ */

/* ---- REVEAL ANIMATION STAGE ---- */
.name-bubble {
  position: absolute;
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 10px;
  color: #e8e8e8;
  background: rgba(22,33,62,0.9);
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  padding: 8px 12px;
  pointer-events: none;
  transition: none;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(255,255,255,0.5);
  transform-origin: center;
}

.name-bubble.trembling {
  animation: tremble 0.08s infinite alternate;
}
@keyframes tremble {
  from { transform: translate(-0.5px, -0.5px) rotate(-0.3deg); }
  to   { transform: translate(0.5px, 0.5px) rotate(0.3deg); }
}

.name-bubble.vortex-mode {
  transition: all 0.05s linear;
}

/* ---- KINGDOM REVEAL CARD ---- */
.reveal-card {
  position: absolute;
  border: 4px solid;
  border-radius: 4px;
  background: var(--surface, #16213e);
  padding: 24px;
  min-width: 280px;
  max-width: 360px;
  transform: scale(0) translateY(20px);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.175,0.885,0.32,1.275), opacity 0.4s;
  box-shadow: 0 0 30px rgba(255,255,255,0.1);
}
.reveal-card.visible {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.reveal-card.slam-in {
  animation: cardSlam 0.4s cubic-bezier(0.175,0.885,0.32,1.275) forwards;
}
@keyframes cardSlam {
  0%   { transform: scale(1.3) translateY(-20px); opacity: 0; }
  60%  { transform: scale(0.95) translateY(4px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.reveal-card-kingdom {
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 14px;
  margin-bottom: 8px;
  animation: nameImpact 0.3s ease-out;
}
@keyframes nameImpact {
  0%   { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* ---- PARTICLE BURST ---- */
.particle-burst {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  animation: burst 0.6s ease-out forwards;
}
@keyframes burst {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

/* ---- THE DRAW IS LIVE text ---- */
#phase-text {
  animation: none;
}
#phase-text.slam-in {
  animation: phaseSlamIn 0.6s cubic-bezier(0.175,0.885,0.32,1.275) forwards;
}
@keyframes phaseSlamIn {
  0%   { transform: scale(2); opacity: 0; letter-spacing: 20px; }
  50%  { transform: scale(0.95); opacity: 1; letter-spacing: 3px; }
  100% { transform: scale(1); opacity: 1; letter-spacing: 4px; }
}

/* ---- SCREEN FLASH ---- */
.screen-flash {
  position: fixed;
  inset: 0;
  background: white;
  opacity: 0;
  pointer-events: none;
  z-index: 8000;
  animation: flashOut 0.15s ease-out forwards;
}
@keyframes flashOut {
  0%   { opacity: 0.05; }
  100% { opacity: 0; }
}

/* ---- SCREEN SHAKE ---- */
body.screen-shake {
  animation: bodyShake 0.15s ease-in-out;
}
@keyframes bodyShake {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-2px) translateY(1px); }
  40%  { transform: translateX(2px) translateY(-1px); }
  60%  { transform: translateX(-1px) translateY(2px); }
  80%  { transform: translateX(1px) translateY(-1px); }
  100% { transform: translateX(0); }
}

/* ---- GRAND FINALE BANNER ---- */
.finale-banner {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: linear-gradient(135deg, rgba(22,33,62,0.95), rgba(15,52,96,0.95));
  border-bottom: 4px solid #e94560;
  padding: 24px;
  text-align: center;
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 20px;
  color: #e94560;
  animation: bannerDrop 0.6s cubic-bezier(0.175,0.885,0.32,1.275) forwards;
  transform: translateY(-100%);
  text-shadow: 0 0 30px rgba(233,69,96,0.7);
}
@keyframes bannerDrop {
  to { transform: translateY(0); }
}

/* ---- CONFETTI PIXEL ---- */
.confetti-pixel {
  position: fixed;
  pointer-events: none;
  border-radius: 2px;
  z-index: 9000;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  0%   { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ---- VORTEX SWEEP ---- */
.vortex-freeze-flash {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 8500;
  animation: vortexFlash 0.3s ease-out forwards;
}
@keyframes vortexFlash {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ---- RESULT CARD ENTRANCE ---- */
.kingdom-result-card {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out, box-shadow 0.3s;
}
.kingdom-result-card.card-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- SHIMMER EFFECT (for top board entries) ---- */
@keyframes shimmerGold {
  0%,100% { text-shadow: 0 0 8px rgba(243,156,18,0.5); }
  50%      { text-shadow: 0 0 20px rgba(243,156,18,1), 0 0 40px rgba(243,156,18,0.5); }
}
@keyframes shimmerPink {
  0%,100% { text-shadow: 0 0 8px rgba(232,160,191,0.5); }
  50%      { text-shadow: 0 0 20px rgba(232,160,191,1), 0 0 40px rgba(232,160,191,0.5); }
}
.shimmer-king { animation: shimmerGold 2s ease-in-out infinite; }
.shimmer-queen { animation: shimmerPink 2s ease-in-out infinite; }

/* ---- AMBIENT TIMER GLOW ---- */
.countdown-timer { transition: box-shadow 1s ease-in-out; }

/* ---- SCROLL ENTRANCE FOR LORE CARDS ---- */
.lore-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out, box-shadow 0.3s, border-color 0.3s;
}
.lore-card.card-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- PIXEL BLOCK WIPE (section transitions) ---- */
.pixel-wipe-block {
  position: fixed;
  background: #0a0a15;
  pointer-events: none;
  z-index: 8990;
  transition: transform 0.25s cubic-bezier(0.55, 0, 1, 0.45);
}
.pixel-wipe-block.wipe-in { transform: scaleX(1); transform-origin: left; }
.pixel-wipe-block.wipe-out { transform: scaleX(0); transform-origin: right; }

/* ---- ALLIANCE SEALED ANIMATION ---- */
.seal-pulse {
  animation: sealPulse 0.6s ease-out;
}
@keyframes sealPulse {
  0%   { box-shadow: 0 0 0 rgba(243,156,18,0.8); }
  50%  { box-shadow: 0 0 40px rgba(243,156,18,0.8); }
  100% { box-shadow: 0 0 15px rgba(243,156,18,0.3); }
}

/* ---- FLOAT ANIMATION for particle layers ---- */
@keyframes floatUp {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0.8; }
  50%  { transform: translateY(-60px) translateX(10px) scale(0.9); opacity: 0.6; }
  100% { transform: translateY(-120px) translateX(-5px) scale(0.7); opacity: 0; }
}
@keyframes driftPetal {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0.9; }
  100% { transform: translateY(120vh) translateX(60px) rotate(360deg); opacity: 0; }
}
@keyframes snowDrift {
  0%   { transform: translateY(0) translateX(0); opacity: 0.8; }
  100% { transform: translateY(120vh) translateX(30px); opacity: 0; }
}
@keyframes emberFloat {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 1; }
  100% { transform: translateY(-120vh) translateX(var(--dx, 20px)) scale(0.3); opacity: 0; }
}