:root{
  --bg:#070605;
  --panel:#0e0c0a;
  --ink:#f2e4cf;
  --amber:#ffb55a;
  --amber-bright:#ffd49b;
  --dim:#8a7a64;
  --muted:#7d6a52;
  --ember:#6b5743;
  --line:#241c14;
  --maroon:#5e1f1f;
  --navy:#10243a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--amber)}
.wrap{max-width:1320px;margin:0 auto;padding:18px 18px 40px}

header.top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:16px}
.kicker{font-family:"SFMono-Regular",ui-monospace,Menlo,monospace;
  font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:#b07a3a}
h1.title{font-family:Georgia,"Times New Roman",serif;font-weight:500;
  font-size:34px;line-height:1.05;margin:6px 0 2px}
.sub{color:var(--muted);font-size:13.5px;max-width:560px;line-height:1.5}

.topright{display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.search{position:relative;width:248px}
.search input{width:100%;height:34px;background:#0e0c0a;border:1px solid var(--line);
  border-radius:8px;color:var(--ink);padding:0 12px;font-size:13px;outline:none}
.search input:focus{border-color:#6b4f2e}
.search input::placeholder{color:#6f5e48}
.search-results{position:absolute;top:38px;left:0;right:0;z-index:1300;background:#12100c;
  border:1px solid #2a2118;border-radius:8px;overflow-y:auto;max-height:330px;display:none;
  box-shadow:0 12px 34px rgba(0,0,0,.6)}
.search-results.open{display:block}
.sr-item{padding:7px 11px;cursor:pointer;border-bottom:1px solid #1a1410;display:flex;
  justify-content:space-between;gap:10px;align-items:baseline}
.sr-item:last-child{border-bottom:none}
.sr-item:hover{background:#1c1610}
.sr-name{font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-meta{font-family:ui-monospace,Menlo,monospace;font-size:10px;white-space:nowrap}
.sr-active{color:#ffb55a}
.sr-dead{color:#8d7355}
.sr-empty{padding:9px 11px;color:#6f5e48;font-size:12px}

.ai-btn{background:var(--maroon);color:#f6d9d9;border:none;border-radius:7px;
  padding:7px 12px;font-size:12px;cursor:pointer;letter-spacing:.02em}
.ai-pop{display:none;position:relative}
.ai-pop.open{display:block}
.ai-card{position:absolute;right:0;top:8px;z-index:1200;width:340px;background:var(--navy);
  color:#dce7f2;border:1px solid #244a6a;border-radius:10px;padding:14px 16px;
  font-size:12.5px;line-height:1.55;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.ai-card h4{margin:0 0 8px;font-size:13px;color:#fff}
.ai-card ul{margin:6px 0 0;padding-left:18px}
.ai-card li{margin:4px 0}

.stage{display:grid;grid-template-columns:210px 1fr 210px;gap:14px;align-items:stretch}
.rail{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  display:flex;flex-direction:column;min-height:520px;max-height:640px}
.rail h3{margin:0;padding:12px 14px 8px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:1px solid var(--line)}
.rail.live h3{color:#d99a4e}
.rail.dead h3{color:#8d7355}
.rail .count{font-family:ui-monospace,Menlo,monospace;font-size:14px}
.rail.live .count{color:var(--amber)}
.rail.dead .count{color:#a0896d}
.railscroll{overflow-y:auto;padding:6px 10px 12px;flex:1;scrollbar-width:thin}
.railscroll::-webkit-scrollbar{width:7px}
.railscroll::-webkit-scrollbar-thumb{background:#2a2118;border-radius:4px}
.ritem{font-size:11.5px;line-height:1.45;padding:2px 2px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;cursor:pointer;border-radius:4px}
.ritem:hover{background:#1a140d}
.ritem .ry{font-family:ui-monospace,Menlo,monospace;font-size:10px;margin-right:6px}
.rail.live .ritem{color:#e7c88f}
.rail.live .ry{color:#a9803f}
.rail.dead .ritem{color:#897759}
.rail.dead .ry{color:#5e4f3d}
.decade{font-family:ui-monospace,Menlo,monospace;font-size:9.5px;letter-spacing:.12em;
  color:#4d4031;padding:8px 2px 2px;border-top:1px solid #181209;margin-top:4px}

.mapcol{display:flex;flex-direction:column;gap:12px}
.mapbox{position:relative;border-radius:12px;overflow:hidden;border:1px solid #1f1810;
  background:#04040a;min-height:520px;flex:1}
#map{position:absolute;inset:0;background:#04040a}
.glow-canvas{position:absolute;inset:0;pointer-events:none;z-index:450}
.overlay-yr{position:absolute;top:12px;left:16px;z-index:500;
  font-family:ui-monospace,Menlo,monospace;font-size:40px;line-height:1;color:#f3d49b;
  text-shadow:0 2px 18px rgba(0,0,0,.9);pointer-events:none}
.overlay-metric{position:absolute;top:14px;right:16px;z-index:500;text-align:right;
  pointer-events:none;text-shadow:0 2px 14px rgba(0,0,0,.9)}
.overlay-metric .big{font-family:ui-monospace,Menlo,monospace;font-size:22px;color:var(--amber)}
.overlay-metric .lbl{font-size:10.5px;letter-spacing:.08em;color:#9a8a72}
.tooltip{position:absolute;z-index:600;background:#1a140d;border:1px solid #6b4f2e;
  color:var(--ink);font-size:12px;padding:4px 9px;border-radius:7px;pointer-events:none;
  white-space:nowrap;transform:translate(-50%,-145%);display:none}
.tooltip b{color:var(--amber-bright);font-weight:600}

.filmfx{position:absolute;inset:0;z-index:700;pointer-events:none;visibility:hidden;
  overflow:hidden;mix-blend-mode:screen}
.filmfx.on{visibility:visible}
.filmfx>div{position:absolute;inset:-20%;opacity:0}
.ff-grain{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:300px 300px}
.ff-scratches{background-image:repeating-linear-gradient(90deg,
  transparent 0 46px, rgba(255,255,255,.55) 46px 46.7px,
  transparent 46.7px 119px, rgba(255,255,255,.35) 119px 119.6px, transparent 119.6px 210px)}
.ff-hair{background-image:repeating-linear-gradient(88deg,
  transparent 0 173px, rgba(20,12,4,.6) 173px 174px, transparent 174px 400px)}
.ff-burn{inset:auto;top:9%;right:8%;width:54px;height:54px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,247,224,.95) 0%,rgba(232,150,40,.7) 38%,rgba(140,70,10,.3) 62%,transparent 72%)}
.ff-flash{background:rgba(255,248,232,.9)}
.filmfx.on .ff-grain{animation:ffGrain 1.1s steps(8) 1}
.filmfx.on .ff-scratches{animation:ffScratch 1.1s ease-out 1}
.filmfx.on .ff-hair{animation:ffScratch 1.1s 0.15s ease-out 1}
.filmfx.on .ff-burn{animation:ffBurn 1.1s ease-in 1}
.filmfx.on .ff-flash{animation:ffFlash 1.1s ease-out 1}
@keyframes ffFlash{0%{opacity:0}6%{opacity:.85}14%{opacity:.08}24%{opacity:.55}
  40%{opacity:.05}58%{opacity:.32}78%{opacity:.04}100%{opacity:0}}
@keyframes ffGrain{0%{opacity:.4;transform:translate(0,0)}25%{transform:translate(-5%,3%)}
  50%{opacity:.32;transform:translate(4%,-4%)}75%{transform:translate(-3%,5%)}
  100%{opacity:0;transform:translate(2%,1%)}}
@keyframes ffScratch{0%{opacity:0;transform:translateX(0)}8%{opacity:.7}
  14%{transform:translateX(9px)}30%{transform:translateX(-13px)}
  50%{opacity:.5;transform:translateX(6px)}70%{transform:translateX(-8px)}
  88%{opacity:.55}100%{opacity:0;transform:translateX(0)}}
@keyframes ffBurn{0%,62%{opacity:0;transform:scale(.45)}72%{opacity:.95;transform:scale(1)}
  84%{opacity:.5;transform:scale(1.08)}100%{opacity:0;transform:scale(1.25)}}
@media (prefers-reduced-motion:reduce){.filmfx{display:none}}

.controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.playbtn{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:1px solid #6b4f2e;
  background:#1a140d;color:var(--amber);cursor:pointer;font-size:18px;display:flex;
  align-items:center;justify-content:center}
.playbtn:hover{background:#241a10}
input[type=range]{flex:1;accent-color:#e0892f;height:4px;cursor:pointer;min-width:200px}
.seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{background:transparent;color:var(--muted);border:none;padding:7px 11px;
  font-size:12px;cursor:pointer}
.seg button.on{background:#1f160d;color:var(--amber)}
.speed{color:var(--muted);font-size:12px;display:flex;align-items:center;gap:7px}

.trend{background:#0b0a08;border:1px solid var(--line);border-radius:10px;padding:8px 10px 6px}
.trend-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:2px;
  font-size:11px;letter-spacing:.06em;color:var(--muted)}
.trend-head #trendPeak{font-family:ui-monospace,Menlo,monospace;color:#9a8a72}
#trendCanvas{display:block;width:100%;height:96px}

.detail{position:absolute;left:14px;bottom:14px;z-index:600;max-width:320px;
  background:rgba(14,12,10,.96);border:1px solid #3a2c1d;border-radius:10px;padding:12px 14px;
  display:none}
.detail.open{display:block}
.detail .dn{font-size:15px;color:var(--amber-bright);font-weight:600;margin-bottom:3px}
.detail .dm{font-size:12px;color:var(--muted);line-height:1.5}
.detail .dx{position:absolute;top:8px;right:10px;color:var(--muted);cursor:pointer;font-size:14px}
.detail a{font-size:12px}

footer.note{margin-top:18px;color:var(--muted);font-size:11.5px;line-height:1.6;
  border-top:1px solid var(--line);padding-top:12px}

@media (max-width:880px){
  .stage{grid-template-columns:1fr;}
  .rail{min-height:0;max-height:280px}
  .mapbox{min-height:60vh}
}