html, body { margin:0; height:100%; }
body { background: radial-gradient(ellipse at center, #4a2f18 0%, #2a180b 70%, #1a0f06 100%); overflow:hidden; }
#map { display:block; width:100vw; height:100vh; }
.t-title { font-family: "Cinzel Decorative", Georgia, serif; font-weight:700; }
.t-med { font-family: "MedievalSharp", Georgia, serif; }
.t-body { font-family: "IM Fell English", Georgia, serif; }
.station { cursor:pointer; }
.station:hover .ribbon-main { fill:#fff3d1; }
/* scenery motion only */
.cloud { animation: drift linear infinite; }
@keyframes drift { from { transform: translateX(-300px); } to { transform: translateX(1900px); } }
.wave { animation: shimmer 4s ease-in-out infinite; }
@keyframes shimmer { 0%,100% { opacity:.25; } 50% { opacity:.8; } }
.riverglint { animation: flow 3s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -40; } }
.puff { transform-box: fill-box; transform-origin:center; animation: puff 4s ease-out infinite; opacity:0; }
@keyframes puff { 0% { transform: translate(0,0) scale(.5); opacity:.7; } 100% { transform: translate(10px,-46px) scale(1.7); opacity:0; } }
.flag { transform-box: fill-box; transform-origin: left center; animation: wave 2.4s ease-in-out infinite; }
@keyframes wave { 0%,100% { transform: skewY(0deg) scaleX(1); } 50% { transform: skewY(-6deg) scaleX(.9); } }
.bob { animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translate(0,0); } 50% { transform: translate(0,-2px); } }
.ship { animation: bob 3.2s ease-in-out infinite; }
.glow { animation: flicker 1.3s ease-in-out infinite; }
@keyframes flicker { 0%,100% { opacity:1; } 45% { opacity:.75; } 60% { opacity:.92; } }
/* bot status visuals, driven only by real data */
.swing { transform-box: fill-box; transform-origin: 20% 90%; animation: swing .9s ease-in-out infinite; }
@keyframes swing { 0%,100% { transform: rotate(-50deg); } 50% { transform: rotate(25deg); } }
.twinkle { transform-box: fill-box; transform-origin:center; animation: twinkle 1.8s ease-in-out infinite; }
@keyframes twinkle { 0%,100% { opacity:0; transform: scale(.4); } 50% { opacity:1; transform: scale(1); } }
.float { animation: float 2.2s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translate(0,0); } 50% { transform: translate(0,-4px); } }
.dim { opacity:.72; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; } .puff { opacity:.4; } }
#tip { position:fixed; z-index:10; width:330px; padding:18px 20px 16px; color:#2b1a0e; pointer-events:none;
  font-family:"IM Fell English", Georgia, serif; font-size:15px; line-height:1.35;
  background: radial-gradient(ellipse at center, #fbf0d2 0%, #efdcae 75%, #dcc28a 100%);
  border-left:1px solid #b08a4e; border-right:1px solid #b08a4e; box-shadow:0 8px 22px #000a; }
#tip::before, #tip::after { content:""; position:absolute; left:-10px; right:-10px; height:14px; border-radius:7px;
  background: linear-gradient(#c79a55, #8a5a26 60%, #6b4219); box-shadow:0 2px 3px #0006; }
#tip::before { top:-8px; } #tip::after { bottom:-8px; }
#tip h3 { margin:0 0 2px; font-family:"MedievalSharp", Georgia, serif; font-size:21px; font-weight:normal; }
#tip .place { font-style:italic; color:#6b4a26; margin-bottom:8px; }
#tip .row { margin:3px 0; } #tip .k { color:#7a4a1a; font-weight:bold; }
#tip .pill { display:inline-block; padding:0 9px; border-radius:10px; color:#fff; font-size:14px; }
#tip .bar { height:8px; background:#5a3a1e44; border-radius:4px; margin:4px 0 2px; overflow:hidden; }
#tip .bar i { display:block; height:100%; background:#c99a17; }