/* ————— 2026 · 香港三日 —— 千禧年紙媒剪貼 × 王家衛 ————— */
:root {
  --paper: #efe9dc;           /* 版面纸 */
  --paper-warm: #f6f1e5;      /* 卡片纸 */
  --paper-old: #e7dfc9;       /* 泛黄旧纸 */
  --ink: #17140f;
  --ink-soft: #4d4738;
  --ink-dim: #857c66;
  --print-red: #d9302c;       /* 印刷红 */
  --print-blue: #2b59c3;      /* 印刷蓝 */
  --print-green: #2a9d6e;     /* 印刷绿 */
  --sticker-yellow: #f5c518;
  --neon-pink: #ff6ec7;
  --accent: var(--print-red);
  --mono: "Space Mono", "SFMono-Regular", "Noto Sans SC", monospace;
  --sans: "Noto Sans SC", "PingFang SC", sans-serif;
  --serif: "Noto Serif TC", "Noto Serif SC", serif;
  --hand: "Long Cang", "Caveat", cursive;
  --anton: "Anton", "Noto Sans SC", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* 纸张纤维颗粒 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--print-red); color: var(--paper); }

/* ————— 海报：特刊封面 ————— */
.poster {
  position: relative;
  min-height: 96vh;
  background:
    radial-gradient(rgba(23, 20, 15, .05) 1px, transparent 1.3px) 0 0 / 22px 22px,
    var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 84px 24px 130px;
  overflow: hidden;
}

/* 裁切标记 */
.crop {
  position: absolute;
  width: 26px; height: 26px;
  border: 0 solid var(--ink);
  opacity: .55;
}
.c-tl { top: 16px; left: 16px; border-left-width: 1.5px; border-top-width: 1.5px; }
.c-tr { top: 16px; right: 16px; border-right-width: 1.5px; border-top-width: 1.5px; }
.c-bl { bottom: 54px; left: 16px; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.c-br { bottom: 54px; right: 16px; border-right-width: 1.5px; border-bottom-width: 1.5px; }

/* 半调网点大圆 */
.halftone {
  position: absolute;
  top: -90px; right: -120px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(rgba(217, 48, 44, .5) 1.5px, transparent 1.9px) 0 0 / 10px 10px;
  transform: rotate(8deg);
  pointer-events: none;
}
/* 撕纸报头条 */
.torn {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 108vw;
  margin: 20px 0 32px;
  transform: rotate(-2.5deg);
  background: var(--paper-old);
  font-family: var(--serif);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: .34em;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  padding: 10px 30px;
  box-shadow: 0 4px 16px rgba(23, 20, 15, .18);
  clip-path: polygon(0 12%, 2% 0, 98% 6%, 100% 88%, 97% 100%, 3% 94%, 1% 100%, 0 60%);
  pointer-events: none;
}

/* 麻雀「發」 */
.stk { position: absolute; pointer-events: none; user-select: none; z-index: 3; }
.mahjong {
  top: 26%; right: 12%;
  width: 46px; height: 60px;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #fdfcf7, #e8e4d8);
  color: #0d7a43;
  font-family: var(--serif);
  font-weight: 900;
  font-size: 31px;
  border-radius: 6px;
  border: 1px solid #c9c3b0;
  box-shadow: 0 6px 16px rgba(23, 20, 15, .3), inset 0 -4px 0 #cfe3d4;
  transform: rotate(12deg);
}
/* 胶带 */
.tape {
  position: absolute;
  top: 3%;
  left: 50%;
  transform: translateX(-50%) rotate(-2.5deg);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .3em;
  color: rgba(23, 20, 15, .75);
  background: rgba(245, 197, 24, .55);
  padding: 6px 22px;
  box-shadow: 0 3px 10px rgba(23, 20, 15, .2);
  z-index: 4;
}
/* 霓虹灯管招牌（唯一霓虹点缀）：SVG 描边 = 空心灯管 */
.neoncard {
  position: absolute;
  left: 3.5%;
  bottom: 8%;
  width: 104px;
  background: linear-gradient(165deg, #14171d, #0a0c10);
  border-radius: 10px;
  padding: 6px;
  transform: rotate(-7deg);
  box-shadow: 0 10px 26px rgba(23, 20, 15, .38), inset 0 0 26px rgba(0, 0, 0, .7);
  z-index: 3;
  pointer-events: none;
}
.neoncard::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 58px; height: 20px;
  transform: translateX(-50%) rotate(3deg);
  background: rgba(245, 197, 24, .5);
  box-shadow: 0 2px 6px rgba(23, 20, 15, .2);
}
.neoncard svg { display: block; width: 100%; height: auto; overflow: visible; }
/* 管框：绿管 */
.neoncard rect { fill: none; stroke-linecap: round; }
.neoncard .tb-glow { stroke: #4dffa6; stroke-width: 5; filter: blur(4px); opacity: .75; }
.neoncard .tb { stroke: #8dffc9; stroke-width: 1.6; }
/* 字管：粉管，空心轮廓 */
.neoncard text {
  font-family: var(--serif);
  font-size: 46px;
  font-weight: 600;
  text-anchor: middle;
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
  paint-order: stroke;
}
.neoncard .tx-glow text { stroke: #ff4fc3; stroke-width: 5.5; }
.neoncard .tx-glow { filter: blur(4.5px); opacity: .85; }
.neoncard .tx text { stroke: #ff77d2; stroke-width: 1.7; }
.neoncard .tx-core text { stroke: #fff0fa; stroke-width: .7; opacity: .95; }
/* 第二个字偶尔接触不良 */
.neoncard .tx text:last-child,
.neoncard .tx-core text:last-child,
.neoncard .tx-glow text:last-child { animation: tubeflk 6.4s linear infinite; }
@keyframes tubeflk {
  0%, 86%, 90%, 100% { opacity: 1; }
  87% { opacity: .25; }
  88% { opacity: .8; }
  89% { opacity: .4; }
}
/* 红印章 */
.seal {
  position: absolute;
  right: 19%;
  top: 21%;
  width: 74px; height: 74px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  direction: rtl;
  align-items: center;
  justify-items: center;
  border: 3px solid rgba(217, 48, 44, .8);
  color: rgba(217, 48, 44, .85);
  font-family: var(--serif);
  font-weight: 900;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: 0;
  transform: rotate(8deg);
  padding: 4px;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.16' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 9 -3.6'/%3E%3CfeComposite operator='in' in2='SourceGraphic'/%3E%3C/filter%3E%3Crect width='90' height='90' fill='%23fff' filter='url(%23r)'/%3E%3C/svg%3E");
  mask-size: cover;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.16' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 9 -3.6'/%3E%3CfeComposite operator='in' in2='SourceGraphic'/%3E%3C/filter%3E%3Crect width='90' height='90' fill='%23fff' filter='url(%23r)'/%3E%3C/svg%3E");
  -webkit-mask-size: cover;
  pointer-events: none;
  z-index: 3;
}
.seal b { font-weight: 900; }

.p-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .34em;
  color: var(--ink-dim);
  position: relative;
  z-index: 5;
}
/* 「2026」——剪贴字（每个数字一张纸片） */
.p-title {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: baseline;
  gap: clamp(4px, 1vw, 14px);
  line-height: 1;
}
.p-title .d {
  display: inline-block;
  font-size: clamp(88px, 19vw, 220px);
}
/* 2 —— 红纸片白字，Anton */
.d1 {
  font-family: var(--anton);
  color: var(--paper-warm);
  background: var(--print-red);
  padding: 0 .06em;
  transform: rotate(-4deg) translateY(-6px);
  box-shadow: 4px 5px 0 rgba(23, 20, 15, .25);
}
/* 0 —— 镂空描边衬线，直接印在纸上 */
.d2 {
  font-family: var(--serif);
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 3px var(--ink);
  transform: rotate(2.5deg);
}
/* 2 —— 黄贴纸黑字，等宽 */
.d3 {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--ink);
  background: var(--sticker-yellow);
  padding: 0 .04em;
  transform: rotate(3.5deg) translateY(4px);
  box-shadow: -4px 4px 0 rgba(23, 20, 15, .22);
}
/* 6 —— 印刷蓝大字，衬线，压一点半调点 */
.d4 {
  font-family: var(--serif);
  font-weight: 900;
  color: var(--print-blue);
  transform: rotate(-2.5deg) translateY(-3px);
  text-shadow: 4px 4px 0 rgba(43, 89, 195, .22);
}
.p-en {
  font-family: var(--anton);
  font-size: clamp(18px, 3vw, 34px);
  letter-spacing: .3em;
  color: var(--ink);
  margin-top: 2.4vh;
  position: relative;
  z-index: 5;
}
/* 马克笔圈划 */
.p-en::after {
  content: "";
  position: absolute;
  left: -4%;
  bottom: -6px;
  width: 108%;
  height: 10px;
  background: rgba(217, 48, 44, .55);
  border-radius: 40% 60% 55% 45% / 70% 40% 60% 30%;
  transform: rotate(-.6deg);
  z-index: -1;
}
.p-sub {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 17px;
  letter-spacing: .8em;
  margin: 2.8vh 0 0 .8em;
  color: var(--ink-soft);
}
.p-dates {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .22em;
  border: 1.5px dashed var(--ink);
  color: var(--ink);
  background: var(--paper-warm);
  padding: 8px 22px;
  margin-top: 3vh;
  transform: rotate(-1.2deg);
  box-shadow: 3px 3px 0 rgba(23, 20, 15, .15);
  position: relative;
  z-index: 5;
}
.p-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(14px, 2vw, 17px);
  letter-spacing: .12em;
  color: var(--ink-soft);
  margin-top: 3.4vh;
  max-width: 34em;
  position: relative;
  z-index: 5;
}
.p-cam {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--print-red);
  margin-top: 1.4vh;
  animation: camblink 1.6s steps(1) infinite;
  position: relative;
  z-index: 5;
}
@keyframes camblink { 50% { opacity: .4; } }
.p-billing {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 26px;
  margin-top: 3.6vh;
  max-width: 720px;
  position: relative;
  z-index: 5;
}
.p-billing span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--ink-dim);
  text-transform: uppercase;
}
/* 条码 */
.barcode { margin-top: 3vh; position: relative; z-index: 5; transform: rotate(1deg); }
.barcode::before {
  content: "";
  display: block;
  width: 190px;
  height: 30px;
  background: repeating-linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 5px,
    var(--ink) 5px 6px, transparent 6px 11px,
    var(--ink) 11px 14px, transparent 14px 17px);
  opacity: .85;
}
.barcode span {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .3em;
  color: var(--ink-dim);
}
/* CMYK 色条 */
.cmyk {
  position: absolute;
  left: 18px;
  bottom: 92px;
  display: flex;
  gap: 0;
  transform: rotate(90deg);
  transform-origin: left bottom;
}
.cmyk i { width: 26px; height: 14px; }
.cmyk i:nth-child(1) { background: #00b7eb; }
.cmyk i:nth-child(2) { background: #ec008c; }
.cmyk i:nth-child(3) { background: #ffef00; }
.cmyk i:nth-child(4) { background: var(--ink); }
.p-scroll {
  position: absolute;
  bottom: 52px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--ink-dim);
  animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translate(-50%, 6px); } }

/* 跑马灯：油墨横幅 */
.ticker {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--ink);
  overflow: hidden;
}
.ticker-in {
  display: flex;
  white-space: nowrap;
  width: max-content;
  animation: tick 30s linear infinite;
}
.ticker-in span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--paper);
  padding: 9px 0;
}
@keyframes tick { to { transform: translateX(-50%); } }

/* ————— 三幕页签 ————— */
.tabs {
  position: sticky;
  top: 0;
  z-index: 1200;
  background: var(--paper);
  border-bottom: 1.5px solid var(--ink);
}
.tabs-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
}
.tab {
  flex: 1;
  appearance: none;
  border: 0;
  border-right: 1px solid rgba(23, 20, 15, .25);
  background: transparent;
  font-family: var(--mono);
  color: var(--ink-dim);
  padding: 14px 6px 12px;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.tab:last-child { border-right: 0; }
.tab .act { display: block; font-size: 13px; font-weight: 700; letter-spacing: .3em; }
.tab .tab-date { display: block; font-size: 10.5px; letter-spacing: .2em; margin-top: 3px; }
.tab.active { background: var(--ink); color: var(--paper); }
.tab.active .tab-date { color: var(--day-color, var(--accent)); }

/* ————— 主布局 ————— */
.layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 40px;
  display: grid;
  grid-template-columns: 1fr;
  scroll-margin-top: 64px;   /* 跳转时避开 sticky 页签 */
}

/* ————— 幕标题：套印偏移 + 小巴牌 ————— */
.day-head { padding: 44px 4px 6px; }
.day-head .act-en {
  display: inline-block;
  font-family: var(--anton);
  font-size: clamp(52px, 8vw, 96px);
  line-height: 1;
  letter-spacing: .04em;
  color: var(--ink);
  text-shadow: 4px 4px 0 color-mix(in srgb, var(--day-color, var(--accent)) 55%, transparent);
  transform: rotate(-1.2deg);
}
.day-head .head-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.day-head .theme {
  font-family: var(--serif);
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 900;
  letter-spacing: .1em;
  color: var(--ink);
}
/* 小巴水牌 */
.bus {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  background: linear-gradient(170deg, #fdfcf7, #eceadf);
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 3px 14px 4px;
  transform: rotate(-1.6deg);
  box-shadow: 3px 4px 0 rgba(23, 20, 15, .2);
}
.bus b {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 21px;
  color: #c8102e;
  line-height: 1.3;
}
.bus i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 13px;
  color: #16359c;
  font-weight: 700;
}
.day-head .date {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .26em;
  color: var(--ink-dim);
  margin-top: 10px;
}

/* ————— 地图：WIN98 窗口 ————— */
.map-side { padding-top: 20px; }
.win {
  background: #c9d1dc;
  border: 2px solid;
  border-color: #eef3f8 #4a5568 #4a5568 #eef3f8;
  padding: 3px;
  box-shadow: 8px 9px 0 rgba(23, 20, 15, .18);
  transform: rotate(.4deg);
}
.win-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, #16217c, #3b6ff0);
  color: #fff;
  padding: 4px 8px;
  margin-bottom: 3px;
}
.win-title {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
}
.win-btns { display: flex; gap: 4px; }
.win-btns i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 14px;
  width: 16px; height: 15px;
  text-align: center;
  color: #1a1a1a;
  background: linear-gradient(160deg, #f4f7fa, #aab6c4);
  border: 1px solid;
  border-color: #fff #4a5568 #4a5568 #fff;
}
#map {
  height: 44vh;
  min-height: 300px;
  background: var(--paper-old);
}
/* 旧地图印刷感 */
.leaflet-tile { filter: sepia(.35) saturate(.75) contrast(1.04) brightness(1.01); }
.leaflet-container { background: var(--paper-old); }
.map-note {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--ink-dim);
  margin-top: 10px;
  text-align: center;
}
.pin {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  background: var(--paper-warm);
  color: var(--day-color, var(--accent));
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  border: 1.5px solid var(--ink);
  box-shadow: 2px 2px 0 rgba(23, 20, 15, .3);
}
.leaflet-popup-content-wrapper {
  font-family: var(--sans);
  background: var(--paper-warm);
  color: var(--ink);
  border-radius: 0;
  border: 1.5px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(23, 20, 15, .2);
}
.leaflet-popup-content { margin: 10px 14px; font-size: 13px; line-height: 1.6; }
.leaflet-popup-content .pp-sc { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--ink-dim); }
.leaflet-popup-tip { background: var(--paper-warm); border: 1.5px solid var(--ink); }

/* ————— 场景时间轴 ————— */
.timeline { list-style: none; padding: 30px 4px 10px; position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 0; bottom: 12px;
  border-left: 1.5px dashed rgba(23, 20, 15, .4);
}
.stop, .transit { position: relative; padding-left: 40px; }
.stop { margin-bottom: 50px; }
.stop::before {
  content: "";
  position: absolute;
  left: 9px; top: 22px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--day-color, var(--accent));
  border: 1.5px solid var(--ink);
}

.transit {
  margin: -20px 0 26px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--ink-dim);
  text-transform: uppercase;
}
.transit::before {
  content: "✂";
  position: absolute;
  left: 8px; top: 50%;
  transform: translateY(-55%) rotate(180deg);
  font-size: 13px;
  color: var(--ink-dim);
}
.transit .cut { color: var(--day-color, var(--accent)); font-weight: 700; }

/* ————— 拍立得堆叠 ————— */
.stack {
  position: relative;
  z-index: 3;
  height: calc(min(64vw, 380px) * .75 + 96px);
  margin-bottom: -34px;
}
.pol {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(64vw, 380px);
  margin-left: calc(min(64vw, 380px) / -2);
  background: #fbf9f4;
  padding: 10px 10px 2px;
  border: 1px solid rgba(23, 20, 15, .12);
  box-shadow: 0 12px 28px rgba(23, 20, 15, .28);
  cursor: pointer;
  transition:
    transform .55s cubic-bezier(.2, 1.15, .3, 1),
    filter .45s ease,
    opacity .45s ease;
  transform: rotate(var(--rot, -2deg));
}
.pol::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 76px; height: 24px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(245, 197, 24, .4);
  box-shadow: 0 2px 6px rgba(23, 20, 15, .18);
}
.pol .ph-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background-color: var(--paper-old);
  filter: saturate(1.3) contrast(1.1) sepia(.12) hue-rotate(-6deg);
}
.pol video.ph-vid {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: #000;
}
/* 显影过程：未加载时藏图，加载后从暗褐模糊中淡入 */
.pol img.ph-img, .pol video.ph-vid { opacity: 0; }
.pol.loaded img.ph-img, .pol.loaded video.ph-vid {
  opacity: 1;
  animation: develop 1.1s ease;
}
@keyframes develop {
  0% { opacity: 0; filter: sepia(.7) brightness(.5) contrast(.85) blur(5px); }
}
/* 未显影相纸 */
.devtag {
  position: absolute;
  top: 10px; left: 10px; right: 10px;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .28em;
  color: rgba(245, 233, 208, .45);
  background: linear-gradient(165deg, #34382f, #211f1a);
  animation: devpulse 1.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes devpulse { 50% { opacity: .7; } }
.pol.loaded .devtag { display: none; }

.pol .ph-img.none {
  display: grid;
  place-items: center;
  border: 1.5px dashed rgba(217, 48, 44, .5);
  filter: none;
}
.pol .ph-img.none span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .26em;
  color: var(--ink-dim);
}
.pol figcaption {
  font-family: var(--hand);
  font-size: 23px;
  line-height: 1.15;
  color: #26418f;           /* 蓝墨水 */
  text-align: center;
  padding: 9px 6px 12px;
  transform: rotate(-.8deg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pol .pcount {
  position: absolute;
  right: 14px;
  bottom: 10px;
  font-family: var(--mono);
  font-size: 10px;
  color: #9a9382;
  letter-spacing: .1em;
}
.pol.is-active { z-index: 30; }
.pol.is-left {
  z-index: 10;
  transform: translateX(-71%) rotate(-7deg) scale(.94);
  filter: brightness(.9) saturate(.85);
}
.pol.is-right {
  z-index: 10;
  transform: translateX(71%) rotate(7deg) scale(.94);
  filter: brightness(.9) saturate(.85);
}
.pol.is-under {
  z-index: 5;
  opacity: 0;
  transform: scale(.82) rotate(var(--rot, 0deg));
  pointer-events: none;
}
/* 切换按钮：纸质圆钮 */
.snav {
  position: absolute;
  top: 42%;
  z-index: 40;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: var(--paper-warm);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 2px 3px 0 rgba(23, 20, 15, .25);
  transition: transform .15s, opacity .3s;
}
.snav:hover { transform: scale(1.1); }
.sprev { left: 2px; }
.snext { right: 2px; }
.snav.off { opacity: .18; pointer-events: none; }

/* ————— 场景卡片：纸片 ————— */
.card {
  background: var(--paper-warm);
  border: 1.5px solid var(--ink);
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 4px 5px 0 rgba(23, 20, 15, .14);
}
.stop:nth-child(odd) .card { transform: rotate(.7deg); }
.stop:nth-child(even) .card { transform: rotate(-.7deg); }
.has-stack .card-body { padding-top: 44px; }
@media (hover: hover) {
  .stop .card:hover {
    transform: translate(-3px, -3px) rotate(0deg);
    box-shadow: 7px 8px 0 color-mix(in srgb, var(--day-color, var(--accent)) 70%, transparent);
  }
}
.stop.flash .card {
  transform: translate(-3px, -3px) rotate(0deg);
  box-shadow: 7px 8px 0 color-mix(in srgb, var(--day-color, var(--accent)) 70%, transparent);
}

.card-body { padding: 16px 20px 17px; }
.scene-line {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--ink-dim);
  text-transform: uppercase;
}
.scene-line .sc { color: var(--day-color, var(--accent)); font-weight: 700; }
.scene-line .locate {
  margin-left: auto;
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--ink-dim);
  cursor: pointer;
  padding: 2px 0 2px 8px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.scene-line .locate:hover { color: var(--day-color, var(--accent)); }

.title-line {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 7px;
  flex-wrap: wrap;
}
.title-line .time {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--day-color, var(--accent));
  letter-spacing: .04em;
}
.card h3 { font-size: 19px; font-weight: 900; letter-spacing: .04em; color: var(--ink); }
.card p.desc {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 6px;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.chip {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  border: 1px solid var(--ink);
  padding: 3px 10px;
  background: #fbf9f4;
  color: var(--ink-soft);
  box-shadow: 2px 2px 0 rgba(23, 20, 15, .12);
}
.chip:nth-child(odd) { transform: rotate(-1deg); }
.chip:nth-child(even) { transform: rotate(1deg); }
.chip:hover { border-color: var(--day-color, var(--accent)); color: var(--ink); }

/* ————— 片尾：油墨块 ————— */
.credits {
  background: var(--ink);
  color: var(--paper-old);
  text-align: center;
  padding: 64px 24px 72px;
  margin-top: 30px;
}
.credits .roll {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .24em;
  line-height: 2.6;
  text-transform: uppercase;
}
.credits .fin {
  font-family: var(--anton);
  font-size: 44px;
  letter-spacing: .3em;
  color: var(--print-red);
  margin-top: 34px;
}

/* 磁带播放器 */
.tape-player {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1500;
  width: 196px;
  background: linear-gradient(165deg, #33363d, #1d1f24);
  border: 1.5px solid #0c0d10;
  border-radius: 10px;
  padding: 10px 12px 8px;
  transform: rotate(-1.5deg);
  box-shadow: 0 10px 26px rgba(23, 20, 15, .38), inset 0 1px 0 rgba(255, 255, 255, .12);
  cursor: pointer;
  user-select: none;
  transition: transform .15s;
}
.tape-player:hover { transform: rotate(0deg) scale(1.03); }
.screw {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #b9bec7, #4a4e57);
}
.screw::before { content: ""; position: absolute; left: 0; right: 0; top: 2.4px; height: 1px; background: #23252a; }
.sc1 { top: 5px; left: 5px; } .sc2 { top: 5px; right: 5px; }
.sc3 { bottom: 5px; left: 5px; } .sc4 { bottom: 5px; right: 5px; }
/* 标签纸 */
.tp-label {
  background: var(--paper-warm);
  border-radius: 4px;
  padding: 5px 8px 6px;
  box-shadow: inset 0 0 0 1px rgba(23, 20, 15, .18);
}
.tp-stripes { display: flex; height: 5px; border-radius: 2px; overflow: hidden; }
.tp-stripes i { flex: 1; }
.tp-stripes i:nth-child(1) { background: var(--print-red); }
.tp-stripes i:nth-child(2) { background: var(--sticker-yellow); }
.tp-stripes i:nth-child(3) { background: var(--print-blue); }
.tp-title {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .18em;
  line-height: 1.4;
  color: var(--ink);
  text-align: center;
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 开窗：两轮一带 */
.tp-window {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 6px 6px;
  background: rgba(0, 0, 0, .45);
  border-radius: 14px;
  padding: 5px 7px;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, .7);
}
.tp-reel {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2.5px solid #d8d2c4;
  background:
    radial-gradient(circle, #17140f 0 3.5px, transparent 3.5px),
    repeating-conic-gradient(#efe9dc 0deg 26deg, #17140f 26deg 60deg);
}
.tape-player.playing .tp-reel { animation: reel 2.4s linear infinite; }
@keyframes reel { to { transform: rotate(360deg); } }
/* 带子 = 进度条 */
.tp-tape {
  position: relative;
  flex: 1;
  height: 5px;
  background: rgba(245, 233, 208, .18);
  border-radius: 3px;
  overflow: hidden;
}
.tp-fill {
  display: block;
  width: 0%;
  height: 100%;
  background: #8b5e34;   /* 磁带棕 */
  border-radius: 3px;
}
.tp-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  color: #9aa39b;
}
.tp-state { color: var(--sticker-yellow); }
.tape-player.missing .tp-title { font-size: 13px; color: var(--print-red); }
@media (max-width: 640px) {
  .tape-player { display: none; }
}

/* ————— 桌面双栏 ————— */
@media (min-width: 1000px) {
  .layout {
    grid-template-columns: minmax(0, 1fr) 440px;
    grid-template-areas:
      "head map"
      "tl   map";
    column-gap: 48px;
    align-items: start;
  }
  .day-head { grid-area: head; }
  .timeline { grid-area: tl; }
  .map-side {
    grid-area: map;
    position: sticky;
    top: 62px;
    padding-top: 44px;
  }
  #map { height: calc(100vh - 210px); max-height: 740px; }
  .stack { height: calc(min(26vw, 340px) * .75 + 96px); }
  .pol { width: min(26vw, 340px); margin-left: calc(min(26vw, 340px) / -2); }
  /* 双栏下露边收窄，避免钻进右侧地图窗口 */
  .pol.is-left  { transform: translateX(-56%) rotate(-7deg) scale(.94); }
  .pol.is-right { transform: translateX(56%) rotate(7deg) scale(.94); }
}
@media (max-width: 940px) {
  /* 两侧贴纸（灯箱/印章）占位，演职员行内收避让 */
  .p-billing { max-width: 520px; }
}
@media (max-width: 640px) {
  .halftone { top: -120px; right: -160px; }
  .mahjong { right: 6%; transform: rotate(12deg) scale(.82); }
  .tape { top: 2%; }
  .torn { margin: 14px 0 24px; }
  .p-label { font-size: 9.5px; letter-spacing: .2em; }
  .neoncard { left: 0; bottom: 2.5%; transform: rotate(-7deg) scale(.6); transform-origin: bottom left; }
  .seal { right: 3%; top: 17%; bottom: auto; transform: rotate(8deg) scale(.72); }
  .torn { font-size: 12px; letter-spacing: .2em; }
}
@media (max-width: 480px) {
  .poster { min-height: 92vh; }
  .p-billing { gap: 4px 18px; }
  .card-body { padding: 14px 15px 15px; }
  .card h3 { font-size: 17px; }
  .scene-line .locate { display: none; }
  .stack { height: calc(min(72vw, 380px) * .75 + 92px); }
  .pol { width: min(72vw, 380px); margin-left: calc(min(72vw, 380px) / -2); }
  .bus b { font-size: 18px; }
  .cmyk i { width: 20px; height: 11px; }
}