/* Life Power / Hero Hall / Treasury / Share editor (life.js) */
.mark{display:inline-block;flex:none;background:currentColor;-webkit-mask:url(assets/logo_mark.png) center/contain no-repeat;mask:url(assets/logo_mark.png) center/contain no-repeat}
.side-brand{display:flex;align-items:flex-end;gap:8px}
.side-brand b{font:700 40px/1 var(--en);color:var(--navy)}
.splash .c .mark.l{width:120px;height:140px;animation:pop .9s var(--spring) .5s both}
.splash .c .wm{display:block;font:700 54px/1 var(--en);margin-top:6px;animation:rise .6s var(--ease) .8s both}
.logo2{display:flex;align-items:center;gap:6px;color:var(--navy);margin-right:auto}
.logo2 b{font:700 24px var(--en)}
.pg.in.still{animation:fade .25s both}
.side-r{width:250px;height:auto}
.demo{padding:14px;max-height:84vh;overflow:auto}
.demo-h{font-weight:700;font-size:15px}
.demo-h small{font-weight:500;color:var(--muted);font-size:12px;margin-left:4px}
.demo-s{font-size:12px;color:var(--ink2);margin:6px 0 10px;line-height:1.5}
.demo-s b{color:var(--or)}
.demo-g{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.demo-g button{min-height:36px;padding:6px 8px;border-radius:12px;background:#F1F3F7;font-size:12px;text-align:left;line-height:1.3}
.demo-g button:hover{background:#FFE7DC}
.demo-g.t button.on{background:var(--or);color:#fff}
@media (max-width:1180px){.side-r{display:none}}

/* ELi home */
.pg.eli{background:linear-gradient(180deg,#EEF3FF,#FFF8EC 60%,#F3F4F7)}
.eh{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:8px;padding:52px 14px 8px;background:rgba(238,243,255,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.eh-t{font-size:20px}
.chip2{display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 10px 0 6px;border-radius:17px;background:#fff;box-shadow:var(--sh);font-size:15px;font-weight:700}
.chip2 small{font:600 11px var(--num);color:var(--or);margin-left:2px}
.chip2.fire{padding-left:8px}
.chip2.league{margin-left:auto;padding:0 12px;font-size:13px}
#demoBtn{font-size:17px;width:34px;height:34px;background:#fff;box-shadow:var(--sh)}
.lvbar{display:flex;align-items:center;gap:10px;margin:4px 14px 0;width:calc(100% - 28px);padding:10px 12px;border-radius:18px;background:#fff;box-shadow:var(--sh);text-align:left}
.lv-ic{width:40px;height:40px;border-radius:12px;background:linear-gradient(145deg,#EAF1FF,#FFF0E2);display:grid;place-items:center;font-size:22px}
.lv-x{flex:1}
.lv-x>div:first-child{font-size:14px}
.lv-x em{font-style:normal;color:var(--or);font-size:12px}
.lv-x .pb{height:8px;border-radius:4px;background:#EEF0F4;margin-top:5px;overflow:hidden}
.lv-x .pb i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#5B8BFF,var(--blue));transition:width 1.2s var(--ease)}
.lvbar small{font-size:11px;color:var(--muted);text-align:right;line-height:1.25}
.estage{position:relative;height:350px;margin:10px 14px 0;border-radius:26px;overflow:hidden;box-shadow:var(--sh);touch-action:none;user-select:none;-webkit-user-select:none}
.ebg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%;transition:filter 1s}
.estage.v-sleepy .ebg{filter:brightness(.75) saturate(.7) hue-rotate(10deg)}
.estage.v-lonely .ebg{filter:grayscale(.75) brightness(.7)}
.estage.v-lonely::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 70%,transparent 30%,rgba(20,30,60,.45));pointer-events:none}
.home-eli{z-index:3}
.estage.v-lonely .eli-m img{filter:saturate(.6) drop-shadow(0 6px 8px rgba(10,30,90,.22))}
.pet-hit{position:absolute;left:60px;right:60px;top:70px;bottom:20px;z-index:8;cursor:grab;touch-action:none}
.estage.petting .pet-hit{cursor:grabbing}
.pring{position:absolute;left:50%;top:44px;width:270px;height:270px;margin-left:-135px;transform:rotate(-90deg);z-index:2;pointer-events:none;opacity:0;transition:opacity .3s}
.estage.petting .pring{opacity:1}
.pr-bg{fill:none;stroke:rgba(255,255,255,.55);stroke-width:5}
.pr-fg{fill:none;stroke:#FF6FA0;stroke-width:6;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(255,111,160,.8));transition:stroke-dashoffset .12s linear}
.hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:9;padding:7px 14px;border-radius:16px;background:rgba(255,255,255,.92);font-size:13px;font-weight:600;white-space:nowrap;box-shadow:var(--sh);animation:hintb 2.4s ease-in-out infinite;pointer-events:none}
@keyframes hintb{50%{transform:translate(-50%,-3px)}}
.crown{position:absolute;left:50%;top:70px;width:74px;margin-left:-37px;z-index:5;animation:bob 2.4s ease-in-out infinite;filter:drop-shadow(0 4px 6px rgba(160,100,0,.35))}
.aura{position:absolute;left:50%;top:60px;width:300px;height:300px;margin-left:-150px;border-radius:50%;z-index:1;pointer-events:none;transition:opacity .8s}
.aura i{position:absolute;inset:0;border-radius:50%}
.v-sleepy .aura{opacity:.35}
.v-lonely .aura{opacity:.1}
.aura.t-sprout0{display:none}
.aura.t-sprout i:first-child{background:radial-gradient(closest-side,rgba(140,230,140,.55),rgba(140,230,140,0))}
.aura.t-vibrant i:first-child{background:radial-gradient(closest-side,rgba(120,200,255,.6),rgba(120,200,255,0))}
.aura.t-vibrant i:nth-child(2){inset:30px;border:2px dashed rgba(255,255,255,.7);animation:spin 14s linear infinite}
.aura.t-guardian i:first-child{background:radial-gradient(closest-side,rgba(60,110,255,.55),rgba(60,110,255,0))}
.aura.t-guardian i:nth-child(2){inset:20px;border-radius:0;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);background:conic-gradient(from 0deg,rgba(255,255,255,0),rgba(170,200,255,.55),rgba(255,255,255,0) 40%);animation:spin 6s linear infinite}
.aura.t-guardian i:nth-child(3){inset:34px;border-radius:0;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);box-shadow:inset 0 0 0 3px rgba(150,190,255,.8);background:rgba(120,170,255,.08);animation:pulse2 2.4s ease-in-out infinite}
@keyframes pulse2{50%{transform:scale(1.04);opacity:.7}}
.aura.t-champion i:first-child{background:radial-gradient(closest-side,rgba(255,200,60,.65),rgba(255,140,30,.15) 70%,transparent)}
.aura.t-champion i:nth-child(2){inset:10px;background:conic-gradient(from 0deg,transparent,rgba(255,170,40,.5),transparent 25%,rgba(255,210,80,.45),transparent 55%,rgba(255,150,30,.5),transparent 80%);filter:blur(6px);animation:spin 3.5s linear infinite}
.aura.t-eternal i:first-child{background:radial-gradient(closest-side,rgba(255,240,160,.85),rgba(255,200,80,.25) 65%,transparent)}
.aura.t-eternal i:nth-child(2){background:repeating-conic-gradient(rgba(255,240,180,.5) 0 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(closest-side,transparent 40%,#000 60%,transparent);mask:radial-gradient(closest-side,transparent 40%,#000 60%,transparent);animation:spin 18s linear infinite}
.aura.t-eternal i:nth-child(3){inset:40px;border:2px solid rgba(255,230,140,.8);animation:pulse2 2s ease-in-out infinite}
.ap{position:absolute;z-index:4;pointer-events:none;font-size:14px;font-style:normal;color:#9BE58F}
.ap-vibrant{color:#8FD3FF}
.ap-guardian{color:#9DB8FF}
.ap-champion,.ap-eternal{color:#FFD54F}
.estage .flt{z-index:6}
.wrap2{padding:12px 14px 130px}
.rev{padding:14px 16px;margin-bottom:12px;background:linear-gradient(120deg,#F3EAFF,#E6F4FF);display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ink2)}
.rev>b{color:var(--purple);font-size:15px}
.rdots{display:flex;gap:6px;margin-top:4px}
.rdots i{flex:1;height:8px;border-radius:4px;background:rgba(122,92,255,.15)}
.rdots i.on{background:var(--purple)}
.lp{padding:14px 16px;margin-bottom:12px}
.lp.hop{animation:hop .6s var(--spring)}
.lp-h{display:flex;align-items:baseline;justify-content:space-between}
.lp-h span{font-weight:700;font-size:15px}
.lp-h b{font-size:40px;color:var(--or);line-height:1}
.lp-f{font-size:12px;color:var(--ink2);margin:2px 0 10px}
.lp-f b{color:var(--ink)}
.fire-s{color:var(--or);font-weight:600;margin-left:4px}
.lpr{display:flex;gap:10px;align-items:center;margin-top:8px}
.lpr .li{width:34px;height:34px;border-radius:10px;background:#FFF1E8;display:grid;place-items:center;font-size:17px;flex:none}
.lpr.s .li{background:#EFEAFF}
.lpr.a .li{background:#E6F0FF}
.lpr>div{flex:1}
.lt{display:flex;justify-content:space-between;font-size:13px;font-weight:600}
.lt b{font:700 14px var(--num)}
.lpr .pb{height:8px;border-radius:4px;background:#F0F1F5;margin:4px 0 2px;overflow:hidden}
.lpr .pb i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,#FFA36C,var(--or));transition:width .9s var(--spring)}
.lpr.s .pb i{background:linear-gradient(90deg,#A894FF,var(--purple))}
.lpr.a .pb i{background:linear-gradient(90deg,#FF8FB1,#FF4D8D)}
.lpr small{font-size:11px;color:var(--muted)}
.quests{padding:12px 14px;margin-bottom:12px}
.qh{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.chest{width:52px;height:52px;position:relative}
.chest img{width:100%;height:100%;object-fit:contain;filter:grayscale(.6) opacity(.6);transition:filter .4s}
.chest.ready img{filter:none;animation:wiggle2 1.2s ease-in-out infinite}
.chest.ready::after{content:"เปิด!";position:absolute;right:-6px;top:-6px;background:var(--or);color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:8px}
.chest.opened img{filter:grayscale(1) opacity(.35)}
@keyframes wiggle2{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(-10deg) scale(1.08)}80%{transform:rotate(10deg) scale(1.08)}90%{transform:rotate(-5deg)}}
.q{display:flex;align-items:center;gap:10px;width:100%;height:46px;font-size:14px;text-align:left;border-top:1px solid var(--line)}
.qi{width:30px;text-align:center;font-size:18px}
.qt{flex:1}
.qr{font:600 12px var(--num);color:var(--muted)}
.qc{width:24px;height:24px;border-radius:50%;border:2px solid #DADDE5;display:grid;place-items:center;font-size:13px;color:transparent;transition:all .4s var(--spring)}
.q.done .qc{background:var(--green);border-color:var(--green);color:#fff;transform:scale(1.1)}
.q.done .qt{color:var(--muted);text-decoration:line-through}
.qcoins{font-size:12px;color:var(--ink2);padding-top:8px;border-top:1px solid var(--line)}
.mini{display:flex;padding:8px;gap:6px}
.mini button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;border-radius:14px;font-size:13px;font-weight:600}
.mini button:hover{background:#F5F6FA}
.mini span{font-size:24px}
.mini small{font-size:11px;color:var(--muted);font-weight:400}
.fly-ic{position:absolute;left:0;top:0;margin:-12px;font-size:22px;font-style:normal;z-index:95;pointer-events:none}
.popnum{position:absolute;z-index:12;font:800 22px var(--num);white-space:nowrap;color:#fff;-webkit-text-stroke:4px var(--or);paint-order:stroke fill;pointer-events:none}
.popnum.gold{-webkit-text-stroke-color:#E09A00;color:#FFF6C8}
.push{position:absolute;top:44px;left:10px;right:10px;z-index:96;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:20px;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);box-shadow:0 12px 30px rgba(0,0,0,.2);cursor:pointer}
.push .pi{width:36px;height:36px;border-radius:10px;background:var(--blue);display:grid;place-items:center;flex:none}
.push div{flex:1;font-size:13px;line-height:1.35}
.push div b{display:block}
.push div span{color:var(--ink2)}
.push img{width:46px;height:46px;object-fit:contain}
.lvup{position:absolute;inset:0;z-index:85;background:radial-gradient(circle at 50% 40%,#3D6BFF,#14267A);color:#fff;display:flex;flex-direction:column;align-items:center;padding-top:90px;overflow:hidden;animation:fade .3s both}
.lvup .rays{position:absolute;width:900px;height:900px;left:50%;top:40%;margin:-450px;background:repeating-conic-gradient(rgba(255,255,255,.12) 0 8deg,transparent 8deg 18deg);animation:spin 20s linear infinite;border-radius:50%}
.lv-t{position:relative;font:800 46px var(--num);letter-spacing:.04em;color:#FFE27A;text-shadow:0 4px 0 rgba(0,0,0,.25);animation:pop .7s var(--spring) both}
.lv-n{position:relative;font-size:26px;opacity:.9;margin-top:4px}
.lv-n b{color:#FFE27A;font-size:34px}
.lv-stage{position:relative;width:390px;height:230px}
.lv-tier{position:relative;text-align:center;font-size:22px;font-weight:700;background:rgba(255,255,255,.15);padding:10px 20px;border-radius:18px;animation:rise .6s var(--ease) .4s both}
.lv-tier small{display:block;font-size:13px;font-weight:500;opacity:.9}
.lv-bonus{position:relative;display:flex;align-items:center;gap:6px;margin-top:10px;font-weight:700;animation:rise .6s var(--ease) .6s both}
.lvup .btn{position:absolute;bottom:44px}
.chest-ov .ch-img{position:relative;width:180px;margin-top:40px}
.ch-card{position:relative;margin-top:10px;background:#fff;color:var(--ink);border-radius:22px;padding:14px 20px;text-align:center;opacity:0;transform:scale(.4) rotate(-10deg);transition:all .7s var(--spring)}
.ch-card.on{opacity:1;transform:none}
.ch-card img{width:110px;margin:0 auto}
.ch-card b{display:block}
.ch-card small{color:var(--muted)}
.shd{text-align:center}
.shd img{width:84px;margin:0 auto 4px;animation:bob 2.4s ease-in-out infinite}
.shd p{font-size:14px;color:var(--ink2);line-height:1.6}
.shd-o{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.opt2{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 16px;border-radius:16px;background:#FFF3EC;text-align:left;box-shadow:0 0 0 2px var(--or) inset}
.opt2+.opt2{background:#F3F4F7;box-shadow:none}
.opt2 span{font-size:12px;color:var(--ink2)}
.opt2.dis{opacity:.45}
.trow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);opacity:.55}
.trow.got{opacity:1}
.trow>div{flex:1;font-size:14px}
.trow small{display:block;font-size:11px;color:var(--muted);font-weight:400}
.trow .num{text-align:right;font-size:15px}
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.wi{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:16px;background:#F5F6FA;font-size:12px}
.wi img{width:72px;height:72px;object-fit:contain}
.wi.on{background:#FFF0E8;box-shadow:0 0 0 2px var(--or) inset}

/* avatar with tier aura ring */
.avt{position:relative;width:42px;height:42px;flex:none;border-radius:50%;padding:2px;display:inline-block;background:#E6E8EE}
.avt img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:#DDE5F5;position:relative;display:block}
.avt.hop{animation:hop .6s var(--spring)}
.avt.t-sprout{background:linear-gradient(135deg,#B8F0A8,#5CC46B)}
.avt.t-vibrant{background:linear-gradient(135deg,#9BE0FF,#3D9BFF);box-shadow:0 0 8px rgba(80,170,255,.6)}
.avt.t-guardian{background:linear-gradient(135deg,#7FA2FF,#1F4BD8);box-shadow:0 0 10px rgba(40,90,255,.6)}
.avt.t-champion{background:conic-gradient(#FFD54F,#FF9F1C,#FFE98A,#FFB300,#FFD54F);box-shadow:0 0 12px rgba(255,170,30,.7)}
.avt.t-eternal{background:conic-gradient(#FFF3B0,#FFD54F,#FFFFFF,#FFC83D,#FFF3B0);box-shadow:0 0 16px rgba(255,220,100,.95);animation:glow2 2s ease-in-out infinite}
@keyframes glow2{50%{box-shadow:0 0 26px rgba(255,220,100,1)}}
.avt.t-champion::after,.avt.t-eternal::after{content:"👑";position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-size:14px}
.avt.t-eternal::after{content:"🌟"}

/* Hero Hall */
.legend{padding:10px 14px;margin-bottom:12px;background:linear-gradient(120deg,#FFF7DA,#FFEFC2)}
.lg{display:flex;gap:10px;align-items:center}
.lg b{font-size:15px}
.lg small{display:block;font-size:12px;color:#8A5300}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:10px;margin:22px 0 6px}
.pd{display:flex;flex-direction:column;align-items:center;width:104px;font-size:13px;text-align:center}
.pd .avt{width:60px;height:60px;margin-bottom:6px}
.pd.p1 .avt{width:74px;height:74px}
.pd .avt.me{outline:3px solid var(--or);outline-offset:2px}
.pd b{font-size:13px}
.pd span{font-size:14px;color:var(--or)}
.blk{width:100%;margin-top:6px;border-radius:14px 14px 0 0;display:grid;place-items:center;color:#fff;font:800 28px var(--num);transform-origin:bottom;animation:grow .8s var(--spring) both}
.blk em{font-style:normal}
.p1 .blk{height:96px;background:linear-gradient(180deg,#FFCF4D,#F2A516)}
.p2 .blk{height:70px;background:linear-gradient(180deg,#C9D2E2,#9AA6BD);animation-delay:.1s}
.p3 .blk{height:54px;background:linear-gradient(180deg,#E8A877,#C47A3C);animation-delay:.2s}
@keyframes grow{from{transform:scaleY(0)}}
.zone{font-size:12px;font-weight:600;padding:6px 10px;border-radius:10px;margin:8px 0}
.zone.up{background:#E6F7EE;color:var(--green)}
.zone.down{background:#FDECEE;color:var(--red)}
.hl{padding:4px 12px}
.hr2{display:flex;align-items:center;gap:10px;min-height:62px;position:relative}
.hr2+.hr2{border-top:1px solid var(--line)}
.hr2 .rk{width:20px;text-align:center;color:var(--muted);font-size:16px}
.hr2 .nm{flex:1;min-width:0}
.hr2 .nm b{display:block;font-size:14px}
.hr2 .nm b small{font:600 11px var(--num);color:var(--muted)}
.hr2 .nm span{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr2 .nm i{display:block;height:4px;border-radius:2px;margin-top:4px;background:linear-gradient(90deg,#FFB38A,var(--or));transition:width 1s var(--ease)}
.hr2 .v{font-size:16px;min-width:46px;text-align:right}
.hr2.me{background:#FFF5EF;margin:0 -12px;padding:0 12px}
.hr2.away{opacity:.55}
.hr2.away .avt img{filter:grayscale(1)}
.hr2.dz{box-shadow:0 -2px 0 rgba(240,67,90,.25)}
.send{width:40px;height:40px;border-radius:50%;background:#FFF0F5;font-size:18px;transition:all .35s var(--spring)}
.send:hover{transform:scale(1.12)}
.send.on{background:#FFD6E5}
.hnote{font-size:12px;color:var(--muted);line-height:1.5;margin:12px 4px}

/* Treasury */
.tre-h{display:flex;align-items:center;gap:10px;padding:14px 16px;margin-bottom:12px;background:linear-gradient(120deg,#FFF6DA,#FFE9D2)}
.tre-h div{flex:1;font-size:12px;color:var(--ink2)}
.tre-h b{display:block;font-size:15px;color:var(--ink);margin-bottom:2px}
.tre-h img{width:70px}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ti{text-align:left;overflow:hidden;padding-bottom:10px}
.ti .ph2{height:120px;margin-bottom:8px}
.ph2{position:relative;display:grid;place-items:center;background:linear-gradient(160deg,#EEF3FF,#FFF4E6)}
.ph2.k-skin{background:linear-gradient(160deg,#E2ECFF,#F3E8FF)}
.ph2.k-coupon{background:linear-gradient(160deg,#E8F7EF,#E6F0FF)}
.ph2 img{max-width:76%;max-height:88%;object-fit:contain;transition:transform .5s var(--spring)}
.ti:hover .ph2 img{transform:scale(1.08) rotate(-3deg)}
.ti b{display:block;font-size:14px;padding:0 12px}
.pr2{display:flex;align-items:center;gap:4px;padding:2px 12px 0;font:700 15px var(--num)}
.ti.own .pr2{color:var(--green);font-family:var(--f);font-size:13px}
.ti.lock .ph2 img{filter:grayscale(1) brightness(.8) opacity(.5)}
.lk{position:absolute;left:8px;right:8px;bottom:8px;background:rgba(23,26,44,.85);color:#fff;font-size:12px;font-weight:700;border-radius:10px;padding:4px 8px;text-align:center}
.lk small{display:block;font-weight:500;font-size:10px;opacity:.8}
.buy{text-align:center}
.buy h4{margin-top:12px}
.buy p{font-size:14px;color:var(--ink2)}

/* Share editor */
.pg.share{background:#101322;color:#fff}
.sh-top{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;color:#fff;padding-bottom:8px}
.sh-top .ib{color:#fff}
.sh-top h1{font-size:19px}
.sv-btn{height:38px;padding:0 16px;border-radius:19px;background:var(--or);color:#fff;font-weight:600;font-size:14px}
.frame{position:relative;width:270px;height:480px;margin:0 auto;border-radius:18px;overflow:hidden;background:#222;touch-action:none;box-shadow:0 20px 50px rgba(0,0,0,.5);cursor:grab}
.frame.drag{cursor:grabbing}
.fph{position:absolute;max-width:none;pointer-events:none;user-select:none}
.fov{position:absolute;transform-origin:50% 50%;cursor:move}
.frame:not(.m-ph) .fov{outline:1.5px dashed rgba(255,255,255,.55);outline-offset:4px;border-radius:6px}
.frame.m-ph .fov{pointer-events:none}
.fhint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);white-space:nowrap;background:rgba(0,0,0,.55);font-size:11px;padding:5px 10px;border-radius:12px;transition:opacity .5s;pointer-events:none}
.fhint.off{opacity:0}
.shc{padding:12px 14px 0;display:flex;flex-direction:column;gap:10px}
.shrow{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none}
.upl{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:56px;height:56px;border-radius:14px;background:#262A40;font-size:18px;cursor:pointer}
.upl span{font-size:10px}
.thumb{flex:none;width:56px;height:56px;border-radius:14px;background-size:cover;background-position:center;border:2px solid transparent;transition:transform .3s var(--spring)}
.thumb.on{border-color:var(--or);transform:scale(1.06)}
.tp{flex:none;height:34px;padding:0 12px;border-radius:17px;background:#262A40;color:#fff;font-size:13px}
.tp.on{background:#fff;color:var(--ink);font-weight:600}
.cl2{flex:none;width:28px;height:28px;border-radius:50%;box-shadow:0 0 0 2px #262A40;transition:transform .3s var(--spring)}
.cl2.on{box-shadow:0 0 0 2px #101322,0 0 0 4px #fff;transform:scale(1.1)}
.mtg{display:flex;background:#262A40;border-radius:17px;padding:3px;flex:none}
.mtg button{height:28px;padding:0 10px;border-radius:14px;font-size:12px;color:#fff}
.mtg button.on{background:var(--or)}
#zoom{flex:1;accent-color:var(--or);min-width:60px}

/* ── code-driven poses for the ORIGINAL ELi drawings (no redrawn art) ── */
.eli-pz{position:absolute;inset:0;transform-origin:50% 100%;transition:transform .24s cubic-bezier(.34,1.56,.64,1)}
.eli-m[data-pz=""] .eli-pz{animation:breath 3.2s ease-in-out infinite}
@keyframes breath{50%{transform:scale(1.025,.975)}}
.eli-m[data-pz=stretch] .eli-pz{transform:scale(.92,1.1)}
.eli-m[data-pz=lean] .eli-pz{transform:rotate(-8deg)}
.eli-m[data-pz=low] .eli-pz{transform:scale(1.1,.84)}
.eli-m[data-pz=crouch] .eli-pz{transform:scale(1.14,.8) rotate(-4deg)}
.eli-m[data-pz=up] .eli-pz{transform:translateY(-8px) scale(1.03)}
.eli-m[data-pz=star] .eli-pz{transform:scale(1.1) rotate(-5deg)}
.eli-m[data-pz=proud] .eli-pz{transform:scale(1.06)}
.eli-m[data-pz=hug] .eli-pz{transform:scale(.95,1.04)}
.eli-m[data-pz=tiltL] .eli-pz{transform:rotate(-10deg)}
.eli-m[data-pz=tiltR] .eli-pz{transform:rotate(10deg)}
.eli-m[data-pz=giggle] .eli-pz{animation:giggle .16s ease-in-out infinite alternate}
@keyframes giggle{from{transform:rotate(-4deg) translateX(-2px)}to{transform:rotate(4deg) translateX(2px) scale(1.02,.98)}}
.eli-m[data-pz=sleepy] .eli-pz{animation:sleepy 3.6s ease-in-out infinite}
@keyframes sleepy{0%,100%{transform:rotate(-2deg) scale(1,1)}50%{transform:rotate(3deg) scale(1.02,.96)}}
.eli-m[data-pz=sad] .eli-pz{animation:sad 2.8s ease-in-out infinite}
@keyframes sad{0%,100%{transform:scale(.97,.97)}50%{transform:scale(.96,.94) translateY(2px)}}
.eli-m.mo-run .eli-pz{animation:runhop var(--rs,.36s) ease-in-out infinite}
@keyframes runhop{0%,100%{transform:translateY(0) rotate(-5deg) scale(1.05,.95)}50%{transform:translateY(-16px) rotate(-11deg) scale(.97,1.04)}}
.drop.hover{animation:medalf 1.8s ease-in-out infinite}
@keyframes medalf{50%{translate:0 -10px;rotate:8deg}}
.wth{display:block;width:100%;height:72px;border-radius:12px;background-size:cover;background-position:center}
.ph2.k-theme img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:cover}

.sc-in{position:absolute;left:50%;top:0;width:390px;height:844px;transform-origin:50% 0;transform:translateX(-50%) scale(var(--ss,1))}
.short .frame{transform:scale(.8);transform-origin:50% 0;margin-bottom:-96px}