/* learn-english/_games/games.css
   Quiz/game modal + TikTok-style overlay layer.
   Inherits CSS variables from the player (--accent, --text-inverse, etc.). */

#quiz-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  background: linear-gradient(180deg, rgba(15,23,42,0.97) 0%, rgba(7,14,28,0.98) 100%);
  color: #f0f6fc;
  font-family: 'Nunito', sans-serif;
  overflow: hidden;
}
#quiz-modal[data-open="1"] {
  display: flex;
  flex-direction: column;
  animation: qm-enter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes qm-enter {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* --- TOP BAR: coin counter + streak meter + close button --- */
.qm-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.8rem 1.2rem;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(8px);
}
.qm-streak {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 1.1rem; font-weight: 800;
}
.qm-streak[data-active="1"] {
  color: #fbbf24;
  animation: streak-pulse 0.6s ease;
}
@keyframes streak-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.qm-coin {
  display: flex; align-items: center; gap: 0.4rem;
  background: rgba(251,191,36,0.15);
  padding: 0.4rem 0.9rem; border-radius: 999px;
  font-weight: 800;
  border: 1px solid rgba(251,191,36,0.4);
}
.qm-coin.bumping { animation: coin-bump 0.5s ease; }
@keyframes coin-bump {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.3) rotate(-8deg); }
  100% { transform: scale(1) rotate(0); }
}
.qm-close {
  background: transparent; border: 1px solid rgba(255,255,255,0.3);
  color: #f0f6fc; font-size: 1.1rem;
  width: 2rem; height: 2rem; border-radius: 50%; cursor: pointer;
}

/* --- STAGE: per-game content area --- */
.qm-stage {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; position: relative;
}
.qm-game {
  width: 100%; max-width: 600px;
  display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
}

/* --- PROMPT card (shared across all games) --- */
.qm-prompt {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 1.2rem;
  padding: 1.2rem 1.5rem;
  text-align: center; font-size: 1.05rem; line-height: 1.5;
  width: 100%;
}
.qm-target {
  font-family: 'Space Mono', monospace;
  font-size: 1.4rem; margin-top: 0.6rem; color: #fbbf24;
}

/* --- Saavi reaction popup (bottom-left) --- */
.qm-saavi {
  position: absolute;
  bottom: 1.2rem; left: 1.2rem;
  display: flex; align-items: flex-end; gap: 0.5rem;
  pointer-events: none;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.25s, transform 0.25s;
}
.qm-saavi[data-visible="1"] { opacity: 1; transform: translateY(0); }
.qm-saavi img { width: 96px; height: auto; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5)); }
.qm-saavi-bubble {
  background: #fff; color: #0d1a2e;
  padding: 0.7rem 1rem; border-radius: 1rem 1rem 1rem 0.2rem;
  font-weight: 700; max-width: 220px; font-size: 0.9rem;
}

/* --- screen-shake on wrong answer --- */
.qm-shake { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

#qm-confetti { position: absolute; inset: 0; pointer-events: none; z-index: 1; }

.qm-btn-answer {
  background: rgba(14,165,233,0.15); color: #f0f6fc;
  border: 2px solid rgba(14,165,233,0.5); border-radius: 0.8rem;
  padding: 0.9rem 1.2rem; font-size: 1rem; font-weight: 700;
  cursor: pointer; font-family: 'Nunito', sans-serif;
  transition: transform 0.15s, background 0.15s;
}
.qm-btn-answer:hover { transform: translateY(-2px); background: rgba(14,165,233,0.25); }
.qm-btn-answer.right { background: rgba(34,197,94,0.4); border-color: #22c55e; }
.qm-btn-answer.wrong { background: rgba(239,68,68,0.4); border-color: #ef4444; }
.qm-btn-answer:disabled { opacity: 0.6; cursor: not-allowed; }