:root {
  --rally-cream: #fff5e3;
  --rally-sand: #f0cc83;
  --rally-orange: #d86b2b;
  --rally-ink: #583625;
  --rally-sky: #327d9b;
}

#cod-lobby {
  color: var(--rally-cream);
  background:
    linear-gradient(
      180deg,
      rgba(73, 46, 29, 0.8),
      rgba(115, 67, 36, 0.43) 48%,
      rgba(58, 38, 27, 0.85)
    ),
    url("../assets/lobby/approved-background.webp") center/cover !important;
}

#cod-lobby .bp-brand-dock {
  color: var(--rally-cream);
}

#cod-lobby .brand-ball,
.report-brand .brand-ball {
  color: var(--rally-sand);
  border-color: var(--rally-sand);
  background: rgba(172, 95, 43, 0.75);
}

#cod-lobby .brand-word b {
  color: var(--rally-sand);
}

#cod-lobby .bp-quick-dock {
  background: rgba(69, 44, 31, 0.85);
  border: 1px solid #f0cc8340;
}

#cod-lobby .bp-header-icon-btn {
  color: #f7e8d5;
}

#cod-lobby .bp-header-icon-btn.active,
#cod-lobby .bp-header-icon-btn:hover {
  background: var(--rally-sand);
  color: var(--rally-ink);
}

#cod-lobby .bp-header-icon-btn.muted {
  color: #ceb499;
  background: transparent;
}

#cod-lobby .arena-tabs {
  gap: 4px;
}

#cod-lobby .arena-tabs button {
  background: rgba(255, 245, 227, 0.94);
  color: var(--rally-ink);
  transition:
    background 0.18s,
    color 0.18s;
}

#cod-lobby .arena-tabs button.selected,
#cod-lobby .arena-tabs button:hover {
  color: var(--rally-cream);
  background: var(--rally-sky);
  box-shadow: inset 0 -3px var(--rally-sand);
}

#cod-lobby .lobby-heading .eyebrow,
#cod-lobby .setup-heading .eyebrow {
  color: #f2dab0;
}

#cod-lobby .lobby-heading h1 em,
#cod-lobby .setup-heading h1 em {
  color: var(--rally-sand);
}

#cod-lobby .arena-grid {
  gap: 10px;
}

#cod-lobby .arena-tile {
  border-radius: 5px;
}

#cod-lobby .arena-tile:hover {
  box-shadow:
    0 0 0 2px var(--rally-sand),
    0 12px 32px #57322460;
}

#cod-lobby .tile-controls {
  background: linear-gradient(135deg, #fff6e4, #edce99);
  color: #4c3824;
}

#cod-lobby .tile-stats {
  background: linear-gradient(135deg, #357b99f5, #24526bf5);
  color: #fff5e3;
  border: 1px solid #b9d6e055;
}

#cod-lobby #lobby-record {
  color: #deedf2;
}

#cod-lobby .tile-ai {
  background: linear-gradient(135deg, #ffedc7, #edbd75);
  color: #6c4029;
}

#cod-lobby .tile-pass {
  background: linear-gradient(120deg, #de7e39, #a9512c);
  color: #fff5e3;
}

#cod-lobby .tile-rules {
  background: linear-gradient(120deg, #bedbd9, #92bfc7);
  color: #214b53;
}

#cod-lobby .tile-hero {
  background:
    linear-gradient(
      180deg,
      rgba(89, 56, 35, 0.05) 20%,
      rgba(113, 62, 30, 0.64) 68%,
      rgba(61, 36, 24, 0.93)
    ),
    url("../assets/lobby/desert-rally-loader.webp") 20% center/cover;
  border: 2px solid var(--rally-sand);
  outline-color: #f0cc8345;
  color: var(--rally-cream);
}

#cod-lobby .tile-overline {
  color: var(--rally-cream);
  background: #d86b2bee;
  border: 1px solid #f0cc8360;
}

#cod-lobby .hero-tile-copy em {
  color: var(--rally-sand);
}

#cod-lobby .hero-tile-copy {
  text-shadow: 0 2px 14px #46132980;
}

#cod-lobby .arena-footer {
  color: #f1e1c6;
}

#cod-lobby .arena-footer kbd {
  border-color: #f0cc8380;
}

#cod-lobby .setup-panel {
  color: var(--rally-ink);
  background: linear-gradient(145deg, #fff7e9, #efe6d4);
  border-color: #fff4dc;
  outline-color: #f0cc8366;
}

#cod-lobby .setup-panel h2 em {
  color: var(--rally-orange);
}

#cod-lobby .bp-mode-card,
#cod-lobby .bp-diff-pill,
#cod-lobby .quality-cards .bp-gfx-card,
#cod-lobby .audio-settings button,
#cod-lobby .info-tabs button {
  background: #f3e2c8;
  color: var(--rally-ink);
  border-color: #d4b79a;
}

#cod-lobby .bp-mode-card.selected {
  background: var(--rally-orange);
  color: var(--rally-cream);
  border-color: var(--rally-orange);
  box-shadow:
    0 0 0 2px #fff4dc,
    0 0 0 3px var(--rally-orange);
}

#cod-lobby .bp-mode-card:hover {
  border-color: var(--rally-orange);
}

#cod-lobby .bp-diff-pill.active,
#cod-lobby .bp-diff-pill:hover,
#cod-lobby .quality-cards .bp-gfx-card.active,
#cod-lobby .quality-cards .bp-gfx-card:hover,
#cod-lobby .audio-settings button[aria-pressed="true"],
#cod-lobby .info-tabs button.selected,
#cod-lobby .info-tabs button:hover {
  background: var(--rally-orange);
  border-color: var(--rally-orange);
  color: var(--rally-cream);
}

#cod-lobby .performance-setting input {
  accent-color: var(--rally-orange) !important;
}

#cod-lobby .rally-race-format select {
  color: var(--rally-ink);
  background: #fff8eb;
  border-color: #d4b79a;
}

#cod-lobby .setup-poster {
  color: var(--rally-cream);
  background:
    linear-gradient(180deg, #63412b80, #956a3908 30%, #4e3123ee 83%),
    url("../assets/lobby/approved-background.webp") 72% center/cover;
  border: 2px solid var(--rally-sand);
}

#cod-lobby .poster-copy h2 em {
  color: var(--rally-sand);
}

#cod-lobby .poster-copy p,
#cod-lobby .poster-copy > small {
  color: #f2e8d3;
}

#cod-lobby .bp-deploy-btn {
  background: var(--rally-sand);
  color: #3f3021;
}

#cod-lobby .bp-deploy-btn:hover {
  background: #ffe2a6;
}

#cod-lobby .finish-cards .bp-swatch-item {
  background: #92512add;
  border-color: #f0cc8360;
}

#cod-lobby .finish-cards .bp-swatch-item.active {
  border-color: var(--rally-sand);
  background: #b97736e6;
}

#match-report {
  background:
    linear-gradient(180deg, #704128f2, #4b2f24ed),
    url("../assets/lobby/approved-background.webp") center/cover;
  color: var(--rally-cream);
}

#match-report .report-brand,
#match-report .report-scoreboard .eyebrow,
#match-report .report-player .panel-heading {
  color: var(--rally-sand);
}

#match-report .report-player {
  background: #98583355;
}

#match-report .report-center {
  background: #b8926430;
}

#match-report .report-actions button {
  background: #96542c;
  color: var(--rally-cream);
}

#match-report .report-actions button:first-child,
#match-report .report-actions button:nth-child(2) {
  background: var(--rally-sand);
  color: #3f3021;
}

#match-report .report-actions button:hover {
  background: #ffe2a6;
  color: #3f3021;
}

#lobby-scroll-hint,
#lobby-scroll-hint:hover,
#lobby-scroll-hint:focus-within {
  background: #75452cf2;
  color: var(--rally-cream);
  border-color: var(--rally-sand);
}

#lobby-scroll-hint small {
  color: #e4d4b3;
}

#lobby-scroll-hint button {
  background: #ad6b37;
  color: var(--rally-cream);
  border-color: #f0cc8370;
}

#lobby-scroll-hint button:hover,
#lobby-scroll-hint button:focus-visible,
#lobby-scroll-hint button:active,
#lobby-scroll-hint button.scrolling {
  background: var(--rally-sand);
  color: var(--rally-ink);
}

@media (max-width: 600px) {
  #cod-lobby .arena-grid {
    gap: 8px;
  }
}