/* 曦曦的美食系统 v9 · 活画层、时辰光线、对白演出、沉浸阅读、召唤仪式、片尾、推镜转场、低端机省电 */

/* ================= 活画层：都在画之上、文字之下，不挡点击 ================= */
.liv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.fhead>.liv{z-index:1}.fhead .fcap{z-index:2}
.lbPic>.liv{z-index:1;border-radius:inherit}
.tvl canvas:not(.liv){z-index:1}.tvl>.liv{z-index:0}.tvCap{z-index:2}
.pnl.stage>.liv{z-index:-1}
.domain>.liv{z-index:1}.domain .in{position:relative;z-index:2}
.gHero>.liv{z-index:1}#gateArt,#gateSay{z-index:2}
.adaiHero{position:relative;isolation:isolate;overflow:hidden}.adaiHero>.liv{z-index:-1}
.banner .bimg~.liv{z-index:1}.banner .cap{z-index:2}

/* ================= 星空厨房：随真实时间换光线 ================= */
#hubLiv{position:absolute;inset:0;pointer-events:none;z-index:3}
#todTint{position:absolute;inset:0;pointer-events:none;z-index:2;mix-blend-mode:soft-light;transition:background 2s}
#todTint.tod-dawn{background:linear-gradient(180deg,rgba(255,170,120,.45),rgba(255,210,170,.12) 45%,transparent 75%)}
#todTint.tod-day{background:linear-gradient(180deg,rgba(255,244,210,.3),transparent 60%)}
#todTint.tod-dusk{background:linear-gradient(180deg,rgba(255,110,70,.45),rgba(150,70,140,.25) 50%,transparent 85%)}
#todTint.tod-night{background:linear-gradient(180deg,rgba(30,40,110,.5),rgba(20,20,60,.25) 60%,transparent)}

/* ================= 冒险：对白一句一句说 ================= */
.say.pts.waiting{visibility:hidden;animation:none}
.say.pts.speaking .pt img{animation:speakBob .42s ease-in-out infinite alternate}
@keyframes speakBob{to{transform:translateY(-2px) scale(1.03)}}
.cineBtn{position:absolute;right:10px;top:10px;z-index:3;padding:6px 12px;border-radius:99px;font-size:12px;letter-spacing:.12em;color:#fff4e0;background:rgba(10,4,8,.62);border:1px solid rgba(242,200,107,.55);box-shadow:0 4px 12px rgba(0,0,0,.4)}
.cineBtn::before{content:"";display:inline-block;width:0;height:0;margin-right:6px;border-left:7px solid var(--gold);border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;vertical-align:0}

/* ================= 沉浸阅读 ================= */
#cine{position:fixed;inset:0;z-index:140;display:none;overflow:hidden;background:#06040a;cursor:pointer;-webkit-user-select:none;user-select:none}
#cine.on{display:block;animation:tIn .45s ease both}#cine.out{animation:tOut .45s ease forwards}
#cine .cBg{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;animation:cineDrift 40s ease-in-out infinite alternate}
@keyframes cineDrift{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.12) translate(-2%,-1.5%)}}
#cine>.liv{z-index:1}
#cine .cShade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 30%,transparent 45%,rgba(6,2,8,.88) 78%)}
#cine .cBar{position:absolute;left:0;right:0;height:7vh;z-index:3;background:#000;transform:scaleY(0);animation:barIn .7s .1s cubic-bezier(.2,.9,.3,1) forwards}
#cine .cBar.t{top:0;transform-origin:top}#cine .cBar.b{bottom:0;transform-origin:bottom}
@keyframes barIn{to{transform:scaleY(1)}}
#cine .cTitle{position:absolute;left:0;right:0;top:34%;z-index:4;text-align:center;transition:opacity .8s,transform .8s}
#cine .cTitle small{font-size:13px;letter-spacing:.4em;color:#e6dcff;text-shadow:0 2px 8px #000}
#cine .cTitle h2{font-size:clamp(30px,8vw,52px);letter-spacing:.2em;margin-top:8px;background:linear-gradient(180deg,#fffaf0,var(--gold) 60%,var(--gold2));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 16px #000)}
#cine.go .cTitle{opacity:0;transform:translateY(-20px)}
#cine .cStage{position:absolute;left:0;right:0;bottom:calc(7vh + 10px + var(--sab));z-index:4;display:flex;align-items:flex-end;gap:12px;padding:0 4vw;opacity:0;transition:opacity .4s}
#cine.go .cStage{opacity:1}
#cine .cPt{flex:none;width:clamp(110px,30vw,190px);aspect-ratio:1;border-radius:20px;overflow:hidden;opacity:0;transform:translateX(-30px);box-shadow:0 0 0 2px var(--ring,var(--gold)),0 0 34px rgba(0,0,0,.6)}
#cine .cPt.in{animation:ptIn .45s cubic-bezier(.2,1.2,.4,1) forwards}
@keyframes ptIn{to{opacity:1;transform:none}}
#cine .cPt img,#cine .cPt canvas{width:100%;height:100%;display:block;object-fit:cover}
#cine.right .cStage{flex-direction:row-reverse}#cine.right .cPt{--ring:#ff9ec4;transform:translateX(30px)}
#cine.left .cPt{--ring:#7fe9ff}#cine.enc .cPt{--ring:#ff5a7a;box-shadow:0 0 0 2px #ff5a7a,0 0 40px rgba(255,60,90,.6)}
#cine.narr .cPt{display:none}
#cine .cBox{position:relative;flex:1;min-width:0;padding:14px 16px 26px;border-radius:14px;background:linear-gradient(180deg,rgba(20,10,16,.88),rgba(10,4,8,.94));border:1px solid rgba(242,200,107,.45);box-shadow:0 10px 30px rgba(0,0,0,.6)}
#cine .cName{display:block;font-size:13px;letter-spacing:.2em;color:var(--gold);margin-bottom:6px;min-height:1em}
#cine .cTx{font-size:clamp(15px,4.2vw,19px);line-height:1.9;color:#fff4e6;min-height:3.8em}
#cine.narr .cTx{font-size:clamp(16px,4.5vw,20px);text-indent:2em}
#cine .cNext{position:absolute;right:14px;bottom:8px;font-size:12px;color:var(--gold);opacity:0}
#cine.ready .cNext{opacity:1;animation:pulse 1.2s infinite}
#cine .cTop{position:absolute;right:10px;top:calc(7vh + 8px + var(--sat));z-index:5;display:flex;gap:6px}
#cine .cTop button{padding:6px 11px;border-radius:99px;font-size:12px;color:#f4e8d8;background:rgba(10,4,8,.6);border:1px solid rgba(242,200,107,.4)}
#cine .cProg{position:absolute;left:0;right:0;top:7vh;height:2px;z-index:5;background:rgba(255,255,255,.08)}#cine .cProg i{display:block;height:100%;width:0;background:var(--gold);transition:width .4s}
body.cineOn #view{visibility:hidden}

/* ================= 祈愿召唤、片尾、推镜 ================= */
.summon{position:fixed;inset:0;z-index:150;background:#080410;cursor:pointer;animation:tIn .2s ease both}.summon.out{animation:tOut .38s ease forwards}
.summon canvas{width:100%;height:100%;display:block}
.smHint{position:absolute;left:0;right:0;bottom:calc(20px + var(--sab));text-align:center;font-size:12px;letter-spacing:.3em;color:rgba(230,215,200,.55);z-index:3}
.credits{position:fixed;inset:0;z-index:150;overflow:hidden;background:radial-gradient(90% 60% at 50% 30%,#2a1438,#0a0410);cursor:pointer;opacity:0;transition:opacity .8s}
.credits.on{opacity:1}.credits.out{opacity:0}.credits>.liv{z-index:0;opacity:.6}
.crRoll{position:relative;z-index:1;max-width:560px;margin:0 auto;padding:0 20px;text-align:center;transform:translateY(100vh)}
.credits.on .crRoll{animation:crRoll 40s linear forwards}
@keyframes crRoll{from{transform:translateY(100vh)}to{transform:translateY(-100%)}}
.crRoll h1{font-size:clamp(30px,8vw,46px);letter-spacing:.2em;padding-top:10px;background:linear-gradient(180deg,#fffaf0,var(--gold) 60%,var(--gold2));-webkit-background-clip:text;background-clip:text;color:transparent}
.crSub{font-size:14px;letter-spacing:.4em;color:#d8c4f0;margin:8px 0 40px}
.crRoll h3{font-size:13px;letter-spacing:.5em;color:var(--gold);margin:44px 0 16px}
.crCast,.crGods{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.crP{width:112px;display:flex;flex-direction:column;align-items:center;gap:4px}.crP img{width:100px;height:100px;border-radius:18px;box-shadow:0 0 0 2px rgba(242,200,107,.6),0 10px 24px rgba(0,0,0,.6)}
.crCast .crP{width:150px}.crCast .crP img{width:140px;height:140px}
.crP b{font-size:15px;letter-spacing:.12em;color:#fff4e0}.crP small{font-size:11.5px;color:#cdbcab}.crP.sm{width:84px}.crP.sm img{width:70px;height:70px}
.crFilm{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.crFilm img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px;box-shadow:0 0 0 1px rgba(242,200,107,.4)}
.crTx{font-size:14px;color:#e8dccb;line-height:1.8}
.crEnd{font-size:clamp(26px,7vw,40px);letter-spacing:.2em;line-height:1.6;margin:60vh 0 50vh;color:#fff4e0;text-shadow:0 0 30px rgba(242,200,107,.6)}
.crEnd.glow{animation:pulse 2s infinite}
.zoomT{position:fixed;z-index:125;object-fit:cover;pointer-events:none;box-shadow:0 20px 60px rgba(0,0,0,.6)}

/* ================= 低端手机：去掉毛玻璃、背景动画与重阴影 ================= */
.lowfx #viewHead,.lowfx .sheet{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.lowfx #view::before{animation:none!important;opacity:.4}
.lowfx .pnl{box-shadow:0 4px 12px rgba(0,0,0,.4)!important}
.lowfx .fhead img,.lowfx .banner .bimg,.lowfx .tvPic{animation:none!important}
.lowfx #cine .cBg{animation:none}

/* ================= 手机 ================= */
@media (max-width:420px){#cine .cStage{gap:8px;padding:0 3vw}#cine .cPt{width:30vw;border-radius:16px}#cine .cBox{padding:12px 12px 24px}#cine .cTop button{padding:5px 9px;font-size:11px}.cineBtn{padding:5px 10px;font-size:11px}.crP{width:96px}.crP img{width:84px;height:84px}}
@media (max-height:520px) and (orientation:landscape){#cine .cBar{height:5vh}#cine .cPt{width:24vh}#cine .cTitle{top:22%}#cine .cTx{min-height:2.8em}}
@media (prefers-reduced-motion:reduce){#cine .cBg,.credits.on .crRoll{animation:none}.credits .crRoll{transform:none;overflow:auto;max-height:100vh}}