/* style.css —— 雾港谜案 共享恐怖样式（已适配手机端） */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
:root{
  --ink:#0a0d10; --fog:#151b21; --mist:#262f37; --bone:#c9c2b4;
  --blood:#7a1f1f; --warn:#a83232; --lantern:#d98a3a;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
html,body{width:100%;height:100%;overflow:hidden;background:var(--ink);color:var(--bone);
  font-family:"Noto Serif SC","Source Han Serif SC","STZhongsong","SimSun",serif;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation;}
body{
  position:relative; cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22'><circle cx='11' cy='11' r='4' fill='%23d98a3a' opacity='0.85'/></svg>") 11 11, default;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
/* CRT 噪点 + 暗角 */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:9000;
  background:radial-gradient(circle at 50% 55%, transparent 55%, rgba(0,0,0,0.75) 100%);
  animation:flicker 5s steps(60) infinite;}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9001;opacity:0.16;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
  mix-blend-mode:overlay; animation:noise 0.12s steps(2) infinite;}
@keyframes noise{0%{transform:translate(0,0)}50%{transform:translate(-3px,2px)}100%{transform:translate(2px,-2px)}}
@keyframes flicker{0%,100%{opacity:1}47%{opacity:0.92}49%{opacity:1}51%{opacity:0.85}53%{opacity:1}}

#scene{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(8vh + var(--safe-t)) 6vw calc(110px + var(--safe-b));text-align:center;z-index:2;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.fog-layer{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%, rgba(38,47,55,0.0) 0%, rgba(10,13,16,0.55) 70%);
  animation:fogdrift 18s ease-in-out infinite alternate;}
@keyframes fogdrift{from{transform:translateX(-3%) scale(1)}to{transform:translateX(3%) scale(1.06)}}

h1.title{font-size:clamp(30px,8vw,68px);letter-spacing:4px;color:var(--lantern);
  text-shadow:0 0 18px rgba(217,138,58,0.35),0 2px 0 #000;margin-bottom:14px;font-weight:900;line-height:1.15;}
h2.sub{font-size:clamp(14px,3.6vw,22px);color:#8a8175;letter-spacing:2px;margin-bottom:24px;font-weight:400;}
p.lore{font-size:clamp(14.5px,4vw,18px);line-height:1.9;max-width:760px;color:#b8b1a3;text-align:justify;
  background:rgba(10,13,16,0.45);border:1px solid rgba(217,138,58,0.18);border-radius:6px;padding:18px 20px;
  box-shadow:inset 0 0 30px rgba(0,0,0,0.5);}
.clue{display:inline-block;margin-top:16px;padding:9px 14px;border:1px dashed var(--lantern);border-radius:4px;
  color:var(--lantern);font-size:14px;letter-spacing:1.5px;animation:cluepulse 2.4s ease-in-out infinite;}
@keyframes cluepulse{0%,100%{box-shadow:0 0 0 rgba(217,138,58,0)}50%{box-shadow:0 0 18px rgba(217,138,58,0.45)}}

/* 导航栏：PC 横排 / 手机端横滑 + 安全区 + 增大触控 */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;flex-wrap:nowrap;gap:8px;justify-content:flex-start;
  padding:10px 12px calc(10px + var(--safe-b));background:linear-gradient(to top, rgba(10,13,16,0.94), transparent);
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.nav::-webkit-scrollbar{display:none;}
.btn{padding:12px 18px;border:1px solid rgba(201,194,180,0.35);background:rgba(21,27,33,0.88);color:var(--bone);
  font-size:14.5px;letter-spacing:1.5px;border-radius:6px;cursor:pointer;text-decoration:none;transition:all .25s;font-family:inherit;
  white-space:nowrap;flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  -webkit-touch-callout:none;}
.btn:hover,.btn:active{border-color:var(--lantern);color:var(--lantern);box-shadow:0 0 14px rgba(217,138,58,0.3);transform:translateY(-1px);}
.btn.warn{border-color:var(--warn);color:#e8b4b4;}
.btn.warn:hover{color:#fff;box-shadow:0 0 16px rgba(168,50,50,0.5);}
.btn.locked{opacity:0.45;cursor:not-allowed;}
.cluebar{position:fixed;top:calc(10px + var(--safe-t));right:12px;z-index:60;font-size:12px;color:#8a8175;letter-spacing:1px;
  background:rgba(10,13,16,0.65);border:1px solid rgba(201,194,180,0.15);border-radius:20px;padding:5px 12px;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.cluebar b{color:var(--lantern);}

/* Jumpscare 突脸（高细节血脸：老周满脸鲜血、毛孔皱纹清晰）*/
.jumpscare{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 50%, #1a0808 0%, #000 70%);opacity:0;pointer-events:none;
  transition:opacity .04s linear;}
.jumpscare.show{opacity:1;}
.jumpscare img{width:min(96vw,96vh);height:auto;max-height:96vh;object-fit:contain;
  filter:contrast(1.55) brightness(0.95) saturate(1.1) drop-shadow(0 0 60px #7a1f1f) drop-shadow(0 0 120px #3a0a0a);
  transform:scale(0.55);transition:transform .06s cubic-bezier(.7,0,.9,1);}
.jumpscare.show img{transform:scale(1.22);}
body.scare-shake{animation:shake .28s linear infinite;}
@keyframes shake{0%{transform:translate(0,0)}20%{transform:translate(-8px,5px)}40%{transform:translate(7px,-6px)}60%{transform:translate(-6px,-4px)}80%{transform:translate(5px,7px)}100%{transform:translate(0,0)}}

/* 内涵恐怖元素提示条（手机端自适应字号/内边距） */
.horror-warn{position:fixed;left:50%;top:calc(46px + var(--safe-t));transform:translate(-50%,0);z-index:9600;
  background:rgba(122,31,31,0.94);color:#fff;padding:7px 14px;border-radius:18px;font-size:11.5px;letter-spacing:1px;
  border:1px solid rgba(255,80,80,0.5);box-shadow:0 0 18px rgba(122,31,31,0.5);pointer-events:none;
  white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis;}
@keyframes shake{0%{transform:translate(0,0)}25%{transform:translate(-6px,4px)}50%{transform:translate(5px,-5px)}75%{transform:translate(-4px,-3px)}100%{transform:translate(0,0)}}

/* 喘息黑影 + 文字 */
.breath-shadow{position:fixed;inset:0;z-index:8000;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 88% 22%, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.85) 100%);
  transition:opacity 1.2s ease;}
.breath-shadow.show{opacity:1;}
.breath-text{position:fixed;left:50%;top:62%;transform:translate(-50%,-50%);z-index:8001;pointer-events:none;
  font-size:clamp(24px,7vw,52px);color:#3a2a2a;letter-spacing:6px;opacity:0;text-shadow:0 0 12px #000;
  transition:opacity .8s ease;font-style:italic;}

/* 全屏提示 */
.fs-tip{position:fixed;left:50%;top:calc(24px + var(--safe-t));transform:translate(-50%,-12px);z-index:9500;opacity:0;pointer-events:none;
  background:rgba(122,31,31,0.92);color:#fff;padding:9px 16px;border-radius:4px;font-size:13px;letter-spacing:1px;
  transition:all .5s ease;max-width:90vw;text-align:center;}
.fs-tip.show{opacity:1;transform:translate(-50%,0);}
:-webkit-full-screen{width:100%!important;height:100%!important;}
:-moz-full-screen{width:100%!important;height:100%!important;}
:fullscreen{width:100%!important;height:100%!important;}
.jumpscare{position:fixed;inset:0;z-index:9200;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.92);opacity:0;transition:opacity .04s ease;}
.jumpscare img{width:min(92vw,92vh);height:auto;filter:contrast(1.4) brightness(0.6) drop-shadow(0 0 40px #000);}
.jumpscare.show{opacity:1;}

/* 灯灭特效 */
.blackout{position:fixed;inset:0;z-index:8500;background:#000;opacity:0;pointer-events:none;transition:opacity .25s ease;}
.blackout.on{opacity:1;}

/* 通用提示条 */
.toast{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(0.9);z-index:9500;opacity:0;pointer-events:none;
  background:rgba(10,13,16,0.94);border:1px solid var(--lantern);color:var(--bone);padding:18px 24px;border-radius:6px;
  font-size:15px;letter-spacing:1.5px;text-align:center;transition:all .35s ease;max-width:86vw;line-height:1.6;}

/* ============ 移动端专项适配 ============ */
@media (max-width: 760px){
  #scene{padding:calc(7vh + var(--safe-t)) 5vw calc(120px + var(--safe-b));}
  p.lore{padding:15px 16px;line-height:1.8;}
  .nav{gap:6px;padding:8px 8px calc(8px + var(--safe-b));}
  .btn{padding:11px 14px;font-size:13.5px;letter-spacing:1px;border-radius:6px;}
  .cluebar{font-size:11px;padding:4px 10px;}
  .horror-warn{font-size:10.5px;padding:6px 12px;letter-spacing:0.5px;top:calc(40px + var(--safe-t));}
  .toast{font-size:14px;padding:16px 20px;}
}
@media (max-width: 420px){
  h1.title{letter-spacing:3px;}
  .btn{padding:10px 12px;font-size:12.5px;}
  .horror-warn{font-size:9.5px;padding:5px 10px;}
}
/* 横屏手机：减小上下 padding，避免场景内容被导航/提示挤压 */
@media (max-height: 480px) and (orientation: landscape){
  #scene{padding:calc(4vh + var(--safe-t)) 6vw calc(90px + var(--safe-b));}
  h1.title{font-size:clamp(24px,5vw,40px);margin-bottom:8px;}
  h2.sub{margin-bottom:14px;}
  .nav .btn{padding:8px 12px;font-size:12.5px;min-height:38px;}
}
/* 触屏设备：增大可触控区域，按钮点击反馈 */
@media (hover:none) and (pointer:coarse){
  .btn{min-height:44px;}
  .btn:active{transform:scale(0.97);border-color:var(--lantern);color:var(--lantern);}
}