/* 曦曦的美食系统 v10 · 阿呆执笔、投喂切入、回忆剧场、时辰调色、卡面流光 */

/* ================= 等待 AI：阿呆在写下一幕 ================= */
.think.scribe{display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px 10px}
.think.scribe>i{display:none}
.scDesk{position:relative;display:flex;align-items:flex-end;gap:12px}
.scAdai{width:76px;height:76px;border-radius:16px;box-shadow:0 0 0 1.5px #7fe9ff,0 0 20px rgba(127,233,255,.4);animation:speakBob .9s ease-in-out infinite alternate}
.scPaper{position:relative;width:150px;height:96px;border-radius:4px;background:linear-gradient(135deg,#f4e6c6,#dcc59a);box-shadow:0 8px 20px rgba(0,0,0,.5);transform:rotate(-3deg);overflow:visible}
.scPaper i{position:absolute;left:14px;height:2px;width:0;border-radius:2px;background:rgba(70,40,20,.7);animation:scWrite 3.2s ease-in-out infinite}
.scPaper i:nth-child(1){top:20px;animation-delay:0s}.scPaper i:nth-child(2){top:38px;animation-delay:.8s}.scPaper i:nth-child(3){top:56px;animation-delay:1.6s}.scPaper i:nth-child(4){top:74px;animation-delay:2.4s;max-width:60px}
@keyframes scWrite{0%{width:0;opacity:1}30%{width:118px;opacity:1}85%{width:118px;opacity:1}100%{width:118px;opacity:0}}
.scPaper i:nth-child(4){animation-name:scWrite2}@keyframes scWrite2{0%{width:0}30%,85%{width:62px;opacity:1}100%{width:62px;opacity:0}}
.scQuill{position:absolute;right:-10px;top:-14px;width:6px;height:70px;border-radius:3px 3px 1px 1px;background:linear-gradient(#fff,#d8c8f0 60%,#3a2a4a);transform-origin:bottom center;animation:quill 1.1s ease-in-out infinite alternate}
@keyframes quill{from{transform:rotate(28deg) translate(0,0)}to{transform:rotate(18deg) translate(-26px,8px)}}
.think.scribe span{font-size:13.5px;letter-spacing:.12em;color:#bfefff}

/* ================= 投喂：切入 ================= */
.cutin{position:fixed;inset:0;z-index:160;pointer-events:auto;animation:tIn .12s ease both}
.cutin.out{animation:tOut .4s ease forwards}
.cutin.emo{background:rgba(10,4,8,.35)}
.ciBand{position:absolute;left:-10%;right:-10%;top:32%;height:min(34vh,260px);transform:rotate(-8deg);overflow:hidden;background:linear-gradient(90deg,#3a0a2a,#c8305a 40%,#ff9ec4 70%,#3a0a2a);box-shadow:0 0 0 3px #fff4e0,0 0 60px rgba(255,120,160,.6);animation:bandIn .45s cubic-bezier(.2,1.3,.4,1) both}
@keyframes bandIn{from{transform:rotate(-8deg) scaleY(0)}}
.ciLines{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 2px,transparent 2px 28px);animation:ciLines .35s linear infinite;opacity:.7}
@keyframes ciLines{to{background-position:-60px 0}}
.ciPt{position:absolute;left:12%;bottom:0;height:120%;aspect-ratio:1;transform:rotate(8deg);animation:ciPtIn .5s .1s cubic-bezier(.2,1.2,.4,1) both}
.ciPt img{width:100%;height:100%;object-fit:cover;border-radius:20px;box-shadow:0 0 0 3px #fff4e0}
@keyframes ciPtIn{from{transform:rotate(8deg) translateX(-120%)}}
.ciTx{position:absolute;right:14%;top:50%;transform:translateY(-50%) rotate(8deg);text-align:right;animation:ciTxIn .45s .2s cubic-bezier(.2,1.4,.4,1) both}
.ciTx small{display:block;font-size:14px;letter-spacing:.5em;color:#fff4e0}
.ciTx b{display:block;font-size:clamp(34px,9vw,60px);letter-spacing:.1em;color:#fff;text-shadow:0 4px 0 #6a0a2a,0 0 30px rgba(255,255,255,.6)}
.ciTx span{font-size:15px;letter-spacing:.2em;color:#ffe0ea}
@keyframes ciTxIn{from{opacity:0;transform:translateY(-50%) rotate(8deg) scale(2)}}
.cutin.shield,.cutin.heart{pointer-events:none;background:none}
.ciShards{position:absolute;width:0;height:0}
.ciShards i{position:absolute;left:-8px;top:-8px;width:16px;height:22px;background:linear-gradient(135deg,rgba(220,240,255,.95),rgba(120,170,220,.5));clip-path:polygon(50% 0,100% 40%,70% 100%,0 70%);transform:rotate(var(--a)) translateY(0) scale(var(--s));animation:shard .8s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes shard{to{transform:rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(var(--s)) rotate(200deg);opacity:0}}
.ciTag{position:absolute;transform:translate(-50%,-50%);padding:4px 12px;border-radius:99px;font-size:14px;font-weight:900;letter-spacing:.12em;color:#062030;background:#bfefff;box-shadow:0 0 20px rgba(191,239,255,.8);animation:popIn .4s cubic-bezier(.2,1.6,.4,1) both}
.ciHeart{position:absolute;left:50%;top:40%;width:120px;height:110px;transform:translate(-50%,-50%)}
.ciHeart i{position:absolute;top:0;width:60px;height:110px;background:#ff3a4a;filter:drop-shadow(0 0 20px rgba(255,40,60,.7))}
.ciHeart i.l{left:0;clip-path:polygon(100% 18%,70% 0,30% 0,0 25%,0 50%,100% 100%,85% 70%,100% 50%,82% 35%);animation:hL .8s .15s ease-in forwards}
.ciHeart i.r{right:0;clip-path:polygon(0 18%,30% 0,70% 0,100% 25%,100% 50%,0 100%,15% 70%,0 50%,18% 35%);animation:hR .8s .15s ease-in forwards}
@keyframes hL{to{transform:translate(-30px,80px) rotate(-30deg);opacity:0}}@keyframes hR{to{transform:translate(30px,80px) rotate(30deg);opacity:0}}

/* ================= 回忆剧场 ================= */
#theater{position:fixed;inset:0;z-index:142;display:none;overflow:hidden;background:#0a0604;cursor:pointer;-webkit-user-select:none;user-select:none}
#theater.on{display:block;animation:tIn .5s ease both}#theater.out{animation:tOut .42s ease forwards}
#theater .thBg{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;animation:cineDrift 36s ease-in-out infinite alternate}
#theater .thBg.swap{animation:thSwap 1.2s ease both,cineDrift 36s ease-in-out infinite alternate}
@keyframes thSwap{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:none}}
#theater.sepia .thBg{inset:8% 6% 34%;width:88%;height:58%;object-fit:contain;filter:drop-shadow(0 20px 40px rgba(0,0,0,.7));animation:pageFloat 6s ease-in-out infinite alternate}
#theater.sepia{background:radial-gradient(80% 60% at 50% 35%,#3a2614,#0e0804)}
@keyframes pageFloat{from{transform:rotate(-2deg) translateY(0)}to{transform:rotate(1deg) translateY(-8px)}}
#theater>.liv{z-index:1}
#theater .thShade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.3),transparent 30%,transparent 50%,rgba(8,4,2,.9) 82%)}
#theater .thTitle{position:absolute;left:0;right:0;top:12%;z-index:3;text-align:center;transition:opacity .8s,transform .8s}
#theater .thTitle small{font-size:13px;letter-spacing:.4em;color:#f0dcb8;text-shadow:0 2px 8px #000}
#theater .thTitle h2{font-size:clamp(28px,7.5vw,46px);letter-spacing:.2em;margin-top:6px;color:#fff4e0;text-shadow:0 4px 18px #000}
#theater.go .thTitle{opacity:0;transform:translateY(-16px)}
#theater .thBox{position:absolute;left:4vw;right:4vw;bottom:calc(5vh + var(--sab));z-index:3;display:flex;align-items:flex-end;gap:12px;opacity:0;transition:opacity .4s}
#theater.go .thBox{opacity:1}#theater.me .thBox{flex-direction:row-reverse}
#theater .thPt{flex:none;width:clamp(96px,26vw,160px);aspect-ratio:1;border-radius:18px;overflow:hidden;box-shadow:0 0 0 2px #f2c86b,0 0 30px rgba(0,0,0,.6);opacity:0}
#theater .thPt.in{animation:ptIn .45s cubic-bezier(.2,1.2,.4,1) forwards}
#theater .thPt img{width:100%;height:100%;object-fit:cover;display:block}
#theater .thMain{flex:1;min-width:0;padding:14px 16px 24px;border-radius:14px;background:linear-gradient(180deg,rgba(26,16,8,.9),rgba(12,6,2,.95));border:1px solid rgba(242,200,107,.45)}
#theater .thName{display:block;min-height:1em;font-size:13px;letter-spacing:.2em;color:var(--gold);margin-bottom:6px}
#theater .thTx{font-size:clamp(15px,4.2vw,18px);line-height:1.9;color:#fff4e6;min-height:3.8em}
#theater .thX{position:absolute;right:12px;top:calc(12px + var(--sat));z-index:4;padding:6px 12px;border-radius:99px;font-size:12px;color:#f4e8d8;background:rgba(10,4,8,.6);border:1px solid rgba(242,200,107,.4)}
#theater .thDots{position:absolute;left:0;right:0;top:calc(14px + var(--sat));z-index:4;display:flex;justify-content:center;gap:6px}
#theater .thDots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.25)}#theater .thDots i.on{background:var(--gold)}
.page.pgv[data-mem]{cursor:pointer;position:relative}
.pgPlay{position:absolute;right:10px;bottom:8px;font-size:11.5px;letter-spacing:.12em;color:var(--gold);padding:2px 8px;border-radius:99px;border:1px solid rgba(242,200,107,.45);background:rgba(10,4,8,.5)}
.jch[data-recap]{cursor:pointer;transition:transform .15s,border-color .2s}.jch[data-recap]:active{transform:scale(.985)}.jch[data-recap]:hover{border-color:rgba(242,200,107,.55)}
.jch[data-recap] .jh span::after{content:" · 回顾 ▶";color:var(--gold)}

/* ================= 时辰调色 ================= */
body[data-tod=night] .banner>canvas:first-child,body[data-tod=night] #cine .cBg{filter:brightness(.84) saturate(.9) hue-rotate(-6deg)}
body[data-tod=dusk] .banner>canvas:first-child,body[data-tod=dusk] #cine .cBg{filter:sepia(.18) saturate(1.12) brightness(.96)}
body[data-tod=dawn] .banner>canvas:first-child,body[data-tod=dawn] #cine .cBg{filter:sepia(.1) brightness(1.05) saturate(1.05)}

/* ================= 卡面流光（橙卡、红卡） ================= */
.pcard.r5::after,.pcard.r6::after,.ccard[class*="r5"] .art::after,.ccard[class*="r6"] .art::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.4) 45%,rgba(255,200,120,.25) 50%,transparent 64%);background-size:260% 100%;animation:foil 3.4s linear infinite;mix-blend-mode:overlay}
@keyframes foil{from{background-position:130% 0}to{background-position:-130% 0}}
.lowfx .pcard::after,.lowfx .ccard .art::after{animation:none!important;opacity:0}

/* ================= 手机 ================= */
@media (max-width:420px){.ciBand{top:30%;height:30vh}.ciPt{left:6%}.ciTx{right:8%}#theater .thMain{padding:12px 12px 22px}.scPaper{width:124px;height:84px}.scAdai{width:64px;height:64px}}
@media (max-height:520px) and (orientation:landscape){#theater .thPt{width:22vh}#theater.sepia .thBg{inset:6% 20% 38%;width:60%}}