@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=IM+Fell+English:ital@0;1&display=swap');
:root{--bg:#030208;--ink:#07040f;--blurple:#5b34e6;--blurple-d:#2a1468;--violet:#9b7bff;--green:#7eff5c;--green-l:#b4ff78;--bone:#ece8f6;--bone-d:#a69fbf;--bone-dd:#6c6585;--red:#ff3b5c;
--glass:rgba(6,3,14,.78);--line:rgba(91,52,230,.45);--disp:'Cinzel','Trajan Pro','Palatino Linotype',Georgia,serif;--body:'IM Fell English',Georgia,'Times New Roman',serif;
--shadow:0 0 2px #000,0 1px 3px #000,0 0 14px rgba(0,0,0,.9);
--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--bone);font-family:var(--body);overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#game{position:fixed;inset:0;width:100vw;height:100vh;display:block;background:var(--bg);touch-action:none}
#ui{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:2}
#ui button,#ui a,#ui input,#ui .pe{pointer-events:auto}
.glass{background:var(--glass);border:1px solid var(--line);border-radius:4px;box-shadow:0 10px 40px rgba(0,0,0,.7),inset 0 0 24px rgba(91,52,230,.1)}
/* buttons (shared by pause + fallback screens) */
.btn{--bf:linear-gradient(180deg,rgba(26,14,58,.96),rgba(8,4,20,.98));--bl:rgba(166,159,191,.28);position:relative;isolation:isolate;font-family:var(--disp);font-weight:700;letter-spacing:.18em;text-transform:uppercase;min-height:48px;min-width:44px;padding:12px 26px;border:0;background:var(--bl);color:var(--bone);cursor:pointer;font-size:14px;transition:transform .1s,filter .2s;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%)}
.btn::before{content:'';position:absolute;inset:1px;z-index:-1;background:var(--bf);clip-path:polygon(11.5px 0,calc(100% - 11.5px) 0,100% 50%,calc(100% - 11.5px) 100%,11.5px 100%,0 50%)}
.btn:hover{filter:brightness(1.25)}
.btn:active{transform:scale(.97)}
.btn-main{--bl:linear-gradient(90deg,rgba(126,255,92,.35),rgba(180,255,120,.95),rgba(126,255,92,.35));--bf:radial-gradient(ellipse at 50% 120%,rgba(126,255,92,.22),transparent 60%),linear-gradient(180deg,#24104f,#0b0520);color:var(--green-l);text-shadow:0 0 12px rgba(126,255,92,.7)}
.btn-ghost{--bf:rgba(6,3,14,.96);--bl:rgba(166,159,191,.2);color:var(--bone-d)}
.btn-danger{--bf:rgba(6,3,14,.96);--bl:rgba(255,59,92,.28);color:#d9a3b0;font-size:12px}
/* fallback screens */
.fb-screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:24px 16px calc(48px + var(--sab));gap:14px;text-align:center}
.fb-title{font-family:var(--disp);font-weight:900;font-size:clamp(30px,9vw,64px);letter-spacing:.12em;margin:0;color:var(--bone);text-shadow:0 0 24px rgba(91,52,230,.9),0 0 2px #000}
.fb-sub{margin:0 0 8px;color:var(--bone-d);font-size:17px}

/* ================= HUD ================= */
.hud{position:absolute;inset:0;padding:calc(10px + var(--sat)) calc(12px + var(--sar)) calc(10px + var(--sab)) calc(12px + var(--sal))}
.h-edge{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(3,2,8,.72) 0,rgba(3,2,8,0) 120px),linear-gradient(0deg,rgba(3,2,8,.6) 0,rgba(3,2,8,0) 120px)}
.h-hurt,.h-flash{position:absolute;inset:0;pointer-events:none;opacity:0}
.h-hurt{box-shadow:inset 0 0 90px 10px rgba(200,20,60,.55)}
.h-hurt.on{animation:hurt .45s ease-out}
.hud.low .h-hurt{animation:lowpulse 1.1s ease-in-out infinite}
.h-flash{--fc:var(--green);background:radial-gradient(circle at 50% 50%,transparent 30%,color-mix(in srgb,var(--fc) 35%,transparent) 100%)}
.h-flash.on{animation:flash .7s ease-out}
.h-top{position:relative;display:flex;align-items:flex-start;gap:10px}
/* level + health (top left) */
.h-lv{position:relative;width:min(46vw,250px);transform-origin:0 50%}
.lv-k{font-family:var(--disp);font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:var(--bone-d);text-shadow:var(--shadow);line-height:1}
.lv-v{font-family:var(--disp);font-weight:900;font-size:40px;line-height:.95;color:var(--bone);letter-spacing:.02em;text-shadow:0 0 18px rgba(126,255,92,.35),0 0 3px #000,0 2px 6px #000;font-variant-numeric:tabular-nums;transform-origin:0 70%;white-space:nowrap}
.h-lv.punch .lv-v{animation:lvpunch .5s cubic-bezier(.2,1.6,.4,1)}
.h-lv.punch.big .lv-v{animation:lvpunchbig .75s cubic-bezier(.2,1.6,.4,1)}
.h-hp{position:relative;height:5px;margin-top:6px;background:rgba(236,232,246,.08);border-radius:1px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.7)}
.h-hp i{position:absolute;inset:0;transform-origin:0 50%}
.hp-ghost{background:rgba(255,240,245,.75);transition:transform .5s .25s ease-out}
.hp-f{background:linear-gradient(90deg,#3c9a2a,var(--green) 60%,var(--green-l));box-shadow:0 0 10px rgba(126,255,92,.7);transition:transform .12s}
.hud.low .hp-f{background:linear-gradient(90deg,#7a0d22,var(--red));box-shadow:0 0 10px rgba(255,59,92,.8)}
.h-sub{display:flex;align-items:center;gap:8px;margin-top:4px}
.hp-t{font-family:var(--disp);font-size:10px;letter-spacing:.06em;color:var(--bone-d);text-shadow:var(--shadow);white-space:nowrap;font-variant-numeric:tabular-nums}
.h-xp{flex:1;height:2px;background:rgba(236,232,246,.08);overflow:hidden}
.h-xp i{display:block;height:100%;background:var(--bone);opacity:.75;transform-origin:0 50%;transition:transform .15s}
/* depth + essence (top right) */
.h-right{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:7px;min-width:0}
.h-depth{text-align:right;width:min(36vw,190px)}
.h-depth.punch{animation:dpunch .8s ease-out}
.d-realm{font-family:var(--disp);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:#a993ff;text-shadow:var(--shadow);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-n{font-family:var(--disp);line-height:1;text-shadow:var(--shadow)}
.d-n span{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--bone-d);margin-right:6px}
.d-n b{font-size:22px;font-weight:900;color:var(--bone)}
.d-bar{height:3px;margin-top:5px;background:rgba(91,52,230,.18);overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.6)}
.d-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--blurple-d),var(--blurple),#b69cff);box-shadow:0 0 8px var(--blurple);transform-origin:100% 50%;transform:scaleX(0);transition:transform .25s}
.h-ess{display:flex;gap:8px;font-family:var(--disp);font-size:11px;font-weight:700;text-shadow:var(--shadow)}
.ess-i{display:flex;align-items:center;gap:3px;color:var(--bone)}
.ess-i i{width:6px;height:6px;transform:rotate(45deg);background:var(--ec);box-shadow:0 0 6px var(--ec)}
.ess-i.zero{opacity:.32}
.ess-i b{display:inline-block;font-variant-numeric:lining-nums}
.ess-i.tick b{animation:tick .35s ease-out}
.h-pause{flex:0 0 36px;width:36px;height:36px;margin:-2px -4px 0 0;padding:0;display:flex;gap:5px;align-items:center;justify-content:center;background:transparent;border:1px solid rgba(166,159,191,.22);border-radius:50%;cursor:pointer}
.h-pause i{display:block;width:3px;height:12px;background:var(--bone-d)}
.h-pause:active{background:rgba(91,52,230,.3)}
/* hunger line */
.h-hunger{position:relative;margin-top:10px;display:flex;align-items:baseline;gap:7px;max-width:min(100%,520px);font-size:13px;color:var(--bone-d);text-shadow:var(--shadow);padding-bottom:5px;white-space:nowrap}
.hg-k{font-family:var(--disp);font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--green)}
.hg-t{font-style:italic;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hg-n{font-family:var(--disp);font-size:11px;color:var(--bone)}
.hg-bar{position:absolute;left:0;bottom:0;width:min(60%,240px);height:1px;background:rgba(126,255,92,.12)}
.hg-bar i{display:block;height:100%;background:var(--green);box-shadow:0 0 6px var(--green);transform-origin:0 50%;transform:scaleX(0);transition:transform .3s}
.h-hunger.done .hg-t{color:var(--green-l)}
.h-hunger.done{animation:fed 1.2s ease-out}
/* boss */
.h-boss{position:absolute;left:50%;top:calc(96px + var(--sat));transform:translateX(-50%);width:min(70vw,420px);text-align:center;opacity:0;transition:opacity .4s}
.h-boss.on{opacity:1}
.bs-n{font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:#f3d9e0;text-shadow:0 0 12px rgba(255,59,92,.7),var(--shadow)}
.bs-bar{height:4px;margin-top:4px;background:rgba(255,59,92,.12);box-shadow:0 0 0 1px rgba(0,0,0,.8)}
.bs-bar i{display:block;height:100%;background:linear-gradient(90deg,#6b0a20,var(--red));box-shadow:0 0 10px rgba(255,59,92,.7);transform-origin:50% 50%;transition:transform .2s}
/* the god: stage + belly gauge (top centre) */
.h-god{--gc:var(--green);position:absolute;left:50%;top:calc(126px + var(--sat));transform:translateX(-50%);width:min(64vw,340px);text-align:center;pointer-events:auto;background:none;border:0;padding:6px 0;margin:0;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.gd-row{display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--disp);text-shadow:var(--shadow)}
.gd-st{font-size:12px;font-weight:900;letter-spacing:.32em;text-transform:uppercase;color:var(--bone);padding-left:.32em}
.gd-pips{display:flex;gap:4px}
.gd-pips i{width:6px;height:6px;transform:rotate(45deg);background:rgba(236,232,246,.14);box-shadow:0 0 0 1px rgba(0,0,0,.7)}
.gd-pips i.on{background:var(--green-l);box-shadow:0 0 8px var(--green)}
.gd-feed{display:none;font-size:11px;font-weight:900;letter-spacing:.24em;text-transform:uppercase;color:#ffd0d8;text-shadow:0 0 10px var(--red),var(--shadow)}
.gd-belly{position:relative;height:7px;margin-top:5px;background:rgba(10,4,24,.8);box-shadow:0 0 0 1px rgba(126,255,92,.3),0 0 0 2px rgba(0,0,0,.8);overflow:hidden}
.gd-belly i{position:absolute;inset:0;transform-origin:0 50%;background:linear-gradient(90deg,#1f6b12,var(--green) 70%,#e9ffd9);box-shadow:0 0 12px var(--green);transition:transform .25s}
.gd-next{height:2px;margin-top:3px;background:rgba(91,52,230,.18)}
.gd-next i{display:block;height:100%;transform-origin:0 50%;background:linear-gradient(90deg,var(--blurple),var(--violet));box-shadow:0 0 6px var(--violet);transition:transform .4s}
.h-god.starving .gd-feed{display:inline}
.h-god.starving .gd-st{color:#ffd0d8}
.h-god.starving .gd-belly{animation:starve .7s ease-in-out infinite alternate}
.h-god.starving .gd-belly i{background:linear-gradient(90deg,#6b0a20,var(--red));box-shadow:0 0 12px var(--red)}
.h-god.frenzy .gd-belly{box-shadow:0 0 0 1px var(--green-l),0 0 18px var(--green),0 0 0 2px rgba(0,0,0,.8)}
.h-god.up{animation:godup 1.2s cubic-bezier(.2,1.4,.4,1)}
.h-boss{top:calc(166px + var(--sat))}
/* kill chain (right edge) */
.h-chain{position:absolute;right:calc(14px + var(--sar));top:36%;text-align:right;font-family:var(--disp);opacity:0;transition:opacity .3s;pointer-events:none}
.h-chain.on{opacity:1}
.h-chain b{display:block;font-size:28px;font-weight:900;line-height:1;color:#fff1b8;text-shadow:0 0 14px rgba(255,210,92,.8),var(--shadow)}
.h-chain span{font-size:9px;letter-spacing:.4em;text-transform:uppercase;color:var(--bone-d);text-shadow:var(--shadow)}
.h-chain.pop b{animation:lvpunch .4s cubic-bezier(.2,1.6,.4,1)}
/* banners: surges, frenzy, stage */
.h-banner{position:absolute;left:50%;top:64%;transform:translate(-50%,-50%);white-space:nowrap;font-family:var(--disp);font-weight:900;font-size:clamp(18px,5.4vw,32px);letter-spacing:.2em;text-transform:uppercase;color:var(--bone);text-shadow:0 0 20px rgba(91,52,230,1),var(--shadow);pointer-events:none;animation:banner 2.2s cubic-bezier(.15,.9,.3,1) forwards}
.h-banner.s-frenzy{color:var(--green-l);text-shadow:0 0 22px var(--green),0 0 50px rgba(126,255,92,.6),var(--shadow)}
.h-banner.stage{top:41%;width:94vw;white-space:normal;text-align:center;line-height:1.1;letter-spacing:.12em;font-size:clamp(24px,6.5vw,46px);color:#e9ffd9;text-shadow:0 0 24px var(--green),0 0 70px var(--blurple),var(--shadow);animation:burstbig 2.2s cubic-bezier(.15,.9,.3,1) forwards}
/* socket level + offering value */
.mv-lv{position:absolute;left:50%;bottom:-25px;transform:translateX(-50%);font-family:var(--disp);font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--bone);white-space:nowrap;text-shadow:var(--shadow)}
.mv-val{position:absolute;right:-12px;top:-8px;min-width:22px;padding:1px 5px;border-radius:9px;font-family:var(--disp);font-size:10px;font-weight:900;color:#06030c;background:var(--green-l);box-shadow:0 0 8px rgba(126,255,92,.7);white-space:nowrap}
.mv.rich .mv-val{background:#fff1b8;box-shadow:0 0 12px rgba(255,210,92,.9)}
.mv.hungry:not(.empty):not(.armed):not(.holding){animation:hungry 0.9s ease-in-out infinite alternate}
.mv.up{animation:mvup .45s cubic-bezier(.2,1.6,.4,1)}
.hud .movebar{bottom:calc(30px + var(--sab))}
.sac-lv{font-size:11px;color:var(--bone-d);letter-spacing:.1em}
.sac-st{margin-top:3px;font-size:12px;color:var(--violet)}
.sac-up{color:var(--green-l)}
/* story */
.story{position:absolute;left:50%;top:calc(24% + var(--sat));transform:translate(-50%,6px);width:min(86vw,560px);text-align:center;font-family:var(--body);font-style:italic;font-size:clamp(17px,4.6vw,24px);line-height:1.3;color:var(--bone);text-shadow:0 0 18px rgba(91,52,230,1),0 0 4px #000,0 0 2px #000;opacity:0;transition:opacity 1.6s,transform 1.6s;pointer-events:none;letter-spacing:.01em}
.story.show{opacity:.95;transform:translate(-50%,0);transition:opacity .6s,transform .6s}
/* level burst */
.h-fx{position:absolute;inset:0;pointer-events:none}
.lv-burst{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);text-align:center;font-family:var(--disp);white-space:nowrap;opacity:0;pointer-events:none}
.lv-burst b{display:block;font-weight:900;font-size:30px;line-height:1;color:var(--green-l);text-shadow:0 0 14px rgba(126,255,92,.9),0 0 40px rgba(126,255,92,.5),0 2px 4px #000}
.lv-burst span{display:block;font-size:10px;letter-spacing:.5em;text-transform:uppercase;color:var(--bone);text-shadow:var(--shadow);margin-top:3px;padding-left:.5em}
.lv-burst.t1 b{font-size:40px}
.lv-burst.t2 b{font-size:56px}
.lv-burst.t2 span,.lv-burst.t3 span,.lv-burst.t4 span{font-size:13px}
.lv-burst.t3 b{font-size:72px;color:#e9ffd9;text-shadow:0 0 18px var(--green),0 0 60px rgba(126,255,92,.7),0 0 120px rgba(91,52,230,.8),0 3px 6px #000}
.lv-burst.t4 b{font-size:92px;color:#fff;text-shadow:0 0 20px var(--green-l),0 0 70px var(--green),0 0 140px var(--blurple),0 3px 6px #000}
.lv-burst.go{animation:burst 1.8s cubic-bezier(.15,.9,.3,1) forwards}
.lv-burst.t3.go,.lv-burst.t4.go{animation:burstbig 1.8s cubic-bezier(.15,.9,.3,1) forwards}
/* sacrifice orb */
.sac-orb{position:absolute;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 30px var(--ec),0 0 60px var(--ec);animation:swallowfly .62s cubic-bezier(.6,0,.9,.5) forwards}
.sac-orb .mv-img{width:48px;height:48px}
/* ================= move sockets ================= */
.movebar{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(14px + var(--sab));display:flex;gap:18px;align-items:flex-end}
.movebar.swallow{animation:swallow .6s}
.mv{--ec:#5b34e6;--hold:0deg;position:relative;width:58px;height:58px;border-radius:50%;border:0;background:radial-gradient(circle at 50% 45%,rgba(30,14,70,.85),rgba(3,2,8,.92) 70%);box-shadow:0 0 0 1px color-mix(in srgb,var(--ec) 55%,transparent),0 0 16px color-mix(in srgb,var(--ec) 30%,transparent),inset 0 0 14px rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;color:var(--bone);touch-action:none;transition:transform .15s}
.mv::before{content:'';position:absolute;inset:-5px;border-radius:50%;border:1px solid color-mix(in srgb,var(--ec) 22%,transparent);pointer-events:none}
.mv-ring{position:absolute;inset:-5px;border-radius:50%;pointer-events:none;background:conic-gradient(from 0deg,var(--red) 0,#ff9db0 var(--hold),transparent var(--hold));-webkit-mask:radial-gradient(circle,transparent 31px,#000 32px);mask:radial-gradient(circle,transparent 31px,#000 32px);filter:drop-shadow(0 0 6px var(--red))}
.mv.empty{background:rgba(3,2,8,.35);box-shadow:inset 0 0 0 1px rgba(91,52,230,.22);cursor:default}
.mv.empty::before{border-style:dashed;border-color:rgba(91,52,230,.18)}
.mv-img{width:42px;height:42px;pointer-events:none;-webkit-user-drag:none}
.mv-dot{display:block;width:30px;height:30px;border-radius:50%;box-shadow:0 0 12px var(--ec,#9b7bff)}
.bless-dot{background:radial-gradient(circle at 40% 35%,#fff 0,var(--ec,var(--green)) 30%,#05020c 100%)}
.mv-pips{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);display:flex;gap:3px}
.mv-pips i{width:4px;height:4px;transform:rotate(45deg);background:rgba(236,232,246,.15)}
.mv-pips i.on{background:var(--ec);box-shadow:0 0 4px var(--ec)}
.mv-key{position:absolute;left:-2px;top:-4px;font-family:var(--disp);font-size:9px;color:var(--bone-dd)}
.mv-name{position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);font-family:var(--disp);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-d);white-space:nowrap;text-shadow:var(--shadow);opacity:0;transition:opacity .2s}
.mv:hover .mv-name{opacity:1}
.movebar.has-armed .mv-name,.hud:has(.sac-tip.show) .mv-name{opacity:0}
.mv.holding,.mv.armed{transform:scale(1.08)}
.mv.armed{box-shadow:0 0 0 1.5px var(--red),0 0 24px rgba(255,59,92,.7),0 0 50px color-mix(in srgb,var(--ec) 50%,transparent),inset 0 0 14px rgba(0,0,0,.9);animation:arm .55s ease-in-out infinite alternate}
.mv.armed .mv-ring{--hold:360deg;opacity:.55}
.mv.holding{animation:shake .12s linear infinite}
/* sacrifice tooltip: what the god gains */
.sac-tip{--ec:#9b7bff;position:absolute;left:50%;bottom:calc(98px + var(--sab));transform:translate(-50%,8px);width:min(88vw,330px);padding:10px 14px 9px;text-align:center;isolation:isolate;background:linear-gradient(180deg,rgba(255,59,92,.55),color-mix(in srgb,var(--ec) 45%,transparent));clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);opacity:0;transition:opacity .18s,transform .18s;pointer-events:none}
.sac-tip::before{content:'';position:absolute;inset:1px;z-index:-1;background:radial-gradient(ellipse at 50% 0,rgba(255,59,92,.16),transparent 70%),linear-gradient(180deg,#120512,#040209);clip-path:polygon(11.5px 0,calc(100% - 11.5px) 0,100% 11.5px,100% calc(100% - 11.5px),calc(100% - 11.5px) 100%,11.5px 100%,0 calc(100% - 11.5px),0 11.5px)}
.sac-tip.show{opacity:1;transform:translate(-50%,0)}
.sac-h{font-family:var(--disp);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#ffc9d3}
.sac-h b{font-weight:900}
.sac-g{margin-top:4px;font-size:14px;color:var(--bone)}
.sac-g i{color:var(--bone-d)}
.sac-k{font-family:var(--disp);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--green)}
.sac-n{display:flex;justify-content:center;gap:14px;margin-top:4px;font-family:var(--disp);font-size:12px;font-weight:700;color:var(--green-l)}
.sac-how{margin-top:5px;font-size:11px;font-style:italic;color:var(--bone-dd)}
/* ================= overlays ================= */
.overlay{position:absolute;inset:0;pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(16px + var(--sat)) calc(16px + var(--sar)) calc(16px + var(--sab)) calc(16px + var(--sal));background:radial-gradient(ellipse 80% 60% at 50% 45%,rgba(18,7,42,.78),rgba(1,0,4,.95));animation:fadein .3s;overflow-y:auto}
.pick-top{text-align:center;margin-bottom:18px}
.pick-k{font-family:var(--disp);font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:#a993ff;padding-left:.4em}
.pick-h{font-family:var(--disp);font-weight:900;font-size:clamp(28px,8vw,44px);letter-spacing:.14em;text-transform:uppercase;line-height:1.1;margin-top:4px;color:var(--bone);text-shadow:0 0 30px rgba(91,52,230,.9),0 0 2px #000}
.pick-h::after{content:'';display:block;width:120px;height:1px;margin:10px auto 0;background:linear-gradient(90deg,transparent,rgba(126,255,92,.7),transparent)}
.pick-sub{color:var(--bone-d);margin-top:8px;font-style:italic;font-size:16px}
.cards{display:flex;gap:16px;width:100%;max-width:860px;justify-content:center}
.card{--ec:#5b34e6;position:relative;flex:1 1 0;min-width:0;max-width:250px;min-height:300px;padding:26px 16px 22px;display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer;color:var(--bone);font-family:var(--body);text-align:center;border:0;
background:radial-gradient(ellipse 90% 55% at 50% 22%,color-mix(in srgb,var(--ec) 16%,transparent),transparent 70%),linear-gradient(180deg,#0e0720,#050210 70%,#030108);
clip-path:polygon(50% 0,100% 7%,100% 93%,50% 100%,0 93%,0 7%);animation:cardin .45s cubic-bezier(.2,1.2,.4,1) both;transition:transform .15s,filter .15s}
.card::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,color-mix(in srgb,var(--ec) 70%,transparent),rgba(91,52,230,.25) 50%,color-mix(in srgb,var(--ec) 50%,transparent));clip-path:polygon(50% 0,100% 7%,100% 93%,50% 100%,0 93%,0 7%,0 7%,1px calc(7% + 1px),1px calc(93% - 1px),50% calc(100% - 1.5px),calc(100% - 1px) calc(93% - 1px),calc(100% - 1px) calc(7% + 1px),50% 1.5px,1px calc(7% + 1px),0 7%)}
.card::after{content:'';position:absolute;left:50%;top:calc(7% + 8px);width:6px;height:6px;margin-left:-3px;transform:rotate(45deg);background:var(--ec);box-shadow:0 0 8px var(--ec)}
.card:hover,.card:focus-visible{transform:translateY(-4px);filter:brightness(1.18) drop-shadow(0 0 16px color-mix(in srgb,var(--ec) 45%,transparent));outline:none}
.card:active{transform:scale(.98)}
.card-ic{position:relative;width:96px;height:96px;margin-top:10px;display:flex;align-items:center;justify-content:center;flex:none}
.card-ic::before{content:'';position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--ec) 35%,transparent),transparent 65%);animation:breathe 3s ease-in-out infinite}
.card-ic .mv-img{position:relative;width:88px;height:88px}
.card-ic .mv-dot{position:relative;width:56px;height:56px}
.card-tx{display:flex;flex-direction:column;gap:6px;align-items:center}
.card-tag{font-family:var(--disp);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--green)}
.card-tag em{font-style:normal;color:var(--bone-dd)}
.card-n{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:.04em;color:var(--ec);text-shadow:0 0 14px color-mix(in srgb,var(--ec) 50%,transparent)}
.card-d{font-size:15px;color:var(--bone-d);line-height:1.3}
.card-key{position:absolute;bottom:calc(7% + 6px);left:50%;transform:translateX(-50%);font-family:var(--disp);font-size:10px;color:var(--bone-dd)}
/* pause */
.pause-box{position:relative;isolation:isolate;padding:34px 24px 26px;width:min(90vw,360px);display:flex;flex-direction:column;gap:10px;text-align:center;background:linear-gradient(180deg,rgba(155,123,255,.55),rgba(91,52,230,.2) 40%,rgba(126,255,92,.3));clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px)}
.pause-box::before{content:'';position:absolute;inset:1px;z-index:-1;background:radial-gradient(ellipse at 50% 0,rgba(91,52,230,.28),transparent 60%),linear-gradient(180deg,#0e0720,#040209);clip-path:polygon(17.5px 0,calc(100% - 17.5px) 0,100% 17.5px,100% calc(100% - 17.5px),calc(100% - 17.5px) 100%,17.5px 100%,0 calc(100% - 17.5px),0 17.5px)}
.pause-sigil{width:54px;height:54px;margin:0 auto 4px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#000 0 22%,var(--green) 24%,rgba(126,255,92,.2) 32%,transparent 46%),radial-gradient(circle,rgba(91,52,230,.5),transparent 70%);box-shadow:0 0 30px rgba(91,52,230,.6);animation:breathe 3.5s ease-in-out infinite}
.pause-box h2{font-family:var(--disp);font-weight:900;letter-spacing:.3em;margin:0;font-size:26px;text-transform:uppercase;padding-left:.3em}
.pause-q{margin:0 0 4px;color:var(--bone-d);font-style:italic}
.pause-st{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:4px 0 12px;padding:10px 0;border-top:1px solid rgba(91,52,230,.25);border-bottom:1px solid rgba(91,52,230,.25)}
.pause-st b{display:block;font-family:var(--disp);font-size:18px;font-weight:700;color:var(--bone)}
.pause-st span{font-family:var(--disp);font-size:8px;letter-spacing:.24em;text-transform:uppercase;color:var(--bone-dd)}
/* ---------- responsive ---------- */
@media (max-width:560px) and (orientation:portrait){
  .cards{flex-direction:column;align-items:stretch;max-width:400px;gap:12px}
  .card{max-width:none;min-height:0;flex-direction:row;text-align:left;padding:16px 18px 16px 112px;align-items:center;min-height:112px;clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,14px 100%,0 50%)}
  .card::before{clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,14px 100%,0 50%,0 50%,1px 50%,calc(14px + .5px) calc(100% - 1px),calc(100% - 14px - .5px) calc(100% - 1px),calc(100% - 1px) 50%,calc(100% - 14px - .5px) 1px,calc(14px + .5px) 1px,1px 50%,0 50%)}
  .card::after{display:none}
  .card-ic{position:absolute;left:22px;top:50%;width:76px;height:76px;margin:-38px 0 0}
  .card-ic .mv-img{width:72px;height:72px}
  .card-tx{align-items:flex-start;gap:3px}
  .card-key{left:auto;right:22px;bottom:auto;top:10px;transform:none}
  .pick-top{margin-bottom:14px}
}
@media (max-height:500px) and (orientation:landscape){
  .lv-v{font-size:30px}
  .h-hunger{margin-top:4px}
  .card{min-height:220px;padding:16px 10px}
  .card-ic{width:72px;height:72px;margin-top:4px}.card-ic .mv-img{width:64px;height:64px}
  .pick-top{margin-bottom:8px}.pick-h{font-size:26px}
  .mv{width:50px;height:50px}
  .mv-ring{-webkit-mask:radial-gradient(circle,transparent 27px,#000 28px);mask:radial-gradient(circle,transparent 27px,#000 28px)}
  .sac-tip{bottom:calc(80px + var(--sab))}
  .story{top:20%}
  .h-boss{top:calc(60px + var(--sat))}
}
@media (min-width:900px){
  .hud{padding:calc(18px + var(--sat)) 24px 18px}
  .lv-v{font-size:52px}
  .h-hp{height:6px}
  .h-lv{width:300px}
  .h-depth{width:230px}
  .d-n b{font-size:26px}
  .mv{width:64px;height:64px}
  .mv-ring{-webkit-mask:radial-gradient(circle,transparent 34px,#000 35px);mask:radial-gradient(circle,transparent 34px,#000 35px)}
  .mv-img{width:46px;height:46px}
  .sac-tip{bottom:110px}
  .lv-burst{top:34%}
}
@keyframes lvpunch{0%{transform:scale(1)}30%{transform:scale(1.35);color:var(--green-l)}100%{transform:scale(1)}}
@keyframes lvpunchbig{0%{transform:scale(1)}25%{transform:scale(1.7);color:#fff;text-shadow:0 0 24px var(--green),0 0 60px var(--green)}100%{transform:scale(1)}}
@keyframes dpunch{0%{filter:brightness(2.4) drop-shadow(0 0 10px var(--violet))}100%{filter:none}}
@keyframes burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}22%{transform:translate(-50%,-50%) scale(1)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-110%) scale(.92)}}
@keyframes burstbig{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-4deg)}10%{opacity:1;transform:translate(-50%,-50%) scale(1.3) rotate(1deg)}20%{transform:translate(-50%,-50%) scale(.96)}28%{transform:translate(-50%,-50%) scale(1.04)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-90%) scale(1.1);filter:blur(2px)}}
@keyframes swallowfly{0%{transform:translate(0,0) scale(1)}100%{transform:translate(var(--dx),var(--dy)) scale(.15);opacity:.2}}
@keyframes hurt{0%{opacity:1}100%{opacity:0}}
@keyframes lowpulse{0%,100%{opacity:.45}50%{opacity:.9}}
@keyframes flash{0%{opacity:1}100%{opacity:0}}
@keyframes tick{0%{transform:scale(1.5);color:#fff}100%{transform:scale(1)}}
@keyframes fed{0%{filter:brightness(2.5) drop-shadow(0 0 8px var(--green))}100%{filter:none}}
@keyframes arm{to{box-shadow:0 0 0 2px var(--red),0 0 34px rgba(255,59,92,.9),0 0 60px color-mix(in srgb,var(--ec) 60%,transparent),inset 0 0 14px rgba(0,0,0,.9)}}
@keyframes shake{0%{translate:0 0}25%{translate:1px -1px}50%{translate:-1px 1px}75%{translate:1px 1px}100%{translate:0 0}}
@keyframes fadein{from{opacity:0}}
@keyframes starve{from{filter:none}to{filter:brightness(1.8)}}
@keyframes godup{0%{transform:translateX(-50%) scale(1)}30%{transform:translateX(-50%) scale(1.25);filter:brightness(2)}100%{transform:translateX(-50%) scale(1)}}
@keyframes banner{0%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}12%{opacity:1;transform:translate(-50%,-50%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-60%) scale(.96)}}
@keyframes hungry{from{box-shadow:0 0 0 1px color-mix(in srgb,var(--ec) 55%,transparent),0 0 10px rgba(126,255,92,.2),inset 0 0 14px rgba(0,0,0,.9)}to{box-shadow:0 0 0 2px var(--green),0 0 26px rgba(126,255,92,.75),inset 0 0 14px rgba(0,0,0,.9)}}
@keyframes mvup{0%{transform:scale(1)}40%{transform:scale(1.18);filter:brightness(1.8)}100%{transform:scale(1)}}
@keyframes cardin{from{opacity:0;transform:translateY(24px) scale(.94)}}
@keyframes breathe{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes swallow{40%{transform:translateX(-50%) scale(.9);filter:brightness(2)}}
#ui:has(.overlay) .story,#ui:has(.overlay) .sac-tip,#ui:has(.overlay) .lv-burst{opacity:0!important;animation:none}
#ui:has(.overlay) .hud{filter:blur(1.5px);opacity:.4}

/* r4: tier clock, sealed god, wrath ready */
.d-clock{margin-top:4px;font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--bone-d);text-shadow:var(--shadow)}
.d-clock.warn{color:#ffd0d8}
.d-clock.rej{color:#ff4a6a;text-shadow:0 0 10px var(--red),var(--shadow);animation:starve .35s ease-in-out infinite alternate}
.h-god.sealed{cursor:default}
.h-god.sealed .gd-st{color:var(--bone-d)}
.h-god.sealed .gd-belly i{background:linear-gradient(90deg,#2a1468,var(--blurple) 70%,#b69cff);box-shadow:0 0 10px var(--blurple)}
.h-god.ready .gd-feed{display:inline;color:#e9ffd9;text-shadow:0 0 12px var(--green),var(--shadow)}
.h-god.ready .gd-belly{animation:starve .45s ease-in-out infinite alternate;box-shadow:0 0 0 1px var(--green-l),0 0 22px var(--green),0 0 0 2px rgba(0,0,0,.8)}
.h-god.ready .gd-st{color:var(--green-l)}
.h-banner.rej{color:#ff4a6a;text-shadow:0 0 18px var(--red),0 2px 0 #000}
.sac-what{font-size:12.5px;line-height:1.35;color:var(--bone);margin:4px 0 3px}
.sac-next{font-size:11px;line-height:1.3;color:var(--bone-d);margin-bottom:6px}
.sac-feedh{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--green-l);border-top:1px solid rgba(126,255,92,.2);padding-top:5px}
/* ===== Evolve to Feed ===== */
.mv-evo{position:absolute;inset:-9px;border-radius:50%;pointer-events:none;background:conic-gradient(from 0deg,var(--green-l) 0,var(--green) var(--evo,0deg),rgba(236,232,246,.08) var(--evo,0deg));-webkit-mask:radial-gradient(circle,transparent calc(50% - 3px),#000 calc(50% - 2px));mask:radial-gradient(circle,transparent calc(50% - 3px),#000 calc(50% - 2px));opacity:.85}
.mv.ready .mv-evo{animation:evoready .6s ease-in-out infinite alternate}
.mv.evolved .mv-evo{background:conic-gradient(from 0deg,var(--ec),var(--ec2),var(--ec),var(--ec2),var(--ec));animation:evospin 4s linear infinite;opacity:1;filter:drop-shadow(0 0 6px var(--ec2))}
.mv.evolved{box-shadow:0 0 0 1.5px var(--ec2),0 0 22px color-mix(in srgb,var(--ec2) 55%,transparent),inset 0 0 14px rgba(0,0,0,.9)}
.mv.fused .mv-evo{inset:-12px;animation-duration:2s}
.mv.fused .mv-img{width:34px;height:34px;transform:translate(-8px,-4px)}
.mv-img2{position:absolute;width:30px!important;height:30px!important;right:4px;bottom:4px;filter:drop-shadow(0 0 4px var(--ec2))}
.mv.evolved .mv-lv{color:var(--green-l)}
.mv.ready .mv-lv{color:var(--green-l);animation:evoready .6s ease-in-out infinite alternate}
@keyframes evospin{to{transform:rotate(360deg)}}
@keyframes evoready{from{opacity:.55}to{opacity:1}}
.h-goal{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(112px + var(--sab));width:min(92vw,560px);text-align:center;font-size:12px;line-height:1.35;color:var(--bone-d);text-shadow:var(--shadow);pointer-events:none;transition:opacity .2s}
.h-goal b{color:var(--green-l);font-weight:700}
.h-goal i{color:var(--bone-dd);font-style:normal}
.hud:has(.sac-tip.show) .h-goal,.hud:has(.sac-tip.show) .fuse-box{opacity:0}
.fuse-box{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(146px + var(--sab));display:flex;gap:8px;pointer-events:auto;transition:opacity .2s}
.fuse-box.pop{animation:fzpop .6s}
@keyframes fzpop{40%{filter:brightness(2.2)}}
.fuse-btn{--ec:#9b7bff;--ec2:#7eff5c;display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 14px 6px;border:0;cursor:pointer;color:var(--bone);font-family:var(--disp);background:linear-gradient(90deg,color-mix(in srgb,var(--ec) 35%,#0a0418),#0a0418 50%,color-mix(in srgb,var(--ec2) 35%,#0a0418));box-shadow:0 0 0 1px var(--ec),0 0 18px color-mix(in srgb,var(--ec2) 45%,transparent);clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%);animation:evoready .8s ease-in-out infinite alternate;touch-action:none}
.fuse-btn .fz-k{font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--green-l)}
.fuse-btn kbd{font:inherit;color:var(--bone-dd)}
.fuse-btn b{font-size:15px;letter-spacing:.06em}
.fuse-btn small{font-family:var(--body);font-size:10.5px;color:var(--bone-d);max-width:240px}
.evo-ban{--ec:#9b7bff;--ec2:#7eff5c;position:absolute;left:50%;top:63%;transform:translate(-50%,-50%) scale(.9);width:min(90vw,520px);text-align:center;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;text-shadow:0 0 18px #000,0 0 4px #000}
.evo-ban.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.eb-k{font-family:var(--disp);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--ec2)}
.eb-n{font-family:var(--disp);font-size:clamp(22px,6vw,34px);font-weight:900;color:var(--bone);margin:2px 0}
.eb-n span{color:var(--bone-d);font-weight:700;font-size:.7em}
.eb-n b{color:var(--ec2);text-shadow:0 0 22px var(--ec),0 0 4px #000}
.eb-d{font-family:var(--body);font-size:14px;color:var(--bone);line-height:1.3}
.sac-wait{font-size:11.5px;line-height:1.35;color:var(--bone-d);margin:4px 0 2px}
.sac-wait b{color:var(--green-l)}
.sac-evo b,.sac-rare b{color:var(--green-l)}
.sac-rare .sac-k{color:#fff1b8}
@media (max-width:560px) and (orientation:portrait){
  .h-goal{bottom:calc(96px + var(--sab));font-size:11px}
  .fuse-box{bottom:calc(132px + var(--sab));flex-direction:column}
  .eb-d{font-size:13px}
}