/* The dispatcher's counter behind the ledger, and fog off the river. */

#scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #090c0e;
}

.sc-counter {
  position: absolute;
  inset: 0;
  /* Drawn stand-in until the render arrives: dark oak boards under a lamp, the window's cold light at the top. */
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(120, 150, 170, 0.22), transparent 70%),
    radial-gradient(70% 60% at 30% 65%, rgba(255, 190, 110, 0.16), transparent 70%),
    linear-gradient(180deg, #0d1316 0 14%, #1e140c 14% 15%, transparent 15%),
    var(--img-desk-wood, none),
    linear-gradient(180deg, #2a1a0f, #160d07);
  background-size: auto, auto, auto, 1100px 550px, auto;
  background-blend-mode: normal, screen, normal, multiply, normal;
  filter: brightness(0.82);
  transition: opacity 0.8s ease;
}
.sc-counter.has-plate {
  background: var(--plate) center / cover no-repeat;
  filter: none;
}

/* Two slow banks of fog drifting across the window side of the room. Transform only. */
.sc-fog { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0.5; }
.sc-fog i {
  position: absolute;
  left: -40%;
  width: 180%;
  height: 46%;
  top: -12%;
  background: radial-gradient(40% 50% at 30% 50%, rgba(170, 190, 205, 0.14), transparent 70%),
              radial-gradient(35% 45% at 70% 40%, rgba(150, 175, 195, 0.12), transparent 70%);
  filter: blur(18px);
  animation: fog-drift 95s linear infinite alternate;
}
.sc-fog i + i { top: -4%; opacity: 0.7; animation-duration: 140s; animation-direction: alternate-reverse; }
@keyframes fog-drift { from { transform: translate3d(-6%, 0, 0); } to { transform: translate3d(14%, 2%, 0); } }

.sc-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 95% at 50% 55%, transparent 55%, rgba(0, 0, 0, 0.55));
}

/* While the check board is up it covers the room. */
html[data-room='board'] .sc-fog,
html[data-room='board'] .sc-counter { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .sc-fog i { animation: none; }
}