:root {
  --bg: #fff8e1;
  --ink: #3e2723;
  --accent: #7e57c2;
  --kid: #ffb74d;
  --card: #ffffff;
  --good: #66bb6a;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

button {
  font: inherit;
  color: inherit;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
}

/* ---------- Screens ---------- */
.screen {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.screen.active { display: flex; }

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vmin;
  padding: 2vmin 3vmin;
}

.icon-btn {
  width: 13vmin;
  height: 13vmin;
  max-width: 96px;
  max-height: 96px;
  border-radius: 50%;
  background: var(--card);
  font-size: min(6.5vmin, 48px);
  box-shadow: 0 0.8vmin 0 rgba(0,0,0,.12);
  flex: none;
}
.icon-btn:active { transform: translateY(0.5vmin); box-shadow: 0 0.3vmin 0 rgba(0,0,0,.12); }

.big-play {
  width: 40vmin;
  height: 40vmin;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 18vmin;
  padding-left: 4vmin;
  box-shadow: 0 2vmin 0 #5e35b1;
  animation: pulse 1.6s ease-in-out infinite;
}

/* ---------- Start & home ---------- */
#start { align-items: center; justify-content: center; background: linear-gradient(#ede7f6, var(--bg)); }

#home { align-items: center; justify-content: center; gap: 5vmin; }
#home h1 { margin: 0; font-size: 9vmin; }
.kids { display: flex; gap: 4vmin; flex-wrap: wrap; justify-content: center; }
.kid-btn {
  width: 31vmin;
  height: 42vmin;
  border-radius: 6vmin;
  background: var(--kid);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vmin;
  box-shadow: 0 1.6vmin 0 rgba(0,0,0,.18);
}
.kid-btn:active { transform: translateY(1vmin); box-shadow: 0 0.6vmin 0 rgba(0,0,0,.18); }
.kid-btn .avatar { font-size: 20vmin; line-height: 1; }
.kid-btn .name { font-size: 6vmin; font-weight: 800; }

/* ---------- Map ---------- */
#map { background: linear-gradient(var(--kid), var(--bg) 60%); }
.map-title { font-size: 7vmin; font-weight: 800; display: flex; align-items: center; gap: 2vmin; }
.map-stars { font-size: 5vmin; font-weight: 800; background: var(--card); border-radius: 5vmin; padding: 1vmin 3vmin; }
.levels {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 4vmin;
  padding: 3vmin 6vmin 6vmin;
  overflow-y: auto;
}
.level-btn {
  position: relative;
  width: 15vmin;
  height: 15vmin;
  border-radius: 50%;
  background: var(--card);
  font-size: 7.5vmin;
  box-shadow: 0 1.2vmin 0 rgba(0,0,0,.15);
}
.level-btn:active { transform: translateY(0.8vmin); box-shadow: 0 0.4vmin 0 rgba(0,0,0,.15); }
.level-btn.locked { background: #d7ccc8; filter: grayscale(1); opacity: .6; }
.level-btn.current { animation: pulse 1.4s ease-in-out infinite; outline: 1.2vmin solid var(--accent); }
.level-btn .badge { position: absolute; right: -1vmin; bottom: -1vmin; font-size: 5vmin; }

/* ---------- Play ---------- */
#play { background: linear-gradient(var(--bg), #fff); }
.dots { display: flex; gap: 2vmin; }
.dots span { width: 4vmin; height: 4vmin; border-radius: 50%; background: #d7ccc8; transition: background .3s, transform .3s; }
.dots span.done { background: var(--good); transform: scale(1.2); }

.stage {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5vmin;
  padding: 2vmin 4vmin 6vmin;
}

.row { display: flex; flex-wrap: wrap; gap: 4vmin; justify-content: center; align-items: center; }

.choice {
  min-width: 24vmin;
  height: 24vmin;
  padding: 0 3vmin;
  border-radius: 5vmin;
  background: var(--card);
  font-size: 15vmin;
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1.2vmin 0 rgba(0,0,0,.12);
  transition: transform .15s;
}
.choice:active { transform: scale(.95); }
.choice.number { font-size: 13vmin; font-weight: 800; color: var(--accent); }
.choice .label { font-size: 4.5vmin; font-weight: 800; margin-top: 1vmin; }
.choice.correct { background: #c8e6c9; animation: bounce .6s; }
.choice.dim { opacity: .35; }

.swatch { width: 26vmin; height: 26vmin; border-radius: 50%; box-shadow: 0 1.2vmin 0 rgba(0,0,0,.18); }
.swatch.correct { animation: bounce .6s; outline: 1.5vmin solid #fff; }

.choice.shape { padding: 3vmin; }
.choice.shape svg { width: 18vmin; height: 18vmin; }
.choice.tall { height: 30vmin; min-width: 30vmin; }
.dots-label { display: grid; grid-template-columns: repeat(5, 3vmin); gap: 1vmin; margin-top: 2vmin; }
.dots-label i { width: 3vmin; height: 3vmin; border-radius: 50%; background: var(--ink); }
.size-item { background: none; line-height: 1; padding: 1vmin; }
.size-item.correct { animation: bounce .6s; }
.pattern { display: flex; flex-wrap: wrap; justify-content: center; gap: 2vmin; font-size: 10vmin; line-height: 1; max-width: 95vw; }
.pattern .gap { width: 13vmin; height: 13vmin; border: 1vmin dashed var(--accent); border-radius: 3vmin; display: flex; align-items: center; justify-content: center; color: var(--accent); font-weight: 900; }
.pattern .gap.filled { border-style: solid; background: #c8e6c9; animation: bounce .6s; }

.equation, .word { display: flex; align-items: center; gap: 2vmin; font-size: 14vmin; font-weight: 900; color: var(--accent); line-height: 1; white-space: pre; }
.word { font-size: 12vmin; letter-spacing: 1vmin; gap: 0; }
.equation .gap, .word .gap { min-width: 14vmin; height: 16vmin; padding: 0 2vmin; border: 1vmin dashed var(--accent); border-radius: 3vmin; display: inline-flex; align-items: center; justify-content: center; }
.word .gap { min-width: 11vmin; height: 14vmin; margin: 0 1vmin; letter-spacing: 0; }
.equation .gap.filled, .word .gap.filled { border-style: solid; background: #c8e6c9; animation: bounce .6s; }
.picture { font-size: 18vmin; line-height: 1; }
.order-line { display: flex; gap: 3vmin; min-height: 10vmin; font-size: 9vmin; font-weight: 900; color: var(--good); }
.choice:disabled { cursor: default; }

.big-letter { font-size: 22vmin; font-weight: 900; color: var(--accent); line-height: 1; }

.items { display: flex; flex-wrap: wrap; gap: 2vmin; justify-content: center; max-width: 90vmin; font-size: 11vmin; line-height: 1; }
.items.small { font-size: 8vmin; max-width: 40vmin; }
.plus { font-size: 12vmin; font-weight: 900; color: var(--accent); }

.tap-item {
  font-size: 18vmin;
  line-height: 1;
  background: none;
  padding: 1vmin;
  transition: transform .2s, opacity .2s;
}
.tap-item.tapped { transform: scale(.8); opacity: .5; }
.tap-item .n { display: block; font-size: 7vmin; font-weight: 900; color: var(--accent); height: 8vmin; }

/* Balloons */
.balloon-field { position: absolute; inset: 0; }
.balloon {
  position: absolute;
  width: 16vmin;
  height: 20vmin;
  border-radius: 50% 50% 50% 50% / 45% 45% 55% 55%;
  box-shadow: inset -2vmin -2vmin 0 rgba(0,0,0,.12);
  animation: bob 2.4s ease-in-out infinite;
}
.balloon::before {
  content: "";
  position: absolute;
  left: 22%; top: 15%;
  width: 22%; height: 18%;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
}
.balloon::after {
  content: "";
  position: absolute;
  left: 50%; top: 100%;
  width: 0.5vmin; height: 10vmin;
  background: rgba(0,0,0,.25);
}
.balloon.popped { animation: pop .25s forwards; pointer-events: none; }

/* Memory */
.memory { display: grid; gap: 2.5vmin; }
.card {
  width: 17vmin;
  height: 17vmin;
  border-radius: 3vmin;
  background: var(--accent);
  font-size: 11vmin;
  box-shadow: 0 1vmin 0 rgba(0,0,0,.18);
  transition: transform .25s, background .25s;
}
.card span { visibility: hidden; }
.card.open { background: var(--card); transform: rotateY(180deg); }
.card.open span { visibility: visible; display: inline-block; transform: rotateY(180deg); }
.card.matched { background: #c8e6c9; }

/* Character (all sizes in em, so setting font-size scales the whole figure) */
.char { position: relative; width: 10em; height: 12em; border-radius: 1.5em; flex: none; overflow: hidden; }
.char.has-bg { box-shadow: inset 0 0 0 .3em rgba(255,255,255,.5); }
.char > span { position: absolute; line-height: 1; }
.char-body {
  position: absolute;
  left: 20%; top: 30%;
  width: 6em; height: 7.4em;
  border-radius: 3em 3em 2em 2em;
  box-shadow: inset -.6em -.6em 0 rgba(0,0,0,.1);
}
.char-body i { position: absolute; display: block; }
.char-body .eye { top: 1.4em; width: 1.4em; height: 1.4em; background: #fff; border-radius: 50%; }
.char-body .eye::after { content: ""; position: absolute; left: .4em; top: .45em; width: .7em; height: .7em; border-radius: 50%; background: #3e2723; }
.char-body .eye.l { left: 1.2em; }
.char-body .eye.r { right: 1.2em; }
.char-body .mouth { top: 3.1em; left: 2em; width: 2em; height: 1em; border-bottom: .35em solid #3e2723; border-radius: 0 0 1em 1em; }
.char-body .cheek { top: 3.3em; width: 1em; height: .6em; border-radius: 50%; background: rgba(255,105,135,.45); }
.char-body .cheek.l { left: .5em; }
.char-body .cheek.r { right: .5em; }
.char-hat { font-size: 3.6em; left: 50%; top: 5%; transform: translateX(-50%); }
.char-face { font-size: 3em; left: 50%; top: 35%; transform: translateX(-50%); }
.char-hand { font-size: 2.8em; left: 70%; top: 56%; }
.char-pet { font-size: 3em; left: 2%; top: 72%; }
.char-deco { font-size: 2em; right: 6%; top: 4%; }
.char.pop-in { animation: bounce .7s; }

.kid-btn .char { font-size: 2.2vmin; }
/* Smaller cards when a domain shows more than three kids, so they still fit on one screen. */
.kids.many { gap: 3vmin; max-width: 96vw; }
.kids.many .kid-btn { width: 24vmin; height: 32vmin; gap: 1vmin; }
.kids.many .kid-btn .char { font-size: 1.7vmin; }
.kids.many .kid-btn .name { font-size: 4.5vmin; }
.map-title { background: none; }
.map-title .char { font-size: 1vmin; border-radius: 2vmin; }

/* Reward & wardrobe */
#reward, #wardrobe { background: radial-gradient(circle at 30% 40%, #fff, var(--kid)); }
.reward-layout { flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6vmin; padding: 3vmin; }
.reward-char .char, .wardrobe-char .char { font-size: 4.5vmin; box-shadow: 0 1.5vmin 0 rgba(0,0,0,.12); }
.reward-char .char:not(.has-bg), .wardrobe-char .char:not(.has-bg) { background: rgba(255,255,255,.6); }
.reward-side { display: flex; flex-direction: column; align-items: center; gap: 5vmin; }
.reward-items { max-width: 60vmin; }
.wardrobe-items { max-width: 70vmin; gap: 3vmin; }
.wardrobe-tabs { gap: 2vmin; }
.tab.active { background: var(--accent); }
.icon-spacer { width: 13vmin; max-width: 96px; flex: none; }
.choice.item { min-width: 20vmin; height: 20vmin; font-size: 12vmin; }
.choice.item.worn { outline: 1vmin solid var(--good); }
.item-swatch { width: 13vmin; height: 13vmin; border-radius: 50%; }
.item-bg { width: 15vmin; height: 15vmin; border-radius: 3vmin; font-size: 9vmin; display: flex; align-items: center; justify-content: center; }
.big-play.small { width: 22vmin; height: 22vmin; font-size: 10vmin; padding-left: 2vmin; background: var(--good); box-shadow: 0 1.5vmin 0 #388e3c; }
.big-play[hidden] { display: none; }

/* Celebration */
#celebrate {
  position: fixed;
  inset: 0;
  background: rgba(126, 87, 194, .92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6vmin;
  z-index: 10;
  overflow: hidden;
}
#celebrate[hidden] { display: none; }
.big-star { font-size: 40vmin; line-height: 1; animation: spin-in .9s cubic-bezier(.2, 1.6, .4, 1); }
#celebrate .big-play { width: 26vmin; height: 26vmin; font-size: 12vmin; background: var(--good); box-shadow: 0 1.5vmin 0 #388e3c; }
.confetti span { position: absolute; top: -10vmin; font-size: 7vmin; animation: fall linear forwards; }

/* ---------- Animations ---------- */
.shake { animation: shake .45s; }
@keyframes shake { 20%, 60% { transform: translateX(-2.5vmin); } 40%, 80% { transform: translateX(2.5vmin); } }
@keyframes bounce { 40% { transform: scale(1.2); } 70% { transform: scale(.95); } }
@keyframes pulse { 50% { transform: scale(1.06); } }
@keyframes bob { 50% { transform: translateY(-3vmin); } }
@keyframes pop { to { transform: scale(1.6); opacity: 0; } }
@keyframes spin-in { from { transform: scale(0) rotate(-180deg); } }
@keyframes fall { to { transform: translateY(120vh) rotate(540deg); } }