/* The first-person modes (Walk and Ride-along): compass, area name, prompt, thumbstick, buttons, the water and sleep veils, and the
   Walk tab. Tokens only, like the rest of the viewer; everything stops for prefers-reduced-motion. */

/* ---- the layers ---- */
.fpv, .fpv-veil { position: absolute; inset: 0; pointer-events: none; font-family: var(--font); }
.fpv[hidden] { display: none; }
.fpv > * { pointer-events: auto; }
.fpv-veil { z-index: 5; opacity: 0; transition: opacity .4s var(--ease-soft); }
.fpv-veil.water { background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--w-water-deep) 38%, transparent) 0%, color-mix(in srgb, var(--w-water-deep) 78%, transparent) 100%); }
.fpv-veil.sleep { background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--w-night-sky) 30%, transparent) 25%, color-mix(in srgb, var(--w-night-sky) 70%, black) 100%); }

/* the orbit view's own furniture steps aside */
.t3d.fpv-on .t3d-toolbar, .t3d.fpv-on .t3d-tip, .t3d.fpv-on .t3d-following { display: none; }
.t3d.fpv-on .t3d-canvas { cursor: crosshair; }
.t3d.fpv-on .t3d-keys.orbit { display: none; }
.t3d-keys.walk { display: none; }
.t3d.fpv-on .t3d-keys.walk { display: grid; }
.t3d.fpv-on .t3d-keyrow { grid-template-columns: 150px 1fr; }

/* ---- compass, who, area name ---- */
.fpv-compass { position: absolute; left: var(--s-3); top: var(--fpv-top, 92px); width: 64px; height: 64px; border-radius: 50%; pointer-events: none;
  background: color-mix(in srgb, var(--c-surface) 88%, transparent); border: 2px solid var(--c-line); box-shadow: var(--sh-1); }
.fpv-ring { position: absolute; inset: 0; transition: transform .12s linear; }
.fpv-card { position: absolute; left: 50%; top: 50%; width: 12px; margin: -9px 0 0 -6px; text-align: center; font-size: 11px; font-weight: var(--w-heavy); line-height: 18px; color: var(--c-ink-2); }
.fpv-card.c-n { color: var(--c-coral); font-size: var(--t-xs); }
.fpv-needle { position: absolute; left: 50%; top: -9px; margin-left: -6px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 10px solid var(--c-sun); }
.fpv-bearing { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--t-sm); font-weight: var(--w-heavy); color: var(--c-ink); }
.fpv-ring .fpv-card { color: var(--c-ink-2); }
.fpv-bearing { z-index: 1; }
.fpv-who { position: absolute; left: 50%; top: var(--fpv-top, 92px); transform: translateX(-50%); padding: var(--s-1) var(--s-4); font-size: var(--t-sm); font-weight: var(--w-heavy); color: var(--c-ink); pointer-events: none;
  background: color-mix(in srgb, var(--c-surface) 92%, transparent); border: 2px solid var(--c-line); border-radius: var(--r-pill); box-shadow: var(--sh-1); white-space: nowrap; }
.fpv.riding .fpv-who { border-color: var(--c-sun); }
.fpv-area { position: absolute; left: 50%; top: calc(var(--fpv-top, 92px) + 42px); transform: translateX(-50%) translateY(-6px); padding: var(--s-2) var(--s-5); font-size: var(--t-lg); font-weight: var(--w-heavy); color: var(--c-ink);
  background: color-mix(in srgb, var(--c-surface) 94%, transparent); border: 2px solid var(--c-sun); border-radius: var(--r-pill); box-shadow: var(--sh-2); opacity: 0; pointer-events: none; transition: opacity .5s var(--ease-soft), transform .5s var(--ease-spring); white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis; }
.fpv-area.on { opacity: 1; transform: translateX(-50%); }

/* ---- the bottom stack: the words of the turtle you ride with, what is near, a hint, the buttons ---- */
.fpv-caption, .fpv-prompt, .fpv-help, .fpv-bar { position: absolute; left: 50%; transform: translateX(-50%); }
.fpv-bar { bottom: var(--s-3); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); width: max-content; max-width: calc(100% - 24px); }
.fpv-rides { display: contents; }
.fpv-btn { min-height: 44px; }
.fpv-btn .ico { width: 20px; height: 20px; }
.fpv-btn.on { background: var(--c-sun); color: var(--c-on-accent); border-color: var(--c-sun); }
.fpv-btn[hidden] { display: none; }
.fpv-help { bottom: calc(var(--s-3) + 100px); max-width: min(92%, 640px); padding: var(--s-1) var(--s-4); font-size: var(--t-xs); font-weight: var(--w-bold); color: var(--c-ink-2); text-align: center; pointer-events: none;
  background: color-mix(in srgb, var(--c-surface) 86%, transparent); border-radius: var(--r-pill); box-shadow: var(--sh-1); }
.fpv-prompt { bottom: calc(var(--s-3) + 54px); min-height: 48px; padding: var(--s-2) var(--s-6); font-size: var(--t-md); background: var(--c-sun); color: var(--c-on-accent); border-color: var(--c-sun); box-shadow: var(--sh-2); animation: t3dpop .3s var(--ease-spring); }
.fpv-prompt[hidden] { display: none; }
.fpv-caption { bottom: calc(var(--s-3) + 118px); max-width: min(88%, 520px); padding: var(--s-3) var(--s-5); font-size: var(--t-md); font-weight: var(--w-bold); font-style: italic; text-align: center; pointer-events: none;
  color: var(--c-ink); background: var(--c-surface); border: 2px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.fpv-caption[hidden] { display: none; }
/* where there is room the bottom stack sits in the free strip between the minimap and the details panel (both measured, see
   scene3d.js), each layer above the buttons however many rows they wrap to */
.t3d:not(.narrow) .fpv-bar { left: var(--fpv-l, 12px); right: var(--fpv-r, 12px); bottom: var(--fpv-b, 12px); transform: none; width: auto; max-width: none; }
.t3d.fpv-cramped .t3d-mini { display: none; }
.t3d:not(.narrow) .fpv-prompt, .t3d:not(.narrow) .fpv-help, .t3d:not(.narrow) .fpv-caption { left: calc((100% + var(--fpv-l, 12px) - var(--fpv-r, 12px)) / 2); max-width: calc(100% - var(--fpv-l, 12px) - var(--fpv-r, 12px) - 16px); }
.t3d:not(.narrow) .fpv-prompt { bottom: calc(var(--fpv-b, 12px) + var(--fpv-bar-h, 44px) + 10px); }
.t3d:not(.narrow) .fpv-help { bottom: calc(var(--fpv-b, 12px) + var(--fpv-bar-h, 44px) + 66px); }
.t3d:not(.narrow) .fpv-caption { bottom: calc(var(--fpv-b, 12px) + var(--fpv-bar-h, 44px) + 104px); }
.t3d.has-panel:not(.narrow) .fpv-who, .t3d.has-panel:not(.narrow) .fpv-area { left: calc((100% - var(--fpv-r, 12px)) / 2); }
/* the pinned layers sit above the turtles' markers and bubbles */
.fpv { z-index: 6; }

/* ---- the thumbstick (touch) ---- */
.fpv-stick { position: absolute; left: max(var(--s-4), env(safe-area-inset-left)); bottom: max(var(--s-4), env(safe-area-inset-bottom)); z-index: 6; width: 136px; height: 136px; border-radius: 50%; touch-action: none; pointer-events: auto;
  background: color-mix(in srgb, var(--c-surface) 62%, transparent); border: 3px solid color-mix(in srgb, var(--c-sun) 75%, transparent); box-shadow: var(--sh-1); }
.fpv-stick[hidden], .t3d:not(.fpv-on) .fpv-stick { display: none; }
.fpv-stick-knob { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: var(--c-sun); box-shadow: var(--sh-2); pointer-events: none; }
.t3d.fpv-touch .t3d-mini { bottom: 168px; }

/* ---- phones and tablets ---- */
.t3d.narrow .fpv-bar { bottom: var(--s-2); gap: var(--s-1); }
.t3d.narrow .fpv-btn { padding: var(--s-1) var(--s-3); font-size: var(--t-xs); }
.t3d.narrow.fpv-touch .fpv-bar { left: auto; right: var(--s-2); transform: none; width: min(60%, 320px); justify-content: flex-end; }
.t3d.narrow.fpv-touch .fpv-prompt { left: auto; right: var(--s-2); transform: none; bottom: calc(var(--s-2) + 100px); }
.t3d.narrow .fpv-help { bottom: auto; top: calc(var(--fpv-top, 92px) + 74px); max-width: 94%; }
.t3d.narrow .fpv-caption { bottom: calc(var(--s-2) + 150px); }
.t3d.narrow.has-panel .fpv-bar, .t3d.narrow.has-panel .fpv-prompt, .t3d.narrow.has-panel .fpv-help, .t3d.narrow.has-panel .fpv-caption, .t3d.narrow.has-panel .fpv-stick { display: none; }
.t3d.narrow .fpv-card { font-size: 10px; }
@media (max-width: 700px), (max-height: 560px) {
  .view-stage.is-3d.walk-on { position: fixed; inset: 0; z-index: 60; height: auto; min-height: 0; border-radius: 0; }       /* walking fills the screen where it is small */
}
@media (max-height: 560px) { .t3d.fpv-on .t3d-mini { display: none; } }        /* a landscape phone: the compass is enough, the map would sit on it */
@media (min-width: 701px) and (max-width: 1000px) { .fpv-stick { width: 156px; height: 156px; } .t3d.fpv-touch .t3d-mini { bottom: 188px; } }

/* ---- the Walk tab and the buttons in the details panel ---- */
.t3d-visit { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.t3d-visit[hidden] { display: none; }
.t3d-btn.visit { min-height: 40px; background: var(--c-surface-2); }
.t3d-btn.visit:hover { background: var(--c-sun); color: var(--c-on-accent); }

/* ---- a memorial's name, and a close pair of markers made compact ---- */
.t3d-memorial { font-size: 11px; font-style: italic; font-weight: var(--w-normal); padding: 2px var(--s-3); color: var(--c-ink-2); background: color-mix(in srgb, var(--c-surface-2) 88%, transparent); border-style: dashed; box-shadow: none; }
.t3d-marker.compact .t3d-marker-act { display: none; }
.t3d-marker.compact .t3d-marker-card { padding-top: 0; padding-bottom: 0; }
.t3d-marker.compact .t3d-marker-ico { width: 26px; height: 26px; }
.t3d-marker.compact .t3d-marker-ico .ico { width: 16px; height: 16px; }
.scene .memorial { cursor: pointer; }
.scene .memorial .candle { animation: lamp 6s ease-in-out infinite; }
.scene .memorial-label { font-size: 17px; font-weight: var(--w-normal); font-style: italic; }
.scene .memorial:hover, .scene .memorial:focus-visible { filter: drop-shadow(0 0 6px var(--c-sun)); }

@media (prefers-reduced-motion: reduce) {
  .fpv, .fpv *, .fpv-veil, .fpv-stick, .fpv-stick * { transition: none !important; animation: none !important; }
  .scene .memorial .candle { animation: none; }
}