@font-face {
  font-family: 'Andika';
  src: url('../fonts/Andika-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg: #fff7d6;
  --ink: #3a2e5c;
  --c0: #ff6b6b;
  --c1: #4dabf7;
  --c2: #9775fa;
  --c3: #f783ac;
  --good: #2fb344;
  --gold: #ffd43b;
  --font: 'Andika', 'Arial Rounded MT Bold', 'Trebuchet MS', system-ui, sans-serif;
}

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

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 700;
}

button { font-family: inherit; font-weight: 700; color: inherit; cursor: pointer; }

#app { position: relative; height: 100vh; height: 100dvh; }

.hidden { display: none !important; }

/* ---------- Screens ---------- */
.screen {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  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; }

/* ---------- Start ---------- */
#screen-start { justify-content: center; gap: 3vmin; }
.title { margin: 0; font-size: min(22vmin, 140px); letter-spacing: 2vmin; line-height: 1; }
.title span:nth-child(1) { color: var(--c0); }
.title span:nth-child(2) { color: var(--c1); }
.title span:nth-child(3) { color: var(--good); }
.title.small { font-size: min(12vmin, 72px); letter-spacing: 0; color: var(--c2); }
.hint-text { margin: 0; font-size: min(6vmin, 28px); opacity: .7; }

.profiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 4vmin; padding: 0 4vmin; }
.profile-btn {
  width: min(28vmin, 150px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: none;
  background: #fff;
  font-size: min(16vmin, 84px);
  box-shadow: 0 8px 0 rgba(0, 0, 0, .12);
}
.profile-btn:active { transform: translateY(4px); box-shadow: 0 4px 0 rgba(0, 0, 0, .12); }
.profile-btn.add { background: transparent; border: 6px dashed #d6c99a; color: #b8a86c; box-shadow: none; }
.profile-btn.first { background: var(--good); border: none; color: #fff; box-shadow: 0 8px 0 rgba(0, 0, 0, .15); animation: pulse 1.2s ease-in-out infinite; }

.parent-btn {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 12px);
  right: calc(env(safe-area-inset-right) + 12px);
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 14px;
  background: rgba(255, 255, 255, .6);
  font-size: 24px;
  overflow: hidden;
  opacity: .6;
}
.parent-btn::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 5px;
  width: 0;
  background: var(--c1);
}
.parent-btn.holding::after { width: 100%; transition: width 3s linear; }

/* ---------- Mascot ---------- */
.mascot { font-size: min(16vmin, 84px); line-height: 1; }
.mascot.big { font-size: min(30vmin, 170px); }
.mascot.talking { animation: talk .35s ease-in-out infinite alternate; }
.bounce { animation: bounce 1s ease-in-out infinite; }

/* ---------- Play ---------- */
.topbar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2vmin;
  padding: 3vmin 4vmin 1vmin;
}
.icon-btn {
  width: min(15vmin, 64px);
  height: min(15vmin, 64px);
  border: none;
  border-radius: 18px;
  background: #fff;
  font-size: min(8vmin, 34px);
  box-shadow: 0 5px 0 rgba(0, 0, 0, .1);
  flex: none;
}
.icon-spacer { width: min(15vmin, 64px); }
.dots { display: flex; gap: 1.5vmin; flex-wrap: wrap; justify-content: center; }
.dot { width: min(3.5vmin, 18px); aspect-ratio: 1; border-radius: 50%; background: #e9dfbd; }
.dot.done { background: var(--gold); }
.counter { font-size: min(5.5vmin, 26px); text-align: right; transition: transform .2s; }
.counter.bump { transform: scale(1.25); }
.sticker-progress { height: 8px; margin-top: 4px; border-radius: 4px; background: #e9dfbd; overflow: hidden; }
#sticker-bar { height: 100%; width: 0; background: var(--c3); transition: width .6s; }

.mascot-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 3vmin;
  padding: 1vmin 4vmin;
}
.bubble {
  flex: 1;
  background: #fff;
  border-radius: 24px;
  padding: 2.5vmin 4vmin;
  font-size: min(6vmin, 30px);
  min-height: 1.5em;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .08);
}
.replay { width: min(18vmin, 80px); height: min(18vmin, 80px); border-radius: 50%; font-size: min(10vmin, 42px); }

.stage {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4vmin;
  min-height: 0;
}

.tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 5vmin;
  padding: 0 4vmin;
}
.tile {
  --size: min(38vmin, 200px);
  width: var(--size);
  height: var(--size);
  border: none;
  border-radius: 28px;
  color: #fff;
  font-size: calc(var(--size) * .62);
  line-height: 1;
  box-shadow: 0 8px 0 rgba(0, 0, 0, .15);
  transition: opacity .25s, transform .25s, filter .25s;
}
.tiles.n3 .tile { --size: min(28vmin, 180px); }
.tiles.n4 { max-width: calc(2 * min(36vmin, 190px) + 9vmin); }
.tiles.n4 .tile { --size: min(36vmin, 190px); }
.tile.c0 { background: var(--c0); }
.tile.c1 { background: var(--c1); }
.tile.c2 { background: var(--c2); }
.tile.c3 { background: var(--c3); }
.tile.dimmed { opacity: .3; filter: grayscale(1); }
.tile.wobble { animation: wobble .5s; }
.tile.glow { outline: 8px solid var(--gold); animation: glow 1s ease-in-out infinite; }
.tile.correct { background: var(--good); outline: none; animation: pop .5s; }
.tiles.solved .tile:not(.correct) { display: none; }

.example { display: flex; align-items: center; gap: 4vmin; }
.example-emoji { font-size: min(24vmin, 140px); line-height: 1; animation: bounce-in .6s; }
.example-word { font-size: min(12vmin, 70px); }
.example-word mark { background: none; color: var(--c0); }

.next-slot { height: min(30vmin, 140px); display: flex; align-items: center; padding-bottom: 2vmin; }
.next-btn {
  width: min(26vmin, 120px);
  height: min(26vmin, 120px);
  border: none;
  border-radius: 50%;
  background: var(--good);
  color: #fff;
  font-size: min(14vmin, 64px);
  box-shadow: 0 8px 0 rgba(0, 0, 0, .15);
  animation: pulse 1.2s ease-in-out infinite;
}

@media (orientation: landscape) {
  .stage { flex-direction: row; }
  .tiles.n3 .tile, .tiles.n2 .tile { --size: min(30vmin, 200px); }
  .tiles.n4 .tile { --size: min(22vmin, 150px); }
  .tiles.n4 { max-width: calc(2 * min(22vmin, 150px) + 9vmin); }
  .next-slot { height: min(24vmin, 120px); }
}

/* ---------- End ---------- */
#screen-end { justify-content: center; gap: 4vmin; }
.end-stars { font-size: min(10vmin, 52px); text-align: center; padding: 0 6vmin; }
.end-buttons { display: flex; gap: 5vmin; }
.big-btn {
  width: min(24vmin, 120px);
  height: min(24vmin, 120px);
  border: none;
  border-radius: 50%;
  background: #fff;
  font-size: min(12vmin, 56px);
  box-shadow: 0 8px 0 rgba(0, 0, 0, .12);
}
.big-btn.go { background: var(--good); color: #fff; animation: pulse 1.2s ease-in-out infinite; }

/* ---------- Sticker book ---------- */
.book-title { margin: 0; font-size: min(10vmin, 44px); }
.sticker-book { width: 100%; overflow-y: auto; padding: 2vmin 4vmin 6vmin; }
.sticker-book h3 { margin: 3vmin 0 1vmin; font-size: min(6vmin, 28px); }
.sticker-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2vmin; }
.sticker {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: #fff;
  font-size: min(11vmin, 56px);
}
.sticker.locked { background: #f1e8c7; color: #c9bb8a; font-size: min(7vmin, 34px); }

/* ---------- Grown-ups ---------- */
.parent {
  align-items: stretch;
  overflow-y: auto;
  padding: 24px max(24px, env(safe-area-inset-right)) 40px max(24px, env(safe-area-inset-left));
  font-weight: 400;
  font-family: system-ui, sans-serif;
  gap: 12px;
  background: #fffdf4;
}
.parent h2, .parent h3 { margin: 8px 0 0; font-family: var(--font); }
.parent label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.parent select { font-size: 17px; padding: 10px; border-radius: 10px; border: 1px solid #ccc; background: #fff; }
.note { margin: 0; font-size: 14px; opacity: .75; }
.plain-btn { font-size: 17px; padding: 12px 16px; border-radius: 12px; border: 1px solid #ccc; background: #fff; font-family: system-ui, sans-serif; font-weight: 600; }
.plain-btn.primary { background: var(--c1); color: #fff; border: none; }
.plain-btn.danger { color: #c92a2a; }
.player-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #eee; }
.player-row .avatar { font-size: 36px; }
.player-row .info { flex: 1; font-size: 14px; }
.player-row .plain-btn { padding: 8px 12px; font-size: 14px; }

/* ---------- Overlays & effects ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(58, 46, 92, .45);
}
.overlay-card {
  background: #fff;
  border-radius: 32px;
  padding: 6vmin 10vmin;
  text-align: center;
  font-size: min(8vmin, 40px);
  animation: bounce-in .5s;
}
.overlay-card p { margin: 2vmin 0 0; }
.sticker-new { font-size: min(34vmin, 180px); line-height: 1; animation: spin-in .8s; }

.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }
.confetti-layer i {
  position: absolute;
  top: -20px;
  width: 12px;
  height: 16px;
  border-radius: 3px;
  animation: fall 1.4s linear forwards;
}

.flyer { position: fixed; z-index: 35; font-size: 52px; pointer-events: none; transform: translate(-50%, -50%); }

.sound-warning {
  position: fixed;
  left: calc(env(safe-area-inset-left) + 12px);
  bottom: calc(env(safe-area-inset-bottom) + 12px);
  font-size: 32px;
  background: #fff;
  border-radius: 50%;
  padding: 8px;
  z-index: 20;
}

/* ---------- Animations ---------- */
@keyframes wobble {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-14px) rotate(-5deg); }
  40% { transform: translateX(14px) rotate(5deg); }
  60% { transform: translateX(-8px) rotate(-3deg); }
  80% { transform: translateX(8px) rotate(3deg); }
}
@keyframes glow { 50% { transform: scale(1.07); outline-color: #fff3bf; } }
@keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes pulse { 50% { transform: scale(1.08); } }
@keyframes talk { from { transform: rotate(-6deg); } to { transform: rotate(6deg) scale(1.05); } }
@keyframes bounce { 50% { transform: translateY(-4vmin); } }
@keyframes bounce-in { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes spin-in { from { transform: scale(0) rotate(-200deg); } to { transform: scale(1) rotate(0); } }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}