@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Nunito:wght@700;800;900&display=swap');

:root{
  --bg:#fbf7ff;
  --paper:#fffdfb;
  --ink:#3d3547;
  --muted:#7b7383;
  --lav:#aa90df;
  --lav-soft:#eee6fb;
  --pink:#f0a8c2;
  --peach:#f2b49f;
  --sage:#8fc59d;
  --sage-soft:#e6f4e7;
  --sun:#f6d783;
  --red:#dc747d;
  --green:#53916a;
  --shadow:0 20px 54px rgba(87,68,115,.13);
}

html,body{font-family:"DM Sans",ui-rounded,"SF Pro Rounded",system-ui,sans-serif;background:linear-gradient(160deg,#fbf7ff 0%,#fffaf4 48%,#f6fff9 100%)}
body{background-attachment:fixed}
button,input,textarea,select{font-family:inherit}
.app-shell{grid-template-rows:78px minmax(0,1fr);background:radial-gradient(circle at 10% -15%,rgba(255,255,255,.95) 0 18%,transparent 40%),linear-gradient(160deg,#fbf7ff 0%,#fffaf4 48%,#f6fff9 100%)}

/* top bar — closer to Miori Spell Garden */
.topbar{height:78px;padding:0 max(24px,env(safe-area-inset-right)) 0 max(24px,env(safe-area-inset-left));gap:26px;background:rgba(255,253,251,.84);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(88,69,116,.08);box-shadow:0 4px 20px rgba(87,68,115,.04)}
.brand{gap:12px;min-width:250px}.brand-mark{width:44px;height:44px;border-radius:15px;background:linear-gradient(135deg,#ffb6cf,#c6b4ef);box-shadow:0 8px 20px rgba(143,102,174,.18);font-size:22px}.brand strong{font:900 18px "Nunito",sans-serif;letter-spacing:-.02em}.brand small{font-size:10.5px;letter-spacing:.03em;color:#857a8b}.level-wrap{max-width:520px;margin-left:auto}.level-row{font-size:11.5px;font-weight:800;color:#655d70;margin-bottom:7px}.xp-track{height:11px;background:#ede8f0;box-shadow:inset 0 1px 2px rgba(50,40,60,.08)}.xp-fill{position:relative;background:linear-gradient(90deg,#ffb4ce,#bba5ef 48%,#9fd9b1);transition:width 1s cubic-bezier(.2,.8,.2,1)}.xp-fill:after{content:"";position:absolute;inset:1px 5px auto;height:3px;border-radius:99px;background:rgba(255,255,255,.45)}.main-nav{background:transparent;padding:0;gap:7px}.nav-btn{padding:10px 16px;border-radius:14px;font-size:12px;font-weight:800;color:#7d7588}.nav-btn.active{background:#f1eafb;color:#5a496d;box-shadow:none}.play-nav{background:linear-gradient(135deg,#b6a0ec,#ffb6ce)!important;color:#fff!important;box-shadow:0 8px 20px rgba(171,130,211,.22)}

main{padding:20px 28px 28px}.eyebrow{font-size:10.5px;font-weight:900;letter-spacing:.17em;color:#9d87ab}.primary-btn{background:linear-gradient(135deg,#a58ce1,#f19aba);box-shadow:0 9px 24px rgba(148,107,180,.22)}.secondary-btn{background:#fff;border:1px solid #e7dfeb;color:#675a73;box-shadow:0 4px 12px rgba(76,60,92,.06)}

/* Garden / top screen */
.garden-view{max-width:1240px;gap:18px}.garden-head{padding:0 4px;align-items:end}.garden-head h1{font:900 clamp(27px,3vw,34px) "Nunito",sans-serif;letter-spacing:-.025em;color:#3b3448}.garden-head .sub{font-size:12px;color:#817989;margin-top:7px}.garden-head .primary-btn{min-width:142px;font-size:16px;padding:13px 20px;border-radius:17px}.garden-scene{border-radius:34px;background:linear-gradient(#dff3ff 0%,#ecf8ef 48%,#bfe0b8 49%,#98c58c 100%);box-shadow:var(--shadow);border:1px solid rgba(78,110,73,.10);isolation:isolate}.garden-scene:before{content:"";position:absolute;width:245px;height:245px;border-radius:50%;background:#fff5c8;right:9%;top:-95px;opacity:.76;filter:blur(2px)}.garden-scene:after{content:"";position:absolute;width:165px;height:165px;border-radius:50%;background:#f7defd;left:5%;top:-82px;opacity:.6;filter:blur(2px)}.sun{width:94px;height:94px;right:9%;top:8%;background:radial-gradient(circle,#fff9c9 0 32%,#f2d982 55%,rgba(242,217,130,.05) 73%);z-index:1}.cloud{background:rgba(255,255,255,.78);opacity:.9;filter:drop-shadow(0 5px 10px rgba(91,80,101,.05));z-index:2}.cloud.a{left:11%;top:13%;transform:scale(.9)}.cloud.b{right:23%;top:20%;transform:scale(.62);opacity:.65}.hill.back{top:35%;height:29%;background:#bfe1b6;transform:rotate(2deg)}.hill.front{top:48%;height:32%;background:#abd49f;transform:rotate(-2deg)}.path{left:45%;top:52%;width:18%;height:52%;background:#dfd6c5;opacity:.92;clip-path:polygon(39% 0,61% 0,100% 100%,0 100%)}.pond{right:7%;bottom:7%;width:22%;height:16%;background:linear-gradient(180deg,#a5dfe0,#7fc8ca);box-shadow:inset 0 7px 15px rgba(255,255,255,.32),0 3px 0 rgba(69,126,119,.12)}.plot{bottom:10%;border-color:#c89a74;background:linear-gradient(#a87a59,#8c6249);box-shadow:0 12px 0 rgba(71,100,66,.08),inset 0 5px 0 rgba(255,255,255,.08)}.plot.left{left:11%}.plot.right{left:38%}.garden-object{filter:drop-shadow(0 12px 10px rgba(68,55,39,.18))}.garden-tip{bottom:14px;background:rgba(255,253,251,.88);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);border:1px solid rgba(255,255,255,.7);padding:9px 15px;font-size:10px;color:#756c78;box-shadow:0 8px 20px rgba(73,59,79,.12)}

/* Play home */
.play-view{max-width:1160px;padding:0 0 8px}.play-home{place-items:center}.play-hero-card{width:min(1040px,100%);min-height:470px;padding:48px 52px;border-radius:36px;grid-template-columns:1.25fr .75fr;background:linear-gradient(135deg,#fffdfb 0%,#f7effd 53%,#eef8ef 100%);border:1px solid rgba(190,170,210,.2);box-shadow:var(--shadow);position:relative;overflow:hidden}.play-hero-card:before{content:"";position:absolute;width:240px;height:240px;border-radius:50%;background:rgba(255,210,227,.32);right:-55px;top:-65px}.play-hero-card:after{content:"";position:absolute;width:170px;height:170px;border-radius:50%;background:rgba(211,240,216,.45);left:43%;bottom:-95px}.play-hero-card>div{position:relative;z-index:2}.play-hero-card h1{font:900 clamp(34px,4vw,46px) "Nunito",sans-serif;letter-spacing:-.03em;line-height:1.04;color:#3d3548}.play-hero-card p{max-width:560px;font-size:13px;line-height:1.7;color:#7a7281}.giant{margin-top:20px;border-radius:18px;background:linear-gradient(135deg,#a58ce1,#f19aba);padding:15px 24px;font-size:17px;box-shadow:0 10px 24px rgba(148,107,180,.24)}.play-meta{margin-top:20px;gap:9px}.play-meta span{background:rgba(255,255,255,.8);border:1px solid rgba(229,220,234,.7);padding:8px 11px;font-size:10px;font-weight:800;color:#746b79;box-shadow:0 4px 10px rgba(74,58,85,.04)}.play-mascot{position:relative}.mascot-bubble{width:228px;height:228px;border-radius:50%;background:radial-gradient(circle at 36% 25%,#fff 0 22%,#fff8fb 23% 62%,#eee6fb 100%);font-size:108px;box-shadow:0 22px 52px rgba(104,78,118,.15),inset 0 0 0 1px rgba(255,255,255,.8);animation:sgFloat 4s ease-in-out infinite}.play-mascot:before,.play-mascot:after{position:absolute;color:#c692bf;font-size:28px;z-index:3}.play-mascot:before{content:"✦";right:4px;top:18px;animation:sgTwinkle 2s ease-in-out infinite}.play-mascot:after{content:"✧";left:10px;bottom:25px;animation:sgTwinkle 2.4s ease-in-out infinite reverse}@keyframes sgFloat{50%{transform:translateY(-8px) rotate(1deg)}}@keyframes sgTwinkle{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}

/* Play task */
.game-topline{grid-template-columns:52px 1fr 88px;gap:17px;margin:1px 4px 13px}.icon-btn{border:1px solid #e6dfeb;background:#fff;box-shadow:0 5px 14px rgba(76,60,92,.06);font-size:22px}.stage-labels{font-size:11.5px;color:#6b6172;margin-bottom:7px}.stage-track{height:8px;background:#ebe6ee}.stage-fill{background:linear-gradient(90deg,#e994b6,#ad96e1);transition:.45s}.session-xp{background:#eef7e9;color:#64806b;padding:8px 11px}.game-card{border-radius:31px;padding:24px 34px 20px;background:rgba(255,255,255,.91);border:1px solid #ede5ef;box-shadow:var(--shadow)}.word-audio-row{gap:17px;justify-content:center}.audio-orb{width:70px;height:70px;border-radius:23px;background:linear-gradient(135deg,#e4f4ff,#f2e9ff);box-shadow:0 8px 18px rgba(95,78,120,.10);font-size:28px}.task-prompt{font:900 21px "Nunito",sans-serif;letter-spacing:-.015em}.task-subprompt{font-size:11.5px;color:#81798a}.voice-pill{margin-top:6px;background:#f2ecf7;color:#715e7b;border:1px solid #e8def0;padding:4px 8px;font-size:9px}.voice-pill:has(+ *){white-space:nowrap}

/* Always-visible visual hint card */
.word-visual-cue{width:min(760px,100%);margin:16px auto 8px;grid-template-columns:76px 1fr;gap:16px;padding:14px 18px;border-radius:22px;background:linear-gradient(135deg,rgba(249,244,255,.98),rgba(246,253,247,.98));border:1px solid #eee5f2;box-shadow:0 7px 18px rgba(89,67,106,.05)}.cue-emoji{width:68px;height:68px;border-radius:20px;background:linear-gradient(145deg,#fff,#fff9f0);box-shadow:0 8px 18px rgba(87,66,80,.08),inset 0 0 0 1px rgba(255,255,255,.8);font-size:39px;position:relative}.cue-emoji:after{content:"✦";position:absolute;right:-5px;top:-7px;font-size:13px;color:#c99bc0}.cue-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}.cue-copy:before{content:"PICTURE CLUE";font-size:8.5px;font-weight:900;letter-spacing:.15em;color:#aa8db1;margin-bottom:3px}.cue-copy .meaning{order:1;margin:0!important;color:#4f6455!important;font-size:13.2px!important;font-weight:800!important;line-height:1.35!important}.cue-copy strong{order:2;font-size:11px!important;color:#766b7a;font-weight:700!important;margin-top:4px}.cue-copy p:not(.meaning){order:3;font-size:10px!important;color:#8a808c!important;margin-top:3px!important}.question-area{min-height:205px;padding:10px 0 4px}.choice-grid{gap:13px;width:min(760px,100%)}.choice-btn{min-height:70px;border:2px solid #eee8f1;background:#fff;border-radius:18px;font-size:18px;font-weight:900;box-shadow:0 7px 15px rgba(73,60,83,.06);transition:.15s}.choice-btn:hover{border-color:#d7c8ea;transform:translateY(-2px)}.choice-btn.correct{border-color:#85c79d;background:#effaf2;color:#3b8358}.choice-btn.wrong{border-color:#eda3a4;background:#fff3f3;color:#b24f55}.gap-word{font:900 clamp(34px,5vw,44px) "Nunito",sans-serif;letter-spacing:.07em}.gap-slot{min-width:85px;height:56px;border:2px dashed #ad96df;background:#f8f2ff;color:#8f75bd}.feedback{font-size:12px;font-weight:800;min-height:34px}.help-row{border-top:1px solid #f0ebf2;padding-top:14px;margin-top:4px;gap:8px}.help-btn{border:1px solid #ebe3ef;background:#faf8fc;color:#74677d;padding:8px 11px}.help-btn.hint{background:#f0e8fa;color:#6e5a7b}.help-panel{background:#faf7ff;border:1px solid #ede4f4;color:#685d72;box-shadow:0 4px 12px rgba(76,60,92,.04)}

/* handwriting — keep the proven independent input architecture */
.spell-wrap{width:min(880px,100%)}.pencil-modebar{margin:0 auto 10px}.mode-btn{background:#f7f3f7;border:1px solid #ece4ef;padding:8px 14px}.mode-btn.on.write{background:#e8f5e8;border-color:#d4e9d7;color:#50715b}.mode-btn.on.erase{background:#f0e6f8;border-color:#e2d3ef;color:#6e587e}.box-note{font-size:9.5px;color:#8b818d;margin-bottom:8px}.letter-row{gap:7px}.letter-box,.fixed-box{height:72px;border-radius:16px;font:900 clamp(20px,3.3vw,31px) "Nunito",sans-serif;box-shadow:inset 0 -7px #faf6f0,0 4px 10px rgba(77,61,83,.035)}.fixed-box{background:#f2eeeb;border-color:#e0d8d1;color:#776d72;box-shadow:none}.letter-box{border-color:#d9cfe0;background:#fff;transition:border-color .16s,box-shadow .16s,transform .16s}.letter-box:focus{border-color:#aa91d9;box-shadow:0 0 0 4px rgba(170,145,217,.13),inset 0 -7px #faf6f0}.letter-box.ok{background:#eff9f2;border-color:#85c79d;color:#3b8358}.letter-box.bad{background:#fff1f2;border-color:#e59a9e;color:#b24f55}.letter-box.missing{background:#fff8f8;border-color:#e59a9e}.letter-box.hint-target{background:#f2eaff;border-color:#aa8bce;box-shadow:0 0 0 5px rgba(170,139,206,.15)}.check-answer{margin-top:12px;min-width:176px;height:49px;border-radius:16px;background:linear-gradient(135deg,#82b18c,#669975);box-shadow:0 8px 18px rgba(86,125,95,.18)}.hint-strip{background:#f3ebfb;border:1px solid #e7d9f1;padding:9px 11px}.hint-choice{background:#fff;border:1px solid #e3d8eb}

/* rewards */
.reward-card{border:1px solid #ede5ef;background:rgba(255,255,255,.92);box-shadow:var(--shadow)}.reward-card h1{font-family:"Nunito",sans-serif}.reward-chips span{background:#eef7e9;color:#5d765f;border:1px solid #e0ecdc}

/* Parent */
.parent-view{max-width:1240px}.parent-head h1,.panel h2{font-family:"Nunito",sans-serif}.parent-head p{font-size:12px}.panel{background:rgba(255,255,255,.88);border:1px solid #eee6f0;box-shadow:0 10px 28px rgba(76,60,92,.07)}.word-row{background:#faf7f4;border:1px solid #f0e8e5}.pill{background:#f0e8fa;color:#6a5875}.settings select,.search-input{background:#f7f3f7;border:1px solid #ece4ef}.modal-card{border:1px solid #eee5ef}.word-form input,.word-form textarea{background:#fcf9fc;border-color:#e4dbe7}

@media(max-width:1080px){
  .topbar{padding-left:18px;padding-right:18px;gap:16px}.brand{min-width:210px}.level-wrap{max-width:380px}.nav-btn{padding:9px 12px}
  main{padding:14px 18px 18px}.play-hero-card{padding:38px 40px}.mascot-bubble{width:200px;height:200px;font-size:96px}
  .game-card{padding:20px 24px 17px}.word-visual-cue{width:min(720px,100%)}
}
@media(max-width:860px){
  .brand small{display:none}.brand{min-width:155px}.level-wrap{max-width:290px}.main-nav{gap:3px}.nav-btn{padding:8px 9px}
  .play-hero-card{grid-template-columns:1fr;padding:32px}.play-mascot{display:none}.choice-grid{grid-template-columns:1fr}.choice-btn{min-height:55px}.word-visual-cue{grid-template-columns:58px 1fr;padding:11px 13px}.cue-emoji{width:54px;height:54px;font-size:31px}.letter-row{gap:4px}.letter-box,.fixed-box{height:60px;border-radius:13px;font-size:clamp(17px,5vw,25px)}
}
@media(max-height:760px) and (min-width:700px){
  main{padding-top:10px;padding-bottom:12px}.garden-view{gap:10px}.garden-head h1{font-size:25px}.play-hero-card{min-height:410px;padding-top:34px;padding-bottom:34px}.game-card{padding-top:16px}.word-visual-cue{margin-top:9px;margin-bottom:4px;padding-top:9px;padding-bottom:9px}.cue-emoji{width:56px;height:56px;font-size:32px}.question-area{min-height:165px}.letter-box,.fixed-box{height:58px}.audio-orb{width:58px;height:58px}.help-row{padding-top:9px}
}