/* ============================================================
   Букварь Лёвы — styles
   Calm, modern, playful. Vowels = coral, consonants = blue
   (standard bukvar convention). Big touch targets, soft motion.
   ============================================================ */

@font-face { font-family:"Nunito"; src:url("/fonts/nunito-400-cyr.woff2") format("woff2"); font-weight:400; font-display:swap; unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"Nunito"; src:url("/fonts/nunito-400-lat.woff2") format("woff2"); font-weight:400; font-display:swap; unicode-range:U+0000-00FF,U+2000-206F; }
@font-face { font-family:"Nunito"; src:url("/fonts/nunito-700-cyr.woff2") format("woff2"); font-weight:700; font-display:swap; unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"Nunito"; src:url("/fonts/nunito-700-lat.woff2") format("woff2"); font-weight:700; font-display:swap; unicode-range:U+0000-00FF,U+2000-206F; }
@font-face { font-family:"Nunito"; src:url("/fonts/nunito-800-cyr.woff2") format("woff2"); font-weight:800; font-display:swap; unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"Nunito"; src:url("/fonts/nunito-800-lat.woff2") format("woff2"); font-weight:800; font-display:swap; unicode-range:U+0000-00FF,U+2000-206F; }
@font-face { font-family:"Nunito"; src:url("/fonts/nunito-900-cyr.woff2") format("woff2"); font-weight:900; font-display:swap; unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"Nunito"; src:url("/fonts/nunito-900-lat.woff2") format("woff2"); font-weight:900; font-display:swap; unicode-range:U+0000-00FF,U+2000-206F; }

:root {
  --bg1:#FFF7EC; --bg2:#F0EDFF;
  --card:#FFFFFF; --ink:#3A3358; --ink-soft:#7B759B;
  --vowel:#FF5D5D; --vowel-soft:#FFE9E9;
  --cons:#4D7CFF; --cons-soft:#E8EEFF;
  --ok:#3ECF8E; --ok-soft:#E3F9EF;
  --star:#FFC93C;
  --accent1:#FFB03A; --accent2:#FF7A59;
  --shadow:0 10px 30px rgba(80,60,120,.12);
  --shadow-sm:0 4px 14px rgba(80,60,120,.10);
  --radius:28px;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { height:100%; }
body {
  min-height:100%;
  font-family:"Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  color:var(--ink);
  background:linear-gradient(160deg, var(--bg1) 0%, var(--bg2) 100%) fixed;
  overflow-x:hidden;
  user-select:none; -webkit-user-select:none;
  touch-action:manipulation;
}
button { font-family:inherit; color:inherit; border:none; background:none; cursor:pointer; }

#fx { position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:90; }

/* ---------- floating background decor ---------- */
.decor { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.decor span { position:absolute; opacity:.5; filter:saturate(.8); animation:drift 26s linear infinite; }
.decor span:nth-child(1){ top:6%;  left:-12%; font-size:54px; animation-duration:55s; }
.decor span:nth-child(2){ top:18%; left:-20%; font-size:38px; animation-duration:75s; animation-delay:-30s; }
.decor span:nth-child(3){ top:64%; left:-15%; font-size:46px; animation-duration:65s; animation-delay:-15s; }
.decor span:nth-child(4){ top:82%; left:-10%; font-size:30px; animation-duration:50s; animation-delay:-40s; }
.decor span:nth-child(5){ top:38%; left:-18%; font-size:26px; animation-duration:80s; animation-delay:-60s; }
@keyframes drift { from { transform:translateX(0); } to { transform:translateX(130vw); } }
body.calm .decor { display:none; }
body.calm * { animation-duration:.001s !important; }

/* ---------- screen container ---------- */
.screen {
  position:relative; z-index:1;
  max-width:560px; margin:0 auto;
  min-height:100vh; min-height:100dvh;
  padding:20px 18px 40px;
  display:flex; flex-direction:column;
}
.screen.enter { animation:screen-in .45s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes screen-in { from { opacity:0; transform:translateY(18px) scale(.98); } to { opacity:1; transform:none; } }

/* ---------- top bar ---------- */
.bar { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.bar-title { flex:1; text-align:center; font-weight:900; font-size:22px; }
.bar-title.small { font-size:18px; color:var(--ink-soft); }
.bar-side { min-width:48px; text-align:right; font-weight:800; color:var(--ink-soft); }
.btn-icon {
  width:48px; height:48px; border-radius:16px; font-size:22px;
  background:var(--card); box-shadow:var(--shadow-sm);
  display:grid; place-items:center;
  transition:transform .15s;
}
.btn-icon:active { transform:scale(.9); }

/* ---------- buttons ---------- */
.btn-big {
  display:block; width:100%; max-width:340px; margin:10px auto 0;
  padding:20px 28px; border-radius:24px;
  background:linear-gradient(135deg, var(--accent1), var(--accent2));
  color:#fff; font-size:26px; font-weight:900; letter-spacing:.5px;
  box-shadow:0 12px 26px rgba(255,122,89,.38);
  transition:transform .18s cubic-bezier(.2,.9,.3,1.4), box-shadow .18s;
}
.btn-big:active { transform:scale(.94); box-shadow:0 6px 14px rgba(255,122,89,.3); }
.btn-soft {
  padding:14px 22px; border-radius:20px;
  background:var(--card); color:var(--ink);
  font-size:18px; font-weight:800; box-shadow:var(--shadow-sm);
  transition:transform .15s;
}
.btn-soft:active { transform:scale(.94); }
.btn-danger { padding:14px 22px; border-radius:20px; background:#FFE9E9; color:#D64545; font-weight:800; font-size:16px; width:100%; }

/* ---------- HOME ---------- */
.screen-home { justify-content:center; text-align:center; gap:8px; }
.leva-wrap { position:relative; display:flex; justify-content:center; margin-bottom:4px; }
.leva {
  font-size:110px; line-height:1;
  filter:drop-shadow(0 14px 20px rgba(80,60,120,.18));
}
.leva.float { animation:floaty 3.4s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-14px) rotate(2deg); } }
.leva-bubble {
  position:absolute; top:-6px; right:calc(50% - 190px);
  background:var(--card); padding:10px 16px; border-radius:18px 18px 18px 4px;
  font-weight:800; font-size:15px; color:var(--ink);
  box-shadow:var(--shadow-sm); white-space:nowrap;
}
@media (max-width:430px){ .leva-bubble { right:8px; } }
.leva-bubble.pop, .pop-in { animation:pop-in .5s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes pop-in { 0% { opacity:0; transform:scale(.4); } 70% { transform:scale(1.08); } 100% { opacity:1; transform:scale(1); } }
.logo {
  font-size:clamp(34px, 9vw, 44px); font-weight:900; margin:6px 0 2px;
  background:linear-gradient(120deg, #FF7A59, #B78CFF 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.home-progress { color:var(--ink-soft); font-weight:700; font-size:17px; margin-bottom:14px; }
.home-row { display:flex; gap:14px; justify-content:center; margin-top:18px; }
.parents-link {
  margin-top:34px; color:var(--ink-soft); font-weight:700; font-size:15px;
  position:relative; padding:10px 14px; border-radius:14px;
}
.hold-hint { opacity:.6; font-size:12px; }
.parents-link.holding { background:#fff; }
.parents-link .hold-ring { position:absolute; left:0; bottom:0; height:4px; width:0; background:linear-gradient(90deg,var(--accent1),var(--accent2)); border-radius:4px; }
.parents-link.holding .hold-ring { animation:holdfill 1.5s linear forwards; }
@keyframes holdfill { to { width:100%; } }

/* ---------- MAP ---------- */
.screen-map { padding-bottom:60px; }
.path { display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.block-label {
  margin:18px 4px 2px; font-weight:900; font-size:15px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--ink-soft);
}
.node {
  display:flex; align-items:center; gap:14px;
  background:var(--card); border-radius:22px; padding:12px 16px;
  box-shadow:var(--shadow-sm);
  transition:transform .15s;
}
.node:active { transform:scale(.97); }
.node:nth-child(odd) { margin-right:26px; }
.node:nth-child(even) { margin-left:26px; }
.node-badge {
  width:56px; height:56px; flex:none; border-radius:18px;
  display:grid; place-items:center; font-size:26px; font-weight:900;
  background:var(--cons-soft); color:var(--cons);
}
.node.done .node-badge { background:var(--ok-soft); font-size:30px; }
.node.next .node-badge { background:linear-gradient(135deg,var(--accent1),var(--accent2)); color:#fff; }
.node.locked { opacity:.45; }
.node.locked .node-badge { background:#EEECF6; color:#B9B4D0; }
.node-info { flex:1; min-width:0; }
.node-num { font-size:12px; font-weight:800; color:var(--ink-soft); letter-spacing:.5px; }
.node-title { font-weight:900; font-size:17px; }
.node-stars { font-size:13px; letter-spacing:-1px; }
.node.next .node-stars { font-size:20px; color:var(--accent2); }
.pulse-soft { animation:pulse-soft 2s ease-in-out infinite; }
@keyframes pulse-soft { 0%,100% { box-shadow:var(--shadow-sm); } 50% { box-shadow:0 0 0 6px rgba(255,122,89,.18), var(--shadow-sm); } }

/* ---------- LESSON shell ---------- */
.lesson { display:flex; flex-direction:column; min-height:calc(100dvh - 60px); }
.dots { display:flex; gap:7px; justify-content:center; margin:6px 0 4px; }
.dot { width:12px; height:12px; border-radius:8px; background:#E4E0F2; transition:all .3s; }
.dot.past { background:var(--ok); }
.dot.now { width:26px; background:linear-gradient(90deg,var(--accent1),var(--accent2)); }
.stage {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; padding:10px 0 30px; text-align:center;
}
.leva-corner {
  position:fixed; right:14px; bottom:12px; font-size:52px; z-index:5;
  filter:drop-shadow(0 6px 10px rgba(80,60,120,.2));
  animation:floaty 4s ease-in-out infinite;
}
.leva-corner.cheer { animation:cheer .8s cubic-bezier(.2,1.4,.4,1); }
@keyframes cheer { 0% { transform:scale(1); } 30% { transform:scale(1.35) rotate(-8deg); } 60% { transform:scale(1.2) rotate(8deg); } 100% { transform:scale(1); } }

.prompt { font-size:clamp(20px, 5.6vw, 26px); font-weight:900; }
.prompt.small-p { font-size:19px; color:var(--ink-soft); }
.prompt-target { color:var(--accent2); font-size:1.25em; }
.mini-say {
  font-size:20px; background:var(--card); border-radius:14px; padding:6px 12px;
  box-shadow:var(--shadow-sm); vertical-align:middle; transition:transform .15s;
}
.mini-say:active { transform:scale(.88); }

/* letter colors */
.lv { color:var(--vowel); }
.lc { color:var(--cons); }

/* SVG character sprites size like an emoji glyph */
svg.char { width:1em; height:1em; display:inline-block; vertical-align:-0.1em; }
.pic-emoji svg.char, .word-pic-emoji svg.char, .hero-pic svg.char { display:block; margin:0 auto; }
.zoo-cell svg.char { width:44px; height:44px; }
.v-sticker svg.char { width:92px; height:92px; }

/* ---------- letter intro ---------- */
.big-letter {
  font-size:clamp(150px, 44vw, 230px); font-weight:900; line-height:1.05;
  padding:0 44px; border-radius:44px; background:var(--card);
  box-shadow:var(--shadow);
  transition:transform .2s;
}
.big-letter.vowel { color:var(--vowel); }
.big-letter.consonant { color:var(--cons); }
.big-letter:active { transform:scale(.95); }
.squish { animation:squish .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes squish { 0% { transform:scale(1); } 35% { transform:scale(.85,.75); } 70% { transform:scale(1.08,1.12); } 100% { transform:scale(1); } }
.assoc {
  display:flex; align-items:center; gap:12px; background:var(--card);
  padding:12px 22px; border-radius:22px; box-shadow:var(--shadow-sm);
  font-size:19px; font-weight:800; color:var(--ink-soft);
}
.assoc-emoji { font-size:44px; }

.next-btn { visibility:hidden; opacity:0; transform:translateY(10px); font-size:22px; padding:16px 24px; margin-top:4px; }
.next-btn.show { visibility:visible; opacity:1; transform:none; transition:opacity .3s, transform .3s; animation:pop-in .45s cubic-bezier(.2,1.4,.4,1); }

/* ---------- grids & option cards ---------- */
.grid { display:grid; gap:16px; width:100%; max-width:440px; }
.g2 { grid-template-columns:1fr 1fr; }
.g3 { grid-template-columns:1fr 1fr 1fr; }
.g4 { grid-template-columns:1fr 1fr; }
.grid.pics.g3 { grid-template-columns:1fr 1fr 1fr; }
@media (max-width:420px) { .g3 { grid-template-columns:1fr 1fr; } .g3 > :last-child { grid-column:1 / -1; justify-self:center; width:60%; } .grid.pics.g3 { grid-template-columns:1fr 1fr; } .grid.pics.g3 > :last-child { grid-column:1 / -1; justify-self:center; width:60%; } }
.card-opt {
  background:var(--card); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:18px 10px; min-height:110px;
  transition:transform .16s cubic-bezier(.2,.9,.3,1.4), background .2s;
}
.card-opt:active { transform:scale(.92); }
.letter-card { font-size:clamp(56px, 15vw, 76px); font-weight:900; }
.letter-card.vowel { color:var(--vowel); }
.letter-card.consonant { color:var(--cons); }
.word-card { font-size:clamp(30px, 9vw, 42px); font-weight:900; letter-spacing:2px; }
.pic-emoji { font-size:clamp(48px, 13vw, 64px); line-height:1.15; }
.scene-emoji { letter-spacing:4px; }
.pic-label { font-size:14px; font-weight:800; color:var(--ink-soft); }
.pic-card.sz-big .pic-emoji { font-size:clamp(64px, 17vw, 84px); }
.pic-card.sz-small .pic-emoji { font-size:36px; }

.card-opt.correct { background:var(--ok-soft); box-shadow:0 0 0 4px var(--ok), var(--shadow-sm); animation:correct-bounce .6s cubic-bezier(.2,1.4,.4,1); }
@keyframes correct-bounce { 0% { transform:scale(1); } 40% { transform:scale(1.12); } 100% { transform:scale(1); } }
.card-opt.wrong { animation:shake .5s; background:#F6F4FB; }
@keyframes shake { 0%,100% { transform:translateX(0); } 20% { transform:translateX(-9px); } 40% { transform:translateX(8px); } 60% { transform:translateX(-6px); } 80% { transform:translateX(4px); } }
.shake { animation:shake .5s; }
.hint-pulse { animation:hint-pulse 1.1s ease-in-out infinite; box-shadow:0 0 0 4px rgba(62,207,142,.5), var(--shadow-sm); }
@keyframes hint-pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.07); } }

/* ---------- merge ---------- */
.merge-zone {
  position:relative; display:flex; align-items:center; justify-content:center; gap:20px;
  min-height:190px; width:100%;
}
.merge-letter {
  font-size:clamp(80px, 24vw, 120px); font-weight:900; line-height:1;
  background:var(--card); padding:14px 30px; border-radius:34px; box-shadow:var(--shadow);
  transition:transform .7s cubic-bezier(.5,0,.2,1), opacity .3s .5s;
}
.merge-letter.vowel { color:var(--vowel); } .merge-letter.consonant { color:var(--cons); }
.merge-plus { font-size:44px; font-weight:900; color:var(--ink-soft); transition:opacity .4s; }
.merge-plus.fade { opacity:0; }
.merge-letter.go-right { transform:translateX(58%) scale(.9); }
.merge-letter.go-left  { transform:translateX(-58%) scale(.9); }
.merge-letter.bump { animation:bump .45s; }
@keyframes bump { 50% { transform:scale(1.15); } }
.merge-result {
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  font-size:clamp(96px, 30vw, 150px); font-weight:900; letter-spacing:4px;
}
.merge-result.show { display:flex; }
.merge-result > span { background:var(--card); padding:10px 6px; border-radius:30px; box-shadow:var(--shadow); }
.merge-result > span:first-child { border-radius:30px 0 0 30px; padding-left:24px; }
.merge-result > span:last-child { border-radius:0 30px 30px 0; padding-right:24px; }
.merge-result > span:only-child { border-radius:30px; padding:10px 24px; }
.merge-assoc { transition:opacity .4s; }

/* ---------- word reading ---------- */
.word-row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.syll-card {
  font-size:clamp(48px, 14vw, 72px); font-weight:900; letter-spacing:3px;
  background:var(--card); padding:12px 22px; border-radius:26px; box-shadow:var(--shadow-sm);
  transition:transform .2s, box-shadow .3s, background .3s;
}
.syll-card.word-sized { font-size:clamp(34px, 9.5vw, 52px); padding:12px 18px; }
.syll-card:active { transform:scale(.93); }
.syll-card.lit { background:#FFF6DF; box-shadow:0 0 0 4px var(--star), var(--shadow-sm); transform:translateY(-6px); }
.word-pic { display:flex; flex-direction:column; align-items:center; gap:6px; }
.word-pic-emoji { font-size:clamp(80px, 22vw, 110px); filter:drop-shadow(0 10px 16px rgba(80,60,120,.18)); }
.word-pic-caption { font-weight:800; font-size:18px; color:var(--ink-soft); }
.word-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:center; }
.word-actions .next-btn { margin:0; }

/* ---------- match ---------- */
.word-chip {
  font-size:clamp(44px, 13vw, 64px); font-weight:900; letter-spacing:4px;
  background:var(--card); padding:14px 34px; border-radius:30px; box-shadow:var(--shadow);
  transition:transform .15s;
}
.word-chip:active { transform:scale(.94); }
.hero-pic { font-size:clamp(90px, 25vw, 130px); filter:drop-shadow(0 12px 18px rgba(80,60,120,.18)); }

/* ---------- victory ---------- */
.screen-victory { justify-content:center; text-align:center; }
.victory { display:flex; flex-direction:column; align-items:center; gap:14px; }
.big-leva { font-size:130px; }
.bounce { animation:bounce-in 1s cubic-bezier(.2,1.4,.4,1); }
@keyframes bounce-in { 0% { transform:scale(0) rotate(-20deg); } 60% { transform:scale(1.15) rotate(6deg); } 100% { transform:scale(1); } }
.v-title { font-size:clamp(28px, 8vw, 38px); font-weight:900; }
.v-stars { display:flex; gap:10px; font-size:54px; }
.v-star { display:inline-block; animation:star-drop .6s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes star-drop { 0% { opacity:0; transform:translateY(-60px) scale(.3) rotate(-40deg); } 100% { opacity:1; transform:none; } }
.v-sticker-wrap { display:flex; flex-direction:column; align-items:center; gap:4px; margin-top:6px; }
.v-sticker {
  font-size:84px; background:var(--card); width:132px; height:132px; border-radius:36px;
  display:grid; place-items:center; box-shadow:var(--shadow);
}
.v-sticker-label { font-weight:800; color:var(--ink-soft); }
.v-final { font-weight:800; font-size:19px; color:var(--ink-soft); line-height:1.5; }
.v-actions { display:flex; flex-direction:column; gap:10px; align-items:center; margin-top:10px; width:100%; }

/* ---------- collection ---------- */
.zoo-hint { text-align:center; color:var(--ink-soft); font-weight:700; margin:4px 0 14px; }
.zoo-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
@media (max-width:400px) { .zoo-grid { grid-template-columns:repeat(4,1fr); } }
.zoo-cell {
  aspect-ratio:1; border-radius:20px; background:#EFEBFA;
  display:grid; place-items:center; font-size:34px; color:#C4BDDD; font-weight:900;
}
.zoo-cell.got { background:var(--card); box-shadow:var(--shadow-sm); font-size:40px; }

/* ---------- parents ---------- */
.parents { gap:14px; display:flex; flex-direction:column; }
.card { background:var(--card); border-radius:24px; padding:18px 20px; box-shadow:var(--shadow-sm); text-align:left; }
.card h3 { font-size:17px; margin-bottom:10px; }
.card .note { color:var(--ink-soft); font-size:14px; font-weight:600; line-height:1.55; }
.set-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 0; font-weight:800; font-size:15px; }
.set-row input[type=range] { flex:1; max-width:180px; accent-color:var(--accent2); }
.set-row select { font-family:inherit; font-weight:700; padding:6px 10px; border-radius:12px; border:2px solid #E4E0F2; max-width:190px; }
.set-row input[type=checkbox] { width:26px; height:26px; accent-color:var(--ok); }
.tricky { padding-left:20px; font-size:14px; font-weight:700; color:var(--ink-soft); display:grid; gap:6px; }
#testVoice { margin-top:8px; }
.danger-zone { background:#FFF6F6; }

/* reduced motion: respect the OS setting too */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.001s !important; transition-duration:.001s !important; }
  .decor { display:none; }
}