/* 曦曦的美食系统 v8 · 每个功能的画面：题图、格子画、战斗台、结局画、图标签、明信片、任务图标、食客画像、登录插画
   画框规范沿用 v7：圆角 10–14px，1px 金线 + 投影；文字压在画上时一律用底部渐暗，不用描边 */

/* ================= 功能题图 ================= */
.fhead{position:relative;overflow:hidden;border-radius:14px;aspect-ratio:16/5;margin:0 0 14px;background:#140a10;box-shadow:0 0 0 1px rgba(242,200,107,.45),0 14px 30px rgba(0,0,0,.5)}
.fhead img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:fheadIn 1.2s ease-out both}
@keyframes fheadIn{from{transform:scale(1.08);opacity:0}to{transform:none;opacity:1}}
.fhead::after{content:"";position:absolute;inset:5px;border:1px solid rgba(242,200,107,.25);border-radius:10px;pointer-events:none}
.fcap{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 10px;background:linear-gradient(transparent,rgba(8,4,6,.85))}
.fcap b{display:block;font-size:clamp(18px,4.6vw,24px);letter-spacing:.16em;color:#fff4e0;text-shadow:0 2px 10px #000}
.fcap small{font-size:12px;letter-spacing:.08em;color:#e6d4bc}
.fhead.castle{aspect-ratio:64/26}

/* ================= 主菜单：画出来的格子与冒险牌 ================= */
.mtile.pic{isolation:isolate;background:#1a0c12}
.mtile .tbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;opacity:.5;filter:saturate(1.1) brightness(.8);transition:opacity .25s,transform .4s}
.mtile.pic:hover .tbg{opacity:.7;transform:scale(1.06)}
.mtile.pic:active .tbg{opacity:.8}
.mtile.pic b,.mtile.pic small{text-shadow:0 1px 4px #000,0 0 10px rgba(0,0,0,.8)}
.mtile.pic small{color:#e0d0c0}
.mcont.pic{isolation:isolate}
.mcont .mbg{position:absolute!important;inset:0;width:100%;height:100%;object-fit:cover;z-index:0!important;opacity:.5;mix-blend-mode:multiply;border-radius:inherit}

/* ================= 投喂：战斗台、端菜飞行、命中、结局画 ================= */
.pnl.stage{overflow:hidden;isolation:isolate}
.stageBg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.3;z-index:-1;filter:saturate(1.15);-webkit-mask:linear-gradient(180deg,#000 30%,transparent);mask:linear-gradient(180deg,#000 30%,transparent)}
.flyDish{position:fixed;left:0;top:0;width:80px;height:80px;z-index:310;pointer-events:none;filter:drop-shadow(0 10px 14px rgba(0,0,0,.6))}
#dnCv.hit{animation:foeHit .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes foeHit{15%{transform:translateX(-5px) scale(1.04);filter:brightness(1.6) saturate(1.4)}35%{transform:translateX(4px)}55%{transform:translateX(-3px)}75%{transform:translateX(2px)}}
.resPnl{text-align:left}
.resArt{position:relative;width:132px;height:132px;margin:2px auto 12px;border-radius:18px;overflow:hidden;box-shadow:0 0 0 2px var(--rc,#6fd6b0),0 0 30px rgba(111,214,176,.35),0 10px 24px rgba(0,0,0,.6);animation:popIn .6s cubic-bezier(.2,1.4,.4,1) both}
.resArt.boss{--rc:#f2c86b;box-shadow:0 0 0 2px #f2c86b,0 0 40px rgba(242,200,107,.55)}.resArt.lose{--rc:#8a7a8a;width:180px;height:100px;filter:saturate(.7)}
.resArt img{width:100%;height:100%;object-fit:cover;display:block}
.resArt .stamp{position:absolute;right:6px;bottom:6px;font-size:13px;font-weight:900;letter-spacing:.12em;padding:2px 8px;border:2px solid currentColor;border-radius:6px;color:#ff5a7a;background:rgba(10,4,6,.7);transform:rotate(-8deg);animation:stampIn .5s .4s cubic-bezier(.2,1.6,.4,1) both}
.resArt.win .stamp{color:#6fd6b0}.resArt.boss .stamp{color:#f2c86b}
@keyframes stampIn{from{transform:rotate(-8deg) scale(2.2);opacity:0}}

/* ================= 收获签、明信片、遭遇画像、记忆速写 ================= */
.gain.ig{display:inline-flex;align-items:center;gap:6px;padding-left:6px}
.gain.ig i{width:22px;height:22px;flex:none;border-radius:6px;background-size:cover;background-position:center;box-shadow:0 0 0 1px rgba(242,200,107,.5)}
.realfood{flex-wrap:wrap}
.realfood .rfPic{width:58px;height:58px;flex:none;border-radius:10px;background:#1e1016;box-shadow:0 0 0 1px rgba(127,233,255,.5),0 4px 10px rgba(0,0,0,.4);transform:rotate(-3deg)}
.enc{display:grid;grid-template-columns:96px 1fr;column-gap:14px;align-items:start}
.enc .encCv{grid-row:1/4;width:96px;height:120px;border-radius:12px;box-shadow:0 0 0 1.5px #ff5a7a,0 0 20px rgba(255,90,122,.4);background:#140a10}
.enc>h3,.enc>p,.enc>.row{grid-column:2}
.memo.pic{display:flex;gap:10px;align-items:center}
.memo.pic img{width:64px;height:51px;flex:none;border-radius:5px;transform:rotate(-3deg);box-shadow:0 4px 10px rgba(0,0,0,.45)}

/* ================= 系统任务与食客 ================= */
.qrow .row{flex-wrap:nowrap}
.qic{width:48px;height:48px;flex:none;border-radius:12px;background:#1e1016;box-shadow:0 0 0 1px rgba(242,200,107,.4),0 4px 10px rgba(0,0,0,.4)}
.qrow.ready{border-color:rgba(242,200,107,.7);box-shadow:0 0 0 1px rgba(242,200,107,.4),0 0 20px rgba(242,200,107,.18)}
.qrow.ready .qic{animation:glowPulseY 1.6s infinite}
.pnl.diner{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center}
.pnl.diner .dpt{width:64px;height:64px;border-radius:14px;box-shadow:0 0 0 1.5px rgba(242,200,107,.55),0 4px 10px rgba(0,0,0,.45)}

/* ================= 终章横幅、登录插画、饭票与徽章、加载画面 ================= */
.banner .bimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kenburns 6s ease-out both}
.gHero{position:relative;overflow:hidden;height:156px;margin:0 0 18px;border-radius:16px;box-shadow:0 0 0 1px rgba(127,233,255,.5),0 14px 30px rgba(0,0,0,.5)}
#gateBg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#gateArt{position:absolute;left:12px;bottom:12px;width:96px;height:96px;border-radius:16px;box-shadow:0 0 0 2px #7fe9ff,0 0 24px rgba(127,233,255,.5)}
#gateSay{position:absolute;left:122px;right:12px;bottom:16px;padding:9px 12px;border-radius:12px 12px 12px 3px;font-size:13.5px;line-height:1.65;color:#e9fdff;background:rgba(4,16,24,.82);border:1px solid rgba(127,233,255,.55)}
.lgd .lgi{width:34px;height:34px;margin:2px 0}
.jms.badges span{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 4px}
.jms.badges img{width:26px;height:26px;filter:grayscale(1) brightness(.55)}
.jms.badges span.on img{filter:none}
#ldArt{display:block;width:min(80vw,320px);height:auto;aspect-ratio:320/140;margin:0 auto 18px;border-radius:14px;box-shadow:0 0 0 1px rgba(242,200,107,.35),0 14px 30px rgba(0,0,0,.6)}

/* ================= 卡牌：懒加载淡入、详情光泽 ================= */
.ccard .art img[data-pic]{opacity:0;transition:opacity .35s}.ccard .art img[data-pic].in{opacity:1}
.cardDetail .ccard{transition:transform .15s ease-out;will-change:transform}
.cardDetail .ccard .art::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.35),transparent 45%);mix-blend-mode:overlay}

/* ================= 长列表性能：屏幕外的格子跳过排版与绘制 ================= */
.cgrid>.ccard{content-visibility:auto;contain-intrinsic-size:auto 230px}
.swGrid>.swc,.wgrid>.wcell{content-visibility:auto;contain-intrinsic-size:auto 200px}
.grid>.item{content-visibility:auto;contain-intrinsic-size:auto 130px}

/* ================= 手机适配 ================= */
@media (max-width:380px){
  .fhead{aspect-ratio:16/6}.fcap{padding:20px 12px 8px}.fcap small{font-size:11px}
  .gHero{height:136px}#gateArt{width:80px;height:80px}#gateSay{left:102px;font-size:12.5px}
  .enc{grid-template-columns:76px 1fr}.enc .encCv{width:76px;height:96px}
  .qic{width:40px;height:40px}.pnl.diner{grid-template-columns:52px 1fr}.pnl.diner .dpt{width:52px;height:52px}
  .realfood .rfPic{width:48px;height:48px}
}
@media (max-height:520px) and (orientation:landscape){.fhead{aspect-ratio:16/3.6}.gHero{height:110px}}