/* 900 用 700 顶：少下一个 ~250KB 中文字体，观感几乎一样 */
@font-face{font-family:'NSSC';font-weight:400;font-display:swap;src:url('../assets/fonts/nssc400.woff2?v=2') format('woff2')}
@font-face{font-family:'NSSC';font-weight:700;font-display:swap;src:url('../assets/fonts/nssc700.woff2?v=2') format('woff2')}
@font-face{font-family:'NSSC';font-weight:900;font-display:swap;src:url('../assets/fonts/nssc700.woff2?v=2') format('woff2')}
@font-face{font-family:'Bodoni';font-display:swap;src:url('../assets/fonts/bodoni400.woff2?v=2') format('woff2')}

/* 末行只剩「1.90」「切」这种孤字很难看。
   中文可以任意断行，text-wrap:pretty 那套「不留孤立单词」的规则对中文不起作用 ——
   短段落要用 balance，把每行拉成等长，末行就不会只剩一两个字。*/
.what-is,.why,.crop .sub,.tier-dead,.verdict .v,.pilg .d,.pits p,
.k-body p,.k-fig .note,.fam .bl,.k-head p,.src p{text-wrap:balance}
p,dd,li,.d{text-wrap:pretty}
:root{
  --paper:#FAF7EF; --carbon:#0B0B0C; --absent:#B4564C;
  --serif:'NSSC','Songti SC','Noto Serif CJK SC',serif;
  --la:'Bodoni','Didot','Times New Roman',serif;
  --t:cubic-bezier(.5,0,.1,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#000;color:var(--paper);font-family:var(--serif)}
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* 就绪前的遮罩。没有假进度条 —— 数据几十毫秒就到，编一个 0→100 的动画是骗人 */
#pre{position:fixed;inset:0;z-index:900;background:#000;transition:opacity .5s var(--t)}
#pre.out{opacity:0;pointer-events:none}

/* 面板关闭键：统一右上角，纯中文 */
.panel-close{position:fixed;top:24px;right:8vw;z-index:5;font-size:12px;letter-spacing:.28em;
  color:rgba(250,247,239,.7);padding:6px 2px;border-bottom:1px solid rgba(250,247,239,.3);
  transition:color .25s var(--t),border-color .25s var(--t)}
.panel-close:hover{color:var(--paper);border-bottom-color:var(--paper)}

/* 顶栏 */
.top{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;
  align-items:flex-start;padding:24px 32px}
.top-acts{display:flex;gap:18px;align-items:center}
/* 顶栏保持纯排版。图标只做浏览器标签页与主屏图标 ——
   那两处没有字标，需要一个符号；这里字标已经是完整的识别物，
   旁边再放一个抽象小标记等于同一位置放两个识别元素。 */
.mark .w{font-weight:900;font-size:38px;letter-spacing:.1em;line-height:1}
/* 中英两行都大会顶在一起 —— 中间垫一行小的、灰的，把呼吸感让出来 */
.mark .s{font-family:var(--la);font-size:10px;letter-spacing:.46em;
  color:rgba(250,247,239,.34);margin-top:12px}
/* 城市：跟字标拉开一段距离，用一枚小圆点系在它下面，而不是紧贴着 */
.city{display:inline-flex;align-items:center;gap:10px;margin-top:24px;padding:0;position:relative}
.city::before{content:'';position:absolute;left:1px;top:-15px;width:1px;height:13px;
  background:rgba(250,247,239,.26)}
.city .nm{font-weight:400;font-size:20px;letter-spacing:.26em;line-height:1;color:rgba(250,247,239,.86);
  transition:color .3s var(--t)}
.city:hover .nm{color:var(--paper)}
.city svg{opacity:.5;transition:transform .3s var(--t)}
.city[aria-expanded="true"] svg{transform:rotate(180deg)}

/* 下拉：城市名都是两个字，不需要大白块 —— 改成暗底细描边，和站上其余浮层同源 */
#cityMenu{position:fixed;top:152px;left:30px;z-index:61;display:none;padding:6px;border-radius:4px;
  background:rgba(10,10,11,.94);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:inset 0 0 0 1px rgba(250,247,239,.16),0 20px 44px rgba(0,0,0,.7)}
#cityMenu.on{display:grid;grid-template-columns:repeat(2,1fr);gap:2px}
#cityMenu button{padding:8px 12px;border-radius:2px;font-size:13px;letter-spacing:.14em;
  color:rgba(250,247,239,.72);white-space:nowrap;transition:background .2s var(--t),color .2s var(--t)}
#cityMenu button:hover{background:rgba(250,247,239,.1);color:var(--paper)}
#cityMenu button[aria-current="true"]{color:var(--carbon);background:var(--paper);font-weight:900}

/* 文字层 */
#txt{position:fixed;left:50%;top:0;z-index:20;transform:translateX(-50%);will-change:transform;pointer-events:none}
/* 透明度改由 paintSlots() 每帧算，和位移同源；这里不能再挂 transition，否则又两条时间线 */
.slot{position:relative;padding:32px 40px;transform-origin:50% 50%;will-change:transform,opacity;display:flex;flex-direction:column;pointer-events:auto}
.hd{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hd .yr{font-family:var(--la);font-size:24px;line-height:1}
.dot{width:2.5px;height:2.5px;border-radius:50%;background:rgba(250,247,239,.4)}
.lbl{font-size:11px;letter-spacing:.3em;color:rgba(250,247,239,.62)}
.lbl.on{color:rgba(250,247,239,.92)}
/* 判词：三点刻度 + 一句判断。
   刻度承担排序 —— 光靠「非挑不可 / 值得挑挑 / 不必细挑」三句话，
   读者要在脑子里比较词义才知道谁高谁低；点亮几颗一眼就有答案。 */
.pill{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.2em;
  color:rgba(250,247,239,.62)}
.pill .meter{display:inline-flex;gap:4px;font-style:normal}
.pill .meter b{width:4px;height:4px;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(250,247,239,.42)}
.pill .meter b.on{background:currentColor;box-shadow:none}
/* 不能叫 .top —— 顶栏就叫 .top，带 position:fixed，判词会被钉到视口右上角。
   （天梯行也栽过一次，改名成了 .row.lead。）*/
.pill.must{color:var(--paper)}
.pill.mid{color:rgba(250,247,239,.78)}
.pill.off{color:rgba(250,247,239,.5)}
.pill.pending{color:var(--absent)}
.pill.pending .meter{display:none}

/* 剧照已经压过一层暗，字不必再背一块阴影 —— 那块浅黑框看着很脏 */
.tt{margin-top:auto;padding-top:32px;font-weight:700;font-size:clamp(30px,3.6vw,38px);line-height:1.3;letter-spacing:.03em}
.en{font-family:var(--la);font-size:15px;letter-spacing:.3em;color:rgba(250,247,239,.7);margin-top:12px}

/* 信息条：横线只跟着内容走，不拖到栏宽尽头 —— 英文名那行尤其不该拖一条长线 */
.specs{margin-top:24px;display:grid;grid-template-columns:auto auto;column-gap:20px;
  justify-content:start;max-width:360px}
.specs dt{font-size:11px;letter-spacing:.3em;color:rgba(250,247,239,.58);padding:6px 0 4px;
  white-space:nowrap;border-bottom:1px solid rgba(250,247,239,.14)}
.specs dd{font-size:13px;padding:6px 0 4px;border-bottom:1px solid rgba(250,247,239,.14);
  max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.specs dd i{display:block;font-style:normal;font-family:var(--la);font-size:11px;
  color:rgba(250,247,239,.46);letter-spacing:.03em;margin-top:4px;
  overflow:hidden;text-overflow:ellipsis}
.specs dd.todo{color:rgba(250,247,239,.4)}

/* 结论：直接落在画面上，没有框。
   压暗由着色器画在卡面右下角 —— DOM 上任何带 backdrop-filter 的半透明块，
   在滚动时都会被浏览器反复升降合成层，模糊忽有忽无，看着就是「突变」。 */
.verdict{position:absolute;right:40px;bottom:38px;width:246px;
  display:flex;flex-direction:column;gap:12px;text-align:right;align-items:flex-end}
.verdict .cap{font-size:10px;letter-spacing:.34em;color:rgba(250,247,239,.48)}
.verdict .line{display:flex;flex-direction:column;gap:8px;min-width:0;align-items:flex-end}
.verdict .v{font-weight:900;font-size:17px;letter-spacing:.02em;line-height:1.3}
.verdict .at{font-family:var(--la);font-size:12px;letter-spacing:.06em;color:rgba(250,247,239,.55)}
.verdict .act{display:flex;align-items:center;gap:12px;margin-top:4px}
.verdict .cnt{font-size:11px;letter-spacing:.08em;color:rgba(250,247,239,.5)}
.verdict .cnt b{font-weight:400;color:var(--absent)}

/* 导航就长成导航的样子：一条下划线加一个箭头 */
.go{position:relative;display:inline-flex;align-items:center;gap:10px;padding:0 0 6px;
  color:var(--paper);border-bottom:1px solid rgba(250,247,239,.45);
  transition:border-color .3s var(--t),gap .3s var(--t)}
.go:hover,.go:focus-visible{border-bottom-color:var(--paper);gap:16px}
.go .t{font-weight:700;font-size:13px;letter-spacing:.22em}
.go .s{display:grid;place-items:center}
.go.off{color:rgba(250,247,239,.6);border-bottom-color:rgba(250,247,239,.28)}


/* 厅型天梯抽屉 */
#drawer{position:fixed;inset:0;z-index:120;background:rgba(6,6,7,.9);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  display:none;overflow-y:auto;padding:68px 8vw 68px}
#drawer.on{display:block}
#drawer h2{font-weight:900;font-size:24px;letter-spacing:.04em}
#drawer .meta{font-size:12px;letter-spacing:.16em;color:rgba(250,247,239,.55);margin-top:8px}
#drawer .close{position:fixed;top:26px;right:30px;font-size:11px;letter-spacing:.3em;
  border-bottom:1px solid rgba(250,247,239,.4);padding-bottom:4px}
.tier{border-top:1px solid rgba(250,247,239,.15);padding:24px 0 20px;display:grid;
  grid-template-columns:40px minmax(0,300px) minmax(0,1fr);gap:24px;align-items:start}
.tier .no{font-family:var(--la);font-size:17px;color:rgba(250,247,239,.42);line-height:1.3}
.tier .nm{font-weight:900;font-size:17px;letter-spacing:.03em;line-height:1.3}
.tier .best{font-family:var(--sc);font-weight:400;font-size:10px;letter-spacing:.22em;
  color:var(--carbon);background:var(--paper);padding:4px 8px;margin-left:10px;
  vertical-align:middle;white-space:nowrap}
.tier .what-is{font-size:12px;line-height:1.95;color:rgba(250,247,239,.55);margin-top:10px}
/* 影片相关的判断要压过厅型的通用介绍 —— 前者才是这次排序的理由 */
.tier .why{font-size:12px;line-height:1.95;color:var(--paper);margin-top:10px;
  padding-left:12px;border-left:1px solid rgba(250,247,239,.34)}
.tier .why b{font-family:var(--la);font-weight:400;color:var(--paper)}

.tier .where .cap{font-size:11px;letter-spacing:.2em;color:rgba(250,247,239,.5);
  padding-bottom:10px;border-bottom:1px solid rgba(250,247,239,.13)}
.tier .where .cap span{color:rgba(250,247,239,.32)}
.tier ul{list-style:none;margin-top:4px;columns:2;column-gap:32px}
/* 影院名与排数分成两列。原来排数是内联 <s>，影院名一长它就单独掉到第二行 ——
   52 个影院里有 40 多个都吊着一个孤零零的「11 排」，是这一页最刺眼的不齐。 */
.tier li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:13px;line-height:1.5;padding:8px 0;color:rgba(250,247,239,.8);
  break-inside:avoid;cursor:pointer;transition:color .25s var(--t)}
.tier li:hover,.tier li:focus-visible{color:var(--paper)}
.tier li s{flex:0 0 auto;text-decoration:none;font-family:var(--la);font-size:11px;
  color:rgba(250,247,239,.42);white-space:nowrap}
.tier li .cn{min-width:0;overflow:hidden;text-overflow:ellipsis}
.tier .flag{font-size:10px;letter-spacing:.2em;color:var(--absent);margin-top:10px}
.tier .more-halls{display:block;margin-top:10px;padding:0;font-size:11px;letter-spacing:.16em;
  color:rgba(250,247,239,.55);border-bottom:1px solid rgba(250,247,239,.22);padding-bottom:3px}
.tier .more-halls:hover{color:var(--paper);border-bottom-color:var(--paper)}
.tier ul.rest{margin-top:4px}

/* 影厅页：座位/幕体/首排可信度拆分 */
.conf-split{margin-top:20px;display:grid;gap:8px;padding:14px 0;
  border-top:1px solid rgba(250,247,239,.12);border-bottom:1px solid rgba(250,247,239,.12)}
.conf-split .cf{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  font-size:11px;letter-spacing:.06em}
.conf-split .cf b{font-weight:400;color:rgba(250,247,239,.45);letter-spacing:.2em}
.conf-split .cf.hi span{color:var(--paper)}
.conf-split .cf.est span{color:rgba(250,247,239,.55)}
.conf-split .cf.no span{color:rgba(250,247,239,.32)}

.tier-dead{display:flex;gap:16px;align-items:baseline;padding:8px 0}
.tier-dead .nm{font-size:13px;color:rgba(250,247,239,.62)}
.tier-dead .why{font-size:11px;color:rgba(250,247,239,.36);margin-left:auto}

#drawer .pil{margin-top:24px;border-top:1px solid rgba(250,247,239,.16);padding-top:20px}
#drawer .pil .k{font-size:10px;letter-spacing:.34em;color:rgba(250,247,239,.5)}
#drawer .pil .v{font-weight:900;font-size:17px;margin-top:8px}
#drawer .pil .d{font-size:12px;line-height:1.75;color:rgba(250,247,239,.62);
  margin-top:6px;max-width:640px;text-wrap:balance}

/* ---------- 右侧位置条：导航，不是片单 ---------- */
/* 只回答「第几部 / 共几部」。片名悬停才出；档期与挑厅结论在顶栏「片单」里。 */
#rail{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:58;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;padding:8px 0;
  opacity:.8;transition:opacity .35s var(--t)}
#rail.off{opacity:0;pointer-events:none}
#rail:hover,#rail.drag{opacity:1}
#rail .rail-pos{font-family:var(--la);font-size:12px;letter-spacing:.06em;
  color:rgba(250,247,239,.45);padding-right:2px;user-select:none}
#rail .rail-pos b{color:var(--paper);font-weight:400;font-size:15px}
#rail .rail-pos i{font-style:normal;margin:0 3px;opacity:.45}
#rail .rail-ticks{display:flex;flex-direction:column;gap:2px}
#rail button{position:relative;display:flex;align-items:center;justify-content:flex-end;
  height:22px;padding-right:2px;cursor:pointer}
#rail .tk{display:block;width:14px;height:1px;background:rgba(250,247,239,.32);
  transition:width .3s var(--t),background .3s var(--t),height .3s var(--t)}
#rail button:hover .tk{width:24px;background:rgba(250,247,239,.7)}
#rail button[aria-current] .tk{width:30px;height:2px;background:var(--paper)}
/* 片名只在悬停时出来，平时不占地方 —— 侧边不是目录 */
#rail .nm{position:absolute;right:36px;top:50%;transform:translateY(-50%) translateX(6px);
  white-space:nowrap;font-size:12px;letter-spacing:.04em;color:var(--paper);
  background:rgba(6,6,7,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  padding:6px 12px;opacity:0;pointer-events:none;
  transition:opacity .25s var(--t),transform .25s var(--t)}
#rail button:hover .nm,#rail.drag button[aria-current] .nm{opacity:1;transform:translateY(-50%) translateX(0)}


/* ---------- 知识层 ---------- */
.know{font-size:13px;letter-spacing:.28em;color:rgba(250,247,239,.88);padding-bottom:6px;
  border-bottom:1px solid rgba(250,247,239,.34);transition:color .3s var(--t),border-color .3s var(--t)}
.know:hover{color:var(--paper);border-bottom-color:var(--paper)}

/* ---------- 片单一览：决策，不是位置条 ---------- */
#films{position:fixed;inset:0;z-index:145;background:rgba(6,6,7,.92);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  display:none;overflow-y:auto;padding:68px 8vw 68px}
#films.on{display:block}
.films-head{max-width:720px;margin-bottom:28px}
.films-head .k{font-size:10px;letter-spacing:.34em;color:rgba(250,247,239,.45)}
.films-head h2{font-weight:900;font-size:24px;letter-spacing:.04em;margin-top:8px}
.films-head .meta{font-size:13px;line-height:1.75;color:rgba(250,247,239,.52);margin-top:12px;max-width:560px}
.films-head .meta strong{font-weight:400;color:rgba(250,247,239,.78)}
.film-list{list-style:none;max-width:720px}
.film-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 28px;
  align-items:center;padding:20px 0;border-top:1px solid rgba(250,247,239,.12)}
.film-list li.extra{opacity:.45}
.film-list .film-top{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.film-list .date{font-family:var(--la);font-size:13px;letter-spacing:.06em;color:rgba(250,247,239,.5)}
.film-list .pill{font-size:10px;letter-spacing:.18em;color:rgba(250,247,239,.55)}
.film-list .pill.must{color:var(--paper)}
.film-list .pill.mid{color:rgba(250,247,239,.72)}
.film-list .pill.off{color:rgba(250,247,239,.42)}
.film-list .pill.pending{color:var(--absent)}
.film-list .t{font-weight:700;font-size:18px;letter-spacing:.03em;line-height:1.35;color:rgba(250,247,239,.92)}
.film-list .en{font-family:var(--la);font-size:12px;letter-spacing:.08em;color:rgba(250,247,239,.38);margin-top:6px}
.film-list .hall-tip{margin-top:12px;font-size:12px;line-height:1.55;color:rgba(250,247,239,.58)}
.film-list .hall-tip span{display:inline-block;margin-right:8px;letter-spacing:.16em;
  font-size:10px;color:rgba(250,247,239,.36)}
.film-list .film-acts{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:7.5em}
.film-list .go-card,.film-list .go-hall{padding:8px 12px;font-size:11px;letter-spacing:.14em;
  text-align:center;border:1px solid rgba(250,247,239,.22);color:rgba(250,247,239,.72);
  transition:border-color .2s var(--t),color .2s var(--t),background .2s var(--t)}
.film-list .go-card:hover,.film-list .go-hall:hover{color:var(--paper);border-color:rgba(250,247,239,.5)}
.film-list .go-hall{background:var(--paper);color:var(--carbon);border-color:var(--paper);font-weight:700}
.film-list .go-hall:hover{background:rgba(250,247,239,.9);color:var(--carbon)}
.film-list .muted{font-size:11px;letter-spacing:.12em;color:rgba(250,247,239,.35);text-align:center}
@media (max-width:640px){
  .film-list li{grid-template-columns:1fr;gap:14px}
  .film-list .film-acts{flex-direction:row;min-width:0}
  .film-list .go-card,.film-list .go-hall{flex:1}
}

#know{position:fixed;inset:0;z-index:150;background:rgba(6,6,7,.9);
  -webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);
  display:none;overflow-y:auto;padding:68px 8vw 88px}
#know.on{display:block}
#know .back{position:fixed;top:26px;left:8vw;font-size:11px;letter-spacing:.3em;
  border-bottom:1px solid rgba(250,247,239,.4);padding-bottom:4px;z-index:2}
/* ---------- 知识手册 ---------- */
.k-head{max-width:660px;margin-bottom:20px}
.k-eyebrow{font-size:10px;letter-spacing:.5em;color:rgba(250,247,239,.42);margin-bottom:16px}
#know h2{font-weight:900;font-size:30px;letter-spacing:.03em;line-height:1.5}
.k-head p{font-size:13px;line-height:1.95;color:rgba(250,247,239,.62);margin-top:16px;
  max-width:580px}

/* 目录：手册得能跳着看，不是一篇从头读到尾的长文 */
.k-toc{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));
  gap:0 32px;margin-top:32px;max-width:1020px}
.k-toc a{display:flex;align-items:baseline;gap:12px;padding:12px 0;font-size:13px;
  color:rgba(250,247,239,.68);border-bottom:1px solid rgba(250,247,239,.1);
  transition:color .25s var(--t),border-color .25s var(--t)}
.k-toc a:hover{color:var(--paper);border-bottom-color:rgba(250,247,239,.4)}
.k-toc a b{font-family:var(--la);font-weight:400;font-size:11px;color:rgba(250,247,239,.4)}

/* 一节 = 一个概念：序号 / 讲清楚 / 一张图 */
.k-sec{display:grid;grid-template-columns:52px minmax(0,1fr) minmax(0,372px);gap:40px;
  align-items:start;padding:40px 0;border-top:1px solid rgba(250,247,239,.13);
  max-width:1060px;scroll-margin-top:40px}
/* 无图的节铺满整行 —— 留着空的图栏，文字被挤在中间无缘无故地断行 */
.k-sec.wide{grid-template-columns:52px minmax(0,1fr)}
.k-sec.wide .k-body p{max-width:900px}
.k-sec.wide .k-body .k-key{max-width:900px}
.k-n{font-family:var(--la);font-size:24px;color:rgba(250,247,239,.3);line-height:1.3}
.k-body h3{font-weight:900;font-size:20px;letter-spacing:.04em;margin:0 0 16px;padding:0;border:0}
.k-body p{font-size:13px;line-height:1.95;color:rgba(250,247,239,.66);margin-bottom:12px;
  max-width:540px}
.k-body p b{font-weight:900;color:var(--paper)}
.k-body .k-key{color:var(--paper);font-size:13px;line-height:1.95;margin-top:20px;
  padding-left:16px;border-left:2px solid rgba(250,247,239,.5);max-width:460px}
.k-fig{background:rgba(250,247,239,.032);border-radius:5px;padding:24px 20px 20px}
.k-fig .note{font-size:11px;line-height:1.75;color:rgba(250,247,239,.45);margin-top:24px;
  padding-top:16px;border-top:1px solid rgba(250,247,239,.1)}

/* 图一 画幅：嵌套的带，越里面的厅切得越狠 */
.d-ratio .stack{position:relative;aspect-ratio:1.43;background:#FAF7EF;border-radius:2px;
  overflow:hidden}
/* 每一层往外压暗一次，叠得越多越暗。
   图上不写字 —— 三个数字挤在角落必然互相压，读数交给下面的图例 */
.d-ratio .band{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  height:var(--pct);box-shadow:0 0 0 100vmax rgba(6,6,8,.46);
  outline:1px dashed rgba(11,11,12,.28);outline-offset:-1px}
.d-ratio .band[style*="--i:0"]{box-shadow:none;outline:none}
.d-ratio .key{list-style:none;margin-top:16px;display:grid;gap:10px}
.d-ratio .key li{display:flex;align-items:baseline;gap:12px;font-size:12px;
  padding-bottom:8px;border-bottom:1px solid rgba(250,247,239,.07)}
.d-ratio .key b{font-family:var(--la);font-weight:400;font-size:13px;min-width:56px}
.d-ratio .key em{font-style:normal;color:rgba(250,247,239,.82);min-width:62px}
.d-ratio .key span{color:rgba(250,247,239,.45);font-size:11px}

/* 图二 银幕尺寸：按实测米数等比 */
.d-size .row{display:flex;align-items:flex-end;gap:16px;margin-bottom:20px}
.d-size .pane{display:flex;align-items:flex-end;gap:6px;flex:0 0 auto}
.d-size .scr{width:calc(var(--w) * 1.7);aspect-ratio:var(--ar);background:var(--paper);
  opacity:.88;border-radius:1px}
.d-size .man{width:2px;height:19px;background:rgba(250,247,239,.4)}
.d-size .meta{display:flex;flex-direction:column;gap:2px;padding-bottom:2px}
.d-size .meta b{font-weight:900;font-size:12px}
.d-size .meta .n{font-family:var(--la);font-size:12px;color:rgba(250,247,239,.66)}
.d-size .meta .w{font-size:11px;color:rgba(250,247,239,.42)}
.d-size .meta .w.est{font-style:italic}

/* 图三 亮度条 */
.d-bars .row{display:grid;grid-template-columns:66px 1fr;gap:12px;align-items:center;
  margin-bottom:16px}
.d-bars .nm{font-size:11px;letter-spacing:.08em;color:rgba(250,247,239,.78)}
.d-bars .track{position:relative;height:11px;background:rgba(250,247,239,.07);border-radius:1px}
.d-bars .fill{position:absolute;inset:0 auto 0 0;width:var(--v);background:var(--paper);
  opacity:var(--o);border-radius:1px}
.d-bars .dd{grid-column:2;font-size:10px;line-height:1;color:rgba(250,247,239,.42);margin-top:6px}

/* 图四 座位亮度 */
.d-seats .scr{position:relative;height:6px;border-radius:3px;margin-bottom:40px;
  background:linear-gradient(90deg,rgba(250,247,239,.18),var(--paper) 50%,rgba(250,247,239,.18))}
.d-seats .scr span{position:absolute;left:0;right:0;top:14px;text-align:center;font-size:10px;
  letter-spacing:.34em;color:rgba(250,247,239,.45)}
.d-seats .grid{display:grid;grid-template-columns:repeat(13,1fr);gap:4px}
.d-seats .grid i{display:block;aspect-ratio:1.5;background:var(--paper);opacity:var(--o);
  border-radius:1px}

/* ---- 速查区 ---- */
.k-ref{padding-top:52px;max-width:1060px;scroll-margin-top:40px}
#know .k-h{font-weight:900;font-size:17px;letter-spacing:.08em;margin:0 0 12px;
  padding-bottom:12px;border-bottom:1px solid rgba(250,247,239,.18)}
/* 短导语用 balance（每行拉等长），长散文才用 pretty。
   中文没有空格分词，pretty 那套「不留孤立单词」的规则根本不触发。 */
#know .k-lead{font-size:13px;line-height:1.95;color:rgba(250,247,239,.58);
  margin-bottom:24px;max-width:660px;text-wrap:balance}
#know .k-lead .soft{color:rgba(250,247,239,.4)}

/* 厅型表：按家族分组，不是十八行流水账 */
.table{display:grid;grid-template-columns:repeat(auto-fit,minmax(430px,1fr));gap:32px 52px}
.fam h4{font-size:11px;letter-spacing:.32em;color:rgba(250,247,239,.5);
  padding-bottom:10px;margin-bottom:4px;border-bottom:1px solid rgba(250,247,239,.14)}
.fam .row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;
  padding:12px 0;border-bottom:1px solid rgba(250,247,239,.07)}
.fam .nm{font-weight:900;font-size:13px}
/* 「本市未见」是中性事实，不是警告 —— 用灰，红色留给真正要当心的地方 */
.fam .nm i{font-style:normal;font-weight:400;font-size:10px;letter-spacing:.14em;
  color:rgba(250,247,239,.34);margin-left:10px}
.fam .sp{font-family:var(--la);font-size:11px;color:rgba(250,247,239,.48);text-align:right}
.fam .bl{grid-column:1/-1;font-size:12px;line-height:1.75;color:rgba(250,247,239,.55)}

.pits{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px 52px}
.pits article{display:grid;grid-template-columns:26px 1fr;gap:16px;align-items:start}
.pits .i{font-family:var(--la);font-size:12px;color:rgba(250,247,239,.34);line-height:1.5}
.pits h4{font-weight:900;font-size:13px;margin-bottom:8px;line-height:1.5}
.pits p{font-size:12px;line-height:1.95;color:rgba(250,247,239,.6)}

.pilg{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:16px}
.pilg article{padding:16px 20px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(250,247,239,.12)}
.pilg article.partial{box-shadow:inset 0 0 0 1px rgba(250,247,239,.07)}
.pilg article.partial .n,.pilg article.partial .sz{color:rgba(250,247,239,.6)}
.pilg .c{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:10px;letter-spacing:.34em;color:rgba(250,247,239,.48)}
.pilg .c em{font-style:normal;font-family:var(--la);letter-spacing:.04em;font-size:10px;
  color:rgba(250,247,239,.62)}
.pilg .n{font-weight:900;font-size:15px;margin-top:8px;line-height:1.5}
.pilg .sz{font-family:var(--la);font-size:12px;color:var(--paper);margin-top:10px}
.pilg .sz i{font-style:normal;color:rgba(250,247,239,.4);margin-left:10px}
.pilg .d{font-size:11px;line-height:1.75;color:rgba(250,247,239,.55);margin-top:8px}

@media (max-width:980px){
  .k-sec{grid-template-columns:36px minmax(0,1fr);gap:20px}
  .k-fig{grid-column:2}
  .table{grid-template-columns:1fr}
}

.src{max-width:960px}
.src p{font-size:12px;line-height:1.95;color:rgba(250,247,239,.6);margin-bottom:10px}
.src p b{display:inline-block;min-width:52px;color:var(--paper);font-weight:400}
.src .attr{margin-top:20px;padding-top:16px;border-top:1px solid rgba(250,247,239,.14);
  font-family:var(--la);font-size:11px;letter-spacing:.06em;color:rgba(250,247,239,.42)}

/* ---------- 画幅对比：剧照 + 各厅可见范围 ---------- */
.crop{margin-top:32px;display:grid;grid-template-columns:300px minmax(0,1fr);
  gap:40px;align-items:start;max-width:1020px}
.crop h4{font-weight:900;font-size:20px;letter-spacing:.05em}
.crop .sub{font-size:13px;line-height:1.95;color:rgba(250,247,239,.6);margin-top:10px}
.crop .sub b{font-weight:400;color:var(--paper)}

.crop .stage{position:relative;border-radius:4px;overflow:hidden;
  aspect-ratio:var(--nat);background:#08080a;box-shadow:0 22px 54px rgba(0,0,0,.5)}
.crop .still{position:absolute;inset:0;background-size:cover;background-position:center}

/* 只叠暗，不提亮 —— 每层遮住自己看不到的上下两条，叠得越多越暗，永远不会过曝 */
.crop .veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(4,4,5,.5) 0, rgba(4,4,5,.5) var(--cut),
    transparent var(--cut), transparent calc(100% - var(--cut)),
    rgba(4,4,5,.5) calc(100% - var(--cut)), rgba(4,4,5,.5) 100%)}

.crop .mark{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  height:var(--h);pointer-events:none;
  border-top:1px solid rgba(250,247,239,.42);border-bottom:1px solid rgba(250,247,239,.42)}
.crop .mark .no{position:absolute;left:calc(var(--i,0) * 30px);top:0;
  font-family:var(--la);font-size:11px;line-height:1;padding:6px 8px;
  background:rgba(250,247,239,.94);color:var(--carbon)}
.crop .stage .cue{position:absolute;left:0;right:0;bottom:0;text-align:center;
  font-size:11px;letter-spacing:.2em;color:rgba(250,247,239,.5);padding:10px 0}

/* 厅型名挪到图外：名字再长也不会压在画面上 */
.crop .legend{list-style:none;display:grid;gap:2px;margin-top:24px}
.crop .legend li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;
  padding:12px 0;border-top:1px solid rgba(250,247,239,.15)}
.crop .legend li:first-child{border-top-color:rgba(250,247,239,.3)}
.crop .legend .no{font-family:var(--la);font-size:11px;color:rgba(250,247,239,.5);line-height:1.5}
.crop .legend .r{font-family:var(--la);font-size:15px;letter-spacing:.02em}
.crop .legend .r em{font-style:normal;font-family:var(--sc);font-size:11px;
  letter-spacing:.12em;color:rgba(250,247,239,.5);margin-left:8px}
.crop .legend .h{font-size:12px;line-height:1.75;color:rgba(250,247,239,.72);margin-top:6px}

@media (max-width:900px){
  .crop{grid-template-columns:1fr;gap:24px}
}

/* ---------- 天梯（去掉分数） ---------- */
.tiers{margin-top:32px}

details.dead{margin-top:24px}
details.dead summary{font-size:12px;letter-spacing:.14em;color:rgba(250,247,239,.5);cursor:pointer;list-style:none}
details.dead summary::-webkit-details-marker{display:none}
details.dead summary::before{content:'＋ ';color:rgba(250,247,239,.4)}
details.dead[open] summary::before{content:'－ '}
.dead-list{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:0 40px;max-width:1020px}
.dead-list .tier-dead{border-bottom:1px dotted rgba(250,247,239,.12)}

/* ---------- 影厅页：第三层 ---------- */
#hall{position:fixed;inset:0;z-index:140;background:rgba(6,6,7,.9);
  -webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);
  display:none;overflow-y:auto;padding:68px 8vw 68px}
#hall.on{display:block}
#hall .back{position:fixed;top:26px;left:8vw;font-size:11px;letter-spacing:.3em;
  border-bottom:1px solid rgba(250,247,239,.4);padding-bottom:4px}
#hall h2{font-weight:900;font-size:24px;letter-spacing:.03em;max-width:640px}
#hall .addr{font-size:12px;color:rgba(250,247,239,.55);margin-top:8px;letter-spacing:.03em}
#hall .badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
#hall .badges span{font-size:10px;letter-spacing:.14em;padding:4px 10px;border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(250,247,239,.3);color:rgba(250,247,239,.82)}
#hall .badges span.key{background:var(--paper);color:var(--carbon);box-shadow:none;font-weight:700}

/* ---------- 影厅页 ---------- */
.hall-head h2{font-weight:900;font-size:30px;letter-spacing:.03em;max-width:660px}
.hall-head .addr{font-size:13px;color:rgba(250,247,239,.5);margin-top:10px;letter-spacing:.03em}
.hall-head .hall-of{display:inline-block;margin-top:16px;font-size:11px;letter-spacing:.26em;
  color:rgba(250,247,239,.86);padding-bottom:6px;border-bottom:1px solid rgba(250,247,239,.3)}

/* 结论先行：这一页最先要回答的就是「坐哪儿」 */
.pick-hero{margin-top:32px}
.pick-hero .k{font-size:10px;letter-spacing:.34em;color:rgba(250,247,239,.55)}
.pick-hero .pick{margin-top:12px;display:flex;align-items:baseline;gap:20px;flex-wrap:wrap}
.pick-hero .pick b{font-weight:900;font-size:38px;letter-spacing:.02em;line-height:1}
.pick-hero .pick i{font-style:normal;font-weight:900;font-size:24px;letter-spacing:.02em;
  color:rgba(250,247,239,.7)}
.pick-hero .why{font-size:13px;line-height:1.75;color:rgba(250,247,239,.6);margin-top:12px;max-width:520px}

.hall-main{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:40px;margin-top:32px;align-items:start}
@media (max-width:880px){.hall-main{grid-template-columns:1fr}}
.seatmap{background:#08080a;border-radius:9px;padding:24px 24px 20px;
  box-shadow:inset 0 0 0 1px rgba(250,247,239,.1);margin:0}
.seatmap svg{display:block;width:100%;max-width:620px;margin:0 auto}
.seatmap figcaption{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:16px;
  font-size:11px;color:rgba(250,247,239,.46);letter-spacing:.04em}
.seatmap .legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin:0 6px 0 12px;
  vertical-align:-1px}
.seatmap .legend i:first-child{margin-left:0}
.seatmap .legend .l1{background:#FAF7EF}
.seatmap .legend .l2{background:rgba(250,247,239,.28)}
.seatmap .legend .l3{background:rgba(250,247,239,.08)}

/* 买票：一张真票根，不是一条蓝链接 */
.ticket{--stub:52px;position:relative;display:flex;text-decoration:none;
  background:var(--paper);color:var(--carbon);border-radius:4px;overflow:hidden;
  transition:transform .3s var(--t),box-shadow .3s var(--t);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  -webkit-mask:radial-gradient(7px at calc(100% - var(--stub)) 0,#0000 97%,#000) top/100% 50.5% no-repeat,
               radial-gradient(7px at calc(100% - var(--stub)) 100%,#0000 97%,#000) bottom/100% 50.5% no-repeat;
          mask:radial-gradient(7px at calc(100% - var(--stub)) 0,#0000 97%,#000) top/100% 50.5% no-repeat,
               radial-gradient(7px at calc(100% - var(--stub)) 100%,#0000 97%,#000) bottom/100% 50.5% no-repeat}
.ticket:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(0,0,0,.55)}
.ticket .body{flex:1;padding:16px 16px;min-width:0}
.ticket .k{display:block;font-size:10px;letter-spacing:.3em;color:rgba(11,11,12,.5)}
.ticket .hall{display:block;font-weight:900;font-size:15px;margin-top:8px;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ticket .seat{display:block;font-size:12px;color:rgba(11,11,12,.62);margin-top:6px;
  padding-top:8px;border-top:1px dashed rgba(11,11,12,.28)}
.ticket .stub{width:var(--stub);flex:0 0 auto;display:grid;place-items:center;
  border-left:1.6px dashed rgba(11,11,12,.35)}
.ticket.none{background:rgba(250,247,239,.06);color:rgba(250,247,239,.66);box-shadow:none;
  -webkit-mask:none;mask:none;box-shadow:inset 0 0 0 1px rgba(250,247,239,.14)}
.ticket.none .k{color:rgba(250,247,239,.45)}
.ticket.none .seat{border-top-color:rgba(250,247,239,.2);color:rgba(250,247,239,.55)}

/* 参数：数值配一句人话，不然「25.88」谁看得懂 */
.facts{margin-top:24px;display:grid;gap:16px}
.facts dt{font-weight:900;font-size:17px;letter-spacing:.02em}
.facts dd{font-size:11px;letter-spacing:.06em;color:rgba(250,247,239,.5);margin-top:4px}

 /* 避坐项说的就是上面这张图，所以贴着图放，不另起一节 */
.seatmap ul.avoid{list-style:none;margin-top:20px;padding-top:16px;
  border-top:1px solid rgba(250,247,239,.12);display:grid;gap:10px}
/* 结论（第几排）和理由分开，别糊成一句 */
.seatmap ul.avoid li b{font-weight:400;color:var(--paper);margin-right:12px;white-space:nowrap}
.seatmap ul.avoid li{font-size:12px;line-height:1.75;color:rgba(250,247,239,.55);
  padding-left:16px;position:relative}
.seatmap ul.avoid li::before{content:'';position:absolute;left:0;top:9px;width:7px;height:1px;
  background:rgba(180,86,76,.85)}

/* 厅型提醒：一条安静的通栏注脚，不跟别的抢版面 */
.hall-note{margin-top:40px;padding-top:24px;border-top:1px solid rgba(250,247,239,.14);max-width:620px}
.hall-note .k{font-size:10px;letter-spacing:.34em;color:rgba(250,247,239,.5)}
.hall-note h4{font-weight:900;font-size:15px;margin-top:12px}
.hall-note p{font-size:13px;line-height:1.95;color:rgba(250,247,239,.62);margin-top:10px}

#hint{position:fixed;left:30px;bottom:18px;z-index:70;font-size:10px;letter-spacing:.22em;
  color:rgba(250,247,239,.3)}
#err{position:fixed;inset:0;z-index:950;display:none;place-items:center;background:#000;padding:40px;text-align:center}
#err.on{display:grid}

/* ==================== 窄屏 ====================
   桌面版把片名／规格放左下、结论放右下，那套排法要 900px 才站得住。
   375px 上 246px 宽的结论卡是绝对定位的，直接压在规格表上 ——
   所以窄屏不是"缩小"，是改成竖排：一件事一段，谁也不压谁。 */
@media (max-width:760px){
  /* 顶栏浮在卡片上，窄屏没有多余空间躲开 —— 垫一层由深到透的渐变保可读性 */
  .top{padding:24px 20px 32px;
    background:linear-gradient(180deg,rgba(6,6,7,.92) 0%,rgba(6,6,7,.72) 58%,transparent 100%)}
  .mark{gap:0 10px}
  .mark .w{font-size:30px;letter-spacing:.08em}
  .mark .s{font-size:10px;letter-spacing:.34em;margin-top:8px}
  .city{margin-top:16px}
  .city .nm{font-size:17px;letter-spacing:.2em}
  .city::before{top:-11px;height:9px}
  #cityMenu{top:120px;left:20px;right:20px;
    grid-template-columns:repeat(3,1fr)}
  .know{font-size:11px;letter-spacing:.2em}

  .slot{padding:24px 24px 24px}
  .hd{gap:10px}
  .hd .yr{font-size:17px}
  .lbl{font-size:10px;letter-spacing:.2em}
  .pill{font-size:10px;letter-spacing:.14em}
  .tt{font-size:clamp(24px,7.4vw,38px);line-height:1.3}
  .en{font-size:11px;letter-spacing:.2em;margin-top:8px}
  .specs{margin-top:16px;column-gap:16px}
  .specs dt{font-size:10px;letter-spacing:.2em}
  .specs dd{font-size:12px}

  /* 结论从绝对定位改成正常流，铺满卡宽 */
  .verdict{position:static;width:auto;margin-top:20px;padding:16px 0 0 0;
    text-align:left;align-items:flex-start;gap:12px;
    border-top:1px solid rgba(250,247,239,.22)}
  .verdict::before{display:none}
  .verdict .line{align-items:flex-start}
  .verdict .v{font-size:17px}
  .verdict .act{margin-top:2px}

  /* 浮层：8vw 的边距在窄屏上太奢侈 */
  #drawer,#hall,#know,#films{padding:68px 20px 52px}
  #drawer h2{font-size:20px;line-height:1.5}
  #know h2{font-size:24px;line-height:1.5}
  .panel-close{top:20px;right:20px}

  .crop{grid-template-columns:1fr;gap:20px}
  .tier{grid-template-columns:30px minmax(0,1fr);gap:16px;padding:20px 0}
  .tier .where{grid-column:2}
  .tier ul{columns:1}
  .dead-list{grid-template-columns:1fr}

  .hall-head h2{font-size:20px;line-height:1.5}
  .pick .b,.pick b{font-size:30px}
  .facts{grid-template-columns:1fr 1fr}

  .k-toc{grid-template-columns:1fr;margin-top:24px}
  .k-sec{grid-template-columns:28px minmax(0,1fr);gap:16px;padding:32px 0}
  .k-n{font-size:17px}
  .k-body h3{font-size:17px}
  .pits{grid-template-columns:1fr}
  .pilg{grid-template-columns:1fr 1fr}
  .d-bars .row{grid-template-columns:56px 1fr;gap:10px}
  .d-size .row{flex-wrap:wrap;gap:8px}
}

/* 索引条在窄屏上没有落点：右边缘只有几十像素，手指点不准。
   窄屏靠滑动本身翻片，不需要它。 */
@media (max-width:860px){#rail{display:none}}