/* Layout: one-screen app; chunky top bar, then one activity at a time. Home groups big picture tiles into Dinle / Oyna / Yap. Single bright daylight look by choice. */
:root{
  --bg:#FFF4DC;
  --sky:#8BD3F2;
  --sun:#FFC63A;
  --leaf:#36A469;
  --coral:#FF7A59;
  --grape:#7A5FC8;
  --sand:#F1C47F;
  --ink:#2B2340;
  --ink-2:#6A5F80;
  --card:#FFFFFF;
  --f-d:"Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --f-b:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-ar:"Amiri","Traditional Arabic","Geeza Pro",serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%;background:var(--bg)}
body{color:var(--ink);font-family:var(--f-b);font-size:17px;line-height:1.45;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
button:focus-visible{outline:4px solid var(--grape);outline-offset:3px;border-radius:14px}
.app{height:100%;display:flex;flex-direction:column}

.bar{flex:none;background:var(--ink);color:#fff;padding-block:10px;padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px))}
.bar-in{max-width:820px;margin:0 auto;display:flex;align-items:center;gap:10px}
.round{width:46px;height:46px;flex:none;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;color:#fff}
.round svg{width:26px;height:26px}
.title{flex:1;min-width:0;font-family:var(--f-d);font-weight:800;font-size:1.45rem;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.title b{color:var(--sun)}
.stk{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);border-radius:999px;padding:6px 12px 6px 8px;font-weight:900;font-variant-numeric:tabular-nums}
.stk svg{width:24px;height:24px}

.screen{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding-block:16px 30px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:820px;margin:0 auto}
.hello{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.hello svg{width:80px;height:80px;flex:none}
.hello h2{font-family:var(--f-d);font-weight:800;font-size:1.6rem;line-height:1.1;margin:0;text-wrap:balance}
.hello p{margin:2px 0 0;color:var(--ink-2);font-weight:800}

.sunnah{width:100%;display:flex;gap:12px;align-items:center;text-align:left;background:var(--ink);color:#fff;border-radius:24px;padding:12px 14px;margin-bottom:18px}
.sunnah svg{width:56px;height:56px;flex:none}
.sunnah small{display:block;font-weight:900;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sun)}
.sunnah b{font-family:var(--f-d);font-size:1.15rem;line-height:1.15;display:block}
.sunnah span{font-weight:700;font-size:.92rem;opacity:.9}

.group{margin-bottom:20px}
.group h3{font-family:var(--f-d);font-weight:800;font-size:1.3rem;margin:0 0 10px;display:flex;align-items:center;gap:8px}
.group h3 i{width:12px;height:12px;border-radius:50%;display:inline-block}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:600px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tile{border-radius:24px;padding:10px 8px 12px;display:flex;flex-direction:column;align-items:center;gap:2px;color:#fff;box-shadow:0 6px 0 rgba(43,35,64,.85);transition:transform .12s;position:relative}
.tile:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(43,35,64,.85)}
.tile svg{width:100%;max-width:104px;aspect-ratio:1;height:auto}
.tile span{font-family:var(--f-d);font-weight:800;font-size:1.18rem;line-height:1.05;text-align:center;text-shadow:0 2px 0 rgba(0,0,0,.15)}
.tile small{font-weight:800;font-size:.78rem;opacity:.92;text-align:center}
.tile .new{position:absolute;top:8px;right:8px;background:var(--sun);color:var(--ink);font-weight:900;font-size:.7rem;padding:2px 8px;border-radius:999px}
.t-sky{background:#3E9FD6}.t-sun{background:#E8960F}.t-leaf{background:var(--leaf)}.t-coral{background:var(--coral)}.t-grape{background:var(--grape)}.t-sand{background:#C9853A}.t-ink{background:#4A3D6B}.t-teal{background:#1F9AA0}.t-rose{background:#D9577E}
.parent{margin-top:8px;font-size:.88rem;color:var(--ink-2);font-weight:700;max-width:62ch}

h3.sec{font-family:var(--f-d);font-weight:800;font-size:1.45rem;margin:0 0 12px;text-wrap:balance}
.list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:600px){.list{grid-template-columns:repeat(4,minmax(0,1fr))}}
.book{background:var(--card);border-radius:22px;padding:8px 8px 12px;box-shadow:0 5px 0 rgba(43,35,64,.18);display:flex;flex-direction:column;gap:6px;text-align:center;position:relative}
.book svg.cover{width:100%;height:auto;border-radius:16px;display:block}
.book b{font-family:var(--f-d);font-size:1.05rem;line-height:1.1}
.seal{position:absolute;top:2px;right:2px;width:36px;height:36px}

.reader{display:flex;flex-direction:column;gap:14px;max-width:640px;margin:0 auto}
.pic{border-radius:24px;overflow:hidden;box-shadow:0 6px 0 rgba(43,35,64,.2);background:var(--sky)}
.pic svg{display:block;width:100%;height:auto}
.say{background:var(--card);border-radius:22px;padding:14px 16px;font-size:1.22rem;font-weight:800;line-height:1.4;display:flex;gap:12px;align-items:flex-start}
.say button,.qcard button{flex:none;width:50px;height:50px;border-radius:50%;background:var(--sun);display:grid;place-items:center}
.say button svg,.qcard button svg{width:26px;height:26px}
.nav{display:flex;gap:12px;align-items:center}
.nav .dots{flex:1;display:flex;justify-content:center;gap:8px}
.nav .dots i{width:12px;height:12px;border-radius:50%;background:rgba(43,35,64,.2)}
.nav .dots i.on{background:var(--ink)}
.arrow{width:68px;height:68px;border-radius:50%;background:var(--leaf);color:#fff;display:grid;place-items:center;box-shadow:0 5px 0 var(--ink)}
.arrow svg{width:34px;height:34px}
.arrow:disabled{opacity:.3;cursor:default}
.arrow.back{background:#fff;color:var(--ink)}

/* hurma garden */
.stage{position:relative;border-radius:26px;overflow:hidden;background:linear-gradient(#9FDCF6,#D8F1FB 70%);height:min(58vh,520px);min-height:340px;touch-action:manipulation}
.stage .crowns{position:absolute;top:0;left:0;width:100%;pointer-events:none}
.date{position:absolute;width:66px;height:66px;margin:-33px 0 0 -33px;display:grid;place-items:center;z-index:2}
.date svg{width:44px;height:58px;pointer-events:none}
.date.gold svg{filter:drop-shadow(0 0 8px #FFE27A)}
.basket{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:150px;z-index:1;pointer-events:none}
.floaty{position:absolute;z-index:5;pointer-events:none;font-family:var(--f-d);font-weight:800;font-size:1.3rem;color:#fff;text-shadow:0 2px 0 var(--ink);animation:up 1s ease-out forwards;white-space:nowrap}
@keyframes up{from{transform:translate(-50%,0)}to{transform:translate(-50%,-70px);opacity:0}}
.hud{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;gap:8px;z-index:4;pointer-events:none}
.hud span{background:rgba(255,255,255,.88);border-radius:999px;padding:4px 12px;font-weight:900;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:6px}
.hud svg{width:18px;height:22px}
.sofra{margin-top:12px;background:#fff;border-radius:22px;padding:12px 14px;display:flex;align-items:center;gap:12px}
.sofra .slots{display:flex;gap:6px}
.sofra .slots i{width:30px;height:38px;border-radius:12px;border:3px dashed rgba(43,35,64,.2);display:grid;place-items:center}
.sofra .slots i.on{border:0;background:#FFF0C2}
.sofra .slots i svg{width:20px;height:28px}
.sofra p{margin:0;font-weight:800;font-size:.95rem;line-height:1.25;flex:1;min-width:0}
.share{position:absolute;inset:0;z-index:6;display:grid;place-items:center;background:rgba(43,35,64,.45);padding:14px;animation:fade .2s}
.share-in{background:#fff;border-radius:26px;padding:16px;text-align:center;max-width:340px;width:100%;animation:boing .45s cubic-bezier(.3,1.5,.5,1)}
.share-in svg{width:110px;height:110px}
.share-in p{margin:4px 0 12px;font-weight:900;font-size:1.08rem;line-height:1.35}
.share-in .hd{font-family:var(--f-d);font-weight:800;font-size:1.35rem;color:var(--leaf);line-height:1.1}

/* caravan runner */
.run{position:relative;border-radius:26px;overflow:hidden;height:min(58vh,460px);min-height:330px;background:linear-gradient(#F9B97A,#FDE3B4 55%,#FFF1D2);touch-action:manipulation;cursor:pointer}
.run .dune{position:absolute;left:0;right:0;background-repeat:repeat-x;pointer-events:none}
.run .ground{position:absolute;left:0;right:0;bottom:0;height:64px;background:#E6B46E;background-image:radial-gradient(#C98F45 2px,transparent 2.5px);background-size:34px 18px;pointer-events:none}
.run .camel{position:absolute;left:24px;bottom:58px;width:116px;height:112px;z-index:3;pointer-events:none}
.run .camel.hit{animation:blink .5s}
@keyframes blink{50%{opacity:.35}}
.run .obj{position:absolute;bottom:58px;z-index:2;pointer-events:none}
.run .route{position:absolute;top:10px;left:12px;right:12px;z-index:4;pointer-events:none}
.run .route .track{height:12px;border-radius:12px;background:rgba(255,255,255,.7);position:relative}
.run .route .fill{position:absolute;inset:0 auto 0 0;border-radius:12px;background:var(--leaf)}
.run .route .pins{position:absolute;inset:-8px 0 auto 0;height:28px}
.run .route .pins b{position:absolute;top:0;width:28px;height:28px;margin-left:-14px;border-radius:50%;background:#fff;border:3px solid var(--ink);display:grid;place-items:center;font-size:.7rem}
.run .route .pins b.on{background:var(--sun)}
.run .route .labels{display:flex;justify-content:space-between;font-weight:900;font-size:.78rem;margin-top:16px;color:var(--ink)}
.run .banner{position:absolute;left:50%;top:104px;transform:translateX(-50%);z-index:5;background:#fff;border-radius:18px;padding:10px 14px;font-weight:900;text-align:center;width:min(90%,420px);box-shadow:0 4px 0 rgba(43,35,64,.25);pointer-events:none}
.run .count{position:absolute;right:12px;top:66px;z-index:4;background:rgba(255,255,255,.9);border-radius:999px;padding:4px 12px;font-weight:900;display:flex;gap:6px;align-items:center;pointer-events:none}
.run .count svg{width:16px;height:22px}
.run .tap{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:4;font-family:var(--f-d);font-weight:800;color:#fff;text-shadow:0 2px 0 var(--ink);font-size:1.2rem;pointer-events:none}

/* build */
.build{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.build .pic{background:#9FDCF6;position:relative}
.hot{cursor:pointer}
.hot circle.ring{animation:pulse 1.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pulse{50%{transform:scale(1.25);opacity:.6}}
.piece{transition:opacity .35s}
.stepdots{display:flex;gap:6px;justify-content:center}
.stepdots i{width:14px;height:14px;border-radius:50%;background:rgba(43,35,64,.15)}
.stepdots i.on{background:var(--leaf)}

/* puzzle */
.pz{display:grid;gap:4px;max-width:560px;margin:0 auto;border-radius:20px;overflow:hidden;background:var(--ink);padding:4px}
.pz button{aspect-ratio:400/250;background-repeat:no-repeat;border-radius:8px;transition:transform .15s}
.pz button.sel{outline:5px solid var(--sun);outline-offset:-5px;transform:scale(.94)}
.pzhint{max-width:200px;margin:0 auto 12px;border-radius:14px;overflow:hidden;opacity:.9}
.pzhint svg{display:block;width:100%;height:auto}

.cards{display:grid;gap:10px;max-width:560px;margin:0 auto}
.card{aspect-ratio:3/4;perspective:600px}
.card .in{position:relative;width:100%;height:100%;transition:transform .4s;transform-style:preserve-3d}
.card.open .in,.card.got .in{transform:rotateY(180deg)}
.card .f,.card .b{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;place-items:center}
.card .f{background:var(--grape);box-shadow:0 4px 0 var(--ink)}
.card .f svg{width:46%;height:auto;opacity:.9}
.card .b{background:#fff;transform:rotateY(180deg);box-shadow:0 4px 0 rgba(43,35,64,.25)}
.card .b svg{width:84%;height:auto}
.card.got .b{box-shadow:0 0 0 4px var(--leaf),0 4px 0 rgba(43,35,64,.25)}

.levels{display:flex;gap:10px;justify-content:center;margin-bottom:14px;flex-wrap:wrap}
.chipbtn{background:#fff;border-radius:999px;padding:10px 16px;font-weight:900;box-shadow:0 4px 0 rgba(43,35,64,.2)}
.chipbtn.on{background:var(--ink);color:#fff}

.paint{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.paint .pic{background:#fff}
.paint svg [data-r]{cursor:pointer}
.pal{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.pal button{width:50px;height:50px;border-radius:50%;box-shadow:0 4px 0 rgba(43,35,64,.3);border:4px solid #fff}
.pal button.on{transform:scale(1.15);border-color:var(--ink)}
.rowbtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn{background:var(--ink);color:#fff;border-radius:18px;padding:12px 20px;font-family:var(--f-d);font-weight:800;font-size:1.15rem;box-shadow:0 4px 0 #120d1f}
.btn.y{background:var(--sun);color:var(--ink);box-shadow:0 4px 0 var(--ink)}
.btn.w{background:#fff;color:var(--ink);box-shadow:0 4px 0 rgba(43,35,64,.25)}

.quest{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.qcard{background:#fff;border-radius:24px;padding:14px 16px;font-size:1.3rem;font-weight:900;line-height:1.3;display:flex;gap:12px;align-items:center}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choices.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.choice{background:#fff;border-radius:24px;padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:0 5px 0 rgba(43,35,64,.2);font-weight:900;font-size:1.02rem;line-height:1.15;text-align:center}
.choice .em{font-size:3.4rem;line-height:1}
.choice svg{width:100%;max-width:120px;height:auto}
.choice .num{font-family:var(--f-d);font-weight:800;font-size:3.6rem;line-height:1}
.choice.right{background:#DDF5E6;box-shadow:0 0 0 4px var(--leaf)}
.choice.wrong{background:#FFE3DB;animation:shake .35s}
.choice.shadow svg{filter:brightness(0);opacity:.75}
@keyframes shake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.note{background:#DDF5E6;border-radius:20px;padding:12px 14px;font-weight:800;font-size:1.05rem}
.progress-dots{display:flex;gap:6px;justify-content:center}
.progress-dots i{width:14px;height:14px;border-radius:50%;background:rgba(43,35,64,.15)}
.progress-dots i.on{background:var(--leaf)}
.bigpic{background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 5px 0 rgba(43,35,64,.18)}
.bigpic svg{display:block;width:100%;height:auto}
.hl{animation:hl .5s}
@keyframes hl{50%{transform:scale(1.25)}}
.seq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.seq button{background:#fff;border-radius:18px;padding:5px;position:relative;box-shadow:0 4px 0 rgba(43,35,64,.2)}
.seq button svg{display:block;width:100%;height:auto;border-radius:12px}
.seq button b{position:absolute;top:-8px;left:-8px;width:36px;height:36px;border-radius:50%;background:var(--leaf);color:#fff;font-family:var(--f-d);font-size:1.3rem;display:grid;place-items:center;box-shadow:0 3px 0 var(--ink)}

.duas{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.dua{background:#fff;border-radius:22px;padding:12px;text-align:center;box-shadow:0 5px 0 rgba(43,35,64,.18);display:flex;flex-direction:column;gap:4px;position:relative}
.dua .ar{font-family:var(--f-ar);font-size:1.6rem;line-height:1.5;direction:rtl;color:var(--grape)}
.dua b{font-family:var(--f-d);font-size:1.05rem;line-height:1.15}
.dua small{color:var(--ink-2);font-weight:800;font-size:.82rem}
.dua.seen::after{content:"";position:absolute;top:8px;right:8px;width:14px;height:14px;border-radius:50%;background:var(--leaf)}
.dua.on{box-shadow:0 0 0 4px var(--sun),0 5px 0 rgba(43,35,64,.18)}
.duadetail{background:var(--ink);color:#fff;border-radius:24px;padding:16px;margin-bottom:14px;text-align:center}
.duadetail .ar{font-family:var(--f-ar);font-size:2.2rem;line-height:1.6;direction:rtl;color:var(--sun)}
.duadetail b{font-family:var(--f-d);font-size:1.4rem;display:block}
.duadetail p{margin:6px 0 0;font-weight:800}
.duadetail .when{display:inline-block;margin-top:8px;background:rgba(255,255,255,.14);padding:5px 12px;border-radius:999px;font-size:.9rem}
.fam .dua .ini{width:64px;height:64px;margin:0 auto;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--f-d);font-weight:800;font-size:1.8rem}
.fam .dua .rel{font-weight:900;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}

.album{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px}
.slot{background:#fff;border-radius:22px;padding:8px 6px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:0 4px 0 rgba(43,35,64,.15)}
.slot .disc{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;border:4px dashed rgba(43,35,64,.2)}
.slot .disc svg{width:54px;height:54px}
.slot.got .disc{border:4px solid #fff;box-shadow:0 0 0 3px var(--sun);background:#FFF0C2}
.slot:not(.got) .disc svg{filter:grayscale(1);opacity:.18}
.slot b{font-family:var(--f-d);font-size:.88rem;line-height:1.05}

.pop{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(43,35,64,.55);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));animation:fade .2s}
@keyframes fade{from{opacity:0}}
.pop-in{background:#fff;border-radius:30px;padding:22px 20px;text-align:center;max-width:340px;width:100%;animation:boing .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes boing{from{transform:scale(.5)}}
.pop-in .disc{width:128px;height:128px;margin:0 auto 8px;border-radius:50%;background:#FFF0C2;display:grid;place-items:center;box-shadow:0 0 0 6px var(--sun)}
.pop-in .disc svg{width:94px;height:94px}
.pop-in h4{font-family:var(--f-d);font-size:1.75rem;margin:0;line-height:1.1}
.pop-in p{margin:6px 0 14px;font-weight:800;color:var(--ink-2)}
.conf{position:fixed;top:-20px;width:12px;height:18px;border-radius:3px;z-index:60;pointer-events:none;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---- v3 additions ---- */
.tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (min-width:600px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:780px){.tiles{grid-template-columns:repeat(5,minmax(0,1fr))}}
.tile{border-radius:20px;padding:8px 6px 10px;box-shadow:0 5px 0 rgba(43,35,64,.85)}
.tile svg{max-width:84px}
.tile span{font-size:.98rem}
.tile small{font-size:.7rem;line-height:1.15}
.tile .new{top:5px;right:5px;font-size:.62rem;padding:1px 6px}

.me{display:flex;gap:12px;align-items:center;background:#fff;border-radius:24px;padding:10px 14px;margin-bottom:12px;box-shadow:0 4px 0 rgba(43,35,64,.12);width:100%;text-align:left}
.me .av{width:66px;height:66px;flex:none;border-radius:50%;background:#FFE7A3;display:grid;place-items:center}
.me .av svg{width:56px;height:56px}
.me .who{flex:1;min-width:0}
.me .who b{font-family:var(--f-d);font-size:1.25rem;line-height:1.1;display:block}
.me .who small{font-weight:900;font-size:.8rem;color:var(--grape);letter-spacing:.04em;text-transform:uppercase}
.lvbar{height:10px;border-radius:10px;background:#EFE7F8;margin-top:6px;overflow:hidden}
.lvbar span{display:block;height:100%;background:var(--grape);border-radius:10px}
.tasks{background:#fff;border-radius:24px;padding:12px 14px;margin-bottom:12px;box-shadow:0 4px 0 rgba(43,35,64,.12)}
.tasks h4{margin:0 0 8px;font-family:var(--f-d);font-size:1.1rem;display:flex;align-items:center;gap:8px}
.tasks h4 em{font-style:normal;margin-left:auto;font-family:var(--f-b);font-weight:900;font-size:.8rem;color:var(--coral)}
.task{display:flex;align-items:center;gap:10px;padding:6px 0;font-weight:800}
.task i{width:28px;height:28px;flex:none;border-radius:50%;border:3px solid rgba(43,35,64,.2);display:grid;place-items:center}
.task.done i{background:var(--leaf);border-color:var(--leaf);color:#fff}
.task.done i svg{width:18px;height:18px}
.task.done span{color:var(--ink-2);text-decoration:line-through}
.task small{margin-left:auto;font-weight:900;color:var(--ink-2);font-variant-numeric:tabular-nums}

.tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:12px}
.tabs .chipbtn{white-space:nowrap;flex:none}

/* sofra */
.foods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0}
.food{background:#fff;border-radius:20px;padding:6px 6px 10px;display:flex;flex-direction:column;align-items:center;box-shadow:0 4px 0 rgba(43,35,64,.18);font-weight:900;font-size:.9rem;line-height:1.1;text-align:center}
.food svg{width:70px;height:70px}
.food.used{opacity:.35}

/* tavaf */
.tavaf{max-width:420px;margin:0 auto;touch-action:none}
.tavaf svg{display:block;width:100%;height:auto}
.laps{display:flex;gap:8px;justify-content:center;margin:10px 0}
.laps i{width:30px;height:30px;border-radius:50%;background:#fff;border:3px solid rgba(43,35,64,.2);display:grid;place-items:center;font-style:normal;font-family:var(--f-d);font-weight:800;color:var(--ink-2)}
.laps i.on{background:var(--leaf);border-color:var(--leaf);color:#fff}

/* animals */
.care{display:flex;flex-direction:column;gap:12px;max-width:520px;margin:0 auto}
.care .bigpic{background:#E8F6FC;position:relative}
.hearts{display:flex;justify-content:center;gap:8px}
.hearts svg{width:40px;height:40px}
.hearts svg.off{filter:grayscale(1);opacity:.25}
.needs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.need{background:#fff;border-radius:20px;padding:6px 4px 10px;display:flex;flex-direction:column;align-items:center;font-weight:900;box-shadow:0 4px 0 rgba(43,35,64,.18)}
.need svg{width:64px;height:64px}
.need:disabled{opacity:.4}
.bounce{animation:bnc .5s}
@keyframes bnc{30%{transform:translateY(-14px)}60%{transform:translateY(0)}80%{transform:translateY(-5px)}}

/* maze */
.maze{max-width:460px;margin:0 auto}
.maze svg{display:block;width:100%;height:auto;border-radius:20px;background:#FFF9EC;box-shadow:0 5px 0 rgba(43,35,64,.18)}
.pad{display:grid;grid-template-columns:repeat(3,64px);grid-template-rows:repeat(2,64px);gap:8px;justify-content:center;margin-top:12px}
.pad button{background:var(--ink);color:#fff;border-radius:18px;display:grid;place-items:center;box-shadow:0 4px 0 #120d1f}
.pad button svg{width:30px;height:30px}

/* simon */
.simon{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:460px;margin:0 auto}
.simon button{background:#fff;border-radius:24px;padding:6px;box-shadow:0 5px 0 rgba(43,35,64,.2);transition:transform .12s,box-shadow .12s}
.simon button svg{width:100%;height:auto;display:block}
.simon button.lit{transform:scale(1.06);box-shadow:0 0 0 6px var(--sun),0 5px 0 rgba(43,35,64,.2);background:#FFF6D6}
.simon button:disabled{cursor:default}

/* find differences */
.diff{display:flex;flex-direction:column;gap:8px;max-width:560px;margin:0 auto}
.diff .pic{cursor:pointer}
.found{display:flex;justify-content:center;gap:8px}
.found i{width:30px;height:30px;border-radius:50%;border:3px dashed rgba(43,35,64,.25)}
.found i.on{border:0;background:var(--leaf)}

/* night sky */
.sky{max-width:520px;margin:0 auto;border-radius:24px;overflow:hidden;box-shadow:0 5px 0 rgba(43,35,64,.2)}
.sky svg{display:block;width:100%;height:auto}
.sky .st{cursor:pointer}
.sky .st.next circle.halo{animation:pulse 1s ease-in-out infinite;transform-box:fill-box;transform-origin:center}

/* tef */
.tefwrap{display:flex;flex-direction:column;align-items:center;gap:12px}
.tefbig{width:min(70vw,300px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;transition:transform .08s}
.tefbig svg{width:100%;height:100%}
.tefbig.lit{filter:drop-shadow(0 0 22px #FFC63A)}
.tefbig:active{transform:scale(.95)}
.score{font-family:var(--f-d);font-weight:800;font-size:1.6rem}

/* abdest */
.steps9{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.steps9 button{background:#fff;border-radius:20px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;font-weight:900;font-size:.85rem;line-height:1.1;box-shadow:0 4px 0 rgba(43,35,64,.18);position:relative}
.steps9 button .em{font-size:2.6rem;line-height:1}
.steps9 button b{position:absolute;top:-8px;left:-8px;width:32px;height:32px;border-radius:50%;background:var(--leaf);color:#fff;font-family:var(--f-d);display:grid;place-items:center;box-shadow:0 3px 0 var(--ink)}
.steps9 button.got{opacity:.55}
.learn{background:#fff;border-radius:26px;padding:18px;text-align:center;box-shadow:0 5px 0 rgba(43,35,64,.18)}
.learn .em{font-size:5rem;line-height:1.1}
.learn h4{font-family:var(--f-d);font-size:1.5rem;margin:4px 0}
.learn p{margin:0;font-weight:800;font-size:1.1rem}

/* quran */
.ayahs{display:flex;flex-direction:column;gap:10px}
.ayah{background:#fff;border-radius:22px;padding:12px 14px;text-align:left;box-shadow:0 4px 0 rgba(43,35,64,.15);display:flex;flex-direction:column;gap:2px}
.ayah .ar{font-family:var(--f-ar);font-size:1.9rem;line-height:1.7;direction:rtl;text-align:right;color:var(--ink)}
.ayah b{font-family:var(--f-d);font-size:1.05rem;color:var(--grape)}
.ayah span{font-weight:700;color:var(--ink-2);font-size:.95rem}
.ayah .no{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#EFE7F8;color:var(--grape);font-weight:900;font-size:.8rem;margin-right:6px}
.ayah.on{box-shadow:0 0 0 4px var(--sun),0 4px 0 rgba(43,35,64,.15);background:#FFFBEA}
.toggles{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:12px 0}
.surelist{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.surelist button{background:#fff;border-radius:22px;padding:14px 10px;text-align:center;box-shadow:0 5px 0 rgba(43,35,64,.18);position:relative;display:flex;flex-direction:column;gap:2px}
.surelist .ar{font-family:var(--f-ar);font-size:1.8rem;color:var(--leaf);line-height:1.5}
.surelist b{font-family:var(--f-d);font-size:1.15rem}
.surelist small{font-weight:800;color:var(--ink-2)}
.letters{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:10px;direction:rtl}
.letter{background:#fff;border-radius:18px;padding:4px 2px 8px;box-shadow:0 4px 0 rgba(43,35,64,.15);display:flex;flex-direction:column;align-items:center}
.letter .ar{font-family:var(--f-ar);font-size:2.4rem;line-height:1.4;color:var(--grape)}
.letter small{font-weight:900;font-size:.78rem;direction:ltr}
.letter.on{box-shadow:0 0 0 4px var(--sun)}
.choice .bigar{font-family:var(--f-ar);font-size:4rem;line-height:1.3;color:var(--grape)}
.ezrow{background:#fff;border-radius:20px;padding:10px 14px;display:flex;gap:10px;align-items:center;text-align:left;box-shadow:0 4px 0 rgba(43,35,64,.15)}
.ezrow .txt{flex:1;min-width:0}
.ezrow .ar{font-family:var(--f-ar);font-size:1.5rem;line-height:1.5;direction:rtl;text-align:right}
.ezrow b{font-family:var(--f-d);display:block;line-height:1.15}
.ezrow span{font-weight:700;font-size:.9rem;color:var(--ink-2)}
.ezrow em{font-style:normal;flex:none;background:#EFE7F8;color:var(--grape);border-radius:999px;padding:2px 10px;font-weight:900}
.ezrow.on{box-shadow:0 0 0 4px var(--sun)}
.ezrow.seen em{background:var(--leaf);color:#fff}

/* tree */
.tree{background:linear-gradient(#BFE8F8,#E8F7FC);border-radius:26px;overflow:hidden;box-shadow:0 5px 0 rgba(43,35,64,.18)}
.tree svg{display:block;width:100%;height:auto}
.deeds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.deeds button{background:#fff;border-radius:18px;padding:6px 2px 8px;display:flex;flex-direction:column;align-items:center;font-weight:900;font-size:.75rem;line-height:1.1;text-align:center;box-shadow:0 4px 0 rgba(43,35,64,.15)}
.deeds button .em{font-size:2rem;line-height:1.1}
.recent{display:flex;flex-direction:column;gap:4px;font-weight:800;font-size:.92rem;color:var(--ink-2)}

/* parent */
.gate{max-width:420px;margin:30px auto;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center}
.hold{position:relative;overflow:hidden;background:var(--ink);color:#fff;border-radius:20px;padding:16px 26px;font-family:var(--f-d);font-weight:800;font-size:1.2rem;touch-action:none}
.hold span{position:absolute;inset:0 auto 0 0;width:0;background:rgba(255,198,58,.5)}
.hold b{position:relative}
.pcard{background:#fff;border-radius:22px;padding:14px 16px;margin-bottom:12px;box-shadow:0 4px 0 rgba(43,35,64,.12);user-select:text;-webkit-user-select:text}
.pcard h4{margin:0 0 8px;font-family:var(--f-d);font-size:1.15rem}
.pcard p{margin:4px 0;font-weight:700}
.pcard input[type=text],.pcard select{width:100%;padding:10px 12px;border-radius:14px;border:3px solid rgba(43,35,64,.15);font:inherit;font-weight:800;background:#fff}
.avs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.avs button{width:58px;height:58px;border-radius:50%;background:#FFF4DC;display:grid;place-items:center;border:3px solid transparent}
.avs button.on{border-color:var(--grape);background:#FFE7A3}
.avs svg{width:48px;height:48px}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.stats div{background:#FFF4DC;border-radius:14px;padding:8px 10px}
.stats b{display:block;font-family:var(--f-d);font-size:1.4rem;line-height:1.1;font-variant-numeric:tabular-nums}
.stats span{font-weight:800;font-size:.8rem;color:var(--ink-2)}
.pcard details{border-top:1px solid rgba(43,35,64,.1);padding:8px 0}
.pcard summary{font-weight:900;cursor:pointer}
.pcard details p{color:var(--ink-2)}
.vrow{display:flex;gap:8px;align-items:center;padding:8px 0;border-top:1px solid rgba(43,35,64,.1)}
.vrow .t{flex:1;min-width:0;font-weight:700;font-size:.9rem}
.vrow .t em{font-style:normal;font-weight:900;color:var(--leaf)}
.mini{background:#F0E8DA;border-radius:12px;padding:8px 10px;font-weight:900;font-size:.85rem;position:relative;overflow:hidden}
.mini input{position:absolute;inset:0;opacity:0;cursor:pointer}
.mini.ok{background:var(--leaf);color:#fff}
.ages p{margin:6px 0}
.fam .dua .ini svg{width:100%;height:100%;display:block}

/* ---- v4 additions ---- */
.map{border-radius:28px;overflow:hidden;box-shadow:0 6px 0 rgba(43,35,64,.18);margin-bottom:14px}
.mapsvg{display:block;width:100%;height:auto}
.mapsvg .node{cursor:pointer}
.mapsvg .node:focus-visible circle:nth-child(2){stroke:var(--grape)}
.mapcam{animation:none}
.places{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.place{border-radius:24px;padding:10px;display:flex;gap:10px;align-items:center;text-align:left;box-shadow:0 5px 0 rgba(43,35,64,.18)}
.place .pa{width:58px;height:58px;flex:none}
.place .pa svg{width:100%;height:100%}
.place b{display:block;font-family:var(--f-d);font-size:1.05rem;line-height:1.1}
.place small{display:block;font-weight:800;font-size:.72rem;color:var(--ink-2);line-height:1.15}
.place i{font-style:normal;font-weight:900;font-size:.75rem;background:#fff;border-radius:999px;padding:1px 8px;display:inline-block;margin-top:4px}
@media (max-width:380px){.places{grid-template-columns:1fr}}
.rhead{display:flex;gap:14px;align-items:center;border-radius:26px;padding:14px;margin-bottom:14px;box-shadow:0 5px 0 rgba(43,35,64,.15)}
.rhead .rart{width:84px;height:84px;flex:none}
.rhead .rart svg{width:100%;height:100%}
.rhead .rtxt{flex:1;min-width:0}
.rhead b{display:block;font-family:var(--f-d);font-size:1.6rem;line-height:1}
.rhead span{font-weight:800;font-size:.9rem;color:var(--ink-2)}
.rhead small{font-weight:900;font-size:.8rem}
.rhead .lvbar{background:rgba(255,255,255,.7)}

#guide{position:fixed;left:max(8px,env(safe-area-inset-left,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;flex-direction:column;align-items:flex-start;pointer-events:none}
#guide .gcam{width:82px;height:82px;border-radius:50%;background:#FFF0C2;box-shadow:0 4px 0 rgba(43,35,64,.3),0 0 0 4px #fff;pointer-events:auto}
#guide .gcam svg{width:100%;height:100%}
#guide .gcam.hop{animation:hop .6s}
@keyframes hop{30%{transform:translateY(-14px) rotate(-6deg)}60%{transform:translateY(0)}80%{transform:translateY(-5px)}}
#guide .gbub{background:#fff;border-radius:18px;padding:10px 14px;font-weight:800;font-size:.98rem;line-height:1.3;max-width:min(78vw,300px);margin:0 0 10px 6px;box-shadow:0 4px 0 rgba(43,35,64,.2);position:relative;pointer-events:auto}
#guide .gbub::after{content:"";position:absolute;left:28px;bottom:-10px;border:10px solid transparent;border-top-color:#fff;border-bottom:0}
.screen{padding-bottom:110px}

.pop-in .pk{width:84px;height:84px;margin:-60px auto 0;animation:hop 1s .2s}
.pop-in .pk svg{width:100%;height:100%}
.pop-in .plus{margin:-6px 0 12px;font-weight:900;color:#B7791F}

.living{position:relative}
.living .it{cursor:pointer}
.living .it{transform-box:fill-box;transform-origin:center}
.living .a-kus{animation:fly 2.2s ease-in-out infinite alternate}
.living .a-bulut{animation:drift 7s ease-in-out infinite alternate}
.living .a-gemi,.living .a-balik{animation:rock 3s ease-in-out infinite alternate;transform-origin:center bottom}
.living .a-deniz{animation:wave 4s ease-in-out infinite alternate}
.living .a-tef{animation:shakeT .45s ease-in-out infinite alternate}
.living .a-gunes{animation:spin 24s linear infinite}
.living .a-kalp{animation:beat 1.1s ease-in-out infinite}
.living .a-ates{animation:flick .35s ease-in-out infinite alternate;transform-origin:center bottom}
.living .a-tw{animation:tw 1.8s ease-in-out infinite alternate}
.living .a-tw:nth-child(3n){animation-delay:.6s}.living .a-tw:nth-child(3n+1){animation-delay:1.2s}
.living .a-nur,.living .a-hilal{animation:glow 2.4s ease-in-out infinite alternate}
.living .a-deve,.living .a-keci,.living .a-kedi,.living .a-fil,.living .a-guvercin,.living .a-cocuk{animation:bob 1.4s ease-in-out infinite alternate}
.living .a-ses{animation:tw 1s ease-in-out infinite alternate}
.living .a-palmiye,.living .a-cicek,.living .a-kabak{animation:sway 3.2s ease-in-out infinite alternate;transform-origin:center bottom}
.living .it.tapped{animation:tapb .6s!important}
@keyframes fly{from{transform:translate(-4px,4px)}to{transform:translate(6px,-8px)}}
@keyframes drift{from{transform:translateX(-10px)}to{transform:translateX(14px)}}
@keyframes rock{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes wave{from{transform:translateX(-10px)}to{transform:translateX(10px)}}
@keyframes shakeT{from{transform:rotate(-10deg)}to{transform:rotate(10deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes beat{50%{transform:scale(1.12)}}
@keyframes flick{from{transform:scaleY(.94)}to{transform:scaleY(1.06)}}
@keyframes tw{from{opacity:.35}to{opacity:1}}
@keyframes glow{from{opacity:.7}to{opacity:1;transform:scale(1.05)}}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-3px)}}
@keyframes sway{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}
@keyframes tapb{30%{transform:scale(1.18) translateY(-6px)}60%{transform:scale(.96)}100%{transform:scale(1)}}
.tip{position:absolute;left:50%;top:10px;transform:translateX(-50%);background:#fff;border-radius:16px;padding:8px 14px;font-weight:900;font-size:.95rem;line-height:1.25;box-shadow:0 4px 0 rgba(43,35,64,.25);width:max-content;max-width:88%;text-align:center;pointer-events:none}

.choice .qtxt{font-family:var(--f-d);font-weight:800;font-size:1.25rem;line-height:1.15;padding:18px 4px;display:block}
.choice svg{max-width:110px}

.shophead{display:flex;gap:14px;align-items:center;background:#fff;border-radius:24px;padding:12px 14px;margin-bottom:12px;box-shadow:0 4px 0 rgba(43,35,64,.12)}
.shopcam{width:96px;height:96px;flex:none}
.shopcam svg{width:100%;height:100%}
.shophead b{font-family:var(--f-d);font-size:2rem;color:#B7791F}
.shophead small{display:block;font-weight:800;color:var(--ink-2);font-size:.85rem}
.shop{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sitem{background:#fff;border-radius:20px;padding:6px 6px 10px;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:0 4px 0 rgba(43,35,64,.15);font-size:.85rem;line-height:1.1;text-align:center}
.sitem svg{width:84px;height:84px}
.sitem b{font-weight:900}
.sitem em{font-style:normal;font-weight:900;font-size:.78rem;background:#FFF0C2;color:#8A5A10;border-radius:999px;padding:2px 10px;margin-top:4px}
.sitem.on{box-shadow:0 0 0 4px var(--leaf),0 4px 0 rgba(43,35,64,.15)}
.sitem.on em{background:var(--leaf);color:#fff}

.profiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin-bottom:12px}
.prof{background:#fff;border-radius:24px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:0 5px 0 rgba(43,35,64,.15)}
.prof svg{width:96px;height:96px}
.prof b{font-family:var(--f-d);font-size:1.15rem}
.prof.on{box-shadow:0 0 0 4px var(--grape),0 5px 0 rgba(43,35,64,.15)}
.tg{display:flex;gap:10px;align-items:center;font-weight:800;padding:6px 0}
.tg input{width:22px;height:22px;accent-color:var(--leaf)}

.cal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:12px}
.day{background:#fff;border-radius:16px;padding:6px 2px;display:flex;flex-direction:column;align-items:center;border:3px solid transparent;box-shadow:0 3px 0 rgba(43,35,64,.12);position:relative}
.day b{font-weight:900;font-size:.85rem}
.day i{position:absolute;top:4px;right:4px;width:12px;height:12px;border-radius:50%}
.day.sel{outline:3px solid var(--sun)}
.legend{display:flex;flex-wrap:wrap;gap:10px;font-weight:800;font-size:.85rem;margin-top:10px}
.legend i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:4px;vertical-align:-1px}
.rlist{display:flex;flex-direction:column;gap:8px}
.rrow{background:#fff;border-radius:18px;padding:8px 12px;display:flex;align-items:center;gap:10px;text-align:left;box-shadow:0 3px 0 rgba(43,35,64,.12)}
.rrow .rd{display:flex;flex-direction:column;align-items:center;flex:none;width:40px}
.rrow .rd b{font-size:.75rem;font-weight:900}
.rrow .rt{flex:1;min-width:0;font-weight:800}
.rrow i{width:30px;height:30px;flex:none;border-radius:50%;border:3px solid rgba(43,35,64,.2);display:grid;place-items:center;color:#fff}
.rrow i svg{width:18px;height:18px}
.rrow.done{background:#E6F5EC}
.rrow.done i{background:var(--leaf);border-color:var(--leaf)}

.learn .abp{width:min(62vw,240px);margin:0 auto}
.learn .abp svg{width:100%;height:auto;display:block}
.steps9 button svg{width:100%;max-width:96px;height:auto}
.choice svg{width:100%;height:auto}
.deeds button svg{width:56px;height:56px}
.recent .rr{display:flex;align-items:center;gap:8px}
.recent .rr svg{width:30px;height:30px;flex:none}

[hidden]{display:none!important}

.tile .done{position:absolute;top:5px;left:5px;width:24px;height:24px;border-radius:50%;background:#fff;color:var(--leaf);font-style:normal;font-weight:900;display:grid;place-items:center;font-size:.9rem}

.pz button{padding:0;overflow:hidden;background:#fff;display:block;touch-action:manipulation}
.pz button svg{display:block;width:100%;height:100%;pointer-events:none}
.pz button.sel{outline:5px solid var(--sun);outline-offset:-5px}

/* ---- v5: full version, parental gate ---- */
.gate h4{margin-bottom:4px}
.gate .gq{font-family:var(--f-d);font-weight:800;font-size:1.45rem;color:var(--ink);margin:10px 0 14px}
.gopts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
.gopts .btn{font-size:1.4rem;padding:12px 0;width:100%}
.gerr{min-height:1.2em;color:#C4523B;font-weight:800;margin:0 0 10px}
.tile .prem{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);background:var(--sun);color:var(--ink);font-style:normal;font-weight:900;font-size:.62rem;padding:1px 8px;border-radius:999px;white-space:nowrap}
.tabs .chipbtn.locked{opacity:.6;display:inline-flex;align-items:center;gap:6px}
.lockmini{width:14px;height:14px;color:var(--ink)}
.pw-head{display:flex;gap:14px;align-items:center;background:var(--ink);color:#fff;border-radius:26px;padding:14px;margin-bottom:14px}
.pw-cam{width:92px;height:92px;flex:none}
.pw-cam svg{width:100%;height:100%}
.pw-head small{display:block;font-weight:900;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sun)}
.pw-head b{display:block;font-family:var(--f-d);font-size:1.45rem;line-height:1.1}
.pw-head span{font-weight:700;font-size:.92rem;opacity:.9}
.pw-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.pw-row{display:flex;gap:12px;align-items:center;background:#fff;border-radius:20px;padding:8px 12px;box-shadow:0 3px 0 rgba(43,35,64,.1)}
.pw-ic{width:52px;height:52px;flex:none}
.pw-ic svg{width:100%;height:100%}
.pw-row b{display:block;font-family:var(--f-d);font-size:1.08rem;line-height:1.1}
.pw-row span{font-weight:700;font-size:.88rem;color:var(--ink-2)}
.pw-free{background:#E6F5EC;border-radius:18px;padding:10px 14px;font-weight:700;font-size:.92rem;margin-bottom:12px}
.pw-btns{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.pw-btns .btn{width:100%}
.pw-btns .btn:disabled{opacity:.5}
.pw-note{color:var(--ink-2);font-weight:700;font-size:.85rem;max-width:60ch}
.note.warn{background:#FBE9E4}

.rcode{display:flex;gap:8px;margin:8px 0 2px}
.rcode input{flex:1;min-width:0;padding:10px 12px;border-radius:14px;border:3px solid rgba(43,35,64,.15);font:inherit;font-weight:800;background:#fff;user-select:text;-webkit-user-select:text}

/* --- text never spills out of buttons (narrow phones, large system font) --- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
button,.btn,.choice,.tile,.pill,.chip{min-width:0;overflow-wrap:anywhere;hyphens:auto}
.tile{container-type:inline-size}
.tile span{font-size:clamp(.8rem,13cqi,.98rem);max-width:100%;overflow-wrap:normal;word-break:normal;hyphens:auto}
.tile small{font-size:clamp(.6rem,9.5cqi,.7rem);max-width:100%}
.btn{max-width:100%;white-space:normal;text-align:center;line-height:1.15}
.choice span,.choice b,.qtxt{max-width:100%;overflow-wrap:anywhere}
@media (max-width:374px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile:has(.prem){padding-bottom:30px}

/* notch / home indicator on iPhone (and edge-to-edge Android) */
.bar{padding-top:calc(10px + env(safe-area-inset-top,0px))}
.screen{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
.pop{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
/* ===== v6: silent mode, lively effects, drag-and-drop games ===== */
body.silent #rd, body.silent .rd, body.silent [data-tts]{display:none !important}

/* effects layer */
#fx{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}
.fxp{position:absolute;display:block;will-change:transform,opacity}
.fxp svg{width:100%;height:100%;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.15))}
.fxring{position:absolute;width:70px;height:70px;border-radius:50%;border:5px solid #FFC63A;box-shadow:0 0 18px #FFE27A}
.hand{position:absolute;width:52px;height:52px;margin:-6px 0 0 -10px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.25))}
.hand svg{width:100%;height:100%}

/* screen entrance */
#screen.enter > *{animation:pop6 .42s cubic-bezier(.3,1.4,.6,1) both}
#screen.enter > *:nth-child(2){animation-delay:.05s}
#screen.enter > *:nth-child(3){animation-delay:.1s}
@keyframes pop6{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}

/* springy, glossy tiles and buttons */
.tile,.choice,.btn,button.big,.food{transition:transform .16s cubic-bezier(.3,1.6,.6,1),filter .16s}
.tile:active,.choice:active,.btn:active,button.big:active,.food:active{transform:scale(.93)}
.tile{position:relative;filter:saturate(1.18)}
.tile::after{content:"";position:absolute;left:0;right:0;top:0;height:45%;background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0));border-radius:inherit;pointer-events:none}
.tile svg{animation:bob6 3.2s ease-in-out infinite}
.tile:nth-child(2n) svg{animation-delay:-1.1s}.tile:nth-child(3n) svg{animation-delay:-2s}
@keyframes bob6{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-2deg)}}
.choice.right{animation:yay6 .5s cubic-bezier(.3,1.6,.6,1)}
@keyframes yay6{0%{transform:scale(1)}40%{transform:scale(1.12) rotate(-3deg)}100%{transform:scale(1)}}

/* ===== drag & drop layout: goals | stage | tray ===== */
.dd{display:grid;grid-template-columns:74px 1fr 92px;gap:10px;align-items:stretch;min-height:calc(var(--H,100dvh) - 150px)}
.ddGoals{display:flex;flex-direction:column;gap:10px;justify-content:center;padding:10px 8px;border-radius:24px;background:linear-gradient(180deg,#FFF6D8,#FFE9A8);box-shadow:inset 0 -4px 0 rgba(0,0,0,.06)}
.goal{position:relative;aspect-ratio:1;border-radius:18px;background:#fff;border:4px dashed #E7C46A;display:grid;place-items:center;transition:background .3s,border-color .3s,transform .3s}
.goal svg{width:100%;height:100%}
.goal .ok,.titem .ok{position:absolute;right:-6px;top:-6px;width:26px;height:26px;border-radius:50%;background:#2DBE60;color:#fff;font:900 16px/26px system-ui;text-align:center;font-style:normal;transform:scale(0);transition:transform .35s cubic-bezier(.3,1.8,.6,1);box-shadow:0 2px 0 #1E9448}
.goal.done{background:#C9F7D6;border:4px solid #2DBE60;animation:yay6 .5s}
.goal.done .ok,.titem.worn .ok{transform:scale(1)}

.ddStage{position:relative;border-radius:28px;background:radial-gradient(circle at 50% 30%,#FFFDF3 0,#FFF1C9 45%,#FFD98A 100%);display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 -6px 0 rgba(0,0,0,.06)}
.ddStage::before{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(180deg,#F3C877,#E6AE55);border-radius:50% 50% 0 0/30% 30% 0 0}
.ddStage svg#cam{position:relative;width:100%;max-height:72%;overflow:visible;transform-origin:50% 90%}
.glowRing{position:absolute;inset:8%;border-radius:50%;border:5px dashed transparent;transition:.25s;pointer-events:none}
.glowRing.on{border-color:#FFC63A;box-shadow:0 0 0 8px rgba(255,198,58,.25),0 0 40px #FFE27A inset;animation:spin6 6s linear infinite}
@keyframes spin6{to{transform:rotate(360deg)}}
.ddBar{position:absolute;left:8px;top:8px;display:flex;gap:6px}
.ddBar .round.sm{width:40px;height:40px;border-radius:50%;border:0;background:#8E6BD8;box-shadow:0 3px 0 #6A4CB0;display:grid;place-items:center;padding:7px}
.ddBar .round.sm:nth-child(2){background:#36A469;box-shadow:0 3px 0 #237A4B}
.ddBar svg{width:100%;height:100%}

.ddTray{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start;padding:8px;border-radius:24px;background:linear-gradient(180deg,#E4F4FF,#BFE3FF);overflow-y:auto;max-height:calc(var(--H,100dvh) - 150px)}
.titem{position:relative;aspect-ratio:1;border-radius:18px;background:#fff;box-shadow:0 4px 0 rgba(43,35,64,.14);display:grid;place-items:center;cursor:grab;user-select:none;-webkit-user-select:none;transition:transform .15s,opacity .2s}
.titem svg{width:84%;height:84%;pointer-events:none}
.titem.lifted{opacity:.3;transform:scale(.9)}
.titem.worn{background:#E6FBEA;box-shadow:0 4px 0 #9BE0B0}
.titem.gone{opacity:0;transform:scale(.4);pointer-events:none}
.titem.paint{background:transparent;box-shadow:none}
.ddTray .titem.paint{background:rgba(255,255,255,.55);box-shadow:none;border-radius:50%}
.ddTray .titem:not(.paint){grid-column:span 2}
.titem svg{transform:scale(1.15)}
.ghost{position:fixed;left:0;top:0;z-index:9998;pointer-events:none;display:grid;place-items:center;border-radius:18px;background:rgba(255,255,255,.85);box-shadow:0 14px 26px rgba(43,35,64,.3)}
.ghost svg{width:84%;height:84%}

/* market */
.pz6 .ddStage{background:radial-gradient(circle at 50% 35%,#FFF8EE 0,#FFE0C7 55%,#FFC29A 100%)}
.pz6 .ddStage::before{background:linear-gradient(180deg,#D69A5B,#B97A3E)}
.pz6 .basket{position:relative;width:92%;transform-origin:50% 100%}
.pz6 .basket svg{width:100%;overflow:visible}
.dropIn{animation:drop6 .45s cubic-bezier(.3,1.5,.6,1) both}
@keyframes drop6{from{opacity:0;transform:translate(0,-60px)}}
.rounds{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:8px}
.rounds i{width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.7);border:3px solid #fff}
.rounds i.on{background:#2DBE60}.rounds i.cur{background:#FFC63A;animation:yay6 1.2s infinite}

@media (max-width:374px){.dd{grid-template-columns:62px 1fr 78px;gap:6px}}
@media (min-width:700px){.dd{grid-template-columns:110px 1fr 220px}.ddTray{grid-template-columns:1fr 1fr 1fr 1fr}.ddTray .titem:not(.paint){grid-column:span 2}}
@media (prefers-reduced-motion:reduce){.tile svg,.glowRing.on,#screen.enter>*{animation:none !important}}

/* living camel */
.k-tail,.k-eye,.k-ear,.k-head,.k-body{transform-box:fill-box}
.k-tail{transform-origin:100% 0;animation:kTail 2.6s ease-in-out infinite}
.k-eye{transform-origin:50% 50%;animation:kBlink 4.6s infinite}
.k-ear{transform-origin:50% 100%;animation:kEar 5s ease-in-out infinite}
.k-head{transform-origin:0% 100%;animation:kNod 3.4s ease-in-out infinite}
.k-body{transform-origin:50% 100%;animation:kBreath 3.4s ease-in-out infinite}
@keyframes kTail{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(14deg)}}
@keyframes kBlink{0%,91%,97%,100%{transform:scaleY(1)}94%{transform:scaleY(.08)}}
@keyframes kEar{0%,78%,100%{transform:rotate(0)}83%{transform:rotate(-20deg)}88%{transform:rotate(8deg)}93%{transform:rotate(-6deg)}}
@keyframes kNod{0%,100%{transform:rotate(0)}50%{transform:rotate(-4deg)}}
@keyframes kBreath{0%,100%{transform:scale(1,1)}50%{transform:scale(1.012,1.03)}}
#cam.happy .k-head{animation:kHappy .6s ease-in-out 2}
#cam.happy .k-tail{animation-duration:.5s}
@keyframes kHappy{0%,100%{transform:rotate(0)}30%{transform:rotate(-10deg)}70%{transform:rotate(6deg)}}
@media (prefers-reduced-motion:reduce){.k-tail,.k-eye,.k-ear,.k-head,.k-body{animation:none !important}}
.dd:not(.pz6) .ddStage{align-items:end;padding-bottom:16%}
@media (max-width:440px){.dd:not(.pz6){grid-template-columns:58px 1fr 82px;gap:6px}}
/* ===== v7 look: bright pastel, sticker outlines, chunky framed buttons ===== */
:root{--olc:#6E4C62;--frame:#fff}
html,body{background:#EFEAFF}
.app{background-color:#EFEAFF;background-image:
  linear-gradient(90deg,rgba(255,255,255,.55) 3px,transparent 3px),linear-gradient(rgba(255,255,255,.55) 3px,transparent 3px);
  background-size:46px 46px;background-position:-2px -2px}

/* header: no dark bar, floating round buttons with white rings */
.bar{background:transparent;color:var(--ink)}
.bar .round{width:50px;height:50px;border:4px solid #fff;box-shadow:0 4px 0 rgba(90,53,80,.22);background:#7FCFF5}
.bar #backBtn{background:#FFC93C}
.bar #backBtn svg{stroke:#fff;filter:drop-shadow(0 1.5px 0 #D98A00)}
.bar #sndBtn{background:#B49BFF}
.bar .stk{background:#fff;color:var(--ink);border:4px solid #fff;box-shadow:0 4px 0 rgba(90,53,80,.22);padding:5px 14px 5px 8px}
.bar .stk svg{width:24px;height:24px;filter:drop-shadow(0 0 0 #000)}
.title{color:#3B2A5C;font-weight:900}
.title b{color:#F59E0B}

/* sticker outlines on pictures */
.tile svg,.titem svg,.goal svg,.ghost svg,#cam,.choice svg,.disc svg,.pk svg,#gcam svg,.me .av svg,.food svg,.shopcam svg{filter:url(#ol)}
.goal svg,.me .av svg,.disc svg{filter:url(#ols)}

/* tiles: white picture cards, colored picture area, label below */
.tile{background:#fff !important;color:#3B2A5C;border:0;padding:7px 7px 10px;border-radius:24px;
  box-shadow:0 0 0 3px #E4DAFF,0 6px 0 3px rgba(90,53,80,.16);filter:none}
.tile svg{background:var(--tc,#8FD3FF);border-radius:18px;padding:4px;width:100% !important;height:auto !important;aspect-ratio:1.25;box-shadow:inset 0 -6px 0 rgba(0,0,0,.08)}
.tile span{color:#3B2A5C;text-shadow:none;margin-top:4px}
.tile small{color:#7A6B95;opacity:1}
.tile::after{display:none}
.tile .new{z-index:2}
.t-sky{--tc:linear-gradient(180deg,#9BDBFF,#5EBBF5)}
.t-sun{--tc:linear-gradient(180deg,#FFE07A,#FFC23C)}
.t-leaf{--tc:linear-gradient(180deg,#9EEBB8,#5CCF86)}
.t-coral{--tc:linear-gradient(180deg,#FFC2AE,#FF8F7A)}
.t-grape{--tc:linear-gradient(180deg,#D7C6FF,#AE8CFF)}
.t-sand{--tc:linear-gradient(180deg,#FFD9A6,#F2AE5E)}
.t-ink{--tc:linear-gradient(180deg,#B8ADF0,#7F70D0)}
.t-teal{--tc:linear-gradient(180deg,#9EEDE8,#4FCFC6)}
.t-rose{--tc:linear-gradient(180deg,#FFC4DA,#FF89B3)}

/* white cards get a soft frame */
.me,.tasks,.pcard,.qcard,.choice{border:4px solid #fff;box-shadow:0 5px 0 rgba(90,53,80,.14)}
.choice{background:#FFFDF7}
.btn{border:4px solid #fff;box-shadow:0 5px 0 rgba(90,53,80,.3);border-radius:22px}

/* ===== play boards ===== */
.dd{gap:10px}
.ddStage{border:6px solid #fff;box-shadow:0 0 0 6px #B784F5,0 10px 0 4px rgba(90,53,80,.18);border-radius:30px}
.ddGoals{background:#fff;border-radius:999px;padding:14px 8px;box-shadow:0 6px 0 rgba(90,53,80,.15);border:4px solid #fff}
.ddTray{background:#fff;border-radius:40px;padding:10px 8px;box-shadow:0 6px 0 rgba(90,53,80,.15)}
.goal{border-radius:50%;background:#FBF7EE;border:3px dashed #E2C98E}
.goal.done{border:4px solid #2DBE60;background:#D8FBE2}
.titem{border-radius:50%;background:#F3EEFF;box-shadow:inset 0 -4px 0 rgba(90,53,80,.08)}
.titem.worn{background:#DDF8E6;box-shadow:0 0 0 4px #7ED9A0}
.ddTray .titem.paint{background:#F7F4FF}
.ghost{border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 0 0 5px #8FD3FF,0 14px 26px rgba(90,53,80,.3)}
.ddBar .round.sm{border:3px solid #fff;width:44px;height:44px}

/* market: table with a gingham cloth */
.pz6 .ddStage{background:radial-gradient(circle at 50% 30%,#FFFBF1 0,#FFEBD3 60%,#FFD9B5 100%)}
.pz6 .ddStage::before{height:34%;border-radius:22px 22px 0 0;
  background:
   linear-gradient(90deg,rgba(255,255,255,.45) 50%,transparent 50%) 0 0/26px 26px,
   linear-gradient(rgba(255,255,255,.45) 50%,transparent 50%) 0 0/26px 26px,#55AEF5;
  box-shadow:inset 0 5px 0 rgba(255,255,255,.6)}
.pz6 .ddStage{align-items:end;padding-bottom:20%}.pz6 .basket{z-index:1}
.pz6 .basket svg{filter:url(#ol)}
.pz6 .rounds{z-index:2}

@media (max-width:374px){.bar .round{width:44px;height:44px}}

@media (max-width:440px){.dd:not(.pz6){grid-template-columns:70px 1fr 80px}}
.dd{padding:6px 4px}

/* header music button */
.bar #musBtn{background:#FF9EC4}
.bar #musBtn svg,.bar #sndBtn svg{width:24px;height:24px}

/* ===== LANDSCAPE (phones and tablets turned sideways) ===== */
@media (orientation:landscape) and (min-aspect-ratio:4/3){
  .wrap{max-width:none}
  .bar{padding-block:calc(6px + env(safe-area-inset-top,0px)) 4px}
  .bar-in{max-width:none}
  .screen{padding-top:8px}
  /* home: left column = profile, tasks, places; right = wide map */
  .wrap:has(> .map){display:grid;grid-template-columns:minmax(260px,34%) 1fr;grid-template-areas:"me map" "tasks map" "places map" "sunnah map" "parent parent";gap:0 16px;align-items:start}
  .wrap > .me{grid-area:me}.wrap > .tasks{grid-area:tasks}.wrap > .places{grid-area:places;grid-template-columns:1fr}
  .wrap > .sunnah{grid-area:sunnah}.wrap > .map{grid-area:map;position:sticky;top:0;margin:0}.wrap > .parent{grid-area:parent}
  .tiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .tile svg{aspect-ratio:1.5}
  .rhead{padding:10px 14px}.rhead .rart{width:64px;height:64px}
  /* play boards fill the screen side to side */
  .dd{grid-template-columns:minmax(80px,13%) 1fr minmax(150px,26%) !important;min-height:calc(var(--H,100dvh) - 90px)}
  .ddGoals{flex-direction:column}
  .ddTray{grid-template-columns:repeat(3,1fr);max-height:calc(var(--H,100dvh) - 96px)}
  .ddTray .titem:not(.paint){grid-column:span 1}
  .ddTray .titem.paint{grid-column:span 1}
  .pz6 .ddTray{grid-template-columns:repeat(2,1fr)}
  .ddStage{min-height:calc(var(--H,100dvh) - 104px)}
  .ddStage svg#cam{height:calc(var(--H,100dvh) - 160px);max-height:none;width:auto;max-width:92%}
  .ddStage{height:calc(var(--H,100dvh) - 104px);min-height:0}
  .dd:not(.pz6) .ddStage{padding-bottom:3%}
  .pz6 .ddStage{padding-bottom:8%}
  .pz6 .basket{width:min(50%,300px)}
  .ddGoals{justify-content:space-evenly;padding:10px 6px}
  .ddGoals .goal{height:min(calc((var(--H,100dvh) - 170px) / 4.4),100%);width:auto;max-width:100%;margin:0 auto}
  #guide .gbub{max-width:260px;font-size:.9rem}
  .pop-in{max-height:calc(var(--H,100dvh) - 24px);overflow:auto;max-width:520px;display:grid;grid-template-columns:auto 1fr;gap:4px 18px;text-align:left;align-items:center}
  .pop-in > *{grid-column:2}.pop-in .disc,.pop-in .pk{grid-column:1;grid-row:1 / span 4;margin:0}
  #guide .gcam{width:64px;height:64px}
}
@media (orientation:landscape) and (max-height:520px){
  .bar .round{width:42px;height:42px;border-width:3px}
  .title{font-size:1.25rem}
  .screen{padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
}
/* ===== v7: intro, walking, games-only ===== */
.places.one{grid-template-columns:1fr}
.k-leg{transform-box:fill-box;transform-origin:50% 0}
.walking .k-leg.la{animation:kStep .66s ease-in-out infinite}
.walking .k-leg.lb{animation:kStep .66s ease-in-out -.33s infinite}
.walking .k-body,.walking .k-head{animation:kBob .33s ease-in-out infinite alternate}
@keyframes kStep{0%,100%{transform:rotate(14deg)}50%{transform:rotate(-14deg)}}
@keyframes kBob{to{transform:translateY(-2.5px)}}

#intro{position:fixed;inset:0;z-index:10000;overflow:hidden;cursor:pointer}
#intro .ib{position:absolute;left:0;width:140%}
#intro .isky{inset:0;width:100%;background:linear-gradient(180deg,#8FD3FF 0%,#C7E9FF 38%,#FFE7B8 70%,#FFD08A 100%)}
#intro .isun{width:min(26vh,180px);left:auto;right:14%;top:12%;filter:drop-shadow(0 0 30px #FFE27A)}
#intro .ifar{bottom:18%;height:34%}
#intro .imid{bottom:6%;height:30%}
#intro .inear{bottom:0;height:22%}
#intro .ilogo{position:absolute;left:50%;top:36%;display:flex;flex-direction:column;align-items:center;gap:0;text-align:center;filter:drop-shadow(0 6px 0 rgba(110,76,98,.25))}
#intro .ilogo .lmoon{width:min(16vh,96px);height:min(16vh,96px);margin-bottom:-10px;animation:bob6 3s ease-in-out infinite}
#intro .ilogo b,#intro .ilogo i{font-family:var(--f-d);font-weight:800;font-style:normal;line-height:.9;font-size:min(17vh,96px);letter-spacing:.01em}
#intro .ilogo b{color:#fff;-webkit-text-stroke:0;text-shadow:0 3px 0 #6E4C62,0 -1px 0 #6E4C62,2px 0 0 #6E4C62,-2px 0 0 #6E4C62}
#intro .ilogo i{color:#FFC93C;text-shadow:0 3px 0 #B86E00,0 -1px 0 #B86E00,2px 0 0 #B86E00,-2px 0 0 #B86E00;margin-top:-4px}
#intro .ilogo small{margin-top:8px;background:#fff;color:#6E4C62;font-weight:900;border-radius:999px;padding:4px 14px;font-size:min(4.4vh,18px)}
#intro .iwalk{position:absolute;bottom:7%;height:min(34vh,240px);width:auto;overflow:visible}
#intro .iskip{position:absolute;right:max(14px,env(safe-area-inset-right,0px));bottom:max(14px,env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.85);border:3px solid #fff;border-radius:999px;padding:6px 14px;font-weight:900;color:#6E4C62}
@media (orientation:portrait){#intro .iwalk{height:min(22vh,200px)}#intro .ilogo{top:34%}}
.ddStage.hasbg::before{display:none}
.ddStage .bgscene{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.ddStage.hasbg > *:not(.bgscene){position:relative;z-index:1}
.ddStage.hasbg > .glowRing{position:absolute}
.ddStage.hasbg > .ddBar{position:absolute}
.ddStage.hasbg > .rounds{position:absolute}
.pz6 .ddStage.hasbg::before{display:block;z-index:1;height:30%}
.pz6 .ddStage.hasbg .basket{z-index:2}
@media (orientation:landscape) and (min-aspect-ratio:4/3){
  #screen .wrap svg:not(.bgscene):not(#cam){max-height:calc(var(--H,100dvh) - 130px)}
  #screen .wrap > svg,#screen .wrap > div > svg:only-child{margin-inline:auto;display:block}
}
/* ===== v8: cartoon world, tavaf ===== */
body.onworld .screen{padding:0;overflow:hidden}
body.onworld .screen > .wrap{height:100%;max-width:none}
body.onworld #guide{display:none}
.world{position:relative;height:100%;min-height:300px;overflow:hidden;border-radius:0;touch-action:pan-y;user-select:none}
.wsky{position:absolute;inset:0;background:linear-gradient(180deg,#7FCBFF 0%,#BFE6FF 45%,#FFE9C2 78%,#FFD694 100%)}
.wsun{position:absolute;right:8%;top:6%;width:min(22vh,130px);height:min(22vh,130px);filter:drop-shadow(0 0 24px #FFE27A);animation:bob6 6s ease-in-out infinite}
.wl,.wsigns{position:absolute;left:0;bottom:0;will-change:transform}
.wl0{animation:none}
.wsigns{top:0}
.wcam{position:absolute;bottom:4%;height:34%;transform:translateX(-50%);z-index:5;pointer-events:none}
.wcam svg{height:100%;width:auto;overflow:visible;filter:url(#ol)}
.wcam.flip svg{transform:scaleX(-1)}
.wfoot{position:absolute;inset:0;pointer-events:none;z-index:4}
.fp{position:absolute;bottom:5%;width:12px;height:6px;border-radius:50%;background:rgba(150,95,40,.35);animation:fpfade 2.6s forwards}
@keyframes fpfade{to{opacity:0}}
.wl4{z-index:6;pointer-events:none}
.wsign{position:absolute;top:8%;transform:translateX(-50%) translateY(30px) scale(.3);opacity:0;transition:transform .55s cubic-bezier(.3,1.6,.5,1),opacity .3s;z-index:7;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.wsign.up{transform:translateX(-50%) translateY(0) scale(1);opacity:1;pointer-events:auto}
.wsign.up .wboard{animation:swing 3s ease-in-out infinite}
.wsign.hello .wboard{animation:hello .7s cubic-bezier(.3,1.6,.5,1),swing 3s ease-in-out .7s infinite}
@keyframes swing{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
@keyframes hello{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.wboard{order:1;display:flex;flex-direction:column;align-items:center;gap:2px;background:#fff;border:5px solid var(--c);border-radius:26px;padding:8px 14px 10px;box-shadow:0 6px 0 rgba(90,53,80,.25),0 0 0 6px rgba(255,255,255,.6);min-width:130px;transform-origin:50% -20px}
.wboard .wic{width:58px;height:58px;border-radius:50%;background:var(--bg);display:grid;place-items:center;margin-top:-34px;border:4px solid #fff;box-shadow:0 3px 0 rgba(90,53,80,.2)}
.wboard .wic svg{width:52px;height:52px;filter:url(#ols)}
.wboard b{font-family:var(--f-d);font-size:1.25rem;line-height:1.05;color:#3B2A5C}
.wboard small{font-weight:900;font-size:.8rem;color:#7A6B95}
.wboard em{font-style:normal;font-weight:900;color:#fff;background:var(--c);border-radius:999px;padding:3px 14px;margin-top:3px;animation:pulse7 1.4s ease-in-out infinite}
@keyframes pulse7{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.0)}50%{box-shadow:0 0 0 6px rgba(255,201,60,.45)}}
.wsign.lock .wboard{filter:grayscale(.6);opacity:.9}.wsign.lock em{animation:none;background:#9A8FB0}
.wpost{order:2;width:8px;height:40px;background:linear-gradient(90deg,#8B5A2B,#C98F45);border-radius:4px;margin-top:-4px}
.warrow{order:0;font-style:normal;color:#FFC93C;font-size:22px;text-shadow:0 2px 0 #B86E00;animation:bob6 1s ease-in-out infinite;margin-bottom:2px}
.wtop{position:absolute;left:0;right:0;top:8px;display:flex;align-items:center;gap:8px;padding:0 max(12px,env(safe-area-inset-left,0px));z-index:8}
.wme{display:flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:4px 14px 4px 4px;box-shadow:0 4px 0 rgba(90,53,80,.2);border:3px solid #fff}
.wme .av{width:40px;height:40px;border-radius:50%;background:#FFE7A3;display:grid;place-items:center}.wme .av svg{width:36px;height:36px}
.wme small{display:block;font-size:.65rem;font-weight:900;color:var(--grape);text-transform:uppercase;line-height:1}.wme b{font-family:var(--f-d);font-size:1rem;line-height:1.1;color:#3B2A5C}
.wtrack{flex:1;position:relative;height:44px;background:rgba(255,255,255,.75);border-radius:999px;display:flex;justify-content:space-between;align-items:center;padding:0 8px;border:3px solid #fff;max-width:420px;margin:0 auto}
.wtrack::before{content:"";position:absolute;left:24px;right:24px;top:50%;border-top:3px dashed #C9A66B}
.wtrack button{position:relative;width:34px;height:34px;border-radius:50%;background:#fff;border:3px solid var(--c);display:grid;place-items:center}
.wtrack button svg{width:28px;height:28px}
.wdot{position:absolute;top:-8px;width:18px;height:18px;border-radius:50%;background:#FFC93C;border:3px solid #fff;box-shadow:0 2px 0 rgba(90,53,80,.3);transition:left .2s linear}
.wtask{display:flex;align-items:center;gap:6px;background:#fff;border-radius:999px;padding:4px 12px 4px 6px;box-shadow:0 4px 0 rgba(90,53,80,.2);border:3px solid #fff;font-weight:900;color:#3B2A5C;font-size:.8rem}
.wtask svg{width:30px;height:30px}.wtask b{display:block;font-size:1rem;line-height:1}
.warr{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;background:#FFC93C;color:#fff;font-size:22px;border:4px solid #fff;box-shadow:0 5px 0 rgba(90,53,80,.25);z-index:8;text-shadow:0 2px 0 #B86E00}
.warr.l{left:max(10px,env(safe-area-inset-left,0px))}.warr.r{right:max(10px,env(safe-area-inset-right,0px))}
.warr:active{transform:translateY(-50%) scale(.9)}
.wtoast{position:absolute;left:50%;bottom:16%;transform:translateX(-50%);background:#fff;border-radius:999px;padding:8px 18px;font-weight:900;color:#3B2A5C;box-shadow:0 4px 0 rgba(90,53,80,.2);z-index:9;animation:pop6 .4s both}
.tasksPop .tlist{text-align:left;margin:6px 0 12px}.tasksPop .task{display:flex;gap:10px;align-items:center;padding:6px 0;font-weight:800}
.tasksPop .task i{width:26px;height:26px;border-radius:50%;border:3px solid #D9D1EA;display:grid;place-items:center;font-style:normal;color:#fff;flex:none}
.tasksPop .task.done i{background:#2DBE60;border-color:#2DBE60}.tasksPop .task span{flex:1}
#intro2{position:fixed;inset:0;z-index:10000;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.65),rgba(255,255,255,0) 60%)}
#intro2 .ilogo{position:absolute;left:50%;top:42%;display:flex;flex-direction:column;align-items:center;text-align:center;filter:drop-shadow(0 6px 0 rgba(110,76,98,.25))}
#intro2 .lmoon{width:min(15vh,90px);height:min(15vh,90px);margin-bottom:-8px}
#intro2 b,#intro2 i{font-family:var(--f-d);font-weight:800;font-style:normal;line-height:.9;font-size:min(17vh,96px)}
#intro2 b{color:#fff;text-shadow:0 3px 0 #6E4C62,0 -1px 0 #6E4C62,2px 0 0 #6E4C62,-2px 0 0 #6E4C62}
#intro2 i{color:#FFC93C;text-shadow:0 3px 0 #B86E00,0 -1px 0 #B86E00,2px 0 0 #B86E00,-2px 0 0 #B86E00}
#intro2 small{margin-top:8px;background:#fff;color:#6E4C62;font-weight:900;border-radius:999px;padding:4px 14px;font-size:min(4.4vh,18px)}
/* walking boy */
.k-arm{transform-box:fill-box;transform-origin:50% 0}
.walking .k-arm.af{animation:kStep .66s ease-in-out -.33s infinite}
.walking .k-arm.ab{animation:kStep .66s ease-in-out infinite}
/* tavaf */
.tvwrap{height:100%}
.tv7{position:relative;height:calc(var(--H,100dvh) - 96px);min-height:280px;border-radius:26px;overflow:hidden;border:5px solid #fff;box-shadow:0 0 0 5px #B784F5;touch-action:none;user-select:none}
.tv7 > svg{width:100%;height:100%;display:block;max-height:none !important}
.laps7{position:absolute;top:10px;left:50%;transform:translateX(-50%);display:flex;gap:6px}
.laps7 i{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.85);border:3px solid #fff;display:grid;place-items:center;font-style:normal;font-weight:900;color:#9A8FB0;box-shadow:0 3px 0 rgba(90,53,80,.18)}
.laps7 i.on{background:#2DBE60;color:#fff;animation:yay6 .5s}
.tvhint{position:absolute;right:6%;bottom:12%;display:flex;align-items:center;gap:6px;background:#fff;border-radius:999px;padding:6px 14px 6px 8px;font-weight:900;color:#3B2A5C;box-shadow:0 4px 0 rgba(90,53,80,.2);transition:opacity .4s}
.tvhint.gone{opacity:0}
.hand7{width:40px;height:40px;animation:press7 1.2s ease-in-out infinite}.hand7 svg{width:100%;height:100%}
@keyframes press7{0%,100%{transform:translateY(0)}50%{transform:translateY(6px) scale(.92)}}
.lapTag{position:absolute;left:50%;top:22%;transform:translateX(-50%);font-family:var(--f-d);font-size:2.4rem;color:#fff;text-shadow:0 3px 0 #2DBE60,0 -2px 0 #2DBE60,2px 0 0 #2DBE60,-2px 0 0 #2DBE60;animation:lapT 1.4s ease-out forwards}
@keyframes lapT{0%{opacity:0;transform:translateX(-50%) scale(.4)}25%{opacity:1;transform:translateX(-50%) scale(1.15)}80%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-30px)}}
/* school-style letters for children */
:root{--f-d:"Fredoka","Baloo 2","Trebuchet MS",system-ui,sans-serif;--f-b:"Andika","Fredoka",system-ui,sans-serif}
body{font-weight:700;letter-spacing:.01em}
.title,.tile span,.wboard b,#intro2 b,#intro2 i,h3,h4,.btn{font-family:var(--f-d);font-weight:600}
.tile span{font-size:1.2rem}
b,strong{font-weight:700}
/* goals as a strip on top of the board */
.dd.gtop{grid-template-columns:1fr minmax(84px,26%) !important}
.ddStage > .ddGoals.top{position:absolute !important;top:8px;left:50%;transform:translateX(-50%);z-index:3;flex-direction:row !important;gap:8px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.9);box-shadow:0 4px 0 rgba(90,53,80,.18);border:3px solid #fff;height:auto}
.ddStage > .ddGoals.top .goal{width:clamp(40px,11vh,60px) !important;height:clamp(40px,11vh,60px) !important;margin:0}
.dd.gtop .ddBar{top:auto;bottom:8px}
.dd.gtop .ddStage svg#cam{margin-top:10%}
@media (orientation:portrait){.dd.gtop{grid-template-columns:1fr 84px !important}.ddStage > .ddGoals.top .goal{width:46px !important;height:46px !important}}
/* sandstorm */
.storm{position:absolute;inset:0;z-index:7;pointer-events:none;overflow:hidden;background:linear-gradient(90deg,rgba(240,190,110,.35),rgba(250,215,150,.18) 60%,rgba(240,190,110,.3))}
.storm .dust{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(236,186,110,.55),rgba(236,186,110,0));filter:blur(4px)}
.storm .grain{position:absolute;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(255,236,190,0),#F6D597,rgba(255,236,190,0))}
.storm .swirl{position:absolute;width:46px;height:46px;border-radius:50%;border:3px solid rgba(255,230,180,.75);border-left-color:transparent;border-bottom-color:transparent}
.world svg{max-height:none !important}
/* ===== full-screen games, floating top buttons, landscape only ===== */
.bar{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent !important;padding:calc(8px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px)) !important;pointer-events:none}
.bar-in{max-width:none !important;gap:8px}
.bar .title{visibility:hidden}
.bar .round,.bar .stk{pointer-events:auto}
.bar .round{width:46px !important;height:46px !important}
.screen{padding:calc(66px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 20px max(16px,env(safe-area-inset-left,0px)) !important;height:var(--H,100dvh)}
/* full-bleed game screens */
.screen:has(.world),.screen:has(.dd),.screen:has(.tv7),.screen:has(.race){padding:0 !important;overflow:hidden}
.screen:has(.dd) > *,.screen:has(.tv7) > .wrap,.screen:has(.race) > .wrap{height:var(--H,100dvh);max-width:none}
.dd{height:var(--H,100dvh);min-height:0 !important;gap:0 !important;padding:0 !important;grid-template-columns:1fr minmax(96px,20%) !important}
.dd .ddStage{height:var(--H,100dvh) !important;border:0 !important;border-radius:0 !important;box-shadow:none !important}
.dd .ddTray{border-radius:0 !important;max-height:var(--H,100dvh) !important;height:var(--H,100dvh);padding:calc(66px + env(safe-area-inset-top,0px)) 8px 10px !important;align-content:start;box-shadow:inset 6px 0 0 rgba(90,53,80,.06) !important;background:#FFFFFFEE !important}
.dd .ddGoals:not(.top){height:var(--H,100dvh);border-radius:0 !important}
.ddStage > .ddGoals.top{top:calc(8px + env(safe-area-inset-top,0px)) !important}
.dd.gtop .ddBar{left:auto;right:10px}
.ddStage svg#cam{height:calc(var(--H,100dvh) - 120px) !important}
.tv7,.race{height:var(--H,100dvh) !important;border:0 !important;border-radius:0 !important;box-shadow:none !important}
.laps7{top:calc(10px + env(safe-area-inset-top,0px)) !important}
.world{height:var(--H,100dvh) !important}
.wtop{top:calc(8px + env(safe-area-inset-top,0px)) !important;padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:calc(190px + env(safe-area-inset-right,0px)) !important}
.wtop .wtask{order:1}.wtop .wtrack{order:2}
.sg{grid-template-columns:1fr minmax(96px,18%) !important}
.sgStage svg{width:100%;height:100%;max-height:none !important}
/* rotate hint */
#rotate{display:none}
@media (orientation:portrait) and (max-width:1100px) and (pointer:coarse){
  #rotate{display:flex;position:fixed;inset:0;z-index:20000;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:linear-gradient(180deg,#8FD3FF,#FFE7B8)}
  #rotate .rph{width:140px;height:140px;animation:rot90 2.4s ease-in-out infinite}
  #rotate .rcam{width:160px;height:150px;overflow:visible}
}
@keyframes rot90{0%,20%{transform:rotate(0)}50%,80%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
/* new games */
.sgStage{display:block !important;padding:0 !important}
.sgStage > svg{position:absolute;inset:0}
.silg .sil{animation:silp 1.8s ease-in-out infinite}
.silg.done .sil{animation:none}
.silg.hint .sil{animation:silh .5s 3}
@keyframes silp{0%,100%{opacity:1}50%{opacity:.7}}
@keyframes silh{50%{opacity:.3}}
.titem.src{position:relative}.titem.src em{position:absolute;right:4px;bottom:2px;font-style:normal;font-weight:900;color:#B784F5}
.cbadge{position:absolute;left:14px;top:calc(70px + env(safe-area-inset-top,0px));background:#fff;border-radius:22px;border:4px solid #FFC93C;padding:4px 14px 8px;text-align:center;box-shadow:0 5px 0 rgba(90,53,80,.2);z-index:2}
.cbadge b{display:block;font-family:var(--f-d);font-size:3rem;line-height:1;color:#E0903A}
.cbadge.full{border-color:#2DBE60;animation:yay6 .6s}
.cdots{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;max-width:110px}
.cdots i{width:14px;height:14px;border-radius:50%;border:2px solid #E0903A;background:#fff}.cdots i.on{background:#E0903A}
.bigNum{position:absolute;left:50%;top:40%;font-family:var(--f-d);font-weight:700;font-size:7rem;color:#FFC93C;text-shadow:0 5px 0 #B86E00;pointer-events:none;animation:bigN 1.1s ease-out forwards;z-index:4}
@keyframes bigN{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}30%{transform:translate(-50%,-50%) scale(1.15);opacity:1}100%{transform:translate(-50%,-90%) scale(1);opacity:0}}
.race{position:relative;overflow:hidden;touch-action:none;user-select:none}
.race .wl{position:absolute;left:0;bottom:0}
.walking{--gait:.66s}
.walking .k-leg.la,.walking .k-arm.ab{animation-duration:var(--gait) !important}
.walking .k-leg.lb,.walking .k-arm.af{animation-duration:var(--gait) !important;animation-delay:calc(var(--gait) * -.5) !important}
.walking .k-body,.walking .k-head{animation-duration:calc(var(--gait) * .5) !important}
.rbar{position:absolute;left:50%;top:calc(14px + env(safe-area-inset-top,0px));transform:translateX(-50%);width:min(46%,420px);height:22px;background:rgba(255,255,255,.85);border-radius:999px;border:3px solid #fff;box-shadow:0 3px 0 rgba(90,53,80,.2)}
.rpos{position:absolute;top:-2px;width:20px;height:20px;border-radius:50%;background:var(--c,#999);border:3px solid #fff;left:-10px}
.rpos.me{background:#FFC93C;width:24px;height:24px;top:-4px;z-index:2}
.rflag{position:absolute;right:-14px;top:-10px;font-size:22px}
.rcount{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);font-family:var(--f-d);font-weight:700;font-size:8rem;color:#fff;text-shadow:0 6px 0 #E0503A,0 0 30px rgba(255,255,255,.8);pointer-events:none;z-index:5}
.rcount.go{animation:cnt .75s ease-out}.rcount.stay{animation:cnt .75s ease-out forwards}
@keyframes cnt{0%{transform:translate(-50%,-50%) scale(2);opacity:0}30%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
.tapBtn{position:absolute;right:max(24px,env(safe-area-inset-right,0px));bottom:24px;width:110px;height:110px;border-radius:50%;background:#FFC93C;border:6px solid #fff;box-shadow:0 7px 0 rgba(90,53,80,.3),0 0 0 10px rgba(255,201,60,.3);display:grid;place-items:center;z-index:6;animation:pulse7 1.2s infinite}
.tapBtn svg{width:58px;height:58px}
.tapBtn.hit{animation:tapHit .2s}
@keyframes tapHit{50%{transform:scale(.86)}}
.again{position:absolute;left:50%;top:66%;transform:translateX(-50%);width:90px;height:90px;border-radius:50%;background:#36C46F;color:#fff;font-size:48px;border:6px solid #fff;box-shadow:0 6px 0 rgba(90,53,80,.3);z-index:6}
.saiw .wl{position:absolute;left:0;bottom:0}
#updWall{position:fixed;inset:0;z-index:30000;display:flex;align-items:center;justify-content:center;gap:24px;background:linear-gradient(180deg,#8FD3FF,#FFE7B8)}
#updWall .ucam{width:min(36vw,260px);height:auto;overflow:visible}
#updWall .ubox{background:#fff;border-radius:28px;padding:20px 26px;text-align:center;box-shadow:0 6px 0 rgba(90,53,80,.2);display:flex;flex-direction:column;gap:8px;max-width:320px}
#updWall .ubox b{font-family:var(--f-d);font-size:1.6rem;color:#3B2A5C}
.tv3d canvas{position:absolute;inset:0;display:block}
.boy3d{position:absolute;left:50%;bottom:2%;height:27%;transform:translateX(-50%);pointer-events:none;z-index:3}
.boy3d svg{height:100%;width:auto;overflow:visible;filter:url(#ols)}
.bleg,.barm{transform-box:fill-box}
.bwalk .bleg.bl{animation:bstep .5s ease-in-out infinite}
.bwalk .bleg.br{animation:bstep .5s ease-in-out -.25s infinite}
.bwalk .barm{transform-origin:50% 0}
.bwalk .barm.al{animation:bswing .5s ease-in-out infinite}
.bwalk .barm.ar{animation:bswing .5s ease-in-out -.25s infinite}
.bwalk{animation:bsway .5s ease-in-out infinite}
@keyframes bstep{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px) scaleY(.92)}}
@keyframes bswing{0%,100%{transform:rotate(8deg)}50%{transform:rotate(-8deg)}}
@keyframes bsway{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-2px) rotate(1deg)}}
.istilam .barm.ar{transform-origin:50% 0;animation:istil 1.2s ease-in-out !important}
@keyframes istil{0%,100%{transform:rotate(0)}25%,75%{transform:rotate(-150deg)}}
.race svg,.tv7 svg,.world svg,.sgStage svg,.dd .ddStage svg{max-height:none !important}
.sg .ddTray{grid-template-columns:1fr 1fr !important;gap:10px !important}
.sg .ddTray .titem{grid-column:span 1 !important}
.cnt .ddTray{grid-template-columns:1fr !important}
.cnt .ddTray .titem.src{width:100%;max-width:150px;justify-self:center;background:#FFF1D6;box-shadow:0 0 0 4px #FFC93C}
@media (orientation:landscape) and (max-height:520px){.sg .ddTray{grid-template-columns:1fr 1fr !important}}
/* ===== v11: landmarks, signposts, welcome, drawn icons ===== */
.ok,.done{font-size:0 !important}
.goal .ok,.titem .ok{background:#2DBE60 var(--chk) center/72% no-repeat !important}
.tile em.done{background:#2DBE60 var(--chk) center/72% no-repeat !important;width:28px;height:28px;border-radius:50%}
.wst{position:absolute;bottom:0;transform:translateX(-50%);z-index:7;cursor:pointer}
.wst.land{width:calc(330px * var(--k,1));height:78%;display:flex;flex-direction:column;align-items:center;justify-content:space-between}
.wst.land .warw{width:44px;height:44px;opacity:0;transition:opacity .3s;animation:bob6 .9s ease-in-out infinite;margin-top:4%}
.wst.land.near .warw{opacity:1}
.wst.land .whit{flex:1;width:100%}
.wst.land .wplq{margin-bottom:5%;display:flex;align-items:center;gap:6px;background:linear-gradient(#E3AD68,#C98F45);border:3px solid #8B5A2B;border-radius:12px;padding:4px 14px;box-shadow:0 4px 0 rgba(90,53,80,.25);color:#fff;font-family:var(--f-d)}
.wst.land .wplq b{font-size:1.15rem;text-shadow:0 2px 0 #6B3F1C}
.wst.land .wplq small{font-weight:700;background:#fff;color:#8B5A2B;border-radius:999px;padding:0 8px}
.wst.land .wplq svg{width:22px;height:22px}
.wst.land.near .wplq{animation:yay6 .6s}
.wst.land.soon{cursor:default}
.wst.land .wsoon{position:absolute;left:50%;bottom:14%;transform:translateX(-50%);width:calc(150px * var(--k,1))}
.wst.land .wsoon svg{width:100%;height:auto}
.wst.land.soon .wplq{display:none}
.wst.land.lock .wplq{filter:grayscale(.5)}
.wst:not(.land){height:62%;transform-origin:50% 100%}
.wst:not(.land) .spost{height:100%;width:auto;display:block;filter:drop-shadow(0 6px 0 rgba(90,53,80,.18))}
.wst:not(.land).near{animation:signWiggle 2.6s ease-in-out infinite}
.wst.hello:not(.land){animation:signHello .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes signWiggle{0%,100%{transform:translateX(-50%) rotate(-1.5deg)}50%{transform:translateX(-50%) rotate(1.5deg)}}
@keyframes signHello{0%{transform:translateX(-50%) scale(1)}40%{transform:translateX(-50%) scale(1.1)}100%{transform:translateX(-50%) scale(1)}}
.warr svg{width:28px;height:28px}
.wtrack button.dim{opacity:.45;filter:grayscale(.6)}
.wme.rname{cursor:default}.wme.rname .av svg{width:34px;height:34px}
.wme .av svg{width:36px;height:36px}
.wtask svg{width:28px;height:28px}
.bar #setBtn{background:#8E6BD8}.bar #setBtn svg{width:26px;height:26px}
.rcount .medal svg{width:1.6em;height:1.6em;display:block;filter:drop-shadow(0 6px 0 rgba(90,53,80,.25))}
.rflag svg{width:28px;height:28px}
.again svg{width:52px;height:52px}
.tasksPop .task i svg{width:18px;height:18px}
/* welcome & kids chooser */
#welcome,#kids{position:fixed;inset:0;z-index:15000;display:flex;align-items:center;justify-content:center}
#welcome .wsky{position:absolute;inset:0;background:linear-gradient(180deg,#8FD3FF,#FFE7B8)}
#kids{background:rgba(90,53,80,.55)}
#welcome .wl1,#welcome .wl2,#kids .kbox{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px}
#kids .kbox{background:#fff;border-radius:30px;padding:18px 26px 24px;box-shadow:0 8px 0 rgba(90,53,80,.25)}
#welcome h2,#kids h2{margin:0;font-family:var(--f-d);font-weight:700;font-size:2rem;color:#fff;text-shadow:0 3px 0 #6E4C62,0 -1px 0 #6E4C62,2px 0 0 #6E4C62,-2px 0 0 #6E4C62}
#kids h2{color:#3B2A5C;text-shadow:none}
.wpick{display:flex;gap:22px;flex-wrap:wrap;justify-content:center}
.wkid{display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff;border-radius:28px;padding:12px 18px 10px;border:5px solid #fff;box-shadow:0 7px 0 rgba(90,53,80,.22);transition:transform .2s}
.wkid:active{transform:scale(.93)}
.wkid.on{border-color:#FFC93C}
.wkid .wface{width:min(26vh,150px);height:min(26vh,150px);border-radius:50%;background:#FFF1D6;display:grid;place-items:center;overflow:hidden}
.wkid .wface svg{width:92%;height:92%}
.wkid[data-g="k"] .wface{background:#FFE3EF}.wkid[data-g="e"] .wface{background:#DDF1FF}
.wkid .wface.plus{background:#B784F5}.wkid .wface.plus svg{width:50%;height:50%}
.wkid b{font-family:var(--f-d);font-weight:700;font-size:1.4rem;color:#3B2A5C}
#welcome .wl2{flex-direction:row;gap:26px}
.wface.big{width:min(40vh,220px);height:min(40vh,220px);border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 7px 0 rgba(90,53,80,.2)}
.wface.big svg{width:90%;height:90%}
.wname{display:flex;flex-direction:column;gap:10px;background:#fff;border-radius:26px;padding:18px 22px;box-shadow:0 7px 0 rgba(90,53,80,.2)}
.wname label{font-family:var(--f-d);font-weight:600;color:#7A6B95}
.wname input{font:700 1.6rem var(--f-b);padding:10px 14px;border-radius:16px;border:4px solid #E4DAFF;width:min(48vw,300px);color:#3B2A5C;-webkit-user-select:text;user-select:text}
.wbtns{display:flex;gap:10px;align-items:center}
.wgo{display:flex;align-items:center;gap:8px;background:#36C46F;color:#fff;border-radius:999px;padding:8px 22px 8px 14px;border:4px solid #fff;box-shadow:0 5px 0 rgba(90,53,80,.25);font-family:var(--f-d);font-weight:700;font-size:1.4rem}
.wgo svg{width:30px;height:30px}
.wskip{color:#7A6B95;font-weight:700;text-decoration:underline}
.wclose{position:absolute;left:-14px;top:-14px;width:48px;height:48px;border-radius:50%;background:#FFC93C;border:4px solid #fff;box-shadow:0 4px 0 rgba(90,53,80,.25);display:grid;place-items:center}
#welcome .wclose{left:max(14px,env(safe-area-inset-left,0px));top:max(14px,env(safe-area-inset-top,0px))}
.wclose svg{width:26px;height:26px}
body:not(.onworld) .wtop{padding-left:calc(70px + env(safe-area-inset-left,0px)) !important}
.screen:has(.world) .wtop{padding-left:calc(70px + env(safe-area-inset-left,0px))}
body.onworld .wtop{padding-left:max(12px,env(safe-area-inset-left,0px)) !important}
/* ===== v12: day/night, night-sky game, painting ===== */
.world .wsky{transition:background 1s}
.world.dawn .wsky{background:linear-gradient(180deg,#8FB6F0 0%,#F7C6D0 45%,#FFD9A0 80%,#FFC27A 100%)}
.world.dusk .wsky{background:linear-gradient(180deg,#5B6FC8 0%,#C98BC0 40%,#FF9E7A 75%,#FFB86A 100%)}
.world.night .wsky{background:linear-gradient(180deg,#0F1236 0%,#25235E 50%,#4A3D86 85%,#6A548E 100%)}
.world.night .wl{filter:brightness(.5) saturate(.75) hue-rotate(-12deg)}
.world.dusk .wl,.world.dawn .wl{filter:brightness(.88) saturate(1.05) sepia(.12)}
.world.night .wsun{filter:drop-shadow(0 0 26px #FFF3B0);right:10%;top:8%}
.world.night .wcam svg{filter:url(#ol) brightness(.82)}
.wstars{position:absolute;inset:0;width:100%;height:70%;pointer-events:none}
.tw{animation:twk 2.6s ease-in-out infinite}
@keyframes twk{0%,100%{opacity:.9}50%{opacity:.25}}
/* night sky game */
.gs{position:relative;height:var(--H,100dvh);overflow:hidden;touch-action:none}
.gs > svg{position:absolute;inset:0;width:100%;height:100%;max-height:none !important}
.st7 .ring{opacity:0}
.st7 path{transition:transform .3s;transform-box:fill-box;transform-origin:50% 50%;opacity:.55}
.st7.next path{opacity:1;animation:starPulse 1s ease-in-out infinite}
.st7.next .ring{opacity:1;animation:ringP 1.2s ease-out infinite;transform-box:fill-box;transform-origin:50% 50%}
.st7.done path{opacity:1;fill:#FFF3B0}
.st7.nudge path{animation:starNudge .5s}
@keyframes starPulse{0%,100%{transform:scale(1.2)}50%{transform:scale(1.65)}}
@keyframes ringP{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.8);opacity:0}}
@keyframes starNudge{0%,100%{transform:scale(1.3)}30%{transform:scale(2) rotate(20deg)}60%{transform:scale(1.5) rotate(-20deg)}}
.shooting{animation:shoot 1s ease-out forwards;stroke-dasharray:70;stroke-dashoffset:70}
@keyframes shoot{0%{stroke-dashoffset:70;opacity:1}100%{stroke-dashoffset:-70;opacity:0}}
.gpick{position:absolute;left:50%;bottom:calc(10px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;gap:8px;z-index:3}
.gpick button{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.18);border:3px solid rgba(255,255,255,.5);display:grid;place-items:center;position:relative}
.gpick button svg{width:36px;height:36px}
.gpick button.on{background:#FFC93C;border-color:#fff;transform:scale(1.12)}
.gpick button.got::after{content:"";position:absolute;right:-4px;bottom:-4px;width:20px;height:20px;border-radius:50%;background:#2DBE60 var(--chk) center/70% no-repeat;border:2px solid #fff}
/* painting */
.pgal{height:var(--H,100dvh);display:flex;align-items:center;gap:22px;padding:70px 26px 20px;overflow-x:auto;background:linear-gradient(180deg,#FFF4E3,#FFE3C2)}
.easel{position:relative;flex:none;width:min(30vw,260px);display:flex;flex-direction:column;align-items:center}
.eframe{display:block;width:100%;aspect-ratio:4/3;background:#fff;border:10px solid #C98F45;border-radius:10px;box-shadow:inset 0 0 0 3px #E9BC7E,0 8px 0 rgba(90,53,80,.2);overflow:hidden;transform:rotate(-1.5deg)}
.easel:nth-child(2n) .eframe{transform:rotate(1.5deg)}
.eframe svg{width:100%;height:100%;display:block}
.elegs{width:70%;height:46px;background:linear-gradient(75deg,transparent 46%,#A86F34 46%,#A86F34 54%,transparent 54%),linear-gradient(105deg,transparent 46%,#A86F34 46%,#A86F34 54%,transparent 54%);margin-top:-4px}
.eok{position:absolute;right:-8px;top:-8px;width:36px;height:36px;border-radius:50%;background:#2DBE60;border:4px solid #fff;display:grid;place-items:center}.eok svg{width:20px}
.easel:active{transform:scale(.95)}
.pnt{position:relative;height:var(--H,100dvh);display:grid;grid-template-columns:1fr 150px;gap:12px;padding:64px 14px 12px 14px;background:linear-gradient(180deg,#FFF4E3,#FFE3C2)}
.pcv{background:#fff;border:12px solid #C98F45;border-radius:14px;box-shadow:inset 0 0 0 3px #E9BC7E,0 8px 0 rgba(90,53,80,.2);overflow:hidden;display:flex;align-items:center;justify-content:center}
.pcv svg{width:100%;height:100%;max-height:none !important}
.pcv [data-r]{cursor:pointer;transition:fill .25s}
.ppots{display:grid;grid-template-columns:1fr 1fr;gap:4px;align-content:center;background:#fff;border-radius:24px;padding:8px;box-shadow:0 6px 0 rgba(90,53,80,.15);overflow-y:auto}
.pp{width:100%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;transition:transform .2s}
.pp svg{width:92%;height:92%}
.pp.on{transform:scale(1.18) translateY(-4px);background:#FFF1D6}
.pbtns{position:absolute;right:178px;bottom:20px;display:flex;gap:10px}
.pclr,.pdone{width:62px;height:62px;border-radius:50%;border:5px solid #fff;box-shadow:0 5px 0 rgba(90,53,80,.25);display:grid;place-items:center}
.pclr{background:#B49BFF}.pdone{background:#36C46F}.pclr svg,.pdone svg{width:34px;height:34px}
.brush{position:fixed;width:60px;height:60px;margin:-56px 0 0 -30px;pointer-events:none;z-index:50;opacity:0}
.brush.dab{animation:dab .5s ease-out}
@keyframes dab{0%{opacity:1;transform:rotate(-30deg) translateY(-14px)}40%{opacity:1;transform:rotate(-10deg) translateY(0)}100%{opacity:0;transform:rotate(-30deg) translateY(-20px)}}
.screen:has(.gs),.screen:has(.pnt),.screen:has(.pgal){padding:0 !important;overflow:hidden}
.screen:has(.gs) > .wrap,.screen:has(.pnt) > .wrap,.screen:has(.pgal) > .wrap{height:var(--H,100dvh);max-width:none}
/* living scenery */
.p-palmiye{transform-box:fill-box;transform-origin:50% 100%;animation:palmSway 5s ease-in-out infinite}
@keyframes palmSway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(2deg)}}
.p-bulut{animation:cloudDrift 22s ease-in-out infinite alternate}
@keyframes cloudDrift{from{transform:translateX(-30px)}to{transform:translateX(40px)}}
.world:not(.night) .nightOnly{display:none}
.world.night .p-gunes{display:none}
.web path{fill:none;stroke:#F4F1EA;stroke-width:.55;stroke-dasharray:1;stroke-dashoffset:1;animation:weave 12s linear infinite}
.web path:nth-child(n+9){animation-delay:2.5s}
.web path:nth-child(n+10){animation-delay:3.5s}
.web path:nth-child(n+11){animation-delay:4.5s}
@keyframes weave{0%{stroke-dashoffset:1}35%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.spider{animation:spiderMove 12s ease-in-out infinite}
@keyframes spiderMove{0%{transform:translate(0,-14px)}15%{transform:translate(0,0)}30%{transform:translate(-10px,4px)}45%{transform:translate(8px,8px)}60%{transform:translate(-4px,10px)}80%,100%{transform:translate(0,0)}}
.dove{opacity:0}
.dove.land{animation:doveLand 9s ease-out forwards}
@keyframes doveLand{0%{opacity:1;transform:translate(160px,-120px) scale(.6)}35%{opacity:1;transform:translate(0,0) scale(1)}85%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(-140px,-110px) scale(.6)}}
.flock{position:absolute;left:0;width:200px;height:60px;z-index:2;pointer-events:none}
.bird{position:absolute;width:22px;height:11px;animation:flap .5s ease-in-out infinite}
@keyframes flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(-.5)}}
.gs{background:linear-gradient(180deg,#141238,#2E2A6E 60%,#1E1840)}
/* the landmark glows so the child sees it can be touched */
.wst.land .whit{position:relative}
.wst.land:not(.soon) .whit::before{content:"";position:absolute;left:8%;right:8%;top:6%;bottom:-6%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,226,122,.55),rgba(255,226,122,.18) 60%,rgba(255,226,122,0));mix-blend-mode:screen;opacity:0;transition:opacity .5s}
.wst.land.near:not(.soon) .whit::before{opacity:1;animation:landGlow 1.8s ease-in-out infinite}
.world.night .wst.land.near:not(.soon) .whit::before{background:radial-gradient(closest-side,rgba(255,236,150,.85),rgba(255,214,90,.35) 55%,rgba(255,214,90,0))}
.wst.land:not(.soon) .whit::after{content:"";position:absolute;inset:10% 14%;opacity:0;pointer-events:none;
  background:radial-gradient(circle,#fff 0 2px,transparent 3px) 10% 20%/38% 42%,radial-gradient(circle,#FFE596 0 2.5px,transparent 3.5px) 60% 70%/46% 36%;animation:twinkleLand 2.4s ease-in-out infinite}
.wst.land.near:not(.soon) .whit::after{opacity:1}
@keyframes landGlow{0%,100%{transform:scale(.92);opacity:.65}50%{transform:scale(1.08);opacity:1}}
@keyframes twinkleLand{0%,100%{filter:brightness(1);transform:translateY(0)}50%{filter:brightness(1.8);transform:translateY(-6px)}}
.wst.land:not(.soon) .whit::before{background:radial-gradient(closest-side,rgba(255,226,122,0) 48%,rgba(255,226,122,.45) 62%,rgba(255,226,122,.15) 80%,rgba(255,226,122,0)) !important}
.world.night .wst.land.near:not(.soon) .whit::before{background:radial-gradient(closest-side,rgba(255,236,150,0) 46%,rgba(255,236,150,.75) 60%,rgba(255,214,90,.25) 80%,rgba(255,214,90,0)) !important}
.wst.land .whit::before,.wst.land .whit::after{display:none !important}
.lglow{opacity:0;transition:opacity .4s}
.lglow.on{animation:lgPulse 1.4s ease-in-out infinite}
@keyframes lgPulse{0%,100%{opacity:.55}50%{opacity:1}}
.world.night .lglow.on{animation-name:lgPulseN}
@keyframes lgPulseN{0%,100%{opacity:.75}50%{opacity:1}}
.world.night .wl3{filter:none}
.world.night .wl3 > *:not(.lglow){filter:brightness(.5) saturate(.75) hue-rotate(-12deg)}
/* Kasvâ'yı Süsle with stars */
.bar #susBtn{background:#FFE7A3;padding:3px}.bar #susBtn svg{width:100%;height:100%;filter:none}
.sus13{grid-template-columns:1fr minmax(170px,30%) !important}
.sus13 .ddTray{grid-template-columns:repeat(3,1fr) !important;gap:8px !important}
.sus13 .ddTray .titem{grid-column:span 1 !important}
.titem.locked2 svg{filter:grayscale(.85) opacity(.55) !important}
.titem .price{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);display:flex;align-items:center;gap:2px;background:#fff;border-radius:999px;padding:1px 8px 1px 4px;box-shadow:0 2px 0 rgba(90,53,80,.2);font-family:var(--f-d);font-weight:700;color:#B86E00;font-size:.9rem;z-index:2}
.titem .price svg{width:16px;height:16px;filter:none !important}
.titem .lk{position:absolute;right:-2px;top:-2px;width:24px;height:24px;background:#fff;border-radius:50%;display:grid;place-items:center;box-shadow:0 2px 0 rgba(90,53,80,.2)}
.titem .lk svg{width:18px;height:18px;filter:none !important}
.purse{position:absolute;left:12px;top:calc(70px + env(safe-area-inset-top,0px));display:flex;align-items:center;gap:6px;background:#fff;border-radius:999px;padding:6px 16px 6px 8px;border:4px solid #FFC93C;box-shadow:0 4px 0 rgba(90,53,80,.2);z-index:3;font-family:var(--f-d);font-weight:700;font-size:1.5rem;color:#B86E00}
.purse svg{width:30px;height:30px}
.sus13 .wtoast{display:flex;align-items:center;gap:6px;bottom:12%}.sus13 .wtoast svg{width:22px;height:22px}
.sus13 .ddBar{left:auto !important;right:10px;top:auto !important;bottom:10px}
.ddStage.hasbg > .purse{position:absolute}.ddStage.hasbg > .wtoast{position:absolute}
/* caring for Kasvâ */
.need{position:absolute;left:62%;top:-18%;width:64px;height:58px;pointer-events:auto;cursor:pointer;animation:needBob 1.6s ease-in-out infinite;z-index:4}
.need span{position:absolute;inset:0 0 10px 0;background:#fff;border-radius:50%;border:4px solid var(--c);display:grid;place-items:center;box-shadow:0 4px 0 rgba(90,53,80,.2)}
.need span svg{width:74%;height:74%}
.need::before,.need::after{content:"";position:absolute;background:#fff;border:3px solid var(--c);border-radius:50%}
.need::before{width:14px;height:14px;left:6px;bottom:2px}.need::after{width:8px;height:8px;left:-2px;bottom:-8px}
@keyframes needBob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.06)}}
.ddStage .needWrap{position:absolute;left:52%;top:16%;width:80px;height:72px;z-index:4}
.ddStage .needWrap .need{left:0;top:0;width:80px;height:72px}
.meters{position:absolute;left:12px;top:calc(124px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:6px;z-index:3}
.meter{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.92);border-radius:999px;padding:3px 10px 3px 3px;box-shadow:0 3px 0 rgba(90,53,80,.15)}
.meter .mi{width:30px;height:30px;border-radius:50%;background:#fff;border:3px solid var(--c);display:grid;place-items:center}.meter .mi svg{width:80%;height:80%;filter:none !important}
.meter i{display:block;width:70px;height:12px;border-radius:999px;background:#EEE8F6;overflow:hidden}
.meter i b{display:block;height:100%;background:var(--c);border-radius:999px;transition:width .8s}
.meter.low{animation:yay6 1.4s infinite}
.ddStage.hasbg > .meters,.ddStage.hasbg > .needWrap,.ddStage.hasbg > .zzz{position:absolute}
.careRow{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:6px;background:#FFF6E3;border-radius:22px;border:3px dashed #E9C866;margin-bottom:6px}
.titem.care{background:#fff}
#bb,.titem svg{}
.bar #susBtn{position:relative}
.bar #susBtn .nb{position:absolute;right:-8px;top:-8px;width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid #FF5C6C;display:grid;place-items:center;animation:needBob 1.2s infinite}
.bar #susBtn .nb svg{width:80%;height:80%}
#cam.sleep .k-eye{animation:none !important;transform:scaleY(.12)}
#cam.sleep .k-head{animation:none !important;transform:rotate(10deg);transform-origin:0 100%}
#cam.eat .k-head{animation:chew .38s ease-in-out infinite !important}
@keyframes chew{0%,100%{transform:rotate(0)}50%{transform:rotate(8deg)}}
#cam.sad .k-head{animation:none;transform:rotate(6deg)}
.zzz{position:absolute;z-index:5;pointer-events:none}
.zzz b{position:absolute;font-family:var(--f-d);font-weight:700;color:#8E6BD8;font-size:1.6rem;animation:zz 2.4s ease-out infinite;opacity:0}
.zzz b:nth-child(2){animation-delay:.6s;font-size:1.3rem}.zzz b:nth-child(3){animation-delay:1.2s;font-size:1rem}
@keyframes zz{0%{opacity:0;transform:translate(0,0)}20%{opacity:1}100%{opacity:0;transform:translate(30px,-60px)}}
/* v15 */
html,body{height:var(--H,100%)}
.app{position:fixed;inset:0;height:auto}
.world,.tv7,.race,.gs,.pnt,.pgal{height:var(--H,100dvh) !important}
/* award popups: one picture only */
.pop-in .pk{display:none !important}
.pop-in .disc{grid-row:1 / span 4}
/* night sky picker on the right, out of the drawing's way */
.gpick{left:auto !important;right:calc(14px + env(safe-area-inset-right,0px)) !important;top:calc(78px + env(safe-area-inset-top,0px)) !important;bottom:auto !important;transform:none !important;flex-direction:column}
/* lighter rendering while walking */
.world.moving .p-palmiye,.world.moving .p-bulut,.world.moving .spider,.world.moving .web path{animation-play-state:paused !important}
.lglow:not(.on){display:none}
.wcam svg{filter:none !important}
.wl{transform-style:flat;backface-visibility:hidden}
/* ===== v16: phone fit and lighter rendering ===== */
/* heavy outline filters off (they made Android stutter) */
.tile svg,.titem svg,.goal svg,.ghost svg,#cam,.choice svg,.disc svg,.pk svg,#gcam svg,.me .av svg,.food svg,.shopcam svg,.wboard .wic svg,.boy3d svg,.pz6 .basket svg,.wcam svg,.wkid .wface svg,.wme .av svg,.need svg,.meter svg{filter:none !important}
.tile{filter:none !important}
.tile svg{animation:none !important}
.p-palmiye,.p-bulut{animation:none !important}
.lglow.on{animation:none !important;opacity:.9}
.world:not(.atCave) .spider,.world:not(.atCave) .web path{animation-play-state:paused !important}
.world.night .wl{filter:none !important}
.world.night .wl0,.world.night .wl1,.world.night .wl2,.world.night .wl3,.world.night .wl4{opacity:.62}
.world.night .wsky{background:linear-gradient(180deg,#0F1236 0%,#25235E 50%,#4A3D86 85%,#3A2E5E 100%)}
.world.dusk .wl,.world.dawn .wl{filter:none !important}
.fxp svg{filter:none !important}

/* buttons a bit smaller on short phones */
@media (max-height:440px){
  .bar .round{width:42px !important;height:42px !important;border-width:3px !important}
  .bar .stk{padding:3px 12px 3px 6px !important;font-size:.95rem}
  .bar-in{gap:6px !important}
  .screen{padding-top:calc(58px + env(safe-area-inset-top,0px)) !important}
  .wme{padding:2px 12px 2px 2px}.wme .av{width:34px;height:34px}.wme b{font-size:.9rem}.wme small{font-size:.58rem}
  .wtask{padding:2px 10px 2px 4px}.wtask svg{width:24px;height:24px}
  .wtrack{height:38px}.wtrack button{width:30px;height:30px}
  .warr{width:46px;height:46px}
}
/* centre items live between the back button and the right-hand buttons */
.wtop{padding-right:var(--topR,300px) !important}
.screen:has(.world) .wtop{padding-left:var(--topL,70px) !important}
body.onworld .wtop{padding-left:max(12px,env(safe-area-inset-left,0px)) !important}
.wtrack{min-width:0;max-width:none !important}
.laps7{left:var(--topL,70px) !important;right:var(--topR,300px) !important;transform:none !important;justify-content:center;flex-wrap:nowrap}
.laps7 i{width:26px;height:26px;font-size:.85rem;flex:none}
.rbar{left:var(--topL,70px) !important;right:var(--topR,300px) !important;width:auto !important;transform:none !important}
.ddStage > .ddGoals.top{top:calc(60px + env(safe-area-inset-top,0px)) !important}
.gpick{top:calc(62px + env(safe-area-inset-top,0px)) !important}
.cbadge{top:calc(62px + env(safe-area-inset-top,0px)) !important}
.purse{top:calc(62px + env(safe-area-inset-top,0px)) !important}

/* old games: desert scenery and one-screen fit */
body.oldgame .app{background:var(--desert) center bottom/cover no-repeat,linear-gradient(180deg,#8ED6FF 0%,#CFEFFF 55%,#FFE7B8 100%) !important}
body.oldgame .screen{overflow:hidden !important;padding-bottom:6px !important}
body.oldgame .screen > .wrap{max-width:min(1100px,100%);margin:0 auto}
body.oldgame h3.sec{color:#fff;text-shadow:0 2px 0 #6E4C62,0 -1px 0 #6E4C62,1px 0 0 #6E4C62,-1px 0 0 #6E4C62;margin-bottom:8px}
body.oldgame .chipbtn{border:3px solid #fff;box-shadow:0 4px 0 rgba(90,53,80,.2)}
body.oldgame .say,body.oldgame .qcard,body.oldgame .note{background:rgba(255,255,255,.94);border:3px solid #fff;border-radius:22px;box-shadow:0 4px 0 rgba(90,53,80,.15)}
body.oldgame .say #rd{display:none}
body.oldgame .card .back,body.oldgame .card .face{border:4px solid #fff;box-shadow:0 5px 0 rgba(90,53,80,.2)}
@media (orientation:landscape){
  body.oldgame .grid,body.oldgame .memo{grid-template-columns:repeat(auto-fit,minmax(110px,1fr)) !important}
  body.oldgame .card{aspect-ratio:1 !important}
}
#screen.enter > *{animation-fill-mode:backwards !important}
@media (orientation:landscape){
  body.oldgame .diff{display:grid !important;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
  body.oldgame .diff > :not(.pic){grid-column:1 / -1}
}

/* Kasvâ'yı Süsle on short landscape phones: wider tray, small items, no scrolling */
@media (orientation:landscape) and (max-height:480px){
  .dd.sus13{grid-template-columns:1fr 40% !important}
  .sus13 .ddTray{grid-template-columns:repeat(6,1fr) !important;gap:5px !important;padding:calc(58px + env(safe-area-inset-top,0px)) 6px 6px !important;overflow:hidden}
  .sus13 .ddTray .careRow{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:4px !important}
  .sus13 .ddTray .titem .price{transform:scale(.8);transform-origin:50% 100%}
  .sus13 .ddTray .titem .lk{transform:scale(.75)}
}

/* maze: big board on the left, arrow pad on the right (landscape) */
@media (orientation:landscape){
  .wrap:has(> .maze){display:grid !important;grid-template-columns:auto auto;grid-template-areas:"lv lv" "mz pad" "say say";justify-content:center;align-items:center;gap:8px 28px}
  .wrap:has(> .maze) > .levels{grid-area:lv;justify-content:center}
  .wrap:has(> .maze) > .maze{grid-area:mz;width:calc(var(--H,100dvh) - 150px) !important;max-width:none !important;height:auto;aspect-ratio:1;margin:0 !important;background:#FFF8E8;border:4px solid #fff;border-radius:22px;box-shadow:0 5px 0 rgba(90,53,80,.14)}
  .wrap:has(> .maze) > .pad{grid-area:pad;margin:0 !important}
  .wrap:has(> .maze) > .say{grid-area:say;margin-top:0 !important}
}
@media (orientation:landscape){
  .wrap:has(> .maze){grid-template-columns:auto auto auto;grid-template-areas:"lv mz pad";gap:0 28px;min-height:calc(var(--H,100dvh) - 70px)}
  .wrap:has(> .maze) > .levels{flex-direction:column;gap:8px}
  .wrap:has(> .maze) > .maze{width:calc(var(--H,100dvh) - 84px) !important}
  .wrap:has(> .maze) > .say{display:none}
}
@media (orientation:landscape){
  .wrap:has(> .maze) > .maze{display:grid;place-items:center;padding:6px;overflow:hidden}
  .wrap:has(> .maze) > .maze svg{width:100%;height:100%;box-shadow:none;background:transparent}
  .wrap:has(> .maze) > .levels .chipbtn{font-size:.95rem;padding:8px 16px}
}

/* ===== v17 Hayvan Dostlar ===== */
.pets17{position:relative;height:var(--H,100dvh);display:grid;place-items:center;overflow:hidden}
.pets17 .prow{position:relative;z-index:1;display:flex;gap:min(2.2vw,18px);padding:60px 16px 20px;flex-wrap:wrap;justify-content:center}
.pcard17{position:relative;width:min(14vw,calc((var(--H,100dvh) - 100px) * .75),150px);aspect-ratio:.82;border:5px solid #fff;border-radius:26px;background:linear-gradient(180deg,#BFE8FF,#E8F7FF 62%,#A8DE9B 62%);box-shadow:0 6px 0 rgba(90,53,80,.2);padding:0;display:grid;place-items:center;transition:transform .16s cubic-bezier(.3,1.6,.6,1)}
.pcard17:active{transform:scale(.92)}
.pcard17 .pp{width:96%;display:block}.pcard17 .pp svg{width:100%;height:auto;display:block}
.pcard17.done{box-shadow:0 0 0 4px #2DBE60,0 6px 0 rgba(90,53,80,.2)}
.ok17{position:absolute;right:-8px;top:-8px;width:30px;height:30px;border-radius:50%;background:#2DBE60;border:3px solid #fff;display:grid;place-items:center;padding:3px}
.ok17 svg{width:100%;height:100%}
.pet17 .ddStage{position:relative}
.pet17 .petBox{position:relative;z-index:1;height:calc(var(--H,100dvh) - 90px);aspect-ratio:1;margin-top:40px;align-self:center}
.pet17 #petSvg{width:100%;height:100%;overflow:visible}
.pet17 #petG{transform-box:fill-box;transform-origin:50% 100%}
.hearts17{position:absolute;z-index:2;top:calc(14px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);display:flex;gap:8px;background:#fff;border-radius:999px;padding:6px 14px;box-shadow:0 4px 0 rgba(90,53,80,.16)}
.hearts17 i{width:30px;height:28px;display:block}.hearts17 svg{width:100%;height:100%;fill:#E6DCEB}
.hearts17 i.on svg{fill:#FF5F84}
.want17{position:absolute;right:-6%;top:4%;width:30%;aspect-ratio:1;background:#fff;border-radius:50%;box-shadow:0 4px 0 rgba(90,53,80,.15);padding:6%;opacity:0;transform:scale(.4);transition:.35s cubic-bezier(.3,1.6,.6,1)}
.want17.on{opacity:1;transform:none;animation:bob6 2.4s ease-in-out infinite}
.want17::after{content:"";position:absolute;left:4%;bottom:-6%;width:16%;aspect-ratio:1;border-radius:50%;background:#fff}
.want17 svg{width:100%;height:100%}
.pet17 .ddTray{display:flex !important;flex-direction:column;justify-content:center;gap:12px !important;padding:calc(62px + env(safe-area-inset-top,0px)) 12px 12px !important;overflow:hidden}
.pet17 .titem.give17{width:min(100%,calc((var(--H,100dvh) - 110px) / 3));aspect-ratio:1;margin:0 auto;border-radius:24px !important;background:#fff !important;box-shadow:0 0 0 4px var(--c),0 6px 0 rgba(90,53,80,.18) !important;grid-column:auto !important}
.pet17 .titem.give17 svg{width:82%;height:82%;transform:none}
.pet17 .titem.give17.worn{opacity:.45;box-shadow:0 0 0 4px #2DBE60 !important}
.nextPet{position:absolute;z-index:3;right:16px;bottom:16px;width:64px;height:64px;border-radius:50%;border:5px solid #fff;background:#2DBE60;box-shadow:0 5px 0 #1E9448;padding:12px;opacity:0;transform:scale(0);pointer-events:none;transition:.4s cubic-bezier(.3,1.6,.6,1)}
.nextPet.on{opacity:1;transform:none;pointer-events:auto;animation:yay6 1.4s 1s infinite}
.nextPet svg{width:100%;height:100%}
.nextPet{position:absolute !important}
.hearts17{position:absolute !important;top:calc(62px + env(safe-area-inset-top,0px)) !important;left:calc(16px + env(safe-area-inset-left,0px)) !important;transform:none !important;flex-direction:column;padding:10px 7px !important}
.pets17 .prow{flex-wrap:nowrap}
.screen:has(.pets17){padding:0 !important;overflow:hidden}
.screen:has(.pets17) > .pets17{height:var(--H,100dvh);max-width:none;width:100%}
.pets17 .prow{padding:70px 16px 16px}
.screen:has(.pets17) > .pets17{position:fixed;inset:0;height:auto;z-index:0}
.pcard17{width:min(13.5vw,calc((var(--H,100dvh) - 100px) * .75),210px)}
.pets17 .bgscene{position:absolute !important;inset:0;width:100%;height:100%}
/* ===== v18: one calm entrance (no pop-in scaling) ===== */
#screen.enter > *{animation:none !important}

/* ===== v18 shared full-screen frame ===== */
.screen:has(.g18){padding:0 !important;overflow:hidden}
.g18{position:fixed;inset:0;overflow:hidden;background:#CDEBFF;user-select:none;-webkit-user-select:none;touch-action:none;z-index:0}
.g18 > .bgscene{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.g18 .area{position:absolute;z-index:1;left:calc(12px + env(safe-area-inset-left,0px));right:calc(12px + env(safe-area-inset-right,0px));top:calc(64px + env(safe-area-inset-top,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:center;gap:14px}
.g18 .area.two{display:grid;grid-template-columns:1fr auto;align-items:stretch}
.g18 .area.two.l{grid-template-columns:auto 1fr}
.dots18{position:absolute;z-index:3;top:calc(20px + env(safe-area-inset-top,0px));left:var(--topL,80px);right:var(--topR,300px);display:flex;justify-content:center;align-items:center;gap:7px;pointer-events:none}
.dots18 i{width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.85);border:3px solid #fff;box-shadow:0 2px 0 rgba(90,53,80,.18)}
.dots18 i.on{background:#2DBE60}
.rb18{width:62px;height:62px;border-radius:50%;border:5px solid #fff;background:#FFC93C;box-shadow:0 5px 0 rgba(90,53,80,.25);display:grid;place-items:center;padding:11px;flex:none}
.rb18 svg{width:100%;height:100%}
.rb18:active{transform:scale(.92)}
.rb18.play{position:absolute;z-index:4;width:92px;height:92px;padding:18px;background:#2DBE60;box-shadow:0 6px 0 #1E9448;animation:yay6 1.6s infinite}
.rb18.redo{background:#8E6BD8}
.rb18[hidden]{display:none}

/* trays of big picture items */
.tray18{display:grid;gap:10px;align-content:center;background:rgba(255,255,255,.88);border:4px solid #fff;border-radius:26px;padding:10px;box-shadow:0 6px 0 rgba(90,53,80,.14)}
.tray18.cols2{grid-template-columns:repeat(2,calc((var(--H,100dvh) - 140px) / 3))}
.it18{aspect-ratio:1;border-radius:20px;background:#FFF8EC;box-shadow:inset 0 -4px 0 rgba(90,53,80,.08);display:grid;place-items:center;cursor:grab;transition:transform .15s,opacity .25s}
.it18 svg{width:86%;height:86%}
.it18.lifted{opacity:.3;transform:scale(.9)}
.it18.used{opacity:.25;filter:grayscale(1);pointer-events:none}
.board18{display:grid;place-items:center;min-width:0}
.board18 svg{width:100%;height:100%;max-height:calc(var(--H,100dvh) - 90px);overflow:visible}

/* Medine Pazarı: whole shelf visible */
.pz6 .ddTray{display:grid !important;grid-template-columns:1fr 1fr !important;grid-auto-rows:calc((var(--H,100dvh) - 96px) / var(--rows,4)) !important;align-content:center !important;overflow:hidden !important;gap:6px !important}
.pz6 .ddTray .titem{grid-column:auto !important;height:100% !important;width:auto !important;aspect-ratio:1;justify-self:center}

/* Hurma */
.crowns18{position:absolute;z-index:1;left:0;right:0;top:0;width:100%;height:34%;pointer-events:none}
.hurma18 .date18{position:absolute;z-index:2;width:70px;height:96px;margin-left:-35px;border:0;background:none;padding:0;touch-action:none}
.hurma18 .date18 svg{width:100%;height:100%;filter:drop-shadow(0 3px 2px rgba(0,0,0,.18))}
.hurma18 .date18.gold svg{filter:drop-shadow(0 0 10px #FFE27A)}
.bsk18{position:absolute;z-index:2;left:50%;bottom:calc(8px + env(safe-area-inset-bottom,0px));width:min(34vw,240px);transform:translateX(-50%)}
.bsk18.big{width:min(30vw,260px)}
.bsk18 svg{width:100%;overflow:visible}
.hud18{position:absolute;z-index:3;bottom:calc(14px + env(safe-area-inset-bottom,0px))}
.hud18.l{left:calc(16px + env(safe-area-inset-left,0px))}.hud18.r{right:calc(16px + env(safe-area-inset-right,0px))}
.hud18 span{display:flex;align-items:center;gap:6px;background:#fff;border-radius:999px;padding:6px 16px 6px 8px;font:800 1.3rem Fredoka,sans-serif;color:#3B2A5C;box-shadow:0 4px 0 rgba(90,53,80,.16)}
.hud18 svg{width:34px;height:34px}
.slots18{position:absolute;z-index:3;top:calc(20px + env(safe-area-inset-top,0px));left:var(--topL,80px);right:var(--topR,300px);display:flex;justify-content:center;gap:6px}
.slots18 i{width:38px;height:38px;border-radius:12px;border:3px dashed #E2C98E;background:rgba(255,255,255,.85);display:grid;place-items:center}
.slots18 i.on{border:3px solid #2DBE60;background:#D8FBE2}
.slots18 i svg{width:80%;height:80%}
.deed18{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:rgba(43,35,64,.25)}
.deed18 .dcard{position:relative;width:min(44vh,260px);aspect-ratio:1;background:#fff;border:6px solid #fff;border-radius:40px;box-shadow:0 0 0 6px #FFC93C,0 10px 0 rgba(90,53,80,.2);padding:14px;animation:pop6 .5s cubic-bezier(.3,1.5,.6,1)}
.deed18 .dcard > svg{width:100%;height:100%}
.deed18 .dhearts{position:absolute;right:-18px;top:-18px;width:70px;height:70px;animation:bob6 1.6s ease-in-out infinite}

/* Mescid */
.site18{width:100%;height:100%;overflow:visible}
.site18 .ring{animation:pulse6 1.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pulse6{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.35);opacity:.2}}
.site18 .hot{cursor:pointer}

/* Tef */
.bar18{position:absolute;z-index:3;top:calc(28px + env(safe-area-inset-top,0px));left:var(--topL,80px);right:var(--topR,300px);height:14px;border-radius:999px;background:rgba(255,255,255,.85);border:3px solid #fff;overflow:hidden;box-shadow:0 2px 0 rgba(90,53,80,.15)}
.bar18 i{display:block;height:100%;width:0;background:#FFC93C;transition:width .3s}
.tef18{width:min(56vh,330px);aspect-ratio:1;border:0;border-radius:50%;background:radial-gradient(circle,#FFF6DD 0,#FFE9B0 70%);box-shadow:0 8px 0 rgba(90,53,80,.2);padding:4%;transition:box-shadow .15s}
.tef18 svg{width:100%;height:100%}
.tef18.lit{box-shadow:0 0 0 10px #FFC93C,0 0 50px 16px #FFE27A,0 8px 0 rgba(90,53,80,.2)}
.kid18{height:min(52vh,240px);aspect-ratio:1;align-self:flex-end}
.kid18 svg{width:100%;height:100%}
.stars18{position:absolute;z-index:4;top:6%;display:flex;gap:6px}
.stars18 i{width:44px;height:44px;opacity:.25}.stars18 i.on{opacity:1;animation:pop6 .5s both}
.stars18 svg{width:100%;height:100%}

/* İyilik ağacı */
.treebox{position:relative;min-width:0;background:rgba(255,255,255,.6);border:4px solid #fff;border-radius:28px;overflow:hidden;box-shadow:0 6px 0 rgba(90,53,80,.12)}
.treebox > svg{width:100%;height:100%}
.tcount{position:absolute;left:10px;bottom:10px;display:flex;gap:8px}
.tcount span{display:flex;align-items:center;gap:4px;background:#fff;border-radius:999px;padding:4px 12px 4px 4px;font:800 1.1rem Fredoka,sans-serif;color:#3B2A5C;box-shadow:0 3px 0 rgba(90,53,80,.14)}
.tcount svg{width:30px;height:30px}
.treebox .rb18.shop{position:absolute;right:10px;bottom:10px;width:54px;height:54px;background:#8E6BD8}
.deeds18{display:grid;grid-template-columns:repeat(2,calc((var(--H,100dvh) - 120px) / 4));gap:8px;align-content:center}
.deeds18 button{aspect-ratio:1;border:4px solid #fff;border-radius:20px;background:#fff;box-shadow:0 5px 0 rgba(90,53,80,.16);padding:4px}
.deeds18 button svg{width:100%;height:100%}
.deeds18 button:active{transform:scale(.92)}

/* Album */
.count18 span{display:flex;align-items:center;gap:6px;background:#fff;border-radius:999px;padding:4px 14px 4px 6px;font:800 1.1rem Fredoka,sans-serif;color:#3B2A5C;box-shadow:0 3px 0 rgba(90,53,80,.14)}
.count18 svg{width:26px;height:26px}
.agrid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:10px;width:min(100% - 150px,calc((var(--H,100dvh) - 110px) / 3 * var(--cols)))}
.aslot{aspect-ratio:1;border-radius:22px;background:rgba(255,255,255,.7);border:3px dashed #D9CBEF;display:grid;place-items:center}
.aslot .disc{width:84%;height:84%;opacity:.18;filter:grayscale(1)}
.aslot.got{background:#fff;border:4px solid #FFC93C;box-shadow:0 4px 0 rgba(90,53,80,.14)}
.aslot.got .disc{opacity:1;filter:none}
.aslot svg{width:100%;height:100%}
.album18 .nav{position:absolute;top:50%;transform:translateY(-50%);background:#8E6BD8}
.album18 .nav.l{left:0}.album18 .nav.r{right:0}
.pdots{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:6px}
.pdots i{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.8)}.pdots i.on{background:#8E6BD8}

/* level chooser (top centre) */
.lv18{position:absolute;z-index:3;top:calc(14px + env(safe-area-inset-top,0px));left:var(--topL,80px);right:var(--topR,300px);display:flex;justify-content:center;gap:8px}
.lv18 button{width:52px;height:46px;border-radius:16px;border:4px solid #fff;background:#B49BFF;padding:6px;box-shadow:0 4px 0 rgba(90,53,80,.2)}
.lv18 button.on{background:#2DBE60}
.lv18 button svg{width:100%;height:100%}
.lv18.in{position:static;flex-wrap:wrap}

/* Memo */
.cards18{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:10px;width:min(100%,calc((var(--H,100dvh) - 100px) / 2 * .8 * var(--cols)))}
.card18{aspect-ratio:.8;border:0;background:none;padding:0;perspective:600px}
.card18 .in{position:relative;width:100%;height:100%;transition:transform .45s;transform-style:preserve-3d}
.card18.open .in,.card18.got .in{transform:rotateY(180deg)}
.card18 .f,.card18 .b{position:absolute;inset:0;border-radius:18px;border:4px solid #fff;display:grid;place-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 5px 0 rgba(90,53,80,.2)}
.card18 .f{background:linear-gradient(160deg,#8E6BD8,#6A4CB0)}
.card18 .f svg{width:60%;height:60%}
.card18 .b{background:#fff;transform:rotateY(180deg)}
.card18 .b svg{width:88%;height:88%}
.card18.got .b{box-shadow:0 0 0 4px #2DBE60,0 5px 0 rgba(90,53,80,.2)}

/* Fark */
.pics18{display:flex;gap:12px;width:100%;justify-content:center;align-items:center;height:calc(100% - 70px)}
.pic18{flex:1;max-width:calc((var(--H,100dvh) - 150px) * 1.6);border:5px solid #fff;border-radius:22px;overflow:hidden;box-shadow:0 6px 0 rgba(90,53,80,.18);background:#fff}
.pic18 svg{display:block;width:100%;height:auto}
.fark18 .rb18.redo{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:54px;height:54px}

/* Yapboz */
.side18{display:flex;flex-direction:column;gap:10px;justify-content:center;width:min(26vw,190px)}
.hint18{border:4px solid #fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 0 rgba(90,53,80,.16)}
.hint18 svg{display:block;width:100%;height:auto}
.lv18.in .redo{width:52px;height:46px;border-radius:16px;border:4px solid #fff;background:#8E6BD8;padding:6px;box-shadow:0 4px 0 rgba(90,53,80,.2)}
.pz18{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:4px;aspect-ratio:1.6;height:100%;max-width:100%;margin:auto;background:#fff;border:5px solid #fff;border-radius:18px;box-shadow:0 6px 0 rgba(90,53,80,.18)}
.pz18 button{border:0;padding:0;border-radius:8px;overflow:hidden;background:#fff}
.pz18 button svg{display:block;width:100%;height:100%}
.pz18 button.sel{outline:5px solid #FFC93C;outline-offset:-5px;transform:scale(.96)}
.pz18.done{gap:0;box-shadow:0 0 0 6px #2DBE60,0 6px 0 rgba(90,53,80,.18)}

/* Sıra */
.seq18{display:flex;gap:14px;width:100%;justify-content:center;margin-bottom:56px}
.seq18 button{position:relative;flex:1;max-width:calc((var(--H,100dvh) - 150px) * 1.6);border:5px solid #fff;border-radius:22px;overflow:hidden;padding:0;background:#fff;box-shadow:0 6px 0 rgba(90,53,80,.18)}
.seq18 button svg{display:block;width:100%;height:auto}
.seq18 button.got{box-shadow:0 0 0 5px #2DBE60,0 6px 0 rgba(90,53,80,.18)}
.seq18 button b{position:absolute;left:8px;top:8px;width:44px;height:44px;border-radius:50%;background:#2DBE60;border:4px solid #fff;color:#fff;font:900 1.4rem/36px Fredoka,sans-serif;animation:pop6 .4s both}
.slots3{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:12px}
.slots3 i{width:44px;height:44px;border-radius:50%;border:3px dashed #fff;background:rgba(255,255,255,.4);color:#fff;font:900 1.3rem/38px Fredoka,sans-serif;text-align:center;font-style:normal}
.slots3 i.on{background:#2DBE60;border-style:solid}

/* Simon */
.camels18{display:flex;gap:2vw;align-items:flex-end;justify-content:center;width:100%}
.camels18 button{width:min(20vw,calc(var(--H,100dvh) - 120px));aspect-ratio:1;border:0;border-radius:30px;background:rgba(255,255,255,.55);padding:6px;transition:transform .15s,box-shadow .15s}
.camels18 button svg{width:100%;height:100%}
.camels18 button.lit{background:#fff;box-shadow:0 0 0 6px #FFC93C,0 0 40px 10px #FFE27A;transform:translateY(-10px) scale(1.06)}

/* Kervan runner fills the screen */
.screen:has(.run){padding:0 !important;overflow:hidden}
.screen:has(.run) > .wrap{max-width:none !important;height:var(--H,100dvh);padding:0 !important;margin:0 !important}
.run{height:100% !important;border-radius:0 !important;border:0 !important}
.run .route{top:calc(18px + env(safe-area-inset-top,0px)) !important;left:var(--topL,80px) !important;right:var(--topR,300px) !important;width:auto !important}

/* Tâif bağı */
.vrow18{position:absolute;z-index:1;left:3%;right:3%;height:52px;background:
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 52'><path d='M0 18 H120' stroke='%238B5A2B' stroke-width='2.4'/><g fill='%2357A845'><ellipse cx='14' cy='16' rx='16' ry='11'/><ellipse cx='42' cy='12' rx='15' ry='10'/><ellipse cx='72' cy='17' rx='17' ry='11'/><ellipse cx='102' cy='12' rx='15' ry='10'/></g><g fill='%236DC25A'><ellipse cx='26' cy='9' rx='9' ry='6'/><ellipse cx='58' cy='8' rx='8' ry='5'/><ellipse cx='88' cy='9' rx='9' ry='6'/></g><path d='M8 26 q6 6 0 12 M64 28 q-6 6 0 12' stroke='%235B8C2A' stroke-width='2' fill='none'/></svg>") repeat-x 0 0/120px 52px}
.vrow18::before,.vrow18::after{content:"";position:absolute;top:10px;width:9px;height:calc(100% + 120px);background:#8B5A2B;border-radius:4px}
.vrow18::before{left:-4px}.vrow18::after{right:-4px}
.bunch{position:absolute;z-index:2;width:min(13vh,76px);aspect-ratio:1;margin-left:calc(min(13vh,76px) / -2);border:0;background:none;padding:0;transform-origin:50% 0;animation:sway18 3s ease-in-out infinite}
.bunch:nth-child(2n){animation-delay:-1.2s}
.bunch svg{width:100%;height:100%;filter:drop-shadow(0 3px 2px rgba(0,0,0,.15))}
.bunch.ripe svg{filter:drop-shadow(0 0 8px #E9C8FF)}
.bunch.gone{opacity:0;pointer-events:none;transition:opacity .3s}
.bunch.lifted{opacity:.3}
@keyframes sway18{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}

/* Tıraş */
.bust18{position:relative;min-width:0;display:grid;place-items:end center;touch-action:none}
.bust18 > svg{height:100%;max-width:100%;overflow:visible}
.tool18{position:absolute;z-index:4;width:80px;height:80px;margin:-118px 0 0 -40px;pointer-events:none;filter:drop-shadow(0 4px 4px rgba(0,0,0,.25))}
.tool18 svg{width:100%;height:100%}
.tools18{display:flex;flex-direction:column;gap:10px;justify-content:center}
.tools18 button{width:calc((var(--H,100dvh) - 130px) / 3);aspect-ratio:1;border:5px solid #fff;border-radius:24px;background:#fff;box-shadow:0 5px 0 rgba(90,53,80,.18);padding:8px}
.tools18 button.on{box-shadow:0 0 0 5px #FFC93C,0 5px 0 rgba(90,53,80,.18);transform:scale(1.05)}
.tools18 button svg{width:100%;height:100%}

/* Zemzem */
.foun18{position:relative;min-width:0;display:grid;place-items:center;touch-action:none}
.foun18 > svg{height:100%;max-width:100%}
.cup18{position:absolute;left:50%;top:58%;width:min(14vh,80px);aspect-ratio:.85;margin-left:calc(min(14vh,80px) / -2);transition:filter .2s}
.cup18 svg{width:100%;height:100%;overflow:visible}
.cup18.full{filter:drop-shadow(0 0 10px #8FD3FF);animation:bob6 1.6s ease-in-out infinite}
.rb18.hold{position:absolute;left:50%;top:6%;transform:translateX(-50%);background:#4DB3FF;width:70px;height:70px}
.rb18.hold.on{background:#2DBE60;transform:translateX(-50%) scale(.92)}
.pil18{display:flex;align-items:flex-end;gap:2vw;padding-bottom:4px}
.pp18{position:relative;height:min(64vh,280px);aspect-ratio:.6;display:grid;place-items:end center}
.pp18 > svg{width:100%;height:100%}
.pp18 .bub{position:absolute;top:-6px;right:-14px;width:52px;height:52px;background:#fff;border-radius:50%;padding:7px;box-shadow:0 3px 0 rgba(90,53,80,.15);animation:bob6 2.2s ease-in-out infinite}
.pp18 .bub svg{width:100%;height:100%}
.pp18.done .bub{display:none}

/* Güvercinler */
.field18{position:absolute;z-index:1;left:0;right:0;bottom:0;top:62%;top:max(52%,calc(64px + env(safe-area-inset-top,0px)))}
.guv18 .field18{top:58%}
.bird18{position:absolute;left:0;top:0;width:72px;height:72px;transition:none}
.bird18 svg{width:100%;height:100%;filter:drop-shadow(0 3px 2px rgba(0,0,0,.15))}
.bird18.walk svg{animation:hop18 .3s ease-in-out infinite}
.bird18.peck svg{animation:peck18 .45s ease-in-out}
.bird18.fly svg{animation:hop18 .15s ease-in-out infinite}
@keyframes hop18{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes peck18{0%,100%{transform:rotate(0)}50%{transform:rotate(-24deg) translateY(6px)}}
.grain18{position:absolute;width:9px;height:6px;margin:-3px 0 0 -4px;border-radius:50%;background:#C98F45;box-shadow:0 1px 0 #8B5A2B}

/* v18 fixes */
.pz18{grid-template-rows:repeat(var(--n),minmax(0,1fr));height:auto;max-height:100%;width:min(100%,calc((var(--H,100dvh) - 90px) * 1.6));align-self:center}
.pz18 button{min-height:0}
.bust18 > svg{position:absolute;inset:0;width:100%;height:100%}
.foun18{aspect-ratio:.7;height:100%;justify-self:center}
.foun18 > svg{position:absolute;inset:0;width:100%;height:100%}
.cup18{top:auto;bottom:7%}
.zem18 .area.two{grid-template-columns:auto 1fr}
.pil18{justify-content:space-evenly;align-items:flex-end}
.pp18{height:auto;width:min(19vw,52vh);aspect-ratio:1}
.pp18 .bub{top:0;right:6%}
.tiras18 .area.two{grid-template-columns:1fr auto}
.bunch{width:min(20vh,104px);margin-left:calc(min(20vh,104px) / -2)}
.foun18{width:calc((var(--H,100dvh) - 74px) * .7);height:calc(var(--H,100dvh) - 74px);align-self:center}
.zem18 .area.two{grid-template-columns:auto minmax(0,1fr) !important}
.pil18{min-width:0}
.pp18{width:min(15vw,46vh)}
.g18 .area.two{grid-template-columns:minmax(0,1fr) auto}
.g18 .area.two.l{grid-template-columns:auto minmax(0,1fr)}
/* Tıraş: tools always fully visible */
.tiras18 .area.two{grid-template-columns:minmax(0,1fr) auto !important}
.tools18{gap:8px;justify-content:center;height:100%}
.tools18 button{flex:none;width:calc((var(--H,100dvh) - 74px - 16px) / 3 - 6px);height:calc((var(--H,100dvh) - 74px - 16px) / 3 - 6px);aspect-ratio:auto;max-width:120px;max-height:120px;padding:10%;border-width:4px}
.tools18 button.on{transform:none;box-shadow:0 0 0 4px #FFC93C,0 4px 0 rgba(90,53,80,.18)}
.tool18{margin:-44px 0 0 -40px}
/* ===== v19: memory games for little ones ===== */
.cap19{position:absolute;left:0;right:0;bottom:6%;font:700 clamp(.6rem,1.6vh,.85rem)/1.1 Fredoka,sans-serif;font-style:normal;color:#6E4C62;text-align:center;pointer-events:none}
.card18 .b{position:absolute}
.big19 .card18 .b svg{width:80%;height:80%;margin-top:-10%}
.big19{width:min(100%,calc((var(--H,100dvh) - 120px) / 2 * .8 * var(--cols)))}
.mes19 .cards18[style*="--cols:2"]{grid-template-columns:repeat(4,1fr);width:min(100%,calc((var(--H,100dvh) - 110px) * .8 * 4))}
.mes19 .cards18[style*="--cols:2"] .card18{aspect-ratio:.8}
.mes19 .cards18[style*="--cols:2"]{grid-template-rows:1fr}
.g18 .area.col{flex-direction:column;justify-content:space-evenly}

/* Yolu Hatırla */
.road19{position:relative;width:100%;display:grid;grid-template-columns:repeat(var(--n),1fr);justify-items:center;align-items:center;padding-top:calc((var(--H,100dvh) - 74px) * .16)}
.line19{position:absolute;left:8%;right:8%;bottom:calc((var(--H,100dvh) - 74px) * .19);height:10px;border-radius:6px;background:repeating-linear-gradient(90deg,#C98F45 0 18px,transparent 18px 30px)}
.slot19{position:relative;width:calc((var(--H,100dvh) - 74px) * .36);aspect-ratio:1;border-radius:24px;border:4px dashed rgba(255,255,255,.95);background:rgba(255,255,255,.35);display:grid;place-items:center;z-index:1}
.slot19 svg{width:86%;height:86%;margin-top:-8%}
.slot19.show{border:4px solid #fff;background:#fff;box-shadow:0 5px 0 rgba(90,53,80,.16);animation:pop6 .45s cubic-bezier(.3,1.5,.6,1)}
.slot19.want{border-color:#FFC93C;box-shadow:0 0 0 6px rgba(255,201,60,.35);animation:bob6 1.4s ease-in-out infinite}
.kas19{position:absolute;z-index:2;top:0;width:calc((var(--H,100dvh) - 74px) * .2);aspect-ratio:1;margin-left:calc((var(--H,100dvh) - 74px) * -.1);transition:left .9s ease-in-out;left:0}
.kas19 svg{width:100%;height:100%}
.tray19{display:flex;gap:12px;justify-content:center;min-height:calc((var(--H,100dvh) - 74px) * .3)}
.pc19{position:relative;width:calc((var(--H,100dvh) - 74px) * .3);aspect-ratio:1;border:4px solid #fff;border-radius:22px;background:#fff;box-shadow:0 5px 0 rgba(90,53,80,.18);padding:0;animation:pop6 .45s cubic-bezier(.3,1.5,.6,1) both}
.pc19 svg{width:84%;height:84%;margin-top:-6%}
.pc19.used{visibility:hidden}

/* Ne Kayboldu? */
.rug19{position:relative;width:min(100%,780px);height:calc((var(--H,100dvh) - 74px) * .6);border-radius:30px;background:#C8453A;border:6px solid #FFC63A;box-shadow:inset 0 0 0 8px #D9574B,0 8px 0 rgba(90,53,80,.18);overflow:hidden;display:grid;place-items:center}
.its19{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:10px;width:94%;height:84%}
.it19{position:relative;background:#FFF8EC;border-radius:20px;display:grid;place-items:center;box-shadow:0 4px 0 rgba(0,0,0,.12);transition:opacity .2s}
.it19 svg{width:86%;height:86%;margin-top:-10%}
.it19.gone > *{opacity:0}
.it19.gone{background:rgba(255,248,236,.4);border:3px dashed #FFE6A8}
.cur19{position:absolute;inset:0;background:repeating-linear-gradient(90deg,#8E6BD8 0 28px,#7A5AC4 28px 56px);transform:translateY(-102%);transition:transform .6s cubic-bezier(.5,0,.3,1);border-bottom:8px solid #FFC63A}
.cur19.on{transform:none}
.opts19{display:flex;gap:16px;justify-content:center}
.op19{width:calc((var(--H,100dvh) - 74px) * .28);aspect-ratio:1;border:4px solid #fff;border-radius:22px;background:#fff;box-shadow:0 5px 0 rgba(90,53,80,.18);padding:4px;animation:pop6 .45s both}
.op19 svg{width:100%;height:100%}
.op19.ok{box-shadow:0 0 0 5px #2DBE60,0 5px 0 rgba(90,53,80,.18)}
#updWall .uver{font-style:normal;font:700 .9rem Fredoka,sans-serif;color:#8E6BD8}
.pop-in.new20{display:flex !important;flex-direction:column;align-items:center;gap:10px;text-align:center;max-width:min(92vw,620px)}
.pop-in.new20 > *{grid-column:auto !important}
.ng20{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;width:100%}
.ng20 span{aspect-ratio:1;background:#FFF6E3;border-radius:16px;padding:4px}
.ng20 svg{width:100%;height:100%}

/* ===== v20 mini games ===== */
.its20{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-content:center;flex:1;width:100%}
.it20{width:calc((var(--H,100dvh) - 74px) * .26);aspect-ratio:1;border-radius:24px;background:rgba(255,255,255,.9);border:4px solid #fff;box-shadow:0 5px 0 rgba(90,53,80,.16);display:grid;place-items:center;padding:6px;cursor:grab;animation:pop6 .4s var(--d,0s) cubic-bezier(.3,1.5,.6,1) both;transition:opacity .25s}
.it20 svg{width:100%;height:100%}
.it20.gone{opacity:0;pointer-events:none}
.it20.lifted{opacity:.3}
.bins20{display:flex;gap:4vw;justify-content:center;width:100%}
.bin20{position:relative;width:calc((var(--H,100dvh) - 74px) * .36);aspect-ratio:1.2;display:grid;place-items:end center}
.bin20 > svg{width:100%;height:100%}
.in20{position:absolute;left:10%;right:10%;bottom:30%;display:flex;flex-wrap:wrap;justify-content:center;gap:2px;pointer-events:none}
.in20 span{width:28%;aspect-ratio:1}
.in20 svg{width:100%;height:100%}
.size20 .bin20{place-items:end center}
.size20 .bin20 > svg{height:auto}
.board20{min-width:0;display:grid;place-items:center;background:rgba(255,255,255,.55);border:4px solid #fff;border-radius:26px;overflow:hidden;box-shadow:0 6px 0 rgba(90,53,80,.12)}
.board20 svg{width:100%;height:100%;max-height:calc(var(--H,100dvh) - 82px)}
.tray20{display:grid;grid-template-columns:repeat(2,calc((var(--H,100dvh) - 110px) / 3.2));gap:8px;align-content:center}
.pc20{aspect-ratio:1;background:#fff;border:4px solid #fff;border-radius:20px;box-shadow:0 5px 0 rgba(90,53,80,.16);display:grid;place-items:center;padding:4px;cursor:grab;transition:opacity .25s}
.pc20 svg{width:100%;height:100%}
.pc20.gone{opacity:0;pointer-events:none}
.pc20.lifted{opacity:.3}
.src20{width:calc((var(--H,100dvh) - 74px) * .55);aspect-ratio:1;border:5px solid #fff;border-radius:30px;background:rgba(255,255,255,.85);box-shadow:0 6px 0 rgba(90,53,80,.18);padding:10px;position:relative;align-self:center;animation:bob6 2.4s ease-in-out infinite}
.src20 > svg{width:100%;height:100%}
.pile20{position:absolute;left:30%;top:18%;width:40%;aspect-ratio:1}
.pile20 svg{width:100%;height:100%}
.tgt20{position:relative;min-width:0;display:grid;place-items:center;align-self:stretch}
.tg20{width:96%;height:auto;max-height:80%}
.put20{position:absolute;left:16%;right:16%;top:22%;bottom:18%;pointer-events:none}
.p20{position:absolute;width:min(14vh,70px);aspect-ratio:1;margin:calc(min(14vh,70px) / -2) 0 0 calc(min(14vh,70px) / -2)}
.p20 svg{width:100%;height:100%}
.need20{position:absolute;top:0;left:0;right:0;display:flex;justify-content:center;gap:10px;z-index:2}
.need20 i{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.8);border:4px solid #fff;box-shadow:0 3px 0 rgba(90,53,80,.15)}
.need20 i.on{background:#FFC93C}
.sky20 .need20 i{background:rgba(255,255,255,.25)}.sky20 .need20 i.on{background:#FFE27A}
.scb20{position:relative;height:100%;aspect-ratio:1.7;max-width:100%;touch-action:none}
.scb20 > svg{width:100%;height:100%}
.tool20{position:absolute;width:90px;height:90px;margin:-45px 0 0 -10px;pointer-events:none;filter:drop-shadow(0 4px 4px rgba(0,0,0,.25))}
.tool20 svg{width:100%;height:100%}
.cave20{width:100%;height:100%;max-height:calc(var(--H,100dvh) - 80px)}
.wp20{cursor:pointer}.wp20.next circle:first-child{opacity:.7;animation:pulse6 1s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.draw20{stroke-dasharray:200;stroke-dashoffset:200;animation:draw20 .5s forwards}
@keyframes draw20{to{stroke-dashoffset:0}}
.it20{width:calc((var(--H,100dvh) - 74px) * .34)}
.its20{gap:14px}
.bin20{width:calc((var(--H,100dvh) - 74px) * .5)}
.size20 .bin20 > svg{width:100% !important}
.size20 .bin20[data-k="o"] > svg{transform:scale(.8);transform-origin:50% 100%}
.size20 .bin20[data-k="k"] > svg{transform:scale(.6);transform-origin:50% 100%}
/* ===== v21 ===== */
.sort20 .it20{width:var(--sz,120px) !important}
.sort20 .bin20{width:var(--bw,160px) !important;flex:none}
.sort20 .its20{flex:1 1 auto;min-height:0}
.sort20 .bins20{flex:none}
.sort20 .area.col{justify-content:space-between;gap:8px}
/* Kasvâ need bubble on the map: smaller, above the head, not over the signposts */
.wcam .need{width:48px;height:44px;left:70%;top:-30%}
.stamp21{position:fixed;left:50%;top:42%;width:min(18vh,110px);height:min(18vh,110px);z-index:9997;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(224,158,0,.45))}
.stamp21 svg{width:100%;height:100%}
.runner21{position:fixed;left:0;bottom:calc(4px + env(safe-area-inset-bottom,0px));width:min(22vh,120px);height:min(22vh,120px);z-index:9996;pointer-events:none}
.runner21 svg{width:100%;height:100%;animation:hop18 .25s ease-in-out infinite}
/* abdest */
.cap21{position:absolute;z-index:3;top:calc(48px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:5px 14px 5px 6px;box-shadow:0 4px 0 rgba(90,53,80,.15);font:700 clamp(.75rem,2.1vh,1rem) Fredoka,sans-serif;color:#3B2A5C;white-space:nowrap;max-width:calc(100% - 24px)}
.cap21 span{overflow:hidden;text-overflow:ellipsis}
.farz21,.sun21{font:800 .75rem Fredoka,sans-serif;color:#fff;border-radius:999px;padding:3px 10px}
.farz21{background:#E0503A}.sun21{background:#36A469}
.abd21 .area{top:calc(96px + env(safe-area-inset-top,0px))}
.scene21{position:relative;flex:1;min-height:0;width:100%;display:grid;place-items:center}
.scene21 > svg{height:100%;max-width:100%;overflow:visible;touch-action:none}
.glow21{stroke:#FFC93C;stroke-width:5;animation:glow21 1.1s ease-in-out infinite;cursor:pointer}
@keyframes glow21{0%,100%{stroke-opacity:1}50%{stroke-opacity:.25}}
.wet21{fill:#7CCBFF;stroke:none}
.drops21{display:flex;gap:10px;justify-content:center;flex:none}
.drops21 i{width:40px;height:40px;border-radius:50%;background:#fff;border:3px solid #fff;box-shadow:0 3px 0 rgba(90,53,80,.15);padding:5px;opacity:.35}
.drops21 i.on{opacity:1;background:#DFF3FF}
.drops21 svg{width:100%;height:100%}
.bism21{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:5px solid #fff;border-radius:28px;background:#2DBE60;box-shadow:0 6px 0 #1E9448;padding:14px 26px;animation:yay6 1.6s infinite;max-width:92%}
.bism21.on{background:#FFC93C;box-shadow:0 6px 0 #D99A00}
.ar21{font:700 clamp(1.3rem,5vh,2.4rem)/1.6 Amiri,serif;color:#fff;direction:rtl;display:block}
.scene21{display:block}
.scene21 > svg{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.abd21 .area.col{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:6px}
g.glow21 > g > path,g.glow21 > path{stroke:#FFC93C !important;stroke-width:5 !important;animation:glow21 1.1s ease-in-out infinite}
g.glow21 > g > path,g.glow21 > path{stroke:#FFC93C !important;stroke-width:5 !important;animation:glow21 1.1s ease-in-out infinite}
/* Kasvâ's thought bubble: smaller, a bit higher above her head, tappable */
.wcam .need{width:42px !important;height:38px !important;left:64% !important;top:-46% !important;pointer-events:auto !important;z-index:6}
.wcam .need span{border-width:3px}
.wcam .need::before{width:10px;height:10px;left:4px;bottom:0}
.wcam .need::after{width:6px;height:6px;left:-3px;bottom:-8px}
.wcam{pointer-events:auto}
/* ===== v22: Kudüs ===== */
.full22{position:absolute;z-index:1;left:0;right:0;top:calc(56px + env(safe-area-inset-top,0px));bottom:calc(44px + env(safe-area-inset-bottom,0px));width:100%;height:calc(100% - 100px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));touch-action:none}
.isra22 .full22{top:0;bottom:0;height:100%}
.cap22{position:absolute;z-index:3;left:50%;transform:translateX(-50%);bottom:calc(8px + env(safe-area-inset-bottom,0px));max-width:min(86%,680px);padding:6px 16px;border-radius:18px;background:rgba(255,255,255,.93);border:3px solid #fff;box-shadow:0 4px 0 rgba(90,53,80,.15);font:700 clamp(13px,2.1vh + 4px,19px)/1.2 Fredoka,sans-serif;color:#5A3550;text-align:center;pointer-events:none}
.isra22 .cap22{background:rgba(30,26,70,.82);border-color:rgba(255,255,255,.35);color:#FFF3C8}
/* İsrâ stars */
.st22{cursor:pointer}
.st22 .s{fill:#B9B4D8;stroke:#fff;stroke-width:1.4;transition:fill .3s}
.st22.next .s{fill:#FFF3B0;animation:tw22 1s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.st22.next .h{animation:hl22 1s ease-in-out infinite}
.st22.on .s{fill:#FFD24A;stroke:#FFF6C8}
.st22.on .h{opacity:.5}
@keyframes tw22{50%{transform:scale(1.35)}}
@keyframes hl22{50%{opacity:.55}}
.draw22{stroke-dasharray:1;stroke-dashoffset:1;animation:dr22 .35s ease-out forwards}
@keyframes dr22{to{stroke-dashoffset:0}}
.dim22{filter:brightness(.42) saturate(.5);transition:filter 1.2s}
.lit22{filter:drop-shadow(0 0 8px #FFE27A) brightness(1.08);transition:filter 1.2s}
#lamps{transition:opacity 1.2s}
.flm22{animation:flm22 .5s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 100%}
@keyframes flm22{to{transform:scale(.85,1.12)}}
/* Kıble */
.kib22 .full22{cursor:grab}
.lbl22{font:700 15px Fredoka,sans-serif;fill:#5A3550}
.tgt22{cursor:pointer;transform-box:fill-box;transform-origin:center}
.tgt22.pulse{animation:tp22 1.2s ease-in-out infinite}
.tgt22.ok circle{fill:#D8F7E2;opacity:1}
@keyframes tp22{50%{transform:scale(1.08)}}
/* Zeytin */
.ol22{cursor:grab}
.ol22.gone{opacity:0;pointer-events:none;transition:opacity .25s}
.ol22.lifted{opacity:.3}
#tree{transform-box:fill-box;transform-origin:50% 100%}
.drop22{animation:dp22 .42s ease-in forwards}
@keyframes dp22{from{transform:translate(0,0)}to{transform:translate(12px,40px);opacity:.2}}
.lamp22{cursor:pointer}
#src{cursor:grab}
/* Nakış */
.nk22{height:100%;max-height:calc(var(--H,100dvh) - 120px);aspect-ratio:1;display:grid;place-items:center;background:#fff;border-radius:20px;border:5px solid #fff;box-shadow:0 6px 0 rgba(90,53,80,.15);padding:8px}
.nk22 svg{width:100%;height:100%;touch-action:none;cursor:pointer}
.nak22 .area{bottom:calc(46px + env(safe-area-inset-bottom,0px))}
/* Güvercin */
.yard22{position:absolute;inset:0;z-index:1;touch-action:none;cursor:pointer}
.seed22{position:absolute;width:6px;height:4px;border-radius:50%;background:#C9955A;margin:-2px 0 0 -3px;pointer-events:none}
.dv22{position:absolute;width:min(16vh,84px);aspect-ratio:1;margin:calc(min(16vh,84px) * -.85) 0 0 calc(min(16vh,84px) / -2);pointer-events:none}
.dv22 svg{width:100%;height:100%;overflow:visible}
.dv22.peck svg{animation:pk22 .9s ease-in-out infinite;transform-origin:30% 80%}
@keyframes pk22{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(-24deg)}80%{transform:rotate(0)}88%{transform:rotate(-20deg)}}
/* sort/count tweaks */
.por22 .tg20{overflow:visible}
.kes22 .card18 .f{background:linear-gradient(160deg,#3F86D6,#1D4A8C)}
/* ===== v22b: narrow (16:9) Android screens ===== */
html,body{margin:0}
.pz6 .ddTray .titem{height:auto !important;width:100% !important;max-width:calc((var(--H,100dvh) - 96px) / var(--rows,4) - 4px) !important;align-self:center}
.wrap:has(> .maze) > .levels .chipbtn{white-space:nowrap;padding:8px 12px !important;font-size:.85rem !important}
.wrap:has(> .maze) > .levels{width:auto !important;min-width:max-content}
.run .route{right:calc(var(--topR,300px) + 16px) !important}
/* ===== v23: Boyama 2.0 ===== */
.bgal23 .area{display:block;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:4px 4px 20px}
.grid23{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(30vw,190px),1fr));gap:12px}
.pg23{position:relative;border:4px solid #fff;border-radius:20px;background:#fff;padding:6px 6px 4px;box-shadow:0 5px 0 rgba(90,53,80,.18);display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer}
.pg23:active{transform:scale(.96)}
.th23{display:block;width:100%;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#F7F3EA}
.th23 svg{width:100%;height:100%;display:block}
.pg23 b{font:700 clamp(12px,1.6vh + 4px,16px) Fredoka,sans-serif;color:#5A3550}
.ok23{position:absolute;top:-8px;right:-8px;width:30px;height:30px;border-radius:50%;background:#2DBE60;border:3px solid #fff;display:grid;place-items:center;padding:5px}
.ok23 svg{width:100%;height:100%}
.pnt23 .area{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center}
.tools23{display:flex;flex-direction:column;gap:8px;justify-content:center}
.tl23{width:min(13vh,64px);aspect-ratio:1;border-radius:18px;border:4px solid #fff;background:#B9B0CC;box-shadow:0 4px 0 rgba(90,53,80,.2);padding:9px;display:grid;place-items:center}
.tl23 svg{width:100%;height:100%}
.tl23.on{background:#8E6BD8;transform:scale(1.06);box-shadow:0 0 0 4px #FFC93C,0 4px 0 rgba(90,53,80,.2)}
.tl23.undo{background:#FF9F43}
.cv23{height:100%;max-height:calc(var(--H,100dvh) - 90px);display:grid;place-items:center;min-width:0}
.cv23 svg{max-width:100%;max-height:100%;width:auto;height:100%;aspect-ratio:4/3;background:#fff;border-radius:18px;border:5px solid #fff;box-shadow:0 6px 0 rgba(90,53,80,.18);touch-action:none;cursor:crosshair}
.pal23{display:grid;grid-template-columns:repeat(2,min(9.5vh,50px));gap:5px;align-content:center;max-height:calc(var(--H,100dvh) - 150px);overflow:hidden;background:rgba(255,255,255,.85);border:4px solid #fff;border-radius:22px;padding:7px}
.pp23{width:100%;aspect-ratio:1;border:0;background:none;padding:0;border-radius:14px;transition:transform .12s}
.pp23 svg{width:100%;height:100%}
.pp23.on{transform:scale(1.14);background:#FFF1C2;box-shadow:0 0 0 3px #FFC93C}
.pp23.st{background:#FFF8EC;padding:4px}
.done23{position:absolute;right:calc(10px + env(safe-area-inset-right,0px));bottom:calc(8px + env(safe-area-inset-bottom,0px));background:#2DBE60;z-index:3;width:56px;height:56px}
.pnt23 .area{padding-right:0}
/* ===== v24 ===== */
.pop-in .again24{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#8E6BD8;color:#fff;margin-bottom:10px;width:100%}
.pop-in .again24 svg{width:24px;height:24px}
.cesme24{position:absolute;left:50%;top:44%;width:min(24vh,140px);transform:translateX(-50%);pointer-events:none;opacity:.95}
.cesme24 svg{width:100%;height:auto}
.dv24 .b24{width:100%;height:100%}
.dv24{pointer-events:auto;cursor:pointer;z-index:2}
.dv24.fly .b24{animation:flap24 .22s ease-in-out infinite alternate}
@keyframes flap24{to{transform:scaleY(.86) translateY(-3px)}}
/* no magnifier / selection loupe / long-press menu when a finger is held on the screen (tavaf, sa'y, painting) */
html,body,body *{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
img,svg{-webkit-user-drag:none;user-drag:none}
input,textarea,[contenteditable]{-webkit-user-select:text;user-select:text}
.tv7,.tvwrap,.g18,.world{touch-action:none}
/* placed pieces leave a pale spot behind (so the child sees what is done), and show up clearly where they went */
.it20.gone,.pc20.gone{opacity:1 !important;pointer-events:none;position:relative;background:rgba(255,255,255,.45) !important}
.it20.gone > *,.pc20.gone > *{opacity:.28;filter:grayscale(1);transition:opacity .3s,filter .3s}
.it20.gone::after,.pc20.gone::after{content:"";position:absolute;right:6%;top:6%;width:30%;aspect-ratio:1;border-radius:50%;background:#2DBE60 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;border:2px solid #fff;opacity:1;filter:none}
.in20{bottom:4% !important;left:0 !important;right:0 !important;gap:0 !important}
.in20 span{width:46% !important;margin:0 -4%;filter:drop-shadow(0 3px 2px rgba(0,0,0,.18))}
.titem.used,.titem.done{opacity:.3 !important;filter:grayscale(1)}
.again24 .ring24{width:30px;height:30px;flex:none}
.lvl24{position:fixed;left:50%;top:46%;z-index:9000;pointer-events:none;background:linear-gradient(160deg,#8E6BD8,#6A4CB0);color:#fff;border:5px solid #fff;border-radius:28px;padding:10px 28px;box-shadow:0 8px 0 rgba(90,53,80,.25);display:flex;flex-direction:column;align-items:center;font-family:Fredoka,sans-serif;line-height:1}
.lvl24 b{font-size:18px;font-weight:700;opacity:.9}
.lvl24 span{font-size:52px;font-weight:700;text-shadow:0 3px 0 rgba(0,0,0,.18)}
.pop-in .next24{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#2DBE60;color:#fff;margin-bottom:10px;width:100%}
.next24 .ni24{width:30px;height:30px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none}
.next24 .ni24 svg{width:100%;height:100%}
.pop-in:has(.again24) .btn.y{background:#E9E4F2;color:#5A3550;box-shadow:0 4px 0 #CFC6DF}
.pop-in:has(.again24){max-height:calc(100dvh - 16px);overflow-y:auto}
.pop-in:has(.again24) .btn{min-height:0;padding:8px 14px;font-size:clamp(14px,2.2vh + 6px,18px);margin-bottom:6px;line-height:1.15}
.pop-in:has(.again24) p{font-size:clamp(12px,1.8vh + 5px,16px);margin-bottom:8px}
.pop-in:has(.again24) h4{margin-bottom:4px}
@media (max-height:460px){.pop-in:has(.again24) .disc{width:min(26vh,120px);height:min(26vh,120px)}}

/* v26: long pages (parents' corner) scroll at full size */
#screen.page26{overflow-y:auto !important;overflow-x:hidden !important;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain}
#screen.page26 > .wrap{transform:none !important;margin-bottom:24px !important;width:min(680px,94%) !important;max-width:none !important;margin-left:auto !important;margin-right:auto !important}
#screen.page26 .pcard{user-select:text;-webkit-user-select:text}
#screen.page26 .vrow{position:static}
body.page26b .bar{background:rgba(255,244,220,.94) !important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 2px 10px rgba(43,35,64,.12)}

/* v26: while the scripts load, show only a calm sky-and-sand backdrop (never an old screen) */
body:not(.booted26) .app,body:not(.booted26) #popRoot{visibility:hidden}
html:has(body:not(.booted26)),body:not(.booted26){background:linear-gradient(180deg,#8FD3F4 0%,#CDEBF5 55%,#F6DDA8 100%) !important}
.cap21 .edep21{background:#7A5FC8 !important}
/* ================= v27: Vaha ================= */
.vaha27{position:relative;overflow:hidden;background:#C9A274;touch-action:none;user-select:none;-webkit-user-select:none}
.vaha27 canvas{position:absolute;inset:0;display:block;touch-action:none}
.vtask27{position:absolute;left:max(10px,env(safe-area-inset-left,0px));top:calc(var(--topH,64px) + 6px);z-index:5;display:flex;align-items:center;gap:8px;max-width:min(56vw,460px);
  background:rgba(255,255,255,.94);border-radius:18px;padding:7px 12px 7px 7px;box-shadow:0 4px 0 rgba(90,53,80,.15);font-weight:800;font-size:.86rem;line-height:1.2;text-align:left;color:var(--ink)}
.vtask27 em{font-style:normal;color:var(--leaf);margin-left:4px}
.vt27ic{flex:none;width:30px;height:30px;border-radius:50%;background:var(--sun);display:grid;place-items:center;font-family:var(--f-d)}
.vt27ic svg{width:22px;height:22px}
.vbag27{position:absolute;left:50%;transform:translateX(-50%);bottom:max(8px,env(safe-area-inset-bottom,0px));z-index:5;display:flex;gap:5px;background:rgba(255,255,255,.9);border-radius:20px;padding:5px 7px;box-shadow:0 4px 0 rgba(90,53,80,.15);max-width:calc(100% - 150px)}
.vchip27{position:relative;width:42px;height:42px;border-radius:12px;background:#FFF4DC;display:grid;place-items:center}
.vchip27 svg{width:32px;height:32px}
.vchip27 b{position:absolute;right:-3px;bottom:-4px;min-width:19px;height:19px;padding:0 4px;border-radius:10px;background:var(--leaf);color:#fff;font-size:.72rem;display:grid;place-items:center;font-family:var(--f-d)}
.vchip27.zero{opacity:.38}.vchip27.zero b{background:#B9AFC7}
.vbuild27{position:absolute;right:max(10px,env(safe-area-inset-right,0px));bottom:max(8px,env(safe-area-inset-bottom,0px));z-index:6;width:74px;height:74px;border-radius:22px;background:var(--sun);
  box-shadow:0 5px 0 #C98A12;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;font-family:var(--f-d);font-size:.9rem;color:#5A3A00}
.vbuild27 svg{width:40px;height:40px}.vbuild27.on{background:var(--leaf);color:#fff;box-shadow:0 5px 0 #23774A}
.vpal27{position:absolute;left:max(8px,env(safe-area-inset-left,0px));right:96px;bottom:max(8px,env(safe-area-inset-bottom,0px));z-index:5;background:rgba(255,255,255,.95);border-radius:20px;padding:6px;box-shadow:0 4px 0 rgba(90,53,80,.15);overflow-x:auto;-webkit-overflow-scrolling:touch}
.vp27row{display:flex;gap:6px;width:max-content}
.vbi27{width:80px;min-height:88px;border-radius:14px;background:#FFF4DC;border:3px solid transparent;display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 2px;font-size:.68rem;font-weight:800;line-height:1.1}
.vbi27 svg{width:40px;height:36px}.vbi27 i{font-style:normal;display:flex;align-items:center;gap:1px;font-size:.7rem;color:var(--ink-2)}.vbi27 i svg{width:15px;height:15px}
.vbi27.on{border-color:var(--leaf);background:#E3F5E8}.vbi27.no{opacity:.45}
.vbi27 .x27{font-size:1.7rem;line-height:36px;height:36px}.vbi27.rm.on{border-color:var(--coral);background:#FFE6DE}
.vtoast27{position:absolute;left:50%;top:calc(var(--topH,64px) + 54px);transform:translate(-50%,-10px);z-index:6;max-width:min(80vw,560px);background:rgba(43,35,64,.88);color:#fff;border-radius:16px;padding:8px 14px;font-weight:800;font-size:.86rem;line-height:1.25;text-align:center;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.vtoast27.on{opacity:1;transform:translate(-50%,0)}
.vfly27{position:fixed;left:0;top:0;width:40px;height:40px;z-index:9998;pointer-events:none}.vfly27 svg{width:40px;height:40px}
.vmk27row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:6px 0 10px}
.vmk27d{display:flex;align-items:center;gap:4px;background:#FFF4DC;border-radius:16px;padding:8px 10px;font-weight:900;font-family:var(--f-d);border:3px solid #F1D9A8}
.vmk27d svg{width:34px;height:34px}.vmk27d span{display:flex;align-items:center;gap:2px}.vmk27d em{font-style:normal;color:var(--ink-2)}.vmk27d.no{opacity:.45}
.vshop27 .vs27art{display:flex;justify-content:center;align-items:flex-end;gap:4px;height:90px}.vshop27 .vs27art svg{height:90px;width:76px}
.vpay27 .vp27price{font-family:var(--f-d);font-size:1.4rem;font-weight:800;color:var(--leaf);margin:4px 0}
.vpay27 .vp27list{text-align:left;margin:4px 0 10px;padding-left:20px;font-size:.84rem;line-height:1.35}
.rowbtns.col{flex-direction:column;align-items:stretch}
.vp27msg{min-height:1.2em;font-size:.82rem;color:var(--ink-2);margin-top:6px}
.vahabtn27{position:fixed;left:max(14px,env(safe-area-inset-left,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:40;width:78px;height:78px;border-radius:26px;background:linear-gradient(#FFE08A,#F5B83A);
  box-shadow:0 5px 0 #C98A12,0 8px 18px rgba(0,0,0,.18);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:5px;font-family:var(--f-d);font-size:.92rem;color:#5A3A00;border:3px solid #fff}
.vahabtn27 .vb27art{position:absolute;top:-16px;left:50%;transform:translateX(-50%);width:62px;height:62px}.vahabtn27 .vb27art svg{width:62px;height:62px}
.vahabtn27 .vb27lock{position:absolute;right:-6px;top:-6px;width:26px;height:26px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 2px 0 rgba(0,0,0,.12)}.vahabtn27 .vb27lock svg{width:18px;height:18px}
body:not(.onworld) .vahabtn27,body.page26b .vahabtn27{display:none}
@media (max-height:420px){.vchip27{width:36px;height:36px}.vchip27 svg{width:27px;height:27px}.vbuild27{width:64px;height:64px}.vbuild27 svg{width:34px;height:34px}.vbi27{width:70px;min-height:78px}.vtask27{font-size:.8rem}}
/* v28 — Vaha 3D */
.v3d{position:relative;overflow:hidden;background:linear-gradient(#7FC8F0,#F3E3BE);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.v3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.v3load{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;font-family:var(--f-d);color:#5A3A1E;font-size:20px}
.v3spin{width:54px;height:54px;border-radius:50%;border:7px solid #fff8;border-top-color:#F5A623;animation:v3spin 1s linear infinite}
@keyframes v3spin{to{transform:rotate(360deg)}}
.v3task{position:absolute;top:10px;left:max(64px,env(safe-area-inset-left,0px));max-width:calc(100% - 64px - 300px);display:flex;align-items:center;gap:8px;background:#FFFFFFEE;border:3px solid #F1D9A8;border-radius:18px;padding:6px 14px 6px 6px;font-family:var(--f-d);font-weight:700;font-size:15px;color:var(--ink);box-shadow:0 4px 0 #0002;text-align:left;line-height:1.2;z-index:3}
.v3task em{font-style:normal;color:#C66A10;margin-left:4px;white-space:nowrap}
.v3tn{flex:none;width:30px;height:30px;border-radius:50%;background:#F5A623;color:#fff;display:grid;place-items:center;font-weight:900}
.v3bag{position:absolute;top:64px;left:max(10px,env(safe-area-inset-left,0px));display:grid;grid-auto-flow:column;grid-template-rows:repeat(6,auto);justify-content:start;gap:5px;z-index:3}
.v3chip{display:flex;align-items:center;gap:3px;background:#FFFFFFE6;border-radius:14px;padding:2px 9px 2px 3px;font-family:var(--f-d);font-weight:900;font-size:16px;color:var(--ink);box-shadow:0 3px 0 #0002}
.v3chip svg{width:30px;height:30px}
.v3chip.empty{opacity:.75;padding:2px}
.v3joy{position:absolute;left:max(22px,env(safe-area-inset-left,0px));bottom:22px;width:132px;height:132px;border-radius:50%;background:radial-gradient(#ffffff55,#ffffff22);border:4px solid #FFFFFFAA;box-shadow:0 4px 12px #0003;touch-action:none;z-index:3}
.v3knob{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#E9E2D4);box-shadow:0 4px 0 #0003;pointer-events:none}
.v3btn{position:absolute;border-radius:50%;display:grid;place-items:center;font-family:var(--f-d);color:#fff;font-size:15px;box-shadow:0 6px 0 #0003;touch-action:none;z-index:3;border:4px solid #FFFFFFCC}
.v3btn:active{transform:translateY(3px);box-shadow:0 3px 0 #0003}
.v3a{right:max(22px,env(safe-area-inset-right,0px));bottom:22px;width:92px;height:92px;background:radial-gradient(circle at 35% 30%,#7DDB8A,#2E9E4A)}
.v3b{right:calc(max(22px,env(safe-area-inset-right,0px)) + 104px);bottom:46px;width:84px;height:84px;background:radial-gradient(circle at 35% 30%,#FFB86B,#E2711D);align-content:center;gap:0}
.v3b svg{width:40px;height:40px;display:block}
.v3b span{display:block;line-height:0;font-size:30px}
.v3b.dim{filter:saturate(.35);opacity:.75}
.v3side{position:absolute;right:max(14px,env(safe-area-inset-right,0px));top:64px;display:flex;flex-direction:column;gap:8px;z-index:3}
.v3s{width:64px;display:grid;justify-items:center;background:#FFFFFFE6;border-radius:16px;padding:4px 2px;font-family:var(--f-d);font-size:13px;color:var(--ink);box-shadow:0 3px 0 #0002;border:3px solid transparent}
.v3s svg{width:40px;height:40px}
.v3s.on{border-color:#F5A623;background:#FFF4DC}
.v3pal{position:absolute;left:170px;right:220px;bottom:10px;z-index:4}
.v3prow{display:flex;gap:6px;overflow-x:auto;padding:4px;background:#FFFFFFE0;border-radius:18px;box-shadow:0 4px 0 #0002;scrollbar-width:none}
.v3pb{flex:none;width:76px;display:grid;justify-items:center;gap:1px;padding:4px 2px;border-radius:14px;background:#FFF8EA;border:3px solid #F1D9A8;font-family:var(--f-d);font-size:12px;color:var(--ink);line-height:1.1}
.v3pb svg{width:34px;height:34px}
.v3pb i{font-style:normal;display:flex;gap:2px;align-items:center;font-weight:900;font-size:12px}
.v3pb i svg{width:16px;height:16px}
.v3pb.on{border-color:#F5A623;background:#FFE7B8}
.v3pb.rm.on{border-color:#E0503A;background:#FFE0DA}
.v3pb.no{opacity:.5}
.v3x{font-size:26px;line-height:34px;height:34px}
.v3wear{position:absolute;inset:0;z-index:6;display:flex;justify-content:flex-end;align-items:stretch;pointer-events:none}
.v3wp{pointer-events:auto;width:min(380px,52%);margin:60px 8px 8px;overflow-y:auto;background:#FFFFFFF2;border-radius:22px;padding:12px 14px;box-shadow:0 6px 20px #0003;font-family:var(--f-d)}
.v3wp h4{margin:0 0 6px;font-size:20px;color:var(--ink)}
.v3wr{margin:6px 0}
.v3wr>b{display:block;font-size:14px;color:var(--ink-2);margin-bottom:3px}
.v3wr>div{display:flex;flex-wrap:wrap;gap:6px}
.v3wo{min-width:38px;height:38px;border-radius:12px;border:3px solid #EEE3CF;background:#FFF8EA;font-family:var(--f-d);font-size:14px;color:var(--ink);padding:0 8px;display:flex;align-items:center;gap:4px}
.v3wo i{width:22px;height:22px;border-radius:50%;border:2px solid #0002}
.v3wo.on{border-color:#F5A623;background:#FFE7B8}
.v3wp .btn{width:100%;margin-top:8px}
.v3toast{position:absolute;left:50%;top:62px;transform:translate(-50%,-10px);max-width:min(560px,74%);background:#2B2340E6;color:#fff;border-radius:16px;padding:8px 16px;font-family:var(--f-d);font-size:16px;text-align:center;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:5}
.v3toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-height:430px){.v3bag{grid-template-rows:repeat(4,auto)}.v3chip svg{width:26px;height:26px}.v3joy{width:112px;height:112px;bottom:14px}.v3a{width:78px;height:78px;bottom:14px}.v3b{width:70px;height:70px;bottom:34px;right:calc(max(22px,env(safe-area-inset-right,0px)) + 88px)}.v3b svg{width:32px;height:32px}.v3s{width:54px}.v3s svg{width:32px;height:32px}.v3task{font-size:13px}.v3pal{left:136px;right:180px}}
@media (max-width:640px){.v3task{max-width:calc(100% - 64px - 12px);top:62px}.v3bag{top:120px}.v3side{top:120px}.v3pal{left:8px;right:8px;bottom:auto;top:56px}}
/* guide for children who can't read yet */
.v3tn{width:auto!important;min-width:30px;height:38px!important;border-radius:14px!important;padding:0 6px 0 2px;gap:1px;display:flex!important;align-items:center}
.v3tn svg{width:34px;height:34px}
.v3tn i{font-style:normal;font-size:13px}
.v3hint{animation:v3pulse 1s ease-in-out infinite;border-color:#FFD23F!important;box-shadow:0 0 0 4px #FFD23F,0 0 22px 6px #FFD23FCC!important}
.v3s{position:relative}
.v3hint::before{content:"";position:absolute;width:0;height:0;border-top:16px solid transparent;border-bottom:16px solid transparent;border-left:26px solid #FFB21E;filter:drop-shadow(0 2px 0 #0003);right:calc(100% + 10px);top:50%;margin-top:-16px;animation:v3poke .6s ease-in-out infinite alternate;pointer-events:none}
.v3b.v3hint::before{right:auto;left:50%;top:auto;bottom:calc(100% + 8px);margin:0 0 0 -16px;border-left:16px solid transparent;border-right:16px solid transparent;border-top:26px solid #FFB21E;border-bottom:0;animation-name:v3pokeD}
@keyframes v3pulse{50%{transform:scale(1.1)}}
@keyframes v3poke{to{transform:translateX(-10px)}}
@keyframes v3pokeD{to{transform:translateY(-10px)}}
.v3edge{position:absolute;z-index:2;width:76px;height:76px;pointer-events:none;animation:v3edgeP .7s ease-in-out infinite alternate}
.v3edge i{position:absolute;inset:0;background:#FFC21E;clip-path:polygon(100% 50%,40% 4%,40% 30%,0 30%,0 70%,40% 70%,40% 96%);filter:drop-shadow(0 0 3px #fff)}
.v3edge::before{content:"";position:absolute;inset:6px;background:#FF8A1E;clip-path:polygon(92% 50%,46% 16%,46% 38%,8% 38%,8% 62%,46% 62%,46% 84%);z-index:1}
@keyframes v3edgeP{to{opacity:.7}}
/* levels, travel */
.v3lvl{position:absolute;top:64px;left:max(10px,env(safe-area-inset-left,0px));z-index:3;display:flex;align-items:center;gap:6px;background:#FFFFFFE6;border-radius:16px;padding:3px 10px 3px 3px;box-shadow:0 3px 0 #0002;font-family:var(--f-d)}
.v3lvs{position:relative;width:34px;height:34px;display:grid;place-items:center}
.v3lvs svg{position:absolute;inset:0;width:34px;height:34px}
.v3lvs b{position:relative;font-size:14px;color:#7A4A00}
.v3lvl i{display:block;width:62px;height:10px;border-radius:6px;background:#EADBC0;overflow:hidden}
.v3lvl s{display:block;height:100%;background:linear-gradient(90deg,#FFC21E,#FF8A1E);border-radius:6px;transition:width .4s}
.v3bag{top:112px!important}
.v3pb.lock,.v3wo.lock{opacity:.5;filter:grayscale(.6)}
.v3pb.lock i svg{width:14px;height:14px}
.v3wo u{text-decoration:none;display:inline-flex;align-items:center;font-size:12px;margin-left:2px}
.v3wo u svg{width:14px;height:14px}
.v3trip h4,.v3lvup h4{font-family:var(--f-d);font-size:24px;margin:2px 0 10px;color:var(--ink)}
.v3trow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.v3tc{width:120px;display:grid;justify-items:center;gap:2px;padding:8px 6px;border-radius:18px;background:#FFF8EA;border:3px solid #F1D9A8;font-family:var(--f-d);color:var(--ink)}
.v3tc svg{width:64px;height:64px}
.v3tc b{font-size:17px}
.v3tc em{font-style:normal;font-size:12px;display:flex;align-items:center;gap:2px;color:var(--ink-2)}
.v3tc em svg{width:16px;height:16px}
.v3tc.on{border-color:#36A469;background:#E8F7EC}
.v3tc.lock{filter:grayscale(.7);opacity:.7}
.v3tc.soon{opacity:.55;border-style:dashed}
.v3lvup{text-align:center}
.v3lvstar{position:relative;width:110px;height:110px;margin:0 auto;display:grid;place-items:center;animation:v3pulse 1s ease-in-out infinite}
.v3lvstar svg{position:absolute;inset:0;width:110px;height:110px}
.v3lvstar b{position:relative;font-family:var(--f-d);font-size:38px;color:#7A4A00}
.v3unl{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:6px 0 12px}
.v3unl div{display:grid;justify-items:center;width:96px;font-family:var(--f-d);font-size:14px;color:var(--ink)}
.v3unl svg{width:56px;height:56px}
.v3lvb{display:flex;gap:8px;justify-content:center}
@media (max-height:430px){.v3bag{top:106px!important}.v3lvl{top:60px}.v3tc{width:104px}.v3tc svg{width:48px;height:48px}.v3lvstar{width:80px;height:80px}.v3lvstar svg{width:80px;height:80px}}
.v3s b{font-size:12px;white-space:nowrap;letter-spacing:-.2px}
/* playing with friends */
.v3two{display:flex;align-items:flex-end}
.v3two svg{width:44px!important;height:54px!important;margin:0 -8px}
.v3tc em{max-width:120px;text-align:center;line-height:1.15}
.v3code{display:flex;gap:6px;justify-content:center}
.v3code span{display:grid;place-items:center;background:#FFF8EA;border:3px solid #F1D9A8;border-radius:14px}
.v3code.big span{width:70px;height:70px}
.v3code.big span svg{width:56px;height:56px}
.v3code.big span.empty{border-style:dashed;background:#fff}
.v3code.mini{gap:3px;cursor:pointer}
.v3code.mini span{width:34px;height:34px;border-width:2px;border-radius:9px}
.v3code.mini span svg{width:26px;height:26px}
.v3sub{font-family:var(--f-d);color:var(--ink-2);margin:10px 0}
.v3keys{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:12px 0}
.v3keys button{aspect-ratio:1;display:grid;place-items:center;background:#FFF8EA;border:3px solid #F1D9A8;border-radius:14px}
.v3keys button svg{width:80%;height:80%}
.v3keys button:active{transform:scale(.92)}
.v3pad{max-width:min(560px,94vw)}
.v3net{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:6px;background:#FFFFFFE6;border-radius:18px;padding:4px 6px;box-shadow:0 3px 0 #0002;font-family:var(--f-d)}
.v3pn{display:flex;align-items:center;gap:2px;font-size:18px;color:var(--ink)}
.v3pn svg{width:28px;height:28px}
.v3nb{min-width:38px;height:38px;border-radius:12px;border:3px solid #F1D9A8;background:#FFF8EA;font-family:var(--f-d);font-size:14px;color:var(--ink);display:grid;place-items:center;padding:0 8px}
.v3nb svg{width:24px;height:24px}
.v3nb.on{border-color:#E0503A;background:#FFE0DA}
.v3d.building .v3net{display:none}
@media (max-height:430px){.v3keys{gap:4px;margin:8px 0}.v3code.big span{width:54px;height:54px}.v3code.big span svg{width:42px;height:42px}.v3pad h4{font-size:18px;margin-bottom:4px}}
/* v29 — Arabic: text runs right to left inside each block; layout stays as it is */
body.lang-ar :is(p,h1,h2,h3,h4,b,em,span,button,label,li,.toast,.v3toast,.v3task,.pop-in,.bubble,.msg){unicode-bidi:plaintext}
body.lang-ar .pop-in, body.lang-ar .v3toast, body.lang-ar .msg{text-align:start}
body.lang-ar{font-feature-settings:normal}