/* Stage 21 — Lake Clementine 3D flyover using the previously proven visual shell. */
.terrain-3d-card{
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(29,55,45,.1);
  border-radius:18px;
  background:var(--card,#fff);
  box-shadow:0 10px 28px rgba(26,39,32,.06);
}
.terrain-3d-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px 11px;
}
.terrain-3d-card__head .eyebrow{margin:0 0 3px}
.terrain-3d-card__head h3{margin:0;font-size:17px;line-height:1.2}
.terrain-3d-shell{
  position:relative;
  width:100%;
  min-width:0;
  height:360px;
  overflow:hidden;
  background:linear-gradient(155deg,#dce8df,#b9cdbc);
  isolation:isolate;
  contain:layout paint;
}
.terrain-3d-map,
.terrain-3d-fallback{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-width:0;
}
.terrain-3d-map{z-index:2;opacity:0;pointer-events:none;transition:opacity .18s ease}
.terrain-3d-fallback{
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:4px;
  padding:18px 18px 54px;
  color:#264837;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.58)),linear-gradient(145deg,#d7e5d7 0%,#b7cdbd 48%,#8eaf96 100%);
}
.terrain-3d-fallback strong{font-size:17px}
.terrain-3d-fallback span{font-size:12px;line-height:1.4;max-width:38ch}
.terrain-3d-shell.is-live .terrain-3d-map{opacity:1;pointer-events:auto}
.terrain-3d-shell.is-live .terrain-3d-fallback{opacity:0;pointer-events:none}
.terrain-3d-shell[data-3d-state="loading"]::after{
  content:"Loading aerial terrain…";
  position:absolute;
  z-index:5;
  right:10px;
  bottom:52px;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.9);
  color:#486055;
  font-size:10px;
  font-weight:700;
}
.terrain-3d-shell.is-live::after,
.terrain-3d-shell[data-3d-state="offline"]::after,
.terrain-3d-shell[data-3d-state="failed"]::after{content:none}
.terrain-3d-shell .maplibregl-map,
.terrain-3d-shell .maplibregl-canvas-container,
.terrain-3d-shell .maplibregl-canvas{max-width:100%;min-width:0}
.terrain-3d-shell .maplibregl-map{width:100%;height:100%;overflow:hidden;font:inherit}
.terrain-3d-shell .maplibregl-canvas{outline:none;touch-action:none}

/* Compact field-compass treatment: a larger high-contrast dial, bold cardinal labels,
   and a single red north pointer while MapLibre retains live bearing + tap-to-north. */
.terrain-3d-shell .maplibregl-ctrl-top-right{top:8px;right:8px}
.terrain-3d-shell .maplibregl-ctrl-top-right .maplibregl-ctrl-group{
  overflow:visible;
  border:0;
  border-radius:999px;
  background:transparent;
  box-shadow:none;
}
.terrain-3d-shell .maplibregl-ctrl-compass{
  position:relative;
  width:44px!important;
  height:44px!important;
  min-width:44px;
  min-height:44px;
  overflow:visible;
  border:1.5px solid rgba(29,55,45,.34)!important;
  border-radius:999px!important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='20.25' fill='%23f8f5ec' stroke='%23255d3a' stroke-opacity='.30' stroke-width='1.2'/%3E%3Cg fill='%23212f29' font-family='Arial,sans-serif' text-anchor='middle'%3E%3Ctext x='22' y='8.9' font-size='7.6' font-weight='900'%3EN%3C/text%3E%3Ctext x='35.5' y='24.4' font-size='6.3' font-weight='800'%3EE%3C/text%3E%3Ctext x='22' y='39.1' font-size='6.3' font-weight='800'%3ES%3C/text%3E%3Ctext x='8.6' y='24.4' font-size='6.3' font-weight='800'%3EW%3C/text%3E%3C/g%3E%3C/svg%3E") center/44px 44px no-repeat!important;
  box-shadow:0 4px 14px rgba(20,38,31,.16)!important;
  backdrop-filter:blur(8px);
}
.terrain-3d-shell .maplibregl-ctrl-compass .maplibregl-ctrl-icon{
  position:absolute;
  inset:10px;
  width:24px;
  height:24px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 L17 13 L12 11.2 L7 13 Z' fill='%23c94f45'/%3E%3Ccircle cx='12' cy='12.4' r='1.45' fill='%23212f29'/%3E%3C/svg%3E")!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:24px 24px!important;
}
.terrain-3d-shell .maplibregl-ctrl-compass .maplibregl-ctrl-compass-arrow{
  transform-origin:50% 50%;
}
.terrain-3d-shell .maplibregl-ctrl-attrib{
  max-width:calc(100% - 8px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:2px 5px;
  border-radius:7px 0 0 0;
  background:rgba(255,255,255,.82);
  color:#486055;
  font-size:9px;
  line-height:1.25;
}
.terrain-3d-shell .maplibregl-ctrl-attrib a{color:#315a49}
.terrain-flyover-hud{
  position:absolute;
  z-index:4;
  left:10px;
  right:10px;
  bottom:10px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.5);
  border-radius:13px;
  background:rgba(18,33,27,.72);
  box-shadow:0 7px 22px rgba(0,0,0,.18);
  backdrop-filter:blur(10px);
  color:#fff;
  pointer-events:none;
}
.terrain-flyover-progress{height:4px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.25)}
.terrain-flyover-progress span{display:block;width:0;height:100%;border-radius:inherit;background:#c97b4f;transition:width .08s linear}
.terrain-flyover-readout{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;font-size:10px;line-height:1.2}
.terrain-flyover-readout strong{font-size:11px}
.terrain-flyover-readout span{color:rgba(255,255,255,.84);text-align:right}
.terrain-flyover-controls{display:grid;grid-template-columns:minmax(0,1fr) 52px 104px;gap:8px;padding:12px 14px 14px}
.terrain-flyover-controls button{min-width:0;margin:0}
.terrain-flyover-controls button:disabled{opacity:.42;cursor:default}
.terrain-flyover-play{width:100%}
.terrain-flyover-recenter{
  display:grid;
  place-items:center;
  width:52px;
  padding:0;
  color:#255d3a;
}
.terrain-flyover-recenter svg{
  width:27px;
  height:27px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.terrain-flyover-recenter .terrain-flyover-recenter-dot{
  fill:currentColor;
  stroke:none;
}
.terrain-flyover-replay{padding-inline:14px}
@media(max-width:430px){
  .terrain-3d-card{border-radius:16px}
  .terrain-3d-shell{height:330px}
  .terrain-3d-shell .maplibregl-ctrl-compass{width:42px!important;height:42px!important;min-width:42px;min-height:42px;background-size:42px 42px!important}
  .terrain-flyover-controls{grid-template-columns:minmax(0,1fr) 50px 104px;padding-inline:12px}
  .terrain-flyover-recenter{width:50px}
  .terrain-flyover-readout{font-size:9.5px}
}
@media(prefers-reduced-motion:reduce){
  .terrain-3d-map{transition:none}
  .terrain-flyover-progress span{transition:none}
}