body:not(.view-control-buttons) .view-controls {
  display: none !important;
}

.view-controls {
  position: absolute;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  border-radius: 8px;
  z-index: 100;
  transition: bottom 0.3s ease;
}

.viewControlButton {
  position: relative;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.05);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  /* No colour of its own for the icons: they take the tour's (--icon-color, Global Aesthetics or its theme), as the bar's glass takes
     the tour's panel colour. A line here said white whatever the tour's design, so a theme with brass icons had a bar of white ones
     (Ben, 2026-10-11, Averline). "Enable Custom Styling" still gives the bar colours of its own. */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.2s ease,
    transform 0.1s;
}

.viewControlButton:last-child {
  border-right: none;
}

.viewControlButton:hover {
  background: rgba(255, 255, 255, 0.15);
}

.viewControlButton:active {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(0.95);
}

.viewControlButton .icon {
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}

/* Positioning Constraints */
body.ctrl-top-right .view-controls {
  top: 80px;
  right: 30px;
}
body.ctrl-top-left .view-controls {
  top: 80px;
  left: 30px;
}
body.ctrl-top-middle .view-controls {
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
}

body.ctrl-center-right .view-controls {
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  flex-direction: column;
}
body.ctrl-center-right .viewControlButton {
  border-right: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
body.ctrl-center-left .view-controls {
  top: 50%;
  left: 30px;
  transform: translateY(-50%);
  flex-direction: column;
}
body.ctrl-center-left .viewControlButton {
  border-right: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.ctrl-bottom-right .view-controls {
  bottom: 30px;
  right: 30px;
}
body.ctrl-bottom-left .view-controls {
  bottom: 30px;
  left: 30px;
}
body.ctrl-bottom-middle .view-controls {
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
}

/* Dynamic clearance when bottom elements are visible */
:root {
  --nav-clearance: 30px;
}

/* Base override if Action Bar is present */
body:has(#v2ActionBar) {
  --nav-clearance: 95px;
}

/* Base override if Dock is present AND OPEN */
body:has(#sceneDock:not(.dock-hidden)) {
  --nav-clearance: 150px;
}

/* Base override if BOTH Action Bar and Dock are present and open */
body:has(#sceneDock:not(.dock-hidden)):has(#v2ActionBar) {
  --nav-clearance: 215px;
}

/* ...but a bar in a bottom corner keeps clear of the thumbnails only where they reach under it. Beside a narrow strip of
   thumbnails in the middle of the player it stays at the foot, as with no thumbnails at all (Ben, 2026-10-13, of a bar 150px up
   in the corner: "is this not at the bottom because the gallery is there?"). The thumbnails' script says when
   (body.dock-clear-of-controls, gallery.js); a page without that script's answer is as it was. */
body.dock-clear-of-controls.ctrl-bottom-right:has(#sceneDock:not(.dock-hidden)),
body.dock-clear-of-controls.ctrl-bottom-left:has(#sceneDock:not(.dock-hidden)) {
  --nav-clearance: 30px;
}
body.dock-clear-of-controls.ctrl-bottom-right:has(#sceneDock:not(.dock-hidden)):has(#v2ActionBar),
body.dock-clear-of-controls.ctrl-bottom-left:has(#sceneDock:not(.dock-hidden)):has(#v2ActionBar) {
  --nav-clearance: 95px;
}

body.ctrl-bottom-right .view-controls,
body.ctrl-bottom-left .view-controls,
body.ctrl-bottom-middle .view-controls {
  bottom: var(--nav-clearance) !important;
}