/* Roadmap page (a vertical timeline) and the home teaser. Colors come from site.css variables. */
.road { list-style: none; margin: 26px 0 0; padding: 0; position: relative; }
.road::before { content: ""; position: absolute; left: 118px; top: 8px; bottom: 8px; width: 2px; background: var(--border); }
.stop { position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 32px; margin-bottom: 22px; }
.stop::before { content: ""; position: absolute; left: 111px; top: 14px; width: 16px; height: 16px; background: var(--panel); border: 2px solid var(--border); transform: rotate(45deg); }
.stop .when { text-align: right; padding-top: 8px; }
.stop .when b { display: block; font: 1.25rem/1.1 var(--pixel); letter-spacing: .04em; color: var(--text); }
.stop .when span { display: inline-block; margin-top: 4px; font: 1rem/1 var(--pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.stop .card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; }
.stop h2 { margin: 0 0 6px; font-size: 1.7rem; color: var(--gold); display: flex; align-items: center; gap: 10px; }
.stop h2 i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; font: 1.2rem/1 var(--pixel); font-style: normal; color: #1a1405; background: var(--gold); border-radius: 6px; }
.stop .meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.stop .meta span { font: 1rem/1 var(--pixel); letter-spacing: .04em; padding: 5px 8px; border: 1px solid var(--border); border-radius: 4px; color: var(--muted); background: #121214; }
.stop .blurb { margin: 0 0 10px; color: var(--muted); }
.stop h3 { margin: 0 0 4px; font: 1.05rem/1 var(--pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.stop ul { margin: 0; padding-left: 20px; color: var(--muted); }
.stop ul li { margin: 2px 0; }
.stop.open::before, .stop.next::before { background: var(--gold); border-color: #8a6d12; }
.stop.open .when span { color: #7fd17f; }
.stop.next .when span { color: var(--gold); }
.stop.next .card { border-color: var(--gold-dk); box-shadow: 0 0 0 1px rgba(232,198,106,.12), 0 10px 30px rgba(0,0,0,.35); }
.stop.planned .card { opacity: .88; }
.notes-h { margin-top: 44px; }

/* home teaser: the next three stops */
.road-mini { list-style: none; margin: 0; padding: 0; }
.road-mini li { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.road-mini li:last-child { border-bottom: 0; }
.road-mini time { font: 1.1rem/1.2 var(--pixel); color: var(--gold); letter-spacing: .03em; }
.road-mini b { display: block; color: var(--text); }
.road-mini span { font-size: .85rem; color: var(--muted); }

@media (max-width: 640px) {
  .road::before { left: 9px; }
  .stop { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-left: 30px; }
  .stop::before { left: 2px; top: 5px; }
  .stop .when { text-align: left; padding-top: 0; display: flex; align-items: baseline; gap: 10px; }
  .stop .when span { margin-top: 0; }
  .stop h2 { font-size: 1.45rem; }
}

/* world map with the opening order, and a zone banner on every card */
.rmap { position: relative; margin: 22px 0 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #06121a; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.rmap img { display: block; width: 100%; height: auto; filter: saturate(.55) brightness(.62); }
.rmap .pin { position: absolute; transform: translate(-50%, -50%); display: block; text-decoration: none; color: var(--text); }
.rmap .pin b { flex: none; display: grid; place-items: center; width: 30px; height: 30px; font: 1.15rem/1 var(--pixel); color: var(--muted); background: #17171b; border: 2px solid #3a3a42; border-radius: 50%; }
.rmap .pin span { position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%); display: none; font: .95rem/1.1 var(--pixel); letter-spacing: .04em; padding: 4px 7px; background: rgba(10,10,12,.78); border-radius: 5px; white-space: nowrap; }
.rmap .pin small { display: block; font-size: .8rem; color: var(--muted); }
.rmap .pin.open b, .rmap .pin.next b { color: #1a1405; background: var(--gold); border-color: #8a6d12; box-shadow: 0 0 0 5px rgba(232,198,106,.22); }
.rmap .pin.next b { animation: pinpulse 2.2s ease-in-out infinite; }
.rmap .pin.open span, .rmap .pin.next span, .rmap .pin:hover span { display: block; }
@keyframes pinpulse { 50% { box-shadow: 0 0 0 11px rgba(232,198,106,0); } }
.stop .card { padding: 0; overflow: hidden; }
.stop .card .body { padding: 14px 18px 16px; }
.stop .banner { position: relative; height: 112px; background: #06121a url('../img/slides/world.webp') no-repeat; background-size: 320% auto; border-bottom: 1px solid var(--border); }
.stop .banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(18,18,20,.92), rgba(18,18,20,0) 70%); }
.stop.planned .banner { filter: saturate(.4) brightness(.7); }
.stop .banner em { position: absolute; z-index: 1; right: 14px; top: 4px; font: 4.2rem/1 var(--pixel); font-style: normal; color: rgba(255,255,255,.2); }
.stop .banner span { position: absolute; z-index: 1; left: 18px; bottom: 8px; font: 1rem/1 var(--pixel); letter-spacing: .1em; text-transform: uppercase; color: var(--text); text-shadow: 0 1px 3px #000; }
.stop h2 i { display: none; }
@media (max-width: 640px) {
  .rmap .pin b { width: 22px; height: 22px; font-size: .9rem; border-width: 1px; }
  .rmap .pin.open span, .rmap .pin.next span { display: none; }
  .stop .banner { height: 90px; }
}

/* banners: gameplay clips for the confirmed zones, a question mark for the rest */
.stop .banner.clip { height: 150px; background: #0a0a0c; }
.stop .banner.clip img, .stop .banner.clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 65%; }
.stop .banner.unknown { height: 74px; background: repeating-linear-gradient(135deg, #131316 0 10px, #17171b 10px 20px); }
.stop .banner.unknown::after { display: none; }
.stop .banner.unknown em { top: 50%; right: 18px; transform: translateY(-50%); font-size: 3rem; color: rgba(255,255,255,.14); }
.stop.tbd .card { border-style: dashed; opacity: .8; }
.stop.tbd .when b { color: var(--muted); }
.stop.tbd::before { background: var(--panel); border-style: dashed; }
.rmap .pin.tbd b { color: #7a7a84; background: #101013; border: 2px dashed #4a4a54; box-shadow: none; }
@media (max-width: 640px) { .stop .banner.clip { height: 110px; } .stop .banner.unknown { height: 56px; } }

/* a dungeon release between two zones: smaller stop, no banner */
.stop.dungeon { margin-bottom: 18px; }
.stop.dungeon::before { top: 12px; left: 113px; width: 12px; height: 12px; border-radius: 0; }
.stop.dungeon .card { border-left: 3px solid #6a5a8a; }
.stop.dungeon .when b { font-size: 1.05rem; }
.stop.dungeon .body { padding: 10px 16px 12px; }
.stop.dungeon .kind { margin: 0 0 2px; font: .95rem/1 var(--pixel); letter-spacing: .1em; text-transform: uppercase; color: #a48fd0; }
.stop.dungeon h2 { font-size: 1.3rem; margin-bottom: 4px; }
@media (max-width: 640px) { .stop.dungeon::before { left: 4px; top: 4px; } }

.stop.dungeon .blurb { margin: 0 0 8px; font-size: .92rem; }
.stop.dungeon .dg { display: flex; gap: 14px; align-items: stretch; }
.stop.dungeon .il { flex: none; display: grid; align-content: center; justify-items: center; min-width: 92px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: #121214; text-align: center; }
.stop.dungeon .il small { font: .85rem/1 var(--pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.stop.dungeon .il b { font: 2.1rem/1.1 var(--pixel); color: var(--gold); }
.stop.dungeon .il span { font-size: .8rem; color: var(--muted); }
.stop.dungeon .chips { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.stop.dungeon .chips li { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 8px; align-items: center; margin: 0; padding: 5px 8px; font-size: .85rem; line-height: 1.2; color: var(--text); background: #121214; border: 1px solid var(--border); border-radius: 6px; }
.stop.dungeon .chips i { grid-row: span 2; display: grid; place-items: center; width: 26px; height: 26px; font-style: normal; font-size: 1rem; color: #a48fd0; background: #1a1724; border-radius: 5px; }
.stop.dungeon .chips span { font: .8rem/1 var(--pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 640px) { .stop.dungeon .dg { flex-direction: column; } .stop.dungeon .il { grid-auto-flow: column; justify-content: start; gap: 10px; } .stop.dungeon .chips { grid-template-columns: minmax(0, 1fr); } }