/* Dynamic styles for widgets and interactive elements */

/* Roulette widget styles */
.roulette-goal-box {
  transition: opacity 1s ease;
}

.roulette-goal-box.is-visible {
  display: flex;
  opacity: 1;
}

.roulette-goal-box.is-hidden {
  display: none;
  opacity: 0;
}

.roulette-box {
  transition: opacity 1s ease;
}

.roulette-box.is-visible {
  opacity: 1;
}

.roulette-box.is-hidden {
  opacity: 0;
  display: none;
}

/* Widget background styles */
.widget-chroma-bg {
  background: #00FF00;
}

.widget-transparent-bg {
  background: transparent;
}

/* Stream status styles */
.stream-status-badge {
  display: none;
}

.stream-status-badge.is-live {
  display: block;
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.15), rgba(239, 68, 68, 0.15));
  border: 1px solid rgba(220, 38, 38, 0.4);
}

.stream-status-indicator.is-live {
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.stream-status-text.is-live {
  color: #fca5a5;
}

.stream-status-badge.is-offline {
  display: block;
  background: rgba(107, 114, 128, 0.1);
  border: 1px solid rgba(107, 114, 128, 0.3);
}

.stream-status-indicator.is-offline {
  background: #6b7280;
  box-shadow: none;
  animation: none;
}

.stream-status-text.is-offline {
  color: #9ca3af;
}

.stream-viewer-count {
  display: none;
}

.stream-viewer-count.is-visible {
  display: inline;
}

/* Eliminated list styles */
.eliminated-list {
  display: none;
}

.eliminated-list.is-visible {
  display: block;
}

/* Modal styles */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.modal-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
}

/* User-themed elements with CSS variables */
.user-themed {
  background: var(--user-bg);
  color: var(--user-text);
}

/* Goal widget label styles */
.goal-label-center {
  left: 50%;
  top: 2px;
  transform: translateX(-50%);
}

/* Goal bounds styles */
.goal-bounds {
  position: relative;
  margin-top: 4px;
  font-size: 11px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  pointer-events: none;
}

.goal-bound-min {
  position: absolute;
  left: 6px;
}

.goal-bound-max {
  position: absolute;
  right: 6px;
}

/* Roulette frame positioning */
.ro-frame-positioned {
  position: relative;
}

.ro-bg-positioned {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ro-pointer-positioned {
  position: relative;
  z-index: 2;
}

.ro-track-positioned {
  position: relative;
  z-index: 1;
}