/* 生化危机:洋馆惊魂 — 样式 */
* { margin:0; padding:0; box-sizing:border-box; user-select:none; }
html,body { width:100%; height:100%; background:#000; overflow:hidden;
  font-family:"SimSun","NSimSun",serif; color:#ccc; }

#stage { position:absolute; left:50%; top:50%; width:960px; height:600px;
  transform-origin:center center; background:#000; overflow:hidden; }
#game { position:absolute; left:0; top:0; image-rendering:pixelated; background:#000; }

.hidden { display:none !important; }

/* ---------- 滤镜 ---------- */
#vignette { position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 52%, rgba(0,0,0,.55) 100%);
  z-index:5; }
#damage-flash { position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(160,0,0,0) 40%, rgba(160,0,0,.5) 100%);
  opacity:0; transition:opacity .12s; z-index:6; }
#damage-flash.on { opacity:1; }
/* 危险状态(HP<40)红色脉动边缘 */
#danger-tint { position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(120,0,0,0) 45%, rgba(150,0,0,.6) 100%);
  opacity:0; transition:opacity .3s; z-index:6; }
/* 过场黑边(剧情/BOSS 登场) */
#stage.cine::before, #stage.cine::after { content:""; position:absolute; left:0; width:100%;
  height:52px; background:#000; z-index:21; pointer-events:none; animation:cinein .45s ease; }
#stage.cine::before { top:0; } #stage.cine::after { bottom:0; }
@keyframes cinein { from { height:0; } }
/* 游玩时隐藏系统光标(自绘准星) */
#stage.nocursor { cursor:none; }
#fade { position:absolute; left:0; top:0; width:100%; height:100%; background:#000;
  opacity:0; pointer-events:none; transition:opacity .5s; z-index:40; }
#fade.black { opacity:1; pointer-events:auto; }

/* ---------- HUD ---------- */
#hud { position:absolute; left:0; bottom:0; width:100%; pointer-events:none; z-index:10; }
#ecg { position:absolute; left:14px; bottom:10px; background:rgba(0,10,4,.55);
  border:1px solid #1d3a24; }
#ammo-hud { position:absolute; right:16px; bottom:12px; text-align:right;
  text-shadow:0 0 4px #000, 0 0 4px #000; }
#weapon-name { font-size:17px; letter-spacing:2px; color:#ddd; }
#ammo-count { font-size:24px; color:#fff; letter-spacing:1px; }
#escape-timer { position:absolute; left:50%; top:14px; transform:translateX(-50%);
  font-size:30px; color:#f33; letter-spacing:4px; text-shadow:0 0 8px #900;
  font-family:Consolas,monospace; }
#escape-timer.urgent { color:#ff2020; animation:etblink .5s steps(2, jump-none) infinite; }
@keyframes etblink { 50% { opacity:.3; } }

#room-name { position:absolute; left:50%; top:34px; transform:translateX(-50%);
  font-size:24px; letter-spacing:8px; color:#e8e0d0; text-shadow:0 0 10px #000;
  opacity:0; transition:opacity .8s; z-index:10; pointer-events:none; white-space:nowrap; }
#room-name.show { opacity:1; }

/* ---------- 消息框 ---------- */
#msgbox { position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  width:640px; min-height:74px; background:rgba(6,6,10,.88);
  border:1px solid #4a3b2a; padding:12px 18px 8px; z-index:26; }
#msg-text { font-size:17px; line-height:1.55; color:#e5dcc8; letter-spacing:1px; }
#msg-options { margin-top:8px; }
#msg-options div { display:inline-block; margin-right:28px; padding:2px 10px; font-size:16px;
  color:#9a917d; cursor:pointer; letter-spacing:2px; }
#msg-options div.sel { color:#ffd76a; text-shadow:0 0 6px #7a5; }
#msg-options div.sel::before { content:"▶ "; font-size:12px; }
#msg-hint { font-size:11px; color:#6b6355; text-align:right; }
#msgbox.choice #msg-hint { display:none; }

/* ---------- 轻提示(拾取等瞬时反馈) ---------- */
#toast { position:absolute; left:50%; bottom:118px; transform:translateX(-50%) translateY(8px);
  max-width:70%; background:rgba(6,6,10,.88); border:1px solid #4a3b2a;
  color:#e5dcc8; font-size:15px; letter-spacing:1px; padding:8px 18px; text-align:center;
  opacity:0; transition:opacity .25s, transform .25s; pointer-events:none; z-index:33; }
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- 文件 ---------- */
#doc-reader { position:absolute; left:0; top:0; width:100%; height:100%;
  background:rgba(0,0,0,.72); z-index:30; display:flex; align-items:center; justify-content:center; }
#doc-paper { width:560px; max-height:460px; overflow:auto; background:#d8cfae; color:#3a3020;
  padding:30px 36px; border:1px solid #7a6f4d; box-shadow:0 0 40px #000; }
#doc-paper h2 { font-size:20px; border-bottom:2px solid #8a7d55; padding-bottom:8px;
  margin-bottom:12px; letter-spacing:3px; }
#doc-body { font-size:16px; line-height:1.8; white-space:pre-wrap; }
#doc-body .blood { color:#8a1010; font-weight:bold; }
#doc-hint { margin-top:14px; font-size:12px; color:#7a6f4d; text-align:right; }

/* ---------- 物品栏 ---------- */
#inv-screen { position:absolute; left:0; top:0; width:100%; height:100%;
  background:rgba(2,2,6,.82); z-index:30; display:flex; align-items:center;
  justify-content:center; gap:26px; }
#inv-panel, #box-panel { background:#0b0b10; border:1px solid #3d3428; padding:18px 22px; }
#inv-panel h1, #box-panel h1, #map-panel h1, #safe-panel h1 { font-size:18px; color:#c9b98a;
  letter-spacing:6px; margin-bottom:14px; border-bottom:1px solid #3d3428; padding-bottom:8px; }
#inv-slots { display:grid; grid-template-columns:repeat(2,64px); grid-auto-rows:64px; gap:8px; }
#inv-body { display:flex; gap:18px; align-items:stretch; }
.slot { width:64px; height:64px; background:#12121a; border:1px solid #33303a; position:relative;
  cursor:pointer; }
.slot img { width:100%; height:100%; image-rendering:pixelated; }
.slot.sel { border-color:#ffd76a; box-shadow:0 0 8px rgba(255,215,106,.6); }
.slot .qty { position:absolute; right:3px; bottom:1px; font-size:12px; color:#cfc; }
.slot.combining { border-color:#e55; box-shadow:0 0 8px rgba(255,80,80,.7); }
#inv-side { width:190px; padding-left:16px; border-left:1px solid #2a2732; }
#inv-icon { width:64px; height:64px; margin:0 auto 8px; }
#inv-icon img { width:100%; height:100%; image-rendering:pixelated; }
#inv-desc { font-size:13px; line-height:1.6; color:#b3a98f; min-height:96px; }
#inv-buttons { margin-top:10px; }
#inv-buttons button, #safe-buttons button { display:block; width:100%; margin-bottom:8px;
  background:#1a1a22; color:#cfc4a4; border:1px solid #4a4438; padding:6px; font-size:14px;
  letter-spacing:3px; cursor:pointer; font-family:inherit; }
#inv-buttons button:hover, #safe-buttons button:hover { background:#2a2a34; color:#fff; }
#inv-stat { margin-top:14px; font-size:12px; color:#77705f; line-height:1.8; }
#box-slots { display:grid; grid-template-columns:repeat(4,64px); grid-auto-rows:64px; gap:8px;
  max-height:296px; overflow:auto; }
#box-slots::-webkit-scrollbar { width:8px; }
#box-slots::-webkit-scrollbar-thumb { background:#3d3428; }
#box-slots::-webkit-scrollbar-track { background:#14141a; }
#box-panel { align-self:center; }
#box-hint { margin-top:8px; font-size:11px; color:#6b6355; }

/* ---------- 地图 ---------- */
#map-screen { position:absolute; left:0; top:0; width:100%; height:100%;
  background:rgba(2,2,6,.85); z-index:30; display:flex; align-items:center; justify-content:center; }
#map-panel { text-align:center; }
#map-canvas { background:#0a0a0f; border:1px solid #3d3428; }
#map-hint { margin-top:8px; font-size:11px; color:#6b6355; }

/* ---------- 保险柜 ---------- */
#safe-screen { position:absolute; left:0; top:0; width:100%; height:100%;
  background:rgba(0,0,0,.8); z-index:30; display:flex; align-items:center; justify-content:center; }
#safe-panel { text-align:center; background:#0c0c11; border:1px solid #3d3428; padding:24px 40px; }
#safe-digits { display:flex; gap:18px; justify-content:center; margin:18px 0; }
.digit { width:64px; height:84px; background:#17171f; border:1px solid #4a4438; position:relative; }
.digit span { font-size:44px; color:#d8cfae; font-family:Consolas,monospace; line-height:84px; }
.digit .arr { position:absolute; left:0; width:100%; text-align:center; color:#8a8270; font-size:14px;
  cursor:pointer; }
.digit .arr:hover { color:#ffd76a; }
.digit .arr.up { top:2px; } .digit .arr.down { bottom:2px; }
#safe-msg { min-height:22px; font-size:14px; color:#b3a98f; margin-bottom:12px; }
#safe-buttons { display:flex; gap:14px; justify-content:center; }
#safe-buttons button { width:150px; }

/* ---------- 转场 ---------- */
#transition { position:absolute; left:0; top:0; width:100%; height:100%; background:#000; z-index:35; }
#door-canvas { image-rendering:pixelated; }

/* ---------- 标题 ---------- */
#title-screen { position:absolute; left:0; top:0; width:100%; height:100%; background:#000;
  z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center; }
#title-logo { text-align:center; margin-bottom:60px; }
#logo-en { font-family:Georgia,"Times New Roman",serif; font-size:64px; font-weight:bold;
  color:#8a0e0e; letter-spacing:6px; text-shadow:0 0 24px #400, 0 2px 0 #200; }
#logo-cn { font-size:34px; color:#b8b0a0; letter-spacing:10px; margin-top:14px; padding-left:10px; }
#logo-sub { font-size:15px; color:#6e685c; letter-spacing:4px; margin-top:10px; padding-left:4px; }
#title-menu, #pause-panel, #death-menu { text-align:center; }
.menu-item { font-size:20px; letter-spacing:6px; color:#9a917d; margin:16px auto; cursor:pointer;
  padding:4px 30px; }
.menu-item:hover, .menu-item.sel { color:#ffd76a; text-shadow:0 0 10px rgba(255,180,60,.5); }
#title-foot { position:absolute; bottom:18px; width:100%; text-align:center; font-size:11px;
  color:#4a463e; letter-spacing:2px; }
#title-screen::after { content:""; position:absolute; left:0; top:0; width:100%; height:100%;
  pointer-events:none; opacity:.35;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px); }

/* ---------- 帮助 / 暂停 ---------- */
#help-screen, #pause-screen { position:absolute; left:0; top:0; width:100%; height:100%;
  background:rgba(0,0,0,.86); display:flex; align-items:center; justify-content:center; }
#help-screen { z-index:60; }  /* 帮助面板永远置顶(标题画面之上也可点开) */
#pause-screen { z-index:45; }
#help-panel, #pause-panel { background:#0b0b10; border:1px solid #3d3428; padding:26px 40px; }
#help-panel { max-width:calc(100% - 32px); }
#help-panel h1, #pause-panel h1 { font-size:20px; color:#c9b98a; letter-spacing:8px;
  margin-bottom:16px; text-align:center; }
#help-panel table { width:100%; border-collapse:collapse; margin-bottom:16px; }
#help-panel td { padding:4px 12px; font-size:14px; color:#b3a98f; }
#help-panel td:first-child { color:#e0d5b0; font-family:Consolas,monospace; text-align:right; }
.help-tip { font-size:12px; color:#77705f; max-width:420px; line-height:1.7; margin-bottom:6px; }

/* ---------- 死亡 ---------- */
#death-screen { position:absolute; left:0; top:0; width:100%; height:100%; z-index:48;
  background:rgba(10,0,0,.55); display:flex; flex-direction:column; align-items:center;
  justify-content:center; }
#death-en { font-family:Georgia,"Times New Roman",serif; font-size:76px; font-weight:bold;
  color:#a00d0d; letter-spacing:4px; text-shadow:0 0 30px #500; }
#death-cn { font-size:22px; color:#7a5a5a; letter-spacing:4px; margin-top:10px; padding-left:4px; }
#death-menu { margin-top:70px; }

/* ---------- 结算 ---------- */
#ending-screen { position:absolute; left:0; top:0; width:100%; height:100%; z-index:48;
  background:#000; display:flex; align-items:center; justify-content:center; }
#ending-panel { width:560px; text-align:center; background:#0a0a0e; border:1px solid #3d3428;
  padding:34px 40px; }
#ending-panel h1 { font-size:22px; color:#c9b98a; letter-spacing:3px; margin-bottom:14px; }
#ending-text { font-size:14px; color:#8f8873; line-height:1.8; margin-bottom:18px; white-space:pre-wrap; }
#ending-stats { width:100%; border-collapse:collapse; margin-bottom:16px; }
#ending-stats td { padding:5px 10px; font-size:15px; color:#b3a98f; border-bottom:1px solid #1e1c22; }
#ending-stats td:last-child { text-align:right; color:#e0d5b0; }
#ending-rank { font-size:64px; font-weight:bold; color:#ffd76a; text-shadow:0 0 20px #760;
  letter-spacing:4px; margin:8px 0 18px; }