:root{--ink:#17334d;--muted:#66798a;--cream:#fffaf0;--paper:#fff;--coral:#ff6b4a;--coral-dark:#e94c2a;--sky:#80d8ee;--blue:#2767d8;--yellow:#ffd45c;--mint:#76d5ae;--line:#dbe5e9;--shadow:0 16px 44px rgba(28,61,86,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:'DM Sans',sans-serif;min-height:100vh}.grain{position:fixed;inset:0;pointer-events:none;opacity:.16;z-index:20;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E")}.topbar{height:72px;padding:0 max(24px,calc((100vw - 1120px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(23,51,77,.1);background:rgba(255,250,240,.88);backdrop-filter:blur(12px);position:sticky;top:0;z-index:10}.brand{border:0;background:none;color:var(--ink);display:flex;align-items:center;gap:9px;font:800 1.05rem 'DM Sans';cursor:pointer}.brand-mark{display:grid;place-items:center;width:34px;height:34px;background:var(--coral);color:#fff;border-radius:50% 50% 45% 55%;font:800 1.2rem 'Fraunces'}.stats{display:flex;align-items:center;gap:10px}.stats span,.wallet{background:#fff;border:1px solid var(--line);padding:8px 12px;border-radius:99px;font-size:.84rem;white-space:nowrap}.coin-stat,.wallet{color:#ac7600!important;background:#fff8d9!important;border-color:#f4d56c!important}main{max-width:1120px;margin:auto;padding:42px 24px 110px}.screen{display:none;animation:enter .35s ease}.screen.active{display:block}@keyframes enter{from{opacity:0;transform:translateY(8px)}}.hero{min-height:430px;background:var(--sky);border-radius:32px;overflow:hidden;padding:64px;display:grid;grid-template-columns:1.05fr .95fr;position:relative;box-shadow:var(--shadow)}.hero:before{content:"";position:absolute;width:180px;height:180px;border:1px solid rgba(23,51,77,.12);border-radius:50%;left:-80px;bottom:-90px}.eyebrow{font-weight:800;font-size:.72rem;letter-spacing:.16em;margin:0 0 12px;color:var(--blue)}h1,h2,h3,p{margin-top:0}.hero h1,.page-intro h1,.arcade-hero h1{font:800 clamp(2.8rem,6vw,5rem)/.94 'Fraunces';letter-spacing:-.045em;margin:0 0 22px}.hero h1 em{color:#fff;font-style:normal}.hero-copy{font-size:1.05rem;line-height:1.6;max-width:460px}.btn{border:0;border-radius:14px;padding:15px 22px;font:800 .95rem 'DM Sans';cursor:pointer;transition:.2s}.btn:hover{transform:translateY(-2px)}.btn.primary{background:var(--coral);color:#fff;box-shadow:0 8px 0 var(--coral-dark)}.btn.primary:active{transform:translateY(5px);box-shadow:0 3px 0 var(--coral-dark)}.btn.secondary{background:#fff;color:var(--ink);border:2px solid var(--line)}.hero-art{position:relative;min-height:280px}.sun{position:absolute;width:230px;height:230px;border-radius:50%;background:var(--yellow);right:8%;top:10%}.stamp{position:absolute;right:5%;top:2%;border:2px solid var(--coral);color:var(--coral);padding:12px;border-radius:50%;font-weight:800;transform:rotate(12deg);text-align:center}.speech{position:absolute;background:#fff;padding:14px 20px;border-radius:20px;font-weight:800;box-shadow:var(--shadow)}.speech:after{content:"";position:absolute;bottom:-8px;left:22px;border:10px solid transparent;border-top-color:#fff;border-left:0}.speech.one{left:8%;top:20%;transform:rotate(-5deg)}.speech.two{right:3%;bottom:10%;transform:rotate(5deg)}.route{position:absolute;left:18%;top:54%;width:60%;height:35%;border-top:3px dashed rgba(23,51,77,.4);border-radius:50%;transform:rotate(18deg)}.plane{position:absolute;font-size:2.8rem;left:45%;bottom:14%;transform:rotate(-22deg);color:var(--ink)}.section-heading{display:flex;justify-content:space-between;align-items:end;margin:62px 4px 22px}.section-heading h2{font:800 2.2rem 'Fraunces';margin:0}.section-heading>span{color:var(--muted);font-size:.9rem}.lesson-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.lesson-card{position:relative;text-align:left;background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;min-height:190px;cursor:pointer;transition:.25s;overflow:hidden;color:var(--ink);font-family:inherit}.lesson-card:hover:not(.locked){transform:translateY(-5px);box-shadow:var(--shadow)}.lesson-card .num{font:800 3.5rem 'Fraunces';opacity:.12;position:absolute;right:18px;top:8px}.lesson-card .topic-icon{font-size:2rem;display:block;margin-bottom:20px}.lesson-card h3{font:800 1.15rem 'Fraunces';margin-bottom:7px}.lesson-card p{color:var(--muted);font-size:.82rem;line-height:1.4}.lesson-card .status{font-size:.72rem;font-weight:800;color:var(--blue)}.lesson-card.locked{background:#f1f0eb;color:#89939a;cursor:pointer}.lesson-card.locked .status{color:#a16f00}.lesson-card:nth-child(2n){border-top:5px solid var(--yellow)}.lesson-card:nth-child(3n){border-top:5px solid var(--mint)}.lesson-card:nth-child(3n+1){border-top:5px solid var(--coral)}.home-panels{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:32px}.feature-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;border:0;border-radius:24px;padding:25px;text-align:left;color:#fff;cursor:pointer;font-family:inherit}.feature-card.box-card{background:var(--blue)}.feature-card.arcade-card{background:var(--ink)}.feature-icon{font-size:2rem;width:58px;height:58px;border-radius:16px;background:rgba(255,255,255,.14);display:grid;place-items:center}.feature-card small,.feature-card strong,.feature-card em{display:block}.feature-card small{font-size:.65rem;letter-spacing:.13em;font-weight:800;opacity:.65}.feature-card strong{font:800 1.35rem 'Fraunces';margin:3px 0}.feature-card em{font-style:normal;font-size:.78rem;opacity:.7}.back{border:0;background:none;padding:0;color:var(--muted);font:700 .9rem 'DM Sans';cursor:pointer;margin-bottom:28px}.page-intro{max-width:720px;margin-bottom:40px}.page-intro h1,.arcade-hero h1{font-size:3.5rem}.page-intro>p:last-child,.arcade-hero>p{color:var(--muted);line-height:1.6}.lesson-detail-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:30px;border-bottom:1px solid var(--line);padding-bottom:30px}.lesson-detail-head h1{font:800 3.2rem 'Fraunces';margin-bottom:10px}.lesson-detail-head p{color:var(--muted)}.mode-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:34px 0}.mode-btn{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;text-align:left;cursor:pointer;color:var(--ink);font-family:inherit}.mode-btn:hover{border-color:var(--blue)}.mode-btn span{font-size:1.5rem}.mode-btn strong,.mode-btn small{display:block}.mode-btn strong{margin:12px 0 5px}.mode-btn small{color:var(--muted)}.vocab-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}.vocab-row{display:flex;justify-content:space-between;background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 16px;font-size:.88rem}.vocab-row b{color:var(--blue)}.learn-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px}.learn-head .back{margin:0}.progress{height:9px;background:#e3e8e8;border-radius:9px;overflow:hidden}.progress i{display:block;height:100%;background:var(--coral);width:0;transition:.35s}.quiz-wrap{max-width:680px;margin:55px auto}.word-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:28px;padding:58px 34px;text-align:center;box-shadow:var(--shadow);min-height:260px;display:flex;flex-direction:column;justify-content:center;transition:.3s}.word-card.correct{border-color:var(--mint);box-shadow:0 0 0 5px rgba(118,213,174,.2)}.word-card.wrong{border-color:var(--coral);box-shadow:0 0 0 5px rgba(255,107,74,.15)}.word-card>span{font-size:.7rem;letter-spacing:.15em;color:var(--muted);font-weight:800}.word-card h2{font:800 clamp(2.6rem,7vw,4.8rem) 'Fraunces';margin:10px}.sound-btn{position:absolute;right:18px;top:18px;border:1px solid var(--line);background:var(--cream);border-radius:50%;width:42px;height:42px;cursor:pointer}.answer-reveal{font-weight:700;color:var(--coral);min-height:22px}.mc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}.answer-btn,.type-submit{border:2px solid var(--line);background:#fff;border-radius:15px;padding:16px;font:700 1rem 'DM Sans';color:var(--ink);cursor:pointer}.answer-btn:hover{border-color:var(--blue);background:#f2f7ff}.answer-btn.correct{background:#dff8ed;border-color:var(--mint)}.answer-btn.wrong{background:#fff0ec;border-color:var(--coral)}.type-wrap{display:flex;gap:10px;margin-top:20px}.type-wrap input{flex:1;border:2px solid var(--line);border-radius:15px;padding:16px;font:600 1rem 'DM Sans';outline:none}.type-wrap input:focus{border-color:var(--blue)}.type-submit{background:var(--blue);color:#fff;border-color:var(--blue)}.feedback{text-align:center;min-height:30px;margin-top:16px;font-weight:800}.leitner{display:grid;grid-template-columns:repeat(5,1fr);gap:13px;margin:25px 0 34px}.box{background:#fff;border:1px solid var(--line);border-top:6px solid var(--color);border-radius:18px;padding:20px 14px;text-align:center}.box b{font:800 2.2rem 'Fraunces';display:block}.box span{font-size:.7rem;color:var(--muted)}.arcade-hero{background:var(--ink);color:#fff;border-radius:30px;padding:50px;position:relative;overflow:hidden}.arcade-hero:after{content:"PLAY";position:absolute;font:800 10rem 'Fraunces';right:-20px;bottom:-60px;color:rgba(255,255,255,.04)}.arcade-hero .eyebrow{color:var(--yellow)}.arcade-hero>p{color:#b9c6cf}.wallet{display:inline-block}.game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}.game-card{border:0;border-radius:22px;padding:28px;text-align:left;color:var(--ink);cursor:pointer;min-height:210px;font-family:inherit;position:relative;overflow:hidden}.game-card:nth-child(1){background:var(--yellow)}.game-card:nth-child(2){background:var(--mint)}.game-card:nth-child(3){background:var(--sky)}.game-card .game-icon{font-size:2.5rem}.game-card h3{font:800 1.5rem 'Fraunces';margin:20px 0 6px}.game-card p{font-size:.8rem}.game-card b{font-size:.72rem}.game-stage{max-width:760px;margin:45px auto;background:#fff;border-radius:28px;min-height:460px;padding:35px;box-shadow:var(--shadow);text-align:center}.timer{font:800 2rem 'Fraunces';color:var(--coral)}.scramble{font:800 3rem 'Fraunces';letter-spacing:.15em;margin:60px 0 25px}.bottom-nav{display:none}.modal-backdrop{display:none;position:fixed;inset:0;background:rgba(18,42,61,.55);z-index:30;place-items:center;padding:20px;backdrop-filter:blur(5px)}.modal-backdrop.open{display:grid}.modal-card{background:#fff;border-radius:24px;padding:34px;max-width:440px;width:100%;text-align:center;box-shadow:var(--shadow)}.modal-card h2{font:800 2rem 'Fraunces'}.modal-card p{color:var(--muted);line-height:1.5}.modal-actions{display:flex;gap:10px;justify-content:center;margin-top:24px}.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,30px);opacity:0;background:var(--ink);color:#fff;padding:12px 20px;border-radius:99px;font-weight:700;z-index:50;transition:.3s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:780px){.topbar{height:64px;padding:0 16px}.stats span{padding:7px 9px}.stats span:nth-child(2){display:none}main{padding:22px 14px 100px}.hero{padding:38px 26px;grid-template-columns:1fr;min-height:570px}.hero-art{min-height:220px}.sun{width:170px;height:170px}.lesson-grid{grid-template-columns:1fr 1fr}.home-panels,.game-grid{grid-template-columns:1fr}.mode-grid{grid-template-columns:1fr 1fr}.vocab-list{grid-template-columns:1fr}.leitner{grid-template-columns:repeat(5,110px);overflow-x:auto;padding-bottom:10px}.lesson-detail-head{grid-template-columns:1fr}.mc-grid{grid-template-columns:1fr}.bottom-nav{display:flex;position:fixed;z-index:15;bottom:0;left:0;right:0;height:70px;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line);justify-content:space-around}.bottom-nav button{border:0;background:none;color:var(--muted);font:700 .68rem 'DM Sans';width:33%}.bottom-nav span{display:block;font-size:1.3rem;margin-bottom:2px}.bottom-nav button.active{color:var(--coral)}.page-intro h1,.arcade-hero h1{font-size:2.7rem}.arcade-hero{padding:32px 24px}.learn-head{gap:9px}.quiz-wrap{margin-top:32px}.word-card{padding:45px 20px}.type-wrap{flex-direction:column}}
@media(max-width:430px){.lesson-grid{grid-template-columns:1fr}.hero h1{font-size:3rem}.brand>span:last-child{display:none}.stats{gap:5px}}
.lesson-card{border-top:5px solid var(--lesson-color,var(--coral));min-height:210px}

/* Child-first usability pass: compact route, clear actions, playful feedback */
.hero{min-height:330px;padding:34px 52px;border-radius:28px}
.hero h1{font-size:clamp(2.8rem,5vw,4rem);margin-bottom:12px}
.hero-copy{font-size:.98rem;line-height:1.5}
.hero-tags{margin:-2px 0 14px}
.hero-start{min-width:210px;font-size:1rem}
.hero-art{min-height:250px}
.milo-tap{position:absolute;inset:0;border:0;background:transparent;padding:0;cursor:pointer;z-index:2;border-radius:24px}
.milo-tap:focus-visible{outline:4px solid #fff;outline-offset:-5px}
.milo-tap.hello .hero-milo{animation:miloHello .55s ease}
@keyframes miloHello{35%{transform:translateY(-18px) rotate(-5deg) scale(1.05)}70%{transform:translateY(-5px) rotate(5deg)}}

.quick-start{margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:15px 16px 15px 18px;display:flex;align-items:center;justify-content:space-between;gap:20px;box-shadow:0 9px 26px rgba(28,61,86,.08)}
.quick-copy{display:flex;align-items:center;gap:13px;min-width:0}
.quick-pin{width:46px;height:46px;display:grid;place-items:center;background:#eaf8fb;border-radius:14px;font-size:1.3rem;flex:0 0 auto}
.quick-copy span:last-child{display:block;min-width:0}
.quick-copy small,.quick-copy strong,.quick-copy em{display:block}
.quick-copy small{font-size:.6rem;letter-spacing:.13em;color:var(--blue);font-weight:800}
.quick-copy strong{font:800 1.02rem 'Fraunces';white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:2px 0}
.quick-copy em{font-style:normal;font-size:.7rem;color:var(--muted)}
.quick-modes{display:flex;gap:7px;flex:0 0 auto}
.quick-modes button{min-width:72px;min-height:58px;border:1px solid var(--line);background:var(--cream);border-radius:13px;color:var(--ink);font:800 .65rem 'DM Sans';cursor:pointer;padding:7px 8px;transition:.18s}
.quick-modes button span{display:block;font-size:1.18rem;margin-bottom:3px}
.quick-modes button:hover,.quick-modes button:focus-visible{background:#eef5ff;border-color:var(--blue);transform:translateY(-2px);outline:none}

.route-heading{margin:38px 4px 15px}
.lesson-grid{grid-template-columns:1fr 1fr;gap:10px}
.lesson-card{min-height:92px!important;border:1px solid var(--line)!important;border-left:5px solid var(--lesson-color,var(--coral))!important;border-radius:17px;padding:13px 14px;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:11px;overflow:hidden;background:#fff;text-align:left;position:relative;color:var(--ink);font-family:inherit;cursor:pointer;transition:transform .18s,box-shadow .18s,border-color .18s}
.lesson-card:hover{transform:translateY(-2px);box-shadow:0 9px 22px rgba(28,61,86,.1)}
.lesson-card.current{background:linear-gradient(100deg,#fff 45%,color-mix(in srgb,var(--lesson-color) 13%,white));box-shadow:0 8px 22px rgba(28,61,86,.09)}
.lesson-card.current:after{content:'AKTUELL';position:absolute;right:10px;top:5px;font-size:.48rem;letter-spacing:.08em;font-weight:900;color:var(--blue)}
.lesson-card.next-stop{background:#fff9df;border-color:#eed06d!important;border-left-color:#e3aa1d!important}
.lesson-card.locked:not(.next-stop){background:#f3f4f1;color:#8a969e;border-left-color:#cbd2d5!important;opacity:.72}
.lesson-node{width:46px;height:46px;display:grid;place-items:center;background:color-mix(in srgb,var(--lesson-color) 18%,white);border-radius:14px;font-size:1.35rem}
.locked .lesson-node{background:#e4e7e6;font-size:1rem}
.next-stop .lesson-node{background:#ffefae}
.lesson-copy,.lesson-action{display:block;min-width:0}
.lesson-copy small,.lesson-copy strong,.lesson-copy em,.lesson-action small,.lesson-action b{display:block}
.lesson-copy small{font-size:.52rem;letter-spacing:.12em;color:var(--muted);font-weight:900}
.lesson-copy strong{font:800 .92rem/1.12 'Fraunces';margin:3px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lesson-copy em{font-style:normal;font-size:.66rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lesson-action{text-align:right;min-width:78px;padding-top:8px}
.lesson-action b{font-size:.73rem;color:var(--blue)}
.lesson-action small{font-size:.47rem;letter-spacing:.07em;color:var(--muted);font-weight:900;margin-top:3px}
.next-stop .lesson-action b{color:#9a6900}
.lesson-progress{position:absolute;left:73px;right:14px;bottom:7px;height:4px;border-radius:4px;background:#e7edef;overflow:hidden}
.lesson-progress span{display:block;height:100%;border-radius:4px;background:var(--lesson-color,var(--mint))}
.lesson-toggle{display:block;margin:14px auto 0;border:1px solid var(--line);background:#fff;color:var(--blue);border-radius:99px;padding:10px 17px;font:800 .72rem 'DM Sans';cursor:pointer}
.lesson-toggle:hover{border-color:var(--blue);background:#eef5ff}
.lesson-toggle[hidden]{display:none}
.home-panels{margin-top:24px}

.vocab-drawer{margin-top:28px;border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden}
.vocab-drawer summary{list-style:none;cursor:pointer;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.vocab-drawer summary::-webkit-details-marker{display:none}
.vocab-drawer summary span small,.vocab-drawer summary span strong{display:block}
.vocab-drawer summary span small{font-size:.58rem;letter-spacing:.13em;color:var(--blue);font-weight:900;margin-bottom:3px}
.vocab-drawer summary span strong{font:800 1.05rem 'Fraunces'}
.vocab-drawer summary>b{font-size:.65rem;color:var(--blue);background:#eef5ff;padding:8px 11px;border-radius:99px}
.vocab-drawer[open] summary{border-bottom:1px solid var(--line)}
.vocab-drawer .vocab-list{padding:14px}
.milo-coach.cheer img{animation:coachCheer .65s ease}
.milo-coach.oops img{animation:coachOops .55s ease}
.coin-pop{animation:coinPop .55s ease}
@keyframes coachCheer{40%{transform:translateY(-12px) rotate(6deg) scale(1.08)}}
@keyframes coachOops{30%{transform:rotate(-7deg)}65%{transform:rotate(7deg)}}
@keyframes coinPop{45%{transform:scale(1.22);background:#fff0a6}}

@media(max-width:850px){
  .lesson-grid{grid-template-columns:1fr}
  .quick-start{align-items:stretch;flex-direction:column;gap:12px}
  .quick-modes{display:grid;grid-template-columns:repeat(4,1fr)}
  .quick-modes button{min-width:0}
}
@media(max-width:780px){
  .hero{min-height:505px;padding:34px 27px}
  .hero-art{min-height:190px}
  .route-heading{margin-top:32px}
  .section-heading h2{font-size:1.8rem}
  .lesson-card{min-height:88px!important}
}
@media(max-width:430px){
  .hero{min-height:500px;padding:30px 22px}
  .hero h1{font-size:2.75rem}
  .hero-copy{font-size:.88rem}
  .quick-start{padding:14px}
  .quick-pin{width:40px;height:40px}
  .quick-modes{grid-template-columns:1fr 1fr}
  .quick-modes button{min-height:52px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:.69rem}
  .quick-modes button span{display:inline;margin:0}
  .section-heading>span{font-size:.72rem}
  .lesson-card{grid-template-columns:44px minmax(0,1fr) 68px;gap:9px;padding:11px 12px}
  .lesson-node{width:42px;height:42px}
  .lesson-copy strong{font-size:.84rem}
  .lesson-action{min-width:66px}
  .lesson-progress{left:66px;right:12px}
  .vocab-drawer summary{padding:15px}
}

body,button,input{font-family:"Avenir Next","Trebuchet MS",Arial,sans-serif}
.hero h1,.page-intro h1,.arcade-hero h1,.section-heading h2,.lesson-copy strong,.lesson-detail-head h1,.mode-btn strong,.vocab-drawer summary span strong,.word-card h2,.box b,.game-card h3,.modal-card h2,.quick-copy strong{font-family:Georgia,"Times New Roman",serif}

.quick-modes.two-actions{gap:10px}
.quick-modes.two-actions button{min-width:190px;min-height:66px;display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:9px;align-items:center;text-align:left;padding:10px 13px}
.quick-modes.two-actions button>span{grid-row:1/3;display:grid;width:34px;height:34px;place-items:center;border-radius:10px;margin:0;background:rgba(255,255,255,.55);font-size:1.05rem}
.quick-modes.two-actions strong,.quick-modes.two-actions small{display:block}
.quick-modes.two-actions strong{font-size:.76rem;line-height:1.1}
.quick-modes.two-actions small{font-size:.56rem;color:var(--muted);font-weight:700;margin-top:2px}
.quick-modes.two-actions .quick-primary{background:#fff0eb;border-color:#ffb29f;color:#b43d24}
.quick-modes.two-actions .quick-due{background:#eaf9f3;border-color:#9adfc5;color:#19795a}
.parent-lock{display:block;text-align:left;margin:18px 0 4px}
.parent-lock span{display:block;font-size:.68rem;font-weight:900;color:var(--ink);margin:0 0 6px 4px}
.parent-lock input{width:100%;border:2px solid var(--line);border-radius:13px;padding:13px 14px;font-size:1rem;outline:none}
.parent-lock input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(39,103,216,.1)}
@media(max-width:850px){.quick-modes.two-actions{grid-template-columns:1fr 1fr}.quick-modes.two-actions button{min-width:0}}
@media(max-width:430px){.quick-modes.two-actions button{display:grid;min-height:66px;padding:9px}.quick-modes.two-actions button>span{display:grid;margin:0}.quick-modes.two-actions strong{font-size:.7rem}.quick-modes.two-actions small{font-size:.52rem}}

/* Milo polish: softer typography, bear logo, friendlier answer cards */
:root{--font-body:"Avenir Next Rounded","Avenir Next","Trebuchet MS",Verdana,sans-serif;--font-display:"Avenir Next Rounded","Cooper Black","Avenir Next","Trebuchet MS",Verdana,sans-serif}
body,button,input{font-family:var(--font-body)}
.brand{font:900 1.15rem/1 var(--font-display);letter-spacing:.01em;text-transform:none}
.brand-mark{width:42px;height:42px;border-radius:16px;background:#fff2d8;border:2px solid #ffd45c;overflow:hidden;box-shadow:0 5px 0 rgba(172,118,0,.16)}
.brand-mark img{width:46px;height:46px;object-fit:cover;object-position:center 40%;transform:translateY(3px) scale(1.1)}
.hero h1,.page-intro h1,.arcade-hero h1,.section-heading h2,.lesson-copy strong,.lesson-detail-head h1,.mode-btn strong,.vocab-drawer summary span strong,.word-card h2,.box b,.game-card h3,.modal-card h2,.quick-copy strong{font-family:var(--font-display);letter-spacing:-.025em}
.eyebrow,.btn,.quick-modes button,.lesson-toggle,.answer-btn,.type-submit,.back,.stats span,.wallet{font-family:var(--font-body)}
.answer-btn{display:flex;align-items:center;justify-content:center;text-align:center;min-height:64px}
.answer-btn.has-emoji{justify-content:center;gap:11px;text-align:center;line-height:1.25}
.answer-emoji{display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;border-radius:11px;background:#fff7dc;font-size:1.28rem;box-shadow:inset 0 0 0 1px rgba(23,51,77,.06)}

/* Gamification layer */
.reward-dashboard{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:16px 0 28px}
.reward-card{border:1px solid var(--line);background:#fff;border-radius:18px;padding:13px 14px;display:flex;align-items:center;gap:12px;text-align:left;color:var(--ink);cursor:pointer;box-shadow:0 8px 22px rgba(28,61,86,.07);transition:.18s;font-family:var(--font-body)}
.reward-card:hover{transform:translateY(-2px);border-color:var(--blue)}
.reward-card small,.reward-card strong,.reward-card em{display:block}
.reward-card small{font-size:.55rem;letter-spacing:.12em;color:var(--blue);font-weight:900}
.reward-card strong{font-size:.92rem;margin:2px 0}
.reward-card em{font-size:.66rem;color:var(--muted);font-style:normal;line-height:1.25}
.reward-icon{width:44px;height:44px;border-radius:14px;background:#f0f8ff;display:grid;place-items:center;font-size:1.45rem;flex:0 0 auto;overflow:hidden}
.sticker-mini img{width:52px;height:56px;object-fit:contain;transform:translateY(7px)}
.reward-scene{width:52px;height:52px;border-radius:15px;background:#fff2d8;position:relative;overflow:hidden;flex:0 0 auto;border:1px solid #ffd45c}
.reward-scene img{position:absolute;width:58px;right:-8px;bottom:-11px}
.reward-scene b{position:absolute;right:4px;top:3px;color:#c2333b}
.passport-card{background:linear-gradient(120deg,#fff 55%,#eef6ff)}
.sticker-card .reward-icon{background:#fff5d7}.look-card .reward-icon{background:#f1fff8}.streak-card .reward-icon{background:#fff0d8}.wobble-card .reward-icon{background:#fff0ec}
.lesson-actions{display:flex;flex-direction:column;gap:9px;min-width:230px}
.boss-action{display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center}
.boss-action small{display:block;font-size:.6rem;font-weight:800;opacity:.72}
.boss-action:disabled{opacity:.55;cursor:not-allowed;transform:none}
.combo-pop{position:absolute;left:50%;top:-8px;transform:translate(-50%,-12px) scale(.92);opacity:0;pointer-events:none;background:#17334d;color:#fff;border:2px solid #ffd45c;border-radius:18px;padding:10px 16px;display:flex;align-items:center;gap:10px;box-shadow:0 12px 28px rgba(23,51,77,.18);transition:.25s;z-index:7}
.combo-pop.show{opacity:1;transform:translate(-50%,-24px) scale(1)}
.combo-pop b{font-size:1.45rem;color:#ffd45c}.combo-pop span{font-weight:900}
.reward-pop{position:fixed;right:18px;top:86px;z-index:60;display:flex;align-items:center;gap:12px;background:#fff;border:2px solid #ffd45c;border-radius:18px;padding:12px 15px;box-shadow:var(--shadow);transform:translateX(25px) scale(.96);opacity:0;transition:.28s;max-width:min(340px,calc(100vw - 28px))}
.reward-pop.show{transform:translateX(0) scale(1);opacity:1}
.reward-pop>b{width:42px;height:42px;border-radius:13px;background:#fff5d7;display:grid;place-items:center;font-size:1.45rem;flex:0 0 auto;overflow:hidden;position:relative}
.reward-pop>b img{width:48px;height:52px;object-fit:contain;transform:translateY(9px)}
.pop-art:after{content:'';position:absolute;right:3px;top:4px;width:16px;height:16px;border-radius:6px;background:#ffd45c;border:1px solid rgba(23,51,77,.12)}
.pop-art.look-traveller:after{background:#2767d8;border-radius:7px 7px 3px 3px;box-shadow:0 7px 0 -3px #ffd45c;border-color:#17334d}
.pop-art.look-football:after,.pop-art.sticker-football:after{background:repeating-linear-gradient(90deg,#fff 0 4px,#c43136 4px 8px)}
.pop-art.look-detective:after{background:#17334d;border-radius:2px;box-shadow:0 8px 0 -4px #17334d}
.pop-art.look-royal:after,.pop-art.sticker-crown:after{clip-path:polygon(0 100%,0 35%,25% 70%,50% 0,75% 70%,100% 35%,100% 100%);background:#ffd45c}
.pop-art.look-rainy:after,.pop-art.sticker-rain:after{background:#80d8ee;border-radius:16px 16px 4px 4px}
.reward-pop strong,.reward-pop em{display:block}.reward-pop strong{font-size:.86rem}.reward-pop em{font-style:normal;color:var(--muted);font-size:.72rem}
.passport-scene,.treasure-scene,.sticker-hero{height:118px;position:relative;display:grid;place-items:center;margin:-8px 0 2px}
.passport-scene img,.treasure-scene img,.sticker-hero img{height:130px;object-fit:contain;filter:drop-shadow(0 10px 10px rgba(23,51,77,.12))}
.passport-scene span,.treasure-scene span{position:absolute;right:30%;bottom:8px;width:54px;height:54px;display:grid;place-items:center;background:#fff;border:2px solid #ffd45c;border-radius:17px;font-size:1.8rem;box-shadow:0 8px 18px rgba(23,51,77,.12)}
.sticker-hero span{position:absolute;right:29%;bottom:12px;width:58px;height:42px;border-radius:14px;background:linear-gradient(145deg,#fff,#fff7df);border:2px solid #ffd45c;box-shadow:0 8px 18px rgba(23,51,77,.12)}
.sticker-hero span:before,.sticker-hero span:after{content:'';position:absolute;border-radius:50%;background:#ff6b4a}.sticker-hero span:before{width:10px;height:10px;left:12px;top:10px}.sticker-hero span:after{width:18px;height:18px;right:10px;bottom:8px;background:#80d8ee}
.passport-grid,.sticker-grid,.look-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0;max-height:310px;overflow:auto;padding-right:2px}
.passport-stamp,.sticker-slot,.look-slot,.wobbly-row{border:1px solid var(--line);background:#fffaf0;border-radius:13px;padding:10px;display:grid;gap:2px;text-align:left}
.passport-stamp{grid-template-columns:28px 1fr;align-items:center}
.passport-stamp span{grid-row:1/3;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#eef1f2;color:#9ba6ad;font-weight:900}
.passport-stamp.collected{background:#fff8df;border-color:#ffd45c}.passport-stamp.collected span{background:#17334d;color:#ffd45c}
.passport-stamp b,.sticker-slot strong,.look-slot strong{font-size:.78rem}.passport-stamp em,.sticker-slot em,.look-slot em,.wobbly-row em{font-size:.64rem;font-style:normal;color:var(--muted)}
.sticker-slot{appearance:none;border:0;place-items:center;text-align:center;position:relative;min-height:152px;background:#f4f5f2;color:#8c979e;overflow:hidden;font-family:var(--font-body);cursor:default}
.sticker-slot.owned{background:linear-gradient(145deg,#fff,#fffaf0);border:1px solid #ffd45c;color:var(--ink);cursor:pointer;box-shadow:0 8px 18px rgba(28,61,86,.08)}
.sticker-slot.owned:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(28,61,86,.13)}
.sticker-slot.owned:before{content:'';position:absolute;left:10px;top:8px;width:42px;height:13px;background:rgba(255,212,92,.62);border-radius:4px;transform:rotate(-9deg)}
.sticker-slot.owned em{position:absolute;right:8px;top:8px;background:#17334d;color:#fff;border-radius:99px;padding:3px 7px;font-weight:900}
.sticker-slot small{font-size:.55rem;color:var(--blue);font-weight:900;letter-spacing:.04em}
.sticker-art{--red:#c43136;--navy:#17334d;--gold:#ffd45c;--sky:#80d8ee;--cream:#fff7df;width:88px;height:88px;border-radius:26px;background:linear-gradient(150deg,#fff7df,#eaf8fb);border:5px solid #fff;box-shadow:0 8px 16px rgba(23,51,77,.14),inset 0 0 0 1px rgba(23,51,77,.08);display:block;position:relative;overflow:hidden;transform:rotate(-2deg)}
.sticker-art.big{width:220px;height:220px;border-radius:54px;border-width:10px;box-shadow:0 20px 50px rgba(23,51,77,.18),inset 0 0 0 2px rgba(23,51,77,.08);margin:auto}
.sticker-cut{position:absolute;inset:7px;border:2px dashed rgba(23,51,77,.1);border-radius:21px}.sticker-art.big .sticker-cut{inset:17px;border-radius:42px}
.sticker-shine{position:absolute;width:64%;height:34%;left:-18%;top:-4%;background:rgba(255,255,255,.42);border-radius:999px;transform:rotate(-22deg)}
.sticker-art i,.sticker-art b{position:absolute;inset:0;pointer-events:none}.sticker-art b{display:block}
.sticker-art.empty{background:repeating-linear-gradient(-35deg,#eef1f2 0 8px,#f8faf9 8px 16px);box-shadow:none;border-color:#fff;color:#a8b3ba}
.sticker-art.empty:after{content:'';position:absolute;left:50%;top:50%;width:28px;height:28px;border-radius:9px;border:2px dashed #a8b3ba;transform:translate(-50%,-50%) rotate(8deg)}
.sticker-preview{display:grid;place-items:center;margin:4px 0 12px}
.sticker-art-bus{background:linear-gradient(#b9eaff 0 48%,#d8eef6 48% 100%)}.sticker-art-bus:before{content:'';position:absolute;left:18%;right:14%;top:32%;height:34%;background:#c43136;border-radius:10px 10px 6px 6px;box-shadow:0 10px 0 #9b1f27}.sticker-art-bus:after{content:'';position:absolute;left:25%;right:22%;top:39%;height:13%;background:repeating-linear-gradient(90deg,#bdefff 0 18%,#fff 18% 22%);border-radius:3px}.sticker-art-bus i:before,.sticker-art-bus i:after{content:'';position:absolute;bottom:24%;width:13%;aspect-ratio:1;border-radius:50%;background:#17334d}.sticker-art-bus i:before{left:27%}.sticker-art-bus i:after{right:25%}
.sticker-art-football{background:radial-gradient(circle at 50% 50%,#f9fff9 0 38%,#76d5ae 39%)}.sticker-art-football:before{content:'';position:absolute;inset:24%;border-radius:50%;background:radial-gradient(circle at 50% 50%,#17334d 0 12%,transparent 13%),conic-gradient(#fff 0 15%,#17334d 15% 28%,#fff 28% 45%,#17334d 45% 58%,#fff 58% 75%,#17334d 75% 88%,#fff 88%);border:3px solid #17334d}.sticker-art-football:after{content:'';position:absolute;left:15%;right:15%;bottom:16%;height:4px;background:rgba(23,51,77,.18);border-radius:99px}
.sticker-art-tea{background:linear-gradient(#fff2d8 0 60%,#d7edf5 60%)}.sticker-art-tea:before{content:'';position:absolute;left:27%;top:38%;width:38%;height:27%;background:#fff;border:4px solid #17334d;border-radius:0 0 18px 18px}.sticker-art-tea:after{content:'';position:absolute;right:21%;top:43%;width:17%;height:17%;border:4px solid #17334d;border-left:0;border-radius:0 15px 15px 0}.sticker-art-tea i:before,.sticker-art-tea i:after{content:'';position:absolute;top:20%;width:4px;height:18%;background:#80d8ee;border-radius:99px}.sticker-art-tea i:before{left:41%}.sticker-art-tea i:after{left:52%}
.sticker-art-crown{background:linear-gradient(#17334d 0 42%,#fff7df 42%)}.sticker-art-crown:before{content:'';position:absolute;left:22%;right:22%;top:29%;height:31%;background:#ffd45c;clip-path:polygon(0 100%,0 35%,24% 70%,50% 0,76% 70%,100% 35%,100% 100%)}.sticker-art-crown:after{content:'';position:absolute;left:35%;right:35%;top:52%;height:8%;background:#c49a1b;border-radius:99px}
.sticker-art-castle{background:linear-gradient(#bdefff 0 52%,#dff8ed 52%)}.sticker-art-castle:before{content:'';position:absolute;left:20%;right:20%;bottom:24%;height:38%;background:#b8c5cc;clip-path:polygon(0 100%,0 30%,13% 30%,13% 10%,27% 10%,27% 30%,42% 30%,42% 0,58% 0,58% 30%,73% 30%,73% 10%,87% 10%,87% 30%,100% 30%,100% 100%)}.sticker-art-castle:after{content:'';position:absolute;left:45%;bottom:24%;width:10%;height:21%;background:#17334d;border-radius:99px 99px 0 0}
.sticker-art-rat,.sticker-art-dog{background:linear-gradient(#fff0ec 0 55%,#fff7df 55%)}.sticker-art-rat:before{content:'';position:absolute;left:31%;top:35%;width:33%;height:25%;border-radius:50%;background:#8d5a37}.sticker-art-rat:after{content:'';position:absolute;left:57%;top:39%;width:17%;height:16%;border-radius:50%;background:#b9794a;box-shadow:-23px -10px 0 -5px #b9794a,4px -8px 0 -5px #b9794a}.sticker-art-rat i:after{content:'';position:absolute;left:22%;top:46%;width:22%;height:4px;border-top:3px solid #b9794a;border-radius:50%;transform:rotate(-15deg)}
.sticker-art-dog:before{content:'';position:absolute;left:30%;top:31%;width:39%;height:35%;border-radius:45% 45% 50% 50%;background:#b9794a}.sticker-art-dog:after{content:'';position:absolute;left:25%;top:26%;width:16%;height:30%;border-radius:50%;background:#8d5a37;box-shadow:36px 0 0 #8d5a37}.sticker-art-dog i:after{content:'';position:absolute;left:46%;top:49%;width:8%;height:7%;border-radius:50%;background:#17334d}
.sticker-art-flag{background:#17334d}.sticker-art-flag:before{content:'';position:absolute;inset:22%;background:linear-gradient(90deg,transparent 0 42%,#fff 42% 58%,transparent 58%),linear-gradient(transparent 0 42%,#fff 42% 58%,transparent 58%),linear-gradient(90deg,transparent 0 46%,#c43136 46% 54%,transparent 54%),linear-gradient(transparent 0 46%,#c43136 46% 54%,transparent 54%),#17334d;border-radius:8px;box-shadow:0 0 0 4px #fff}
.sticker-art-phone{background:linear-gradient(#d9f3fb 0 56%,#fff7df 56%)}.sticker-art-phone:before{content:'';position:absolute;left:37%;top:25%;width:27%;height:51%;background:#c43136;border-radius:12px 12px 4px 4px;box-shadow:inset 0 15px 0 rgba(255,255,255,.72)}.sticker-art-phone:after{content:'';position:absolute;left:43%;top:55%;width:15%;height:17%;background:#7a1c22;border-radius:3px}
.sticker-art-map{background:#fff7df}.sticker-art-map:before{content:'';position:absolute;left:20%;right:18%;top:31%;height:38%;background:linear-gradient(90deg,#fff7df 0 33%,#f8e7a9 33% 66%,#fff7df 66%);border:4px solid #17334d;border-radius:8px;transform:rotate(-6deg)}.sticker-art-map:after{content:'';position:absolute;left:49%;top:38%;width:13%;height:13%;border-radius:50% 50% 50% 0;background:#ff6b4a;transform:rotate(-45deg)}
.sticker-art-rain{background:linear-gradient(#eaf8fb 0 67%,#fff 67%)}.sticker-art-rain:before{content:'';position:absolute;left:22%;right:22%;top:28%;height:29%;background:#80d8ee;border-radius:40px 40px 7px 7px}.sticker-art-rain:after{content:'';position:absolute;left:49%;top:54%;width:5%;height:27%;background:#17334d;border-radius:99px}.sticker-art-rain i:after{content:'';position:absolute;left:38%;top:72%;width:16%;height:12%;border:4px solid #17334d;border-top:0;border-left:0;border-radius:0 0 16px 0}
.sticker-art-ticket{background:linear-gradient(#fff8df,#eaf8fb)}.sticker-art-ticket:before{content:'';position:absolute;left:18%;right:18%;top:36%;height:30%;background:#ffd45c;border:4px solid #17334d;border-radius:10px;transform:rotate(-6deg)}.sticker-art-ticket:after{content:'';position:absolute;left:47%;top:38%;height:27%;border-left:3px dashed #17334d;transform:rotate(-6deg)}
.sticker-art-star{background:radial-gradient(circle,#fff7df 0 45%,#2767d8 46%)}.sticker-art-star:before{content:'';position:absolute;left:26%;top:22%;width:49%;height:49%;background:#ffd45c;clip-path:polygon(50% 0,62% 35%,100% 35%,69% 56%,82% 96%,50% 72%,18% 96%,31% 56%,0 35%,38% 35%);filter:drop-shadow(0 4px 0 rgba(23,51,77,.18))}
.sticker-art-book{background:linear-gradient(#fff7df 0 57%,#dff8ed 57%)}.sticker-art-book:before{content:'';position:absolute;left:33%;top:25%;width:34%;height:49%;background:#2767d8;border-radius:5px;box-shadow:inset 9px 0 0 rgba(255,255,255,.25),5px 5px 0 rgba(23,51,77,.18)}.sticker-art-book:after{content:'ABC';position:absolute;left:39%;top:38%;color:#fff;font-size:.7rem;font-weight:900}
.sticker-art-river{background:linear-gradient(#bdefff 0 48%,#80d8ee 48%)}.sticker-art-river:before{content:'';position:absolute;left:23%;top:42%;width:46%;height:18%;background:#fff7df;border:4px solid #17334d;border-top:0;border-radius:0 0 20px 20px}.sticker-art-river:after{content:'';position:absolute;left:45%;top:21%;width:0;height:0;border-left:18px solid #fff;border-top:18px solid transparent;border-bottom:18px solid transparent;filter:drop-shadow(0 0 0 #17334d)}
.sticker-art-medal{background:linear-gradient(#fff0ec 0 55%,#fff7df 55%)}.sticker-art-medal:before{content:'';position:absolute;left:33%;top:21%;width:34%;height:30%;background:linear-gradient(90deg,#2767d8 0 45%,#c43136 45% 55%,#2767d8 55%);clip-path:polygon(0 0,100% 0,75% 100%,50% 75%,25% 100%)}.sticker-art-medal:after{content:'';position:absolute;left:35%;top:48%;width:30%;aspect-ratio:1;border-radius:50%;background:#ffd45c;border:4px solid #c49a1b}
.look-slot{appearance:none;border:1px solid var(--line);cursor:pointer;font-family:var(--font-body);background:#fff;text-align:center;place-items:center;min-height:154px}
.look-slot.owned:hover{border-color:var(--blue);background:#f2f7ff}.look-slot.active{border-color:#ffd45c;background:#fff8df;box-shadow:inset 0 0 0 2px #ffd45c}.look-slot.locked{opacity:.58;cursor:not-allowed}.look-slot.locked .look-preview{filter:grayscale(.8)}
.look-hero{height:138px;display:grid;place-items:center;margin:-8px 0 4px}
.look-preview{width:86px;height:92px;border-radius:26px;background:linear-gradient(150deg,#fff7df,#eaf8fb);border:3px solid #fff;box-shadow:0 10px 18px rgba(23,51,77,.13),inset 0 0 0 1px rgba(23,51,77,.07);display:grid;place-items:end center;position:relative;overflow:hidden}
.look-preview:before{content:'';position:absolute;left:-18%;top:-11%;width:68%;height:34%;border-radius:999px;background:rgba(255,255,255,.42);transform:rotate(-22deg);z-index:1}
.look-preview img{height:96px;object-fit:contain;filter:drop-shadow(0 6px 5px rgba(23,51,77,.13));transform:translateY(16px);position:relative;z-index:2}
.look-preview.tiny{width:44px;height:44px;border-radius:14px;box-shadow:none;border:0;background:#fff2d8}.look-preview.tiny img{height:54px;transform:translateY(12px)}.look-hero .look-preview{width:118px;height:124px;border-radius:32px}.look-hero .look-preview img{height:134px;transform:translateY(22px)}
.wobbly-list{display:grid;gap:8px;margin:18px 0;max-height:320px;overflow:auto}
.wobbly-row{grid-template-columns:1fr 1fr auto;align-items:center;background:#fff}.wobbly-row b{color:var(--blue)}.wobbly-row span{font-size:.82rem}.wobbly-row em{background:#fff0ec;color:#b43d24;border-radius:99px;padding:4px 7px;font-weight:900}
.streak-meter{height:12px;background:#edf1f2;border-radius:99px;overflow:hidden;margin:18px 0}
.streak-meter span{display:block;height:100%;background:linear-gradient(90deg,#ff6b4a,#ffd45c);border-radius:99px}
.reward-list{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:16px 0 6px}
.reward-list span{background:#f2f7ff;border:1px solid var(--line);border-radius:99px;padding:8px 11px;font-size:.78rem;font-weight:800;color:var(--ink)}
@media(max-width:850px){.reward-dashboard{grid-template-columns:1fr 1fr}.lesson-actions{min-width:0}.reward-pop{top:auto;right:14px;bottom:84px}}
@media(max-width:430px){.reward-dashboard{grid-template-columns:1fr}.passport-grid,.sticker-grid,.look-grid{grid-template-columns:1fr}.reward-card{padding:12px}}

/* Home entry cleanup: no hero overlays, clearer kid actions */
.hero{
  min-height:300px;
  padding:28px 42px;
  grid-template-columns:.9fr 1.1fr;
  align-items:center;
}
.hero>div:first-child{position:relative;z-index:3;max-width:430px}
.hero h1{
  font-size:clamp(2rem,3.6vw,3.1rem);
  line-height:1;
  margin-bottom:10px;
}
.hero-copy{max-width:380px;font-size:.95rem;line-height:1.45;margin-bottom:10px}
.hero-tags{margin:0;gap:7px}
.hero-tags span{padding:6px 9px;font-size:.62rem}
.hero-art{min-height:260px}
.sun{width:220px;height:220px;right:12%;top:15%;opacity:.95}
.stamp{
  right:4%;
  top:-4%;
  width:112px;
  height:112px;
  display:grid;
  place-items:center;
  padding:0;
  z-index:1;
  background:rgba(128,216,238,.15);
  border-width:3px;
  font-size:1.05rem;
  line-height:1.05;
  opacity:.9;
}
.hero-milo{
  right:2%;
  bottom:-20%;
  height:118%;
  z-index:2;
}
.milo-tap{z-index:2}
.milo-tap:before,.milo-tap:after{content:none!important}
.speech.one{
  left:4%;
  top:12%;
  z-index:4;
  padding:12px 16px;
}
.uk-route-card{
  left:2%;
  bottom:7%;
  z-index:4;
}
.route{left:8%;top:61%;width:42%;opacity:.45}

.quick-start{
  margin-top:16px;
  padding:16px;
  border-radius:26px;
  background:linear-gradient(135deg,#fff 0 58%,#f3fbff 58%);
  border:2px solid rgba(128,216,238,.45);
  box-shadow:0 14px 34px rgba(28,61,86,.1);
}
.quick-pin{
  width:54px;
  height:54px;
  border-radius:18px;
  background:linear-gradient(145deg,#ffd45c,#fff2a8);
  box-shadow:inset 0 -4px 0 rgba(172,118,0,.12);
}
.quick-copy small{font-size:.62rem}
.quick-copy strong{font-size:1.15rem}
.quick-copy em{font-size:.74rem}
.quick-modes.two-actions{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:12px;
  min-width:min(520px,52vw);
}
.quick-modes.two-actions button{
  position:relative;
  min-width:0;
  min-height:86px;
  border:0;
  border-radius:22px;
  padding:15px 16px;
  display:grid;
  grid-template-columns:52px 1fr;
  grid-template-rows:auto auto;
  column-gap:13px;
  overflow:hidden;
  box-shadow:0 8px 0 rgba(23,51,77,.12),0 16px 24px rgba(28,61,86,.09);
}
.quick-modes.two-actions button:before{
  content:'';
  position:absolute;
  inset:auto -22px -28px auto;
  width:92px;
  height:92px;
  border-radius:50%;
  background:rgba(255,255,255,.3);
}
.quick-modes.two-actions button>span{
  grid-row:1/3;
  width:52px;
  height:52px;
  border-radius:17px;
  background:rgba(255,255,255,.72);
  font-size:1.55rem;
  box-shadow:inset 0 -4px 0 rgba(23,51,77,.08);
}
.quick-modes.two-actions strong{
  font-size:1rem;
  line-height:1.08;
  color:inherit;
}
.quick-modes.two-actions small{
  font-size:.68rem;
  color:rgba(23,51,77,.72);
  margin-top:5px;
}
.quick-modes.two-actions .quick-primary{
  background:linear-gradient(145deg,#ff855f,#ff603f);
  color:#fff;
}
.quick-modes.two-actions .quick-primary small{color:rgba(255,255,255,.82)}
.quick-modes.two-actions .quick-due{
  background:linear-gradient(145deg,#dff8ed,#91e0bf);
  color:#155b47;
}
.quick-modes.two-actions button:hover,
.quick-modes.two-actions button:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 11px 0 rgba(23,51,77,.13),0 20px 30px rgba(28,61,86,.12);
}


@media(max-width:850px){
  .hero{grid-template-columns:1fr;min-height:470px;padding:28px 27px 24px}
  .hero>div:first-child{max-width:560px}
  .hero h1{font-size:clamp(2rem,7vw,2.9rem)}
  .hero-art{min-height:230px}
  .hero-milo{right:2%;height:113%;bottom:-19%}
  .stamp{right:2%;top:-8%;width:100px;height:100px;font-size:.95rem}
  .quick-modes.two-actions{min-width:0;width:100%;grid-template-columns:1fr 1fr}
}
@media(max-width:430px){
  .hero{min-height:455px;padding:24px 20px}
  .hero-copy{font-size:.86rem}
  .hero-art{min-height:205px}
  .hero-milo{right:-6%;height:105%;bottom:-17%}
  .sun{width:176px;height:176px;right:17%;top:18%}
  .stamp{right:-1%;top:-4%;width:88px;height:88px;font-size:.82rem}
  .speech.one{left:1%;top:8%;font-size:.72rem}
  .uk-route-card{right:41%;left:auto;bottom:3%;transform:rotate(-4deg) scale(.9)}
  .quick-start{padding:13px;border-radius:22px}
  .quick-modes.two-actions{grid-template-columns:1fr}
  .quick-modes.two-actions button{min-height:74px;grid-template-columns:48px 1fr}
  .quick-modes.two-actions button>span{width:48px;height:48px}
}

/* Kid-first home mission: compact text, Milo as the hero, clear stamp placement */
#homeScreen .hero{
  min-height:245px;
  padding:24px 34px;
  grid-template-columns:minmax(0,.82fr) minmax(310px,1.18fr);
  align-items:center;
  background:
    radial-gradient(circle at 74% 58%,rgba(255,212,92,.95) 0 18%,transparent 18.5%),
    linear-gradient(135deg,#84def0 0%,#65cfe5 100%);
}
#homeScreen .hero:before{display:none}
#homeScreen .hero>div:first-child{
  max-width:340px;
  padding:4px 0;
}
#homeScreen .hero .eyebrow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-bottom:9px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.65);
  color:#2767d8;
  font-size:.62rem;
  letter-spacing:.13em;
  box-shadow:inset 0 -2px 0 rgba(23,51,77,.08);
}
#homeScreen .hero h1{
  max-width:330px;
  font-size:clamp(1.85rem,3vw,2.55rem);
  line-height:.98;
  margin-bottom:9px;
  letter-spacing:-.035em;
}
#homeScreen .hero h1 em{
  color:#fff;
  text-shadow:0 2px 0 rgba(23,51,77,.08);
}
#homeScreen .hero-copy{
  max-width:315px;
  margin-bottom:12px;
  font-size:.88rem;
  line-height:1.42;
}
#homeScreen .hero-tags{
  margin:0;
  gap:7px;
}
#homeScreen .hero-tags span{
  padding:6px 9px;
  background:rgba(255,255,255,.72);
  font-size:.6rem;
}
#homeScreen .hero-art{
  min-height:230px;
}
#homeScreen .sun{
  width:190px;
  height:190px;
  right:18%;
  top:19%;
}
#homeScreen .stamp{
  left:3%;
  right:auto;
  top:0;
  width:92px;
  height:64px;
  border-radius:22px;
  z-index:5;
  transform:rotate(-7deg);
  background:#fffaf0;
  box-shadow:0 8px 18px rgba(23,51,77,.12);
  font-size:.82rem;
  line-height:1;
}
#homeScreen .hero-milo{
  right:1%;
  bottom:-22%;
  height:123%;
  z-index:3;
}
#homeScreen .speech.one{
  left:8%;
  top:34%;
  z-index:5;
  padding:10px 14px;
  font-size:.78rem;
  transform:rotate(-4deg);
}
#homeScreen .uk-route-card{
  left:6%;
  bottom:4%;
  z-index:5;
  transform:rotate(-5deg) scale(.94);
}
#homeScreen .route{
  left:8%;
  top:66%;
  width:38%;
  opacity:.28;
}

@media(max-width:850px){
  #homeScreen .hero{
    grid-template-columns:1fr;
    min-height:410px;
    padding:22px 24px 18px;
  }
  #homeScreen .hero>div:first-child{max-width:480px}
  #homeScreen .hero h1{font-size:clamp(1.85rem,6vw,2.55rem)}
  #homeScreen .hero-copy{max-width:430px}
  #homeScreen .hero-art{min-height:215px}
  #homeScreen .stamp{
    left:2%;
    top:0;
    width:86px;
    height:58px;
    font-size:.76rem;
  }
  #homeScreen .hero-milo{
    right:-1%;
    height:111%;
    bottom:-19%;
  }
}
@media(max-width:430px){
  #homeScreen .hero{
    min-height:398px;
    padding:20px 18px 14px;
  }
  #homeScreen .hero .eyebrow{font-size:.56rem}
  #homeScreen .hero h1{font-size:2.1rem}
  #homeScreen .hero-copy{font-size:.82rem}
  #homeScreen .hero-tags span{font-size:.55rem}
  #homeScreen .hero-art{min-height:198px}
  #homeScreen .stamp{
    left:0;
    top:2px;
    width:78px;
    height:52px;
    font-size:.68rem;
  }
  #homeScreen .speech.one{
    left:4%;
    top:36%;
    font-size:.68rem;
  }
  #homeScreen .hero-milo{
    right:-11%;
    bottom:-18%;
    height:103%;
  }
  #homeScreen .uk-route-card{
    left:3%;
    right:auto;
    bottom:0;
    transform:rotate(-5deg) scale(.82);
  }
}

/* Mobile quiz fit: iPhone 12 / older screens */
html,
body{
  max-width:100%;
  overflow-x:hidden;
}
.word-card h2{
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:normal;
  hyphens:auto;
}
.word-card h2.long{font-size:clamp(2.15rem,7vw,3.1rem)}
.word-card h2.very-long{font-size:clamp(1.65rem,6vw,2.35rem);line-height:1.08}
.answer-btn:focus{outline:none}
.answer-btn:focus-visible{outline:4px solid rgba(39,103,216,.28);outline-offset:3px}

@media (hover:none){
  .answer-btn:hover{
    border-color:var(--line);
    background:#fff;
  }
  .answer-btn.correct:hover{
    background:#dff8ed;
    border-color:var(--mint);
  }
  .answer-btn.wrong:hover{
    background:#fff0ec;
    border-color:var(--coral);
  }
}

@media(max-width:430px){
  .topbar{
    height:58px;
    padding:0 12px;
  }
  .brand-mark{
    width:36px;
    height:36px;
  }
  .stats{
    gap:4px;
  }
  .stats span{
    padding:6px 8px;
    font-size:.74rem;
  }
  main{
    padding:14px 12px 82px;
  }
  #learnScreen{
    margin-inline:-2px;
  }
  .learn-head{
    grid-template-columns:auto 1fr auto;
    gap:8px;
    align-items:center;
  }
  .learn-head .back{
    font-size:.78rem;
    white-space:nowrap;
  }
  #sessionCount{
    font-size:.72rem;
    color:var(--muted);
    white-space:nowrap;
  }
  .progress{
    height:7px;
  }
  .quiz-wrap{
    width:100%;
    margin:18px auto 0;
  }
  .milo-coach{
    margin-bottom:8px;
    transform:scale(.9);
    transform-origin:left center;
  }
  #quizLabel{
    margin-bottom:10px;
    font-size:.57rem;
    letter-spacing:.14em;
    line-height:1.35;
  }
  .word-card{
    border-radius:24px;
    min-height:205px;
    padding:32px 18px 24px;
  }
  .word-card>span{
    font-size:.62rem;
    letter-spacing:.14em;
  }
  .word-card h2{
    margin:8px 0;
    font-size:clamp(2.05rem,10vw,3.15rem);
    line-height:1.03;
  }
  .word-card h2.long{
    font-size:clamp(1.72rem,8vw,2.55rem);
  }
  .word-card h2.very-long{
    font-size:clamp(1.35rem,6.5vw,2rem);
    line-height:1.12;
  }
  .sound-btn{
    right:12px;
    top:12px;
    width:36px;
    height:36px;
  }
  .answer-reveal{
    min-height:18px;
    font-size:.82rem;
  }
  .mc-grid{
    grid-template-columns:1fr;
    gap:9px;
    margin-top:12px;
  }
  .answer-btn,
  .type-submit{
    min-height:58px;
    border-radius:15px;
    padding:11px 12px;
    font-size:.92rem;
    line-height:1.2;
  }
  .answer-btn.has-emoji{
    gap:8px;
  }
  .answer-emoji{
    font-size:1.25rem;
  }
  .feedback{
    min-height:22px;
    margin-top:9px;
    font-size:.82rem;
  }
  .bottom-nav{
    height:64px;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .bottom-nav span{
    font-size:1.1rem;
  }
}

@media(max-width:380px){
  .stats span{
    padding:5px 7px;
    font-size:.7rem;
  }
  .quiz-wrap{
    margin-top:14px;
  }
  .word-card{
    min-height:188px;
    padding:27px 14px 20px;
  }
  .word-card h2{
    font-size:clamp(1.85rem,9vw,2.75rem);
  }
  .word-card h2.long{
    font-size:clamp(1.55rem,7.5vw,2.25rem);
  }
  .word-card h2.very-long{
    font-size:clamp(1.22rem,6.2vw,1.78rem);
  }
  .answer-btn,
  .type-submit{
    min-height:54px;
    padding:10px 11px;
    font-size:.86rem;
  }
}

@media(max-width:430px) and (max-height:720px){
  .topbar{height:54px}
  main{padding-top:10px}
  .learn-head{gap:7px}
  .quiz-wrap{margin-top:10px}
  .milo-coach{display:none}
  #quizLabel{
    margin-bottom:7px;
    font-size:.52rem;
  }
  .word-card{
    min-height:160px;
    padding:23px 13px 16px;
    border-radius:21px;
  }
  .word-card>span{font-size:.56rem}
  .word-card h2{
    font-size:clamp(1.7rem,8.5vw,2.45rem);
    margin:5px 0;
  }
  .word-card h2.long{
    font-size:clamp(1.38rem,7vw,2rem);
  }
  .word-card h2.very-long{
    font-size:clamp(1.08rem,5.8vw,1.58rem);
    line-height:1.1;
  }
  .sound-btn{
    width:32px;
    height:32px;
    right:9px;
    top:9px;
  }
  .mc-grid{
    gap:7px;
    margin-top:9px;
  }
  .answer-btn,
  .type-submit{
    min-height:46px;
    padding:8px 10px;
    font-size:.82rem;
  }
  .feedback{
    min-height:18px;
    margin-top:6px;
    font-size:.76rem;
  }
  .bottom-nav{height:58px}
}

/* Compact route + friendlier navigation icons */
#homeScreen .route-heading{
  margin-top:26px;
  margin-bottom:12px;
}
#homeScreen .route-heading h2{
  font-size:1.65rem;
}
#homeScreen .lesson-grid:not(.expanded){
  grid-template-columns:repeat(2,minmax(0,1fr));
}
#homeScreen .lesson-grid.expanded{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.feature-icon{
  font-size:2.15rem;
  line-height:1;
}
.bottom-nav button[data-go="box"] span,
.bottom-nav button[data-go="arcade"] span{
  font-size:1.25rem;
}

@media(max-width:780px){
  #homeScreen .lesson-grid:not(.expanded),
  #homeScreen .lesson-grid.expanded{
    grid-template-columns:1fr;
  }
}

/* Custom Milo app icons: London Letterbox + Game Ticket */
.app-icon{
  position:relative;
  display:inline-block;
  width:42px;
  height:42px;
  flex:0 0 auto;
}
.feature-icon .app-icon{
  width:48px;
  height:48px;
}
.quick-modes.two-actions button>span .app-icon{
  width:38px;
  height:38px;
}
.app-icon.small{
  width:25px;
  height:25px;
  vertical-align:middle;
}
.app-icon.letterbox:before{
  content:'';
  position:absolute;
  left:18%;
  right:18%;
  bottom:8%;
  height:68%;
  border-radius:11px 11px 7px 7px;
  background:linear-gradient(160deg,#ff4e4e 0%,#c92734 68%,#941a27 100%);
  border:2px solid rgba(112,20,28,.55);
  box-shadow:inset 0 5px 0 rgba(255,255,255,.24),0 4px 0 rgba(23,51,77,.16);
}
.app-icon.letterbox:after{
  content:'';
  position:absolute;
  left:24%;
  right:24%;
  top:31%;
  height:10%;
  border-radius:99px;
  background:#fff7dc;
  box-shadow:0 14px 0 -1px #6d1420;
}
.app-icon.letterbox i,
.app-icon.letterbox b{
  position:absolute;
  display:block;
  background:#fffaf0;
  border:1.5px solid #ffd45c;
  border-radius:3px;
  z-index:2;
  box-shadow:0 2px 4px rgba(23,51,77,.12);
}
.app-icon.letterbox i{
  left:15%;
  top:4%;
  width:33%;
  height:34%;
  transform:rotate(-13deg);
}
.app-icon.letterbox b{
  right:14%;
  top:8%;
  width:34%;
  height:32%;
  transform:rotate(10deg);
}
.app-icon.letterbox i:before,
.app-icon.letterbox b:before{
  content:'A';
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#2767d8;
  font:900 .55rem var(--font-body);
}
.app-icon.letterbox b:before{content:'B';color:#ff6b4a}

.app-icon.game-ticket{
  transform:rotate(-8deg);
}
.app-icon.game-ticket:before{
  content:'';
  position:absolute;
  inset:16% 5%;
  border-radius:10px;
  background:linear-gradient(145deg,#fff6a8 0%,#ffd45c 48%,#f0a820 100%);
  border:2px solid #ac7600;
  box-shadow:inset 0 4px 0 rgba(255,255,255,.35),0 4px 0 rgba(23,51,77,.16);
  clip-path:polygon(0 0,100% 0,100% 34%,90% 50%,100% 66%,100% 100%,0 100%,0 66%,10% 50%,0 34%);
}
.app-icon.game-ticket:after{
  content:'PLAY';
  position:absolute;
  left:18%;
  right:18%;
  top:30%;
  z-index:4;
  text-align:center;
  color:#17334d;
  font:900 .42rem var(--font-body);
  letter-spacing:.08em;
  text-shadow:0 1px 0 rgba(255,255,255,.65);
}
.app-icon.game-ticket i,
.app-icon.game-ticket b{
  position:absolute;
  z-index:2;
  display:block;
}
.app-icon.game-ticket i{
  left:28%;
  top:58%;
  width:22%;
  height:10%;
  border-radius:99px;
  background:#17334d;
  box-shadow:12px 0 0 #17334d;
}
.app-icon.game-ticket i:before{
  content:'';
  position:absolute;
  left:5px;
  top:-4px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#ff6b4a;
  box-shadow:14px 0 0 #2767d8;
}
.app-icon.game-ticket b{
  right:13%;
  top:18%;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#fff;
  box-shadow:-30px 30px 0 -2px rgba(255,255,255,.9),-5px 28px 0 -2px rgba(255,255,255,.9);
}
.app-icon.small.letterbox i,
.app-icon.small.letterbox b{
  border-width:1px;
}
.app-icon.small.letterbox i:before,
.app-icon.small.letterbox b:before,
.app-icon.small.game-ticket:after{
  font-size:.25rem;
}
.bottom-nav .app-icon{
  margin:0 auto 2px;
}

/* Icon polish pass: crisp, charming, not emoji-ish */
.feature-icon{
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 -4px 0 rgba(23,51,77,.08);
}
.app-icon{
  transform:none;
  overflow:visible;
}
.feature-icon .app-icon{
  width:46px;
  height:46px;
}
.quick-modes.two-actions button>span .app-icon{
  width:34px;
  height:34px;
}
.app-icon.small{
  width:28px;
  height:28px;
}

.app-icon.home-house:before{
  content:'';
  position:absolute;
  left:22%;
  right:22%;
  bottom:14%;
  height:42%;
  border-radius:4px 4px 6px 6px;
  background:#fffaf0;
  border:2px solid #ff6b4a;
  box-shadow:0 3px 0 rgba(23,51,77,.1);
}
.app-icon.home-house:after{
  content:'';
  position:absolute;
  left:20%;
  top:18%;
  width:60%;
  height:45%;
  background:#ff6b4a;
  clip-path:polygon(50% 0,100% 52%,86% 52%,86% 100%,14% 100%,14% 52%,0 52%);
}
.app-icon.home-house.small:before{border-width:1.7px}

.app-icon.letterbox:before{
  left:20%;
  right:20%;
  bottom:9%;
  height:62%;
  border-radius:12px 12px 8px 8px;
  background:linear-gradient(160deg,#ff5a55 0%,#d32937 62%,#9d1926 100%);
  border:2px solid rgba(114,24,31,.55);
  box-shadow:inset 0 5px 0 rgba(255,255,255,.23),0 4px 0 rgba(23,51,77,.13);
}
.app-icon.letterbox:after{
  left:28%;
  right:28%;
  top:38%;
  height:8%;
  background:#fff7dc;
  box-shadow:0 12px 0 -2px #6d1420;
}
.app-icon.letterbox i{
  left:18%;
  top:8%;
  width:30%;
  height:29%;
}
.app-icon.letterbox b{
  right:16%;
  top:10%;
  width:31%;
  height:28%;
}
.app-icon.letterbox i:before,
.app-icon.letterbox b:before{
  font-size:.5rem;
}

.app-icon.game-ticket{
  transform:rotate(-5deg);
}
.app-icon.game-ticket:before{
  inset:18% 6%;
  border-radius:13px;
  background:
    radial-gradient(circle at 0 50%,transparent 0 14%,#ac7600 14% 19%,transparent 19%),
    radial-gradient(circle at 100% 50%,transparent 0 14%,#ac7600 14% 19%,transparent 19%),
    linear-gradient(145deg,#fff7b7 0%,#ffd45c 50%,#f3aa22 100%);
  border:2px solid #ac7600;
  clip-path:none;
  box-shadow:inset 0 4px 0 rgba(255,255,255,.38),0 4px 0 rgba(23,51,77,.14);
}
.app-icon.game-ticket:after{
  content:'PLAY';
  left:19%;
  right:19%;
  top:31%;
  color:#17334d;
  font:900 .44rem var(--font-body);
  letter-spacing:.09em;
  z-index:4;
}
.app-icon.game-ticket i{
  left:31%;
  top:60%;
  width:17%;
  height:8%;
  background:#17334d;
  box-shadow:10px 0 0 #17334d;
}
.app-icon.game-ticket i:before{
  left:4px;
  top:-4px;
  width:4px;
  height:4px;
  background:#ff6b4a;
  box-shadow:12px 0 0 #2767d8;
}
.app-icon.game-ticket b{
  right:17%;
  top:22%;
  width:4px;
  height:4px;
  opacity:.9;
  box-shadow:-29px 25px 0 -1.8px rgba(255,255,255,.95);
}

.bottom-nav{
  box-shadow:0 -8px 24px rgba(23,51,77,.07);
}
.bottom-nav button{
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
}
.bottom-nav button>span{
  display:grid;
  place-items:center;
  width:35px;
  height:35px;
  margin:0 auto;
  border-radius:14px;
  background:transparent;
}
.bottom-nav button.active>span{
  background:#fff4d4;
  box-shadow:inset 0 -3px 0 rgba(255,107,74,.14);
}
.bottom-nav .app-icon{
  margin:0;
}
.bottom-nav .app-icon.small{
  width:24px;
  height:24px;
}
.bottom-nav .app-icon.small.game-ticket:after{
  font-size:.23rem;
  top:33%;
}
.bottom-nav .app-icon.small.letterbox i:before,
.bottom-nav .app-icon.small.letterbox b:before{
  font-size:.26rem;
}