/* ===== 清静 · 墨字宣纸主题 ===== */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; }
body {
  font-family:"Noto Serif SC","Source Han Serif SC","STSong","SimSun",serif;
  background:#efe6d0; color:#3a3228; overflow:hidden;
  user-select:none; -webkit-user-select:none;
}
#app { position:fixed; inset:0; overflow:hidden; }

.screen { position:absolute; inset:0; display:flex; flex-direction:column; opacity:0; pointer-events:none; transition:opacity .5s ease; }
.screen.active { opacity:1; pointer-events:auto; }

.scene { position:absolute; inset:0; overflow:hidden; background:linear-gradient(180deg,#f6efe0,#e9dfc7); }
.scene svg { position:absolute; inset:0; width:100%; height:100%; }

/* ---------- 标题页 ---------- */
#screen-title .title-wrap {
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:24px;
}
.title-seal {
  width:64px; height:64px; border:2px solid #a8322a; color:#a8322a;
  display:flex; align-items:center; justify-content:center;
  font-size:17px; letter-spacing:2px; border-radius:8px; margin-bottom:18px;
  background:rgba(168,50,42,.06); transform:rotate(-3deg); box-shadow:0 2px 12px rgba(150,60,40,.15);
}
.title-name { font-size:56px; font-weight:700; letter-spacing:18px; text-indent:18px; color:#3a3228; text-shadow:0 2px 12px rgba(120,90,60,.18); }
.title-sub { margin-top:10px; font-size:15px; letter-spacing:6px; color:#8a7a5e; }
.title-byline { margin-top:22px; font-size:15px; letter-spacing:4px; color:#6a5c48; }
.title-actions { margin-top:34px; display:flex; flex-direction:column; gap:12px; width:min(320px,80vw); }
.title-hint { margin-top:26px; font-size:12px; color:#9a8a6e; letter-spacing:3px; }

/* ---------- 按钮 ---------- */
.btn {
  appearance:none; border:none; cursor:pointer; font-family:inherit;
  font-size:16px; letter-spacing:4px; padding:14px 20px; border-radius:12px;
  color:#fff; background:linear-gradient(180deg,#c6482f,#a83a26);
  box-shadow:0 4px 14px rgba(150,70,40,.28); transition:transform .15s ease, filter .15s ease;
}
.btn:active { transform:scale(.97); }
.btn-primary { background:linear-gradient(180deg,#c6482f,#a83a26); color:#fff; }
.btn-ghost { background:transparent; color:#4a4034; border:1px solid #8a7a5e; box-shadow:none; }

/* ---------- 章节页 ---------- */
#screen-chapters { justify-content:center; align-items:center; }
.chapters-wrap { position:relative; z-index:2; width:min(560px,92vw); max-height:88vh; display:flex; flex-direction:column; gap:14px; }
.chapters-title { text-align:center; font-size:24px; letter-spacing:10px; color:#3a3228; }
.chapter-list { display:flex; flex-direction:column; gap:12px; overflow-y:auto; padding:4px; }
.chapter-card {
  background:rgba(255,252,242,.8); border:1px solid #c9bfa8; border-radius:14px;
  padding:14px 16px; color:#3a3228; cursor:pointer; text-align:left; font-family:inherit;
  box-shadow:0 3px 10px rgba(90,70,50,.08); transition:transform .15s ease, border-color .2s ease;
}
.chapter-card:active { transform:scale(.98); }
.chapter-card .cc-title { font-size:17px; letter-spacing:3px; }
.chapter-card .cc-sub { font-size:12px; color:#8a7a5e; margin-top:4px; letter-spacing:1px; }
.chapter-card .cc-status { margin-top:8px; font-size:12px; color:#4a7a78; letter-spacing:1px; }
.chapter-card .cc-status .done { color:#b0556a; }
.chapter-card.locked { opacity:.5; cursor:not-allowed; }
.chapter-card.current { border-color:#a8322a; box-shadow:0 0 16px rgba(168,50,42,.2); }

/* ---------- 游戏主界面 ---------- */
.hud {
  position:absolute; top:0; left:0; right:0; z-index:20;
  display:flex; justify-content:space-between; align-items:center;
  padding:calc(env(safe-area-inset-top, 0px) + 10px) 14px 10px;
  background:linear-gradient(180deg, rgba(250,244,230,.88), rgba(250,244,230,0));
  font-size:13px; letter-spacing:2px; color:#4a4034;
}
.hud-left { display:flex; align-items:center; gap:10px; min-width:0; }
.hud-chapter { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hud-flow { font-size:12px; color:#8a7a5e; white-space:nowrap; }
.loc-chip {
  display:inline-block; margin-left:8px; padding:2px 10px; border:1px solid #c9bfa8;
  border-radius:999px; font-size:11px; letter-spacing:2px; color:#6a5c48; background:rgba(255,252,242,.7);
}
.hud-heart { display:flex; align-items:center; gap:5px; }
.hud-heart b { color:#c63a2e; font-size:15px; }
.hud-btn { background:rgba(255,252,242,.7); border:1px solid #c9bfa8; color:#4a4034; font-size:15px; border-radius:9px; padding:3px 10px; cursor:pointer; font-family:inherit; }

.dialogue {
  position:absolute; left:0; right:0; bottom:0; z-index:15;
  background:rgba(250,244,230,.94);
  border-top:1px solid #c9bfa8; border-radius:18px 18px 0 0;
  padding:12px 16px calc(env(safe-area-inset-bottom,0px) + 16px);
  min-height:158px; box-shadow:0 -6px 26px rgba(90,70,50,.14);
}
.dlg-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.avatar {
  width:46px; height:46px; border-radius:50%; flex:none;
  border:1.5px solid #b8a27e; box-shadow:0 2px 8px rgba(90,70,50,.15); overflow:hidden; background:#f5ecda;
}
.avatar svg { width:100%; height:100%; display:block; }
.speaker { font-size:14px; letter-spacing:3px; color:#4a4034; }
.speaker::before { content:"— "; color:#b8a27e; }
.dlg-text { font-size:17px; line-height:1.9; letter-spacing:1px; min-height:64px; color:#3a3228; }
.dlg-text .caret { display:inline-block; width:1px; height:1.1em; background:#a8322a; vertical-align:-2px; margin-left:2px; animation:blink .8s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
.choices { margin-top:12px; display:flex; flex-direction:column; gap:10px; }
.choice {
  appearance:none; border:1px solid #8a7a5e; background:rgba(255,252,242,.6);
  color:#3a3228; font-family:inherit; font-size:16px; letter-spacing:2px;
  padding:13px 16px; border-radius:12px; cursor:pointer; text-align:left;
  transition:transform .12s ease, background .2s ease;
}
.choice:active { transform:scale(.98); background:rgba(240,222,196,.7); }
.tap-hint { text-align:center; font-size:11px; color:#a09074; margin-top:8px; letter-spacing:3px; }

.toast {
  position:absolute; top:22%; left:50%; transform:translateX(-50%) translateY(-8px); z-index:40;
  background:rgba(250,244,230,.96); border:1px solid #c9bfa8; color:#8a5a3a;
  padding:10px 20px; border-radius:999px; font-size:14px; letter-spacing:2px;
  opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s ease;
  max-width:82vw; text-align:center; box-shadow:0 4px 18px rgba(90,70,50,.18);
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

.menu-panel {
  position:absolute; top:calc(env(safe-area-inset-top,0px) + 52px); right:12px; z-index:45;
  background:rgba(250,244,230,.97); border:1px solid #c9bfa8; border-radius:14px;
  padding:10px; display:none; flex-direction:column; gap:8px; width:150px;
  box-shadow:0 6px 24px rgba(90,70,50,.2);
}
.menu-panel.show { display:flex; }
.mp-btn { appearance:none; background:transparent; border:none; color:#3a3228; font-family:inherit; font-size:15px; letter-spacing:2px; padding:10px; border-radius:9px; cursor:pointer; text-align:left; }
.mp-btn:active { background:rgba(240,222,196,.7); }

/* ---------- 结局页 ---------- */
#screen-ending { justify-content:center; align-items:center; }
.ending-wrap { position:relative; z-index:2; width:min(560px,90vw); text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px; padding:24px; }
.ending-tag { font-size:14px; letter-spacing:5px; color:#a8322a; }
.ending-title { font-size:44px; letter-spacing:14px; text-indent:14px; color:#3a3228; text-shadow:0 2px 12px rgba(120,90,60,.16); }
.ending-text { font-size:16px; line-height:2; color:#4a4034; white-space:pre-line; }

/* ---------- 默契考验 ---------- */
#screen-quiz { justify-content:center; align-items:center; }
.quiz-wrap { position:relative; z-index:2; width:min(560px,92vw); display:flex; flex-direction:column; gap:16px; background:rgba(255,252,242,.94); border:1px solid #c9bfa8; border-radius:18px; padding:26px 22px; box-shadow:0 8px 30px rgba(90,70,50,.15); }
.quiz-title { text-align:center; font-size:22px; letter-spacing:8px; color:#3a3228; }
.quiz-progress { text-align:center; font-size:13px; color:#8a7a5e; letter-spacing:2px; }
.quiz-question { font-size:18px; line-height:1.8; text-align:center; min-height:56px; }
.quiz-options { display:flex; flex-direction:column; gap:10px; }
.quiz-options .choice { text-align:center; }
.quiz-options .choice.correct { border-color:#4a7a78; background:rgba(74,122,120,.18); color:#2f5c5a; }
.quiz-options .choice.wrong { border-color:#b0556a; background:rgba(176,85,106,.16); color:#8f3a4f; }
.quiz-feedback { min-height:22px; text-align:center; font-size:14px; color:#8a5a3a; letter-spacing:1px; }

/* ---------- 最终页 ---------- */
#screen-final { justify-content:center; align-items:center; }
.final-wrap { position:relative; z-index:2; width:min(560px,90vw); text-align:center; display:flex; flex-direction:column; align-items:center; gap:20px; padding:24px; }
.final-memory { font-size:15px; line-height:2; color:#6a5c48; white-space:pre-line; background:rgba(255,252,242,.8); border:1px solid #d9c3a2; border-radius:14px; padding:16px; }
.final-line { font-size:30px; letter-spacing:4px; color:#3a3228; line-height:1.7; text-shadow:0 2px 12px rgba(120,90,60,.15); }
.final-names { font-size:14px; color:#8a7a5e; letter-spacing:3px; }

/* ---------- 场景底色（浅色宣纸） ---------- */
.scene-title   { background:linear-gradient(180deg,#f6efe0,#e9dfc7); }
.scene-grove   { background:linear-gradient(180deg,#f8efdf,#eeddcb); }
.scene-gate    { background:linear-gradient(180deg,#eef0ec,#dfe4df); }
.scene-tea     { background:linear-gradient(180deg,#f3e6d2,#e7d3b8); }
.scene-peak    { background:linear-gradient(180deg,#e8edf0,#d9e2e6); }
.scene-stream  { background:linear-gradient(180deg,#e9f0e6,#d8e4da); }
.scene-dream   { background:linear-gradient(180deg,#efe9f0,#e3dbe4); }
.scene-chapters-bg { background:linear-gradient(180deg,#f6efe0,#e9dfc7); }
.scene-ending-bg { background:linear-gradient(180deg,#f8efdf,#eeddcb); }
.scene-quiz-bg { background:linear-gradient(180deg,#efe9f0,#e3dbe4); }
.scene-final-bg { background:linear-gradient(180deg,#f8efdf,#eeddcb); }

/* ---------- 粒子 ---------- */
.fx-layer { position:absolute; inset:0; z-index:5; pointer-events:none; overflow:hidden; }
.petal, .snow, .firefly { position:absolute; top:-20px; will-change:transform; }
.petal { width:12px; height:12px; border-radius:60% 40% 60% 40%; background:radial-gradient(circle at 35% 35%, #f3c4cd, #e0a0ae); opacity:.8; }
.snow { width:7px; height:7px; border-radius:50%; background:#fff; box-shadow:0 0 0 1px rgba(140,150,150,.35); }
.firefly { width:5px; height:5px; border-radius:50%; background:#e8c45a; box-shadow:0 0 12px 4px rgba(232,196,90,.5); }
@keyframes fall { to { transform:translateY(110vh) rotate(720deg); } }
@keyframes fallSnow { to { transform:translateY(110vh); } }
@keyframes twinkle { 0%,100% { opacity:.2; transform:scale(.7); } 50% { opacity:1; transform:scale(1.3); } }

/* 隐藏互动点击区（无提示，仅命中时闪烁） */
.hot-fx {
  position:absolute; z-index:8; pointer-events:none; border-radius:50%;
  box-shadow:0 0 26px 6px rgba(200,150,80,.5);
  animation:hotpulse 1.6s ease-in-out 2;
}
@keyframes hotpulse { 0%,100% { opacity:.3; } 50% { opacity:.9; } }

@media (max-width:640px) {
  .title-name { font-size:44px; }
  .ending-title { font-size:34px; }
  .dlg-text { font-size:16px; }
}

/* ---------- 联机模式 ---------- */
#screen-multi { justify-content:center; align-items:center; }
.multi-wrap { position:relative; z-index:2; width:min(560px,92vw); display:flex; flex-direction:column; gap:16px; background:rgba(255,252,242,.94); border:1px solid #c9bfa8; border-radius:18px; padding:26px 22px; box-shadow:0 8px 30px rgba(90,70,50,.15); }
.multi-tabs { display:flex; gap:10px; }
.multi-tabs .choice { text-align:center; }
.room-code { font-size:44px; letter-spacing:10px; text-align:center; color:#a8322a; font-weight:700; padding:16px 0; border:1px dashed #c9bfa8; border-radius:14px; background:rgba(255,252,242,.6); }
.multi-tip { font-size:13px; line-height:1.8; color:#8a7a5e; text-align:center; }
.multi-status { font-size:14px; color:#4a7a78; text-align:center; min-height:22px; letter-spacing:1px; }
.join-input { font-family:inherit; font-size:22px; letter-spacing:6px; text-align:center; padding:12px; border:1px solid #8a7a5e; border-radius:12px; background:#fffdf6; color:#3a3228; text-transform:uppercase; }