/* === AUTO-INJECTED bg/cg CSS RULES (do not edit by hand) === */
#bg-layer.bg-basement { --bg-img: url('assets/bg/basement.png'); --bg-tint: radial-gradient(circle at 50% 30%,rgba(140,140,80,0.15) 0%,transparent 50%),linear-gradient(180deg,rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.8) 100%); }
#bg-layer.bg-flashback { --bg-img: url('assets/bg/flashback.png'); --bg-tint: linear-gradient(180deg,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.5) 100%); }
#bg-layer.bg-haberdashery { --bg-img: url('assets/bg/haberdashery.png'); --bg-tint: linear-gradient(180deg,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.5) 100%); }
#bg-layer.bg-snowstorm { --bg-img: url('assets/bg/snowstorm.png'); --bg-tint: radial-gradient(ellipse at 50% 50%,rgba(180,200,220,0.15) 0%,transparent 60%),linear-gradient(180deg,rgba(20,30,40,0.2) 0%,rgba(0,0,0,0.5) 100%); }
#bg-layer.bg-stable { --bg-img: url('assets/bg/stable.png'); --bg-tint: linear-gradient(180deg,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.5) 100%); }
#bg-layer.bg-stagecoach { --bg-img: url('assets/bg/stagecoach.png'); --bg-tint: radial-gradient(ellipse at 50% 50%,rgba(220,80,40,0.18) 0%,transparent 55%),linear-gradient(180deg,rgba(20,5,5,0.25) 0%,rgba(0,0,0,0.7) 100%); }
#bg-layer { background: var(--bg-tint, none), var(--bg-img, none) center/cover no-repeat; }
/* === END AUTO-INJECTED === */

/* === TITLE SCREEN BG IMAGE (auto) === */
#title-screen {
  background-image: url('assets/title.png');
  background-size: cover;
  background-position: center;
  position: relative;
}
/* Darkening + vignette overlay so the title/buttons read clearly */
#title-screen::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.65) 60%, rgba(0,0,0,0.85) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.20) 30%, rgba(0,0,0,0.45) 75%, rgba(0,0,0,0.85) 100%);
}
/* Make sure all the actual content sits above the overlay */
#title-screen > * { position: relative; z-index: 1; }
/* === END TITLE BG === */