/* ---------- Hologram view (laptop / desktop) ---------- */
#ar.holo { background: radial-gradient(1400px 900px at 50% 45%, #0f1a33, #04060b 75%); }
#ar.holo #cam { inset: auto auto calc(env(safe-area-inset-bottom) + 84px) 12px; width: 132px; height: 99px; border-radius: 12px; transform: scaleX(-1); opacity: 0.85; z-index: 3; border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }
#ar.holo.no-cam #cam { display: none; }
.holo-plane, .holo-shadow, .holo-dot { position: absolute; left: 50%; top: 50%; backface-visibility: visible; pointer-events: none; }
.holo-plane {
  background-color: rgba(10, 18, 36, 0.55);
  background-image: linear-gradient(rgba(124, 245, 211, 0.24) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 245, 211, 0.24) 1px, transparent 1px);
  background-size: 120px 120px;
  box-shadow: inset 0 0 160px rgba(0, 0, 0, 0.65);
}
.holo-back { background-color: rgba(8, 14, 30, 0.9); box-shadow: inset 0 0 220px rgba(124, 245, 211, 0.07); }
.holo-floor { background-color: rgba(12, 22, 44, 0.7); }
.holo-shadow { border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); filter: blur(6px); }
.holo-dot { width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #d8fff3, var(--mint) 45%, rgba(124, 245, 211, 0) 72%); box-shadow: 0 0 24px rgba(124, 245, 211, 0.55); }
#stage.holo .panel { box-shadow: 0 0 0 1px rgba(124, 245, 211, 0.55), 0 40px 120px rgba(0, 0, 0, 0.7), 0 0 90px rgba(124, 245, 211, 0.22); }
.view-btn { flex: none; font-size: 12px; font-weight: 600; padding: 7px 12px; border-radius: 99px; background: var(--glass); border: 1px solid var(--line); color: #e8ecf7; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.view-btn::before { content: "3D view: "; color: var(--muted); font-weight: 500; }
.track { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--mint); padding: 6px 10px; border-radius: 99px; background: var(--glass); border: 1px solid rgba(124, 245, 211, 0.35); }
.track[hidden] { display: none; }
.track i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }
@media (max-width: 560px) { .view-btn::before { content: ""; } #ar.holo #cam { width: 96px; height: 72px; } }

/* Hologram on a laptop: the gesture guide stays in view, the current shape lights up */
.holo-guide { position: absolute; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 84px); z-index: 3; width: 250px; padding: 12px 14px; border-radius: 14px; background: rgba(8, 12, 24, 0.82); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 12.5px; line-height: 1.4; color: #c9d0e3; }
.holo-guide[hidden] { display: none; }
.holo-guide .hg-title { display: block; font: 700 13px var(--display); color: #fff; margin-bottom: 6px; }
.holo-guide ul { margin: 0; padding-left: 16px; display: grid; gap: 4px; }
.holo-guide li b { display: block; color: #e8ecf7; font-weight: 600; }
.holo-guide li.on, .holo-guide li.on b { color: var(--mint); }
.holo-guide .hg-status { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
@media (max-width: 700px) { .holo-guide { width: 200px; font-size: 11.5px; } }
/* Floating glass on a laptop: the guide stays up and reads the right way round in the sheet */
#ar.glassv .holo-guide { bottom: calc(env(safe-area-inset-bottom) + 84px); }
#ar.glassv.sheet .holo-guide { transform: scaleY(-1); }
/* tap the guide to fold it down to its title (and again to open it) */
.holo-guide { cursor: pointer; }
.holo-guide.mini ul, .holo-guide.mini .hg-status, .holo-guide.mini .hg-diag { display: none; }
.holo-guide .hg-diag { margin: 2px 0 0; font-size: 10.5px; color: var(--muted); opacity: 0.8; }
.holo-guide.mini .hg-title { margin: 0; }
.holo-guide.mini .hg-title::after { content: " (tap to show)"; font-weight: 500; color: var(--muted); font-size: 11px; }

/* Phones: the top bar keeps every button on one line with short labels (the full label stays
   the button's text for screen readers), and the mode chip makes room in the floating glass. */
@media (max-width: 560px) {
  .hud-top { gap: 6px; }
  .view-btn[data-short] { font-size: 0; padding: 7px 10px; }
  .view-btn[data-short]::after { content: attr(data-short); font-size: 12px; }
  #ar.glassv #mode-chip, #ar.pyr #mode-chip { display: none; }
}