/* Death card art and year counter accents. */
.death-art {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #3a2230, #140c16 70%);
  color: #f1e6c8;
  --icon-cut: #1d1220;
}
.death-high { background: radial-gradient(circle at 50% 42%, #7a5a2a, #2a1a0c 72%); --icon-cut: #5a4020; }

.death-caption {
  position: absolute; inset: 0 0 auto; z-index: 3; margin: 0;
  padding: 16px 20px 40px;
  background: linear-gradient(rgb(8 6 12 / .7), transparent);
  text-align: center;
  font-size: clamp(.95rem, 2vh, 1.2rem);
  letter-spacing: .04em;
  color: #e9dcc0;
  span { display: block; font-size: .85em; font-style: italic; color: #b9ad94; }
}

.death-icon {
  width: 46%;
  z-index: 1;
  svg { width: 100%; display: block; filter: drop-shadow(0 8px 0 rgb(0 0 0 / .35)); }
}
.death-low .death-icon { rotate: 16deg; translate: 0 10%; opacity: .9; }
.death-high .death-icon { color: #ffe9a8; filter: drop-shadow(0 0 22px #ffcf6a); }

.death-rays {
  position: absolute; inset: -40%;
  display: none;
  background: repeating-conic-gradient(from 0deg, rgb(255 220 140 / .16) 0 8deg, transparent 8deg 22deg);
  animation: rays 40s linear infinite;
}
.death-high .death-rays { display: block; }
@keyframes rays { to { rotate: 360deg; } }

/* the low ending for each meter has its own floor: water, embers, ashes, dust */
.death-water {
  position: absolute; inset: auto 0 0; height: 38%;
  z-index: 2;
  background: linear-gradient(#2c5a7a, #13283a);
  clip-path: polygon(0 18%, 12% 8%, 25% 18%, 38% 6%, 50% 18%, 62% 8%, 75% 18%, 88% 6%, 100% 16%, 100% 100%, 0 100%);
  display: none;
}
.death-low .death-water { display: block; }
.death-low[data-meter="guilds"] .death-water { background: linear-gradient(#c0502a, #401408); height: 26%; }
.death-low[data-meter="church"] .death-water { background: linear-gradient(#4a4450, #1a161c); height: 22%; }
.death-low[data-meter="treasury"] .death-water { background: linear-gradient(#5a4a32, #241c10); height: 20%; clip-path: none; }

body[data-kind="death"] .prompt { font-style: italic; }
body[data-kind="death"] .who,
body[data-kind="succession"] .who { font-variant: normal; font-size: clamp(1.3rem, 2.8vh, 1.9rem); letter-spacing: .03em; font-weight: 600; }
body[data-kind="death"] .who::before { content: "\2020\2002"; color: #7a1f1f; }

@media (prefers-reduced-motion: reduce) { .death-rays { animation: none; } }

/* ── Between terms: the line of dijkgraven, panned from the dead to the heir ── */
.dynasty {
  --px: 15px; --seg-min: 200px; --anchor: .38; --line: #e4d3ab; --dead: #c0444c; --lit: var(--gold, #e0b452);
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 46%, #1c1a33, #07091a 70%);
  color: var(--bar-ink, #f1e6c8);
  animation: dyn-in .5s ease-out;
}
@keyframes dyn-in { from { opacity: 0; } }
.dyn-inner { width: 100%; display: grid; justify-items: center; gap: clamp(10px, 2vh, 22px); text-align: center; }
.dyn-kicker { margin: 0; font-size: clamp(.9rem, 1.6vh, 1.1rem); font-weight: 400; letter-spacing: .3em; text-transform: uppercase; color: var(--bar-muted, #a9a3b8); }

.tl-view {
  position: relative; width: 100%; overflow: hidden;
  padding-top: clamp(70px, 11vh, 120px);
  /* the fixed "now" mark the line pans under */
  &::before { content: ""; position: absolute; left: calc(var(--anchor) * 100%); top: clamp(58px, 9vh, 100px); height: clamp(64px, 9vh, 96px); border-left: 2px solid var(--lit); z-index: 2; }
}
.tl-anno {
  position: absolute; left: calc(var(--anchor) * 100%); top: 0; translate: -50% 0; margin: 0; z-index: 2;
  font-size: clamp(2.6rem, 6.5vh, 4.4rem); line-height: 1; font-variant-numeric: tabular-nums lining-nums; letter-spacing: .04em;
  color: var(--lit); text-shadow: 0 0 24px rgb(224 180 82 / .45);
}
.tl-track { display: flex; align-items: flex-start; margin: 0; padding: 0; list-style: none; width: max-content; will-change: translate; }
.tl-track > li { position: relative; display: grid; grid-template-rows: 86px 12px auto; flex: none; padding-inline: 2px; }

.tl-seg { width: max(var(--seg-min), calc(var(--y, 1) * var(--px))); }
.tl-bar { position: relative; display: block; height: 12px; background: var(--line); border-radius: 2px; }
.tl-fig {
  position: relative; align-self: end; justify-self: start; margin-left: 12px; margin-bottom: 4px;
  width: 70px; height: 70px; border-radius: 50%; overflow: hidden; border: 2px solid var(--line); background: #222;
  svg { display: block; width: 100%; height: 100%; }
}
.tl-seg:not(.heir) .tl-fig svg:first-child { filter: grayscale(.85) brightness(.7); }
.tl-cause {
  position: absolute; inset: auto 0 0 auto; width: 26px; height: 26px; padding: 4px; border-radius: 50%;
  background: #140c16; color: #f1e6c8; --icon-cut: #140c16;
  svg { width: 100%; height: 100%; filter: none !important; }
}
.tl-fig:has(.tl-cause) { overflow: visible; }
.tl-fig:has(.tl-cause) > svg { border-radius: 50%; }
.tl-label {
  display: grid; justify-items: start; padding: 10px 12px 0; text-align: left; line-height: 1.25;
  b { font-size: clamp(1rem, 1.9vh, 1.3rem); font-weight: 600; }
  em { font-size: .95em; color: #d9caa6; }
  small { font-size: .82rem; color: var(--bar-muted, #a9a3b8); font-variant-numeric: tabular-nums; }
  .tl-how { font-style: italic; color: #e2a0a4; }
}
.tl-seg.dead .tl-bar { background: var(--dead); }
.tl-seg.heir { --seg-min: 230px; }
.tl-seg.heir .tl-bar { background: var(--lit); box-shadow: 0 0 22px rgb(224 180 82 / .7); }
.tl-seg.heir .tl-fig { border-color: var(--lit); box-shadow: 0 0 0 4px rgb(224 180 82 / .25); }
.tl-here {
  position: absolute; left: 0; top: 50%; translate: -50% -50%;
  width: 22px; height: 22px; border-radius: 50%; background: var(--lit); border: 3px solid #07091a;
  font-size: 0; animation: here 1.6s ease-in-out infinite;
}
@keyframes here { 50% { box-shadow: 0 0 0 10px rgb(224 180 82 / 0); } 0%, 100% { box-shadow: 0 0 0 0 rgb(224 180 82 / .7); } }
.tl-seg.heir .tl-label b { color: var(--lit); }

/* quest stages finished during a term are planted where that term ended */
.tl-flag {
  position: absolute; right: 6px; bottom: 14px; display: inline-flex; gap: 4px; align-items: baseline;
  padding: 2px 8px; border-radius: 3px; background: var(--lit); color: #1c1608; font-weight: 700; font-size: .85rem; white-space: nowrap;
  small { font-weight: 400; }
  & + & { right: auto; left: 6px; }
}

/* the road still ahead: dashed, the current stage partly filled */
.tl-stage { width: clamp(120px, 7.4vw, 150px); }
.tl-stage .tl-bar, .tl-goal .tl-bar { grid-row: 2; }
.tl-stage .tl-label { grid-row: 3; }
.tl-stage .tl-bar { background: repeating-linear-gradient(90deg, rgb(228 211 171 / .35) 0 14px, transparent 14px 22px); }
.tl-stage .tl-bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); background: var(--lit); opacity: .8; }
.tl-stage .tl-bar::before { content: ""; position: absolute; left: -2px; top: -6px; width: 4px; height: 24px; background: var(--line); }
.tl-stage .tl-label { color: #cfc4a8; b { color: var(--line); margin-right: .3em; } small { max-width: 20ch; } }
.tl-stage.cur .tl-label b { color: var(--lit); }
.tl-goal {
  width: 250px; grid-template-rows: 86px auto !important; padding-left: 10px !important;
  .lake-map { grid-row: 1 / 3; align-self: end; translate: 0 calc(50% - 6px); width: 230px; display: block; border: 2px solid var(--lit); border-radius: 8px; box-shadow: 0 0 30px rgb(224 180 82 / .25); }
  .tl-label { grid-row: 3; padding: 8px 2px 0; margin-top: 68px; b { color: var(--lit); } }
}

.dyn-epitaph { margin: 0; max-width: 46ch; padding-inline: 16px; font-size: clamp(1rem, 2vh, 1.25rem); em { color: #e2a0a4; } }
.dyn-wolf { margin: 0; padding-inline: 16px; color: var(--bar-muted, #a9a3b8); b { color: #8fc0e8; } }
.dyn-take {
  font: inherit; font-size: 1.05rem; cursor: pointer;
  padding: .7em 1.6em; border-radius: 999px; border: 2px solid var(--lit);
  background: transparent; color: var(--lit);
  &:hover { background: var(--lit); color: #1c1608; }
  &:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
}

/* the Haarlemmermeer chart (shared with the finale) */
.lake-map { color: #2a2015; }
.map-land { fill: #e4d3ab; }
.map-sea, .map-lake { fill: #3f6f94; }
.map-dry { fill: #9fb26a; }
.map-fields path { stroke: #6e7f3e; stroke-width: 1.5; }
.map-canal { fill: none; stroke: #3f6f94; stroke-width: 5; }
.map-ring { fill: none; stroke: #5a4020; stroke-width: 4; }
.map-mills { fill: #2a2015; color: #2a2015; }
.map-wolf { fill: #e4d3ab; font: italic 13px var(--serif, serif); }
.map-towns { fill: #2a2015; font: 12px var(--serif, serif); }
.map-title { fill: #5a4020; font: italic 13px var(--serif, serif); }

/* compact lineage strip (finale) */
.tl-line { display: flex; gap: 3px; margin: 0; padding: 0; list-style: none; }
.tl-line .seg { flex: var(--w) 1 0; height: 10px; background: var(--line, #e4d3ab); border-radius: 2px; }
.tl-line .seg.now { background: var(--gold, #e0b452); }

@media (max-width: 700px) {
  .dynasty { --px: 10px; --seg-min: 160px; --anchor: .3; }
  .tl-seg.heir { --seg-min: 170px; }
  .tl-stage { width: 110px; }
  .tl-fig { width: 56px; height: 56px; }
  .tl-goal { width: 180px; .lake-map { width: 160px; } }
}
@media (prefers-reduced-motion: reduce) { .dynasty, .tl-here { animation: none; } }

.dyn-chapter { margin: 0; font-size: clamp(1.05rem, 2.4vh, 1.4rem); color: var(--bar-ink, #f1e6c8); }
.dynasty { padding: calc(var(--safe-top, 0px) + 8px) 0 calc(var(--safe-bottom, 0px) + 8px); }
/* short phone screens (Safari's toolbars, the SE): a tighter timeline so the button stays on screen */
@media (max-width: 700px) and (max-height: 700px) {
  .dyn-inner { gap: 8px; }
  .dyn-kicker { font-size: .8rem; letter-spacing: .2em; }
  .tl-view { padding-top: 52px; &::before { top: 44px; height: 56px; } }
  .tl-anno { font-size: 2.3rem; }
  .tl-track > li { grid-template-rows: 64px 12px auto; }
  .tl-fig { width: 48px; height: 48px; }
  .tl-label { padding-top: 6px; line-height: 1.15; }
  .tl-goal { grid-template-rows: 64px auto !important; .lake-map { width: 130px; } .tl-label { margin-top: 40px; } }
  .dyn-epitaph, .dyn-wolf { font-size: .95rem; }
  .dyn-take { padding: .55em 1.3em; }
}