/* Shared stage: always renders landscape. In portrait the stage is rotated
   90deg so the phone works even with system rotation locked. Size all
   content in vmin, which is the stage's short side in both orientations. */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: #000;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: none;
}

#stage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

@media (orientation: portrait) {
  #stage {
    width: 100vh;
    width: 100dvh;
    height: 100vw;
    transform: rotate(90deg) translateY(-100%);
    transform-origin: top left;
  }
}

/* CRT scanlines + vignette, layered over everything */
.crt::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.28) 3px,
    rgba(0, 0, 0, 0) 4px
  );
}

.crt::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 51;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.75) 100%);
  animation: crt-flicker 0.12s infinite;
}

@keyframes crt-flicker {
  0% { opacity: 0.92; }
  50% { opacity: 1; }
  100% { opacity: 0.95; }
}

/* ATM side-button labels */
.side {
  position: absolute;
  top: 22vmin;
  bottom: 6vmin;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 4.6vmin;
  z-index: 5;
}
.side.left { left: 0; }
.side.right { right: 0; text-align: right; }
.side span::before { content: "◀ "; }
.side.right span::before { content: ""; }
.side.right span::after { content: " ▶"; }

#hint {
  position: absolute;
  left: 50%;
  bottom: 3vmin;
  transform: translateX(-50%);
  z-index: 100;
  font: 3.2vmin/1.2 system-ui, sans-serif;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  padding: 1vmin 2.5vmin;
  border-radius: 2vmin;
  transition: opacity 0.6s;
  pointer-events: none;
}
#hint.gone { opacity: 0; }