:root {
  --kid-purple: #6c63ff;
  --kid-blue: #39a9ff;
  --kid-pink: #ff6fae;
  --kid-yellow: #ffca45;
  --kid-green: #45c995;
  --kid-ink: #27304d;
  color: var(--kid-ink);
  background: #f6f7ff;
}

body {
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 8% 8%, #ffe8a9 0 4%, transparent 15%),
    radial-gradient(circle at 92% 15%, #d9d7ff 0 5%, transparent 17%),
    linear-gradient(180deg, #f9f8ff 0%, #f3f8ff 55%, #fff9f1 100%);
}

body::before,
body::after {
  position: fixed;
  z-index: -1;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  content: "";
  filter: blur(2px);
  opacity: .35;
  pointer-events: none;
}

body::before { top: 24%; left: -150px; background: #8de4ff; }
body::after { right: -150px; bottom: 8%; background: #ffb8d3; }
button { -webkit-tap-highlight-color: transparent; }
.topbar { position: relative; }

.brand-mark {
  transform: rotate(-4deg);
  border: 3px solid #fff;
  background: linear-gradient(145deg, #786dff, #4dbeff);
  box-shadow: 0 7px 0 #4c51c9, 0 12px 22px #5668f233;
  font-family: "Comic Sans MS", "Segoe Print", cursive;
}

.brand strong { color: #313956; letter-spacing: .02em; }
.brand small { color: #7b84a0; }

.hero-card {
  position: relative;
  overflow: hidden;
  border: 3px solid #ffffff99;
  background: linear-gradient(120deg, #675cf5 0%, #477eea 48%, #35b5de 100%);
  box-shadow: 0 18px 44px #5361ba2d;
}

.hero-card::before,
.hero-card::after {
  position: absolute;
  color: #fff;
  content: "★";
  opacity: .18;
  pointer-events: none;
}

.hero-card::before { top: -28px; right: 28%; font-size: 110px; transform: rotate(15deg); }
.hero-card::after { right: 25px; bottom: -54px; font-size: 150px; transform: rotate(-12deg); }
.hero-card > * { position: relative; z-index: 1; }
.hero-card .eyebrow { color: #fff1a8; }
.hero-copy { color: #eff4ff; }
.hero-stats span { color: #e1e9ff; }

.accent-switch { border: 1px solid #e6e5ff; background: #f0efff; }
.accent-switch button.active { color: #5b50df; box-shadow: 0 3px 9px #6258d624; }

.activity-actions .game-button {
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease;
}

.activity-actions .game-button:hover { transform: translateY(-2px); }
.activity-actions .game-button:nth-child(1) { border-color: #ffe1a3; background: #fff3cf; color: #a66608; }
.activity-actions .game-button:nth-child(2) { border-color: #c9e8ff; background: #e9f7ff; color: #1673aa; }
.activity-actions .game-button:nth-child(3) { border-color: #ffd0e2; background: #fff0f6; color: #b54a77; }

.letter-panel,
.lesson-panel {
  border: 2px solid #fff;
  box-shadow: 0 10px 28px #586a9d16, 0 0 0 1px #e9ebf7;
}

.letter-panel { background: linear-gradient(180deg, #fff 0%, #fbfbff 100%); }
.lesson-panel { position: relative; overflow: hidden; }
.lesson-panel::before {
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 5px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(90deg, #6c63ff, #35b7f2, #45c995, #ffca45, #ff6fae);
  content: "";
}

.section-title h2,
.lesson-head h2 { color: #2d3551; }

.letter-cell {
  border-width: 2px;
  border-color: #ebeaf8;
  background: #fafaff;
  box-shadow: 0 3px 0 #e8e8f4;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.letter-cell:nth-child(5n+1) { background: #fff4f8; color: #bf4f7d; }
.letter-cell:nth-child(5n+2) { background: #f0f9ff; color: #247eae; }
.letter-cell:nth-child(5n+3) { background: #fff9e6; color: #9a6a05; }
.letter-cell:nth-child(5n+4) { background: #effbf5; color: #287f60; }
.letter-cell:nth-child(5n) { background: #f3f1ff; color: #6355bd; }
.letter-cell:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 5px 0 #dcdaef; }
.letter-cell.active {
  border-color: #766cff;
  background: linear-gradient(145deg, #8176ff, #5f58e8);
  color: #fff;
  box-shadow: 0 5px 0 #4944bd, 0 9px 16px #5e58d82d;
  transform: translateY(-2px);
}
.letter-cell.active small { color: #eeecff; }
.letter-cell.done::after { color: #16805c; font-size: 12px; font-weight: 900; }

.mastery-pill { border: 1px solid #e8e5ff; background: #f5f3ff; color: #7269ae; }
.mastery-pill.done { border-color: #b9ead6; background: #e9fbf3; color: #218261; }
.tab.active { border-color: #6c63ff; color: #5c54dc; }

.letter-orb {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 73% 22%, #ffffff66 0 7%, transparent 8%),
    radial-gradient(circle at 20% 75%, #ffffff35 0 5%, transparent 6%),
    linear-gradient(145deg, #887cff, #665eea 52%, #4b8fe3);
  box-shadow: inset 0 3px 0 #ffffff55, 0 12px 24px #6259d533;
  text-shadow: 0 5px 0 #4b45b080;
}

.letter-orb::after {
  position: absolute;
  top: 15px;
  right: 18px;
  content: "✦";
  color: #fff0a8;
  font-size: 28px;
  text-shadow: none;
}

.letter-orb.is-speaking,
.daily-letter.is-speaking { animation: kidSpeak .52s ease-in-out infinite alternate; }
.sound-card { border: 2px solid #eeecff; background: linear-gradient(160deg, #faf9ff, #f2f6ff); }
.sound-card h3 { color: #564fd0; }
.phonics-strip { border-width: 2px; border-color: #dceeff; background: linear-gradient(100deg, #f7fcff, #fffdf6); }
.phonics-main strong { color: #2a93cf; }

.primary-button {
  background: linear-gradient(135deg, #766cff, #5a55dd);
  box-shadow: 0 5px 0 #4742b8, 0 10px 18px #625ad036;
  transition: transform .15s ease, box-shadow .15s ease;
}

.primary-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 7px 0 #4742b8, 0 13px 22px #625ad03b; }
.primary-button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 #4742b8; }
.primary-button:disabled { box-shadow: none; opacity: .55; }
.secondary-button { border: 1px solid #dcd8ff; background: #eeecff; color: #594fd1; }
.mini-button { border: 1px solid #e0e4f2; background: #fff; }
.guide-paper { box-shadow: inset 0 0 0 5px #fff7db; }
.guide-letter { color: #7569e4; }
.trace-box { border: 2px dashed #dce1f5; background: #fafbff; }

.game-modal { background: #302c628f; }
.game-dialog { border: 3px solid #fff; background: linear-gradient(180deg, #fff 0%, #fbfbff 100%); box-shadow: 0 26px 80px #2e295b66; }
.game-dialog::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 7px;
  background: linear-gradient(90deg, #ff6fae, #ffca45, #45c995, #39a9ff, #6c63ff);
  content: "";
}
.game-close { z-index: 2; }
.game-settings,
.game-status,
.match-status { border: 1px solid #e7e5fa; background: #f8f7ff; }
.game-letter { border-width: 2px; box-shadow: 0 3px 0 #e1e2ed; }
.game-letter:nth-child(4n+1) { background: #fff4f8; }
.game-letter:nth-child(4n+2) { background: #eff9ff; }
.game-letter:nth-child(4n+3) { background: #fff9e8; }
.game-letter:nth-child(4n) { background: #effbf5; }
.game-letter.correct,
.match-options button.correct { animation: kidCorrect .5s ease; }
.game-letter.wrong,
.match-options button.wrong { animation: kidWrong .35s ease; }

.daily-letter,
.match-target {
  background:
    radial-gradient(circle at 72% 20%, #ffffff55 0 8%, transparent 9%),
    linear-gradient(145deg, #8478ff, #625ae3 58%, #3e9cdf);
  box-shadow: inset 0 3px 0 #ffffff44, 0 12px 28px #5e57d93b;
  text-shadow: 0 5px 0 #4843ae70;
}

.daily-progress span { border: 1px solid #e5e6f0; }
.daily-progress span.active { border-color: #746aff; background: #eeecff; box-shadow: 0 0 0 2px #746aff inset; animation: kidBounce 1s ease-in-out infinite; }
.daily-progress span.done { border-color: #afe6d0; background: #e9fbf3; }
.daily-learning-cards section { border: 1px solid #e9e7fa; background: #faf9ff; }
.daily-complete > div { animation: kidBounce .8s ease-in-out infinite alternate; }
.match-options button { box-shadow: 0 4px 0 #e1e2ed; }

.celebration-layer {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  pointer-events: none;
}

.celebration-badge {
  position: fixed;
  left: var(--x);
  top: var(--y);
  padding: 8px 15px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffcd49, #ff8c62);
  color: #713d15;
  box-shadow: 0 8px 24px #8c552f42;
  font-size: 16px;
  font-weight: 900;
  white-space: nowrap;
  animation: rewardBadge 1.25s ease forwards;
}

.celebration-piece {
  position: fixed;
  left: var(--x);
  top: var(--y);
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--color);
  animation: rewardPiece 1.15s var(--delay) cubic-bezier(.15,.75,.3,1) forwards;
}

.celebration-piece.star {
  width: auto;
  height: auto;
  background: transparent;
  color: var(--color);
  font-size: 20px;
}

@keyframes kidSpeak {
  from { transform: scale(1) rotate(-1deg); filter: saturate(1); }
  to { transform: scale(1.035) rotate(1deg); filter: saturate(1.2) brightness(1.04); }
}

@keyframes kidCorrect {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.12) rotate(-2deg); }
}

@keyframes kidWrong {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

@keyframes kidBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes rewardBadge {
  0% { opacity: 0; transform: translate(-50%, -10%) scale(.45) rotate(-8deg); }
  28% { opacity: 1; transform: translate(-50%, -90%) scale(1.12) rotate(3deg); }
  72% { opacity: 1; transform: translate(-50%, -105%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -155%) scale(.92); }
}

@keyframes rewardPiece {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(0); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(540deg); }
}

@media (max-width: 720px) {
  .app-shell { padding: 0 10px; }
  .topbar { padding-top: 7px; }
  .brand { gap: 9px; }
  .brand-mark { width: 36px; height: 36px; border-width: 2px; border-radius: 11px; box-shadow: 0 4px 0 #4c51c9, 0 7px 14px #5668f22d; font-size: 17px; }
  .brand strong { font-size: 16px; }
  .accent-switch button { min-height: 32px; }
  .activity-actions .game-button { min-height: 36px; border-radius: 11px; }
  .letter-panel { padding: 11px 12px; }
  .letter-cell { box-shadow: 0 2px 0 #e5e5ef; }
  .letter-cell.active { box-shadow: 0 3px 0 #4944bd, 0 6px 11px #5e58d822; }
  .lesson-panel { padding-top: 14px; }
  .lesson-panel::before { left: 16px; right: 16px; height: 4px; }
  .letter-orb::after { top: 9px; right: 10px; font-size: 20px; }
  .sound-card { border-width: 1px; }
  .game-dialog { border: 0; border-radius: 0; }
  .celebration-badge { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}