/* 青铜沙盘：色出于铜锈、朱砂、简牍；朱砂只予战事 */

/* 显示字体随页内嵌，不听凭各机器的回退 */
@font-face {
  font-family: "Sandtable Serif";
  src: url("../assets/display.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --void: #080b0c;
  --patina: #12181a;
  --patina-hi: #1a2220;
  --patina-edge: #2b342f;
  --bronze: #c9a227;
  --bronze-dim: #7d6822;
  --cinnabar: #c8352b;
  --cinnabar-dim: #7c2a24;
  --bone: #e8e2d2;
  --bone-2: rgba(232, 226, 210, 0.62);
  --bone-3: rgba(232, 226, 210, 0.34);

  --display: "Sandtable Serif", "Songti SC", "STSong", "Source Han Serif SC",
    "Noto Serif CJK SC", "Noto Serif SC", "SimSun", serif;
  --body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Noto Sans CJK SC", system-ui, sans-serif;
  --num: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  --edge: 22px;          /* 盘内器具与提示的统一边距 */
  --pad: 14px;           /* 简册栏内边距 */
  --cine-x: clamp(30px, 4.6vw, 84px); /* 放映时一切左右元素的基线 */

  --rail: 66px;
  --ruler: 106px;
  --col: 262px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background:
    radial-gradient(120% 90% at 50% 0%, #1a2320 0%, var(--void) 72%);
  color: var(--bone);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.6;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
}

.frame {
  display: grid;
  grid-template-rows: var(--rail) 1fr var(--ruler);
  height: 100dvh;
}

/* ── 上梁 ───────────────────────────────────────── */

.rail {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 20px;
  border-bottom: 1px solid var(--patina-edge);
  box-shadow: 0 1px 0 rgba(201, 162, 39, 0.16), inset 0 1px 0 rgba(232, 226, 210, 0.07);
  background: linear-gradient(180deg, #171e1d, #0d1313), var(--cast);
}

/* 铸面：细密的横纹与斑驳，令 UI 读作一块金属而非一层色块 */
:root {
  --cast:
    repeating-linear-gradient(0deg, rgba(232, 226, 210, 0.017) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 5px);
}

.rail-title { display: flex; align-items: baseline; gap: 12px; }

.rail-title h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 25px;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: var(--bone);
  text-shadow: 0 1px 0 #000, 0 0 22px rgba(201, 162, 39, 0.18);
}

/* 幕次：告诉眼睛此刻在读哪一段 */
.rail-act {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--bone-2);
  white-space: nowrap;
}

.rail-act-no {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 11.5px;
  letter-spacing: 0;
  color: #0d1211;
  background: var(--bronze);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.rail-year {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-left: 24px;
  border-left: 1px solid var(--patina-edge);
  margin-left: auto;
  order: 3;
}

.rail-year-num {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--bronze);
  font-variant-numeric: tabular-nums;
}

.rail-year-tag {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--bone-3);
  white-space: nowrap;
}

.rail-layers { display: flex; flex-wrap: wrap; gap: 6px; order: 2; }

.chip {
  padding: 4px 10px;
  box-shadow: inset 0 1px 0 rgba(232, 226, 210, 0.06);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--bone-3);
  border: 1px solid var(--patina-edge);
  border-radius: 2px;
  transition: color 0.16s, border-color 0.16s, background 0.16s;
}

.chip:hover { color: var(--bone-2); border-color: #3c4a43; }

.chip.is-on {
  color: #f0e6c4;
  border-color: rgba(201, 162, 39, 0.55);
  background: rgba(201, 162, 39, 0.09);
}

/* ── 盘面与两侧简册 ─────────────────────────────── */

.board {
  display: grid;
  grid-template-columns: var(--col) minmax(0, 1fr) var(--col);
  min-height: 0;
}

.panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  background: linear-gradient(180deg, #101717, #080d0e 62%), var(--cast);
}

.panel-left {
  border-right: 1px solid var(--patina-edge);
  grid-template-rows: auto minmax(0, 1fr);
  box-shadow: inset 0 1px 0 rgba(232, 226, 210, 0.05), inset -18px 0 26px -20px #000;
}

.panel-right {
  border-left: 1px solid var(--patina-edge);
  grid-template-rows: auto auto auto minmax(0, 1fr);
  box-shadow: inset 0 1px 0 rgba(232, 226, 210, 0.05), inset 18px 0 26px -20px #000;
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--pad) 8px;
  border-bottom: 1px solid var(--patina-edge);
  box-shadow: inset 3px 0 0 rgba(201, 162, 39, 0.5);
}

.panel-head span {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: var(--bronze);
}

.panel-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 162, 39, 0.4), transparent);
}

.panel-head-mid { border-top: 1px solid var(--patina-edge); }

/* 大事记 —— 简牍式竖界栏 */

.chron {
  list-style: none;
  margin: 0;
  padding: 6px 0 24px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #2b342f transparent;
}

.chron::-webkit-scrollbar { width: 6px; }
.chron::-webkit-scrollbar-thumb { background: #2b342f; }

.evt {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 10px;
  padding: 7px var(--pad) 7px 12px;
  cursor: pointer;
  border-left: 2px solid transparent;
  opacity: 0.34;
  transition: opacity 0.2s, background 0.2s, border-color 0.2s;
}

.evt.is-past { opacity: 1; }
.evt:hover { background: rgba(232, 226, 210, 0.05); }
.evt:focus-visible { outline-offset: -2px; }

.evt.is-now {
  background: rgba(200, 53, 43, 0.08);
  border-left-color: rgba(200, 53, 43, 0.6);
}

/* 点中的那一条：同年不止一事时，它与旁的分得开 */
.evt.is-picked {
  opacity: 1;
  background: rgba(200, 53, 43, 0.16);
  border-left-color: var(--cinnabar);
}

.evt-year {
  font-family: var(--num);
  font-size: 11.5px;
  color: var(--bone-3);
  padding-top: 2px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.evt.is-past .evt-year { color: var(--bronze-dim); }
.evt.is-now .evt-year { color: var(--bronze); }

.evt-body { min-width: 0; }

.evt-title {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 类目做成小印：朱文阳刻，字为底色所刻去 */
.evt-kind {
  flex: none;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-family: var(--display);
  font-weight: 700;
  line-height: 1;
  color: #0a1010;
  background: var(--seal, #6b7268);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.5);
  opacity: 0.92;
}

.evt[data-kind="战"] { --seal: #c8352b; }
.evt[data-kind="变"] { --seal: #8fae4e; }
.evt[data-kind="纵"] { --seal: #4a9db4; }
.evt[data-kind="并"] { --seal: #c9a227; }
.evt[data-kind="都"] { --seal: #9b66ad; }
.evt[data-kind="学"] { --seal: #b98cc4; }
.evt[data-kind="工"] { --seal: #a8845c; }

.evt-text {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.62;
  color: var(--bone-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.evt:hover .evt-text { color: var(--bone-2); }

/* 当年之事全文展开，不必再去案上找后半句 */
.evt.is-now .evt-text,
.evt.is-picked .evt-text {
  display: block;
  overflow: visible;
  color: var(--bone-2);
}

.evt { padding-block: 5px; }
.evt.is-now { padding-block: 9px; }

/* 国力 */

.power { padding: 12px var(--pad) 14px; display: grid; gap: 9px; }

.pw { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 9px; }

.pw-name {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

.pw-bar {
  position: relative;
  height: 11px;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(232, 226, 210, 0.13) 0 1px, transparent 1px 10%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(232, 226, 210, 0.05));
  box-shadow: inset 0 0 0 1px rgba(232, 226, 210, 0.07);
}

.pw-fill {
  position: absolute;
  inset: 0 auto 0 0;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.06) 46%, rgba(0, 0, 0, 0.3));
  box-shadow: 1px 0 0 rgba(232, 226, 210, 0.5);
}

.pw-num {
  font-family: var(--num);
  font-size: 11px;
  color: var(--bone-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pw.is-gone { opacity: 0.28; }

.pw-gone { margin: 4px 0 0; font-size: 12px; color: var(--bone-3); }

.pw-note {
  margin: 2px 0 0;
  font-size: 10.5px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: rgba(232, 226, 210, 0.26);
}

/* 案上：详情 */

.detail {
  padding: 12px var(--pad) 22px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #2b342f transparent;
}

.detail::-webkit-scrollbar { width: 6px; }
.detail::-webkit-scrollbar-thumb { background: #2b342f; }

.dt-eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.28em;
  color: var(--bone-3);
  margin: 0 0 4px;
}

.dt-title {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0 0 2px;
  color: var(--bone);
}

.dt-title.is-war { color: #f0a99f; }

.dt-sub {
  font-family: var(--num);
  font-size: 11px;
  color: var(--bronze-dim);
  margin: 0 0 12px;
}

.dt-row { margin: 0 0 10px; }

.dt-key {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--bone-3);
  margin: 0 0 2px;
}

.dt-val { margin: 0; font-size: 13px; line-height: 1.7; color: var(--bone-2); }
.dt-val strong { color: var(--bone); font-weight: 600; }

.dt-weight {
  margin: 12px 0 0;
  padding: 9px 11px;
  font-size: 12.5px;
  line-height: 1.7;
  color: #e6d8b4;
  border-left: 2px solid var(--bronze);
  background: rgba(201, 162, 39, 0.07);
}

.dt-march {
  margin-top: 14px;
  width: 100%;
  padding: 9px 0;
  font-size: 12.5px;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: #f2ded9;
  border: 1px solid var(--cinnabar-dim);
  background: rgba(200, 53, 43, 0.12);
  transition: background 0.18s, border-color 0.18s;
}

.dt-march:hover { background: rgba(200, 53, 43, 0.24); border-color: var(--cinnabar); }

.dt-empty { color: var(--bone-3); font-size: 12.5px; line-height: 1.8; margin: 0; }
.dt-empty b { color: var(--bone-2); font-weight: 500; }

/* 本幕战事：可直接点开推演 */
.dt-wars { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 1px; }

.dt-wars button {
  display: flex;
  align-items: baseline;
  gap: 9px;
  width: 100%;
  padding: 5px 8px 5px 0;
  text-align: left;
  font-size: 13px;
  color: var(--bone-2);
  border-left: 2px solid transparent;
  padding-left: 8px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.dt-wars button:hover {
  color: #f2ded9;
  border-left-color: var(--cinnabar);
  background: rgba(200, 53, 43, 0.1);
}

.dt-wars i {
  flex: none;
  font-family: var(--num);
  font-style: normal;
  font-size: 11px;
  color: var(--bronze-dim);
}

/* ── 盘 ─────────────────────────────────────────── */

.stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #06090a;
  box-shadow:
    inset 0 0 0 1px rgba(201, 162, 39, 0.08),
    inset 0 0 120px rgba(0, 0, 0, 0.95);
}

/* 斜上方的一点余光，令盘面像被照着，而非自发光 */
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 55% at 26% 12%, rgba(255, 236, 190, 0.055), transparent 62%),
    radial-gradient(120% 90% at 50% 50%, transparent 52%, rgba(0, 0, 0, 0.5) 100%);
}

/* 绝对定位：canvas 的属性高度若参与栅格计算，会把行撑大再反过来放大画布 */
#table {
  position: absolute;
  inset: 0;
  display: block;
  touch-action: none;
  width: 100%;
  height: 100%;
  cursor: grab;
  opacity: 0;
  animation: settle 1.1s 0.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#table.is-dragging { cursor: grabbing; }

@keyframes settle {
  from { opacity: 0; transform: scale(1.015); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}

.stage-hint {
  position: absolute;
  left: var(--edge);
  bottom: 12px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--bone-3);
  pointer-events: none;
  transition: opacity 0.6s;
}

.stage-hint.is-hidden { opacity: 0; }

.stage-tools { position: absolute; right: var(--edge); bottom: 12px; display: flex; gap: 5px; }

.tool {
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  font-size: 12px;
  color: var(--bone-3);
  border: 1px solid var(--patina-edge);
  background: rgba(8, 12, 12, 0.72);
  transition: color 0.16s, border-color 0.16s;
}

.tool:hover { color: var(--bone); border-color: var(--bronze-dim); }

.tip {
  position: absolute;
  z-index: 5;
  padding: 6px 9px;
  pointer-events: none;
  font-size: 12px;
  line-height: 1.5;
  color: var(--bone);
  background: rgba(9, 13, 13, 0.94);
  border: 1px solid var(--patina-edge);
  border-left: 2px solid var(--bronze);
  white-space: nowrap;
  transform: translate(12px, -50%);
}

.tip.is-left { transform: translate(calc(-100% - 12px), -50%); border-left: 0; border-right: 2px solid var(--bronze); }

.tip b { font-family: var(--display); font-weight: 700; letter-spacing: 0.08em; }
.tip span { color: var(--bone-3); }

/* 易主提示：盘上闪一下的同时，说清楚是什么易了主 */
.toast {
  position: absolute;
  top: var(--edge);
  left: 50%;
  z-index: 6;
  padding: 7px 14px;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: #f2ead2;
  white-space: nowrap;
  background: rgba(10, 14, 14, 0.9);
  border: 1px solid rgba(201, 162, 39, 0.4);
  border-left: 2px solid var(--bronze);
  opacity: 0;
  transform: translate(-50%, -6px);
  transition: opacity 0.35s, transform 0.35s;
  pointer-events: none;
}

.toast.is-in { opacity: 1; transform: translate(-50%, 0); }

/* 推演字幕：解说贴在盘上，眼睛不必两头跑 */
.caption {
  position: absolute;
  left: 50%;
  bottom: 16px;
  z-index: 6;
  width: min(560px, calc(100% - 32px));
  transform: translateX(-50%);
  padding: 11px 14px 12px;
  background: linear-gradient(180deg, rgba(12, 16, 16, 0.94), rgba(8, 11, 11, 0.97));
  border: 1px solid var(--patina-edge);
  border-top: 2px solid var(--cinnabar);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  animation: rise 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes rise {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.caption-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 7px;
}

.caption-name {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #f4b6ac;
}

.caption-year {
  font-family: var(--num);
  font-size: 11px;
  color: var(--bone-3);
}

.caption-close {
  margin-left: auto;
  padding: 2px 9px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--bone-3);
  border: 1px solid var(--patina-edge);
}

.caption-close:hover { color: var(--bone); border-color: var(--bronze-dim); }

.caption-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--bone);
  text-wrap: pretty;
}

.caption-no {
  flex: none;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  color: #120b0a;
  background: var(--cinnabar);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.caption.is-final .caption-no { background: var(--bronze); color: #131009; }

/* 讲解：随年而来的事，用铜色，与朱砂的战事分开 */
.caption.is-lore { border-top-color: var(--bronze); }
.caption.is-lore .caption-name { color: #f0e2b8; }
.caption.is-lore .caption-no { background: var(--seal, var(--bronze)); color: #0d1211; }
.caption.is-lore .caption-dots { display: none; }
.caption.is-lore .caption-line { color: var(--bone-2); }
.caption.is-final .caption-line { color: #f0e4c6; }

.caption-dots { display: flex; gap: 4px; margin-top: 9px; }

.caption-dots i {
  height: 2px;
  flex: 1;
  background: rgba(232, 226, 210, 0.14);
  transition: background 0.3s;
}

.caption-dots i.is-done { background: var(--cinnabar); }

/* 推演进行时，两侧退居其后 */
body.is-marching .panel-left,
body.is-marching .rail-layers,
body.is-marching .disclaimer {
  opacity: 0.32;
  transition: opacity 0.4s;
}

body.is-marching .power { opacity: 0.45; transition: opacity 0.4s; }

body.is-marching .stage-hint { opacity: 0; }

/* ── 铜尺纪年 ───────────────────────────────────── */

.controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.voice {
  align-self: center;
  max-width: 150px;
  padding: 5px 7px;
  font-family: var(--body);
  font-size: 11px;
  color: var(--bone-2);
  background: #0d1414;
  border: 1px solid var(--patina-edge);
  border-radius: 0;
}

.ruler-wrap {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 0 22px;
  border-top: 1px solid var(--patina-edge);
  box-shadow: 0 -1px 0 rgba(201, 162, 39, 0.16);
  background: linear-gradient(180deg, #0d1313, #171e1d), var(--cast);
}

.play {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  color: var(--bone-2);
  border: 1px solid var(--patina-edge);
  background: linear-gradient(180deg, rgba(232, 226, 210, 0.05), transparent);
  box-shadow: inset 0 1px 0 rgba(232, 226, 210, 0.07);
  transition: color 0.16s, border-color 0.16s, background 0.16s;
}

.play:hover { color: var(--bone); border-color: var(--bronze-dim); background: rgba(201, 162, 39, 0.07); }
.play-icon { font-size: 11px; color: var(--bronze); width: 10px; }
.play-text { font-size: 12px; letter-spacing: 0.24em; text-indent: 0.24em; }

.speed {
  padding: 5px 9px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--bone-3);
  border: 1px solid var(--patina-edge);
  transition: color 0.16s, border-color 0.16s, background 0.16s;
}

.speed:hover { color: var(--bone-2); border-color: #3c4a43; }

.speed[disabled] { opacity: 0.35; cursor: not-allowed; }
.speed[disabled]:hover { color: var(--bone-3); border-color: var(--patina-edge); }

.speed[aria-pressed="true"] {
  color: #f0e6c4;
  border-color: rgba(201, 162, 39, 0.55);
  background: rgba(201, 162, 39, 0.1);
}

.ruler {
  position: relative;
  height: 66px;
  cursor: pointer;
  touch-action: none;
}

.ruler-ticks, .ruler-marks, .ruler-acts { position: absolute; inset: 0; }

/* 幕次分段：铜尺上的六个刻度区 */
.act {
  position: absolute;
  top: 0;
  height: 17px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 6px;
  overflow: hidden;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  white-space: nowrap;
  color: rgba(232, 226, 210, 0.3);
  border-left: 1px solid rgba(201, 162, 39, 0.28);
  background: rgba(232, 226, 210, 0.03);
  transition: color 0.2s, background 0.2s;
}

.act b {
  font-family: var(--display);
  font-size: 10px;
  color: var(--bronze-dim);
  font-weight: 700;
}

.act:hover { color: var(--bone-2); background: rgba(201, 162, 39, 0.08); }

.act.is-now {
  color: #f0e6c4;
  background: rgba(201, 162, 39, 0.13);
  border-left-color: var(--bronze);
}

.act.is-now b { color: var(--bronze); }

.tick {
  position: absolute;
  bottom: 14px;
  width: 1px;
  background: rgba(201, 162, 39, 0.28);
}

.tick.is-major { background: rgba(201, 162, 39, 0.55); }

.tick-label {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  font-family: var(--num);
  font-size: 10px;
  color: var(--bone-3);
  white-space: nowrap;
}

.mark {
  position: absolute;
  top: 21px;
  width: 2px;
  height: 9px;
  background: var(--cinnabar);
  opacity: 0.75;
  transform: translateX(-1px);
}

.ruler-cursor {
  position: absolute;
  top: 17px;
  bottom: 12px;
  width: 2px;
  margin-left: -1px;
  background: var(--bronze);
  box-shadow: 0 0 12px rgba(201, 162, 39, 0.6);
  transition: left 0.12s linear;
}

.ruler-cursor::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: var(--bronze);
}

.ruler-cursor-year {
  position: absolute;
  top: -1px;
  left: 7px;
  font-family: var(--num);
  font-size: 11px;
  color: var(--bronze);
  white-space: nowrap;
}

.ruler-cursor-year.is-flipped { left: auto; right: 7px; }

.disclaimer {
  grid-column: 1 / -1;
  margin: -6px 0 8px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: rgba(232, 226, 210, 0.24);
}

/* ── 窄屏 ───────────────────────────────────────── */

@media (max-width: 1080px) {
  :root { --col: 216px; }
  .rail-layers { display: none; }
}

@media (max-width: 900px) {
  .act span { display: none; }
  .act { justify-content: center; padding: 0; }
}

@media (max-width: 820px) {
  body { overflow: auto; }
  .frame { grid-template-rows: auto auto auto; height: auto; min-height: 100dvh; }
  .rail { height: auto; flex-wrap: wrap; gap: 10px 18px; padding: 12px 16px; }
  .rail-year { order: 2; margin-left: auto; padding-left: 16px; }
  .board { grid-template-columns: 1fr; }
  .stage { height: 62vh; min-height: 380px; order: -1; }
  .panel-left, .panel-right { border: 0; border-top: 1px solid var(--patina-edge); }
  .chron { max-height: 300px; }
  .detail { max-height: 340px; }
  .ruler-wrap {
    position: sticky;
    bottom: 0;
    z-index: 10;
    grid-template-columns: minmax(0, 1fr);
    padding: 8px 14px 4px;
    gap: 2px;
  }
  .controls { flex-wrap: wrap; gap: 6px; }
  .ruler { height: 58px; }
  .disclaimer { margin: 0 0 4px; font-size: 10px; letter-spacing: 0.02em; }
  .play { padding: 7px 10px; }
  .play-text { letter-spacing: 0.1em; text-indent: 0.1em; }
  .speed { padding: 5px 6px; letter-spacing: 0.04em; }
  .caption { bottom: 10px; padding: 9px 11px 10px; }
  .caption-line { font-size: 13px; }
  body.is-marching .panel-left { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  #table { animation: none; opacity: 1; }
  * { transition-duration: 0.01ms !important; }
}


/* ── 放映：片头式的字、抹开的细线、调过色的画面 ───── */

.cine-btn[aria-pressed="true"] {
  color: #f4ded6;
  border-color: var(--cinnabar-dim);
  background: rgba(200, 53, 43, 0.16);
}

.cine-hud,
.act-card { display: none; }

body.is-cinema { overflow: hidden; }
body.is-cinema .board { grid-template-columns: minmax(0, 1fr); }
body.is-cinema .panel,
body.is-cinema .rail-layers,
body.is-cinema .stage-tools,
body.is-cinema .stage-hint,
body.is-cinema .disclaimer,
body.is-cinema .tick-label,
body.is-cinema .ruler-cursor-year { display: none; }

body.is-cinema .rail {
  height: 46px;
  border-bottom-color: transparent;
  box-shadow: none;
  background: linear-gradient(180deg, rgba(6, 9, 10, 0.9), transparent);
}

body.is-cinema .rail-title h1 { font-size: 15px; opacity: 0.5; letter-spacing: 0.5em; }
body.is-cinema .rail-act,
body.is-cinema .rail-year { display: none; }
body.is-cinema .frame { grid-template-rows: 46px 1fr 40px; }
body.is-cinema .stage { box-shadow: none; }

/* 调色：降饱和、提黑位、四角压暗——数字画面与胶片的分别多半在此 */
body.is-cinema #table { filter: saturate(0.86) contrast(1.07) brightness(0.98); }

body.is-cinema .stage::after {
  background:
    radial-gradient(64% 46% at 0% 100%, rgba(4, 6, 7, 0.78), transparent 72%),
    radial-gradient(126% 88% at 50% 45%, transparent 38%, rgba(0, 0, 0, 0.62) 100%),
    linear-gradient(180deg, rgba(4, 6, 7, 0.82), transparent 15%),
    linear-gradient(0deg, rgba(4, 6, 7, 0.88), transparent 30%);
}

/* 播放时鼠标不动，则连控制条一并隐去 */
body.is-cinema.is-idle .rail,
body.is-cinema.is-idle .ruler-wrap {
  opacity: 0;
  transition: opacity 1.1s ease 0.3s;
  pointer-events: none;
}

body.is-cinema .rail,
body.is-cinema .ruler-wrap { transition: opacity 0.35s ease; }

body.is-cinema .ruler-wrap {
  background: linear-gradient(0deg, rgba(6, 9, 10, 0.9), transparent);
  border-top: 0;
  box-shadow: none;
  padding: 0 22px 6px;
  gap: 12px;
}

body.is-cinema .ruler { height: 24px; }
body.is-cinema .tick { opacity: 0.3; }
body.is-cinema .act { height: 10px; font-size: 0; border-left-color: rgba(201, 162, 39, 0.3); }
body.is-cinema .act b { display: none; }
body.is-cinema .mark { top: 12px; height: 5px; }
body.is-cinema .ruler-cursor { top: 10px; }

/* 角上的幕次与纪年 */
body.is-cinema .cine-hud {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.cine-act {
  position: absolute;
  top: 30px;
  left: var(--cine-x);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.42em;
  color: rgba(238, 228, 202, 0.7);
  text-shadow: 0 2px 16px #000;
}

.cine-act span:first-child {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 11px;
  letter-spacing: 0;
  color: #0d1211;
  background: var(--bronze);
}

.cine-year {
  position: absolute;
  top: 26px;
  right: var(--cine-x);
  display: grid;
  justify-items: end;
  gap: 5px;
  padding-top: 9px;
  border-top: 1px solid rgba(201, 162, 39, 0.45);
}

.cine-year-num {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(238, 216, 158, 0.92);
  text-shadow: 0 2px 20px #000;
  font-variant-numeric: tabular-nums;
}

.cine-year-reign {
  font-size: 10px;
  letter-spacing: 0.34em;
  color: rgba(232, 226, 210, 0.4);
  text-shadow: 0 1px 10px #000;
}

/* 易主提示在放映下也去掉框，只留一行宽字距的字 */
body.is-cinema .toast {
  top: auto;
  bottom: 138px;
  left: var(--cine-x);
  transform: none;
  padding: 0 0 0 2px;
  background: none;
  border: 0;
  font-size: 11.5px;
  letter-spacing: 0.34em;
  color: rgba(201, 162, 39, 0.85);
  text-shadow: 0 2px 12px #000;
}

body.is-cinema .toast.is-in { transform: none; }

/* ── 幕起字卡：细线先抹开，字再依次落位 ─────────── */

body.is-cinema .act-card {
  display: grid;
  align-content: center;
  position: absolute;
  inset: 0;
  z-index: 6;
  padding: 0 var(--cine-x);
  background: rgba(5, 8, 9, 0.86);
  pointer-events: none;
}

.act-card[hidden] { display: none !important; }
.act-card.is-out { opacity: 0; transition: opacity 0.9s ease; }

.card-inner { max-width: min(1180px, 100%); }

.card-rule {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, var(--bronze), rgba(201, 162, 39, 0.12));
  transform-origin: left;
  animation: wipe 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform: scaleX(0);
}

.card-rule-bottom { animation-delay: 0.95s; }

@keyframes wipe { to { transform: scaleX(1); } }

.card-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 26px;
  opacity: 0;
  animation: riseIn 1s ease 0.3s forwards;
}

.card-no {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  color: #0d1211;
  background: var(--bronze);
}

.card-kicker {
  font-family: var(--num);
  font-size: 11.5px;
  letter-spacing: 0.44em;
  color: rgba(201, 162, 39, 0.85);
}

.card-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(40px, 7vw, 92px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0.36em;
  color: #f6efdd;
  text-shadow: 0 6px 50px rgba(0, 0, 0, 0.95);
  opacity: 0;
  animation: titleIn 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.45s forwards;
}

@keyframes titleIn {
  from { opacity: 0; transform: translateY(18px); letter-spacing: 0.5em; }
  to { opacity: 1; transform: none; letter-spacing: 0.18em; }
}

.card-en {
  margin: 24px 0 20px;
  font-family: var(--num);
  font-size: clamp(11px, 1.05vw, 14px);
  letter-spacing: 0.62em;
  color: rgba(232, 226, 210, 0.5);
  opacity: 0;
  animation: riseIn 1.1s ease 0.85s forwards;
}

.card-thesis {
  margin: 22px 0 0;
  max-width: 30em;
  font-size: 14.5px;
  line-height: 2.1;
  color: rgba(232, 226, 210, 0.52);
  opacity: 0;
  animation: riseIn 1.2s ease 1.2s forwards;
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ── 下三分之一：自左抹入 ───────────────────────── */

body.is-cinema .caption {
  left: var(--cine-x);
  bottom: 46px;
  width: min(720px, calc(100% - var(--cine-x) * 2));
  transform: none;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  animation: lowerIn 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes lowerIn {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}

body.is-cinema .caption-close { display: none; }

.caption.is-leaving { animation: lowerOut 0.46s ease forwards; }

@keyframes lowerOut {
  to { opacity: 0; transform: translateX(-14px); }
}

body.is-cinema .caption.is-leaving { animation: lowerOutCine 0.46s ease forwards; }

@keyframes lowerOutCine {
  to { opacity: 0; clip-path: inset(0 0 0 24%); }
}

body.is-cinema .caption-head {
  gap: 14px;
  margin: 0 0 10px;
  padding-left: 2px;
}

body.is-cinema .caption-name {
  font-size: 27px;
  letter-spacing: 0.24em;
  color: #f6efdd;
  text-shadow: 0 3px 22px #000;
}

body.is-cinema .caption-year {
  font-family: var(--num);
  font-size: 11px;
  letter-spacing: 0.34em;
  color: rgba(201, 162, 39, 0.8);
  text-shadow: 0 2px 12px #000;
}

body.is-cinema .caption-line {
  gap: 14px;
  padding: 13px 0 0 2px;
  border-top: 1px solid rgba(201, 162, 39, 0.4);
  font-size: 17px;
  line-height: 1.75;
  color: rgba(240, 234, 218, 0.94);
  text-shadow: 0 2px 16px #000;
}

body.is-cinema .caption.is-lore .caption-line { border-top-color: rgba(201, 162, 39, 0.4); }
body.is-cinema .caption:not(.is-lore) .caption-line { border-top-color: rgba(200, 53, 43, 0.6); }

body.is-cinema .caption-no { width: 25px; height: 25px; font-size: 13px; }
body.is-cinema .caption-dots { max-width: 220px; margin-top: 14px; }

@media (max-width: 820px) {
  body.is-cinema .caption { bottom: 22px; }
  body.is-cinema .caption-name { font-size: 19px; }
  body.is-cinema .caption-line { font-size: 14px; }
  .cine-year-num { font-size: 22px; }
  .cine-year { top: 14px; right: 18px; }
  .cine-act { top: 16px; left: 18px; font-size: 12px; letter-spacing: 0.3em; }
  .card-title { letter-spacing: 0.2em; }
}