/* Ulfa App v5 · styles. White pages, soft grey-blue surfaces, Ulfa colours, chunky rounded type, springy taps. */
@font-face{font-family:Fredoka;font-weight:600;font-display:swap;src:url(fonts/fredoka-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:Fredoka;font-weight:700;font-display:swap;src:url(fonts/fredoka-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:Lilita;font-weight:400;font-display:swap;src:url(fonts/lilita-one-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:UlfaNaskh;font-weight:600;font-display:swap;src:url(fonts/noto-naskh-arabic-arabic-600-normal.woff2) format('woff2')}
@font-face{font-family:UlfaNaskh;font-weight:700;font-display:swap;src:url(fonts/noto-naskh-arabic-arabic-700-normal.woff2) format('woff2')}
@font-face{font-family:NotoAr;font-weight:400;font-display:swap;src:url(fonts/noto-sans-arabic-arabic-400-normal.woff2) format('woff2')}
@font-face{font-family:NotoAr;font-weight:700;font-display:swap;src:url(fonts/noto-sans-arabic-arabic-700-normal.woff2) format('woff2')}
:root{
  --teal:#2F8F83;--coral:#E8664F;--sun:#F2B941;--plum:#7B5BB6;--sky:#4C8FD6;--leaf:#5FA35A;--ink:#2A2733;
  --ink2:#5B5868;--ink3:#8A8797;--bg:#FFFFFF;--surf:#F4F7FB;--surf2:#EAF0F7;--line:#E3EAF3;
  --coral-s:#FDECE8;--teal-s:#E3F3F1;--sun-s:#FEF5DF;--plum-s:#F0EBF8;--sky-s:#E6F0FB;--leaf-s:#E8F4E6;
  --r:24px;--r-lg:32px;--sh:0 2px 0 rgba(42,39,51,.04),0 8px 22px rgba(42,64,110,.10);--sh-lift:0 4px 0 rgba(42,39,51,.04),0 16px 34px rgba(42,64,110,.16);
  --spring:cubic-bezier(.34,1.56,.64,1);--ease:cubic-bezier(.22,.8,.3,1);
  --f:'Fredoka',ui-rounded,'SF Pro Rounded',system-ui,sans-serif;--fh:'Lilita','Fredoka',ui-rounded,system-ui,sans-serif;--far:'NotoAr','Geeza Pro',Tahoma,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--f);font-weight:600;overflow:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer;touch-action:manipulation}
button:disabled{cursor:default}
img{max-width:100%}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:14px}
.en{font-family:var(--f);direction:ltr;unicode-bidi:isolate}
.center{text-align:center}.tiny{font-size:15px;color:var(--ink3);margin:6px 0;text-align:center}
#app{position:fixed;inset:0;overflow:hidden;background:var(--bg)}

/* ---------- screens + page slides ---------- */
.scr{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;background:var(--bg);padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));will-change:transform}
.scr.in-r{animation:inR .32s var(--ease) both}.scr.in-l{animation:inL .32s var(--ease) both}.scr.in-up{animation:inUp .32s var(--ease) both}
.scr.out-l{animation:outL .3s var(--ease) both;pointer-events:none}.scr.out-r{animation:outR .3s var(--ease) both;pointer-events:none}
@keyframes inR{from{transform:translateX(9%);opacity:0}to{transform:none;opacity:1}}
@keyframes inL{from{transform:translateX(-9%);opacity:0}to{transform:none;opacity:1}}
@keyframes inUp{from{transform:translateY(6%);opacity:0}to{transform:none;opacity:1}}
@keyframes outL{to{transform:translateX(-6%);opacity:0}}@keyframes outR{to{transform:translateX(6%);opacity:0}}

/* ---------- taps: press 0.96, spring back, soft shadow lift ---------- */
.tap{transition:transform .32s var(--spring),box-shadow .22s var(--ease),background-color .2s,opacity .2s;will-change:transform}
.tap.down,.tap:active{transform:scale(.96);transition-duration:.12s}
@media (hover:hover){.tap:not(:disabled):hover{box-shadow:var(--sh-lift)}}
.tap:disabled{opacity:.38}
.popin{animation:popin .42s var(--spring)}@keyframes popin{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.yay{animation:yay .5s var(--spring)}@keyframes yay{0%{transform:scale(1)}35%{transform:scale(1.12)}100%{transform:scale(1)}}
.wob{animation:wob .42s var(--ease)}@keyframes wob{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px) rotate(-2deg)}45%{transform:translateX(6px) rotate(2deg)}70%{transform:translateX(-3px)}}
.boing{animation:boing .44s var(--spring)}@keyframes boing{0%{transform:scale(1)}30%{transform:scale(.86,1.08)}60%{transform:scale(1.1,.92)}100%{transform:scale(1)}}
.sing{animation:sing .6s var(--spring)}@keyframes sing{0%{transform:scale(1)}40%{transform:scale(1.14) rotate(-3deg)}100%{transform:scale(1)}}
.bob{animation:bob 3.2s ease-in-out infinite}.bob.d1{animation-delay:-.8s}.bob.d2{animation-delay:-1.6s}.bob.d3{animation-delay:-2.4s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.fade{opacity:.35;transform:scale(.94)}

/* ---------- buttons ---------- */
.ic{display:inline-flex;width:28px;height:28px}.ic svg{width:100%;height:100%}.ui3d{width:30px;height:30px;object-fit:contain}
.rbtn{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;flex:none;box-shadow:var(--sh);background:#fff;color:var(--ink)}
.rbtn .ic{width:30px;height:30px}
.rbtn.soft{background:#fff;border:2px solid var(--line);box-shadow:0 3px 0 var(--line)}
.rbtn.soft .ic{width:26px;height:26px}
.rbtn.play{background:linear-gradient(180deg,#FF8A73,var(--coral));box-shadow:0 5px 0 #C94C38,0 12px 24px rgba(232,102,79,.32);color:#fff}
.rbtn.nav{background:linear-gradient(180deg,#FFD25E,var(--sun));box-shadow:0 5px 0 #D59A1E,0 10px 20px rgba(242,185,65,.3)}
.rbtn.big{width:64px;height:64px}.rbtn.big .ic{width:34px;height:34px}
.rbtn.huge{width:96px;height:96px}.rbtn.huge .ic{width:48px;height:48px}
.rbtn.ghost{background:var(--surf);box-shadow:none;opacity:.8}
.rbtn.slowb{background:#fff;border:2px solid var(--leaf-s);box-shadow:0 4px 0 #CFE6CA}.rbtn.slowb .ic{width:36px;height:36px}
.pill{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:999px;font-size:19px;font-weight:700;background:#fff;box-shadow:var(--sh)}
.pill .ic{width:24px;height:24px}
.pill.go{background:linear-gradient(180deg,#3BA597,var(--teal));color:#fff;box-shadow:0 5px 0 #1F6B62,0 12px 26px rgba(47,143,131,.3)}
.pill.soft{background:#fff;border:2px solid var(--line);box-shadow:0 4px 0 var(--line)}
.pill.big{font-size:21px;padding:16px 28px}.pill.huge{font-size:26px;padding:20px 40px}.pill.huge .ic{width:30px;height:30px}
.row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}

/* ---------- shared top bar ---------- */
.top{display:flex;align-items:center;gap:12px;max-width:1100px;margin:0 auto 14px;min-height:64px}
.top .ttl{flex:1;min-width:0;text-align:center}
.top h1{margin:0;font-family:var(--fh);font-weight:400;font-size:clamp(23px,6.2vw,36px);letter-spacing:.3px;line-height:1.08;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.top .lab,.lab{display:inline-block;font-size:13px;font-weight:700;color:var(--ink2);background:var(--surf);border-radius:999px;padding:4px 12px;margin-bottom:4px}
.buddy{width:60px;height:60px;flex:none;display:flex;align-items:flex-end;justify-content:center}
.buddy .char{width:62px;height:62px;object-fit:contain}
.char{object-fit:contain;display:block}
.big{font-family:var(--fh);font-weight:400;font-size:clamp(30px,8vw,48px);margin:8px 0;text-align:center;line-height:1.1}
.ttl-c{margin-top:22px}

/* ---------- pictures ---------- */
.pic{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.nopic{display:flex;align-items:center;justify-content:center;background:var(--sun-s);border-radius:22px;color:#5B3F00;font-family:var(--fh);font-weight:400;font-size:clamp(26px,7vw,44px);aspect-ratio:1;mix-blend-mode:normal}
.card{position:relative;background:#fff;border-radius:var(--r);box-shadow:var(--sh);border:2px solid #fff;padding:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.card .pic{aspect-ratio:1;height:auto}
.card .wl{font-weight:700;font-size:20px}
.card.lit,.card.heard{border-color:var(--sun)}
.card.mishpick{border-color:var(--plum);border-style:dashed}

/* ---------- splash + pick + first minute ---------- */
.splash{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}
.splash .logo{width:min(300px,64vw);animation:popin .6s var(--spring) both}
.splash .tag{font-size:20px;color:var(--ink2);margin:0}
.boatwave{width:min(300px,70vw);margin:44px 0 10px}
.boat{position:relative;width:100%}.boat .hull{width:100%;display:block;position:relative;z-index:2}
.boat .bmish{position:absolute;left:16%;bottom:38%;width:40%;z-index:1}.boat .bmish .char{width:100%}
.boat.waving .bmish{animation:peek 1.2s var(--spring) .3s both}
@keyframes peek{from{transform:translateY(40%);opacity:0}to{transform:none;opacity:1}}
.boat .waves{position:absolute;left:-10%;width:120%;bottom:-10%;z-index:3;animation:wave 3s ease-in-out infinite}
.boat{animation:rock 3.6s ease-in-out infinite}
@keyframes rock{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(2deg) translateY(-4px)}}
@keyframes wave{0%,100%{transform:translateX(0)}50%{transform:translateX(-4%)}}
.pick{max-width:900px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;justify-content:center}
.kids{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:18px auto 0;max-width:720px}
.kid{background:var(--surf);border-radius:var(--r-lg);padding:16px 10px 14px;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:var(--sh);border:3px solid #fff}
.kid .avatar{width:86%;margin-top:4px}
.kid span{font-size:clamp(22px,5vw,34px);font-weight:700}
.kid.k-tala{background:var(--coral-s)}.kid.k-yazan{background:var(--sky-s)}.kid.k-faisal{background:var(--teal-s)}.kid.k-deema{background:var(--plum-s)}
.avatar{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;overflow:hidden;background:var(--surf);flex:none;border:3px solid #fff;box-shadow:var(--sh)}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar b{font-size:24px}
.avatar.xl{width:100%;height:auto;aspect-ratio:1;border-width:6px}
.hchars .avatar.xl{width:auto;height:72%;align-self:center}
.fm{max-width:820px;margin:0 auto;min-height:100%;display:flex;flex-direction:column}
.hello{text-align:center;transition:transform .32s var(--ease)}
.hello .hchars{display:flex;justify-content:center;align-items:flex-end;gap:4px;height:clamp(150px,30vh,260px)}
.hello .hchars .char{height:100%;width:auto;max-width:48%}
.hello.mini .hchars{height:84px}.hello.mini .big{font-size:26px}
.fmstage{flex:1}

/* ---------- home: the world map + tiles ---------- */
.home{max-width:1180px;margin:0 auto}
.htop{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.me{display:flex;align-items:center;gap:10px;background:var(--surf);border-radius:999px;padding:5px 16px 5px 5px;font-size:19px;font-weight:700;max-width:46%;overflow:hidden}
.me span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--sun-s);border-radius:999px;padding:8px 14px 8px 10px;font-size:19px}.chip .ic{width:24px;height:24px}
.grown{margin-inline-start:auto;position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:6px;background:var(--surf);color:var(--ink2);border-radius:999px;padding:9px 14px;font-size:14px;font-weight:700;touch-action:none}
.grown .ic{width:18px;height:18px}.grown .fill{position:absolute;inset:0;background:rgba(123,91,182,.18);transform:scaleX(0);transform-origin:left}
.grown.hold .fill{transform:scaleX(1);transition:transform 3s linear}
.grown.wide{margin:16px auto 0;padding:14px 22px;font-size:16px}
.home{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
.home .htop{grid-column:1/-1;margin:0}
.mapwrap{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh);background:var(--sky-s);width:100%;max-width:560px;margin:0 auto}
.map{position:relative;width:100%;aspect-ratio:9/16;background-size:100% 100%;background-position:center}
@media(min-width:900px){.home{grid-template-columns:auto 1fr;align-items:stretch}.home .tiles{grid-auto-rows:1fr;align-content:stretch}.home .tile{min-height:0}.home .tile .tart{flex:1;height:auto;min-height:0}.home .tile .tart>*{max-height:150px}.home .tile.hero .tart>*{max-height:190px}.mapwrap{width:auto;height:min(calc(100vh - 110px),1040px);aspect-ratio:9/16;max-width:none}.map{height:100%;width:auto}.home .tiles{grid-template-columns:repeat(2,1fr);margin:0}}
.mapsvg{position:absolute;inset:0;width:100%;height:100%}
.wnode{position:absolute;transform:translate(-50%,-50%);width:21%;aspect-ratio:1}
.wnode.tap.down,.wnode.tap:active{transform:translate(-50%,-50%) scale(.96)}
.wnode .disc{position:relative;width:100%;aspect-ratio:1;border-radius:50%;background:#fff;border:4px solid #fff;box-shadow:0 5px 0 rgba(0,0,0,.08),0 10px 20px rgba(42,64,110,.25);overflow:hidden;display:flex;align-items:center;justify-content:center;outline:3px solid var(--c);outline-offset:-1px;transition:filter .9s var(--ease)}
.wnode .disc img{width:100%;height:100%;object-fit:cover}
.wnode .num{font-family:var(--fh);font-size:30px;color:var(--c)}
.wnode .wname{position:absolute;z-index:2;top:92%;left:50%;transform:translateX(-50%);background:#fff;border-radius:999px;padding:3px 10px;font-size:clamp(11px,2.9vw,15px);font-weight:700;box-shadow:var(--sh);white-space:nowrap}
.wnode.cur .disc{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 5px 0 rgba(0,0,0,.08),0 0 0 0 rgba(242,185,65,.7)}50%{box-shadow:0 5px 0 rgba(0,0,0,.08),0 0 0 12px rgba(242,185,65,0)}}
.wnode.locked .disc{filter:saturate(.25) brightness(1.12)}
.wnode .fog{position:absolute;left:50%;top:30%;width:120%;transform:translateX(-50%);filter:drop-shadow(0 3px 4px rgba(42,64,110,.16));transition:transform 1s var(--ease),opacity 1s var(--ease);pointer-events:none}
.wnode .lk{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);width:32px;height:32px;border-radius:50%;background:var(--plum);display:flex;align-items:center;justify-content:center;box-shadow:var(--sh);transition:opacity .5s}
.wnode .lk .ic{width:20px;height:20px}
.wnode.locked .wname{opacity:.75}
.wnode.unfog .fog{opacity:0;transform:translateX(30%) scale(1.3)}.wnode.unfog .lk{opacity:0}.wnode.unfog .disc{filter:none}
.mapboat{position:absolute;width:22%;transform:translate(40%,-30%);transition:left 1.4s var(--ease),top 1.4s var(--ease);pointer-events:none;z-index:3}
.mapboat.sail{animation:sail 1.2s var(--spring)}@keyframes sail{0%{transform:translate(34%,-10%) scale(.6);opacity:0}100%{transform:translate(34%,-40%) scale(1);opacity:1}}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:620px) and (max-width:899px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px;border-radius:var(--r-lg);background:var(--surf);box-shadow:var(--sh);text-align:start;min-height:168px;overflow:hidden}
.tile .tart{width:100%;height:96px;display:flex;align-items:center;justify-content:center}
.tile .tart .char,.tile .tart .pic,.tile .tart .mmd{height:100%;width:auto;max-width:100%}
.tile .ttx b{display:block;font-size:19px;line-height:1.15}.tile .ttx small{display:block;color:var(--ink2);font-size:14px;margin-top:2px}
.tile.hero{grid-column:span 2;flex-direction:row;align-items:center;min-height:150px;background:linear-gradient(135deg,#3BA597,var(--teal));color:#fff}
.tile.hero .tart{width:38%;height:126px;order:2}.tile.hero .ttx{flex:1}.tile.hero .ttx b{font-family:var(--fh);font-weight:400;font-size:28px}.tile.hero .ttx small{color:rgba(255,255,255,.88);font-size:15px}
.tile.hero .tgo{position:absolute;left:14px;bottom:14px;width:48px;height:48px;border-radius:50%;background:#fff;display:none}
.t-coral{background:var(--coral-s)}.t-teal{background:var(--teal-s)}.t-sky{background:var(--sky-s)}.t-plum{background:var(--plum-s)}.t-sun{background:var(--sun-s)}.t-leaf{background:var(--leaf-s)}

/* ---------- sheet ---------- */
.sheetov{position:fixed;inset:0;z-index:40;background:rgba(42,39,51,0);display:flex;align-items:flex-end;justify-content:center;transition:background .26s var(--ease)}
.sheetov.on{background:rgba(42,39,51,.34)}
.sheet{position:relative;width:100%;max-width:640px;max-height:90vh;overflow-y:auto;background:#fff;border-radius:32px 32px 0 0;padding:22px 18px max(24px,env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .32s var(--ease);text-align:center}
.sheetov.on .sheet{transform:none}.sheetov.off .sheet{transform:translateY(100%)}
@media(min-width:700px){.sheetov{align-items:center}.sheet{border-radius:32px}}
.shx{position:absolute;top:12px;right:12px;width:46px;height:46px}.shx svg{width:24px;height:24px}
.sheet h2{font-family:var(--fh);font-weight:400;font-size:28px;margin:6px 0 4px}
.wart{border-radius:24px;overflow:hidden;aspect-ratio:16/9;background:var(--surf);margin-top:34px}.wart img,.wart svg{width:100%;height:100%;object-fit:cover;display:block}
.wunits{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 18px}
.wunit{background:var(--surf);border-radius:20px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:16px;font-weight:700}
.wunit img,.wunit .pic{width:84px;height:84px;object-fit:contain;border-radius:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0 18px}

/* ---------- flashcards ---------- */
.cats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:1100px;margin:0 auto}
@media(min-width:700px){.cats{grid-template-columns:repeat(3,1fr)}}@media(min-width:1000px){.cats{grid-template-columns:repeat(4,1fr)}}
.cat{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh);border:2px solid var(--line);padding:10px 10px 12px;display:flex;flex-direction:column;align-items:center;gap:4px;overflow:hidden}
.cat .cart{width:100%;aspect-ratio:1;border-radius:22px;overflow:hidden;background:color-mix(in srgb,var(--c,#4C8FD6) 12%,#fff);display:flex;align-items:center;justify-content:center}
.cat .cart>img{width:100%;height:100%;object-fit:cover}
.cmix{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;width:92%;height:92%;gap:2px}
.cmix .pic:first-child{grid-column:span 2;justify-self:center;width:60%}
.cat b{font-size:19px;margin-top:6px;text-align:center;line-height:1.15}.cat small{color:var(--ink3);font-size:14px}
.wgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:1000px;margin:0 auto}
@media(min-width:700px){.wgrid{grid-template-columns:repeat(3,1fr)}}@media(min-width:1000px){.wgrid{grid-template-columns:repeat(4,1fr)}}
.wtile{position:relative;background:#fff;border-radius:var(--r);box-shadow:var(--sh);border:2px solid var(--line);padding:10px 10px 12px;display:flex;flex-direction:column;align-items:center;gap:4px}
.wtile .pic{aspect-ratio:1;height:auto}
.wtile b{font-size:21px;color:var(--coral)}
.goldb{position:absolute;top:8px;right:8px}.goldb .ic{width:26px;height:26px}
.fc{max-width:560px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:18px}
.fcard3d{width:100%;background:#fff;border-radius:var(--r-lg);border:2px solid var(--line);box-shadow:var(--sh-lift);padding:18px 18px 14px;text-align:center;touch-action:pan-y}
.fcard3d.flipr{animation:flipR .32s var(--ease)}.fcard3d.flipl{animation:flipL .32s var(--ease)}
@keyframes flipR{from{transform:perspective(900px) rotateY(-28deg) translateX(16%);opacity:0}to{transform:none;opacity:1}}
@keyframes flipL{from{transform:perspective(900px) rotateY(28deg) translateX(-16%);opacity:0}to{transform:none;opacity:1}}
.fpic{width:100%;aspect-ratio:1;max-height:48vh;display:flex;align-items:center;justify-content:center}
.fword{font-family:var(--fh);font-weight:400;font-size:clamp(40px,11vw,64px);margin:8px 0 2px;color:var(--coral);letter-spacing:.5px}
.fcount{color:var(--ink3);font-size:14px;margin:0;text-align:center}
.fctl{display:flex;align-items:center;justify-content:center;gap:18px}

/* ---------- session ---------- */
.sess{max-width:900px;margin:0 auto;min-height:100%;display:flex;flex-direction:column}
.shead{display:flex;align-items:center;gap:10px}
.path{flex:1;display:flex;justify-content:center;align-items:center;gap:clamp(4px,1.6vw,10px);margin:0;padding:0;list-style:none}
.path li i{display:block;width:clamp(16px,4.2vw,26px);aspect-ratio:1.3;border-radius:50%;background:var(--surf2);box-shadow:inset 0 -3px 0 rgba(0,0,0,.06);transition:background .3s,transform .3s var(--spring)}
.path li.done i{background:var(--teal)}.path li.now i{background:var(--sun);transform:scale(1.3)}
.stitle{text-align:center;margin:10px 0 4px}.sname{display:block;font-family:var(--fh);font-size:clamp(26px,7vw,38px)}.sub{display:block;color:var(--ink2);font-size:16px;min-height:20px}
.stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:14px;position:relative;padding:6px 0 18px}
.stage.enter>*{animation:inUp .32s var(--ease) both}
.stage.solo{max-width:900px;margin:0 auto}
.nextstep{margin:14px auto 0}
.cue{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;flex-wrap:wrap}
.cuelab{font-size:18px;color:var(--ink2)}
.count{font-size:15px;color:var(--ink3);background:var(--surf);border-radius:999px;padding:4px 10px}.count.solo{display:block;margin:0 auto}
.snd{font-family:var(--fh);font-size:30px;color:var(--coral);background:var(--coral-s);border-radius:16px;padding:0 12px;line-height:1.3}
.choices{display:grid;gap:14px;width:100%;max-width:700px}
.choices.n2{grid-template-columns:repeat(2,1fr);max-width:560px}.choices.n3{grid-template-columns:repeat(3,1fr)}.choices.n4{grid-template-columns:repeat(2,1fr)}
@media(max-width:480px){.choices.n3{grid-template-columns:repeat(3,1fr);gap:10px}.choices.n3 .card{padding:6px}}
.mish.side{align-self:flex-end;width:92px;margin-top:-8px}.mish .char{width:100%}
.hello .big span{color:var(--coral)}
.meet{width:100%;max-width:700px}.meet .grid3{margin:4px 0}
.friend{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}
.fcard{display:flex;flex-direction:column;align-items:center;gap:8px}
.letter{width:clamp(150px,40vw,210px);aspect-ratio:1;border-radius:44px;background:#fff;border:3px solid var(--coral-s);box-shadow:var(--sh-lift);display:flex;align-items:center;justify-content:center}
.letter b{font-family:var(--fh);font-weight:400;font-size:clamp(90px,26vw,140px);color:var(--coral);line-height:1}
.fcard.ears .letter{border-color:var(--sky-s)}.letter .ic{width:60%;height:60%}
.act{font-size:20px;margin:0;text-align:center}
.anchors{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;max-width:460px}
.tricky{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.gold-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.tword{min-width:110px;padding:18px 22px;border-radius:24px;background:linear-gradient(180deg,#FFE28A,var(--sun));box-shadow:0 5px 0 #D59A1E,0 10px 20px rgba(242,185,65,.3)}
.tword b{font-family:var(--fh);font-weight:400;font-size:44px;color:#5B3F00}
.tword.plain{background:#fff;box-shadow:var(--sh);border:2px solid var(--line)}.tword.plain b{color:var(--ink)}
.rhymeq{width:120px;height:120px;background:var(--surf);border-radius:28px;padding:10px}
.looks{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.bigcard{width:min(340px,80vw);background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-lift);border:2px solid var(--line);padding:16px;display:flex;flex-direction:column;align-items:center}
.bigcard .pic{aspect-ratio:1;height:auto}.bigcard .wl{font-family:var(--fh);font-size:44px;color:var(--coral);transition:opacity .3s}.wl.hid{opacity:0}
.saybub{display:flex;align-items:center;gap:6px}.saybub .char{width:70px}.saybub span{background:var(--sun-s);border-radius:18px;padding:8px 14px;font-size:20px}
.lookv{position:relative;width:min(320px,70vw);aspect-ratio:9/16;border-radius:28px;overflow:hidden;background:var(--surf);box-shadow:var(--sh-lift)}
.lookv video{width:100%;height:100%;object-fit:cover;display:block}
.vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.vplay.tap.down{transform:translate(-50%,-50%) scale(.96)}.vplay.gone{opacity:0;pointer-events:none}
.bye{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;max-width:640px;margin:0 auto;text-align:center}
.sticker-pop{position:relative;width:clamp(150px,40vw,210px);aspect-ratio:1;border-radius:50%;background:#fff;border:8px solid #fff;box-shadow:0 0 0 4px var(--sun),var(--sh-lift);display:flex;align-items:center;justify-content:center;overflow:hidden;animation:sticker .7s var(--spring) both}
.sticker-pop .pic{width:84%;height:84%}.sticker-pop>.ic,.sticker-pop>.ui3d{width:62%;height:62%}
@keyframes sticker{0%{transform:scale(.2) rotate(-25deg);opacity:0}70%{transform:scale(1.08) rotate(4deg);opacity:1}100%{transform:scale(1) rotate(0)}}
.shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.75) 45%,transparent 60%);transform:translateX(-100%);animation:shine 2.6s ease-in-out 1s infinite}
@keyframes shine{0%{transform:translateX(-100%)}40%,100%{transform:translateX(100%)}}
.goldst{box-shadow:0 0 0 6px #F2B941,0 0 0 12px #FFE28A,var(--sh-lift)}
.gift{display:flex;align-items:center;gap:10px;background:var(--plum-s);border-radius:999px;padding:8px 16px;margin:2px 0;font-size:17px}
.gift .acci{width:34px;height:34px}.gift .ic{width:26px;height:26px}
.pcard{background:var(--surf);border-radius:var(--r);padding:14px 18px;text-align:start;font-family:var(--far);font-weight:400;font-size:16px;line-height:1.7;width:100%;max-width:640px;margin-top:10px}
.pcard h3{margin:0 0 4px;font-size:17px;font-weight:700;color:var(--teal)}.pcard p{margin:4px 0}.pcard .note{color:var(--ink2);font-size:14px}

/* Echo Stones */
.pond{position:relative;width:100%;max-width:760px;border-radius:var(--r-lg);background:linear-gradient(180deg,#EAF4FF,#D6E9FB);padding:120px 16px 22px;overflow:hidden;box-shadow:inset 0 -6px 0 rgba(76,143,214,.12)}
.reveal{position:absolute;left:50%;top:10px;width:110px;height:110px;transform:translateX(-50%) scale(.4);opacity:0;transition:transform .42s var(--spring),opacity .3s;background:#fff;border-radius:26px;padding:8px;box-shadow:var(--sh)}
.pond.said .reveal{transform:translateX(-50%) scale(1);opacity:1}
.stones{display:flex;justify-content:center;gap:clamp(10px,3vw,22px);position:relative;z-index:1}
.stone{width:clamp(76px,22vw,118px);aspect-ratio:1.25;border-radius:50% 50% 46% 46%;background:radial-gradient(ellipse at 40% 30%,#FFFFFF,#E3E9F1 60%,#C9D3E0);box-shadow:0 8px 0 #AFBBCB,0 14px 18px rgba(42,64,110,.16);display:flex;align-items:center;justify-content:center}
.stone b{font-family:var(--fh);font-weight:400;font-size:clamp(34px,9vw,52px);color:var(--ink)}
.stone.done{background:radial-gradient(ellipse at 40% 30%,#fff,#DDF0EA 60%,#B6DCD3)}
.stone.lit{background:radial-gradient(ellipse at 40% 30%,#FFF7DA,#FFE28A 60%,#F2B941);box-shadow:0 8px 0 #D59A1E,0 14px 22px rgba(242,185,65,.35)}
.stone.lit b{color:#5B3F00}
.hopper{position:absolute;left:0;top:0;width:68px;transition:transform .4s var(--spring);z-index:2;transform:translate(-80px,40px)}
.hopper .char{width:100%}.hopper.hopup{animation:hopup .4s var(--spring)}@keyframes hopup{0%{margin-top:-20px}100%{margin-top:0}}
.slide{position:relative;margin:26px auto 0;max-width:520px;height:66px;border-radius:999px;background:#fff;box-shadow:inset 0 3px 0 rgba(0,0,0,.05),var(--sh);opacity:.55;transition:opacity .3s}
.slide.ready{opacity:1}
.slide .track{position:absolute;inset:8px;border-radius:999px;overflow:hidden;background:var(--surf)}.slide .trail{display:block;height:100%;width:0;background:linear-gradient(90deg,#FFE28A,var(--sun));border-radius:999px}
.slide .knob{position:absolute;left:5px;top:5px;width:56px;height:56px;border-radius:50%;background:linear-gradient(180deg,#3BA597,var(--teal));box-shadow:0 4px 0 #1F6B62;touch-action:none;display:flex;align-items:center;justify-content:center}
.slide .knob svg{width:28px;height:28px}
/* Teach Mishmish */
.teach{position:relative;width:100%;max-width:700px;padding-bottom:110px}
.mishwalk{position:absolute;left:0;top:0;width:clamp(76px,20vw,110px);transform:translate(-140px,150px);transition:transform .6s var(--spring);z-index:3;pointer-events:none}
.mishwalk .char{width:100%}.mishwalk .bubble{position:absolute;top:-6px;right:-8px;width:34px;height:34px;border-radius:50%;background:#fff;box-shadow:var(--sh);display:flex;align-items:center;justify-content:center;font-size:20px;opacity:0;transition:opacity .2s}
.mishwalk.oops .bubble{opacity:1}.mishwalk.thanks .char{animation:yay .5s var(--spring) 2}
/* Sound Hunt */
.scene{position:relative;width:100%;max-width:900px;aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden;background-size:cover;background-position:center;box-shadow:var(--sh)}
@media(max-width:600px){.scene{aspect-ratio:4/5}}
.scenesvg{position:absolute;inset:0;width:100%;height:100%}
.hdisc{position:absolute;transform:translate(-50%,-50%);width:clamp(68px,17%,120px);aspect-ratio:1;border-radius:50%;background:#fff;border:4px solid #fff;box-shadow:0 6px 16px rgba(42,64,110,.22);padding:6px;animation:float 4s ease-in-out infinite;animation-delay:var(--d)}
@media(max-width:600px){.hdisc{width:23%}}
.hdisc.tap.down{transform:translate(-50%,-50%) scale(.96)}
.hdisc.got{border-color:var(--sun);box-shadow:0 0 0 5px rgba(242,185,65,.45),0 6px 16px rgba(42,64,110,.22)}
@keyframes float{0%,100%{margin-top:0}50%{margin-top:-6px}}
.found{display:flex;gap:10px;justify-content:center}.found i{width:22px;height:22px;border-radius:50%;background:var(--surf2);transition:background .3s,transform .3s var(--spring)}.found i.on{background:var(--sun);transform:scale(1.2)}
/* Build It */
.build{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%}
.bpic{width:clamp(130px,34vw,190px);aspect-ratio:1;background:#fff;border-radius:30px;box-shadow:var(--sh);padding:10px;transition:transform .4s var(--spring)}
.bpic .char{width:100%;height:100%}
.build.made .bpic{transform:scale(1.08)}
.slots{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.slot{width:clamp(58px,16vw,84px);aspect-ratio:1;border-radius:20px;border:3px dashed #C7D2E0;background:var(--surf);display:flex;align-items:center;justify-content:center}
.slot b,.ltile b{font-family:var(--fh);font-weight:400;font-size:clamp(34px,9vw,48px)}
.slot.in{border-style:solid;border-color:var(--teal);background:var(--teal-s)}
.ltiles{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.ltile{width:clamp(58px,16vw,84px);aspect-ratio:1;border-radius:20px;background:linear-gradient(180deg,#fff,#F0F4FA);box-shadow:0 5px 0 #C9D3E0,0 10px 18px rgba(42,64,110,.12);display:flex;align-items:center;justify-content:center;touch-action:none}
.ltile.lift{z-index:5;box-shadow:0 14px 26px rgba(42,64,110,.25);transition:none}
.ltile.used{opacity:0;pointer-events:none}
/* Draw and Write */
.drawbox{position:relative;width:100%;max-width:560px;aspect-ratio:4/5;max-height:56vh;background:#fff;border-radius:var(--r-lg);border:2px solid var(--line);box-shadow:var(--sh);touch-action:none;overflow:hidden}
.drawbox canvas{position:absolute;inset:0;touch-action:none}
.tracesvg{position:absolute;left:0;top:0;width:100px;height:150px;opacity:0;pointer-events:none}
.tracesvg path{fill:none;stroke:#000}
.drawtools{position:absolute;right:10px;top:10px}.drawtools .rbtn{width:48px;height:48px}.drawtools .ic{width:24px;height:24px}
.drawtools .rbtn .ic svg path{stroke:var(--ink2)}
.drawok{position:absolute;left:50%;top:50%;width:120px;height:120px;transform:translate(-50%,-50%) scale(0);transition:transform .5s var(--spring)}.drawok .ic{width:100%;height:100%}
.drawbox.ok .drawok{transform:translate(-50%,-50%) scale(1)}
.famdot{width:18px;height:18px;border-radius:50%}
/* Clap */
.clap{display:flex;flex-direction:column;align-items:center;gap:14px}.cpic{width:170px;height:170px;background:#fff;border-radius:30px;box-shadow:var(--sh);padding:10px}
.beats{display:flex;gap:10px}.beats i{width:26px;height:26px;border-radius:50%;background:var(--surf2);transition:background .2s,transform .3s var(--spring)}.beats i.on{background:var(--coral);transform:scale(1.2)}
.clapbtn{width:110px;height:110px;border-radius:50%;background:linear-gradient(180deg,#FFD25E,var(--sun));box-shadow:0 6px 0 #D59A1E,0 12px 24px rgba(242,185,65,.3);display:flex;align-items:center;justify-content:center}.clapbtn .ic{width:64px;height:64px}
/* sparkles + confetti + celebrations */
.spark{position:fixed;width:26px;height:26px;margin:-13px 0 0 -13px;z-index:60;pointer-events:none;animation:spark .8s var(--ease) forwards}
.spark svg{width:100%;height:100%}
@keyframes spark{0%{transform:rotate(var(--a)) translateY(0) scale(.4);opacity:1}100%{transform:rotate(var(--a)) translateY(-90px) scale(1);opacity:0}}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:70;overflow:hidden}
.confetti i{position:absolute;top:-20px;width:10px;height:16px;border-radius:3px;animation:conf 1.7s var(--ease) forwards}
@keyframes conf{to{transform:translate(var(--dx),110vh) rotate(var(--r))}}
.celebrate{position:fixed;inset:0;z-index:65;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;padding:20px;animation:inUp .3s var(--ease)}
.celebrate.bye{opacity:0;transition:opacity .25s}
.celc{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.celc h2{font-family:var(--fh);font-weight:400;font-size:clamp(34px,9vw,54px);margin:6px 0}
.celart{display:flex;gap:8px;height:clamp(180px,34vh,300px)}.celart .char{height:100%;width:auto;animation:popin .6s var(--spring) both}
.spell{font-family:var(--fh);font-size:46px;letter-spacing:10px;color:var(--sky)}
.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 20px;border-radius:999px;font-size:16px;z-index:80;animation:inUp .3s var(--ease);max-width:90vw;text-align:center}
.toast[dir=rtl]{font-family:var(--far)}

/* ---------- games corner art ---------- */
.stonesart{display:flex;gap:6px}.stonesart i{width:52px;height:44px;border-radius:50%;background:radial-gradient(ellipse at 40% 30%,#fff,#E3E9F1 60%,#C9D3E0);box-shadow:0 5px 0 #AFBBCB;font-style:normal;font-family:var(--fh);font-size:28px;display:flex;align-items:center;justify-content:center}
.tiles3 i{border-radius:14px;width:46px;height:46px;background:#fff;box-shadow:0 4px 0 #C9D3E0}
.pairart{display:flex;width:90%;gap:6px}.pairart .pic{width:50%}
.drawart{font-family:var(--fh);font-size:110px;color:var(--plum);line-height:1;-webkit-text-stroke:0}
.game .cart{background:var(--surf)}.g-stones .cart{background:var(--sky-s)}.g-teach .cart{background:var(--plum-s)}.g-which .cart{background:var(--coral-s)}.g-hunt .cart{background:var(--sun-s)}.g-build .cart{background:var(--teal-s)}.g-draw .cart{background:var(--leaf-s)}
.game .cart .char{height:80%;width:auto}.g-hunt .cart .pic{width:70%;height:70%}

/* ---------- cinema ---------- */
.cinema{max-width:1100px;margin:0 auto}
.shelf{font-family:var(--fh);font-weight:400;font-size:24px;margin:16px 4px 10px}
.shelfrow{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;padding:4px 4px 14px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.shelfrow::-webkit-scrollbar{display:none}
.ep,.story{position:relative;flex:none;width:min(260px,64vw);scroll-snap-align:start;display:flex;flex-direction:column;gap:4px;text-align:start}
.ep.tall{width:min(150px,38vw)}
.poster{position:relative;display:block;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:var(--surf);box-shadow:var(--sh)}
.ep.tall .poster{aspect-ratio:9/16}
.poster img{width:100%;height:100%;object-fit:cover;display:block}
.pbadge{position:absolute;right:10px;bottom:10px;width:44px;height:44px;border-radius:50%;background:linear-gradient(180deg,#FF8A73,var(--coral));display:flex;align-items:center;justify-content:center;box-shadow:0 3px 0 #C94C38}
.pbadge .ic{width:24px;height:24px}
.ep.locked .poster img{filter:saturate(.3) brightness(1.15);opacity:.7}.ep.locked .pbadge{background:var(--plum);box-shadow:0 3px 0 #5A3F8E}
.ep b,.story b{font-size:17px;line-height:1.2;padding:0 4px}.ep small,.story small{color:var(--ink3);font-size:14px;padding:0 4px}
.story{width:min(180px,44vw)}
.sart{display:block;aspect-ratio:1;background:#fff;border:2px solid var(--line);border-radius:22px;box-shadow:var(--sh);padding:12px}
.story.locked .sart{opacity:.45}.story .lk{position:absolute;right:8px;top:8px;width:36px;height:36px;border-radius:50%;background:var(--plum);display:flex;align-items:center;justify-content:center}.story .lk .ic{width:20px;height:20px}
.dots3{display:flex;gap:6px;padding:2px 4px}.dots3 i{width:12px;height:12px;border-radius:50%;background:var(--surf2)}.dots3 i.on{background:var(--sun)}
.dots3.big{justify-content:center}.dots3.big i{width:22px;height:22px}
.watch{max-width:980px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:12px}
.player{width:100%;border-radius:24px;overflow:hidden;background:#0d0f14;box-shadow:var(--sh-lift)}
.player video{width:100%;display:block;max-height:70vh;background:#0d0f14}
.watch.tall .player{width:min(420px,88vw)}
.reader{max-width:640px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:16px}
.rpage{width:100%;background:#fff;border:2px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lift);padding:18px;text-align:center}
.rpage.flipr{animation:flipR .32s var(--ease)}.rpage.flipl{animation:flipL .32s var(--ease)}
.rpic{width:100%;aspect-ratio:1;max-height:42vh;display:flex;justify-content:center}
.rline{font-family:var(--fh);font-weight:400;font-size:clamp(30px,8vw,44px);line-height:1.5;margin:10px 0 0;direction:ltr}
.rw{border-radius:12px;padding:0 4px;transition:background .15s,color .15s,transform .3s var(--spring)}
.rw.lit{background:var(--sun);color:#3d2a00;transform:scale(1.08)}
/* ---------- majlis night page ---------- */
.majlis{max-width:900px;margin:0 auto}
.mhero{display:flex;justify-content:center;align-items:flex-end;height:clamp(140px,28vh,240px);gap:0}.mhero .char{height:100%;width:auto;max-width:26%}
.majlis h2{font-family:var(--fh);font-weight:400;font-size:26px;margin:14px 0 8px}
.wchips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.wchip{display:flex;flex-direction:column;align-items:center;width:96px;background:#fff;border:2px solid var(--line);border-radius:20px;padding:6px;box-shadow:var(--sh)}
.wchip .pic{width:72px;height:72px}.wchip b{font-size:15px}
/* ---------- album ---------- */
.album{max-width:1000px;margin:0 auto}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.badge{display:flex;align-items:center;gap:8px;background:var(--surf);border-radius:18px;padding:10px;font-size:14px;opacity:.55;filter:grayscale(1)}
.badge.on{opacity:1;filter:none;background:var(--sun-s)}.badge .ic{width:32px;height:32px;flex:none}.badge .char{width:34px;height:34px;flex:none}
.stgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(min-width:700px){.stgrid{grid-template-columns:repeat(6,1fr)}}
.st{position:relative;aspect-ratio:1;border-radius:50%;background:#fff;border:4px solid #fff;box-shadow:var(--sh);padding:8px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center}
.st .pic{width:80%;height:80%}.st small{position:absolute;bottom:4px;font-size:11px;color:var(--ink2);background:rgba(255,255,255,.85);border-radius:999px;padding:0 6px;max-width:90%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.st.empty{background:var(--surf);box-shadow:inset 0 2px 6px rgba(0,0,0,.06)}.st.empty .pic{filter:grayscale(1);opacity:.16}
.st.gold{box-shadow:0 0 0 4px var(--sun),var(--sh)}
/* ---------- wardrobe ---------- */
.wardrobe{max-width:900px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:14px}
.mstage{width:min(300px,70vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 60%,var(--leaf-s),#fff 70%)}
.mmd{position:relative;display:inline-block;aspect-ratio:1}.mmd img{width:100%;height:100%;object-fit:contain;display:block}.mmd .acc{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mmd.big{width:100%;height:100%}
.items{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%}
@media(min-width:700px){.items{grid-template-columns:repeat(7,1fr)}}
.item{background:#fff;border:3px solid var(--line);border-radius:22px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:var(--sh)}
.item .acci,.item>svg{width:44px;height:44px}.item>svg path{stroke:var(--ink3)}
.item small{font-size:12px;color:var(--ink2);display:flex;align-items:center;gap:2px;text-align:center;line-height:1.1}.item small svg{width:14px;height:14px}
.item.on{border-color:var(--teal);background:var(--teal-s)}.item.locked{background:var(--surf);box-shadow:none}.item.locked .acci{filter:grayscale(1);opacity:.35}

/* ---------- parent gate + parent area (Arabic) ---------- */
.ov{position:fixed;inset:0;z-index:90;background:rgba(42,39,51,0);display:flex;align-items:center;justify-content:center;padding:16px;transition:background .25s;font-family:var(--far)}
.ov.on{background:rgba(42,39,51,.45)}
.ovc{background:#fff;border-radius:28px;padding:20px;width:100%;max-width:380px;box-shadow:var(--sh-lift);text-align:center;animation:popin .34s var(--spring)}
.ovc h2{margin:0;font-size:22px}.ovc p{font-size:18px}
.ans{font-family:var(--f);font-size:36px;min-height:48px;letter-spacing:6px;background:var(--surf);border-radius:16px;margin:6px 0 12px}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.keys button{height:62px;border-radius:18px;background:var(--surf);font-family:var(--f);font-size:26px;font-weight:700;display:flex;align-items:center;justify-content:center}
.keys button[data-k=ok]{background:var(--teal);color:#fff}.keys .i{width:28px;height:28px;stroke:#fff}
.ib{width:44px;height:44px;border-radius:50%;background:var(--surf);display:inline-flex;align-items:center;justify-content:center;flex:none}
.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pa{position:fixed;inset:0;z-index:85;background:#fff;overflow-y:auto;overflow-x:hidden;font-family:var(--far);font-weight:400;-webkit-user-select:text;user-select:text;transform:translateY(4%);opacity:0;transition:transform .3s var(--ease),opacity .3s}
.pa.on{transform:none;opacity:1}.pa.bye{transform:translateY(4%);opacity:0}
.phead{position:sticky;top:0;z-index:2;background:#fff;display:flex;align-items:center;gap:12px;padding:max(12px,env(safe-area-inset-top)) 16px 10px;border-bottom:1px solid var(--line)}
.phead .logo{height:34px}.phead h1{flex:1;margin:0;font-size:20px;font-weight:700}
.ptabs{display:flex;gap:8px;overflow-x:auto;padding:10px 16px;scrollbar-width:none;position:sticky;top:57px;background:#fff;z-index:2}
.ptabs::-webkit-scrollbar{display:none}
.ptabs button{flex:none;font-family:var(--far);font-size:15px;font-weight:700;padding:9px 14px;border-radius:999px;background:var(--surf);color:var(--ink2)}
.ptabs button.on{background:var(--teal);color:#fff}
.pbody{padding:6px 16px 40px}.pclr{max-width:760px;margin:0 auto}
.box{background:#fff;border:1px solid var(--line);border-radius:22px;padding:16px;margin:12px 0;box-shadow:0 4px 14px rgba(42,64,110,.05)}
.box h2{font-size:19px;margin:4px 0 8px}.box p{line-height:1.75;margin:6px 0}.box ul,.box ol{padding-inline-start:22px;line-height:1.8;margin:6px 0}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;color:var(--teal);background:var(--teal-s);border-radius:999px;padding:3px 10px}
.note{color:var(--ink2);font-size:14px}
.prow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.prow.sp{justify-content:space-between}.grow{flex:1;min-width:0}
.status{display:flex;align-items:center;gap:12px;background:var(--surf);border-radius:18px;padding:12px 14px;margin:8px 0;flex-wrap:wrap;line-height:1.6}
.status.ok{background:var(--teal-s)}.status.sun{background:var(--sun-s);color:#5B4300}
.status .i{width:26px;height:26px;flex:none}
.pbtn{display:inline-flex;align-items:center;gap:8px;font-family:var(--far);font-weight:700;font-size:15px;padding:11px 16px;border-radius:999px;background:var(--teal);color:#fff}
.pbtn.c{background:var(--coral)}.pbtn.l{background:var(--surf);color:var(--ink)}.pbtn.d{background:#C8473A}.pbtn:disabled{opacity:.5}
.pbtn .i{width:18px;height:18px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.stat{background:var(--surf);border-radius:16px;padding:10px;text-align:center}.stat b{display:block;font-family:var(--f);font-size:28px}.stat span{font-size:13px;color:var(--ink2)}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:8px 0;text-align:center;font-size:12px;color:var(--ink2)}
.week i{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--surf);margin:0 auto 4px}
.week .on i{background:var(--teal)}.week i svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:3}.week .now{color:var(--ink);font-weight:700}
.wchips2{display:flex;flex-wrap:wrap;gap:8px}
.wchip2{position:relative;display:inline-flex;align-items:center;gap:6px;background:var(--surf);border-radius:999px;padding:4px 12px 4px 4px;font-family:var(--f);font-weight:600;font-size:15px}
.wchip2 img{width:30px;height:30px;border-radius:50%;object-fit:contain;background:#fff}.wchip2 .g{width:10px;height:10px;border-radius:50%;background:var(--sun)}
.say{background:var(--sun-s);border-radius:14px;padding:8px 12px}
.ladder{display:flex;flex-direction:column;gap:10px}
.lv{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:18px;background:var(--surf);border-inline-start:6px solid var(--c)}
.lv .n{width:38px;height:38px;border-radius:50%;background:#fff;color:var(--c);display:flex;align-items:center;justify-content:center;font-family:var(--f);font-size:20px;flex:none}
.lv.cur{background:#fff;box-shadow:0 0 0 2px var(--c)}.lv.done .n{background:var(--c);color:#fff}
.lv p{margin:4px 0;font-size:14px}.lv .gate{color:var(--ink2);font-size:13px}
.units{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.un{display:flex;align-items:center;gap:8px;background:#fff;border-radius:14px;padding:6px;border:1px solid var(--line)}
.un img{width:40px;height:40px;object-fit:contain;border-radius:10px;flex:none}.un b{display:block;font-size:14px}.un small{font-size:12px;color:var(--ink2)}
.un.cur{border-color:var(--sun);background:var(--sun-s)}.un.done{border-color:var(--teal-s);background:var(--teal-s)}
.steps{list-style:none;padding:0!important;margin:0}.steps li{display:grid;grid-template-columns:52px 1fr;gap:2px 10px;padding:8px 0;border-bottom:1px dashed var(--line)}
.steps .t{grid-row:span 2;font-weight:700;color:var(--teal)}.steps span{font-size:14px;color:var(--ink2)}
.tip{display:flex;gap:12px;align-items:flex-start;background:var(--surf);border-radius:16px;padding:12px;margin:8px 0}
.tip .ic{width:36px;height:36px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.tip h3{margin:0 0 4px;font-size:16px}.tip p{margin:0;font-size:15px}.tip.c{background:var(--coral-s)}.tip.s{background:var(--sun-s)}
.field{margin:10px 0}.field label{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
.inp{width:100%;font-family:var(--far);font-size:17px;padding:12px 14px;border-radius:14px;border:2px solid var(--line);background:#fff}
.inp.ltr{direction:ltr;text-align:left;font-family:var(--f)}
.code input{width:100%;font-family:var(--f);font-size:34px;letter-spacing:12px;text-align:center;padding:10px;border-radius:16px;border:2px solid var(--line);direction:ltr}
.krow{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.krow .nm{flex:1;min-width:0}.krow small{display:block;color:var(--ink2);font-size:13px}
.ck{cursor:pointer}.ck input{width:24px;height:24px;flex:none;accent-color:var(--teal)}
.pill.ok,.pill.loc{font-size:12px;padding:4px 10px;box-shadow:none;font-family:var(--far)}.pill.ok{background:var(--teal-s);color:var(--teal)}.pill.loc{background:var(--surf);color:var(--ink2)}
.avpick{display:flex;gap:10px;flex-wrap:wrap}.avpick button{border-radius:50%;padding:3px;border:3px solid transparent}.avpick button.on{border-color:var(--teal)}
.opts{display:flex;gap:8px;flex-wrap:wrap}.opts button{font-family:var(--far);font-size:14px;font-weight:700;padding:9px 14px;border-radius:999px;background:var(--surf);display:inline-flex;align-items:center;gap:6px}.opts button.on{background:var(--teal);color:#fff}
.opts .i{width:16px;height:16px}
.setrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.setrow small{display:block;color:var(--ink2);font-size:13px}
.range{width:min(240px,100%);accent-color:var(--teal);height:30px}
.bar2{height:10px;border-radius:999px;background:var(--surf);overflow:hidden;margin:8px 0}.bar2 i{display:block;height:100%;width:0;background:var(--teal);transition:width .3s}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .bob,.boat,.hdisc,.wnode.cur .disc,.shine{animation:none!important}
}

/* ---------- tablets: everything a size up ---------- */
@media(min-width:760px){
  .choices{max-width:860px}.choices.n2{max-width:720px}.card .wl{font-size:26px}
  .cuelab{font-size:22px}.sub{font-size:19px}.top h1{font-size:40px}.buddy,.buddy .char{width:76px;height:76px}
  .rbtn.huge{width:116px;height:116px}.rbtn.huge .ic{width:58px;height:58px}.rbtn.big{width:74px;height:74px}
  .tile .ttx b{font-size:22px}.tile .tart{height:120px}.tile{min-height:200px}.tile.hero .tart{height:150px}
  .hello .hchars{height:300px}.hello.mini .hchars{height:120px}.hello.mini .big{font-size:34px}
  .pill.big{font-size:24px;padding:18px 32px}
  .stone{width:130px}.pond{padding-top:150px}.reveal{width:140px;height:140px}
}

/* 3D round icons fill their round buttons */
.rbtn.play:has(>.ui3d),.rbtn.nav:has(>.ui3d){background:none;box-shadow:none;border:0;filter:drop-shadow(0 6px 10px rgba(42,64,110,.22))}
.rbtn.play>.ui3d,.rbtn.nav>.ui3d{width:100%;height:100%}
.rbtn.nav:disabled{opacity:.3}
.cue .rbtn.play:has(>.ui3d){background:linear-gradient(180deg,#FFF,#F4F7FB);box-shadow:0 4px 0 var(--line),0 10px 20px rgba(42,64,110,.12);border:2px solid var(--line);filter:none}
.cue .rbtn.play>.ui3d{width:62%;height:62%}
.sheet h2{padding:0 44px}

/* your turn (Say it with me pause) */
.yourturn{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:#fff;border-radius:999px;padding:8px 18px 8px 8px;box-shadow:var(--sh-lift);z-index:6;font-size:20px;transition:opacity .2s}
.yourturn.bye{opacity:0}
.yt-ring{width:34px;height:34px;border-radius:50%;background:conic-gradient(var(--teal) 0deg,var(--surf2) 0deg);animation:ytr var(--ms) linear forwards}
@property --yt{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes ytr{from{--yt:0deg}to{--yt:360deg}}
.yt-ring{background:conic-gradient(var(--teal) var(--yt),var(--surf2) var(--yt))}
.looks,.friend,.build{position:relative;padding-bottom:64px}
.mishwalk .bubble{width:64px!important;height:64px!important;top:2px!important;right:-70px!important;padding:6px;border:3px solid var(--plum-s)}
.mishwalk .bubble .pic{width:100%;height:100%}
.mishwalk .bubble::after{content:'';position:absolute;left:-6px;bottom:-6px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:var(--sh)}

/* =====================================================================
   v5.1 · language choice, the Arabic track (RTL + Naskh), the full-screen map, world scenes and the dock
   ===================================================================== */
:root{--fna:'UlfaNaskh','NotoAr','Geeza Pro',serif}
/* Arabic child screens: Naskh for words and letters, Noto Sans Arabic for the interface */
.scr[dir=rtl],html[dir=rtl] .sheetov,html[dir=rtl] .celebrate,html[dir=rtl] .toast,html[dir=rtl] .yourturn,html[dir=rtl] .zoomov{--f:'NotoAr','Geeza Pro',Tahoma,sans-serif;--fh:var(--fna)}
.scr[dir=rtl] .big,.scr[dir=rtl] .top h1,.scr[dir=rtl] .fword,.scr[dir=rtl] .wl,.scr[dir=rtl] .wtile b,.scr[dir=rtl] .cat b,.scr[dir=rtl] .sname,.scr[dir=rtl] .shelf,html[dir=rtl] .celc h2,html[dir=rtl] .sheet h2{font-family:var(--fna);font-weight:700;line-height:1.45}
.scr[dir=rtl] .fword{font-size:clamp(44px,12vw,70px);letter-spacing:0}
.scr[dir=rtl] .letter b{font-family:var(--fna);font-weight:700;line-height:1.35;font-size:clamp(100px,30vw,170px)}
.scr[dir=rtl] .stone b,.scr[dir=rtl] .slot b,.scr[dir=rtl] .ltile b,.scr[dir=rtl] .tword b,.scr[dir=rtl] .snd{font-family:var(--fna);font-weight:700;line-height:1.5}
.scr[dir=rtl] .rline{font-family:var(--fna);font-weight:700;line-height:1.9;font-size:clamp(30px,8vw,46px)}
.scr[dir=rtl] .tword b{font-size:40px}
.nask{font-family:var(--fna);font-weight:700}
html[dir=rtl] .spell{font-family:var(--fna);letter-spacing:4px;line-height:1.6}
[dir=rtl] .dirx{transform:scaleX(-1)}
.scr[dir=rtl] .wtile b{font-size:24px}
.rword,.bword{display:block;font-family:var(--fna);font-weight:700;font-size:clamp(30px,8vw,44px);color:var(--coral);line-height:1.5;text-align:center}
.bword{opacity:0;transform:scale(.8);transition:opacity .4s,transform .45s var(--spring);margin:4px 0 0}.build.made .bword{opacity:1;transform:none}
.reveal .rword{font-size:26px;margin-top:-6px}
.lchoice{display:flex;align-items:center;justify-content:center;aspect-ratio:1;width:100%;font-family:var(--fna);font-weight:700;font-size:clamp(72px,22vw,120px);color:var(--plum);line-height:1.4}
.choices.lets .card{background:var(--plum-s)}
.stonesart.ar i,.drawart.ar{font-family:var(--fna);font-weight:700;line-height:1.5}.stonesart.ar i{font-size:24px}
.stonesart.pairl i{width:62px;height:52px;font-size:30px}
.drawbox.glyph canvas{touch-action:none}
.scr[dir=rtl] .me{padding:5px 5px 5px 16px}
.scr[dir=rtl] .goldb{right:auto;left:8px}

/* screen cross-fade (zoom in/out) */
.scr.in-fade{animation:fin .26s var(--ease) both}.scr.out-fade{animation:fout .24s var(--ease) both;pointer-events:none}
@keyframes fin{from{opacity:0}to{opacity:1}}@keyframes fout{to{opacity:0}}

/* ---------- language choice ---------- */
.langpick{max-width:900px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px}
.langpick .logo{width:min(46vw,220px)}
.langpick h1{display:flex;flex-direction:column;align-items:center;gap:2px}.langpick h1 span{font-family:var(--fna);font-weight:700;line-height:1.5}.langpick h1 small{font-size:.55em;color:var(--ink2)}
.langs{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%;max-width:760px;margin-top:10px}
.lcard{background:#fff;border-radius:var(--r-lg);border:3px solid var(--line);box-shadow:var(--sh);padding:10px 10px 16px;display:flex;flex-direction:column;align-items:center;gap:6px}
.lcard img{width:100%;aspect-ratio:1;object-fit:contain}
.lcard b{font-size:clamp(28px,8vw,46px);line-height:1.3}.lcard.l-ar b{font-family:var(--fna);font-weight:700;color:var(--teal)}.lcard.l-en b{font-family:var(--fh);font-weight:400;color:var(--coral)}
.lcard.l-ar{background:linear-gradient(180deg,#fff,var(--teal-s))}.lcard.l-en{background:linear-gradient(180deg,#fff,var(--coral-s))}

/* ---------- full-screen screens ---------- */
.scr.full{padding:0;overflow:hidden}

/* ---------- THE MAP ---------- */
.mapx{position:absolute;inset:0;overflow:hidden;background:#BFE6F5;touch-action:none;cursor:grab}
.mapx.dragging{cursor:grabbing}
.mland{position:absolute;left:0;top:0;background-size:100% 100%;will-change:transform;transform-origin:0 0}
.mland .mapsvg{position:absolute;inset:0;width:100%;height:100%}
.mroute{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.mroute path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.mroute .all{stroke:rgba(255,255,255,.75);stroke-width:5;stroke-dasharray:2 10}
.mroute .done{stroke:var(--sun);stroke-width:6;stroke-dasharray:2 10;filter:drop-shadow(0 2px 2px rgba(0,0,0,.15))}
.mapx .wnode{width:19.5%;z-index:2}
.mapx .wnode .wname{font-size:clamp(13px,3.4vw,18px);padding:4px 12px;top:96%}
.scr[dir=rtl] .wnode .wname{font-family:var(--fna);font-weight:700;line-height:1.5;padding:1px 12px}
.wring{position:absolute;inset:-7%;width:114%;height:114%;transform:rotate(-90deg);pointer-events:none}
.wring circle{fill:none;stroke:rgba(255,255,255,.85);stroke-width:5}
.wring .on{stroke:var(--sun);stroke-linecap:round}
.mapx .mapboat{width:20%}
.mclouds{position:absolute;inset:-25%;pointer-events:none;z-index:4;will-change:transform}
.pcl{position:absolute;filter:drop-shadow(0 6px 8px rgba(42,64,110,.12));animation:drift 26s ease-in-out infinite alternate}
.pcl:nth-child(2n){animation-duration:34s;animation-direction:alternate-reverse}
@keyframes drift{from{translate:-18px 0}to{translate:22px 0}}
.mhud,.whud{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:10px;padding:max(12px,env(safe-area-inset-top)) 16px 8px;pointer-events:none}
.mhud>*,.whud>*{pointer-events:auto}
.mhud .me,.mhud .chip,.mhud .grown{box-shadow:var(--sh);background:#fff}
.mhud .chip{background:#FFF8E6}

/* ---------- the floating dock ---------- */
.dock{position:absolute;z-index:22;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:flex-end;gap:4px;padding:6px 8px;background:rgba(255,255,255,.94);border-radius:28px;box-shadow:0 10px 30px rgba(42,64,110,.22),0 2px 0 rgba(42,39,51,.04);max-width:calc(100vw - 24px);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.dk{display:flex;flex-direction:column;align-items:center;gap:2px;width:56px;padding:4px 0 2px;border-radius:20px}
.dk .dki{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:var(--surf);overflow:hidden}
.dk .dki>img,.dk .dki .pic,.dk .dki .char{width:100%;height:100%;object-fit:contain}
.dk .dki .mmd{width:100%;height:100%}.dk .dki .ic{width:26px;height:26px}
.dk small{font-size:10.5px;font-weight:700;color:var(--ink2);line-height:1.15;text-align:center;max-width:62px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.dk.main{width:74px;margin-top:-22px}
.dk.main .dkp{width:66px;height:66px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#3BA597,var(--teal));box-shadow:0 5px 0 #1F6B62,0 12px 24px rgba(47,143,131,.35);border:4px solid #fff}
.dk.main .dkp .ic,.dk.main .dkp .ui3d{width:34px;height:34px}
.dk.main small{color:var(--teal);font-size:11.5px}
@media(min-width:760px){.dk{width:76px}.dk .dki{width:52px;height:52px}.dk small{font-size:13px;max-width:80px}.dk.main{width:96px}.dk.main .dkp{width:84px;height:84px}.dock{gap:10px;padding:8px 16px}}

/* ---------- zoom into a world ---------- */
.zoomov{position:fixed;inset:0;z-index:60;pointer-events:none;clip-path:circle(var(--r0) at var(--x) var(--y));transition:clip-path .62s cubic-bezier(.55,0,.25,1),opacity .3s}
.zoomov.grow{clip-path:circle(150vmax at var(--x) var(--y))}
.zoomov.done{opacity:0}
.zoomov img,.zoomov svg{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- A WORLD SCENE ---------- */
.wscene{position:absolute;inset:0;overflow:hidden;background:var(--surf);touch-action:none;cursor:grab}
.wscene.dragging{cursor:grabbing}
.wstage{position:absolute;left:0;top:0;background-size:cover;background-position:center;will-change:transform}
.wstage>.scenesvg{position:absolute;inset:0;width:100%;height:100%}
.wtrail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.wtrail path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.wtrail .all{stroke:rgba(255,255,255,.9);stroke-width:10;stroke-dasharray:1 16;filter:drop-shadow(0 2px 2px rgba(0,0,0,.18))}
.wtrail .done{stroke:var(--sun);stroke-width:10;stroke-dasharray:1 16}
.wstone{position:absolute;transform:translate(-50%,-50%);width:clamp(62px,8.6vh,104px);aspect-ratio:1.15/1;border-radius:50%;background:radial-gradient(ellipse at 40% 30%,#fff,#EEF2F7 58%,#CDD6E2);box-shadow:0 6px 0 #AFBBCB,0 12px 18px rgba(42,64,110,.28);display:flex;align-items:center;justify-content:center;z-index:3;padding:6px}
.wstone.tap.down,.wstone.tap:active{transform:translate(-50%,-50%) scale(.94)}
.wstone .pic,.wstone img{width:78%;height:78%;object-fit:contain}.wstone .ic{width:58%;height:58%}
.wstone .sf{font-family:var(--fh);font-weight:400;font-size:clamp(22px,3.4vh,34px);color:var(--ink);line-height:1.2}
.scr[dir=rtl] .wstone .sf{font-family:var(--fna);font-weight:700;line-height:1.6}
.wstone.done{background:radial-gradient(ellipse at 40% 30%,#FFF6D8,#FFE08A 60%,#F2B941);box-shadow:0 6px 0 #D59A1E,0 12px 18px rgba(242,185,65,.35)}
.wstone .ok{position:absolute;right:-4px;top:-4px;width:26px;height:26px;border-radius:50%;background:var(--leaf);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 0 #3E7A3A}.wstone .ok svg{width:16px;height:16px}
.wstone.now{background:radial-gradient(ellipse at 40% 30%,#fff,#E3F3F1 55%,#9BD3CB);box-shadow:0 6px 0 #1F6B62,0 0 0 6px rgba(47,143,131,.25),0 14px 24px rgba(47,143,131,.4);animation:nowp 1.8s ease-in-out infinite;z-index:4}
@keyframes nowp{0%,100%{box-shadow:0 6px 0 #1F6B62,0 0 0 4px rgba(47,143,131,.3),0 14px 24px rgba(47,143,131,.4)}50%{box-shadow:0 6px 0 #1F6B62,0 0 0 14px rgba(47,143,131,.08),0 14px 24px rgba(47,143,131,.4)}}
.wstone.later{opacity:.78;filter:saturate(.55)}
.whop{position:absolute;transform:translate(-50%,-118%);width:clamp(54px,8vh,90px);z-index:5;pointer-events:none;animation:hopb 1.6s ease-in-out infinite}.whop .char{width:100%}
@keyframes hopb{0%,100%{translate:0 0}50%{translate:0 -10px}}
.wsign{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:2px;background:#fff;border-radius:22px;padding:8px 10px 8px;box-shadow:var(--sh-lift);z-index:3;width:clamp(110px,15vh,170px);border:3px solid var(--c)}
.wsign.tap.down,.wsign.tap:active{transform:translate(-50%,-100%) scale(.95)}
.wsign .sgart{width:100%;aspect-ratio:1;border-radius:16px;overflow:hidden;background:var(--surf)}.wsign .sgart img,.wsign .sgart .pic{width:100%;height:100%;object-fit:cover}
.wsign b{font-size:clamp(14px,2vh,18px);line-height:1.25;text-align:center}.wsign small{font-size:12px;color:var(--ink3)}
.scr[dir=rtl] .wsign b,.scr[dir=rtl] .wplace b{font-family:var(--fna);font-weight:700;line-height:1.5}
.wsign::after{content:'';position:absolute;left:50%;bottom:-16px;width:6px;height:16px;background:#C8A27A;border-radius:3px;transform:translateX(-50%)}
.wplace{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;background:rgba(255,255,255,.95);border-radius:22px;padding:8px 10px;box-shadow:var(--sh-lift);z-index:3;width:clamp(96px,13vh,150px)}
.wplace.tap.down,.wplace.tap:active{transform:translate(-50%,-50%) scale(.95)}
.wplace .plart{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:16px;overflow:hidden;background:var(--surf)}.wplace .plart img,.wplace .plart .pic,.wplace .plart .char{width:100%;height:100%;object-fit:contain}
.wplace b{font-size:clamp(14px,2vh,18px)}.wplace small{font-size:12px;color:var(--ink3);text-align:center;line-height:1.3}
.wchar{position:absolute;transform:translate(-50%,-50%);width:clamp(90px,17vh,190px);z-index:2}.wchar .char{width:100%}
.whud{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,0));padding-bottom:22px}
.whud .rbtn{flex:none}.whud .chip{margin-inline-start:auto;background:#fff;box-shadow:var(--sh)}
.wttl{min-width:0}.wttl h1{margin:0;font-family:var(--fh);font-weight:400;font-size:clamp(22px,6vw,34px);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scr[dir=rtl] .wttl h1{font-family:var(--fna);font-weight:700;line-height:1.5}
.wttl .lab{margin:0}
.scr.zin .wstage{animation:zin .5s var(--ease) both}@keyframes zin{from{filter:saturate(1.2) brightness(1.06)}to{filter:none}}
.wart.peek{position:relative}.wart.peek img{filter:blur(3px) saturate(.6) brightness(1.08)}.wart.peek .fog{position:absolute;left:50%;top:18%;width:60%;transform:translateX(-50%)}.wart.peek .lk{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--plum);display:flex;align-items:center;justify-content:center}
.wunit.soft{opacity:.85}
@media (prefers-reduced-motion:reduce){.pcl,.wstone.now,.whop{animation:none!important}}
.splash .tag .nask{font-size:22px;line-height:1.7}
.scr[dir=rtl] .slide .knob{left:auto;right:5px}.scr[dir=rtl] .slide .knob svg{transform:scaleX(-1)}.scr[dir=rtl] .slide .trail{background:linear-gradient(270deg,#FFE28A,var(--sun))}
.scr[dir=rtl] .fcount,.scr[dir=rtl] .count,.scr[dir=rtl] .wsign small,.scr[dir=rtl] .whud .chip b,.scr[dir=rtl] .mhud .chip b{direction:ltr;unicode-bidi:isolate}
.stage,.teach{overflow-x:clip}

/* ---------- v5.2.2 ---------- */
/* the voice is talking: Mishmish in the session header bobs and a small sound wave shows next to the step name */
.stitle .sname::after{content:'';display:inline-block;width:0;height:.62em;margin-inline-start:0;vertical-align:middle;border-radius:3px;background:linear-gradient(90deg,var(--teal) 0 22%,transparent 22% 39%,var(--teal) 39% 61%,transparent 61% 78%,var(--teal) 78%);opacity:0;transition:opacity .2s,width .2s,margin .2s}
body.talking .stitle .sname::after{width:.9em;margin-inline-start:.4em;opacity:.85;animation:talkw .7s ease-in-out infinite alternate}
@keyframes talkw{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
body.talking .sess .buddy{animation:bob .6s ease-in-out infinite alternate}
/* a next button that is already there but waits for the voice */
.nextstep.waiting{opacity:.55;filter:saturate(.6);transform:scale(.96)}
.nextstep.waiting::before{content:'';position:absolute;inset:-4px;border-radius:inherit;border:3px solid var(--teal);opacity:.35;animation:waitp 1.4s ease-in-out infinite}
.nextstep{position:relative}
@keyframes waitp{0%,100%{transform:scale(1);opacity:.35}50%{transform:scale(1.06);opacity:.1}}
/* today's session was cut: the dock button shows a small "continue" ring */
.dk.main.resume .dkp{box-shadow:0 0 0 4px #fff,0 0 0 8px var(--sun)}
/* who is playing: all four children fit on a short landscape screen (laptops, TVs) without scrolling */
@media (orientation:landscape) and (min-width:700px) and (max-height:900px){
  .kids{grid-template-columns:repeat(4,1fr);max-width:1040px;gap:14px}
  .kid .avatar{width:min(86%,30vh)}
  .pick h1,.pick h2{margin-top:0}
}
table.att{width:100%;border-collapse:collapse;font-size:14px;margin:6px 0 4px}
table.att th{font-weight:700;text-align:start;padding:6px 4px;border-bottom:2px solid var(--line);color:var(--ink2);font-size:12.5px}
table.att td{padding:8px 4px;border-bottom:1px solid var(--line)}
table.att td:not(:first-child),table.att th:not(:first-child){text-align:center;width:22%}
.namesheet{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:6px}
.namesheet .avatar.xl{width:120px;height:120px}
.namesheet h2{margin:0;font-size:28px}
.nameinp{width:min(100%,360px);font-weight:700;font-size:26px;font-family:inherit;text-align:center;padding:14px 16px;border-radius:18px;border:3px solid var(--line);background:#fff;color:var(--ink)}
.nameinp:focus{outline:none;border-color:var(--teal)}

/* ---------- v5.4 Cinema: streaming home (series chips, hero, tabs, big cards) ---------- */
.cine2{max-width:1180px;margin:0 auto;padding-bottom:28px}
.cine2.swap .chero,.cine2.swap .cbody{animation:cfade .35s var(--ease) both}
@keyframes cfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cchips{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:none}
.cchips::-webkit-scrollbar{display:none}
.cchip{flex:none;border-radius:999px;padding:10px 18px;font-weight:700;font-size:16px;background:var(--surf);color:var(--ink2);border:2px solid transparent}
.cchip.on{background:#fff;color:var(--ink);border-color:var(--c);box-shadow:0 4px 0 color-mix(in srgb,var(--c) 30%,transparent)}
.chero{display:grid;grid-template-columns:1fr;gap:14px;background:#fff;border-radius:var(--r-lg);padding:12px;box-shadow:var(--sh);margin-bottom:8px}
.chimg{position:relative;border-radius:calc(var(--r-lg) - 6px);overflow:hidden;aspect-ratio:16/9;background:var(--surf);cursor:pointer}
.chimg>img{width:100%;height:100%;object-fit:cover;display:block}
.chimg .chcol{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;height:100%}
.chimg .chcol img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:12px}
.chtxt{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:0 6px 6px}
.chsr{font-weight:700;font-size:14px;color:var(--c);letter-spacing:.3px;text-transform:uppercase}
.chtxt h2{margin:0;font-family:var(--fh);font-weight:400;font-size:clamp(26px,4.4vw,40px);line-height:1.1}
.chmeta{margin:0;color:var(--ink3);font-size:15px;font-weight:600}
.chplay{margin:6px 0 2px;min-width:200px;justify-content:center}
.chtag{margin:0;color:var(--ink2);font-size:17px;line-height:1.45;max-width:440px}
@media (min-width:860px){.chero{grid-template-columns:minmax(300px,.85fr) 1.15fr;align-items:center;padding:16px}.chtxt{padding:8px 18px}.chimg{order:2}}
.ctabs{display:flex;gap:26px;border-bottom:2px solid var(--line);margin:14px 4px 14px;overflow-x:auto;scrollbar-width:none}
.ctab{position:relative;padding:10px 2px 12px;font-weight:700;font-size:17px;color:var(--ink3);flex:none}
.ctab.on{color:var(--ink)}
.ctab.on::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:4px;border-radius:4px;background:var(--ink)}
.cgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 14px;padding:0 4px}
.cgrid .ep,.cgrid .story{width:auto}
.cgrid.tall{grid-template-columns:repeat(3,1fr)}
.cgrid.stories{grid-template-columns:repeat(2,1fr)}
@media (min-width:700px){.cgrid{grid-template-columns:repeat(3,1fr)}.cgrid.tall{grid-template-columns:repeat(5,1fr)}.cgrid.stories{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1100px){.cgrid.tall{grid-template-columns:repeat(6,1fr)}}
.cgrid .ep b{font-size:16px}
.ep .seen{position:absolute;top:8px;inset-inline-start:8px;width:28px;height:28px;border-radius:50%;background:var(--leaf);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 0 rgba(0,0,0,.15)}
.ep .seen .ic,.ep .seen img{width:18px;height:18px}
.sercard .poster{box-shadow:inset 0 0 0 4px var(--c)}
.cpar{background:var(--surf);border-radius:var(--r-lg);padding:16px 18px;margin:0 4px}
.cpar h3{margin:4px 0 6px;font-size:18px}
.cpar p{margin:0 0 10px;color:var(--ink2);line-height:1.7}
.scr[dir=rtl] .chtxt h2,.scr[dir=rtl] .cchip{font-family:var(--fna);font-weight:700}
.mback{position:absolute;inset:-40px;background-size:cover;background-position:center;filter:blur(22px) saturate(1.1) brightness(1.04);opacity:.9;pointer-events:none} /* v5.5.1: behind a whole-map phone view */

/* ================= v5.5.4 Little Hands | يدي تسوي ================= */
.hhero{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding:12px 18px;border-radius:var(--r-lg);background:linear-gradient(120deg,#FFF3D6,#FFE0B0);box-shadow:var(--sh);border:2px solid #F6D58E;text-align:start}
.hhero .hhs{width:84px;height:84px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 4px 0 #F0C46A}
.hhero b{display:block;font-family:var(--fh);font-weight:400;font-size:clamp(24px,6vw,32px)}.hhero small{color:var(--ink2);font-size:15px}
.hchip{gap:4px;padding-inline:10px 12px}.hchip svg{flex:none}.hchip.done b{color:var(--leaf)}
.hshelf{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:16px;padding-bottom:30px}
.hday{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;background:linear-gradient(120deg,#FFF6E4,#FFE7C2);border:2px solid #F6D58E;border-radius:var(--r-lg);padding:12px 16px;box-shadow:var(--sh)}
.hday .hdtxt{flex:1;min-width:170px}.hday .hdtxt b{display:block;font-size:18px;margin-top:2px}
.hday .hdstk{display:flex;gap:8px}.hday .hds{width:74px;height:74px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;border:3px dashed #EBD3A2}
.hday .hds.on{border:3px solid var(--sun);animation:popin .4s var(--ease)}.hday.done{background:linear-gradient(120deg,#EAF7E2,#D2EDC4);border-color:#A9D89A}
.hgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.hcard{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-lg);overflow:visible;box-shadow:var(--sh);border:2px solid var(--line);text-align:start;padding:0}
.hcard .hcov{position:relative;aspect-ratio:16/9;background-size:cover;background-position:center;border-radius:calc(var(--r-lg) - 2px) calc(var(--r-lg) - 2px) 0 0}
.hcard .hbig{position:absolute;inset-inline-end:10px;bottom:-26px;width:72px;height:72px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 0 var(--line)}
.hcard .hmeta{padding:12px 14px 12px;display:flex;flex-direction:column;gap:6px}.hcard .hmeta b{font-size:17px;line-height:1.2;padding-inline-end:70px;min-height:41px}
.hpips{display:flex;gap:4px}.hpip{width:38px;height:38px;border-radius:50%;background:var(--surf);display:flex;align-items:center;justify-content:center}.hpip.on{background:#FFF3D6}
.hcard.full{border-color:var(--sun)}.hcard.full .hbig{box-shadow:0 0 0 4px var(--sun)}
/* look B: toy boxes on wooden shelves, no photos */
.look-b .hgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:30px 14px;background:repeating-linear-gradient(180deg,transparent 0 196px,#D9B98A 196px 212px,#C29C68 212px 218px,transparent 218px 244px);padding:6px 6px 0}
.look-b .hcard{background:linear-gradient(180deg,var(--b1),var(--b2));border:0;border-radius:28px;align-items:center;padding:14px 8px 10px;height:188px;box-shadow:0 6px 0 rgba(0,0,0,.08)}
.look-b .hcard .hcov{background:none!important;aspect-ratio:auto;height:96px;width:100%;display:flex;align-items:center;justify-content:center}
.look-b .hcard .hbig{position:static;width:92px;height:92px;box-shadow:none;background:rgba(255,255,255,.7)}.look-b .hcard .hbig svg{width:82px;height:82px}
.look-b .hcard .hmeta{align-items:center;padding:6px 4px 0}.look-b .hcard .hmeta b{font-size:14px;padding:0;min-height:0;text-align:center;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.look-b .hpip{width:30px;height:30px;background:rgba(255,255,255,.75)}.look-b .hpip svg{width:26px;height:26px}
.hworld{max-width:900px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:16px;padding-bottom:30px}
.hban{width:100%;aspect-ratio:21/8;border-radius:var(--r-lg);background-size:cover;background-position:center;box-shadow:var(--sh)}
.hacts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%}
.hact{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px 12px;border-radius:var(--r-lg);background:linear-gradient(180deg,var(--b1),var(--b2));box-shadow:var(--sh)}
.hact b{font-size:17px;text-align:center}.hact .hai svg{width:84px;height:84px}
.hlv{display:flex;gap:5px}.hlv i{width:11px;height:11px;border-radius:50%;background:rgba(0,0,0,.12)}.hlv i.on{background:var(--sun)}
.hact .hwin{position:absolute;top:8px;inset-inline-end:8px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center}
.hstage{position:relative;width:100%;max-width:1000px}
.lhg{width:100%;display:flex;flex-direction:column;gap:10px}
.lhtop{display:flex;align-items:center;gap:10px;background:#fff;border-radius:999px;padding:6px 14px 6px 6px;box-shadow:var(--sh)}
[dir=rtl] .lhtop{padding:6px 6px 6px 14px}
.lhav{width:54px;height:54px;border-radius:50%;background:#FFF3D6;overflow:hidden;flex:none;display:flex;align-items:flex-end;justify-content:center}.lhav .char{width:100%;height:100%;object-fit:cover;object-position:top}
.lhsay{flex:1;margin:0;font-size:clamp(17px,4.4vw,22px);font-weight:700;line-height:1.25}
.lhsteps{display:flex;gap:6px;flex:none}.lhsteps i{width:16px;height:16px;border-radius:50%;background:var(--surf2);transition:background .2s,transform .2s}.lhsteps i.on{background:var(--sun);transform:scale(1.15)}
.lhbox{width:min(100%,calc((100dvh - 280px) * 4 / 3));aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh);background:#FFF4E2;margin:0 auto}
.lhsvg{width:100%;height:100%;display:block;touch-action:none;user-select:none;-webkit-user-select:none}
.lhsvg .drag{cursor:grab}
.hwinov{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.72);backdrop-filter:blur(3px);border-radius:var(--r-lg);animation:inUp .3s var(--ease) both}
.hwincard{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:16px}
.hwincard .sticker-pop{width:170px;height:170px;display:flex;align-items:center;justify-content:center}
.hbreak{gap:6px}.hbreak svg{flex:none}
.apage.hands .stgrid .st svg{width:62%;height:auto}
.hrows{display:flex;flex-direction:column;gap:6px}.hrow{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:8px 12px;border-radius:12px;background:var(--surf)}
.hrow span{color:var(--ink2);font-size:13px}.hrow i{font-style:normal;font-size:13px;font-weight:700;color:var(--ink3)}
.hrow.g i{color:var(--leaf)}.hrow.m i{color:#C98A12}.hrow.w i{color:var(--coral)}
@media (max-width:560px){.hgrid{grid-template-columns:1fr 1fr;gap:12px}.hcard .hmeta b{font-size:14px;padding-inline-end:0;min-height:34px}.hcard .hbig{width:52px;height:52px;bottom:-18px}.hcard .hbig svg{width:46px;height:46px}.hpip{width:30px;height:30px}.hpip svg{width:26px;height:26px}.hcard .hmeta{padding-top:18px}.look-b .hgrid{grid-template-columns:1fr 1fr 1fr;gap:26px 10px}.look-b .hcard{height:160px}.look-b .hcard .hbig{width:70px;height:70px}.look-b .hcard .hbig svg{width:62px;height:62px}.look-b .hpip{width:24px;height:24px}.look-b .hpip svg{width:20px;height:20px}.hacts{grid-template-columns:1fr 1fr 1fr;gap:8px}.hact .hai svg{width:60px;height:60px}.hact b{font-size:14px}.hday .hds{width:60px;height:60px}.hday .hds svg{width:52px;height:52px}}

@media (max-width:460px){.mhud{position:absolute}.mhud .hchip{position:absolute;top:100%;inset-inline-end:16px}}

/* ================= v5.6.0 start screen: who is here today? ================= */
.splash .roles{width:min(980px,94vw);margin-top:6px}
.roles.look-a{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:14px;align-items:end}
.rcard{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 10px 14px;border-radius:28px;background:#fff;border:4px solid var(--line);box-shadow:0 8px 0 rgba(42,39,51,.06),0 14px 30px rgba(42,64,110,.12);text-align:center}
.rcard .rph{height:118px;width:100%;display:flex;align-items:flex-end;justify-content:center;border-radius:20px;overflow:hidden}
.rcard .rph .char{height:100%;width:auto;max-width:60%;object-fit:contain}
.rcard b{font-family:var(--fh);font-weight:400;font-size:clamp(22px,4.6vw,30px);line-height:1.1;display:flex;flex-direction:column;align-items:center}
.rcard b small{font-family:inherit;font-size:.7em;opacity:.8}
.rcard .rsub{color:var(--ink2);font-size:14px;line-height:1.3;display:flex;flex-direction:column}
.rcard .rsub small{font-size:13px}
.r-teach{border-color:#9FD3EE}.r-teach .rph{background:linear-gradient(180deg,#DDF1FB,#F2FAFE)}
.r-host{border-color:#F5B3A6}.r-host .rph{background:linear-gradient(180deg,#FFE1DC,#FFF2EF)}
.r-student{border-color:var(--sun);background:linear-gradient(180deg,#FFF7E3,#fff)}.r-student .rph{height:150px;background:linear-gradient(180deg,#FFE7AE,#FFF4D8)}
.r-student b{font-size:clamp(28px,6vw,40px)}
.rkid{display:flex;align-items:center;gap:6px;margin-top:4px;padding:4px 10px 4px 4px;border-radius:999px;background:#fff;box-shadow:0 2px 0 var(--line)}
.rkid .avatar{width:30px;height:30px;flex:none}.rkid b{font-family:var(--fb,inherit);font-size:15px;font-weight:700}
.roles.look-b{display:flex;flex-direction:column;align-items:center;gap:10px}
.roles.look-b .r-student{width:min(520px,100%);flex-direction:row;gap:14px;padding:12px 18px;text-align:start;align-items:center}
.roles.look-b .r-student .rph{width:170px;flex:none;height:130px}
.roles.look-b .r-student b,.roles.look-b .r-student .rsub{align-items:flex-start}
.roles.look-b .rgrown{margin:4px 0 0;color:var(--ink3);font-size:14px;font-weight:700;display:flex;gap:8px}
.roles.look-b .rrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(520px,100%)}
.roles.look-b .rrow .rcard{flex-direction:row;padding:8px 12px;gap:10px;text-align:start;border-width:3px}
.roles.look-b .rrow .rph{width:74px;height:70px;flex:none}.roles.look-b .rrow b{font-size:20px;align-items:flex-start}.roles.look-b .rrow .rsub{font-size:12px;align-items:flex-start}
.splash .boatwave{display:none}
@media (max-width:560px){.roles.look-a{grid-template-columns:1fr 1fr;gap:10px}.roles.look-a .r-student{grid-column:1/-1;order:-1}.rcard .rph{height:86px}.r-student .rph{height:120px}.roles.look-b .r-student .rph{width:120px;height:104px}.roles.look-b .rrow .rph{width:54px;height:56px}.roles.look-b .rrow b{font-size:17px}}
/* shelf tabs */
.htabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.htab{display:flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;background:#fff;border:2px solid var(--line);font-weight:700;font-size:16px;box-shadow:0 3px 0 var(--line)}
.htab.on{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:none}
.hgrid.games{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.hgame{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh);border:2px solid var(--line);text-align:start;padding:0;overflow:visible}
.hgame .hcov{position:relative;aspect-ratio:16/10;background-size:cover;background-position:center;border-radius:calc(var(--r-lg) - 2px) calc(var(--r-lg) - 2px) 0 0}
.hgame .hbig{position:absolute;inset-inline-end:10px;bottom:-22px;width:60px;height:60px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 0 var(--line)}
.hgame .hmeta{padding:10px 12px 12px;display:flex;flex-direction:column;gap:2px}.hgame .hmeta b{font-size:16px;line-height:1.25;padding-inline-end:58px}.hgame .hmeta small{color:var(--ink3);font-size:13px}
.hgame.on{border-color:var(--sun)}
@media (max-width:560px){.hgrid.games{grid-template-columns:1fr 1fr;gap:12px}.hgame .hmeta b{font-size:14px;padding-inline-end:0;margin-top:16px}.hgame .hbig{width:46px;height:46px;bottom:-16px}.hgame .hbig svg{width:40px;height:40px}.htab{padding:7px 12px;font-size:14px}}
.roles.look-b .rrow .rsub{}@media (max-width:560px){.roles.look-b .rrow .rsub{display:none}.roles.look-b .rrow .rcard{justify-content:flex-start}}
@media (max-height:720px){.splash{gap:6px}.splash .logo{width:min(190px,50vw)}.splash .tag{font-size:16px}.splash .tag .nask{font-size:17px;line-height:1.4}.rcard{padding:8px 8px 10px}.rcard .rph{height:68px}.r-student .rph{height:92px}.rcard .rsub{font-size:12px}.rcard b{font-size:20px}.r-student b{font-size:26px}}

/* ================= v5.6.0 draw & colour ================= */
.hpips{flex-wrap:wrap;gap:3px}.hpip{width:30px;height:30px}.hpip svg{width:26px;height:26px}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.dpage{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 8px 10px;background:#fff;border-radius:22px;border:2px solid var(--line);box-shadow:var(--sh)}
.dpage .dimg{width:100%;aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;border-radius:14px;background:#fff;overflow:hidden}
.dpage .dimg img{max-width:100%;max-height:100%;object-fit:contain}
.dpage b{font-size:15px;line-height:1.2;text-align:center}
.dpage.done{border-color:var(--sun)}.dpage.done::after{content:"★";position:absolute;top:4px;inset-inline-end:8px;color:var(--sun);font-size:22px}
.dpage.dnew{background:linear-gradient(180deg,#FFF6E4,#FFE7C2);border-color:#F6D58E}.dpage.dnew .dimg{background:transparent}.dpage.dnew .dimg .ic{width:64px;height:64px}
.dgal{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x mandatory}
.dart{flex:none;width:120px;height:120px;border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--sh);scroll-snap-align:start;border:3px solid #fff}
.dart img{width:100%;height:100%;object-fit:cover}
.artsheet{display:flex;flex-direction:column;align-items:center;gap:14px}.artsheet img{max-width:min(560px,86vw);max-height:62vh;border-radius:18px;box-shadow:var(--sh)}
.paintscr .top .pill{gap:6px}
.paint{display:flex;gap:12px;align-items:stretch;justify-content:center;width:100%;max-width:1200px;margin:0 auto;padding:0 10px 14px;height:calc(100dvh - 92px)}
.pbox{position:relative;flex:1 1 auto;max-width:100%;max-height:100%;margin:auto;background:#fff;border-radius:22px;box-shadow:var(--sh);overflow:hidden;touch-action:none}
.pbox .pcv{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.pbox .pline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:multiply;user-select:none}
.ptools{flex:none;width:118px;display:flex;flex-direction:column;gap:10px;overflow-y:auto}
.pclrs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pclr{width:48px;height:48px;border-radius:50%;background:var(--c);border:4px solid #fff;box-shadow:0 2px 0 rgba(0,0,0,.12),0 0 0 2px var(--line)}
.pclr.on{box-shadow:0 0 0 4px var(--ink);transform:scale(1.08)}
.pmodes,.pstamps{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pmode,.pstamp{width:48px;height:48px;border-radius:14px;background:#fff;border:2px solid var(--line);display:flex;align-items:center;justify-content:center}
.pmode .ic{width:30px;height:30px;color:var(--ink)}.pmode .ic svg path[stroke="#fff"]{stroke:var(--ink)}.pmode .ic svg path[fill="#fff"]{fill:var(--surf2)}
.pmode.on,.pstamp.on{border-color:var(--ink);background:#FFF3D6}
.pmode .dot{display:block;border-radius:50%;background:var(--ink)}.pmode .dot.s1{width:10px;height:10px}.pmode .dot.s2{width:22px;height:22px}
@media (max-width:760px),(orientation:portrait){.paint{flex-direction:column;height:calc(100dvh - 86px)}.ptools{width:100%;flex-direction:row;flex-wrap:wrap;overflow:visible;justify-content:center}.pclrs{grid-template-columns:repeat(6,1fr);gap:6px}.pmodes{grid-template-columns:repeat(5,1fr);gap:6px}.pstamps{grid-template-columns:repeat(7,1fr);gap:6px}.pclr,.pmode,.pstamp{width:40px;height:40px}.pbox{flex:1 1 0;min-height:0;width:auto}}
.nameinp.need{animation:shake .35s;border-color:var(--coral)!important}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.pwrap{flex:1 1 0;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center}
.pwrap .pbox{flex:none;margin:0;max-width:none;max-height:none}
.pmode{background:#F3F0F8}.pmode.mono .ic svg{filter:brightness(0) saturate(100%) opacity(.8)}
@media (max-width:760px),(orientation:portrait){.pwrap{width:100%}}
.scr.paintscr{display:flex;flex-direction:column;overflow:hidden}
.scr.paintscr>.top{flex:none}
.scr.paintscr .paint{flex:1 1 0;min-height:0;height:auto!important}

/* v5.6.2: fixed screen, no pinch or double-tap zoom, no bounce */
html,body{touch-action:pan-x pan-y;overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
input,textarea,select{font-size:max(16px,1em)}

/* ================= v5.7.0 rounds, auto-continue, touch drag ================= */
.lhrounds{display:flex;justify-content:center;gap:8px;min-height:0}
.lhrounds:empty{display:none}
.lhrounds i{width:30px;height:30px;border-radius:50%;background:rgba(75,93,169,.12);border:3px solid #fff;box-shadow:0 2px 0 rgba(0,0,0,.06)}
.lhrounds i.done{background:var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5 9-10' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat}
.lhrounds i.now{background:#4B5DA9;transform:scale(1.12)}
.lhsvg .drag{touch-action:none}
.lhsvg .drag.lift{filter:drop-shadow(0 10px 8px rgba(0,0,0,.22))}
.hwincard [data-a=hnext],.hwincard [data-a=hday]{position:relative;overflow:hidden}
.hauto{position:absolute;inset:0;background:rgba(255,255,255,.28);transform-origin:left center;animation:hauto 3.8s linear forwards;pointer-events:none}
[dir=rtl] .hauto{transform-origin:right center}
@keyframes hauto{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hpips{max-width:100%}

/* ================= v5.9.0 KG3 school path ================= */
.kgscr{background:linear-gradient(180deg,#EAF2FF 0%,#F6EFFF 50%,#FFF4E2 100%)}
.kgmap{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:96px 0 200px}
.kgworld{position:relative;width:100%}
.kgland{position:absolute;left:0;right:0;background:radial-gradient(60% 45% at 30% 40%,color-mix(in srgb,var(--c) 16%,transparent),transparent 70%),radial-gradient(55% 40% at 75% 65%,color-mix(in srgb,var(--c) 12%,transparent),transparent 70%)}
.kgroad{position:absolute;inset:0;width:100%;height:100%}
.kgroad path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.kgroad .r1{stroke:#fff;stroke-width:46;filter:drop-shadow(0 6px 0 rgba(75,93,169,.12))}
.kgroad .r2{stroke:#E2D6F7;stroke-width:6;stroke-dasharray:2 18}
.kgdeco{position:absolute;width:15%;max-width:150px;transform:translate(-50%,-50%) rotate(-4deg);filter:drop-shadow(0 10px 14px rgba(37,35,67,.15));pointer-events:none;animation:kgbob 4s ease-in-out infinite}
.kgdeco:nth-of-type(2n){animation-delay:-2s;transform:translate(-50%,-50%) rotate(5deg)}
@keyframes kgbob{50%{margin-top:-8px}}
.kgsign{position:absolute;width:24%;max-width:240px;background:var(--c);color:#fff;border-radius:22px 22px 22px 6px;padding:10px 14px;box-shadow:0 6px 0 rgba(0,0,0,.14);display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}
.kgsign b{grid-row:span 2;width:36px;height:36px;border-radius:50%;background:#fff;color:var(--c);display:grid;place-items:center;font-family:Fredoka,sans-serif;font-size:20px}
.kgsign span{font-size:17px;font-weight:700}.kgsign small{font-size:12px;opacity:.9}
.kgstop{position:absolute;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;border:0;display:grid;place-items:center;font-family:Fredoka,sans-serif;font-size:21px;color:#fff;background:#7BC47F;box-shadow:0 5px 0 #5A9E5E}
.kgstop i{position:absolute;top:-12px;right:-10px;font-style:normal;font-size:20px}
.kgstop.next{background:#fff;color:#B6BBD6;box-shadow:inset 0 0 0 3px #D5D9EC}
.kgstop.now{width:80px;height:80px;margin:-40px 0 0 -40px;font-size:28px;background:#FFC905;color:#252343;box-shadow:0 6px 0 #DDA600,0 0 0 10px rgba(255,201,5,.28);animation:kgpulse 1.8s ease-in-out infinite}
@keyframes kgpulse{50%{box-shadow:0 6px 0 #DDA600,0 0 0 18px rgba(255,201,5,.12)}}
.kgme{position:absolute;width:76px;height:76px;margin:-118px 0 0 -38px;pointer-events:none;z-index:3;filter:drop-shadow(0 8px 10px rgba(37,35,67,.25))}
.kgme .avatar{width:76px;height:76px;border:5px solid #fff;border-radius:50%;display:block;overflow:hidden;background:#FFE9B8}
.kgme .avatar img{width:100%;height:100%;object-fit:cover}
.kgme::after{content:'';position:absolute;left:50%;bottom:-16px;border:10px solid transparent;border-top-color:#fff;transform:translateX(-50%)}
.kggo{position:fixed;left:50%;bottom:calc(112px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:10px;border:0;border-radius:999px;padding:14px 26px;background:#F2716B;color:#fff;font-size:19px;font-weight:700;box-shadow:0 6px 0 #D2524C;white-space:nowrap;max-width:92vw}
.kggo .ic,.kggo .ui3d{width:26px;height:26px}
.kgweek{position:absolute;inset:0;overflow-y:auto;padding:14px 18px 40px;background:linear-gradient(180deg,#FFF6DC,#FFFFFF 50%)}
.kgtop{display:flex;align-items:center;gap:10px;margin-bottom:12px}.kgtop .grow{flex:1}
.kghero{display:flex;align-items:center;gap:16px;background:#fff;border-radius:28px;padding:12px 20px;box-shadow:0 10px 30px rgba(37,35,67,.08);border-bottom:6px solid var(--c)}
.kghero .char{height:120px;width:auto}.kghero b{font-size:clamp(26px,4vw,40px);display:block;font-family:Fredoka,sans-serif}.kghero p{color:#62678A;font-size:15px}
.kgheroimg{width:110px;height:110px;object-fit:contain}
.kgsteps{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:18px}
.kgst{position:relative;border:0;border-radius:24px;padding:18px 10px 14px;min-height:200px;display:flex;flex-direction:column;align-items:center;gap:8px;color:#252343;text-align:center;font:inherit}
.kgst .k{position:absolute;top:-10px;background:#fff;border-radius:999px;padding:1px 12px;font-family:Fredoka,sans-serif;font-size:15px;box-shadow:0 3px 0 rgba(0,0,0,.08)}
.kgst .tick{position:absolute;top:8px;inset-inline-end:10px;width:28px;height:28px;border-radius:50%;background:#7BC47F;color:#fff;font-weight:700;display:grid;place-items:center}
.kgst.ok{outline:4px solid #7BC47F}
.kgst b{font-size:17px}.kgst .en{font-size:15px}
.kgpics{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.kgpics img,.kgpics .kgnopic{width:52px;height:52px;border-radius:14px;background:#fff;object-fit:contain}
.kgnopic{display:inline-grid;place-items:center;background:#fff;border-radius:14px;color:#4B5DA9;font-family:Fredoka,sans-serif;font-size:13px;padding:4px;overflow:hidden}
.kgbig{font-size:52px;line-height:1;font-family:Fredoka,sans-serif;font-weight:700}
.kgtw{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.kgtw span{background:#fff;border-radius:12px;padding:3px 10px;font-size:19px}
.kgst .char{height:70px;width:auto}.kgline{font-size:15px}
.kgrun{display:flex;align-items:center;gap:14px;width:100%;margin-top:18px;border:0;border-radius:26px;padding:14px 20px;background:#232B5E;color:#fff;font:inherit;text-align:start}
.kgrun .char{height:64px;width:auto}.kgrun b{font-size:21px}.kgrun p{opacity:.85;font-size:14px}.kgrun .grow{flex:1}
.kgrun .bar{flex:0 0 26%;height:12px;border-radius:6px;background:rgba(255,255,255,.18);overflow:hidden}.kgrun .bar i{display:block;height:100%;background:#FFC905}
.kgrun .play{width:52px;height:52px;border-radius:50%;background:#FFC905;display:grid;place-items:center}
.kgstep .kgstage{min-height:calc(100% - 150px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:10px 0}
.kgdots{display:flex;gap:6px}.kgdots i{width:12px;height:12px;border-radius:50%;background:#E3E6F2}.kgdots i.on{background:#7BC47F}.kgdots i.cur{background:#FFC905}
.kgcard{border:0;background:#fff;border-radius:34px;padding:24px 34px;box-shadow:0 14px 40px rgba(37,35,67,.12);display:flex;flex-direction:column;align-items:center;gap:10px;font:inherit}
.kgcardimg{width:min(46vw,300px);height:min(46vw,300px);object-fit:contain}.kgcard .kgnopic{width:min(46vw,300px);height:min(30vw,180px);font-size:44px}
.kgcard b{font-size:clamp(40px,7vw,64px);font-family:Fredoka,sans-serif;color:#252343}.kgcard b i{font-style:normal;color:#F2716B}
.kgnav{display:flex;justify-content:center;padding:6px 0 10px}
.kgask{display:flex;flex-direction:column;align-items:center;gap:4px}.kgask span{color:#62678A;font-size:18px}.kgask b{font-size:clamp(46px,8vw,72px);font-family:Fredoka,sans-serif;background:#fff;border-radius:24px;padding:6px 28px;box-shadow:0 8px 24px rgba(37,35,67,.1)}
.kgbubs{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;max-width:720px}
.kgbub{border:0;border-radius:999px;padding:14px 26px;font-size:clamp(24px,4vw,34px);font-family:Fredoka,sans-serif;font-weight:700;background:#fff;color:#4B5DA9;box-shadow:0 6px 0 #DCE0F2;min-width:90px}
.kgbub.pop,.kgbub.right,.kgpick.right{background:#7BC47F;color:#fff;box-shadow:0 6px 0 #5A9E5E}
.kgletter{width:96px;height:96px;padding:0;font-size:48px}
.kgq{display:flex;flex-direction:column;align-items:center;gap:6px}.kgqimg{width:min(42vw,260px);height:min(42vw,260px);object-fit:contain;filter:drop-shadow(0 12px 16px rgba(37,35,67,.15))}.kgq .kgnopic{width:220px;height:140px;font-size:40px}
.kgsmall{color:#62678A;font-size:18px}
.kgpicks{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}.kgpick{border:0;background:#fff;border-radius:26px;padding:12px;box-shadow:0 6px 0 #DCE0F2}.kgpick img,.kgpick .kgnopic{width:min(26vw,170px);height:min(26vw,170px);object-fit:contain}
.kgpage{background:#fff;border-radius:34px;padding:22px 30px;box-shadow:0 14px 40px rgba(37,35,67,.12);display:flex;flex-direction:column;align-items:center;gap:8px;max-width:760px;position:relative}
.kgpchar{height:min(30vw,190px);width:auto}.kgpimg{position:absolute;inset-inline-end:16px;top:16px;width:min(18vw,120px);height:min(18vw,120px);object-fit:contain}
.kgpage p{font-size:clamp(28px,5vw,44px);font-family:Fredoka,sans-serif;font-weight:700;text-align:center}
.kgsay{display:flex;flex-direction:column;align-items:center;gap:18px}.kgtch{height:150px;width:auto}
.kgline2{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;direction:ltr}.kgline2 .slot{min-width:70px;height:58px;border-radius:16px;border:3px dashed #CCD0E6;display:grid;place-items:center;font-family:Fredoka,sans-serif;font-size:28px;font-weight:700;padding:0 12px}
.kgline2 .slot.on{border:0;background:#FFE7A8}
.kghint{color:#62678A;font-size:16px;text-align:center}
.kgprog{width:28vw;max-width:260px;height:14px;border-radius:7px;background:#E3E6F2;overflow:hidden}.kgprog i{display:block;height:100%;width:0;background:#FFC905;transition:width .4s}
.kgdraw{width:100%;max-width:980px}
.kgdraw .lhtop{display:none}
.kgpw{display:flex;gap:10px;margin:10px 0 14px}.kgpw div{flex:1;text-align:center;background:#F7F8FC;border-radius:16px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:4px}.kgpw img,.kgpw .kgnopic{width:58px;height:58px;object-fit:contain}
.kgkv{display:grid;grid-template-columns:120px 1fr;gap:8px 12px;font-size:15px}.kgkv dt{color:#62678A;font-weight:700}.kgkv dd{margin:0}
.kgtrack{display:flex;flex-direction:column;gap:10px}.kgtrack button{display:flex;align-items:center;gap:12px;border:3px solid #E3E6F2;border-radius:18px;padding:12px 14px;background:#fff;font:inherit;text-align:start;color:inherit}
.kgtrack button.on{border-color:#4B5DA9;background:#F2F4FD}.kgtrack i{flex:0 0 22px;height:22px;border-radius:50%;border:3px solid #C8CDE6}.kgtrack .on i{border:7px solid #4B5DA9}.kgtrack small{display:block;color:#62678A}
.kgstepper{display:flex;align-items:center;gap:14px;margin:10px 0}.kgstepper button{width:46px;height:46px;border-radius:50%;border:0;background:#EEF1F8;font-size:24px;color:#4B5DA9;font-weight:700}.kgstepper b{font-family:Fredoka,sans-serif;font-size:36px;min-width:46px;text-align:center}
.kgprogp{display:flex;gap:3px}.kgprogp i{flex:1;height:10px;border-radius:5px;background:#E3E6F2}.kgprogp i.d{background:#7BC47F}.kgprogp i.n{background:#FFC905}
@media (max-width:760px){.kgsteps{grid-template-columns:repeat(2,1fr)}.kgst:last-child{grid-column:span 2}.kghero .char{height:90px}.kgheroimg{width:80px;height:80px}.kgsign{width:40%}.kgdeco{width:20%}.kgrun{flex-wrap:wrap}.kgrun .bar{flex:1 1 60%}}

.kgcard.noimg{min-width:min(70vw,420px);min-height:min(40vw,260px);justify-content:center}.kgcard.noimg b{font-size:clamp(64px,12vw,110px)}

/* ===== v5.10.0: dark look (approved design A, 8 Nov). html.th-dark is the default; parent settings switch to light. ===== */
:root{--indigo:#4B5DA9;--mist:#EEF1F8;--slate:#62678A}
.scr.dkbg{background:radial-gradient(120% 60% at 80% 0%,#6C7FD6 0%,rgba(108,127,214,0) 60%),linear-gradient(165deg,#4B5DA9 0%,#5B54B5 45%,#7A62C9 75%,#A98BE0 100%);color:#fff}
.scr.dkshelf{padding:0;overflow:hidden}
.dsky{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.dsky .journey{position:absolute;inset:0;width:100%;height:100%}
.dsky .spk{position:absolute}.dsky .udot{position:absolute;border-radius:50%;border:3px solid rgba(255,255,255,.55)}
.dkin{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:max(14px,env(safe-area-inset-top)) 0 150px}
.dtop{display:flex;align-items:center;gap:10px;padding:0 18px}
.dbtn{width:50px;height:50px;border-radius:18px;background:rgba(255,255,255,.18);color:#fff;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
.dbtn .ic{width:26px;height:26px}
.dme{display:flex;align-items:center;gap:8px;height:52px;padding:0 14px 0 3px;border-radius:999px;background:#fff;color:var(--ink);box-shadow:0 6px 16px rgba(20,20,60,.25)}
.scr[dir=rtl] .dme{padding:0 3px 0 14px}
.dme .av{width:44px;height:44px}.dme b{font-size:17px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dcount{margin-inline-start:auto;display:flex;align-items:center;gap:6px;padding:6px 12px 6px 6px;border-radius:999px;background:rgba(255,255,255,.16);font-size:13px;font-weight:700}
.scr[dir=rtl] .dcount{padding:6px 6px 6px 12px}
.dcount img{width:30px;height:30px;object-fit:contain}
.dttl{padding:14px 24px 0;position:relative}
.dttl .ser{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;background:rgba(255,255,255,.16);padding:4px 12px;border-radius:999px}
.dttl .ser i{width:10px;height:10px;border-radius:50%;background:var(--sun)}
.dttl h1{font-family:var(--fh);font-size:clamp(36px,10vw,52px);line-height:1.2;margin:4px 0 0;color:#fff;text-shadow:0 4px 18px rgba(20,20,60,.25)}
.scr[dir=rtl] .dttl h1{font-family:var(--fna)}
.dttl p{opacity:.88;font-size:16px;margin:2px 0 0}
.drail{display:flex;gap:16px;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;padding:120px calc(50% - 125px) 52px;margin-top:-6px;scrollbar-width:none}
.drail::-webkit-scrollbar{display:none}
.dcard{position:relative;flex:none;width:250px;height:300px;border-radius:38px;scroll-snap-align:center;background:rgba(255,255,255,.22);color:#fff;padding:120px 20px 0;text-align:center;transform:scale(.86);transform-origin:50% 60%;transition:transform .35s var(--ease),background .35s,box-shadow .35s;backdrop-filter:blur(6px)}
.dcard.cur{transform:none;background:#fff;color:var(--ink);box-shadow:0 30px 60px rgba(30,25,90,.35)}
.dcard .halo{position:absolute;top:-70px;left:50%;transform:translateX(-50%);width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,var(--c) 0%,rgba(255,255,255,0) 68%);opacity:.55;pointer-events:none}
.dcard .obj{position:absolute;top:-96px;left:50%;transform:translateX(-50%);width:200px;height:200px;object-fit:contain;filter:drop-shadow(0 22px 22px rgba(30,25,90,.35))}
.dcard b{display:block;font-family:var(--f);font-weight:700;font-size:21px;line-height:1.3}
.scr[dir=rtl] .dcard b{font-family:var(--fna)}
.dcard .pips{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-top:12px}
.dcard .pips i{width:15px;height:15px;border-radius:50%;background:rgba(255,255,255,.35)}
.dcard.cur .pips i{background:var(--mist)}
.dcard .pips i.on,.dcard.cur .pips i.on{background:var(--sun);box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.dcard .go{position:absolute;bottom:-34px;left:50%;transform:translateX(-50%) scale(.6);opacity:0;width:76px;height:76px;border-radius:50%;background:var(--sun);border:7px solid #fff;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 24px rgba(30,25,90,.3);transition:transform .35s var(--ease),opacity .25s}
.dcard.cur .go{transform:translateX(-50%);opacity:1}
.dcard .go svg{width:30px;height:30px}
.dsay{position:relative;display:flex;align-items:flex-end;gap:2px;justify-content:flex-end;padding:0 10px;margin-top:-10px;pointer-events:none}
.dsay .char{height:74px;width:auto;filter:drop-shadow(0 8px 10px rgba(20,20,60,.3))}
.dsay span{margin-bottom:46px;background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:18px 18px 18px 4px;padding:4px 12px;font-weight:700;font-size:15px;white-space:nowrap}
.scr[dir=rtl] .dsay span{border-radius:18px 18px 4px 18px}
.dtoday{display:flex;align-items:center;gap:12px;margin:6px 18px 0;padding:12px 16px;border-radius:24px;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);color:#fff;width:calc(100% - 36px);text-align:start}
.dtoday .t{flex:1}.dtoday .t b{display:block;font-size:18px}.dtoday .t small{opacity:.85;font-size:13px}
.dtoday .s{width:52px;height:52px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.dtoday .s img{width:40px;height:40px;object-fit:contain}
.dtoday .s.off{background:rgba(255,255,255,.25)}.dtoday .s.off img{filter:grayscale(1) brightness(1.6);opacity:.6}
.dtoday.done{background:rgba(255,201,5,.25)}
.dtabs{display:flex;gap:10px;padding:18px 18px 4px;overflow-x:auto;scrollbar-width:none}.dtabs::-webkit-scrollbar{display:none}
.dtab{flex:none;display:flex;align-items:center;gap:8px;padding:6px 16px 6px 6px;border-radius:999px;background:rgba(255,255,255,.16);color:#fff;font-weight:700;font-size:15px}
.scr[dir=rtl] .dtab{padding:6px 6px 6px 16px}
.dtab i{width:36px;height:36px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center}.dtab i img{width:28px;height:28px;object-fit:contain}
.dtab.on{background:#fff;color:var(--indigo)}.dtab.on i{background:var(--mist)}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;padding:14px 18px}
.dtile{position:relative;height:150px;border-radius:26px;background:linear-gradient(180deg,#F6F3FF,#ECE6FB);padding:12px 14px;overflow:hidden;text-align:start;color:var(--ink)}
.dtile.t1{background:linear-gradient(180deg,#E9FAFC,#D3F2F6)}.dtile.t2{background:linear-gradient(180deg,#FFF6D6,#FFEBA6)}.dtile.t3{background:linear-gradient(180deg,#FFECEA,#FFD6D3)}
.dtile img{position:absolute;bottom:-6px;inset-inline-end:-6px;width:104px;height:104px;object-fit:contain;filter:drop-shadow(0 10px 10px rgba(30,25,90,.2))}
.dtile b{position:relative;display:block;font-size:16px;line-height:1.35;max-width:66%}
.dtile small{position:relative;display:block;color:var(--slate,#62678A);font-size:12px;max-width:66%;margin-top:2px}
.dtile .lv{position:absolute;bottom:12px;inset-inline-start:14px;display:flex;gap:4px}.dtile .lv i{width:9px;height:9px;border-radius:50%;background:rgba(37,35,67,.15)}.dtile .lv i.on{background:var(--indigo)}
.ddraw{margin:10px 18px 0;padding:14px;border-radius:26px;background:#fff;color:var(--ink)}
/* one world, dark */
.scr.dkworld .top h1,.scr.dkworld .top .lab{color:#fff}
.scr.dkworld .top .rbtn{background:rgba(255,255,255,.18);color:#fff;border-color:transparent;box-shadow:none}
.scr.dkworld .hworld{background:none}
.scr.dkworld .hact{background:#fff;border-color:transparent;box-shadow:0 18px 36px rgba(30,25,90,.28)}
.scr.dkworld .hact .hai{background:none}
.scr.dkworld .hact .hai img{width:96px;height:96px;object-fit:contain;filter:drop-shadow(0 10px 10px rgba(30,25,90,.25))}
.scr.dkworld .hban{border:4px solid #fff;box-shadow:0 18px 36px rgba(30,25,90,.3)}
/* the dock, dark look: 3D icons on tiles, no labels, active tile indigo, play raised in coral */
html.th-dark .dock{background:#fff;border-radius:30px;padding:8px 10px;gap:6px;align-items:center;box-shadow:0 14px 34px rgba(30,25,90,.28)}
html.th-dark .dk{width:56px;padding:0}
html.th-dark .dk small{display:none}
html.th-dark .dk .dki{width:52px;height:52px;border-radius:18px;background:transparent}
html.th-dark .dk .dki>img,html.th-dark .dk .dki .pic,html.th-dark .dk .dki .char{width:42px;height:42px}
html.th-dark .dk.on .dki{background:var(--indigo);box-shadow:0 6px 14px rgba(75,93,169,.4)}
html.th-dark .dk.main{width:70px;margin-top:-26px}
html.th-dark .dk.main .dkp{width:64px;height:64px;background:#F2716B;border:5px solid #fff;box-shadow:0 10px 22px rgba(242,113,107,.45)}
@media(min-width:760px){
  html.th-dark .dk{width:68px}html.th-dark .dk .dki{width:62px;height:62px}html.th-dark .dk .dki>img,html.th-dark .dk .dki .pic,html.th-dark .dk .dki .char{width:50px;height:50px}
  html.th-dark .dk.main{width:86px}html.th-dark .dk.main .dkp{width:78px;height:78px}
  .dkin{padding-left:max(30px,env(safe-area-inset-left));padding-right:max(30px,env(safe-area-inset-right))}
  .drail{padding:140px calc(50% - 150px) 56px}.dcard{width:300px;height:330px;padding-top:140px}.dcard .obj{width:230px;height:230px;top:-110px}
  .dtoday{max-width:560px;margin-inline:auto}.dsay .char{height:100px}
  .dgrid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
}
.scr.dkworld .hact{color:var(--ink)}.scr.dkworld .hact b{color:var(--ink)}
.scr.dkworld .top .lab{background:rgba(255,255,255,.18);color:#fff}
.scr.dkworld .hact .hwin{opacity:.9}