:root {
  --pink: #eb579d;
  --pink-dark: #c83f85;
  --ink: #513451;
  --muted: #866f83;
  --cream: #fff9f6;
  --shadow: 0 24px 70px rgba(105, 63, 115, .22);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "Nunito", sans-serif;
  color: var(--ink);
  background: #fae9f3;
  overflow-x: hidden;
}
button, input { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  height: 82px; padding: 0 clamp(22px, 5vw, 76px); display: flex; align-items: center;
  justify-content: space-between; background: rgba(255,255,255,.88); backdrop-filter: blur(18px);
  position: relative; z-index: 10; border-bottom: 1px solid rgba(255,255,255,.8);
}
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; font: 800 24px/1 "Baloo 2"; }
.brand b { color: var(--pink); }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; color: white; background: linear-gradient(145deg,#ff8fc7,#cf77e9); border-radius: 14px; box-shadow: 0 7px 16px #edb1d0; transform: rotate(-8deg); }
.top-actions { display: flex; gap: 12px; align-items: center; }
.sound-button, .parent-button, .candy-counter { border: 0; height: 44px; border-radius: 16px; background: white; box-shadow: 0 5px 18px rgba(105,63,115,.09); color: var(--ink); }
.sound-button { width: 44px; font-size: 22px; color: var(--pink); }
.sound-button.muted { opacity: .45; }
.parent-button { padding: 0 18px; font-weight: 800; }
.candy-counter { min-width: 74px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 0 13px; }
.lollipop { width: 23px; height: 23px; border-radius: 50%; display: inline-block; position: relative; background: conic-gradient(#fff 0 11%,#ff62a5 12% 23%,#fff 24% 35%,#ff62a5 36% 47%,#fff 48% 59%,#ff62a5 60% 71%,#fff 72% 83%,#ff62a5 84% 95%,#fff 96%); box-shadow: inset 0 0 0 2px #ffd0e3; }
.lollipop::after { content: ""; width: 3px; height: 11px; background: #d9aa83; position: absolute; left: 10px; top: 20px; border-radius: 4px; z-index: -1; }

.hero {
  flex: 1; min-height: calc(100vh - 112px); position: relative; padding: 38px clamp(22px, 6vw, 96px) 60px;
  background: linear-gradient(90deg,rgba(252,242,241,.18),rgba(255,255,255,0)), url("assets/luna-candy-world.png") center/cover no-repeat;
  isolation: isolate;
}

.world-map {
  flex: 1; min-height: calc(100vh - 82px); position: relative; overflow: hidden;
  padding: 36px clamp(18px, 5vw, 72px) 70px;
  background:
    radial-gradient(circle at 15% 20%,rgba(255,255,255,.8) 0 2px,transparent 3px),
    radial-gradient(circle at 82% 25%,rgba(255,248,171,.9) 0 3px,transparent 4px),
    linear-gradient(180deg,#cceafa 0%,#e9d9f5 48%,#fbd9e9 100%);
  isolation: isolate;
}
.world-map::before,.world-map::after { content:""; position:absolute; z-index:-1; border-radius:50%; filter:blur(1px); background:rgba(255,255,255,.42); }
.world-map::before { width:420px;height:150px;left:-90px;top:160px;box-shadow:180px 24px 0 rgba(255,255,255,.34),720px -90px 0 rgba(255,255,255,.3),1100px 80px 0 rgba(255,255,255,.28); }
.world-map::after { width:520px;height:130px;right:-130px;bottom:40px;box-shadow:-470px 65px 0 rgba(255,255,255,.28); }
.map-heading { text-align:center; position:relative; z-index:3; }
.map-heading h1 { font-size:clamp(42px,5vw,70px);margin:8px 0 5px; }
.map-heading p:not(.eyebrow) { margin:0;color:#806b83;font-size:15px;font-weight:700; }
.map-sky span { position:absolute;color:#fff4a3;text-shadow:0 0 16px white;font-size:22px;animation:twinkle 2.8s infinite; }
.map-sky span:nth-child(1){left:8%;top:17%}.map-sky span:nth-child(2){right:12%;top:13%;animation-delay:.5s}.map-sky span:nth-child(3){left:45%;top:28%;animation-delay:1s}.map-sky span:nth-child(4){right:27%;bottom:15%;animation-delay:1.5s}
.cloud-map { width:min(1080px,100%);height:590px;margin:6px auto 0;position:relative; }
.rainbow-route { position:absolute;width:min(1080px,90vw);height:590px;left:50%;top:190px;transform:translateX(-50%);overflow:visible;opacity:.8; }
.rainbow-route path { fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round; }
.rainbow-halo { stroke:rgba(255,255,255,.52);stroke-width:43; }
.rainbow-bands .band { stroke-width:5.8; }
.band-red{stroke:#f49ab3;transform:translateY(-15px)}.band-orange{stroke:#f7b580;transform:translateY(-9px)}.band-yellow{stroke:#f7dc83;transform:translateY(-3px)}.band-green{stroke:#9bd9b5;transform:translateY(3px)}.band-blue{stroke:#8fcceb;transform:translateY(9px)}.band-violet{stroke:#c8a1e5;transform:translateY(15px)}
.level-cloud {
  position:absolute;width:238px;min-height:145px;border:0;color:var(--ink);padding:25px 24px 20px;
  background:
    radial-gradient(ellipse at 50% 10%,rgba(255,255,255,1) 0 37%,transparent 38%),
    radial-gradient(ellipse at 20% 39%,#fff 0 31%,transparent 32%),
    radial-gradient(ellipse at 80% 40%,#fff 0 31%,transparent 32%),
    linear-gradient(180deg,#fff 0%,#fffdfd 52%,#eee9f2 100%);
  border-radius:48% 52% 43% 45% / 61% 61% 39% 40%;
  box-shadow:0 24px 38px rgba(74,67,109,.22),inset 0 -12px 20px rgba(192,184,204,.32),inset 0 8px 12px rgba(255,255,255,.95),0 2px 0 rgba(255,255,255,.9);
  display:flex;flex-direction:column;align-items:center;justify-content:center;transition:.22s;z-index:2;
}
.level-cloud::before,.level-cloud::after { content:"";position:absolute;border-radius:50%;z-index:-1; }
.level-cloud::before { width:108px;height:108px;left:16px;top:-34px;background:radial-gradient(circle at 38% 28%,#fff 0 34%,#f7f5f9 68%,#e5e0e9 100%);box-shadow:inset 7px 10px 15px rgba(255,255,255,.95),inset -8px -10px 18px rgba(192,184,204,.2); }
.level-cloud::after { width:128px;height:128px;right:14px;top:-48px;background:radial-gradient(circle at 38% 25%,#fff 0 34%,#faf8fb 63%,#e8e3ec 100%);box-shadow:inset 9px 12px 16px white,inset -9px -12px 20px rgba(192,184,204,.2); }
.level-cloud:not(.locked):hover { transform:translateY(-8px) scale(1.025);box-shadow:0 27px 45px rgba(203,72,145,.25),0 0 0 6px rgba(255,255,255,.3); }
.level-cloud strong { font:800 23px/1.1 "Baloo 2";position:relative;z-index:1; }
.level-cloud small { color:#957f94;font-size:11px;font-weight:800;position:relative;z-index:1; }
.cloud-icon { font-size:30px;margin-bottom:3px;position:relative;z-index:1; }
.cloud-number { position:absolute;left:13px;top:18px;width:30px;height:30px;display:grid;place-items:center;background:#f5e9fa;color:#986ca0;border-radius:50%;font:800 15px "Baloo 2";z-index:2; }
.level-status { position:absolute;right:13px;top:18px;padding:6px 11px;border-radius:20px;background:linear-gradient(135deg,#f15c9f,#db63b6);color:white;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;z-index:2; }
.level-cloud.locked { filter:saturate(.45);opacity:.78;cursor:pointer; }
.level-cloud.locked .level-status { background:#d8cada;color:#7b687c;font-size:13px; }
.level-cloud.completed .level-status { background:#75d5a4; }.level-cloud.completed{box-shadow:0 19px 35px rgba(91,74,120,.18),0 0 0 6px rgba(255,255,255,.4)}
.level-one{left:1%;top:72px}.level-two{right:1%;top:58px}.level-three{right:4%;top:385px}.level-four{left:3%;top:405px}.level-five{left:39%;top:235px}
.map-message { position:absolute;left:50%;bottom:23px;transform:translateX(-50%) translateY(10px);background:rgba(255,255,255,.9);padding:11px 18px;border-radius:18px;color:#8c6b89;font-size:12px;font-weight:900;box-shadow:0 8px 20px rgba(90,60,100,.13);opacity:0;transition:.25s;z-index:5;white-space:nowrap; }
.map-message.show { opacity:1;transform:translateX(-50%) translateY(0); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(255,247,242,.68) 0%, rgba(255,247,242,.22) 47%, transparent 66%); }
.lesson-progress { width: min(590px, 50vw); margin-bottom: 18px; }
.progress-copy { display: flex; justify-content: space-between; margin-bottom: 8px; color: #77536f; font-size: 13px; font-weight: 800; letter-spacing: .03em; }
.progress-track { height: 8px; background: rgba(255,255,255,.68); border-radius: 50px; overflow: hidden; box-shadow: inset 0 1px 4px rgba(80,40,80,.1); }
.progress-track span { display: block; height: 100%; width: 20%; border-radius: inherit; background: linear-gradient(90deg,#ff75af,#f5a26f,#f4dc70,#8eddb4,#8bcff1,#c890e9); transition: width .5s ease; }

.lesson-card {
  width: min(590px, 50vw); min-height: 525px; background: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.95);
  border-radius: 34px; padding: clamp(28px, 4vh, 42px) clamp(28px, 4vw, 50px); box-shadow: var(--shadow); backdrop-filter: blur(20px);
}
.eyebrow { display: flex; align-items: center; gap: 8px; text-transform: uppercase; color: var(--pink); letter-spacing: .12em; font-size: 12px; font-weight: 900; }
.eyebrow.centered { justify-content: center; }
h1, h2 { font-family: "Baloo 2", sans-serif; margin: 10px 0 8px; line-height: .98; color: #563755; }
h1 { font-size: clamp(40px, 4.4vw, 64px); letter-spacing: -.04em; }
h2 { font-size: 36px; }
.subtitle { color: var(--muted); max-width: 480px; line-height: 1.55; font-size: 16px; margin: 0 0 18px; }
.listen-button { display: inline-flex; align-items: center; gap: 10px; border: 0; padding: 9px 14px 9px 9px; border-radius: 14px; color: #a8407d; font-size: 13px; font-weight: 800; background: #fff0f7; }
.listen-button:hover { background: #ffe3f0; transform: translateY(-1px); }
.audio-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.listen-button.instruction { color: #76518a; background: #f4edff; }
.listen-button.instruction:hover { background: #ece0ff; }
.speaker { width: 29px; height: 29px; display: grid; place-items: center; background: white; border-radius: 10px; font-size: 11px; box-shadow: 0 3px 8px #eac8d9; }
.task-area { min-height: 105px; padding: 16px 0 10px; }
.name-input { width: 100%; border: 2px solid #f2d8e5; background: #fffafd; color: var(--ink); outline: none; border-radius: 17px; padding: 14px 17px; font-weight: 800; font-size: 18px; transition: .2s; }
.name-input:focus { border-color: #f183b6; box-shadow: 0 0 0 5px #ffe8f3; }
.choice-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.choice { min-height: 58px; border: 2px solid #f1dfeb; border-radius: 17px; background: white; color: var(--ink); font-weight: 900; font-size: 17px; transition: .18s; }
.choice:hover, .choice.selected { border-color: #ef70ac; background: #fff0f7; transform: translateY(-2px); box-shadow: 0 7px 14px #f1d4e2; }
.choice.correct { background: #e8fff3; border-color: #74d6a4; }
.phrase-builder { display: flex; flex-wrap: wrap; gap: 8px; }
.word-chip { border: 0; border-radius: 13px; padding: 11px 15px; background: #f7eafa; color: #6f4171; font-weight: 900; box-shadow: 0 3px 8px #eaddec; }
.word-chip.used { opacity: .3; pointer-events: none; }
.built-phrase { min-height: 48px; border: 2px dashed #e9bdd3; border-radius: 15px; padding: 10px 14px; margin-bottom: 10px; color: var(--pink-dark); font-weight: 900; }
.primary-button { width: 100%; min-height: 56px; padding: 13px 20px; display: flex; justify-content: center; align-items: center; gap: 14px; border: 0; border-radius: 18px; background: linear-gradient(135deg,#f45a9e,#df5eaf); color: white; font-weight: 900; box-shadow: 0 11px 22px rgba(222,79,150,.3), inset 0 1px rgba(255,255,255,.4); transition: .18s; }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(222,79,150,.36); }
.primary-button:active { transform: translateY(0); }
.primary-button:disabled { opacity: .5; cursor: default; transform: none; }
.gentle-note { text-align: center; margin: 13px 0 -4px; font-size: 12px; color: #9a8496; }
.speech-bubble { position: absolute; top: 34%; left: 64%; background: rgba(255,255,255,.94); border: 1px solid white; border-radius: 22px 22px 22px 5px; padding: 14px 19px; box-shadow: 0 14px 28px rgba(88,60,104,.17); animation: float 4s ease-in-out infinite; }
.speech-bubble small { display: block; color: #a688a2; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.speech-bubble strong { font: 700 20px "Baloo 2"; color: var(--pink-dark); }
.sparkles i { position: absolute; color: #fff5a3; font-style: normal; text-shadow: 0 0 12px white; animation: twinkle 2.5s infinite; }
.sparkles i:nth-child(1){left:58%;top:14%}.sparkles i:nth-child(2){left:47%;top:34%;animation-delay:.6s}.sparkles i:nth-child(3){right:5%;top:25%;animation-delay:1s}.sparkles i:nth-child(4){left:55%;bottom:14%;animation-delay:1.6s}
.footer-note { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 5; color: rgba(86,55,85,.65); font-size: 11px; font-weight: 800; }

dialog { border: 0; color: var(--ink); }
dialog::backdrop { background: rgba(79,43,80,.4); backdrop-filter: blur(7px); }
.reward-modal, .parent-modal { width: min(440px, calc(100vw - 32px)); border-radius: 32px; padding: 38px; box-shadow: var(--shadow); overflow: hidden; }
.reward-modal { text-align: center; background: linear-gradient(165deg,#fffafd,#fff0f7); }
.reward-modal h2 em { color: var(--pink); font-style: normal; }
.reward-modal p { color: var(--muted); }
.close-button { position: absolute; top: 16px; right: 16px; width: 35px; height: 35px; border: 0; border-radius: 50%; background: #f7e9f0; color: #936e88; font-size: 22px; z-index: 2; }
.big-lollipop { width: 96px; height: 118px; margin: 0 auto 6px; position: relative; }
.big-lollipop span { position: absolute; width: 90px; height: 90px; border-radius: 50%; left: 3px; top: 0; background: conic-gradient(#fff 0 9%,#fa67ab 10% 19%,#fff 20% 29%,#f3b755 30% 39%,#fff 40% 49%,#8dd4ea 50% 59%,#fff 60% 69%,#ba7cdf 70% 79%,#fff 80% 89%,#fa67ab 90%); box-shadow: inset 0 0 0 5px rgba(255,255,255,.6),0 12px 25px #ecc1d6; }
.big-lollipop::after { content:""; width: 8px; height: 48px; background:#d4a87a; position:absolute; bottom:0; left:44px; border-radius:8px; z-index:-1; }
.reward-stars { color:#ffc85a; font-size:27px; letter-spacing:8px; margin:15px 0; }
.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:22px 0; }
.stat-grid div { background:#fff3f8; padding:14px 7px; border-radius:17px; text-align:center; }
.stat-grid strong,.stat-grid span { display:block; }.stat-grid strong{font:800 24px "Baloo 2";color:var(--pink)}.stat-grid span{font-size:10px;color:var(--muted)}
.skill-row { display:flex; justify-content:space-between; padding:14px 0; border-bottom:1px solid #f2e3eb; font-size:14px; }.skill-row b{color:var(--pink)}
.parent-hint { background:#f7f1ff; color:#806d84; padding:14px; border-radius:14px; font-size:12px; line-height:1.5; }

@keyframes float { 50% { transform: translateY(-8px) rotate(1deg); } }
@keyframes twinkle { 50% { opacity:.35; transform:scale(.7) rotate(20deg); } }
@keyframes pop { 0%{transform:scale(.75);opacity:0}70%{transform:scale(1.06)}100%{transform:scale(1);opacity:1} }
.pop { animation: pop .35s ease-out; }

@media (max-width: 850px) {
  .world-map { min-height:calc(100vh - 68px);padding-top:26px;overflow:auto; }
  .cloud-map { height:730px;width:100%; }
  .rainbow-route { height:690px;top:200px;width:94vw; }
  .level-cloud { width:205px;min-height:130px; }
  .level-one{left:1%;top:70px}.level-two{right:0;left:auto;top:160px}.level-three{right:1%;left:auto;top:465px}.level-four{left:0;right:auto;top:550px}.level-five{left:36%;top:310px}
  .hero { padding: 26px 18px 120px; background-position: 66% center; }
  .hero::after { background: linear-gradient(180deg,rgba(255,247,249,.28),rgba(255,247,249,.82) 53%,rgba(255,247,249,.95)); }
  .lesson-progress, .lesson-card { width: 100%; }
  .lesson-progress { margin-top: 39vh; }
  .lesson-card { min-height: 0; border-radius: 28px; }
  .speech-bubble { top: 25%; left: auto; right: 7%; }
  h1 { font-size: 42px; }
}
@media (max-width: 560px) {
  .topbar { height: 68px; padding: 0 14px; }
  .brand { font-size: 19px; }.brand-mark { width:34px;height:34px; }
  .parent-button { width: 44px; padding: 0; font-size: 0; }.parent-button::after{content:"↗";font-size:18px;color:var(--pink)}
  .sound-button { display:none; }
  .hero { min-height: calc(100vh - 68px); background-position: 68% top; background-size: auto 52vh; background-color:#fae6f1; }
  .map-heading h1 { font-size:42px; }.map-heading p:not(.eyebrow){font-size:13px;padding:0 18px}.cloud-map{height:790px;margin-top:14px}.level-cloud{width:184px;min-height:126px;padding:22px 16px 17px}.level-cloud::before{width:82px;height:82px;top:-25px}.level-cloud::after{width:96px;height:96px;top:-34px}.level-one{left:0;top:65px}.level-two{right:0;top:175px}.level-three{right:0;top:525px}.level-four{left:0;top:635px}.level-five{left:26%;top:350px}.rainbow-route{height:740px;top:205px;width:105vw}.rainbow-bands .band{stroke-width:4.5}
  .lesson-progress { margin-top: 34vh; }
  .lesson-card { padding: 26px 22px; }
  .speech-bubble { top: 19%; right: 4%; padding:10px 13px; }.speech-bubble strong{font-size:16px}
  .choice-grid { grid-template-columns:1fr 1fr; }
  .footer-note { display:none; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation:none!important;scroll-behavior:auto!important;transition:none!important; } }