/* =========================================================
   NumberLand — shared stylesheet
   Playful, high-contrast, big-touch-target design for kids
   ========================================================= */

:root{
  --purple:#7C3AED;
  --pink:#EC4899;
  --yellow:#FFD23F;
  --green:#22C55E;
  --blue:#3B82F6;
  --orange:#FB923C;
  --red:#F43F5E;
  --ink:#3A2E1F;
  --cream:#FFFBF2;
  --white:#FFFFFF;
  --shadow: 0 10px 24px rgba(60,40,20,.14);
  --shadow-sm: 0 4px 10px rgba(60,40,20,.12);

  /* default accent (overridden per-level via body[data-level]) */
  --accent:#7C3AED;
  --accent-dark:#5B21B6;
  --accent-light:#EDE4FF;
}

/* Per-level color themes */
body[data-level="1"]{ --accent:#22C55E; --accent-dark:#15803D; --accent-light:#DCFCE7; }
body[data-level="2"]{ --accent:#FB923C; --accent-dark:#C2410C; --accent-light:#FFEDD5; }
body[data-level="3"]{ --accent:#3B82F6; --accent-dark:#1D4ED8; --accent-light:#DBEAFE; }
body[data-level="4"]{ --accent:#7C3AED; --accent-dark:#5B21B6; --accent-light:#EDE4FF; }
body[data-level="5"]{ --accent:#F43F5E; --accent-dark:#BE123C; --accent-light:#FFE4E9; }

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:'Quicksand', -apple-system, BlinkMacSystemFont, sans-serif;
  background:var(--cream);
  color:var(--ink);
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}
h1,h2,h3,.brand,.big-number,.btn,.option-btn,.level-name{
  font-family:'Baloo 2', 'Quicksand', sans-serif;
}
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }

/* ---------- floating decorative background shapes ---------- */
.bg-shapes{ position:fixed; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.bg-shapes span{
  position:absolute; opacity:.16; filter:blur(0px);
  font-size:3rem; animation:float 12s ease-in-out infinite;
}
.bg-shapes span:nth-child(1){ top:8%; left:6%; animation-delay:0s; font-size:2.4rem;}
.bg-shapes span:nth-child(2){ top:20%; left:85%; animation-delay:1.5s; font-size:3.2rem;}
.bg-shapes span:nth-child(3){ top:70%; left:10%; animation-delay:3s; font-size:2.8rem;}
.bg-shapes span:nth-child(4){ top:80%; left:80%; animation-delay:2s; font-size:2.2rem;}
.bg-shapes span:nth-child(5){ top:45%; left:50%; animation-delay:4s; font-size:2rem;}
.bg-shapes span:nth-child(6){ top:35%; left:20%; animation-delay:1s; font-size:2.6rem;}
.bg-shapes span:nth-child(7){ top:60%; left:65%; animation-delay:2.6s; font-size:2.4rem;}
@keyframes float{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-22px) rotate(8deg); }
}

.wrap{ position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:0 20px; }

/* ---------- header ---------- */
header.site-header{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px;
  max-width:1100px; margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:12px; font-size:1.6rem; font-weight:700; color:var(--purple); }
.brand img{ width:46px; height:46px; }
.home-link{
  background:var(--white); border-radius:999px; padding:10px 20px;
  box-shadow:var(--shadow-sm); font-weight:700; color:var(--purple);
  display:flex; align-items:center; gap:8px;
}
.home-link:hover{ transform:translateY(-2px); transition:.15s; }

/* ---------- hero ---------- */
.hero{ text-align:center; padding:20px 20px 40px; position:relative; z-index:1; }
.hero .mascot{ width:120px; height:120px; margin:0 auto 10px; animation:bob 3.5s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
.hero h1{
  font-size:clamp(2.2rem, 5vw, 3.6rem); margin:6px 0 6px; color:var(--purple);
  text-shadow: 2px 2px 0 rgba(255,255,255,.6);
}
.hero p.tagline{ font-size:1.25rem; color:#6b5b3e; max-width:560px; margin:0 auto; }

/* ---------- category cards ---------- */
.levels-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:24px; padding:10px 0 60px; position:relative; z-index:1;
}
.level-card{
  background:var(--white); border-radius:28px; padding:26px 20px 24px;
  box-shadow:var(--shadow); text-align:center; position:relative;
  border:4px solid transparent; transition:transform .18s ease, box-shadow .18s ease;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.level-card:hover{ transform:translateY(-8px) scale(1.02); box-shadow:0 18px 30px rgba(60,40,20,.2); }
.level-card .badge-icon{
  width:84px; height:84px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:2.6rem; background:var(--lc-light); box-shadow:inset 0 0 0 4px var(--white);
}
.level-card .age-pill{
  position:absolute; top:-14px; right:18px; background:var(--lc); color:#fff;
  font-weight:700; font-size:.85rem; padding:6px 14px; border-radius:999px; box-shadow:var(--shadow-sm);
}
.level-card h3{ margin:4px 0 0; font-size:1.35rem; color:var(--lc-dark); }
.level-card p{ margin:0; color:#7a6c50; font-size:.95rem; }
.level-card .go-btn{
  margin-top:8px; background:var(--lc); color:#fff; padding:10px 24px; border-radius:999px;
  font-weight:700; font-size:1rem; box-shadow:var(--shadow-sm);
}
.level-card .go-btn:hover{ filter:brightness(1.08); }

/* card accent variables per level (set inline in HTML via style attr) */
.level-card.l1{ --lc:#22C55E; --lc-dark:#15803D; --lc-light:#DCFCE7; }
.level-card.l2{ --lc:#FB923C; --lc-dark:#C2410C; --lc-light:#FFEDD5; }
.level-card.l3{ --lc:#3B82F6; --lc-dark:#1D4ED8; --lc-light:#DBEAFE; }
.level-card.l4{ --lc:#7C3AED; --lc-dark:#5B21B6; --lc-light:#EDE4FF; }
.level-card.l5{ --lc:#F43F5E; --lc-dark:#BE123C; --lc-light:#FFE4E9; }

footer.site-footer{
  text-align:center; padding:26px 10px 40px; color:#9a8a68; font-size:.9rem; position:relative; z-index:1;
}

/* ---------- quiz page ---------- */
.quiz-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  max-width:820px; margin:14px auto 0; padding:0 16px;
}
.progress-track{
  flex:1; height:16px; background:var(--accent-light); border-radius:999px; overflow:hidden;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.08);
}
.progress-fill{ height:100%; background:var(--accent); border-radius:999px; transition:width .35s ease; }
.score-pill{
  background:var(--white); border-radius:999px; padding:8px 16px; font-weight:700;
  box-shadow:var(--shadow-sm); color:var(--accent-dark); white-space:nowrap;
}

.quiz-card{
  max-width:760px; margin:26px auto; background:var(--white); border-radius:32px;
  box-shadow:var(--shadow); padding:34px 28px 30px; position:relative; z-index:1;
}
.level-tag{
  display:inline-flex; align-items:center; gap:8px; background:var(--accent-light); color:var(--accent-dark);
  font-weight:700; padding:6px 16px; border-radius:999px; font-size:.9rem; margin-bottom:14px;
}
.q-count{ color:#9a8a68; font-weight:700; margin-bottom:6px; }
.question-prompt{ font-size:1.5rem; font-weight:700; color:var(--ink); margin:6px 0 18px; line-height:1.35; }
.visual-row{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:10px 0 22px;
  font-size:2.2rem;
}
.visual-row .group{
  display:flex; flex-wrap:wrap; gap:6px; padding:14px; background:var(--accent-light);
  border-radius:18px; justify-content:center; min-width:110px;
}
.big-number{ font-size:3rem; font-weight:800; color:var(--accent-dark); }

.options-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; margin-top:6px;
}
@media (max-width:520px){ .options-grid{ grid-template-columns:1fr; } }

.option-btn{
  background:var(--cream); border:3px solid var(--accent-light); border-radius:20px;
  padding:18px 14px; font-size:1.3rem; font-weight:700; cursor:pointer; color:var(--ink);
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
  display:flex; align-items:center; justify-content:center; gap:8px; min-height:70px;
}
.option-btn:hover:not(:disabled){ transform:translateY(-3px); border-color:var(--accent); }
.option-btn:disabled{ cursor:default; }
.option-btn.correct{ background:#DCFCE7; border-color:#22C55E; color:#15803D; }
.option-btn.wrong{ background:#FFE1E6; border-color:#F43F5E; color:#BE123C; }

.feedback{
  margin-top:18px; text-align:center; font-size:1.15rem; font-weight:700; min-height:32px;
}
.feedback.good{ color:#15803D; }
.feedback.bad{ color:#BE123C; }

.next-btn-wrap{ text-align:center; margin-top:20px; }
.btn{
  background:var(--accent); color:#fff; border:none; padding:14px 34px; border-radius:999px;
  font-size:1.15rem; font-weight:700; cursor:pointer; box-shadow:var(--shadow-sm);
}
.btn:hover{ filter:brightness(1.07); transform:translateY(-2px); transition:.12s; }
.btn.secondary{ background:var(--white); color:var(--accent-dark); border:3px solid var(--accent-light); }

/* ---------- results screen ---------- */
.results{ text-align:center; }
.results .stars{ font-size:3rem; margin:8px 0 14px; letter-spacing:6px; }
.results h2{ font-size:2rem; color:var(--accent-dark); margin-bottom:6px; }
.results p{ font-size:1.15rem; color:#6b5b3e; }
.results .actions{ display:flex; gap:14px; justify-content:center; margin-top:22px; flex-wrap:wrap; }

/* ---------- confetti ---------- */
.confetti-piece{
  position:fixed; top:-20px; font-size:1.6rem; z-index:50; pointer-events:none;
  animation:fall linear forwards;
}
@keyframes fall{
  to{ transform:translateY(110vh) rotate(360deg); opacity:.9; }
}

/* utility */
.center{ text-align:center; }
.mt-24{ margin-top:24px; }