/* Voyages (UI/VoyageHUD.js): the chooser at a ship's gangway, and the World
   Map that takes the whole screen while she sails. */
.voyage-panel { width: 640px; }
.voyage-intro { margin: 0 0 16px; color: #e6dbb9; font-family: Georgia, serif; font-style: italic; }
.voyage-ways { display: grid; gap: 14px; }
.voyage-way { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: center; padding: 12px; border: 1px solid #bba97a59; background: linear-gradient(115deg, #2c3a2b99, #1f2b2166); }
.voyage-way canvas { width: 220px; height: 150px; border: 1px solid #d8c69466; box-shadow: inset 0 0 0 3px #10201833, 0 4px 18px #08120c66; }
.voyage-way p { margin: 0 0 4px; font-size: 9px; letter-spacing: 3px; color: #d9b26e; }
.voyage-way h3 { margin: 0 0 6px; font-family: Greenvale Serif, Georgia, serif; font-size: 25px; font-weight: 400; color: #f4e8c6; }
.voyage-way span { display: block; font-size: 12px; color: #cfc4a4; font-family: Georgia, serif; }
.voyage-way .primary-button { margin-top: 12px; padding: 11px 15px; }
.voyage-ashore { display: block; margin: 16px auto 22px; padding: 8px 18px; border: 1px solid #bba97a59; background: transparent; color: #d8cba6; font-family: Georgia, serif; cursor: pointer; }
.voyage-ashore:hover, .voyage-ashore:focus-visible { border-color: #e2cf98; color: #f4e8c6; }
@media (max-width: 720px) { .voyage-way { grid-template-columns: 1fr; } .voyage-way canvas { width: 100%; height: auto; } }

.voyage-scene { position: absolute; inset: 0; z-index: 60; opacity: 0; background: #2f5a70; pointer-events: auto; overflow: hidden; }
.voyage-scene[hidden] { display: none; }
.voyage-chart { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.voyage-title { position: absolute; top: 34px; left: 50%; transform: translateX(-50%); min-width: 380px; padding: 14px 34px 16px; text-align: center; pointer-events: none;
  background: linear-gradient(180deg, #1d2a20ee, #17221bdd); border: 1px solid #cdb98380; box-shadow: 0 10px 40px #06100b88, inset 0 0 0 4px #f0dfa612; }
.voyage-title::before, .voyage-title::after { content: '◆'; position: absolute; top: 50%; transform: translateY(-50%); color: #b8261d; font-size: 10px; }
.voyage-title::before { left: 13px; } .voyage-title::after { right: 13px; }
.voyage-kicker { margin: 0 0 7px; font-size: 9px; letter-spacing: 4px; color: #d9b26e; }
.voyage-title h2 { margin: 0 0 6px; font-family: Greenvale Serif, Georgia, serif; font-size: 34px; font-weight: 400; letter-spacing: 1.5px; color: #f6ecd1; text-shadow: 0 2px 10px #0008; }
.voyage-subtitle { font-family: Georgia, serif; font-style: italic; font-size: 13px; color: #e2dcc4; }
.voyage-course { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); width: min(620px, calc(100vw - 80px)); display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center;
  padding: 11px 20px; background: #17221bdd; border: 1px solid #cdb98366; pointer-events: none; font-family: Georgia, serif; font-size: 13px; color: #f0e4c2; }
.voyage-to { color: #f6d68c; }
.voyage-track { position: relative; height: 18px; --sailed: 0%; }
.voyage-track i { position: absolute; left: 0; right: 0; top: 8px; height: 0; border-top: 2px dashed #b8261d88; }
.voyage-track i::after { content: ''; position: absolute; left: 0; top: -2px; width: var(--sailed); height: 0; border-top: 3px dashed #d83a2c; }
.voyage-track b { position: absolute; top: -5px; left: var(--sailed); width: 26px; height: 26px; transform: translateX(-50%); filter: drop-shadow(0 2px 3px #0009); }
.voyage-track svg { width: 100%; height: 100%; }
@media (max-width: 720px) { .voyage-title { min-width: 0; width: calc(100vw - 60px); padding: 12px 18px; } .voyage-title h2 { font-size: 26px; } }
@media (prefers-reduced-motion: reduce) { .voyage-scene { transition: none; } }