/* The Last Chapter — 深黑星海 + 霓虹点亮 */
:root {
  --bg: #0B0F19;
  --bg-deep: #020617;
  --surface: rgba(5, 8, 20, 0.80);
  --line: rgba(51, 65, 85, 0.60);
  --line-dim: #1F2937;
  --neon: #00FFF0;
  --cyber: #00B5FF;
  --cyan: #22D3EE;
  --purple: #A855F7;
  --text: #E5E7EB;
  --text-hi: #F9FAFB;
  --text-dim: #9CA3AF;
  --f-title: 'Space Grotesk', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --f-body: 'Inter', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', 'PingFang SC', 'Microsoft YaHei', monospace;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  color-scheme: dark; scroll-behavior: smooth;
  /* 隐藏页面滚动条，仍可正常滚动 */
  scrollbar-width: none;
}
html::-webkit-scrollbar { display: none; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-deep);
  color: var(--text);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- 背景层 ---------- */
.nebula, #starfield, .noise {
  position: fixed; inset: 0; pointer-events: none;
}
/* 星云固定为正方形、居中，改变窗口大小时只等比缩放/裁边，不会被拉扁拉长 */
.nebula {
  z-index: 0;
  inset: auto;
  left: calc(50% - max(50vw, 50vh)); top: calc(50% - max(50vw, 50vh));
  width: max(100vw, 100vh); height: max(100vw, 100vh);
  background:
    radial-gradient(ellipse 60% 45% at 18% 22%, rgba(124, 58, 237, 0.22), transparent 70%),
    radial-gradient(ellipse 55% 40% at 82% 68%, rgba(0, 181, 255, 0.16), transparent 70%),
    radial-gradient(ellipse 40% 30% at 60% 12%, rgba(0, 255, 240, 0.07), transparent 70%),
    radial-gradient(circle at top, #1F2937 0, #020617 55%);
  animation: nebula-drift 60s ease-in-out infinite alternate;
}
@keyframes nebula-drift {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.08) translate3d(-1.5%, 1%, 0); }
}
#starfield { z-index: 1; width: 100%; height: 100%; }
.noise {
  z-index: 2; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 外层 ---------- */
.shell {
  position: relative; z-index: 4;
  margin: 0 auto;
  padding: 24px max(24px, 7vw) 64px;
}
.topbar {
  display: flex; justify-content: space-between; gap: 16px;
  font-family: var(--f-mono); font-size: .6875rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-dim);
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--line-dim);
}
.topbar span:first-child { color: var(--cyan); }

/* ---------- 首屏：恰好一屏，按视口宽高同时缩放 ---------- */
.intro {
  position: relative;
  display: flex; flex-direction: column;
  min-height: calc(100vh - 1.5rem);
  min-height: calc(100svh - 1.5rem);
}
.hero {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: max(16px, 3vh) 0 max(24px, 6vh);
  text-align: center;
}
.hero-inner { will-change: transform, opacity; }
.eyebrow {
  margin: 0 0 max(16px, 4vh);
  font-family: var(--f-mono); font-size: max(11px, calc(.45vw + .55vh));
  letter-spacing: .35em; text-indent: .35em; text-transform: uppercase;
  color: var(--cyan);
}
.title {
  margin: 0;
  font-family: var(--f-title); font-weight: 700;
  font-size: max(40px, min(11vw, 19vh));
  line-height: .95; letter-spacing: -.03em;
  color: var(--text-hi);
  text-shadow: 0 0 40px rgba(0, 255, 240, .25);
}
.title span {
  background: linear-gradient(90deg, var(--neon), var(--cyber) 60%, var(--purple));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* 诗句轮播：三句叠在同一格，逐词模糊浮现 */
.verses {
  display: grid; max-width: 30em;
  margin: max(20px, 6vh) auto 0;
  font-size: max(15px, calc(1vw + 1vh));
  line-height: 1.9; font-style: italic; letter-spacing: .02em;
  color: rgba(203, 213, 225, .88);
}
.verse { grid-area: 1 / 1; margin: 0; }
.verse .w {
  display: inline-block;
  opacity: 0; filter: blur(8px); transform: translateY(.5em);
  transition: opacity .9s var(--ease), filter .9s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--w) * 70ms);
}
.verse.is-active .w { opacity: 1; filter: blur(0); transform: none; transition-delay: calc(500ms + var(--w) * 90ms); }
.verse.is-leaving .w { opacity: 0; filter: blur(8px); transform: translateY(-.5em); transition-duration: .6s; }

.hero-line {
  position: relative; width: min(30vw, 70%); height: 1px;
  margin: max(20px, 5.5vh) auto 0;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .8), transparent);
}
.hero-line::after {
  content: ""; position: absolute; top: -2px; left: 0;
  width: 40px; height: 5px; border-radius: 4px;
  background: var(--neon);
  box-shadow: 0 0 16px var(--neon);
  animation: travel 3s linear infinite;
}
@keyframes travel { from { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } to { left: calc(100% - 40px); opacity: 0; } }

/* 统计：首屏标题下方 */
.stats {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 16px max(32px, 4.5vw);
  margin: max(20px, 6vh) 0 0;
}
.stats div { display: flex; flex-direction: column-reverse; align-items: center; gap: max(6px, .9vh); }
.stats dt {
  font-family: var(--f-mono); font-size: max(9px, calc(.35vw + .45vh));
  letter-spacing: .25em; text-transform: uppercase; color: var(--text-dim);
}
.stats dd {
  margin: 0; font-family: var(--f-mono); font-weight: 500;
  font-size: max(16px, calc(1.1vw + 1.4vh));
  font-variant-numeric: tabular-nums; color: var(--neon);
}

/* 滚动进入视口时浮现 */
.card, .month {
  opacity: 0; transform: translateY(24px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--d, 0ms);
}
.is-in { opacity: 1; transform: none; }
.card-frame:focus-visible, .v-btn:focus-visible {
  outline: 1px solid var(--neon); outline-offset: 3px;
  box-shadow: 0 0 16px rgba(0, 255, 240, .5);
}

/* ---------- 卡片网格：按卡片最小宽度自动铺列，屏幕越宽一行越多 ---------- */
.archive {
  display: grid;
  /* 卡宽 300~350px：能多放一张 300 就加列并回到 300，否则一起变宽，最宽 350。
     列数与列宽由 app.js 的 layoutGrid() 计算（单列封顶 300 保持手机手感）；下面是无 JS 时的近似兜底 */
  grid-template-columns: repeat(auto-fill, minmax(300px, 350px));
  justify-content: center;
  gap: 40px 28px;
}
.month {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 1rem;
  margin: 1rem 0 0;
  font-family: var(--f-mono); font-size: .75rem;
  letter-spacing: .3em; color: var(--cyan);
}
.month:first-child { margin-top: 0; }
.month::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(34, 211, 238, .6), transparent);
}

/* 长标题不撑宽网格列 */
.card { min-width: 0; }

/* 600×900 区域：固定 2:3 比例，按列宽缩放 */
.card-frame {
  --glow: var(--neon);
  position: relative; display: block; width: 100%;
  aspect-ratio: 600 / 900;
  padding: 0; border: 1px solid var(--line); border-radius: .875rem;
  background: var(--surface);
  overflow: hidden; isolation: isolate;
  container-type: inline-size;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.card-frame:hover {
  transform: scale(1.03);
  border-color: color-mix(in srgb, var(--glow) 70%, transparent);
  box-shadow: 0 0 28px color-mix(in srgb, var(--glow) 45%, transparent);
}
.card-frame:active { transition-duration: .12s; box-shadow: 0 0 8px color-mix(in srgb, var(--glow) 30%, transparent); }
/* hover 时一道柔光掠过（z 高于悬浮信息卡纱幕，流光扫过整个卡面）。
   时序=原版（1s var(--ease)，-40%→140%）勿改；悬浮起跑延迟 .1s（用户手感钦点）：
   不等纱幕变暗光带滑过亮封面几乎不可见（顶部缺失感的根因）；
   移开时不延迟（基础规则无 delay），回程从下到上全程即时可见 */
.card-frame::after {
  content: ""; position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background: linear-gradient(to bottom, transparent 0, rgba(255, 255, 255, .06) 50%, transparent 100%);
  background-size: 100% 30%; background-repeat: no-repeat;
  background-position: 0 -40%;
  transition: background-position 1s var(--ease);
}
.card-frame:hover::after { background-position: 0 140%; transition-delay: .1s; }

.media {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity .6s var(--ease);
  -webkit-user-drag: none; /* 禁原生图片拖拽：悬浮划选文字时不再拽起封面 */
}
.media.is-loaded { opacity: 1; }

.card-meta {
  display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: baseline; gap: .75rem;
  padding: .875rem 2px 0;
}
/* 标题恒为一行：默认省略号截断，超长时 hover 卡片来回滚动显示全文 */
.card-title {
  flex: 1 1 auto; margin: 0; min-width: 0;
  font-family: var(--f-title); font-weight: 600; font-size: 1rem;
  letter-spacing: -.01em; color: var(--text-hi);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-title .t { display: inline; }
.card.is-overflow:hover .card-title { text-overflow: clip; }
.card.is-overflow:hover .card-title .t {
  display: inline-block;
  animation: title-marquee var(--marquee-ms, 4s) ease-in-out .4s infinite alternate;
}
@keyframes title-marquee { 0%, 12% { transform: translateX(0); } 88%, 100% { transform: translateX(var(--shift, 0)); } }
.card-date {
  flex-shrink: 0; white-space: nowrap;
  font-family: var(--f-mono); font-size: .75rem;
  font-variant-numeric: tabular-nums; color: var(--text-dim);
}
.card-line {
  height: 1px; margin-top: .625rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--glow) 70%, transparent), transparent);
  transform-origin: left; transform: scaleX(.25);
  transition: transform .5s var(--ease);
}
.card:hover .card-line { transform: scaleX(1); }

/* 各类型发光色：同一卡片仅一种 */
.card--game   { --glow: var(--neon); }
.card--movie  { --glow: var(--cyber); }
.card--tv     { --glow: #4ADE80; }
.card--book   { --glow: var(--purple); }
.card--quote  { --glow: var(--cyan); }
.card--locked { --glow: #64748B; }
.card .card-frame { --glow: inherit; }

/* ---------- 无图时的生成封面 ---------- */
.cover {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 12cqw 9cqw;
  text-align: left;
  background:
    radial-gradient(circle at 70% 25%, hsla(var(--h), 90%, 60%, .55), transparent 55%),
    radial-gradient(circle at 20% 80%, hsla(calc(var(--h) + 60), 80%, 45%, .45), transparent 60%),
    linear-gradient(160deg, hsl(var(--h), 45%, 12%), #020617 75%);
}
.cover::before {
  content: ""; position: absolute; inset: 0; opacity: .7;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 75% 15%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 60% 55%, #fff, transparent),
    radial-gradient(1px 1px at 35% 70%, #fff, transparent),
    radial-gradient(1px 1px at 88% 82%, #fff, transparent),
    radial-gradient(1px 1px at 10% 92%, #fff, transparent);
}
.cover-orb {
  position: absolute; top: 18%; right: -12%;
  width: 70cqw; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid hsla(var(--h), 90%, 75%, .35);
  box-shadow: 0 0 40px hsla(var(--h), 90%, 60%, .25), inset 0 0 40px hsla(var(--h), 90%, 60%, .2);
}
/* 占位封面：标题缩小调淡，只作「此处待放图」的提示，正式标题在卡片下方 */
.cover-name {
  position: relative;
  font-family: var(--f-title); font-weight: 600;
  font-size: 7cqw; line-height: 1.2; letter-spacing: -.01em;
  color: rgba(226, 232, 240, .42); word-break: break-word;
}
/* ---------- 文字卡 ---------- */
.quote {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 14cqw 11cqw;
  text-align: left;
  /* 封面文字可划选复制（点击进详情由选区判空防护兜住） */
  -webkit-user-select: text; user-select: text;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(34, 211, 238, .14), transparent 60%),
    linear-gradient(180deg, rgba(15, 23, 42, .6), rgba(2, 6, 23, .9));
}
.quote::before {
  content: "\201C";
  position: absolute; top: 6cqw; left: 7cqw;
  font-family: var(--f-title); font-size: 40cqw; line-height: 1;
  color: rgba(34, 211, 238, .14);
}
.quote-text {
  position: relative; margin: 0;
  font-size: 7.6cqw; line-height: 1.75; font-weight: 400;
  color: var(--text-hi);
  white-space: pre-line;
}
.quote-text.is-long { font-size: 6.4cqw; }
.quote-from {
  position: relative; margin-top: 8cqw;
  display: flex; align-items: center; gap: 3cqw;
  font-family: var(--f-mono); font-size: 3.4cqw;
  letter-spacing: .12em; color: var(--cyan);
}
.quote-from::before { content: ""; width: 8cqw; height: 1px; background: currentColor; }

/* ---------- 未解锁卡 ---------- */
.locked {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(135deg, rgba(100, 116, 139, .07) 0 2px, transparent 2px 9px),
    radial-gradient(circle at 50% 46%, rgba(30, 41, 59, .9), #020617 70%);
  color: #94A3B8;
}
/* 封禁条：静态斜纹，无文字 */
.locked-tape {
  position: absolute; left: 0; right: 0; height: 7cqw;
  background: repeating-linear-gradient(45deg, #1E293B 0 4cqw, #0F172A 4cqw 8cqw);
  border-block: 1px solid rgba(100, 116, 139, .35);
}
.locked-tape--top { top: 9%; }
.locked-tape--bottom { bottom: 9%; }

.locked-ring {
  position: relative; width: 44cqw; aspect-ratio: 1;
  display: grid; place-items: center;
}
.locked-ring::before, .locked-ring::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px dashed rgba(148, 163, 184, .35);
  animation: spin 40s linear infinite;
}
.locked-ring::after {
  inset: 12%; border-style: solid; border-color: rgba(148, 163, 184, .18);
  border-top-color: rgba(148, 163, 184, .6);
  animation-duration: 8s; animation-direction: reverse;
}
@keyframes spin { to { transform: rotate(360deg); } }
.locked-ring svg {
  width: 15cqw; height: 15cqw;
  fill: none; stroke: #CBD5E1; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.locked-label {
  margin-top: 8cqw;
  font-family: var(--f-title); font-weight: 600; font-size: 7cqw;
  letter-spacing: .45em; text-indent: .45em; color: #E2E8F0;
}
.locked-bars { display: grid; justify-items: center; gap: 2.4cqw; width: 52cqw; margin-top: 8cqw; }
.locked-bars i { display: block; width: 100%; height: 2.6cqw; border-radius: 1px; background: #1E293B; }
.locked-bars i:nth-child(2) { width: 78%; }
.locked-bars i:nth-child(3) { width: 56%; }
.card--locked .card-title { color: #94A3B8; letter-spacing: .2em; }
.card--locked .card-frame:hover { transform: scale(1.015); }

/* ---------- 评级B 悬浮信息卡（2026-10-29 实验版） ----------
   悬浮卡片时卡面居中显示：印章 + 发行日期 + Steam AppID + 英文名；
   印章五档=彩(超级有意思)/金(有意思)/橙(难评)/橘(没意思)/红(超级没意思)，中心词 Yes!/Yes/Or/No/No!；
   印章形制沿用旧评分站：渐变描边圆环 + 内圈虚线 + 渐变词 */
.hovercard {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4cqw; padding: 14cqw 11cqw; text-align: center;
  background: linear-gradient(165deg, rgba(3, 6, 14, .88), rgba(2, 6, 23, .78));
  /* 原地淡入（无位移：translateY 入场会让上边缘露缝，网格/详情统一去掉） */
  opacity: 0;
  pointer-events: auto;
  -webkit-user-select: text; user-select: text;
  transition: opacity .3s var(--ease);
}
.card-frame:hover .hovercard,
.card-frame:focus-visible .hovercard { opacity: 1; }

.medal {
  --mc:  #FFD700;
  --mcg: linear-gradient(135deg, #FFD700, #FFC107);
  position: relative; flex: none;
  width: 36cqw; aspect-ratio: 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--mc);
  background: radial-gradient(circle, color-mix(in srgb, var(--mc) 10%, rgba(3, 6, 14, .40)) 0%, rgba(3, 6, 14, .50) 80%);
  box-shadow: inset 0 0 0 3px rgba(3, 6, 14, .35), 0 4px 18px rgba(0, 0, 0, .5);
}
.medal--super {
  --mc:  #FF6B9D;
  --mcg: linear-gradient(135deg, #FF6B9D, #C084FC, #60A5FA, #34D399);
  animation: medal-flow 6s linear infinite paused;
}
.medal--orange { --mc: #FFA726; --mcg: linear-gradient(135deg, #FFA726, #FF8F00); }
.medal--coral  { --mc: #FF7043; --mcg: linear-gradient(135deg, #FF7043, #F4511E); }
.medal--red    { --mc: #E53935; --mcg: linear-gradient(135deg, #E53935, #C62828); }
@keyframes medal-flow { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
.card-frame:hover .medal--super { animation-play-state: running; }
/* 渐变描边：遮罩只留外圈 2.4px 环 */
.medal::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--mcg, var(--mc));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.4px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.4px), #000 0);
}
/* 内圈虚线环 */
.medal::after {
  content: ""; position: absolute; inset: 9%; border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--mc) 60%, transparent);
}
.medal-word {
  font-family: var(--f-title); font-weight: 500; font-size: 11cqw;
  letter-spacing: -.02em; line-height: 1;
  background: var(--mcg, var(--mc));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .8));
}
/* 信息行与文字卡正文同排版：Inter 正文体 7.6cqw / 行高 1.75 / 400 */
.hc-text {
  font-size: 7.6cqw; line-height: 1.75; font-weight: 400; color: var(--text-hi);
}
.hc-text span { display: block; }
.hc-date { font-variant-numeric: tabular-nums; }
.hc-steam { color: var(--text-dim); }
.hc-en { color: var(--text); word-break: break-word; }

.empty {
  grid-column: 1 / -1;
  padding: 72px 24px; text-align: center;
  border: 1px dashed rgba(0, 255, 240, .4); border-radius: 14px;
  font-family: var(--f-mono); font-size: 13px; letter-spacing: .15em;
  color: var(--text-dim);
}

/* ---------- 详情查看 ---------- */
/* 海报详情视口预算（app.js fit() 同款公式共用）：--viewer-h=垂直预留、--viewer-w=水平留白。
   桌面=两侧翻页栏 200px、垂直 9rem；≤767px 由移动端块改写（边距 16px×2、题注+翻页行 220px） */
.viewer {
  --viewer-h: 9rem; --viewer-w: 200px;
  width: 100vw; height: 100vh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--text);
}
.viewer::backdrop { background: rgba(2, 6, 23, .9); backdrop-filter: blur(6px); }
.viewer[open] {
  display: grid; grid-template-columns: 64px 1fr 64px;
  align-items: center; justify-items: center;
  animation: fade .3s var(--ease);
}
@keyframes fade { from { opacity: 0; } }
.viewer-stage { width: min(calc((100vh - 9rem) * 2 / 3), 100%); }
.viewer-stage .card { opacity: 1; transform: none; transition: none; }
.viewer-stage .card-frame { cursor: pointer; }
.viewer-stage .card-frame:hover { transform: none; }
.viewer-stage .card-title { font-size: 1.25rem; }
.viewer-stage .card-date { font-size: .875rem; }
.viewer-stage .card-line { transform: scaleX(1); }

/* 电影/剧集/书详情：原比例海报——网格卡片仍 2:3 裁剪，详情框体随海报比例自适应（同 is-reader 思路）。
   宽度由 app.js 按图片真实宽高比内联覆写（公式与这里一致，共用 --viewer-* 变量）；这里是加载前的 0.714 兜底 */
.viewer-stage.is-poster { width: min(calc((100vh - var(--viewer-h)) * .7143), calc(100vw - var(--viewer-w))); }
.viewer-stage.is-poster .card-frame { aspect-ratio: auto; }
.viewer-stage.is-poster .media--native {
  /* relative+z-index：盖住绝对定位的 .cover 兜底色块（网格卡里 .media 是 absolute 同理在顶层） */
  position: relative; z-index: 1; inset: auto; display: block; margin-inline: auto;
  width: auto; height: auto;
  max-width: 100%; max-height: calc(100vh - var(--viewer-h));
  object-fit: contain;
}

/* 文字卡详情：完整内容——与图片卡同款（框体特效/边框/题注/渐变线一致），仅宽度自适应、框内为居中正文 */
.viewer-stage.is-reader { width: min(56vw, 1240px, calc(100vw - 180px)); }
.viewer-stage .card--textview .card-frame {
  aspect-ratio: auto;
  height: calc(100vh - 9rem);
}
.viewer-stage .card--textview .text-body {
  position: absolute; inset: 0;
  display: flex;
  overflow-y: auto;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: clamp(24px, 5vh, 44px) clamp(20px, 4.5vw, 56px);
  text-align: center;
}
.viewer-stage .card--textview .text-body::-webkit-scrollbar { display: none; }
/* margin:auto 垂直居中；内容超高时 margin 收缩为 0，可从顶部滚起 */
.viewer-stage .card--textview .text-inner { margin: auto; }
.viewer-stage .card--textview .text-body p {
  margin: 0 0 1.15em;
  /* 等比阶梯（10-30 定稿）：字号随详情卡宽连续缩放（1.6cqw），18px 兜底、4vh 封顶——
     1280=18px、2560≈23px 锚点不变，7920 超宽屏按比例放大但不超出竖向可容纳 */
  font-size: min(max(1.125rem, 1.6cqw), 4vh); line-height: 2.05; letter-spacing: .01em;
  color: var(--text);
  transition: color .25s var(--ease), text-shadow .25s var(--ease);
  cursor: default;
}
/* 悬停整行（英文+中文）以 Since 日期的霓虹青高亮 */
.viewer-stage .card--textview .text-body p:hover {
  color: var(--neon);
  text-shadow: 0 0 18px rgba(0, 255, 240, .35);
}
.viewer-stage .card--textview .text-body p:last-child { margin-bottom: 0; }
/* 节间空隙：完整内容里两段 --- 夹的空行，占一整行高 */
.viewer-stage .card--textview .text-body p.t-gap { height: 1.1em; }
@media (min-width: 1800px) {
  /* 去掉 1440px 上限：卡宽随视口等比增长（56vw），字号由上方 cqw 公式跟随卡宽，7920 宽屏同比例放大 */
  .viewer-stage.is-reader { width: min(56vw, calc(100vw - 220px)); }
}

.v-btn {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 10px;
  background: rgba(15, 23, 42, .7);
  transition: border-color .3s, box-shadow .3s;
}
.v-btn:hover { border-color: rgba(0, 255, 240, .6); box-shadow: 0 0 18px rgba(0, 255, 240, .35); }
.v-btn svg { width: 18px; height: 18px; fill: none; stroke: var(--cyan); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.v-close { position: fixed; top: 20px; right: 20px; }

/* ---------- 页脚 ---------- */
.footer {
  display: flex; justify-content: center; gap: 12px;
  margin-top: 6rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line-dim);
  font-family: var(--f-mono); font-size: .6875rem;
  letter-spacing: .3em; text-transform: uppercase; color: #64748B;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .noise { display: none; }
}
@media (max-width: 767px) {
  .shell { padding: 16px 16px 48px; }
  .topbar span:last-child { display: none; }
  .intro { min-height: calc(100vh - 16px); min-height: calc(100svh - 16px); }
  .eyebrow { letter-spacing: .2em; text-indent: .2em; }
  .stats { flex-wrap: nowrap; justify-content: space-evenly; gap: 12px; }
  .stats dd { font-size: 15px; }
  .stats dt { font-size: 9px; letter-spacing: .2em; }
  .card-frame { border-radius: 10px; }
  .viewer[open] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; padding: 64px 16px 24px; gap: 16px; }
  /* 海报详情手机预算：水平=16px 边距×2，垂直=顶 64+题注约 70+翻页行约 60+底 24（与游戏卡 220px 口径一致） */
  .viewer { --viewer-h: 220px; --viewer-w: 32px; }
  .viewer-stage { grid-column: 1 / -1; grid-row: 1; width: min(100%, calc((100vh - 220px) * 2 / 3)); }
  .viewer-stage.is-reader { width: 100%; }
  .viewer-stage .card--textview .card-frame { height: calc(100vh - 230px); }
  .v-prev { grid-row: 2; justify-self: end; }
  .v-next { grid-row: 2; justify-self: start; }
}
/* 手机竖屏：一行一张 */
/* 矮屏（横屏手机 / 小笔记本）：压缩首屏间距 */
@media (max-height: 560px) {
  .hero { padding: 16px 0 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0s !important;
  }
  .card, .month { opacity: 1; transform: none; }
}