/* =====================================================================
   樂慾島　20261106.9
   一、設施畫面（愛慾島的樣子：滿版圖＋圓圈＋往上拉的清單）
   二、六個新過場（飛行船、開播倒數、白天轉夜晚、禁慾深淵的門、電梯、擦肩）
   三、支線：通告板、圖鑑、收藏、支線・終
   ===================================================================== */

/* ---------- 一、設施畫面 ---------- */
.fac.f2{display:block;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;background:#0d0814;overscroll-behavior:contain}
.fac.f2::-webkit-scrollbar{display:none}
.f2hero{position:sticky;top:0;height:64%;min-height:360px;background-size:cover;background-position:center 42%;z-index:0}
.f2sh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,5,16,.66) 0%,rgba(10,5,16,.1) 24%,rgba(10,5,16,.04) 60%,rgba(10,5,16,.88) 100%)}
.f2top{position:absolute;left:10px;right:120px;top:50px;display:flex;align-items:flex-start;gap:6px;z-index:2}
.f2back{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;line-height:1;padding-bottom:3px;color:#fff;background:rgba(10,5,16,.35);backdrop-filter:blur(8px)}
.f2tt{min-width:0}
.f2tt small{display:block;font-size:12px;font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.f2tt b{display:block;font-family:var(--serif);font-size:27px;font-weight:900;line-height:1.15;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.f2cr{position:absolute;right:12px;top:56px;z-index:2;font-size:11.5px;padding:4px 10px;border-radius:12px;background:rgba(10,5,16,.45);backdrop-filter:blur(8px);color:#fff;display:flex;align-items:center;gap:6px}
.f2cr i{width:6px;height:6px;border-radius:50%;background:var(--live);box-shadow:0 0 6px var(--live)}
.f2hot{position:absolute;inset:0;z-index:1}
.f2hs{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:5px;animation:f2in .5s cubic-bezier(.2,.8,.2,1) calc(var(--i,0)*.07s) backwards}
@keyframes f2in{from{opacity:0;transform:translate(-50%,-38%) scale(.8)}}
.f2hi{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(12,7,20,.78);box-shadow:0 0 0 2px rgba(255,255,255,.9),0 8px 22px rgba(0,0,0,.5);overflow:hidden;font-size:26px;transition:transform .15s}
.f2hi .av{width:100%;height:100%;border-radius:50%}
.f2hi.av{background-size:cover;background-position:center 22%;filter:none}
.f2hi.e{font-style:normal}
.f2hs[style*="--lc"] .f2hi{box-shadow:0 0 0 2px var(--lc),0 0 18px color-mix(in srgb,var(--lc) 55%,transparent),0 8px 22px rgba(0,0,0,.5)}
.f2hs b{font-size:12px;font-weight:800;padding:3px 10px;border-radius:11px;background:rgba(12,7,20,.8);color:#fff;white-space:nowrap;max-width:112px;overflow:hidden;text-overflow:ellipsis}
.f2hs.dis{opacity:.5}
.f2hs:active .f2hi{transform:scale(.93)}
.f2q{font-style:normal;font-family:var(--serif);font-weight:900;font-size:24px;color:#fff}
.f2sheet{position:relative;z-index:3;margin-top:-34px;min-height:calc(36% + 34px);padding:10px 16px 44px;border-radius:26px 26px 0 0;background:linear-gradient(180deg,#170d22,#0d0814 140px);box-shadow:0 -12px 30px rgba(0,0,0,.45)}
.f2grip{display:block;width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.2);margin:0 auto 12px}
.f2slot{display:flex;align-items:center;gap:10px;margin:0 2px 12px}
.f2dots{display:flex;gap:6px}
.f2dots i{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.16)}
.f2dots i.done{background:rgba(255,255,255,.4)}
.f2dots i.on{background:var(--pink2);box-shadow:0 0 10px var(--pink)}
.f2slot b{font-size:14px;font-weight:800}
.f2card{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:18px;border:1px solid rgba(255,95,162,.32);background:rgba(255,61,139,.05);margin-bottom:12px}
.f2card>i{flex:0 0 40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;color:var(--pink2);background:rgba(255,61,139,.14)}
.f2card p{margin:0;font-family:var(--serif);font-size:14.5px;line-height:1.75;color:#f1e6f6}
.f2list{display:flex;flex-direction:column;gap:10px}
.f2row{display:flex;align-items:center;gap:12px;padding:11px 12px 11px 12px;border-radius:18px;background:rgba(255,255,255,.045);text-align:left;width:100%;transition:transform .15s}
.f2row:active{transform:scale(.985)}
.f2row.dis{opacity:.5}
.f2ri{flex:0 0 48px;width:48px;height:48px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06)}
.f2ri .av{width:48px;height:48px}
.f2ri .av.sil{box-shadow:0 0 0 2px var(--lc,var(--lilac))}
.f2ri .f2e{font-style:normal;font-size:23px}
.f2rt{flex:1;min-width:0}
.f2rt b{display:block;font-size:15.5px;font-weight:800;line-height:1.35}
.f2rt small{display:block;font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f2row em{flex:0 0 auto;font-style:normal;font-size:13px;font-weight:700;padding:7px 14px;border-radius:14px;background:rgba(255,255,255,.08);color:#fff}
.f2note{font-size:12px;color:var(--dim);text-align:center;margin:14px 0 0;line-height:1.6}
.fac.f2 .fmap{margin-top:10px}

/* ---------- 二、過場 ---------- */
.cut .cuthud,.cut .cutbody,.cut .cutfoot{z-index:2}/* 沒有車廂圖的時候，畫出來的窗框會蓋住字 */
.cut .cutskip.cx{position:absolute;left:0;right:0;bottom:28px;text-align:center;font-size:11px;color:rgba(255,255,255,.5);z-index:5}
/* 飛行船：圓形的舷窗、天空色 */
.cut.air .cutbg{background:linear-gradient(180deg,#5c8fd6,#b9d3f2 70%,#e9d7ec)}
.cut.air.night .cutbg{background:linear-gradient(180deg,#0b1430,#263a70 70%,#4a3a6e)}
.cut.air .cutwin .wglass{border-radius:50%;left:10%;right:10%;top:13%;bottom:43%}
.cut.air .cutwin .wtop::after{display:none}
.cut.air .cutlayer.to.tall{background-size:cover}
/* 開播倒數 */
.cut.golive{background:#05030a}
.glbg{position:absolute;inset:-20px;background-size:cover;background-position:center;filter:blur(6px) brightness(.42)}
.glsh{position:absolute;inset:0;background:radial-gradient(70% 50% at 50% 38%,transparent,rgba(5,3,10,.82))}
.glcam{position:absolute;left:50%;top:28%;width:150px;height:150px;margin:-75px 0 0 -75px;animation:glfloat 2.4s ease-in-out infinite}
.glcam.img{object-fit:contain;filter:drop-shadow(0 18px 30px rgba(0,0,0,.6))}
@keyframes glfloat{50%{transform:translateY(-8px)}}
.glcam.css i{position:absolute}
.glcam.css .gb{left:16%;right:16%;top:28%;bottom:24%;border-radius:28px;background:linear-gradient(160deg,#3c3550,#16111f);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 22px 40px rgba(0,0,0,.6)}
.glcam.css .gl{left:35%;top:38%;width:30%;height:30%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#8fd3ff,#0b1d3a 60%,#000);box-shadow:0 0 0 5px #0c0a12,0 0 0 6px rgba(255,255,255,.14)}
.glcam.css .gp{left:6%;right:6%;top:18%;height:6px;border-radius:3px;background:rgba(255,255,255,.22);box-shadow:0 0 12px rgba(255,255,255,.25)}
.glcam.css .gr{right:24%;top:33%;width:9px;height:9px;border-radius:50%;background:#ff2a4f;box-shadow:0 0 10px #ff2a4f;animation:recb 1s steps(2) infinite}
@keyframes recb{50%{opacity:.15}}
.glrec{position:absolute;top:58px;left:18px;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:900;letter-spacing:.14em;color:#fff}
.glrec i{width:9px;height:9px;border-radius:50%;background:#ff2a4f;animation:recb 1s steps(2) infinite}
.glnum{position:absolute;left:0;right:0;top:50%;height:120px;text-align:center;pointer-events:none}
.glnum b,.glnum em{position:absolute;left:0;right:0;top:0;font-family:var(--num);font-weight:600;font-size:108px;line-height:1;color:#fff;opacity:0;text-shadow:0 0 40px rgba(255,61,139,.7)}
.cut.golive.on .glnum b:nth-child(1){animation:gln .62s ease .15s both}
.cut.golive.on .glnum b:nth-child(2){animation:gln .62s ease .8s both}
.cut.golive.on .glnum b:nth-child(3){animation:gln .62s ease 1.45s both}
.glnum em{font-style:normal;font-family:var(--sans);font-weight:900;font-size:54px;letter-spacing:.2em;top:22px;color:#fff;text-shadow:0 0 30px #ff2a4f,0 0 60px rgba(255,42,79,.6)}
.cut.golive.on .glnum em{animation:glL .9s cubic-bezier(.2,.9,.3,1.3) 2.1s both}
@keyframes gln{0%{opacity:0;transform:scale(1.8)}25%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:scale(.7)}}
@keyframes glL{0%{opacity:0;transform:scale(2.2)}60%{opacity:1;transform:scale(.95)}100%{opacity:1;transform:scale(1)}}
.glv{position:absolute;left:0;right:0;bottom:124px;text-align:center;opacity:0;transition:opacity .4s 1.9s}
.cut.golive.on .glv{opacity:1}
.glv small{display:block;font-size:11px;letter-spacing:.24em;color:var(--dim)}
.glv b{font-family:var(--num);font-size:34px;font-weight:600;color:#fff}
.gldm{position:absolute;left:0;right:0;bottom:62px;height:56px;overflow:hidden}
.gldm i{position:absolute;left:100%;white-space:nowrap;font-style:normal;font-size:13px;color:#fff;padding:3px 10px;border-radius:12px;background:rgba(0,0,0,.42);top:calc(var(--i) * 13px)}
.cut.golive.on .gldm i{animation:gldm 2.6s linear calc(2.1s + var(--i) * .2s) both}
.gldm i b{color:var(--cyan);font-weight:600;margin-right:6px}
@keyframes gldm{from{transform:translateX(0)}to{transform:translateX(-200%)}}
/* 白天轉夜晚 */
.cut.dusk{background:#07040b}
.dkA,.dkB{position:absolute;inset:0;background-size:cover;background-position:center}
.dkB{opacity:0;transition:opacity 1.7s ease .7s}
.cut.dusk.on .dkB{opacity:1}
.cut.dusk.same .dkB{filter:brightness(.42) saturate(1.25) hue-rotate(-14deg)}
.dksky{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,150,90,.5),rgba(255,80,140,.28) 42%,transparent 78%);mix-blend-mode:soft-light;transition:opacity 1.7s ease .6s}
.cut.dusk.on .dksky{opacity:.2}
.dksky::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,48,.55),rgba(20,8,40,.15));opacity:0;transition:opacity 1.7s ease .8s;mix-blend-mode:normal}
.cut.dusk.on .dksky::after{opacity:1}
.dklit i{position:absolute;left:var(--x);top:var(--y);width:4px;height:4px;border-radius:50%;background:#ffd37a;box-shadow:0 0 10px 2px rgba(255,180,90,.8);opacity:0}
.dklit i:nth-child(3n){background:#ff6fae;box-shadow:0 0 10px 2px rgba(255,95,162,.8)}
.dklit i:nth-child(4n){background:#7ad8ff;box-shadow:0 0 10px 2px rgba(122,216,255,.8)}
.cut.dusk.on .dklit i{animation:dkl .5s ease calc(var(--d) + .9s) forwards}
@keyframes dkl{to{opacity:1}}
.dkt{position:absolute;left:0;right:0;top:30%;text-align:center;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.6);opacity:0;transform:translateY(10px);transition:opacity .6s 1.2s,transform .6s 1.2s}
.cut.dusk.on .dkt{opacity:1;transform:none}
.dkt small{display:block;font-size:12px;letter-spacing:.3em}
.dkt b{display:block;font-family:var(--num);font-size:64px;font-weight:600;line-height:1.1}
.dkt span{font-family:var(--serif);font-size:15px}
/* 禁慾深淵的門 */
.cut.abyssg{background:#050204}
.agbg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.55) saturate(1.2);transform:scale(1.08);transition:transform 3s ease}
.cut.abyssg.on .agbg{transform:scale(1)}
.agred{position:absolute;inset:0;background:radial-gradient(60% 45% at 50% 52%,rgba(255,40,70,.55),transparent 70%);opacity:0;transition:opacity 1.2s ease .9s}
.cut.abyssg.on .agred{opacity:1}
.agdoor{position:absolute;top:0;bottom:0;width:50.5%;transition:transform 1.5s cubic-bezier(.6,0,.2,1) .5s}
.agdoor.l{left:0;background:linear-gradient(90deg,#0b0508,#1d0b11 70%,#2a0f17)}
.agdoor.r{right:0;background:linear-gradient(270deg,#0b0508,#1d0b11 70%,#2a0f17)}
.agdoor::after{content:'';position:absolute;top:44%;width:5px;height:64px;border-radius:3px;background:rgba(255,80,110,.6);box-shadow:0 0 12px rgba(255,60,90,.8)}
.agdoor.l::after{right:14px}.agdoor.r::after{left:14px}
.cut.abyssg.on .agdoor.l{transform:translateX(-100%)}
.cut.abyssg.on .agdoor.r{transform:translateX(100%)}
.agt{position:absolute;left:0;right:0;bottom:22%;text-align:center;opacity:0;transform:translateY(10px);transition:opacity .7s 1.4s,transform .7s 1.4s}
.cut.abyssg.on .agt{opacity:1;transform:none}
.agt small{display:block;font-size:11px;letter-spacing:.35em;color:#ff8fa3}
.agt b{display:block;font-family:var(--serif);font-size:34px;font-weight:900;color:#ffd0d8;text-shadow:0 0 24px rgba(255,40,70,.7)}
.agt span{display:block;font-size:13px;color:#e9d3da;margin-top:6px}
/* 電梯 */
.cut.lift{background:#06040b}
.lfview{position:absolute;left:0;right:0;top:-60%;height:220%;background-size:cover;background-position:center;filter:brightness(.7);transform:translateY(-18%);transition:transform 2.4s cubic-bezier(.45,0,.2,1)}
.cut.lift.on .lfview{transform:translateY(22%)}
.lfin{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.lfframe i{position:absolute;background:linear-gradient(90deg,#120a1b,#1d1229)}
.lfframe .lfl{left:0;top:0;bottom:0;width:8%}
.lfframe .lfr{right:0;top:0;bottom:0;width:8%;background:linear-gradient(270deg,#120a1b,#1d1229)}
.lfframe .lft{left:0;right:0;top:0;height:12%;background:linear-gradient(180deg,#0d0713,#1b1026)}
.lfframe .lfb{left:0;right:0;bottom:0;height:24%;background:linear-gradient(180deg,#1b1026,#0d0713)}
.lfframe .lfg{left:8%;right:8%;top:12%;bottom:24%;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.06) 45%,transparent 58%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.lfframe .lfg::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;background:rgba(255,255,255,.08)}
.lfpanel{position:absolute;left:50%;top:15%;transform:translateX(-50%);min-width:120px;padding:10px 18px;border-radius:16px;background:rgba(6,4,11,.72);backdrop-filter:blur(8px);text-align:center;border:1px solid rgba(255,255,255,.1)}
.lfpanel small{display:block;font-size:11px;color:var(--dim);letter-spacing:.1em}
.lfpanel div{display:flex;align-items:baseline;justify-content:center;gap:2px}
.lfpanel b{font-family:var(--num);font-size:46px;font-weight:600;color:#ffd37a;line-height:1}
.lfpanel span{font-family:var(--num);font-size:18px;color:#ffd37a}
.lfarrow{display:block;font-style:normal;font-size:12px;color:#ffd37a;animation:lfa .8s ease-in-out infinite}
.cut.lift.arr .lfarrow{animation:none;opacity:.3}
@keyframes lfa{50%{transform:translateY(-4px);opacity:.4}}
/* 擦肩 */
.cut.glimpse{background:#07040b}
.gmbg{position:absolute;inset:-20px;background-size:cover;background-position:center;filter:blur(5px) brightness(.38) saturate(.8)}
.gmcrowd{position:absolute;top:0;bottom:0;width:60%;filter:blur(4px);transition:transform 1.6s cubic-bezier(.3,0,.2,1) .2s,opacity 1.2s ease .9s;
 background:
  radial-gradient(circle at 22% 46%,#030205 0 6.5%,transparent 7%),radial-gradient(ellipse at 22% 78%,#030205 0 20%,transparent 20.5%),
  radial-gradient(circle at 55% 40%,#05030a 0 7%,transparent 7.5%),radial-gradient(ellipse at 55% 74%,#05030a 0 22%,transparent 22.5%),
  radial-gradient(circle at 85% 50%,#020104 0 6%,transparent 6.5%),radial-gradient(ellipse at 85% 82%,#020104 0 19%,transparent 19.5%)}
.gmcrowd.l{left:-8%}
.gmcrowd.r{right:-8%;transform:scaleX(-1)}
.cut.glimpse.on .gmcrowd{opacity:.55}
.cut.glimpse.on .gmcrowd.l{transform:translateX(-42%)}
.cut.glimpse.on .gmcrowd.r{transform:scaleX(-1) translateX(-42%)}
.gmfig{position:absolute;left:13%;right:13%;top:16%;bottom:26%;border-radius:22px;background-size:cover;background-position:center 30%;opacity:0;transform:scale(.97);transition:opacity 1s ease .9s,transform 2.6s ease .9s;-webkit-mask:radial-gradient(75% 70% at 50% 45%,#000 55%,transparent 100%);mask:radial-gradient(75% 70% at 50% 45%,#000 55%,transparent 100%)}
.gmfig.sil{background-position:center 40%;filter:brightness(.85) saturate(.9)}
.cut.glimpse.on .gmfig{opacity:1;transform:scale(1)}
.cut.glimpse.on .gmfig.flip{transform:scaleX(-1)}
.gmt{position:absolute;left:26px;right:26px;bottom:15%;text-align:center;font-family:var(--serif);font-size:16px;line-height:1.85;color:#f1e6f6;text-shadow:0 2px 12px rgba(0,0,0,.7);opacity:0;transition:opacity .8s 1.6s}
.cut.glimpse.on .gmt{opacity:1}

/* ---------- 三、支線 ---------- */
.slend{position:absolute;inset:0;z-index:46}
.slend .mlin h2{font-size:40px}
.nc.slc .nct .tag{background:color-mix(in srgb,var(--lc) 30%,rgba(255,255,255,.08));color:#fff}
.dxsp.side{border-color:rgba(159,180,255,.32);background:linear-gradient(120deg,rgba(159,180,255,.15),rgba(255,255,255,.02))}
.dxsp.side b{color:#cdd8ff}
.dxsp.city{border-color:rgba(94,231,255,.3);background:linear-gradient(120deg,rgba(94,231,255,.12),rgba(255,255,255,.02))}
.dxsp.city b{color:#a8f2ff}
.dxchs.n3{grid-template-columns:repeat(3,1fr)}
.albc.n3{grid-template-columns:repeat(3,1fr)}
.alb.sla .albh .slav .av{width:44px;height:44px}
.alb.sla .albh .slav .av.gl{display:flex;align-items:center;justify-content:center;background:linear-gradient(170deg,#241634,#120a1c)}
.alb.sla .albh .slav .av.gl b{font-family:var(--serif);font-size:18px;color:rgba(255,255,255,.7)}

/* 20261106.9：首頁大卡的標籤（主線／支線／通告…）改成跟時段同一行，卡片被壓矮的時候不會跟文字疊在一起 */
.h4ev .h4evt small .h4evtag{position:static;display:inline-block;vertical-align:1px;margin:0 7px 0 0;padding:2px 8px;font-size:10.5px;line-height:1.5;border-radius:7px}
.h4ev.k-sl .h4evtag{background:rgba(159,180,255,.9);color:#0c0b16}
/* 收藏：見過的隱藏角色用頭像；章節名字太長的時候兩行平均分 */
.albh .sil.av1{filter:none;background-position:center 30%}
.albi span{text-wrap:balance;word-break:break-all;max-width:100%}