/* HappyTown English — app styles */
:root{
  --green:#4cc21f;--green-d:#3a9a14;--green-l:#e3f8d5;--yellow:#ffc62e;--yellow-d:#e0a100;--orange:#ff8a1f;--blue:#1cb0f6;--blue-d:#1591cc;--blue-l:#dff3ff;
  --pink:#ff6fa5;--purple:#9b6bff;--red:#ff4b4b;--red-d:#d93636;--red-l:#ffe0e0;--ink:#2b3a55;--ink2:#64708a;--bg:#f3f8fe;--card:#fff;--line:#e1eaf4;--wood:#8a4b1f;
  --r:18px;--shadow:0 6px 0 rgba(43,58,85,.08);--font:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--display:'Baloo 2','Nunito',system-ui,sans-serif;
  --ink-d:#1d2f57;--ink-warm:#7a5600;--ink-warm2:#e8730a;--ink-red:#c23b3b;--ink-blue:#1a7fe0;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
  --s1:#bcd6ef;--s2:#bcd8f2;--s3:#bfe8ff;--s4:#cfd9e4;--s5:#d5e3f1;--s6:#d9ecff;--s7:#d9efff;--s8:#dbe6f2;--s9:#e1eaf4;--s10:#e3f8d5;--s11:#e4edf7;--s12:#e6ecf3;--s13:#e6f2ff;--s14:#e8f1fb;--s15:#e9f1f9;--s16:#eaf3fb;--s17:#eaf3fd;--s18:#eaf6ff;--s19:#eafbe0;--s20:#ecffdd;--s21:#eef5fc;--s22:#eef6ff;--s23:#f0e6cd;--s24:#f2f8ff;--s25:#f4f9ff;--s26:#f4fff0;--s27:#f7fbff;--s28:#ffe9a8;--s29:#fff;--s30:#fff0c4;--s31:#fff1e0;--s32:#fff2b0;--s33:#fff4d4;--s34:#fff5d8;--s35:#fff6e0;--s36:#fff7d6;--s37:#fffbe8;--s38:#fffbea;--s39:#fffdf6;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;overscroll-behavior:none}
body{overflow:hidden;user-select:none;-webkit-user-select:none}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.15}
button{font-family:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
input,textarea{font-family:inherit;font-size:16px;color:inherit}
img{max-width:100%}
.hidden{display:none!important}
.ico{width:1.4em;height:1.4em;vertical-align:-.3em}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:50px;padding:0 22px;border-radius:16px;font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:.3px;background:var(--s29);color:var(--ink);border:2px solid var(--line);border-bottom-width:5px;transition:transform .06s,filter .15s;text-transform:none}
.btn:active{transform:translateY(3px);border-bottom-width:2px;margin-bottom:3px}
.btn.primary{background:var(--green);border-color:var(--green-d);color:#fff}
.btn.blue{background:var(--blue);border-color:var(--blue-d);color:#fff}
.btn.yellow{background:var(--yellow);border-color:var(--yellow-d);color:#5a3d00}
.btn.danger{background:var(--red);border-color:var(--red-d);color:#fff}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink2)}
.btn.small{min-height:40px;font-size:15px;padding:0 14px;border-radius:13px}
.btn.block{display:flex;width:100%}
.btn:disabled{background:var(--s12);border-color:var(--s4);color:var(--ink2);cursor:default}
.linkbtn{color:var(--blue-d);font-weight:800;padding:10px;font-size:15px}
.x{width:40px;height:40px;border-radius:50%;font-size:20px;color:var(--ink2);flex:none}
.x:hover{background:rgba(0,0,0,.06)}
.spk{width:42px;height:42px;border-radius:14px;background:var(--blue);border-bottom:4px solid var(--blue-d);font-size:19px;flex:none;line-height:1}
.spk:active{transform:translateY(2px);border-bottom-width:2px}
.spk.slow{background:var(--s29);border:2px solid var(--line);border-bottom-width:4px}
.spk.big{width:54px;height:54px;font-size:24px;border-radius:16px}
.spk.huge{width:112px;height:112px;font-size:50px;border-radius:30px;border-bottom-width:7px}

/* screens */
#app{position:fixed;inset:0;display:flex;flex-direction:column}
.screen{position:absolute;inset:0;display:none;flex-direction:column;overflow:hidden}
.screen.on{display:flex}
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.wrap{max-width:760px;margin:0 auto;padding:18px 16px calc(28px + var(--safe-b))}
.wrap.widew{max-width:1080px}

/* splash + auth */
#splash,#auth,#onboard{background:#8fd3ff url(../assets/img/bg/islands.webp) center/cover no-repeat;position:relative;isolation:isolate}
#auth:before,#onboard:before{content:'';position:absolute;inset:0;backdrop-filter:blur(7px) saturate(.9);-webkit-backdrop-filter:blur(7px) saturate(.9);background:linear-gradient(100deg,rgba(8,24,56,.72) 0%,rgba(8,24,56,.58) 40%,rgba(8,24,56,.34) 70%,rgba(8,24,56,.26) 100%)}
#onboard:before{background:rgba(8,24,56,.42)}
@media (max-width:999px){#auth:before{background:rgba(8,24,56,.5)}}
#auth>*,#onboard>*{position:relative}
#splash{align-items:center;justify-content:center;gap:18px}
#splash img{width:min(84vw,560px);filter:drop-shadow(0 12px 18px rgba(0,60,120,.35));animation:bob 2.6s ease-in-out infinite}
.ribbon{font-family:var(--display);font-weight:800;color:#fff;background:var(--orange);padding:4px 26px 2px;border-radius:12px;font-size:clamp(22px,5vw,34px);letter-spacing:6px;border-bottom:5px solid #c9650c;transform:rotate(-2deg);box-shadow:0 8px 18px rgba(0,0,0,.18)}
.loadbar{width:min(60vw,300px);height:14px;border-radius:9px;background:rgba(255,255,255,.55);overflow:hidden;border:2px solid var(--s29)}
.loadbar i{display:block;height:100%;width:30%;background:var(--green);border-radius:9px;animation:load 1.2s ease-in-out infinite}
@keyframes load{0%{margin-left:-30%}100%{margin-left:100%}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.authcard{width:min(440px,calc(100% - 28px));margin:auto;background:rgba(255,255,255,.96);border-radius:28px;padding:22px 22px 18px;box-shadow:0 18px 50px rgba(0,50,110,.3);border:3px solid var(--s29);max-height:calc(100% - 24px);overflow:auto}
.authlogo{display:flex;flex-direction:column;align-items:center;gap:0;margin-bottom:8px}
.authlogo img{width:min(78%,320px)}
.authlogo .ribbon{font-size:20px;letter-spacing:5px}
.tabs{display:flex;gap:6px;background:var(--s15);border-radius:14px;padding:4px;margin:12px 0}
.tabs button{flex:1;min-height:40px;border-radius:11px;font-family:var(--display);font-weight:800;color:var(--ink2);font-size:15px}
.tabs button.on{background:var(--s29);color:var(--ink);box-shadow:0 2px 0 rgba(0,0,0,.08)}
.field{display:block;margin:10px 0}
.field span{display:block;font-weight:800;font-size:13px;color:var(--ink2);margin:0 0 4px 4px}
.field input{width:100%;height:50px;border-radius:14px;border:2px solid var(--line);background:var(--s27);padding:0 14px;outline:none;user-select:text;-webkit-user-select:text}
.field input:focus{border-color:var(--blue);background:var(--s29)}
.err{color:var(--red-d);font-weight:800;font-size:14px;min-height:20px;margin:4px 4px 8px}
.or{display:flex;align-items:center;gap:10px;color:var(--ink2);font-size:13px;font-weight:800;margin:12px 0}
.or:before,.or:after{content:'';flex:1;height:2px;background:var(--line)}
.profiles{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 8px}
.profile{flex:none;width:86px;text-align:center;font-weight:800;font-size:13px}
.profile .ava{width:70px;height:70px;border-radius:50%;background:var(--blue-l);border:3px solid var(--s29);box-shadow:0 0 0 3px var(--blue);overflow:hidden;margin:0 auto 6px}
.profile .ava img{width:100%;height:100%;object-fit:cover;transform:scale(1.5) translateY(12%)}
.langsw{position:absolute;top:calc(12px + var(--safe-t));right:12px;z-index:5;background:rgba(255,255,255,.9);border-radius:12px;padding:6px 12px;font-weight:800;font-size:14px;border:2px solid var(--s29)}
.note{font-size:12.5px;color:var(--ink2);text-align:center;margin-top:10px;line-height:1.45}

/* onboarding */
.ob{width:min(560px,calc(100% - 24px));margin:auto;background:rgba(255,255,255,.97);border-radius:28px;padding:20px;box-shadow:0 18px 50px rgba(0,50,110,.3);border:3px solid var(--s29);display:flex;flex-direction:column;max-height:calc(100% - 20px)}
.ob h2{font-size:24px;text-align:center;margin:6px 0 4px}
.ob p.sub{text-align:center;color:var(--ink2);margin:0 0 12px;font-weight:700}
.ob .body{overflow:auto;flex:1;padding:2px}
.ob .foot{display:flex;gap:10px;margin-top:14px}
.ob .foot .btn{flex:1}
.steps{display:flex;gap:6px;justify-content:center;margin-bottom:6px}
.steps i{width:26px;height:7px;border-radius:4px;background:var(--s8)}
.steps i.on{background:var(--green)}
.opts{display:grid;gap:10px}
.opt{display:flex;align-items:center;gap:14px;text-align:left;padding:12px 14px;border-radius:18px;border:2px solid var(--line);border-bottom-width:5px;background:var(--s29);font-weight:800}
.opt .em{font-size:34px;flex:none;width:46px;text-align:center}
.opt small{display:block;color:var(--ink2);font-weight:700;font-size:13px;margin-top:2px}
.opt.sel{border-color:var(--blue);background:var(--blue-l)}
.charstage{position:relative;height:min(38vh,300px);border-radius:22px;background:linear-gradient(var(--s3),var(--s19) 70%,#c9efb0);overflow:hidden;border:2px solid var(--line)}
.charstage canvas{width:100%;height:100%;display:block}
.charname{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-family:var(--display);font-weight:800;font-size:20px;text-shadow:0 2px 0 #fff}
.thumbrow{display:flex;gap:8px;overflow-x:auto;padding:10px 2px 6px}
.thumbrow button{flex:none;width:68px;height:68px;border-radius:16px;border:2px solid var(--line);border-bottom-width:4px;background:var(--s29);overflow:hidden}
.thumbrow button img{width:100%;height:100%;object-fit:contain}
.thumbrow button.sel{border-color:var(--blue);background:var(--blue-l)}
.swatches{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:4px}
.swatches button{width:34px;height:34px;border-radius:50%;border:3px solid var(--s29);box-shadow:0 0 0 2px var(--line)}
.swatches button.sel{box-shadow:0 0 0 3px var(--blue)}

/* main layout */
#main{background:var(--bg)}
#main .col{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;position:relative}
.topbar{position:relative;z-index:20;display:flex;align-items:center;gap:10px;padding:calc(10px + var(--safe-t)) 14px 8px;background:var(--bg)}
#main.inworld .topbar{position:absolute;left:0;right:0;top:0;background:none;pointer-events:none}
.topbar>*{pointer-events:auto}
.pill{display:flex;align-items:center;gap:10px;background:var(--s29);border-radius:22px;padding:7px 10px 7px 8px;box-shadow:0 6px 20px rgba(24,52,100,.16),0 0 0 1px rgba(24,52,100,.05);text-align:left;min-width:0}
.pill.me{flex:0 1 330px}
.pill .ava{width:50px;height:50px;border-radius:50%;background:var(--blue-l);overflow:hidden;flex:none;box-shadow:0 0 0 3px var(--blue)}
.pill .ava img{width:100%;height:100%;object-fit:cover;transform:scale(1.55) translateY(12%)}
.pill .who{min-width:0;flex:1}
.pill .who b{display:block;font-family:var(--display);font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.15;color:var(--ink-d)}
.pill .who small{display:block;color:var(--ink2);font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lvrow{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--ink2);white-space:nowrap}
.lvbar{flex:1;max-width:150px;min-width:40px;height:8px;border-radius:5px;background:var(--s11);overflow:hidden}
.lvbar i{display:block;height:100%;background:linear-gradient(90deg,#ffb020,#ffc62e);border-radius:5px}
.chevbtn{width:38px;height:38px;border-radius:50%;background:var(--s29);box-shadow:0 2px 8px rgba(24,52,100,.16);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;color:var(--ink-d);flex:none;line-height:1;padding-bottom:3px}
.pill.stats{margin-left:auto;gap:2px;padding:6px 8px;flex:none}
.pill.stats button{display:flex;align-items:center;gap:6px;font-family:var(--display);font-weight:800;font-size:18px;color:var(--ink-d);padding:6px 12px;border-radius:16px}
.pill.stats button:hover{background:var(--s21)}
.pill.stats .ico{width:30px;height:30px}
.roundbtn{position:relative;width:56px;height:56px;border-radius:20px;background:var(--s29);box-shadow:0 6px 20px rgba(24,52,100,.16),0 0 0 1px rgba(24,52,100,.05);display:flex;align-items:center;justify-content:center;flex:none}
.roundbtn:active,.sidebtn:active,.pill.me:active,.pill.district:active{transform:translateY(2px)}
.svgico{display:block;width:30px;height:30px}.svgico svg{width:100%;height:100%;display:block}
.roundbtn .dot,.navbtn .dot{position:absolute;top:9px;right:10px;width:13px;height:13px;border-radius:50%;background:var(--red);border:2.5px solid var(--s29)}
.tabsbody{position:relative;flex:1;min-height:0}
.tab{position:absolute;inset:0;display:none;flex-direction:column}
.tab.on{display:flex}
.nav{display:flex;background:var(--s29);border-top:2px solid var(--line);padding:4px 4px calc(4px + var(--safe-b));z-index:21}
.navlogo,.promo{display:none}
.navbtn{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 2px;border-radius:14px;font-family:var(--display);font-weight:800;font-size:12px;color:var(--ink-d)}
.navbtn .ico{width:30px;height:30px;transition:transform .15s}
.navbtn.on{color:var(--ink-blue);background:var(--s6)}
.navbtn.on .ico{transform:scale(1.12)}
@media (min-width:900px){
  #main{flex-direction:row!important}
  .nav{flex-direction:column;width:250px;border-top:0;padding:16px 18px 18px;gap:8px;justify-content:flex-start;order:-1;background:linear-gradient(180deg,var(--s29) 0%,var(--s25) 45%,var(--s13) 100%);box-shadow:4px 0 24px rgba(24,52,100,.08)}
  .navlogo{display:flex;flex-direction:column;align-items:center;margin:0 0 14px;text-decoration:none}
  .navlogo img{width:100%;max-width:210px;display:block;filter:drop-shadow(0 6px 8px rgba(24,52,100,.18))}
  
  .navbtn{flex:none;flex-direction:row;gap:14px;font-size:19px;padding:11px 16px;justify-content:flex-start;border-radius:18px}
  .navbtn .ico{width:40px;height:40px}
  .navbtn:hover{background:var(--s22)}
  .promo{display:block;margin-top:auto;border-radius:24px;overflow:hidden;background:var(--s29);box-shadow:0 8px 22px rgba(24,52,100,.14);text-align:left}
  .promoart{height:128px;background-size:cover;background-position:center;position:relative;border-radius:24px 24px 0 0}
  .promoart img{position:absolute;bottom:-4px;left:50%;height:124px;transform:translateX(-60%);filter:drop-shadow(0 6px 6px rgba(0,30,80,.25))}
  .promoart img.pet{height:66px;transform:translateX(38%);bottom:0}
  .promotxt{display:flex;align-items:center;gap:8px;padding:10px 12px 12px 16px}
  .promotxt b{flex:1;font-family:var(--display);font-size:16px;line-height:1.2;color:var(--ink-blue)}
  .promotxt i{width:40px;height:40px;border-radius:50%;background:#1a8cf0;color:#fff;font-style:normal;font-weight:800;font-size:20px;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 4px 0 #0f6fc4}
}
@media (min-width:900px) and (max-height:700px){.promoart{height:84px}.promoart img{height:84px}.promoart img.pet{height:46px}.navbtn{padding:8px 16px}.navbtn .ico{width:34px;height:34px}.navlogo img{max-width:165px}}
@media (max-width:620px){
  .topbar{gap:6px;padding-left:8px;padding-right:8px}
  .pill.me{flex:1 1 auto;padding:5px 8px 5px 6px;gap:7px;border-radius:18px}.pill .ava{width:38px;height:38px}.pill.me .who b{font-size:14.5px}.pill.me .chevbtn{display:none}.lvrow{font-size:11.5px;gap:5px}
  .pill.stats{padding:4px 4px;border-radius:18px}.pill.stats button{font-size:14.5px;padding:5px 5px;gap:3px}.pill.stats .ico{width:21px;height:21px}
  .roundbtn{width:42px;height:42px;border-radius:15px}.svgico{width:22px;height:22px}.roundbtn .dot{top:6px;right:6px}
}
@media (max-width:400px){.pill.stats button:first-child{display:none}}

/* world tab */
#worldcv{position:absolute;inset:0;width:100%;height:100%;display:block;background:#9fd8ff;touch-action:none;filter:saturate(1.3) contrast(1.05)}
.whud{position:absolute;pointer-events:none;inset:0}
.whud>*{pointer-events:auto}
.pill.district{position:absolute;left:14px;top:calc(84px + var(--safe-t));width:min(330px,calc(100% - 100px));padding:8px 10px}
.dico{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex:none}
.dico .ico{width:42px;height:42px}
.wside{position:absolute;right:14px;top:calc(84px + var(--safe-t));display:flex;flex-direction:column;gap:12px}
.sidebtn{width:84px;padding:10px 4px 8px;border-radius:22px;background:var(--s29);box-shadow:0 6px 20px rgba(24,52,100,.16),0 0 0 1px rgba(24,52,100,.05);display:flex;flex-direction:column;align-items:center;gap:4px;font-family:var(--display);font-weight:800;font-size:14px;color:var(--ink-d)}
.sidebtn .ico,.sidebtn .svgico{width:44px;height:44px}
.nearcard{position:absolute;left:14px;bottom:calc(16px + var(--safe-b));width:min(560px,calc(100% - 28px));background:var(--s29);border-radius:28px;padding:14px;display:flex;align-items:center;gap:14px;box-shadow:0 12px 34px rgba(24,52,100,.22),0 0 0 1px rgba(24,52,100,.05);animation:rise .3s}
.nearcard .num{width:68px;height:68px;border-radius:20px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--display);font-weight:800;font-size:28px;flex:none;box-shadow:inset 0 -5px 0 rgba(0,0,0,.14)}
.nearcard .num .ico{width:34px;height:34px}
.nearcard .info{flex:1;min-width:0;text-align:left}
.nearcard .info b{display:block;font-family:var(--display);font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-d);line-height:1.15}
.nearcard .info small{display:block;color:var(--ink2);font-weight:700;font-size:14px}
.nearcard .qbar{height:9px;margin-top:7px}
.nearcard .btn{min-height:56px;font-size:19px;padding:0 22px;border-radius:18px;flex:none}
.gobtn{width:48px;height:48px;border-radius:16px;background:var(--s21);display:flex;align-items:center;justify-content:center;flex:none}
.gobtn .ico{width:30px;height:30px}
@keyframes rise{from{transform:translateY(16px);opacity:0}}
.mascotbox{position:absolute;right:10px;bottom:calc(6px + var(--safe-b));display:flex;flex-direction:column;align-items:flex-end}
.mascotbox img{width:150px;height:150px;object-fit:contain;filter:drop-shadow(0 10px 10px rgba(10,30,60,.3));animation:bob 3s ease-in-out infinite;margin-top:-6px}
.mbubble{position:relative;max-width:230px;background:var(--s29);border-radius:20px;padding:11px 16px;font-family:var(--display);font-weight:800;font-size:16px;line-height:1.25;color:var(--ink-d);box-shadow:0 8px 24px rgba(24,52,100,.2);transform:rotate(-3deg);margin-right:36px;transition:opacity .4s,transform .4s;text-align:left}
.mbubble:after{content:'';position:absolute;right:46px;bottom:-12px;border:9px solid transparent;border-top-color:var(--s29);border-bottom-width:4px}
.mascotbox.quiet .mbubble{opacity:0;transform:rotate(-3deg) translateY(8px);pointer-events:none}
.joy{position:absolute;left:18px;bottom:calc(126px + var(--safe-b));width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.35);border:3px solid rgba(255,255,255,.8);touch-action:none;display:none}
.joy i{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px;border-radius:50%;background:var(--s29);box-shadow:0 4px 10px rgba(0,0,0,.25)}
@media (pointer:coarse){.joy{display:block}}
.whelp{position:absolute;left:50%;top:calc(160px + var(--safe-t));transform:translateX(-50%);background:rgba(29,47,87,.88);color:#fff;border-radius:14px;padding:8px 14px;font-weight:700;font-size:13.5px;text-align:center;max-width:90%;animation:fadeout 1s 7s forwards}
@keyframes fadeout{to{opacity:0;visibility:hidden}}
@keyframes pop{from{transform:translateX(-50%) scale(.92);opacity:0}}
.wload{position:absolute;inset:0;background:#9fd8ff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;font-family:var(--display);font-weight:800;font-size:18px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.15);z-index:30}
@media (max-width:900px){
  .pill.district{top:calc(68px + var(--safe-t));left:8px;padding:6px 8px;width:auto;max-width:calc(100% - 84px)}.dico{width:40px;height:40px;border-radius:13px}.dico .ico{width:30px;height:30px}.pill.district .who b{font-size:15px}.pill.district .who small{font-size:11.5px}.pill.district .chevbtn{width:30px;height:30px;font-size:20px}
  .wside{top:calc(68px + var(--safe-t));right:8px;gap:8px}.sidebtn{width:60px;padding:7px 2px 5px;border-radius:17px;font-size:11px}.sidebtn .ico,.sidebtn .svgico{width:30px;height:30px}
  .nearcard{left:8px;right:8px;width:auto;bottom:calc(8px + var(--safe-b));padding:10px;gap:10px;border-radius:22px}.nearcard .num{width:52px;height:52px;font-size:22px;border-radius:16px}.nearcard .info b{font-size:16.5px}.nearcard .info small{font-size:12.5px}.nearcard .btn{min-height:48px;font-size:16px;padding:0 14px}
  .mascotbox{bottom:calc(86px + var(--safe-b));right:4px}.mascotbox img{width:84px;height:84px}.mbubble{font-size:13px;max-width:170px;padding:8px 12px;margin-right:20px}.mbubble:after{right:30px}
  .joy{bottom:calc(100px + var(--safe-b))}
}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.dcard{position:relative;height:150px;border-radius:22px;background-size:cover;background-position:center;overflow:hidden;text-align:left;color:#fff;display:flex;align-items:flex-end;box-shadow:0 6px 0 rgba(24,52,100,.12)}
.dcard.locked{filter:grayscale(.7)}
.dtag{position:absolute;left:10px;top:10px;font-family:var(--display);font-weight:800;font-size:13px;padding:2px 10px;border-radius:10px}
.dlock{position:absolute;right:10px;top:10px;width:36px;height:36px;border-radius:50%;background:var(--s29);display:flex;align-items:center;justify-content:center}.dlock .ico{width:22px;height:22px}
.dinfo{padding:10px 12px;width:100%}.dinfo b{display:flex;align-items:center;gap:6px;font-family:var(--display);font-size:17px;text-shadow:0 2px 4px rgba(0,0,0,.4)}.dinfo b .ico{width:24px;height:24px}
.dinfo small{display:block;font-weight:700;font-size:12.5px;opacity:.95}.dinfo .secbar{width:100%;height:7px;margin-top:5px}

/* path tab */
.sec{margin:0 0 26px}
.sechead{position:sticky;top:0;z-index:3;border-radius:20px;color:#fff;padding:14px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 5px 0 rgba(0,0,0,.12);margin-bottom:14px;background-size:cover;background-position:center}
.sechead h3{font-size:20px}
.sechead small{font-weight:800;opacity:.92}
.sechead .pct{margin-left:auto;font-family:var(--display);font-weight:800;background:rgba(255,255,255,.25);padding:4px 10px;border-radius:10px}
.units{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.ucard{position:relative;text-align:left;background:var(--s29);border:2px solid var(--line);border-bottom-width:6px;border-radius:20px;padding:12px;display:flex;gap:12px;align-items:center}
.ucard:active{transform:translateY(2px);border-bottom-width:4px}
.ucard .pic{width:64px;height:64px;flex:none;border-radius:16px;background:var(--s21)}
.ucard b{font-family:var(--display);font-size:16.5px;display:block;line-height:1.15}
.ucard small{color:var(--ink2);font-weight:700;font-size:12.5px;display:block;margin-top:2px}
.ucard .stars{color:var(--yellow-d);font-size:14px;letter-spacing:1px;margin-top:3px}
.ucard.locked{filter:grayscale(1);opacity:.6}
.ucard.cur{border-color:var(--green);box-shadow:0 0 0 4px var(--green-l)}
.ucard .badge{position:absolute;top:-8px;right:10px;background:var(--green);color:#fff;font-weight:800;font-size:11px;padding:2px 8px;border-radius:8px;font-family:var(--display);letter-spacing:.5px}
.pic.lg{width:100%;aspect-ratio:1;max-height:150px}
.pic.md{width:92px;height:92px;flex:none;background:var(--s21);border-radius:18px;font-size:46px}

/* unit sheet */
.usheet .hero{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.usheet .hero .pic{width:96px;height:96px;border-radius:22px;background:var(--s21);flex:none}
.usheet .hero h2{font-size:24px}
.usheet .hero p{margin:4px 0 0;color:var(--ink2);font-weight:700;font-size:14.5px}
.lessons{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:12px 0}
.lessons button{width:64px;height:64px;border-radius:50%;background:var(--s11);border-bottom:5px solid #cfdbe8;font-family:var(--display);font-weight:800;font-size:20px;color:var(--ink2);margin:0 auto;display:flex;align-items:center;justify-content:center}
.lstar{display:block;width:30px;height:30px;background:var(--s29);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);filter:drop-shadow(0 2px 0 rgba(0,0,0,.15))}
.lessons button.done{background:var(--yellow);border-color:var(--yellow-d);color:#5a3d00}
.lessons button.next{background:var(--green);border-color:var(--green-d);color:#fff;animation:pulse 1.4s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(76,194,31,.18)}}
.urow{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.wordchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.wordchips button{display:flex;align-items:center;gap:6px;background:var(--s21);border-radius:12px;padding:4px 10px 4px 4px;font-weight:800;font-size:14px}
.wordchips .pic{width:32px;height:32px;border-radius:9px;background:var(--s29)}.wordchips .pic.emo{font-size:20px}

/* modal */
.modal-back{position:fixed;inset:0;z-index:100;background:rgba(30,42,66,.55);display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .18s}
.modal-back.in{opacity:1}.modal-back.out{opacity:0}
.modal{width:min(520px,100%);max-height:92%;background:var(--s29);border-radius:26px 26px 0 0;display:flex;flex-direction:column;transform:translateY(30px);transition:transform .2s;padding-bottom:var(--safe-b)}
.modal.wide{width:min(760px,100%)}
.modal-back.in .modal{transform:none}
@media (min-width:640px){.modal-back{align-items:center}.modal{border-radius:26px}}
.modal-head{display:flex;align-items:center;gap:10px;padding:16px 14px 6px 20px}
.modal-head h3{flex:1;font-size:21px}
.modal-body{padding:8px 20px 16px;overflow:auto;user-select:text;-webkit-user-select:text}
.modal-body p{line-height:1.5;margin:6px 0}
.modal-foot{display:flex;gap:8px;padding:10px 16px 16px;flex-wrap:wrap}
.modal-foot .btn{flex:1;min-width:120px}
.cardmodal .modal-body{padding-top:20px}

/* toast + confetti */
#toasts{position:fixed;top:calc(12px + var(--safe-t));left:0;right:0;z-index:300;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.toast{background:var(--ink);color:#fff;font-weight:800;padding:10px 16px;border-radius:14px;box-shadow:0 8px 20px rgba(0,0,0,.25);animation:drop .25s;max-width:90%;text-align:center}
.toast.bad{background:var(--red-d)}.toast.good{background:var(--green-d)}
.toast.out{opacity:0;transition:opacity .4s}
@keyframes drop{from{transform:translateY(-20px);opacity:0}}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:400;overflow:hidden}
.confetti i{position:absolute;top:-20px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{top:110%;transform:rotate(720deg) translateX(40px)}}

/* lesson overlay */
.overlay{position:fixed;inset:0;z-index:60;background:var(--s29);display:flex;flex-direction:column}
.lhead{display:flex;align-items:center;gap:10px;padding:calc(10px + var(--safe-t)) 12px 8px;max-width:820px;width:100%;margin:0 auto}
.bar{flex:1;height:16px;border-radius:10px;background:var(--s11);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(var(--green),var(--green-d));border-radius:10px;transition:width .4s;position:relative}
.bar i:after{content:'';position:absolute;left:8px;right:8px;top:3px;height:4px;border-radius:3px;background:rgba(255,255,255,.35)}
.hearts{display:flex;align-items:center;gap:4px;font-family:var(--display);font-weight:800;font-size:18px;color:var(--red)}
.hearts.shake,.shake{animation:shake .4s}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.stage{flex:1;overflow:auto;padding:6px 16px 20px;width:100%;max-width:720px;margin:0 auto;-webkit-overflow-scrolling:touch}
.ex{display:flex;flex-direction:column;gap:14px}
.ex.enter{animation:slidein .25s}
@keyframes slidein{from{transform:translateX(30px);opacity:0}}
.ex-title{font-family:var(--display);font-weight:800;font-size:clamp(20px,4.6vw,26px);margin-top:4px}
.bigpic{position:relative;height:min(34vh,260px);border-radius:24px;background:radial-gradient(circle at 50% 35%,var(--s29),var(--s18) 60%,var(--s7));overflow:hidden;border:2px solid var(--line)}
.bigpic canvas{width:100%;height:100%;display:block}
.bigpic .pic{width:100%;height:100%}
.bigemo{height:100%;display:flex;align-items:center;justify-content:center;font-size:min(22vh,150px)}
.tag3d{position:absolute;right:10px;top:10px;background:var(--ink);color:#fff;font-size:11px;font-weight:800;border-radius:7px;padding:2px 7px;letter-spacing:1px}
.wordline{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap}
.word{font-family:var(--display);font-size:clamp(28px,7vw,40px);font-weight:800}
.word.vi{font-size:clamp(22px,5.5vw,30px)}
.ipa{color:var(--ink2);font-weight:700;text-align:center;font-size:15px}
.vi{font-size:20px;font-weight:800;color:var(--green-d);text-align:center}
.example{background:var(--s21);border-radius:16px;padding:12px 14px;cursor:pointer}
.example .en{font-weight:800}.vi2{color:var(--ink2);font-weight:700;font-size:14.5px;margin-top:2px}
.mini{font-size:13px}
.prompt{display:flex;align-items:center;gap:14px}
.row{display:flex;align-items:center;gap:8px;margin-top:4px}
.hintvi{color:var(--ink2);font-weight:700;text-align:center}
.choices{display:grid;gap:10px}
.choices.pics{grid-template-columns:1fr 1fr}
.choices.chips{grid-template-columns:1fr 1fr}
.choice{position:relative;min-height:56px;padding:10px 14px 10px 40px;border-radius:16px;border:2px solid var(--line);border-bottom-width:5px;background:var(--s29);font-weight:800;font-size:17px;text-align:left;display:flex;align-items:center}
.choices.pics .choice{padding:8px;flex-direction:column;justify-content:center}
.choice .num{position:absolute;left:10px;top:10px;width:22px;height:22px;border-radius:7px;border:2px solid var(--line);font-size:12px;display:flex;align-items:center;justify-content:center;color:var(--ink2)}
.choice.sel{border-color:var(--blue);background:var(--blue-l);color:var(--blue-d)}
.choice.good{border-color:var(--green);background:var(--green-l);color:var(--green-d)}
.choice.bad{border-color:var(--red);background:var(--red-l);color:var(--red-d)}
.choice.mt{padding:10px 12px;justify-content:center;text-align:center}
.choice.done{opacity:.45;pointer-events:none}
.matchgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.matchgrid .col{display:grid;gap:10px}
.bubble{display:flex;gap:12px;align-items:flex-start;background:var(--s21);border-radius:18px;padding:14px}
.bubble .who{font-size:26px}
.sentence{font-size:19px;font-weight:800;line-height:1.4;user-select:text;-webkit-user-select:text}
.sentence.big{font-size:clamp(21px,5vw,27px);text-align:center;line-height:1.6}
.slot{display:inline-block;min-width:74px;border-bottom:3px solid var(--ink2);margin:0 6px;text-align:center;color:var(--blue-d)}
.slot.filled{border-color:var(--blue)}
.answerline{min-height:64px;border-top:2px solid var(--line);border-bottom:2px solid var(--line);padding:8px 0;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;background:repeating-linear-gradient(transparent,transparent 58px,var(--line) 58px,var(--line) 60px)}
.bank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:4px}
.chip{user-select:none}
.bank .chip,.answerline .chip{min-height:46px;padding:0 14px;border-radius:14px;border:2px solid var(--line);border-bottom-width:4px;background:var(--s29);font-weight:800;font-size:17px;font-family:var(--font)}
.bank .chip.used{background:var(--s11);color:transparent;border-color:var(--s11);pointer-events:none}
.letters .chip{min-width:46px;padding:0;justify-content:center;font-size:22px;text-transform:lowercase;font-family:var(--display)}
.listenbox{display:flex;align-items:flex-end;justify-content:center;gap:12px;padding:10px 0}
.typebox{width:100%;border-radius:18px;border:2px solid var(--line);background:var(--s27);padding:14px;resize:none;outline:none;font-size:18px;font-weight:700;user-select:text;-webkit-user-select:text}
.typebox:focus{border-color:var(--blue);background:var(--s29)}
.mic{width:120px;height:120px;border-radius:50%;background:var(--blue);border-bottom:8px solid var(--blue-d);font-size:54px;margin:6px auto}
.mic.on{background:var(--red);border-color:var(--red-d);animation:pulse2 1s infinite}
@keyframes pulse2{50%{box-shadow:0 0 0 16px rgba(255,75,75,.2)}}
.speakstatus{text-align:center;font-weight:800;color:var(--ink2);min-height:24px}
.lfoot{border-top:2px solid var(--line);padding:12px max(16px,calc((100% - 720px)/2)) calc(14px + var(--safe-b));display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.lfoot>*{max-width:720px}
.lfoot .check{min-width:160px;margin-left:auto;flex:1;max-width:360px}
.lfoot.good{background:var(--green-l);border-color:var(--green-l)}.lfoot.bad{background:var(--red-l);border-color:var(--red-l)}
.feedback{flex:1 1 260px;font-size:16px;display:none}
.feedback.good,.feedback.bad{display:block}
.feedback.good b{color:var(--green-d);font-family:var(--display);font-size:22px}
.feedback.bad b{color:var(--red-d);font-family:var(--display);font-size:20px}
.fbans{font-weight:800;color:var(--red-d);font-size:17px;user-select:text;-webkit-user-select:text}
.fbnote{color:var(--ink2);font-weight:700;font-size:14.5px}
.feedback.good .fbnote{color:var(--green-d)}
.done{align-items:center;text-align:center;padding-top:6vh}
.doneart{font-size:96px;animation:bob 2s infinite}
.stats{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.stat{min-width:104px;border:2px solid var(--line);border-radius:18px;padding:10px 12px;display:flex;flex-direction:column;align-items:center}
.stat span{font-size:24px}.stat b{font-family:var(--display);font-size:20px}.stat small{color:var(--ink2);font-weight:700;font-size:12px}
.goalhit{background:var(--yellow);border-radius:14px;padding:8px 16px;font-weight:800;margin-top:6px}
.placed{display:flex;flex-direction:column;align-items:center;background:var(--green-l);border-radius:20px;padding:14px 30px}
.placed b{font-family:var(--display);font-size:40px;color:var(--green-d)}
.stagetag{display:inline-block;background:var(--blue-l);color:var(--blue-d);font-weight:800;border-radius:10px;padding:3px 10px;font-size:13px;margin-top:6px}
/* story */
.storyhead{text-align:center;margin:4px 0 14px}.storyhead p{color:var(--ink2);font-weight:700;margin:4px 0 0}
.storylog{display:flex;flex-direction:column;gap:12px;padding-bottom:30px}
.line{display:flex;gap:10px;align-items:flex-end;animation:slidein .3s}
.line.r{flex-direction:row-reverse}
.face{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;flex:none}
.bub{background:var(--s21);border-radius:18px 18px 18px 4px;padding:10px 14px;max-width:80%;cursor:pointer}
.line.r .bub{border-radius:18px 18px 4px 18px;background:var(--blue-l)}
.bub small{font-weight:800;color:var(--ink2);font-size:12px}
.bub .en{font-weight:800;font-size:17px}
.quiz{border:2px solid var(--line);border-radius:18px;padding:14px;display:grid;gap:10px;animation:slidein .3s}
.quiz .choice{padding-left:14px}
/* word card */
.wordcard{display:flex;flex-direction:column;gap:10px}
.wordcard .bigpic{height:min(36vh,280px)}

/* generic cards / lists */
.h1{font-family:var(--display);font-size:26px;font-weight:800;margin:4px 0 12px}
.banner{border-radius:22px;min-height:120px;background-size:cover;background-position:center;display:flex;align-items:flex-end;padding:14px 16px;color:#fff;margin-bottom:14px;position:relative;overflow:hidden}
.banner:before{content:'';position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(20,30,60,.62))}
.banner>*{position:relative}
.banner h2{font-size:24px;text-shadow:0 2px 6px rgba(0,0,0,.4)}
.banner p{margin:2px 0 0;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.pcard{display:flex;align-items:center;gap:14px;text-align:left;background:var(--s29);border:2px solid var(--line);border-bottom-width:6px;border-radius:20px;padding:14px}
.pcard:active{transform:translateY(2px);border-bottom-width:4px}
.pcard .em{font-size:38px;width:54px;text-align:center;flex:none}
.pcard b{font-family:var(--display);font-size:17px;display:block}
.pcard small{color:var(--ink2);font-weight:700}
.pcard .cnt{margin-left:auto;background:var(--red);color:#fff;border-radius:10px;padding:2px 9px;font-weight:800;font-size:13px}
.seg{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;position:sticky;top:0;background:var(--bg);z-index:4}
.seg button{flex:none;padding:8px 14px;border-radius:12px;background:var(--s29);border:2px solid var(--line);font-weight:800;font-size:14px;white-space:nowrap}
.seg button.on{background:var(--blue);border-color:var(--blue-d);color:#fff}
.search{width:100%;height:50px;border-radius:16px;border:2px solid var(--line);padding:0 16px;background:var(--s29);outline:none;margin-bottom:10px;user-select:text;-webkit-user-select:text}
.search:focus{border-color:var(--blue)}
.kits{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.kit{background:var(--s29);border:2px solid var(--line);border-bottom-width:5px;border-radius:18px;padding:8px;text-align:center;font-weight:800;font-size:14px}
.kit .quad{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--s21);border-radius:12px;padding:4px;margin-bottom:6px}
.kit .quad img{width:100%;aspect-ratio:1;object-fit:contain}
.kit small{display:block;color:var(--ink2);font-weight:700;font-size:12px}
.models{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.mcard{position:relative;background:var(--s29);border:2px solid var(--line);border-bottom-width:4px;border-radius:16px;padding:6px;text-align:center}
.mcard img{width:100%;aspect-ratio:1;object-fit:contain}
.mcard b{display:block;font-size:13.5px;line-height:1.15}
.mcard small{display:block;font-size:11.5px;color:var(--ink2);font-weight:700;line-height:1.15;margin-top:1px}
.mcard .tick{position:absolute;top:4px;right:6px;font-size:13px}
.crumbs{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-weight:800}
.crumbs button{color:var(--blue-d);font-weight:800}
.wlist{display:grid;gap:8px}
.wrow{display:flex;align-items:center;gap:10px;background:var(--s29);border:2px solid var(--line);border-radius:16px;padding:8px 10px;text-align:left}
.wrow .pic{width:46px;height:46px;border-radius:12px;background:var(--s21);flex:none}.wrow .pic.emo{font-size:28px}
.wrow b{display:block}.wrow small{color:var(--ink2);font-weight:700}
.str{margin-left:auto;display:flex;gap:3px}.str i{width:7px;height:16px;border-radius:3px;background:var(--s9)}.str i.on{background:var(--green)}
table.ref{width:100%;border-collapse:collapse;background:var(--s29);border-radius:16px;overflow:hidden;font-size:15px}
table.ref th{background:var(--blue);color:#fff;text-align:left;padding:8px 10px;font-family:var(--display)}
table.ref td{padding:8px 10px;border-top:1px solid var(--line);user-select:text;-webkit-user-select:text}
table.ref tr{cursor:pointer}
.guide h4{font-size:17px;margin:14px 0 6px;color:var(--blue-d)}
.gpoint{background:var(--s21);border-radius:16px;padding:12px 14px;margin-bottom:10px}
.gpoint p{margin:0 0 6px;line-height:1.5}
.gpoint .en{color:var(--ink2);font-style:italic;font-size:14.5px}
.gex{display:flex;align-items:center;gap:8px;background:var(--s29);border-radius:12px;padding:6px 10px;margin-top:6px;cursor:pointer}
.gex b{display:block}.gex small{color:var(--ink2);font-weight:700}
.letters-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.lcard{background:var(--s29);border:2px solid var(--line);border-bottom-width:4px;border-radius:16px;padding:8px;text-align:center}
.lcard .L{font-family:var(--display);font-size:34px;font-weight:800;color:var(--blue-d);line-height:1}
.lcard .pic{width:56px;height:56px;margin:2px auto}.lcard .pic.emo{font-size:34px}
.lcard small{display:block;font-weight:800}
/* quests, league, profile */
.qrow{display:flex;align-items:center;gap:12px;background:var(--s29);border:2px solid var(--line);border-radius:18px;padding:12px;margin-bottom:10px}
.qrow .em{font-size:30px}
.qrow .mid{flex:1}
.qbar{height:14px;border-radius:8px;background:var(--s11);overflow:hidden;margin-top:6px}
.qbar i{display:block;height:100%;background:var(--yellow)}
.lrow{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:14px;font-weight:800}
.lrow.me{background:var(--green-l);color:var(--green-d)}
.lrow .rk{width:26px;text-align:center;font-family:var(--display)}
.lrow .ava{width:36px;height:36px;border-radius:50%;background:var(--blue-l);overflow:hidden}
.lrow .ava img{width:100%;height:100%;object-fit:cover;transform:scale(1.5) translateY(12%)}
.lrow .xp{margin-left:auto;color:var(--ink2)}
.lrow small{font-weight:700;color:var(--ink2);font-size:11px}
.zone{font-size:12px;font-weight:800;text-align:center;padding:4px;border-radius:8px;margin:4px 0}
.zone.up{background:var(--green-l);color:var(--green-d)}.zone.down{background:var(--red-l);color:var(--red-d)}
.pstats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:16px}
.pstat{border:2px solid var(--line);background:var(--s29);border-radius:18px;padding:12px;display:flex;gap:10px;align-items:center}
.pstat span{font-size:28px}.pstat b{font-family:var(--display);font-size:20px;display:block;line-height:1}.pstat small{color:var(--ink2);font-weight:700;font-size:12.5px}
.week{display:flex;gap:6px;align-items:flex-end;height:110px;background:var(--s29);border:2px solid var(--line);border-radius:18px;padding:12px;margin-bottom:16px}
.week div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%;font-size:11px;font-weight:800;color:var(--ink2)}
.week i{display:block;width:70%;border-radius:6px 6px 2px 2px;background:var(--green);min-height:3px}
.achs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.ach{background:var(--s29);border:2px solid var(--line);border-radius:18px;padding:12px;text-align:center;opacity:.45;filter:grayscale(1)}
.ach.on{opacity:1;filter:none;border-color:var(--yellow-d);background:var(--s38)}
.ach span{font-size:34px;display:block}.ach b{font-size:14px}.ach small{display:block;color:var(--ink2);font-weight:700;font-size:12px}
.setrow{display:flex;align-items:center;gap:12px;background:var(--s29);border:2px solid var(--line);border-radius:16px;padding:12px 14px;margin-bottom:8px;font-weight:800}
.setrow>span:first-child{flex:1}
.switch{width:52px;height:30px;border-radius:16px;background:#d9d2bf;position:relative;flex:none;transition:background .15s}
.switch:after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--s29);transition:left .15s}
.switch.on{background:var(--green)}.switch.on:after{left:25px}
.shop{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:16px}
.sitem{background:var(--s29);border:2px solid var(--line);border-bottom-width:5px;border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center}
.sitem span{font-size:36px}.sitem small{color:var(--ink2);font-weight:700}
.sub2{font-family:var(--display);font-size:19px;font-weight:800;margin:18px 0 10px}
.mapsec{margin-bottom:12px}
.mapsec h4{font-size:16px;margin:0 0 6px}
.mapgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.mapgrid button{border-radius:12px;padding:8px 2px;font-weight:800;font-size:13px;color:#fff;border-bottom:4px solid rgba(0,0,0,.2)}
.mapgrid button.locked{background:#c3cedb!important}

.pic.cover{background:transparent!important}

#tab-world:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 58%,rgba(8,30,66,.20) 100%);z-index:1}
.whud{z-index:2}

/* ── learn: side panel + winding path ── */
.learngrid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.lside{display:grid;gap:12px;order:-1;grid-template-columns:minmax(0,1fr)}
.lside .quests,.lside .league{display:none}
@media (min-width:720px){.lside{grid-template-columns:1fr 1fr}}
@media (min-width:1180px){.learngrid{grid-template-columns:minmax(0,1fr) 330px;gap:28px;align-items:start}.lside{order:0;position:sticky;top:0;grid-template-columns:minmax(0,1fr)}.lside .quests{display:block}.lside .league{display:flex}}
.sidecard{background:var(--s29);border:2px solid var(--line);border-radius:22px;padding:14px 16px;box-shadow:0 6px 18px rgba(30,60,110,.06)}
.sc-top{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.sc-top .pic{width:72px;height:72px;flex:none;border-radius:18px;background:var(--s21)}
.sc-top b{display:block;font-family:var(--display);font-size:18px;line-height:1.15}
.sc-top small{display:block;color:var(--ink2);font-weight:700;font-size:13px}
.sc-top .kick{font-weight:900;font-size:11.5px;letter-spacing:.7px}
.qbar.green i{background:var(--green)}
.sidecard.next .qbar{height:10px;margin:0 0 12px}
.btn .arrow{font-size:22px;line-height:1;margin-top:-2px}
.ringwrap{display:flex;align-items:center;gap:14px}
.goalring{width:84px;height:84px;border-radius:50%;background:conic-gradient(var(--yellow) var(--p),var(--s11) 0);display:flex;align-items:center;justify-content:center;flex:none}
.goalring>div{width:64px;height:64px;border-radius:50%;background:var(--s29);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05}
.goalring b{font-family:var(--display);font-size:22px}.goalring small{font-size:10.5px;font-weight:800;color:var(--ink2)}
.tinfo b{display:block;font-family:var(--display);font-size:17px;line-height:1.15;margin-bottom:4px}
.streakline{display:flex;align-items:center;gap:6px;font-weight:800;color:var(--ink-warm2);font-size:14.5px}
.streakline .ico{width:24px;height:24px}
.weekdots{display:flex;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:2px solid var(--line)}
.wd{display:flex;flex-direction:column;align-items:center;gap:4px}
.wd i{display:block;width:26px;height:26px;border-radius:50%;background:var(--s11);position:relative}
.wd.half i{background:#ffe7a3}.wd.full i{background:var(--yellow)}
.wd.full i:after{content:'';position:absolute;left:9px;top:5px;width:6px;height:11px;border:solid var(--s29);border-width:0 3px 3px 0;transform:rotate(45deg)}
.wd.now i{box-shadow:0 0 0 3px var(--blue-l),0 0 0 5px var(--blue)}
.wd small{font-size:11px;font-weight:800;color:var(--ink2)}.wd.now small{color:var(--blue-d)}
.sc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.sc-head b{font-family:var(--display);font-size:17px}.sc-head .linkbtn{padding:4px;font-size:13px}
.qmini{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 0;border-top:2px solid var(--line)}
.qmini:first-of-type{border-top:0}
.qmini .ico{width:36px;height:36px;flex:none}.qmini .mid{flex:1;min-width:0}
.qmini span{display:block;font-weight:800;font-size:13.5px;line-height:1.2}.qmini .qbar{height:8px;margin-top:5px}
.qmini small{font-weight:800;color:var(--ink2);font-size:12.5px;flex:none}
.sidecard.league{align-items:center;gap:12px;text-align:left;width:100%}
.sidecard.league .ico{width:46px;height:46px;flex:none}.sidecard.league div{flex:1}
.sidecard.league b{display:block;font-family:var(--display);font-size:16.5px}.sidecard.league small{color:var(--ink2);font-weight:700;font-size:12.5px}
.chev{font-size:26px;color:var(--ink2);font-weight:800;line-height:1}
.sec{margin:0 0 30px}
.sechead{min-height:88px;border-radius:22px}
.sectxt{flex:1;min-width:0}.sectxt small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.secico{width:58px;height:58px;border-radius:18px;background:rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;flex:none;backdrop-filter:blur(3px)}
.secico .ico{width:42px;height:42px}
.secbar{height:9px;border-radius:6px;background:rgba(255,255,255,.35);overflow:hidden;margin-top:6px;width:min(240px,46vw)}
.secbar i{display:block;height:100%;background:var(--s29);border-radius:6px}
.path{--amp:78px;position:relative;display:flex;flex-direction:column;padding:50px 0 4px}
@media (min-width:700px){.path{--amp:118px}}
.pathline{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.prow{position:relative;display:flex;justify-content:center;min-height:186px}
.prow.curr{margin-top:40px}
.path .prow.curr:first-of-type{margin-top:0}
.ncol{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;transform:translateX(calc(var(--x)*var(--amp)));width:180px}
.node{position:relative;width:100px;height:100px;border-radius:50%;flex:none}
.node .ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--yellow) var(--p),var(--s5) 0);box-shadow:0 7px 0 rgba(30,60,110,.13)}
.node .face{position:absolute;inset:8px;width:auto;height:auto;border-radius:50%;background:radial-gradient(circle at 50% 30%,var(--s29),var(--s16));display:flex;align-items:center;justify-content:center;overflow:hidden;border:4px solid var(--c);box-shadow:inset 0 -6px 0 rgba(0,0,0,.06);transition:transform .08s;font-size:inherit}
.node:active .face{transform:translateY(3px)}
.node .face .pic{width:86%;height:86%}
.node.locked .face{border-color:#c3cedb;filter:grayscale(1);opacity:.7}
.node.done .ring{background:var(--yellow)}
.node.legend .ring{background:conic-gradient(#ffd75e,#ff9f1c,#ffd75e,var(--s32),#ffd75e)}
.node.cur .ring{animation:pulse 1.6s infinite}
.lockbadge{position:absolute;right:-4px;bottom:0;width:36px;height:36px;border-radius:50%;background:var(--s29);border:3px solid var(--line);display:flex;align-items:center;justify-content:center;z-index:2}
.lockbadge .ico{width:22px;height:22px}
.lockbadge.gold{border-color:var(--yellow-d);background:var(--s36)}
.startbub{position:absolute;left:50%;top:-42px;transform:translateX(-50%);background:var(--c);color:#fff;border-bottom:4px solid rgba(0,0,0,.18);font-family:var(--display);font-weight:800;font-size:14.5px;letter-spacing:.6px;padding:5px 14px 3px;border-radius:13px;white-space:nowrap;animation:bob 1.3s ease-in-out infinite;z-index:3}
.startbub:after{content:'';position:absolute;left:50%;bottom:-11px;margin-left:-7px;border:7px solid transparent;border-top-color:var(--c);filter:brightness(.82)}
.nlabel{text-align:center;margin-top:9px;line-height:1.15;background:var(--s29);border:2px solid var(--line);border-radius:14px;padding:6px 10px 7px;max-width:180px;box-shadow:0 3px 0 rgba(30,60,110,.05)}
.nlabel b{display:block;font-family:var(--display);font-size:14.5px}
.nlabel small{display:block;color:var(--ink2);font-weight:700;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:156px;margin:1px auto 0}
.nstars{display:flex;gap:3px;justify-content:center;margin-top:5px}
.nstars i{display:block;width:13px;height:13px;background:var(--s5);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.nstars i.on{background:var(--yellow)}
.sticker{position:absolute;top:6px;width:96px;display:flex;flex-direction:column;align-items:center;font-weight:800;font-size:12px;color:var(--ink2)}
.sticker.l{left:max(2px,calc(50% - var(--amp) - 156px))}.sticker.r{right:max(2px,calc(50% - var(--amp) - 156px))}
.sticker .pic{width:80px;height:80px;filter:drop-shadow(0 8px 6px rgba(30,60,110,.16));transition:transform .15s}
.sticker:hover .pic{transform:translateY(-4px) scale(1.05)}
.sticker span{background:var(--s29);border:2px solid var(--line);border-radius:10px;padding:0 8px;margin-top:-2px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
@media (max-width:520px){.sticker{width:70px}.sticker .pic{width:60px;height:60px}.ncol{width:150px}.nlabel{max-width:150px}.nlabel small{max-width:126px}}
/* icon tiles */
.pcard .em .ico,.pstat .ico,.qrow .em .ico,.sitem .ico{width:44px;height:44px}
.pstat .ico{width:38px;height:38px;flex:none}
.ach .ico{width:48px;height:48px;display:block;margin:0 auto 4px}
.seg button .ico{width:20px;height:20px;margin-right:4px}
.modal-head h3 .ico{width:30px;height:30px;margin-right:6px}
.hearts .ico{width:26px;height:26px}
/* lesson mascot */
.mascot{width:74px;height:74px;flex:none;object-fit:contain;margin:-26px 0 -8px;filter:drop-shadow(0 6px 5px rgba(0,0,0,.18))}
.lfoot.good .mascot{animation:hop .55s ease 2}
.lfoot.bad .mascot{animation:shake .45s}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-16px) rotate(-6deg)}70%{transform:translateY(-4px) rotate(4deg)}}
.feedback{align-items:center;gap:10px}
.feedback.good,.feedback.bad{display:flex}
.donecast{display:flex;align-items:flex-end;justify-content:center;gap:6px;height:150px}
.donecast img{height:130px;object-fit:contain;animation:hop 1s ease infinite}
.donecast img:nth-child(2){height:96px;animation-delay:.25s}
.stat{border-width:0;padding:0;overflow:hidden;min-width:112px;border-radius:18px;background:var(--sc,#ffc62e)}
.stat small{order:-1;color:#fff;font-size:12px;letter-spacing:.5px;text-transform:uppercase;padding:4px 8px 3px}
.stat b{background:var(--s29);margin:0 3px 3px;border-radius:0 0 15px 15px;align-self:stretch;text-align:center;padding:8px 6px;font-size:21px;display:flex;align-items:center;justify-content:center;gap:6px}
.stat span{display:none}
.stat b .ico{width:24px;height:24px}
/* topic packs */
.pack .pname{display:flex;align-items:center;justify-content:center;gap:6px;line-height:1.15}
.pack .pname .ico{width:24px;height:24px;flex:none}
.pack .qbar{margin-top:6px;height:9px}
.pack.full{border-color:var(--yellow-d);background:var(--s37)}
.wordchips button.seen{background:var(--s20);border-color:#bfe9a5}
.usheet .hero .pic.cover .ico{width:72%;height:72%;margin:14%}
.setrow>span{display:flex;align-items:center;gap:9px}
/* ── đăng nhập Google + hàng tài khoản ── */
.gwrap{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:12px}
.gwrap:not(:empty){padding-top:12px;border-top:2px dashed var(--line)}
.gbtn{display:flex;justify-content:center;min-height:0;color-scheme:light}
.gnote{color:var(--ink2);font-size:12px;font-weight:700;text-align:center;line-height:1.45;max-width:320px}
.acctrow{flex-wrap:wrap}
.acctrow .accmail{display:block;color:var(--ink2);font-size:12px;font-weight:700;max-width:60vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.accava{width:30px;height:30px;border-radius:50%;flex:none;object-fit:cover;box-shadow:0 0 0 2px var(--line)}

.setrow>span .ico{width:28px;height:28px;flex:none}

/* ── word pictures (js/core/pics.js) ── */
.pic{display:grid;place-items:center;overflow:hidden;font-size:34px}
.pic>*{grid-area:1/1}
.pic img{width:100%;height:100%;object-fit:contain}
.pic.ico-pic img{width:86%;height:86%}
.pic.emo{background:linear-gradient(150deg,var(--t0,var(--s14)),var(--t1,var(--s1)));border-radius:18%}
.emoglyph{font-size:1em;line-height:1.15;filter:drop-shadow(0 3px 4px rgba(20,40,80,.2))}
.pic.swatch .chip{display:block;width:72%;height:72%;border-radius:50%}
.pic.numtile{font-family:var(--display);gap:0}
.pic.numtile b{font-size:1.35em;line-height:1;color:var(--ink-d);align-self:center}
.pic.numtile .dots{display:flex;flex-wrap:wrap;gap:.1em;justify-content:center;align-self:end;max-width:76%;padding-bottom:6%}
.pic.numtile .dots i{width:.16em;height:.16em;border-radius:50%;background:var(--blue)}
.pic.numtile:has(.dots) b{align-self:start;padding-top:6%}
.pic.shapetile .sh{display:block;width:62%;height:62%;background:var(--blue);border-radius:4px}
.sh.circle{border-radius:50%}.sh.square{border-radius:10%}.sh.rect{height:42%}
.sh.oval{border-radius:50%;height:44%}
.sh.triangle{clip-path:polygon(50% 4%,98% 96%,2% 96%)}
.sh.star{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.sh.heart{clip-path:polygon(50% 92%,10% 55%,4% 32%,17% 16%,34% 16%,50% 32%,66% 16%,83% 16%,96% 32%,90% 55%)}
.sh.diamond{clip-path:polygon(50% 2%,98% 50%,50% 98%,2% 50%)}
/* sizes per context */
/* .pic has no intrinsic size, so inside a choice the <img> overflowed the tile and
   overflow:hidden sliced the model in half — give the tile a square box to sit in */
.choices .pic{font-size:52px}
.choices.pics .choice{padding:10px;min-height:0}
.choices.pics .pic{width:min(100%,168px);height:auto;aspect-ratio:1;margin-inline:auto}
.choices.pics .pic img{width:100%;height:100%;object-fit:contain;padding:4%}
.choices.pics .pic.ico-pic img,.choices.pics .pic.art img{padding:6%}
.wordchips .pic,.wrow .pic,.qmini .pic{font-size:22px}
.sc-top .pic,.node .face .pic{font-size:36px}
.bigpic .pic.big{width:min(100%,300px);height:100%;max-height:100%;margin-inline:auto;font-size:104px}
.bigpic .pic.big.emo{border-radius:28px}
.mcard .pic,.sticker .pic{font-size:40px}

/* ── read-along + recording (js/core/reader.js) ── */
.rw{border-radius:7px;padding:1px 2px;transition:background .12s,color .12s;cursor:pointer}
.rw.on{background:var(--yellow);color:#4a3200;box-shadow:0 0 0 3px var(--s28)}
.rw.done{color:var(--green-d)}
.reader{max-height:54vh;overflow-y:auto;padding:2px 2px 8px}
.rdrow{background:var(--s29);border:2px solid var(--line);border-radius:18px;padding:11px 14px;margin-bottom:10px;transition:border-color .2s,transform .2s}
.rdrow.now{border-color:var(--yellow-d);transform:translateX(4px);box-shadow:0 6px 18px rgba(255,190,50,.22)}
.rdwho{font-weight:900;font-size:12.5px;color:var(--ink2);letter-spacing:.04em;margin-bottom:2px}
.rdline{font-family:var(--display);font-size:19px;line-height:1.5;color:var(--ink-d)}
.rdvi{color:var(--ink2);font-weight:700;font-size:14px;margin-top:3px}
.rdfoot{position:sticky;bottom:0;background:var(--s29);padding-top:12px;margin-top:4px}
.recbar{margin-top:12px}
.recrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.recrow .btn{min-height:44px;font-size:15px;padding:0 14px;border-radius:14px}
.recbtn.on{animation:pulse2 1.2s infinite}
.rectime{font-family:var(--display);font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink2);min-width:40px}
.recnote{display:block;color:var(--ink2);font-size:12px;font-weight:700;margin-top:7px}
.readall{width:42px;height:42px;border-radius:14px;background:var(--s21);font-size:20px;flex:none}
.example .rdline{display:inline;font-size:inherit;font-family:inherit}

/* ── grammar + talk library ── */
.chips2{display:flex;gap:7px;overflow-x:auto;padding:4px 2px 12px;flex-wrap:wrap}
.chips2 button{flex:none;padding:7px 15px;border-radius:14px;background:var(--s29);border:2px solid var(--line);font-family:var(--display);font-weight:800;font-size:14.5px;color:var(--ink)}
.chips2 button.on{background:#1a8cf0;border-color:#0f6fc4;color:#fff}
.gcard{display:flex;align-items:center;gap:13px;text-align:left;background:var(--s29);border:2px solid var(--line);border-bottom-width:5px;border-radius:20px;padding:13px 14px;width:100%}
.gcard:hover{border-color:var(--s2)}
.gcard .lv{font-family:var(--display);font-weight:800;color:#fff;border-radius:11px;padding:4px 10px 3px;font-size:13.5px;flex:none;min-width:42px;text-align:center}
.gcard .em{font-size:30px;flex:none;width:42px;text-align:center}
.gcard>div{flex:1;min-width:0}
.gcard b{display:block;font-family:var(--display);font-size:16.5px;line-height:1.2}
.gcard small{display:block;color:var(--ink2);font-weight:700;font-size:13px;line-height:1.35;max-height:2.7em;overflow:hidden}
.gtopic .gt-head{display:flex;gap:13px;align-items:flex-start;margin-bottom:6px}
.gtopic .gt-head h2{font-size:24px}
.gtopic .gt-head p{margin:4px 0 0;color:var(--ink2);font-weight:700;font-size:15px}
.gt-head .lv{font-family:var(--display);font-weight:800;color:#fff;border-radius:12px;padding:5px 12px 4px;flex:none}
.gt-head .em2{font-size:40px;line-height:1;flex:none}
.gform{background:var(--s25);border-radius:16px;padding:12px 14px;margin-bottom:10px}
.gform>b{font-family:var(--display);font-size:15px;color:var(--ink2);display:block;margin-bottom:5px}
.gform code{display:inline-block;background:#1d2f57;color:#cfe6ff;border-radius:10px;padding:6px 12px;font-family:ui-monospace,Menlo,monospace;font-size:14px;font-weight:700;margin-bottom:8px}
.guse{margin-bottom:9px}
.guse>b{display:block;font-weight:800;font-size:15.5px;margin-bottom:4px}
.sigs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:6px}
.sigs button{background:var(--s34);border:2px solid #ffe08a;border-radius:12px;padding:5px 12px;font-weight:800;font-size:14px;color:var(--ink-warm)}
.gmiss{background:var(--s29);border:2px solid var(--line);border-radius:16px;padding:11px 13px;margin-bottom:9px}
.gmiss .bad,.gmiss .good{display:flex;gap:8px;align-items:baseline;font-weight:800;font-size:15.5px}
.gmiss .bad{color:var(--ink-red);text-decoration:line-through;text-decoration-color:rgba(194,59,59,.45)}
.gmiss .good{color:var(--green-d);cursor:pointer}
.gmiss span{font-size:13px;flex:none}
.gmiss small{display:block;color:var(--ink2);font-weight:700;font-size:13px;margin-top:5px}
.gquiz{background:var(--s29);border:2px solid var(--line);border-radius:16px;padding:12px 14px;margin-bottom:9px}
.gquiz>b{display:block;font-size:15.5px;margin-bottom:8px}
.qopts{display:flex;gap:8px;flex-wrap:wrap}
.qopts button{flex:1;min-width:88px;min-height:44px;border-radius:13px;border:2px solid var(--line);border-bottom-width:4px;background:var(--s29);font-weight:800;font-size:15px}
.qopts button.good{background:var(--s10);border-color:var(--green);color:var(--green-d)}
.qopts button.bad{background:var(--red-l);border-color:var(--red);color:var(--red-d)}
.gquiz .why{display:block;margin-top:8px;color:var(--ink2);font-weight:700;font-size:13px}
.gex.ph{background:var(--s29);border:2px solid var(--line);margin-bottom:8px}
.note2{display:block;color:var(--ink-blue)!important;margin-top:3px}
.pathopt .ico{width:46px;height:46px;flex:none}
.pathopt{align-items:flex-start}
.entrybtn{display:flex;align-items:center;gap:10px;width:100%;background:var(--s35);border:2px dashed var(--yellow-d);border-radius:18px;padding:11px 15px;font-family:var(--display);font-weight:800;font-size:15.5px;color:var(--ink-warm);margin:-6px 0 14px}
.entrybtn .ico{width:28px;height:28px;flex:none}
.sidecard.pathcard{display:flex;align-items:center;gap:12px;text-align:left;width:100%}
.sidecard.pathcard .ico{width:46px;height:46px;flex:none}
.sidecard.pathcard>div{flex:1;min-width:0}
.sidecard.pathcard b{display:block;font-family:var(--display);font-size:16.5px;line-height:1.2}
.sidecard.pathcard small{display:block;color:var(--ink2);font-weight:700;font-size:12.5px;line-height:1.3}

/* ── soft backgrounds so the screens are never a blank white page ── */
.tabsbody{background:
  radial-gradient(900px 420px at 12% -6%,rgba(120,205,255,.28),transparent 62%),
  radial-gradient(760px 380px at 88% 8%,rgba(255,214,120,.22),transparent 60%),
  radial-gradient(700px 500px at 50% 108%,rgba(140,230,150,.22),transparent 62%),
  linear-gradient(var(--s24),var(--s17))}
#tab-world{background:none}
.tab .scroll{background:transparent}
.sec,.banner{position:relative}
#main.inworld .tabsbody{background:none}

/* ── auth ── */
.authwrap{display:grid;grid-template-columns:1fr;place-items:center;width:100%;height:100%;overflow:auto;padding:14px}
.authside{display:none}
@media (min-width:1000px){
  .authwrap{grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:40px;max-width:1080px;margin:0 auto;place-items:center;padding:24px}
  .authside{display:block;color:#fff;text-shadow:0 2px 10px rgba(0,25,60,.55)}
  .authside h2{font-size:38px;margin:6px 0 16px;max-width:15ch}
  .authlogo.big img{width:min(100%,460px)}
  .authticks{list-style:none;margin:0;padding:0;display:grid;gap:9px}
  .authticks li{position:relative;padding-left:32px;font-weight:800;font-size:16px}
  .authticks li:before{content:'';position:absolute;left:0;top:3px;width:21px;height:21px;border-radius:50%;background:var(--green);box-shadow:0 2px 8px rgba(0,0,0,.2)}
  .authticks li:after{content:'';position:absolute;left:7.5px;top:7px;width:5px;height:9px;border:solid var(--s29);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
  .authchars{display:flex;gap:8px;margin-top:22px}
  .authchars img{width:84px;height:84px;object-fit:contain;background:rgba(255,255,255,.9);border-radius:22px;box-shadow:0 8px 22px rgba(0,40,90,.25)}
  .authcard{margin:0;width:100%}
}
.authcard{border-radius:30px;box-shadow:0 26px 70px rgba(0,50,110,.34)}
.pic.art img{width:94%;height:94%;border-radius:12%}

/* ── Bài đọc & luyện thi ─────────────────────────────────────────── */
.readcard,.examcard{align-items:flex-start}
.rtop{display:flex;gap:9px;align-items:flex-start;justify-content:space-between}
.rtop b{flex:1;min-width:0}
.rtop .lv{flex:none;margin-top:1px}
.rtags{color:var(--ink2);font-weight:800;font-size:12.5px;margin-top:6px}
.readcard small,.examcard small{max-height:3.9em}
.readcard.read{background:linear-gradient(var(--s26),var(--s29));border-color:#c6e8b0}
.readcard.read b:after{content:' ✓';color:var(--green-d)}
.testcard{margin-bottom:9px}
.testcard .em{font-size:26px;width:36px}
.fineprint{margin-top:18px;color:var(--ink2);font-weight:700;font-size:12.5px;line-height:1.45;background:var(--s25);border-radius:14px;padding:10px 13px}
.bandtab{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.band{background:var(--s29);border:2px solid var(--line);border-radius:14px;padding:9px 12px}
.band b{display:block;font-family:var(--display);font-size:17px;color:#6b5bd2}
.band small{display:block;color:var(--ink2);font-weight:700;font-size:12.5px;line-height:1.35;margin-top:2px}
.skillcard p{margin:0 0 7px;font-weight:700;font-size:14.5px;color:var(--ink)}
.tip{display:flex;gap:8px;align-items:baseline;font-weight:700;font-size:13.5px;color:var(--ink2);margin-top:5px}
.tip span{flex:1}

/* the read-along page itself */
.rdbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0 12px;position:sticky;top:0;z-index:3;background:linear-gradient(var(--s29) 72%,rgba(255,255,255,0));padding:6px 0 10px}
.rdbar .btn.on{background:var(--s13);border-color:#9fcdf7}
.rdtext{background:var(--s39);border:2px solid var(--s23);border-radius:20px;padding:14px 16px}
.rdtext.hidden{display:none}
.rdpara{margin:0 0 14px}
.rdpara:last-child{margin-bottom:0}
.rdsent{display:inline;cursor:pointer;border-radius:8px}
.rdsent:hover{background:var(--s33)}
.rdsent.now{background:var(--s30);box-shadow:0 0 0 4px var(--s30)}
.rdtext .rdline{display:inline;font-size:19px}
.rdwho2{color:var(--ink-blue);font-family:var(--display);font-size:15px}
.rdvi2{display:block;color:var(--ink2);font-weight:700;font-size:13.5px;line-height:1.4;margin:1px 0 7px}
.rdtext.novi .rdvi2{display:none}
.rdtext.novi .rdsent{display:inline}
.rdnav{display:flex;gap:9px;margin-top:16px}
.rdnav .btn{flex:1}
.quizbox{margin-top:2px}
.gquiz .qen{display:block;color:var(--ink2);font-weight:700;font-size:13px;margin:-4px 0 8px}
.gquiz .why.good{color:var(--green-d)}
.gquiz .why.bad{color:var(--ink-red)}
.gquiz .ans{display:block;margin-top:6px;font-weight:800;color:var(--green-d);font-size:13.5px}
.gaprow{display:flex;gap:8px}
.gapin{flex:1;min-height:44px;border:2px solid var(--line);border-radius:13px;padding:0 13px;font-weight:800;font-size:15.5px;font-family:inherit}
.gapin.good{background:var(--s10);border-color:var(--green)}
.gapin.bad{background:var(--red-l);border-color:var(--red)}
.qscore{display:none}
.qscore.on{display:block;text-align:center;font-family:var(--display);font-size:19px;font-weight:800;border-radius:16px;padding:11px;margin-top:6px}
.qscore.good{background:var(--s10);color:var(--green-d)}
.qscore.bad{background:var(--s31);color:var(--ink-warm)}
.writein{width:100%;border:2px solid var(--line);border-radius:16px;padding:12px 14px;font-family:inherit;font-weight:600;font-size:15.5px;line-height:1.55;resize:vertical;background:var(--s39)}
.wcount{display:block;text-align:right;color:var(--ink2);font-weight:800;font-size:12.5px;margin-top:4px}
.modelbox{margin-top:10px;background:var(--s25);border-radius:18px;padding:12px 15px}
.modelbox.hidden{display:none}
.modeltxt{margin:0;font-weight:700;font-size:15.5px;line-height:1.6}
.modelvi{margin:8px 0 0;color:var(--ink2);font-weight:700;font-size:13.5px;line-height:1.55}
.speakcard{background:var(--s29);border:2px solid var(--line)}
.speakcard>b{color:var(--ink);font-size:16px}
.speakcard p{margin:3px 0 9px;color:var(--ink2);font-weight:700;font-size:13.5px}
@media (max-width:560px){
  .rdtext .rdline{font-size:17.5px}
}
/* ── word bank (Kho 10.000 từ) ── */
.lexlv{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:10px 0 8px}
.lexlv button{background:var(--s29);border:2px solid var(--line);border-radius:16px;padding:8px 6px 7px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0}
.lexlv button b{font-family:'Baloo 2',Nunito,sans-serif;font-size:19px;line-height:1.1;color:var(--lc)}
.lexlv button small{font-size:11px;color:var(--ink2);font-weight:800;white-space:nowrap}
.lexlv button .qbar{width:100%;height:5px;margin-top:4px}
.lexlv button .qbar i{background:var(--lc)}
.lexlv button.on{border-color:var(--lc);background:color-mix(in srgb,var(--lc) 10%,var(--s29));box-shadow:0 3px 0 var(--lc)}
.lextopics{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.lextopics::-webkit-scrollbar{display:none}
.lextopics button{white-space:nowrap;flex:none}
.lexact{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 12px}
.lexact .btn{flex:1 1 180px}
.lexact .lexnote{flex-basis:100%;color:var(--ink2);font-weight:700}
.lexrow>div{min-width:0}
.lexrow b{overflow-wrap:anywhere}
.lexrow .lipa{font-weight:600;color:var(--ink2);font-size:13px;margin-left:4px}
.lexrow small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lexrow .lv{margin-left:auto;flex:none;color:#fff;font-weight:900;font-size:12px;border-radius:9px;padding:2px 8px}
@media (max-width:420px){.lexlv{gap:5px}.lexlv button{padding:7px 3px 6px;border-radius:13px}.lexlv button b{font-size:17px}.lexlv button small{font-size:10px}}
/* lettered tile for words with no picture and no emoji */
.pic.lett .lettglyph{font-family:'Baloo 2',Nunito,sans-serif;font-weight:800;font-size:.86em;line-height:1;color:#fff;text-shadow:0 2px 0 rgba(20,40,80,.18),0 3px 8px rgba(20,40,80,.18)}
.pic.big.lett .lettglyph{font-size:clamp(34px,12vw,72px);padding:0 8%;text-align:center;overflow-wrap:anywhere}
.pic.big.lett.long .lettglyph{font-size:clamp(26px,8vw,48px)}
.wordcard.bare{padding-top:10px}
.wordcard.bare .wordline .word{font-size:clamp(34px,9vw,48px)}
.lexcredit{color:var(--ink2);font-size:12px;font-weight:600;margin:16px 4px 4px;line-height:1.5}


/* ══ chế độ tối — bật theo máy, hoặc bật tay trong Hồ sơ ══ */
:root[data-theme="dark"]{
  --bg:#0a1220;--card:#141d30;--ink-d:#eaf1ff;--ink-warm:#ffd98a;--ink-warm2:#ffb163;--ink-red:#ff9b9b;--ink-blue:#7cc4ff;--line:#27334b;--ink:#e8eefb;--ink2:#9cb0d0;
  --green-l:#16301a;--blue-l:#13293d;--red-l:#331b1e;--shadow:0 6px 0 rgba(0,0,0,.38);
  --wood:#c88a52;color-scheme:dark;
  --s1:#2b4157;--s2:#2a4055;--s3:#253e4c;--s4:#2f3d4c;--s5:#233547;--s6:#1e2d3d;--s7:#1e303d;--s8:#213143;--s9:#1f2e3f;--s10:#2f4321;--s11:#1d2b3b;--s12:#202c3b;--s13:#1a2736;--s14:#1b2837;--s15:#1b2937;--s16:#1a2936;--s17:#1a2634;--s18:#192833;--s19:#283b1d;--s20:#2a3b1d;--s21:#192633;--s22:#182431;--s23:#4c4126;--s24:#17222f;--s25:#16212e;--s26:#1e3018;--s27:#16212c;--s28:#594d2c;--s29:#171b24;--s30:#493f24;--s31:#392c1c;--s32:#544d2a;--s33:#40381f;--s34:#3e361e;--s35:#39311c;--s36:#3f381f;--s37:#34301a;--s38:#332e19;--s39:#2c2716;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0a1220;--card:#141d30;--ink-d:#eaf1ff;--ink-warm:#ffd98a;--ink-warm2:#ffb163;--ink-red:#ff9b9b;--ink-blue:#7cc4ff;--line:#27334b;--ink:#e8eefb;--ink2:#9cb0d0;
  --green-l:#16301a;--blue-l:#13293d;--red-l:#331b1e;--shadow:0 6px 0 rgba(0,0,0,.38);
  --wood:#c88a52;color-scheme:dark;
  --s1:#2b4157;--s2:#2a4055;--s3:#253e4c;--s4:#2f3d4c;--s5:#233547;--s6:#1e2d3d;--s7:#1e303d;--s8:#213143;--s9:#1f2e3f;--s10:#2f4321;--s11:#1d2b3b;--s12:#202c3b;--s13:#1a2736;--s14:#1b2837;--s15:#1b2937;--s16:#1a2936;--s17:#1a2634;--s18:#192833;--s19:#283b1d;--s20:#2a3b1d;--s21:#192633;--s22:#182431;--s23:#4c4126;--s24:#17222f;--s25:#16212e;--s26:#1e3018;--s27:#16212c;--s28:#594d2c;--s29:#171b24;--s30:#493f24;--s31:#392c1c;--s32:#544d2a;--s33:#40381f;--s34:#3e361e;--s35:#39311c;--s36:#3f381f;--s37:#34301a;--s38:#332e19;--s39:#2c2716;
}}
/* ảnh minh hoạ vốn có nền trắng: giữ ô sáng để hình không bị "cháy" trên nền tối */
:root[data-theme="dark"] .pic.art,:root[data-theme="dark"] .mcard img,:root[data-theme="dark"] .quad img{background:#f2f7ff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pic.art,:root:not([data-theme="light"]) .mcard img,:root:not([data-theme="light"]) .quad img{background:#f2f7ff}}

/* ── chuyển màn mượt hơn: màn hình mới trôi lên nhẹ, thanh dưới nảy một cái ── */
@keyframes screenIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes navPop{0%{transform:scale(.82)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.screen.on{animation:screenIn .24s cubic-bezier(.2,.8,.3,1) both}
#splash.on{animation:none}
.tab.on{animation:screenIn .2s cubic-bezier(.2,.8,.3,1) both}
#tab-world.on{animation:none}
.navbtn.on .ico{animation:navPop .32s cubic-bezier(.2,.8,.3,1)}
.wrow,.kit,.gcard,.mcard{transition:transform .12s ease,border-color .12s ease}
.wrow:active,.kit:active,.gcard:active,.mcard:active{transform:scale(.985)}
@media (prefers-reduced-motion:reduce){
  .screen.on,.tab.on,.navbtn.on .ico{animation:none}
  .wrow,.kit,.gcard,.mcard{transition:none}
}

/* ── chấm bài nói theo từng từ ── */
.speakres{margin-top:10px}
.scorerow{display:flex;align-items:center;gap:14px;justify-content:center;margin-bottom:10px}
.scorering{--p:0;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:conic-gradient(var(--green) calc(var(--p)*1%),var(--s11) 0)}
.scorering.ok{background:conic-gradient(var(--yellow) calc(var(--p)*1%),var(--s11) 0)}
.scorering.low{background:conic-gradient(var(--red) calc(var(--p)*1%),var(--s11) 0)}
.scorering b{width:58px;height:58px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-family:var(--display);font-size:17px}
.stars{font-size:17px;letter-spacing:2px}
.verdict{font-weight:800;color:var(--ink2);font-size:14px;margin-top:2px;max-width:220px}
.swline{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:8px 0}
.sw{padding:4px 10px;border-radius:11px;font-weight:800;font-size:16px;border:2px solid transparent}
.sw.good{background:var(--green-l);color:var(--green-d);border-color:var(--green)}
.sw.close{background:var(--s35);color:var(--ink-warm);border-color:var(--yellow)}
.sw.miss{background:var(--red-l);color:var(--ink-red);border-color:var(--red)}
.heardline{text-align:center;color:var(--ink2);font-weight:700;font-size:14px;margin-top:2px}
.sptip{background:var(--blue-l);border-radius:14px;padding:9px 12px;margin-top:8px;font-weight:700;font-size:14px;line-height:1.5}
.speakres .row{justify-content:center;margin-top:12px}