/* ===== Immersive journey (window-seat) view ===== */
body.ride-open { overflow: hidden; }
.ride { position: fixed; inset: 0; z-index: 3000; background: #0c1712; color: #fff; display: grid; grid-template-rows: 1fr auto; overflow: hidden; animation: rideIn .45s ease both; }
.ride.out { animation: rideOut .45s ease both; }
@keyframes rideIn { from { opacity: 0; transform: scale(1.02); } }
@keyframes rideOut { to { opacity: 0; } }
.ride-stage { position: relative; overflow: hidden; transform: translateY(var(--sway, 0)) rotate(var(--roll, 0)) scale(var(--zoom, 1)); }
.ride.mode-ship .ride-stage { --zoom: 1.06; }
.ride.mode-ship .ride-stage { transform-origin: 50% 80%; }
.ride-sky { position: absolute; inset: 0; transition: background 1.2s linear; }
.ride-stars { position: absolute; inset: 0 0 40% 0; opacity: 0; transition: opacity 1.5s; background-image:
  radial-gradient(1.5px 1.5px at 10% 20%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 25% 8%, #fff 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 40% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 55% 12%, #fff 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 70% 26%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 85% 10%, #fff 50%, transparent 51%),
  radial-gradient(1px 1px at 92% 34%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 5% 40%, #fff 50%, transparent 51%),
  radial-gradient(1.2px 1.2px at 33% 44%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 64% 40%, #fff 50%, transparent 51%); }
.ride-sun { position: absolute; width: 8vmin; height: 8vmin; border-radius: 50%; background: radial-gradient(circle, #fff7da 40%, #ffd98a 60%, rgba(255, 217, 138, 0) 72%); transform: translate(-50%, -50%); transition: left 1s linear, top 1s linear; }
.ride-sun.moon { background: radial-gradient(circle at 40% 40%, #f6f3e6 45%, rgba(246, 243, 230, 0) 62%); width: 6vmin; height: 6vmin; }
.ride-world { position: absolute; inset: 0; transition: filter 1.2s linear; }
.rterr { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.rterr.on { opacity: 1; }
.rl { position: absolute; top: 0; bottom: 0; left: 0; background-repeat: repeat-x; background-position: 0 0; will-change: transform; }
.ride-poles { position: absolute; inset: 0; pointer-events: none; background-repeat: repeat-x; }
.ride-poles.ohe { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600' viewBox='0 0 900 600' preserveAspectRatio='none'%3E%3Crect x='600' y='70' width='16' height='530' fill='%23525a5e'/%3E%3Crect x='560' y='92' width='120' height='10' fill='%23525a5e'/%3E%3Cpath d='M0 100 Q450 128 900 100' stroke='%23303639' stroke-width='3' fill='none'/%3E%3Cpath d='M0 140 Q450 160 900 140' stroke='%23303639' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-size: auto 100%; }
.ride-poles.road { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='600' viewBox='0 0 700 600' preserveAspectRatio='none'%3E%3Crect x='300' y='470' width='22' height='60' rx='4' fill='%23f3efe6'/%3E%3Crect x='300' y='470' width='22' height='16' rx='4' fill='%23d9b23a'/%3E%3Crect x='0' y='540' width='700' height='60' fill='%236a6a66'/%3E%3Cpath d='M0 568 H700' stroke='%23f3efe6' stroke-width='6' stroke-dasharray='60 60'/%3E%3C/svg%3E"); background-size: auto 100%; }
/* window frames */
.ride-frame { position: absolute; inset: 0; pointer-events: none; }
.win-rect { position: absolute; inset: 0; border: clamp(18px, 3.4vw, 42px) solid #e8e4da; border-radius: clamp(26px, 5vw, 60px); box-shadow: inset 0 0 0 4px #c9c3b5, inset 0 18px 40px rgba(0, 0, 0, .25), 0 0 0 100vmax #1c2620; }
.win-rect::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .06)); }
.win-rect.road { border-color: #2a2d30; box-shadow: inset 0 0 0 3px #3a3d40, 0 0 0 100vmax #16191b; border-radius: 22px 22px 40px 40px; }
.curtain { position: absolute; left: clamp(10px, 2vw, 30px); top: clamp(10px, 2vw, 30px); bottom: 14%; width: 9%; background: repeating-linear-gradient(90deg, #2f5a8a 0 14px, #284e78 14px 26px); border-radius: 0 0 40px 0; box-shadow: 6px 0 18px rgba(0, 0, 0, .3); }
.win-oval { position: absolute; left: 50%; top: 50%; width: min(70vh, 62vw); height: min(86vh, 76vw); transform: translate(-50%, -50%); border-radius: 46% / 40%; box-shadow: 0 0 0 26px #e9ecef, 0 0 0 30px #c9cdd1, 0 0 0 100vmax #dfe3e6, inset 0 0 50px rgba(0, 0, 0, .25); }
.wing { position: absolute; right: 0; bottom: 8%; width: 60%; max-width: 760px; }
.rail { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; }
.vignette { position: absolute; inset: 0; box-shadow: inset 0 0 160px rgba(0, 0, 0, .55); }
/* tunnel and bridge */
.ride-fx-tunnel { position: absolute; inset: 0; background: #070908; opacity: 0; transition: opacity .35s; }
.ride-fx-tunnel.on { opacity: .96; }
.ride-fx-tunnel .lamps { position: absolute; left: 0; right: 0; top: 30%; height: 6px; background: repeating-linear-gradient(90deg, rgba(255, 210, 120, .9) 0 18px, transparent 18px 260px); animation: lamps .5s linear infinite; filter: blur(1px); }
@keyframes lamps { to { background-position-x: -260px; } }
.ride-fx-bridge { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; pointer-events: none; }
.ride-fx-bridge.on { opacity: 1; }
.ride-fx-bridge .water { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(#6fa8c0, #2f6f8a); }
.ride-fx-bridge .water::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 40px, transparent 40px 160px); background-size: 100% 4px; background-repeat: repeat-y; opacity: .4; }
.ride-fx-bridge .truss { position: absolute; inset: 0 0 30% 0; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='600' viewBox='0 0 400 600' preserveAspectRatio='none'%3E%3Cg stroke='%233c4448' stroke-width='16' fill='none'%3E%3Cpath d='M0 60 H400 M0 560 H400'/%3E%3Cpath d='M0 560 L200 60 L400 560'/%3E%3Cpath d='M200 60 V560'/%3E%3C/g%3E%3C/svg%3E"); background-size: auto 100%; background-repeat: repeat-x; z-index: 2; }
/* station board */
.ride-board { position: absolute; left: 50%; bottom: 18%; transform: translate(-50%, 30px); opacity: 0; transition: .5s; }
.ride-board.on { opacity: 1; transform: translate(-50%, 0); }
.rb-sign { background: #f5d33a; color: #111; border: 4px solid #111; border-radius: 6px; padding: 10px 34px; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); position: relative; min-width: 240px; }
.rb-sign::before, .rb-sign::after { content: ''; position: absolute; top: 100%; width: 8px; height: 60px; background: #333; }
.rb-sign::before { left: 18%; } .rb-sign::after { right: 18%; }
.rb-sign b { display: block; font: 800 clamp(1.2rem, 3vw, 2rem)/1.1 Inter, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.rb-sign span { font: 700 .8rem Inter, sans-serif; letter-spacing: .2em; }
.ride-banner { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(8, 20, 14, .7); opacity: 0; pointer-events: none; transition: .4s; }
.ride-banner.on { opacity: 1; }
.rb-change { text-align: center; max-width: 520px; padding: 20px; display: grid; gap: 6px; }
.rb-change b { font: 600 clamp(1.4rem, 3.4vw, 2.2rem)/1.15 Fraunces, serif; }
/* spotting */
.ride-spots { position: absolute; inset: 0; pointer-events: none; }
.ride-spot { position: absolute; left: 0; top: var(--y); width: clamp(110px, 16vmin, 190px); aspect-ratio: 3 / 2; margin-top: -8vmin; border: 0; background: none; padding: 0; cursor: pointer; pointer-events: auto; border-radius: 50%; outline-offset: 4px; }
.ride-spot svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25)); }
.ride-spot::after { content: ''; position: absolute; inset: -6%; border-radius: 50%; border: 3px dashed rgba(255, 230, 140, .9); animation: spotPulse 1.2s ease-in-out infinite; }
.ride-spot.got::after { border: 3px solid #9fe08a; animation: none; }
@keyframes spotPulse { 50% { transform: scale(1.12); opacity: .4; } }
.spot-tag { position: absolute; left: 50%; top: 16%; transform: translateX(-50%); background: rgba(255, 255, 255, .95); color: #173a2a; border-radius: 16px; padding: 12px 18px; max-width: min(520px, 86vw); display: grid; gap: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); animation: rideIn .35s ease both; z-index: 5; }
.spot-tag b { color: #2f7a4f; }
/* HUD */
.ride-hud { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 18px; z-index: 6; }
.glass-dark { background: rgba(10, 22, 16, .62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .12); }
.rh-left { display: flex; gap: 10px; align-items: center; min-width: 0; }
.rh-left div { display: grid; min-width: 0; }
.rh-left b { font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-left span { font-size: .78rem; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-mode { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #c9a24a; color: #1c2a1f; flex: none; }
.rh-mode .ico { width: 22px; height: 22px; }
.rh-stats { display: flex; gap: 18px; }
.rh-stats div { display: grid; text-align: right; }
.rh-stats span { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.rh-stats b { font: 700 1.02rem Inter, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ride-bottom { position: relative; z-index: 2; background: #0f1c15; padding: 12px clamp(14px, 3vw, 28px) max(14px, env(safe-area-inset-bottom)); display: grid; gap: 10px; border-top: 1px solid rgba(255, 255, 255, .08); }
.ride-ticker { margin: 0; min-height: 2.8em; font-size: clamp(.92rem, 1.6vw, 1.05rem); line-height: 1.4; }
.ride-track { position: relative; height: 34px; margin: 0 10px; }
.rt-line { position: absolute; left: 0; right: 0; top: 16px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .18); }
.rt-fill { height: 100%; width: 0; background: linear-gradient(90deg, #c9a24a, #f0d27a); border-radius: inherit; }
.rt-stop { position: absolute; top: 0; transform: translateX(-50%); display: grid; justify-items: center; }
.rt-stop i { width: 10px; height: 10px; border-radius: 50%; background: #0f1c15; border: 2px solid #f0d27a; margin-top: 13px; }
.rt-stop em { position: absolute; top: -6px; font-style: normal; font-size: .64rem; white-space: nowrap; opacity: .75; }
.rt-stop:nth-child(even) em { top: 26px; }
.rt-dot { position: absolute; top: 4px; transform: translateX(-50%); width: 28px; height: 28px; border-radius: 50%; background: #c9a24a; color: #1c2a1f; display: grid; place-items: center; box-shadow: 0 0 0 4px rgba(201, 162, 74, .3); }
.rt-dot .ico { width: 16px; height: 16px; }
.ride-ctrls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-top: 8px; }
.ride-ctrls .seg.sm button { padding: 6px 12px; }
.ride .seg { background: rgba(255, 255, 255, .1); }
.ride .seg button { color: #fff; }
.ride .seg button[aria-pressed="true"] { background: #fff; color: #173a2a; }
.ride-disclaimer { margin: 0; font-size: .74rem; opacity: .65; }
/* reduced motion */
.ride.static { display: grid; place-items: center; overflow: auto; padding: 20px; background: rgba(10, 22, 16, .86); }
.ride-static { max-width: 680px; width: 100%; padding: 26px 28px; background: #fff; border-radius: 22px; color: var(--ink, #173a2a); max-height: 90vh; overflow: auto; }
.rs-part { border-top: 1px solid var(--line, #e3e6dc); padding-top: 12px; margin-top: 12px; }
.rs-stops { padding-left: 1.2em; }
@media (max-width: 760px) {
  .rh-stats { gap: 10px; } .rh-stats .hide-sm { display: none; }
  .rh-stats b { font-size: .86rem; }
  .ride-hud { flex-direction: column; align-items: stretch; }
  .rh-stats { justify-content: space-between; }
  .rh-stats div { text-align: left; }
  .curtain { display: none; }
  .rt-stop em { display: none; }
}
@media (max-height: 520px) { .ride-ticker { min-height: 0; } .ride-disclaimer { display: none; } }