/* gloop.live "Gloop's eyes" camera toggle (js/eyes.js). Load after gloop.css + mobile.css.
   - #eyes-toggle: desktop, in .zoom right after LOOK; inherits .zoom button styles and
     copies the LOOK (#zoom-fit) text-button sizing. Hidden on touch, where the icon is.
   - #mob-eyes: phone row icon in #hud-extras (.mob-only .mob-icon-btn from css/mobile.css).
   - html.eyes-on: zoom - / + are disabled while in eyes mode. */
.zoom #eyes-toggle { width: auto; padding: 0 0.55rem; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; }
.zoom #eyes-toggle[aria-pressed="true"],
.hud-extras #mob-eyes[aria-pressed="true"] {
  border-color: rgba(185, 245, 180, 0.7);
  color: var(--glow);
  background: linear-gradient(180deg, rgba(185, 245, 180, 0.16), rgba(185, 245, 180, 0.05));
  box-shadow: 0 0 0 3px rgba(185, 245, 180, 0.1);
}
@media (pointer: coarse) {
  .zoom #eyes-toggle { display: none; }
}
html.eyes-on .zoom #zoom-in:disabled,
html.eyes-on .zoom #zoom-out:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
/* v1b: at 360 the eye button is the last item in the phone button row and got cut off; widen that row slightly on small touch screens (Ermintrude 4) */
@media (max-width: 380px) and (pointer: coarse) { .dock .hud-extras { gap: 2px; flex-basis: calc(100% + 12px); max-width: none; margin-left: -6px; margin-right: -6px; } }