/* Illustrated title/controls. Local fonts keep every language rounded and offline. */
@font-face{font-family:StarcatcherLatin;src:url('assets/menu/fonts/latin-rounded.woff2') format('woff2');font-weight:200 1000;font-display:swap}
@font-face{font-family:StarcatcherChinese;src:url('assets/menu/fonts/zh-rounded.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:StarcatcherArabic;src:url('assets/menu/fonts/ar-rounded.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:StarcatcherJapanese;src:url('assets/menu/fonts/ja-rounded.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:StarcatcherKorean;src:url('assets/menu/fonts/ko-rounded.woff2') format('woff2');font-weight:100 900;font-display:swap}
#cover{--menu-display:StarcatcherLatin,"Trebuchet MS",sans-serif;--menu-reading:StarcatcherLatin,"Segoe UI",sans-serif;font-family:var(--menu-reading)}
html[lang="zh"] #cover{--menu-display:StarcatcherChinese,"Microsoft YaHei",sans-serif;--menu-reading:"Microsoft YaHei","Segoe UI",sans-serif}
html[lang="ar"] #cover{--menu-display:StarcatcherArabic,Tahoma,sans-serif;--menu-reading:StarcatcherArabic,Tahoma,sans-serif}
html[lang="ja"] #cover{--menu-display:StarcatcherJapanese,sans-serif;--menu-reading:StarcatcherJapanese,sans-serif}
html[lang="ko"] #cover{--menu-display:StarcatcherKorean,sans-serif;--menu-reading:StarcatcherKorean,sans-serif}
#cover .title-star{display:none}
#cover #cvTitle{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:200px;margin:0 0 28px;font-size:48px;line-height:1.15;letter-spacing:0;-webkit-text-stroke:0;text-shadow:none;paint-order:normal;color:#fff8df;overflow:visible}
#homeLogo{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 8px #2a768a18)}
.title-accessible{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
#cvTitle.logo-unavailable #homeLogo{display:none}
#cvTitle.logo-unavailable .title-accessible{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;white-space:normal;font-family:var(--menu-display);color:#1d5f70}
.home-copy{width:45%;max-width:650px}
.home-actions{width:min(425px,94%);gap:17px}
#cover .hero-button,#cover .hero-button.secondary{position:relative;isolation:isolate;min-height:100px;padding:14px 65px 21px;border:0;border-radius:0;box-shadow:none;background:none;color:#14566c;gap:0;transition:transform .15s,filter .15s}
#cover .hero-button::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('assets/menu/painted/button-gold.webp') center/100% 100% no-repeat}
#cover .hero-button.secondary::before{background-image:url('assets/menu/painted/button-cream.webp')}
#cover .hero-button svg{display:none}
#cover .hero-button span{font-family:var(--menu-display);font-synthesis:none;font-size:clamp(24px,2.35vw,34px);font-weight:900;line-height:1.15;max-width:100%;overflow-wrap:normal;text-wrap:balance;text-shadow:0 1px 0 #fff9cf;letter-spacing:.015em}
html[lang="zh"] #cover .hero-button span{font-size:clamp(34px,3.1vw,44px);font-weight:700;letter-spacing:.04em;-webkit-text-stroke:1px #fff5d8;paint-order:stroke fill}
#cover .hero-button:hover{filter:brightness(1.04);transform:translateY(-2px) scale(1.015)}
#cover .hero-button:active{transform:translateY(3px) scale(.985);filter:brightness(.99)}
#cover .hero-button:focus-visible{outline:3px solid #12647d;outline-offset:4px;border-radius:50px}
.home-progress{margin-top:23px;background:#fffcedd9;font-size:13px}
#cover .menu-small,#cover .chapter-tab{font-family:var(--menu-display);font-synthesis:none;font-weight:800;background:linear-gradient(#fffef2,#fff1cd);border-color:#dab763;box-shadow:inset 0 1px #fffef6,0 3px #c79c4744}
#cover .language-control{border-color:#d7bd7a;background:#fffaf0e8;box-shadow:0 3px #bfa56333}
.menu-brand{font-family:var(--menu-display);font-synthesis:none}
#cover .selection-heading h2{font-family:var(--menu-display);font-synthesis:none;font-size:clamp(34px,4vw,47px);font-weight:900;color:#1b6170;letter-spacing:.015em;text-shadow:0 2px #fff8dc,0 3px #d4be7d66}
#cover .chapter-card,#cover .chapter-card.locked,#cover .level-card,#cover .level-card.completed{position:relative;isolation:isolate;border:0;border-radius:25px;background:none;box-shadow:none;overflow:visible}
#cover .chapter-card::before,#cover .level-card::before{content:"";position:absolute;inset:-2px;z-index:-1;pointer-events:none;background:none;opacity:1;border:25px solid transparent;border-image:url('assets/menu/painted/level-frame.webp') 120 fill stretch;border-image-width:25px}
#cover .chapter-card{min-height:245px;padding:23px 25px 23px}
#cover .chapter-card.locked{filter:saturate(.35);opacity:.8}
#cover .chapter-card.locked::before{opacity:.82}
#cover .chapter-card:hover:not(.locked){filter:brightness(1.035);transform:translateY(-3px)}
.chapter-name{font-family:var(--menu-display);font-synthesis:none;font-size:31px;font-weight:900;color:#206373;text-shadow:0 1px #fffdf1}
.chapter-subtitle{font-size:12px;color:#788a85}
.chapter-top{margin-bottom:12px}
.chapter-top svg{color:#cfa332;fill:#ffeeb2!important;filter:drop-shadow(0 1px #fff)}
.chapter-number{color:#b69048;letter-spacing:.12em}
.chapter-progress{height:7px;background:#e4dec4;border:1px solid #fffdf0;box-shadow:inset 0 1px 2px #806c3522}
.chapter-progress i{background:linear-gradient(#ffe57c,#efbc42);box-shadow:inset 0 1px #fff4b4}
.chapter-foot{color:#a18450;padding-inline:5px;margin-bottom:8px;text-align:center}
#cover .chapter-tab.selected{background:linear-gradient(#ffdf72,#f2c34f);border-color:#d4a33b;color:#1d5a69;box-shadow:0 3px #c69b45}
#cover .level-card{min-height:171px;padding:18px 10px 19px;gap:6px}
#cover .level-card::before{border-width:20px;border-image-width:20px}
#cover .level-card:hover{filter:brightness(1.035);transform:translateY(-3px)}
.level-number{font-family:StarcatcherLatin,var(--menu-display);font-synthesis:none;font-size:43px;font-weight:950;color:#246779;text-shadow:0 2px #fffdf1}
html[lang="ar"] .level-number{font-family:var(--menu-display)}
.level-kicker{color:#9c845c;letter-spacing:.02em}
.level-lesson{font-family:var(--menu-display);font-synthesis:none;font-size:13px;line-height:1.5;color:#45767a}
.level-status{color:#a18b64}
#cover .level-card.completed::before{filter:drop-shadow(0 1px 3px #5c9c5280)}
#cover:not([data-page="home"]) .menu-top{background:#e8f5f0e3;border-color:#e1cf9c55}
@media(max-aspect-ratio:4/5){#cover .chapter-card{padding-bottom:30px}}
@media(max-aspect-ratio:4/5){html[lang="zh"] #cover .hero-button span{font-size:34px}}
@media(max-width:359px){html[lang="zh"] #cover .hero-button span{font-size:31px}}

/* Compact level tiles: the number is the identifier; the extra kicker repeats it. */
#levelsPage .level-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}
#cover #levelsPage .level-card{box-sizing:border-box;min-height:116px;padding:9px 7px 15px;gap:3px;border-radius:17px}
#cover #levelsPage .level-card::before{border-width:13px;border-image-width:13px;inset:-1px}
#levelsPage .level-kicker{display:none}
#levelsPage .level-number{font-size:31px;line-height:1.1}
#levelsPage .level-lesson{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:26px;max-height:26px;font-size:11px;line-height:13px;overflow-wrap:anywhere}
#levelsPage .level-status{min-height:15px;margin-top:2px;font-size:11px;line-height:1.2}
#levelsPage .level-status .star-count{font-size:11px;gap:3px}
#levelsPage .level-status .star-count svg{width:14px!important;height:14px!important}
#levelsPage .level-status>svg{width:13px!important;height:13px!important}
#levelsPage .level-heading{margin-bottom:12px}
#levelsPage .chapter-tabs{margin-bottom:13px;padding-bottom:9px}
@media(max-width:1000px){#levelsPage .level-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}#cover #levelsPage .level-card{min-height:110px}}
@media(max-width:699px){#levelsPage .level-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}#cover #levelsPage .level-card{min-height:104px;padding:9px 5px 14px}#cover #levelsPage .level-card::before{border-width:11px;border-image-width:11px}#levelsPage .level-number{font-size:28px}#levelsPage .level-lesson{font-size:10px;line-height:12px;min-height:24px;max-height:24px}#levelsPage .level-status{font-size:10px}#levelsPage .selection-heading h2{font-size:30px}}
@media(max-width:479px){#levelsPage .level-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}#cover #levelsPage .level-card{min-height:100px}#levelsPage .level-number{font-size:27px}#levelsPage .level-status .star-count{font-size:10px}}
@media(max-width:359px){#levelsPage .level-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}#cover #levelsPage .level-card{min-height:100px}}
@media(max-width:900px){#cover .chapter-card{padding:22px 22px 20px;min-height:235px}.home-actions{width:min(390px,98%)}#cover .hero-button{padding-inline:52px}}
@media(max-aspect-ratio:4/5){.home-copy{width:100%;max-width:none}#cover #cvTitle{height:clamp(90px,15svh,130px);max-width:100%;width:min(450px,100%);margin:2svh auto 0}.home-actions{width:min(405px,93%);gap:13px;padding-top:37svh}#cover .hero-button,#cover .hero-button.secondary{min-height:82px;padding:12px 49px 17px}#cover .hero-button span{font-size:24px}html[lang="zh"] #cover .hero-button span{font-size:30px}.home-progress{margin-top:14px;font-size:11px}.menu-home{padding-inline:16px}#cover .chapter-card{min-height:221px;padding:19px 19px 20px}#cover .chapter-card::before{border-width:20px;border-image-width:20px}.chapter-name{font-size:28px}.chapter-subtitle{font-size:10px}.chapter-meta{font-size:11px}.chapter-foot{font-size:10px}#cover .selection-heading h2{font-size:36px}#cover .level-card{min-height:153px;padding:14px 8px 18px}#cover .level-card::before{border-width:16px;border-image-width:16px}.level-number{font-size:37px}.level-lesson{font-size:11px}.level-kicker{font-size:10px}}
@media(max-width:359px){#cover .hero-button,#cover .hero-button.secondary{min-height:75px;padding-inline:43px}#cover .hero-button span{font-size:22px}html[lang="zh"] #cover .hero-button span{font-size:27px}.home-actions{width:96%;gap:11px}.home-progress{font-size:10px}#cover .level-card{min-height:143px;padding-inline:6px}.level-number{font-size:32px}}
@media(min-aspect-ratio:2/1){#cover #cvTitle{height:105px;margin-bottom:14px}.home-actions{gap:10px;width:min(370px,100%)}#cover .hero-button,#cover .hero-button.secondary{min-height:75px;padding:9px 55px 16px}#cover .hero-button span{font-size:25px}.home-progress{margin-top:15px}}