/* ---- "SCROLL DOWN FOR HAZE" entry prompt ---- */
.scroll-hint {
  position: fixed;
  left: 50%; bottom: 4vh;
  transform: translateX(-50%);
  z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 0.42em;
  color: rgba(150, 255, 170, 0.85);
  text-shadow: 0 0 10px rgba(0, 255, 65, 0.55);
  pointer-events: none;
  opacity: 0;
  animation: scroll-hint-in 1.2s ease 1.6s forwards;
  transition: opacity 0.5s ease;
}
.scroll-hint-chev {
  color: rgba(0, 255, 65, 0.9);
  filter: drop-shadow(0 0 6px rgba(0, 255, 65, 0.6));
  animation: scroll-hint-bounce 1.6s ease-in-out infinite;
}
.scroll-hint.gone,
body.focus-mode .scroll-hint,
body.hide-ui .scroll-hint { opacity: 0 !important; animation: none; }
@keyframes scroll-hint-in { to { opacity: 1; } }
@keyframes scroll-hint-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* SVG connector line between focused card and detail panels */
.focus-connector {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease 0.3s;
}
body.focus-mode .focus-connector { opacity: 1; }
.focus-connector path {
  fill: none;
  stroke: rgba(108, 255, 138, 0.85);
  stroke-width: 1.6;
  stroke-dasharray: 4 6;
  filter: drop-shadow(0 0 4px rgba(0, 255, 65, 0.8));
  animation: dash-flow 1.2s linear infinite;
}
.focus-connector circle {
  fill: rgba(108, 255, 138, 0.95);
  filter: drop-shadow(0 0 6px rgba(0, 255, 65, 0.9));
}
@keyframes dash-flow {
  to { stroke-dashoffset: -20; }
}

/* Close button in focus mode */
.focus-close {
  position: fixed;
  top: 24px; right: 24px;
  z-index: 9;
  background: rgba(0, 14, 4, 0.7);
  border: 1px solid rgba(0, 255, 65, 0.55);
  color: #b8ffc8;
  font-family: 'Courier New', monospace;
  font-size: 11px; letter-spacing: 0.3em;
  padding: 8px 14px;
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease;
  backdrop-filter: blur(4px);
}
body.focus-mode .focus-close { opacity: 1; pointer-events: auto; }
.focus-close:hover { background: rgba(0, 40, 12, 0.85); color: #f0fff5; }

/* ===== Lightbox — fullscreen image view ===== */
/* Triggered when the user taps the focused image on mobile. Sits above
   everything (z-index 100). Tap anywhere or close button to dismiss. */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 100;
  display: none;
  align-items: center; justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lightbox.visible { display: flex; }
.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 0 60px rgba(0, 255, 65, 0.20);
  /* Prevent iOS image-action long-press menu — feels mobile-app-y */
  -webkit-touch-callout: none;
  user-select: none;
}
.lightbox-close {
  position: absolute;
  top: 16px; right: 16px;
  background: rgba(0, 14, 4, 0.85);
  border: 1px solid rgba(0, 255, 65, 0.55);
  color: #b8ffc8;
  font-family: 'Courier New', monospace;
  font-size: 11px; letter-spacing: 0.3em;
  padding: 8px 14px;
  cursor: pointer;
  text-shadow: 0 0 8px rgba(0, 255, 65, 0.6);
  z-index: 101;
}
.lightbox-close:hover { background: rgba(0, 40, 12, 0.95); color: #f0fff5; }