/* === RASHOMON theme — black-and-white Kurosawa ink === */
body[data-screen="title-screen"] { filter: grayscale(0.95) contrast(1.15); }
#dialogue-screen { filter: grayscale(0.55) contrast(1.05); }
body { font-family: 'Noto Serif JP', 'Noto Serif SC', serif; background: #0c0a08; }
.title-poster { background: radial-gradient(circle at 50% 40%, rgba(180,170,140,0.05), transparent 60%); }
.title-line1, .title-line2 { color: #e8d8b8 !important; font-family: 'Noto Serif JP', serif !important; font-weight: 900 !important; letter-spacing: 16px !important; text-shadow: 0 0 1px #fff, 5px 5px 0 #1a1410, 10px 10px 30px rgba(255,255,255,0.10) !important; }
.kanji-bg { color: #d8c8a8 !important; opacity: 0.10 !important; font-size: 380px !important; font-family: 'Noto Serif JP', serif !important; font-weight: 400 !important; }
.title-tag, .route-tag, .title-foot, .title-starring-label { color: #d8c8a8 !important; letter-spacing: 8px !important; font-family: 'Noto Serif JP', serif !important; }
.title-quote { color: #a8987a !important; font-style: italic; font-family: 'Noto Serif JP', serif !important; }
.menu-btn { border-color: #d8c8a8 !important; color: #e8d8b8 !important; font-family: 'Noto Serif JP', serif !important; }
.menu-btn:hover { background: #d8c8a8 !important; color: #1a1410 !important; }
.route-card { border-color: #2a2520 !important; }
.route-card:hover { box-shadow: 0 0 40px rgba(216,200,168,0.20) !important; border-color: #d8c8a8 !important; }
#dialogue-box { border: 1px solid rgba(216,200,168,0.18) !important; }
#speaker-name { color: #d8c8a8 !important; }
.choice-btn { border-color: #d8c8a8 !important; color: #e8d8b8 !important; }
.letterbox.top, .letterbox.bottom { background: #0c0a08 !important; }
@keyframes rashomonRain { 0% { transform: translateY(0); } 100% { transform: translateY(20px); } }
#bg-layer::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(98deg, transparent 0px, transparent 4px, rgba(255,255,255,0.015) 5px, transparent 6px); animation: rashomonRain 0.4s linear infinite; }


/* === AUTO-INJECTED bg/cg CSS RULES (do not edit by hand) === */
#bg-layer.bg-bamboo { --bg-img: url('assets/bg/bamboo.png'); --bg-tint: radial-gradient(ellipse at 50% 40%,rgba(120,180,120,0.18) 0%,transparent 55%),linear-gradient(180deg,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.5) 100%); }
#bg-layer.bg-burning { --bg-img: url('assets/bg/burning.png'); --bg-tint: radial-gradient(circle at 50% 60%,rgba(255,120,40,0.25) 0%,transparent 55%),linear-gradient(180deg,rgba(60,20,5,0.2) 0%,rgba(0,0,0,0.6) 100%); }
#bg-layer.bg-clearing { --bg-img: url('assets/bg/clearing.png'); --bg-tint: linear-gradient(180deg,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.5) 100%); }
#bg-layer.bg-court { --bg-img: url('assets/bg/court.png'); --bg-tint: radial-gradient(ellipse at 50% 40%,rgba(180,160,120,0.15) 0%,transparent 60%),linear-gradient(180deg,rgba(20,15,10,0.2) 0%,rgba(0,0,0,0.55) 100%); }
#bg-layer.bg-forest { --bg-img: url('assets/bg/forest.png'); --bg-tint: radial-gradient(ellipse at 50% 40%,rgba(120,180,120,0.18) 0%,transparent 55%),linear-gradient(180deg,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.5) 100%); }
#bg-layer.bg-rashomon { --bg-img: url('assets/bg/rashomon.png'); --bg-tint: radial-gradient(ellipse at 50% 40%,rgba(180,160,120,0.15) 0%,transparent 60%),linear-gradient(180deg,rgba(20,15,10,0.2) 0%,rgba(0,0,0,0.55) 100%); }
#bg-layer.bg-shrine { --bg-img: url('assets/bg/shrine.png'); --bg-tint: radial-gradient(ellipse at 50% 40%,rgba(180,160,120,0.15) 0%,transparent 60%),linear-gradient(180deg,rgba(20,15,10,0.2) 0%,rgba(0,0,0,0.55) 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 === */