/* ============================================================
   SchoolClaude Kids — HUD + Hexagon Stations + Journey Path
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   HUD — gamer panel with rank, XP, badges
   ═══════════════════════════════════════════════════════════ */
/* HUD is NOT a separate bar — it lives inside the unified topbar. */
.kids-hud { display: contents; }

.kids-hud-inner {
  display: contents;
}

/* rank */
.kids-hud-rank { display: flex; align-items: center; gap: 0.65rem; min-width: 0; }
.kids-rank-icon {
  width: 40px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  background: linear-gradient(135deg, rgba(58, 255, 156, 0.18), rgba(56, 216, 255, 0.14));
  border: 1px solid rgba(58, 255, 156, 0.45);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  filter: drop-shadow(0 0 8px rgba(58, 255, 156, 0.4));
}
.kids-rank-text { display: flex; flex-direction: column; gap: 0.1rem; line-height: 1.1; min-width: 0; }
.kids-rank-caption {
  font-family: var(--kids-font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  color: var(--kids-muted);
  text-transform: uppercase;
}
.kids-rank-name {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--kids-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* XP */
.kids-xp { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.kids-xp-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--kids-space-sm);
  font-family: var(--kids-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--kids-text-soft);
  text-transform: uppercase;
  font-weight: 700;
}
.kids-xp-label strong {
  color: var(--kids-sun);
  font-weight: 800;
  font-size: 0.86rem;
  text-shadow: 0 0 10px rgba(255, 210, 63, 0.55);
}
.kids-xp-track {
  position: relative;
  height: 10px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--kids-glass-border);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
}
.kids-xp-fill {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--kids-magenta) 0%, var(--kids-sun) 50%, var(--kids-neon-green) 100%);
  background-size: 200% auto;
  box-shadow: 0 0 16px rgba(255, 210, 63, 0.60);
  border-radius: 999px;
  transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1);
  animation: kidsXPShimmer 3s linear infinite;
}
@keyframes kidsXPShimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* badges */
.kids-hud-badges { display: flex; gap: 0.4rem; align-items: center; }
.kids-badge {
  width: 36px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--kids-dim);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--kids-glass-border);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: all 220ms ease;
}
.kids-badge--earned {
  color: var(--kids-sun);
  background: linear-gradient(135deg, rgba(255, 210, 63, 0.22), rgba(255, 79, 216, 0.12));
  border-color: rgba(255, 210, 63, 0.60);
  box-shadow: 0 0 14px rgba(255, 210, 63, 0.45);
}

/* actions */
.kids-hud-actions { display: flex; gap: 0.5rem; align-items: center; }
.kids-audio-toggle {
  width: 42px; height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid var(--kids-glass-border);
  color: var(--kids-text-soft);
  cursor: pointer;
  font-size: 1.15rem;
  transition: all 180ms ease;
}
.kids-audio-toggle:hover { color: var(--kids-text); background: rgba(255, 255, 255, 0.10); transform: scale(1.06); }
.kids-audio-toggle[aria-pressed="true"] {
  color: var(--kids-sun);
  border-color: rgba(255, 210, 63, 0.55);
  box-shadow: 0 0 16px rgba(255, 210, 63, 0.40);
}
.kids-completion {
  font-family: var(--kids-font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--kids-muted);
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--kids-glass-border);
  white-space: nowrap;
}
.kids-completion strong { color: var(--kids-neon-green); font-weight: 800; }

@media (max-width: 960px) {
  .kids-hud-inner { grid-template-columns: auto 1fr auto; padding: 0.55rem var(--kids-space-sm); }
  .kids-hud-badges { display: none; }
}
@media (max-width: 600px) {
  .kids-hud-inner { grid-template-columns: 1fr auto; padding: 0.45rem var(--kids-space-sm); }
  .kids-hud-rank, .kids-completion { display: none; }
  .kids-xp-track { height: 6px; }
}
@media (max-width: 540px) {
  /* Hide XP bar from topbar on mobile — XP shown in hero-stats strip instead.
     Must be here (kids-hud.css) to override .kids-xp{display:flex} above. */
  .kids-xp { display: none; }
  .kids-hud-actions { display: flex; align-items: center; }
}

/* ═══════════════════════════════════════════════════════════
   ROBOT MASCOT — floating, eyes track cursor
   ═══════════════════════════════════════════════════════════ */
.kids-robot {
  width: clamp(200px, 30vw, 300px);
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 36px rgba(255, 79, 216, 0.35))
          drop-shadow(0 0 22px rgba(58, 255, 156, 0.28));
  animation: kidsFloat 4s ease-in-out infinite;
}
@keyframes kidsFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.kids-robot [data-eye] { transition: cx 80ms ease-out, cy 80ms ease-out; }

/* ═══════════════════════════════════════════════════════════
   WORLD MAP — VERTICAL JOURNEY PATH
   Stations alternate sides; connector SVG draws between.
   ═══════════════════════════════════════════════════════════ */
.kids-map-wrap {
  position: relative;
  margin: 0 auto;
  max-width: 880px;
  padding: var(--kids-space-lg) 0;
  overflow: hidden;
}

/* Central spine — dashed neon line */
.kids-map-wrap::before {
  content: '';
  position: absolute;
  top: 40px; bottom: 40px;
  left: 50%;
  width: 5px;
  transform: translateX(-50%);
  background:
    repeating-linear-gradient(to bottom,
      rgba(255, 255, 255, 0.95) 0 8px,
      rgba(255, 210, 63, 0.85) 8px 14px,
      transparent 14px 24px);
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.9)) drop-shadow(0 0 20px rgba(255,210,63,0.7));
  z-index: 0;
  animation: kidsSpineFlow 12s linear infinite;
}
@keyframes kidsSpineFlow {
  from { background-position: 0 0; }
  to   { background-position: 0 220px; }
}

.kids-map {
  display: flex;
  flex-direction: column;
  gap: var(--kids-space-xl);
  position: relative;
  z-index: 1;
}

.kids-station {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--kids-space-md);
  min-height: 180px;
}
/* alternating layout — hex center, info left or right (RTL mirrors) */
.kids-station[data-side="right"] .kids-station-info { grid-column: 3; text-align: start; }
.kids-station[data-side="left"]  .kids-station-info { grid-column: 1; text-align: end; }
.kids-station .kids-hex { grid-column: 2; }

/* station info card */
.kids-station-info {
  padding: var(--kids-space-md);
  background: rgba(10, 8, 40, 0.82);
  border: 1.5px solid var(--kids-glass-border);
  border-radius: var(--kids-radius-md);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 240ms ease, box-shadow 260ms ease;
}
.kids-station--open .kids-station-info { border-color: rgba(58, 255, 156, 0.45); box-shadow: 0 0 28px rgba(58, 255, 156, 0.18); }
.kids-station--completed .kids-station-info { border-color: rgba(255, 210, 63, 0.45); }

.kids-station-num {
  font-family: var(--kids-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--kids-electric-blue);
  text-transform: uppercase;
  margin-bottom: 0.35rem;
  font-weight: 800;
}
.kids-station-title { margin: 0 0 0.35rem; font-size: 1.35rem; font-weight: 800; color: var(--kids-text); line-height: 1.2; }
.kids-station-tagline { margin: 0 0 var(--kids-space-sm); color: var(--kids-text-soft); font-size: 0.98rem; line-height: 1.5; }
.kids-station-meta {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}
.kids-station[data-side="left"] .kids-station-meta { justify-content: flex-end; }
.kids-station-xp {
  font-family: var(--kids-font-mono);
  font-size: 0.78rem;
  color: var(--kids-sun);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 210, 63, 0.12);
  border: 1px solid rgba(255, 210, 63, 0.40);
  font-weight: 700;
}
.kids-station-status {
  font-family: var(--kids-font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-weight: 800;
}
.kids-station--open .kids-station-status {
  color: #07091a;
  background: linear-gradient(90deg, var(--kids-neon-green), var(--kids-electric-blue));
}
.kids-station--locked .kids-station-status {
  color: var(--kids-dim);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--kids-glass-border);
}
.kids-station--completed .kids-station-status {
  color: #07091a;
  background: linear-gradient(90deg, var(--kids-sun), var(--kids-sunset));
}

/* CTA hex button inside station info */
.kids-hex-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.85rem;
  padding: 0.7rem 1.5rem;
  color: #07091a;
  text-decoration: none;
  font-weight: 800;
  font-size: 0.94rem;
  background: linear-gradient(135deg, var(--kids-neon-green), var(--kids-electric-blue));
  clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0% 50%);
  box-shadow: 0 8px 22px rgba(58, 255, 156, 0.40), 0 0 20px rgba(56, 216, 255, 0.35);
  transition: transform 200ms ease, box-shadow 240ms ease, filter 180ms ease;
}
.kids-hex-cta:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 12px 30px rgba(58, 255, 156, 0.55); }
.kids-hex-cta > span::after { content: ''; }

/* ═══════════════════════════════════════════════════════════
   HEXAGON STATION NODES
   ═══════════════════════════════════════════════════════════ */
.kids-hex {
  position: relative;
  width: 150px;
  height: 172px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), filter 260ms ease;
}
.kids-hex-halo {
  position: absolute;
  inset: -40%;
  pointer-events: none;
  opacity: 0.55;
  filter: blur(24px);
  z-index: -1;
  border-radius: 50%;
}
.kids-hex-shape { width: 100%; height: 100%; position: relative; z-index: 1; }
.kids-hex-fill { opacity: 0.16; transition: opacity 260ms ease; }
.kids-hex-outline { animation: kidsHexRotate 14s linear infinite; transform-origin: center; }
@keyframes kidsHexRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.kids-hex-emoji {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.2rem;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.4));
  z-index: 2;
}

/* Color per station: sets --hex-c1, --hex-c2 and halo gradient */
.kids-station[data-kids-color="sunset"] .kids-hex { --hex-c1: var(--c-sunset-1); --hex-c2: var(--c-sunset-2); }
.kids-station[data-kids-color="lime"]   .kids-hex { --hex-c1: var(--c-lime-1);   --hex-c2: var(--c-lime-2); }
.kids-station[data-kids-color="grape"]  .kids-hex { --hex-c1: var(--c-grape-1);  --hex-c2: var(--c-grape-2); }
.kids-station[data-kids-color="sky"]    .kids-hex { --hex-c1: var(--c-sky-1);    --hex-c2: var(--c-sky-2); }
.kids-station[data-kids-color="sun"]    .kids-hex { --hex-c1: var(--c-sun-1);    --hex-c2: var(--c-sun-2); }
.kids-station[data-kids-color="rose"]   .kids-hex { --hex-c1: var(--c-rose-1);   --hex-c2: var(--c-rose-2); }
.kids-station[data-kids-color="cyan"]   .kids-hex { --hex-c1: var(--c-cyan-1);   --hex-c2: var(--c-cyan-2); }
.kids-station[data-kids-color="emerald"].kids-hex { --hex-c1: var(--c-emerald-1);--hex-c2: var(--c-emerald-2); }
.kids-station[data-kids-color="violet"] .kids-hex { --hex-c1: var(--c-violet-1); --hex-c2: var(--c-violet-2); }
.kids-station[data-kids-color="aurora"]   .kids-hex { --hex-c1: var(--c-aurora-1);   --hex-c2: var(--c-aurora-2); }
.kids-station[data-kids-color="crimson"]  .kids-hex { --hex-c1: var(--c-crimson-1);  --hex-c2: var(--c-crimson-2); }
.kids-station[data-kids-color="electric"] .kids-hex { --hex-c1: var(--c-electric-1); --hex-c2: var(--c-electric-2); }
.kids-station[data-kids-color="coral"]    .kids-hex { --hex-c1: var(--c-coral-1);    --hex-c2: var(--c-coral-2); }
.kids-station[data-kids-color="indigo"]   .kids-hex { --hex-c1: var(--c-indigo-1);   --hex-c2: var(--c-indigo-2); }
.kids-station[data-kids-color="rainbow"]  .kids-hex { --hex-c1: var(--c-rainbow-1);  --hex-c2: var(--c-rainbow-2); }

.kids-station[data-kids-color="sunset"] .kids-hex-halo { background: linear-gradient(135deg, var(--c-sunset-1), var(--c-sunset-2)); }
.kids-station[data-kids-color="lime"]   .kids-hex-halo { background: linear-gradient(135deg, var(--c-lime-1),   var(--c-lime-2)); }
.kids-station[data-kids-color="grape"]  .kids-hex-halo { background: linear-gradient(135deg, var(--c-grape-1),  var(--c-grape-2)); }
.kids-station[data-kids-color="sky"]    .kids-hex-halo { background: linear-gradient(135deg, var(--c-sky-1),    var(--c-sky-2)); }
.kids-station[data-kids-color="sun"]    .kids-hex-halo { background: linear-gradient(135deg, var(--c-sun-1),    var(--c-sun-2)); }
.kids-station[data-kids-color="rose"]   .kids-hex-halo { background: linear-gradient(135deg, var(--c-rose-1),   var(--c-rose-2)); }
.kids-station[data-kids-color="cyan"]   .kids-hex-halo { background: linear-gradient(135deg, var(--c-cyan-1),   var(--c-cyan-2)); }
.kids-station[data-kids-color="emerald"].kids-hex-halo { background: linear-gradient(135deg, var(--c-emerald-1),var(--c-emerald-2)); }
.kids-station[data-kids-color="violet"] .kids-hex-halo { background: linear-gradient(135deg, var(--c-violet-1), var(--c-violet-2)); }
.kids-station[data-kids-color="aurora"]   .kids-hex-halo { background: linear-gradient(135deg, var(--c-aurora-1),   var(--c-aurora-2)); }
.kids-station[data-kids-color="crimson"]  .kids-hex-halo { background: linear-gradient(135deg, var(--c-crimson-1),  var(--c-crimson-2)); }
.kids-station[data-kids-color="electric"] .kids-hex-halo { background: linear-gradient(135deg, var(--c-electric-1), var(--c-electric-2)); }
.kids-station[data-kids-color="coral"]    .kids-hex-halo { background: linear-gradient(135deg, var(--c-coral-1),    var(--c-coral-2)); }
.kids-station[data-kids-color="indigo"]   .kids-hex-halo { background: linear-gradient(135deg, var(--c-indigo-1),   var(--c-indigo-2)); }
.kids-station[data-kids-color="rainbow"]  .kids-hex-halo { background: linear-gradient(135deg, var(--c-rainbow-1),  var(--c-rainbow-2)); }

/* States */
.kids-station--open .kids-hex { animation: kidsHexFloat 4.5s ease-in-out infinite; }
@keyframes kidsHexFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-8px) scale(1.02); }
}
.kids-station--open .kids-hex-fill { opacity: 0.28; }
.kids-station--open .kids-hex:hover .kids-hex-fill { opacity: 0.45; }
.kids-station--open .kids-hex:hover { filter: brightness(1.15) drop-shadow(0 0 24px rgba(58, 255, 156, 0.55)); transform: scale(1.05); }

.kids-station--locked .kids-hex { filter: saturate(0.25) brightness(0.70); }
.kids-station--locked .kids-hex-halo { opacity: 0.15; }
.kids-station--locked .kids-hex-fill { opacity: 0.08; }
.kids-station--locked .kids-hex-outline { animation: none; stroke-dasharray: 2 6; }
.kids-station--locked .kids-hex:hover .kids-hex-shape { animation: kidsLockShake 0.4s ease; }
@keyframes kidsLockShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

.kids-station--completed .kids-hex-fill { opacity: 0.32; }
.kids-station--completed .kids-hex::after {
  content: '✓';
  position: absolute;
  top: -6px;
  inset-inline-end: -6px;
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--kids-sun), var(--kids-sunset));
  color: #07091a;
  font-weight: 900;
  border-radius: 50%;
  font-size: 1rem;
  box-shadow: 0 0 14px rgba(255, 210, 63, 0.55);
  z-index: 3;
}

/* Mobile: stack vertically, spine aligned to edge (RTL: right) */
@media (max-width: 720px) {
  .kids-map-wrap { max-width: 100%; padding: var(--kids-space-md) 0; }
  .kids-map-wrap::before { inset-inline-start: 42px; inset-inline-end: auto; left: auto; transform: none; top: 30px; bottom: 30px; width: 5px; }
  .kids-station { grid-template-columns: auto 1fr; gap: var(--kids-space-sm); }
  .kids-station[data-side="left"]  .kids-station-info,
  .kids-station[data-side="right"] .kids-station-info { grid-column: 2; text-align: start; }
  .kids-station[data-side="left"]  .kids-station-meta,
  .kids-station[data-side="right"] .kids-station-meta { justify-content: flex-start; }
  .kids-station .kids-hex { grid-column: 1; width: 90px; height: 104px; }
  .kids-hex-emoji { font-size: 2rem; }
}

/* ═══════════════════════════════════════════════════════════
   ARTIFACT / CODE / SECRET / MODAL
   (unchanged from previous — vibrant, still gamified)
   ═══════════════════════════════════════════════════════════ */
.kids-artifact-frame {
  position: relative;
  padding: 1rem;
  background: linear-gradient(135deg, #1a2252, #0e1330);
  border: 2px solid rgba(56, 216, 255, 0.40);
  border-radius: var(--kids-radius-xl);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 24px 60px rgba(0, 0, 0, 0.50),
    0 0 40px rgba(56, 216, 255, 0.22);
  margin: var(--kids-space-md) 0;
}
.kids-artifact-frame::before {
  content: '';
  position: absolute;
  top: 0.7rem; left: 50%;
  transform: translateX(-50%);
  width: 52px; height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}
.kids-artifact-screen {
  margin-top: 1.3rem;
  padding: var(--kids-space-md);
  background: linear-gradient(145deg, #07091a, #0e1330);
  border-radius: var(--kids-radius-md);
  min-height: 200px;
}

.kids-codeblock {
  position: relative;
  background: linear-gradient(145deg, #0e1330, #07091a);
  border: 1.5px solid rgba(56, 216, 255, 0.30);
  border-radius: var(--kids-radius-md);
  padding: var(--kids-space-md);
  padding-inline-end: calc(var(--kids-space-md) + 130px);
  margin: var(--kids-space-md) 0;
  font-family: var(--kids-font-mono);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--kids-text);
  white-space: pre-wrap;
  direction: rtl;
  unicode-bidi: plaintext;
  text-align: start;
  box-shadow: 0 0 30px rgba(56, 216, 255, 0.10);
}
.kids-codeblock-copy {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.55rem 1rem;
  background: linear-gradient(135deg, var(--kids-electric-blue), var(--kids-neon-green));
  color: #07091a;
  font-weight: 800;
  font-size: 0.88rem;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: all 180ms ease;
  box-shadow: 0 0 18px rgba(56, 216, 255, 0.40);
}
.kids-codeblock-copy:hover { transform: translateY(-2px); box-shadow: 0 0 26px rgba(58, 255, 156, 0.55); }
.kids-codeblock-copy[data-copied="true"] { background: linear-gradient(135deg, var(--kids-neon-green), var(--kids-lime)); }

@media (max-width: 480px) {
  .kids-codeblock { padding-inline-end: var(--kids-space-md); padding-bottom: 3.8rem; font-size: 0.88rem; }
  .kids-codeblock-copy { top: auto; bottom: 0.5rem; left: 0.5rem; }
}

.kids-secret {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kids-space-md);
  margin: var(--kids-space-lg) auto;
  max-width: 420px;
}
.kids-secret-input {
  width: 220px;
  padding: 1rem;
  text-align: center;
  font-family: var(--kids-font-mono);
  font-size: 1.8rem;
  letter-spacing: 0.5em;
  color: var(--kids-sun);
  background: linear-gradient(145deg, #0e1330, #07091a);
  border: 2.5px solid var(--kids-glass-border);
  border-radius: var(--kids-radius-md);
  transition: all 200ms ease;
  font-weight: 700;
  text-shadow: 0 0 12px rgba(255, 210, 63, 0.5);
}
.kids-secret-input:focus {
  outline: none;
  border-color: var(--kids-sun);
  box-shadow: 0 0 0 4px rgba(255, 210, 63, 0.18), 0 0 30px rgba(255, 210, 63, 0.40);
}
.kids-secret-input[data-error="true"] {
  border-color: var(--kids-magenta);
  color: var(--kids-magenta);
  animation: kidsShake 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes kidsShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

.kids-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 9, 26, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--kids-space-md);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}
.kids-modal-backdrop[aria-hidden="false"] { opacity: 1; pointer-events: auto; }
.kids-modal {
  max-width: 480px;
  width: 100%;
  padding: var(--kids-space-xl) var(--kids-space-lg);
  background:
    radial-gradient(circle at top, rgba(255, 79, 216, 0.20), transparent 60%),
    radial-gradient(circle at bottom, rgba(58, 255, 156, 0.16), transparent 60%),
    linear-gradient(160deg, #0e1330 0%, #07091a 100%);
  border: 2px solid rgba(255, 210, 63, 0.40);
  border-radius: var(--kids-radius-xl);
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.60), 0 0 60px rgba(255, 79, 216, 0.28);
  transform: scale(0.85);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.kids-modal-backdrop[aria-hidden="false"] .kids-modal { transform: scale(1); }
.kids-modal-icon { font-size: 4rem; margin-bottom: var(--kids-space-sm); filter: drop-shadow(0 0 20px rgba(255, 210, 63, 0.60)); animation: kidsPartyBounce 800ms ease-out; }
@keyframes kidsPartyBounce {
  0%   { transform: scale(0) rotate(-180deg); opacity: 0; }
  50%  { transform: scale(1.3) rotate(20deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
.kids-modal h2 {
  margin: 0 0 var(--kids-space-sm);
  font-size: 2rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--kids-magenta), var(--kids-sun));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kids-modal p { color: var(--kids-text-soft); margin: 0 0 var(--kids-space-md); line-height: 1.6; }