html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: system-ui, sans-serif;
}

#map {
  position: absolute;
  inset: 0;
}

#hud {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
  background: rgba(20, 20, 24, 0.82);
  color: #eee;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  max-width: 280px;
  pointer-events: none;
}

#hud-title {
  font-weight: 700;
  letter-spacing: 0.04em;
}

#hud-status {
  margin-top: 2px;
  opacity: 0.85;
}

#pic-info {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 11px;
  font-family: ui-monospace, monospace;
  opacity: 0.9;
  user-select: text;
  pointer-events: auto;
  word-break: break-all;
}

#pic-info a {
  color: #7ab8ff;
}

.pic-badge {
  display: inline-block;
  padding: 0 5px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 10px;
  color: #fff;
  vertical-align: baseline;
}

.pic-badge.is-360 {
  background: #2962ff;
}

.pic-badge.is-flat {
  background: #ff6f00;
}

.flat-popup img {
  width: 100%;
  border-radius: 4px;
  display: block;
}

.flat-popup .flat-meta {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
}

#exit-street {
  position: absolute;
  top: 10px;
  right: 50px;
  z-index: 20;
  background: rgba(20, 20, 24, 0.85);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 14px;
  cursor: pointer;
}

#exit-street:hover {
  background: rgba(50, 50, 60, 0.95);
}

/* Manual 180° flip for mis-oriented sequences (#69) — below the exit button. */
#flip-pano {
  position: absolute;
  top: 56px;
  right: 50px;
  z-index: 20;
  background: rgba(20, 20, 24, 0.85);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}

#flip-pano:hover {
  background: rgba(50, 50, 60, 0.95);
}

/* Pose leveller (#98) — below the flip button; the panel it toggles holds the
   pitch/roll/yaw sliders and the Panoramax write-back. */
#pose-toggle {
  position: absolute;
  top: 96px;
  right: 50px;
  z-index: 20;
  background: rgba(20, 20, 24, 0.85);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}

#pose-toggle:hover {
  background: rgba(50, 50, 60, 0.95);
}

#pose-panel {
  position: absolute;
  top: 136px;
  right: 50px;
  z-index: 20;
  width: 250px;
  /* NO layer promotion (no transform/will-change/animation) — on the affected
     GPU/Chrome any promoted layer randomly skips painting (#98/#104 reports:
     blank panel, blank background, hover shimmer). Plain DOM is the rendering
     path of the standalone street buttons, which never glitched. Fully OPAQUE
     background: alpha-blending a big overlay over the WebGL canvas is the
     other classic driver edge-case, and 0.9 was near-opaque anyway. */
  background: rgb(24, 25, 28);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pose-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pose-row label {
  width: 34px;
}

.pose-row input[type='range'] {
  flex: 1;
  min-width: 0;
}

.pose-val {
  width: 40px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.pose-actions {
  display: flex;
  gap: 8px;
}

.pose-actions button {
  flex: 1;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  cursor: pointer;
}

.pose-actions button:hover {
  background: rgba(255, 255, 255, 0.22);
}

#pose-connect {
  background: #2962ff;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 7px 8px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

#pose-connect:hover {
  background: #3b74ff;
}

#pose-connect:disabled {
  opacity: 0.6;
  cursor: default;
}

#pose-token {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
}

#pose-status {
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.4;
}

#pose-token-help {
  color: #7ab8ff;
  font-size: 12px;
}

#minimap {
  position: absolute;
  bottom: 24px;
  right: 16px;
  z-index: 20;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

#blend-control {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  background: rgba(20, 20, 24, 0.85);
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

#blend-control input[type='range'] {
  width: 200px;
}

/* The MapLibre canvas is transparent where nothing renders; at the very-low
   street camera the lower/upper frustum is uncovered, so without this the page
   white shows as an empty void. Fill the container with the ground tone so the
   void matches the (recolored) ground plane — no raw white (#37). */
body.street-mode #map {
  /* Below the horizon MapLibre renders no ground at eye-level pitch; the
     transparent canvas shows this. A ground tone with a subtle recede gradient
     reads as a floor instead of a raw void (#43). Sky above is drawn by
     map.setSky(). background-color is the flat fallback (and e2e anchor). */
  background-color: #d7d9dc;
  background-image: linear-gradient(
    to bottom,
    rgba(230, 238, 247, 0) 45%,
    rgba(160, 166, 174, 0.55) 100%
  );
}

body.street-mode #map canvas {
  cursor: grab;
}

body.street-mode #map canvas:active {
  cursor: grabbing;
}

.pic-popup img {
  width: 100%;
  border-radius: 4px;
  display: block;
}

.pic-popup .pic-meta {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
}

/* License gate for the sandbox host (#76). */
body.license-gated { overflow: hidden; }
#license-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: radial-gradient(120% 120% at 50% 0%, #23262b 0%, #14161a 70%);
}
.license-card {
  width: min(440px, 100%);
  background: rgba(28, 30, 36, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 26px 26px 22px;
  color: #eef1f5;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  font-family: system-ui, sans-serif;
}
.license-brand { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #7ab8ff; font-weight: 700; }
.license-card h1 { margin: 6px 0 8px; font-size: 22px; }
.license-lead { margin: 0 0 16px; font-size: 13.5px; line-height: 1.5; color: #c3c9d2; }
.license-row { display: flex; gap: 8px; }
#license-key-input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: #0f1114;
  color: #eef1f5;
  font: 13px ui-monospace, monospace;
}
#license-key-input:focus { outline: none; border-color: #2962ff; }
#license-unlock {
  padding: 10px 16px;
  border-radius: 8px;
  border: none;
  background: #2962ff;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
#license-unlock:disabled { opacity: 0.6; cursor: default; }
.license-msg { min-height: 18px; margin: 10px 2px 0; font-size: 12.5px; color: #9aa2ad; }
.license-msg.license-err { color: #ff8a80; }
.license-sep { margin: 18px 0 8px; font-size: 12px; color: #8b93a0; }
#license-buy {
  display: inline-block;
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid rgba(122, 184, 255, 0.5);
  color: #7ab8ff;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
}
#license-buy:hover { background: rgba(122, 184, 255, 0.12); }