/* DOM-only visitor controls. Empty space never intercepts look or page input. */
.rooftop-touch-controls {
  --rooftop-touch-size: clamp(46px, 12vw, 56px);
  --rooftop-touch-gap: 6px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  z-index: 4;
  display: block;
  pointer-events: none;
  color: #f8e9f1;
  font: 500 16px/1 "Inconsolata", "Consolas", monospace;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.rooftop-touch-controls[hidden] { display: none !important; }
.rooftop-touch-controls .rooftop-touch-dpad {
  position: absolute;
  left: max(12px, env(safe-area-inset-left, 0px));
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  display: grid;
  grid-template-areas: ". forward ." "left . right" ". backward .";
  grid-template-columns: repeat(3, var(--rooftop-touch-size));
  grid-template-rows: repeat(3, var(--rooftop-touch-size));
  gap: var(--rooftop-touch-gap);
  pointer-events: none;
}
.rooftop-touch-controls .rooftop-touch-button {
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rooftop-touch-size);
  height: var(--rooftop-touch-size);
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid #c29aaa;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(65, 37, 53, .38), rgba(26, 16, 24, .46));
  box-shadow: 0 2px 0 rgba(10, 5, 9, .7), 0 3px 12px rgba(0, 0, 0, .2);
  color: inherit;
  font: inherit;
  font-size: 23px;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.rooftop-touch-controls [data-touch-code="KeyW"] { grid-area: forward; }
.rooftop-touch-controls [data-touch-code="KeyA"] { grid-area: left; }
.rooftop-touch-controls [data-touch-code="KeyS"] { grid-area: backward; }
.rooftop-touch-controls [data-touch-code="KeyD"] { grid-area: right; }
.rooftop-touch-controls [data-touch-code="KeyF"] {
  position: absolute;
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + var(--rooftop-touch-size) + var(--rooftop-touch-gap));
  width: clamp(112px, 28vw, 128px);
  padding: 0 12px;
  font-size: 16px;
  letter-spacing: .015em;
}
.rooftop-touch-controls .rooftop-touch-button[aria-pressed="true"] {
  background: rgba(104, 64, 81, .58);
  border-color: #f2cfdf;
  box-shadow: 0 1px 0 rgba(10, 5, 9, .7);
  transform: translateY(1px);
}
.rooftop-touch-controls .rooftop-touch-button:focus-visible {
  outline: 2px solid #fff1f8;
  outline-offset: 3px;
}
.rooftop-touch-controls .rooftop-touch-button:disabled { opacity: .45; cursor: default; }
@media (hover: hover) {
  .rooftop-touch-controls .rooftop-touch-button:hover { border-color: #f2cfdf; }
}
/* The entry applies this class only to its existing look surface while playing. */
body.rooftop-touch-active .rooftop-look-surface {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
/* Leave the existing contextual action and E badge unchanged; reserve its space. */
body.rooftop-touch-active #prompt {
  bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + 3 * clamp(46px, 12vw, 56px) + 24px);
}
@media (max-height: 420px) and (orientation: landscape) {
  .rooftop-touch-controls { --rooftop-touch-size: 44px; --rooftop-touch-gap: 5px; }
  body.rooftop-touch-active #prompt {
    bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + 154px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rooftop-touch-controls .rooftop-touch-button { transition: none; }
}