/* Walkable Stark × Vault-TEC bunker schematic */
.bt-shell {
  border: 1px solid rgba(251, 191, 36, 0.45);
  background: #0c0906;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(251, 146, 60, 0.12);
}
.bt-chrome {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  padding: 0.45rem 0.75rem;
  font-family: "Share Tech Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: #fbbf24;
  background: #1a120c;
  border-bottom: 1px solid rgba(251, 191, 36, 0.28);
}
#bt-room { color: #67e8f9; }
.bt-stage {
  position: relative;
  height: min(70vh, 640px);
  min-height: 360px;
  background: #070504;
}
#bt-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  /* NOT none. The stage is most of a phone screen, so touch-action: none
     here meant a thumb anywhere on the view could not scroll the page -
     the tour became a wall you had to find an edge around. pan-y gives
     vertical swipes back to the page and keeps horizontal drag, which is
     the axis that matters for turning. Up and down is what the LOOK pad
     is for, and it keeps touch-action: none.

     SCAN needs both axes and the pinch, so setMode() switches this to
     none while SCAN is on and back to pan-y on the way out. SCAN is
     entered by pressing a button, so trapping the scroll there is a state
     the visitor asked for and can leave the same way.

     touch-action is ignored for mouse input, so none of this costs the
     desktop drag anything. */
  touch-action: pan-y;
}
.bt-cross {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  pointer-events: none;
  border: 1px solid rgba(251, 191, 36, 0.85);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(251, 146, 60, 0.6);
}
.bt-cross::before,
.bt-cross::after {
  content: "";
  position: absolute;
  background: rgba(251, 191, 36, 0.9);
}
.bt-cross::before { left: 6px; top: -4px; width: 1px; height: 22px; }
.bt-cross::after { top: 6px; left: -4px; height: 1px; width: 22px; }
.bt-hint {
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  top: 0.45rem;
  margin: 0;
  text-align: center;
  font-family: "Share Tech Mono", monospace;
  font-size: 0.64rem;
  letter-spacing: 0.05em;
  color: #fde68a;
  text-shadow: 0 1px 4px #000;
  pointer-events: none;
}
.bt-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.45rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0 0.7rem;
  pointer-events: none;
}
.bt-stick {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  border: 2px solid rgba(251, 191, 36, 0.7);
  background: rgba(0, 0, 0, 0.35);
  position: relative;
  pointer-events: auto;
  touch-action: none;
  flex: 0 0 auto;
}
.bt-stick i {
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  left: 38px;
  top: 38px;
  background: rgba(251, 191, 36, 0.88);
}
.bt-turn {
  display: flex;
  gap: 0.45rem;
  pointer-events: auto;
}
.bt-turn button,
.bt-lookpad {
  min-width: 64px;
  min-height: 64px;
  border-radius: 12px;
  border: 2px solid rgba(251, 191, 36, 0.65);
  background: rgba(0, 0, 0, 0.4);
  color: #fde68a;
  font-family: "Share Tech Mono", monospace;
  font-size: 1.35rem;
  letter-spacing: 0.08em;
  touch-action: none;
  cursor: pointer;
}
.bt-lookpad {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 118px;
  font-size: 0.72rem;
  pointer-events: auto;
  user-select: none;
}
.bt-turn button.is-held,
.bt-lookpad.is-held {
  background: rgba(251, 146, 60, 0.45);
  color: #fff;
}
.bt-rooms {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  padding: 0.65rem 0.75rem;
  background: #140e0a;
  border-top: 1px solid rgba(251, 191, 36, 0.2);
  overflow-x: auto;
}
.bt-rooms button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: transparent;
  color: #f3e8d0;
  font-family: "Share Tech Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.bt-rooms button.is-on,
.bt-rooms button:hover {
  background: rgba(251, 146, 60, 0.25);
  border-color: #fbbf24;
  color: #fff;
}
.bt-readout {
  padding: 0.75rem 0.9rem 1rem;
  border-top: 1px solid rgba(251, 191, 36, 0.15);
}
.bt-readout h3 {
  margin: 0 0 0.3rem;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: #fbbf24;
}
.bt-readout p {
  margin: 0;
  color: #d6c4a8;
  line-height: 1.45;
  max-width: 46rem;
}
@media (max-width: 720px) {
  /* 68vh put the stage, its chrome, the room picker and the readout at
     roughly a full screen, so there was never any page visible beside the
     tour to tell you it ended or to grab to scroll. 54vh leaves about
     150px of the page showing on a 812px-tall phone. */
  .bt-stage { height: 54vh; min-height: 300px; }
  .bt-hint { font-size: 0.6rem; }
}

/* The control row is a fixed-width object inside a variable-width stage.
   It needs about 346px and a 375px phone gives it 318.6, so the look pad
   was pushed past .bt-shell's overflow:hidden and clipped - 16.6px at
   375px, and at 320px all 64px of it, which left the phone with no
   labelled look control at all. Everything shrinks together here and
   nothing goes below the 44px touch floor; the stick gives up the most
   because it is the one with the most to give. */
@media (max-width: 430px),
       (max-height: 460px) and (orientation: landscape) {
  .bt-controls { gap: 0.4rem; padding: 0 0.5rem; }
  .bt-stick { width: 104px; height: 104px; }
  .bt-stick i { width: 44px; height: 44px; left: 30px; top: 30px; }
  .bt-turn { gap: 0.3rem; }
  .bt-turn button { min-width: 52px; min-height: 52px; font-size: 1.15rem; }
  .bt-lookpad { width: 52px; min-width: 52px; font-size: 0.54rem; }
}

@media (max-width: 430px) {
  /* The minimap owns the top-right corner, and a centred hint ran straight
     under it - both wrapped lines, behind a 72% opaque panel, and that hint
     is the only place the touch controls are explained. The top strip
     genuinely cannot hold both at this width, so the hint drops to just
     above the controls, which is where a game puts transient instructions
     anyway. In SCAN the controls are hidden and it simply floats lower. */
  .bt-hint { top: auto; bottom: 124px; }
}

@media (max-width: 360px) {
  .bt-stick { width: 88px; height: 88px; }
  .bt-stick i { width: 44px; height: 44px; left: 22px; top: 22px; }
  .bt-hint { bottom: 108px; }
}

/* A landscape phone is about 375px tall and 812px wide, so neither the
   720px width query nor the base min-height: 360px applies to it, and the
   stage came out at 96% of the screen - the room picker could never be
   visible at the same time as the view it selects. Key off height, which
   is the dimension that is actually scarce in landscape. */
@media (max-height: 460px) and (orientation: landscape) {
  /* 58, not 64: the chrome bar grew to 59.4px when the mode button took
     its 44px touch target, and the goal here is that the stage, the chrome
     and the room picker are all on screen at once - 58vh + 59.4 + 80.8
     clears a 375px-tall landscape phone with room to spare. */
  .bt-stage { height: 58vh; min-height: 0; }
}