/* The dispatcher's counter behind the ledger: the dark and the lamp-lit plate, the flame, rain on the window, the
   ashtray and its smoke (scene.js), 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;
}
/* The lamp-lit plate over the lamp-out one: the wick turned up, low or out (--lamp-glow, base.css). An oil lamp
   takes a moment to come up and to die down. */
.sc-lit { opacity: 0; }
.sc-lit.has-plate { opacity: var(--lamp-glow); transition: opacity 0.6s cubic-bezier(.3, .6, .4, 1); }

/* The flame breathing: a soft warm glow over the chimney that wavers the way a wick flame does. */
.sc-flame { position: absolute; pointer-events: none; mix-blend-mode: screen; opacity: var(--lamp-glow); transition: opacity 0.6s ease; }
.sc-flame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 50% at 50% 58%, rgba(255, 196, 120, 0.2), rgba(255, 150, 70, 0.07) 42%, transparent 68%);
  animation: flame-breathe 3.7s ease-in-out infinite;
}
.sc-flame::after {
  content: '';
  position: absolute;
  inset: 22% 32% 30%;
  background: radial-gradient(50% 50% at 50% 60%, rgba(255, 226, 170, 0.2), transparent 70%);
  animation: flame-flicker 1.9s steps(1, end) infinite, flame-breathe 2.3s ease-in-out infinite reverse;
}
@keyframes flame-breathe { 0%, 100% { opacity: 0.8; transform: scale(1); } 35% { opacity: 1; transform: scale(1.03, 1.05); } 70% { opacity: 0.88; transform: scale(0.99, 0.97); } }
@keyframes flame-flicker { 0% { opacity: 1; } 12% { opacity: 0.82; } 19% { opacity: 1; } 47% { opacity: 0.9; } 52% { opacity: 1; } 81% { opacity: 0.86; } 88% { opacity: 1; } }
#scene.hot-L .sc-flame { filter: brightness(1.25); }

/* Rain on the glass (roomrain.js): one canvas per pane. */
.sc-rain, .sc-desk { position: absolute; inset: 0; pointer-events: none; }
.plate-rain { position: absolute; pointer-events: none; mix-blend-mode: screen; opacity: calc(0.85 * var(--rain, 1)); }

/* The cigar in its ashtray, in the lamp's light or the window's; it fades when the desk has no room for it. */
.sc-tray { position: absolute; transition: opacity 0.6s ease; }
.sc-tray img { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; }
.sc-tray .t-lit { opacity: var(--lamp-glow); transition: opacity 0.6s cubic-bezier(.3, .6, .4, 1); }
/* the lit end: a faint orange breath under the ash */
.pl-ember {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 120, 40, 0.75), rgba(230, 70, 20, 0.3) 45%, transparent 72%);
  animation: ember-breathe 4.2s ease-in-out infinite;
}
@keyframes ember-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.9; } }
html:not(.has-tray) .sc-tray, html:not(.has-tray) .pl-ember { opacity: 0; }

/* The counter bell: cut out of both looks so it can dip and shiver when struck; a glint runs over the dome. */
.sc-bell { position: absolute; transform-origin: 50% 85%; transition: filter 0.3s ease; }
.sc-bell img { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; }
.sc-bell .t-lit { opacity: var(--lamp-glow); transition: opacity 0.6s cubic-bezier(.3, .6, .4, 1); }
.sc-bell .glint {
  position: absolute;
  left: 25%; top: 31%; width: 50%; height: 36%;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 236, 190, 0.42) 50%, transparent 65%);
  -webkit-mask: radial-gradient(closest-side, #000 70%, transparent);
  mask: radial-gradient(closest-side, #000 70%, transparent);
}
#scene.hot-B .sc-bell { filter: brightness(1.18) saturate(1.05); }
.prop.bell { border-radius: 50% 50% 40% 40%; }

/* Smoke and haze: screened over the desk, under the ledger. */
#smoke { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; transition: opacity 0.9s ease; }
html:not(.has-plate) #smoke { opacity: 0; }

/* The clickable lamp and cigar: invisible buttons over them, above the ledger's stage, only where the desk shows. */
#props { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.prop { position: absolute; pointer-events: auto; background: none; border: 0; padding: 0; margin: 0; border-radius: 10px; }
button.prop { cursor: pointer; }
button.prop:focus-visible { outline: 2px dashed var(--brass-hi, #d9b45c); outline-offset: 4px; }
html[data-room='board'] #props { display: 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-flame,
html[data-room='board'] .sc-rain,
html[data-room='board'] .sc-desk,
html[data-room='board'] #smoke,
html[data-room='board'] .sc-counter { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .sc-fog i, .sc-flame::before, .sc-flame::after, .pl-ember { animation: none; }
}