:root{
  --ink:#08090b;
  --accent:#c0714a;
  --accent2:#e8975f;
  --line:rgba(255,255,255,.16);
  --line2:rgba(255,255,255,.07);
  --text:#eae4d9;
  --dim:#7e7b74;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:var(--ink)}
body{
  font-family:ui-sans-serif,-apple-system,"PingFang SC","Helvetica Neue",Arial,sans-serif;
  color:var(--text);cursor:default;
  -webkit-font-smoothing:antialiased;
  user-select:none;-webkit-tap-highlight-color:transparent;
}

canvas#room{
  position:fixed;inset:0;width:100%;height:100%;display:block;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}

/* 取景框 */
.frame{position:fixed;inset:16px;z-index:15;pointer-events:none;border:1px solid rgba(255,255,255,.05)}
.frame i{position:absolute;width:11px;height:11px;border:1px solid rgba(232,151,95,.45)}
.frame i:nth-child(1){left:-1px;top:-1px;border-right:0;border-bottom:0}
.frame i:nth-child(2){right:-1px;top:-1px;border-left:0;border-bottom:0}
.frame i:nth-child(3){left:-1px;bottom:-1px;border-right:0;border-top:0}
.frame i:nth-child(4){right:-1px;bottom:-1px;border-left:0;border-top:0}

/* 文字条 */
.bar{
  position:fixed;z-index:20;display:flex;align-items:center;gap:14px;
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dim);pointer-events:none;text-decoration:none;
}
.bar.tl{top:30px;left:34px}
.bar.br{bottom:28px;right:34px;letter-spacing:.14em;text-transform:none;opacity:.65}
.bar.tr{top:30px;right:34px;letter-spacing:.14em;text-transform:none;pointer-events:auto;color:var(--dim);transition:color .2s}
.bar.tr:hover{color:var(--accent2)}
.bar b{color:var(--text);font-weight:500;letter-spacing:.3em}
.dot{width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px rgba(192,113,74,.9)}

/* 物件标记 */
#marks{position:fixed;inset:0;z-index:25;pointer-events:none}
.mk{
  position:absolute;left:0;top:0;
  display:flex;flex-direction:column;align-items:center;
  text-decoration:none;pointer-events:auto;
  will-change:transform;
  transition:opacity .25s ease;
}
.mk .box{
  display:grid;place-items:center;
  min-width:30px;height:30px;padding:0 7px;
  font-size:13px;font-weight:600;letter-spacing:.04em;
  color:#f2ece1;
  background:rgba(9,10,12,.82);
  border:1px solid rgba(255,255,255,.26);
  box-shadow:0 4px 22px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .18s,color .18s,border-color .18s,transform .18s;
  animation:mkPulse 3.4s ease-in-out infinite;
}
@keyframes mkPulse{
  0%,100%{box-shadow:0 4px 22px rgba(0,0,0,.7),0 0 0 0 rgba(232,151,95,0),inset 0 1px 0 rgba(255,255,255,.08)}
  50%{box-shadow:0 4px 22px rgba(0,0,0,.7),0 0 0 4px rgba(232,151,95,.1),inset 0 1px 0 rgba(255,255,255,.08)}
}
.mk .stem{width:1px;height:20px;background:linear-gradient(to bottom,rgba(255,255,255,.35),rgba(255,255,255,0))}
.mk .pip{width:3px;height:3px;background:rgba(232,151,95,.7);margin-top:-1px}
.mk:hover .box,.mk:focus-visible .box{
  background:var(--accent);color:#120d09;border-color:var(--accent2);
  transform:translateY(-2px) scale(1.06);animation:none;
  box-shadow:0 8px 28px rgba(192,113,74,.4);
}
.mk:hover .stem{background:linear-gradient(to bottom,var(--accent2),transparent)}
.mk:hover .pip{background:var(--accent2)}

/* 悬停提示：暖金细边的浮签，下方带小三角指向物件 */
.tip{
  position:fixed;z-index:30;left:0;top:0;
  padding:9px 17px 10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;font-weight:500;
  letter-spacing:.22em;text-indent:.22em;
  color:#f6eedf;
  background:linear-gradient(180deg,rgba(30,25,21,.95),rgba(12,11,10,.97));
  border:1px solid rgba(232,151,95,.36);
  border-radius:11px;
  box-shadow:
    0 12px 32px -14px rgba(0,0,0,.95),
    inset 0 1px 0 rgba(255,226,192,.1),
    inset 0 0 0 1px rgba(255,255,255,.03);
  backdrop-filter:blur(14px) saturate(170%);
  -webkit-backdrop-filter:blur(14px) saturate(170%);
  white-space:nowrap;pointer-events:none;
  opacity:0;
  transform:translate(-50%,-100%) translateY(-4px) scale(.88);
  transform-origin:50% 100%;
  transition:opacity .18s ease,transform .3s cubic-bezier(.34,1.56,.64,1);
}
.tip.on{
  opacity:1;
  transform:translate(-50%,-100%) translateY(-19px) scale(1);
}

/* 指向物件的小三角 */
.tip::after{
  content:"";
  position:absolute;left:50%;bottom:-4.5px;
  width:8px;height:8px;
  transform:translateX(-50%) rotate(45deg);
  background:rgba(13,12,11,.97);
  border-right:1px solid rgba(232,151,95,.36);
  border-bottom:1px solid rgba(232,151,95,.36);
}

/* 左右两条暖金短线，像标签的两端 */
.tip::before{
  content:"";
  position:absolute;left:9px;right:9px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,208,150,.55),transparent);
}

/* 遮罩与降级 */
.veil{position:fixed;inset:0;z-index:50;background:var(--ink);pointer-events:none;transition:opacity 1s ease}
.nogpu{
  position:fixed;inset:0;z-index:99;display:none;place-items:center;text-align:center;
  padding:40px;font-size:12px;line-height:2;letter-spacing:.1em;color:#8b8880;background:var(--ink);
}
.nogpu.on{display:grid}

@media (max-width:640px){
  .frame{inset:9px}
  .bar.tl{top:20px;left:20px;font-size:9.5px}
  .bar.tr{top:20px;right:20px;font-size:9.5px}
  .bar.br{bottom:18px;right:20px;font-size:9px}
  .mk .box{min-width:27px;height:27px;font-size:12px}
}

/* 翻书后的纸色白场 */
.whiteout{
  position:fixed;inset:0;z-index:60;
  background:#e8dfc8;
  pointer-events:none;opacity:0;
  transition:opacity .3s ease;
}

/* ---------- 显示器屏幕（DOM 覆盖层，高清） ---------- */
.mon-screen{
  position:fixed;left:0;top:0;z-index:8;
  transform-origin:0 0;
  pointer-events:none;opacity:0;
  display:flex;flex-direction:column;
  padding:.6em .75em;
  background:linear-gradient(160deg, rgba(8,26,36,.72), rgba(6,18,26,.82));
  border-radius:.35em;
  box-shadow:inset 0 0 2.4em rgba(90,209,230,.07);
  color:#d8e8f0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.04em;
  overflow:hidden;
}
.ms-head{font-size:.42em;color:#5b8496;letter-spacing:.18em;margin-bottom:.5em}
.ms-main{display:flex;gap:.8em;flex:1;min-height:0}
.ms-heat{
  display:grid;grid-template-rows:repeat(7, 1fr);
  grid-auto-flow:column;grid-auto-columns:1fr;
  gap:.12em;flex:0 0 52%;
}
.ms-heat i{display:block;border-radius:.06em;background:#12232d}
.ms-heat i.lv1{background:#1e5162}
.ms-heat i.lv2{background:#2b8095}
.ms-heat i.lv3{background:#42aec4}
.ms-heat i.lv4{background:#78dcec}
.ms-heat i.lvf{background:#0b1a22}
.ms-clock{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-end}
.ms-time{font-size:1.55em;font-weight:600;color:#f4ecdd;line-height:1;letter-spacing:.02em}
.ms-date{font-size:.44em;color:#5b8496;margin-top:.5em;letter-spacing:.06em}
.ms-foot{
  font-size:.36em;color:#4a7583;letter-spacing:.1em;
  border-top:1px solid rgba(90,209,230,.13);padding-top:.5em;margin-top:.5em;
}