/* Rock POV HUD + page state while looking through the rock's eyes (src/ui/pov.js). Tokens come from main.css. */
html:has(body.is-pov) { overflow: hidden; }
body.is-pov #stage { touch-action: none !important; cursor: grab; }
body.is-pov #stage:active { cursor: grabbing; }
body.is-pov .layers, body.is-pov .gauge, body.is-pov .hdr, body.is-pov .meas, body.is-pov .vig {
  opacity: 0 !important; visibility: hidden; transition: opacity 0.5s, visibility 0s 0.5s; }

.povhud { position: fixed; z-index: 40; left: 50%; bottom: calc(26px + var(--sab, 0px)); transform: translate(-50%, 24px);
  width: max-content; max-width: calc(100vw - 32px); display: flex; align-items: stretch; opacity: 0; visibility: hidden;
  transition: opacity 0.5s, transform 0.6s var(--ease, ease), visibility 0s 0.6s; }
body.is-pov .povhud { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0.9s, 0.9s, 0s; }
.povhud__g { width: 48px; height: auto; border-radius: 4px 0 0 4px; font-size: 22px; }
.povhud__rd { display: flex; align-items: center; gap: 18px; padding: 9px 16px; min-width: 0; background: var(--reg);
  border: 1px solid var(--cy-d); border-left: 0; border-right: 0; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
/* mid / low tier (src/tier.js): a smaller blur radius over the live canvas (Safari re-blurs it every frame) */
html[data-q='mid'] .povhud__rd, html[data-q='low'] .povhud__rd { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.povhud__k { margin: 0; font: 500 10px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--cy-hi, #dafcff); white-space: nowrap; }
.povhud__h { margin: 0; font: 300 italic 14px/1.3 var(--display); color: var(--tx-2); }
.povhud__x { display: flex; align-items: center; gap: 10px; padding: 0 16px; border: 1px solid var(--cy-d); border-radius: 0 4px 4px 0; cursor: pointer;
  font: 500 10.5px/1 var(--mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--g1, #f1d99a);
  background: linear-gradient(180deg, rgba(78, 56, 20, 0.5), rgba(28, 20, 8, 0.58)); transition: background 0.3s, box-shadow 0.3s; }
.povhud__x:hover, .povhud__x:focus-visible { color: #fff3d0; background: linear-gradient(180deg, rgba(110, 80, 28, 0.55), rgba(40, 28, 10, 0.6));
  box-shadow: 0 0 40px -8px rgba(226, 189, 114, 0.7); outline: none; }
.povhud__x kbd { font: 400 9px/1 var(--mono); padding: 3px 5px; border-radius: 3px; border: 1px solid rgba(241, 217, 154, 0.35); color: rgba(251, 232, 180, 0.7); }
@media (max-width: 640px), (pointer: coarse) {
  .povhud { bottom: calc(18px + var(--sab, 0px)); }
  .povhud__h { display: none; }
  .povhud__x kbd { display: none; }
  .povhud__rd { padding: 9px 12px; }
}
@media (prefers-reduced-motion: reduce) { .povhud { transition: opacity 0.3s, visibility 0s 0.3s; transform: translate(-50%, 0); } }