/* Full view (F, see fullscreen.js). The renderer draws a fixed 3:2 image, so the feed takes the largest 3:2 box
   the window allows instead of stretching, and the side panel turns into a HUD over its right edge (H hides it). */

#full-view-toggle {
  padding: 6px 9px;
  border: 1px solid rgba(111, 255, 171, .45);
  background: rgba(0, 8, 4, .82);
  color: #b9ffd1;
  font: 11px/1.35 Consolas, "Courier New", monospace;
  letter-spacing: .06em;
  white-space: pre;
  cursor: pointer;
  opacity: .6;
}

#full-view-toggle:hover {
  opacity: 1;
}

/* The touch layout already fills the window, and that corner holds its movement stick. */
body.touch-mode #full-view-toggle {
  display: none;
}

body.full-view {
  overflow: hidden;
}

body.full-view #app {
  width: 100vw;
  height: 100vh;
  min-height: 0;
  margin: 0;
  padding: 0;
  grid-template-columns: 1fr;
  place-items: center;
  gap: 0;
}

/* The feed's size and place in full view are in layout.css, with the rest of the stage. */
body.full-view #viewport {
  max-width: none;
  border: 0;
  box-shadow: none;
}

body.full-view #interface {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 60;
  /* The panel draws 41-column lines at 9px a column plus a 4-column margin: below 420px they clip. */
  width: clamp(420px, 27vw, 460px);
  height: 100vh;
  min-height: 0;
  max-height: none;
  border-left: 1px solid rgba(111, 255, 171, .22);
  background: rgba(1, 7, 4, .76);
}

body.full-view.full-view-no-panel #interface {
  display: none;
}