/*
 * EduGames - Interactive Learning Games
 * (c) 2025-2026 Prof. N. All rights reserved.
 *
 * File:    styles/components/celebration.css
 * Updated: 2026-10-07 12:00
 * Purpose: The fireworks canvas (scripts/components/celebration.js) and the result card (scripts/components/result-banner.js)
 *          that every game shows when a round ends.
 */

/* The fireworks: over the whole page, below the result card and the toasts; it never takes a click */
.celebration-canvas {
  position: fixed;
  inset: 0;
  z-index: 2400;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

/* The result card: floats over the top of the game area (the control panel and the scoreboard stay free); without a game area
   (a page that has none) it floats near the top of the window */
.result-banner {
  position: fixed;
  top: 18%;
  left: 50%;
  z-index: 2450;
  box-sizing: border-box;
  width: min(92vw, 380px);
  padding: var(--space-4) var(--space-5) var(--space-4);
  text-align: center;
  color: var(--text-primary);
  background-color: var(--bg-panel);
  border: 2px solid var(--color-primary);
  border-radius: var(--border-radius-md);
  box-shadow: 0 12px 32px var(--shadow-color);
  transform: translateX(-50%);
  animation: result-banner-in 0.35s ease-out;
}

.game-area {
  position: relative;
}

.game-area .result-banner {
  position: absolute;
  top: var(--space-3);
}

.result-banner-win { border-color: var(--color-success); }
.result-banner-loss { border-color: var(--color-danger); }
.result-banner-solve { border-color: var(--color-warning); }

.result-banner-title {
  margin: 0 0 var(--space-3);
  font-size: 1.4rem;
  line-height: 1.2;
}

.result-banner-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
  margin: 0 0 var(--space-4);
}

.result-banner-stats dt {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.result-banner-stats dd {
  margin: 0;
  font-family: var(--font-family-code);
  font-size: 1.3rem;
  font-weight: var(--font-weight-bold);
}

.result-banner-buttons {
  display: flex;
  justify-content: center;
}

.result-banner-close {
  position: absolute;
  top: var(--space-1);
  right: var(--space-2);
  padding: 0 var(--space-2);
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--text-secondary);
  background: none;
  border: 0;
  cursor: pointer;
}

.result-banner-close:hover {
  color: var(--text-primary);
}

@keyframes result-banner-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(0.96); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .result-banner { animation: none; }
}