/* Fonte final de posicionamento dos objetos da sala. Mantém as peças laterais
   em duas colunas verticais e deixa o centro livre para o computador. */
.game-lobby-panel .game-lobby-bg {
  object-fit: contain;
  object-position: center top;
  background: #efc1ce;
}

.interactive-scene .scene-object-column {
  position: absolute;
  z-index: 4;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  pointer-events: none;
}

.interactive-scene .scene-object-column-left {
  top: 22%;
  bottom: 5%;
  left: 1.5%;
  width: 20%;
}

.interactive-scene .scene-object-column-right {
  top: 15%;
  right: 1.5%;
  bottom: 5%;
  width: 21%;
}

.interactive-scene .scene-object-column .scene-object {
  position: relative;
  inset: auto;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  height: auto;
  pointer-events: auto;
  transform: none;
}

.interactive-scene .scene-object-column .scene-object:hover,
.interactive-scene .scene-object-column .scene-object:focus-visible {
  transform: translateY(-4px) scale(1.045);
}

.interactive-scene .scene-object-column-left .scene-red-guide {
  width: min(9.5vw, 142px);
  transform: translate(42%, 12%);
}

.interactive-scene .scene-object-column-left .scene-red-guide:hover,
.interactive-scene .scene-object-column-left .scene-red-guide:focus-visible {
  transform: translate(42%, calc(12% - 4px)) scale(1.045);
}

.interactive-scene .scene-object-column-left .scene-cartilha {
  width: min(11.5vw, 174px);
}

.interactive-scene .scene-object-column-right .scene-faq {
  width: min(15vw, 235px);
  transform: translate(-30%, -8%) rotateZ(2deg);
  transform-origin: center bottom;
  filter: drop-shadow(0 11px 9px rgba(52, 27, 95, .22));
}

.interactive-scene .scene-object-column-right .scene-faq:hover,
.interactive-scene .scene-object-column-right .scene-faq:focus-visible {
  transform: translate(-30%, calc(-8% - 3px)) rotateZ(1deg) scale(1.035);
}

.interactive-scene .scene-object-column-right .scene-blue-guide {
  width: min(10.5vw, 158px);
}

/* O smartphone fica fora do notebook e recebe perspectiva de objeto apoiado. */
.interactive-scene .hall-assistant-launcher,
.interactive-scene .hall-assistant-launcher:hover {
  left: 74.5%;
  top: 84%;
  width: clamp(62px, 6.3vw, 88px);
  filter: none;
  transform: translate(-50%, -50%);
}

.interactive-scene .hall-assistant-phone {
  transform: rotateZ(-8deg);
  transform-origin: center bottom;
  filter: drop-shadow(0 11px 8px rgba(35, 15, 70, .34));
  transition: filter 180ms ease, transform 180ms ease;
}

.interactive-scene .hall-assistant-launcher:hover .hall-assistant-phone,
.interactive-scene .hall-assistant-launcher:focus-visible .hall-assistant-phone {
  filter: drop-shadow(0 14px 10px rgba(35, 15, 70, .42));
  transform: rotateZ(-6deg) translateY(-4px) scale(1.035);
}

.interactive-scene .hall-assistant-callout {
  right: calc(100% + 8px);
  top: 36%;
  transform: translateY(-50%) rotate(-4deg);
}

@media (max-width: 1100px) {
  .interactive-scene .scene-object-column-left {
    left: 1%;
    width: 21%;
  }

  .interactive-scene .scene-object-column-right {
    right: 1%;
    width: 22%;
  }

  .interactive-scene .scene-object-column-left .scene-red-guide {
    width: min(10.5vw, 112px);
  }

  .interactive-scene .scene-object-column-left .scene-cartilha {
    width: min(12.5vw, 132px);
  }

  .interactive-scene .scene-object-column-right .scene-faq {
    width: min(20vw, 210px);
  }

  .interactive-scene .scene-object-column-right .scene-blue-guide {
    width: min(11.5vw, 122px);
  }
}

/* Laptop: reserva uma faixa real entre o computador e cada coluna lateral. */
@media (min-width: 721px) and (max-width: 1180px) and (min-height: 601px) and (orientation: landscape) {
  .interactive-scene .scene-laptop {
    width: min(48vw, 66vh, 560px);
    left: 50%;
    top: 55%;
  }

  .interactive-scene .scene-object-column-left {
    top: 20%;
    bottom: 5%;
    left: 0;
    width: 18%;
  }

  .interactive-scene .scene-object-column-right {
    top: 18%;
    right: 0;
    bottom: 5%;
    width: 18%;
  }

  .interactive-scene .scene-object-column-left .scene-red-guide {
    width: min(8.8vw, 98px);
    transform: translate(12%, 7%);
  }

  .interactive-scene .scene-object-column-left .scene-red-guide:hover,
  .interactive-scene .scene-object-column-left .scene-red-guide:focus-visible {
    transform: translate(12%, calc(7% - 3px)) scale(1.035);
  }

  .interactive-scene .scene-object-column-left .scene-cartilha {
    width: min(10.8vw, 118px);
  }

  .interactive-scene .scene-object-column-right .scene-faq {
    width: min(15vw, 164px);
    transform: translate(0, -4%) rotateZ(1deg);
  }

  .interactive-scene .scene-object-column-right .scene-faq:hover,
  .interactive-scene .scene-object-column-right .scene-faq:focus-visible {
    transform: translate(0, calc(-4% - 3px)) rotateZ(0deg) scale(1.03);
  }

  .interactive-scene .scene-object-column-right .scene-blue-guide {
    width: min(9.6vw, 106px);
  }

  .interactive-scene .hall-assistant-launcher,
  .interactive-scene .hall-assistant-launcher:hover {
    left: 74%;
    top: 86%;
    width: clamp(52px, 5.8vw, 66px);
  }

  .interactive-scene .hall-assistant-callout {
    display: none;
  }
}

@media (max-width: 960px) and (max-height: 600px) and (orientation: landscape) {
  .game-lobby-panel .game-lobby-bg {
    object-fit: cover;
    object-position: center top;
  }

  .interactive-scene .scene-object-column-left,
  .interactive-scene .scene-object-column-right {
    top: 17%;
    bottom: 3%;
    width: 21%;
  }

  .interactive-scene .scene-object-column-left .scene-red-guide {
    width: min(10vw, 82px);
    transform: translate(34%, 10%);
  }

  .interactive-scene .scene-object-column-left .scene-red-guide:hover,
  .interactive-scene .scene-object-column-left .scene-red-guide:focus-visible {
    transform: translate(34%, calc(10% - 3px)) scale(1.035);
  }

  .interactive-scene .scene-object-column-left .scene-cartilha {
    width: min(11vw, 90px);
  }

  .interactive-scene .scene-object-column-right .scene-faq {
    width: min(14vw, 118px);
    transform: translate(-4%, 3%) rotateZ(1deg);
  }

  .interactive-scene .scene-object-column-right .scene-faq:hover,
  .interactive-scene .scene-object-column-right .scene-faq:focus-visible {
    transform: translate(-4%, calc(3% - 3px)) rotateZ(0deg) scale(1.03);
  }

  .interactive-scene .scene-object-column-right .scene-blue-guide {
    width: min(10.5vw, 86px);
  }

  .interactive-scene .hall-assistant-launcher,
  .interactive-scene .hall-assistant-launcher:hover {
    left: 74.5%;
    top: 84%;
    width: clamp(46px, 6.2vw, 58px);
  }

  .interactive-scene .hall-assistant-callout {
    display: none;
  }
}

@media (min-aspect-ratio: 16 / 9) {
  .game-lobby-panel .game-lobby-bg {
    object-fit: cover;
    object-position: center top;
  }
}

@media (min-width: 721px) and (max-width: 900px) and (orientation: portrait) {
  .interactive-scene .scene-laptop {
    width: min(55vw, 430px);
    left: 50%;
    top: 46%;
  }

  .interactive-scene .scene-object-column-left,
  .interactive-scene .scene-object-column-right {
    top: 28%;
    bottom: 5%;
    width: 20%;
  }

  .interactive-scene .scene-object-column-left { left: 0; }
  .interactive-scene .scene-object-column-right { right: 0; }

  .interactive-scene .scene-object-column-left .scene-red-guide,
  .interactive-scene .scene-object-column-right .scene-blue-guide {
    width: min(13vw, 104px);
  }

  .interactive-scene .scene-object-column-left .scene-red-guide,
  .interactive-scene .scene-object-column-left .scene-red-guide:hover,
  .interactive-scene .scene-object-column-left .scene-red-guide:focus-visible,
  .interactive-scene .scene-object-column-right .scene-faq,
  .interactive-scene .scene-object-column-right .scene-faq:hover,
  .interactive-scene .scene-object-column-right .scene-faq:focus-visible {
    transform: none;
  }

  .interactive-scene .scene-object-column-left .scene-cartilha {
    width: min(14.5vw, 116px);
  }

  .interactive-scene .scene-object-column-right .scene-faq {
    width: min(17vw, 136px);
  }

  .interactive-scene .hall-assistant-launcher,
  .interactive-scene .hall-assistant-launcher:hover {
    left: 73%;
    top: 84%;
    width: clamp(50px, 7vw, 62px);
  }

  .interactive-scene .hall-assistant-callout {
    display: none;
  }
}

@media (max-width: 720px) and (orientation: portrait) {
  .interactive-scene .scene-laptop {
    width: min(60vw, 430px);
    top: 43%;
  }

  .interactive-scene .scene-object-column-left,
  .interactive-scene .scene-object-column-right {
    top: 31%;
    bottom: 4%;
    width: 22%;
  }

  .interactive-scene .scene-object-column-left .scene-red-guide,
  .interactive-scene .scene-object-column-right .scene-blue-guide {
    width: min(16vw, 90px);
  }

  .interactive-scene .scene-object-column-left .scene-cartilha {
    width: min(18vw, 102px);
  }

  .interactive-scene .scene-object-column-right .scene-faq {
    width: min(20vw, 112px);
    transform: none;
  }

  .interactive-scene .scene-object-column-right .scene-faq:hover,
  .interactive-scene .scene-object-column-right .scene-faq:focus-visible {
    transform: translateY(-3px) scale(1.03);
  }

  .interactive-scene .hall-assistant-launcher,
  .interactive-scene .hall-assistant-launcher:hover {
    left: 73%;
    top: 84%;
    width: clamp(48px, 12vw, 58px);
  }

  .interactive-scene .hall-assistant-callout {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .interactive-scene .scene-object-column .scene-object,
  .interactive-scene .hall-assistant-phone {
    transition: none;
  }
}