/* ============ 光影百年 · 世界电影史 ============ */
:root {
  --bg: #0d0b09; --bg2: #151009; --panel: #1d1712; --panel2: #241c14;
  --line: #3a2f22; --line2: #4d3e2c;
  --gold: #d4a24e; --gold-b: #f0c674; --gold-d: #8a6a34;
  --red: #8e1c2c; --cream: #f2e8d5; --muted: #a89a85; --dim: #7c7060;
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STZhongsong", SimSun, serif;
  --sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 70px; }
body {
  background: var(--bg); color: var(--cream); font-family: var(--sans);
  line-height: 1.75; font-size: 16px; overflow-x: hidden;
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 999; opacity: .05;
  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.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-b); }
img { max-width: 100%; display: block; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 22px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; letter-spacing: .04em; }
::selection { background: rgba(212,162,78,.35); }
button { font-family: inherit; }

/* ============ 顶部导航 ============ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(13, 11, 9, .86); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 20px; padding: 12px 22px; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.logo { font-family: var(--serif); color: var(--gold-b); font-size: 20px; letter-spacing: .18em; white-space: nowrap; cursor: default; }
.logo b { color: var(--red); -webkit-text-stroke: .5px var(--gold-d); }
.nav a { color: var(--muted); font-size: 14px; white-space: nowrap; padding: 4px 1px; border-bottom: 2px solid transparent; transition: .2s; }
.nav a:hover { color: var(--cream); }
.nav a.active { color: var(--gold-b); border-color: var(--gold); }
main { padding-top: 62px; }

/* ============ 首页 Hero ============ */
.hero { min-height: calc(96vh - 62px); position: relative; display: grid; place-items: center; text-align: center; overflow: hidden; }
.hero-beam {
  position: absolute; inset: -30%; pointer-events: none;
  background: conic-gradient(from 210deg at 82% -12%, rgba(212,162,78,.20), transparent 30%),
              conic-gradient(from 30deg at 12% 110%, rgba(142,28,44,.14), transparent 26%);
  filter: blur(38px); animation: beam 8s ease-in-out infinite alternate;
}
@keyframes beam { from { transform: rotate(-2deg) scale(1); } to { transform: rotate(2.5deg) scale(1.06); } }
.hero-inner { position: relative; padding: 60px 22px; }
.countdown { position: relative; height: 120px; margin-bottom: 8px; }
.cd-num {
  position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif);
  font-size: 110px; color: var(--gold-b); opacity: 0; text-shadow: 0 0 42px rgba(212,162,78,.55);
}
.cd-num.on { animation: cd 1s steps(1) both; }
@keyframes cd { 0% { opacity: 1; transform: scale(1.06); filter: blur(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(.98); filter: blur(6px); } }
.hero-title { font-size: clamp(46px, 9vw, 100px); color: var(--cream); letter-spacing: .12em; text-shadow: 0 0 34px rgba(212,162,78,.30); }
.hero-title em { font-style: normal; color: var(--gold); }
.hero-sub { color: var(--muted); margin-top: 14px; font-size: clamp(15px, 2.4vw, 19px); letter-spacing: .3em; }
.hero-chips { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chip { border: 1px solid var(--line2); color: var(--muted); border-radius: 999px; padding: 5px 14px; font-size: 13px; background: rgba(29,23,18,.6); }
.chip b { color: var(--gold); font-weight: 600; }
.hero-cta { margin-top: 36px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-block; border: 1px solid var(--gold-d); color: var(--gold-b); border-radius: 999px;
  padding: 11px 30px; font-size: 15px; letter-spacing: .12em; background: linear-gradient(180deg, rgba(212,162,78,.16), rgba(212,162,78,.05));
  transition: .25s; cursor: pointer;
}
.btn:hover { border-color: var(--gold); box-shadow: 0 0 24px rgba(212,162,78,.25); transform: translateY(-2px); color: var(--gold-b); }
.btn.ghost { background: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--cream); }
.scroll-cue { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); color: var(--dim); font-size: 13px; letter-spacing: .3em; animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: translate(-50%, 0); opacity: .5; } 50% { transform: translate(-50%, 8px); opacity: 1; } }

/* ============ 区块通用 ============ */
.section { padding: 64px 0 30px; }
.sechead { display: flex; align-items: center; gap: 18px; margin-bottom: 8px; }
.clap { width: 62px; height: 46px; flex: none; position: relative; transform: rotate(-5deg); }
.clap i { position: absolute; left: 0; right: 0; height: 15px; top: 0; border-radius: 4px 4px 0 0; background: repeating-linear-gradient(-55deg, var(--cream) 0 9px, #14100b 9px 18px); }
.clap b { position: absolute; inset: 15px 0 0; background: #14100b; border-radius: 0 0 4px 4px; border: 1px solid var(--line); border-top: none; }
.sechead h2 { font-size: clamp(24px, 4vw, 34px); color: var(--cream); }
.sechead .en { color: var(--dim); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; display: block; }
.secdesc { color: var(--muted); max-width: 860px; margin-bottom: 26px; }
.filmstrip { height: 26px; margin: 34px 0; background-image: radial-gradient(4.5px 4.5px at 13px 6px, rgba(242,232,213,.14) 97%, transparent), radial-gradient(4.5px 4.5px at 13px 20px, rgba(242,232,213,.14) 97%, transparent); background-size: 28px 26px; background-repeat: repeat-x; }

/* ============ 首页：时代入口 / 导览 ============ */
.era-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.era-card {
  position: relative; display: block; border: 1px solid var(--line); border-radius: 14px; padding: 18px 16px 16px;
  background: linear-gradient(165deg, var(--panel), var(--bg2)); overflow: hidden; transition: .25s; color: var(--cream);
}
.era-card:hover { transform: translateY(-4px); border-color: var(--ec); box-shadow: 0 12px 30px rgba(0,0,0,.45); color: var(--cream); }
.era-card .years { font-family: var(--serif); color: var(--ec); font-size: 14px; letter-spacing: .08em; }
.era-card .nm { font-size: 19px; font-weight: 700; margin: 4px 0 2px; font-family: var(--serif); }
.era-card .enm { color: var(--dim); font-size: 12px; letter-spacing: .1em; }
.era-card .ic { position: absolute; right: 10px; top: 8px; font-size: 40px; opacity: .28; filter: grayscale(30%); }
.era-card .ct { color: var(--muted); font-size: 13px; margin-top: 10px; display: block; }
.home-guide { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.gcard-link { border: 1px solid var(--line); border-radius: 14px; padding: 20px; background: var(--panel); transition: .25s; color: var(--cream); display: block; }
.gcard-link:hover { border-color: var(--gold-d); transform: translateY(-3px); color: var(--cream); box-shadow: 0 12px 28px rgba(0,0,0,.4); }
.gcard-link .gi { font-size: 30px; }
.gcard-link h3 { margin: 8px 0 4px; font-size: 18px; color: var(--gold-b); }
.gcard-link p { color: var(--muted); font-size: 13.5px; }
.today-strip { border: 1px dashed var(--line2); border-radius: 14px; padding: 20px 22px; background: var(--bg2); }
.today-strip .td-date { font-family: var(--serif); color: var(--gold-b); font-size: 20px; letter-spacing: .1em; }
.today-strip .ev { color: var(--muted); margin-top: 8px; }
.today-strip .ev b { color: var(--gold); font-family: var(--serif); margin-right: 8px; }

/* ============ 海报卡（设计海报系统）============ */
.poster { margin: 0; }
.poster .phwrap {
  position: relative; aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); background: linear-gradient(158deg, hsl(var(--h,36) 28% 24%), hsl(var(--h,36) 42% 10%));
  transition: transform .2s ease-out, box-shadow .25s; transform-style: preserve-3d;
}
.poster:hover .phwrap { box-shadow: 0 14px 34px rgba(0,0,0,.55), 0 0 0 1px var(--line2); }
.poster .ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 10px; text-align: center; }
.poster .ph::before, .poster .ph::after { content: ""; position: absolute; left: 0; right: 0; height: 22px; background-image: radial-gradient(3.6px 3.6px at 10px 11px, rgba(242,232,213,.20) 96%, transparent); background-size: 20px 22px; background-repeat: repeat-x; }
.poster .ph::before { top: 0; } .poster .ph::after { bottom: 0; }
.poster .ph .ic { font-size: clamp(38px, 6vw, 58px); filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)); }
.poster .ph .yr { font-family: var(--serif); color: rgba(242,232,213,.5); letter-spacing: .3em; font-size: 12px; }
.poster .ph .tt { font-family: var(--serif); color: var(--cream); font-size: 15px; line-height: 1.4; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.poster .ph .pl { position: absolute; top: 30px; right: 12px; font-size: 10px; color: rgba(242,232,213,.30); letter-spacing: .22em; }
.poster img.real { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.poster .src { display: block; margin-top: 7px; font-size: 11.5px; color: var(--dim); }
.poster .src a { color: var(--dim); text-decoration: underline dotted; }
.poster figcaption { padding: 9px 4px 0; }
.poster figcaption .ft { font-size: 14.5px; font-weight: 600; color: var(--cream); }
.poster figcaption .fe { color: var(--dim); font-size: 12px; display: block; margin-top: 1px; }
.poster figcaption .fw { color: var(--muted); font-size: 12.5px; display: block; margin-top: 5px; line-height: 1.6; }
.works-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 18px 14px; }
.poster.tilt-js .phwrap { will-change: transform; }

/* ============ 时间轴 ============ */
.tl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 30px; }
.minimap { position: sticky; top: 84px; align-self: start; display: flex; flex-direction: column; gap: 4px; }
.minimap a { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: 12px; padding: 5px 8px; border-radius: 8px; border-left: 2px solid var(--line); transition: .2s; }
.minimap a .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ec); flex: none; }
.minimap a.on { color: var(--gold-b); background: var(--panel); border-left-color: var(--ec); }
.era-block { position: relative; padding: 8px 0 30px 26px; border-left: 3px solid var(--ec); margin-left: 8px; }
.era-block::before { content: ""; position: absolute; left: -9px; top: 16px; width: 15px; height: 15px; border-radius: 50%; background: var(--bg); border: 3px solid var(--ec); box-shadow: 0 0 16px var(--ec); }
.era-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.era-head .ey { font-family: var(--serif); color: var(--ec); font-size: clamp(22px, 3vw, 30px); letter-spacing: .06em; }
.era-head h3 { font-size: clamp(20px, 3vw, 26px); color: var(--cream); }
.era-head .een { color: var(--dim); font-size: 13px; letter-spacing: .14em; }
.era-intro { color: var(--muted); margin: 8px 0 14px; max-width: 860px; }
.tech-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tech-chips span { border: 1px dashed var(--line2); border-radius: 999px; padding: 3px 12px; font-size: 12.5px; color: var(--gold); background: rgba(212,162,78,.05); }
.ev-list { position: relative; margin: 0 0 24px; }
.ev { display: grid; grid-template-columns: 66px 1fr; gap: 14px; padding: 9px 0; position: relative; }
.ev::before { content: ""; position: absolute; left: 76px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.ev:last-child::before { bottom: 50%; }
.ev .yy { font-family: var(--serif); color: var(--ec); font-size: 16px; text-align: right; position: relative; z-index: 1; }
.ev::after { content: ""; position: absolute; left: 73px; top: 20px; width: 7px; height: 7px; border-radius: 50%; background: var(--ec); box-shadow: 0 0 8px var(--ec); }
.ev .tt { color: var(--muted); font-size: 14.5px; padding-left: 18px; }
.ev .tt strong { color: var(--cream); font-weight: 600; }
.subhead { font-family: var(--serif); color: var(--gold-b); font-size: 17px; letter-spacing: .1em; margin: 6px 0 14px; display: flex; align-items: center; gap: 10px; }
.subhead::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }

/* ============ 类型库 ============ */
.segbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.seg { border: 1px solid var(--line2); background: transparent; color: var(--muted); border-radius: 999px; padding: 6px 18px; cursor: pointer; font-size: 13.5px; transition: .2s; }
.seg.on { color: #14100b; background: var(--gold); border-color: var(--gold); font-weight: 600; }
.gcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
details.gcard { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); overflow: hidden; transition: border-color .2s; }
details.gcard[open] { border-color: var(--gc, var(--gold-d)); }
details.gcard summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 13px; padding: 16px 18px; }
details.gcard summary::-webkit-details-marker { display: none; }
details.gcard summary .gi { font-size: 30px; }
details.gcard summary .gn { font-family: var(--serif); font-size: 18px; color: var(--cream); }
details.gcard summary .ge { color: var(--dim); font-size: 12px; letter-spacing: .1em; display: block; }
details.gcard summary .gb { margin-left: auto; border: 1px solid var(--line2); color: var(--gold); border-radius: 999px; font-size: 12px; padding: 2px 10px; white-space: nowrap; }
.gbody { padding: 2px 20px 18px; border-top: 1px solid var(--line); font-size: 14px; }
.grow { display: grid; grid-template-columns: 76px 1fr; gap: 10px; padding: 8px 0; }
.grow .k { color: var(--dim); font-size: 12.5px; letter-spacing: .1em; padding-top: 2px; }
.grow .v { color: var(--muted); }
.watch-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.watch-chips span { background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 3px 10px; font-size: 12.5px; color: var(--cream); }
.watch-chips span i { font-style: normal; color: var(--gold); margin-left: 5px; font-size: 11.5px; }
.gpath { color: var(--gold); font-size: 13px; opacity: .85; }

/* ============ 流派 / 全球版图 ============ */
.mcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.mcard { border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(170deg, var(--panel), var(--bg2)); padding: 22px; position: relative; overflow: hidden; }
.mcard .mic { position: absolute; right: 14px; top: 10px; font-size: 44px; opacity: .16; }
.mcard .mperiod { display: inline-block; font-family: var(--serif); color: var(--gold-b); border: 1px solid var(--gold-d); border-radius: 999px; padding: 2px 13px; font-size: 13px; letter-spacing: .08em; }
.mcard h3 { font-size: 20px; margin: 12px 0 2px; color: var(--cream); }
.mcard .mreg { color: var(--dim); font-size: 12.5px; letter-spacing: .08em; }
.mcard .mbg { color: var(--muted); font-size: 14px; margin: 12px 0; }
.mcard .mtraits { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.mcard .mtraits span { background: rgba(212,162,78,.08); border: 1px solid var(--line); color: var(--gold); border-radius: 999px; padding: 2px 11px; font-size: 12px; }
.mcard .mworks { color: var(--muted); font-size: 13.5px; border-top: 1px dashed var(--line2); padding-top: 12px; }
.mcard .mworks b { color: var(--gold-b); font-weight: 600; }
.mcard .minf { color: var(--muted); font-size: 13.5px; margin-top: 8px; }
.mcard .minf::before { content: "→ "; color: var(--gold); }
.rcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.rcard { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); padding: 22px; transition: .25s; }
.rcard:hover { transform: translateY(-4px); border-color: var(--line2); box-shadow: 0 14px 32px rgba(0,0,0,.45); }
.rcard .ric { font-size: 40px; }
.rcard h3 { font-size: 21px; margin: 6px 0 0; color: var(--cream); }
.rcard .rtag { color: var(--gold-b); font-family: var(--serif); font-size: 15px; margin-top: 2px; }
.rcard .rera { color: var(--dim); font-size: 12.5px; letter-spacing: .12em; margin-bottom: 10px; }
.rcard .rhl { color: var(--muted); font-size: 14px; margin-bottom: 12px; }
.rcard .rk { color: var(--dim); font-size: 12px; letter-spacing: .14em; margin: 10px 0 6px; }
.rcard .rdirs { display: flex; flex-wrap: wrap; gap: 7px; }
.rcard .rdirs span { border: 1px solid var(--line2); border-radius: 999px; padding: 2px 12px; font-size: 12.5px; color: var(--cream); }
.rcard .rfilms { list-style: none; font-size: 13.5px; color: var(--muted); }
.rcard .rfilms li { padding: 3px 0; border-bottom: 1px dashed var(--line); }
.rcard .rfilms li:last-child { border: none; }
.rcard .rfilms i { font-style: normal; color: var(--gold); font-family: var(--serif); margin-right: 8px; }

/* ============ 好莱坞专题 ============ */
.hw-hero { position: relative; padding: 84px 0 30px; text-align: center; overflow: hidden; }
.hw-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 90% at 50% 0%, rgba(142,28,44,.28), transparent 70%); pointer-events: none; }
.hw-hero h1 { font-size: clamp(36px, 6.5vw, 68px); letter-spacing: .1em; color: var(--cream); position: relative; }
.hw-hero .hwen { color: var(--gold); letter-spacing: .3em; font-size: clamp(13px, 2vw, 17px); margin-top: 8px; position: relative; }
.hw-hero .hwlead { color: var(--muted); max-width: 780px; margin: 20px auto 0; position: relative; font-size: 16.5px; }
.ch-nav { position: sticky; top: 62px; z-index: 60; background: rgba(13,11,9,.9); backdrop-filter: blur(10px); border-block: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.ch-nav::-webkit-scrollbar { display: none; }
.ch-nav .inner { display: flex; gap: 6px; max-width: 1200px; margin: 0 auto; padding: 9px 22px; }
.ch-nav a { color: var(--muted); font-size: 13px; white-space: nowrap; padding: 5px 13px; border-radius: 999px; border: 1px solid transparent; transition: .2s; }
.ch-nav a.on { color: var(--gold-b); border-color: var(--gold-d); background: rgba(212,162,78,.08); }
.ch { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 26px; padding: 46px 0; border-bottom: 1px solid var(--line); }
.ch .chside { position: relative; }
.ch .chnum { font-family: var(--serif); font-size: 74px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--gold-d); position: sticky; top: 120px; }
.ch .chyears { position: sticky; top: 210px; color: var(--gold); font-family: var(--serif); font-size: 15px; letter-spacing: .08em; }
.ch .chicon { position: sticky; top: 240px; font-size: 30px; opacity: .5; }
.ch h3 { font-size: clamp(21px, 3vw, 28px); color: var(--cream); }
.ch .chbody { color: var(--muted); margin: 12px 0 20px; max-width: 860px; }
.ch .quote { border-left: 3px solid var(--red); background: linear-gradient(90deg, rgba(142,28,44,.10), transparent); padding: 12px 16px; border-radius: 0 10px 10px 0; color: var(--cream); font-family: var(--serif); font-size: 15.5px; margin-bottom: 20px; max-width: 860px; }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-top: 18px; }
.person { display: flex; gap: 11px; align-items: flex-start; border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--bg2); }
.person .pav { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, var(--gold-d), #5c421c); color: #fff; font-family: var(--serif); font-size: 19px; box-shadow: inset 0 0 0 1.5px rgba(242,232,213,.25); }
.person .pn { font-weight: 600; color: var(--cream); font-size: 14.5px; }
.person .pb { color: var(--muted); font-size: 12.5px; line-height: 1.6; margin-top: 2px; }

/* ============ 票房图表 ============ */
.chart { display: grid; gap: 9px; margin-top: 18px; }
.chart-row { display: grid; grid-template-columns: minmax(120px, 240px) 1fr 74px; align-items: center; gap: 12px; }
.chart-row .cl { color: var(--muted); font-size: 13.5px; text-align: right; line-height: 1.4; }
.chart-row .cl i { font-style: normal; color: var(--dim); font-size: 11.5px; display: block; }
.bar-track { height: 24px; background: var(--panel); border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.bar-fill { height: 100%; width: 0; border-radius: 6px 0 0 6px; background: linear-gradient(90deg, #6e4f1e, var(--gold)); transition: width 1.1s cubic-bezier(.2,.7,.2,1); position: relative; }
.chart-row.top .bar-fill { background: linear-gradient(90deg, #a3372a, #e0a03c); box-shadow: 0 0 18px rgba(224,160,60,.35); }
.chart-row.in .bar-fill { width: var(--w); }
.chart-row .cv { font-family: var(--serif); color: var(--gold-b); font-size: 15px; }
.chart-row .cv i { font-style: normal; color: var(--dim); font-size: 11px; }
.milestones { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 26px; }
.mile { border: 1px dashed var(--line2); border-radius: 12px; padding: 14px 16px; background: var(--bg2); }
.mile .my { font-family: var(--serif); color: var(--gold-b); font-size: 20px; }
.mile p { color: var(--muted); font-size: 13.5px; margin-top: 4px; }

/* ============ 出处页 ============ */
.srctable { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 14.5px; }
.srctable th { text-align: left; color: var(--gold); font-weight: 600; font-size: 12.5px; letter-spacing: .14em; padding: 10px 12px; border-bottom: 1px solid var(--line2); }
.srctable td { color: var(--muted); padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.srctable td b { color: var(--cream); font-weight: 600; }
.srctable .lic { display: inline-block; border: 1px solid var(--line2); border-radius: 6px; color: var(--gold); font-size: 12px; padding: 1px 8px; }
.notice { border: 1px solid var(--line2); border-left: 4px solid var(--gold); border-radius: 0 12px 12px 0; background: var(--bg2); padding: 18px 20px; color: var(--muted); font-size: 14px; margin-top: 34px; }
.notice b { color: var(--gold-b); }

/* ============ 互动乐园 ============ */
.fun-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.fpanel { border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(170deg, var(--panel), var(--bg2)); padding: 24px; }
.fpanel h3 { font-size: 19px; color: var(--gold-b); display: flex; align-items: center; gap: 10px; }
.fpanel .fhint { color: var(--dim); font-size: 13px; margin: 6px 0 16px; }
.td-big { font-family: var(--serif); font-size: 42px; color: var(--gold-b); letter-spacing: .08em; line-height: 1.2; }
.td-big small { color: var(--dim); font-size: 14px; letter-spacing: .3em; display: block; }
.td-ev { color: var(--muted); font-size: 14px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.td-ev:last-child { border: none; }
.td-ev b { color: var(--gold); font-family: var(--serif); margin-right: 9px; }
.slot { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin: 6px 0 14px; }
.reel { height: 74px; border: 1px solid var(--line2); border-radius: 12px; background: #14100b; display: grid; place-items: center; position: relative; overflow: hidden; }
.reel::before, .reel::after { content: ""; position: absolute; left: 0; right: 0; height: 14px; z-index: 2; background-image: radial-gradient(3.4px 3.4px at 9px 7px, rgba(242,232,213,.22) 96%, transparent); background-size: 18px 14px; background-repeat: repeat-x; }
.reel::before { top: 0; } .reel::after { bottom: 0; }
.reel span { font-size: 21px; color: var(--cream); text-align: center; padding: 0 8px; }
.reel.spin span { animation: reelspin .14s linear infinite; }
@keyframes reelspin { 0% { transform: translateY(4px); opacity: .6; } 50% { transform: translateY(-4px); opacity: 1; } 100% { transform: translateY(4px); opacity: .6; } }
.slot-result { border: 1px dashed var(--gold-d); border-radius: 12px; padding: 16px; background: rgba(212,162,78,.06); min-height: 74px; }
.slot-result .sr-t { font-family: var(--serif); font-size: 19px; color: var(--gold-b); }
.slot-result .sr-t i { font-style: normal; color: var(--dim); font-size: 13px; margin-left: 9px; }
.slot-result p { color: var(--muted); font-size: 14px; margin-top: 4px; }
.qprog { height: 7px; background: var(--panel); border-radius: 99px; overflow: hidden; margin-bottom: 18px; border: 1px solid var(--line); }
.qprog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-d), var(--gold-b)); transition: width .4s; }
.qq { font-family: var(--serif); font-size: 19px; color: var(--cream); margin-bottom: 16px; }
.opt { display: block; width: 100%; text-align: left; background: var(--bg2); border: 1px solid var(--line); color: var(--muted); border-radius: 12px; padding: 12px 16px; margin-bottom: 10px; cursor: pointer; font-size: 14.5px; transition: .2s; }
.opt:hover { border-color: var(--gold-d); color: var(--cream); }
.opt.right { border-color: #5f8a4a; background: rgba(95,138,74,.14); color: #cfe6c0; }
.opt.wrong { border-color: var(--red); background: rgba(142,28,44,.16); color: #eab3b3; }
.opt:disabled { cursor: default; }
.qnote { color: var(--dim); font-size: 13px; border-top: 1px dashed var(--line); padding-top: 10px; }
.qresult { text-align: center; padding: 26px 10px; }
.qresult .rt { font-family: var(--serif); font-size: 30px; color: var(--gold-b); }
.qresult p { color: var(--muted); margin: 8px 0 18px; }
.trivia-wrap { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.trivia { position: relative; border: 1px dashed var(--line2); background: transparent; color: var(--gold); border-radius: 999px; padding: 6px 16px; cursor: pointer; font-size: 13px; transition: .2s; }
.trivia:hover { border-color: var(--gold); background: rgba(212,162,78,.06); }
.trivia-pop { position: absolute; bottom: calc(100% + 10px); left: 0; width: min(330px, 78vw); background: var(--panel2); border: 1px solid var(--gold-d); border-radius: 12px; padding: 13px 15px; color: var(--cream); font-size: 13.5px; line-height: 1.7; display: none; z-index: 80; box-shadow: 0 16px 40px rgba(0,0,0,.55); text-align: left; }
.trivia.open .trivia-pop { display: block; }

/* ============ 页脚 ============ */
footer { border-top: 1px solid var(--line); margin-top: 60px; background: var(--bg2); }
.foot-inner { max-width: 1200px; margin: 0 auto; padding: 34px 22px; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 30px; }
.foot-inner h4 { color: var(--gold-b); font-size: 15px; letter-spacing: .14em; margin-bottom: 12px; font-family: var(--serif); }
.foot-links { list-style: none; }
.foot-links a { display: block; color: var(--muted); font-size: 13.5px; padding: 3px 0; }
.foot-note { color: var(--dim); font-size: 12.5px; margin-top: 14px; line-height: 1.8; }
.imgtoggle { display: flex; align-items: center; gap: 10px; margin-top: 6px; cursor: pointer; user-select: none; }
.imgtoggle input { display: none; }
.imgtoggle .sw { width: 40px; height: 22px; border-radius: 99px; background: var(--panel2); border: 1px solid var(--line2); position: relative; transition: .2s; flex: none; }
.imgtoggle .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--dim); transition: .2s; }
.imgtoggle input:checked + .sw { background: var(--gold-d); }
.imgtoggle input:checked + .sw::after { left: 20px; background: var(--cream); }
.imgtoggle .lb { color: var(--muted); font-size: 13px; }
.copyright { text-align: center; color: var(--dim); font-size: 12.5px; padding: 18px; border-top: 1px solid var(--line); }

/* ============ 动效与响应式 ============ */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .hero-beam, .scroll-cue, .cd-num.on { animation: none; } }
@media (max-width: 1000px) {
  .tl-layout { grid-template-columns: 1fr; }
  .minimap { display: none; }
  .ch { grid-template-columns: 1fr; gap: 10px; }
  .ch .chnum, .ch .chyears, .ch .chicon { position: static; display: inline-block; margin-right: 14px; }
}
@media (max-width: 720px) {
  .foot-inner { grid-template-columns: 1fr; gap: 22px; }
  .chart-row { grid-template-columns: 1fr; gap: 4px; }
  .chart-row .cl { text-align: left; }
  .works-row { grid-template-columns: repeat(2, 1fr); }
  .hero { min-height: 82vh; }
  .cd-num { font-size: 84px; }
  .ev { grid-template-columns: 52px 1fr; }
  .ev::before, .ev::after { left: 60px; }
}