:root {
  color-scheme: dark;
  --brand-yellow: #ffe600;
  --brand-orange: #ff5a00;
  --brand-red: #f20d16;
  --brand-black: #0b0b0b;
  --brand-white: #fafafa;
  --ink: var(--brand-white);
  --muted: #bdbdbd;
  --line: #363636;
  --panel: #171717;
  --bg: var(--brand-black);
  --amber: var(--brand-yellow);
  --cyan: var(--brand-yellow);
  --red: var(--brand-orange);
}

body {
  background: var(--brand-black);
  color: var(--ink);
}

button, input {
  font: inherit;
}

button:not(:disabled) {
  cursor: pointer;
}

button:focus-visible, input:focus-visible {
  outline: 3px solid var(--brand-white);
  outline-offset: 4px;
}

.brand-artwork {
  display: block;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--line);
  background: var(--brand-white);
}

body.participant {
  border-top: 6px solid var(--brand-yellow);
}

.participant main {
  width: min(32rem, calc(100% - 2rem));
}

.participant #welcome-content .brand-artwork {
  width: 100%;
  margin: 1.5rem auto;
}

.participant h1, .participant h2 {
  color: var(--brand-yellow);
}

.participant #countdown {
  color: var(--brand-yellow);
  font-weight: 800;
}

.participant button {
  background: var(--brand-yellow);
  color: var(--brand-black);
  border: 1px solid var(--brand-yellow);
  margin: .25rem 0;
}

.participant button:not(:disabled):hover {
  background: var(--brand-white);
  border-color: var(--brand-white);
}

.participant #screen-button {
  background: transparent;
  color: var(--brand-yellow);
}

.participant #screen-button:hover {
  background: var(--brand-yellow);
  color: var(--brand-black);
}

.participant #status {
  color: var(--muted);
}

.participant #trivia {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 4px solid var(--brand-orange);
  padding: 1.25rem;
  text-align: left;
}

.participant #trivia-options button {
  text-align: left;
  margin: 0;
}

.participant .safety-notice {
  border-left: 3px solid var(--brand-red);
  padding: .75rem 1rem;
  color: var(--muted);
  text-align: left;
  font-size: .875rem;
}

.participant #config-menu {
  background: #0b0b0bf5;
}

/* Screen lighting must remain white, independent of the artwork palette. */
body.participant.light {
  background: #fff;
  color: var(--brand-black);
  border-top-color: #fff;
}

.participant.light h1, .participant.light h2, .participant.light #countdown,
.participant.light #status, .participant.light .safety-notice {
  color: var(--brand-black);
}

.participant.light #screen-button {
  background: var(--brand-black);
  color: var(--brand-white);
}

body.live {
  border-top: 6px solid var(--brand-yellow);
  background: radial-gradient(ellipse at top right, #332000, var(--brand-black) 55%);
}

.live .brand-heading {
  display: flex;
  align-items: center;
  gap: 24px;
}

.live .brand-heading .brand-artwork {
  width: 150px;
  flex: 0 0 auto;
}

.live .topbar {
  border-bottom: 3px solid var(--brand-orange);
}

.live .control-auth input, .live #flash-duration {
  background: var(--brand-black);
}

.live .control-strip button, .live .roster-pagination button {
  background: var(--panel);
}

.live [data-show-command="start"] {
  background: var(--brand-yellow);
  color: var(--brand-black);
  border-color: var(--brand-yellow);
}

.live [data-show-command="start"]:not(:disabled):hover {
  background: var(--brand-white);
  color: var(--brand-black);
}

.live [data-show-command="end"] {
  border-color: var(--brand-red);
}

.live .field-wrap, .live .panel {
  background: var(--panel);
}

.live .live-pill {
  color: var(--brand-black);
}

.live .metrics {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

@media (max-width: 800px) {
  .live .brand-heading {
    gap: 16px;
  }

  .live .brand-heading .brand-artwork {
    width: 96px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  button {
    transition: background-color .15s, border-color .15s;
  }
}