/* ==========================================================================
   暗房 —— 拟物 + 3D 密室界面
   房间用真正的 CSS 3D 透视搭出来（六个面 + 立体家俱），不依赖任何图片。
   ========================================================================== */

:root {
  --noise: 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='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");

  --wood-1: #4a382d;
  --wood-2: #33251d;
  --wood-3: #241a14;

  --metal-1: #f4f2ee;
  --metal-2: #d9d5cd;
  --metal-3: #b8b2a8;

  --ink: #2f2a25;
  --ink-soft: #6d655c;

  --accent: #c8763a;
  --accent-hi: #e79a5c;
  --accent-lo: #9a5526;

  --teal: #3f7d78;
  --teal-hi: #5fa39c;

  --phos: #b8ffc8;
  --phos-dim: #4e9a63;

  --radius-ctl: 9px;
  --bevel: inset 0 1px 0 rgba(255, 255, 255, 0.85),
           inset 0 -1px 0 rgba(0, 0, 0, 0.12);
  --drop-sm: 0 1px 1px rgba(0, 0, 0, 0.18), 0 2px 5px rgba(0, 0, 0, 0.14);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  height: 100%;
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100%;
  margin: 0;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f2e9dd;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255, 206, 150, 0.18), transparent 62%),
    linear-gradient(170deg, #241c17, #15100d 55%, #0c0908);
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* 空气里的浮尘 */
.dust {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
  background-image: var(--noise);
  background-size: 180px 180px;
  mix-blend-mode: overlay;
}

/* ============================== 顶栏 ============================== */

.topbar {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px clamp(10px, 2vw, 26px) 10px;
  padding: 9px 16px;
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.03) 46%, rgba(0, 0, 0, 0.2)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, rgba(0, 0, 0, 0.05) 1px 3px),
    linear-gradient(180deg, #6b5849, #3b2c21);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35),
              inset 0 -1px 0 rgba(0, 0, 0, 0.4),
              0 6px 16px rgba(0, 0, 0, 0.45);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
}

.topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar-left strong { font-size: 15px; letter-spacing: 0.4px; }
.topbar-sub {
  font-size: 12px;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dot-light {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #b6ffd0, #29a05a 60%, #0d5c30);
  box-shadow: 0 0 7px rgba(80, 255, 150, 0.7), inset 0 -1px 1px rgba(0, 0, 0, 0.4);
}

.crumbs { display: flex; gap: 6px; flex: none; }

.crumb {
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: #e4d8c8;
  padding: 6px 13px;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.18));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
}
.crumb:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.12)); }
.crumb.is-active {
  color: #2a1d12;
  background: linear-gradient(180deg, #ffd9a8, #d79a55);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 12px rgba(255, 190, 110, 0.35);
}

/* ============================== 视图容器 ============================== */

.frame {
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.view { display: none; flex: 1; flex-direction: column; }
.view.is-active { display: flex; animation: fade-in 0.25s ease; }

/* 房间在竖向空间里居中，窄屏时不会顶在上面留一大片空 */
#view-room { justify-content: center; padding-bottom: 10px; }

@keyframes fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.scene-hint {
  margin: 14px auto 26px;
  padding: 8px 18px;
  font-size: 12.5px;
  color: #d8c9b6;
  text-align: center;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.scene-hint strong { color: #ffd9a8; }
.scene-hint .sep { margin: 0 8px; opacity: 0.45; }

/* 房间下方的两块黄铜铭牌：窄屏下比点 3D 物件更稳 */
.room-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto 22px;
  padding: 0 14px;
}

.plaque {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 190px;
  padding: 11px 20px;
  font: inherit;
  color: #f6e7cd;
  cursor: pointer;
  border: 1px solid #241a06;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 236, 190, 0.32), rgba(0, 0, 0, 0.16) 55%),
    linear-gradient(180deg, #7d6229, #4a3512 60%, #33240b);
  box-shadow: inset 0 1px 0 rgba(255, 232, 176, 0.55),
              inset 0 -2px 0 rgba(0, 0, 0, 0.5),
              0 6px 16px rgba(0, 0, 0, 0.5);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
  transition: transform 0.12s ease, box-shadow 0.16s ease;
}
.plaque:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 232, 176, 0.6),
              0 10px 22px rgba(0, 0, 0, 0.55),
              0 0 22px rgba(255, 196, 110, 0.3);
}
.plaque:active { transform: translateY(1px); }
.plaque-ico { font-size: 22px; }
.plaque-txt { display: flex; flex-direction: column; align-items: flex-start; }
.plaque-txt strong { font-size: 14px; letter-spacing: 1px; }
.plaque-txt em { font-style: normal; font-size: 11px; opacity: 0.72; }

/* ==========================================================================
   一、3D 房间
   ========================================================================== */

.room-stage {
  position: relative;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  aspect-ratio: 1500 / 700;
  overflow: hidden;
  flex: none;
}

/* 场景单位：1u = 房间宽度的 1/1500 */
.room-camera {
  --u: min(calc(100vw / 1500), 1px);
  --w: calc(var(--u) * 1500);
  --h: calc(var(--u) * 700);
  --d: calc(var(--u) * 900);
  --hw: calc(var(--u) * 750);
  --hh: calc(var(--u) * 350);
  --hd: calc(var(--u) * 450);

  position: absolute;
  inset: 0;
  perspective: calc(var(--u) * 1150);
  perspective-origin: 50% 50%;
}

.room {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--w);
  height: var(--h);
  transform-style: preserve-3d;
  transform: translate3d(-50%, -50%, 0) translateZ(calc(var(--u) * -70));
  /* 这个容器本身不参与点击命中：它的平面比柜子、电脑更靠近镜头，
     否则会把 3D 空间里更深的立体物件全挡住。点击交给 .hot 那些物件自己接管。 */
  pointer-events: none;
}

.face {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;
}

/* 后墙 */
.wall-back {
  width: var(--w);
  height: var(--h);
  margin: calc(-0.5 * var(--h)) 0 0 calc(-0.5 * var(--w));
  transform: translateZ(calc(var(--u) * -900));
  background:
    radial-gradient(70% 80% at 62% 12%, rgba(255, 208, 150, 0.22), transparent 70%),
    radial-gradient(120% 130% at 50% 120%, rgba(0, 0, 0, 0.55), transparent 60%),
    linear-gradient(180deg, #6d5a48, #4c3d31 60%, #382c23);
}
.wall-back::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--u) * 46);
  background: linear-gradient(180deg, #2a211a, #1b1511);
  box-shadow: inset 0 calc(var(--u) * 3) 0 rgba(255, 255, 255, 0.07);
}

/* 左右墙 */
.wall-left, .wall-right {
  width: var(--d);
  height: var(--h);
  margin: calc(-0.5 * var(--h)) 0 0 calc(-0.5 * var(--d));
}
.wall-left {
  transform: translate3d(calc(-1 * var(--hw)), 0, calc(-1 * var(--hd))) rotateY(90deg);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0) 62%),
    linear-gradient(180deg, #5d4c3d, #40342a);
}
.wall-right {
  transform: translate3d(var(--hw), 0, calc(-1 * var(--hd))) rotateY(-90deg);
  background:
    linear-gradient(270deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0) 62%),
    linear-gradient(180deg, #5d4c3d, #40342a);
}

/* 地板：木地板，木纹顺着纵深走 */
.wall-floor {
  width: var(--w);
  height: var(--d);
  margin: calc(-0.5 * var(--d)) 0 0 calc(-0.5 * var(--w));
  transform: translate3d(0, var(--hh), calc(-1 * var(--hd))) rotateX(90deg);
  background:
    radial-gradient(45% 55% at 50% 22%, rgba(255, 206, 140, 0.3), transparent 72%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0) 55%),
    repeating-linear-gradient(90deg,
      #6b4a2c 0 calc(var(--u) * 58),
      #5d3f24 calc(var(--u) * 58) calc(var(--u) * 62),
      #704d2e calc(var(--u) * 62) calc(var(--u) * 120),
      #5a3d22 calc(var(--u) * 120) calc(var(--u) * 124));
  box-shadow: inset 0 0 calc(var(--u) * 90) rgba(0, 0, 0, 0.55);
}

/* 天花板 */
.wall-ceiling {
  width: var(--w);
  height: var(--d);
  margin: calc(-0.5 * var(--d)) 0 0 calc(-0.5 * var(--w));
  transform: translate3d(0, calc(-1 * var(--hh)), calc(-1 * var(--hd))) rotateX(-90deg);
  background:
    radial-gradient(40% 50% at 55% 40%, rgba(255, 205, 150, 0.16), transparent 70%),
    linear-gradient(180deg, #241c17, #171210);
}

/* ------------------------------ 立体家俱 ------------------------------ */

.prop {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;
}

.o-front, .o-top, .o-side {
  position: absolute;
  left: 0; top: 0;
  transform-style: preserve-3d;
}

.o-front { width: 100%; height: 100%; }

/* 顶面：从正面顶边往后翻 */
.o-top {
  width: 100%;
  height: var(--dep);
  transform-origin: 50% 0;
  transform: rotateX(-90deg);
}

/* 左右侧面 */
.o-side-l {
  width: var(--dep);
  height: 100%;
  transform-origin: 0 50%;
  transform: rotateY(90deg);
  background: linear-gradient(90deg, #2b211a, #4b3a2c);
}
.o-side-r {
  left: auto; right: 0;
  width: var(--dep);
  height: 100%;
  transform-origin: 100% 50%;
  transform: rotateY(-90deg);
  background: linear-gradient(270deg, #2b211a, #4b3a2c);
}

.o-top {
  background: linear-gradient(180deg, #7d6449, #584332);
  box-shadow: inset 0 0 calc(var(--u) * 10) rgba(0, 0, 0, 0.45);
}

/* 可点击的物件 */
.hot {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
}

.hot-ring {
  position: absolute;
  inset: calc(var(--u) * -8);
  border-radius: calc(var(--u) * 10);
  border: calc(var(--u) * 2) solid transparent;
  pointer-events: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.hot:hover .hot-ring,
.hot:focus-visible .hot-ring {
  border-color: rgba(255, 214, 150, 0.9);
  box-shadow: 0 0 calc(var(--u) * 26) rgba(255, 196, 110, 0.55),
              inset 0 0 calc(var(--u) * 26) rgba(255, 196, 110, 0.22);
}
.hot:focus { outline: none; }

/* ------------------------------ 文件柜 ------------------------------ */

.lockers {
  --w: calc(var(--u) * 380);
  --h: calc(var(--u) * 370);
  --dep: calc(var(--u) * 70);
  width: var(--w);
  height: var(--h);
  margin: calc(-0.5 * var(--h)) 0 0 calc(-0.5 * var(--w));
  transform: translate3d(calc(var(--u) * -180), calc(var(--u) * 165), calc(var(--u) * -812));
}

.lockers .o-front {
  background: linear-gradient(180deg, #8d8f8a, #6f726d 45%, #4f534f);
  border-radius: calc(var(--u) * 4);
  box-shadow: inset 0 0 calc(var(--u) * 26) rgba(0, 0, 0, 0.5);
}

.lk-doors {
  position: absolute;
  inset: calc(var(--u) * 14) calc(var(--u) * 12) calc(var(--u) * 14) calc(var(--u) * 12);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: calc(var(--u) * 5);
}
.lk-doors i {
  position: relative;
  border-radius: calc(var(--u) * 3);
  background: linear-gradient(180deg, #a3a69f, #7e817b 50%, #5c605b);
  box-shadow: inset 0 0 0 calc(var(--u) * 1) rgba(0, 0, 0, 0.35),
              inset 0 calc(var(--u) * 2) 0 rgba(255, 255, 255, 0.28),
              0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(0, 0, 0, 0.4);
}
/* 门上的把手 */
.lk-doors i::after {
  content: "";
  position: absolute;
  right: 13%;
  top: 24%;
  width: 11%;
  height: 40%;
  border-radius: calc(var(--u) * 6);
  background: linear-gradient(180deg, #f2e8d4, #c2ac86 45%, #8d7a5c);
  box-shadow: 0 0 calc(var(--u) * 3) rgba(0, 0, 0, 0.55);
}

.lk-topstrip {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: calc(var(--u) * 12);
  border-radius: calc(var(--u) * 4) calc(var(--u) * 4) 0 0;
  background: linear-gradient(180deg, #b9bcb4, #7c7f79);
}

/* 柜顶打下来的一束光 */
.lk-lamp {
  position: absolute;
  left: 50%;
  top: calc(var(--u) * -6);
  width: calc(var(--u) * 300);
  height: calc(var(--u) * 60);
  transform: translateX(-50%);
  background: radial-gradient(50% 100% at 50% 0%, rgba(255, 226, 178, 0.34), transparent 72%);
  pointer-events: none;
}

/* ------------------------------ 书桌 ------------------------------ */

.desk {
  --dep: calc(var(--u) * 200);
  width: calc(var(--u) * 380);
  height: calc(var(--u) * 120);
  margin: calc(var(--u) * -60) 0 0 calc(var(--u) * -190);
  transform: translate3d(calc(var(--u) * 285), calc(var(--u) * 290), calc(var(--u) * -700));
}
.desk .o-front {
  background: linear-gradient(180deg, #6b5137, #4d3a27 60%, #35271a);
  border-radius: calc(var(--u) * 3);
  box-shadow: inset 0 0 calc(var(--u) * 22) rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.desk .o-top {
  background: linear-gradient(180deg, #a07a4e, #6d5133);
}
.desk-drawer {
  width: 42%;
  height: 52%;
  border-radius: calc(var(--u) * 3);
  background: linear-gradient(180deg, #7a5c3c, #503b27);
  box-shadow: inset 0 calc(var(--u) * 1.5) 0 rgba(255, 255, 255, 0.18),
              inset 0 calc(var(--u) * -2) 0 rgba(0, 0, 0, 0.45),
              0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(0, 0, 0, 0.4);
  position: relative;
}
.desk-drawer::after {
  content: "";
  position: absolute;
  left: 50%; top: 46%;
  width: 26%; height: 12%;
  transform: translateX(-50%);
  border-radius: calc(var(--u) * 4);
  background: linear-gradient(180deg, #e8dcc2, #9d8a68);
}

/* ------------------------------ 电脑（CRT） ------------------------------ */

.computer {
  --dep: calc(var(--u) * 58);
  width: calc(var(--u) * 156);
  height: calc(var(--u) * 132);
  margin: calc(var(--u) * -66) 0 0 calc(var(--u) * -78);
  transform: translate3d(calc(var(--u) * 285), calc(var(--u) * 164), calc(var(--u) * -782));
}
.computer .o-front {
  border-radius: calc(var(--u) * 5);
  background: linear-gradient(180deg, #d8d2c4, #b6ae9d 55%, #8e8574);
  box-shadow: inset 0 0 calc(var(--u) * 18) rgba(0, 0, 0, 0.4),
              inset 0 calc(var(--u) * 2) 0 rgba(255, 255, 255, 0.6);
  padding: calc(var(--u) * 9);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 5);
}
.computer .o-top {
  background: linear-gradient(180deg, #e2dccf, #a89f8d);
  border-radius: calc(var(--u) * 4) calc(var(--u) * 4) 0 0;
}

.pc-screen {
  position: relative;
  flex: 1;
  border-radius: calc(var(--u) * 8);
  overflow: hidden;
  background: radial-gradient(120% 120% at 50% 30%, #1d3a26, #06120a 70%, #020604);
  box-shadow: inset 0 0 calc(var(--u) * 14) rgba(0, 0, 0, 0.9),
              inset 0 0 0 calc(var(--u) * 1.5) rgba(0, 0, 0, 0.6),
              0 0 calc(var(--u) * 14) rgba(120, 255, 170, 0.16);
}
.pc-text {
  position: absolute;
  left: 8%;
  top: 26%;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: calc(var(--u) * 17);
  font-weight: 700;
  color: var(--phos);
  text-shadow: 0 0 calc(var(--u) * 8) rgba(140, 255, 180, 0.85);
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0.18; } }

.pc-bezel-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--u) * 10);
}
.pc-led {
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d9ffd0, #4fd06a 60%, #1d6a2c);
  box-shadow: 0 0 calc(var(--u) * 7) rgba(90, 255, 130, 0.9);
}
.pc-slot {
  width: calc(var(--u) * 34);
  height: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 2);
  background: #2b251d;
  box-shadow: inset 0 calc(var(--u) * 1) calc(var(--u) * 2) rgba(0, 0, 0, 0.9);
}

/* 键盘：躺在桌面上 */
.keyboard {
  --dep: calc(var(--u) * 46);
  width: calc(var(--u) * 118);
  height: calc(var(--u) * 12);
  margin: calc(var(--u) * -6) 0 0 calc(var(--u) * -59);
  transform: translate3d(calc(var(--u) * 285), calc(var(--u) * 224), calc(var(--u) * -705));
}
.keyboard .o-front {
  background: linear-gradient(180deg, #ded8ca, #a9a190);
  border-radius: calc(var(--u) * 2);
}
.keyboard .o-top {
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0 calc(var(--u) * 1),
      rgba(255, 255, 255, 0) calc(var(--u) * 1) calc(var(--u) * 7)),
    linear-gradient(180deg, #ded8ca, #b3ab9a);
}

/* ------------------------------ 地毯 / 吊灯 / 挂画 ------------------------------ */

.rug {
  width: calc(var(--u) * 520);
  height: calc(var(--u) * 380);
  margin: calc(var(--u) * -190) 0 0 calc(var(--u) * -260);
  transform: translate3d(0, calc(var(--u) * 349), calc(var(--u) * -520)) rotateX(90deg);
  border-radius: calc(var(--u) * 10);
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(150, 60, 45, 0.5), transparent 70%),
    repeating-linear-gradient(45deg, #6d2f26 0 calc(var(--u) * 12), #7c382c calc(var(--u) * 12) calc(var(--u) * 24));
  box-shadow: inset 0 0 calc(var(--u) * 40) rgba(0, 0, 0, 0.6);
  opacity: 0.85;
}

.lamp {
  width: calc(var(--u) * 120);
  height: calc(var(--u) * 300);
  margin: calc(var(--u) * -150) 0 0 calc(var(--u) * -60);
  transform: translate3d(calc(var(--u) * 60), calc(var(--u) * -180), calc(var(--u) * -520));
  pointer-events: none;
}
.lamp-cord {
  position: absolute;
  left: 50%; top: 0;
  width: calc(var(--u) * 3);
  height: calc(var(--u) * 108);
  margin-left: calc(var(--u) * -1.5);
  background: linear-gradient(90deg, #14100d, #3a3026);
}
.lamp-shade {
  position: absolute;
  left: 50%; top: calc(var(--u) * 104);
  width: calc(var(--u) * 96);
  height: calc(var(--u) * 52);
  transform: translateX(-50%);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #4e4136, #2b231b 70%, #6b5a44);
  box-shadow: 0 0 calc(var(--u) * 20) rgba(255, 200, 130, 0.35);
}
.lamp-cone {
  position: absolute;
  left: 50%; top: calc(var(--u) * 156);
  width: calc(var(--u) * 340);
  height: calc(var(--u) * 300);
  transform: translateX(-50%);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(255, 222, 170, 0.3), rgba(255, 210, 150, 0));
  filter: blur(calc(var(--u) * 5));
}
.lamp-glow {
  position: absolute;
  left: 50%; top: calc(var(--u) * 118);
  width: calc(var(--u) * 70);
  height: calc(var(--u) * 34);
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 214, 0.95), rgba(255, 200, 120, 0.15) 70%, transparent);
  filter: blur(calc(var(--u) * 3));
}

.painting {
  width: calc(var(--u) * 210);
  height: calc(var(--u) * 150);
  margin: calc(var(--u) * -75) 0 0 calc(var(--u) * -105);
  transform: translate3d(calc(var(--u) * -160), calc(var(--u) * -140), calc(var(--u) * -898));
  padding: calc(var(--u) * 9);
  background: linear-gradient(180deg, #8a6a3c, #5b431f);
  border-radius: calc(var(--u) * 3);
  box-shadow: inset 0 0 0 calc(var(--u) * 2) rgba(0, 0, 0, 0.4),
              0 calc(var(--u) * 4) calc(var(--u) * 14) rgba(0, 0, 0, 0.55);
}
.painting-canvas {
  display: block;
  width: 100%; height: 100%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255, 226, 170, 0.4), transparent 70%),
    linear-gradient(160deg, #24384a, #3d5a53 60%, #1d2b2a);
  box-shadow: inset 0 0 calc(var(--u) * 20) rgba(0, 0, 0, 0.6);
}

/* 空气感：雾 + 暗角 */
.room-fog {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% 42%, rgba(255, 226, 180, 0.09), transparent 70%),
    linear-gradient(180deg, rgba(255, 235, 200, 0.05), transparent 40%);
}

.room-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(90% 76% at 50% 50%, transparent 42%, rgba(0, 0, 0, 0.72) 100%);
}

/* ==========================================================================
   二、16 个文件柜
   ========================================================================== */

.cab-head, .dos-head, .page-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 6px clamp(10px, 2vw, 26px) 14px;
}
.cab-head h2, .dos-head h2, .page-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #f0e2cd;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
}
.cab-head .spacer, .dos-head .spacer, .page-head .spacer { flex: 1; }
.cab-head .counter, .dos-head .counter, .page-head .counter { margin-left: auto; }

.cabinet-room {
  padding: 0 clamp(10px, 2vw, 26px);
}

.cabinet-wall {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  --gap: clamp(8px, 1.4vw, 16px);
  --pad: clamp(12px, 2vw, 24px);
  gap: var(--gap);
  padding: var(--pad);
  /* 按屏幕高度反推每格边长，保证 4 行 16 格一屏放得下，不用滚动。
     每格高宽比 1.16，所以 4 行的高度 = 4 × 1.16 × 边长。 */
  max-width: max(520px,
    calc(
      ((100vh - 215px - var(--gap) * 3 - var(--pad) * 2) / 4.64) * 4
      + var(--gap) * 3 + var(--pad) * 2
    ));
  margin: 0 auto;
  border-radius: 16px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, rgba(0, 0, 0, 0.05) 1px 4px),
    linear-gradient(180deg, #4a4139, #322b25 60%, #241e19);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.14),
              inset 0 0 60px rgba(0, 0, 0, 0.7),
              0 18px 40px rgba(0, 0, 0, 0.5);
}
/* 墙上的光晕 */
.cabinet-wall::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  background: radial-gradient(60% 42% at 50% 0%, rgba(255, 214, 150, 0.16), transparent 70%);
}

.cab {
  position: relative;
  aspect-ratio: 1 / 1.16;
  display: flex;
  flex-direction: column;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #b9b7ae, #8d8b83 46%, #6a675f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
              inset 0 -2px 0 rgba(0, 0, 0, 0.35),
              inset 0 0 26px rgba(0, 0, 0, 0.35),
              0 5px 12px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.18s ease;
  overflow: hidden;
}
.cab:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7),
              inset 0 0 26px rgba(0, 0, 0, 0.3),
              0 10px 20px rgba(0, 0, 0, 0.5),
              0 0 22px rgba(255, 196, 110, 0.28);
}
.cab:active { transform: translateY(-1px); }

/* 柜门内框 */
.cab::before {
  content: "";
  position: absolute;
  inset: 7%;
  border-radius: 7px;
  pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.22),
              inset 0 2px 0 rgba(255, 255, 255, 0.34),
              inset 0 -2px 0 rgba(0, 0, 0, 0.24);
}

/* 门把手 */
.cab .handle {
  position: absolute;
  right: 12%;
  top: 22%;
  width: 9%;
  height: 38%;
  border-radius: 99px;
  background: linear-gradient(180deg, #f6ecd8, #c3ae88 45%, #8b7857);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6),
              inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.cab-body {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14% 12% 10%;
}

.cab-plate {
  width: 100%;
  padding: 4px 6px;
  font-size: clamp(10px, 1.15vw, 13.5px);
  font-weight: 700;
  text-align: center;
  color: #f2ddb0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 4px;
  background: linear-gradient(180deg, #6b5324, #3d2d0f);
  border: 1px solid #241a06;
  box-shadow: inset 0 1px 0 rgba(255, 224, 160, 0.5),
              inset 0 -2px 0 rgba(0, 0, 0, 0.5),
              0 2px 4px rgba(0, 0, 0, 0.5);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
}

.cab-count {
  font-size: clamp(9.5px, 1vw, 11.5px);
  color: #3f3b34;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

.cab-led {
  position: absolute;
  left: 12%;
  top: 9%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6d6a62, #35322c);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6);
}
.cab.has-files .cab-led {
  background: radial-gradient(circle at 35% 30%, #c8ffd4, #35b45c 60%, #14602c);
  box-shadow: 0 0 7px rgba(90, 240, 130, 0.9);
}
.cab.has-files {
  background: linear-gradient(180deg, #c4c1b6, #97948b 46%, #6f6c63);
}

.cab.is-open {
  background: linear-gradient(180deg, #ffdbaa, #d59a55 50%, #9c6a33);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7),
              0 8px 18px rgba(0, 0, 0, 0.5),
              0 0 26px rgba(255, 190, 100, 0.5);
}

/* ==========================================================================
   三、DOS 屏幕
   ========================================================================== */

.dos-head, .cab-head { justify-content: flex-start; }

.crt {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 clamp(10px, 2vw, 26px);
}

.crt-shell {
  position: relative;
  width: min(760px, 94vw);
  padding: clamp(14px, 2vw, 22px) clamp(14px, 2vw, 22px) clamp(10px, 1.6vw, 16px);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02) 40%, rgba(0, 0, 0, 0.3)),
    linear-gradient(180deg, #6a6156, #453d34 55%, #2c2620);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.22),
              inset 0 -3px 0 rgba(0, 0, 0, 0.5),
              0 20px 50px rgba(0, 0, 0, 0.6);
}

/* 屏幕区域。模拟器正好铺满屏幕内框，不会往左探出显示器。 */
.crt-stage {
  --bezel: clamp(6px, 1vw, 12px);
  --wing: 0px;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
}

.crt-screen {
  position: absolute;
  inset: 0;
  border-radius: 8%;
  background: #04120a;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.95),
              inset 0 0 0 var(--bezel) #1d1915,
              0 0 40px rgba(90, 255, 160, 0.12);
}

/* 真的 DOS 模拟器：用 iframe 嵌进来，它的样式就不会污染整页。 */
.dos-frame {
  position: absolute;
  left: var(--bezel);
  top: var(--bezel);
  width: calc(100% - var(--bezel) * 2);
  height: calc(100% - var(--bezel) * 2);
  border: 0;
  border-radius: 4%;
  background: transparent;
}

/* 屏幕玻璃：扫描线、反光、闪烁，盖在模拟器上面但不吃鼠标事件 */
.crt-glass {
  position: absolute;
  inset: var(--bezel);
  border-radius: 4%;
  overflow: hidden;
  pointer-events: none;
}

.crt-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.2) 0 1px,
    rgba(0, 0, 0, 0) 1px 3px);
  mix-blend-mode: multiply;
}

.crt-curve {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 8%;
  background:
    radial-gradient(120% 100% at 50% 40%, rgba(255, 255, 255, 0.1), transparent 42%),
    radial-gradient(140% 120% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.66) 100%);
}

.crt-flicker {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(150, 255, 190, 0.05);
  animation: flicker 4.5s infinite;
}
@keyframes flicker {
  0%, 96%, 100% { opacity: 0.35; }
  97% { opacity: 0.8; }
  98% { opacity: 0.2; }
  99% { opacity: 0.7; }
}

.crt-panel {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 6px 2px;
}
.crt-brand {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #cfc4b3;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
}

/* 显示器面板上的「控制台」按钮：点它把 DOS 侧边栏叫出来 */
.crt-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 12px;
  padding: 5px 12px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #d8ccb8;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.55);
  border-radius: 7px;
  background: linear-gradient(180deg, #5a5348, #3a342c 60%, #2a251f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
              inset 0 -2px 0 rgba(0, 0, 0, 0.45),
              0 2px 4px rgba(0, 0, 0, 0.45);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
  transition: filter 0.15s ease, transform 0.1s ease;
}
.crt-switch i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7d8a7d, #35402f);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6);
}
.crt-switch:hover { filter: brightness(1.15); }
.crt-switch:active { transform: translateY(1px); }
.crt-switch.is-on {
  color: #2a1d12;
  background: linear-gradient(180deg, #ffd9a8, #d79a55);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
.crt-switch.is-on i {
  background: radial-gradient(circle at 35% 30%, #eaffd8, #45c05a 60%, #14602c);
  box-shadow: 0 0 8px rgba(90, 240, 130, 0.9);
}
.crt-knobs { display: flex; gap: 10px; margin-left: auto; }
.crt-knobs i {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #cfc6b6, #6d6353 55%, #332c23);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.5);
}
.crt-led {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffd9a0, #e0801f 60%, #7a3d05);
  box-shadow: 0 0 10px rgba(255, 160, 60, 0.9);
}

.crt-base {
  width: min(320px, 60vw);
  height: clamp(10px, 1.6vw, 16px);
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, #3d352c, #221c17);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.6);
}

/* ============================== 软盘盒 ============================== */

.diskbox {
  width: min(760px, 94vw);
  margin: 22px auto 0;
}

.diskbox-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 13px;
  flex-wrap: wrap;
}

.diskbox-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 5px;
  color: #e9dcc6;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
}

.diskbox-hint { font-size: 11.5px; color: #a99a86; }

.diskbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(134px, 1fr));
  gap: 14px;
}

.diskbox-empty { margin: 0; font-size: 13px; color: #a99a86; }

.disk {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 0;
  font: inherit;
  cursor: pointer;
  border: 1px solid #0d0b0f;
  border-radius: 7px;
  background: linear-gradient(180deg, #35313a, #201d24 55%, #15131a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14),
              inset 0 -3px 0 rgba(0, 0, 0, 0.55),
              0 6px 14px rgba(0, 0, 0, 0.5);
  transition: transform 0.14s ease, box-shadow 0.16s ease;
}
.disk:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
              0 12px 22px rgba(0, 0, 0, 0.55),
              0 0 18px rgba(255, 196, 110, 0.22);
}
.disk:active { transform: translateY(-1px); }

/* 金属滑盖 */
.disk-shutter {
  position: absolute;
  left: 20%;
  top: 0;
  width: 60%;
  height: 25%;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, #d4d8db, #93999f 55%, #6d7379);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 3px rgba(0, 0, 0, 0.55);
}
.disk-shutter::after {
  content: "";
  position: absolute;
  left: 10%;
  top: 0;
  width: 24%;
  height: 100%;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, #565c62, #3b4046);
}

/* 纸标签 */
.disk-label {
  position: absolute;
  left: 9%;
  right: 9%;
  top: 37%;
  bottom: 11%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 7px;
  border-radius: 3px;
  background: linear-gradient(180deg, #f7f3e7, #ded7c3);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14), 0 1px 2px rgba(0, 0, 0, 0.35);
}
.disk-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #2f2a24;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.disk-note {
  font-size: 10.5px;
  line-height: 1.35;
  color: #7b7266;
  overflow: hidden;
}
.disk-size {
  position: absolute;
  right: 11%;
  bottom: 4%;
  font-size: 9.5px;
  color: #8d8377;
  letter-spacing: 0.4px;
}
.disk.is-active {
  border-color: #d79a55;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
              0 0 0 2px rgba(215, 154, 85, 0.5),
              0 10px 20px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   四、抽屉（柜子里的文件）
   ========================================================================== */

.drawer-wrap {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}

.drawer-veil {
  position: absolute;
  inset: 0;
  background: rgba(8, 6, 5, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.drawer {
  position: relative;
  width: min(620px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 18px clamp(14px, 2.4vw, 26px) 20px;
  overflow-y: auto;
  background:
    linear-gradient(180deg, #f7f4ee, #e9e5dd 60%, #ddd8ce);
  border-left: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: -18px 0 50px rgba(0, 0, 0, 0.6);
  animation: drawer-in 0.22s ease;
}
@keyframes drawer-in {
  from { transform: translateX(30px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* 抽屉面板上的三条防滑纹 */
.drawer-grip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  margin: -6px auto 12px;
  width: 76px;
}
.drawer-grip i {
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 3px;
  background: linear-gradient(180deg, #b6b0a6, #8e887e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.25);
}

.drawer-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.drawer-title { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.drawer-no {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  color: #fff3df;
  background: linear-gradient(180deg, #8a6b33, #4b3612);
  box-shadow: inset 0 1px 0 rgba(255, 226, 168, 0.5),
              inset 0 -2px 0 rgba(0, 0, 0, 0.4),
              0 2px 5px rgba(0, 0, 0, 0.35);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
}
.drawer-name {
  font-size: 15px;
  font-weight: 700;
  color: #332d26;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drawer-tools { display: flex; gap: 7px; flex: none; }

/* ==========================================================================
   五、通用控件
   ========================================================================== */

.btn {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #453f37;
  padding: 9px 18px;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.32);
  border-radius: var(--radius-ctl);
  background: linear-gradient(180deg, #ffffff, #e8e4dc 52%, #d3cec4);
  box-shadow: var(--bevel), var(--drop-sm);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  transition: transform 0.08s ease, filter 0.15s ease;
}
.btn:hover { filter: brightness(1.04); }
.btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.4);
  background: linear-gradient(180deg, #ded9d0, #efece6);
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary {
  color: #fff8f0;
  border-color: rgba(90, 45, 12, 0.7);
  background: linear-gradient(180deg, var(--accent-hi), var(--accent) 52%, var(--accent-lo));
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55),
              inset 0 -1px 0 rgba(0, 0, 0, 0.3),
              0 2px 5px rgba(70, 35, 10, 0.4);
}
.btn-ghost {
  color: #e9dccb;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.18));
  border-color: rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
}
.drawer .btn-ghost {
  color: #4a433a;
  background: linear-gradient(180deg, #f4f1eb, #ddd8ce);
  border-color: rgba(0, 0, 0, 0.28);
  box-shadow: var(--bevel), var(--drop-sm);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}
.spacer { flex: 1; }

.counter {
  font-size: 12px;
  color: #e7dac8;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}
.drawer .counter {
  color: #5f574d;
  background: #f2efe8;
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* 上传区 */
.dropzone {
  position: relative;
  padding: 5px;
  border-radius: 14px;
  cursor: pointer;
  background: linear-gradient(180deg, #cec8bd, #e4e0d8);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(255, 255, 255, 0.6);
  outline: none;
}
.dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 16px;
  border-radius: 10px;
  border: 2px dashed rgba(120, 110, 95, 0.55);
  background: linear-gradient(180deg, #f9f7f4, #eae6df);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.12), inset 0 -2px 0 rgba(255, 255, 255, 0.85);
}
.dropzone.is-over { box-shadow: 0 0 0 3px rgba(200, 118, 58, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.25); }
.dropzone.is-over .dropzone-inner { border-color: var(--accent); background: #fff6ec; }
.drop-ico {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  font-size: 18px;
  color: #fff;
  background: radial-gradient(circle at 40% 25%, var(--teal-hi), var(--teal) 60%, #295450);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45),
              inset 0 -3px 6px rgba(0, 0, 0, 0.3),
              0 4px 10px rgba(20, 60, 55, 0.45);
}
.drop-title { font-size: 14px; font-weight: 700; color: #3b352e; }
.drop-sub { font-size: 12px; color: var(--ink-soft); }

.progress-wrap { margin: 12px 0 0; }
.progress-text { margin-top: 6px; font-size: 12px; color: #6b6459; }
.progress-track {
  height: 17px;
  padding: 3px;
  border-radius: 10px;
  background: linear-gradient(180deg, #b9b3a8, #d6d1c7);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.6);
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  width: 0;
  border-radius: 8px;
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.28) 0 8px, rgba(255, 255, 255, 0) 8px 18px),
    linear-gradient(180deg, var(--accent-hi), var(--accent) 55%, var(--accent-lo));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 4px rgba(0, 0, 0, 0.25);
  transition: width 0.2s ease;
}

.drawer-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 10px;
  flex-wrap: wrap;
}
.search-well {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 200px;
  padding: 7px 12px;
  border-radius: 20px;
  background: linear-gradient(180deg, #d5d0c6, #eae6df);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.7);
}
.search-ico { font-size: 12px; opacity: 0.6; }
.search-well input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  border: none;
  background: transparent;
  outline: none;
}

/* 文件列表 */
.list-shell {
  position: relative;
  border-radius: 12px;
  padding: 6px;
  background: linear-gradient(180deg, #d2ccc1, #e6e2da);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.28), inset 0 -1px 0 rgba(255, 255, 255, 0.6);
  min-height: 120px;
}
.file-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.file-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 9px;
  background: linear-gradient(180deg, #fdfcfa, #f1eee8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95),
              inset 0 -1px 0 rgba(0, 0, 0, 0.07),
              0 1px 2px rgba(0, 0, 0, 0.14);
}
.file-item:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 4px 10px rgba(0, 0, 0, 0.16); }
.file-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 8px;
  font-size: 16px;
  background: linear-gradient(180deg, #ffffff, #dcd7ce);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
              inset 0 -2px 4px rgba(0, 0, 0, 0.15),
              0 2px 4px rgba(0, 0, 0, 0.2);
}
.file-meta { flex: 1; min-width: 0; }
.file-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #332e28;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-sub { font-size: 11.5px; color: #857c71; margin-top: 2px; }
.file-actions { display: flex; gap: 6px; flex: none; }
.mini-btn {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
  color: #463f37;
  border: 1px solid rgba(0, 0, 0, 0.28);
  border-radius: 7px;
  background: linear-gradient(180deg, #fff, #e6e2da 60%, #d2ccc2);
  box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}
.mini-btn.danger { color: #8a2f22; }
.mini-btn:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); }

.empty { padding: 34px 20px; text-align: center; color: #6d655c; }
.empty-ico { font-size: 30px; margin-bottom: 6px; opacity: 0.7; }
.empty p { margin: 4px 0; font-size: 13.5px; font-weight: 600; color: #4c453d; }
.empty .empty-sub { font-size: 12px; font-weight: 400; color: #8b8277; }

/* ============================== 提示条 ============================== */

.toasts {
  position: fixed;
  right: 18px;
  bottom: 20px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #fdf7ef;
  background: linear-gradient(180deg, rgba(70, 58, 46, 0.97), rgba(40, 32, 25, 0.97));
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 22px rgba(0, 0, 0, 0.45);
  animation: toast-in 0.22s ease;
}
.toast.err { background: linear-gradient(180deg, rgba(150, 55, 38, 0.97), rgba(95, 30, 20, 0.97)); }
.toast.out { opacity: 0; transform: translateX(14px); transition: all 0.25s ease; }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: none; }
}

/* ============================== 书桌抽屉（3D） ============================== */

.drawer-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px clamp(8px, 1.6vw, 22px) 0;
  /* 俯视角：透视距离拉远一点，木头边缘不会扭曲得太夸张 */
  perspective: 1900px;
  perspective-origin: 50% 40%;
}

.drawer-3d {
  position: relative;
  width: min(1060px, 93vw);
  height: min(660px, 58vw);
  /* 拉到底、从上往下看，所以角度比之前平很多 */
  transform: rotateX(32deg);
  transform-style: preserve-3d;
}

/* 抽屉内底：旧木头，中间被压出一点凹陷的暗影 */
.dw-floor {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background:
    repeating-linear-gradient(90deg,
      rgba(0, 0, 0, 0.055) 0 9px, rgba(255, 255, 255, 0.022) 9px 18px),
    linear-gradient(180deg, #6f4c2a, #4a3219 60%, #3a2612);
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.82),
              inset 0 0 0 2px rgba(0, 0, 0, 0.35);
}

/* 三面侧板 */
.dw-back, .dw-left, .dw-right {
  position: absolute;
  background: linear-gradient(180deg, #8b6a44, #5a3f24);
  box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.55);
}
.dw-back {
  left: 0; right: 0; top: 0;
  height: 58px;
  border-radius: 10px 10px 0 0;
  transform-origin: 50% 0;
  transform: rotateX(-90deg);
}
.dw-left {
  left: 0; top: 0; bottom: 0;
  width: 58px;
  transform-origin: 0 50%;
  transform: rotateY(90deg);
}
.dw-right {
  right: 0; top: 0; bottom: 0;
  width: 58px;
  transform-origin: 100% 50%;
  transform: rotateY(-90deg);
}

/* 抽屉正面：摆在 3D 场景下面当面板 */
.drawer-face {
  position: relative;
  width: min(1140px, 96vw);
  height: 54px;
  margin-top: -6px;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, #7d5c39, #4d3721 62%, #30200e);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2),
              inset 0 -3px 0 rgba(0, 0, 0, 0.5),
              0 16px 34px rgba(0, 0, 0, 0.55);
}
.dw-face-handle {
  position: absolute;
  left: 50%; top: 50%;
  width: 210px; height: 15px;
  transform: translate(-50%, -50%);
  border-radius: 9px;
  background: linear-gradient(180deg, #f2e2b4, #bb9c60 52%, #7d6231);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8),
              0 3px 6px rgba(0, 0, 0, 0.6);
}

/* 抽屉里的杂物 */
.dw-trinket { position: absolute; pointer-events: none; }
.dw-trinket.pencil {
  left: 7%; top: 76%;
  width: calc(min(1060px, 93vw) * 0.142);
  aspect-ratio: 150 / 8;
  border-radius: 4px;
  background: linear-gradient(180deg, #e8c26a, #b98a2f);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.55);
  transform: rotate(-8deg) translateZ(1px);
}
.dw-trinket.bookmark {
  right: 9%; top: 15%;
  width: calc(min(1060px, 93vw) * 0.038);
  aspect-ratio: 40 / 56;
  background: linear-gradient(180deg, #f6f1e2, #d9d0b8);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
  transform: rotate(11deg) translateZ(1px);
}
.dw-trinket.crumbs {
  left: 62%; top: 64%;
  width: calc(min(1060px, 93vw) * 0.16);
  aspect-ratio: 170 / 60;
  background:
    radial-gradient(circle at 12% 60%, rgba(120, 80, 40, 0.85) 0 3px, transparent 4px),
    radial-gradient(circle at 34% 30%, rgba(120, 80, 40, 0.75) 0 2px, transparent 3px),
    radial-gradient(circle at 58% 70%, rgba(120, 80, 40, 0.8) 0 3px, transparent 4px),
    radial-gradient(circle at 80% 40%, rgba(120, 80, 40, 0.7) 0 2px, transparent 3px);
  transform: translateZ(1px);
}

/* ------------------------------ 糖果盒 ------------------------------ */

.candy-box {
  position: absolute;
  /* 故意做小：抽屉里要留地方放别的东西 */
  left: 21%; top: 34%;
  /* 尺寸跟着抽屉宽度等比缩放，小屏幕上才不会撑爆 */
  width: calc(min(1060px, 93vw) * 0.098);
  aspect-ratio: 98 / 70;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  cursor: pointer;
  background: none;
  /* 稍微立起来一点，看得见盒面 */
  transform: translate(-50%, -50%) translateZ(5px) rotateX(-18deg);
  transform-origin: 50% 100%;
  transition: transform 0.18s ease, filter 0.18s ease;
  filter: drop-shadow(0 7px 11px rgba(0, 0, 0, 0.6));
}
.candy-box:hover {
  transform: translate(-50%, -50%) translateZ(14px) rotateX(-18deg) scale(1.07);
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.65)) brightness(1.08);
}

/* 第二个糖果盒：长条形，摆在抽屉的右下角 */
.candy-box.is-two {
  left: 63%; top: 63%;
  width: calc(min(1060px, 93vw) * 0.258);
  aspect-ratio: 272 / 96;
  transform: translate(-50%, -50%) translateZ(7px) rotateX(-15deg);
}
.candy-box.is-two:hover {
  transform: translate(-50%, -50%) translateZ(16px) rotateX(-15deg) scale(1.04);
}
.candy-box.is-two .cb-body {
  background: linear-gradient(180deg, #55b4d4, #2f83a8 55%, #16506a);
}
.candy-box.is-two .cb-lid {
  background: linear-gradient(180deg, #dcf3ff, #86c9e2 55%, #4a8fae);
}
.candy-box.is-two .cb-label {
  padding: 3px 11px;
  /* 缩到极点也要看得清，所以给个下限 */
  font-size: max(9px, calc(min(1060px, 93vw) * 0.0095));
  letter-spacing: 2px;
}

.cb-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 78%;
  border-radius: 9px;
  background: linear-gradient(180deg, #ef6a4c, #cf3a22 55%, #8f1f10);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.35),
              inset 0 -4px 0 rgba(0, 0, 0, 0.35);
}
.cb-lid {
  position: absolute;
  left: -4%; right: -4%; top: 0;
  height: 33%;
  border-radius: 8px 8px 6px 6px;
  background: linear-gradient(180deg, #ffe0ac, #e7a55c 55%, #b9762c);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7),
              inset 0 -3px 0 rgba(0, 0, 0, 0.25),
              0 3px 6px rgba(0, 0, 0, 0.35);
}
.cb-ribbon {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 12%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #f6e3b6, #d9b871 60%, #a8823c);
}
.cb-label {
  position: absolute;
  left: 50%; top: 62%;
  transform: translate(-50%, -50%);
  padding: 2px 6px;
  white-space: nowrap;
  font-size: max(8px, calc(min(1060px, 93vw) * 0.0085));
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #4a2a06;
  background: linear-gradient(180deg, #f9e9c2, #e0c489);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ============================== 糖果盒里的游戏 ============================== */

.candy-wrap {
  display: flex;
  justify-content: center;
  padding: 0 clamp(10px, 2vw, 26px);
}

.candy-frame {
  width: min(1180px, 96vw);
  height: min(830px, 84vh);
  border: 0;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.6),
              inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

/* ============================== 开锁弹窗 ============================== */

.lockbox-wrap {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.lockbox-veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 60% at 50% 42%, rgba(24, 17, 12, 0.72), rgba(7, 5, 4, 0.93));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.lockbox {
  position: relative;
  width: min(370px, 100%);
  padding: 18px 22px 20px;
  border-radius: 16px;
  border: 1px solid #1c1305;
  background:
    linear-gradient(180deg, rgba(255, 240, 206, 0.3), rgba(0, 0, 0, 0.16) 46%, rgba(0, 0, 0, 0.34)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, rgba(0, 0, 0, 0.05) 1px 3px),
    linear-gradient(180deg, #6f5622, #4a3512 58%, #2e2009);
  box-shadow: inset 0 1px 0 rgba(255, 236, 186, 0.55),
              inset 0 -3px 0 rgba(0, 0, 0, 0.55),
              0 24px 60px rgba(0, 0, 0, 0.72);
  animation: lockbox-in 0.2s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes lockbox-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.lockbox-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.lockbox-no {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 800;
  color: #fff3df;
  background: linear-gradient(180deg, #8a6b33, #4b3612);
  box-shadow: inset 0 1px 0 rgba(255, 226, 168, 0.5),
              inset 0 -2px 0 rgba(0, 0, 0, 0.4),
              0 2px 5px rgba(0, 0, 0, 0.45);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
}

.lockbox-title {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 4px;
  color: #f4e3c2;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
}

.lockbox-dial { display: flex; gap: 5px; }
.lockbox-dial i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #d6c8a8, #6b5a38 55%, #2b2109);
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.7), 0 1px 1px rgba(255, 240, 200, 0.25);
}

.lockbox-sub {
  margin: 2px 0 14px;
  font-size: 12.5px;
  color: #d8c6a2;
  opacity: 0.85;
}

.lockbox-field {
  padding: 5px;
  border-radius: 12px;
  background: linear-gradient(180deg, #2a1f0c, #1a1206);
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.85),
              inset 0 -1px 0 rgba(255, 226, 168, 0.16);
}

.lockbox-field input {
  display: block;
  width: 100%;
  padding: 10px 8px;
  font: inherit;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 18px;
  text-align: center;
  text-indent: 18px;
  color: #ffe6ad;
  background: transparent;
  border: 0;
  outline: none;
  text-shadow: 0 0 12px rgba(255, 200, 110, 0.75);
}
.lockbox-field input::placeholder { color: rgba(255, 214, 150, 0.25); letter-spacing: 12px; }
.lockbox-field input::-webkit-outer-spin-button,
.lockbox-field input::-webkit-inner-spin-button { appearance: none; }

.lockbox-err {
  min-height: 18px;
  margin: 10px 0 8px;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  color: #ffb4a0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.lockbox.is-bad { animation: lockbox-shake 0.32s ease; }
@keyframes lockbox-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  45% { transform: translateX(7px); }
  70% { transform: translateX(-4px); }
}

.lockbox-actions { display: flex; gap: 10px; }
.lockbox-actions .btn { flex: 1; }

/* ============================== 响应式 ============================== */

@media (max-width: 1180px) {
  .room-camera { --u: calc(100vw / 1250); }
  .room-stage { aspect-ratio: 1250 / 700; }
}

@media (max-width: 760px) {
  .room-camera { --u: calc(100vw / 780); }
  .room-stage { aspect-ratio: 780 / 700; }
  /* 窄屏旁边没地方，面板改成盖在屏幕上滑出来（dos.html 里同步处理） */
  .crt-stage { --wing: 0px; }
  .crt-switch { margin-left: auto; letter-spacing: 1px; }
  .topbar { padding: 8px 12px; }
  .topbar-sub { display: none; }
  .crumb { padding: 6px 10px; font-size: 12px; }
  .scene-hint { font-size: 11.5px; margin-bottom: 18px; }
  .scene-hint .sep { display: none; }
  .scene-hint span { display: block; }
  .room-actions { gap: 10px; margin-bottom: 16px; }
  .plaque { min-width: 150px; padding: 10px 14px; }
  .plaque-ico { font-size: 19px; }
  .plaque-txt strong { font-size: 13px; }
  .cab-head h2, .dos-head h2 { font-size: 13px; }
  .cab-head, .dos-head { flex-wrap: wrap; gap: 8px; }
  .cabinet-wall { gap: 7px; padding: 10px; }
  .cab-plate { font-size: 9.5px; padding: 3px 4px; }
  .cab-count { font-size: 9px; }
}

/* ============================== 页脚：备案号 ============================== */

.site-foot {
  position: relative;
  z-index: 3;
  padding: 6px 16px 14px;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.7;
  letter-spacing: 0.3px;
  color: rgba(242, 233, 221, 0.42);
}

.site-foot a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted rgba(242, 233, 221, 0.28);
  transition: color 0.18s ease, border-color 0.18s ease;
}

.site-foot a:hover {
  color: rgba(255, 224, 178, 0.95);
  border-bottom-color: rgba(255, 224, 178, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}