/* ============================================
   Kids App - Theme variables & overrides
   Layout is handled by Tailwind; this file only
   ties components to theme CSS variables.
   ============================================ */

/* PIN overlay: theme background */
#kids-pin-overlay {
  background: var(--pin-overlay-bg);
}
#kids-pin-overlay.hidden {
  display: none !important;
}

/* Hide header until user is loaded (avoid flash) */
body.kids-pin-required .kids-header {
  visibility: hidden;
}
body:not(.kids-pin-required) .kids-header {
  visibility: visible;
}

/* Header: theme colors */
.kids-header {
  background-color: var(--header-bg);
  color: var(--header-text);
}
.kids-header-back:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Gamification badges: theme colors */
.kids-points {
  background: var(--points-bg);
  color: var(--points-text);
}
.kids-gems {
  background: var(--gems-bg);
  color: var(--gems-text);
}

/* User avatar border (works in both themes) */
.kids-user-avatar {
  background: rgba(255, 255, 255, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.5);
}

/* Avatar button (switch user / log out) */
.kids-user-avatar-wrap:hover {
  opacity: 0.9;
}
.kids-user-avatar-wrap:active {
  opacity: 0.8;
}

/* Points / gems bump animation (when earned in games) */
@keyframes pointBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  70% { transform: scale(0.95); }
  100% { transform: scale(1); }
}
@keyframes gemBump {
  0% { transform: scale(1); }
  30% { transform: scale(1.4); }
  60% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.kids-points.points-bump {
  animation: pointBump 0.5s ease-out;
}
.kids-gems.gems-bump {
  animation: gemBump 0.6s ease-out;
}

/* PIN theme button */
.kids-pin-theme {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* Header theme toggle (visible when logged in) */
.kids-header-theme-toggle {
  background: rgba(255, 255, 255, 0.2);
  color: inherit;
}
.kids-header-theme-toggle:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* PIN dots: unfilled / filled */
.kids-pin-dot {
  background: rgba(255, 255, 255, 0.4);
}
.kids-pin-dot.filled {
  background: #fff;
}

/* PIN keypad keys: theme bg (and active state) */
.kids-pin-key {
  background: var(--pin-key-bg);
  -webkit-tap-highlight-color: transparent;
}
.kids-pin-key:active {
  background: var(--pin-key-active);
}

/* Game cards: theme background, border, shadow */
.game-card {
  background: var(--bg-card);
  border-color: var(--border);
  box-shadow: var(--card-shadow);
}
.game-card:hover {
  box-shadow: var(--card-hover);
}