:root {
  --bg: #0B0907; --panel: #16120E; --panel-warm: #1B1611; --line: #2B241C; --line-2: #3A3026;
  --bone: #EFE7D6; --text-2: #C9C0B0; --text-3: #A0958A; --text-4: #6E655A; --theory: #D8CFBF;
  --gold: #F2B630; --red: #E2412F; --track: #1E1913;
  --display: 'Big Shoulders Display', sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --sans: 'IBM Plex Sans Condensed', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); }
body { color: var(--bone); font-family: var(--sans); }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--bone); }
input[type=range] { accent-color: var(--gold); }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* Type */
.mono-label { font: 600 10px/1 var(--mono); letter-spacing: .14em; }
.kicker { font: 600 12px/1 var(--mono); letter-spacing: .14em; color: var(--text-3); }
.eyebrow { font: 700 10px/1 var(--mono); letter-spacing: .16em; color: var(--text-3); }
.h-section { font: 900 clamp(56px, 7vw, 96px)/.85 var(--display); text-transform: uppercase; }
.h-block { font: 900 36px/1 var(--display); text-transform: uppercase; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.body { font: 400 16px/1.4 var(--sans); text-wrap: pretty; }
.system-text { font: 600 13.5px/1.5 var(--mono); text-transform: uppercase; text-wrap: pretty; }
.muted { color: var(--text-3); }
.gold { color: var(--gold); }
.red { color: var(--red); }

/* Shell */
.shell { min-height: 100vh; background: var(--bg); color: var(--bone); font-family: var(--sans);
  display: flex; flex-wrap: wrap; align-items: stretch; }
.sidebar { flex: 1 1 240px; max-width: 100%; min-width: 240px; background: var(--bg); border-right: 1px solid var(--line);
  padding: 28px 20px; display: flex; flex-direction: column; gap: 28px; }
.brand { display: flex; flex-direction: column; gap: 6px; }
.brand-mark { font: 900 40px/.85 var(--display); text-transform: uppercase; color: var(--bone); }
.brand-tag { font: 600 10px/1.4 var(--mono); letter-spacing: .14em; color: var(--text-3); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; justify-content: space-between; align-items: center; padding: 11px 12px;
  font: 600 12px/1 var(--mono); letter-spacing: .14em; color: var(--text-2); }
.nav a .count { color: var(--text-4); }
.nav a:hover { background: var(--panel); color: var(--bone); }
.nav a.on { background: var(--gold); color: var(--bg); font-weight: 700; }
.nav a.on .count { color: var(--bg); }
.dock { margin-top: auto; border: 1px solid var(--line); background: var(--panel); padding: 16px;
  display: flex; flex-direction: column; gap: 12px; }
.dock-row { display: flex; justify-content: space-between; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }
.dock-pos { font: 700 28px/1 var(--mono); letter-spacing: -.02em; }
.dock-help { font: 500 10.5px/1.4 var(--mono); color: var(--text-3); text-transform: uppercase; }
.btn-alarm { border: 1px solid var(--red); color: var(--red); text-align: center; padding: 10px; display: block; width: 100%;
  font: 700 11px/1 var(--mono); letter-spacing: .14em; }
.btn-alarm:hover { background: var(--red); color: var(--bg); }
.btn-alarm[disabled] { opacity: .5; cursor: progress; }
.signout { font: 600 10px/1 var(--mono); letter-spacing: .14em; color: var(--text-4); text-align: left; }
.signout:hover { color: var(--bone); }

.main { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 20px clamp(20px, 4vw, 56px); border-bottom: 1px solid var(--line);
  font: 600 11px/1 var(--mono); letter-spacing: .14em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { flex: none; white-space: nowrap; border: 1px solid var(--line); padding: 7px 10px; color: var(--text-3); }
.chip.hot { background: var(--panel); color: var(--gold); }
.content { padding: clamp(24px, 4vw, 56px); display: flex; flex-direction: column; gap: 48px; max-width: 1400px; width: 100%; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.flash { border: 1px solid var(--gold); background: var(--panel-warm); padding: 14px 16px;
  font: 600 12px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.empty { border: 1px dashed var(--line-2); padding: 28px; display: flex; flex-direction: column; gap: 10px; }

/* Grids */
.grid { display: grid; gap: 12px; }
.fit-160 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.fit-180 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.fit-200 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.fit-220 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.fill-300 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.fill-320 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.tiles { gap: 1px; background: var(--line); border: 1px solid var(--line); }
.tile { background: var(--bg); padding: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--bone); }
a.tile:hover { background: var(--panel); color: var(--bone); }
.tile-n { font: 900 56px/1 var(--display); }
.tile-n.sm { font-size: 52px; }
.tile-n.md { font-size: 48px; }
.tile-mono { font: 700 40px/1 var(--mono); letter-spacing: -.03em; }
.tile-label { font: 600 11px/1 var(--mono); letter-spacing: .14em; color: var(--text-3); }

/* Image slots */
.slot { position: absolute; inset: 0; overflow: hidden; background: rgba(127,127,127,.08); cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slot .cap { font: 600 10px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-4);
  text-align: center; padding: 12px; }
.slot::after { content: ""; position: absolute; inset: 0; border: 1.5px dashed currentColor; color: var(--text-3);
  opacity: .35; pointer-events: none; }
.slot.filled::after { display: none; }
.slot.over::after { display: block; color: var(--gold); opacity: 1; }
.slot.busy { opacity: .5; }

/* Overview */
.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 32px; align-items: stretch; }
.hero-left { display: flex; flex-direction: column; gap: 22px; justify-content: flex-end; }
.floor-mark { font: 900 clamp(96px, 12vw, 184px)/.8 var(--display); letter-spacing: -.02em; }
.progress-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pos-big { font: 700 40px/1 var(--mono); letter-spacing: -.02em; }
.pos-sub { font: 500 14px/1 var(--mono); color: var(--text-3); }
.bar { height: 12px; background: var(--track); position: relative; overflow: hidden; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gold); }
.bar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 10px, var(--bg) 10px 12px); }
.hero-art { position: relative; min-height: 400px; border: 1px solid var(--line); }
.sysmsg { position: absolute; left: 16px; right: 16px; bottom: 16px; border: 1px solid var(--gold); background: var(--bg); pointer-events: none; }
.sysmsg-head { background: var(--gold); color: var(--bg); font: 700 11px/1 var(--mono); letter-spacing: .16em; padding: 7px 10px; }
.sysmsg-body { padding: 14px; font: 600 14px/1.45 var(--mono); text-transform: uppercase; text-wrap: pretty; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 40px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.log-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; }
.log-time { font: 600 12px/1.5 var(--mono); color: var(--gold); }
.log-body { display: flex; flex-direction: column; gap: 5px; border-left: 1px solid var(--line); padding-left: 14px; padding-bottom: 6px; }
.log-tag { font: 700 10px/1 var(--mono); letter-spacing: .14em; color: var(--text-3); }
.latest { display: grid; grid-template-columns: 140px minmax(0, 1fr); border: 1px solid var(--line); background: var(--panel); color: var(--bone); }
.latest:hover { border-color: var(--gold); color: var(--bone); }
.latest-art { height: 170px; position: relative; }
.latest-body { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.latest-name { font: 900 36px/.95 var(--display); text-transform: uppercase; }
.quote-hot { background: var(--gold); color: var(--bg); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.quote-text { font: 900 30px/1 var(--display); text-transform: uppercase; text-wrap: pretty; }
.quote-who { font: 700 11px/1 var(--mono); letter-spacing: .12em; }

/* Codex */
.codex-wrap { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.codex-grid { flex: 2 1 460px; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.card { background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; color: var(--bone); }
.card:hover, .card.sel { border-color: var(--gold); color: var(--bone); }
.card-art { height: 180px; position: relative; }
.card-body { padding: 12px; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); }
.card-name { font: 800 22px/1 var(--display); text-transform: uppercase; }
.card-cls { font: 600 10px/1.3 var(--mono); letter-spacing: .1em; color: var(--gold); text-transform: uppercase; }
.entry { flex: 1 1 340px; border: 1px solid var(--gold); background: var(--bg); display: flex; flex-direction: column; position: sticky; top: 24px; }
.entry-art { height: 260px; position: relative; }
.entry-body { padding: 22px; display: flex; flex-direction: column; gap: 18px; border-top: 1px solid var(--gold); }
.entry-name { font: 900 52px/.88 var(--display); text-transform: uppercase; }
.fact { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); }
.fact-time { font: 600 11px/1.5 var(--mono); color: var(--gold); }
.theory { border: 1px dashed var(--line-2); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.theory-text { font: 400 16px/1.4 var(--sans); font-style: italic; color: var(--theory); min-height: 22px; outline: none; white-space: pre-wrap; }
.theory-text:empty::before { content: "Add a theory…"; color: var(--text-4); }
.theory-text:focus { color: var(--bone); }
.theory-foot { font: 400 11px/1.4 var(--mono); color: var(--text-3); text-transform: uppercase; }

/* Timeline */
.track { position: relative; height: 72px; margin: 0 8px; }
.track-line { position: absolute; left: 0; right: 0; top: 34px; height: 2px; background: var(--line-2); }
.track-dot { position: absolute; top: 28px; width: 14px; height: 14px; margin-left: -7px; transform: rotate(45deg); }
.track-you { position: absolute; right: -8px; top: 26px; width: 18px; height: 18px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 6px rgba(226,65,47,.25); }
.event { border: 1px solid var(--line); border-top-width: 3px; background: var(--panel); padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.event-title { font: 900 28px/1 var(--display); text-transform: uppercase; }
.event-del { font: 700 10px/1 var(--mono); letter-spacing: .14em; color: var(--text-4); align-self: flex-start; }
.event-del:hover { color: var(--red); }
.add-note { border: 1px dashed var(--red); padding: 18px; display: flex; flex-direction: column; justify-content: center; gap: 10px; min-height: 140px; text-align: left; }
.add-note:hover { background: #1A0C0A; }
.add-note input, .add-note textarea, .field { background: var(--bg); border: 1px solid var(--line); color: var(--bone); padding: 10px; font: 400 15px/1.4 var(--sans); width: 100%; }
.add-note input:focus, .add-note textarea:focus, .field:focus { outline: none; border-color: var(--gold); }

/* Vault */
.quote-card { border: 1px solid var(--line); padding: 24px; display: flex; flex-direction: column; gap: 16px; min-height: 240px; }
.quote-mark { font: 900 56px/.5 var(--display); height: 22px; }
.quote-foot { margin-top: auto; display: flex; justify-content: space-between; gap: 8px; font: 700 10px/1 var(--mono); letter-spacing: .12em; }
.quote-card .share { color: inherit; }
.highlight-text { font: 400 19px/1.4 var(--sans); text-wrap: pretty; }

/* Map */
.map-wrap { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.map { flex: 1 1 420px; max-width: 640px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; background: #050403; padding: 3px; border: 1px solid var(--line); }
.map > div { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font: 700 13px/1 var(--mono); color: var(--bg); }
.pin-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.pin { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font: 700 12px/1 var(--mono); color: var(--bg); }
.pin-name { font: 800 24px/1 var(--display); text-transform: uppercase; }

/* Achievements */
.ach { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px; border: 1px solid var(--line); }
.ach-badge { width: 64px; height: 64px; border: 2px solid; display: flex; align-items: center; justify-content: center; font: 900 18px/1 var(--display); }
.ach-name { font: 800 24px/1 var(--display); text-transform: uppercase; }
.ach-desc { font: 500 12px/1.4 var(--mono); color: #B8AE9F; text-transform: uppercase; }

/* Series */
.toggle-box { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); padding: 10px 12px; }
.toggle { width: 44px; height: 26px; border-radius: 13px; background: var(--line); position: relative; flex: none; }
.toggle::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--text-4); transition: left .15s; }
.toggle.on { background: var(--gold); }
.toggle.on::after { left: 21px; background: var(--bg); }
.toggle[disabled] { cursor: not-allowed; }
.books { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 24px 16px; }
.book { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.book-cover { aspect-ratio: 2/3; position: relative; border: 1px solid var(--line); }
.book.active .book-cover { border-color: var(--gold); }
.book-bar { height: 3px; background: var(--line); position: relative; }
.book-bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gold); }
.book-title { font: 800 20px/1.05 var(--display); text-transform: uppercase; }

/* Sync */
.source { border: 1px solid var(--line); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.source.live { border-color: var(--gold); background: var(--panel-warm); }
.source-name { font: 900 34px/1 var(--display); text-transform: uppercase; }
.source-body { font: 400 15px/1.4 var(--sans); color: var(--text-2); }
.source form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.source .field { flex: 1 1 80px; width: auto; font: 600 14px/1 var(--mono); }
.btn { border: 1px solid var(--gold); color: var(--gold); padding: 10px 12px; font: 700 11px/1 var(--mono); letter-spacing: .14em; text-align: center; }
.btn:hover { background: var(--gold); color: var(--bg); }
.btn.solid { background: var(--gold); color: var(--bg); }
.btn.quiet { border-color: var(--line-2); color: var(--text-3); }
.btn.quiet:hover { background: var(--panel); color: var(--bone); }

/* System alert */
.alert { position: fixed; inset: 0; z-index: 100; background: rgba(18,6,5,.94); display: flex; align-items: center; justify-content: center; padding: 24px; }
.alert::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(226,65,47,.08) 0 1px, transparent 1px 4px); pointer-events: none; }
.alert[hidden] { display: none; }
.alert-box { position: relative; width: min(100%, 820px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); border: 1px solid var(--red); background: var(--bg); animation: alert-in .35s cubic-bezier(.2, .9, .3, 1.2); }
.alert-art { min-height: 360px; position: relative; }
.alert-body { padding: 28px; display: flex; flex-direction: column; gap: 18px; border-left: 1px solid var(--red); }
.alert-head { display: flex; justify-content: space-between; font: 700 11px/1 var(--mono); letter-spacing: .18em; color: var(--red); }
.alert-title { font: 900 64px/.84 var(--display); text-transform: uppercase; }
.alert-name { font: 900 36px/1 var(--display); text-transform: uppercase; }
.alert-sponsor { font: 400 11px/1.4 var(--mono); letter-spacing: .08em; color: var(--text-3); text-transform: uppercase; }
.alert-actions { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.alert-open { flex: 1 1 auto; background: var(--red); color: var(--bg); font: 800 20px/1 var(--display); text-transform: uppercase; padding: 15px 18px; text-align: center; letter-spacing: .04em; }
.alert-open:hover { color: var(--bg); filter: brightness(1.1); }
.alert-close { flex: 1 1 auto; border: 1px solid #5A2A22; font: 600 12px/1 var(--mono); letter-spacing: .14em; padding: 15px 18px; display: flex; align-items: center; justify-content: center; color: var(--bone); }
@keyframes alert-in { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .alert-box { animation: none; } }

/* Login / connect pages */
.gate { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg); color: var(--bone); font-family: var(--sans); }
.gate-box { width: min(100%, 560px); border: 1px solid var(--line); background: var(--panel); padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }

/* ===================================================================== */
/* MOTION SYSTEM                                                          */
/* ===================================================================== */
@view-transition { navigation: auto; }
.sidebar { view-transition-name: sidebar; }
.tabbar { view-transition-name: tabbar; }
.main { view-transition-name: main; }
::view-transition-old(main) { animation: vt-out .18s ease-in both; }
::view-transition-new(main) { animation: vt-in .32s cubic-bezier(.2,.8,.2,1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); filter: blur(2px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

/* Page boot: sections rise in one after another */
.content > * { animation: rise .6s cubic-bezier(.2,.8,.2,1) both; }
.content > *:nth-child(2) { animation-delay: .06s; } .content > *:nth-child(3) { animation-delay: .12s; }
.content > *:nth-child(4) { animation-delay: .18s; } .content > *:nth-child(5) { animation-delay: .24s; }
.content > *:nth-child(n+6) { animation-delay: .3s; }
[data-stagger] > * { animation: rise .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 55ms + .15s); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

/* Headline glitch-in */
.h-section, .alert-title, .loot-title, .floor-mark { animation: glitch .7s steps(1) both; }
@keyframes glitch {
  0% { opacity: 0; transform: translateX(-6px); text-shadow: 4px 0 var(--red), -4px 0 var(--gold); clip-path: inset(20% 0 55% 0); }
  15% { opacity: 1; transform: translateX(5px); clip-path: inset(60% 0 8% 0); }
  30% { transform: translateX(-3px); text-shadow: -3px 0 var(--red), 3px 0 var(--gold); clip-path: inset(5% 0 70% 0); }
  45% { transform: none; clip-path: inset(0 0 0 0); text-shadow: 2px 0 var(--red), -2px 0 var(--gold); }
  60% { text-shadow: none; }
  100% { opacity: 1; transform: none; clip-path: none; text-shadow: none; }
}
.floor-mark { animation: slam .9s cubic-bezier(.2,1.4,.3,1) both; transform-origin: left bottom; }
@keyframes slam { 0% { opacity: 0; transform: scale(1.35); filter: blur(10px); } 60% { opacity: 1; filter: blur(0); } 100% { transform: none; } }

.bar > i, .book-bar > i { animation: fill 1.6s cubic-bezier(.2,.8,.2,1) .35s both; }
@keyframes fill { from { width: 0; } }
.bar > i::after { content: ""; position: absolute; right: -2px; top: -4px; bottom: -4px; width: 4px; background: var(--bone); box-shadow: 0 0 14px 4px rgba(242,182,48,.7); animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .3; } }

.caret { display: inline-block; width: .6em; height: 1em; margin-left: 2px; vertical-align: -.12em; background: currentColor; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* Faint CRT scanlines over everything */
.scanlines { position: fixed; inset: 0; pointer-events: none; z-index: 200; opacity: .35;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }

/* Embers drifting up through hero art and reveals */
.embers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.embers i { position: absolute; bottom: -10px; left: var(--x); width: 3px; height: 3px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 6px 2px rgba(242,182,48,.6); opacity: 0; animation: ember var(--d, 6s) linear var(--w, 0s) infinite; }
.embers.red i { background: var(--red); box-shadow: 0 0 6px 2px rgba(226,65,47,.6); }
@keyframes ember { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 20px), -110vh); } }

/* Particles (spawned by JS) */
.spark { position: fixed; z-index: 400; width: 6px; height: 6px; pointer-events: none; background: var(--c, var(--gold));
  animation: spark var(--t, .9s) cubic-bezier(.1,.8,.3,1) forwards; }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }

.shake { animation: shake .5s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake { 10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(4px, -2px); } 30%, 50%, 70% { transform: translate(-7px, 2px); } 40%, 60% { transform: translate(7px, -1px); } }
.flash-red::after { content: ""; position: fixed; inset: 0; z-index: 150; pointer-events: none; background: radial-gradient(circle, transparent 30%, rgba(226,65,47,.55)); animation: redflash .9s ease-out forwards; }
@keyframes redflash { from { opacity: 1; } to { opacity: 0; } }

/* Tilt + glare on cards (JS sets --rx/--ry/--mx/--my) */
.tilt { transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)); transition: transform .25s ease, border-color .2s; transform-style: preserve-3d; position: relative; }
.tilt.tilting { transition: border-color .2s; }
.tilt::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,235,190,.18), transparent 55%); }
.tilt.tilting::before { opacity: 1; }

/* Timeline + map motion */
.track-dot { animation: dot-pop .45s cubic-bezier(.2,1.6,.4,1) both; animation-delay: calc(var(--i, 0) * 90ms + .3s); }
@keyframes dot-pop { from { transform: rotate(45deg) scale(0); } to { transform: rotate(45deg) scale(1); } }
.track-line { transform-origin: left; animation: draw 1.1s cubic-bezier(.2,.8,.2,1) .1s both; }
@keyframes draw { from { transform: scaleX(0); } }
.track-you, .you-dot { animation: you-pulse 1.8s ease-out infinite; }
@keyframes you-pulse { 0% { box-shadow: 0 0 0 0 rgba(226,65,47,.6); } 70% { box-shadow: 0 0 0 14px rgba(226,65,47,0); } 100% { box-shadow: 0 0 0 0 rgba(226,65,47,0); } }
.map > .lit { animation: unfog .5s ease-out both; animation-delay: calc(var(--n, 0) * 22ms + .2s); }
@keyframes unfog { from { background: #0F0C09; transform: scale(.4); } }
.map > .pin { animation: unfog .5s ease-out both, pin-glow 2.4s ease-in-out infinite; animation-delay: calc(var(--n, 0) * 22ms + .2s), 2s; }
@keyframes pin-glow { 50% { box-shadow: 0 0 14px 2px currentColor; filter: brightness(1.25); } }
.map > .you { position: relative; z-index: 1; animation: unfog .5s ease-out both, you-pulse 1.8s ease-out infinite; }

/* Achievement shine */
.ach.got { position: relative; overflow: hidden; }
.ach.got::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,240,200,.12), transparent); animation: shine 4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .4s); }
@keyframes shine { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.ach-badge.got { animation: badge-in .6s cubic-bezier(.2,1.6,.4,1) both; animation-delay: calc(var(--i, 0) * 70ms + .3s); }
@keyframes badge-in { from { transform: scale(0) rotate(-30deg); } }

.fact { animation: stamp .45s cubic-bezier(.2,1.4,.4,1) both; animation-delay: calc(var(--i, 0) * 90ms + .25s); }
@keyframes stamp { from { opacity: 0; transform: translateX(-12px); } }

/* ===================================================================== */
/* SHARED NEW UI                                                          */
/* ===================================================================== */
.pending-chip { background: var(--red); color: var(--bg); border-color: var(--red); animation: chip-pulse 1.6s ease-in-out infinite; }
.pending-chip:hover { color: var(--bg); }
@keyframes chip-pulse { 50% { box-shadow: 0 0 0 4px rgba(226,65,47,.25); } }
.quiet-banner { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border: 1px solid var(--red); background: #1A0C0A; padding: 14px 16px; }

.since { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; }
.since a { flex: none; width: 190px; scroll-snap-align: start; border: 1px solid var(--line); background: var(--panel); padding: 14px; display: flex; flex-direction: column; gap: 8px; color: var(--bone); transition: transform .2s, border-color .2s; }
.since a:hover { border-color: var(--gold); transform: translateY(-3px); color: var(--bone); }
.since-title { font: 800 20px/1.05 var(--display); text-transform: uppercase; }

.chips-filter { display: flex; gap: 6px; flex-wrap: wrap; font: 600 10px/1 var(--mono); letter-spacing: .12em; }
.chips-filter button { border: 1px solid var(--line); padding: 9px 11px; color: var(--text-3); transition: background .15s, color .15s; }
.chips-filter button.on { background: var(--bone); color: var(--bg); border-color: var(--bone); }
.star { font-size: 15px; line-height: 1; transition: transform .2s; }
.star.on { color: var(--gold); }
.quote-card .star.on { color: inherit; }
.star:active { transform: scale(1.5); }
.quote-card { transition: transform .2s, box-shadow .2s; }
.quote-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.icon-btn { font: 700 10px/1 var(--mono); letter-spacing: .12em; color: inherit; opacity: .85; }
.icon-btn:hover { opacity: 1; }

/* Toasts */
.toasts { position: fixed; right: 20px; top: 20px; z-index: 300; display: flex; flex-direction: column; gap: 10px; width: min(360px, calc(100vw - 40px)); pointer-events: none; }
.toast { pointer-events: auto; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px; background: var(--bg); border: 1px solid var(--tc, var(--gold)); box-shadow: 0 16px 40px rgba(0,0,0,.6), 0 0 30px rgba(242,182,48,.15);
  position: relative; overflow: hidden; animation: toast-in .5s cubic-bezier(.2,1.3,.4,1) both; }
.toast.out { animation: toast-out .35s ease-in forwards; }
.toast::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,240,200,.2), transparent); animation: shine 1.4s ease-out .3s; }
@keyframes toast-in { from { opacity: 0; transform: translateX(60px) scale(.9); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(60px); } }
.toast .ach-badge { width: 52px; height: 52px; font-size: 16px; }

/* ===================================================================== */
/* SYSTEM ALERT (upgraded)                                                */
/* ===================================================================== */
.alert { animation: alert-bg .3s ease-out both; }
@keyframes alert-bg { from { background: rgba(18,6,5,0); } }
.alert-box { animation: crt-on .55s cubic-bezier(.2,.9,.3,1) both; }
@keyframes crt-on { 0% { transform: scale(1, .005); filter: brightness(4); opacity: .2; } 40% { transform: scale(1, .005); filter: brightness(4); opacity: 1; } 70% { transform: scale(1, 1.04); filter: brightness(1.6); } 100% { transform: none; filter: none; } }
.alert-head span:first-child { animation: blink .9s steps(1) infinite; }
.alert-sub { font: 600 11px/1.4 var(--mono); letter-spacing: .14em; color: var(--text-3); text-transform: uppercase; }

/* ===================================================================== */
/* LOOT BOX                                                               */
/* ===================================================================== */
.loot { position: fixed; inset: 0; z-index: 100; background: radial-gradient(circle at 50% 45%, #1d160d, var(--bg) 70%); display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; animation: alert-bg .3s both; }
.loot[hidden] { display: none; }
.loot { --tier: #C98A4B; } .loot[data-tier=SILVER] { --tier: #C9CDD2; } .loot[data-tier=GOLD] { --tier: var(--gold); }
.loot-stage { position: relative; width: min(100%, 460px); display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.loot-title { font: 900 clamp(52px, 9vw, 72px)/.86 var(--display); text-transform: uppercase; }
.loot-title span { color: var(--tier); }
.box-wrap { position: relative; width: 280px; height: 280px; display: flex; align-items: center; justify-content: center; margin: 8px 0; cursor: pointer; background: none; }
.rays { position: absolute; inset: -80px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(242,182,48,.16) 0 8deg, transparent 8deg 24deg);
  mask: radial-gradient(circle, #000 20%, transparent 68%); -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); animation: spin 18s linear infinite; }
.loot[data-tier=SILVER] .rays { background: repeating-conic-gradient(from 0deg, rgba(201,205,210,.14) 0 8deg, transparent 8deg 24deg); }
@keyframes spin { to { transform: rotate(360deg); } }
.glow { position: absolute; inset: -20px; border-radius: 50%; background: radial-gradient(circle, rgba(242,182,48,.28) 0%, transparent 65%); animation: glow 2.2s ease-in-out infinite; }
@keyframes glow { 50% { transform: scale(1.12); opacity: .7; } }
.box { position: relative; width: 200px; height: 170px; margin-top: 40px; border: 2px solid var(--tier); background: repeating-linear-gradient(45deg, #1C1A18 0 10px, #232120 10px 20px);
  display: flex; align-items: center; justify-content: center; animation: hover 2.6s ease-in-out infinite; }
@keyframes hover { 50% { transform: translateY(-10px) rotate(-1deg); } }
.box-lid { position: absolute; left: -12px; right: -12px; top: -44px; height: 48px; border: 2px solid var(--tier); background: #2A2826; z-index: 2; }
.box-lid::after, .box-band { content: ""; position: absolute; left: 50%; width: 28px; margin-left: -14px; background: var(--gold); }
.box-lid::after { top: 0; bottom: 0; }
.box-band { top: 0; bottom: 0; }
.box-lock { position: relative; z-index: 3; width: 46px; height: 46px; background: var(--bg); border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center; font: 900 26px/1 var(--display); color: var(--gold); animation: blink 1.6s ease-in-out infinite; }
.box-wrap.charging .box { animation: rattle .12s linear infinite; }
@keyframes rattle { 0% { transform: rotate(-3deg) translateY(-2px); } 50% { transform: rotate(3deg) translateY(2px); } 100% { transform: rotate(-3deg); } }
.box-wrap.open .box-lid { animation: lid-off .8s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes lid-off { to { transform: translate(140px, -320px) rotate(70deg); opacity: 0; } }
.box-wrap.open .box-lock { animation: none; opacity: 0; transition: opacity .2s; }
.box-wrap.open .box { animation: none; }
.burst { position: absolute; left: 50%; top: 55%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #fff7e0; box-shadow: 0 0 60px 40px var(--tier); opacity: 0; }
.box-wrap.open .burst { animation: burst .9s ease-out forwards; }
@keyframes burst { 0% { opacity: 1; transform: scale(.2); } 30% { opacity: 1; transform: scale(14); } 100% { opacity: 0; transform: scale(30); } }
.loot-desc { font: 600 12px/1.5 var(--mono); letter-spacing: .06em; color: var(--text-3); text-transform: uppercase; max-width: 320px; }
.loot-open { width: 100%; background: var(--gold); color: var(--bg); font: 800 22px/1 var(--display); text-transform: uppercase; padding: 16px; letter-spacing: .04em; }
.loot-open:hover { filter: brightness(1.08); }
.loot-later { font: 600 12px/1 var(--mono); letter-spacing: .14em; padding: 12px; color: var(--text-3); }
.loot-later:hover { color: var(--bone); }
.haul { width: min(100%, 980px); display: flex; flex-direction: column; gap: 22px; }
.haul[hidden] { display: none; }
.haul-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; perspective: 1200px; }
.haul-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--line); border-top: 3px solid var(--kc, var(--gold)); background: var(--panel); color: var(--bone); text-align: left;
  animation: deal .7s cubic-bezier(.2,1.2,.3,1) both; animation-delay: calc(var(--i, 0) * 110ms + .1s); transform-origin: center top; }
.haul-card:hover { border-color: var(--kc, var(--gold)); color: var(--bone); transform: translateY(-3px); }
@keyframes deal { 0% { opacity: 0; transform: translateY(-160px) rotateX(80deg) scale(.6); } 60% { opacity: 1; } 100% { transform: none; } }
.haul-card .card-name { font-size: 26px; }
.k-codex { --kc: var(--red); } .k-fact { --kc: #E8875C; } .k-event { --kc: var(--bone); } .k-quote { --kc: var(--gold); } .k-place { --kc: #7FB8A4; }

/* ===================================================================== */
/* DEBRIEF CARD STACK                                                     */
/* ===================================================================== */
.debrief { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 40px; align-items: start; }
.stack-area { position: relative; height: 320px; }
.dcard { position: absolute; left: 0; right: 0; top: 0; height: 280px; background: #211B14; border: 1px solid var(--line-2); padding: 20px; display: flex; flex-direction: column; gap: 10px;
  transform: translateY(calc(var(--depth) * 14px)) scale(calc(1 - var(--depth) * .04)); z-index: calc(10 - var(--depth)); transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s; touch-action: pan-y; user-select: none; }
.dcard.top { border-color: var(--gold); cursor: grab; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.dcard.dragging { transition: none; cursor: grabbing; }
.dcard.gone-left { transform: translate(-130%, 40px) rotate(-18deg) !important; opacity: 0; }
.dcard.gone-right { transform: translate(130%, 40px) rotate(18deg) !important; opacity: 0; }
.dcard[data-depth="3"], .dcard[data-depth="4"] { opacity: 0; }
.dcard-title { font: 900 40px/1 var(--display); text-transform: uppercase; }
.dcard-actions { margin-top: auto; display: flex; gap: 8px; font: 600 11px/1 var(--mono); letter-spacing: .12em; }
.dcard-actions > * { padding: 10px 12px; }
.sum-row { display: flex; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--line); font: 500 16px/1 var(--sans); }
.sum-row b { font: 600 13px/1 var(--mono); color: var(--gold); }
.stack-done { position: absolute; inset: 0 0 40px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; border: 1px dashed var(--line-2); padding: 24px; }

/* ===================================================================== */
/* SHARE CARD                                                             */
/* ===================================================================== */
.share-modal { position: fixed; inset: 0; z-index: 250; background: rgba(5,4,3,.92); display: flex; align-items: center; justify-content: center; padding: 20px; animation: alert-bg .2s both; }
.share-box { width: min(100%, 400px); max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; animation: rise .4s cubic-bezier(.2,.8,.2,1) both; }
.share-box canvas { width: min(300px, 70vw); aspect-ratio: 9/16; height: auto; box-shadow: 0 30px 60px rgba(0,0,0,.6); }
.swatches { display: flex; gap: 10px; }
.swatches button { width: 34px; height: 34px; border: 1px solid var(--line-2); }
.swatches button.on { outline: 2px solid var(--bone); outline-offset: 2px; }
.share-actions { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; font: 600 11px/1 var(--mono); letter-spacing: .12em; text-align: center; }
.share-actions button { border: 1px solid var(--line-2); padding: 14px 0; }
.share-actions button.primary { background: var(--bone); color: var(--bg); border-color: var(--bone); }
.share-close { align-self: flex-end; font: 700 11px/1 var(--mono); letter-spacing: .14em; color: var(--text-3); }

/* Settings choices (reveal style, onboarding sources) */
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.choice { border: 1px solid var(--line); padding: 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; color: var(--bone); transition: border-color .15s, background .15s; }
.choice:hover { border-color: var(--line-2); }
.choice.on { border-color: var(--gold); background: var(--panel-warm); }
.choice-name { font: 800 22px/1 var(--display); text-transform: uppercase; }
.choice-sub { font: 500 11px/1.3 var(--mono); color: var(--text-3); text-transform: uppercase; }
.radio { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-2); flex: none; transition: border .15s; }
.choice.on .radio { border: 6px solid var(--gold); }

/* ===================================================================== */
/* WELCOME / ONBOARDING                                                   */
/* ===================================================================== */
.welcome { min-height: 100vh; background: var(--bg); color: var(--bone); font-family: var(--sans); display: flex; justify-content: center; padding: 56px 20px 40px; position: relative; overflow: hidden; }
.welcome-col { width: min(100%, 520px); display: flex; flex-direction: column; gap: 20px; position: relative; }
.step { display: flex; flex-direction: column; gap: 20px; animation: rise .5s cubic-bezier(.2,.8,.2,1) both; }
.step[hidden] { display: none; }
.welcome-title { font: 900 clamp(56px, 14vw, 88px)/.84 var(--display); text-transform: uppercase; animation: glitch .8s steps(1) both; }
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); font: 700 12px/1 var(--mono); letter-spacing: .12em; text-align: center; }
.seg button { padding: 13px 0; color: var(--text-3); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--bone); color: var(--bg); }
.readout { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.readout input[type=text] { width: 100%; background: none; border: 0; color: var(--bone); text-align: center; font: 700 clamp(44px, 12vw, 62px)/1 var(--mono); letter-spacing: -.04em; outline: none; }
.readout input[type=range] { width: 100%; }
.equiv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.equiv div { background: var(--panel); padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.equiv b { font: 900 28px/1 var(--display); }
.descend { position: fixed; inset: 0; z-index: 500; background: var(--bg); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; }
.descend[hidden] { display: none; }
.descend-floor { font: 900 clamp(120px, 30vw, 260px)/.8 var(--display); animation: plunge 1.8s cubic-bezier(.6,0,.2,1) both; }
@keyframes plunge { 0% { transform: scale(.2); opacity: 0; filter: blur(12px); } 40% { transform: scale(1); opacity: 1; filter: none; } 80% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(6); opacity: 0; } }
.stairs { display: flex; flex-direction: column; gap: 6px; width: 220px; }
.stairs i { height: 6px; background: var(--gold); transform-origin: left; animation: draw .3s ease-out both; animation-delay: calc(var(--i) * 90ms); }

/* ===================================================================== */
/* MOBILE: header, bottom tab bar, slide-up sheet                         */
/* ===================================================================== */
.mhead, .tabbar, .sheet-backdrop, .fab, .vtl, .back-link, .sheet-grip { display: none; }
@media (max-width: 860px) {
  .shell { display: block; padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .mhead { display: flex; position: sticky; top: 0; z-index: 40; justify-content: space-between; align-items: center; gap: 10px;
    padding: calc(14px + env(safe-area-inset-top)) 20px 14px; background: rgba(11,9,7,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line); font: 600 11px/1 var(--mono); letter-spacing: .14em; }
  .mhead-menu { width: 36px; height: 36px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; border: 1px solid var(--line); }
  .mhead-menu i { width: 16px; height: 2px; background: var(--bone); display: block; transition: transform .2s; }
  .topbar { display: none; }
  .sidebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; max-height: 86vh; overflow-y: auto; border-right: 0; border-top: 1px solid var(--gold); min-width: 0;
    padding: 12px 20px calc(28px + env(safe-area-inset-bottom)); transform: translateY(105%); transition: transform .35s cubic-bezier(.2,.8,.2,1); box-shadow: 0 -20px 60px rgba(0,0,0,.6); }
  .sheet-open .sidebar { transform: none; }
  .sidebar .brand { display: none; }
  .sheet-grip { display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--line-2); margin: 0 auto; }
  .dock { margin-top: 0; }
  .sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(0,0,0,.6); opacity: 0; pointer-events: none; transition: opacity .3s; }
  .sheet-open .sheet-backdrop { opacity: 1; pointer-events: auto; }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: calc(86px + env(safe-area-inset-bottom)); padding: 0 6px calc(26px + env(safe-area-inset-bottom));
    background: var(--bg); border-top: 1px solid var(--line); }
  .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; font: 600 10px/1 var(--mono); letter-spacing: .12em; color: var(--text-3); }
  .tabbar a::before { content: ""; width: 22px; height: 2px; background: transparent; transition: width .25s, background .25s; }
  .tabbar a.on { color: var(--gold); font-weight: 700; }
  .tabbar a.on::before { background: var(--gold); width: 28px; }
  .content { padding: 22px 20px 32px; gap: 28px; }
  .h-section { font-size: 48px; }
  .hide-mobile { display: none; }
  .section-head { padding-bottom: 14px; }
  .toasts { top: auto; bottom: calc(100px + env(safe-area-inset-bottom)); right: 12px; left: 12px; width: auto; }

  /* HUD home (mobile 1a/1b) */
  .hero { gap: 18px; }
  .hero-art { order: -1; min-height: 240px; margin: -22px -20px 0; border: 0; border-bottom: 1px solid var(--line); }
  .hero-art::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: linear-gradient(180deg, transparent, var(--bg) 92%); pointer-events: none; }
  .sysmsg { z-index: 1; }
  .floor-mark { font-size: 104px; }
  .pos-big { font-size: 34px; }
  .two-col { gap: 28px; }
  .tile-n { font-size: 40px; }

  /* Codex: 2-up cards; a picked entry goes full-bleed above the grid */
  .codex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; flex-basis: 100%; }
  .card-art { height: 132px; }
  .entry { position: static; order: -1; flex-basis: 100%; border: 0; margin: -22px -20px 0; }
  .entry.auto { display: none; }
  .entry-art { height: 330px; }
  .entry-art::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(180deg, transparent, var(--bg)); pointer-events: none; }
  .entry-body { border-top: 0; margin-top: -60px; position: relative; z-index: 1; padding: 0 20px 10px; }
  .back-link { display: inline-block; position: absolute; left: 20px; top: 16px; z-index: 3; font: 600 11px/1 var(--mono); letter-spacing: .14em; background: var(--bg); color: var(--bone); padding: 6px 8px; }

  /* Timeline: vertical list with a floating note button */
  .track, .tl-grid { display: none; }
  .vtl { display: flex; flex-direction: column; }
  .fab { display: block; position: fixed; right: 20px; bottom: calc(104px + env(safe-area-inset-bottom)); z-index: 45; background: var(--gold); color: var(--bg); font: 700 11px/1 var(--mono); letter-spacing: .12em; padding: 13px 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.6); animation: rise .5s .5s both; }
  .note-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: var(--bg); border-top: 1px solid var(--red); padding: 18px 20px calc(24px + env(safe-area-inset-bottom)); animation: rise .3s both; }
  .loot, .alert { padding: 16px; align-items: flex-start; }
  .alert-box { margin-top: 20px; }
  .alert-art { min-height: 200px; }
  .alert-body { border-left: 0; border-top: 1px solid var(--red); padding: 22px; }
  .alert-title { font-size: 64px; }
  .map-wrap { gap: 24px; }
  .books { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; }
  .book-title { font-size: 14px; }
}
.vtl-row { display: grid; grid-template-columns: 44px 14px minmax(0, 1fr); gap: 10px; animation: rise .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 60ms); }
.vtl-time { font: 600 11px/1.6 var(--mono); color: var(--text-3); text-align: right; }
.vtl-rail { display: flex; flex-direction: column; align-items: center; }
.vtl-rail i { width: 9px; height: 9px; margin-top: 4px; transform: rotate(45deg); flex: none; }
.vtl-rail b { flex: 1; width: 1px; background: var(--line); }
.vtl-body { padding-bottom: 16px; display: flex; flex-direction: column; gap: 4px; }
.you-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--red); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .embers, .scanlines { display: none; }
  @view-transition { navigation: none; }
}