/* ═══════════════════════════════════════════════════════════
   games.css — styles for 5 interactive mini-games + AI Tutor
   ═══════════════════════════════════════════════════════════ */


/* ═══ AI TUTOR (floating chat) ═══ */
.ai-tutor {
  position: fixed; bottom: 70px; right: 18px; z-index: 80;
  pointer-events: none;
}
.ai-tutor > * { pointer-events: auto; }
.ai-tutor-fab {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--g-blue), var(--g-green));
  border: none; cursor: pointer;
  box-shadow: 0 8px 24px rgba(66,133,244,.4);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: all .25s cubic-bezier(.34,1.56,.64,1);
}
.ai-tutor-fab:hover { transform: scale(1.08); box-shadow: 0 10px 28px rgba(66,133,244,.5); }

/* Hide AI tutor on intro */
.intro:not(.gone) ~ .ai-tutor { display: none; }

/* ═══ CIKGU VOICE — live-sparring rings (ported from cs/lite) ═══ */

/* Sparring mode — pink, always-pulsing rings while a live voice session runs. */
.ai-tutor-fab.sparring {
  background: linear-gradient(135deg, #ec4899, #f43f5e) !important;
  animation: sparPulse 1.6s ease-in-out infinite;
}
.ai-tutor-fab.sparring::before {
  border-color: #ec4899; opacity: 1; transform: scale(1.18);
  animation: sparRing1 1.6s ease-in-out infinite;
}
.ai-tutor-fab.sparring::after {
  border-color: #f43f5e; opacity: .8; transform: scale(1.35);
  animation: sparRing2 1.6s ease-in-out infinite;
}
@keyframes sparPulse {
  0%,100% { box-shadow: 0 8px 24px rgba(236,72,153,.4); }
  50%     { box-shadow: 0 8px 36px rgba(236,72,153,.85); }
}
@keyframes sparRing1 {
  0%,100% { opacity: 1; transform: scale(1.18); }
  50%     { opacity: .35; transform: scale(1.45); }
}
@keyframes sparRing2 {
  0%,100% { opacity: .8; transform: scale(1.35); }
  50%     { opacity: .2; transform: scale(1.7); }
}

/* Mobile adjustments */
@media (max-width: 720px) {
  .scratch-builder { grid-template-columns: 1fr; }
  .pt-cell, .bubble-cell { width: 48px; height: 48px; font-size: 18px; }
}