:root {
  --parch: #f5efe1; --warm: #e3d4a5; --shadow: #cfbe8c; --ink: #15100d; --ink-soft: #342820; --ink-dim: #6a5a47;
  --brass: #946d1e; --brass-bright: #c49132; --brass-deep: #5c4416; --cinnabar: #9a3b1d; --verd: #2f7d73; --rule: rgba(21,16,13,.13);
  --display: "Cinzel", "Trajan Pro", Georgia, serif; --serif: "EB Garamond", Garamond, Georgia, serif; --mono: "JetBrains Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--parch); color: var(--ink); }
body { font: 400 18px/1.5 var(--serif); }
a { color: var(--brass-deep); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 22px 16px 60px; }
.top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.top a { color: var(--ink-dim); text-decoration: none; }
#age.live { color: var(--verd); }
#age.live::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--verd); margin-right: 7px; vertical-align: 1px; animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .25; } }
h1 { font: 600 clamp(28px, 4.2vw, 46px)/1.1 var(--display); margin: 18px 0 6px; letter-spacing: .02em; }
.lede { max-width: 760px; color: var(--ink-soft); margin: 0 0 22px; }

.stage { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 900px) { .stage { grid-template-columns: 1fr; } }
.screen { margin: 0; background: var(--ink); padding: 14px 14px 0; border-radius: 4px; box-shadow: 0 0 0 1px var(--brass-deep), 0 0 0 5px var(--warm), 0 0 0 6px var(--shadow); }
.screen canvas, .screen img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; image-rendering: pixelated; background: #000; }
.screen figcaption { display: flex; justify-content: space-between; gap: 10px; padding: 9px 2px 10px; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--warm); }
#lane { color: var(--brass-bright); }

.now .k { font: 500 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); margin: 0 0 4px; }
.say { font: 500 22px/1.3 var(--serif); margin: 0 0 18px; min-height: 2.6em; border-left: 3px solid var(--brass-bright); padding-left: 12px; }
.goal { color: var(--ink-soft); margin: 0 0 18px; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin: 0 0 18px; }
.facts div { padding: 10px 4px; }
.facts b { display: block; font: 600 28px/1 var(--display); color: var(--brass-deep); }
.facts small { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); }
.battle { font: 500 15px var(--mono); color: var(--cinnabar); margin: 0 0 16px; }
.party { list-style: none; margin: 0; padding: 0; }
.party li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 7px 0; border-top: 1px solid var(--rule); }
.party li.none { display: block; color: var(--ink-dim); font-style: italic; }
.party .nm { font-weight: 600; }
.party .hp { font: 400 13px var(--mono); color: var(--ink-dim); }
.party .bar { grid-column: 1 / -1; height: 5px; background: var(--rule); border-radius: 3px; overflow: hidden; }
.party .bar i { display: block; height: 100%; background: var(--verd); }
.party .bar i.low { background: var(--cinnabar); }

.film { margin-top: 34px; border-top: 1px solid var(--rule); padding-top: 12px; }
.film h2 { font: 600 21px/1.2 var(--display); margin: 0 0 6px; }
.film p { color: var(--ink-soft); margin: 0 0 14px; max-width: 760px; }
.film video { display: block; width: 100%; height: auto; background: var(--ink); border-radius: 4px; box-shadow: 0 0 0 1px var(--brass-deep), 0 0 0 5px var(--warm), 0 0 0 6px var(--shadow); }
.log { margin-top: 34px; border-top: 1px solid var(--rule); padding-top: 12px; }
.log h2 { font: 600 21px/1.2 var(--display); margin: 0 0 8px; }
.log ol { list-style: none; margin: 0; padding: 0; }
.log li { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid var(--rule); color: var(--ink-soft); }
.log li small { font: 500 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--brass-deep); padding-top: 4px; }
.foot { margin-top: 28px; font-size: 15px; color: var(--ink-dim); }
.why { color: var(--ink-soft); margin: 0 0 12px; font-style: italic; }
.steps { margin: 0 0 18px; padding-left: 1.3em; color: var(--ink-soft); }
.steps li { padding: 2px 0; }
.steps li:first-child { color: var(--ink); font-weight: 600; }