/* === THE GOOD THE BAD THE UGLY 黄金三镖客 — DgA theme ===
   西部黄昏：日晒金 / 干血 oxblood / 尘土 / 枪烟。素材沿用 biaoke，引擎=我的工厂引擎。 */

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

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

/* ---- 标题屏：沙漠主视觉 + 暖色压暗 ---- */
#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% 42%, rgba(230,178,74,0.14) 0%, rgba(0,0,0,0.55) 62%, rgba(0,0,0,0.9) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(20,10,4,0.15) 35%, rgba(0,0,0,0.75) 100%);
}
#title-screen > * { position: relative; z-index: 1; }

/* 背景：暖色电影染色 */
#bg-layer { filter: contrast(1.06) brightness(0.96) saturate(1.06) sepia(0.12); }
.cg-img, #cg-viewer img, .route-portrait, .sprite img { filter: contrast(1.04); }

/* 旧胶片颗粒纱 */
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='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.6  0 0 0 0 0.42  0 0 0 0 0.2  0 0 0 0.34 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.22'/></svg>");
  mix-blend-mode: overlay; opacity: 0.4;
}

/* ---- 标题字 ---- */
.title-line1, .title-line2 {
  color: #e6b24a !important;
  font-family: 'Rye', 'ZCOOL QingKe HuangYou', serif !important;
  font-weight: 400 !important;
  letter-spacing: 4px !important;
  text-shadow: 3px 3px 0 #7c2616, 6px 6px 0 rgba(12,7,3,0.85), 0 0 36px rgba(230,178,74,0.26) !important;
}
.title-line1 { font-size: 4.4rem !important; }
.title-line2 { font-size: 3.0rem !important; }

/* 金字水印 */
.kanji-bg {
  color: rgba(230,178,74,0.10) !important;
  opacity: 1 !important;
  font-family: 'Ma Shan Zheng', serif !important;
  font-size: 40vw !important;
  letter-spacing: 0 !important; font-weight: 400 !important;
}
.title-sub {
  color: #e6b24a !important;
  font-family: 'Ma Shan Zheng', serif !important;
  font-size: 2.0rem !important; letter-spacing: 14px !important;
  text-shadow: 0 0 18px rgba(230,178,74,0.3), 2px 2px 0 rgba(12,7,3,0.7) !important;
}
.title-tag, .title-foot {
  color: #b89a6a !important;
  font-family: 'Special Elite', monospace !important;
  letter-spacing: 5px !important; font-size: 0.82rem !important;
}
.title-quote {
  font-family: 'Ma Shan Zheng', serif !important;
  color: #f0d8a0 !important; font-size: 1.5rem !important; letter-spacing: 6px !important;
  text-shadow: 0 0 22px rgba(230,178,74,0.3) !important;
}
.title-starring-label {
  color: #a8804e !important; font-family: 'Special Elite', monospace !important;
  letter-spacing: 4px !important; font-size: 0.76rem !important;
}
.title-starring-list {
  color: #d7c09a !important; font-family: 'Ma Shan Zheng', serif !important;
  letter-spacing: 6px !important; font-size: 1.1rem !important;
}

/* ---- 菜单 / 通用按钮 ---- */
.menu-btn {
  background: rgba(34,22,12,0.55) !important;
  border: 1px solid #8b6a34 !important;
  color: #e8d2a0 !important;
  font-family: 'Ma Shan Zheng', serif !important;
  letter-spacing: 6px !important; font-size: 1.1rem !important;
  transition: all 0.25s ease;
}
.menu-btn:hover {
  background: rgba(124,60,26,0.5) !important;
  color: #fff0d0 !important; border-color: #e6b24a !important;
  box-shadow: 0 0 20px rgba(230,178,74,0.3) !important;
}
.menu-btn.primary { background: rgba(124,38,22,0.5) !important; border-color: #c8882c !important; }

/* ---- 路由屏 ---- */
#route-screen {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(140,90,40,0.2) 0%, transparent 65%),
    linear-gradient(180deg, #241608 0%, #0e0804 100%);
}
.route-tag { color: #b89a6a !important; font-family: 'Special Elite', monospace !important; letter-spacing: 5px !important; }
#route-heading {
  color: #e6b24a !important; font-family: 'Ma Shan Zheng', serif !important;
  font-weight: 400 !important; letter-spacing: 4px !important; font-size: 1.5rem !important;
  text-shadow: 0 0 14px rgba(230,178,74,0.25) !important;
}
#route-intro { color: #cdb389 !important; font-family: 'Noto Serif SC', serif !important; line-height: 2.05 !important; letter-spacing: 1px !important; font-size: 0.95rem !important; }

/* 路由卡 — 通缉令木牌 */
.route-card {
  background: linear-gradient(150deg, #2a1a0c 0%, #140c05 100%) !important;
  border: 1px solid #8b6a34 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45), inset 0 0 0 3px rgba(140,100,50,0.16) !important;
}
.route-card:hover {
  border-color: #e6b24a !important;
  box-shadow: 0 6px 24px rgba(140,80,30,0.4), inset 0 0 0 3px rgba(230,178,74,0.24) !important;
  transform: translateY(-3px);
}
.route-card.locked { filter: grayscale(0.55) brightness(0.66); cursor: not-allowed; }
.route-card.completed::after { content: ''; position: absolute; inset: 0; background: rgba(140,100,50,0.1); pointer-events: none; }
.route-num { color: #c8882c !important; font-family: 'Rye', serif !important; font-size: 2.4rem !important; }
.route-title { color: #e8d2a0 !important; font-family: 'Noto Serif SC', serif !important; font-weight: 700 !important; letter-spacing: 3px !important; font-size: 1.05rem !important; }
.route-subtitle { color: #b89a6a !important; font-family: 'Ma Shan Zheng', serif !important; letter-spacing: 4px !important; }
.cleared-stamp { color: #e0a050 !important; border: 1px solid #c8882c !important; font-family: 'Special Elite', monospace !important; letter-spacing: 3px !important; font-size: 0.68rem !important; padding: 2px 8px; }
.route-img.redacted { background: repeating-linear-gradient(45deg, #2a1a0c 0 8px, #140c05 8px 16px) !important; }

/* ---- 对话框 ---- */
#dialogue-screen { background: #0a0502; }
.letterbox.top, .letterbox.bottom { background: linear-gradient(180deg, #0a0402 0%, #160c06 100%) !important; }
#dialogue-box {
  background: linear-gradient(180deg, rgba(34,21,11,0.92) 0%, rgba(18,11,5,0.96) 100%) !important;
  border-top: 2px solid rgba(140,100,50,0.45) !important;
  border-bottom: 2px solid rgba(140,100,50,0.45) !important;
  box-shadow: inset 0 0 40px rgba(120,80,30,0.1), 0 -8px 30px rgba(0,0,0,0.65) !important;
}
#speaker-name {
  color: #f0d8a0 !important; font-family: 'Ma Shan Zheng', serif !important;
  font-weight: 400 !important; letter-spacing: 6px !important; font-size: 1.3rem !important;
  text-shadow: 0 0 12px rgba(230,178,74,0.3) !important;
}
#dialogue-text { color: #f2e4c6 !important; font-family: 'Noto Serif SC', serif !important; line-height: 2.0 !important; letter-spacing: 2px !important; font-size: 1.18rem !important; }
#dialogue-text-sub { color: #b89a6a !important; font-family: 'Special Elite', monospace !important; font-style: italic; letter-spacing: 1.5px !important; font-size: 0.95rem !important; }

/* ---- 选择支 ---- */
#choice-overlay { background: rgba(12,7,3,0.82) !important; }
.choice-prompt { color: #e6b24a !important; font-family: 'Ma Shan Zheng', serif !important; letter-spacing: 10px !important; }
.choice-list button {
  background: linear-gradient(180deg, rgba(40,27,14,0.92), rgba(22,14,7,0.92)) !important;
  border: 1px solid #8b6a34 !important; color: #d7c09a !important;
  font-family: 'Ma Shan Zheng', serif !important; letter-spacing: 4px !important; padding: 16px 28px !important;
}
.choice-list button:hover {
  background: linear-gradient(180deg, rgba(60,40,18,0.95), rgba(32,20,10,0.95)) !important;
  border-color: #e6b24a !important; color: #fff0d0 !important;
}

/* ---- 章节卡 / 路由末 ---- */
#chapter-card { background: linear-gradient(180deg, rgba(34,21,11,0.95), rgba(18,11,5,0.98)) !important; border: 1px solid rgba(140,100,50,0.4) !important; }
.chapter-card-tag { color: #b89a6a !important; font-family: 'Special Elite', monospace !important; letter-spacing: 8px !important; }
.chapter-card-en { color: #c8882c !important; font-family: 'Rye', serif !important; letter-spacing: 4px !important; }
.chapter-card-cn { color: #f0d8a0 !important; font-family: 'Ma Shan Zheng', serif !important; letter-spacing: 8px !important; font-size: 2.0rem !important; }
#route-end-card { background: linear-gradient(180deg, rgba(40,25,12,0.96), rgba(18,11,5,0.98)) !important; border: 1px solid #8b6a34 !important; box-shadow: 0 0 60px rgba(140,80,30,0.25) !important; }
.route-end-tag { color: #e6b24a !important; font-family: 'Ma Shan Zheng', serif !important; letter-spacing: 10px !important; }
.route-end-title { color: #f0d8a0 !important; font-family: 'Ma Shan Zheng', serif !important; letter-spacing: 6px !important; }
.route-end-desc { color: #cdb389 !important; font-family: 'Noto Serif SC', serif !important; line-height: 1.95 !important; letter-spacing: 2px !important; }

/* ---- 控件 / overlay ---- */
[data-ctrl] { font-family: 'Special Elite', monospace !important; }
.overlay-frame { background: linear-gradient(180deg, rgba(34,21,11,0.97), rgba(14,8,4,0.99)) !important; border: 1px solid #8b6a34 !important; }
.overlay-tag { color: #e6b24a !important; font-family: 'Special Elite', monospace !important; letter-spacing: 8px !important; }

/* ---- 立绘：全身像贴底 ---- */
.sprite { filter: drop-shadow(0 14px 26px rgba(0,0,0,0.6)); }

/* ---- 逐背景：图 + 暖色染（类名须 bg- 开头，引擎 ::before 才出图）---- */
#bg-layer.bg-desert-dawn      { --bg-img: url('assets/bg/desert-dawn.png');      --bg-tint: radial-gradient(ellipse at 60% 35%, rgba(240,160,70,0.22) 0%, transparent 60%), linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.45) 100%); }
#bg-layer.bg-desert-noon      { --bg-img: url('assets/bg/desert-noon.png');      --bg-tint: radial-gradient(ellipse at 50% 30%, rgba(255,210,120,0.2) 0%, transparent 60%), linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 100%); }
#bg-layer.bg-dusty-town       { --bg-img: url('assets/bg/dusty-town.png');       --bg-tint: radial-gradient(ellipse at 50% 50%, rgba(210,150,70,0.18) 0%, transparent 65%), linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.45) 100%); }
#bg-layer.bg-saloon-interior  { --bg-img: url('assets/bg/saloon-interior.png');  --bg-tint: radial-gradient(ellipse at 70% 40%, rgba(230,170,80,0.2) 0%, transparent 60%), linear-gradient(180deg, rgba(0,0,0,0.14) 0%, rgba(0,0,0,0.5) 100%); }
#bg-layer.bg-prison-camp      { --bg-img: url('assets/bg/prison-camp.png');      --bg-tint: radial-gradient(ellipse at 50% 50%, rgba(150,120,80,0.18) 0%, transparent 65%), linear-gradient(180deg, rgba(0,0,0,0.14) 0%, rgba(0,0,0,0.5) 100%); }
#bg-layer.bg-river-bridge     { --bg-img: url('assets/bg/river-bridge.png');     --bg-tint: radial-gradient(ellipse at 50% 60%, rgba(180,140,90,0.18) 0%, transparent 65%), linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.45) 100%); }
#bg-layer.bg-ruined-church    { --bg-img: url('assets/bg/ruined-church.png');    --bg-tint: radial-gradient(ellipse at 50% 35%, rgba(220,170,90,0.2) 0%, transparent 60%), linear-gradient(180deg, rgba(0,0,0,0.14) 0%, rgba(0,0,0,0.5) 100%); }
#bg-layer.bg-graveyard-dusk   { --bg-img: url('assets/bg/graveyard-dusk.png');   --bg-tint: radial-gradient(ellipse at 50% 40%, rgba(200,90,40,0.22) 0%, transparent 62%), linear-gradient(180deg, rgba(0,0,0,0.14) 0%, rgba(0,0,0,0.5) 100%); }
#bg-layer.bg-graveyard-circle { --bg-img: url('assets/bg/graveyard-circle.png'); --bg-tint: radial-gradient(ellipse at 50% 45%, rgba(230,150,60,0.22) 0%, transparent 62%), linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.45) 100%); }

/* ---- credits ---- */
#credits-screen { background: linear-gradient(180deg, #241608 0%, #0e0804 100%); }
#credits-screen h2 { color: #f0d8a0 !important; font-family: 'Ma Shan Zheng', serif !important; letter-spacing: 6px !important; }
#credits-screen h3 { color: #c8882c !important; font-family: 'Special Elite', monospace !important; letter-spacing: 6px !important; }
#credits-screen p { color: #cdb389 !important; font-family: 'Noto Serif SC', serif !important; letter-spacing: 3px !important; }
.about-link { color: #e0a050 !important; border-bottom: 1px dotted #c8882c; }
.about-link:hover { color: #f0d8a0 !important; }