/* Mountains, river and two inhabited banks form one uninterrupted scroll. */
.sky { background: #e9e3d0; }
.hills { display: none; }
.boat { width: 290px; }
.boat-inner { height: 226px; animation: bob 4s ease-in-out infinite; }
.boat-inner canvas { display: block; width: 100%; height: 100%; filter: drop-shadow(0 8px 4px #263c3a40); }
.boat::after { bottom: 31px; left: 38px; width: 222px; height: 20px; border-color: #eff0cc80; }
.boat::before { content: ''; position: absolute; bottom: 23px; left: 35px; width: 230px; height: 20px; border-radius: 50%; background: radial-gradient(ellipse, #244f4445, transparent 70%); }
.station { gap: 5px; }
.station .landmark { width: 174px; height: clamp(120px, 21vh, 190px); }
.station-plate { background: #faf2dedc; border-color: #b7a477; }
.station-plate b { font-size: 23px; }
.station-btn { padding: 6px 18px; }
.minor-building { height: clamp(78px, 13vh, 125px); width: 135px; }
.minor-city { gap: 3px; width: 165px; }
.minor-city b { font-size: 24px; text-shadow: 0 2px 4px #fff4da; }
.minor-city small { color: #66583b; background: #eee7ccbb; padding: 2px 7px; border-radius: 3px; }
.minor-city.south-bank::before { content: ''; position: absolute; inset: 55% -12px -8px; border-radius: 50%; background: radial-gradient(ellipse, #f2e9cf99, transparent 70%); z-index: -1; }
.hud-top { background: linear-gradient(#f1e8d3f5, #f1e8d3c9 65%, #f1e8d300); }
.hud-bottom { background: linear-gradient(0deg, #eee2c7, #eee2c7eb 65%, #eee2c700); }
.intro { background: radial-gradient(ellipse at 50% 40%, #f5efdc55, #e1dbc4bb); backdrop-filter: blur(3px); }
.intro::before { display: none; }
.intro-paper { background: #faf2dded; border: 1px solid #ad9360; box-shadow: 0 24px 70px #3a4c3b26, inset 0 0 60px #b49d5920; }
@media (prefers-reduced-motion: reduce) { .boat-inner,.boat::after { animation: none; } }
.voyage-panel { position: fixed; top: 91px; left: 32px; width: 205px; z-index: 45; padding: 19px 20px 17px; color: #354c40; background: linear-gradient(135deg,#faf1d9e8,#f7efd7a1); border: 1px solid #ae956452; border-left: 3px solid #a37b3f; box-shadow: 0 9px 28px #5b5c3a12; pointer-events: none; }
.voyage-eyebrow { margin: 0 0 12px; font-size: 10px; letter-spacing: 2px; color: #93774b; }
.voyage-panel h2 { margin: 0 0 5px; font-family: var(--display); font-size: 36px; letter-spacing: 7px; font-weight: 500; }
#voyage-landmark { margin: 0 0 18px; font-size: 11px; color: #71684e; line-height: 1.8; }
.voyage-meter { height: 3px; width: 100%; background: #b2ad8838; margin-bottom: 10px; }
.voyage-meter i { display: block; height: 100%; background: #8e7243; }
#voyage-count { font-size: 10px; color: #847754; letter-spacing: .5px; }
.landmark.model-landmark { width: 224px; height: clamp(140px,22vh,205px); transform: none; filter: drop-shadow(0 14px 9px #39463528); }
.station.near .landmark.model-landmark { transform: translateY(-6px); }
.model-landmark canvas { width: 100%; height: 100%; object-fit: contain; display: block; }
.minor-building.model-landmark { width: 180px; height: clamp(105px,16vh,155px); }
.minor-city { width: 190px; }
.minor-city.at-stop { color: #984d32; }
.minor-city.at-stop > span:not(.minor-building) { border-color: #9d783d; background: #fff3d4; }
.minor-city.at-stop .minor-building { filter: drop-shadow(0 12px 8px #7a5b3d42); }
.station-plate { border-radius: 2px; box-shadow: 0 7px 16px #5f54341a; background: linear-gradient(135deg,#fff6df,#e8ddbe); }
.station-btn { background: #f6edd7e8; }
.next-btn { border: 1px solid #a4b69b; background: linear-gradient(135deg,#496e57,#28584e); box-shadow: 0 6px 20px #2f4f3d33,inset 0 1px #ffffff38; }
.next-btn:disabled { opacity: .7; cursor: progress; }
.hud-top::after { content: ''; position: absolute; bottom: 4px; left: 30px; right: 30px; height: 1px; background: linear-gradient(90deg,#ad925a66,transparent 30%,transparent 70%,#ad925a66); }
.hint { color: #6c715b; }