/* ================= ANIMATIONS (Phase 8 §5) ================= */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes popIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

.screen-enter { animation: fadeIn 0.3s ease; }
.badge-popup  { animation: popIn 0.35s cubic-bezier(0.34,1.56,0.64,1); }
.xp-popup     { animation: popIn 0.25s ease; }

/* ================= WELCOME ================= */
.welcome-badge {
  width: 96px; height: 96px; border-radius: 50%;
  background: rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
}

/* screen-center full width helper for colored full-bleed screens (Welcome, Mini Challenge, dsb.) */
.screen-center {
  padding: var(--space-xl) var(--space-lg);
}

/* ================= RESULT CARD ================= */
.result-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px dashed var(--color-border);
  font-size: 14px;
}
.result-row:last-child { border-bottom: none; }
.result-row span { color: #888; font-size: 12px; letter-spacing: 0.5px; }

/* ================= VIDEO WRAPPER ================= */
.video-wrapper video::-webkit-media-controls-fullscreen-button { display: none; }

/* ================= PRINT STYLESHEET (Result Card) ================= */
@media print {
  body * { visibility: hidden; }
  #resultCard, #resultCard * { visibility: visible; }
  #resultCard {
    position: absolute; left: 0; top: 0; width: 100%;
    box-shadow: none; border: 2px solid var(--color-blue);
  }
}