/* === FAREWELL MY CONCUBINE theme — Peking opera vermilion, ink black, faded gold === */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700;900&family=Ma+Shan+Zheng&family=ZCOOL+XiaoWei&display=swap');

body {
  font-family: 'Noto Serif SC', 'Songti SC', serif;
  background: #0a0306;
}

/* Title screen background — empty stage with sword */
#title-screen {
  background-image: url('assets/title.png');
  background-size: cover;
  background-position: center;
  position: relative;
}
#title-screen::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(120,20,20,0.20) 0%, rgba(0,0,0,0.78) 70%, rgba(0,0,0,0.95) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(20,5,5,0.30) 30%, rgba(0,0,0,0.70) 80%, rgba(0,0,0,0.96) 100%);
}
#title-screen > * { position: relative; z-index: 1; }

/* Backgrounds: warm vermilion shift */
#bg-layer { filter: contrast(1.08) brightness(0.94) saturate(1.05); }
.cg-img, #cg-viewer img, .route-portrait, .speaker-portrait, .sprite img {
  filter: contrast(1.05);
}

/* Ink-wash grain veil */
body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 9998;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.6  0 0 0 0 0.4  0 0 0 0 0.3  0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.22'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.40;
}

/* === Title screen — opera poster aesthetics === */

.title-line1, .title-line2 {
  color: #f0c878 !important;
  font-family: 'ZCOOL XiaoWei', 'Ma Shan Zheng', 'Noto Serif SC', serif !important;
  font-weight: 700 !important;
  letter-spacing: 12px !important;
  text-shadow:
    0 0 1px #f0c878,
    3px 3px 0 rgba(80,10,10,0.85),
    6px 6px 0 rgba(120,20,20,0.6),
    0 0 36px rgba(240,200,120,0.18) !important;
}
.title-line1 { font-size: 5.0rem !important; }
.title-line2 { font-size: 5.6rem !important; }

/* 戏 kanji watermark — deep vermilion */
.kanji-bg {
  color: rgba(140,20,20,0.22) !important;
  opacity: 1 !important;
  font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif !important;
  font-weight: 900 !important;
  font-size: 48vh !important;
  text-shadow: 0 0 100px rgba(140,20,20,0.25) !important;
}

.title-sub {
  color: #f0c878 !important;
  font-family: 'ZCOOL XiaoWei', 'Ma Shan Zheng', 'Noto Serif SC', serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.8em !important;
  text-shadow: 0 0 18px rgba(0,0,0,0.85), 0 2px 4px rgba(0,0,0,0.95) !important;
  margin-top: 12px !important;
  font-size: 2.2rem !important;
}

.title-tag, .title-foot {
  color: #8a6a4a !important;
  font-family: 'Noto Serif SC', serif !important;
  letter-spacing: 6px !important;
  border-top: 1px solid rgba(140,100,60,0.30);
  border-bottom: 1px solid rgba(140,100,60,0.30);
  padding: 4px 0 !important;
}

.title-quote {
  color: #d8a868 !important;
  font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.2em !important;
  font-size: 1.7rem !important;
  text-shadow: 0 0 20px rgba(0,0,0,0.7) !important;
}

.title-starring-label {
  color: #8a6a4a !important;
  font-family: 'Noto Serif SC', serif !important;
  letter-spacing: 0.55em !important;
  font-size: 0.78rem !important;
}
.title-starring {
  color: #c89060 !important;
  font-family: 'Noto Serif SC', serif !important;
  letter-spacing: 4px !important;
}

/* === Buttons — ornate red-lacquer panels === */
.menu-btn, .choice-btn, #dialogue-controls button, .lang-toggle {
  background: linear-gradient(180deg, rgba(80,10,10,0.92), rgba(40,5,5,0.96)) !important;
  color: #f0c878 !important;
  border: 1px solid #8a3030 !important;
  border-radius: 0 !important;
  font-family: 'Noto Serif SC', serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.3em !important;
  text-shadow: 0 0 6px rgba(240,200,120,0.18) !important;
}
.menu-btn:hover, .choice-btn:hover, #dialogue-controls button:hover, .lang-toggle:hover {
  background: linear-gradient(180deg, rgba(180,40,40,0.92), rgba(100,15,15,0.96)) !important;
  color: #fff0d0 !important;
  border-color: #f0c878 !important;
  box-shadow: 0 0 0 1px #8a3030, 0 0 28px rgba(180,40,40,0.32) !important;
  text-shadow: 0 0 8px rgba(240,200,120,0.55) !important;
}

/* === Route screen === */
.route-tag, .route-end-tag {
  font-family: 'Noto Serif SC', serif !important;
  color: #8a6a4a !important;
  letter-spacing: 0.5em !important;
}
.route-heading {
  font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif !important;
  font-weight: 400 !important;
  font-size: 1.95rem !important;
  color: #f0c878 !important;
  letter-spacing: 0.3em !important;
  border-top: 2px solid #8a3030;
  border-bottom: 2px solid #8a3030;
  padding: 18px 0 !important;
  margin: 24px auto !important;
  display: inline-block;
}
.route-intro {
  font-family: 'Noto Serif SC', serif !important;
  font-size: 0.98rem !important;
  line-height: 1.95 !important;
  color: #c89060 !important;
  text-align: justify;
}

.route-card {
  background: linear-gradient(180deg, rgba(40,10,10,0.94), rgba(10,3,3,0.98)) !important;
  border: 2px solid #6a2020 !important;
  border-radius: 0 !important;
  position: relative;
}
.route-card::before {
  content: '';
  position: absolute; top: 4px; left: 4px; right: 4px; bottom: 4px;
  border: 1px solid rgba(180,120,60,0.30);
  pointer-events: none;
}
.route-card:hover {
  border-color: #f0c878 !important;
  box-shadow: 0 0 32px rgba(180,40,40,0.40), inset 0 0 24px rgba(40,10,10,0.6) !important;
  transform: translateY(-3px);
}
.route-card.locked {
  border-style: dashed !important;
  background: repeating-linear-gradient(45deg,
    rgba(40,10,10,0.94), rgba(40,10,10,0.94) 6px,
    rgba(10,3,3,0.98) 6px, rgba(10,3,3,0.98) 12px) !important;
}
.route-card .route-num {
  font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif !important;
  font-weight: 900 !important;
  color: #f0c878 !important;
  text-shadow: 0 0 12px rgba(240,200,120,0.35) !important;
}
.route-card .route-title {
  font-family: 'Noto Serif SC', serif !important;
  font-weight: 700 !important;
  color: #f0c878 !important;
  letter-spacing: 0.06em !important;
}
.route-card .route-subtitle {
  font-family: 'Noto Serif SC', serif !important;
  color: #8a6a4a !important;
  font-style: italic;
}
.route-card .cleared-stamp {
  border: 2px solid #c89060 !important;
  color: #c89060 !important;
  font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif !important;
  letter-spacing: 0.4em !important;
  transform: rotate(-8deg);
}

/* === Dialogue box === */
#dialogue-box {
  border-top: 1px solid rgba(180,120,60,0.40) !important;
  background: linear-gradient(180deg, transparent 0%, rgba(10,3,3,0.96) 18%, rgba(0,0,0,0.99) 100%) !important;
}
#speaker-name {
  font-family: 'Noto Serif SC', serif !important;
  color: #f0c878 !important;
  font-weight: 700 !important;
  letter-spacing: 0.45em !important;
  border-bottom: 1px solid rgba(240,200,120,0.4);
  padding-bottom: 4px !important;
}
#dialogue-text {
  font-family: 'Noto Serif SC', serif !important;
  color: #f4e4c4 !important;
  letter-spacing: 0.06em !important;
}
#dialogue-text-sub {
  font-family: 'Noto Serif SC', serif !important;
  color: #8a6a4a !important;
  font-style: italic;
  letter-spacing: 0.04em !important;
}

#choice-overlay {
  background: rgba(10,3,3,0.88) !important;
  backdrop-filter: blur(2px);
}
#choice-prompt {
  font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif !important;
  color: #f0c878 !important;
  letter-spacing: 0.5em !important;
  font-size: 1.4rem !important;
}

#route-end-card {
  background: rgba(10,3,3,0.98) !important;
  border: 2px solid #8a3030 !important;
}
.route-end-title {
  font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif !important;
  color: #f0c878 !important;
  letter-spacing: 0.3em !important;
  font-size: 2.2rem !important;
}
.route-end-desc {
  font-family: 'Noto Serif SC', serif !important;
  color: #c89060 !important;
  line-height: 1.95 !important;
}

.overlay { background: rgba(10,3,3,0.96) !important; }
.overlay h2, .overlay h3 {
  font-family: 'Noto Serif SC', serif !important;
  color: #f0c878 !important;
  letter-spacing: 0.3em !important;
}

/* === AUTO-INJECTED bg/cg CSS RULES (do not edit by hand) === */
#bg-layer.bg-bridal { --bg-img: url('assets/bg/bg-bridal.png'); --bg-tint: linear-gradient(180deg,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.5) 100%); }
#bg-layer.bg-courtyard { --bg-img: url('assets/bg/bg-courtyard.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-empty-stage { --bg-img: url('assets/bg/bg-empty-stage.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.bg-hall { --bg-img: url('assets/bg/bg-hall.png'); --bg-tint: linear-gradient(180deg,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.5) 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-prison { --bg-img: url('assets/bg/bg-prison.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-river { --bg-img: url('assets/bg/bg-river.png'); --bg-tint: linear-gradient(180deg,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.5) 100%); }
#bg-layer.bg-siye-house { --bg-img: url('assets/bg/bg-siye-house.png'); --bg-tint: linear-gradient(180deg,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.5) 100%); }
#bg-layer.bg-stage { --bg-img: url('assets/bg/bg-stage.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.bg-troupe { --bg-img: url('assets/bg/bg-troupe.png'); --bg-tint: linear-gradient(180deg,rgba(0,0,0,0.15) 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 === */