/* =========================================================
   Мурка's Candy Storybook — Layout & Components
   ========================================================= */

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

body {
  font-family: var(--font-fun);
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

/* ---------- Decorative background (self-contained, offline) ---------- */
.bg-layer { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
.bg-layer.dots {
  background-image: radial-gradient(var(--pink-soft) 2px, transparent 2px);
  background-size: 42px 42px;
  opacity: 0.35;
}
.bg-layer.grain {
  z-index: -1; opacity: 0.06; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.blob { position: fixed; z-index: -2; border-radius: 50%; filter: blur(40px); opacity: 0.5; pointer-events: none; animation: float 14s ease-in-out infinite; }
.blob.b1 { width: 320px; height: 320px; background: var(--pink-soft); top: -80px; left: -60px; }
.blob.b2 { width: 260px; height: 260px; background: var(--mint); bottom: -70px; right: -50px; animation-delay: -5s; }
.blob.b3 { width: 200px; height: 200px; background: var(--sun); top: 40%; right: 8%; opacity: 0.35; animation-delay: -9s; }
@keyframes float { 0%,100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(-26px) translateX(14px); } }

/* ---------- Screens ---------- */
.screen { display: none; max-width: 960px; margin: 0 auto; padding: 22px 18px 60px; }
.screen.active { display: block; animation: screen-in 0.5s var(--ease); }
@keyframes screen-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Header / mascot ---------- */
.site-head { text-align: center; margin-bottom: 10px; }
.mascot { width: 128px; height: 128px; display: block; margin: 0 auto -6px; animation: bob 4s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
h1 {
  margin: 4px 0 2px; text-align: center; line-height: 1.02;
  font-size: clamp(2.1rem, 7vw, 3.4rem); color: var(--pink-deep);
  letter-spacing: -0.5px; text-shadow: 0 3px 0 var(--pink-wash);
}
.subtitle { text-align: center; color: var(--pink); font-size: 1.05rem; margin: 0 0 8px; }

/* ---------- Buttons (candy pills, pressable) ---------- */
button {
  font-family: inherit; font-weight: 700;
  min-height: var(--tap); border: none; cursor: pointer;
  border-radius: 999px; background: var(--pink); color: #fff;
  font-size: 1.15rem; padding: 12px 26px;
  box-shadow: var(--press); transition: transform 0.12s var(--pop), box-shadow 0.12s var(--pop), background 0.2s;
}
button:hover { background: var(--pink-deep); }
button:active { transform: translateY(4px); box-shadow: 0 0 0 rgba(0,0,0,0); }
button:focus-visible { outline: 4px solid var(--sky); outline-offset: 3px; }
.btn-ghost { background: var(--surface); color: var(--pink-deep); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { background: var(--pink-wash); color: var(--pink-deep); }
.btn-big { font-size: 1.4rem; padding: 16px 40px; }

.row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; align-items: center; margin: 16px 0; }

/* ---------- Progress track ---------- */
.progress-wrap { max-width: 460px; margin: 6px auto 18px; }
.progress-label { text-align: center; font-size: 1.15rem; color: var(--pink-deep); margin-bottom: 6px; }
.progress-track { height: 22px; background: var(--pink-wash); border-radius: 999px; overflow: hidden; box-shadow: inset 0 3px 6px rgba(198,49,111,0.15); }
.progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--pink-soft), var(--pink)); border-radius: 999px; transition: width 0.6s var(--ease); }

/* ---------- Legend ---------- */
.legend { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 0 auto 18px; max-width: 620px; }
.chip { font-size: 0.85rem; background: var(--surface); border-radius: 999px; padding: 6px 12px 6px 8px; box-shadow: var(--shadow-sm); display: inline-flex; align-items: center; gap: 6px; }
.chip .dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.chip.same    .dot { background: var(--g-same); }
.chip.tricky  .dot { background: var(--g-tricky); }
.chip.new     .dot { background: var(--g-new); }
.chip.special .dot { background: var(--g-special); }

/* ---------- Letter grid ---------- */
#letter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px; margin-top: 6px; }
.letter-card {
  position: relative; background: var(--surface); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); padding: 12px 8px 10px; text-align: center;
  border: 4px solid var(--pink-soft); cursor: pointer; color: var(--ink);
  transition: transform 0.16s var(--pop), box-shadow 0.16s var(--pop);
  animation: card-in 0.5s var(--pop) backwards;
}
.letter-card:hover { transform: translateY(-6px) rotate(-1.5deg); box-shadow: var(--shadow); }
.letter-card:active { transform: translateY(-2px) scale(0.98); }
.letter-card:focus-visible { outline: 4px solid var(--sky); outline-offset: 3px; }
@keyframes card-in { from { opacity: 0; transform: translateY(18px) scale(0.9); } to { opacity: 1; transform: none; } }
.letter-card .big { font-family: var(--font-cyr); font-weight: 700; font-size: 2.4rem; color: var(--pink-deep); line-height: 1; }
.letter-card .pic { font-size: 2rem; margin-top: 2px; }
.letter-card .star { position: absolute; top: -10px; right: -8px; font-size: 1.4rem; filter: drop-shadow(0 2px 2px rgba(198,49,111,0.3)); }
.letter-card .star.on { animation: pop-star 0.5s var(--pop); }
@keyframes pop-star { 0% { transform: scale(0) rotate(-40deg); } 70% { transform: scale(1.35) rotate(8deg); } 100% { transform: scale(1); } }
.letter-card.group-same    { border-color: var(--g-same); }
.letter-card.group-tricky  { border-color: var(--g-tricky); }
.letter-card.group-new     { border-color: var(--g-new); }
.letter-card.group-special { border-color: var(--g-special); }

/* ---------- Letter screen ---------- */
.letter-stage { position: relative; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 18px; margin: 8px auto; max-width: 640px; text-align: center; overflow: hidden; }
.letter-stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, var(--pink-wash), transparent 60%); pointer-events: none; }
.hero-pic { font-size: clamp(4.5rem, 22vw, 9rem); line-height: 1; animation: bob 5s ease-in-out infinite; }
.hero-letter { font-family: var(--font-cyr); font-weight: 700; font-size: clamp(5rem, 26vw, 11rem); color: var(--pink-deep); line-height: 0.95; text-shadow: 0 4px 0 var(--pink-wash); }
.word { font-family: var(--font-cyr); font-size: clamp(1.8rem, 8vw, 2.6rem); color: var(--ink); font-weight: 700; }
.translit { color: var(--pink); font-size: 1.1rem; margin-top: -2px; }
.note { color: var(--pink-deep); max-width: 34ch; margin: 10px auto; font-size: 1.02rem; line-height: 1.45; }
.group-tag { display: inline-block; font-size: 0.8rem; padding: 5px 12px; border-radius: 999px; color: #fff; margin-top: 4px; }
.group-tag.group-same    { background: var(--g-same); }
.group-tag.group-tricky  { background: var(--g-tricky); color: var(--ink); }
.group-tag.group-new     { background: var(--g-new); }
.group-tag.group-special { background: var(--g-special); }

/* ---------- Trace canvas ---------- */
.trace-box { margin-top: 10px; }
#trace-canvas { background: var(--pink-wash); border: 4px dashed var(--pink-soft); border-radius: var(--radius-sm); touch-action: none; display: block; margin: 8px auto; max-width: 100%; cursor: crosshair; }

/* ---------- Game ---------- */
#g-cards { gap: 16px; }
#g-cards .letter-card { min-width: 110px; }
#g-feedback { font-size: 1.5rem; min-height: 1.8em; font-weight: 700; }
.count-pill { display: inline-block; background: var(--pink-wash); color: var(--pink-deep); border-radius: 999px; padding: 6px 16px; font-size: 1rem; }

/* ---------- Celebration ---------- */
#celebrate {
  background: linear-gradient(120deg, var(--pink), var(--grape));
  color: #fff; text-align: center; padding: 18px 16px; border-radius: var(--radius);
  font-size: 1.25rem; font-weight: 700; margin-bottom: 16px; box-shadow: var(--shadow);
  animation: pop-star 0.6s var(--pop);
}

/* ---------- Sparkle burst (game correct) ---------- */
.sparkle { position: fixed; font-size: 1.6rem; pointer-events: none; animation: sparkle-up 0.9s var(--ease) forwards; z-index: 50; }
@keyframes sparkle-up { 0% { opacity: 1; transform: translateY(0) scale(0.6); } 100% { opacity: 0; transform: translateY(-90px) scale(1.3); } }

/* ---------- Course map (gw2ru-style unit grid) ---------- */
.site-head.compact { margin-bottom: 6px; }
.site-head.compact h1 { font-size: clamp(1.8rem, 6vw, 2.6rem); }
#map-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 8px; }
.unit-card {
  padding: 0; overflow: hidden; border-radius: var(--radius); background: var(--surface);
  box-shadow: var(--shadow-sm); border: 4px solid var(--surface); cursor: pointer;
  text-align: left; color: var(--ink); display: flex; flex-direction: column;
  transition: transform 0.16s var(--pop), box-shadow 0.16s var(--pop);
  animation: card-in 0.5s var(--pop) backwards;
}
.unit-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--pink-soft); }
.unit-card:active { transform: translateY(-2px) scale(0.99); }
.unit-card:focus-visible { outline: 4px solid var(--sky); outline-offset: 3px; }
.unit-card.feature { grid-column: 1 / -1; }
.unit-art { position: relative; aspect-ratio: 16 / 8; display: flex; align-items: center; justify-content: center; }
.unit-card.feature .unit-art { aspect-ratio: 16 / 5; }
.unit-num {
  position: absolute; top: 10px; left: 14px; font-weight: 800; color: #fff;
  font-size: clamp(1.1rem, 3.4vw, 1.8rem); letter-spacing: -0.5px;
  text-shadow: 0 2px 6px rgba(74,35,56,0.35);
}
.ua-scene { display: flex; gap: 6px; align-items: center; justify-content: center; }
.ua-emoji { font-size: clamp(2rem, 9vw, 3.4rem); filter: drop-shadow(0 4px 6px rgba(74,35,56,0.18)); }
.ua-emoji.e1 { font-size: clamp(2.6rem, 11vw, 4.4rem); }
.ua-scene.big .ua-emoji { font-size: clamp(3rem, 14vw, 5.5rem); }
.unit-cap { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; background: var(--surface); }
.unit-title { font-weight: 700; font-size: clamp(0.95rem, 3.2vw, 1.2rem); color: var(--pink-deep); line-height: 1.15; }
.unit-progress { font-size: 0.8rem; color: var(--pink); background: var(--pink-wash); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.unit-progress.soon { color: #a98; background: #f3ecef; }

/* ---------- Topic (coming-soon) screen ---------- */
.topic-hero { border-radius: var(--radius); aspect-ratio: 16 / 7; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); margin: 6px auto; max-width: 640px; }
.topic-soon { max-width: 460px; margin: 10px auto; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px; }
.soon-cat { font-size: 3rem; animation: bob 4s ease-in-out infinite; }

.unit-progress.complete { color: #fff; background: var(--pink); }

/* ---------- Lesson player ---------- */
.lesson-top { justify-content: space-between; }
.lesson-dots { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 4px 0 12px; }
.dot-step { width: 12px; height: 12px; border-radius: 50%; background: var(--pink-wash); box-shadow: inset 0 1px 2px rgba(198,49,111,0.2); }
.dot-step.done { background: var(--pink-soft); }
.dot-step.now { background: var(--pink); transform: scale(1.25); }
.lesson-card { max-width: 560px; margin: 0 auto; border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 20px; text-align: center; }
.lesson-pic { font-size: clamp(4.5rem, 22vw, 8rem); line-height: 1; filter: drop-shadow(0 6px 8px rgba(74,35,56,0.2)); animation: bob 5s ease-in-out infinite; }
.lesson-ru { font-family: var(--font-cyr); font-weight: 700; font-size: clamp(2rem, 9vw, 3rem); color: var(--pink-deep); margin-top: 8px; }
.lesson-en { font-size: 1.3rem; color: var(--ink); margin-top: 2px; }
.lesson-nav { margin-top: 18px; }

/* ---------- Unit lesson list ---------- */
.unit-hero { border-radius: var(--radius); aspect-ratio: 16 / 6; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); margin: 6px auto; max-width: 640px; }
.lesson-list { max-width: 620px; margin: 8px auto; display: flex; flex-direction: column; gap: 10px; }
.lesson-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--surface); color: var(--ink); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: 12px 14px; border: 3px solid transparent; }
.lesson-row:hover { border-color: var(--pink-soft); transform: translateY(-3px); }
.lr-num { font-weight: 800; color: var(--pink-deep); min-width: 28px; text-align: center; font-size: 1.05rem; }
.lr-pic { font-size: 1.8rem; }
.lr-title { flex: 1; font-weight: 700; color: var(--pink-deep); }
.lr-star { font-size: 1.3rem; }

/* ---------- Quiz (image-led: hear the word, tap the picture) ---------- */
.q-prompt { font-size: clamp(1.3rem, 5vw, 2rem); margin-bottom: 2px; }
.q-word { font-family: var(--font-cyr); font-weight: 700; font-size: clamp(2rem, 9vw, 3rem); color: var(--pink-deep); text-align: center; }
.q-translit { text-align: center; color: var(--pink); margin-top: -2px; }
.q-grid { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 14px; max-width: 470px; margin: 14px auto; }
.quiz-pic { background: var(--surface); border: 4px solid var(--pink-soft); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: 16px 10px; cursor: pointer; color: var(--ink); transition: transform .16s var(--pop), box-shadow .16s var(--pop); }
.quiz-pic:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--pink); }
.quiz-pic:focus-visible { outline: 4px solid var(--sky); outline-offset: 3px; }
.quiz-pic .qp-pic { font-size: clamp(2.6rem, 12vw, 4rem); line-height: 1; }
.quiz-pic .qp-en { font-weight: 700; color: var(--pink-deep); margin-top: 6px; }
.quiz-pic.wrong { animation: shake .35s; border-color: var(--sun); }
.quiz-pic.right { border-color: var(--mint); background: #eafff8; animation: pop-star .5s var(--pop); }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
#q-fb { font-size: 1.35rem; min-height: 1.6em; font-weight: 700; text-align: center; }

/* ---------- Vocabulary ---------- */
.vocab-list { max-width: 560px; margin: 8px auto; display: flex; flex-direction: column; gap: 8px; }
.vocab-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--surface); color: var(--ink); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: 10px 14px; border: 2px solid transparent; }
.vocab-row:hover { border-color: var(--pink-soft); }
.vr-pic { font-size: 1.7rem; }
.vr-ru { font-family: var(--font-cyr); font-weight: 700; color: var(--pink-deep); min-width: 120px; }
.vr-en { flex: 1; color: var(--ink); }
.vr-spk { font-size: 1.2rem; }

/* ---------- Dialogue (Talk & Listen) ---------- */
.dialog-list { max-width: 620px; margin: 10px auto; display: flex; flex-direction: column; gap: 12px; }
.dialog-line { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 3px solid transparent; border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 12px 14px; background: var(--surface); color: var(--ink); cursor: pointer; }
.dialog-line.side-B { flex-direction: row-reverse; text-align: right; background: var(--pink-wash); }
.dialog-line:hover { border-color: var(--pink-soft); }
.dialog-line.speaking { border-color: var(--pink); transform: scale(1.02); }
.dl-who { font-size: 2rem; flex-shrink: 0; }
.dl-text { display: flex; flex-direction: column; }
.dl-ru { font-family: var(--font-cyr); font-weight: 700; font-size: 1.4rem; color: var(--pink-deep); }
.dl-translit { color: var(--pink); font-size: 0.9rem; }
.dl-en { color: var(--ink); font-size: 1rem; }

/* ---------- Fill the Gap ---------- */
.fill-sentence { font-family: var(--font-cyr); font-weight: 700; font-size: clamp(1.8rem, 8vw, 2.8rem); color: var(--pink-deep); text-align: center; margin: 6px auto; }
.fill-sentence .gap { display: inline-block; min-width: 1.6em; border-bottom: 5px dashed var(--pink); color: var(--pink); }
.fill-sentence .filled { color: var(--mint); background: #eafff8; border-radius: 10px; padding: 0 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 520px) {
  #map-grid { gap: 12px; }
  .unit-cap { padding: 9px 10px; flex-direction: column; align-items: flex-start; gap: 3px; }
  .q-grid { grid-template-columns: repeat(2, 1fr); }
  .dl-ru { font-size: 1.2rem; }
}
@media (max-width: 420px) {
  #letter-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 10px; }
  .letter-card .big { font-size: 2rem; }
  .mascot { width: 104px; height: 104px; }
}