/* TERRA · Nicoya: styles owned by view3d.js (the 3D view: terrain and the block of time). Square corners. */
.view3d { z-index: 3; overflow: hidden; cursor: grab; }
.view3d:active { cursor: grabbing; }
.v3-stage, .v3-labels { position: absolute; inset: 0; }
.v3-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.v3-canvas:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* the map's own hint and scale bar describe the flat map, so they step aside in 3D */
.mapwrap.is3d .mapHint, .mapwrap.is3d .scale { display: none; }

/* labels drawn from projected 3D points */
.v3-labels { pointer-events: none; overflow: hidden; }
.v3-lbl { position: absolute; left: 0; top: 0; white-space: nowrap; font: 400 10.5px/1 var(--mono); color: rgba(232,226,214,.82); text-shadow: 0 0 3px #161e19, 0 0 2px #161e19; will-change: transform; }
.v3-lbl.town { margin: -5px 0 0 -2px; }
.v3-lbl.town::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 6px; vertical-align: 1px; background: rgba(232,226,214,.9); }
.v3-lbl.mark { margin: -10px 0 0 -10px; width: 20px; height: 20px; display: grid; place-items: center; font-weight: 500; font-size: 11px; color: var(--gold); background: var(--forest-deep); border: 1px solid var(--gold); text-shadow: none; }
.v3-lbl.mark.on { background: var(--gold); color: var(--forest-deep); }
.v3-lbl.year { margin: -12px 0 0 -46px; width: 40px; text-align: right; color: var(--sand-2); }
.v3-lbl.gap { margin: -5px 0 0 6px; color: var(--sand-3); }
.v3-lbl.cut { margin: -5px 0 0 8px; color: var(--gold); font-weight: 500; }
.v3-lbl.axis { margin: -5px 0 0 0; transform-origin: 0 0; color: var(--sand-3); letter-spacing: .1em; text-transform: uppercase; }
.v3-lbl.faint { opacity: .3; }

/* the hint, the readout and the controls */
.v3-hint { position: absolute; top: 10px; right: 12px; max-width: calc(100% - 120px); font: 400 10.5px/1.4 var(--mono); letter-spacing: .06em; color: var(--sand-3); text-align: right; pointer-events: none; }
.v3-read { position: absolute; right: 12px; bottom: 12px; max-width: min(46%, 420px); padding: 8px 10px; background: rgba(22,30,25,.92); border: 1px solid var(--line); font: 400 11.5px/1.45 var(--mono); color: var(--sand); pointer-events: none; }
.v3-read[hidden] { display: none; }
.v3-panel { position: absolute; left: 12px; bottom: 12px; width: min(300px, calc(100% - 24px)); display: flex; flex-direction: column; gap: 8px; padding: 12px; background: rgba(31,42,35,.95); border: 1px solid var(--line); cursor: default; }
.v3-field { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--sand-2); }
.v3-field b { font: 500 12.5px var(--mono); color: var(--gold); margin-left: 4px; }
.v3-field input[type=range] { width: 100%; min-height: 44px; margin: 0; accent-color: var(--gold); cursor: pointer; }
.v3-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--sand-3); }
.v3-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.v3-btns .btn { min-height: 44px; flex: 1 1 auto; font: 500 12px var(--sans); letter-spacing: 0; }
.view3d .btn { border-radius: 0; }
.v3-lens { padding-top: 6px; border-top: 1px solid var(--line-2); }

/* the 3D button on the map: a full 44 px target */
#btn3d { min-height: 44px; min-width: 44px; border-radius: 0; }

/* WebGL turned off, or lost */
.v3-fail { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center; background: var(--forest-deep); cursor: default; }
.v3-fail p { margin: 0; max-width: 34ch; font: 300 20px/1.35 var(--serif); color: var(--sand); }
.v3-fail .btn { min-height: 44px; }

@media (max-width: 560px) {
  .v3-read { left: 12px; right: 12px; top: 56px; bottom: auto; max-width: none; }
  .v3-hint { display: none; }
  .v3-panel { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) { .v3-lbl { will-change: auto; } }

/* integration pass: the controls sit in one slim bar along the bottom so the ground stays in view;
   the explanations open when the bar is hovered or focused */
.v3-panel { left: 12px; right: 12px; width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 4px 10px; background: rgba(31,42,35,.9); }
.v3-field { flex: 1 1 240px; flex-direction: row; align-items: center; gap: 10px; white-space: nowrap; }
.v3-field input[type=range] { flex: 1 1 auto; min-width: 120px; }
.v3-btns { flex: 0 0 auto; }
.v3-btns .btn { flex: 0 0 auto; padding: 0 12px; }
.v3-note { flex: 1 1 100%; order: 9; }
.v3-panel:not(:hover):not(:focus-within) .v3-note { display: none; }
.v3-read { bottom: 70px; }