#exploreCanvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#exploreCanvas:active { cursor: grabbing; }

.hint { color: #9db3aa; font-size: 12.5px; line-height: 1.5; margin: 0 0 12px; }

.backbtn {
  position: absolute; top: 96px; left: 16px; z-index: 6;
  padding: 9px 14px; border-radius: 9px; cursor: pointer;
  background: rgba(11,20,17,.9); border: 1px solid rgba(127,227,196,.5);
  color: #d9f5ea; font-size: 14px; font-weight: 700; backdrop-filter: blur(8px);
}
.backbtn:hover { background: rgba(18,40,33,.95); }

.map-labels .lab.zone { border-color: rgba(127,227,196,.75); cursor: pointer; }

/* clear on/off layer toggles */
.layers-title { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #8fa79c; margin: 4px 0 6px; font-weight: 800; }
.layers { display: grid; gap: 6px; }
.layer { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.05); color: #dcefe7; font: inherit; font-size: 13px; font-weight: 600; }
.layer .sw { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.layer .ltxt { flex: 1; } .layer .ltxt b { color: #fff; font-weight: 800; }
.layer .chk { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid rgba(255,255,255,.4); flex: none; position: relative; }
.layer[aria-pressed="true"] .chk { background: #2fae86; border-color: #2fae86; }
.layer[aria-pressed="true"] .chk::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #06231b; font-size: 12px; font-weight: 900; }
.layer[aria-pressed="false"] { opacity: .72; }
.layer[aria-pressed="false"] .ltxt { color: #93a89f; }
.exag-l { margin-top: 14px; }

#ptBody .meta { display: grid; gap: 6px; margin: 4px 0 0; }
#ptBody .meta > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
#ptBody .meta dt { color: #93a89f; margin: 0; } #ptBody .meta dd { margin: 0; font-weight: 700; color: #eafaf3; }
#ptBody p { font-size: 13px; line-height: 1.5; margin: 0 0 8px; color: #cfe3da; }
#ptBody .muted { color: #8fa79c; } #ptBody .small { font-size: 12px; }

@media (max-width: 820px) {
  #exploreCanvas { height: 56vh; min-height: 300px; }
  .map-labels { position: absolute; top: 0; bottom: auto; height: 56vh; }
  .loading { position: absolute; top: 0; bottom: auto; height: 56vh; }
  .backbtn { top: auto; bottom: calc(56vh + 8px); }
}

.fixresult .startproj { display: inline-block; margin-top: 8px; color: #f5c542; font-weight: 800; text-decoration: none; }
.fixresult .startproj:hover { text-decoration: underline; }

.baseseg2 { display: flex; gap: 6px; margin-bottom: 12px; }
.baseseg2 button { flex: 1; padding: 8px 6px; border-radius: 7px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: #d9eee5;
  font-size: 13px; font-weight: 800; }
.baseseg2 button.on { background: #2f8f6b; border-color: #48b07a; color: #fff; }

.livebadge { position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  background: rgba(12,40,34,0.82); border: 1px solid rgba(96,220,180,0.5); color: #bff2df;
  padding: 6px 13px; border-radius: 20px; font-size: 12.5px; font-weight: 700; pointer-events: none;
  backdrop-filter: blur(6px); z-index: 6; box-shadow: 0 4px 14px rgba(0,0,0,0.3); }
@media (max-width: 820px) { .livebadge { top: 8px; font-size: 11.5px; } }

/* boat ride HUD (ground view) */
.boathud { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); display: none; gap: 8px; align-items: center;
  background: rgba(8,20,18,.82); border: 1px solid rgba(127,227,196,.35); border-radius: 999px; padding: 6px 8px; z-index: 40; backdrop-filter: blur(6px); }
.boathud button { font: inherit; font-weight: 700; color: #06110e; background: #7fe3c4; border: 0; border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.boathud button#bhSlow, .boathud button#bhFast { background: #123; color: #bff2df; padding: 8px 12px; }
.boathud #bhInfo { color: #cfe9df; font-size: 13px; font-weight: 600; padding: 0 4px; white-space: nowrap; }