/* Little Learners — shared kid-friendly design system.
   Big tap targets, rounded chunky shapes, bright rainbow palette, one playful
   rounded typeface. Built for small children on tablets and phones: everything is
   large, high-contrast, and forgiving. No dark patterns, no external links. */
:root {
  --ink: #2b2440;
  --paper: #fffdf7;
  --sky1: #bfe6ff; --sky2: #d9c7ff;
  --red: #ff6b6b; --orange: #ff9f45; --yellow: #ffd23f; --green: #4bd66b;
  --teal: #38c6c6; --blue: #4d96ff; --purple: #9b6bff; --pink: #ff7ac0;
  --shadow: 0 8px 0 rgba(43, 36, 64, .18);
  --r: 28px;
  --font: "Fredoka", "Baloo 2", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font); color: var(--ink); font-weight: 500;
  background: linear-gradient(160deg, var(--sky1), var(--sky2));
  background-attachment: fixed;
  min-height: 100%; overflow-x: hidden; text-align: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  -webkit-user-select: none; user-select: none;
}
h1, h2 { font-weight: 700; margin: 0; letter-spacing: .01em; }

/* Floating soft clouds/bubbles backdrop */
.kid-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.kid-bg b { position: absolute; border-radius: 50%; background: rgba(255,255,255,.5); filter: blur(1px);
  animation: kid-float 14s ease-in-out infinite; }
@keyframes kid-float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-22px) } }
@media (prefers-reduced-motion: reduce) { .kid-bg b { animation: none } }

.kid-wrap { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto;
  padding: clamp(16px, 4vw, 40px) clamp(14px, 4vw, 32px) 48px; }

/* Home / back button — always top-left, thumb-sized */
.kid-home { position: fixed; top: max(12px, env(safe-area-inset-top)); left: 12px; z-index: 20;
  width: 62px; height: 62px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--paper); box-shadow: var(--shadow); font-size: 1.9rem; line-height: 1;
  display: grid; place-items: center; transition: transform .12s; }
.kid-home:active { transform: scale(.9); }

/* Landing hero */
.kid-hero { padding: clamp(10px, 3vh, 30px) 0 8px; }
.kid-logo { font-size: clamp(2.6rem, 9vw, 4.6rem); font-weight: 700; line-height: 1;
  color: #fff; text-shadow: 0 4px 0 rgba(43,36,64,.18); letter-spacing: .01em; }
.kid-logo .a { color: var(--red) } .kid-logo .b { color: var(--orange) }
.kid-logo .c { color: var(--green) } .kid-logo .d { color: var(--blue) } .kid-logo .e { color: var(--purple) }
.kid-sub { font-size: clamp(1rem, 3.4vw, 1.35rem); color: var(--ink); opacity: .8; margin-top: .4em; font-weight: 600; }

/* Game grid + cards */
.kid-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: clamp(14px, 3vw, 22px); margin-top: clamp(20px, 4vh, 40px); }
.kid-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-decoration: none; color: var(--ink); background: var(--paper);
  border-radius: var(--r); box-shadow: var(--shadow); padding: 20px 14px 18px;
  border: 5px solid var(--cardc, var(--blue)); cursor: pointer; transition: transform .12s, box-shadow .12s;
  aspect-ratio: 1 / 1; justify-content: center; }
.kid-card:active { transform: translateY(4px) scale(.98); box-shadow: 0 4px 0 rgba(43,36,64,.18); }
.kid-card .emoji { font-size: clamp(3rem, 12vw, 4.6rem); line-height: 1; filter: drop-shadow(0 3px 2px rgba(0,0,0,.15)); }
.kid-card .label { font-size: clamp(1.05rem, 3.2vw, 1.4rem); font-weight: 700; }
.kid-card.soon { opacity: .62; cursor: default; border-style: dashed; }
.kid-card.soon:active { transform: none; box-shadow: var(--shadow); }
.kid-card .soon-tag { position: absolute; top: 8px; right: 8px; font-size: .7rem; font-weight: 700;
  background: var(--ink); color: #fff; padding: 3px 8px; border-radius: 999px; }

.kid-foot { margin-top: 34px; color: var(--ink); opacity: .55; font-size: .85rem; font-weight: 600; }

/* Generic big playful button */
.kid-btn { font-family: var(--font); font-weight: 700; font-size: clamp(1.1rem, 3.6vw, 1.5rem);
  border: 0; border-radius: 999px; padding: .6em 1.3em; cursor: pointer; color: #fff;
  background: var(--purple); box-shadow: var(--shadow); transition: transform .12s; min-height: 64px; }
.kid-btn:active { transform: translateY(4px) scale(.97); }

/* Reward sparkles (shared) */
.kid-spark { position: fixed; z-index: 50; pointer-events: none; font-size: 1.6rem;
  animation: kid-spark .7s ease-out forwards; }
@keyframes kid-spark { 0% { transform: translate(-50%,-50%) scale(.3); opacity: 1 }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.2); opacity: 0 } }