* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: #1a2238;
  overflow: hidden;
  font-family: 'Baloo 2', 'Comic Sans MS', 'Marker Felt', system-ui, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

#wrap {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  aspect-ratio: 16 / 9;
}

#game {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 12px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}

.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 1.4vmin;
  padding: 1.2vmin 1.8vmin;
  font-size: 2.6vmin;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,.45);
  pointer-events: none;
}

#hud-level {
  background: rgba(0,0,0,.35);
  padding: .3vmin 1.6vmin;
  border-radius: 99px;
}

#hud-hearts { letter-spacing: .3vmin; }

.hud-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.6vmin;
}

.hud-right span {
  background: rgba(0,0,0,.35);
  padding: .3vmin 1.4vmin;
  border-radius: 99px;
}

#hud button {
  pointer-events: auto;
  font-size: 2.8vmin;
  background: rgba(0,0,0,.35);
  border: none;
  border-radius: 99px;
  width: 5vmin; height: 5vmin;
  cursor: pointer;
  transition: transform .1s;
}
#hud button:hover { transform: scale(1.12); }

/* ---------- Level banner toast ---------- */
#banner {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,.95);
  color: #2b2d42;
  border-radius: 2.4vmin;
  padding: 2vmin 4vmin;
  text-align: center;
  font-size: 3.2vmin;
  font-weight: 800;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
  pointer-events: none;
  animation: bannerPop .45s cubic-bezier(.18,1.4,.4,1);
}
#banner small {
  display: block;
  font-size: 2.2vmin;
  font-weight: 700;
  color: #7b6cf6;
}
@keyframes bannerPop {
  from { transform: translateX(-50%) scale(.5); opacity: 0; }
  to   { transform: translateX(-50%) scale(1);  opacity: 1; }
}
#banner.fade-out { animation: bannerFade .5s forwards; }
@keyframes bannerFade { to { opacity: 0; transform: translateX(-50%) translateY(-3vmin); } }

/* ---------- Screens & panels ---------- */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 24, 50, 0.55);
  backdrop-filter: blur(3px);
  border-radius: 12px;
  z-index: 10;
}

.panel {
  background: linear-gradient(180deg, #fffdf5, #ffeFD9);
  border-radius: 3.5vmin;
  padding: 4vmin 6vmin;
  text-align: center;
  box-shadow: 0 14px 50px rgba(0,0,0,.45), inset 0 -6px 0 rgba(0,0,0,.07);
  max-width: 84%;
  max-height: 88%;
  overflow-y: auto;
  animation: panelPop .35s cubic-bezier(.18,1.4,.4,1);
}
@keyframes panelPop {
  from { transform: scale(.7); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

.title-emoji {
  font-size: 10vmin;
  animation: bounce 1.6s ease-in-out infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.8vmin); }
}

h1 {
  font-size: 8vmin;
  font-weight: 800;
  background: linear-gradient(90deg, #ff8c42, #ffd166, #6ec6ff, #a06cd5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: .5vmin 0 1vmin;
}

h2 {
  font-size: 5.4vmin;
  font-weight: 800;
  color: #2b2d42;
  margin-bottom: 1.6vmin;
}

.subtitle {
  font-size: 2.8vmin;
  color: #5d6184;
  font-weight: 700;
  margin-bottom: 2.6vmin;
}

.hint {
  margin-top: 2.4vmin;
  font-size: 2.1vmin;
  color: #8a8db0;
  font-weight: 600;
}

.big-btn {
  display: block;
  width: 100%;
  margin: 1.4vmin auto 0;
  font-family: inherit;
  font-size: 3.4vmin;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(180deg, #6fd96f, #3cb84a);
  border: none;
  border-radius: 99px;
  padding: 1.6vmin 5vmin;
  cursor: pointer;
  box-shadow: 0 .8vmin 0 #2c8a37, 0 1.2vmin 18px rgba(0,0,0,.25);
  transition: transform .08s, box-shadow .08s;
}
.big-btn:hover { transform: translateY(-2px); }
.big-btn:active { transform: translateY(.5vmin); box-shadow: 0 .2vmin 0 #2c8a37; }
.big-btn.alt {
  background: linear-gradient(180deg, #8ea2ff, #5d70e0);
  box-shadow: 0 .8vmin 0 #3c4cb0, 0 1.2vmin 18px rgba(0,0,0,.25);
  font-size: 2.7vmin;
}
.big-btn.alt:active { box-shadow: 0 .2vmin 0 #3c4cb0; }

/* ---------- Level select ---------- */
#level-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2vmin;
}

.level-card {
  font-family: inherit;
  background: linear-gradient(180deg, #fff, #eef2ff);
  border: .4vmin solid #d7defc;
  border-radius: 2.4vmin;
  padding: 2vmin 1.4vmin;
  width: 16vmin;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
  box-shadow: 0 .6vmin 0 #ccd4f5;
}
.level-card:hover:not(.locked) { transform: translateY(-.8vmin) scale(1.04); }
.level-card .lv-emoji { font-size: 5vmin; }
.level-card .lv-num   { font-size: 2vmin; font-weight: 800; color: #7b6cf6; }
.level-card .lv-name  { font-size: 2vmin; font-weight: 700; color: #2b2d42; line-height: 1.15; }
.level-card .lv-stars { font-size: 2.2vmin; margin-top: .6vmin; }
.level-card.locked {
  filter: grayscale(1);
  opacity: .55;
  cursor: not-allowed;
}

/* ---------- Question modal ---------- */
#modal { background: rgba(20, 24, 50, 0.65); }

.modal-card { min-width: 56%; position: relative; }

#q-mascot {
  font-size: 7vmin;
  animation: bounce 1.6s ease-in-out infinite;
}

#q-prompt {
  font-size: 2.8vmin;
  font-weight: 800;
  color: #7b6cf6;
  min-height: 3.4vmin;
}
#q-prompt.praise { color: #2faa4a; animation: pop .3s; }
#q-prompt.oops   { color: #e85d75; animation: shake .35s; }

#q-text {
  font-size: 8vmin;
  font-weight: 800;
  color: #2b2d42;
  margin: 1vmin 0 2vmin;
  letter-spacing: .4vmin;
}

#q-speak {
  position: absolute;
  top: 2vmin; right: 2.4vmin;
  font-size: 3.4vmin;
  background: #eef2ff;
  border: none;
  border-radius: 99px;
  width: 6vmin; height: 6vmin;
  cursor: pointer;
}
#q-speak:hover { transform: scale(1.1); }

#q-answers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6vmin;
}
#q-answers.three { grid-template-columns: repeat(3, 1fr); }

.answer-btn {
  font-family: inherit;
  font-size: 4.6vmin;
  font-weight: 800;
  color: #2b2d42;
  background: linear-gradient(180deg, #fff, #e8ecff);
  border: .45vmin solid #c9d2fa;
  border-radius: 2.2vmin;
  padding: 1.8vmin 1vmin;
  cursor: pointer;
  box-shadow: 0 .7vmin 0 #c2cbf2;
  transition: transform .08s;
}
.answer-btn small { display: block; font-size: 1.9vmin; color: #8a8db0; }
.answer-btn:hover:not(:disabled) { transform: translateY(-.4vmin); }
.answer-btn:disabled { cursor: default; }
.answer-btn.correct {
  background: linear-gradient(180deg, #8be78b, #4ccb5d);
  border-color: #3cb84a;
  box-shadow: 0 .7vmin 0 #2c8a37;
  color: #fff;
  animation: pop .35s;
}
.answer-btn.wrong {
  background: linear-gradient(180deg, #ffd2da, #ffb3c0);
  border-color: #e85d75;
  box-shadow: 0 .7vmin 0 #d04a62;
  opacity: .6;
  animation: shake .35s;
}
@keyframes pop {
  0% { transform: scale(1); } 50% { transform: scale(1.12); } 100% { transform: scale(1); }
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-1vmin); }
  75% { transform: translateX(1vmin); }
}

#q-hearts { margin-top: 2.4vmin; font-size: 3vmin; letter-spacing: .4vmin; }

.win-stars { font-size: 8vmin; margin: 1vmin 0; animation: pop .5s; }

/* ---------- Touch controls ---------- */
#touch {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
#touch button {
  pointer-events: auto;
  position: absolute;
  bottom: 3vmin;
  width: 13vmin; height: 13vmin;
  font-size: 5.4vmin;
  color: #fff;
  background: rgba(255,255,255,.18);
  border: .5vmin solid rgba(255,255,255,.4);
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
#touch button:active { background: rgba(255,255,255,.4); }
#t-left  { left: 3vmin; }
#t-right { left: 18.5vmin; }
#t-jump  { right: 3vmin; }