/* === ETERNAL SUNSHINE theme — dusty orange + slate sky === */
body { font-family: 'Noto Serif SC', 'Caveat', serif; background: #0a0810; }
body[data-screen="title-screen"] { filter: saturate(0.85) contrast(0.95); }
.title-poster { background: radial-gradient(ellipse at 50% 60%, rgba(216,129,74,0.12), transparent 60%); }
.title-line1, .title-line2 { color: #f0d4a4 !important; font-family: 'Cormorant Garamond', 'Noto Serif SC', serif !important; font-style: italic !important; font-weight: 700 !important; text-shadow: 0 0 1px #d8814a, 3px 3px 0 #6a8aa0, 8px 8px 40px rgba(216,129,74,0.4) !important; letter-spacing: 4px !important; }
.kanji-bg { color: #6a8aa0 !important; opacity: 0.14 !important; font-family: 'Cormorant Garamond', serif !important; }
.title-tag, .route-tag { color: #d8814a !important; font-family: 'Caveat', cursive !important; font-size: 22px !important; letter-spacing: 4px !important; }
.title-quote { color: #b89878 !important; font-family: 'Caveat', cursive !important; font-size: 26px !important; font-style: italic !important; letter-spacing: 1px !important; }
.menu-btn { border: 1px solid #d8814a !important; color: #f0d4a4 !important; font-family: 'Caveat', cursive !important; font-size: 24px !important; letter-spacing: 2px !important; }
.menu-btn:hover { background: #6a8aa0 !important; color: #fff !important; }
.route-card { border-color: #4a4a5a !important; background: linear-gradient(135deg, rgba(106,138,160,0.12), rgba(10,8,16,0.98)) !important; }
.route-card:hover { box-shadow: 0 0 40px rgba(216,129,74,0.35) !important; border-color: #d8814a !important; }
#speaker-name { color: #d8814a !important; font-family: 'Caveat', cursive !important; font-size: 26px !important; }
.choice-btn { border-color: #6a8aa0 !important; color: #f0d4a4 !important; font-family: 'Caveat', cursive !important; font-size: 22px !important; }
.choice-btn:hover { background: #d8814a !important; color: #fff !important; }
#dialogue-box { border-radius: 6px !important; border: 1px solid rgba(216,129,74,0.25) !important; }


/* === AUTO-INJECTED bg/cg CSS RULES (do not edit by hand) === */
#bg-layer.bg-beach { --bg-img: url('assets/bg/bg-beach.png'); --bg-tint: radial-gradient(ellipse at 50% 60%,rgba(80,140,180,0.18) 0%,transparent 55%),linear-gradient(180deg,rgba(10,20,30,0.2) 0%,rgba(0,0,0,0.5) 100%); }
#bg-layer.bg-bedroom { --bg-img: url('assets/bg/bg-bedroom.png'); --bg-tint: radial-gradient(ellipse at 50% 40%,rgba(220,180,100,0.15) 0%,transparent 55%),linear-gradient(180deg,rgba(20,15,5,0.18) 0%,rgba(0,0,0,0.5) 100%); }
#bg-layer.bg-bookstore { --bg-img: url('assets/bg/bg-bookstore.png'); --bg-tint: radial-gradient(ellipse at 50% 40%,rgba(220,180,100,0.15) 0%,transparent 55%),linear-gradient(180deg,rgba(20,15,5,0.18) 0%,rgba(0,0,0,0.5) 100%); }
#bg-layer.bg-childhood { --bg-img: url('assets/bg/bg-childhood.png'); --bg-tint: radial-gradient(ellipse at 50% 40%,rgba(220,180,100,0.15) 0%,transparent 55%),linear-gradient(180deg,rgba(20,15,5,0.18) 0%,rgba(0,0,0,0.5) 100%); }
#bg-layer.bg-lacuna { --bg-img: url('assets/bg/bg-lacuna.png'); --bg-tint: linear-gradient(180deg,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.5) 100%); }
#bg-layer.bg-train { --bg-img: url('assets/bg/bg-train.png'); --bg-tint: radial-gradient(ellipse at 50% 60%,rgba(80,140,180,0.18) 0%,transparent 55%),linear-gradient(180deg,rgba(10,20,30,0.2) 0%,rgba(0,0,0,0.5) 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 === */