/* АйЗбука — демо-урок. Палитра из логотипа: фиолетовый → розовый → бирюзовый */
:root {
  --bg: #f4f2fb;
  --card: #ffffff;
  --ink: #2c2a4a;
  --muted: #6d6a8a;
  --violet: #5b4bd6;
  --pink: #ff6fa3;
  --teal: #3cc4c9;
  --ok: #2fb872;
  --bad: #ef5b5b;
  --grad: linear-gradient(120deg, #b01f73 0%, #2c8fd6 40%, #22b8dd 58%, #f5475c 82%, #ff7a3d 100%);
  --shadow: 0 6px 20px rgba(60, 40, 140, .12);
  --r: 22px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 600 18px/1.35 "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
}
#app { min-height: 100%; display: flex; flex-direction: column; max-width: 900px; margin: 0 auto;
  padding: calc(12px + var(--safe-t)) 16px calc(16px + var(--safe-b)); }
button { font: inherit; color: inherit; border: 0; cursor: pointer; }

/* ── шапка ── */
.top { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.top .back { width: 44px; height: 44px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow); font-size: 22px; }
.top .ttl { flex: 1; font-weight: 800; font-size: 17px; color: var(--muted); }
.progress { display: flex; gap: 6px; }
.progress i { width: 14px; height: 14px; border-radius: 50%; background: #dcd8f0; }
.progress i.cur { background: var(--violet); transform: scale(1.2); }
.progress i.ok { background: var(--ok); }
.progress i.bad { background: var(--pink); }

/* ── старт ── */
.hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; }
.mark { width: 132px; height: 132px; }
.word { font-weight: 900; font-size: 46px; letter-spacing: 1px; line-height: 1;
  background: linear-gradient(90deg, #3d4466, #4a3fa8 40%, #3f7f9e 75%, #57bcc4);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.tag { color: var(--muted); font-size: 16px; letter-spacing: .5px; text-transform: uppercase; }
.lesson-card { margin-top: 18px; width: 100%; max-width: 420px; background: var(--card); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 18px; text-align: left; }
.lesson-card .meta { color: var(--muted); font-size: 14px; }
.lesson-card h2 { margin: 4px 0 6px; font-size: 22px; }
.lesson-card .stars { font-size: 22px; letter-spacing: 2px; }
.big-btn { display: block; width: 100%; margin-top: 14px; padding: 18px; border-radius: 18px; background: var(--grad);
  color: #fff; font-size: 22px; font-weight: 900; box-shadow: 0 8px 22px rgba(91, 75, 214, .35); }
.big-btn:active { transform: scale(.98); }
.ghost-btn { padding: 14px 18px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); font-weight: 800; }
.install { margin-top: 10px; font-size: 14px; color: var(--muted); max-width: 420px; }
.install button { color: var(--violet); background: none; font-weight: 800; padding: 6px; }

/* ── учительница ── */
.teacher { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; }
.ava { flex: 0 0 52px; height: 52px; border-radius: 50%; background: var(--grad); display: grid; place-items: center;
  color: #fff; font-weight: 900; font-size: 26px; box-shadow: var(--shadow); position: relative; }
.ava.talk::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 3px solid var(--pink);
  animation: pulse 1s ease-out infinite; }
@keyframes pulse { from { opacity: .9; transform: scale(.9); } to { opacity: 0; transform: scale(1.25); } }
.bubble { background: var(--card); border-radius: 4px 18px 18px 18px; padding: 10px 14px; box-shadow: var(--shadow);
  font-size: 17px; min-height: 52px; }

/* ── доска ── */
.board { flex: 1; background: #2f5d50; background-image: radial-gradient(circle at 30% 20%, #3a6e60, #2a5246);
  border-radius: var(--r); border: 8px solid #b88a5a; color: #fff; padding: 16px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; min-height: 260px; box-shadow: var(--shadow); }
.board .apples { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 460px; }
.board .apples .grp { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 6px; border-radius: 14px; }
.board .apples .grp.extra { border: 2px dashed #ffe38a; position: relative; }
.board .apples .grp.gone { border: 2px dashed #ffb0b0; }
.board .apples .grp.gone svg { opacity: .28; }
.board .cap { font-size: 14px; color: #ffe38a; text-align: center; width: 100%; }
.board .apples .grp.gone + .cap, .board .cap.gone { color: #ffb0b0; }
.board .line { font-size: 26px; font-weight: 800; text-align: center; font-family: "Comic Sans MS", "Segoe Print", inherit; }
.board .line.big { font-size: 44px; }
.appear { animation: pop .35s ease-out both; }
@keyframes pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

.ctrl { display: flex; gap: 10px; margin-top: 12px; }
.ctrl .ghost-btn { flex: 1; }
.ctrl .next { flex: 2; background: var(--violet); color: #fff; }

/* ── задача ── */
.baskets { display: flex; gap: 12px; align-items: stretch; justify-content: center; width: 100%; }
.basket { flex: 1; max-width: 230px; background: rgba(255,255,255,.08); border-radius: 18px; padding: 10px 8px 12px;
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-content: center; min-height: 120px; position: relative; }
.basket::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -6px; height: 12px; border-radius: 0 0 14px 14px;
  background: #c79a62; }
.plus { align-self: center; font-size: 40px; font-weight: 900; color: #ffe38a; }
.apple { position: relative; width: 40px; height: 44px; }
.apple svg { width: 100%; height: 100%; }
.apple .n { position: absolute; inset: 0; display: grid; place-items: center; padding-top: 6px; font-size: 17px;
  font-weight: 900; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.question { font-size: 22px; text-align: center; }
.equation { font-size: 42px; font-weight: 900; color: #ffe38a; min-height: 50px; font-family: "Comic Sans MS", "Segoe Print", inherit; }
.hint-tap { font-size: 13px; color: #cfe7df; }

.keys { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 12px; }
.key { aspect-ratio: 1 / 1; max-height: 74px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow);
  font-size: 30px; font-weight: 900; color: var(--violet); }
.key:active { transform: scale(.94); }
.key.ok { background: var(--ok); color: #fff; }
.key.bad { background: var(--bad); color: #fff; animation: shake .4s; }
.key.dim { opacity: .35; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ── итог ── */
.result { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; }
.result .stars { font-size: 64px; letter-spacing: 6px; }
.result .star { display: inline-block; filter: grayscale(1) opacity(.3); }
.result .star.on { filter: none; animation: pop .5s ease-out both; }
.result h2 { margin: 4px 0; font-size: 28px; }
.result p { margin: 0; color: var(--muted); }
.result .row { display: flex; gap: 10px; width: 100%; max-width: 420px; }
.result .row > * { flex: 1; }

@media (min-width: 700px) {
  .apple { width: 52px; height: 57px; }
  .key { max-height: 88px; }
  .board .line.big { font-size: 56px; }
}
@media (max-height: 700px) and (max-width: 500px) {
  .apple { width: 32px; height: 35px; }
  .board { min-height: 200px; padding: 10px; }
  .keys { gap: 6px; }
}

/* объяснение: доска большая — яблоки крупнее; кнопки в одну строку */
.board > .apples .apple { width: 54px; height: 60px; }
.ctrl .ghost-btn { white-space: nowrap; padding: 14px 10px; }
.ctrl #again { flex: 0 0 56px; font-size: 22px; }

/* логотип Михаила (С271): знак-книга + надпись */
.logo-mark { width: min(62vw, 250px); height: auto; }
.logo-word { width: min(78vw, 340px); height: auto; margin-top: 6px; }
.hero .tag { text-transform: none; font-size: 17px; letter-spacing: 0; }