/* 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; }
/* Small phones: tighten the extras gap. The row already scrolls (css/mobile.css),
   so it must stay inside the screen. */
@media (max-width: 380px) and (pointer: coarse) { .dock .hud-extras { gap: 2px; } }