/* ============================================
   CSS CUSTOM PROPERTIES
   ============================================ */
:root {
  --parchment-light: #F4ECD8;
  --parchment-mid: #d4c4a0;
  --parchment-warm: #c8b48a;
  --parchment-dark: #3a2e1c;
  --ink-dark: #2c1810;
  --ink-medium: #5a3e28;
  --ink-light: #7a6048;

  --brass-highlight: #f0dfa0;
  --brass-light: #e6ce8a;
  --brass-mid: #b89947;
  --brass-dark: #8a6d2b;
  --brass-shadow: #6b5520;
  --brass-deep: #4a3a15;

  --seal-dark: #5a1515;
  --seal-mid: #8b1a1a;
  --seal-bright: #a82020;
  --seal-highlight: #c43030;
  --seal-hot: #d44040;

  --font-serif: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
  --font-brush: 'Ma Shan Zheng', 'KaiTi', cursive;
  --timeline-height: 96px;
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }

body {
  font-family: var(--font-serif);
  color: var(--ink-dark);
  cursor: default;
  background: #160d04;
}

/* 入场动画 */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInSoft {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

body:not(.loading) .title-cartouche {
  animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both, titleGlow 3s ease-in-out 1.2s infinite alternate;
}
body:not(.loading) .dynasty-indicator {
  animation: fadeInLeft 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
}
body:not(.loading) .recommendation-rail {
  animation: fadeInSoft 0.6s ease 0.5s both;
}
body:not(.loading) .source-scroll {
  animation: fadeInSoft 0.6s ease 0.58s both;
}
body:not(.loading) .cat-sidebar {
  animation: fadeInRight 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
}
body:not(.loading) .timeline-bar {
  animation: fadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}
/* ============================================
   LEAFLET MAP
   ============================================ */
#map {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--timeline-height);
  z-index: 1;
}

/* 暗角晕染：模拟景深/球体感 */
#map::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none; z-index: 900;
  background: radial-gradient(ellipse at 50% 48%,
    transparent 35%,
    rgba(0,0,0,0.18) 60%,
    rgba(0,0,0,0.52) 85%,
    rgba(0,0,0,0.72) 100%);
}

/* tile pane 恢复正常，terrain 由 terrainPane 自管理 */
.leaflet-tile-pane { opacity: 1; }
/* Ocean: 深墨褐（羊皮纸暗色系） */
.leaflet-container { background: #160d04 !important; }

/* ============================================
   LEAFLET TERRITORY & RIVER LABELS
   ============================================ */
.territory-label {
  pointer-events: none !important;
  overflow: visible;
}

.territory-name-inner {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  text-align: center;
  letter-spacing: 0.08em;
  font-family: var(--font-serif);
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,245,210,0.92);
  opacity: 0.9;
  text-shadow:
    0 0 4px rgba(0,0,0,1),
    0 0 8px rgba(0,0,0,0.9),
    1px 1px 2px rgba(0,0,0,0.8),
    -1px -1px 2px rgba(0,0,0,0.8);
}
/* 面积分级 */
.territory-label.md .territory-name-inner {
  font-size: 13px;
  opacity: 0.95;
}
.territory-label.lg .territory-name-inner {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 900;
  opacity: 1;
  text-shadow:
    0 0 5px rgba(0,0,0,1),
    0 0 10px rgba(0,0,0,0.9),
    1px 1px 3px rgba(0,0,0,0.9),
    -1px -1px 3px rgba(0,0,0,0.9);
}
.territory-label.xl .territory-name-inner {
  font-family: var(--font-brush);
  font-size: 22px;
  letter-spacing: 0.18em;
  font-weight: 400;
  opacity: 1;
  color: rgba(255,245,210,0.95);
  text-shadow:
    0 0 8px rgba(0,0,0,1),
    0 0 16px rgba(0,0,0,0.9),
    2px 2px 4px rgba(0,0,0,0.9),
    -2px -2px 4px rgba(0,0,0,0.9);
}

/* 经纬格网标注 */
.graticule-label {
  pointer-events: none !important;
  overflow: visible;
}

.graticule-label-inner {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-serif);
  font-size: 9px;
  color: #8a7a5a;
  opacity: 0.55;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  letter-spacing: 0.04em;
}

/* City labels from CHGIS */
.city-label {
  font-family: var(--font-serif);
  font-size: 10px;
  color: var(--ink-dark);
  opacity: 0.5;
  white-space: nowrap;
  pointer-events: none !important;
  display: flex !important;
  align-items: center;
  gap: 3px;
}

.city-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-dark);
  opacity: 0.6;
  flex-shrink: 0;
}

.river-label {
  font-family: var(--font-serif);
  font-size: 9px;
  color: #6a7a8a;
  opacity: 0.4;
  white-space: nowrap;
  pointer-events: none !important;
  font-style: italic;
  letter-spacing: 0.1em;
}

/* ============================================
   LEAFLET CONTROLS — RETRO STYLE
   ============================================ */
.leaflet-control-zoom a {
  background: linear-gradient(180deg, var(--parchment-light), var(--parchment-mid)) !important;
  color: var(--ink-dark) !important;
  border-color: var(--brass-dark) !important;
  font-family: var(--font-serif) !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2) !important;
}

.leaflet-control-zoom a:hover {
  background: linear-gradient(180deg, var(--brass-light), var(--brass-mid)) !important;
  color: var(--parchment-light) !important;
}

.leaflet-right .zoom-reset-control {
  clear: none;
  margin-right: 8px;
  border: none;
}

.zoom-reset-button {
  display: block;
  width: 46px;
  height: 26px;
  border: 1px solid var(--brass-dark);
  border-radius: 2px;
  background: linear-gradient(180deg, var(--parchment-light), var(--parchment-mid));
  color: var(--ink-dark);
  font-family: var(--font-serif);
  font-size: 0.68rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.zoom-reset-button:hover,
.zoom-reset-button:focus-visible {
  background: linear-gradient(180deg, var(--brass-light), var(--brass-mid));
  color: var(--parchment-light);
  outline: none;
}

.leaflet-control-attribution {
  background: rgba(244,236,216,0.7) !important;
  font-family: var(--font-serif) !important;
  font-size: 0.6rem !important;
  color: var(--ink-light) !important;
}

.leaflet-control-attribution a {
  color: var(--ink-medium) !important;
}

/* ============================================
   DYNASTY WATERMARK
   ============================================ */
.watermark {
  position: fixed;
  top: calc((100vh - var(--timeline-height)) / 2);
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-brush);
  font-size: clamp(8rem, 22vw, 18rem);
  color: rgba(90, 62, 40, 0.045);
  pointer-events: none;
  z-index: 500;
  white-space: nowrap;
  user-select: none;
  letter-spacing: 0.05em;
  transition: opacity 0.6s ease;
}

.watermark.fading { opacity: 0; }

/* ============================================
   DYNASTY INDICATOR (TOP-LEFT NAMEPLATE)
   ============================================ */
.dynasty-indicator {
  position: fixed;
  top: 28px; left: 28px;
  z-index: 1000;
  padding: 16px 32px 14px;
  min-width: 200px;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(196,168,104,0.12) 25%, transparent 25%),
    linear-gradient(225deg, rgba(196,168,104,0.12) 25%, transparent 25%),
    linear-gradient(175deg, var(--parchment-light) 0%, #ddd0b4 40%, var(--parchment-warm) 70%, var(--parchment-mid) 100%);
  border: 2.5px solid var(--brass-dark);
  outline: 1.5px solid var(--brass-mid);
  outline-offset: 4px;
  border-radius: 3px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.2),
    inset 0 1px 2px rgba(255,255,255,0.35), inset 0 -1px 2px rgba(0,0,0,0.08);
}

.dynasty-indicator::before {
  content: '';
  position: absolute;
  top: -8px; left: -8px; right: -8px; bottom: -8px;
  border: 1px solid rgba(138,109,43,0.25);
  border-radius: 5px;
  pointer-events: none;
}

.dynasty-year {
  display: block; font-size: 2.1rem; font-weight: 900;
  font-family: var(--font-brush);
  color: var(--ink-dark); letter-spacing: 0.08em; line-height: 1.2;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5), 0 2px 6px rgba(0,0,0,0.15);
}

.dynasty-name {
  display: block; font-size: 1.4rem; font-weight: 900;
  font-family: var(--font-brush);
  color: var(--ink-dark); margin-top: 2px; letter-spacing: 0.2em;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

.faction-list {
  font-size: 0.75rem; color: var(--ink-light);
  margin-top: 6px; letter-spacing: 0.05em; line-height: 1.4;
  transition: opacity 0.3s ease;
}
.faction-list:empty { display: none; }

.dynasty-indicator .corner {
  position: absolute; width: 10px; height: 10px;
  border-color: var(--brass-mid); border-style: solid;
}
.dynasty-indicator .corner.tl { top: 4px; left: 4px; border-width: 1.5px 0 0 1.5px; }
.dynasty-indicator .corner.tr { top: 4px; right: 4px; border-width: 1.5px 1.5px 0 0; }
.dynasty-indicator .corner.bl { bottom: 4px; left: 4px; border-width: 0 0 1.5px 1.5px; }
.dynasty-indicator .corner.br { bottom: 4px; right: 4px; border-width: 0 1.5px 1.5px 0; }

/* ============================================
   SMART RECOMMENDATION RAIL
   ============================================ */
.recommendation-rail {
  position: fixed;
  top: 22px;
  left: 50%;
  width: min(1080px, calc(100vw - 620px));
  min-width: 560px;
  transform: translateX(-50%);
  z-index: 1000;
  padding: 10px 12px 12px;
  border: 1px solid rgba(184,153,71,0.58);
  border-top-color: rgba(240,223,160,0.72);
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(240,223,160,0.09), transparent 34%),
    linear-gradient(180deg, rgba(28,18,5,0.94), rgba(18,11,3,0.9));
  box-shadow:
    0 8px 26px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,238,178,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: width 0.22s ease, min-width 0.22s ease, top 0.22s ease, left 0.22s ease, right 0.22s ease, transform 0.22s ease, padding 0.22s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.recommendation-rail::before,
.recommendation-rail::after {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(240,223,160,0.4), transparent);
  pointer-events: none;
}
.recommendation-rail::before { left: 8px; }
.recommendation-rail::after { right: 8px; }

.recommendation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 8px 7px;
}

.recommendation-kicker {
  font-family: var(--font-brush);
  font-size: 1.05rem;
  color: rgba(244,220,143,0.96);
  letter-spacing: 0.18em;
  white-space: nowrap;
  text-shadow: 0 2px 7px rgba(0,0,0,0.6);
}

.recommendation-context {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 0.68rem;
  color: rgba(244,236,216,0.68);
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recommendation-toggle {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(240,223,160,0.48);
  border-radius: 4px;
  background:
    linear-gradient(90deg, rgba(70,42,12,0.42), transparent 16%, transparent 84%, rgba(70,42,12,0.42)),
    linear-gradient(160deg, #d8bf77 0%, #9f7428 48%, #5d3a12 100%);
  color: #2d1a08;
  cursor: pointer;
  font-family: var(--font-brush);
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255,239,178,0.36);
  box-shadow:
    0 2px 7px rgba(0,0,0,0.35),
    inset 0 1px 2px rgba(255,246,202,0.36),
    inset 0 -3px 5px rgba(45,25,6,0.28);
}

.recommendation-toggle:hover,
.recommendation-toggle:focus-visible {
  filter: brightness(1.12);
  outline: 1px solid rgba(244,236,216,0.42);
  outline-offset: 2px;
}

.guide-tabs {
  display: flex;
  gap: 7px;
  padding: 7px 8px 8px;
  border-top: 1px solid rgba(184,153,71,0.18);
  border-bottom: 1px solid rgba(184,153,71,0.18);
}

.guide-tab {
  flex: 1 1 0;
  min-width: 0;
  height: 28px;
  border: 1px solid rgba(184,153,71,0.34);
  border-radius: 4px;
  background: rgba(54,34,9,0.62);
  color: rgba(235,216,168,0.78);
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  box-shadow: inset 0 1px 0 rgba(255,246,202,0.08);
}

.guide-tab:hover,
.guide-tab:focus-visible,
.guide-tab.active {
  border-color: rgba(240,223,160,0.62);
  background:
    linear-gradient(180deg, rgba(214,174,77,0.28), rgba(54,34,9,0.72));
  color: rgba(255,246,205,0.96);
  outline: none;
}

.guide-tab:disabled {
  cursor: not-allowed;
  opacity: 0.46;
  filter: grayscale(0.35);
}

.guide-panel {
  padding-top: 9px;
}

.guide-panel[hidden] {
  display: none !important;
}

.guide-placeholder {
  min-height: 64px;
  display: grid;
  place-items: center;
  color: rgba(244,236,216,0.55);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
}

.recommendation-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.recommendation-card {
  min-width: 0;
  min-height: 84px;
  padding: 9px 10px 10px;
  border: 1px solid rgba(184,153,71,0.34);
  border-radius: 5px;
  background:
    linear-gradient(165deg, rgba(246,232,190,0.12), rgba(170,126,47,0.08) 42%, rgba(22,13,4,0.36)),
    rgba(37,24,8,0.74);
  color: rgba(248,232,185,0.96);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-serif);
  box-shadow:
    0 3px 10px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,246,202,0.08);
  transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}

.recommendation-card:hover,
.recommendation-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(240,223,160,0.72);
  background:
    linear-gradient(165deg, rgba(246,232,190,0.18), rgba(170,126,47,0.12) 42%, rgba(22,13,4,0.32)),
    rgba(48,31,10,0.86);
  box-shadow:
    0 6px 14px rgba(0,0,0,0.36),
    0 0 0 1px rgba(240,223,160,0.12),
    inset 0 1px 0 rgba(255,246,202,0.12);
  outline: none;
}

.recommendation-card-meta,
.recommendation-card-title,
.recommendation-card-desc {
  display: block;
  min-width: 0;
}

.recommendation-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.58rem;
  line-height: 1.25;
  color: rgba(247,210,112,0.86);
}

.recommendation-card-title {
  margin-top: 7px;
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.35;
  color: rgba(255,246,205,0.98);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.recommendation-card-desc {
  margin-top: 6px;
  font-size: 0.68rem;
  line-height: 1.55;
  color: rgba(228,208,160,0.76);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.recommendation-card.cat-war { border-left: 3px solid rgba(185,74,63,0.76); }
.recommendation-card.cat-politics { border-left: 3px solid rgba(214,180,103,0.76); }
.recommendation-card.cat-culture { border-left: 3px solid rgba(139,183,125,0.72); }
.recommendation-card.cat-poetry { border-left: 3px solid rgba(157,139,184,0.72); }
.recommendation-card.cat-novel { border-left: 3px solid rgba(205,155,82,0.72); }
.recommendation-card.cat-diplomacy { border-left: 3px solid rgba(126,164,189,0.72); }
.recommendation-card.cat-disaster { border-left: 3px solid rgba(122,132,150,0.72); }

.recommendation-rail.collapsed {
  top: 152px;
  left: 28px;
  right: auto;
  width: 58px;
  min-width: 0;
  padding: 7px;
  transform: none;
  border-color: rgba(184,153,71,0.62);
  background:
    linear-gradient(90deg, rgba(102,62,18,0.32), transparent 18%, transparent 82%, rgba(102,62,18,0.32)),
    linear-gradient(160deg, rgba(224,197,122,0.96), rgba(128,88,28,0.96) 55%, rgba(54,32,10,0.98));
  box-shadow:
    0 8px 18px rgba(0,0,0,0.42),
    inset 0 1px 3px rgba(255,246,202,0.32),
    inset -6px 0 10px rgba(42,23,5,0.24);
}

.recommendation-rail.collapsed::before {
  left: 50%;
  top: 9px;
  bottom: 9px;
  background: rgba(71,43,12,0.46);
}
.recommendation-rail.collapsed::after {
  display: none;
}

.recommendation-rail.collapsed .recommendation-head {
  justify-content: center;
  padding: 0;
  border-bottom: none;
}

.recommendation-rail.collapsed .recommendation-kicker,
.recommendation-rail.collapsed .recommendation-context,
.recommendation-rail.collapsed .guide-tabs,
.recommendation-rail.collapsed .guide-panel,
.recommendation-rail.collapsed .recommendation-list {
  display: none;
}

.recommendation-rail.collapsed .recommendation-toggle {
  width: 42px;
  height: 48px;
  border-color: rgba(77,45,12,0.5);
  background:
    linear-gradient(90deg, rgba(70,42,12,0.38), transparent 15%, transparent 85%, rgba(70,42,12,0.38)),
    linear-gradient(160deg, #efd993 0%, #bc8a32 45%, #6c4617 100%);
  font-size: 1.25rem;
  box-shadow:
    0 3px 9px rgba(0,0,0,0.38),
    inset 0 1px 2px rgba(255,246,202,0.42),
    inset -5px 0 8px rgba(42,23,5,0.28);
}

/* ============================================
   PERSON GUIDE SCROLL
   ============================================ */
.source-scroll {
  position: static;
  width: auto;
  min-width: 0;
  transform: none;
  z-index: auto;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  transition: none;
}

.source-scroll[aria-hidden="true"] {
  display: none !important;
}

.source-scroll::before,
.source-scroll::after {
  display: none;
}

.source-scroll::before { left: -6px; }
.source-scroll::after { right: -6px; }

.source-scroll-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 8px;
  border-bottom: 1px solid rgba(184,153,71,0.16);
}

.source-scroll-kicker {
  flex-shrink: 0;
  font-family: var(--font-brush);
  font-size: 0.95rem;
  color: rgba(244,220,143,0.96);
  letter-spacing: 0.16em;
  text-shadow: 0 2px 7px rgba(0,0,0,0.6);
}

.source-scroll-context {
  min-width: 0;
  flex: 1;
  font-size: 0.66rem;
  font-weight: 700;
  color: rgba(244,236,216,0.68);
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.source-scroll-exit {
  flex-shrink: 0;
  padding: 6px 10px;
  border: 1px solid rgba(240,223,160,0.36);
  border-radius: 3px;
  background: rgba(184,153,71,0.14);
  color: rgba(248,232,185,0.92);
  font-family: var(--font-serif);
  font-size: 0.66rem;
  font-weight: 900;
  cursor: pointer;
  letter-spacing: 0.04em;
}

.source-scroll-exit:hover,
.source-scroll-exit:focus-visible {
  background: rgba(184,153,71,0.24);
  outline: 1px solid rgba(244,236,216,0.45);
  outline-offset: 2px;
}

.source-scroll-list {
  display: flex;
  gap: 8px;
  padding-top: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(82,49,16,0.35) transparent;
  -webkit-overflow-scrolling: touch;
}

.source-scroll-list::-webkit-scrollbar { height: 4px; }
.source-scroll-list::-webkit-scrollbar-track { background: transparent; }
.source-scroll-list::-webkit-scrollbar-thumb { background: rgba(82,49,16,0.35); border-radius: 2px; }

.source-chapter-card {
  flex: 0 0 120px;
  min-height: 72px;
  padding: 8px 9px;
  border: 1px solid rgba(184,153,71,0.34);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(255,246,202,0.18), rgba(72,42,12,0.22)),
    rgba(65,41,13,0.68);
  color: rgba(248,232,185,0.96);
  text-align: left;
  cursor: pointer;
  font-family: var(--font-serif);
  box-shadow: inset 0 1px 0 rgba(255,246,202,0.2);
}

.source-chapter-card:hover,
.source-chapter-card:focus-visible,
.source-chapter-card.active {
  border-color: rgba(240,223,160,0.68);
  background:
    linear-gradient(180deg, rgba(255,246,202,0.24), rgba(72,42,12,0.26)),
    rgba(86,55,17,0.78);
  outline: none;
}

.source-chapter-card.active {
  box-shadow:
    0 0 0 1px rgba(48,28,8,0.18),
    inset 0 1px 0 rgba(255,246,202,0.28);
}

.source-chapter-title,
.source-chapter-meta,
.source-chapter-source,
.source-chapter-note {
  display: block;
  min-width: 0;
}

.source-chapter-title {
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.32;
  color: rgba(255,246,205,0.98);
}

.source-chapter-meta {
  margin-top: 5px;
  font-size: 0.58rem;
  color: rgba(247,210,112,0.82);
  letter-spacing: 0.03em;
}

.source-chapter-source {
  margin-top: 4px;
  font-size: 0.56rem;
  line-height: 1.35;
  color: rgba(255, 235, 177, 0.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.source-chapter-note {
  margin-top: 4px;
  font-size: 0.58rem;
  line-height: 1.45;
  color: rgba(228,208,160,0.72);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ============================================
   LEFT CATEGORY SIDEBAR
   ============================================ */
.cat-sidebar {
  position: fixed;
  right: 0;
  left: auto;
  top: 80px;
  bottom: calc(var(--timeline-height) + 8px);
  transform: none;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 6px 0;
  /* 右侧金色装饰轨道 */
  background: linear-gradient(180deg, transparent 0%, rgba(184,153,71,0.12) 20%, rgba(184,153,71,0.18) 50%, rgba(184,153,71,0.12) 80%, transparent 100%);
  border-left: 1px solid rgba(184,153,71,0.1);
}

.cat-item {
  position: relative;
}

.cat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px 8px;
  width: 62px;
  cursor: pointer;
  background: linear-gradient(270deg, rgba(12,8,2,0.92) 0%, rgba(22,15,4,0.86) 100%);
  border: 1.5px solid rgba(184,153,71,0.42);
  border-right: none;
  border-radius: 8px 0 0 8px;
  transition: all 0.2s ease;
  box-shadow: -3px 2px 10px rgba(0,0,0,0.5), inset 0 1px 0 rgba(212,175,55,0.08);
  box-sizing: border-box;
}

.cat-btn:hover {
  background: linear-gradient(270deg, rgba(20,13,3,0.95) 0%, rgba(38,26,6,0.92) 100%);
  border-color: rgba(184,153,71,0.6);
  box-shadow: -3px 3px 12px rgba(0,0,0,0.6);
  transform: translateX(-3px);
}

.cat-item.active .cat-btn {
  background: linear-gradient(270deg, rgba(25,15,3,0.98) 0%, rgba(45,30,5,0.95) 100%);
  border-color: rgba(184,153,71,0.75);
  box-shadow: -3px 0 0 0 var(--brass-mid), -3px 3px 12px rgba(0,0,0,0.55);
}

.cat-icon-wrap {
  width: 40px; height: 40px;
  border-radius: 4px; /* 方形印章 */
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-brush); font-size: 1.2rem; font-weight: 900;
  letter-spacing: 0;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.55), inset 0 1px 2px rgba(255,255,255,0.18), 0 0 6px rgba(0,0,0,0.3);
}
.cat-icon-wrap.all      { background: radial-gradient(circle at 40% 35%, #c49830, #7a5a18); color: #fff0d0; font-size: 1.2rem; font-family: sans-serif; border: 1.5px solid rgba(200,160,60,0.5); }
.cat-icon-wrap.war      { background: radial-gradient(circle at 40% 35%, #a83030, #5a0808); color: #f0c8a8; border: 1.5px solid rgba(180,80,60,0.45); }
.cat-icon-wrap.politics { background: radial-gradient(circle at 40% 35%, #b08020, #6a5008); color: #f0e090; border: 1.5px solid rgba(180,145,40,0.5); }
.cat-icon-wrap.culture  { background: radial-gradient(circle at 40% 35%, #287848, #085828); color: #a0e8b8; border: 1.5px solid rgba(60,160,80,0.4); }
.cat-icon-wrap.poetry   { background: radial-gradient(circle at 40% 35%, #7d68a8, #30204f); color: #f1defd; border: 1.5px solid rgba(174,140,210,0.5); }
.cat-icon-wrap.novel    { background: radial-gradient(circle at 40% 35%, #b4742b, #5a3010); color: #ffe0aa; border: 1.5px solid rgba(205,135,54,0.5); }
.cat-icon-wrap.diplomacy{ background: radial-gradient(circle at 40% 35%, #204888, #063060); color: #98c8f0; border: 1.5px solid rgba(60,110,200,0.4); }
.cat-icon-wrap.disaster { background: radial-gradient(circle at 40% 35%, #703080, #400858); color: #e098e8; border: 1.5px solid rgba(140,60,180,0.4); }

.cat-label {
  font-family: var(--font-serif);
  font-size: 0.68rem;
  color: rgba(240,223,160,0.72);
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.cat-item.active .cat-label { color: var(--parchment-light); }

/* ── Event panel (hover expand) ── */
.cat-panel {
  position: absolute;
  right: 100%;
  left: auto;
  top: 0;
  width: 268px;
  max-height: 440px;
  background: linear-gradient(160deg, rgba(52,34,10,0.98), rgba(42,27,8,0.97));
  border: 1px solid rgba(212,175,55,0.6);
  border-right: 3px solid rgba(212,175,55,0.85);
  border-radius: 8px 0 0 8px;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(10px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  box-shadow:
    -8px 6px 28px rgba(0,0,0,0.85),
    -14px 0 32px rgba(0,0,0,0.6),
    0 0 0 1px rgba(0,0,0,0.5);
}

.cat-item:hover .cat-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.cat-panel-title {
  font-family: var(--font-brush);
  font-size: 0.82rem;
  color: rgba(255,215,100,0.95);
  letter-spacing: 0.22em;
  padding: 12px 14px 9px;
  border-bottom: 1px solid rgba(212,175,55,0.4);
  background: rgba(60,40,10,0.7);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.cat-panel-list {
  overflow-y: auto;
  max-height: 370px;
  scrollbar-width: thin;
  scrollbar-color: rgba(184,153,71,0.35) transparent;
}
.cat-panel-list::-webkit-scrollbar { width: 4px; }
.cat-panel-list::-webkit-scrollbar-track { background: transparent; }
.cat-panel-list::-webkit-scrollbar-thumb { background: rgba(184,153,71,0.35); border-radius: 2px; }

.cat-event-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  cursor: pointer;
  min-height: 40px;
  transition: background 0.15s, padding-left 0.15s;
  border-bottom: 1px solid rgba(184,153,71,0.1);
}
.cat-event-item:nth-child(even) {
  background: rgba(184,153,71,0.04);
}
.cat-event-item:hover {
  background: rgba(232,190,92,0.24) !important;
  padding-left: 18px;
}

.cat-event-year {
  font-size: 0.63rem;
  color: rgba(247,210,112,0.96);
  min-width: 50px;
  flex-shrink: 0;
  font-family: var(--font-serif);
}

.cat-event-imp {
  font-size: 0.5rem;
  flex-shrink: 0;
}

.cat-event-title {
  font-family: var(--font-serif);
  font-size: 0.82rem;
  color: rgba(248,232,185,0.97);
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cat-event-item:hover .cat-event-title {
  color: #fff8d8;
}

.cat-event-item:hover .cat-event-year {
  color: #ffe18a;
}

/* ============================================
   TITLE CARTOUCHE (TOP-CENTER)
   ============================================ */
.title-cartouche {
  position: fixed;
  top: 18px; left: 50%; transform: translateX(-50%);
  z-index: 1000;
  padding: 16px 80px;
  font-family: var(--font-brush); font-size: 3.2rem;
  color: var(--ink-dark); letter-spacing: 0.44em; white-space: nowrap;
  background: linear-gradient(180deg, rgba(255,250,225,0.97), rgba(228,200,148,0.94));
  border: 2px solid var(--brass-dark); border-radius: 3px;
  box-shadow:
    0 3px 18px rgba(0,0,0,0.42),
    0 0 24px rgba(200,165,50,0.6),
    0 0 55px rgba(200,165,50,0.24),
    inset 0 1px 3px rgba(255,255,255,0.55);
  text-shadow: 0 1px 0 rgba(255,255,255,0.5), 0 0 12px rgba(160,130,40,0.28);
  animation: titleGlow 3s ease-in-out infinite alternate;
}
/* 标题下方装饰线 */
.title-cartouche::after {
  content: '◆ ── ◆';
  position: absolute;
  bottom: -18px; left: 50%; transform: translateX(-50%);
  font-size: 0.5rem; letter-spacing: 0.5em;
  color: rgba(212,175,55,0.6);
  white-space: nowrap;
  text-shadow: 0 0 6px rgba(212,175,55,0.4);
}

@keyframes titleGlow {
  from { box-shadow: 0 3px 18px rgba(0,0,0,0.42), 0 0 22px rgba(200,165,50,0.55), 0 0 48px rgba(200,165,50,0.22), inset 0 1px 3px rgba(255,255,255,0.55); }
  to   { box-shadow: 0 3px 18px rgba(0,0,0,0.42), 0 0 34px rgba(235,195,60,0.78), 0 0 72px rgba(235,195,60,0.35), inset 0 1px 3px rgba(255,255,255,0.55); }
}

/* ============================================
   BRASS TIMELINE BAR (BOTTOM)
   ============================================ */
.timeline-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--timeline-height);
  z-index: 1000;
  background:
    repeating-linear-gradient(180deg, transparent 0px, transparent 3px, rgba(0,0,0,0.04) 3px, rgba(0,0,0,0.04) 4px),
    linear-gradient(180deg, var(--brass-highlight) 0%, var(--brass-light) 6%, var(--brass-mid) 25%, #a08535 50%, var(--brass-dark) 75%, var(--brass-shadow) 90%, var(--brass-deep) 100%);
  border-top: 1.5px solid var(--brass-highlight);
  box-shadow: inset 0 2px 6px rgba(255,240,180,0.25), inset 0 -2px 4px rgba(0,0,0,0.2), 0 -3px 12px rgba(0,0,0,0.4);
  display: flex; align-items: center; padding: 0 32px; gap: 16px;
}

.timeline-label {
  color: var(--parchment-light); font-weight: 700; font-size: 0.8rem;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6); white-space: nowrap;
  flex-shrink: 0; letter-spacing: 0.05em; min-width: 90px;
}
.timeline-label:last-child { text-align: right; }

/* 播放按钮 */
.play-btn {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid var(--brass-highlight);
  background: linear-gradient(160deg, var(--brass-light) 0%, var(--brass-mid) 50%, var(--brass-dark) 100%);
  color: var(--parchment-light);
  font-size: 0.9rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 1px 2px rgba(255,240,180,0.3);
  transition: filter 0.15s ease, transform 0.1s ease;
  padding: 0; padding-left: 2px; /* 视觉居中 ▶ */
}
.play-btn:hover  { filter: brightness(1.2); transform: scale(1.06); }
.play-btn:active { transform: scale(0.95); }
.play-btn.playing { padding-left: 0; letter-spacing: -1px; } /* ⏸ 不需要偏移 */

.timeline-track { flex: 1; position: relative; padding: 0 4px; }

.timeline-range-highlight {
  position: absolute;
  top: 50%;
  height: 22px;
  transform: translateY(-50%);
  border-radius: 8px;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(236, 244, 255, 0.72), rgba(92, 158, 216, 0.64) 48%, rgba(32, 78, 130, 0.58));
  border: 1px solid rgba(224, 239, 255, 0.74);
  box-shadow:
    0 0 0 1px rgba(21, 42, 74, 0.36),
    0 4px 12px rgba(0, 0, 0, 0.26),
    inset 0 1px 3px rgba(255, 255, 255, 0.42);
}

.timeline-periods {
  position: absolute; top: 50%; left: 4px; right: 4px;
  height: 14px; transform: translateY(-50%);
  pointer-events: none; z-index: 0; border-radius: 4px; overflow: hidden;
}

.timeline-period-segment {
  position: absolute; top: 0; height: 100%; opacity: 0.65;
}

.timeline-period-segment.divided {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,0.15) 2px, rgba(255,255,255,0.15) 4px);
}

/* ============================================
   RANGE SLIDER (BRASS KNOB)
   ============================================ */
.timeline-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 10px; border-radius: 5px;
  outline: none; cursor: pointer; position: relative; z-index: 1;
  background: linear-gradient(180deg, #3a2e15 0%, #5a4518 30%, #7a6028 50%, #5a4518 70%, #3a2e15 100%);
  border: 1px solid #2a1e0a;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6), 0 1px 1px rgba(255,240,180,0.15);
}

.timeline-slider.locked,
.timeline-slider:disabled {
  cursor: not-allowed;
  filter: saturate(0.86) brightness(0.94);
}

.timeline-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 36px; height: 36px; border-radius: 50%; cursor: grab;
  background: radial-gradient(circle at 38% 35%, #f8efc8 0%, var(--brass-highlight) 15%, var(--brass-light) 35%, var(--brass-mid) 60%, var(--brass-dark) 85%, #6b5520 100%);
  border: 2.5px solid var(--brass-deep);
  box-shadow: 0 3px 10px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.35), inset 0 1px 4px rgba(255,240,180,0.6), inset 0 -1px 2px rgba(0,0,0,0.2);
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.timeline-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(0.95); }

.timeline-slider.locked::-webkit-slider-thumb,
.timeline-slider:disabled::-webkit-slider-thumb {
  cursor: not-allowed;
  box-shadow: 0 3px 10px rgba(0,0,0,0.55), inset 0 1px 4px rgba(255,240,180,0.45);
}

.timeline-slider::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 50%; cursor: grab;
  border: 2px solid var(--brass-deep);
  background: radial-gradient(circle at 38% 35%, #f5e8b8 0%, var(--brass-highlight) 15%, var(--brass-light) 35%, var(--brass-mid) 60%, var(--brass-dark) 85%, #6b5520 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.5), inset 0 1px 3px rgba(255,240,180,0.5);
}

.timeline-slider.locked::-moz-range-thumb,
.timeline-slider:disabled::-moz-range-thumb {
  cursor: not-allowed;
}

.timeline-slider::-moz-range-track {
  height: 8px; border-radius: 4px;
  background: linear-gradient(180deg, #3a2e15, #5a4518 50%, #3a2e15);
  border: 1px solid #2a1e0a;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6);
}

.timeline-ticks {
  position: absolute; top: 0; left: 4px; right: 4px; bottom: 0;
  pointer-events: none; z-index: 2;
}

.timeline-tick {
  position: absolute; top: -8px; width: 1px; height: 7px;
  background: linear-gradient(180deg, rgba(240,223,160,0.55), rgba(240,223,160,0.15));
}

/* 朝代书签 — 竖排、可点击 */
.timeline-dynasty-label {
  position: absolute;
  top: -52px;
  width: 21px;
  min-height: 50px;
  padding: 6px 2px 10px;
  border: 1px solid rgba(92, 55, 18, 0.8);
  border-top: 1px solid rgba(255, 239, 178, 0.72);
  border-radius: 4px 4px 8px 8px;
  color: #3a2410;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.28), transparent 32%),
    linear-gradient(180deg, #f2d889 0%, #c89b3d 45%, #8e641e 100%);
  transform: translateX(-50%);
  pointer-events: auto;
  cursor: pointer;
  font-family: var(--font-brush);
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-shadow: 0 1px 0 rgba(255, 238, 181, 0.42);
  box-shadow:
    0 3px 8px rgba(0,0,0,0.34),
    inset 0 1px 2px rgba(255,246,202,0.42),
    inset 0 -4px 6px rgba(48,30,8,0.28);
  z-index: 4;
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.timeline-dynasty-label.long {
  width: 19px;
  min-height: 66px;
  padding-top: 5px;
  font-size: 0.56rem;
}

.timeline-dynasty-label.is-front {
  z-index: 6;
}

.timeline-dynasty-label::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  width: 13px;
  height: 7px;
  background: #6c4717;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  filter: brightness(0.95);
}

.timeline-dynasty-label:hover,
.timeline-dynasty-label:focus-visible {
  filter: brightness(1.14) saturate(1.05);
  transform: translateX(-50%) translateY(-3px);
  outline: none;
  z-index: 20;
  box-shadow:
    0 6px 13px rgba(0,0,0,0.38),
    0 0 0 2px rgba(244,236,216,0.28),
    inset 0 1px 3px rgba(255,246,202,0.55),
    inset 0 -4px 6px rgba(48,30,8,0.2);
}

.timeline-dynasty-label:active {
  transform: translateX(-50%) translateY(-1px);
}

/* 当前年份指示线 */
.timeline-now-line {
  position: absolute; top: -40px; width: 2px;
  height: calc(100% + 40px);
  background: linear-gradient(180deg, rgba(255,230,120,1) 0%, rgba(255,190,60,0.9) 30%, rgba(255,180,50,0.5) 65%, transparent 100%);
  transform: translateX(-50%);
  pointer-events: none; z-index: 3;
  box-shadow: 0 0 10px rgba(255,220,80,0.9), 0 0 20px rgba(255,180,50,0.5);
}
.timeline-now-line::before {
  content: '';
  position: absolute; top: -4px; left: 50%;
  transform: translateX(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,235,130,1);
  box-shadow: 0 0 8px rgba(255,220,80,1), 0 0 16px rgba(255,180,50,0.8);
}

/* ============================================
   SOURCE VIEW HISTORIC CURVES & SMALL CARDS
   外层 .source-node 只负责 Leaflet 定位与点击热区；
   所有视觉位移、竖排、hover 都在内层。
   ============================================ */
.historic-flow-line {
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.46))
    drop-shadow(0 0 5px rgba(116, 177, 230, 0.32));
  animation: flowLineAnim 30s linear infinite;
}

.historic-curve-arrow {
  pointer-events: none !important;
  overflow: visible;
}

.historic-curve-arrow-inner {
  display: block;
  width: 22px;
  height: 13px;
  background: linear-gradient(90deg, rgba(242, 5, 5, 0.98), rgba(93, 158, 216, 0.98));
  clip-path: polygon(0 24%, 66% 24%, 66% 0, 100% 50%, 66% 100%, 66% 76%, 0 76%);
  transform: rotate(var(--historic-arrow-angle));
  transform-origin: center;
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(190, 225, 255, 0.28);
}

@keyframes flowLineAnim {
  from { stroke-dashoffset: 240; }
  to { stroke-dashoffset: 0; }
}

.source-node {
  pointer-events: none !important;
  overflow: visible !important;
}

.source-node-inner {
  width: 24px;
  height: 58px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  padding: 4px 3px 5px;
  border: 1px solid rgba(110, 62, 28, 0.72);
  border-top-color: rgba(240, 205, 138, 0.74);
  border-radius: 4px;
  background:
    linear-gradient(90deg, rgba(62, 31, 12, 0.16) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(238, 203, 134, 0.96), rgba(171, 104, 52, 0.97) 54%, rgba(83, 42, 20, 0.98));
  box-shadow:
    0 6px 11px rgba(0,0,0,0.48),
    inset 0 1px 2px rgba(255,246,202,0.3),
    inset 0 -3px 5px rgba(45,18,9,0.22);
  cursor: pointer;
  pointer-events: auto;
  transform: translate(var(--source-node-offset-x, 0), var(--source-node-offset-y, 0));
  transition: filter 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease, border-color 0.14s ease;
}

.source-node-inner:hover {
  filter: brightness(1.1);
  transform: translate(var(--source-node-offset-x, 0), calc(var(--source-node-offset-y, 0px) - 4px));
  border-color: rgba(244, 220, 154, 0.9);
  box-shadow:
    0 9px 15px rgba(0,0,0,0.52),
    inset 0 1px 2px rgba(255,246,202,0.38),
    inset 0 -3px 5px rgba(45,18,9,0.18);
}

.source-node-title {
  display: block;
  writing-mode: vertical-rl;
  text-orientation: upright;
  max-height: 42px;
  overflow: hidden;
  color: rgba(45, 17, 7, 0.96);
  font-family: var(--font-serif);
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 1px rgba(255, 231, 165, 0.28);
}

.source-node-num {
  display: block;
  width: 100%;
  padding-bottom: 1px;
  border-bottom: 1px solid rgba(73, 27, 12, 0.28);
  color: rgba(255, 233, 178, 0.92);
  font-family: var(--font-serif);
  font-size: 0.46rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  letter-spacing: 0;
  text-shadow: 0 1px 2px rgba(35, 11, 4, 0.7);
}

.source-node-tooltip {
  border: 1px solid rgba(184,153,71,0.48) !important;
  border-radius: 3px !important;
  background: rgba(38, 23, 6, 0.94) !important;
  color: rgba(248,232,185,0.96) !important;
  font-family: var(--font-serif) !important;
  font-size: 0.72rem !important;
  box-shadow: 0 5px 14px rgba(0,0,0,0.38) !important;
}

/* ============================================
   EVENT MARKERS (Leaflet divIcon)
   外层 .seal 只负责 Leaflet 定位与点击；所有视觉都在内层。
   ============================================ */
.seal {
  cursor: pointer !important;
  pointer-events: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible;
}

.seal-anim-wrapper {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transform-origin: center center;
  transition: filter 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}

/* 低饱和传统色：实体印章，而不是霓虹节点 */
.seal.cat-war .seal-anim-wrapper {
  background: radial-gradient(circle at 35% 28%, #b94a3f 0%, #8a2d2a 44%, #4d1718 78%, #2b0b0c 100%);
  border: 2px solid rgba(196, 122, 92, 0.62);
  box-shadow: 0 4px 8px rgba(0,0,0,0.48), inset 0 1px 3px rgba(238,170,130,0.22), inset 0 -3px 7px rgba(28,4,4,0.52);
}
.seal.cat-politics .seal-anim-wrapper {
  background: radial-gradient(circle at 35% 28%, #b49357 0%, #80612d 46%, #4d3517 80%, #2a1b0c 100%);
  border: 2px solid rgba(214, 180, 103, 0.62);
  box-shadow: 0 4px 8px rgba(0,0,0,0.48), inset 0 1px 3px rgba(244,211,145,0.23), inset 0 -3px 7px rgba(35,21,5,0.52);
}
.seal.cat-culture .seal-anim-wrapper {
  background: radial-gradient(circle at 35% 28%, #5e9367 0%, #356b43 46%, #1d472a 80%, #0f2516 100%);
  border: 2px solid rgba(139, 183, 125, 0.58);
  box-shadow: 0 4px 8px rgba(0,0,0,0.48), inset 0 1px 3px rgba(176,221,158,0.2), inset 0 -3px 7px rgba(5,28,12,0.5);
}
.seal.cat-poetry .seal-anim-wrapper {
  background: radial-gradient(circle at 35% 28%, #71618e 0%, #4d3d72 45%, #30264f 79%, #181326 100%);
  border: 2px solid rgba(157, 139, 184, 0.56);
  box-shadow: 0 4px 8px rgba(0,0,0,0.48), inset 0 1px 3px rgba(200,184,224,0.18), inset 0 -3px 7px rgba(16,10,34,0.5);
}
.seal.cat-novel .seal-anim-wrapper {
  background: radial-gradient(circle at 35% 28%, #b58a45 0%, #7d5522 45%, #4d3418 80%, #25170a 100%);
  border: 2px solid rgba(205, 155, 82, 0.58);
  box-shadow: 0 4px 8px rgba(0,0,0,0.48), inset 0 1px 3px rgba(236,192,125,0.2), inset 0 -3px 7px rgba(32,17,5,0.5);
}
.seal.cat-diplomacy .seal-anim-wrapper {
  background: radial-gradient(circle at 35% 28%, #557d97 0%, #2d5672 45%, #193a55 80%, #0a1d2c 100%);
  border: 2px solid rgba(126, 164, 189, 0.58);
  box-shadow: 0 4px 8px rgba(0,0,0,0.48), inset 0 1px 3px rgba(165,205,229,0.19), inset 0 -3px 7px rgba(5,21,35,0.5);
}
.seal.cat-disaster .seal-anim-wrapper {
  background: radial-gradient(circle at 35% 28%, #58616f 0%, #363d4c 45%, #222838 80%, #0f1320 100%);
  border: 2px solid rgba(122, 132, 150, 0.58);
  box-shadow: 0 4px 8px rgba(0,0,0,0.5), inset 0 1px 3px rgba(170,180,198,0.16), inset 0 -3px 7px rgba(5,8,15,0.55);
}

.seal.imp-1 .seal-anim-wrapper { border-width: 1.5px; }
.seal.imp-2 .seal-anim-wrapper { border-width: 2px; }
.seal.imp-3 .seal-anim-wrapper {
  border-width: 2.5px;
  border-color: rgba(218, 188, 118, 0.82);
  box-shadow: 0 5px 11px rgba(0,0,0,0.55), inset 0 1px 4px rgba(244,218,150,0.22), inset 0 -3px 8px rgba(0,0,0,0.48);
}

.seal-char {
  display: block;
  font-family: var(--font-brush);
  font-weight: 900;
  color: rgba(246, 231, 190, 0.96);
  text-shadow: 0 1px 2px rgba(0,0,0,0.86), 0 -1px 0 rgba(255,255,255,0.08);
  pointer-events: none;
  line-height: 1;
  user-select: none;
  letter-spacing: 0;
}

.seal.imp-1 .seal-char { font-size: 0.78rem; }
.seal.imp-2 .seal-char { font-size: 1rem; }
.seal.imp-3 .seal-char { font-size: 1.2rem; }

.seal.imp-3 .seal-anim-wrapper::after {
  content: '';
  position: absolute; top: 8%; left: 50%; transform: translateX(-50%);
  width: 58%; height: 28%;
  background: radial-gradient(ellipse, rgba(255,238,176,0.18) 0%, transparent 72%);
  border-radius: 50%;
  pointer-events: none;
}

.seal:hover {
  z-index: 2000 !important;
}
.seal:hover .seal-anim-wrapper {
  filter: brightness(1.12) contrast(1.04);
  transform: scale(1.1);
  box-shadow: 0 7px 14px rgba(0,0,0,0.58), inset 0 1px 4px rgba(255,235,180,0.18), inset 0 -3px 8px rgba(0,0,0,0.48);
}
.seal.imp-3:hover .seal-anim-wrapper {
  filter: brightness(1.15) contrast(1.05);
  border-color: rgba(236, 207, 137, 0.94);
}

.seal:active .seal-anim-wrapper { transform: scale(1.04); }

/* ============================================
   古铜罗盘聚合簇 (MarkerCluster)
   外层 .epic-cluster-wrapper 只重置默认样式，不参与定位或动画。
   ============================================ */
.epic-cluster-wrapper {
  background: transparent !important;
  border: none !important;
}

.epic-cluster-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(98, 75, 42, 0.95), rgba(43, 35, 29, 0.98) 56%, rgba(20, 15, 12, 0.98) 100%);
  border: 2px solid #a3834b;
  box-shadow: 0 5px 10px rgba(0,0,0,0.62), inset 0 2px 5px rgba(0,0,0,0.78), inset 0 -1px 0 rgba(218,180,100,0.18);
  outline: 1px dotted rgba(163, 131, 75, 0.48);
  outline-offset: -5px;
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.epic-cluster-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(163, 131, 75, 0.42);
  background: repeating-conic-gradient(
    from 0deg,
    rgba(180, 145, 82, 0.82) 0deg,
    rgba(180, 145, 82, 0.82) 2deg,
    transparent 2deg,
    transparent 15deg
  );
  -webkit-mask: radial-gradient(transparent 64%, black 65%);
  mask: radial-gradient(transparent 64%, black 65%);
  animation: compass-slow-spin 24s linear infinite;
  pointer-events: none;
  box-sizing: border-box;
}

.epic-cluster-text {
  position: relative;
  z-index: 2;
  font-family: 'STKaiti', 'KaiTi', 'Noto Serif SC', serif;
  font-size: 16px;
  font-weight: 900;
  color: #e6ce9e;
  text-shadow: -1px -1px 0 rgba(0,0,0,0.78), 1px 1px 1px rgba(255,255,255,0.10);
}

.epic-cluster-wrapper:hover .epic-cluster-inner {
  transform: scale(1.06);
  filter: brightness(1.08);
  border-color: rgba(212, 175, 95, 0.92);
  box-shadow: 0 7px 14px rgba(0,0,0,0.68), inset 0 2px 5px rgba(0,0,0,0.78), inset 0 -1px 0 rgba(230,196,115,0.22);
}
.epic-cluster-wrapper:hover .epic-cluster-ring {
  border-color: rgba(212, 175, 95, 0.72);
  animation-duration: 12s;
}

@keyframes compass-slow-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.cluster-sm .epic-cluster-inner { width: 44px; height: 44px; }

.cluster-md .epic-cluster-inner {
  width: 54px; height: 54px;
  border-width: 2.5px;
}
.cluster-md .epic-cluster-ring {
  inset: -7px;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(190, 153, 88, 0.88) 0deg,
    rgba(190, 153, 88, 0.88) 1.8deg,
    transparent 1.8deg,
    transparent 12deg
  );
}
.cluster-md .epic-cluster-text { font-size: 18px; color: #efd8a8; }

.cluster-lg .epic-cluster-inner {
  width: 66px; height: 66px;
  border-width: 3px;
  outline-offset: -7px;
}
.cluster-lg .epic-cluster-ring {
  inset: -8px;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(205, 168, 98, 0.94) 0deg,
    rgba(205, 168, 98, 0.94) 1.5deg,
    transparent 1.5deg,
    transparent 8deg
  );
}
.cluster-lg .epic-cluster-text { font-size: 22px; color: #f4dfb5; }

/* ============================================
   MODAL
   ============================================ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(12, 8, 2, 0.82);
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s ease;
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  cursor: pointer;
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }

.modal {
  position: relative;
  width: min(520px, 88vw); max-height: 80vh; overflow-y: auto;
  padding: 38px 40px 28px;
  background:
    repeating-conic-gradient(rgba(0,0,0,0.025) 0% 25%, transparent 0% 50%) 0 0 / 3px 3px,
    linear-gradient(170deg, var(--parchment-light) 0%, #ece0c8 30%, var(--parchment-mid) 80%, var(--parchment-warm) 100%);
  border: 3px solid var(--brass-dark); border-radius: 4px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.3),
    inset 0 1px 2px rgba(255,255,255,0.25), inset 0 -1px 3px rgba(0,0,0,0.06);
  transform: scale(0.05) translateY(20px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
  cursor: default;
}
.modal-overlay.active .modal { transform: scale(1) translateY(0); opacity: 1; }

.modal::before, .modal::after {
  content: ''; position: absolute; width: 20px; height: 20px;
  border-color: var(--brass-mid); border-style: solid; opacity: 0.6;
}
.modal::before { top: 8px; left: 8px; border-width: 2px 0 0 2px; }
.modal::after { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; }

.modal-close {
  position: absolute; top: 10px; right: 12px;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--brass-dark);
  background: linear-gradient(135deg, var(--parchment-light), var(--parchment-warm));
  color: var(--ink-medium); font-size: 0.75rem; font-weight: 900;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.3);
  transition: background 0.2s, transform 0.2s ease, color 0.2s;
  padding: 0;
}
.modal-close:hover {
  background: linear-gradient(135deg, var(--brass-light), var(--brass-dark));
  color: var(--parchment-light);
  transform: rotate(90deg);
}

.modal-event-year { font-size: 0.9rem; color: var(--ink-light); letter-spacing: 0.1em; margin-bottom: 6px; }

.modal-title {
  font-size: 1.65rem; font-weight: 900; color: var(--ink-dark);
  margin-bottom: 12px; line-height: 1.3;
  text-shadow: 0 1px 0 rgba(255,255,255,0.2);
}

.modal-category {
  font-size: 0.75rem; color: var(--ink-light); letter-spacing: 0.1em;
  margin-bottom: 14px; padding: 2px 8px; display: inline-block;
  border: 1px solid rgba(90,62,40,0.2); border-radius: 2px;
}

.modal-source {
  margin: -4px 0 14px;
  padding: 8px 10px;
  border-left: 3px solid rgba(138,109,43,0.62);
  background: rgba(104, 67, 25, 0.08);
  color: rgba(67, 43, 18, 0.82);
  font-size: 0.76rem;
  line-height: 1.6;
}

.modal-source strong {
  color: var(--ink-dark);
  font-weight: 900;
}

.modal-divider {
  width: 60px; height: 2px;
  background: linear-gradient(90deg, var(--brass-dark), var(--brass-light), var(--brass-dark));
  margin-bottom: 18px; border-radius: 1px;
}

.modal-desc { font-size: 1rem; line-height: 1.95; color: var(--ink-dark); margin-bottom: 34px; }

.enter-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; justify-content: center;
  padding: 16px 24px; font-family: var(--font-serif);
  font-size: 0.95rem; font-weight: 700;
  color: rgba(255,238,200,0.96); letter-spacing: 0.3em; cursor: pointer;
  background: linear-gradient(180deg,
    #9b2020 0%,
    #7a1414 35%,
    #5e0f0f 70%,
    #4a0a0a 100%);
  border: 1.5px solid rgba(212,175,55,0.65);
  border-radius: 3px;
  box-shadow:
    0 3px 12px rgba(0,0,0,0.5),
    0 0 14px rgba(160,30,30,0.25),
    inset 0 1px 0 rgba(220,175,80,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.25);
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  outline: 1px solid rgba(160,30,30,0.3);
  outline-offset: 2px;
}
.enter-btn::before, .enter-btn::after {
  content: '◆'; font-size: 0.5rem; opacity: 0.65;
}
.enter-btn:hover {
  background: linear-gradient(180deg,
    #b52828 0%,
    #8f1b1b 35%,
    #701212 70%,
    #5a0e0e 100%);
  box-shadow: 0 4px 16px rgba(0,0,0,0.55), 0 0 18px rgba(180,40,40,0.35),
    inset 0 1px 0 rgba(220,175,80,0.22);
}
.enter-btn:active { transform: translateY(2px); box-shadow: 0 1px 4px rgba(0,0,0,0.3), inset 0 2px 4px rgba(0,0,0,0.2); }
.enter-btn .arrow { font-size: 1.1rem; transition: transform 0.2s ease; }
.enter-btn:hover .arrow { transform: translateX(3px); }

/* ============================================
   DISCLAIMER
   ============================================ */
.disclaimer-trigger {
  position: fixed;
  right: 12px;
  bottom: calc(var(--timeline-height) + 10px);
  z-index: 1000;
  padding: 5px 9px;
  border: 1px solid rgba(184,153,71,0.36);
  border-radius: 4px;
  background: rgba(244,236,216,0.68);
  color: rgba(44,24,16,0.82);
  font-family: var(--font-serif);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.disclaimer-trigger:hover,
.disclaimer-trigger:focus-visible {
  background: rgba(244,236,216,0.88);
  border-color: rgba(184,153,71,0.62);
  color: var(--ink-dark);
  outline: none;
}

.disclaimer-overlay {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(12, 8, 2, 0.76);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  cursor: pointer;
}

.disclaimer-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.disclaimer-modal {
  position: relative;
  width: min(680px, 92vw);
  max-height: min(720px, calc(100vh - 48px));
  overflow-y: auto;
  padding: 38px 42px 28px;
  border: 2px solid var(--brass-dark);
  border-radius: 5px;
  background:
    repeating-conic-gradient(rgba(0,0,0,0.02) 0% 25%, transparent 0% 50%) 0 0 / 3px 3px,
    linear-gradient(170deg, var(--parchment-light) 0%, #ece0c8 34%, var(--parchment-mid) 100%);
  color: var(--ink-dark);
  box-shadow: 0 18px 54px rgba(0,0,0,0.52), inset 0 1px 2px rgba(255,255,255,0.22);
  cursor: default;
  transform: translateY(12px);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.disclaimer-overlay.active .disclaimer-modal {
  transform: translateY(0);
  opacity: 1;
}

.disclaimer-body {
  display: grid;
  gap: 14px;
  font-size: 0.94rem;
  line-height: 1.9;
}

.disclaimer-body a {
  color: #6f4317;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================
   LOADING STATE
   ============================================ */
body.loading #map,
body.loading .dynasty-indicator,
body.loading .title-cartouche,
body.loading .timeline-bar,
body.loading .cat-sidebar,
body.loading .recommendation-rail,
body.loading .source-scroll,
body.loading .disclaimer-trigger,
body.loading .watermark {
  opacity: 0; transition: opacity 0.8s ease 0.2s;
}

body:not(.loading) #map,
body:not(.loading) .dynasty-indicator,
body:not(.loading) .title-cartouche,
body:not(.loading) .timeline-bar,
body:not(.loading) .cat-sidebar,
body:not(.loading) .recommendation-rail,
body:not(.loading) .source-scroll,
body:not(.loading) .disclaimer-trigger,
body:not(.loading) .watermark {
  opacity: 1; transition: opacity 0.8s ease 0.2s;
}

/* ============================================
   SCROLLBAR
   ============================================ */
.modal::-webkit-scrollbar { width: 6px; }
.modal::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); border-radius: 3px; }
.modal::-webkit-scrollbar-thumb { background: var(--brass-dark); border-radius: 3px; }

.modal-hint {
  text-align: center; margin-top: 12px;
  font-size: 0.55rem; color: var(--ink-light);
  opacity: 0.5; letter-spacing: 0.1em;
}

/* ============================================
   IMMERSION PARCHMENT
   ============================================ */
.immerse-overlay {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background:
    radial-gradient(circle at center, rgba(20, 12, 4, 0.15), rgba(0, 0, 0, 0.74)),
    rgba(0, 0, 0, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.immerse-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.immerse-scroll {
  position: relative;
  width: min(820px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 48px));
  overflow: auto;
  padding: 42px 46px 34px;
  border: 1px solid rgba(95, 62, 24, 0.55);
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(90, 54, 20, 0.18), transparent 9%, transparent 91%, rgba(90, 54, 20, 0.18)),
    radial-gradient(circle at 20% 12%, rgba(255, 246, 210, 0.95), transparent 34%),
    linear-gradient(165deg, #f3e4bf 0%, #dcc28c 48%, #c6a66c 100%);
  color: var(--ink-dark);
  box-shadow: 0 22px 70px rgba(0,0,0,0.58), inset 0 0 32px rgba(92, 50, 8, 0.18);
}

.immerse-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(75, 45, 16, 0.45);
  border-radius: 50%;
  background: rgba(255, 248, 220, 0.55);
  color: var(--ink-dark);
  cursor: pointer;
}

.immerse-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: rgba(65, 45, 22, 0.7);
  margin-bottom: 8px;
}

.immerse-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 5vw, 3rem);
  letter-spacing: 0;
  color: #2d2112;
}

.immerse-meta {
  margin-top: 8px;
  font-size: 0.92rem;
  color: rgba(55, 37, 18, 0.72);
}

.immerse-body {
  margin-top: 26px;
  min-height: 220px;
  white-space: pre-wrap;
  font-size: 1.02rem;
  line-height: 2;
}

.immerse-body.loading::after {
  content: '';
  display: inline-block;
  width: 0.7em;
  height: 1.1em;
  margin-left: 3px;
  border-right: 2px solid rgba(48, 30, 10, 0.75);
  animation: cursor-blink 0.8s steps(1) infinite;
  vertical-align: -0.12em;
}

.immerse-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.immerse-game-link,
.immerse-retry {
  border: 1px solid rgba(80, 45, 16, 0.55);
  border-radius: 4px;
  padding: 10px 16px;
  background: rgba(65, 35, 12, 0.12);
  color: #2d2112;
  text-decoration: none;
  cursor: pointer;
  font-weight: 700;
}

.immerse-game-link[aria-disabled="true"] {
  display: none;
}

@keyframes cursor-blink {
  50% { opacity: 0; }
}

@media (max-width: 640px) {
  :root {
    --timeline-height: 132px;
  }

  #map {
    bottom: var(--timeline-height);
  }

  #map::after {
    background: radial-gradient(ellipse at 50% 45%,
      transparent 38%,
      rgba(0,0,0,0.16) 66%,
      rgba(0,0,0,0.42) 100%);
  }

  .leaflet-top.leaflet-right {
    top: 58px;
  }

  .dynasty-indicator {
    top: max(10px, env(safe-area-inset-top));
    left: max(10px, env(safe-area-inset-left));
    width: min(190px, calc(100vw - 86px));
    min-width: 0;
    padding: 8px 14px 7px;
    outline-offset: 2px;
    border-width: 1.5px;
    text-align: left;
  }

  .dynasty-indicator::before {
    inset: -5px;
  }

  .dynasty-year {
    font-size: 1.28rem;
    line-height: 1.12;
    letter-spacing: 0.04em;
  }

  .dynasty-name {
    display: inline-block;
    margin-top: 1px;
    font-size: 0.98rem;
    letter-spacing: 0.1em;
  }

  .faction-list {
    max-width: 100%;
    margin-top: 3px;
    font-size: 0.58rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .recommendation-rail {
    top: calc(max(10px, env(safe-area-inset-top)) + 70px);
    left: 10px;
    right: 10px;
    width: auto;
    min-width: 0;
    transform: none;
    padding: 8px;
  }

  .recommendation-rail.collapsed {
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    left: auto;
    width: 46px;
    padding: 5px;
  }

  .recommendation-rail.collapsed .recommendation-toggle {
    width: 34px;
    height: 38px;
    font-size: 1.05rem;
  }

  .recommendation-head {
    padding: 0 4px 7px;
    gap: 7px;
  }
  .recommendation-kicker {
    font-size: 0.9rem;
    letter-spacing: 0.12em;
  }
  .recommendation-context {
    font-size: 0.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .recommendation-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    max-height: 190px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .recommendation-card {
    min-height: 74px;
    padding: 8px;
  }
  .recommendation-card-title {
    font-size: 0.78rem;
    line-height: 1.32;
  }
  .recommendation-card-desc {
    display: none;
  }

  .source-scroll {
    position: static;
    width: auto;
    min-width: 0;
    padding: 0;
    transform: none;
  }

  .source-scroll[aria-hidden="true"] {
    display: none !important;
  }

  .source-scroll-head {
    padding: 0 4px 7px;
    gap: 7px;
  }

  .source-scroll-kicker {
    font-size: 0.9rem;
    letter-spacing: 0.12em;
  }

  .source-scroll-context {
    font-size: 0.58rem;
  }

  .source-scroll-exit {
    padding: 5px 7px;
    font-size: 0.58rem;
  }

  .source-scroll-list {
    gap: 6px;
    padding-top: 8px;
  }

  .source-chapter-card {
    flex-basis: 104px;
    min-height: 62px;
    padding: 7px;
  }

  .source-chapter-title {
    font-size: 0.74rem;
  }

  .source-chapter-note {
    display: none;
  }

  .cat-sidebar {
    left: 8px;
    right: 8px;
    top: auto;
    bottom: calc(var(--timeline-height) + 8px);
    height: 54px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 5px;
    padding: 4px;
    overflow-x: auto;
    overflow-y: visible;
    border: 1px solid rgba(184,153,71,0.18);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(20,13,4,0.88), rgba(13,8,2,0.82));
    box-shadow: 0 5px 18px rgba(0,0,0,0.36), inset 0 1px 0 rgba(240,223,160,0.08);
    -webkit-overflow-scrolling: touch;
  }

  .cat-sidebar::-webkit-scrollbar {
    display: none;
  }

  .cat-item {
    flex: 0 0 auto;
  }

  .cat-btn {
    width: 52px;
    height: 46px;
    padding: 5px 4px 4px;
    gap: 2px;
    border: 1px solid rgba(184,153,71,0.38);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.36), inset 0 1px 0 rgba(212,175,55,0.08);
  }

  .cat-btn:hover {
    transform: none;
  }

  .cat-item.active .cat-btn {
    box-shadow: 0 -3px 0 0 var(--brass-mid), 0 2px 9px rgba(0,0,0,0.42);
  }

  .cat-icon-wrap {
    width: 28px;
    height: 28px;
    font-size: 0.88rem;
  }

  .cat-label {
    font-size: 0.52rem;
    letter-spacing: 0.06em;
  }

  .cat-panel {
    display: none;
  }

  .timeline-bar {
    height: var(--timeline-height);
    padding: 12px max(12px, env(safe-area-inset-left)) calc(12px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-right));
    gap: 9px 10px;
    flex-wrap: wrap;
    align-content: center;
  }

  .play-btn {
    order: 1;
    width: 34px;
    height: 34px;
  }

  .timeline-label {
    order: 1;
    flex: 1 1 0;
    min-width: 0;
    font-size: 0.68rem;
    letter-spacing: 0.02em;
  }

  .timeline-label:last-child {
    flex: 0 0 auto;
  }

  .timeline-track {
    order: 2;
    flex: 0 0 100%;
    height: 48px;
    display: flex;
    align-items: center;
    padding: 0 2px;
  }

  .timeline-periods {
    left: 2px;
    right: 2px;
    height: 11px;
  }

  .timeline-slider {
    height: 12px;
  }

  .timeline-slider::-webkit-slider-thumb {
    width: 32px;
    height: 32px;
  }

  .timeline-slider::-moz-range-thumb {
    width: 30px;
    height: 30px;
  }

  .timeline-dynasty-label {
    display: none;
  }

  .timeline-tick {
    top: 11px;
    height: 6px;
  }

  .timeline-now-line {
    top: 2px;
    height: calc(100% - 4px);
  }

  .watermark {
    top: calc((100dvh - var(--timeline-height)) / 2);
    font-size: clamp(6rem, 30vw, 10rem);
  }

  .modal {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 36px);
    padding: 34px 24px 24px;
  }

  .disclaimer-trigger {
    right: 12px;
    bottom: calc(var(--timeline-height) + 70px);
    padding: 5px 8px;
    font-size: 0.58rem;
  }

  .disclaimer-overlay {
    padding: 12px;
  }

  .disclaimer-modal {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    padding: 34px 24px 24px;
  }

  .disclaimer-body {
    font-size: 0.86rem;
    line-height: 1.8;
  }

  .immerse-overlay { padding: 12px; }
  .immerse-scroll {
    width: calc(100vw - 18px);
    max-height: calc(100dvh - 24px);
    padding: 36px 24px 26px;
  }
}

@media (min-width: 641px) and (max-width: 1320px) {
  .recommendation-rail {
    left: 320px;
    right: 86px;
    width: auto;
    min-width: 0;
    transform: none;
  }
  .recommendation-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .source-scroll {
    position: static;
    width: auto;
    min-width: 0;
    transform: none;
  }

  .source-scroll[aria-hidden="true"] {
    display: none !important;
  }
}