@font-face{font-family:"Plex Arabic";src:url(fonts/plex-ar-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:"Plex Arabic";src:url(fonts/plex-ar-500.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:"Plex Arabic";src:url(fonts/plex-ar-600.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:"Plex Arabic";src:url(fonts/plex-ar-700.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:"Plex Latin";src:url(fonts/plex-latin.woff2) format("woff2");font-weight:400 700;font-display:swap}


/* ===== SIDR UI kit v2 — tokens (ART_BIBLE.md) ===== */
:root{--ink:#1d1b3a;--ink2:#4b4770;--muted:#6f6a8f;--cream:#fff6e6;--cream2:#f6e7cc;--paper:#fffaf1;--line:#e9d8b8;
--saf:#ffb321;--saf-l:#ffd56e;--saf-d:#e58f0c;--teal:#2fb8a8;--teal-l:#74e2d2;--teal-d:#1a8f84;--coral:#ff5a4e;--coral-d:#d63b33;--night:#141a3c;
--f:"Plex Arabic","Plex Latin",system-ui,-apple-system,"Segoe UI",sans-serif;--fl:"Plex Latin","Plex Arabic",system-ui,sans-serif;
--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);
--sticker:0 5px 0 var(--ink),0 14px 28px rgba(20,16,50,.28);--ease:cubic-bezier(.34,1.56,.64,1);--out:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--night);color:var(--ink);font-family:var(--f);font-size:16px;line-height:1.65;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
body{overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:manipulation}
[lang=en],.en{font-family:var(--fl);line-height:1.45}
h1,h2,h3{line-height:1.25;margin:0;font-weight:700}p{margin:0}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
img.ic{width:28px;height:28px;object-fit:contain;flex:none;pointer-events:none;filter:drop-shadow(0 1px 0 rgba(29,27,58,.25))}
img.ic.off{filter:grayscale(1) brightness(1.5) opacity(.45)}
[dir=rtl] .flip{transform:scaleX(-1)}
:focus-visible{outline:4px solid var(--teal-l);outline-offset:3px;border-radius:16px}
#game{position:fixed;inset:0;width:100%;height:100%;display:block;background:var(--night)}
#touch{position:fixed;inset:0;display:none;z-index:2}body.playing #touch{display:block}
#ui{position:fixed;inset:0;z-index:5;pointer-events:none}
.screen{position:absolute;inset:0;overflow:auto;pointer-events:auto;opacity:0;transform:scale(1.04);clip-path:circle(0% at var(--cx,50%) var(--cy,50%));transition:opacity .3s var(--out),transform .6s var(--out),clip-path .6s cubic-bezier(.65,0,.35,1);scrollbar-width:none}
.screen.done{clip-path:none}
.screen::-webkit-scrollbar{display:none}
.screen.in{opacity:1;transform:none;clip-path:circle(150% at var(--cx,50%) var(--cy,50%))}.screen.leaving{opacity:0;transform:scale(.97);transition:opacity .45s,transform .45s;clip-path:none;z-index:-1}
[data-stagger]>*{animation:rise .5s var(--ease) both;animation-delay:calc(var(--i,0)*60ms + 80ms)}
[data-stagger]>*:nth-child(2){--i:1}[data-stagger]>*:nth-child(3){--i:2}[data-stagger]>*:nth-child(4){--i:3}[data-stagger]>*:nth-child(5){--i:4}[data-stagger]>*:nth-child(6){--i:5}[data-stagger]>*:nth-child(7){--i:6}[data-stagger]>*:nth-child(8){--i:7}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* boot */
#boot{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:radial-gradient(120% 80% at 50% 30%,#2b3a78,#141a3c);transition:opacity .5s}
#boot.gone{opacity:0;pointer-events:none}
.boot-logo{display:grid;gap:14px;justify-items:center;color:var(--cream);font-size:56px;font-weight:700;text-shadow:0 4px 0 var(--ink)}
.boot-logo i{display:block;width:160px;height:10px;border-radius:9px;background:rgba(255,246,230,.18);border:2px solid var(--ink);overflow:hidden;position:relative}
.boot-logo i:after{content:"";position:absolute;inset:0;width:var(--load,30%);background:linear-gradient(90deg,var(--saf-l),var(--saf));transition:width .3s}
/* ===== buttons: fat pills with a lip and a base that compresses ===== */
.btn{--b1:var(--cream);--b2:var(--cream2);--b3:#e2cba3;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:8px 26px;border-radius:999px;
border:3px solid var(--ink);background:linear-gradient(180deg,var(--b1) 0%,var(--b2) 58%,var(--b3) 100%);color:var(--ink);font-weight:700;font-size:18px;letter-spacing:.01em;
box-shadow:inset 0 3px 0 rgba(255,255,255,.65),inset 0 -5px 0 rgba(0,0,0,.10),0 6px 0 var(--ink),0 12px 22px rgba(20,16,50,.28);transition:transform .09s ease-in,box-shadow .09s ease-in,filter .2s}
.btn:active,.btn.pressed{transform:translateY(5px);box-shadow:inset 0 3px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(0,0,0,.10),0 1px 0 var(--ink),0 4px 8px rgba(20,16,50,.25)}
.btn:hover{filter:brightness(1.05)}
.btn img.ic{width:30px;height:30px}
.btn-primary{--b1:var(--saf-l);--b2:var(--saf);--b3:var(--saf-d)}
.btn-secondary{--b1:var(--teal-l);--b2:var(--teal);--b3:var(--teal-d);color:#fff;text-shadow:0 2px 0 var(--ink),0 0 2px var(--ink)}
.btn-tertiary,.btn-glass{--b1:#fffdf7;--b2:var(--cream);--b3:var(--cream2)}
.btn-danger{--b1:#ff8f86;--b2:var(--coral);--b3:var(--coral-d);color:#fff;text-shadow:0 2px 0 var(--ink)}
.btn-xl{min-height:72px;font-size:24px;padding:10px 40px;min-width:240px}
.btn-xl img.ic{width:38px;height:38px}
.btn[disabled]{filter:grayscale(.8) brightness(.95);opacity:.7;pointer-events:none}
.badge{position:absolute;top:-10px;inset-inline-end:-6px;min-width:28px;height:28px;padding:0 7px;border-radius:14px;background:var(--coral);color:#fff;border:3px solid var(--ink);font:700 14px/22px var(--fl);font-style:normal}
.icon-btn{position:relative;display:inline-grid;place-items:center;min-width:56px;height:56px;padding:0 10px;border-radius:20px;border:3px solid var(--ink);background:linear-gradient(180deg,#fffdf7,var(--cream) 60%,var(--cream2));
box-shadow:inset 0 3px 0 rgba(255,255,255,.7),0 5px 0 var(--ink),0 10px 18px rgba(20,16,50,.25);transition:transform .09s,box-shadow .09s;grid-auto-flow:column;gap:6px}
.icon-btn:active{transform:translateY(4px);box-shadow:inset 0 3px 0 rgba(255,255,255,.7),0 1px 0 var(--ink)}
.icon-btn img.ic{width:32px;height:32px}.icon-btn .sm{font-weight:700;font-size:15px}
.seed-ico{display:inline-grid;place-items:center}.seed-ico img.ic{width:26px;height:26px}
/* ===== panels ===== */
.panel,.sheet,.daily-card,.res-card,.bird-detail{background:radial-gradient(140% 90% at 30% 0%,#fffdf8,var(--cream) 55%,#fbecd2);border:3px solid var(--ink);border-radius:30px;box-shadow:var(--sticker)}
/* ===== title ===== */
.title{background:#141a3c}
.title-art{position:absolute;inset:-4%;background-size:cover;background-position:50% 40%;animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.12) translate(-2%,1%)}}
.title-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,26,60,.15) 0%,rgba(20,26,60,0) 22%,rgba(20,26,60,.25) 50%,rgba(20,26,60,.78) 72%,rgba(20,26,60,.92))}
.title-tools{position:absolute;top:calc(14px + var(--safe-t));inset-inline-end:calc(14px + var(--safe-r));display:flex;gap:12px;z-index:2}
.title-main{position:absolute;inset-inline:0;bottom:calc(28px + var(--safe-b));display:grid;justify-items:center;gap:16px;padding:0 20px;text-align:center}
.logo{position:relative;isolation:isolate;display:grid;justify-items:center;line-height:1;filter:drop-shadow(0 16px 24px rgba(0,0,0,.45))}
.logo-ar{position:relative;display:inline-block;font-size:clamp(84px,24vw,140px);font-weight:700;line-height:1.15;background:linear-gradient(180deg,#fff6d6 8%,var(--saf-l) 40%,var(--saf) 70%,var(--saf-d));-webkit-background-clip:text;background-clip:text;color:transparent}
.logo-ar:before{content:attr(data-t);position:absolute;inset:0;z-index:-1;color:var(--ink);-webkit-text-stroke:14px var(--ink);text-shadow:0 8px 0 var(--ink)}
.logo-en{font:700 clamp(22px,6vw,32px)/1 var(--fl);letter-spacing:.42em;margin-top:10px;color:var(--cream);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;padding-inline-start:.42em}
.tagline{color:var(--cream);font-weight:600;font-size:17px;text-shadow:0 2px 0 var(--ink),0 0 10px rgba(0,0,0,.4);max-width:30ch}
.row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.title .btn-glass{min-width:150px}
.btn-series{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:6px 20px 6px 8px;padding-inline:8px 20px;border-radius:999px;background:rgba(20,18,52,.62);color:var(--cream);font-weight:700;font-size:16px;border:3px solid var(--teal-l);box-shadow:0 4px 0 var(--ink),0 0 22px rgba(116,226,210,.35);backdrop-filter:blur(6px);transition:transform .12s}
.btn-series:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn-series .tv{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--teal);border:3px solid var(--ink)}.btn-series .tv img.ic{width:20px;height:20px}
.sheet .sheet-x{z-index:3}
.series-art{position:relative;z-index:0;height:150px;margin:-6px -4px 4px;border-radius:18px;border:4px solid var(--ink);background:center 30%/cover no-repeat;box-shadow:0 5px 0 var(--ink)}
.series-badge{position:absolute;inset-inline-start:12px;bottom:-14px;padding:4px 16px;border-radius:999px;background:var(--saf);border:3px solid var(--ink);font-weight:700;font-size:15px;color:var(--ink);transform:rotate(-4deg)}
/* ===== top bar ===== */
.bar{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:12px;padding:calc(12px + var(--safe-t)) calc(14px + var(--safe-r)) 12px calc(14px + var(--safe-l))}
.bar-title{flex:1;text-align:center;font-size:22px;color:var(--cream);-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;text-shadow:0 3px 0 var(--ink)}
.bar-gap,.flex1{flex:1}.bar-gap{flex:0 0 56px}
.chips{display:flex;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px 0 8px;border-radius:22px;background:rgba(255,246,230,.95);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);font:700 17px var(--fl)}
.chip-lv{padding:0 4px}
.ring{--p:0;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:conic-gradient(var(--teal) calc(var(--p)*360deg),#e8d9bd 0)}
.ring b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--cream);font-size:13px;border:2px solid var(--ink)}
.wrap{padding:8px 16px calc(28px + var(--safe-b));max-width:720px;margin:0 auto;display:grid;gap:18px}.narrow{max-width:520px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--ink2);text-transform:uppercase}
.muted{color:var(--muted)}
/* ===== modal sheet ===== */
.modal{position:fixed;inset:0;z-index:20;display:grid;align-items:end;justify-items:center;background:rgba(14,12,40,0);pointer-events:none;transition:background .3s}
.modal.open{background:rgba(14,12,40,.55);pointer-events:auto;backdrop-filter:blur(3px)}
.sheet{position:relative;width:min(560px,100%);max-height:92vh;overflow:auto;margin:0 10px calc(10px + var(--safe-b));padding:28px 22px 24px;display:grid;gap:14px;transform:translateY(110%) scale(.96);transition:transform .45s var(--ease)}
.modal.open .sheet{transform:none}
@media (min-width:700px){.modal{align-items:center}.sheet{margin:0}}
.sheet h2{font-size:26px;text-align:center}.sheet h3{font-size:18px}
.sheet-x{position:absolute;top:12px;inset-inline-end:12px;min-width:46px;height:46px;border-radius:16px}.sheet-x img.ic{width:24px;height:24px}
.stack{display:grid;gap:14px}.toggles{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggles .btn{min-height:50px;font-size:15px;padding:6px 12px}
.goals{list-style:none;margin:0;padding:0;display:grid;gap:8px}.goals li{display:flex;gap:10px;align-items:center;padding:8px 12px;border-radius:16px;background:rgba(255,255,255,.6);border:2px solid var(--line)}
.goals li img.ic{width:26px;height:26px}.goals li.on{border-color:var(--saf);background:#fff3cf}
.sheet-stats{display:flex;justify-content:center;gap:18px;font:700 16px var(--fl)}.sheet-stats>span{display:inline-flex;gap:6px;align-items:center}
.boss-intro{display:flex;gap:14px;align-items:center;padding:12px;border-radius:20px;background:linear-gradient(90deg,#3a2350,#5b2f5f);color:var(--cream);border:3px solid var(--ink)}
.boss-intro img{width:84px;height:84px;object-fit:contain;filter:drop-shadow(0 4px 0 rgba(0,0,0,.3))}.boss-intro small{display:block;opacity:.85}
.pick-row{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:22px;background:rgba(255,255,255,.65);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink)}
.pick-row>div{flex:1;display:grid}.pick-row small{color:var(--muted)}.pick-row .btn{min-height:46px;font-size:15px;padding:4px 16px}
.avatar{width:58px;height:58px;object-fit:contain}
.facts{list-style:none;margin:0;padding:0;display:grid;gap:8px}.facts li{display:flex;gap:10px;align-items:center;font-weight:600}
#toast{position:fixed;left:50%;bottom:calc(30px + var(--safe-b));z-index:40;transform:translate(-50%,40px);opacity:0;padding:10px 20px;border-radius:999px;background:var(--cream);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);font-weight:700;transition:.3s var(--ease);pointer-events:none}
#toast.on{transform:translate(-50%,0);opacity:1}
.confetti{position:fixed;inset:0;z-index:30;pointer-events:none}

/* title cinematic */
.title-art{animation:drift 26s ease-in-out infinite alternate,titlein 1.6s var(--out) both}
@keyframes titlein{from{opacity:0;filter:brightness(1.6) blur(6px)}}
.title-glow{position:absolute;inset:0;background:radial-gradient(40% 30% at 22% 18%,rgba(255,236,170,.55),transparent 70%);mix-blend-mode:screen;animation:glow 6s ease-in-out infinite alternate}
@keyframes glow{to{opacity:.55;transform:translate(3%,2%)}}
.tflyer{position:absolute;left:-150px;top:var(--fy);width:var(--fw,92px);animation:flyby var(--fd) linear var(--dl) infinite both;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25))}
.tflyer .spr,.story-flyer .spr{width:100%;animation:flap4 .34s steps(1) infinite}
@keyframes flap4{0%{background-position:0 0}25%{background-position:33.333% 0}50%{background-position:66.667% 0}75%{background-position:33.333% 0}}
@keyframes flyby{0%{transform:translate(0,0) rotate(-3deg)}50%{transform:translate(55vw,-30px) rotate(2deg)}100%{transform:translate(calc(100vw + 300px),10px) rotate(-2deg)}}
.title .logo{animation:logoin 1.2s var(--ease) .35s both}
@keyframes logoin{0%{opacity:0;transform:scale(1.9);filter:blur(14px) drop-shadow(0 6px 0 var(--ink))}60%{opacity:1;filter:blur(0) drop-shadow(0 6px 0 var(--ink))}}
.logo-burst{position:absolute;left:50%;top:38%;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;background:radial-gradient(circle,rgba(255,236,170,.75),rgba(255,200,90,.0) 65%);opacity:0;animation:burst 1.6s ease-out .75s both;pointer-events:none}
@keyframes burst{0%{opacity:0;transform:scale(.3)}25%{opacity:1}100%{opacity:0;transform:scale(1.7)}}
.title-main>*:not(.logo){animation:rise .6s var(--ease) both;animation-delay:calc(1.1s + var(--i,0)*90ms)}
.tap-hint{position:absolute;left:50%;bottom:calc(8px + var(--safe-b));transform:translateX(-50%);font-size:13px;font-weight:700;color:rgba(255,246,230,.8);text-shadow:0 1px 0 var(--ink);animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}
/* boss name card: per-boss colours, motif pattern from the boss's own projectile, portrait sliding in */
.boss-card{--b1:#2a1638;--b2:#6b3a7a;--acc:#ffd56e;position:fixed;inset:0;z-index:6;pointer-events:none;display:grid;place-items:center;overflow:hidden}
.boss-card[data-boss=ajaj]{--b1:#4a2410;--b2:#c26a1e;--acc:#ffe2a0}.boss-card[data-boss=hush]{--b1:#0b2236;--b2:#1d6f86;--acc:#9ff3ec}
.boss-card .bc-band{position:absolute;left:-10%;right:-10%;top:calc(50% - 80px);height:clamp(170px,18vw,230px);overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.45);background:linear-gradient(90deg,var(--b1),var(--b2) 50%,var(--b1));border-block:5px solid var(--ink);outline:3px solid var(--acc);outline-offset:-14px;transform:skewY(-6deg) scaleX(0);animation:band 2.8s var(--out) both}
.bc-pat{position:absolute;inset:-40px;background:var(--pat) 0 0/64px repeat;opacity:.16;animation:pat 2.8s linear both;filter:saturate(.4) brightness(1.4)}
.bc-fx{position:absolute;inset:0}
.boss-card[data-boss=qarqar] .bc-fx{background:radial-gradient(circle at 20% 40%,rgba(255,213,110,.5) 0 3px,transparent 4px),radial-gradient(circle at 70% 70%,rgba(255,213,110,.45) 0 3px,transparent 4px),radial-gradient(circle at 85% 25%,rgba(255,255,255,.5) 0 2px,transparent 3px);background-size:180px 120px;animation:glint 1s steps(2) infinite}
.boss-card[data-boss=ajaj] .bc-fx{background:repeating-linear-gradient(-8deg,transparent 0 26px,rgba(255,226,160,.22) 26px 29px);animation:sand .6s linear infinite}
.boss-card[data-boss=hush] .bc-fx{background:radial-gradient(circle at 50% 50%,transparent 38%,rgba(159,243,236,.25) 39% 41%,transparent 42%) 50% 50%/240px 240px;animation:rings 1.6s ease-out infinite}
.bc-art{position:absolute;top:calc(50% - 150px);inset-inline-end:max(2vw,8px);height:clamp(190px,26vw,320px);filter:drop-shadow(0 10px 0 rgba(29,27,58,.45));animation:bcArt 2.8s var(--out) both}
[dir=rtl] .bc-art{transform:scaleX(-1)}
.boss-card .bc-name{position:relative;display:grid;justify-items:center;gap:2px;transform:rotate(-6deg);animation:slam 2.8s var(--ease) .15s both;margin-top:30px;margin-inline-end:clamp(60px,14vw,220px)}
.bc-tag{font:700 clamp(12px,1.3vw,16px)/1 var(--f);letter-spacing:.06em;color:var(--ink);background:var(--acc);padding:5px 12px;border-radius:999px;border:3px solid var(--ink)}
.bc-name b{font-size:clamp(54px,6vw,92px);line-height:1.05;color:var(--acc);-webkit-text-stroke:6px var(--ink);paint-order:stroke fill}
.bc-name small{font-size:clamp(17px,1.8vw,26px);font-weight:700;color:var(--cream);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}
@keyframes band{0%{transform:skewY(-6deg) scaleX(0);opacity:1}14%,82%{transform:skewY(-6deg) scaleX(1);opacity:1}100%{transform:skewY(-6deg) scaleX(1);opacity:0}}
@keyframes slam{0%{opacity:0;transform:rotate(-6deg) scale(2.6)}12%{opacity:1;transform:rotate(-6deg) scale(.94)}18%,82%{opacity:1;transform:rotate(-6deg) scale(1)}100%{opacity:0;transform:rotate(-6deg) scale(1.1)}}
@keyframes bcArt{0%{opacity:0;translate:60vw 0}16%{opacity:1;translate:-14px 0}24%,82%{opacity:1;translate:0 0}100%{opacity:0;translate:-8vw 0}}
[dir=rtl] .bc-art{animation-name:bcArtR}@keyframes bcArtR{0%{opacity:0;translate:-60vw 0}16%{opacity:1;translate:14px 0}24%,82%{opacity:1;translate:0 0}100%{opacity:0;translate:8vw 0}}
@keyframes pat{to{transform:translateX(-64px)}}@keyframes glint{50%{opacity:.4}}@keyframes sand{to{background-position:-120px 0}}@keyframes rings{0%{background-size:60px 60px;opacity:1}100%{background-size:420px 420px;opacity:0}}