/* Shared backdrop. Keep each page's cards, tables and form theme intact. */
:root {
  --site-sand: #e8dfcf;
  --site-sand-ink: #243c4a;
}
html { background-color: var(--site-sand) !important; }
body {
  isolation: isolate;
  min-height: 100vh;
  background: var(--site-sand) !important;
}
.site-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  isolation: isolate;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 6% 12%, rgba(255, 253, 246, .85), transparent 55%),
    radial-gradient(ellipse at 94% 70%, rgba(106, 142, 144, .12), transparent 50%),
    linear-gradient(135deg, #eee6d8, #e2d6c3);
}
.site-background::before {
  content: '';
  position: absolute;
  inset: -45%;
  opacity: .7;
  background-image:
    linear-gradient(90deg, rgba(41, 65, 77, .12) 1px, transparent 1px),
    linear-gradient(rgba(41, 65, 77, .10) 1px, transparent 1px),
    linear-gradient(90deg, transparent 9px, rgba(255, 253, 248, .65) 9px 10px, transparent 10px);
  background-size: 280px 440px;
  transform: rotate(-24deg);
  -webkit-mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, .2) 50%, #000);
  mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, .2) 50%, #000);
}
.site-background::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-radial-gradient(ellipse at 112% 16%, transparent 0 115px, rgba(73, 93, 96, .09) 116px 117px, transparent 118px 180px);
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000);
  mask-image: linear-gradient(90deg, transparent 30%, #000);
}
body footer {
  background: var(--site-sand) !important;
  border-top: 1px solid #c9bfae;
  color: #495b61;
}
body footer a { color: #24546a; }

/* These headings sit directly on the backdrop rather than inside a card. */
.tournaments-page .section-heading h2,
.match-finder-body .match-hero h1 { color: var(--site-sand-ink); }
.tournaments-page .section-eyebrow,
.match-finder-body .match-hero .eyebrow { color: #326558; }
.match-finder-body .match-hero p { color: #4b626c; }
.match-finder-body .hero-orb { display: none; }
.tournaments-page .tournament-count {
  color: #244e60;
  border-color: #b7c0b8;
  background: #f4efe5;
}
.tournaments-page .tournament-status { background: #102033; }
/* Transparent league panels relied on the previous dark page backdrop. */
#app-root section.panel { background: #101d30; }
#app-root .league-select { background-color: #101d30; color: #e2e8f0; }

@media (max-width: 640px) {
  .site-background::before { opacity: .55; background-size: 170px 280px; }
}
@media print {
  .site-background { display: none; }
  html, body { background: #fff !important; }
}