/* ============================================================
   LOSTZONE Manual Tester - Animation & Effect Styles
   Animation & Effects: Dice, Popups, EN/SV, Slash
   ============================================================ */

/* ============================================================
   Available Card Zoom Animation
   ============================================================ */
.card-available-zoom {
  transition: transform 0.3s ease-in-out;
  will-change: transform;
}

.card-available-zoom:hover {
  transform: scale(1.5);
  z-index: 1000;
}

/* \u884c\u52d5\u9078\u629e\u30ab\u30fc\u30c9\u306e\u30db\u30d0\u30fc\u6642\u306f\u4e0a\u306b\u79fb\u52d5\u3057\u306a\u304c\u30891.5\u500d\u306b\u62e1\u5927 */
.action-card.card-available-zoom:hover {
  transform: translateY(-20px) scale(1.5);
  z-index: 1000;
}

/* \u30a8\u30af\u30b9\u30c8\u30e9\u9078\u629e\u753b\u9762\u306e\u30ab\u30fc\u30c9\u306f\u305d\u306e\u5834\u3067\u62e1\u5927 */
.player-extra-card-simple.card-available-zoom:hover {
  transform: scale(1.5);
  z-index: 1000;
}

/* ============================================================
   Chapter Clear Popup
   ============================================================ */
.chapter-clear-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  pointer-events: none;
  text-align: center;
  animation: clearPopup 2.5s ease-out forwards;
  will-change: transform, opacity;
}

.clear-text {
  font-size: 32px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 4px;
  margin-bottom: 16px;
  text-shadow: 
    0 0 20px rgba(74, 168, 255, 0.8),
    0 0 40px rgba(74, 168, 255, 0.5);
  animation: clearTextPulse 2.5s ease-out;
}

.clear-main {
  font-size: 96px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 8px;
  text-shadow: 
    0 0 30px rgba(255, 255, 255, 1),
    0 0 60px rgba(74, 168, 255, 0.8),
    0 0 90px rgba(139, 255, 155, 0.6),
    0 8px 32px rgba(0, 0, 0, 0.8);
  animation: clearMainPulse 2.5s ease-out;
  margin-bottom: 24px;
}

.clear-stars {
  font-size: 48px;
  animation: clearStarsPulse 2.5s ease-out;
}

@keyframes clearPopup {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3);
  }
  25% {
    transform: translate(-50%, -50%) scale(0.95);
  }
  35% {
    transform: translate(-50%, -50%) scale(1.05);
  }
  45% {
    transform: translate(-50%, -50%) scale(1);
  }
  85% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -70%) scale(0.8);
  }
}

@keyframes clearTextPulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

@keyframes clearMainPulse {
  0%, 100% {
    text-shadow: 
      0 0 30px rgba(255, 255, 255, 1),
      0 0 60px rgba(74, 168, 255, 0.8),
      0 0 90px rgba(139, 255, 155, 0.6),
      0 8px 32px rgba(0, 0, 0, 0.8);
  }
  50% {
    text-shadow: 
      0 0 40px rgba(255, 255, 255, 1),
      0 0 80px rgba(74, 168, 255, 1),
      0 0 120px rgba(139, 255, 155, 0.8),
      0 8px 32px rgba(0, 0, 0, 0.8);
  }
}

@keyframes clearStarsPulse {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  30% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    transform: translateY(0) scale(1.2);
  }
  70% {
    transform: scale(1);
  }
  100% {
    opacity: 1;
  }
}

/* ============================================================
   Bug Points Popup
   ============================================================ */
.bug-points-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 64px;
  font-weight: 900;
  color: var(--ok);
  text-shadow: 
    0 0 20px rgba(139, 255, 155, 0.8),
    0 0 40px rgba(139, 255, 155, 0.5),
    0 4px 8px rgba(0, 0, 0, 0.5);
  z-index: 9999;
  pointer-events: none;
  animation: pointsPopup 1.5s ease-out forwards;
  will-change: transform, opacity;
}

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

/* ============================================================
   EN/SV Gain/Loss Effects
   ============================================================ */

/* EN Gain Effect */
.en-gain-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 64px;
  font-weight: 900;
  color: #4aa8ff;
  text-shadow: 
    0 0 30px rgba(74, 168, 255, 0.9),
    0 0 60px rgba(74, 168, 255, 0.6),
    0 4px 12px rgba(0, 0, 0, 0.6);
  z-index: 10000;
  pointer-events: none;
  animation: enGainFloat 1.5s ease-out forwards;
  letter-spacing: 4px;
  will-change: transform, opacity;
}

@keyframes enGainFloat {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.4);
  }
  50% {
    transform: translate(-50%, -65%) scale(1.2);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -85%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -110%) scale(0.7);
  }
}

/* EN Loss Effect */
.en-loss-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 64px;
  font-weight: 900;
  color: #ff5c7c;
  text-shadow: 
    0 0 30px rgba(255, 92, 124, 0.9),
    0 0 60px rgba(255, 92, 124, 0.6),
    0 4px 12px rgba(0, 0, 0, 0.6);
  z-index: 10000;
  pointer-events: none;
  animation: enLossShake 1.8s ease-out forwards;
  letter-spacing: 4px;
  will-change: transform, opacity;
}

@keyframes enLossShake {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.5);
  }
  15% { transform: translate(-42%, -50%) scale(1.3); }
  20% { transform: translate(-58%, -50%) scale(1.3); }
  25% { transform: translate(-45%, -50%) scale(1.3); }
  30% { transform: translate(-55%, -50%) scale(1.3); }
  35% { transform: translate(-48%, -50%) scale(1.3); }
  40% { transform: translate(-52%, -50%) scale(1.3); }
  50% { transform: translate(-50%, -50%) scale(1.2); }
  80% {
    opacity: 1;
    transform: translate(-50%, -70%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -95%) scale(0.6);
  }
}

/* SV Gain Effect */
.sv-gain-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 64px;
  font-weight: 900;
  color: #8bff9b;
  text-shadow: 
    0 0 30px rgba(139, 255, 155, 0.9),
    0 0 60px rgba(139, 255, 155, 0.6),
    0 4px 12px rgba(0, 0, 0, 0.6);
  z-index: 10000;
  pointer-events: none;
  animation: svGainPulse 1.5s ease-out forwards;
  letter-spacing: 4px;
  will-change: transform, opacity;
}

@keyframes svGainPulse {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
  12% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.5);
  }
  24% {
    transform: translate(-50%, -50%) scale(1.2);
  }
  36% {
    transform: translate(-50%, -50%) scale(1.4);
  }
  48% {
    transform: translate(-50%, -50%) scale(1.25);
  }
  60% {
    transform: translate(-50%, -50%) scale(1.3);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -65%) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -90%) scale(0.7);
  }
}


/* ============================================================
   \u30e2\u30d0\u30a4\u30eb\u6700\u9069\u5316 - iPad Pro\u5c02\u7528 (1024px\uff5e1366px)
   ============================================================ */
@media (min-width: 1024px) and (max-width: 1366px) {
  /* \u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u3068\u540c\u3058\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u7dad\u6301\u3001\u30b5\u30a4\u30ba\u306e\u307f\u8abf\u6574 */
  
  /* \u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u306e\u30b5\u30a4\u30ba\u8abf\u6574 */
  .chapter-clear-popup .clear-main {
    font-size: 80px;
  }

  .chapter-clear-popup .clear-text {
    font-size: 28px;
  }

  .chapter-clear-popup .clear-stars {
    font-size: 40px;
  }

  .bug-points-popup,
  .en-gain-popup,
  .en-loss-popup,
  .sv-gain-popup {
    font-size: 56px;
  }
}


/* ============================================================
   \u30e2\u30d0\u30a4\u30eb\u6700\u9069\u5316 - \u30bf\u30d6\u30ec\u30c3\u30c8\u6a2a\u753b\u9762 (1024px\u4ee5\u4e0b)
   ============================================================ */
@media (max-width: 1024px) {
  /* \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u901f\u5ea6\u3092\u5c11\u3057\u9ad8\u901f\u5316 */
  .card-available-zoom {
    transition: transform 0.25s ease-in-out;
  }

  /* \u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u306e\u30b5\u30a4\u30ba\u8abf\u6574 */
  .chapter-clear-popup .clear-main {
    font-size: 80px;
  }

  .chapter-clear-popup .clear-text {
    font-size: 28px;
  }

  .chapter-clear-popup .clear-stars {
    font-size: 40px;
  }

  .bug-points-popup,
  .en-gain-popup,
  .en-loss-popup,
  .sv-gain-popup {
    font-size: 56px;
  }
}

/* ============================================================
   \u30e2\u30d0\u30a4\u30eb\u6700\u9069\u5316 - \u30b9\u30de\u30db\u6a2a\u30fb\u30bf\u30d6\u30ec\u30c3\u30c8\u7e26 (768px\u4ee5\u4e0b)
   ============================================================ */
@media (max-width: 768px) {
  /* \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u901f\u5ea6\u3092\u9ad8\u901f\u5316 */
  .card-available-zoom {
    transition: transform 0.2s ease-in-out;
  }

  /* \u30c1\u30e3\u30d7\u30bf\u30fc\u30af\u30ea\u30a2\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u77ed\u7e2e */
  .chapter-clear-popup {
    animation: clearPopup 2s ease-out forwards;
  }

  .clear-text {
    font-size: 24px;
    animation: clearTextPulse 2s ease-out;
  }

  .clear-main {
    font-size: 64px;
    animation: clearMainPulse 2s ease-out;
  }

  .clear-stars {
    font-size: 32px;
    animation: clearStarsPulse 2s ease-out;
  }

  /* \u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u77ed\u7e2e */
  .bug-points-popup {
    font-size: 48px;
    animation: pointsPopup 1.2s ease-out forwards;
  }

  .en-gain-popup {
    font-size: 48px;
    animation: enGainFloat 1.2s ease-out forwards;
  }

  .en-loss-popup {
    font-size: 48px;
    animation: enLossShake 1.4s ease-out forwards;
  }

  .sv-gain-popup {
    font-size: 48px;
    animation: svGainPulse 1.2s ease-out forwards;
  }

  /* \u30b7\u30f3\u30d7\u30eb\u5316\u3057\u305f\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 */
  @keyframes enLossShake {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.4);
    }
    10% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.4);
    }
    20% { transform: translate(-45%, -50%) scale(1.3); }
    30% { transform: translate(-55%, -50%) scale(1.3); }
    50% { transform: translate(-50%, -50%) scale(1.2); }
    80% {
      opacity: 1;
      transform: translate(-50%, -70%) scale(1);
    }
    100% {
      opacity: 0;
      transform: translate(-50%, -95%) scale(0.6);
    }
  }

  @keyframes svGainPulse {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.4);
    }
    15% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.4);
    }
    40% {
      transform: translate(-50%, -50%) scale(1.3);
    }
    80% {
      opacity: 1;
      transform: translate(-50%, -65%) scale(1.1);
    }
    100% {
      opacity: 0;
      transform: translate(-50%, -90%) scale(0.7);
    }
  }
}

/* ============================================================
   \u30e2\u30d0\u30a4\u30eb\u6700\u9069\u5316 - \u30b9\u30de\u30db\u6a2a\u753b\u9762\u5c02\u7528 (768px\u4ee5\u4e0b & landscape)
   ============================================================ */
@media (max-width: 768px) and (orientation: landscape) {
  /* \u6a2a\u753b\u9762\u3067\u306f\u9ad8\u3055\u65b9\u5411\u306e\u79fb\u52d5\u3092\u6291\u5236 */
  @keyframes clearPopup {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.3);
    }
    15% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.2);
    }
    45% {
      transform: translate(-50%, -50%) scale(1);
    }
    85% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
    100% {
      opacity: 0;
      transform: translate(-50%, -55%) scale(0.8);
    }
  }

  @keyframes pointsPopup {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.5);
    }
    20% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.3);
    }
    80% {
      opacity: 1;
      transform: translate(-50%, -60%) scale(1.1);
    }
    100% {
      opacity: 0;
      transform: translate(-50%, -80%) scale(0.8);
    }
  }

  @keyframes enGainFloat {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.4);
    }
    20% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.3);
    }
    80% {
      opacity: 1;
      transform: translate(-50%, -65%) scale(1);
    }
    100% {
      opacity: 0;
      transform: translate(-50%, -85%) scale(0.7);
    }
  }

  @keyframes svGainPulse {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.4);
    }
    15% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.3);
    }
    80% {
      opacity: 1;
      transform: translate(-50%, -55%) scale(1);
    }
    100% {
      opacity: 0;
      transform: translate(-50%, -75%) scale(0.7);
    }
  }

  /* \u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u30b5\u30a4\u30ba\u3092\u3055\u3089\u306b\u7e2e\u5c0f */
  .clear-main {
    font-size: 56px;
  }

  .clear-text {
    font-size: 20px;
  }

  .clear-stars {
    font-size: 28px;
  }
}

/* ============================================================
   \u30e2\u30d0\u30a4\u30eb\u6700\u9069\u5316 - \u5c0f\u578b\u30b9\u30de\u30db (480px\u4ee5\u4e0b)
   ============================================================ */
@media (max-width: 480px) {
  /* \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u3055\u3089\u306b\u9ad8\u901f\u5316 */
  .card-available-zoom {
    transition: transform 0.18s ease-in-out;
  }

  .chapter-clear-popup {
    animation: clearPopup 1.8s ease-out forwards;
  }

  .clear-text {
    font-size: 20px;
    animation: clearTextPulse 1.8s ease-out;
  }

  .clear-main {
    font-size: 56px;
    animation: clearMainPulse 1.8s ease-out;
  }

  .clear-stars {
    font-size: 28px;
    animation: clearStarsPulse 1.8s ease-out;
  }

  .bug-points-popup,
  .en-gain-popup,
  .en-loss-popup,
  .sv-gain-popup {
    font-size: 40px;
    animation-duration: 1s;
  }
}

/* ============================================================
   \u30e2\u30d0\u30a4\u30eb\u6700\u9069\u5316 - \u8d85\u5c0f\u578b\u30b9\u30de\u30db (360px\u4ee5\u4e0b)
   ============================================================ */
@media (max-width: 360px) {
  .clear-text {
    font-size: 18px;
  }

  .clear-main {
    font-size: 48px;
  }

  .clear-stars {
    font-size: 24px;
  }

  .bug-points-popup,
  .en-gain-popup,
  .en-loss-popup,
  .sv-gain-popup {
    font-size: 36px;
  }
}