/* ============================================================
   Find the Object — Stylesheet
   ============================================================ */

/* ── CSS Variables (color theme & sizing) ─────────────────── */
:root {
  --hud-height: 60px;

  /* Color palette — bright & child-friendly */
  --color-primary:    #FF6B6B;   /* coral red */
  --color-secondary:  #FFD93D;   /* sunny yellow */
  --color-accent:     #6BCB77;   /* fresh green */
  --color-info:       #4D96FF;   /* sky blue */
  --color-bg-hud:     #2C2C54;   /* deep purple */
  --color-text-hud:   #FFFFFF;
  --color-overlay-bg: rgba(0, 0, 0, 0.65);
  --color-box-bg:     #FFFFFF;
  --color-box-border: #FFD93D;

  /* Typography */
  --font-stack: 'Comic Sans MS', 'Chalkboard SE', 'Nunito', cursive, sans-serif;
  --font-size-hud:    1.4rem;
  --font-size-h2:     2rem;
  --font-size-body:   1.1rem;
  --font-size-btn:    1.2rem;

  /* Misc */
  --border-radius-box: 20px;
  --border-radius-btn: 50px;
  --transition-fast:   0.2s ease;
}

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-stack);
  background: #1a1a2e;
}

/* ── HUD Bar ──────────────────────────────────────────────── */
#hud {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--hud-height);
  background: var(--color-bg-hud);
  color: var(--color-text-hud);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  z-index: 100;
  box-shadow: 0 3px 10px rgba(0,0,0,0.4);
}

#hud-score,
#hud-timer {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--font-size-hud);
  font-weight: bold;
}

.hud-label {
  opacity: 0.85;
}

#score-display {
  color: var(--color-secondary);
  min-width: 2ch;
  text-align: center;
}

#timer-display {
  color: var(--color-accent);
  min-width: 2ch;
  text-align: center;
  transition: color var(--transition-fast);
}

/* Urgency state — timer ≤ 5 seconds */
#timer-display.urgent {
  color: var(--color-primary);
}

/* Urgency animation class — applied by AnimationManager.startUrgencyAnimation() */
#timer-display.urgency-anim {
  animation: pulse-urgent 0.6s ease-in-out infinite alternate;
}

@keyframes pulse-urgent {
  from { transform: scale(1);    opacity: 1; }
  to   { transform: scale(1.25); opacity: 0.75; }
}

/* ── Game Container ───────────────────────────────────────── */
#game-container {
  position: fixed;
  top: var(--hud-height);
  left: 0;
  width: 100%;
  height: calc(100% - var(--hud-height));
  overflow: hidden;
}

/* Background image — covers the full container */
#background-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
}

/* Motion trail canvas — same size as game container, sits above bg but below object */
#trail-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* The moving object — above the trail canvas */
#object-img {
  position: absolute;
  cursor: pointer;
  user-select: none;
  border-radius: 50%;
  z-index: 2;
  /* Size and position are set dynamically via JS */
  transition: none; /* movement is handled by rAF, not CSS transitions */
  will-change: left, top;
}

/* ── Overlays ─────────────────────────────────────────────── */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  animation: fade-in 0.3s ease;
}

.overlay.hidden {
  display: none;
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.overlay-box {
  background: var(--color-box-bg);
  border: 4px solid var(--color-box-border);
  border-radius: var(--border-radius-box);
  padding: 2rem 2.5rem;
  text-align: center;
  max-width: 90vw;
  width: 420px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  animation: pop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pop-in {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.overlay-box h2 {
  font-size: var(--font-size-h2);
  margin-bottom: 0.75rem;
  color: var(--color-bg-hud);
}

.overlay-box p {
  font-size: var(--font-size-body);
  margin-bottom: 0.5rem;
  color: #333;
}

/* Buttons */
.overlay-box button {
  margin-top: 1.25rem;
  padding: 0.65rem 2rem;
  font-size: var(--font-size-btn);
  font-family: var(--font-stack);
  font-weight: bold;
  border: none;
  border-radius: var(--border-radius-btn);
  cursor: pointer;
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.overlay-box button:hover,
.overlay-box button:focus {
  background: #e05555;
  transform: scale(1.05);
  outline: none;
}

.overlay-box button:active {
  transform: scale(0.97);
}

/* Clear animation container (confetti/stars injected by JS) */
#clear-animation-container {
  min-height: 60px;
  position: relative;
  overflow: hidden;
}

/* Confetti particle — base style; JS sets position, color, size, delay */
.confetti-particle {
  position: absolute;
  border-radius: 3px;
  pointer-events: none;
  animation: confetti-fall linear forwards;
}

@keyframes confetti-fall {
  0%   { transform: translateY(-10px) rotate(0deg);   opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(80px)  rotate(720deg); opacity: 0; }
}

/* Star burst particle */
.star-particle {
  position: absolute;
  pointer-events: none;
  font-size: 1.4rem;
  line-height: 1;
  animation: star-burst ease-out forwards;
}

@keyframes star-burst {
  0%   { transform: scale(0) translate(0, 0); opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: scale(1.2) translate(var(--tx), var(--ty)); opacity: 0; }
}

/* Game Over animated emoji */
.gameover-emoji {
  font-size: 3rem;
  display: block;
  margin-bottom: 0.5rem;
  animation: bounce-star 1s ease-in-out infinite alternate;
}

@keyframes bounce-star {
  from { transform: translateY(0) scale(1);    }
  to   { transform: translateY(-12px) scale(1.15); }
}

.gameover-message {
  font-weight: bold;
  color: var(--color-primary);
}

/* ── Responsive adjustments ───────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --font-size-hud:  1.1rem;
    --font-size-h2:   1.5rem;
    --font-size-body: 0.95rem;
    --font-size-btn:  1rem;
  }

  #hud {
    padding: 0 0.75rem;
  }

  .overlay-box {
    padding: 1.5rem 1.25rem;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  :root {
    --font-size-hud:  1.2rem;
    --font-size-h2:   1.75rem;
  }
}

/* ── Object hover / active feedback ──────────────────────── */
/* Subtle scale-up on hover so children know it's clickable */
#object-img:hover {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
  transform: scale(1.08);
}

#object-img:active {
  transform: scale(0.95);
}

/* ── Congratulations screen extra flair ──────────────────── */
#overlay-congrats .overlay-box h2 {
  color: #e6a800;
  animation: bounce-star 1s ease-in-out infinite alternate;
}

#overlay-congrats .overlay-box button {
  background: var(--color-accent);
}

#overlay-congrats .overlay-box button:hover,
#overlay-congrats .overlay-box button:focus {
  background: #4caa5a;
}

/* ── Touch interaction ────────────────────────────────────── */
/* Prevent scroll/zoom interference on touch devices during gameplay */
#game-container {
  touch-action: none;
}

/* ── Short-viewport overlay safety ───────────────────────── */
/* Ensure overlay boxes don't overflow on landscape mobile */
.overlay-box {
  max-height: 90vh;
  overflow-y: auto;
}

/* ── Large-screen adjustments (769px – 2560px) ───────────── */
@media (min-width: 769px) {
  :root {
    --font-size-hud:  1.5rem;
    --font-size-h2:   2.25rem;
    --font-size-body: 1.15rem;
    --font-size-btn:  1.25rem;
  }

  .overlay-box {
    width: 480px;
    padding: 2.5rem 3rem;
  }
}

@media (min-width: 1280px) {
  :root {
    --font-size-hud:  1.6rem;
    --font-size-h2:   2.5rem;
    --font-size-body: 1.2rem;
    --font-size-btn:  1.3rem;
  }

  #hud {
    padding: 0 2.5rem;
  }

  .overlay-box {
    width: 520px;
  }
}

/* ── Performance hints for animated elements ─────────────── */
.overlay {
  will-change: opacity;
}

.overlay-box {
  will-change: transform, opacity;
}

#timer-display.urgency-anim {
  will-change: transform, opacity;
}

.gameover-emoji,
.star-particle,
.confetti-particle {
  will-change: transform, opacity;
}

/* ── HUD minimum widths to prevent text overflow at 320px ── */
#hud-score,
#hud-timer {
  min-width: 0;
  flex-shrink: 0;
}

#score-display,
#timer-display {
  min-width: 2ch;
  display: inline-block;
}

/* ── Stage Clear overlay — accent button color ───────────── */
#overlay-clear .overlay-box button {
  background: var(--color-info);
}

#overlay-clear .overlay-box button:hover,
#overlay-clear .overlay-box button:focus {
  background: #2a7ae0;
}

/* ── Clear animation container — enough height for particles */
#clear-animation-container {
  min-height: 80px;
}