#title-roll {
  cursor: pointer;
  user-select: none;
}

.group-head,
.order-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.order-stack {
  display: grid;
  gap: 7px;
}

.order-card {
  display: grid;
  gap: 7px;
  padding: 7px;
  border: 1px solid var(--edge);
  background: var(--page);
}

.order-card h3 {
  margin: 0;
  color: var(--text);
  font-size: 12px;
}

.order-card details {
  display: grid;
  gap: 7px;
}

.order-card details > .control-grid {
  margin-top: 7px;
}

.stage img {
  width: min(100%, calc(100dvh - 118px));
  height: min(100%, calc(100dvh - 118px));
  object-fit: contain;
}

.button-link {
  display: inline-grid;
  place-items: center;
  padding: 5px 8px;
  color: var(--hot);
  border: 1px solid var(--edge);
  background: var(--surface);
  text-decoration: none;
}

#malevich {
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: min(360px, calc(100% - 36px));
  padding: 8px 12px;
  transform: translateX(-50%);
  color: #e2d9c6;
  border: 1px solid #8e7d64;
  background: rgb(17 15 12 / 90%);
  text-align: center;
  font-family: serif;
  font-style: italic;
}

#malevich p {
  margin: 2px 0;
}

#atmosphere {
  position: fixed;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms linear;
}

.egg-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease-out;
}

#red-mist-canvas {
  top: auto;
  height: 26vh;
  z-index: 18;
}

#red-mist-canvas.red-mist-active,
#shadow-veil-canvas.shadow-veil-active,
#sun-caustic-canvas.sun-caustic-active,
#blizzard-canvas.blizzard-active,
#green-purple-smoke-canvas.green-purple-smoke-active {
  opacity: 1;
}

#blizzard-canvas {
  z-index: 17;
  mix-blend-mode: screen;
}

#shadow-veil-canvas {
  z-index: 16;
}

#green-purple-smoke-canvas {
  z-index: 15;
  mix-blend-mode: screen;
}

#sun-caustic-canvas {
  z-index: 14;
  mix-blend-mode: screen;
}

#white-void-blood-canvas {
  z-index: 58;
}

#white-void-blood-canvas.white-void-blood-active {
  opacity: 1;
}

#white-void-blackout {
  position: fixed;
  z-index: 60;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: #000;
  transition: opacity 220ms ease-out;
}

#white-void-blackout.white-void-blackout-active {
  pointer-events: auto;
  opacity: 1;
}

button.white-void-burned,
#title-roll.white-void-burned {
  pointer-events: none !important;
  opacity: 1 !important;
  color: #020202 !important;
  border-color: #fff !important;
  background: #f7f7f7 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

#atmosphere.red-mist-fallback {
  opacity: 0.7;
  background: radial-gradient(ellipse at 50% 110%, rgb(150 8 4 / 72%), transparent 62%);
  animation: breathe 4.8s ease-in-out infinite;
}

#atmosphere.shadow-veil-fallback {
  opacity: 0.72;
  background: radial-gradient(circle at 50% 45%, transparent 0 18%, rgb(0 0 0 / 92%) 92%);
}

#atmosphere.sun-glow-fallback {
  opacity: 0.58;
  background: radial-gradient(circle at 70% 55%, var(--egg-color, #e4b85c), transparent 54%);
  mix-blend-mode: screen;
  animation: breathe 6.4s ease-in-out infinite;
}

#atmosphere.green-purple-smoke-fallback {
  opacity: 0.5;
  background:
    radial-gradient(circle at 25% 70%, rgb(28 190 76 / 65%), transparent 40%),
    radial-gradient(circle at 75% 25%, rgb(142 48 210 / 65%), transparent 42%);
  mix-blend-mode: screen;
  animation: drift 8s ease-in-out infinite alternate;
}

#atmosphere.snow-storm-fallback {
  opacity: 0.48;
  background-image:
    radial-gradient(circle, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle, #cdefff 0 1px, transparent 1.5px);
  background-position: 0 0, 17px 13px;
  background-size: 29px 29px, 43px 43px;
  animation: snow 2.6s linear infinite;
}

body.white-void .app-shell {
  filter: grayscale(1) contrast(1.15);
}

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}

@keyframes drift {
  from { transform: translate3d(-2%, 1%, 0) scale(1.04); }
  to { transform: translate3d(2%, -1%, 0) scale(1.08); }
}

@keyframes snow {
  to { background-position: 29px 58px, -26px 99px; }
}

@media (prefers-reduced-motion: reduce) {
  #atmosphere {
    animation: none !important;
  }
}