/* === MATRIX theme — emerald digital code === */
body { font-family: 'Courier Prime', 'Noto Serif SC', monospace; background: #000; }
body[data-screen="title-screen"]::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.15;
  background: repeating-linear-gradient(0deg, #00ff66 0px, #00ff66 1px, transparent 2px, transparent 24px); animation: matrixDrift 12s linear infinite; }
@keyframes matrixDrift { 0% { background-position: 0 0; } 100% { background-position: 0 1024px; } }
.title-poster { background: radial-gradient(ellipse at 50% 50%, rgba(0,255,102,0.08), transparent 60%); }
.title-line1, .title-line2 { color: #00ff66 !important; font-family: 'Courier Prime', monospace !important; font-weight: 700 !important; text-shadow: 0 0 4px #00ff66, 0 0 18px rgba(0,255,102,0.7), 0 0 50px rgba(0,255,102,0.45) !important; letter-spacing: 12px !important; }
.kanji-bg { color: #00ff66 !important; opacity: 0.10 !important; font-family: 'Courier Prime', monospace !important; }
.title-tag, .chapter-card-tag, .route-tag, .route-end-tag, .title-foot, .title-starring-label,
#dialogue-controls button, .menu-btn { font-family: 'Courier Prime', monospace !important; color: #00cc55 !important; }
.title-quote { color: #00aa44 !important; font-family: 'Courier Prime', monospace !important; }
.menu-btn { border-color: #00ff66 !important; color: #00ff66 !important; background: rgba(0,30,15,0.5) !important; text-shadow: 0 0 6px #00ff66 !important; }
.menu-btn:hover { background: #00ff66 !important; color: #000 !important; box-shadow: 0 0 24px rgba(0,255,102,0.7) !important; text-shadow: none !important; }
.route-card { border-color: #006633 !important; background: linear-gradient(135deg, rgba(0,30,15,0.5), rgba(0,8,4,0.98)) !important; }
.route-card:hover { box-shadow: 0 0 60px rgba(0,255,102,0.5) !important; border-color: #00ff66 !important; }
#speaker-name { color: #00ff66 !important; font-family: 'Courier Prime', monospace !important; text-shadow: 0 0 6px #00ff66 !important; }
.choice-btn { border-color: #00ff66 !important; color: #00ff66 !important; background: rgba(0,30,15,0.4) !important; font-family: 'Courier Prime', monospace !important; text-shadow: 0 0 4px #00ff66 !important; }
.choice-btn:hover { background: #00ff66 !important; color: #000 !important; text-shadow: none !important; }
#dialogue-box { border-top: 1px solid rgba(0,255,102,0.30) !important; }


/* === AUTO-INJECTED bg/cg CSS RULES (do not edit by hand) === */
#bg-layer.bg-construct { --bg-img: url('assets/bg/bg-construct.png'); --bg-tint: radial-gradient(ellipse at 50% 50%,rgba(180,140,80,0.15) 0%,transparent 55%),linear-gradient(180deg,rgba(15,10,5,0.2) 0%,rgba(0,0,0,0.55) 100%); }
#bg-layer.bg-cubicle { --bg-img: url('assets/bg/bg-cubicle.png'); --bg-tint: radial-gradient(ellipse at 50% 30%,rgba(160,200,140,0.12) 0%,transparent 55%),linear-gradient(180deg,rgba(20,25,15,0.25) 0%,rgba(0,0,0,0.6) 100%); }
#bg-layer.bg-mirror { --bg-img: url('assets/bg/bg-mirror.png'); --bg-tint: linear-gradient(180deg,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.5) 100%); }
#bg-layer.bg-nebuchadnezzar { --bg-img: url('assets/bg/bg-nebuchadnezzar.png'); --bg-tint: radial-gradient(ellipse at 50% 50%,rgba(180,140,80,0.15) 0%,transparent 55%),linear-gradient(180deg,rgba(15,10,5,0.2) 0%,rgba(0,0,0,0.55) 100%); }
#bg-layer.bg-rooftop { --bg-img: url('assets/bg/bg-rooftop.png'); --bg-tint: radial-gradient(ellipse at 50% 30%,rgba(120,160,200,0.15) 0%,transparent 55%),linear-gradient(180deg,rgba(10,15,25,0.2) 0%,rgba(0,0,0,0.55) 100%); }
#bg-layer.bg-subway { --bg-img: url('assets/bg/bg-subway.png'); --bg-tint: radial-gradient(ellipse at 50% 50%,rgba(180,140,80,0.15) 0%,transparent 55%),linear-gradient(180deg,rgba(15,10,5,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 === */