/* The explorer's look (web-explorer-3dgut/app/globals.css): dark, lime accents, floating bars. */
:root {
  --ink: #f5f5f0;
  --muted: #9ca3a0;
  --line: rgba(255, 255, 255, 0.12);
  --lime: #c7f464;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #080a09; color: var(--ink); -webkit-text-size-adjust: 100%; }
body { font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; overflow: hidden; }
button { -webkit-tap-highlight-color: transparent; font: inherit; }

#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#view:active { cursor: grabbing; }
#video, #video-rear { display: none; }

.scene-title { position: absolute; z-index: 5; top: max(18px, env(safe-area-inset-top)); left: max(20px, env(safe-area-inset-left)); pointer-events: none; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.scene-title p { margin: 0 0 4px; color: var(--lime); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; }
.scene-title h1 { margin: 0 0 4px; font-size: 22px; font-weight: 620; letter-spacing: -.02em; }
.scene-title span { color: var(--muted); font-size: 11px; }

.sources { position: absolute; z-index: 5; top: max(18px, env(safe-area-inset-top)); right: max(20px, env(safe-area-inset-right)); display: flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 11px; background: rgba(9,11,10,.82); }
.sources button, .open-file { padding: 7px 11px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 560; cursor: pointer; transition: background .15s ease, color .15s ease; }
.sources button:hover, .open-file:hover { color: var(--ink); background: rgba(255,255,255,.06); }
.sources button.active, .sources button.active:hover { color: #10140d; background: var(--lime); }
.open-file input { display: none; }

.status { position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(9,11,10,.82); color: var(--muted); font-size: 12px; pointer-events: none; }

.camera-bar { position: absolute; z-index: 6; left: 50%; bottom: max(18px, calc(10px + env(safe-area-inset-bottom))); display: flex; align-items: center; gap: 14px; padding: 6px 12px 6px 6px; border: 1px solid var(--line); border-radius: 14px; background: rgba(9,11,10,.82); box-shadow: 0 10px 30px rgba(0,0,0,.3); transform: translateX(-50%); }
.camera-lens { display: flex; gap: 2px; padding: 2px; border-radius: 10px; background: rgba(255,255,255,.04); }
.camera-lens button { padding: 7px 11px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 560; cursor: pointer; transition: background .15s ease, color .15s ease; }
.camera-lens button:hover { color: var(--ink); background: rgba(255,255,255,.06); }
.camera-lens button.active, .camera-lens button.active:hover { color: #10140d; background: var(--lime); }
.camera-lens-cycle { display: none; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 0; border-radius: 9px; background: var(--lime); color: #10140d; font-size: 11px; font-weight: 600; cursor: pointer; }
.fov-control { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .06em; }
.fov-control input { width: 130px; accent-color: var(--lime); }
.fov-control output { min-width: 34px; color: var(--ink); font: 550 11px ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; }
.tour-toggle { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.04); color: var(--muted); cursor: pointer; transition: color .15s ease, border-color .15s ease; }
.tour-toggle[hidden] { display: none; }
.tour-toggle:hover { color: var(--ink); }
.tour-toggle.on { color: var(--lime); border-color: rgba(199,244,100,.4); }

.scrub { position: absolute; z-index: 6; left: 50%; bottom: max(70px, calc(62px + env(safe-area-inset-bottom))); width: min(420px, calc(100% - 40px)); margin: 0; transform: translateX(-50%); accent-color: var(--lime); opacity: .7; transition: opacity .15s ease; }
.scrub:hover { opacity: 1; }
.scrub[hidden] { display: none; }

.drop-veil { position: fixed; inset: 0; z-index: 20; display: none; place-items: center; background: rgba(6,8,7,.62); color: var(--lime); font-size: 18px; font-weight: 600; pointer-events: none; }
body.dropping .drop-veil { display: grid; }

/* Phones: one lens button that steps through the lenses, a slimmer bar. */
@media (max-width: 650px), (max-height: 500px) {
  .scene-title span { display: none; }
  .scene-title h1 { font-size: 18px; }
  .sources { top: auto; right: auto; left: 50%; bottom: calc(108px + env(safe-area-inset-bottom)); transform: translateX(-50%); }
  .camera-bar { gap: 8px; max-width: calc(100% - 20px); padding: 5px 10px 5px 5px; bottom: calc(10px + env(safe-area-inset-bottom)); }
  .camera-lens { display: none; }
  .camera-lens-cycle { display: flex; }
  .fov-control { gap: 7px; }
  .fov-control > span { display: none; }
  .fov-control input { width: 118px; }
  .scrub { bottom: calc(60px + env(safe-area-inset-bottom)); }
}