:root{ --bk:#c9b98a; --ink:#e8e0c4; }
  *{ margin:0; padding:0; box-sizing:border-box; }
  html,body{ width:100%; height:100%; overflow:hidden; background:#0a0a08;
    font-family:"Consolas","SFMono-Regular","Courier New","Microsoft YaHei",monospace; color:var(--ink); }
  #app{ position:fixed; inset:0; }
  canvas{ display:block; }

  /* ---------- HUD ---------- */
  #hud{ position:fixed; inset:0; pointer-events:none; z-index:5; }
  #crosshair{ position:absolute; left:50%; top:50%; width:5px; height:5px; margin:-2.5px 0 0 -2.5px;
    border-radius:50%; background:rgba(232,224,196,.30); box-shadow:0 0 3px rgba(0,0,0,.8); }
  #stats{ position:absolute; left:14px; top:12px; font-size:12px; line-height:1.6; white-space:pre;
    opacity:.7; text-shadow:0 1px 2px #000; letter-spacing:.02em; }
  #hint{ position:absolute; left:14px; bottom:12px; font-size:11.5px; opacity:.45; text-shadow:0 1px 2px #000; }
  #toast{ position:absolute; right:14px; top:12px; font-size:12px; opacity:0; transition:opacity .25s;
    text-shadow:0 1px 2px #000; color:#ffe9a8; }

  /* ---------- 状态面板 / 交互提示 ---------- */
  #panel2{ position:absolute; right:14px; bottom:14px; width:190px; font-size:11px;
    text-shadow:0 1px 2px #000; opacity:.92; }
  .meter{ margin-bottom:7px; }
  .meter b{ display:block; font-weight:400; opacity:.55; letter-spacing:.14em; margin-bottom:3px; }
  .meter .bar2{ height:4px; background:rgba(255,255,255,.10); overflow:hidden; }
  .meter .bar2 i{ display:block; height:100%; width:100%; }
  #mSan i{ background:linear-gradient(90deg,#9c2f2f,#c9b98a); }
  #mBat i{ background:linear-gradient(90deg,#6b5d20,#e8dfa0); }
  #inv{ margin-top:9px; opacity:.75; }
  #signal{ margin-top:3px; opacity:.75; letter-spacing:.16em; }
  #prompt{ position:absolute; left:50%; top:57%; transform:translateX(-50%); font-size:13px;
    padding:5px 13px; border:1px solid rgba(201,185,138,.35); background:rgba(12,11,8,.55);
    color:#f0e8c8; opacity:0; transition:opacity .12s; white-space:nowrap; }
  #subtitle{ position:absolute; left:50%; bottom:54px; transform:translateX(-50%); font-size:12.5px;
    color:#d3c9a0; opacity:0; transition:opacity .45s; text-shadow:0 1px 3px #000;
    max-width:74vw; text-align:center; line-height:1.7; }
  #flash{ position:fixed; inset:0; background:#5c0f0f; opacity:0; pointer-events:none; z-index:6;
    transition:opacity .55s; mix-blend-mode:screen; }

  /* ---------- 结局遮罩 ---------- */
  #dead h1{ color:#cf5a49; letter-spacing:.34em; }
  #win h1{ color:#dbe9b4; }
  #deadFace{ width:200px; height:200px; margin:4px auto 6px; display:block;
    filter:contrast(1.2) brightness(1.1); animation:dz .11s steps(2) infinite; }
  @keyframes dz{ 0%{ transform:translate(0,0) } 100%{ transform:translate(1.5px,-1px) } }
  .endstat{ margin-top:14px; font-size:12px; opacity:.6; line-height:1.95; }

  /* ---------- 遮罩 ---------- */
  .overlay{ position:fixed; inset:0; z-index:10; display:flex; align-items:center; justify-content:center;
    text-align:center; padding:24px;
    background:radial-gradient(circle at 50% 42%, #4d4631 0%, #201d14 55%, #0c0b08 100%); }
  .overlay[hidden]{ display:none; }
  .panel{ width:min(600px,100%); padding:30px 34px 26px; border:1px solid rgba(201,185,138,.22);
    background:rgba(18,17,12,.7); box-shadow:0 0 90px rgba(0,0,0,.75) inset, 0 0 40px rgba(0,0,0,.6); }
  .panel h1{ font-size:clamp(20px,4.6vw,30px); letter-spacing:.32em; color:var(--bk); font-weight:600; }
  .panel h1 small{ display:block; margin-top:8px; font-size:11px; letter-spacing:.42em; opacity:.5; font-weight:400; }
  .panel p{ margin-top:14px; font-size:13px; line-height:1.9; opacity:.72; }
  .panel .keys{ margin-top:16px; font-size:12px; opacity:.55; line-height:2; }
  .panel .go{ margin-top:22px; font-size:14px; color:var(--bk); letter-spacing:.2em;
    border:1px solid rgba(201,185,138,.35); padding:11px 8px; animation:bk 2.6s ease-in-out infinite; }
  @keyframes bk{ 0%,100%{ opacity:.55 } 50%{ opacity:1 } }
  #bar{ margin-top:20px; height:3px; background:rgba(201,185,138,.14); overflow:hidden; }
  #bar i{ display:block; height:100%; width:0%; background:var(--bk); transition:width .3s ease; }
  #loadmsg{ margin-top:10px; font-size:11.5px; opacity:.5; letter-spacing:.08em; }
  .err{ color:#ffb4a0; font-size:12px; word-break:break-all; opacity:.8; margin-top:12px; }
/* Sylomni site additions; the original Backrooms styles above are preserved. */
.site-back {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  z-index: 30;
  color: #f4e9bb;
  border: 1px solid rgba(232, 224, 196, .32);
  background: rgba(10, 10, 8, .78);
  padding: 8px 11px;
  font: 12px/1.1 "Consolas", "SFMono-Regular", "Microsoft YaHei", monospace;
  text-decoration: none;
  letter-spacing: .04em;
  backdrop-filter: blur(10px);
}
.site-back:hover,
.site-back:focus-visible {
  color: #fff8d8;
  border-color: rgba(244, 233, 187, .72);
  outline: none;
}
.site-device-note {
  margin: 14px 0 -8px;
  font-size: 11.5px;
  color: #d8ca99;
  opacity: .62;
}
.lifecycle-gate { z-index: 28; }
.lifecycle-gate .panel { max-width: 480px; }
.lifecycle-actions {
  display: flex;
  margin-top: 24px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
.lifecycle-actions a,
.lifecycle-actions button {
  min-width: 128px;
  padding: 10px 14px;
  border: 1px solid rgba(232, 224, 196, .42);
  color: #f4e9bb;
  background: rgba(10, 10, 8, .78);
  font: 12px/1.2 "Consolas", "SFMono-Regular", "Microsoft YaHei", monospace;
  text-decoration: none;
  cursor: pointer;
}
.lifecycle-actions a:hover,
.lifecycle-actions button:hover,
.lifecycle-actions a:focus-visible,
.lifecycle-actions button:focus-visible {
  border-color: #fff8d8;
  color: #fff8d8;
  outline: 2px solid rgba(255, 248, 216, .7);
  outline-offset: 3px;
}
#stats { top: 54px; }
@media (max-width: 640px) {
  .site-back { font-size: 11px; padding: 7px 9px; }
  .panel { padding: 24px 20px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-back { backdrop-filter: none; }
}