/* 追剧导航 ---------------------------------------------------
   第十二套视觉与模板。和第八套（下饭导航）同样走"花哨"路线，
   三件事撑起来，但每一件都换了：

     1. 每个分类一个专属霓虹色。颜色即分类，扫一眼知道在看哪块。
        9 套色在下面 [data-tone] 里，深浅两套各一组。
        下饭用的是搪瓷招牌那种复古低饱和；这套是深底上的高亮霓虹。
     2. 胶片齿孔纹理：每块放映厅左边一条竖排齿孔，灯牌右侧一条
        横排齿孔。是纹理与结构，不是装饰性渐变洗底。
     3. 标题压成海报字 —— 字重拉满、字距收紧到负值。前十一套
        清一色宽字距，这套反着来。放映厅编号用等宽数字。

   模板：放映厅灯牌 + 票根条。每个分类一条通栏灯牌，下面铺票根，
   票根右端用虚线和缺口撕出存根部分写域名。

   前十一套：深李木墨+黄铜+宋体+单列索引 / 冷灰+正红+黑体重字+单列大条 /
   深靛蓝+青绿+左侧栏+密排 / 浅暖+浓紫+顶部条+卡片 /
   浅绿白+深绿+标签页 / 深夜航蓝+电光蓝+details 折叠 /
   PCB 绿+青品双色+多列瀑布流 / 米黄+搪瓷多色+格子桌布+马赛克 /
   炭灰+琥珀+手绘插画 / 近白+钴蓝+粘顶分段 / 纸张横格+红页边+词条两栏。

   深色优先：影院就是暗的。:root 直接是深色值，浅色放在
   prefers-color-scheme: light 的覆盖里。顺序和前几套相反，
   改色时注意别把两边对调了。 */

:root {
  /* dark light，不是 light dark —— 本站默认深色，顺序要跟着反 */
  color-scheme: dark light;

  --ground: #0C0A14;
  --panel:  #171322;
  --raise:  #201A31;
  --ink:    #F3EFFA;
  --muted:  #A69BBD;
  --line:   #2F2746;

  --sans: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans SC", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* 九套分类色。深色模式用高亮霓虹，压在 --panel 上读得清 */
:root {
  --t1: #FF5C97; --t1s: rgba(255,  92, 151, .14);
  --t2: #4FD2FF; --t2s: rgba( 79, 210, 255, .14);
  --t3: #FFC75C; --t3s: rgba(255, 199,  92, .14);
  --t4: #9A8CFF; --t4s: rgba(154, 140, 255, .14);
  --t5: #4EE3AE; --t5s: rgba( 78, 227, 174, .14);
  --t6: #FF9166; --t6s: rgba(255, 145, 102, .14);
  --t7: #A8E85C; --t7s: rgba(168, 232,  92, .14);
  --t8: #6FB4FF; --t8s: rgba(111, 180, 255, .14);
  --t9: #FF7BDC; --t9s: rgba(255, 123, 220, .14);
}

/* 浅色值集中写一次，两个选择器共用，省得改一边忘一边。
   （下饭导航的 404 页就吃过这个亏：底色换成了浅的，
   媒体查询里还留着深色值，两套对调了。） */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --ground: #EAE7F2; --panel: #FFFFFF; --raise: #F6F4FB;
    --ink: #171226; --muted: #5B5273; --line: #DDD7EC;
    --t1: #C2185B; --t1s: rgba(194,  24,  91, .10);
    --t2: #00647F; --t2s: rgba(  0, 100, 127, .10);
    --t3: #8A5600; --t3s: rgba(138,  86,   0, .10);
    --t4: #4B3BC4; --t4s: rgba( 75,  59, 196, .10);
    --t5: #0A7355; --t5s: rgba( 10, 115,  85, .10);
    --t6: #B04218; --t6s: rgba(176,  66,  24, .10);
    --t7: #466512; --t7s: rgba( 70, 101,  18, .10);
    --t8: #15509E; --t8s: rgba( 21,  80, 158, .10);
    --t9: #A3188A; --t9s: rgba(163,  24, 138, .10);
  }
}

[data-theme="dark"] { color-scheme: dark; }

[data-theme="light"] {
  color-scheme: light;
  --ground: #EAE7F2; --panel: #FFFFFF; --raise: #F6F4FB;
  --ink: #171226; --muted: #5B5273; --line: #DDD7EC;
  --t1: #C2185B; --t1s: rgba(194,  24,  91, .10);
  --t2: #00647F; --t2s: rgba(  0, 100, 127, .10);
  --t3: #8A5600; --t3s: rgba(138,  86,   0, .10);
  --t4: #4B3BC4; --t4s: rgba( 75,  59, 196, .10);
  --t5: #0A7355; --t5s: rgba( 10, 115,  85, .10);
  --t6: #B04218; --t6s: rgba(176,  66,  24, .10);
  --t7: #466512; --t7s: rgba( 70, 101,  18, .10);
  --t8: #15509E; --t8s: rgba( 21,  80, 158, .10);
  --t9: #A3188A; --t9s: rgba(163,  24, 138, .10);
}

/* 每块放映厅按位置领一套色；app.js 给出 data-tone */
.hall[data-tone="1"] { --tone: var(--t1); --tone-soft: var(--t1s); }
.hall[data-tone="2"] { --tone: var(--t2); --tone-soft: var(--t2s); }
.hall[data-tone="3"] { --tone: var(--t3); --tone-soft: var(--t3s); }
.hall[data-tone="4"] { --tone: var(--t4); --tone-soft: var(--t4s); }
.hall[data-tone="5"] { --tone: var(--t5); --tone-soft: var(--t5s); }
.hall[data-tone="6"] { --tone: var(--t6); --tone-soft: var(--t6s); }
.hall[data-tone="7"] { --tone: var(--t7); --tone-soft: var(--t7s); }
.hall[data-tone="8"] { --tone: var(--t8); --tone-soft: var(--t8s); }
.hall[data-tone="9"] { --tone: var(--t9); --tone-soft: var(--t9s); }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }

.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--tone, var(--t2)); outline-offset: 2px; }

/* 凡是会被 JS 切 hidden 的元素都显式写：作者样式里的 display
   会压过浏览器默认的 [hidden]{display:none}。 */
.shell[hidden], .hall[hidden], .stub[hidden],
.empty[hidden], .ask[hidden], .lede[hidden], .foot-note[hidden] { display: none; }

/* 报头 ------------------------------------------------------ */

.hero { border-bottom: 1px solid var(--line); background: var(--panel); }
.hero .wrap { padding-top: 3.25rem; padding-bottom: 2rem; }

/* 海报字：字重拉满、字距收紧到负值。前十一套都是宽字距。 */
.title {
  margin: 0;
  font-size: clamp(2.5rem, 9vw, 4.25rem);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: .95;
  color: var(--t1);
}

.lede { margin: .75rem 0 1.5rem; font-size: .9375rem; color: var(--muted); }

.find {
  display: flex;
  max-width: 33rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  /* 不能用 overflow: hidden 来裁圆角：里面三个控件的焦点环
     画在各自边框之外，会被整条裁掉，Tab 进来看不出焦点在哪。
     改成给首尾两个子元素各自倒角。 */
  background: var(--raise);
}

.find:focus-within { border-color: var(--t2); }

.find select, .find input, .find button {
  font-family: inherit;
  font-size: .9375rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: .625rem .875rem;
}

.find select {
  flex: none;
  border-right: 1px solid var(--line);
  border-radius: .45rem 0 0 .45rem;
  color: var(--muted);
  cursor: pointer;
}
.find input { flex: 1 1 auto; min-width: 0; }
.find input::placeholder { color: var(--muted); }

.find button {
  flex: none;
  background: var(--t2);
  /* --ground 在两套主题下都和 --t2 够对比：深色是近黑、浅色是淡紫白。
     .glyph / .stub-badge / .mark / .btn 同理。 */
  color: var(--ground);
  border-radius: 0 .45rem .45rem 0;
  font-weight: 700;
  cursor: pointer;
}

/* 数据出问题时这几个控件会被禁用。不写样式的话它们看着照常可点。 */
.find select:disabled, .find input:disabled, .find button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.tools { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

.chip {
  font-family: inherit;
  font-size: .8125rem;
  padding: .4375rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease;
}

.chip:hover { color: var(--ink); border-color: var(--ink); }

.chip[aria-pressed="true"] {
  color: var(--ground);
  background: var(--t1);
  border-color: var(--t1);
  font-weight: 700;
}

.chip:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.chip:disabled:hover { color: var(--muted); border-color: var(--line); }

.stat {
  margin: 1.125rem 0 0;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--muted);
}

/* 放映厅 ---------------------------------------------------- */

.main { padding-top: 2.25rem; padding-bottom: 1rem; }

.hall {
  position: relative;
  /* 左边让出胶片齿孔那一条 */
  padding-left: 1.875rem;
  margin-bottom: 2rem;
}

/* 竖排齿孔：胶片的边。是结构纹理，不是渐变洗底。 */
.hall::before {
  content: "";
  position: absolute;
  left: 0;
  top: .25rem;
  bottom: .25rem;
  width: .75rem;
  border-radius: 2px;
  background-image: repeating-linear-gradient(
    180deg,
    var(--tone-soft) 0 .5rem,
    transparent      .5rem 1.125rem
  );
}

/* 灯牌 */
.hall-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 .75rem;
  padding: .5rem .875rem .5rem .5rem;
  background: var(--raise);
  border: 1px solid var(--line);
  border-left: 4px solid var(--tone);
  border-radius: .375rem;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

/* 放映厅编号，等宽数字，像场次表 */
.hall-no {
  flex: none;
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 400;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* 角标做成灯牌上的实色方块 */
.glyph {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 .375rem;
  border-radius: .3125rem;
  background: var(--tone);
  color: var(--ground);
  font-size: .8125rem;
  font-weight: 800;
}

.hall-head h2 { font: inherit; margin: 0; }

/* 横排齿孔，填掉灯牌右边的空当，和左边那条是同一个母题 */
.hall-strip {
  flex: 1 1 auto;
  min-width: 1.5rem;
  height: .5rem;
  border-radius: 2px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--tone-soft) 0 .5rem,
    transparent      .5rem 1.125rem
  );
}

.tally {
  flex: none;
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 700;
  color: var(--tone);
  font-variant-numeric: tabular-nums;
}

/* 票根 ------------------------------------------------------ */

.stubs {
  display: grid;
  /* 两列。票根是横向的，挤成三列后说明和域名都没地方放。
     min(26rem, 100%)：容器比 26rem 还窄时（折叠屏外屏、
     用户把根字号调大、400% 缩放），光写 26rem 会撑出横向滚动条 */
  grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr));
  gap: .625rem;
}

/* display:flex + flex:1 让同一行的票根等高 —— 说明换行的那张
   会比邻居高，不拉齐的话一排卡片下沿参差不齐。 */
.stub { position: relative; display: flex; }

.stub-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  flex: 1 1 auto;
  gap: .75rem;
  min-height: 3.5rem;
  padding: .5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: .375rem;
  transition: border-color .16s ease, background .16s ease;
}

.stub-link:hover, .stub-link:focus-visible {
  border-color: var(--tone);
  background: var(--raise);
}

/* 座位号方块：票根左端 */
.stub-seat {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .3125rem;
  background: var(--tone-soft);
  color: var(--tone);
  font-family: var(--mono);
  font-size: .8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.stub-main { min-width: 0; }

.stub-name {
  display: block;
  font-size: .9375rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stub-note {
  display: block;
  margin-top: .0625rem;
  font-size: .75rem;
  line-height: 1.4;
  color: var(--muted);
}

.stub-link:hover .stub-name,
.stub-link:focus-visible .stub-name { color: var(--tone); }

/* 存根：虚线撕口 + 上下两个缺口，右端写域名 */
.stub-host {
  position: relative;
  /* 固定宽度而不是 max-width：宽度跟着域名长度走的话，同一列里
     每张票的撕口位置都不一样，看着像没对齐；真票根的存根本来
     就是等宽的一截。10.5rem 是 border-box，减去 2.25rem 内边距
     还剩 8.25rem，放得下 piaofang.maoyan.com 这种长的。 */
  width: 10.5rem;
  /* 星标盖在票根右上角，存根往左让开它 */
  padding: 0 1.5rem 0 .75rem;
  /* 撑满卡片高度，下面的缺口才能按固定偏移咬在上下边框上；
     跟着文字高度走的话，说明换行与否会让缺口位置飘。 */
  align-self: stretch;
  display: flex;
  align-items: center;
  border-left: 1px dashed var(--line);
  font-family: var(--mono);
  font-size: .6875rem;
  line-height: 1.3;
  color: var(--muted);
  /* 这里绝对不能写 overflow: hidden —— 下面那两个缺口是定位在
     本元素框外的伪元素，会被连根裁掉，票根就只剩一条虚线。
     溢出省略号交给内层的 .stub-host-t。 */
  overflow: visible;
}

.stub-host-t {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 缺口：咬掉卡片上下边各一个半圆，撕口就立起来了 */
.stub-host::before, .stub-host::after {
  content: "";
  position: absolute;
  left: -.4375rem;
  width: .875rem;
  height: .875rem;
  border-radius: 50%;
  background: var(--ground);
}
/* -.9375rem = 卡片内边距 .5rem + 半径 .4375rem，正好让圆心
   落在卡片边框上，咬掉一半。 */
.stub-host::before { top: -.9375rem; }
.stub-host::after  { bottom: -.9375rem; }

/* 18+ 跟着分类色走，不另起一个颜色 */
.stub-badge {
  display: inline-block;
  margin-left: .375rem;
  padding: 0 .3125rem;
  background: var(--tone);
  color: var(--ground);
  font-size: .625rem;
  font-weight: 800;
  letter-spacing: .04em;
  border-radius: .1875rem;
  vertical-align: .1em;
}

/* 窄屏：三栏挤不下，存根折到第二行，撕口从竖的改成横的。
   缺口也要跟着换到左右两侧，否则会浮在卡片中间。 */
@media (max-width: 30rem) {
  .stub-link { grid-template-columns: auto 1fr; gap: .625rem; }
  .stub-host {
    grid-column: 1 / -1;
    /* 宽度要还原成 auto：上面给存根定了固定 10.5rem，折行后
       不解掉的话撕口线只有 10.5rem 宽，右边那个缺口会浮在
       卡片中间而不是咬在右边框上。 */
    width: auto;
    margin-top: .125rem;
    /* 不留右内边距：星标在卡片右上角，和折到第二行的存根不重叠 */
    padding: .375rem 0 0;
    border-left: 0;
    border-top: 1px dashed var(--line);
  }
  .stub-host::before, .stub-host::after { top: -.4375rem; bottom: auto; }
  .stub-host::before { left: -.9375rem; }
  .stub-host::after  { left: auto; right: -.9375rem; }
}

/* 收藏星 ---------------------------------------------------- */

.star {
  position: absolute;
  top: .375rem;
  right: .25rem;
  /* 24px 是触控目标下限，再小拇指点不中 */
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: .9375rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .16s ease, color .16s ease;
}

.stub:hover .star,
.star:focus-visible,
.star[aria-pressed="true"] { opacity: 1; }

.star:hover, .star[aria-pressed="true"] { color: var(--tone); }

/* 触屏没有 hover，星标会一直全透明，收藏功能等于不存在 */
@media (hover: none) { .star { opacity: .6; } }

/* 空结果 / 兜底 --------------------------------------------- */

.empty, .boot, .notice {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--t1);
  border-radius: .375rem;
  padding: 1.375rem 1.25rem;
  font-size: .9375rem;
  color: var(--muted);
  margin: 0;
}

.boot { max-width: 26rem; margin: 4rem auto; }

/* 兜底卡默认不显示，由 index.html 里的 4 秒定时器揭开 ——
   否则慢速加载时它会先被画出来，把正常加载误报成失败。
   .notice 是 JS 注入的提示框，类名必须和 .boot 不同，
   同名的话刚创建就会被这里的隐藏规则藏掉，兜底等于白写。 */
.boot { display: none; }
.boot-show .boot { display: block; }
.js-ok .boot { display: none; }

.boot h2, .notice h2 {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 .5rem;
}
.boot p, .notice p { margin: 0; font-size: .875rem; }

/* 页脚 ------------------------------------------------------ */

.foot {
  padding-top: 1.25rem;
  padding-bottom: 3rem;
  border-top: 1px solid var(--line);
  font-size: .75rem;
  color: var(--muted);
}

.foot p { margin: 0 0 .375rem; }
.foot-age { display: flex; align-items: center; gap: .5rem; color: var(--ink); }

.mark {
  padding: .125rem .5rem;
  border-radius: .1875rem;
  background: var(--t1);
  color: var(--ground);
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .04em;
}

/* 成人条目的点击确认 ---------------------------------------- */

.ask {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* 必须能滚：矮视口下面板会被切掉，按钮就点不着了 */
  overflow: auto;
  padding: 1.5rem;
  background: rgba(6, 4, 12, .82);
}

.ask-panel {
  width: 100%;
  max-width: 26rem;
  margin: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 4px solid var(--t1);
  border-radius: .5rem;
  padding: 1.5rem 1.5rem 1.25rem;
}

.mark-row { margin: 0 0 .875rem; }
.ask-panel h2 { font-size: 1.4375rem; font-weight: 800; letter-spacing: -.015em; margin: 0 0 .5rem; }
.ask-body { font-size: .9375rem; margin: 0 0 1.25rem; }
.ask-body span { font-weight: 700; }
.ask-actions { display: flex; flex-wrap: wrap; gap: .625rem; margin-bottom: .875rem; }

.btn {
  font-family: inherit;
  font-size: .875rem;
  font-weight: 700;
  padding: .625rem 1.125rem;
  border-radius: .375rem;
  background: var(--t1);
  color: var(--ground);
  border: 1px solid var(--t1);
  cursor: pointer;
}

.btn:hover { opacity: .88; }

.btn-quiet {
  background: transparent;
  color: var(--muted);
  border-color: var(--line);
  font-weight: 400;
}

.btn-quiet:hover { opacity: 1; color: var(--ink); border-color: var(--ink); }
.ask-fine { font-size: .6875rem; color: var(--muted); margin: 0; }

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