/* Shared blue/orange stream background for OBS widgets */
:root {
  --stream-bg-image: url("/img/stream-bg.jpg");
  --overlay-stack-width: 640px;
  --chat-stack-width: 612px;
}

.stream-bg,
.slots-widget.stream-bg,
.chat-widget.stream-bg,
.panel.stream-bg,
.slot-machine.stream-bg {
  position: relative;
  background-color: #08080c;
  background-image:
    linear-gradient(180deg, rgba(8, 8, 14, 0.72) 0%, rgba(6, 6, 10, 0.82) 100%),
    var(--stream-bg-image);
  background-size: cover;
  background-position: center;
}

.slots-widget.stream-bg,
.chat-widget.stream-bg,
.panel.stream-bg,
.slot-machine.stream-bg {
  overflow: hidden;
}

.panel.stream-bg .panel-body,
.chat-widget.stream-bg .chat-messages {
  overflow: auto;
}

.panel.stream-bg .panel-body.treadmill-display {
  overflow: visible;
}

.stream-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 75% 55% at 15% 15%, rgba(79, 195, 247, 0.16) 0%, transparent 58%),
    radial-gradient(ellipse 70% 50% at 88% 82%, rgba(255, 87, 34, 0.18) 0%, transparent 55%);
  z-index: 0;
}

.stream-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.35);
  z-index: 0;
}

.stream-bg > * {
  position: relative;
  z-index: 1;
}

.stream-bg .panel-header,
.stream-bg .slots-header {
  background: rgba(8, 8, 12, 0.55);
  backdrop-filter: blur(8px);
}

.stream-bg .panel-body,
.stream-bg .slots-body,
.stream-bg .chat-messages {
  background: transparent;
}

.stream-bg .stat-box {
  background: rgba(12, 12, 18, 0.58);
  backdrop-filter: blur(6px);
}

.stream-bg .chat-line {
  background: rgba(10, 10, 16, 0.58);
  backdrop-filter: blur(5px);
}

.stream-bg .chat-line.mod {
  background: rgba(255, 87, 34, 0.12);
}

.stream-bg .chat-line.sub {
  background: rgba(79, 195, 247, 0.1);
}

.stream-bg .slot-machine.stream-bg,
.slot-machine.stream-bg {
  background-color: #08080c;
  background-image:
    linear-gradient(180deg, rgba(10, 10, 16, 0.74) 0%, rgba(8, 8, 12, 0.84) 100%),
    var(--stream-bg-image);
  background-size: cover;
  background-position: center;
}

.stream-bg .reel-window,
.stream-bg .reel-window.triple {
  background: rgba(6, 6, 10, 0.72);
  backdrop-filter: blur(4px);
}

.stream-bg .slots-row {
  background: rgba(12, 12, 18, 0.55);
  backdrop-filter: blur(4px);
}