/* ===== screens v2: map, flock, daily, results, story ===== */
.spr{display:inline-block;background-image:var(--s);background-repeat:no-repeat;background-size:calc(var(--n)*100%) 100%;background-position:calc(var(--f)/(var(--n) - 1)*100%) 0;aspect-ratio:var(--ar)}
.center{text-align:center}
/* ---- map ---- */
.map{background:#2b2440}
.map .bar{background:linear-gradient(180deg,rgba(20,26,60,.75),rgba(20,26,60,0))}
.map-bg{position:fixed;inset:-40px;background:var(--map) center/cover;filter:blur(18px) saturate(1.1) brightness(.7);transform:scale(1.1)}
.map-col{position:relative;width:100%;margin-top:-80px;overflow:hidden;padding-bottom:var(--safe-b)}
.map-wrap{width:185%!important;margin-inline-start:-42.5%}[dir=rtl] .map-wrap{margin-inline-start:-42.5%}
@media (min-aspect-ratio:3/4){.map-wrap{width:min(100%,640px)!important;margin:0 auto!important}}
.map-wrap{position:relative;width:100%;aspect-ratio:900/1603;background:var(--map) center/100% 100% no-repeat;box-shadow:0 0 60px rgba(0,0,0,.45)}
.map-wrap svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.map-wrap .trail{fill:none;stroke:rgba(255,246,230,.75);stroke-width:.9;stroke-dasharray:1.4 1.6;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-width:5px}
.map-wrap .trail-done{fill:none;stroke:#fff3c4;stroke-width:5px;stroke-dasharray:2 12;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 4px rgba(255,200,80,.9))}
.mnode{position:absolute;left:var(--x);top:var(--y);width:60px;height:60px;margin:-30px 0 0 -30px;background:var(--m) center/contain no-repeat;display:grid;place-items:center;filter:drop-shadow(0 5px 0 rgba(29,27,58,.65));
animation:pop .5s var(--ease) both;transition:transform .12s}
.mnode:active{transform:scale(.92)}
.mnode.boss{width:86px;height:86px;margin:-43px 0 0 -43px}
.mnode .num{font:700 26px/1 var(--fl);color:var(--ink);margin-top:-2px}
.mnode .mboss{width:74%;height:74%;object-fit:contain;margin-top:-4px}
.mnode.locked{width:48px;height:48px;margin:-24px 0 0 -24px;filter:drop-shadow(0 3px 0 rgba(29,27,58,.5)) saturate(.6) brightness(.95);opacity:.92}
.mnode.boss.locked{width:64px;height:64px;margin:-32px 0 0 -32px}
.mstars{position:absolute;bottom:-14px;display:flex;gap:0}.mstars i img.ic{width:20px;height:20px;filter:grayscale(1) brightness(1.6) opacity(.55) drop-shadow(0 1px 0 var(--ink))}
.mstars i.on img.ic{filter:drop-shadow(0 1px 0 var(--ink))}.mstars i:nth-child(2){transform:translateY(4px)}
.mnode.current:before{content:"";position:absolute;inset:-10px;border-radius:50%;border:4px solid var(--saf-l);animation:pulse 1.4s ease-out infinite}
@keyframes pulse{0%{opacity:.9;transform:scale(.8)}100%{opacity:0;transform:scale(1.5)}}
@keyframes pop{from{opacity:0;transform:scale(.4)}}
.mnode .here{position:absolute;bottom:70%;width:70px;animation:perch 4s steps(1) infinite,hopy 4s ease-in-out infinite;filter:drop-shadow(0 4px 0 rgba(0,0,0,.25))}
@keyframes perch{0%,86%{background-position:100% 0}87%,99%{background-position:66.667% 0}}
@keyframes hopy{0%,84%,100%{transform:none}90%{transform:translateY(-16px) scale(1.04,.96)}95%{transform:translateY(0) scale(1.06,.92)}}
.bird-tile.on .tile-bird{animation:flap4 .34s steps(1) infinite,bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px)}}
.mrib{position:absolute;left:72%;top:var(--y);translate:-50% -50%;display:grid;justify-items:center;min-width:170px;padding:14px 30px 20px;background:var(--r) center/100% 100% no-repeat;transform:rotate(-3deg);filter:drop-shadow(0 4px 0 rgba(29,27,58,.45))}
.mrib b{font-size:15px;line-height:1.2;color:var(--ink)}.mrib small{display:flex;align-items:center;gap:3px;font:700 12px var(--fl)}.mrib img.ic{width:16px;height:16px}
/* ---- level sheet ---- */
.sheet-rib{justify-self:center;min-width:250px;margin-top:-6px;padding:14px 46px 22px;background:var(--r) center/100% 100% no-repeat;text-align:center;font-size:22px;font-weight:700;filter:drop-shadow(0 4px 0 rgba(29,27,58,.4))}
/* ---- flock ---- */
.flock{background:radial-gradient(120% 70% at 50% 0%,#2f6f7a,#173a4a 60%,#121a33)}
.flock-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:4px 14px 6px;max-width:720px;margin:0 auto}
.bird-tile{position:relative;display:grid;justify-items:center;gap:2px;padding:10px 4px 8px;border-radius:22px;background:linear-gradient(180deg,#fffdf7,var(--cream));border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);
font-weight:700;font-size:14px;transition:transform .12s}
.bird-tile:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.bird-tile .tile-bird{width:64px;animation:bob 1.6s ease-in-out infinite}
.bird-tile.on{background:linear-gradient(180deg,#fff3c9,var(--saf-l));transform:translateY(-3px)}
.bird-tile.locked .tile-bird{filter:brightness(0) opacity(.35)}.bird-tile img.ic{width:20px;height:20px}
.bird-tile .dot{position:absolute;top:6px;inset-inline-end:8px;width:12px;height:12px;border-radius:50%;background:var(--teal);border:2px solid var(--ink)}
.bird-detail{max-width:720px;margin:12px 14px calc(24px + var(--safe-b));display:grid;overflow:hidden}
@media (min-width:760px){.bird-detail{margin:12px auto 24px}}
.bd-hero{position:relative;display:grid;place-items:center;height:220px;background:radial-gradient(60% 70% at 50% 60%,color-mix(in srgb,var(--c) 45%,#fff) ,transparent 70%),linear-gradient(180deg,#fdf1d9,#f6e2bf);border-bottom:3px solid var(--ink)}
.bd-disc{position:absolute;bottom:18px;width:200px;height:34px;border-radius:50%;background:rgba(29,27,58,.18)}
.bd-tap{position:relative;display:grid;place-items:center}.bd-img{width:200px;animation:breathe 2.6s ease-in-out infinite;transform-origin:50% 90%}
@keyframes breathe{50%{transform:scale(1.03,.97)}}
.bird-detail.locked .bd-img{filter:brightness(0) opacity(.5)}
.bd-body{padding:18px 18px 22px;display:grid;gap:12px}
.bd-body h2{font-size:28px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}.bd-body h2 .en{font-size:18px;color:var(--muted)}
.unlock-note{display:flex;gap:8px;align-items:center;padding:10px 14px;border-radius:16px;background:#fde7c8;font-weight:600}
.power-card{display:flex;gap:12px;align-items:center;padding:12px;border-radius:20px;background:linear-gradient(90deg,#fff3c9,#fffaf0);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink)}
.pc-ico img.ic{width:54px;height:54px}.power-card small{display:block;color:var(--ink2)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0}.stats div{padding:8px 10px;border-radius:14px;background:rgba(255,255,255,.6);border:2px solid var(--line)}
.stats dt{font-size:13px;color:var(--muted);font-weight:600}.stats dd{margin:0;display:flex;align-items:center;min-height:26px}.stats dd img.ic{width:20px;height:20px}
.meter{flex:1;height:12px;border-radius:6px;background:#eadbc0;border:2px solid var(--ink);overflow:hidden}.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--teal-l),var(--teal))}
.bd-body h3{font-size:18px}
.tracks{display:grid;gap:10px}
.track{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:10px 12px;border-radius:18px;background:rgba(255,255,255,.7);border:2px solid var(--line)}
.tr-head b{display:block}.tr-head small{color:var(--muted);font-size:13px;line-height:1.3;display:block}
.pips{display:flex;gap:4px}.pips i{width:14px;height:14px;border-radius:50%;background:#e4d3b3;border:2px solid var(--ink)}.pips i.on{background:var(--saf)}
.btn-buy{min-height:44px;padding:4px 14px;font-size:15px;--b1:var(--saf-l);--b2:var(--saf);--b3:var(--saf-d)}.btn-buy img.ic{width:22px;height:22px}
.maxed{display:flex;gap:4px;align-items:center;font-weight:700;color:var(--teal-d)}.maxed img.ic{width:22px;height:22px}
.chirp{animation:chirp .6s var(--ease)}@keyframes chirp{30%{transform:scale(1.12,.9) translateY(4px)}60%{transform:scale(.94,1.08) translateY(-14px)}}
/* ---- daily ---- */
.daily{background:radial-gradient(120% 70% at 50% 0%,#7a4c8f,#3c2a5c 60%,#141a3c)}
.daily-card{overflow:hidden;display:grid}
.daily-art{position:relative;height:190px;background-size:cover;background-position:center;border-bottom:3px solid var(--ink)}
.daily-date{position:absolute;top:12px;inset-inline-start:12px;padding:4px 12px;border-radius:12px;background:var(--cream);border:3px solid var(--ink);font:700 14px var(--fl)}
.daily-body{padding:16px 18px 18px;display:grid;gap:8px}.daily-body h2{font-size:26px}
.done-note{display:flex;gap:10px;align-items:center;justify-content:center;padding:14px;border-radius:18px;background:var(--cream);border:3px solid var(--ink);font-weight:700}
/* ---- results ---- */
.results{display:grid;place-items:center;padding:calc(20px + var(--safe-t)) 14px calc(20px + var(--safe-b))}
.res-bg{position:fixed;inset:-30px;background-size:cover;background-position:center;filter:blur(10px) brightness(.55) saturate(1.2);transform:scale(1.08)}
.res-card{position:relative;width:min(460px,100%);padding:92px 20px 22px;display:grid;justify-items:center;gap:12px;text-align:center;animation:cardin .6s var(--ease) both;margin-top:70px}
@keyframes cardin{from{opacity:0;transform:translateY(40px) scale(.9)}}
.res-bird{position:absolute;top:-92px;width:172px;filter:drop-shadow(0 8px 0 rgba(29,27,58,.35));animation:hop 1.2s ease-in-out infinite}
.res-card.lose .res-bird{animation:none;transform:rotate(-8deg)}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-14px) scale(1.02,.98)}}
.res-rib{min-width:260px;padding:16px 50px 24px;background:var(--r) center/100% 100% no-repeat;font-size:26px;filter:drop-shadow(0 4px 0 rgba(29,27,58,.4));margin-top:-4px}
.res-card.lose .res-rib{filter:grayscale(.6) drop-shadow(0 4px 0 rgba(29,27,58,.4))}
.bigstars{display:flex;justify-content:center;align-items:flex-end;gap:2px;height:96px}
.bigstars i{position:relative;width:78px;height:78px;background:url() center/contain no-repeat}
.bigstars i img{width:100%;height:100%;object-fit:contain;filter:grayscale(1) brightness(.45) opacity(.35);transition:none}
.bigstars i:nth-child(2){width:96px;height:96px;transform:translateY(-10px)}
.bigstars i.pop img{filter:drop-shadow(0 0 14px rgba(255,214,90,.85));animation:starpop .55s var(--ease) both}
@keyframes starpop{0%{transform:scale(2.4) rotate(-40deg);opacity:0}60%{transform:scale(.9) rotate(6deg);opacity:1}100%{transform:none}}
.res-rows{width:100%;display:grid;gap:8px}
.res-rows>div{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:16px;background:rgba(255,255,255,.65);border:2px solid var(--line);font-weight:600}
.res-rows>div>span:nth-child(2){flex:1;text-align:start}.res-rows b{font:700 20px var(--fl)}.res-rows img.ic{width:26px;height:26px}
.xpbar{width:100%;display:flex;align-items:center;gap:10px}.xp-lv{font-weight:700;white-space:nowrap}
.xp-track{flex:1;height:16px;border-radius:9px;background:#e8d9bd;border:3px solid var(--ink);overflow:hidden}.xp-track i{display:block;height:100%;background:linear-gradient(90deg,var(--teal-l),var(--teal));transition:width .9s var(--out)}
.lvup,.newbird{display:flex;gap:10px;align-items:center;justify-content:center;padding:10px 16px;border-radius:18px;border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);font-weight:700;animation:rise .5s var(--ease)}
.lvup{background:linear-gradient(90deg,var(--saf-l),#fff3c9)}.newbird{background:linear-gradient(90deg,color-mix(in srgb,var(--c) 40%,#fff),#fffaf0)}
.newbird img{width:56px;height:56px;object-fit:contain}.newbird small{display:block;color:var(--ink2)}
.res-actions{width:100%;display:grid;gap:14px;justify-items:stretch;margin-top:6px}.res-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.res-row2 .btn{min-height:50px;font-size:16px;padding:6px 12px}
/* ---- story ---- */
.story{background:#000;overflow:hidden}
.story-stage{position:absolute;inset:0;overflow:hidden}
.story-img{position:absolute;inset:-6%;background-size:cover;background-position:center;animation:kb var(--d,9s) linear both}
@keyframes kb{from{transform:scale(var(--s0,1.04)) translate(var(--x0,0),var(--y0,0))}to{transform:scale(var(--s1,1.16)) translate(var(--x1,-2%),var(--y1,-1%))}}
.story-img.out{animation:kbout .7s ease-in both}@keyframes kbout{to{opacity:0;transform:scale(1.25)}}
.story-motes{position:absolute;inset:0;pointer-events:none}
.story-motes i{position:absolute;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle,#fff8d8,rgba(255,240,180,0));animation:mote var(--t,7s) linear infinite;animation-delay:var(--dl,0s);left:var(--l);top:var(--tp)}
@keyframes mote{0%{transform:translate(0,0);opacity:0}15%{opacity:.9}100%{transform:translate(var(--dx,-60px),var(--dy,-120px));opacity:0}}
.story-flyer{position:absolute;width:110px;top:var(--fy,30%);left:-140px;animation:flyby var(--fd,5.5s) cubic-bezier(.45,.05,.55,.95) .4s both}
.story-flyer .spr{width:100%;animation:flap .3s steps(1) infinite}
@keyframes flyby{0%{transform:translate(0,0)}50%{transform:translate(60vw,-40px)}100%{transform:translate(calc(100vw + 280px),20px)}}
@keyframes flap{0%{--f:0}25%{--f:1}50%{--f:2}75%{--f:1}}
.story-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,30,.35),rgba(10,8,30,0) 25%,rgba(10,8,30,0) 50%,rgba(10,8,30,.75))}
.story-skip{position:absolute;top:calc(14px + var(--safe-t));inset-inline-end:calc(14px + var(--safe-r));min-height:46px;padding:4px 18px;font-size:15px;z-index:3}
.story-bubble{position:absolute;inset-inline:14px;bottom:calc(20px + var(--safe-b));max-width:640px;margin:0 auto;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:end;z-index:2;animation:rise .45s var(--ease) both}
.sb-face{width:78px;height:78px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#fffaf0,var(--cream2));border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);display:grid;place-items:center;overflow:hidden}
.sb-face .spr{width:96px;margin-top:18px}
.sb-text{position:relative;padding:14px 18px 12px;border-radius:24px 24px 24px 6px;background:var(--cream);border:3px solid var(--ink);box-shadow:var(--sticker);min-height:96px;display:grid;gap:8px}
[dir=rtl] .sb-text{border-radius:24px 24px 6px 24px}
.sb-text p{font-size:18px;line-height:1.75;font-weight:500}html[lang=en] .sb-text p{font-size:17px;line-height:1.5}
.sb-text p .ghost{opacity:0}
.sb-foot{display:flex;justify-content:space-between;align-items:center}
.dots{display:flex;gap:6px}.dots i{width:9px;height:9px;border-radius:50%;background:#dcc9a6;border:2px solid var(--ink)}.dots i.on{background:var(--saf);width:22px;border-radius:6px}
.sb-next{min-height:44px;padding:4px 18px;font-size:15px}
.story-tap{position:absolute;inset:0;z-index:1}
/* ---- larger screens and TV ---- */
@media (min-width:760px){.flock-grid{grid-template-columns:repeat(7,1fr)}}
@media (min-width:1000px){.btn{font-size:19px}.chip{height:48px}#hud .hud-btn{width:58px;height:58px}.hearts img.ic{width:36px;height:36px}.prog{height:20px}.hud-seeds{height:48px;font-size:20px}.power{width:110px;height:110px}.power-ico img.ic{width:66px;height:66px}}
@media (min-width:1600px){html{font-size:20px}.btn{min-height:68px;font-size:22px}}
@media (orientation:landscape) and (max-height:520px){.res-card{padding-top:70px;margin-top:60px}.res-bird{width:130px;top:-70px}.bigstars{height:76px}.bigstars i{width:60px;height:60px}.bigstars i:nth-child(2){width:74px;height:74px}.sb-text p{font-size:16px}}
.bar-title.swap{animation:rise .4s var(--ease)}
.sb-face .sbf{width:84px;margin-top:4px}.sb-face img.sbf{width:74px;height:74px;object-fit:contain;margin:0}
.story-tap{background:none}