:root {
  --holdem-bg-startup: url("/assets/v1/backgrounds/bg-001-antenna-hill-startup-desktop.webp");
  --holdem-bg-login: url("/assets/v1/backgrounds/bg-002-tv-station-login-desktop.webp");
  --holdem-bg-lobby: url("/assets/v1/backgrounds/bg-003-studio-lobby-desktop.webp");
  --holdem-bg-table-stage: url("/assets/v1/backgrounds/bg-008-old-starlight-stage-desktop.webp");
  --holdem-table-main: url("/assets/v1/table/tb-001-main-table.webp");
  --holdem-felt-tile: url("/assets/v1/table/tb-002-felt-tile.webp");
  --holdem-card-back: url("/assets/v1/cards/cd-007-standard-card-back.webp");
}

.holdem-pixel-asset {
  image-rendering: pixelated;
}

.holdem-background {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.holdem-bg-startup { background-image: var(--holdem-bg-startup); }
.holdem-bg-login { background-image: var(--holdem-bg-login); }
.holdem-bg-lobby { background-image: var(--holdem-bg-lobby); }
.holdem-bg-table-stage { background-image: var(--holdem-bg-table-stage); }

.holdem-table-sprite {
  aspect-ratio: 1558 / 736;
  background: var(--holdem-table-main) center / 100% 100% no-repeat;
}

.holdem-felt-surface {
  background-image: var(--holdem-felt-tile);
  background-repeat: repeat;
}

.holdem-card-back {
  aspect-ratio: 5 / 7;
  background: var(--holdem-card-back) center / contain no-repeat;
}

@media (max-width: 640px), (orientation: portrait) {
  :root {
    --holdem-bg-startup: url("/assets/v1/backgrounds/bg-001-antenna-hill-startup-mobile.webp");
    --holdem-bg-login: url("/assets/v1/backgrounds/bg-002-tv-station-login-mobile.webp");
    --holdem-bg-lobby: url("/assets/v1/backgrounds/bg-003-studio-lobby-mobile.webp");
    --holdem-bg-table-stage: url("/assets/v1/backgrounds/bg-008-old-starlight-stage-mobile.webp");
  }
}