@font-face { font-family: StoryAnton; src: url(../assets/Anton-Regular.ttf) format('truetype'); font-display: block; }
#map .maplibregl-canvas { outline: none; }
#map .maplibregl-map { position: relative; }
#map .maplibregl-marker { position: absolute; top: 0; left: 0; will-change: transform; }
#map .ship-3d-overlay { height: 170px; left: 0; pointer-events: none; position: absolute; top: 0; transform-origin: 50% 50%; width: 210px; z-index: 20; filter: drop-shadow(0 2px 2px #08253880); }
#map .port-label { background: #263F69; border: 3px solid #FFF4E4; border-radius: 8px; box-shadow: 4px 4px 0 #173354; color: #FFFFFF; font: 400 clamp(20px, 5.7cqw, 68px)/1.1 StoryAnton, sans-serif; letter-spacing: .02em; max-width: 54%; padding: clamp(7px, 1.4cqw, 18px) clamp(10px, 2cqw, 24px); text-align: center; text-transform: uppercase; }
#map .port-label.destination { border-color: #FFCF40; }
#map .port-label.is-active { color: #FFCF40; }
/* Nautical game panels share the destination label palette and outlines. */
#map .voyage-hud { position: absolute; left: 3%; top: 4%; width: 48%; z-index: 24; box-sizing: border-box; background: #263F69; border: 3px solid #FFF4E4; border-radius: 12px; box-shadow: 4px 4px 0 #173354; padding: clamp(10px, 2.2cqw, 24px); color: #FFF4E4; pointer-events: none; font: 400 clamp(18px, 4.5cqw, 54px)/1.15 StoryAnton, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
#map .voyage-overview { position: absolute; right: 3%; top: 4%; width: 42%; height: auto; z-index: 23; pointer-events: none; border: 3px solid #FFF4E4; border-radius: 12px; box-shadow: 3px 3px 0 #173354; box-sizing: border-box; }
#map .voyage-part { color: #FFCF40; font-size: .72em; letter-spacing: .08em; margin-bottom: .3em; padding-bottom: .3em; border-bottom: 2px solid #fff4e440; }
#map .voyage-scores { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
#map .voyage-scores span { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#map .voyage-scores b { color: #FFCF40; font-weight: 400; font-size: 1.35em; }
#map .voyage-track { margin-top: 8px; height: 6px; overflow: hidden; border-radius: 4px; background: #173354; }
#map .voyage-track i { display: block; height: 100%; background: #FFCF40; }
/* Two collectible badges; animation is driven by captured frame state. */
#map .arrival-reward { position: absolute; z-index: 25; pointer-events: none; text-align: center; color: #FFF4E4; width: 46%; max-width: 560px; font: 400 clamp(16px, 3.6cqw, 44px)/1.1 StoryAnton, sans-serif; text-transform: uppercase; transform-origin: center; }
#map .reward-kicker { display: inline-block; position: relative; z-index: 2; padding: .3em .8em; border-radius: 999px; background: #102D46; border: 1px solid #fff4e460; font-size: .55em; letter-spacing: .16em; margin-bottom: .55em; box-shadow: 0 3px 12px #08253870; }
#map .reward-badges { display: flex; justify-content: center; gap: .35em; position: relative; z-index: 2; }
#map .reward-badge { display: flex; flex-direction: column; align-items: center; width: 43%; padding: .35em .15em .5em; border: 2px solid #fff4e4b0; border-radius: 22% 22% 30% 30%; box-shadow: 0 5px 0 #102d46, 0 9px 20px #08253865, inset 0 0 0 4px #ffffff20; }
#map .reward-country { background: linear-gradient(145deg, #FFE69A, #FFCF40 55%, #EDA923); color: #153148; }
#map .reward-city { background: linear-gradient(145deg, #C3FFF0, #61E3CB 55%, #28BFAE); color: #153148; }
#map .reward-icon { font-size: .65em; line-height: 1; opacity: .75; }
#map .reward-badge strong { font: inherit; font-size: 2em; letter-spacing: -.06em; line-height: 1.05; }
#map .reward-type { font-size: .9em; letter-spacing: .06em; }
#map .reward-burst { position: absolute; inset: 15% 0; z-index: 1; }
#map .reward-burst i { position: absolute; width: .12em; height: .3em; border-radius: 2px; background: #FFCF40; }
#map .reward-burst i:nth-child(2n) { background: #61E3CB; }
#map .reward-burst i:nth-child(3n) { background: #FFF4E4; }
#map .story-text { position: absolute; left: 5%; right: 20%; top: 65%; z-index: 12; color: white; font-family: Arial, sans-serif; transform-origin: left center; }
#map .story-primary { font-size: clamp(28px, 4.8cqw, 52px); font-weight: 900; line-height: 1.12; text-shadow: 0 3px 4px #082538, 0 0 16px #082538cc; }
#map .story-supporting { margin-top: 14px; font-size: clamp(18px, 2.5cqw, 28px); font-weight: 700; line-height: 1.2; text-shadow: 0 2px 4px #082538; }
#map .story-text, #map .port-label, #map .voyage-hud { font-family: StoryAnton, sans-serif; font-weight: 400; }
#map *, #map *::before, #map *::after { animation: none !important; transition: none !important; }