/* ============ 《青溪录》 UI 样式 · 水墨风 ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --ink: #2b2620;
  --paper: rgba(244, 238, 224, 0.94);
  --gold: #d4a94e;
  --cyan: #6ec6c9;
  --red: #c0392b;
  --jade: #5a8f6f;
}

html, body { width: 100%; height: 100%; overflow: hidden; background: #1a1712; }
body { font-family: "STKaiti", "KaiTi", "楷体", "Noto Serif SC", serif; user-select: none; }

#game-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

.hidden { display: none !important; }

/* ---------- 暗场过渡 ---------- */
.fade {
  position: fixed; inset: 0; background: #000; opacity: 0;
  pointer-events: none; transition: opacity .6s ease; z-index: 90;
}
.fade.visible { opacity: 1; pointer-events: all; }

/* ---------- 标题画面 ---------- */
.title-screen {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 35%, #3d4f5f 0%, #232d38 55%, #141a21 100%);
  transition: opacity .8s ease;
}
.title-screen.faded { opacity: 0; pointer-events: none; }
.title-ink {
  position: absolute; inset: 0; opacity: .18; pointer-events: none;
  background:
    radial-gradient(circle at 20% 80%, rgba(110,198,201,.35), transparent 40%),
    radial-gradient(circle at 85% 20%, rgba(212,169,78,.28), transparent 35%);
}
.game-title {
  font-size: 96px; letter-spacing: 28px; color: #f2e9d5; font-weight: 400;
  text-shadow: 0 4px 24px rgba(0,0,0,.6), 0 0 60px rgba(212,169,78,.35);
  margin-left: 28px;
}
.game-subtitle { font-size: 24px; letter-spacing: 12px; color: var(--gold); margin: 18px 0 56px; margin-left: 12px; }
.title-menu { display: flex; flex-direction: column; gap: 16px; }
.title-foot { position: absolute; bottom: 28px; color: #8a93a0; font-size: 14px; letter-spacing: 4px; }

.ink-btn {
  font-family: inherit; font-size: 22px; letter-spacing: 8px; cursor: pointer;
  color: #f2e9d5; background: rgba(20,20,26,.55); border: 1px solid rgba(212,169,78,.55);
  padding: 12px 48px 12px 56px; border-radius: 4px; transition: all .2s;
}
.ink-btn:hover { background: rgba(212,169,78,.22); box-shadow: 0 0 18px rgba(212,169,78,.35); transform: translateY(-1px); }

/* ---------- 模态框 ---------- */
.modal {
  position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 8, 6, .62);
}
.modal-box {
  background: var(--paper); color: var(--ink); border-radius: 6px; padding: 32px 44px;
  min-width: 420px; max-width: 640px; box-shadow: 0 12px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(90,70,40,.35);
  border: 1px solid rgba(90,70,40,.5); text-align: center;
}
.modal-box h2 { letter-spacing: 10px; margin-bottom: 18px; font-weight: 400; }
.help-table { margin: 0 auto 14px; border-collapse: collapse; font-size: 17px; }
.help-table td { padding: 6px 14px; text-align: left; }
.help-table td:first-child { color: #7a5c26; font-weight: bold; white-space: nowrap; }
.help-tip { font-size: 15px; line-height: 1.8; color: #4a4238; text-align: left; margin-bottom: 18px; }
.c-gold { color: #a8781a; } .c-cyan { color: #2a7f82; }

/* ---------- HUD ---------- */
.hud { position: fixed; top: 18px; left: 18px; z-index: 40; pointer-events: none; }
.location-name {
  display: inline-block; font-size: 20px; letter-spacing: 6px; color: #f2e9d5;
  background: rgba(20,20,26,.55); border-left: 3px solid var(--gold);
  padding: 6px 18px; border-radius: 0 4px 4px 0; margin-bottom: 8px;
}
.objective {
  display: block; font-size: 15px; letter-spacing: 1px; color: #d8e6dd;
  background: rgba(20,30,26,.55); border-left: 3px solid var(--jade);
  padding: 5px 14px; border-radius: 0 4px 4px 0; max-width: 420px; line-height: 1.6;
}
.objective::before { content: "◈ 目标 · "; color: #9fd3b4; }

/* ---------- 交互提示 ---------- */
.interact-prompt {
  position: fixed; left: 50%; bottom: 27%; transform: translateX(-50%);
  z-index: 40; pointer-events: none; font-size: 17px; letter-spacing: 3px;
  color: #fff; background: rgba(20,20,26,.68); padding: 7px 20px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,.35); animation: bob 1.2s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,-6px); } }

/* ---------- 对话 ---------- */
.dialogue {
  position: fixed; left: 50%; bottom: 36px; transform: translateX(-50%);
  width: min(880px, 92vw); z-index: 50; cursor: pointer;
  background: var(--paper); color: var(--ink); border-radius: 8px;
  padding: 22px 34px 30px; box-shadow: 0 10px 44px rgba(0,0,0,.55), inset 0 0 0 1px rgba(90,70,40,.3);
  border: 1px solid rgba(90,70,40,.55);
}
.dlg-name {
  position: absolute; top: -17px; left: 26px; font-size: 19px; letter-spacing: 4px;
  background: #3a3226; color: #f2e9d5; padding: 4px 20px; border-radius: 4px;
  border: 1px solid rgba(212,169,78,.6); box-shadow: 0 3px 10px rgba(0,0,0,.4);
}
.dlg-name.narr { background: #4c4438; color: #cfc4ab; }
.dlg-text { font-size: 21px; line-height: 1.85; min-height: 76px; letter-spacing: 1px; white-space: pre-wrap; }
.dlg-hint { position: absolute; right: 20px; bottom: 8px; font-size: 13px; color: #8a7a5c; animation: bob2 1s infinite; }
@keyframes bob2 { 0%,100% { opacity: .45; } 50% { opacity: 1; } }

/* ---------- Toast ---------- */
.toast {
  position: fixed; top: 15%; left: 50%; transform: translateX(-50%); z-index: 60;
  background: rgba(20,20,26,.82); color: #f2e9d5; font-size: 19px; letter-spacing: 3px;
  padding: 12px 34px; border-radius: 6px; border: 1px solid rgba(212,169,78,.5);
  box-shadow: 0 6px 30px rgba(0,0,0,.5); transition: opacity .4s; text-align: center; line-height: 1.7;
}

/* ---------- 战斗 UI ---------- */
#battle-ui { position: fixed; inset: 0; z-index: 45; pointer-events: none; }
#battle-ui > * { pointer-events: auto; }

.turn-timeline {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; padding: 8px 14px;
  background: rgba(20,20,26,.6); border-radius: 24px; border: 1px solid rgba(212,169,78,.35);
}
.turn-chip {
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 17px; color: #f2e9d5; background: #3a4552; border: 2px solid rgba(255,255,255,.25);
  transition: all .25s;
}
.turn-chip.hero { background: #2f5d7c; }
.turn-chip.enemy { background: #6e3230; }
.turn-chip.current { transform: scale(1.28); border-color: var(--gold); box-shadow: 0 0 14px rgba(212,169,78,.8); }
.turn-chip.dead { filter: grayscale(1) brightness(.5); }

.battle-log {
  position: absolute; top: 84px; left: 50%; transform: translateX(-50%);
  font-size: 18px; letter-spacing: 2px; color: #ffe9b8; text-shadow: 0 2px 6px #000;
  background: rgba(20,20,26,.45); padding: 6px 22px; border-radius: 18px; pointer-events: none !important;
  text-align: center; max-width: 80vw;
}

.party-status { position: absolute; left: 22px; bottom: 22px; display: flex; flex-direction: column; gap: 10px; }
.status-card {
  width: 240px; background: rgba(20,20,26,.66); border: 1px solid rgba(212,169,78,.3);
  border-radius: 6px; padding: 8px 12px; color: #e8e2d2;
}
.status-card.active { border-color: var(--gold); box-shadow: 0 0 12px rgba(212,169,78,.5); }
.status-card.dead { filter: grayscale(1) brightness(.55); }
.status-name { font-size: 17px; letter-spacing: 2px; display: flex; justify-content: space-between; }
.bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.14); margin-top: 5px; overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 4px; transition: width .35s ease; }
.bar.hp > i { background: linear-gradient(90deg, #69b96b, #a5d86a); }
.bar.hp.low > i { background: linear-gradient(90deg, #c0392b, #e67e22); }
.bar.mp > i { background: linear-gradient(90deg, #4a90c2, #6ec6c9); }
.bar-num { font-size: 12px; color: #b8b0a0; float: right; }

.battle-menu {
  position: absolute; right: 26px; bottom: 26px; width: 230px;
  background: var(--paper); color: var(--ink); border-radius: 8px; padding: 10px;
  border: 1px solid rgba(90,70,40,.55); box-shadow: 0 10px 40px rgba(0,0,0,.55);
}
.menu-title { font-size: 15px; color: #7a5c26; letter-spacing: 3px; padding: 4px 10px 8px; border-bottom: 1px solid rgba(90,70,40,.25); margin-bottom: 6px; }
.menu-item {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 19px; letter-spacing: 2px; padding: 8px 12px; border-radius: 5px; cursor: pointer; color: var(--ink);
}
.menu-item .cost { font-size: 13px; color: #2a7f82; }
.menu-item .desc { font-size: 12px; color: #8a7a5c; display: block; letter-spacing: 0; }
.menu-item.sel { background: rgba(212,169,78,.28); box-shadow: inset 0 0 0 1px rgba(169,120,26,.5); }
.menu-item.disabled { opacity: .42; cursor: not-allowed; }

.target-hint {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  font-size: 16px; letter-spacing: 2px; color: #f2e9d5; background: rgba(20,20,26,.7);
  padding: 8px 22px; border-radius: 20px; border: 1px solid rgba(255,255,255,.3);
}

/* ---------- QTE ---------- */
.qte-canvas {
  position: fixed; left: 50%; top: 46%; transform: translate(-50%,-50%);
  z-index: 55; pointer-events: none;
}

/* ---------- 飘字 ---------- */
.floaters { position: fixed; inset: 0; z-index: 56; pointer-events: none; overflow: hidden; }
.floater {
  position: absolute; font-size: 30px; font-weight: bold; letter-spacing: 2px;
  text-shadow: 0 2px 4px #000, 0 0 12px rgba(0,0,0,.6); transform: translate(-50%,-50%);
  animation: floatUp 1.15s ease-out forwards; white-space: nowrap;
}
.floater.dmg { color: #ffd34d; }
.floater.crit { color: #ff9a3d; font-size: 40px; }
.floater.hurt { color: #ff6b5e; }
.floater.heal { color: #8be08b; }
.floater.info { color: #9fe8ea; font-size: 24px; }
.floater.parry { color: #ffe9a8; font-size: 34px; }
@keyframes floatUp {
  0% { opacity: 0; margin-top: 14px; }
  12% { opacity: 1; }
  100% { opacity: 0; margin-top: -72px; }
}

/* ---------- 结算 ---------- */
.result-box #result-body { font-size: 17px; line-height: 2; margin-bottom: 18px; color: #4a4238; }

/* ---------- 终章 ---------- */
.ending {
  position: fixed; inset: 0; z-index: 98; background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ending-title { font-size: 56px; letter-spacing: 20px; color: #f2e9d5; margin-left: 20px; opacity: 0; animation: endFade 2.5s ease forwards; }
.ending-sub { font-size: 20px; letter-spacing: 8px; color: var(--gold); margin-top: 26px; opacity: 0; animation: endFade 2.5s ease 1.2s forwards; }
@keyframes endFade { to { opacity: 1; } }