/* -----------------------------------------------------------
   DUELLY THEME TOKENS – duelly-theme.css
   Brand system based on your official guide:
   - Base: Black #111111, White #ffffff
   - Accent: Ember #ff5c45, Aqua #00c1de, Fog #d0cfcd
   - Edge: Highlight #ffb4ab, Lowlite #ff5c45
   -------------------------------------------------------- */

:root {
  /* BASE */
  --dc-base-black:   #111111;
  --dc-base-white:   #ffffff;

  /* ACCENTS */
  --dc-ember:        #ff5c45;  /* primary Duelly orange (LL bars) */
  --dc-aqua:         #00c1de;  /* energetic pop */
  --dc-fog:          #d0cfcd;  /* soft gray */

  /* EDGE / GRADIENT */
  --dc-edge-hi:      #ffb4ab;
  --dc-edge-low:     #ff5c45;

  /* NEUTRAL RANGE (compatible with your current arena colors) */
  --dc-bg-deep:      #050509;
  --dc-bg-arena:     #020617;
  --dc-bg-panel:     #0b0b0f;
  --dc-border-soft:  #1f2937;
  --dc-border-strong:#111827;
  --dc-text-main:    #f9fafb;
  --dc-text-muted:   #9ca3af;

  /* STATUS COLORS */
  --dc-success:      #22c55e;
  --dc-danger:       #ef4444;
  --dc-warning:      #facc15;
}

/* -----------------------------------------------------------
   GLOBAL
   -------------------------------------------------------- */

body {
  background: var(--dc-bg-deep);
  color: var(--dc-text-main);
}

/* Panels / rails / shells */

.shell {
  background: var(--dc-border-soft);
}

.left-rail,
.center,
.right-rail {
  background: var(--dc-bg-arena);
}

header {
  background: var(--dc-bg-panel);
  border-bottom: 1px solid var(--dc-border-soft);
}

/* Generic panel helper (use on new sections) */
.dc-panel {
  background: var(--dc-bg-panel);
  border: 1px solid var(--dc-border-soft);
  border-radius: 10px;
}

/* -----------------------------------------------------------
   TEXT + LABELS
   -------------------------------------------------------- */

.dc-text-main {
  color: var(--dc-text-main);
}

.dc-text-muted {
  color: var(--dc-text-muted);
}

.dc-text-ember {
  color: var(--dc-ember);
}

.dc-text-aqua {
  color: var(--dc-aqua);
}

/* Seat labels, status strips, chips, etc. */

.seat-label,
.status-strip,
.chat-header {
  background: rgba(15, 23, 42, 0.9);
  color: var(--dc-text-main);
}

/* -----------------------------------------------------------
   BUTTONS
   -------------------------------------------------------- */

button {
  background: #4b5563;
  color: var(--dc-text-main);
  border-radius: 999px;
  border: none;
}

/* Primary action (use for “Go Live”, “Start Round”, etc.) */
button.primary,
.dc-btn-primary {
  background: var(--dc-ember);
  color: #2b0500;
  font-weight: 600;
}

button.primary:hover,
.dc-btn-primary:hover {
  filter: brightness(1.06);
}

/* Ghost / subtle buttons */
.dc-btn-ghost {
  background: transparent;
  border: 1px solid var(--dc-border-soft);
  color: var(--dc-text-main);
}

.dc-btn-ghost:hover {
  background: rgba(15, 23, 42, 0.8);
}

/* Danger (stop / end / clear) */
button.danger,
.dc-btn-danger {
  background: var(--dc-danger);
  color: #fee2e2;
}

/* Nav / pills */
.nav-button {
  border: 1px solid var(--dc-border-soft);
  background: var(--dc-bg-panel);
}

.nav-button:hover {
  border-color: var(--dc-ember);
}

/* -----------------------------------------------------------
   BADGES / CHIPS
   -------------------------------------------------------- */

.dc-badge-live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  background: var(--dc-ember);
  color: #2b0500;
}

.dc-badge-aqua {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  background: rgba(0, 193, 222, 0.12);
  color: var(--dc-aqua);
  border: 1px solid rgba(0, 193, 222, 0.4);
}

/* Status pill (e.g., “Idle”, “Voting”, etc.) */
.vote-console-pill {
  border-radius: 999px;
  border: 1px solid var(--dc-border-soft);
  background: var(--dc-bg-panel);
  color: var(--dc-text-muted);
}

.vote-console-pill.live {
  border-color: var(--dc-ember);
  background: rgba(255, 92, 69, 0.12);
  color: var(--dc-ember);
}

/* -----------------------------------------------------------
   ARENA ELEMENTS
   -------------------------------------------------------- */

.video-main {
  background: var(--dc-bg-arena);
  border: 1px solid var(--dc-border-soft);
}

.seat {
  background: var(--dc-bg-panel);
  border: 1px solid var(--dc-border-strong);
}

/* Highlight Hot seat / active seat with Ember border */
.seat[data-seat="2"].seat-active,
.seat.seat-hot {
  border-color: var(--dc-ember);
  box-shadow: 0 0 0 1px rgba(255, 92, 69, 0.5);
}

/* Waiting overlay tint */
.seat .waiting-label {
  color: var(--dc-warning);
  background: rgba(0, 0, 0, 0.6);
}

/* Status strip at bottom of arena */
.status-strip {
  border-top: 1px solid var(--dc-border-strong);
}

/* -----------------------------------------------------------
   CHAT
   -------------------------------------------------------- */

.chat-header {
  border-bottom: 1px solid var(--dc-border-strong);
}

.chat-messages {
  background: var(--dc-bg-arena);
}

.chat-input {
  border-top: 1px solid var(--dc-border-strong);
}

/* Emoji button inherits theme */
#chat-emoji-btn {
  border: 1px solid var(--dc-border-soft);
  background: var(--dc-bg-panel);
  color: var(--dc-ember);
}

/* -----------------------------------------------------------
   CONSOLES (Host media, vote console, player console)
   -------------------------------------------------------- */

.media-console,
.vote-console,
.player-console {
  background: var(--dc-bg-panel);
  border: 1px solid var(--dc-border-strong);
}

/* Labels inside consoles */
.media-console-label,
.vote-console-label,
.pc-label {
  color: var(--dc-text-muted);
}

/* -----------------------------------------------------------
   GRADIENT EDGE – use for special overlays, podium, CTA
   -------------------------------------------------------- */

.dc-edge-gradient {
  background: linear-gradient(
    120deg,
    var(--dc-edge-hi) 0%,
    var(--dc-edge-low) 100%
  );
  color: #2b0500;
}

/* Example for CTA buttons that should really pop */
.dc-btn-edge {
  border-radius: 999px;
  padding: 6px 14px;
  border: none;
  font-weight: 600;
  background: linear-gradient(
    120deg,
    var(--dc-edge-hi) 0%,
    var(--dc-edge-low) 100%
  );
  color: #2b0500;
}

.dc-btn-edge:hover {
  filter: brightness(1.05);
}