.game-viewport {
  position: relative;
}

.vr-enter-btn {
  position: fixed;
  top: 12px;
  right: 12px;
  left: auto;
  z-index: 100000;
  padding: 10px 14px;
  border: 1px solid #c6a15a;
  background: rgba(20, 14, 8, 0.92);
  color: #f3e6c8;
  font: 15px/1.2 sans-serif;
  cursor: pointer;
}

.vr-enter-btn.is-active {
  position: fixed;
  top: 12px;
  right: 12px;
  left: auto;
  z-index: 100000;
}

#vr-root {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90000;
  background: #1a140e;
}

#vr-root.is-on {
  display: block;
}

/* rel28 (A1/A2 en vivo): con la vista 3D prendida en el monitor (#vr-root z 90000) la selección de
   personaje, la creación, el login y el cargador "Entrando al mundo" quedaban DEBAJO del canvas: se
   veía el 3D encima y el click caía en el panel 3D (entraba otro personaje). Las pantallas fuera del
   juego van arriba del canvas; en el visor se siguen viendo por el espejo VR (vrCreate/vrLoading). */
#screen-loading:not(.screen-hidden),
#screen-auth:not(.screen-hidden),
#screen-character-select:not(.screen-hidden),
#screen-character:not(.screen-hidden) {
  z-index: 90010;
}

#vr-root canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

#vr-crosshair {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border: 2px solid #f3e6c8;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}

#vr-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at center, transparent 38%, rgba(0, 0, 0, 0.78) 100%);
  z-index: 3;
}

/* Paso a paso: viñeta suave mientras la cámara se traslada (nivel desde vrLocomotion.js). */
#vr-vignette.is-walk:not(.is-on) {
  opacity: var(--vr-walk-vignette, 0);
}

#vr-vignette.is-on {
  opacity: 1;
}

#vr-hint {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  color: #f3e6c8;
  font: 14px/1.3 sans-serif;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
  z-index: 2;
  white-space: nowrap;
}

/* Opciones › VR (2D): Suave / Normal / Firme */
#options-modal .options-vr-choice .options-control {
  display: flex;
  gap: 6px;
}
#options-modal .options-vr-choice .ao-btn.is-active {
  color: #fff3cf;
  border-color: #e8c85a;
  box-shadow: inset 0 0 0 1px #e8c85a, 0 0 6px rgba(232, 200, 90, 0.35);
}
#options-modal .options-vr-choice.is-disabled {
  opacity: 0.5;
}