:root{--blue:#2188f6;--sky:#9ce2ff;--pink:#ff5f9e;--purple:#8d5cf6;--yellow:#ffc83d;--green:#58d889;--ink:#17335e;--white:#fff;--shadow:0 18px 45px rgba(36,80,142,.18);font-family:'Anuphan','Sarabun',sans-serif;color:var(--ink)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:linear-gradient(#8bd9ff 0,#e6f8ff 38%,#f8fbff 100%);overflow-x:hidden}a{text-decoration:none;color:inherit}button,input{font:inherit}.sky{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}.cloud{position:absolute;width:180px;height:55px;border-radius:60px;background:#fff9;filter:blur(.3px);animation:drift 20s linear infinite}.cloud:before,.cloud:after{content:"";position:absolute;background:inherit;border-radius:50%}.cloud:before{width:75px;height:75px;left:35px;bottom:10px}.cloud:after{width:95px;height:95px;right:23px;bottom:5px}.c1{top:12%;left:-200px}.c2{top:58%;left:-260px;animation-duration:29s;animation-delay:-7s;transform:scale(.7)}.spark{position:absolute;color:#fff6a8;font-size:26px;animation:twinkle 2s ease-in-out infinite}.s1{top:20%;left:12%}.s2{top:17%;right:10%;animation-delay:.7s}@keyframes drift{to{transform:translateX(calc(100vw + 450px))}}@keyframes twinkle{50%{opacity:.25;transform:scale(.7)}}.page{width:min(1180px,calc(100% - 32px));margin:auto;min-height:calc(100vh - 150px);padding:30px 0 60px}.topbar{position:sticky;top:10px;z-index:20;margin:10px auto 0;width:min(1180px,calc(100% - 32px));min-height:68px;padding:10px 18px;display:flex;align-items:center;gap:28px;background:#ffffffdf;border:1px solid #fff;border-radius:22px;box-shadow:0 10px 35px #27639b20;backdrop-filter:blur(18px)}.brand-mini{display:flex;align-items:center;gap:10px;font-size:20px}.brand-mini span{display:grid;place-items:center;width:44px;height:44px;border-radius:15px;background:#e8f4ff}.topbar nav{display:flex;gap:20px;margin-left:auto;font-weight:700}.topbar nav a:hover{color:var(--blue)}.plain{border:0;background:#eff5fc;border-radius:12px;padding:10px 14px;color:var(--ink);cursor:pointer}.hero{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;min-height:670px;gap:20px}.eyebrow{font-size:13px;letter-spacing:.1em;font-weight:800;color:#2779d5}.hero h1{margin:12px 0;line-height:.95}.hero h1 span{display:block;font-size:clamp(52px,7vw,94px);font-weight:800;color:#ff4f91;text-shadow:0 5px 0 #fff,0 9px 0 #794acb,0 16px 28px #1e70af36}.hero h1 small{display:block;margin-top:26px;padding:12px 20px;width:max-content;max-width:100%;font-size:clamp(22px,3vw,38px);color:#fff;background:linear-gradient(135deg,#248af8,#7f5cf4);border-radius:20px;box-shadow:0 7px 0 #3b3fa5}.hero p{font-size:20px;font-weight:600}.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}.btn{border:0;border-radius:18px;padding:14px 22px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;box-shadow:inset 0 2px 1px #ffffffb0,0 6px 0 color-mix(in srgb,currentColor 35%,#27336b),0 12px 24px #315c9626;transition:.18s transform,.18s filter;color:#fff}.btn:hover{transform:translateY(-3px);filter:saturate(1.12)}.btn:active{transform:translateY(4px);box-shadow:inset 0 2px 1px #ffffff80,0 2px 0 color-mix(in srgb,currentColor 35%,#27336b)}.btn-xl{padding:18px 28px;font-size:19px}.btn-pink{background:linear-gradient(#ff87b5,#f13c85)}.btn-blue{background:linear-gradient(#52b9ff,#2676ef)}.btn-purple{background:linear-gradient(#b072ff,#7644ed)}.btn-yellow{background:linear-gradient(#ffe35e,#ffad1f);color:#694100}.btn-glass{background:#ffffffd9;color:#31517a}.island-stage{position:relative;height:580px}.island{position:absolute;left:8%;right:2%;bottom:65px;height:220px;background:linear-gradient(#83e15c 0 28%,#95653d 29% 61%,#6b94ab 62%);border-radius:50% 50% 45% 45% / 30% 30% 66% 66%;filter:drop-shadow(0 35px 30px #1957873d)}.island:after{content:"";position:absolute;left:10%;right:10%;bottom:-55px;height:100px;background:#6c7582;clip-path:polygon(0 0,100% 0,82% 55%,55% 100%,30% 77%);z-index:-1}.school,.tree,.book{position:absolute;font-size:90px;filter:drop-shadow(0 12px 5px #193f6030)}.school{left:32%;top:-100px}.tree{right:8%;top:-65px}.book{left:13%;top:15px}.character{position:absolute;font-size:150px;filter:drop-shadow(0 16px 10px #264e702d);animation:bob 3s ease-in-out infinite}.boy{left:-4%;bottom:145px}.girl{right:1%;bottom:140px;animation-delay:-1.4s}.badge{position:absolute;bottom:32px;left:47px;font-size:17px;color:#174385;font-weight:800;background:#fff;border-radius:4px;padding:2px 5px;z-index:2}.mascot{position:absolute;left:39%;bottom:75px;font-size:105px;animation:bob 2.6s ease-in-out infinite}.rainbow{position:absolute;width:390px;height:195px;left:18%;top:60px;border:24px solid #ff669c;border-bottom:0;border-radius:220px 220px 0 0;box-shadow:inset 0 22px #ffd84a,inset 0 44px #70d99a,inset 0 66px #5bbef8;opacity:.9}@keyframes bob{50%{transform:translateY(-12px) rotate(1deg)}}.feature-strip,.activity-grid,.admin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature-strip article{background:#ffffffd7;border:2px solid #fff;border-radius:24px;padding:20px;box-shadow:var(--shadow);display:grid;grid-template-columns:auto 1fr;column-gap:14px;font-size:34px}.feature-strip b,.feature-strip span{font-size:16px}.feature-strip span{color:#6880a0}.feature-strip article>span{grid-column:2}.login-wrap{display:grid;grid-template-columns:1fr 460px;gap:35px;align-items:center;min-height:680px}.login-art{text-align:center}.login-art h1{font-size:36px}.login-kid{font-size:180px;position:relative;display:inline-block;filter:drop-shadow(0 18px 16px #2e5f8540)}.login-kid span{position:absolute;bottom:40px;left:65px;background:#fff;padding:3px 8px;border-radius:6px;font-size:18px;font-weight:800}.card{background:#fffffff2;border:2px solid #fff;border-radius:30px;box-shadow:var(--shadow);padding:32px}.login-card{display:grid;gap:18px}.login-card h2{text-align:center;font-size:30px;margin:0}.round-icon{margin:-70px auto 0;width:82px;height:82px;display:grid;place-items:center;font-size:40px;background:linear-gradient(#fff,#eaf4ff);border-radius:28px;box-shadow:var(--shadow)}label{display:grid;gap:7px;font-weight:700}input{width:100%;padding:14px 16px;border:2px solid #dce8f5;border-radius:15px;outline:0}input:focus{border-color:#63aafa;box-shadow:0 0 0 4px #63aafa20}.alert{padding:13px 16px;background:#fff0f1;color:#bd3451;border-radius:14px;font-weight:600}.alert.info{background:#eaf6ff;color:#286497;margin-bottom:18px}.back-link{text-align:center;color:#657b97}.student-head,.teacher-title,.page-title{display:flex;justify-content:space-between;align-items:center;gap:18px;margin:20px 0 28px}.student-head h1,.teacher-title h1,.page-title h1{font-size:38px;margin:4px 0}.student-head p{margin:0}.stat-pills{display:flex;gap:12px}.stat-pills span{background:#fff;border-radius:18px;padding:14px 18px;box-shadow:var(--shadow)}.continue-card{background:linear-gradient(135deg,#fff,#f4f0ff);border-radius:28px;padding:26px;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow);border:2px solid #fff}.continue-card h2{margin:5px 0 13px}.progress{height:12px;background:#dce7f2;border-radius:20px;overflow:hidden;min-width:220px}.progress i{display:block;height:100%;background:linear-gradient(90deg,#50db85,#ffd241);border-radius:inherit;transition:width .5s}.section-title{margin:34px 0 16px}.activity-grid{grid-template-columns:repeat(4,1fr)}.activity{min-height:200px;border-radius:26px;padding:24px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:var(--shadow);transition:.2s transform}.activity:hover{transform:translateY(-6px)}.activity>span{font-size:57px;margin-bottom:auto}.activity b{font-size:21px}.activity small{opacity:.88}.pink{background:linear-gradient(145deg,#ff9bc0,#f34f91)}.green{background:linear-gradient(145deg,#7ee79c,#2cbd70)}.blue{background:linear-gradient(145deg,#76ccff,#3278ed)}.purple{background:linear-gradient(145deg,#bd8bff,#7e4be5)}.lesson-row{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.mini-lesson{background:#fff;padding:16px;border-radius:20px;text-align:center;box-shadow:0 10px 25px #32618e18}.mini-lesson span{font-size:40px;display:block}.mini-lesson b,.mini-lesson small{display:block}.circle-back{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#247bdc;font-size:24px;box-shadow:var(--shadow)}.page-title{justify-content:flex-start}.island-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.island-card{background:#fff;border-radius:28px;padding:20px;display:grid;grid-template-columns:140px 1fr;align-items:center;box-shadow:var(--shadow);border:3px solid transparent;transition:.2s}.island-card:hover{transform:translateY(-5px);border-color:#fff}.island-art{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;font-size:68px;background:linear-gradient(#9ce8ff,#67d47e 65%,#b77945 66%);box-shadow:inset 0 5px 10px #fff8,0 12px 20px #47709432}.island-card h2{margin:4px 0}.practice{max-width:900px;margin:auto}.practice-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px}.practice-head .progress{min-width:0}.word-card{margin:26px 0;display:grid;grid-template-columns:1.1fr 1fr;min-height:410px;background:#fff;border:3px solid #fff;border-radius:34px;overflow:hidden;box-shadow:var(--shadow)}.word-image{display:grid;place-items:center;background:linear-gradient(145deg,#effcff,#e8f4ff);font-size:130px}.word-image img{width:100%;height:100%;object-fit:contain;padding:20px}.word-copy{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}.word-copy h1{font-size:clamp(58px,9vw,100px);margin:10px 0;color:#173d74}.word-copy p{white-space:pre-line;font-size:22px;line-height:1.8;color:#526c8e}.practice-actions,.practice-nav{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}.practice-nav{margin-top:22px;justify-content:space-between}.pop-star{position:fixed;z-index:100;font-size:42px;animation:pop 900ms ease-out forwards}@keyframes pop{to{transform:translateY(-150px) rotate(35deg) scale(1.8);opacity:0}}.admin-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.admin-stats article{background:#fff;border-radius:24px;padding:24px;box-shadow:var(--shadow);display:grid;grid-template-columns:auto 1fr;gap:0 18px}.admin-stats span{font-size:42px;grid-row:1/3}.admin-stats b{font-size:30px}.admin-grid{grid-template-columns:repeat(2,1fr);margin-top:22px}.admin-grid a{display:grid;grid-template-columns:55px 1fr;background:#fff;border-radius:22px;padding:24px;box-shadow:var(--shadow);font-size:38px}.admin-grid b,.admin-grid span{font-size:18px}.admin-grid span{grid-column:2;color:#66809d}.table-card{background:#fff;border-radius:24px;overflow:auto;box-shadow:var(--shadow)}table{width:100%;border-collapse:collapse}th,td{padding:14px 18px;border-bottom:1px solid #e9eff6;text-align:left;vertical-align:top}th{background:#eaf5ff;color:#275783;position:sticky;top:0}.import-card{max-width:720px;margin:auto}.dropzone{border:3px dashed #8fc6f4;background:#f1f9ff;border-radius:24px;padding:42px;text-align:center;font-size:48px}.dropzone b,.dropzone span{font-size:18px}.dropzone input{margin-top:18px;background:#fff}.note{display:flex;justify-content:space-between;padding:16px 0}.empty{text-align:center;padding:100px 20px}.empty>span{font-size:100px}.bottom-nav{display:none}footer{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;background:#17335e;color:#fff;padding:25px;text-align:center;font-size:14px}
@media(max-width:800px){.page{width:min(100% - 22px,650px);padding-top:15px;padding-bottom:95px}.topbar{top:0;margin:0;width:100%;border-radius:0;padding:10px 14px}.topbar nav{display:none}.topbar form{margin-left:auto}.hero{grid-template-columns:1fr;text-align:center;min-height:auto}.hero-copy{padding-top:30px}.hero h1 small{margin-left:auto;margin-right:auto}.hero-actions{justify-content:center}.island-stage{height:450px}.character{font-size:110px}.badge{font-size:12px;left:32px;bottom:25px}.rainbow{width:300px;height:150px;left:8%}.feature-strip,.activity-grid,.admin-grid{grid-template-columns:repeat(2,1fr)}.feature-strip article:last-child{grid-column:1/-1}.login-wrap{grid-template-columns:1fr}.login-art{display:none}.login-card{margin:60px auto 0;max-width:460px}.student-head,.teacher-title{align-items:flex-start}.stat-pills{flex-direction:column}.activity{min-height:170px}.lesson-row{grid-template-columns:repeat(3,1fr)}.island-grid{grid-template-columns:1fr}.word-card{grid-template-columns:1fr;min-height:0}.word-image{height:280px}.practice-nav .btn{flex:1}.bottom-nav{position:fixed;display:flex;z-index:30;bottom:0;left:0;right:0;justify-content:space-around;padding:9px 14px calc(9px + env(safe-area-inset-bottom));background:#ffffffed;box-shadow:0 -9px 30px #224f7a24;backdrop-filter:blur(16px)}.bottom-nav a,.bottom-nav button{border:0;background:transparent;display:grid;gap:2px;place-items:center;color:#244c78;font-size:21px}.bottom-nav small{font-size:11px}footer{padding-bottom:90px}}
@media(max-width:520px){.hero h1 span{font-size:50px}.hero h1 small{font-size:20px}.island-stage{height:380px}.school{font-size:70px}.tree{font-size:65px}.book{font-size:60px}.character{font-size:84px}.mascot{font-size:70px}.rainbow{transform:scale(.75);transform-origin:left top}.feature-strip{grid-template-columns:1fr}.feature-strip article:last-child{grid-column:auto}.activity-grid{grid-template-columns:1fr 1fr;gap:10px}.activity{padding:16px;min-height:145px}.activity>span{font-size:42px}.activity b{font-size:17px}.student-head{display:block}.stat-pills{flex-direction:row;margin-top:16px}.continue-card{align-items:flex-start;gap:14px}.continue-card .progress{min-width:0}.lesson-row{grid-template-columns:repeat(2,1fr)}.island-card{grid-template-columns:100px 1fr;padding:14px}.island-art{width:84px;height:84px;font-size:46px}.admin-stats{grid-template-columns:1fr}.admin-grid{grid-template-columns:1fr}.word-copy{padding:20px}.word-copy p{font-size:18px}.practice-actions .btn{width:100%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.future{filter:saturate(.55);opacity:.78;cursor:default}.future:hover{transform:none}
.confirm-import{display:flex;justify-content:flex-end;gap:14px;margin:0 0 18px}.import-progress{max-width:650px;margin:90px auto;text-align:center;background:#fff;border:2px solid #fff;border-radius:32px;padding:45px;box-shadow:var(--shadow)}.import-progress .round-icon{margin:-85px auto 20px}.progress.big{height:20px;margin:25px 0;width:100%}.alert.success{margin-top:24px;background:#e7faee;color:#237a49}
.game-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.game-grid>a{min-height:190px;background:#fff;border:3px solid #fff;border-radius:28px;padding:24px;display:grid;grid-template-columns:85px 1fr;align-content:center;box-shadow:var(--shadow);transition:.2s}.game-grid>a:hover{transform:translateY(-5px)}.game-grid>a>span{font-size:62px;grid-row:1/3}.game-grid b{font-size:22px}.game-grid small{color:#69819d}.game-grid .adventure{grid-column:1/-1;background:linear-gradient(135deg,#fff6cf,#e9ffdf)}.game-shell{max-width:900px;margin:auto}.game-shell>header{display:flex;align-items:center;gap:18px;margin:20px 0}.game-shell>header div{flex:1}.game-shell h1{margin:3px 0}.game-shell>header>strong{font-size:22px;background:#fff;padding:12px 18px;border-radius:18px}.game-board{margin-top:22px;min-height:510px;background:#ffffffed;border:3px solid #fff;border-radius:32px;box-shadow:var(--shadow);padding:28px;text-align:center}.game-board h2{margin-top:0}.sound-orb{width:120px;height:120px;border:0;border-radius:50%;background:linear-gradient(#6dcbff,#2479ee);color:#fff;font-size:42px;box-shadow:inset 0 4px #fff7,0 8px 0 #245cb3,0 18px 30px #245cb340;cursor:pointer}.sound-orb small{display:block;font-size:12px}.picture-options,.word-options{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:26px}.picture-options button,.word-options button{position:relative;border:3px solid #dbe9f7;border-radius:22px;background:#fff;min-height:130px;padding:12px;cursor:pointer;color:var(--ink);font-size:28px;font-weight:800}.picture-options button:hover,.word-options button:hover{border-color:#58a7fa;transform:translateY(-3px)}.picture-options img{width:100%;height:150px;object-fit:contain}.game-board kbd{position:absolute;top:8px;right:8px;background:#e8f3ff;border-radius:8px;padding:4px 8px;font:700 12px inherit}.target-picture{width:220px;height:220px;margin:15px auto;display:grid;place-items:center;font-size:90px;background:#eff9ff;border-radius:26px}.target-picture img{width:100%;height:100%;object-fit:contain;padding:14px}.word-slots{min-height:65px;margin:14px auto;border:3px dashed #9dc8ec;border-radius:18px;padding:12px;font-size:34px;font-weight:800}.letter-pieces{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:18px}.letter-pieces button{min-width:58px;height:58px;border:0;border-radius:15px;background:linear-gradient(#ffef73,#ffbc28);font-size:28px;font-weight:800;box-shadow:0 5px 0 #bd7f13}.letter-pieces button:disabled{opacity:.3;box-shadow:none}.balloons{display:flex;justify-content:space-around;align-items:flex-end;min-height:270px;gap:12px}.balloons button{position:relative;width:130px;height:155px;border:0;border-radius:50% 50% 48% 48%;background:linear-gradient(145deg,#ff91b9,#ed3f80);color:#fff;font-size:24px;font-weight:800;box-shadow:inset 12px 10px 15px #fff5,0 12px 20px #244a7330;animation:balloonFloat 2.6s ease-in-out infinite;animation-delay:var(--d)}.balloons button:nth-child(2){background:linear-gradient(145deg,#73d7ff,#287bec)}.balloons button:nth-child(3){background:linear-gradient(145deg,#9aee9f,#35bd70)}.balloons button:nth-child(4){background:linear-gradient(145deg,#c794ff,#8049e9)}@keyframes balloonFloat{50%{transform:translateY(-22px)}}.stage-map{display:flex;justify-content:center;gap:20px;margin-bottom:25px}.stage-map i{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:#dfeaf4;font-style:normal;font-weight:800}.stage-map .done{background:#63da89;color:#fff}.stage-map .current{background:#ffd549;box-shadow:0 0 0 8px #ffd54942}.game-feedback{min-height:58px;margin:15px auto;text-align:center;font-size:22px;font-weight:800;padding:12px}.game-feedback.correct{color:#238353}.game-feedback.gentle{color:#b46a22}.game-finish{padding:60px 10px}.game-finish>span{font-size:58px}.game-finish .btn{margin:10px}
@media(max-width:620px){.game-grid{grid-template-columns:1fr}.game-grid .adventure{grid-column:auto}.game-grid>a{min-height:140px}.game-board{padding:18px;min-height:470px}.picture-options,.word-options{gap:10px}.picture-options img{height:110px}.balloons{gap:5px}.balloons button{width:78px;height:110px;font-size:17px}.stage-map{gap:8px}.stage-map i{width:38px;height:38px}}

/* Premium 3D landing composition */
.hero-3d{position:relative;isolation:isolate;min-height:690px;margin-top:18px;padding:58px;border:4px solid #fff;border-radius:38px;overflow:hidden;box-shadow:0 26px 70px rgba(26,74,128,.32),inset 0 0 0 2px rgba(255,255,255,.6)}.hero-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.hero-3d:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(232,250,255,.94) 0%,rgba(235,250,255,.78) 37%,rgba(255,255,255,.06) 66%);z-index:-1}.hero-3d .hero-copy{align-self:center;max-width:570px;z-index:2}.hero-3d .hero-copy p{max-width:470px;color:#294d73;text-shadow:0 2px 0 #fff}.student-showcase{position:absolute;right:3%;bottom:4%;width:min(42%,480px);margin:0;padding:9px;background:linear-gradient(145deg,#ffffffea,#ccecffdb);border:3px solid #fff;border-radius:32px;box-shadow:0 22px 55px rgba(22,55,96,.32),inset 0 2px 0 #fff;transform:rotate(1.4deg)}.student-showcase img{display:block;width:100%;border-radius:24px}.student-showcase figcaption{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);white-space:nowrap;padding:8px 17px;color:#fff;background:linear-gradient(#408dff,#285ed4);border:2px solid #fff;border-radius:999px;font-weight:800;box-shadow:0 6px 0 #193e8a}.menu-glyph{font-size:25px}.feature-3d{position:relative;margin-top:-35px;z-index:5;padding:0 28px}.feature-3d article{border:3px solid #fff;background:linear-gradient(145deg,#fff,#e8f6ff);box-shadow:0 10px 0 #b9dcf2,0 22px 35px rgba(27,76,121,.23)}.feature-icon{width:62px;height:62px;display:grid;place-items:center;border-radius:20px;color:#fff;font-size:32px;font-weight:900;box-shadow:inset 0 3px 2px #fff9,0 6px 0 rgba(44,56,110,.35)}.book-icon{background:linear-gradient(#ff8bb5,#ef3c83)}.game-icon{background:linear-gradient(#78e898,#28bc69)}.reward-icon{background:linear-gradient(#c98bff,#7844e9);color:#ffe15b}
@media(max-width:800px){.hero-3d{padding:34px 24px 330px;min-height:790px}.hero-3d:after{background:linear-gradient(180deg,rgba(236,251,255,.95) 0%,rgba(235,250,255,.76) 52%,rgba(255,255,255,.05) 75%)}.student-showcase{width:min(82%,450px);right:9%;bottom:4%}.feature-3d{margin-top:-26px;padding:0 8px}}
@media(max-width:520px){.hero-3d{padding:28px 16px 275px;min-height:690px;border-radius:28px}.hero-3d .hero-copy p{font-size:17px}.student-showcase{width:90%;right:5%;border-radius:22px}.student-showcase img{border-radius:16px}.student-showcase figcaption{font-size:12px}.feature-3d{grid-template-columns:1fr}.feature-3d article:last-child{grid-column:auto}}
.guest-inline{display:inline-flex;margin:0}.login-form{display:grid;gap:18px}.or-divider{display:flex;align-items:center;gap:12px;color:#8293a8}.or-divider:before,.or-divider:after{content:"";height:1px;flex:1;background:#dce7f2}.guest-button{width:100%}.guest-note{text-align:center;color:#71869f}.guest-alert{margin:-12px 0 22px}
.quiz-mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.quiz-mode{min-height:280px;padding:28px;border:3px solid #fff;border-radius:30px;background:#fff;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;text-align:center;transition:.2s}.quiz-mode:hover{transform:translateY(-6px)}.quiz-mode>span{font-size:72px}.quiz-mode h2{margin:10px 0}.quiz-mode p{color:#6c829d}.quiz-mode b{margin-top:auto;color:#2477db}.quiz-mode.pretest{background:linear-gradient(#fff,#ecfff2)}.quiz-mode.practice{background:linear-gradient(#fff,#fff9da)}.quiz-mode.posttest{background:linear-gradient(#fff,#f2ecff)}.quiz-note{margin-top:22px}.quiz-shell{max-width:850px;margin:auto}.quiz-shell>header{display:flex;align-items:center;gap:18px;margin:20px 0}.quiz-shell>header div{flex:1}.quiz-shell h1{margin:3px 0}.quiz-shell>header strong{background:#fff;border-radius:16px;padding:12px 16px}.quiz-board{min-height:530px;margin-top:22px;padding:30px;background:#ffffffee;border:3px solid #fff;border-radius:32px;box-shadow:var(--shadow);text-align:center}.quiz-actions{display:flex;justify-content:center;gap:14px;margin-top:24px}.oral-word{font-size:96px;font-weight:800;color:#204c87;margin:60px 0 20px;text-shadow:0 5px 0 #dcecff}.quiz-result{padding:70px 10px}.quiz-result>span{font-size:55px}.quiz-result>strong{display:block;font-size:72px;color:#277be0}.quiz-result .btn{margin:18px 6px}.quiz-loading{padding:150px 0;font-size:24px;font-weight:800}.recording-list{display:grid;gap:18px}.recording-list article{display:grid;grid-template-columns:1fr 1.2fr;gap:24px;background:#fff;border-radius:24px;padding:22px;box-shadow:var(--shadow)}.recording-list article>div{display:grid;gap:7px}.recording-list audio{width:100%;margin-top:8px}.recording-list form{display:grid;grid-template-columns:130px 1fr auto;gap:12px;align-items:end}.recording-list select{padding:14px;border:2px solid #dce8f5;border-radius:15px;background:#fff}.record-word{display:inline-flex;width:max-content;padding:7px 15px;border-radius:999px;background:#e8f4ff;color:#246cb8;font-size:22px;font-weight:800}.empty.compact{padding:50px}
@media(max-width:720px){.quiz-mode-grid{grid-template-columns:1fr}.quiz-mode{min-height:220px}.quiz-board{padding:18px}.recording-list article{grid-template-columns:1fr}.recording-list form{grid-template-columns:1fr}.oral-word{font-size:70px;margin-top:40px}}
.teacher-two-col{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.compact-form{display:grid;gap:15px;padding:24px}.compact-form h2{margin:0}.compact-form select,.student-admin-list select{width:100%;padding:14px 16px;border:2px solid #dce8f5;border-radius:15px;background:#fff;color:var(--ink)}.credential-box{display:grid;gap:7px;margin-bottom:20px;padding:20px 24px;border:2px solid #9de0b6;border-radius:22px;background:#edfff3;box-shadow:var(--shadow)}.credential-box.error{border-color:#ffb2c2;background:#fff0f3;color:#a52c4e}.credential-box code{font-size:18px;font-weight:800}.student-admin-list{display:grid;gap:14px}.student-admin-list article{display:flex;align-items:center;gap:12px;padding:17px;background:#fff;border-radius:22px;box-shadow:var(--shadow)}.student-admin-list article>form:first-child{display:grid;grid-template-columns:1.3fr 1fr auto auto;align-items:center;gap:12px;flex:1}.student-admin-list article>form:first-child>div{display:grid;gap:6px}.check{display:flex;align-items:center;gap:7px;white-space:nowrap}.check input{width:auto}.report-header>div:last-child{display:flex;gap:12px}.report-table small{display:block;color:#71869f}.achievement-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.achievement{min-height:260px;padding:24px;text-align:center;background:#fff;border:3px solid #fff;border-radius:28px;box-shadow:var(--shadow)}.achievement>span{display:block;font-size:66px}.achievement h2{margin:8px 0}.achievement p{color:#647d9a}.achievement b,.achievement small{display:block}.achievement.earned{background:linear-gradient(145deg,#fff,#fff7cd);border-color:#ffe678}.achievement.locked{filter:grayscale(.8);opacity:.7}.achievement.locked>span{filter:blur(1px)}
@media(max-width:900px){.achievement-grid{grid-template-columns:repeat(2,1fr)}.student-admin-list article>form:first-child{grid-template-columns:1fr 1fr}.teacher-two-col{grid-template-columns:1fr}}
@media(max-width:620px){.achievement-grid{grid-template-columns:1fr}.student-admin-list article{align-items:stretch;flex-direction:column}.student-admin-list article>form:first-child{grid-template-columns:1fr}.student-admin-list article>form:last-child .plain{width:100%}.report-header{display:block}.report-header>div:last-child{margin-top:15px;flex-wrap:wrap}}
@media print{body{background:#fff}.sky,.topbar,.bottom-nav,footer,.report-header .btn{display:none!important}.page{width:100%;padding:0}.report-header{margin:0 0 18px}.table-card{box-shadow:none;border:1px solid #ccd6e0}th{position:static;background:#eef3f7;color:#111}th,td{padding:9px;color:#111}}

/* 2026 storybook redesign — layered HTML UI over the existing scenic assets */
:root{--navy:#07317b;--royal:#0967e8;--cyan:#39c6ff;--sun:#ffc928;--coral:#ff4b90;--wood:#a95420;--deep-shadow:0 12px 0 rgba(20,74,127,.16),0 24px 55px rgba(18,77,133,.2)}
body{background:linear-gradient(180deg,#63c7fa 0,#dff5ff 42%,#ebffd9 100%);background-attachment:fixed;color:var(--navy)}
body:before{content:"";position:fixed;inset:0;z-index:-2;background:linear-gradient(#ffffff00 60%,#bbec9b99),url('../images/hero-island-3d.png') center/cover no-repeat;opacity:.3}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.topbar{width:min(1480px,calc(100% - 40px));min-height:78px;padding:10px 20px;border-radius:24px;border:3px solid #fff;box-shadow:0 9px 24px #27669c35;background:#f5fcfff0}
.brand-mini b{font-size:22px;color:#0d3a88}.brand-mini span{background:linear-gradient(#ffeb66,#ffad22);border:2px solid #fff;box-shadow:0 5px 0 #da791a}
.topbar nav{align-self:stretch;align-items:center;gap:4px}.topbar nav a{padding:13px 17px;border-radius:16px;font-size:16px}.topbar nav a:hover{background:#fff;box-shadow:0 5px 15px #31689b25;transform:translateY(-2px)}
.page{width:min(1480px,calc(100% - 40px));padding-top:22px}.circle-back{border:3px solid #fff;width:58px;height:58px;font-size:31px;box-shadow:0 6px 0 #83b8db,0 12px 24px #164f7d35;transition:.2s}.circle-back:hover{transform:translateX(-5px)}
.btn{border:2px solid #fff;border-radius:20px;min-height:54px;text-shadow:0 2px 2px #17437555;box-shadow:inset 0 3px 2px #ffffffa6,0 7px 0 color-mix(in srgb,currentColor 35%,#27336b),0 14px 25px #244f7d35}.progress{height:16px;border:3px solid #fff;background:#dbe6f1;box-shadow:inset 0 2px 5px #365b7b35;overflow:visible}.progress i{margin:-1px;height:12px;background:linear-gradient(90deg,#16d977,#41e59b,#fff04d);box-shadow:0 2px 7px #168b5b66}

/* Login */
.brand-mini span{overflow:hidden;padding:2px}.brand-mini span img{display:block;width:100%;height:100%;object-fit:contain}
.login-logo>span{width:112px;height:112px;margin:0 auto 4px;font-size:0!important;filter:drop-shadow(0 7px 5px #154d8d52)!important}.login-logo>span img{display:block;width:100%;height:100%;object-fit:contain}
.role-public .page:has(.login-world){width:100%;padding:0;min-height:100vh}.login-world{position:relative;min-height:100vh;padding:28px 5vw 105px;overflow:hidden;background:linear-gradient(180deg,#54c5ff1a,#fff0 50%),url('../images/hero-island-3d.png') center/cover no-repeat}.login-world:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#25a8ed1c,#fff0 42%,#46b75942);pointer-events:none}.school-badge{position:relative;z-index:2;display:flex;align-items:center;gap:13px;width:max-content;max-width:38%;padding:10px 22px;background:#ffffffdf;border:2px solid #fff;border-radius:24px;box-shadow:0 10px 25px #23669a2c}.school-badge>span{font-size:45px}.school-badge div{display:grid}.school-badge b{font-size:18px}.school-badge small{font-weight:700}.login-logo{position:relative;z-index:2;margin:-45px auto 18px;text-align:center;width:max-content;max-width:55%}.login-logo>span{display:block;font-size:42px;filter:drop-shadow(0 5px 0 #f49912)}.login-logo h1{margin:-9px 0 5px;font-size:clamp(54px,6vw,96px);line-height:1;color:#ffd13c;-webkit-text-stroke:8px #075db9;paint-order:stroke fill;text-shadow:0 5px 0 #fff,0 12px 0 #0a398c,0 22px 35px #0234675c}.login-logo b{display:inline-block;padding:9px 31px;color:#fff;font-size:clamp(20px,2vw,31px);background:linear-gradient(#42b8ff,#0865e1);border:3px solid #fff;border-radius:14px;box-shadow:0 7px 0 #16439d;transform:rotate(-1deg)}.login-logo p{margin:19px auto 0;width:max-content;padding:9px 35px;color:#fff;font-size:18px;font-weight:800;background:linear-gradient(#c26d2f,#8f4318);border:3px solid #e99c52;border-radius:10px;box-shadow:0 8px 0 #682d12}.login-characters{position:absolute;z-index:1;left:-3%;bottom:4%;width:37%;max-width:560px;filter:drop-shadow(0 24px 28px #1443695e)}.login-choice{position:relative;z-index:3;display:grid;grid-template-columns:1fr 1fr;gap:36px;width:min(830px,63%);margin:25px auto 0}.login-choice .login-form{position:relative;padding:50px 28px 27px;text-align:center;background:#fafdfff2;border:4px solid #fff;border-radius:34px;box-shadow:var(--deep-shadow)}.login-choice .login-teacher{background:#fff3f9ef}.login-choice .round-icon{position:absolute;top:-42px;left:50%;margin:0;transform:translateX(-50%);border:4px solid #fff;border-radius:50%;background:#dff4ff}.login-choice h2{margin:3px 0;color:#0c397f;font-size:25px}.login-choice p{margin:0 0 14px;color:#6680a2;font-weight:700}.login-choice input{height:54px;background:#fff;border:3px solid #d5e1ef;border-radius:16px;font-weight:700}.login-choice .btn{width:100%;margin-top:2px}.login-guest{position:relative;z-index:4;text-align:center;margin:18px auto 0}.login-guest button{border:0;border-bottom:1px dashed #174d87;background:#ffffffc7;color:#174d87;border-radius:999px;padding:8px 18px;font:700 13px inherit;cursor:pointer}.login-back{position:absolute;z-index:5;right:25px;bottom:20px;padding:8px 16px;background:#ffffffc9;border-radius:999px;font-weight:800}

/* Student home */
.dashboard-hero{position:relative;min-height:510px;overflow:hidden;border:4px solid #fff;border-radius:34px;background:url('../images/hero-island-3d.png') center/cover;box-shadow:var(--deep-shadow)}.dashboard-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#ffffff18 28%,#65d0ff24)}.dashboard-hero img{position:absolute;z-index:2;right:-2%;bottom:-13%;width:min(52%,680px);filter:drop-shadow(0 18px 22px #17497665)}.dashboard-copy{position:absolute;z-index:3;left:8%;top:10%;text-align:center}.dashboard-copy .rainbow-mark{font-size:54px}.dashboard-copy h1{margin:-5px 0 4px;font-size:clamp(60px,8vw,112px);line-height:1;color:#ffcf36;-webkit-text-stroke:8px #0753b5;paint-order:stroke fill;text-shadow:0 5px 0 #fff,0 12px 0 #0b3884}.dashboard-copy>b{display:inline-block;padding:10px 30px;color:#fff;font-size:30px;background:linear-gradient(#42bfff,#0567df);border:3px solid #fff;border-radius:18px;box-shadow:0 7px 0 #19459f}.dashboard-copy p{padding:12px 26px;color:#fff;font-size:19px;font-weight:800;text-shadow:0 2px 2px #51230c;background:linear-gradient(#b96028,#884013);border:3px solid #dc8d49;border-radius:10px;box-shadow:0 7px 0 #5d2b11}.dashboard-profile{position:relative;z-index:4;display:grid;grid-template-columns:auto 1fr 1.6fr;align-items:center;gap:18px;width:min(1050px,92%);margin:-56px auto 24px;padding:17px 24px;background:#fafffff1;border:4px solid #fff;border-radius:28px;box-shadow:var(--deep-shadow)}.profile-face{width:86px;height:86px;display:grid;place-items:center;font-size:54px;background:#dff4ff;border-radius:50%;border:3px solid #fff;box-shadow:0 7px 18px #265c8833}.dashboard-profile h2{margin:0;font-size:26px}.dashboard-profile span,.dashboard-profile small{font-weight:700}.profile-progress{position:relative;display:grid;grid-template-columns:1fr auto;gap:8px}.profile-progress .progress{grid-column:1/-1}.profile-progress em{grid-column:1/-1;text-align:right;font-style:normal;font-weight:800}.activity-home{gap:22px}.activity-home .activity{min-height:220px;border:4px solid #fff;border-radius:32px;text-align:center;align-items:center;box-shadow:inset 0 4px 4px #fff7,0 9px 0 rgba(31,65,134,.32),0 20px 35px #205c8c3d}.activity-home .activity>span{font-size:70px;filter:drop-shadow(0 8px 4px #1a467044)}.activity-home .activity b{font-size:29px;line-height:1.15;text-shadow:0 3px 2px #194b8550}.dashboard-panels{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-top:30px}.dashboard-panels>div{padding:18px 22px;background:#ffffffed;border:3px solid #fff;border-radius:25px;box-shadow:var(--shadow)}.dashboard-panels h2{margin:0 0 13px}.dashboard-panels .lesson-row{grid-template-columns:repeat(4,1fr)}.latest-reward>div{display:flex;justify-content:space-around;font-size:52px}.latest-reward p{text-align:center;font-weight:700}

/* Ten-island ocean map */
.map-title{position:relative;z-index:3;text-align:left}.wood-sign{position:relative;display:inline-block;margin:10px 0 -60px 40px;padding:16px 50px;color:#fff;text-align:center;background:linear-gradient(#c87934,#8c3f15);border:5px solid #71300e;border-radius:22px 32px 20px 28px;box-shadow:0 10px 0 #58270f,0 18px 35px #123f6950;transform:rotate(-1.5deg)}.wood-sign:before,.wood-sign:after{content:"";position:absolute;width:13px;height:13px;border-radius:50%;top:16px;background:#d8b05d;box-shadow:inset 0 2px 2px #6f410e}.wood-sign:before{left:18px}.wood-sign:after{right:18px}.wood-sign h1{margin:0;font-size:45px;line-height:1}.wood-sign b,.wood-sign span{display:block}.wood-sign b{font-size:21px;color:#ffe178}.wood-sign span{font-weight:700}.island-map{position:relative;min-height:880px;overflow:hidden;border:5px solid #fff;border-radius:38px;background:linear-gradient(#4ad4ff33,#008fdb88),url('../images/hero-island-3d.png') center/cover;box-shadow:var(--deep-shadow)}.island-map:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 20% 30%,#fff8 0 2px,transparent 3px),radial-gradient(circle at 75% 62%,#fff9 0 2px,transparent 3px);background-size:90px 70px,130px 100px;animation:sparkleSea 6s linear infinite}.ocean-waves{position:absolute;inset:0;background:repeating-radial-gradient(ellipse at 50% 55%,transparent 0 42px,#d8f8ff55 45px 48px,transparent 50px 75px);animation:oceanMove 6s ease-in-out infinite}.map-island{position:absolute;z-index:2;width:205px;text-align:center;transition:.25s;animation:islandBob 4s ease-in-out infinite}.map-island:hover{transform:translateY(-10px) scale(1.04);z-index:5}.map-island:nth-of-type(2n){animation-delay:-2s}.map-island .island-art{width:180px;height:105px;margin:auto;border-radius:50% 50% 42% 42%/30% 30% 65% 65%;background:linear-gradient(#8fea58 0 33%,#b7763d 35% 62%,#69646b 64%);box-shadow:inset 0 9px 4px #d8ff9c,0 13px 0 #42697688,0 23px 26px #064d7a55}.map-island .island-art:after{content:"";position:absolute;left:44px;right:44px;top:94px;height:44px;background:#6b6366;clip-path:polygon(0 0,100% 0,72% 100%,48% 70%,29% 100%)}.map-island .island-art i{font-style:normal;font-size:61px;filter:drop-shadow(0 8px 4px #23435555)}.island-label{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;margin:-5px -12px 0;padding:7px 10px;color:#fff;background:linear-gradient(#c87331,#914216);border:3px solid #713611;border-radius:13px;box-shadow:0 5px 0 #54280f;text-shadow:0 2px 1px #52270e}.island-label span{display:grid;place-items:center;flex:0 0 39px;height:39px;margin-left:-19px;border-radius:50%;font-size:24px;font-weight:800;background:linear-gradient(#ff62aa,#ef1575);border:3px solid #fff;box-shadow:0 3px 0 #a30e57}.island-label b{font-size:15px}.island-stars{display:flex;align-items:center;justify-content:center;gap:2px;margin:6px auto;width:165px;padding:4px 8px;background:#fff;border-radius:999px;box-shadow:0 4px 0 #8cb5c7}.island-stars em{font-style:normal;color:#ffc116;font-size:20px}.island-stars small{margin-left:auto;font-weight:800;color:#345579}.map-island.locked{filter:grayscale(.62);opacity:.82}.map-island.locked .island-art i{filter:grayscale(1)}.island-pos-1{left:42%;top:34%}.island-pos-2{left:14%;top:17%}.island-pos-3{left:51%;top:10%}.island-pos-4{right:7%;top:25%}.island-pos-5{right:17%;top:53%}.island-pos-6{left:57%;bottom:3%}.island-pos-7{left:35%;bottom:0}.island-pos-8{left:13%;bottom:8%}.island-pos-9{left:1%;top:48%}.island-pos-10{left:2%;top:7%}.map-mascot{position:absolute;z-index:4;left:40%;top:18%;font-size:92px;filter:drop-shadow(0 13px 7px #16446655);animation:bob 2.8s ease-in-out infinite}.map-mascot span{display:block;margin-top:-8px;padding:7px 13px;background:#fff;border-radius:999px;font-size:13px;font-weight:800}.map-boat{position:absolute;right:31%;top:38%;font-size:65px;animation:boatSail 12s ease-in-out infinite}@keyframes oceanMove{50%{transform:translate(12px,8px) scale(1.02)}}@keyframes islandBob{50%{translate:0 -5px}}@keyframes boatSail{50%{transform:translate(90px,30px) rotate(4deg)}}@keyframes sparkleSea{to{background-position:90px 70px,-130px 100px}}

/* Practice, games, quizzes and rewards */
.practice,.game-shell,.quiz-shell{max-width:1120px}.practice-head,.game-shell>header,.quiz-shell>header{padding:12px 18px;background:#ffffffd9;border:3px solid #fff;border-radius:24px;box-shadow:var(--shadow)}.practice-head>div{display:grid;gap:6px}.practice-layout{display:grid;grid-template-columns:1.6fr .8fr;gap:24px;margin-top:24px}.practice-layout .word-card{grid-template-columns:1fr;margin:0;min-height:570px}.practice-layout .word-copy{padding:16px}.practice-layout .word-image{height:350px}.practice-panel{display:flex;flex-direction:column;gap:18px;padding:28px;background:#fffaf2ed;border:4px solid #fff;border-radius:32px;box-shadow:var(--deep-shadow)}.practice-panel>b{text-align:center;font-size:23px}.practice-panel .btn{min-height:82px;font-size:21px}.practice-nav{justify-content:flex-start}.ribbon-title{justify-content:flex-start;padding:12px 20px;border-radius:26px;background:#ffffffc9;border:3px solid #fff;box-shadow:var(--shadow)}.ribbon-title div{display:flex;align-items:center;gap:22px}.ribbon-title div>span{padding:10px 25px;color:#fff;background:linear-gradient(#208cff,#0863dd);border-radius:18px;font-size:26px;font-weight:800;box-shadow:0 6px 0 #164ca2}.ribbon-title h1{font-size:26px}.game-grid>a{overflow:hidden;border:4px solid #fff;background:linear-gradient(145deg,#fff,#e9f8ff);box-shadow:0 8px 0 #a7c8df,0 18px 35px #28597e32}.game-grid>a:nth-child(2){background:linear-gradient(145deg,#fff,#fff2c9)}.game-grid>a:nth-child(3){background:linear-gradient(145deg,#fff,#ffe4f1)}.game-grid>a:nth-child(4){background:linear-gradient(145deg,#fff,#e9ddff)}.game-grid>a>span{filter:drop-shadow(0 8px 4px #18395a35)}.game-board,.quiz-board{background:linear-gradient(#ffffffed,#fffaf0ed),url('../images/hero-island-3d.png') center/cover;border:5px solid #fff;box-shadow:var(--deep-shadow)}.picture-options button,.word-options button{border-width:4px;box-shadow:0 7px 0 #a9c5da,0 14px 22px #25547526}.quiz-mode{border-width:4px;box-shadow:0 8px 0 #a9c7df,0 18px 35px #28597e32}.reward-summary{display:grid;grid-template-columns:1.2fr repeat(3,1fr);align-items:center;gap:10px;padding:22px 30px;background:#ffffffed;border:4px solid #fff;border-radius:32px;box-shadow:var(--deep-shadow)}.reward-summary>div:not(.reward-kid){display:grid;place-items:center;border-left:1px solid #dbe7ef}.reward-summary span{font-size:58px}.reward-summary b{font-size:34px}.reward-summary small{font-size:16px;font-weight:800}.reward-kid{text-align:center;font-size:105px;filter:drop-shadow(0 10px 5px #173b5e42)}.achievement{border-width:4px;box-shadow:0 8px 0 #a9c7df,0 18px 35px #28597e32}.achievement.earned{box-shadow:0 8px 0 #e1a51c,0 0 35px #ffe45b88}

@media(max-width:1000px){.login-logo{margin:10px auto}.school-badge{max-width:60%}.login-choice{width:min(880px,92%)}.login-characters{opacity:.42;width:55%}.dashboard-hero{min-height:440px}.dashboard-copy{left:4%}.dashboard-hero img{opacity:.68}.island-map{min-height:1040px}.island-pos-1{left:38%;top:26%}.island-pos-2{left:9%;top:14%}.island-pos-3{left:58%;top:10%}.island-pos-4{right:4%;top:35%}.island-pos-5{right:10%;top:57%}.island-pos-6{left:58%;bottom:3%}.island-pos-7{left:32%;bottom:0}.island-pos-8{left:5%;bottom:7%}.island-pos-9{left:2%;top:49%}.island-pos-10{left:35%;top:45%}.map-mascot,.map-boat{display:none}.practice-layout{grid-template-columns:1fr}.practice-panel{display:grid;grid-template-columns:repeat(2,1fr)}.practice-panel>b{grid-column:1/-1}}
@media(max-width:800px){.page{width:min(100% - 20px,700px)}.topbar{width:100%;border-width:0 0 3px;border-radius:0}.school-badge{max-width:95%;margin:auto}.login-world{padding:18px 15px 110px}.login-logo{max-width:100%}.login-logo h1{font-size:60px}.login-choice{grid-template-columns:1fr;width:min(500px,96%);gap:70px}.login-characters{display:none}.dashboard-hero{min-height:550px}.dashboard-copy{left:4%;right:4%;top:4%}.dashboard-copy h1{font-size:70px}.dashboard-copy>b{font-size:22px}.dashboard-hero img{width:82%;max-width:550px;right:9%;bottom:-5%;opacity:1}.dashboard-profile{grid-template-columns:auto 1fr;margin-top:-25px}.profile-progress{grid-column:1/-1}.activity-home{grid-template-columns:repeat(2,1fr)}.dashboard-panels{grid-template-columns:1fr}.wood-sign{margin:0 auto -30px;display:block;width:90%;padding:13px 20px}.wood-sign h1{font-size:35px}.island-map{padding:70px 15px 25px;display:grid;grid-template-columns:repeat(2,1fr);gap:40px 10px;min-height:0}.map-island{position:relative;inset:auto!important;width:auto}.map-island .island-art{width:150px}.ribbon-title div{display:block}.ribbon-title div>span{display:inline-block;font-size:20px}.reward-summary{grid-template-columns:repeat(3,1fr)}.reward-kid{grid-column:1/-1}.reward-summary>div:not(.reward-kid){border-left:0}.practice-layout .word-card{min-height:500px}}
@media(max-width:520px){.school-badge b{font-size:14px}.school-badge small{font-size:10px}.login-logo h1{font-size:45px;-webkit-text-stroke-width:6px}.login-logo b{font-size:18px}.login-choice .login-form{padding-left:18px;padding-right:18px}.dashboard-hero{min-height:470px}.dashboard-copy h1{font-size:49px;-webkit-text-stroke-width:6px}.dashboard-copy>b{font-size:16px}.dashboard-copy p{font-size:14px}.dashboard-profile{width:96%;padding:14px}.profile-face{width:66px;height:66px;font-size:40px}.activity-home{gap:12px}.activity-home .activity{min-height:170px;padding:14px}.activity-home .activity>span{font-size:48px}.activity-home .activity b{font-size:20px}.dashboard-panels .lesson-row{grid-template-columns:repeat(2,1fr)}.island-map{grid-template-columns:1fr;padding-top:60px}.map-island{margin:auto;width:220px}.practice-panel{grid-template-columns:1fr}.practice-layout .word-card{min-height:420px}.practice-layout .word-image{height:260px}.ribbon-title{padding:10px}.ribbon-title .circle-back{flex:0 0 52px}.ribbon-title h1{font-size:21px}.reward-summary{padding:18px 10px}.reward-summary span{font-size:40px}.reward-summary b{font-size:27px}.reward-summary small{font-size:12px}}

.stage-page{max-width:980px;margin:0 auto;padding:24px 16px 48px}.stage-hero{display:flex;align-items:center;gap:18px;background:linear-gradient(135deg,#eaf8ff,#fff5cf);border:3px solid #fff;border-radius:28px;padding:22px;box-shadow:0 12px 30px #2563a51c}.stage-hero h1{margin:3px 0 6px;color:#174875}.stage-hero p{margin:0;color:#526b83}.stage-island-icon{font-size:clamp(48px,8vw,78px)}.stage-alert{margin-top:18px;padding:14px 18px;border-radius:15px;background:#fff2d8;color:#8a5400;font-weight:700;border:1px solid #f6ce7d}.stage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:24px}.stage-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:15px;padding:18px;background:#fff;border:2px solid #dbeafe;border-radius:22px;color:#173b63;text-decoration:none;box-shadow:0 7px 0 #c9ddf3;transition:transform .18s ease,box-shadow .18s ease}.stage-card:not(.locked):hover{transform:translateY(-3px);box-shadow:0 10px 0 #b7d3ef}.stage-card h2,.stage-card p{margin:0}.stage-card p,.stage-card small{color:#63758a}.stage-card .progress{margin:8px 0 5px}.stage-card>b{font-size:34px;color:#2582d8}.stage-card.locked{background:#eef2f6;border-color:#d8e0e8;color:#7a8796;box-shadow:0 5px 0 #d4dbe3;cursor:not-allowed}.stage-card.locked .stage-number{background:linear-gradient(135deg,#aeb8c3,#7c8997)}.stage-card.locked .progress i{background:#aab5c0}.stage-card.locked>b{font-size:23px;color:#778493}.stage-card.passed{border-color:#91dfad}.stage-card.passed>b{color:#1e9d50}.stage-number{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#ffbd39,#ff7b4a);color:#fff;font-size:24px;font-weight:800}.stage-empty{text-align:center;margin-top:24px;padding:30px}@media(max-width:600px){.stage-hero{align-items:flex-start;flex-wrap:wrap}.stage-island-icon{order:2}.stage-hero>div{order:3;width:100%}.stage-grid{grid-template-columns:1fr}}