/* Candy Planet: a mobile-first child interface layered over the existing app. */
:root{
  --ink:#24304b;--muted:#66708a;--line:#dfe4f4;--card:#fff;
  --accent:#6757e8;--accent-dark:#4f40c9;--accent-soft:#eeebff;
  --sun:#ffd85c;--mint:#38c99a;--sky:#49b9ef;--coral:#ff796d;
  --shadow:0 8px 0 #dfe4f4,0 18px 36px #4d579318;
  font-family:"Arial Rounded MT Bold","Microsoft YaHei UI","Microsoft YaHei",system-ui,sans-serif;
  color:var(--ink);background:#f5f7ff;
}
body{color:var(--ink);background:#f5f7ff}
p,small,.muted{color:var(--muted)}
button,a{ -webkit-tap-highlight-color:transparent }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:4px solid var(--sun);outline-offset:3px}

/* App chrome */
#mainContent{background:
  radial-gradient(circle at 8% 8%,#fff 0 3px,transparent 4px),
  radial-gradient(circle at 88% 16%,#fff 0 4px,transparent 5px),
  linear-gradient(180deg,#eef3ff 0,#f7f9ff 230px,#f5f7ff 100%)}
.app-toolbar{height:calc(70px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 28px 0;border:0;background:#6757e8;color:#fff;box-shadow:0 5px 0 #5143c5;z-index:15}
.app-toolbar h1{font-size:22px;font-weight:900;letter-spacing:.01em}
.app-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:15px;background:#fff2;box-shadow:inset 0 0 0 2px #fff3;font-size:25px}
.app-stars{background:#fff4be;color:#72500b;border:2px solid #ffe071;box-shadow:0 3px 0 #493cac;padding:7px 13px;font-weight:900}
.app-back{color:#fff;min-height:48px;border-radius:14px;font-weight:900}.app-back:active{background:#ffffff20}
.screen-scroll{padding-top:24px;padding-bottom:44px}
.screen-hint{margin:0 0 18px;color:#66708a;font-weight:700}
.sidebar{background:linear-gradient(180deg,#6757e8,#5748cf);box-shadow:4px 0 0 #4a3db9;color:#fff;padding-top:22px}
.sidebar .brand{width:56px;height:56px;display:grid;place-items:center;border-radius:19px;background:#fff2;font-size:30px}
.sidebar nav a{color:#eeecff;font-weight:800;min-height:72px}.sidebar nav a.active{background:#fff;color:#5142cf;box-shadow:0 5px 0 #3f34a8}.sidebar nav a:hover{background:#ffffff22}.sidebar-bottom a{display:grid;place-items:center;min-height:44px;color:#e7e4ff}

/* Shared child-friendly controls */
.btn{min-height:52px;border:2px solid #dce1f2;border-radius:18px;background:#fff;color:#3d4763;font-weight:900;box-shadow:0 4px 0 #dce1f2;padding:12px 19px;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.btn:hover{background:#f7f6ff;border-color:#c7c0fa}.btn:active{transform:translateY(3px)!important;box-shadow:0 1px 0 #dce1f2}
.btn.primary{background:linear-gradient(180deg,#7465f3,#6253e4);border-color:#5848d7;color:#fff;box-shadow:0 5px 0 #493bb9}
.btn.primary:hover{background:linear-gradient(180deg,#8072f7,#6859e8)}
.btn.selected,.tabs .selected{background:#6757e8!important;border-color:#5546d0!important;color:#fff!important;box-shadow:0 4px 0 #4639ad!important}
.pill{border:0;border-radius:999px;background:#eeebff;color:#5143c4;padding:7px 12px;font-weight:900}
.panel{border:2px solid #e5e8f5;border-radius:28px;box-shadow:0 7px 0 #e1e5f2;background:#fff;padding:24px}

/* Home: the first screen is a mission dashboard, not a web landing page. */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:270px;padding:30px 210px 28px 30px;border:0;border-radius:32px;background:linear-gradient(135deg,#7164ee 0%,#8b76f2 55%,#54bce9 100%);box-shadow:0 9px 0 #5042c7,0 22px 42px #5147b52b;color:#fff}
.hero:before,.hero:after{content:"";position:absolute;z-index:-1;border-radius:50%;background:#ffffff16}
.hero:before{width:260px;height:260px;right:-75px;top:-85px}.hero:after{width:110px;height:110px;left:46%;bottom:-70px}
.hero h2{margin:15px 0 7px;color:#fff;font-size:clamp(1.65rem,3vw,2.25rem);line-height:1.25}
.hero p{color:#fff;font-weight:800}.hero .pill{background:#fff2bd;color:#6c4d08}
.hero progress,.reading-world progress{border:0;border-radius:99px;overflow:hidden;background:#ffffff3b;accent-color:var(--sun)}
.hero progress::-webkit-progress-bar,.reading-world progress::-webkit-progress-bar{background:#ffffff55;border-radius:99px}.hero progress::-webkit-progress-value,.reading-world progress::-webkit-progress-value{background:linear-gradient(90deg,#ffd85c,#ffef9d);border-radius:99px}.hero progress::-moz-progress-bar,.reading-world progress::-moz-progress-bar{background:linear-gradient(90deg,#ffd85c,#ffef9d);border-radius:99px}
.hero .btn.primary{background:#ffd85c;border-color:#f3bd23;color:#533f0a;box-shadow:0 5px 0 #d29d15}.hero .btn:not(.primary){background:#fff;color:#5446cb;border-color:#fff;box-shadow:0 5px 0 #d9d5ff}
.planet{position:absolute;right:28px;top:42px;display:grid!important;min-width:150px;font-size:105px;filter:drop-shadow(0 10px 0 #4c45a133);animation:planet-bob 3.2s ease-in-out infinite}
.planet span{color:#fff;background:#ffffff24;border:1px solid #ffffff44;border-radius:999px;padding:6px 10px;letter-spacing:2px}
.stats{gap:12px;margin:24px 0 30px}.stats>div{position:relative;overflow:hidden;border:2px solid #e6e9f6;border-radius:24px;background:#fff;box-shadow:0 6px 0 #e2e6f3;padding:18px}
.stats>div:before{content:"";width:10px;align-self:stretch;border-radius:99px;background:var(--sun)}.stats>div:nth-child(2):before{background:var(--mint)}.stats>div:nth-child(3):before{background:var(--coral)}
.stats strong{color:#5142cf;font-size:28px}.stats span{color:#68728a;font-weight:800}
#mainContent:has(.hero) .screen-scroll>h2{font-size:21px;margin:0 0 14px}
#mainContent:has(.hero) .cards{margin-top:0}

/* Course and game cards */
.cards{gap:16px}.entry{min-height:164px;border:2px solid #e5e8f5;border-radius:26px;box-shadow:0 7px 0 #e0e4f2;background:#fff;padding:21px;transition:transform .14s ease,box-shadow .14s ease}
.entry:hover{border-color:#d4ceff;box-shadow:0 8px 0 #d8d3ff,0 18px 30px #5147b518;transform:translateY(-2px)}.entry:active{transform:translateY(4px)!important;box-shadow:0 2px 0 #dfe3f0}
.entry-icon{width:60px;height:60px;border-radius:21px;background:#eeeaff;font-size:31px;box-shadow:inset 0 -4px 0 #ded8ff}
.entry strong{font-size:18px;color:#2d3652}.entry>span:not(.entry-icon){font-size:14px;line-height:1.55;font-weight:650;color:#737c94}
.cards .entry:nth-child(4n+2) .entry-icon{background:#e1f9ef;box-shadow:inset 0 -4px 0 #c9efdf}.cards .entry:nth-child(4n+3) .entry-icon{background:#fff1d0;box-shadow:inset 0 -4px 0 #ffe3a0}.cards .entry:nth-child(4n) .entry-icon{background:#ffe5e3;box-shadow:inset 0 -4px 0 #ffcfc9}
.tabs{top:-24px;padding:10px 0 14px;background:#f5f7ff}.tabs .btn{min-height:48px;border:0;background:#fff;color:#5d6680;box-shadow:0 4px 0 #dfe3f0}
.word-tile{min-height:164px;border:2px solid #e6e9f5;border-radius:24px;background:#fff;box-shadow:0 6px 0 #e2e6f2;transition:transform .12s ease}.word-tile:active{transform:translateY(4px)!important;box-shadow:0 2px 0 #e2e6f2}
.word-tile>span:first-child{font-size:42px}.word-tile strong{font-size:20px;color:#313a57}.word-tile small{font-weight:700}.word-tile .pill{font-size:13px;background:#f0edff;color:#5546cf}
.book-import-banner{border:2px solid #ddd7ff;border-radius:26px;background:linear-gradient(135deg,#eeebff,#e9f7ff);box-shadow:0 6px 0 #dddaf0;padding:20px}.book-import-banner strong{font-size:18px;color:#4337aa}.book-import-banner p{color:#6b7390;font-weight:650}

/* Learning and play surfaces */
.hud{border:2px solid #ddd8ff;border-radius:20px;background:#f0edff;color:#4d42ad;box-shadow:0 5px 0 #ded9f3;font-weight:900;padding:14px 18px}
.learning{border-radius:32px}.big-emoji{width:112px;height:112px;margin:18px auto;display:grid;place-items:center;border-radius:38px;background:#f0edff;box-shadow:inset 0 -7px 0 #ded8ff;font-size:62px}
.word-hero,.sentence{color:#28324f;font-weight:900}.word-meaning{color:#5e6580!important}.steps li{border:0;border-radius:14px;background:#e9ecf5;color:#7b8397;font-weight:800}.steps .current{background:#fff0b8;color:#7b5700;box-shadow:inset 0 -4px 0 #ffdb60}.steps .done{background:#dff7ed;color:#167553;box-shadow:inset 0 -4px 0 #bae9d5}
.choices{gap:14px}.choice{min-height:126px;border:3px solid #e3e6f3;border-radius:24px;background:#fff;box-shadow:0 6px 0 #dfe3f0;color:#303955;font-weight:900}.choice:active{transform:translateY(4px);box-shadow:0 2px 0 #dfe3f0}.choice>span{font-size:44px}.choice .choice-meaning{display:block;margin-top:8px;font-size:18px;color:#4c5673;letter-spacing:.05em}
.choice.correct:disabled{outline:4px solid #2fbd86;background:#ddf8ec;border-color:#2fbd86;color:#146648}.choice.missed:disabled{background:#ffe7e4;border-color:#ff8a80;opacity:.7}
.spell-slots{border:3px dashed #b8b0f3;background:#f6f4ff;border-radius:22px}.letter{min-width:54px;min-height:54px;font-size:19px}.feedback{font-size:17px;font-weight:900}.good{color:#14805b}.bad{color:#d7473f}.spelling-answer-hidden{display:inline-flex;align-items:center;min-height:36px;margin:8px 0 0;padding:7px 13px;border-radius:999px;background:#f0edff;color:#665ba8;font-weight:800}.spelling-answer-phonetic{margin:8px 0 0;font-size:18px}.spelling-tools{justify-content:center;margin:8px 0}.spelling-tools .btn{min-width:138px}
.memory-card{border:3px solid #5141c7;border-radius:24px;background:linear-gradient(145deg,#7667f1,#5949d0);box-shadow:0 7px 0 #4336a8;color:#fff}.memory-card.matched{background:#dff7ed;border-color:#34b983;color:#146648;box-shadow:0 7px 0 #a7dfca}
.action-bar{border-top:2px solid #e6e8f3;background:#fffffffa;box-shadow:0 -8px 24px #545b8714}

/* Reading quest */
.reading-world{border:2px solid #d9d2ff;border-radius:32px;background:radial-gradient(circle at 86% 12%,#fff5ae 0 9%,transparent 10%),linear-gradient(#e9e7ff 43%,#dff6ef 44%,#c9eddd);box-shadow:0 8px 0 #d8dced;padding:24px 30px 20px}
.reading-progress{color:#4c43a5;font-weight:900}.reading-board{border:8px solid #6554d9;border-bottom-width:13px;border-radius:30px;background:#fff;box-shadow:0 7px 0 #4b3caf2b;padding:23px}
.reading-stars{color:#ffc928;text-shadow:0 3px 0 #d99d10}.reading-board .pill{background:#fff0b7;color:#755500}.spoken-sentence .speaking-word{background:#ffe37a;color:#963f20;box-shadow:0 4px 0 #e7b84c}
.line-translation{color:#66708a;font-weight:800}.reading-board .recorder .primary{background:linear-gradient(180deg,#ff8177,#f1645b);color:#fff;border-color:#e8544c;box-shadow:0 6px 0 #bd443e}
.trail-step{background:#fff;color:#6254ce;box-shadow:0 5px 0 #c7c1ee}.trail-step.current{background:#ffd85c;color:#664a08;outline:4px solid #fff}.trail-step.cleared{background:#38c99a;color:#fff;box-shadow:0 5px 0 #219b73}

/* Feedback surfaces */
#reward-root{top:calc(82px + env(safe-area-inset-top));border:3px solid #ffc82e;border-radius:26px;background:linear-gradient(135deg,#fff7c9,#fff);box-shadow:0 8px 0 #e5ae16,0 20px 45px #7c5b1733;padding:15px 24px}
#reward-root strong{color:#674b09}.result-score{color:#5949d1}.modal-shade{background:#27204f80}.modal{border:2px solid #ddd8f7;box-shadow:0 12px 0 #39305c44}.word-reward-screen{position:relative;isolation:isolate;overflow:hidden;max-width:680px;min-height:560px;margin:10px auto;padding:64px 28px 36px;border:3px solid #ded7ff;border-radius:38px;background:radial-gradient(circle at 50% 20%,#fff8bc 0 15%,transparent 16%),linear-gradient(145deg,#fff 0%,#f4f0ff 55%,#e5f8ff 100%);box-shadow:0 10px 0 #d7d3ee,0 28px 55px #4b43a926;text-align:center}.word-reward-screen:before{content:"";position:absolute;z-index:-1;inset:auto -80px -130px;height:280px;border-radius:50%;background:#dff7ed}.reward-crown{font-size:92px;line-height:1;filter:drop-shadow(0 8px 0 #dba91e44);animation:reward-crown-in .7s cubic-bezier(.2,1.5,.5,1) both}.reward-kicker{display:inline-block;margin:16px 0 5px;padding:7px 16px;border-radius:999px;background:#6757e8;color:#fff;font-size:16px;font-weight:900}.word-reward-screen h2{margin:8px 0 0;color:#3d319e;font-size:clamp(2.4rem,8vw,4rem)}.reward-meaning{margin:2px 0 15px;color:#626b84;font-size:20px;font-weight:800}.reward-stars{display:inline-block;margin:8px 0 12px;padding:13px 25px;border:3px solid #f2c332;border-radius:22px;background:#fff1a8;box-shadow:0 6px 0 #dea91d;color:#694b08;font-size:28px;font-weight:900;animation:reward-stars-pop .8s .2s cubic-bezier(.2,1.5,.5,1) both}.word-reward-screen>.row{position:relative;justify-content:center;margin-top:24px}.reward-confetti i{position:absolute;top:-25px;color:#ffca28;font-style:normal;font-size:25px;animation:reward-confetti 2.2s ease-in-out infinite}.reward-confetti i:nth-child(1){left:10%;animation-delay:-.2s;color:#ff746b}.reward-confetti i:nth-child(2){left:24%;animation-delay:-1.1s;color:#38c99a}.reward-confetti i:nth-child(3){left:39%;animation-delay:-.6s}.reward-confetti i:nth-child(4){right:36%;animation-delay:-1.7s;color:#49b9ef}.reward-confetti i:nth-child(5){right:20%;animation-delay:-.9s;color:#ff796d}.reward-confetti i:nth-child(6){right:8%;animation-delay:-1.4s;color:#6757e8}
input,textarea,select{border:2px solid #d9ddeb;border-radius:16px;min-height:52px}input:focus,textarea:focus,select:focus{border-color:#7768ef}
#toast-root{border-radius:18px;background:#30295e;color:#fff;box-shadow:0 7px 0 #17132e80;font-weight:800}

@keyframes planet-bob{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-9px) rotate(-4deg)}}
@keyframes reward-crown-in{from{opacity:0;transform:translateY(-30px) scale(.55) rotate(-12deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@keyframes reward-stars-pop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
@keyframes reward-confetti{0%{transform:translateY(0) rotate(0);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateY(500px) rotate(360deg);opacity:0}}

/* Phone: single-hand rhythm and uncluttered first viewport. */
@media(max-width:767px){
  :root{--tab-height:78px}
  .app-toolbar{height:calc(64px + env(safe-area-inset-top));padding-left:15px;padding-right:15px;box-shadow:0 4px 0 #5143c5}.app-toolbar h1{font-size:19px}.app-mark{width:38px;height:38px;border-radius:13px}.app-stars{padding:6px 9px;font-size:13px}
  .screen-scroll{padding:18px 14px 28px}.screen-hint{font-size:14px;margin-bottom:15px}
  .tabbar{height:calc(var(--tab-height) + env(safe-area-inset-bottom));padding:7px 9px calc(7px + env(safe-area-inset-bottom));border:0;border-radius:24px 24px 0 0;box-shadow:0 -6px 24px #4248781f;background:#fff}
  .tabbar a{min-height:62px;border-radius:19px;color:#7b8298;font-size:12px;font-weight:800}.tabbar a span{font-size:25px}.tabbar a.active{background:#eeeaff;color:#5545ce;box-shadow:inset 0 -4px 0 #d9d2ff}
  .hero{min-height:0;padding:22px 18px 20px;border-radius:27px;box-shadow:0 7px 0 #5042c7}.hero h2{font-size:24px;max-width:74%;margin-top:13px}.hero p{font-size:14px}.hero progress{width:100%;margin:15px 0 18px}.hero .row{grid-template-columns:1fr}.hero .btn{width:100%}
  .planet{right:10px;top:39px;min-width:auto;font-size:67px;filter:drop-shadow(0 7px 0 #4c45a133)}.planet span{display:none}
  .stats{gap:8px;margin:18px 0 25px}.stats>div{min-width:0;padding:12px 8px;border-width:1px;border-radius:18px;box-shadow:0 4px 0 #e2e6f3;gap:4px}.stats>div:before{width:7px;min-height:30px}.stats strong{font-size:24px}.stats span{font-size:11px;line-height:1.25}
  #mainContent:has(.hero) .cards{grid-template-columns:1fr;gap:12px}
  #mainContent:has(.hero) .entry{min-height:112px;display:grid;grid-template-columns:60px 1fr;grid-template-rows:auto auto;column-gap:14px;align-content:center;padding:16px 17px}
  #mainContent:has(.hero) .entry .entry-icon{grid-row:1/3}#mainContent:has(.hero) .entry strong{align-self:end}#mainContent:has(.hero) .entry>span:not(.entry-icon){align-self:start}
  .cards{gap:11px}.entry{min-height:154px;padding:16px 13px;border-radius:23px;box-shadow:0 5px 0 #e0e4f2}.entry-icon{width:54px;height:54px;border-radius:19px;font-size:28px}.entry strong{font-size:16px}.entry>span:not(.entry-icon){font-size:13px}
  .tabs{top:-18px;margin:0 -2px 12px;padding:7px 2px 12px}.tabs .btn{min-height:46px;padding:10px 15px}
  .panel{padding:18px 15px;border-radius:25px;box-shadow:0 5px 0 #e1e5f2}.word-grid{gap:10px}.word-tile{min-height:152px;border-radius:22px;box-shadow:0 5px 0 #e2e6f2}.word-tile>span:first-child{font-size:38px}.word-tile strong{font-size:18px}
  .book-import-banner{padding:17px;border-radius:23px}.book-import-banner .btn{width:100%}
  .hud{top:-18px;padding:11px 12px;border-radius:17px;box-shadow:0 4px 0 #ded9f3}.learning{padding:18px 13px}.big-emoji{width:92px;height:92px;border-radius:32px;font-size:52px}.choices{gap:10px}.choice{min-height:112px;border-radius:21px;box-shadow:0 5px 0 #dfe3f0}.choice>span{font-size:39px}
  .reading-world{padding:13px 9px 15px;border-radius:25px;box-shadow:0 6px 0 #d8dced}.reading-board{padding:15px 10px;border-width:6px;border-bottom-width:10px;border-radius:24px}.reading-board .spoken-sentence{font-size:27px!important}.reading-guide{font-size:44px}.trail-step{min-width:34px;min-height:34px}
  .action-bar{padding:10px 14px calc(11px + env(safe-area-inset-bottom))}.action-bar .btn{min-height:54px}.word-reward-screen{min-height:520px;padding:48px 17px 28px;border-radius:28px}.reward-crown{font-size:78px}.word-reward-screen>.row{display:grid;grid-template-columns:1fr}.word-reward-screen>.row .btn{width:100%}
  #reward-root{top:calc(72px + env(safe-area-inset-top));padding:11px 15px;border-radius:22px}
}

/* Tablet and desktop expand the same app cards without changing interaction. */
@media(min-width:768px) and (max-width:1100px){
  .screen-scroll{padding:24px 28px 40px}.hero{padding-right:190px}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.word-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.entry{min-height:170px}
}
@media(min-width:1101px){
  :root{--rail:108px}.screen-scroll{padding-top:30px}.cards{grid-template-columns:repeat(3,minmax(0,1fr))}.word-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.hero{max-width:1120px}.stats{max-width:1120px}
}
@media(prefers-reduced-motion:reduce){.planet,.reward-crown,.reward-stars,.reward-confetti i{animation:none}}