:root{
  --bg:#141414;
  --panel:#1a1a1a;
  --green:#1a2f1a;
  --green-2:#243b24;
  --earth:#8b7355;
  --earth-dim:#5e4e3a;
  --blood:#8b0000;
  --blood-bright:#c41414;
  --bone:#d8cfc0;
  --bone-dim:#9a917f;
  --screenblue:#3a5a6a;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:#000;overscroll-behavior:none}
body{
  font-family:"Noto Serif SC","Songti SC","STSong","SimSun",serif;
  color:var(--bone);
  display:flex;justify-content:center;
  user-select:none;-webkit-user-select:none;
}
#stage{
  position:relative;width:100%;max-width:520px;height:100dvh;
  background:var(--bg);overflow:hidden;
  display:flex;flex-direction:column;
}
/* ── 全局滤镜层：随气运变化 ─────────────────────── */
#filterLayer{position:absolute;inset:0;pointer-events:none;z-index:40;transition:box-shadow 2s,background 2s}
#stage.f-warn #filterLayer{box-shadow:inset 0 0 90px 20px rgba(20,40,20,.55)}
#stage.f-danger #filterLayer{box-shadow:inset 0 0 110px 40px rgba(80,10,10,.45)}
#stage.f-critical #filterLayer{box-shadow:inset 0 0 130px 60px rgba(139,0,0,.62);background:rgba(80,0,0,.10)}
#stage.f-dying #filterLayer{box-shadow:inset 0 0 150px 80px rgba(139,0,0,.85);background:rgba(100,0,0,.20)}
#stage.f-danger #main{animation:jitter 7s infinite steps(1)}
#stage.f-critical #main{animation:jitter 3.5s infinite steps(1)}
#stage.f-dying #main{animation:jitter 1.8s infinite steps(1)}
@keyframes jitter{
  0%,93%{transform:none;filter:none}
  94%{transform:translate(1.5px,-1px) skewX(.4deg)}
  95%{transform:translate(-2px,1px)}
  96%{transform:none;filter:hue-rotate(-18deg) contrast(1.15)}
  97.5%{transform:translate(1px,0);filter:none}
}
@media (prefers-reduced-motion:reduce){
  #main{animation:none !important}
}
/* ── 老照片颗粒 + 暗角 ─────────────────────────── */
#grain{position:absolute;inset:-60px;pointer-events:none;z-index:41;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
  animation:grainShift .28s infinite steps(2)}
@keyframes grainShift{0%{transform:translate(0,0)}50%{transform:translate(-22px,14px)}100%{transform:translate(12px,-18px)}}
#vignette{position:absolute;inset:0;pointer-events:none;z-index:39;
  background:radial-gradient(ellipse at 50% 46%,transparent 52%,rgba(0,0,0,.62) 100%)}
/* ── 幻听字幕 ──────────────────────────────────── */
#whisperLayer{position:absolute;inset:0;pointer-events:none;z-index:42;overflow:hidden}
.whisper{position:absolute;font-size:15px;letter-spacing:6px;color:rgba(196,20,20,.0);
  writing-mode:vertical-rl;white-space:nowrap;animation:whisperIn 4.5s ease forwards}
@keyframes whisperIn{
  0%{color:rgba(196,20,20,0);filter:blur(4px)}
  30%{color:rgba(180,40,40,.5);filter:blur(1px)}
  60%{color:rgba(140,20,20,.34)}
  100%{color:rgba(120,10,10,0);filter:blur(5px)}
}
/* ── 顶部 HUD ─────────────────────────────────── */
#hud{position:relative;z-index:30;display:flex;align-items:center;gap:10px;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 8px;
  background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,0));min-height:52px}
#luckWrap{flex:1}
#luckLabel{display:flex;justify-content:space-between;font-size:11px;letter-spacing:3px;color:var(--bone-dim);margin-bottom:4px}
#luckNum{font-family:"Courier New",monospace;letter-spacing:1px}
#luckBar{height:7px;background:rgba(255,255,255,.07);border:1px solid rgba(216,207,192,.18);position:relative;overflow:hidden}
#luckFill{position:absolute;inset:0;right:auto;width:100%;background:linear-gradient(90deg,var(--green-2),#3d6b3d);transition:width .9s ease,background 1.2s}
#stage.f-warn #luckFill{background:linear-gradient(90deg,#4a4a22,#7a6b2a)}
#stage.f-danger #luckFill{background:linear-gradient(90deg,#5e2a12,#8b5a1e)}
#stage.f-critical #luckFill,#stage.f-dying #luckFill{background:linear-gradient(90deg,#5a0505,var(--blood-bright))}
#luckState{font-size:10px;letter-spacing:2px;color:var(--bone-dim);margin-top:3px;min-height:13px;transition:color 1s}
#stage.f-critical #luckState,#stage.f-dying #luckState{color:var(--blood-bright)}
.hudBtn{background:rgba(26,47,26,.4);border:1px solid rgba(139,115,85,.45);color:var(--bone);
  font-family:inherit;font-size:12px;letter-spacing:2px;padding:7px 10px;cursor:pointer;position:relative}
.hudBtn:active{background:rgba(139,115,85,.28)}
#clueDot{position:absolute;top:-4px;right:-4px;width:9px;height:9px;border-radius:50%;
  background:var(--blood-bright);display:none;box-shadow:0 0 6px var(--blood-bright)}
#muteBtn{min-width:38px}
/* ── 主区 ─────────────────────────────────────── */
#main{position:relative;z-index:10;flex:1;min-height:0}
#sceneBox{position:absolute;inset:0;background:#0c0f0c;overflow:hidden}
#sceneBox svg,#sceneBox img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#sceneFade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .8s;z-index:5}
#sceneTitle{position:absolute;left:0;top:0;z-index:6;padding:10px 14px 20px;width:100%;
  background:linear-gradient(180deg,rgba(0,0,0,.72),transparent);
  font-size:13px;letter-spacing:4px;color:var(--earth)}
#chapterTag{display:inline-block;border:1px solid var(--blood);color:var(--blood-bright);
  padding:2px 8px;font-size:10px;letter-spacing:3px;margin-right:8px;vertical-align:1px}
/* ── 底部字幕面板 ─────────────────────────────── */
#bottomPanel{position:absolute;left:0;right:0;bottom:0;z-index:20;
  background:linear-gradient(0deg,rgba(0,0,0,.94) 58%,rgba(0,0,0,.6) 84%,transparent);
  padding-top:44px}
#textFlow{padding:0 22px 2px;
  font-size:16px;line-height:1.95;letter-spacing:1px;
  min-height:66px;max-height:32dvh;overflow-y:auto;-webkit-overflow-scrolling:touch}
#textFlow::-webkit-scrollbar{width:0}
.para{margin-bottom:6px;opacity:0;animation:pIn .4s forwards;
  text-shadow:0 1px 4px rgba(0,0,0,.9)}
@keyframes pIn{to{opacity:1}}
.para.sys{color:var(--earth);font-size:13.5px;border-left:2px solid var(--earth-dim);padding-left:10px;letter-spacing:2px}
.para.dm{color:#b8c9b8;background:rgba(26,47,26,.35);border:1px solid rgba(61,107,61,.35);
  padding:10px 12px}
.para.ghost{color:var(--blood-bright);letter-spacing:4px;text-shadow:0 0 8px rgba(139,0,0,.6)}
.para.item{color:var(--earth)}
.caret{display:inline-block;width:9px;height:17px;background:var(--bone-dim);vertical-align:-3px;
  animation:blink .8s infinite steps(1)}
@keyframes blink{50%{opacity:0}}
#tapHint{text-align:center;font-size:11px;letter-spacing:4px;color:rgba(216,207,192,.35);
  padding:2px 0 6px;height:20px}
/* ── 选择区 ───────────────────────────────────── */
#choiceBox{position:relative;z-index:20;padding:6px 16px calc(env(safe-area-inset-bottom,0px) + 16px);
  display:flex;flex-direction:column;gap:9px}
.choiceBtn{width:100%;text-align:left;background:rgba(26,47,26,.5);
  border:1px solid rgba(139,115,85,.5);color:var(--bone);font-family:inherit;
  font-size:14.5px;line-height:1.5;letter-spacing:1px;padding:12px 14px 12px 40px;
  position:relative;cursor:pointer;opacity:0;transform:translateY(8px);
  animation:cIn .45s forwards}
.choiceBtn:nth-child(2){animation-delay:.12s}
.choiceBtn:nth-child(3){animation-delay:.24s}
.choiceBtn:nth-child(4){animation-delay:.36s}
@keyframes cIn{to{opacity:1;transform:none}}
.choiceBtn:active{background:rgba(139,0,0,.3);border-color:var(--blood)}
.choiceBtn .mark{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;opacity:.75}
.choiceBtn.grim{border-color:rgba(139,0,0,.55)}
.choiceBtn.locked{opacity:.35;pointer-events:none;border-color:rgba(100,100,100,.3)}
.choiceBtn .lockHint{font-size:11px;color:rgba(200,160,100,.6);margin-left:6px}
/* ── 章节过场 ─────────────────────────────────── */
#chapterCard{position:absolute;inset:0;z-index:60;background:#050505;display:none;
  flex-direction:column;justify-content:center;align-items:center;gap:18px;text-align:center}
#chapterCard.show{display:flex}
#chapterCard .num{font-size:13px;letter-spacing:8px;color:var(--earth);opacity:0;animation:pIn 1s .2s forwards}
#chapterCard .name{font-size:30px;letter-spacing:12px;text-indent:12px;color:var(--bone);opacity:0;animation:pIn 1.2s .8s forwards}
#chapterCard .hoof{opacity:0;animation:pIn 1.4s 1.5s forwards}
/* ── QTE ─────────────────────────────────────── */
#qteLayer{position:absolute;inset:0;z-index:55;display:none;flex-direction:column;
  justify-content:flex-end;background:rgba(60,0,0,.28);cursor:pointer}
#qteLayer.show{display:flex}
#qteInner{padding:0 24px calc(env(safe-area-inset-bottom,0px) + 46px);text-align:center}
#qteTitle{font-size:22px;letter-spacing:8px;color:var(--blood-bright);
  text-shadow:0 0 14px rgba(196,20,20,.8);margin-bottom:8px;animation:qtePulse .5s infinite alternate}
@keyframes qtePulse{from{transform:scale(1)}to{transform:scale(1.07)}}
#qteSub{font-size:12px;letter-spacing:3px;color:var(--bone-dim);margin-bottom:16px}
#qteBarWrap{height:16px;border:1px solid var(--blood);background:rgba(0,0,0,.5);margin-bottom:10px}
#qteFill{height:100%;width:0%;background:linear-gradient(90deg,var(--blood),var(--blood-bright))}
#qteTimer{font-family:"Courier New",monospace;font-size:15px;color:var(--bone)}
/* ── 线索面板 ─────────────────────────────────── */
#cluePanel{position:absolute;inset:0;z-index:70;background:rgba(5,5,5,.94);display:none;
  flex-direction:column;padding:calc(env(safe-area-inset-top,0px) + 20px) 20px 20px}
#cluePanel.show{display:flex}
#cluePanel h2{font-size:16px;letter-spacing:6px;color:var(--earth);margin-bottom:4px}
#cluePanel .sub{font-size:12px;color:var(--bone-dim);letter-spacing:2px;margin-bottom:16px}
#clueList{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.clueCard{border:1px solid rgba(139,115,85,.4);background:rgba(26,47,26,.3);padding:12px 14px}
.clueCard h3{font-size:14px;letter-spacing:2px;color:var(--bone);margin-bottom:6px}
.clueCard p{font-size:12.5px;line-height:1.8;color:var(--bone-dim)}
.clueCard.locked{opacity:.4}
.clueCard.locked h3{color:var(--bone-dim)}
#closeClue{margin-top:14px}
/* ── 结局 ─────────────────────────────────────── */
#endCard{position:absolute;inset:0;z-index:65;background:#050505;display:none;
  flex-direction:column;justify-content:center;align-items:center;gap:14px;text-align:center;padding:30px}
#endCard.show{display:flex}
#endType{font-size:12px;letter-spacing:6px;padding:4px 14px;border:1px solid var(--earth);color:var(--earth)}
#endType.bad{border-color:var(--blood);color:var(--blood-bright)}
#endName{font-size:28px;letter-spacing:10px;text-indent:10px}
#endStats{font-size:12.5px;line-height:2.2;letter-spacing:2px;color:var(--bone-dim)}
#endAchievements{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}
.endAchTitle{width:100%;font-size:11px;letter-spacing:3px;color:var(--bone-dim);margin-bottom:2px}
.endAchBadge{font-size:12px;padding:3px 10px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);color:var(--bone);letter-spacing:1px}
#shareBar { display:flex; align-items:center; gap:10px; margin-top:12px; flex-wrap:wrap; justify-content:center; }
.shareLabel { font-size:12px; color:var(--bone-dim); letter-spacing:2px; }
.shareBtn { width:36px; height:36px; border-radius:50%; border:1px solid #444; background:rgba(255,255,255,.05); color:var(--bone-dim); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .25s; }
.shareBtn:hover { border-color:var(--bone); color:var(--bone); background:rgba(255,255,255,.12); transform:scale(1.1); }
.shareBtn:active { transform:scale(.95); }
.shareBtn[data-platform="zalo"]:hover { color:#0068ff; border-color:#0068ff; }
.shareBtn[data-platform="facebook"]:hover { color:#1877f2; border-color:#1877f2; }
.shareBtn[data-platform="messenger"]:hover { color:#00b2ff; border-color:#00b2ff; }
.shareBtn[data-platform="tiktok"]:hover { color:#fe2c55; border-color:#fe2c55; }
.shareBtn[data-platform="youtube"]:hover { color:#ff0000; border-color:#ff0000; }
.shareBtn[data-platform="instagram"]:hover { color:#e4405f; border-color:#e4405f; }
.shareBtn[data-platform="telegram"]:hover { color:#26a5e4; border-color:#26a5e4; }
/* ── 通用按钮 ─────────────────────────────────── */
.bigBtn{background:transparent;border:1px solid var(--earth);color:var(--bone);
  font-family:inherit;font-size:14px;letter-spacing:5px;padding:12px 34px;cursor:pointer;margin-top:8px}
.bigBtn:active{background:rgba(139,0,0,.3);border-color:var(--blood)}
/* ── 标题页 ───────────────────────────────────── */
#titleScreen{position:absolute;inset:0;z-index:80;background:#080a08;display:flex;
  flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;padding:0}
#titleScreen.hide{display:none}
#coverImg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#titleShade{position:absolute;left:0;right:0;bottom:0;height:42%;
  background:linear-gradient(0deg,rgba(0,0,0,.92) 30%,rgba(0,0,0,.55) 65%,transparent)}
#titleUI{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:9px;
  width:100%;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 26px)}
body.lang-vi #stage{font-family:Georgia,"Times New Roman","Noto Serif",serif}
body.lang-vi .para,body.lang-vi .choiceBtn{letter-spacing:0}
body.lang-vi #textFlow{letter-spacing:0}
#chapterJump a{color:var(--earth);border-bottom:1px dotted var(--earth-dim);padding:6px 4px;cursor:pointer}
#chapterJump a:active{color:var(--blood-bright)}
#toast{position:absolute;top:calc(env(safe-area-inset-top,0px) + 64px);left:50%;transform:translateX(-50%) translateY(-8px);
  z-index:75;background:rgba(10,10,10,.92);border:1px solid var(--earth);color:var(--bone);
  font-size:13px;letter-spacing:2px;padding:9px 18px;opacity:0;pointer-events:none;transition:all .4s;white-space:nowrap}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.blood{border-color:var(--blood);color:var(--blood-bright)}
#flash{position:absolute;inset:0;z-index:78;background:#fff;opacity:0;pointer-events:none}
@keyframes scareShake{
  0%,100%{transform:none}
  10%{transform:translate(-7px,4px)}20%{transform:translate(6px,-5px)}
  30%{transform:translate(-5px,-4px)}40%{transform:translate(7px,3px)}
  50%{transform:translate(-4px,6px)}60%{transform:translate(5px,-3px)}
  70%{transform:translate(-6px,-5px)}80%{transform:translate(3px,4px)}90%{transform:translate(-2px,2px)}
}
#stage.scareShake #main{animation:scareShake .5s linear 3 !important}

/* Auth Modal */
.modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:9999; align-items:center; justify-content:center; }
.modal.show { display:flex; }
.modalContent { background:#1a1a1a; border:1px solid #333; border-radius:12px; padding:32px; width:90%; max-width:320px; position:relative; }
.modalClose { position:absolute; top:8px; right:12px; background:none; border:none; color:#aaa; font-size:24px; cursor:pointer; z-index:10; }
.modalContent h3 { color:var(--bone); text-align:center; margin-bottom:16px; letter-spacing:3px; }
.modalContent input { display:block; width:100%; padding:10px 12px; margin-bottom:12px; background:#111; border:1px solid #444; border-radius:6px; color:#eee; font-size:14px; box-sizing:border-box; }
.modalContent input:focus { border-color:var(--blood,#8b0000); outline:none; }
.formError { color:#ff4444; font-size:12px; min-height:16px; margin-bottom:8px; text-align:center; }
.formLink { text-align:center; margin-top:12px; font-size:12px; color:#888; }
.formLink a { color:var(--bone); cursor:pointer; text-decoration:underline; }
.hide { display:none !important; }

/* ── 恐怖登录模态框 ─────────────────────────────── */
.authModal.show { background:radial-gradient(ellipse at center, rgba(40,0,0,.88) 0%, rgba(0,0,0,.95) 70%); }
.authModal.show .authCard {
  animation: authAppear .4s ease-out;
}
@keyframes authAppear {
  0% { opacity:0; transform:scale(.92) translateY(8px); }
  60% { transform:scale(1.01) translateY(-2px); }
  70% { transform:scale(1) translateY(0) rotate(.3deg); }
  80% { transform:rotate(-.2deg); }
  100% { opacity:1; transform:none; }
}

/* 模态框本体 - 古纸质感 */
.authCard {
  background: #1a1209 !important;
  border: 2px solid var(--blood) !important;
  border-radius: 4px !important;
  box-shadow: 0 0 30px rgba(139,0,0,.25), inset 0 0 60px rgba(0,0,0,.5);
  animation: cardGlow 3s ease-in-out infinite alternate;
  overflow: visible;
  position: relative;
}
.authCard::before {
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:4px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  opacity:.4;
}
@keyframes cardGlow {
  0% { box-shadow: 0 0 20px rgba(139,0,0,.2), inset 0 0 60px rgba(0,0,0,.5); }
  100% { box-shadow: 0 0 40px rgba(139,0,0,.4), inset 0 0 60px rgba(0,0,0,.5); }
}

/* 灯光闪烁 */
.authCard { animation: cardGlow 3s ease-in-out infinite alternate, candleFlicker 4s steps(8) infinite; }
@keyframes candleFlicker {
  0%,100% { filter:brightness(1); }
  15% { filter:brightness(.92); }
  30% { filter:brightness(1); }
  45% { filter:brightness(.88); }
  55% { filter:brightness(.95); }
  70% { filter:brightness(1); }
  85% { filter:brightness(.90); }
}

/* 标题样式 */
.authTitle {
  font-size: 20px !important;
  letter-spacing: 6px !important;
  color: var(--bone) !important;
  text-shadow: 0 0 10px rgba(139,0,0,.6), 0 0 20px rgba(139,0,0,.3);
  animation: titlePulse 2.5s ease-in-out infinite alternate;
}
@keyframes titlePulse {
  0% { text-shadow: 0 0 8px rgba(139,0,0,.4), 0 0 16px rgba(139,0,0,.2); }
  100% { text-shadow: 0 0 14px rgba(139,0,0,.8), 0 0 28px rgba(139,0,0,.4); }
}

/* 输入框恐怖风格 */
.authCard input {
  background: #0a0806 !important;
  border: 1px solid #3a2a1a !important;
  border-radius: 3px !important;
  transition: border-color .3s, box-shadow .3s;
}
.authCard input:focus {
  border-color: var(--blood) !important;
  box-shadow: 0 0 8px rgba(139,0,0,.4), inset 0 0 4px rgba(139,0,0,.1);
}
.authCard input::placeholder { color:#5a4a3a; }

/* 按钮恐怖风格 */
.authBtn {
  background: rgba(139,0,0,.15) !important;
  border: 1px solid var(--blood) !important;
  color: var(--bone) !important;
  letter-spacing: 6px !important;
  transition: all .3s;
  position: relative;
  overflow: hidden;
}
.authBtn:hover {
  background: rgba(139,0,0,.3) !important;
  box-shadow: 0 0 16px rgba(139,0,0,.5);
  text-shadow: 0 0 6px rgba(139,0,0,.6);
}
.authBtn:active {
  background: rgba(139,0,0,.5) !important;
  box-shadow: 0 0 24px rgba(139,0,0,.8);
}

/* 错误信息血色渐显 */
.authCard .formError {
  color: var(--blood-bright) !important;
  text-shadow: 0 0 4px rgba(196,20,20,.4);
  animation: errorAppear .5s ease-out;
}
@keyframes errorAppear {
  0% { opacity:0; transform:translateY(-4px); }
  100% { opacity:1; transform:none; }
}

/* 链接 hover */
.authCard .formLink a:hover { color: var(--blood-bright); text-shadow: 0 0 4px rgba(139,0,0,.4); }

/* 强制登录提示 */
.authHint {
  text-align:center; font-size:13px; color:var(--blood-bright); margin-bottom:14px;
  letter-spacing:2px; text-shadow:0 0 6px rgba(139,0,0,.5);
  animation: hintPulse 2s ease-in-out infinite alternate;
}
@keyframes hintPulse {
  0% { opacity:.7; }
  100% { opacity:1; text-shadow:0 0 10px rgba(196,20,20,.6); }
}

/* ── 雾气粒子 ─────────────────────────────── */
.authFog { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1; }
.fog {
  position:absolute; border-radius:50%; opacity:0;
  background:radial-gradient(circle, rgba(200,200,200,.08) 0%, transparent 70%);
}
.authModal.show .fog { animation-play-state:running; }
.f1 { width:180px; height:180px; top:10%; left:-40px; animation:fogDrift1 12s ease-in-out infinite; }
.f2 { width:140px; height:140px; bottom:20%; right:-30px; animation:fogDrift2 15s ease-in-out infinite 2s; }
.f3 { width:200px; height:200px; top:40%; left:30%; animation:fogDrift3 18s ease-in-out infinite 4s; }
.f4 { width:120px; height:120px; top:5%; right:20%; animation:fogDrift1 14s ease-in-out infinite 6s; }
.f5 { width:160px; height:160px; bottom:5%; left:20%; animation:fogDrift2 16s ease-in-out infinite 3s; }
.f6 { width:100px; height:100px; top:60%; right:10%; animation:fogDrift3 13s ease-in-out infinite 1s; }
@keyframes fogDrift1 {
  0% { opacity:0; transform:translate(0,0) scale(.8); }
  30% { opacity:.6; }
  50% { opacity:.4; transform:translate(60px,-30px) scale(1.2); }
  70% { opacity:.5; }
  100% { opacity:0; transform:translate(120px,-60px) scale(.9); }
}
@keyframes fogDrift2 {
  0% { opacity:0; transform:translate(0,0) scale(1); }
  25% { opacity:.5; }
  50% { opacity:.3; transform:translate(-50px,40px) scale(1.3); }
  75% { opacity:.5; }
  100% { opacity:0; transform:translate(-100px,80px) scale(.8); }
}
@keyframes fogDrift3 {
  0% { opacity:0; transform:translate(0,0) scale(.9); }
  35% { opacity:.4; }
  65% { opacity:.5; transform:translate(30px,50px) scale(1.1); }
  100% { opacity:0; transform:translate(60px,100px) scale(1); }
}

/* ── 背景符文 ─────────────────────────────── */
.authRunes {
  position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden;
}
.authRunes::before, .authRunes::after {
  position:absolute; font-size:28px; color:rgba(139,0,0,.12);
  font-family:"Noto Serif SC",serif; letter-spacing:8px; writing-mode:vertical-rl;
  animation: runeFlicker 6s ease-in-out infinite;
}
.authRunes::before { content:"敕令封印禁鬼煞"; top:10%; left:8%; animation-delay:0s; }
.authRunes::after { content:"镇魂灭邪破厄符"; bottom:10%; right:8%; animation-delay:3s; }
@keyframes runeFlicker {
  0%,100% { opacity:0; }
  20% { opacity:.15; }
  40% { opacity:.05; }
  60% { opacity:.18; }
  80% { opacity:.03; }
}

/* ── 血迹流淌 ─────────────────────────────── */
.bloodDrip {
  position:absolute; top:-2px; width:3px; border-radius:0 0 2px 2px;
  background:linear-gradient(180deg, var(--blood) 0%, rgba(139,0,0,.3) 70%, transparent 100%);
  height:0; z-index:5;
}
.authModal.show .bloodDrip { animation-play-state:running; }
.bd1 { left:18%; animation:drip1 6s ease-in infinite 1s; }
.bd2 { left:55%; animation:drip2 8s ease-in infinite 3s; }
.bd3 { right:22%; animation:drip3 7s ease-in infinite 5s; }
@keyframes drip1 {
  0% { height:0; opacity:.8; }
  60% { height:45px; opacity:.6; }
  100% { height:55px; opacity:0; }
}
@keyframes drip2 {
  0% { height:0; opacity:.7; }
  50% { height:30px; opacity:.5; }
  100% { height:40px; opacity:0; }
}
@keyframes drip3 {
  0% { height:0; opacity:.9; }
  70% { height:60px; opacity:.6; }
  100% { height:70px; opacity:0; }
}

/* ── 四角符文 ─────────────────────────────── */
.authCorner {
  position:absolute; width:20px; height:20px; z-index:6; pointer-events:none;
  color:rgba(139,0,0,.5); font-size:14px; font-family:"Noto Serif SC",serif;
  animation: cornerPulse 4s ease-in-out infinite;
}
.authCorner::before { position:absolute; }
.ac-tl { top:6px; left:8px; } .ac-tl::before { content:"鬼"; }
.ac-tr { top:6px; right:8px; } .ac-tr::before { content:"煞"; }
.ac-bl { bottom:6px; left:8px; } .ac-bl::before { content:"封"; }
.ac-br { bottom:6px; right:8px; } .ac-br::before { content:"镇"; }
@keyframes cornerPulse {
  0%,100% { opacity:.3; }
  50% { opacity:.7; }
}

/* Title Actions */
#titleActions { margin-top:12px; display:flex; gap:8px; justify-content:center; }
.smallBtn { padding:6px 14px; background:rgba(216,207,192,.1); border:1px solid rgba(216,207,192,.3); border-radius:6px; color:var(--bone); font-size:12px; letter-spacing:1px; cursor:pointer; }
.smallBtn:hover { background:rgba(216,207,192,.2); }
#userInfo { margin-top:8px; font-size:12px; color:var(--bone); text-align:center; }
.linkBtn { background:none; border:none; color:#aaa; font-size:11px; cursor:pointer; text-decoration:underline; margin-left:8px; }

/* Save/Achievement/Rank modals reuse .modal */
#saveModal .modalContent, #achieveModal .modalContent, #rankModal .modalContent { max-width:380px; }
.saveSlot { background:#222; border:1px solid #444; border-radius:8px; padding:12px; margin-bottom:8px; cursor:pointer; }
.saveSlot:hover { border-color:var(--bone); }
.saveSlot .slotEmpty { color:#666; font-style:italic; }
.achCard { display:flex; align-items:center; gap:8px; padding:8px; border-bottom:1px solid #333; }
.achCard.locked { opacity:.4; }
.achCard .achIcon { font-size:20px; }
.rankRow { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid #222; font-size:13px; color:#ccc; }
.rankRow:first-child { color:var(--bone); font-weight:bold; }

/* Loading Screen */
#loadingLayer { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; z-index:100; background:url('images/loading_bg.webp') center/cover no-repeat rgba(4,4,4,.95); }
#loadingText { font-size:14px; letter-spacing:4px; color:var(--bone); opacity:.8; }
#loadingBarWrap { width:70%; max-width:320px; height:18px; background:rgba(216,207,192,.2); border-radius:9px; overflow:hidden; }
#loadingFill { width:0%; height:100%; background:var(--bone); border-radius:9px; transition:width .2s; box-shadow:0 0 8px rgba(216,207,192,.4); }
#loadingPercent { font-size:13px; color:rgba(216,207,192,.6); letter-spacing:2px; }
#loadingHint { position:absolute; bottom:24px; left:0; right:0; text-align:center; font-size:13px; line-height:1.9; letter-spacing:1.5px; color:rgba(144,238,144,.85); text-shadow:0 0 10px rgba(144,238,144,.7), 0 0 20px rgba(144,238,144,.4), 0 0 40px rgba(144,238,144,.2); padding:0 20px; }

/* ── 评论功能 ─────────────────────────────── */
.comments-panel {
  margin-top:20px; padding:16px; background:var(--panel); border-radius:8px; max-height:600px; overflow-y:auto; width:90%; max-width:900px; margin-left:auto; margin-right:auto;
}

.comments-section h3 {
  font-size:16px; font-weight:bold; margin-bottom:16px; letter-spacing:2px; color:var(--bone);
}

.comment-form {
  background:rgba(0,0,0,.3); padding:12px; border-radius:6px; margin-bottom:16px;
}

.form-group {
  margin-bottom:10px;
}

.form-group label {
  display:block; font-size:12px; color:var(--bone-dim); margin-bottom:4px; letter-spacing:1px;
}

.form-group select,
.form-group textarea {
  width:100%; padding:8px; background:rgba(216,207,192,.05); border:1px solid rgba(216,207,192,.2); color:var(--bone); border-radius:4px; font-family:inherit; font-size:13px;
}

.form-group select:focus,
.form-group textarea:focus {
  outline:none; border-color:var(--blood-bright); background:rgba(216,207,192,.08);
}

.form-group textarea {
  resize:vertical; min-height:60px; max-height:100px;
}

.char-count {
  display:block; font-size:11px; color:rgba(216,207,192,.4); text-align:right; margin-top:2px;
}

.submit-btn {
  width:100%; padding:8px; background:var(--blood); border:none; border-radius:4px; color:var(--bone); font-size:13px; font-weight:bold; letter-spacing:1px; cursor:pointer; transition:background .2s;
}

.submit-btn:hover {
  background:var(--blood-bright);
}

.comments-header {
  display:flex; align-items:center; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid rgba(216,207,192,.1);
}

.avg-rating {
  display:flex; align-items:center; gap:8px;
}

.rating-value {
  font-size:20px; font-weight:bold; color:var(--blood-bright);
}

.rating-max {
  font-size:13px; color:rgba(216,207,192,.5);
}

.rating-stars {
  color:var(--blood); font-size:12px; letter-spacing:1px;
}

.total-comments {
  font-size:11px; color:rgba(216,207,192,.4); margin-left:8px;
}

.comments-list-container {
  max-height:450px; overflow-y:auto;
}

.no-comments {
  text-align:center; color:rgba(216,207,192,.4); font-size:12px; padding:24px 12px;
}

.comment-item {
  background:rgba(0,0,0,.2); border-left:2px solid var(--blood); padding:10px; margin-bottom:8px; border-radius:4px;
}

.comment-header {
  display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:12px;
}

.comment-author {
  font-weight:bold; color:var(--bone);
}

.comment-rating {
  color:var(--blood); letter-spacing:1px;
}

.comment-time {
  color:rgba(216,207,192,.4); margin-left:auto;
}

.delete-btn {
  background:none; border:none; color:rgba(216,207,192,.5); font-size:11px; cursor:pointer; padding:0; margin:0;
}

.delete-btn:hover {
  color:var(--blood-bright);
}

.comment-content {
  font-size:13px; line-height:1.5; color:var(--bone); margin-bottom:8px; word-break:break-word;
}

.comment-footer {
  display:flex; gap:8px;
}

.vote-btn {
  padding:4px 8px; background:rgba(216,207,192,.05); border:1px solid rgba(216,207,192,.1); color:rgba(216,207,192,.6); font-size:12px; border-radius:3px; cursor:pointer; transition:all .2s;
}

.vote-btn:hover {
  background:rgba(216,207,192,.1); border-color:rgba(216,207,192,.2);
}

.vote-btn.active {
  background:var(--blood); color:var(--bone); border-color:var(--blood);
}

.comments-pagination {
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid rgba(216,207,192,.1);
}

.pagination-btn {
  padding:4px 12px; background:rgba(216,207,192,.08); border:1px solid rgba(216,207,192,.2); color:var(--bone); font-size:12px; border-radius:3px; cursor:pointer;
}

.pagination-btn:hover {
  background:rgba(216,207,192,.15);
}

.pagination-info {
  font-size:12px; color:rgba(216,207,192,.5);
}

.toast {
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%); padding:12px 20px; border-radius:4px; color:white; font-size:13px; z-index:1000; animation:slideUp .3s ease-out;
}

.toast.success {
  background:rgba(26,47,26,.9);
}

.toast.error {
  background:rgba(80,10,10,.9);
}

@keyframes slideUp {
  from { opacity:0; transform:translateX(-50%) translateY(20px); }
  to { opacity:1; transform:translateX(-50%) translateY(0); }
}

/* OAuth Social Login */
.oauthDivider {
  text-align: center;
  margin: 18px 0 12px;
  position: relative;
  color: #888;
  font-size: 13px;
}
.oauthDivider::before,
.oauthDivider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 35%;
  height: 1px;
  background: #444;
}
.oauthDivider::before { left: 0; }
.oauthDivider::after { right: 0; }

.oauthButtons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.oauthBtn {
  padding: 10px 0;
  border: 1px solid #555;
  border-radius: 6px;
  background: #1a1a2e;
  color: #eee;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.oauthBtn:hover { background: #2a2a4e; }

.oauthZalo { border-color: #0068ff; color: #0068ff; }
.oauthZalo:hover { background: #0068ff22; }

.oauthGoogle { border-color: #ea4335; color: #ea4335; }
.oauthGoogle:hover { background: #ea433522; }

.oauthFacebook { border-color: #1877f2; color: #1877f2; }
.oauthFacebook:hover { background: #1877f222; }

.oauthTiktok { border-color: #ff0050; color: #ff0050; }
.oauthTiktok:hover { background: #ff005022; }

#setUsernameForm input {
  width: 100%;
  margin-bottom: 8px;
}