/* 🎬 观影投票 —— 沿用公寓站配色（style.css 的 :root），这里只加片单/特效 */

/* 背景星尘：铺满、不挡点击 */
#stars{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.55}
.wrap{position:relative;z-index:1}

.etopbar{display:flex;justify-content:flex-end;padding:2px 0 0}
.lobby-btn{display:inline-flex;align-items:center;gap:5px;text-decoration:none;color:#eef0ff;font-size:11.5px;
  font-weight:700;line-height:1;background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  border:1px solid rgba(150,120,255,.4);border-radius:99px;padding:5px 11px;transition:.15s}
.lobby-btn:hover{transform:translateY(-1px);border-color:rgba(180,150,255,.8)}

.fhead{text-align:center;padding:16px 0 6px}
.fhead .title{font-size:clamp(24px,5vw,34px)}
.fsub{font-size:12.5px;color:var(--ink-dim);margin-top:6px}
.fhead .chips{justify-content:center;margin:12px 0 0}

/* ── 身份条 ── */
.idbar{margin:16px 0 18px}
.idrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.idlab{font-size:13.5px;color:var(--ink-dim);font-weight:700}
.idin{width:110px;padding:9px 12px;border-radius:11px;border:1px solid var(--panel-b);
  background:rgba(0,0,0,.3);color:var(--ink);font-size:15px;letter-spacing:2px;outline:none;text-align:center}
.idin:focus{border-color:var(--pink-soft);box-shadow:0 0 0 3px rgba(255,92,138,.15)}
.idwho{font-size:13.5px;color:var(--pink-soft);font-weight:700}
.idwho.bad{color:var(--muted);font-weight:400}
.anonline{margin-top:10px}

/* ── 片单网格 ── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px;margin-bottom:22px}
@media(max-width:560px){.grid{grid-template-columns:repeat(2,1fr);gap:12px}}

/* ⚠️ 别加 transform-style:preserve-3d —— 3D 上下文里同层元素不按 DOM 顺序绘制，
   会让底下的兜底封面透到真海报上面。倾斜用的是 transform 里的 perspective()，本来也不需要它。 */
.fcard{position:relative;border-radius:16px;overflow:hidden;cursor:pointer;background:#0c0714;
  border:1px solid var(--panel-b);
  transition:transform .28s cubic-bezier(.2,.8,.3,1),box-shadow .28s,border-color .2s;
  box-shadow:0 8px 26px rgba(0,0,0,.45)}
.fcard:hover{border-color:hsla(var(--h),90%,72%,.75);
  box-shadow:0 18px 46px rgba(0,0,0,.6),0 0 42px -10px hsla(var(--h),90%,60%,.55)}
.fcard.on{border-color:hsl(var(--h),95%,68%);
  box-shadow:0 18px 46px rgba(0,0,0,.6),0 0 0 2px hsl(var(--h),95%,68%),0 0 60px -8px hsla(var(--h),95%,60%,.8)}

/* 海报位：有 jpg 用 jpg，没有就用配色兜底封面 */
.pwrap{position:relative;width:100%;padding-bottom:148%;overflow:hidden;
  background:linear-gradient(160deg,hsl(var(--h),58%,26%),hsl(calc(var(--h) + 40),52%,12%) 72%)}
.pwrap img{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.8,.3,1),filter .3s}
.fcard:hover .pwrap img{transform:scale(1.07)}
/* 兜底封面：大写英文名 + 主视觉 emoji */
.pfall{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:14px;text-align:center}
.pfall .mk{font-size:44px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.pfall .en{font-family:Georgia,serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:hsla(var(--h),80%,88%,.85);line-height:1.7}
.pfall::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 1px,transparent 1px 7px)}
/* 扫光 */
.pwrap::after{content:"";position:absolute;top:-60%;left:-70%;width:45%;height:220%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transform:rotate(18deg);transition:left .65s ease}
.fcard:hover .pwrap::after{left:130%}

.fmeta{padding:11px 12px 12px;position:relative}
.fname{font-size:14.5px;font-weight:800;color:var(--ink);line-height:1.35}
.ftag{margin-top:4px;font-size:11.5px;color:var(--muted)}
.fbar{margin-top:9px;height:5px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
.fbar i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,hsl(var(--h),90%,62%),hsl(calc(var(--h) + 45),95%,70%));
  transition:width .9s cubic-bezier(.2,.8,.3,1)}
.fnum{position:absolute;right:12px;top:11px;font-size:12px;font-weight:800;color:hsl(var(--h),90%,76%)}

.pick{position:absolute;left:9px;top:9px;z-index:3;display:flex;align-items:center;gap:4px;
  padding:5px 9px;border-radius:99px;font-size:11.5px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--pink),var(--red));box-shadow:0 4px 14px rgba(255,60,110,.45);
  opacity:0;transform:translateY(-6px) scale(.9);transition:.25s}
.fcard.on .pick{opacity:1;transform:none}
.crown{position:absolute;right:9px;top:9px;z-index:3;font-size:17px;opacity:0;transform:scale(.6);transition:.3s}
.fcard.lead .crown{opacity:1;transform:none}

/* ── 结果条 ── */
.resultcard{margin-bottom:16px}
.bars{display:flex;flex-direction:column;gap:9px}
.brow{display:flex;align-items:center;gap:10px;font-size:13px}
.brk{width:20px;text-align:center;font-weight:800;color:var(--muted)}
.bnm{width:132px;flex:0 0 auto;color:var(--ink);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btrack{flex:1;height:11px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.btrack i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,hsl(var(--h),88%,58%),hsl(calc(var(--h) + 45),95%,70%));
  transition:width 1s cubic-bezier(.2,.8,.3,1)}
.bct{width:52px;text-align:right;color:var(--ink-dim);font-variant-numeric:tabular-nums}
@media(max-width:560px){.bnm{width:88px;font-size:12px}}
.feed{margin-top:12px;padding-top:10px;border-top:1px solid var(--panel-b);
  font-size:12px;color:var(--muted);line-height:1.9;max-height:132px;overflow-y:auto}
.feed b{color:var(--ink-dim)}

.foot{text-align:center;color:var(--muted);font-size:11.5px;margin:18px 0 8px}

/* ── 简介弹层 ── */
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:18px}
.modal[hidden]{display:none}
.mbg{position:absolute;inset:0;background:rgba(8,4,14,.72);backdrop-filter:blur(6px);animation:fadein .25s}
.mcard{position:relative;width:min(560px,100%);max-height:86vh;overflow-y:auto;border-radius:20px;padding:0;
  background:linear-gradient(170deg,hsl(var(--h),40%,16%),#140b1e 62%);
  border:1px solid hsla(var(--h),80%,65%,.4);box-shadow:0 30px 80px rgba(0,0,0,.7);
  animation:pop .34s cubic-bezier(.2,1.4,.4,1)}
@keyframes fadein{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(22px) scale(.94)}}
.mhero{position:relative;height:190px;overflow:hidden;border-radius:20px 20px 0 0}
.mhero img{width:100%;height:100%;object-fit:cover;display:block}
.mhero .pfall{border-radius:20px 20px 0 0}
.mhero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(20,11,30,.95))}
.mbody{padding:0 20px 20px;margin-top:-34px;position:relative;z-index:2}
.mtitle{font-size:22px;font-weight:800;color:var(--ink)}
.men{font-family:Georgia,serif;font-size:12px;color:hsla(var(--h),75%,80%,.9);letter-spacing:.1em;margin-top:3px}
.mtags{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}
.mtags span{font-size:11.5px;padding:4px 10px;border-radius:20px;background:rgba(255,255,255,.07);
  border:1px solid var(--panel-b);color:var(--ink-dim)}
.mdesc{font-size:14px;line-height:1.95;color:var(--ink-dim)}
.watchbox{margin-top:16px;padding:12px 13px;border-radius:13px;
  background:hsla(var(--h),55%,50%,.10);border:1px solid hsla(var(--h),70%,60%,.28)}
.wlab{font-size:12.5px;font-weight:700;color:hsl(var(--h),85%,80%);margin-bottom:9px}
.wrow{display:flex;gap:8px;flex-wrap:wrap}
.wbtn{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:10px;
  font-size:13px;font-weight:700;text-decoration:none;color:var(--ink);
  background:rgba(255,255,255,.09);border:1px solid var(--panel-b);transition:.15s}
.wbtn:hover{background:rgba(255,255,255,.16);border-color:hsla(var(--h),80%,70%,.7);transform:translateY(-1px)}
.wbtn i{font-style:normal;font-size:10.5px;padding:1px 5px;border-radius:20px;
  background:linear-gradient(135deg,var(--pink),var(--red));color:#fff}
.wbtn.db{color:var(--ink-dim);background:transparent}
.wnote{margin-top:8px;font-size:11.5px;color:var(--muted)}
.lockhint{margin-top:10px;text-align:center;font-size:12px;color:var(--muted)}
.macts{display:flex;gap:10px;margin-top:18px}
.macts .btn{flex:1}
.mclose{position:absolute;right:12px;top:10px;z-index:4;width:32px;height:32px;border-radius:50%;
  border:none;background:rgba(0,0,0,.45);color:#fff;font-size:17px;cursor:pointer;line-height:1}

/* ── toast ── */
.ftoast{position:fixed;left:50%;bottom:34px;transform:translate(-50%,20px);z-index:80;opacity:0;
  padding:11px 20px;border-radius:14px;font-size:14px;font-weight:700;color:#fff;pointer-events:none;
  background:linear-gradient(135deg,var(--pink),var(--red));box-shadow:0 10px 30px rgba(0,0,0,.5);transition:.28s}
.ftoast.on{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}