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

:root {
  --blue: #aee0ff;
  --pink: #ffd6e7;
  --cream: #fff7ec;
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(180deg, #dff1ff 0%, #f3e7ff 55%, #ffeaf2 100%);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.sky { position: absolute; inset: 0; pointer-events: none; }
.star {
  position: absolute; width: 10px; height: 10px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 0 12px 2px rgba(255,255,255,.85);
  animation: twinkle 3s ease-in-out infinite;
}
.star:nth-child(2) { animation-delay: .8s; }
.star:nth-child(3) { animation-delay: 1.6s; }
.star:nth-child(4) { animation-delay: .4s; }
.star:nth-child(5) { animation-delay: 1.2s; }
@keyframes twinkle { 0%,100%{opacity:.4;transform:scale(.8)} 50%{opacity:1;transform:scale(1.15)} }

.stage {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px;
}

.avatar {
  width: min(62vw, 340px);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 24px 60px rgba(90,120,180,.35), 0 0 0 10px rgba(255,255,255,.5);
  animation: breathe 3.6s ease-in-out infinite;
}
.avatar.talking { animation: talk .38s ease-in-out infinite; }
.avatar.listening { animation: listen .5s ease-in-out infinite; }

@keyframes breathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.035)} }
@keyframes talk { 0%,100%{transform:scale(1) translateY(0)} 50%{transform:scale(1.04) translateY(-4px)} }
@keyframes listen { 0%,100%{transform:scale(1.02)} 50%{transform:scale(1.06)} }

.player { display: none; }

.picture {
  display: none;
  width: min(82vw, 460px);
  border-radius: 22px;
  object-fit: cover;
  box-shadow: 0 24px 60px rgba(90,120,180,.35), 0 0 0 10px rgba(255,255,255,.5);
  animation: kenburns 8s ease-in-out infinite alternate;
  cursor: pointer;
}
@keyframes kenburns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.15) translate(-2%, -1.5%); }
}

.bubble {
  max-width: 78vw;
  padding: 14px 20px;
  border-radius: 22px;
  background: #fff;
  color: #445;
  font-size: clamp(18px, 4.5vw, 26px);
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 8px 24px rgba(90,120,180,.22);
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s, transform .3s;
}
.bubble.show { opacity: 1; transform: translateY(0); }

.thinking {
  font-size: 26px; letter-spacing: 6px; color: #8899cc;
  opacity: 0; transition: opacity .2s;
}
.thinking.show { opacity: 1; animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:.35} 50%{opacity:1} }

.controls {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 22px 0 calc(28px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}

.mic {
  width: 78px; height: 78px; border-radius: 50%;
  border: none; cursor: pointer;
  background: linear-gradient(180deg, #7ea8ff, #5b8bff);
  color: #fff; font-size: 30px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(80,120,255,.45);
  transition: transform .15s, box-shadow .15s;
}
.mic:active { transform: scale(.94); }
.mic.recording {
  background: linear-gradient(180deg, #ff7d9d, #ff5c86);
  box-shadow: 0 0 0 12px rgba(255,92,134,.22), 0 10px 26px rgba(255,92,134,.5);
  animation: pulse 1s ease-in-out infinite;
}

.hint { color: #7a8bb0; font-size: 14px; }

.hidden { display: none !important; }

/* ===== монетки + кнопка «Играть» ===== */
.coins-badge {
  position: absolute; top: 14px; right: 14px;
  z-index: 20;
  padding: 8px 14px; border-radius: 999px;
  background: #fff; color: #b8860b;
  font-size: 18px; font-weight: 700;
  box-shadow: 0 6px 18px rgba(120,90,40,.18);
}
.play-btn {
  position: absolute; top: 14px; left: 14px;
  z-index: 20;
  width: 56px; height: 56px; border-radius: 50%;
  border: none; cursor: pointer;
  background: linear-gradient(180deg, #ffb46b, #ff8f4d);
  font-size: 26px; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(255,140,70,.4);
  transition: transform .15s;
}
.play-btn:active { transform: scale(.94); }

/* ===== оверлей активностей ===== */
.overlay {
  position: absolute; inset: 0; z-index: 30;
  background: linear-gradient(180deg, #eaf6ff 0%, #f3ecff 60%, #ffeaf2 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.overlay > div { width: 100%; max-width: 520px; text-align: center; }
.act-title { color: #556; font-size: clamp(22px, 5vw, 30px); margin-bottom: 20px; }
.activity-list { display: flex; flex-direction: column; gap: 14px; }
.act-tile {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: 20px;
  border: none; cursor: pointer;
  background: #fff; box-shadow: 0 8px 22px rgba(90,120,180,.18);
  font-size: 20px; color: #445;
  transition: transform .12s;
}
.act-tile:active { transform: scale(.97); }
.act-emoji { font-size: 30px; }
.act-name { flex: 1; text-align: left; font-weight: 600; }
.act-level {
  background: #eef3ff; color: #6a7fb0;
  padding: 4px 10px; border-radius: 999px; font-size: 14px;
}
.act-empty { color: #889; padding: 30px; }

/* ===== карточка ===== */
.card-stage {
  background: #fff; border-radius: 26px;
  padding: 34px 20px; margin-bottom: 18px;
  box-shadow: 0 10px 28px rgba(90,120,180,.2);
}
.card-emoji { font-size: clamp(56px, 18vw, 110px); line-height: 1.1; }
.card-word { font-size: clamp(22px, 6vw, 32px); color: #667; margin-top: 8px; font-weight: 600; }
.card-question { font-size: clamp(18px, 4.5vw, 24px); color: #556; margin-bottom: 18px; }
.card-choices { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.choice-btn {
  min-width: 88px; padding: 20px 10px;
  font-size: clamp(30px, 9vw, 46px); font-weight: 700;
  color: #445; background: #fff;
  border: none; border-radius: 22px; cursor: pointer;
  box-shadow: 0 8px 22px rgba(90,120,180,.22);
  transition: transform .12s;
}
.choice-btn:active { transform: scale(.94); }
.choice-btn:disabled { opacity: .85; }
.choice-btn.correct { background: #b9f0c2; box-shadow: 0 0 0 4px #5fce72; }
.choice-btn.wrong { background: #ffd3d3; box-shadow: 0 0 0 4px #ff6b6b; }
.card-feedback { font-size: clamp(22px, 6vw, 30px); font-weight: 700; margin: 18px 0; min-height: 36px; }
.card-feedback.ok { color: #2f9e44; }
.card-feedback.bad { color: #e8590c; }
.card-next {
  padding: 14px 30px; border: none; border-radius: 999px;
  background: linear-gradient(180deg, #7ea8ff, #5b8bff);
  color: #fff; font-size: 20px; cursor: pointer;
  box-shadow: 0 8px 22px rgba(80,120,255,.4);
}
.close-btn {
  position: absolute; top: 14px; right: 14px;
  width: 46px; height: 46px; border-radius: 50%;
  border: none; cursor: pointer;
  background: #fff; color: #889; font-size: 20px;
  box-shadow: 0 6px 16px rgba(90,120,180,.22);
}