/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(./assets/fonts/manrope-0.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(./assets/fonts/manrope-1.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(./assets/fonts/manrope-2.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(./assets/fonts/manrope-3.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(./assets/fonts/manrope-4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(./assets/fonts/manrope-5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{font-family:Manrope,system-ui,-apple-system,sans-serif;color:#193c42;background:#f5f7f5;font-synthesis:none;--muted:#798b8d;--green:#13675d;--border:#dfe7e1;--cream:#f5f7f5}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:wait;opacity:.6}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #e7ba63;outline-offset:4px}button{color:inherit}button:hover{filter:brightness(1.04)}[hidden]{display:none!important}.app-shell{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100svh}.sidebar{padding:32px 22px 24px;border-right:1px solid var(--border);display:flex;flex-direction:column;background:#f0f4ef}.brand{display:flex;align-items:center;gap:10px;color:#173d39;text-decoration:none;font-weight:800;font-size:34px;letter-spacing:-2px}.brand-mark{display:grid;place-items:center;background:#175e53;color:#e2f093;border-radius:13px;width:42px;height:43px;font-size:35px;line-height:1;letter-spacing:0}.brand-dot{color:#95ad59}.sidebar-intro{margin:54px 10px 30px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:1.8px;color:#789183}.sidebar h1{font-size:20px;line-height:1.6;font-weight:650;letter-spacing:-.6px;margin:13px 0 0}.worlds{display:flex;flex-direction:column;gap:9px}.world{display:flex;align-items:center;gap:12px;padding:15px 11px;border:none;background:none;border-radius:14px;text-align:left;width:100%}.world-number{font-size:13px;color:#789282;display:grid;place-items:center;flex:0 0 31px;height:34px;border:1px solid #d5e0d6;border-radius:9px}.world strong{display:block;font-size:15px;font-weight:750}.world small{display:block;font-size:11px;margin-top:6px;color:#6b8680;line-height:1.4}.world.selected{background:#dcebdc;color:#1e594b}.world.selected .world-number{background:#23644f;color:#ecf6d0;border-color:transparent}.world>span:last-child{margin-left:auto;font-size:17px}.world.locked{opacity:.6}.journey-note{margin:auto 10px 28px;padding-top:44px;color:#6c837b}.tiny-orbit{font-size:25px;color:#92a757}.journey-note p{font-size:12px;line-height:1.8}.sidebar-bottom{border-top:1px solid #dbe4d9;padding:24px 8px 0;display:flex;align-items:center;gap:12px}.language-badge{padding:10px;background:#e3eade;border-radius:10px;font-size:12px;font-weight:800}.sidebar-bottom strong{display:block;font-size:13px}.sidebar-bottom small{display:block;font-size:11px;color:var(--muted);margin-top:5px}main{min-width:0;padding:0 36px}.topbar{height:90px;display:flex;align-items:center;justify-content:space-between;gap:12px}.breadcrumb{font-size:13px;color:#8b9690}.breadcrumb span{padding:0 14px;color:#b2bdb4}.breadcrumb strong{font-weight:600;color:#456258}.install-button{padding:10px 15px;border:1px solid #d9e3d9;border-radius:10px;background:transparent;font-size:13px;font-weight:700;display:flex;gap:9px;align-items:center}.install-button span{font-size:20px}.mobile-brand{display:none}.play-layout{display:grid;grid-template-columns:minmax(320px,520px) minmax(225px,290px);justify-content:center;align-items:start;gap:40px}.game-frame{isolation:isolate;position:relative;width:100%;height:min(760px,calc(100svh - 139px));min-height:530px;border-radius:25px;overflow:hidden;background:#045b84 url('./assets/ocean-seabed.webp') center bottom/100% auto;box-shadow:0 16px 40px #103c371a;touch-action:none;container-type:size}canvas{display:block;width:100%;height:100%;outline:none}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(#032c5366,transparent 23%,transparent 70%,#002a4770);z-index:1}.hud{position:absolute;top:25px;left:22px;right:22px;display:flex;align-items:center;gap:12px;color:#fff;z-index:4}.circle-button{border:1px solid #ffffff50;background:#06365855;color:white;width:41px;height:41px;border-radius:50%;font-size:21px;display:grid;place-items:center;backdrop-filter:blur(8px)}.circle-button:disabled{opacity:.6;cursor:default}.world-title span{display:block;font-size:9px;letter-spacing:2px;font-weight:800;color:#bef6f2}.world-title strong{display:block;font-size:19px;letter-spacing:-.5px;margin-top:2px}.hearts{display:flex;gap:5px;margin-left:auto;color:#ff8d86;font-size:27px;text-shadow:0 2px 0 #9c474744}.hearts .empty{opacity:.22;filter:grayscale(1)}.flight-progress{position:absolute;top:88px;left:24px;right:24px;color:#d1f4f7;z-index:3;font-size:11px;font-weight:700}.flight-progress>div:first-child{display:flex;justify-content:space-between;margin-bottom:8px}.progress-track{height:4px;border-radius:5px;background:#ffffff2b}.progress-track i{display:block;height:100%;width:0;background:#dcf9a4;box-shadow:0 0 10px #ddfc9c;transition:width .3s;border-radius:5px}.target{position:absolute;top:62%;left:50%;transform:translate(-50%,-50%);z-index:3;text-align:center;pointer-events:none}.target-caption{display:block;color:#b9f2f2;font-size:9px;font-weight:800;letter-spacing:2px;margin-bottom:7px}.target button{pointer-events:auto;display:flex;align-items:center;gap:10px;padding:10px 21px 12px 16px;border-radius:30px;background:#072d58e8;border:1px solid #c4ecff8c;color:#fff;box-shadow:0 4px 18px #00446f66;white-space:nowrap;backdrop-filter:blur(8px)}.target strong{font-size:28px;letter-spacing:-.8px}.target svg{width:24px;height:24px;fill:none;stroke:#bce9f5;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.feedback{position:absolute;top:49%;left:12px;right:12px;z-index:4;color:#e3ffb9;text-align:center;font-weight:800;font-size:18px;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .15s,transform .15s;text-shadow:0 2px 12px #063653}.feedback.visible{opacity:1;transform:translateY(0)}.feedback.error{color:#ffcdc8}.move-controls{position:absolute;bottom:24px;left:22px;right:22px;display:flex;align-items:center;justify-content:space-between;z-index:5;color:#cbecf1;gap:12px}.move-controls span{font-size:11px;text-shadow:0 2px 9px #072846}.move-controls button{width:48px;height:44px;border:1px solid #bbf5ff44;border-radius:15px;color:white;font-size:27px;background:#ffffff0d;backdrop-filter:blur(6px)}.start-overlay{position:absolute;inset:0;z-index:6;display:flex;align-items:flex-end;background:linear-gradient(transparent 20%,#003b5638 40%,#032c48ef 100%);padding:0 34px 62px}.start-content{width:100%;color:white;text-align:center}.pill{display:inline-block;font-size:9px;letter-spacing:1.9px;font-weight:800;padding:8px 12px;border:1px solid #b9eded66;border-radius:20px;color:#c9f2ec;background:#063e5344}.start-content h2{font-size:clamp(30px,3.15vw,47px);letter-spacing:-1.8px;line-height:1.13;margin:20px 0 13px;font-weight:800}.start-content p{font-size:14px;line-height:1.75;color:#badde4;margin:0 0 24px}.primary-button{width:100%;min-height:52px;border:0;border-radius:14px;background:#dcf5ac;color:#24492b;padding:14px 20px;font-weight:800;font-size:15px;box-shadow:0 3px 0 #a0c675;transition:transform .15s}.primary-button:hover{transform:translateY(-1px);background:#e7ffbc}.primary-button:active{transform:translateY(2px)}.start-footnote{display:block;color:#92bbc4;margin-top:17px;font-size:11px}.panel-overlay{position:absolute;inset:0;z-index:10;background:#022e4bb3;backdrop-filter:blur(10px);display:flex;justify-content:center;align-items:center;padding:24px;overflow:auto}.game-panel{background:#f7faef;border:1px solid #fff7;border-radius:24px;color:#244b45;width:100%;padding:28px;text-align:center;box-shadow:0 15px 55px #00284066}.game-panel h2{font-size:27px;letter-spacing:-1px;margin:13px 0 10px}.game-panel p{font-size:13px;line-height:1.7;color:#708780}.game-panel .eyebrow{font-size:10px}.game-panel .word-hero{height:145px;object-fit:contain;max-width:100%;filter:drop-shadow(0 9px 9px #255d4415);margin:12px 0 0}.game-panel .big-word{font-size:38px;display:block;letter-spacing:-1px;margin-bottom:9px}.game-panel .primary-button{margin-top:16px}.secondary-button{width:100%;margin-top:10px;padding:12px 14px;border:1px solid #d4dfcc;border-radius:12px;background:transparent;font-size:13px;font-weight:650}.tutorial-dots{display:flex;gap:6px;justify-content:center;margin-top:17px}.tutorial-dots i{width:6px;height:6px;border-radius:50%;background:#d0ddc9}.tutorial-dots i.active{width:19px;background:#609274;border-radius:4px}.panel-audio{border:0;background:#e8f0df;border-radius:12px;padding:9px 15px;font-size:13px}.panel-stat{display:flex;gap:10px;margin:20px 0}.panel-stat>div{flex:1;background:#eaf1e2;border-radius:14px;padding:15px 4px}.panel-stat strong{display:block;font-size:27px}.panel-stat span{font-size:10px;color:#6c8175}.review-list{display:flex;justify-content:center;gap:12px;margin:14px 0}.review-list button{border:0;border-radius:12px;background:#eaf1e2;padding:8px 10px;font-size:12px}.review-list img{display:block;height:39px;width:43px;object-fit:contain;margin:0 auto 4px}.details{padding-top:18px}.details-heading h2{font-size:26px;line-height:1.4;font-weight:750;letter-spacing:-1px;margin:13px 0 12px}.details-heading p{font-size:13px;line-height:1.85;color:#819089;max-width:260px}.word-collection{margin-top:32px}.section-heading{display:flex;align-items:center;justify-content:space-between}.section-heading h3,.how-to h3{font-size:14px;font-weight:750;margin:0}.section-heading>span{font-size:11px;color:#718371;padding:4px 7px;border-radius:6px;background:#e5ece0}.vocab-list{margin-top:16px;display:flex;flex-direction:column;gap:8px}.vocab-item{width:100%;display:flex;gap:15px;align-items:center;text-align:left;padding:9px 12px 9px 8px;background:#fff9;border:1px solid #e1e8de;border-radius:15px}.vocab-picture{width:52px;height:52px;background:#ebf0e4;border-radius:11px;display:grid;place-items:center;flex-shrink:0}.vocab-picture img{width:43px;height:43px;object-fit:contain}.vocab-item strong{font-size:16px;display:block}.vocab-item small{font-size:11px;display:block;color:#8a9a8d;margin-top:2px}.vocab-audio{margin-left:auto;font-size:12px;letter-spacing:-2px;color:#7c9987}.how-to{margin-top:31px;padding-top:24px;border-top:1px solid var(--border)}.how-to>div{display:flex;gap:12px;align-items:baseline;margin-top:13px}.how-to>div>span{font-size:10px;font-weight:750;color:#8aa08d}.how-to p{font-size:12px;color:#71877b;line-height:1.65;margin:0}kbd{border:1px solid #d8e0d4;border-radius:4px;padding:1px 5px;font-size:11px}.best-card{margin-top:27px;border-radius:15px;background:#eaf0e2;padding:16px 19px}.best-card>span{font-size:11px;color:#6f856c}.best-card>strong{display:block;font-size:25px;margin-top:4px;letter-spacing:-.5px}.best-card small{font-size:12px;font-weight:500;letter-spacing:0}.best-card p{font-size:10px;color:#8b9b81;margin:7px 0 0}.prototype-note{font-size:10px;line-height:1.75;color:#8f9c92;margin-top:17px}footer{height:49px;display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#95a293}dialog{border:1px solid #e0e8d7;max-width:390px;width:calc(100% - 32px);border-radius:23px;padding:35px;color:#244b45;background:#f7faef;box-shadow:0 20px 100px #102f3866}dialog::backdrop{background:#092e4277;backdrop-filter:blur(6px)}dialog h2{font-size:26px;line-height:1.3;letter-spacing:-1px}dialog p{font-size:14px;line-height:1.8;color:#6c8177}.dialog-close{position:absolute;right:13px;top:10px;border:0;background:transparent;font-size:27px;color:#789181}dialog .primary-button{margin-top:14px}
@media(min-width:1550px){main{padding:0 60px}.play-layout{gap:65px;grid-template-columns:minmax(400px,560px) minmax(250px,310px)}.game-frame{height:min(860px,calc(100svh - 139px))}}
@media(max-width:1180px){.app-shell{grid-template-columns:205px minmax(0,1fr)}.sidebar{padding:28px 14px}.sidebar-intro{margin-top:40px}.sidebar h1{font-size:17px}.world{gap:8px;padding:14px 8px}.world small{font-size:10px}.world>span:last-child{display:none}main{padding:0 25px}.play-layout{gap:25px;grid-template-columns:minmax(310px,470px) minmax(205px,240px)}.details-heading h2{font-size:23px}.details{padding-top:8px}.start-content h2{font-size:36px}}
@media(max-width:970px){.app-shell{grid-template-columns:190px minmax(0,1fr)}.details{display:none}.play-layout{display:block;max-width:500px;margin:auto}.game-frame{min-height:530px}.topbar{max-width:500px;margin:auto}footer{max-width:500px;margin:auto}footer>span:last-child{display:none}}
@media(max-width:640px){body{background:#063450}.app-shell{display:block}.sidebar{display:none}main{padding:0}.topbar{position:absolute;top:0;left:0;right:0;height:calc(64px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 18px 0;max-width:none;z-index:12;background:#052e4900;pointer-events:none}.topbar>*{pointer-events:auto}.mobile-brand{display:block;color:#e2f4e3;font-size:23px;font-weight:800;letter-spacing:-1px}.breadcrumb{display:none}.install-button{border-color:#ffffff35;color:#d0eceb;font-size:11px;padding:6px 10px;background:#042d4644;backdrop-filter:blur(8px)}.install-button span{font-size:17px}.play-layout{max-width:none}.game-frame{border-radius:0;height:100svh;min-height:500px;width:100%;box-shadow:none}.hud{top:calc(74px + env(safe-area-inset-top,0px));left:20px;right:20px}.flight-progress{top:calc(133px + env(safe-area-inset-top,0px));left:24px;right:24px}.start-overlay{padding:0 34px max(73px,calc(58px + env(safe-area-inset-bottom,0px)))}.start-content h2{font-size:42px}.start-content p{font-size:14px}.move-controls{bottom:max(22px,env(safe-area-inset-bottom,0px));left:25px;right:25px}.target{top:65%}.target strong{font-size:28px}footer{display:none}.panel-overlay{padding:100px 23px 35px}.game-panel{max-width:360px;padding:25px}.game-frame.playing~*{display:none}body.in-flight .topbar{visibility:hidden}body.in-flight .hud{top:calc(24px + env(safe-area-inset-top,0px))}body.in-flight .flight-progress{top:calc(81px + env(safe-area-inset-top,0px))}}
@media(max-height:680px) and (max-width:640px){.start-content h2{font-size:34px}.start-overlay{padding-bottom:50px}.start-content p{margin-bottom:15px;font-size:12px}.start-content h2{margin:13px 0 10px}.game-panel{padding:18px}.game-panel .word-hero{height:92px}.game-panel h2{font-size:22px}.game-panel .big-word{font-size:30px}.panel-overlay{padding-top:65px}.game-panel p{font-size:12px}.game-panel .primary-button{margin-top:10px}.panel-stat{margin:12px 0}.start-footnote{margin-top:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

/* The bottom hint remains a usable touch surface; buttons keep their clicks. */
.move-controls{pointer-events:none}.move-controls button{pointer-events:auto}canvas{user-select:none;-webkit-user-select:none;cursor:grab}canvas:active{cursor:grabbing}body.in-flight{overscroll-behavior:none}

/* Chapter map and a clear, compact prompt leave the swim corridor open. */
.game-frame{touch-action:auto}.game-frame canvas{touch-action:none}.start-overlay,.panel-overlay{touch-action:pan-y;overscroll-behavior:contain}
.start-overlay{padding:100px 24px 48px;overflow-y:auto;background:linear-gradient(#022f4840,#032f4bec 35%,#032c48fa)}
.start-content{margin-top:auto}.start-content h2{font-size:36px;margin:14px 0 10px}.start-content .chapter-intro{font-size:14px;line-height:1.5;margin:0 0 16px}.pill{font-size:11px;letter-spacing:1.2px}
.chapter-progress{text-align:left;font-size:13px;color:#cee8df;margin:0 0 15px}.chapter-progress .progress-track{margin-top:8px;height:5px}.chapter-progress i{transition:width .3s}
.lesson-map{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:17px}.lesson-stop{display:flex;align-items:center;gap:8px;min-height:64px;padding:10px 9px;background:#ffffff0b;border:1px solid #a7d4db33;border-radius:12px;color:#d7eff1;text-align:left}.lesson-stop strong{display:block;font-size:13px;font-weight:650;line-height:1.3}.lesson-stop small{display:block;font-size:11px;color:#a6c9cb;margin-top:5px}.stop-number{font-size:15px;color:#a9d5d4}.lesson-stop.selected{border-color:#d9f5ac;background:#a5d98021}.lesson-stop.complete .stop-number{color:#dcf5ac}.lesson-stop:disabled{cursor:default;opacity:.48}.home-links{display:flex;justify-content:center;gap:12px;margin-top:15px}.home-links button{border:0;background:transparent;color:#d2ecea;padding:7px 0;font-size:13px;text-decoration:underline;text-underline-offset:4px}.start-footnote{font-size:12px;margin-top:9px}
.game-frame.playing .vignette{background:linear-gradient(#032c53e6, #032c539e 120px,transparent 205px,transparent 80%,#002a4750)}
.target{top:119px;transform:translateX(-50%);display:flex;align-items:center;gap:9px}.target-caption{font-size:11px;margin:0}.target button{padding:6px 15px 8px 12px;min-height:46px}.target strong{font-size:25px;letter-spacing:-.3px}.target svg{width:21px}.world-title span{font-size:10px;letter-spacing:1px}.flight-progress{font-size:12px}.feedback{top:70%;font-size:21px}.correction{position:absolute;top:37%;left:50%;transform:translateX(-50%);z-index:4;width:210px;text-align:center;pointer-events:none;background:#063453e8;border:1px solid #aff2e655;border-radius:22px;padding:14px;color:#fff;box-shadow:0 12px 40px #012c4b55}.correction span{display:block;color:#d9eeda;font-size:12px}.correction img{display:block;width:110px;height:110px;object-fit:contain;margin:6px auto}.correction strong{font-size:25px}.move-controls span{font-size:12px}.panel-overlay{align-items:flex-start;padding-top:80px}.game-panel{margin:auto 0}.game-panel p,.game-panel .secondary-button{font-size:14px}.game-panel .eyebrow{font-size:11px}.review-list{flex-wrap:wrap;gap:6px}.review-list button{font-size:12px;flex:0 0 calc(33% - 6px)}.game-panel .free-note{font-size:12px;margin-bottom:0}.collection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:18px}.collection-grid button{min-width:0;padding:9px 3px;background:#e8efdf;border:1px solid #d9e4cc;border-radius:12px}.collection-grid img{display:block;width:64px;height:64px;object-fit:contain;margin:auto}.collection-grid strong{font-size:12px;display:block;overflow-wrap:anywhere}.collection-grid small{font-size:10px;display:block;margin-top:5px;color:#6b8068}.course-roadmap{text-align:left;border-left:2px solid #a5c285;padding-left:15px;margin:24px 0}.course-roadmap p{margin:8px 0 22px;line-height:1.9}
@media(max-width:640px){.start-overlay{padding:145px 22px max(52px,calc(35px + env(safe-area-inset-bottom,0px)))}.start-content{max-width:420px;margin-left:auto;margin-right:auto}.start-content h2{font-size:37px}.target{top:calc(113px + env(safe-area-inset-top,0px))}.panel-overlay{padding:75px 20px 30px}.lesson-stop{min-height:65px}.home-links button{min-height:40px}.collection-grid strong{font-size:13px}}
@media(max-height:730px){.start-content h2{font-size:29px;line-height:1.1;margin:10px 0}.start-content .chapter-intro{display:none}.start-overlay{padding-top:140px}.lesson-stop{min-height:56px}.lesson-stop strong{font-size:12px}.chapter-progress{margin-bottom:12px}.start-footnote{display:none}.home-links{margin-top:9px}.game-panel{padding:20px}.game-panel .word-hero{height:100px}}
.lesson-stop strong{font-size:14px}.lesson-stop small{font-size:12px}.collection-grid strong{font-size:14px}.collection-grid small{font-size:11px}.home-links button:disabled{cursor:wait;opacity:.5}
@media(max-height:730px){.lesson-stop strong{font-size:13px}.lesson-stop{min-height:62px}.start-overlay{align-items:flex-start}.start-content{margin-top:0}}

.tutorial-header{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:6px;margin-bottom:4px}.tutorial-header .eyebrow{line-height:1.5;letter-spacing:1.2px}.tutorial-back{display:grid;place-items:center;width:44px;height:44px;padding:10px;border:1px solid #d4dfcc;border-radius:50%;background:#eaf1e2;color:#244b45}.tutorial-back svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.tutorial-back:hover{background:#dfeccd}

/* The flight bar changes without triggering document layout on each frame. */
.boss-stop{grid-column:1/-1;min-height:72px;background:#f8d89512;border-color:#eccc9255}.boss-map-image{width:50px;height:46px;flex:none}.boss-map-image img{width:100%;height:100%;object-fit:contain}.boss-map-star{margin-left:auto;color:#efd69b;font-size:25px}.boss-word{position:absolute;z-index:4;top:122px;left:50%;transform:translateX(-50%);text-align:center;max-width:calc(100% - 32px);pointer-events:none}.boss-word>span{display:block;font-size:10px;font-weight:800;letter-spacing:1.8px;color:#d6ede4;margin-bottom:8px}.boss-word-row{display:flex;align-items:center;gap:9px}#boss-letters{display:flex;gap:5px}.boss-slot{display:grid;place-items:center;width:32px;height:39px;background:#073653e8;border:1px solid #a2dddd88;border-bottom:3px solid #8cc9c0;border-radius:8px;color:#add4d2;font-size:25px;font-weight:800;line-height:1}.boss-slot.open{color:#224637;background:#dff7af;border-color:#e5ffc0;animation:letter-open .35s ease-out}.boss-slot.pending{border-color:#f9d48a;box-shadow:0 0 10px #ffd48055}#boss-speak{pointer-events:auto;flex:none;width:40px;height:40px;border:1px solid #ffffff50;border-radius:50%;background:#063e51e0;color:#e4f0d4;font-size:23px}.boss-mode.playing .vignette{background:linear-gradient(#042b48f5,#052e48ad 175px,transparent 270px,transparent 80%,#032c4866)}.office.boss-mode .boss-slot{background:#254b3ee8}.office.boss-mode .boss-slot.open{background:#dff7af}.boss-mode .feedback{font-size:18px;top:72%}.boss-rules{display:grid;gap:9px;text-align:left;padding:14px;background:#e9f0df;border-radius:13px;font-size:13px;line-height:1.5}.game-panel .boss-portrait{height:130px}.boss-word-row{justify-content:center}@keyframes letter-open{50%{transform:translateY(-5px) scale(1.15)}}
@media(max-width:640px){.boss-word{top:calc(120px + env(safe-area-inset-top,0px))}}
@media(max-width:370px){.boss-slot{width:29px}#boss-letters{gap:4px}.boss-word-row{gap:6px}}
@media(prefers-reduced-motion:reduce){.boss-slot.open{animation:none}}
#progress-fill{width:100%;transform:scaleX(0);transform-origin:left;transition:transform .08s linear;will-change:transform}

.topic-tabs{display:flex;gap:6px;justify-content:center;margin:0 0 16px}.topic-tabs button{min-height:40px;padding:7px 20px;border-radius:24px;border:1px solid #ffffff40;background:#ffffff0b;color:#d9ede7}.topic-tabs button.selected{background:#dff4b8;color:#234d42;border-color:#dff4b8}.topic-stop{display:flex;width:100%;align-items:center;justify-content:space-between;border:1px solid #cbd8c1;border-radius:14px;padding:14px;margin-top:12px;background:#ecf2e4;color:#244b45;text-align:left}.topic-stop small{display:block;font-size:12px;margin-top:5px;color:#71877a}.game-frame.office{background:#658f80}.office .start-overlay{background:linear-gradient(#315b4440,#244b3aeb 35%,#1c3b32fa)}.office.playing .vignette{background:linear-gradient(#183e3be6,#1f51459e 120px,transparent 205px,transparent 80%,#113e2b40)}.office .target button{background:#235243ed}.office .circle-button,.office .move-controls button{background:#3a735688}.office .world-title strong{color:#fff6d9}

/* Sound belongs to the header, outside the scrolling lesson map. */
.topbar-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.topbar-actions .install-button{min-height:44px}.sound-button{display:grid;place-items:center;width:44px;height:44px;flex:none;padding:10px;border:1px solid #d9e3d9;border-radius:12px;background:transparent;color:#456258}.sound-button svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.sound-off,.sound-button[aria-pressed="false"] .sound-waves{display:none}.sound-button[aria-pressed="false"] .sound-off{display:block}
@media(max-width:640px){.sound-button{border-color:#ffffff35;background:#042d4644;color:#d0eceb;backdrop-filter:blur(8px)}.sound-button[aria-pressed="true"]{color:#e0f6ae}}

/* Hide the install action before JavaScript starts in a Home Screen app. */
@media(display-mode:standalone){#install-button{display:none}}

/* Flight above the clouds uses the same readable HUD with a lighter world. */
.game-frame.sky{background:#a1dced url('./assets/sky-background.webp') center bottom/100% auto}.sky.playing .vignette{background:linear-gradient(#342866d9,#5664a77a 120px,transparent 210px,transparent 80%,#596fbf30)}.sky .target button{background:#493578ef}.target button:disabled{opacity:1;cursor:default}.sky .circle-button,.sky .move-controls button{background:#735cc199}.skin-preview.sky{background:linear-gradient(#e4f8ff,#eee1ff)}

/* Warm indoor worlds keep objects readable against the floor. */
.indoor{background:#f4dfbf}.indoor .vignette{background:linear-gradient(#3b285ab8,transparent 32%,transparent 75%,#50366877)}
.indoor .target button{background:#57348ded}.indoor .water-light{opacity:.18}
.indoor.boss-mode.playing .vignette{background:linear-gradient(#422954f5,#422954aa 175px,transparent 290px,transparent 80%,#42295455)}
.indoor .boss-slot{background:#583582ee}.indoor .boss-slot.open{background:#e2f8af;color:#344b2a}
.boss-slot{width:var(--slot-width,32px);font-size:var(--slot-font,25px);flex:none}
.game-panel .word-context{font-size:15px;line-height:1.4;color:#73539b;margin:8px 0 14px}

#flight-score{display:inline-flex;align-items:center;gap:5px;color:#fff2bd}#flight-coin-icon{width:22px;height:22px;flex:none;overflow:visible}#flight-coins{min-width:3ch;text-align:right;font-variant-numeric:tabular-nums;font-weight:800}

/* A broad noun is learned through several equally valid examples. */
.object-examples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:20px 0}
.object-example{position:relative;min-width:0;padding:10px 4px;border:2px solid #d8c8f3;border-radius:20px;background:#f3edff;color:#58407e;font:inherit;font-weight:700;cursor:pointer}
.object-example img{display:block;width:100%;height:clamp(66px,18vw,110px);object-fit:contain;margin-bottom:8px}
.object-example.selected{border-color:#9060e4;background:#e4d6ff}
.object-example i{position:absolute;top:5px;right:8px;color:#6c40b8;font-style:normal}
.object-example:focus-visible{outline:3px solid #9060e4;outline-offset:3px}

.purchase-progress{border:2px solid #dfcdf4;border-radius:24px;padding:24px;color:#4b3072;background:#fffaff;max-width:80vw}.purchase-progress::backdrop{background:#21143388}.payment-notice{padding:16px;border-radius:20px;background:#f2eaff;margin-bottom:16px}.payment-notice p{margin:0 0 12px}