/* ─── Earth360 — Reef Dive (mobile) ───────────────────────────────────────
   Builds on ../static/css/styles.css tokens (teal --primary, glass --panel,
   Varela Round + Nunito). Adds a futuristic "dive-computer" HUD: thin
   letter-spaced labels, tabular numerics, soft cyan glow, faint scanlines.
   --------------------------------------------------------------------------- */

:root {
  --o2-ok:   #64e0c8;   /* breathable */
  --o2-warn: #ffd166;   /* getting low */
  --o2-low:  #ff5d5d;   /* reserve */
  --glow:    rgba(100, 224, 200, 0.55);
  --hud-stroke: rgba(120, 220, 210, 0.25);
}

/* faint CRT scanline wash over everything for the sci-fi feel */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay; opacity: 0.5;
}

.viewer canvas { width: 100% !important; height: 100% !important; }

/* Viewer fixed so it always fills the live visible viewport — position:absolute
   inside main{height:100%} can under-fill on mobile when the address-bar shifts */
.viewer { position: fixed !important; inset: 0 !important; }

/* ─── Fullscreen button — shown outside fullscreen, outside predive ─────── */
.btn-fullscreen {
  display: none; position: fixed; bottom: 1.1rem; left: 0.9rem; right: auto; z-index: 24;
  width: 40px; height: 40px; padding: 0; border-radius: 11px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: rgba(6,16,18,0.5); backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,0.18);
  align-items: center; justify-content: center; color: rgba(255,255,255,0.6);
  transition: border-color .15s, color .15s, transform .08s;
}
.btn-fullscreen:active { border-color: var(--primary); color: var(--primary); transform: scale(0.93); }
/* shown only when a dive is active, not already fullscreen, and fullscreen IS supported */
body:not(.predive):not(.in-fullscreen):not(.fs-unsupported) .btn-fullscreen { display: flex; }

/* numeric font: tabular so digits don't jiggle */
.gauge-val, .stat-v, .compass-deg, .descent-secs, .gauge-unit {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}

/* ─── visibility driven by body state classes ─────────────────────────── */
.mask, .dive-hud, .descent-overlay, .bottom-controls, .surface-modal { display: none; }

body.mode-flat.diving .dive-hud        { display: flex; }
body.mode-flat.diving .mask            { display: block; }
body.mode-flat.diving .bottom-controls { display: flex; }
body.mode-flat.descending .descent-overlay { display: grid; }
body.predive .start-panel              { display: block; }
body:not(.predive) .start-panel        { display: none; }
body.surfacing .surface-modal          { display: flex; }
/* Hide the topbar once the dive starts — the full viewport is the experience */
body:not(.predive):not(.surfacing) .topbar { display: none; }
/* Cardboard hides all DOM chrome — HUD/reticle/targets live in the 3D scene */
body.mode-cardboard .dive-hud,
body.mode-cardboard .mask,
body.mode-cardboard .descent-overlay,
body.mode-cardboard .bottom-controls { display: none !important; }

/* ─── Scuba-mask vignette (loaded from scuba-mask.svg) ───────────────── */
.mask {
  position: fixed; inset: 0; z-index: 15; pointer-events: none;
  width: 100%; height: 100%; object-fit: fill; display: none;
}

/* ─── Dive-computer HUD (flat) ────────────────────────────────────────── */
.dive-hud {
  position: fixed; inset: 0; z-index: 20; pointer-events: none;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 4.2rem 1.1rem 5.2rem;
}
.gauge {
  position: relative; width: 104px; height: 104px; align-self: flex-start;
  filter: drop-shadow(0 0 10px rgba(0,0,0,0.5));
}
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.g-track { fill: none; stroke: rgba(255,255,255,0.10); stroke-width: 7; }
.g-fill  {
  fill: none; stroke: var(--o2-ok); stroke-width: 7; stroke-linecap: round;
  transition: stroke-dashoffset 0.4s linear, stroke 0.6s ease;
  filter: drop-shadow(0 0 6px var(--glow));
}
.gauge.warn .g-fill { stroke: var(--o2-warn); }
.gauge.low  .g-fill { stroke: var(--o2-low); animation: o2pulse 1s ease-in-out infinite; }
@keyframes o2pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.gauge-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1;
}
.gauge-val  { font-family: var(--font-varela); font-size: 1.7rem; color: #eafdfa; }
.gauge-unit { font-family: var(--font-varela); font-size: 0.58rem; letter-spacing: 0.12rem;
              text-transform: uppercase; color: var(--hud-dim); margin-top: 0.15rem; }
.gauge-cap  { position: absolute; top: 108%; left: 50%; transform: translateX(-50%);
              font-family: var(--font-varela); font-size: 0.55rem; letter-spacing: 0.22rem;
              text-transform: uppercase; color: var(--hud-dim); white-space: nowrap; }

/* compass + stat grid */
.readouts { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.8rem; }
.compass { position: relative; width: 92px; height: 92px; }
.compass svg { width: 100%; height: 100%; }
.c-ring  { fill: rgba(10,18,20,0.55); stroke: var(--hud-stroke); stroke-width: 1; }
.c-card  { fill: var(--hud-dim); font-family: var(--font-varela); font-size: 11px; text-anchor: middle;
           dominant-baseline: middle; }
.c-n     { fill: var(--o2-low); }
.c-needle{ fill: var(--primary); filter: drop-shadow(0 0 4px var(--glow)); }
.compass-deg {
  position: absolute; left: 50%; bottom: 30%; transform: translateX(-50%);
  font-family: var(--font-varela); font-size: 0.72rem; color: #eafdfa;
}
.stat-grid {
  pointer-events: auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem 0.9rem;
  background: var(--panel); border: 1px solid var(--panel-edge);
  border-radius: 0.5rem; padding: 0.55rem 0.7rem; backdrop-filter: blur(8px);
}
.stat { display: flex; flex-direction: column; }
.stat-l { font-family: var(--font-varela); font-size: 0.52rem; letter-spacing: 0.12rem;
          text-transform: uppercase; color: var(--hud-dim); }
.stat-v { font-family: var(--font-varela); font-size: 0.82rem; color: var(--hud-text); }

/* ─── Descent overlay ─────────────────────────────────────────────────── */
.descent-overlay {
  position: fixed; inset: 0; z-index: 30;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.4rem;
  background: radial-gradient(ellipse at center, rgba(2,12,16,0.35), rgba(2,8,10,0.78));
  backdrop-filter: blur(2px); pointer-events: none;
}
.descent-ring { position: relative; width: 200px; height: 200px; }
.descent-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.d-track { fill: none; stroke: rgba(255,255,255,0.10); stroke-width: 4; }
.d-fill  { fill: none; stroke: var(--primary); stroke-width: 4; stroke-linecap: round;
           filter: drop-shadow(0 0 8px var(--glow)); transition: stroke-dashoffset 0.25s linear; }
.descent-center { position: absolute; inset: 0; display: flex; flex-direction: column;
                  align-items: center; justify-content: center; }
.descent-label { font-family: var(--font-varela); letter-spacing: 0.4rem; font-size: 0.8rem;
                 color: var(--primary); }
.descent-secs  { font-family: var(--font-varela); font-size: 3.4rem; color: #eafdfa; line-height: 1; }
.descent-hint  { font-family: var(--font-nunito); font-size: 0.72rem; color: var(--hud-dim);
                 letter-spacing: 0.04rem; margin-top: 0.7rem; text-align: center; line-height: 1.5; }
.descent-sub   { font-family: var(--font-nunito); font-size: 0.72rem; color: var(--hud-dim);
                 letter-spacing: 0.05rem; }

/* ─── Start panel (full-screen start screen — video plays behind) ──────── */
.start-panel {
  position: fixed; inset: 0; z-index: 40; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center;
  overflow-y: auto; text-align: center;
  /* semi-transparent so the muted coral video shows through as atmosphere */
  background: rgba(2, 8, 10, 0.78);
  backdrop-filter: blur(3px) saturate(0.7);
}
/* inner div takes auto margins so it centres vertically when content fits,
   and scrolls without clipping when it doesn't */
.start-inner {
  margin: auto; width: 100%; max-width: 360px; box-sizing: border-box;
  padding: 2rem 1.4rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
}
.start-panel h2 { font-family: var(--font-varela); letter-spacing: 0.04rem; font-size: 1.6rem; margin: 0; }
.start-panel p  { font-family: var(--font-nunito); font-size: 0.82rem; color: rgba(255,255,255,0.72);
                  margin: 0; line-height: 1.45; }
.view-pick { display: flex; gap: 0.8rem; width: 100%; }
.vp-btn {
  flex: 1; cursor: pointer; -webkit-tap-highlight-color: transparent;
  font-family: var(--font-varela); font-size: 0.82rem; letter-spacing: 0.02rem;
  padding: 1rem 0.5rem 0.85rem; border-radius: 0.6rem;
  background: rgba(100,161,157,0.09); color: rgba(255,255,255,0.72);
  border: 1.5px solid rgba(100,161,157,0.28);
  display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
  transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
}
.vp-btn svg { width: 22px; height: 22px; }
.vp-btn:hover  { background: rgba(100,161,157,0.18); border-color: var(--primary); color: #fff; }
.vp-btn:active { background: rgba(100,161,157,0.28); box-shadow: 0 0 16px rgba(100,161,157,0.32); color: #fff; }

/* ─── Loading message + bar — shown while still-image preview plays ────── */
.load-msg {
  display: none; position: fixed; bottom: 1.5rem; left: 0; right: 0; z-index: 37;
  text-align: center; pointer-events: none;
  font-family: var(--font-varela); font-size: 0.9rem;
  letter-spacing: 0.2rem; text-transform: uppercase; color: rgba(255,255,255,0.78);
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  animation: loadBreath 1.9s ease-in-out infinite;
}
.load-msg span {
  display: block; margin-top: 0.4rem; font-size: 0.66rem;
  letter-spacing: 0.08rem; text-transform: none; color: rgba(255,255,255,0.55);
}
@keyframes loadBreath { 0%,100% { opacity: 0.45; } 50% { opacity: 1; } }
body.loading .load-msg { display: block; }
.load-bar {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  height: 4px; z-index: 36; background: rgba(255,255,255,0.08);
}
.load-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--primary), #8cddd9);
  box-shadow: 0 0 10px var(--glow);
  transition: width 0.12s linear;
}
body.loading .load-bar { display: block; }
.recording-dot {
  display: none; position: fixed; top: 0.85rem; right: 0.85rem; z-index: 26;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  pointer-events: auto; -webkit-tap-highlight-color: transparent;
  background: rgba(6,16,18,0.5); backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,107,107,0.4);
  align-items: center; justify-content: center;
  color: #ff6b6b; font-size: 1rem; line-height: 1;
  transition: border-color .15s, box-shadow .15s;
}
.recording-dot::before { content: '●'; animation: pulse 1.2s ease-in-out infinite; }
.recording-dot:active   { box-shadow: 0 0 12px rgba(255,107,107,0.5); }
body.mode-flat.diving .recording-dot    { display: flex; }
body.mode-cardboard .recording-dot      { display: none !important; }
.bottom-controls {
  position: fixed; right: 0.9rem; bottom: 1.1rem; left: auto; z-index: 25;
  padding: 0; gap: 0.6rem; justify-content: flex-end; pointer-events: none;
}
.icon-btn {
  pointer-events: auto; -webkit-tap-highlight-color: transparent;
  width: 40px; height: 40px; padding: 0; display: grid; place-items: center;
  border-radius: 11px; cursor: pointer; box-sizing: border-box;
  background: rgba(6,16,18,0.5); backdrop-filter: blur(8px);
  border: 1.6px solid #6db6ff; color: #6db6ff;               /* blue outline, no fill */
  transition: box-shadow .2s, border-color .2s, color .2s, transform .08s;
}
.icon-btn svg { width: 22px; height: 22px; display: block; }
.icon-btn:active { transform: scale(0.93); }
/* toggle ON — glow */
.icon-btn.active {
  color: #d4ecff; border-color: #a6d4ff;
  box-shadow: 0 0 15px 1px rgba(109,182,255,0.6), inset 0 0 11px rgba(109,182,255,0.28);
}
/* save / finish uses the teal accent */
.icon-btn-save { border-color: var(--o2-ok); color: var(--o2-ok); }
.icon-btn-save:active { transform: scale(0.93); }

/* ─── Surface modal ───────────────────────────────────────────────────── */
.surface-modal { position: fixed; inset: 0; z-index: 50; align-items: center; justify-content: center;
                 background: rgba(0,0,0,0.6); backdrop-filter: blur(6px); }
.surface-box { width: min(340px, 88vw); padding: 1.6rem 1.7rem; box-sizing: border-box;
               background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 0.8rem;
               box-shadow: 0 10px 36px rgba(0,0,0,0.6); font-family: var(--font-nunito); }
.surface-box h3 { font-family: var(--font-varela); text-align: center; margin: 0 0 1rem; }
.surface-box label { display: block; font-size: 0.74rem; text-transform: uppercase;
                     letter-spacing: 0.08rem; color: var(--hud-dim); margin-bottom: 0.4rem; }
.surface-box input { width: 100%; box-sizing: border-box; background: rgba(255,255,255,0.07);
                     border: 1px solid rgba(255,255,255,0.18); border-radius: 0.4rem;
                     padding: 0.55rem 0.75rem; color: #fff; font-size: 0.9rem; outline: none;
                     margin-bottom: 1rem; }
.surface-box input:focus { border-color: var(--primary); }
.surface-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.7rem;
                color: var(--hud-dim); margin-bottom: 0.9rem; }
.surface-meta b { color: rgba(255,255,255,0.7); font-weight: 600; margin-right: 0.2rem; }
.surface-actions { display: flex; gap: 0.6rem; }
.surface-actions .btn { flex: 1; }

/* tiny screen tweaks */
@media (max-width: 380px) {
  .dive-hud { padding: 3.6rem 0.8rem 4.6rem; }
  .gauge { width: 88px; height: 88px; }
}

/* ─── Desktop gate (QR to open on phone) ──────────────────────────────────── */
.desktop-gate {
  position: fixed; inset: 0; z-index: 70; display: none;
  align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #06222a, #02080a 70%);
}
.desktop-gate.show { display: flex; }
.gate-box {
  width: min(420px, 90vw); padding: 2rem 2rem 1.7rem; box-sizing: border-box; text-align: center;
  background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 1rem;
  backdrop-filter: blur(12px); box-shadow: 0 14px 48px rgba(0,0,0,0.6);
}
.gate-box .brand { justify-content: center; margin-bottom: 1.1rem; }
.gate-box h2 { font-family: var(--font-varela); margin: 0 0 0.5rem; letter-spacing: 0.02rem; }
.gate-box p  { font-family: var(--font-nunito); font-size: 0.88rem; line-height: 1.5;
               color: rgba(255,255,255,0.72); margin: 0 0 1.3rem; }
.qr-wrap {
  width: 240px; height: 240px; margin: 0 auto 1rem; padding: 12px; box-sizing: border-box;
  background: #eafdfa; border-radius: 0.8rem; box-shadow: 0 0 24px rgba(100,224,200,0.25);
  display: flex; align-items: center; justify-content: center;
}
.qr-wrap img { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.qr-url {
  display: inline-block; max-width: 100%; overflow-wrap: anywhere; margin-bottom: 0.5rem;
  font-family: var(--font-varela); font-size: 0.82rem; color: var(--primary); text-decoration: none;
}
.qr-url:hover { text-decoration: underline; }
.qr-input {
  width: 100%; box-sizing: border-box; margin-bottom: 0.5rem; text-align: center;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 0.4rem; padding: 0.5rem 0.7rem; color: #fff; font-size: 0.8rem;
  outline: none; font-family: var(--font-varela);
}
.qr-input:focus { border-color: var(--primary); }
.qr-input.warn { border-color: var(--o2-warn); }      /* not https */
.qr-note {
  font-size: 0.72rem !important; color: var(--hud-dim) !important;
  margin: 0 0 1rem !important; line-height: 1.45; text-align: center;
}
.qr-note code { background: rgba(255,255,255,0.1); padding: 0 4px; border-radius: 3px; }
.gate-box .btn { width: 100%; }

/* ─── Landscape gate (pause + prompt in portrait) ─────────────────────────── */
.orient-gate {
  position: fixed; inset: 0; z-index: 66; display: none;
  align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #06222a, #02080a 72%);
}
.orient-gate.show { display: flex; }
.orient-box { text-align: center; }
.rotate-icon {
  width: 88px; height: 88px; color: var(--o2-ok);
  filter: drop-shadow(0 0 12px rgba(100,224,200,0.45));
  transform-origin: 50% 50%; animation: rotateHint 2.6s ease-in-out infinite;
}
@keyframes rotateHint {
  0%, 50% { transform: rotate(0deg); }
  72%, 100% { transform: rotate(-90deg); }
}
.orient-box p {
  font-family: var(--font-varela); font-size: 1.15rem; color: #eafdfa;
  margin: 1.1rem 0 0.3rem; letter-spacing: 0.04rem;
}
.orient-box span { font-family: var(--font-nunito); font-size: 0.82rem; color: var(--hud-dim); }