/* Illustrated menus. Text and controls remain native, localizable HTML. */
[hidden]{display:none!important}
body.menu-open{overflow:hidden}
#gameShell{display:contents}
#cover{--navy:#185a6a;--gold:#f6c345;--cream:#fffcf1;display:none;position:fixed;inset:0;z-index:50;overflow:auto;overscroll-behavior:contain;color:var(--navy);background:#dbf3f6;font-family:"Trebuchet MS","Segoe UI","Microsoft YaHei",sans-serif;isolation:isolate}
#cover.show{display:block}
#cover::before{content:"";position:fixed;inset:0;z-index:-2;background:linear-gradient(110deg,#e0f4f5 0%,#effbfa 70%,#d7eef1);pointer-events:none}
.menu-art{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;transition:opacity .25s}
.menu-art img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
#cover[data-page="stages"] .menu-art,#cover[data-page="levels"] .menu-art{opacity:.13;filter:blur(2px)}
.menu-top{position:relative;z-index:2;max-width:1480px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:max(22px,env(safe-area-inset-top)) max(32px,env(safe-area-inset-right)) 12px max(32px,env(safe-area-inset-left));min-height:74px;box-sizing:border-box}
.menu-top-start,.menu-tools{display:flex;gap:10px;align-items:center}
#cover button,#cover select{font-family:inherit;touch-action:manipulation}
#cover button{cursor:pointer;-webkit-tap-highlight-color:transparent}
#cover button:focus-visible,#cover select:focus-visible{outline:3px solid #14718f;outline-offset:5px}
#cover h1:focus,#cover h2:focus{outline:none}
#cover svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.menu-small,.language-control{display:flex;align-items:center;gap:8px;min-height:44px;border:1px solid #a9ced0;background:#fffdf4ed;box-shadow:0 3px 0 #80b0b226;border-radius:24px;color:var(--navy);font-weight:700;font-size:14px;padding:6px 16px;box-sizing:border-box}
.menu-small:hover{background:#fff}
.language-control{padding:4px 10px;gap:4px}
.language-control select{max-width:170px;min-height:34px;border:0;background:transparent;color:inherit;font-size:14px;font-weight:600;cursor:pointer;padding:0 2px}
.menu-brand{display:flex;gap:8px;align-items:center;font-size:19px;font-weight:800;text-shadow:0 1px white}
.menu-brand svg{fill:#ffdc73;color:#cc9b35}
#cover[data-page="home"] .menu-brand{visibility:hidden}
.menu-home{position:relative;width:min(1480px,100%);margin:auto;min-height:calc(100svh - 110px);display:flex;align-items:center;box-sizing:border-box;padding:30px 5vw 60px}
.home-copy{width:43%;max-width:610px;text-align:center;display:flex;align-items:center;flex-direction:column;padding-bottom:25px}
.title-star{color:#f2bd42;width:42px!important;height:42px!important;fill:#ffdf7b!important;filter:drop-shadow(0 2px 0 white);margin-bottom:8px}
#cvTitle{font-family:"Trebuchet MS","Arial Rounded MT Bold","Microsoft YaHei",sans-serif;font-size:clamp(48px,5.6vw,90px);font-weight:950;line-height:1.2;letter-spacing:.035em;margin:0 0 38px;color:#fff6d9;-webkit-text-stroke:5px #216575;paint-order:stroke fill;text-shadow:0 5px 0 #d4a647,0 9px 0 #216575,0 14px 22px #3c818635;text-wrap:balance;overflow-wrap:anywhere}
.home-actions{display:flex;flex-direction:column;gap:18px;width:min(360px,100%)}
#cover .hero-button{width:100%;min-height:76px;height:auto;display:flex;justify-content:center;align-items:center;gap:15px;padding:15px 22px;border:2px solid #d6a43d;border-radius:48px;color:#14566a;background:linear-gradient(#fffcae,#ffdc5e 55%,#fac146);box-shadow:inset 0 3px 0 #fffddd,0 5px 0 #ca9737,0 9px 16px #34697520;font-size:clamp(22px,2vw,29px);line-height:1.2;font-weight:850;text-align:center;transition:transform .15s,filter .15s}
#cover .hero-button.secondary{background:linear-gradient(#fffef6,#fff5d9);border-color:#c9b274;box-shadow:inset 0 3px white,0 5px #bca670,0 9px 16px #34697518}
#cover .hero-button svg{width:27px;height:27px;fill:#fff8cf;stroke:#c59431}
#cover .hero-button:hover{filter:brightness(1.04);transform:translateY(-2px)}
#cover .hero-button:active{transform:translateY(3px)}
.home-progress{display:flex;align-items:center;gap:9px;justify-content:center;margin-top:30px;padding:9px 15px;border-radius:20px;background:#fffdf1bb;color:#3b747b;font-size:14px;text-shadow:0 1px white}
.home-progress svg,.star-count svg{color:#d9a02d;fill:#ffda67!important}
.menu-pages{position:relative;max-width:1200px;margin:0 auto;padding:22px 36px max(50px,env(safe-area-inset-bottom));box-sizing:border-box}
.selection-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:8px 0 26px}
.selection-heading h2{font-size:clamp(29px,4vw,45px);margin:0 0 8px;letter-spacing:.04em;color:#215f6a;text-shadow:0 2px #fffdf5}
.selection-heading p{margin:0;font-size:14px;line-height:1.7;color:#527c82;max-width:760px}
.selection-medallion{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:24px;background:#fff8d9;border:2px solid #ebd199;box-shadow:0 4px #d9c98c;flex-shrink:0}
.selection-medallion svg{width:35px!important;height:35px!important;color:#d5a331;fill:#ffe396!important}
#gradeGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
#cover .chapter-card{--tint:#d9edce;display:flex;position:relative;flex-direction:column;align-items:stretch;gap:0;min-width:0;min-height:230px;height:auto;background:linear-gradient(155deg,#fffef9 30%,#fdf8e9);border:2px solid #e0cea1;border-radius:26px;box-shadow:0 5px #c0b48766,0 12px 22px #3469750c;text-align:start;color:#235e69;padding:21px 23px 17px;font-size:inherit;transition:transform .15s,border-color .15s;overflow:hidden}
#cover .chapter-card::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 100% 0%,var(--tint),transparent 65%);pointer-events:none;opacity:.7}
.chapter-card>*{position:relative}
#cover .chapter-1{--tint:#fde0d6}#cover .chapter-2{--tint:#dcddf3}#cover .chapter-3{--tint:#fbebaa}
#cover .chapter-card:hover:not(.locked){transform:translateY(-3px);border-color:#b7a264}
.chapter-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;color:#9c8e66}
.chapter-top svg{width:30px!important;height:30px!important;fill:#ffebac!important;color:#c3a34d}
.chapter-number{font-size:13px;font-weight:800;letter-spacing:.14em}
.chapter-name{font-size:28px;font-weight:850;line-height:1.25;margin-bottom:6px;overflow-wrap:anywhere}
.chapter-subtitle{font-size:13px;color:#638486;line-height:1.5}
.chapter-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:19px;font-size:13px}
.star-count{display:inline-flex;gap:5px;align-items:center;font-weight:750;white-space:nowrap;unicode-bidi:isolate}
.star-count svg{width:18px!important;height:18px!important}
.chapter-progress{height:6px;border-radius:6px;overflow:hidden;background:#dbe4dc;margin:10px 0}
.chapter-progress i{display:block;height:100%;background:linear-gradient(90deg,#efbe49,#e8a741);border-radius:6px}
.chapter-foot{font-size:12px;color:#748a80;line-height:1.4}
#cover .chapter-card.locked{filter:saturate(.5);box-shadow:0 4px #b3c3bd66;border-color:#c6d4cd;background:#edf3ec;cursor:pointer;opacity:.88}
.chapter-card.locked .chapter-foot{color:#87784e}.chapter-card.locked .chapter-top svg{fill:none!important}
.level-heading{margin-bottom:18px}
#chapterStars{background:#fff9e1;border:1px solid #dfc88e;border-radius:24px;padding:12px 18px;font-size:18px;flex-shrink:0}
.chapter-tabs{display:flex;gap:8px;overflow:auto;margin:0 0 24px;padding:4px 3px 12px;scrollbar-width:thin}
#cover .chapter-tab{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:14px;flex-shrink:0;padding:10px 16px;min-height:44px;height:auto;border:1px solid #c2d9d5;border-radius:24px;background:#fffcf2;color:#386d72;box-shadow:0 2px #bbcebf44}
.chapter-tab svg{width:14px!important;height:14px!important}
#cover .chapter-tab.selected{background:#236674;border-color:#236674;color:#fffce9;box-shadow:0 3px #154b59}
#cover .chapter-tab[aria-disabled="true"]{color:#7c9491;background:#e6efea}
.level-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
#cover .level-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;height:auto;min-height:158px;border:2px solid #e0cfa6;border-radius:24px;color:#2f6870;background:linear-gradient(145deg,#fffefa,#fff5de);box-shadow:0 5px #c9bb9466;text-align:center;padding:16px 8px 12px;transition:transform .15s}
#cover .level-card:hover{transform:translateY(-3px);border-color:#b99f63}
.level-kicker{font-size:11px;color:#6e8a86;line-height:1.4;overflow-wrap:anywhere}
.level-number{font-size:38px;line-height:1.2;color:#286a76;font-weight:850;font-variant-numeric:tabular-nums}
.level-lesson{font-size:12px;line-height:1.3;min-height:30px;overflow-wrap:anywhere}
.level-status{display:flex;align-items:center;gap:4px;min-height:23px;margin-top:5px;font-size:12px;color:#889589}
.level-status>svg{width:16px!important;height:16px!important;color:#579a76}
#cover .level-card.completed{border-color:#aac3a1;background:linear-gradient(145deg,#fcfff4,#e9f2da);box-shadow:0 5px #96b28b66}
#debugNote{margin:24px auto 0;text-align:center;color:#8d6747;font-size:12px}
#menuBtn{font-weight:800;padding:6px 12px;border-radius:12px;min-width:0;height:auto}
#toast{position:fixed;left:50%;top:max(20px,env(safe-area-inset-top));transform:translateX(-50%);z-index:80;max-width:calc(100vw - 48px);background:#235c68f5;color:#fffcef;padding:13px 22px;border:1px solid #c9dcd3;border-radius:18px;font-size:15px;line-height:1.5;opacity:0;pointer-events:none;transition:opacity .2s;text-align:center;box-shadow:0 7px 22px #1b53632b}
#toast.on{opacity:1}
html[data-rtl="1"] #cover,html[data-rtl="1"] #friends,html[data-rtl="1"] #hintPanel,html[data-rtl="1"] #win,html[data-rtl="1"] #top,html[data-rtl="1"] #shelfBar,html[data-rtl="1"] #keyboard-hint{direction:rtl}
html[data-rtl="1"] .back-arrow{transform:scaleX(-1)}
html[data-rtl="1"] .menu-home{direction:ltr}html[data-rtl="1"] .home-copy{direction:rtl}
html[lang="ms"] #cvTitle,html[lang="ru"] #cvTitle,html[lang="fr"] #cvTitle{font-size:clamp(42px,4.5vw,70px)}
@media(min-aspect-ratio:2/1){.menu-home{min-height:calc(100svh - 90px);padding-top:0;padding-bottom:20px}#cvTitle{font-size:clamp(38px,5vw,72px);margin-bottom:25px}.title-star{display:none}.home-progress{margin-top:20px}#cover .hero-button{min-height:62px}}
@media(max-width:900px){#gradeGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.level-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.menu-top{padding-inline:22px}.menu-pages{padding-inline:24px}}
@media(max-aspect-ratio:4/5){.menu-top{padding: max(14px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left));min-height:64px}.menu-home{display:block;padding:0 20px max(24px,env(safe-area-inset-bottom));min-height:calc(100svh - 64px)}.home-copy{width:100%;max-width:none;min-height:calc(100svh - 94px);padding:0;position:relative}.title-star{display:none}#cvTitle{font-size:clamp(44px,9.3vw,72px);max-width:94%;margin:3vh auto 0;-webkit-text-stroke:3px;text-shadow:0 3px #d4a647,0 6px #216575,0 9px 18px #3c818628}.home-actions{margin-top:auto;width:min(410px,86%);padding-top:37svh;gap:15px}#cover .hero-button{min-height:64px;font-size:23px;padding:13px 20px}.home-progress{margin-top:19px;font-size:12px;background:#fffdf1dd;padding:6px 12px}.menu-art img{object-position:center center}.menu-brand{font-size:16px}.menu-top .menu-small{max-width:165px;font-size:12px;padding:7px 11px}.language-control{padding:3px 8px}.language-control svg{width:19px!important}.language-control select{max-width:123px;font-size:12px}html[lang="ms"] #cvTitle,html[lang="ru"] #cvTitle,html[lang="fr"] #cvTitle{font-size:clamp(34px,8.4vw,59px)}.menu-pages{padding:18px 17px 40px}.selection-heading{margin-top:12px;gap:12px}.selection-heading h2{font-size:31px}.selection-heading p{font-size:12px}.selection-medallion{width:48px;height:48px;border-radius:18px}#gradeGrid{gap:14px}#cover .chapter-card{padding:17px 16px 13px;border-radius:22px;min-height:210px}.chapter-name{font-size:23px}.chapter-subtitle{font-size:11px;min-height:32px}.chapter-meta{font-size:11px;margin-top:10px;flex-wrap:wrap}.chapter-top{margin-bottom:10px}.chapter-top svg{width:24px!important;height:24px!important}.chapter-foot{font-size:11px}.level-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}#cover .level-card{min-height:139px;border-radius:20px;padding:12px 6px}.level-number{font-size:32px}#chapterStars{font-size:15px;padding:10px 12px}.chapter-tabs{margin-bottom:18px}#cover .chapter-tab{font-size:12px;padding:8px 13px}.level-lesson{font-size:11px}.level-kicker{font-size:10px}}
@media(max-width:359px){#gradeGrid{grid-template-columns:1fr}.menu-top{gap:5px;padding-inline:10px}.menu-brand{font-size:13px}.menu-brand svg{width:17px!important}.menu-small span{max-width:110px}.menu-small{padding-inline:9px}.language-control select{max-width:103px}#cvTitle{font-size:42px}.home-actions{width:91%}.level-grid{gap:9px}#cover .level-card{min-height:132px}.level-number{font-size:28px}.star-count{font-size:11px}}
@media(prefers-reduced-motion:reduce){#cover *,#toast{animation:none!important;transition:none!important}}
@media(max-width:600px){.menu-brand{display:none}.menu-small{white-space:nowrap}.menu-top{gap:8px}.menu-tools{min-width:0}.language-control{min-width:0}.menu-top-start{min-width:0}}
button.char span{max-width:44px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-top{position:sticky;top:0}
#cover:not([data-page="home"]) .menu-top{background:#e6f5f2eb;backdrop-filter:blur(10px);border-bottom:1px solid #bad4cd66;border-radius:0 0 20px 20px}

.bonus-mark{margin-left:auto;color:#c9a24a;font-size:13px;line-height:1}.bonus-mark.got{color:#e0a615;text-shadow:0 0 6px #ffe08a}.bonus-count{margin-left:10px;color:#b98a1c;font-weight:750;white-space:nowrap}

/* Keep localized headings and the star/bonus counters inside narrow phones. */
@media(max-width:479px){#levelsPage .level-heading{flex-wrap:wrap}#levelsPage .level-heading>div:first-child{min-width:0;flex:1 1 160px}#chapterStars{box-sizing:border-box;max-width:100%}}
