/* the Button layout editor (src/ui/layout/) lies over the paused game or the title under only a light
   dim (`menuBackdrop`), so the buttons and the stick are placed against the real screen */
#m-layout {
  padding: 0;
  overflow: hidden;
}

#menus #m-layout .layout-preview,
#menus #m-layout .layout-preview * {
  touch-action: none;
}

.layout-preview {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.layout-preview [data-control] {
  pointer-events: auto;
  cursor: grab;
}

.layout-preview .dragging {
  cursor: grabbing;
}

/* a closing menu lets taps through at once (menus.css), and so do the controls on it */
#m-layout:not(.open) [data-control] {
  pointer-events: none;
}

.layout-preview .picked {
  outline: 2px dashed var(--color-gold);
  outline-offset: 4px;
  filter: drop-shadow(0 0 6px var(--color-gold));
}

/* the pause button only shows what the controls have to be placed around */
.layout-preview .tb-pause {
  opacity: 0.35;
  pointer-events: none;
}

/* a hidden stick is neither shown nor edited, but it still stands where it would be measured */
body.stick-hidden .layout-preview .stick-base {
  visibility: hidden;
}

/* the carved frame of the HUD panels, around a dark plate; 1x on short screens like the menus */
.layout-bar {
  --stone: 2;

  position: absolute;
  top: calc(8px + var(--sat));
  left: 50%;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: max-content;
  max-width: calc(100% - 16px);
  padding: 2px 4px;
  border: solid var(--color-clear);
  border-width: calc(12px * var(--stone)) calc(14px * var(--stone));
  border-image: url('../assets/ui/hud/panel-frame.png') 12 14 / calc(12px * var(--stone))
    calc(14px * var(--stone)) / 0 round;
  background: var(--color-backdrop-strong) padding-box;
  image-rendering: pixelated;
}

.layout-bar.low {
  top: auto;
  bottom: calc(8px + var(--sab));
}

.layout-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 18px;
}

.layout-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* as wide as the longest name, ATTACK, so the bar does not jump as the picked button changes */
.layout-name {
  min-width: calc(6ch + 28px);
}

.layout-size {
  min-width: 5ch;
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.layout-step {
  width: 34px;
  height: 34px;
  font-size: var(--font-size-lg);
  cursor: pointer;
}

.layout-bar button:disabled {
  opacity: 0.4;
  filter: none;
  cursor: default;
}

.layout-hint {
  margin: 0;
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
}

@media (max-height: 600px), (max-width: 640px) {
  .layout-bar {
    --stone: 1;
  }
}

/* an upright phone stacks the two groups, so the bar stays narrow and clear of the pause button */
@media (max-width: 560px) {
  .layout-tools {
    flex-direction: column;
  }
}