/* World navigation HUD (world-nav-hud.js) on the shared Infin8 UI kit tokens.
 * Top-centre column inside the HUD's safe-area padding: compass strip, the
 * marker under the view direction, the current objective, the first-run coach
 * and then the freestyle callout. Nothing enters the centre of the view. */
.sled-world-hud .world-nav-top { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; pointer-events: none; }
.sled-world-hud .world-nav-top > .freestyle-readout { margin-top: 2px; }

/* Compass strip: a glass band, cardinal letters, POI icons and a centre needle. */
.world-nav { position: relative; width: clamp(220px, 34vw, 420px); height: 34px; overflow: hidden; border: 1px solid rgba(127, 240, 255, .3); border-radius: var(--i8-r-compact, 8px);
  background: linear-gradient(90deg, rgba(9, 12, 24, 0), var(--i8-glass-bg-hud, rgba(9, 12, 24, .62)) 18%, var(--i8-glass-bg-hud, rgba(9, 12, 24, .62)) 82%, rgba(9, 12, 24, 0));
  -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  font: 800 12px/1 var(--i8-font, system-ui, sans-serif); text-shadow: 0 1px 2px #000; }
.world-nav__strip { position: absolute; inset: 0; }
.world-nav__tick, .world-nav__marker { position: absolute; top: 0; display: grid; justify-items: center; transform: translateX(-50%); white-space: nowrap; }
.world-nav__tick { top: 3px; color: var(--i8-muted, #9aa6c4); font-size: 10px; letter-spacing: .06em; }
.world-nav__tick[data-major="true"] { color: var(--i8-text, #eef3ff); font-size: 12px; }
.world-nav__marker { top: 14px; gap: 1px; color: var(--i8-cyan, #4de8ff); }
.world-nav__marker i { font-style: normal; font-size: 13px; line-height: 1; }
.world-nav__marker small { font-size: 9px; font-weight: 800; color: var(--i8-text, #eef3ff); }
.world-nav__marker[data-kind="peer"] { color: var(--i8-magenta, #e64cff); }
.world-nav__marker[data-kind="peer"] i { font-size: 9px; }
.world-nav__marker[data-kind="station"], .world-nav__marker[data-kind="exhibit"], .world-nav__marker[data-kind="fishing"] { color: var(--i8-text-soft, #c8d2ea); }
.world-nav__marker[data-objective="true"] { top: 10px; z-index: 2; color: var(--i8-magenta, #e64cff); }
.world-nav__marker[data-objective="true"] i { font-size: 15px; filter: drop-shadow(0 0 6px rgba(230, 76, 255, .85)); }
.world-nav__marker[data-objective="true"][data-clamped="true"][data-side="left"] { transform: none; }
.world-nav__marker[data-objective="true"][data-clamped="true"][data-side="right"] { transform: translateX(-100%); }
.world-nav__needle { position: absolute; left: 50%; bottom: 0; width: 0; height: 0; margin-left: -5px; border: 5px solid transparent; border-bottom-color: var(--i8-cyan, #4de8ff); }
.world-nav__focus { margin: 0; max-width: clamp(220px, 34vw, 420px); overflow: hidden; color: var(--i8-text-soft, #c8d2ea); font: 700 11px/1.2 var(--i8-font, system-ui, sans-serif); letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 3px #000; }

/* Objective line: one fact per segment, the distance last and bright. */
.world-nav__objective { display: inline-flex; align-items: baseline; gap: 6px; max-width: min(92vw, 460px); margin: 0; padding: 4px 10px; font-size: var(--i8-fs-xs, 12px); }
.world-nav__objective-icon { color: var(--i8-magenta, #e64cff); }
.world-nav__objective[data-source="waypoint"] .world-nav__objective-icon, .world-nav__objective[data-source="tutorial"] .world-nav__objective-icon { color: var(--i8-cyan, #4de8ff); }
.world-nav__objective-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.world-nav__objective-distance { flex: none; color: var(--i8-cyan, #4de8ff); }
.world-nav__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* First-run coach: a compact glass card; Skip is a real button (pad users skip from the menu). */
.world-nav-coach { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; width: min(440px, 92vw); padding: 8px 12px; pointer-events: auto; text-align: left;
  border-color: var(--i8-cyan, #4de8ff); box-shadow: 0 0 0 1px rgba(139, 92, 246, .35), 0 0 18px rgba(77, 232, 255, .25); }
.world-nav-coach__step { grid-column: 1; color: var(--i8-muted, #9aa6c4); font-size: 10px; letter-spacing: var(--i8-track, .08em); }
.world-nav-coach__title { grid-column: 1; color: var(--i8-text, #eef3ff); font-size: var(--i8-fs-sm, 14px); }
.world-nav-coach__body { grid-column: 1 / -1; margin: 2px 0 0; color: var(--i8-text-soft, #c8d2ea); font-size: 13px; line-height: 1.35; }
.world-nav-coach__skip { grid-column: 2; grid-row: 1 / span 2; align-self: center; min-height: 36px; }
@media (prefers-reduced-motion: no-preference) {
  html[data-world-nav-motion="full"] .world-nav-coach:not([hidden]) { animation: world-nav-in .28s ease-out; }
}
@keyframes world-nav-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Phones: a slimmer strip; on touch the coach Skip meets the 44 px target. */
@media (max-width: 560px), (max-height: 500px) {
  .world-nav { width: min(300px, 78vw); height: 30px; }
  .world-nav__marker { top: 12px; }
  .world-nav__focus { display: none; }
  .world-nav__objective { max-width: 86vw; padding: 3px 8px; }
  .world-nav-coach { width: min(400px, 94vw); padding: 6px 10px; }
  .world-nav-coach__body { font-size: 12.5px; }
}
html[data-input-mode="touch"] .world-nav-coach__skip { min-height: var(--i8-touch, 44px); }
@media (max-height: 500px) { html[data-input-mode="touch"] .world-nav-coach__body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } }

/* 10-foot console layout: larger type inside the 5% safe margins. */
html[data-console-layout="true"] .world-nav { width: clamp(320px, 30vw, 560px); height: 46px; font-size: 16px; }
html[data-console-layout="true"] .world-nav__tick { font-size: 14px; }
html[data-console-layout="true"] .world-nav__tick[data-major="true"] { font-size: 17px; }
html[data-console-layout="true"] .world-nav__marker { top: 19px; }
html[data-console-layout="true"] .world-nav__marker i { font-size: 18px; }
html[data-console-layout="true"] .world-nav__marker small { font-size: 13px; }
html[data-console-layout="true"] .world-nav__focus { font-size: 16px; max-width: clamp(320px, 30vw, 560px); }
html[data-console-layout="true"] .world-nav__objective { font-size: 20px; max-width: min(60vw, 720px); }
html[data-console-layout="true"] .world-nav-coach { width: min(640px, 60vw); padding: 12px 18px; }
html[data-console-layout="true"] .world-nav-coach__step { font-size: 15px; }
html[data-console-layout="true"] .world-nav-coach__title { font-size: 22px; }
html[data-console-layout="true"] .world-nav-coach__body { font-size: 20px; }
html[data-console-layout="true"] .world-nav-coach__skip { min-height: var(--console-target, 56px); font-size: 18px; }