/* Afterlight — study-specific interface details. Base system is ../shared/lab.css */

body { background: #06070a; }

/* icon state: one SVG per button, halves shown by pressed state */
#btn-sound[aria-pressed="false"] .snd-on { display: none; }
#btn-sound[aria-pressed="true"] .snd-off { display: none; }
#btn-pause[aria-pressed="false"] .pause-off { display: none; }
#btn-pause[aria-pressed="true"] .pause-on { display: none; }

/* the pause button reads as a state, not an action, so it keeps its label */
#btn-pause .lab-btn-text,
#btn-sound .lab-btn-text { min-width: 0; }

.lab-overlay {
  background:
    radial-gradient(90% 70% at 50% 42%, rgba(255, 150, 60, .10), transparent 62%),
    radial-gradient(130% 100% at 50% 30%, rgba(4, 6, 10, .35), rgba(4, 6, 10, .84));
}

.lab-card {
  background: linear-gradient(180deg, #141519 0%, #0e0f13 100%);
  border-color: rgba(255, 255, 255, .1);
}

.lab-prompt kbd { background: rgba(255, 106, 26, .18); border-color: rgba(255, 106, 26, .5); }

/* the interaction prompt sits above the touch controls on phones */
@media (hover: none) and (pointer: coarse) {
  .lab-prompt { bottom: 26%; }
  .lab-prompt kbd { display: none; }
  .lab-help { bottom: 200px; }
}

/* Guided walk takes the camera over, so make that state obvious */
#stage[data-guided="true"] .lab-prompt { opacity: 0; }
#stage[data-guided="true"] .lab-canvas { cursor: default; }

.lab-canvas { cursor: grab; }
.lab-canvas:active { cursor: grabbing; }
#stage[data-locked="true"] .lab-canvas { cursor: none; }