html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #c9b63b;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}

canvas { display: block; }

#hud {
  position: fixed;
  left: 14px;
  top: 14px;
  z-index: 20;
  max-width: 460px;
  padding: 10px 12px;
  border-radius: 12px;
  backdrop-filter: blur(6px);
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  transition: background .35s ease, border-color .35s ease, color .35s ease;
}

#hud.maze {
  color: #fff8cf;
  background: rgba(73, 61, 7, 0.42);
  border: 1px solid rgba(255, 245, 157, 0.46);
}

#hud.dream {
  color: #eee;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255,255,255,.24);
  font-family: "Courier New", monospace;
}

.title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 2px;
  margin-bottom: 4px;
}

#hud.maze .title { color: #fff19a; }
#hud.dream .title { color: #ffffff; }

.hint {
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.94;
}

.small-btn {
  pointer-events: auto;
  margin-top: 8px;
  display: none;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(255, 240, 120, .25);
  color: #fff8cf;
  padding: 6px 10px;
  border-radius: 999px;
}

#hud.dream .small-btn {
  background: rgba(255,255,255,.1);
  color: #fff;
}

#miniMapBox {
  position: fixed;
  right: 14px;
  top: 14px;
  z-index: 21;
  width: 210px;
  padding: 8px;
  background: rgba(74, 62, 7, 0.46);
  border: 1px solid rgba(255, 245, 157, 0.46);
  border-radius: 12px;
  backdrop-filter: blur(8px);
}

#miniMap {
  width: 210px;
  height: 210px;
  display: block;
  border-radius: 7px;
  background: #d6c354;
}

.map-label {
  margin-top: 5px;
  color: #fff8cf;
  font-size: 11px;
  text-align: center;
  opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

#mobileControls {
  position: fixed;
  left: 18px;
  bottom: 26px;
  z-index: 25;
  width: 146px;
  height: 146px;
  pointer-events: auto;
  opacity: 0.92;
}

.move-btn {
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 241, 138, 0.24);
  color: #fff8cf;
  font-size: 22px;
  font-weight: 800;
  box-shadow: 0 0 18px rgba(255, 248, 177, 0.25);
  backdrop-filter: blur(6px);
  text-shadow: 0 1px 2px rgba(0,0,0,.42);
}

.move-btn:active,
.move-btn.active {
  background: rgba(0, 239, 255, 0.42);
  box-shadow: 0 0 24px rgba(0, 239, 255, 0.55);
}

.move-btn.up { left: 47px; top: 0; }
.move-btn.left { left: 0; top: 47px; }
.move-btn.down { left: 47px; top: 94px; }
.move-btn.right { left: 94px; top: 47px; }

#noise {
  position: fixed;
  inset: 0;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    repeating-radial-gradient(circle at 17% 23%, rgba(255,255,255,.55) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.16) 0 1px, transparent 1px 4px);
  animation: noiseMove .15s infinite steps(2);
}

#noise.on { opacity: .35; }
#noise.heavy { opacity: .75; }

#fade {
  position: fixed;
  inset: 0;
  z-index: 15;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s linear;
}
#fade.on { opacity: 1; }

#bsod {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: none;
  padding: 8vh 8vw;
  box-sizing: border-box;
  color: #fff;
  background: #0078d7;
  font-family: "Segoe UI", Arial, sans-serif;
}
#bsod.on { display: block; }
#bsod h1 { font-size: 92px; margin: 0 0 24px; font-weight: 300; }
#bsod p { font-size: 24px; max-width: 860px; }
#bsod .small { font-size: 18px; opacity: .9; margin-top: 48px; }

/* 蓝屏在 VR 里改为 WebGL 内的 3D 面板，避免网页 DOM 蓝屏盖在单眼画面上。 */
body.native-vr-active #bsod,
body.phone-vr-active #bsod {
  display: none !important;
}

@keyframes noiseMove {
  0% { transform: translate(0,0); filter: contrast(1); }
  50% { transform: translate(-2px,1px); filter: contrast(1.6); }
  100% { transform: translate(2px,-1px); filter: contrast(.8); }
}

@media (min-width: 900px) {
  #mobileControls { opacity: 0.25; }
  #mobileControls:hover { opacity: 0.9; }
}

@media (max-width: 680px) {
  #hud {
    left: 10px;
    top: 10px;
    max-width: calc(100vw - 170px);
    padding: 8px 9px;
  }
  .hint { font-size: 10px; }
  #miniMapBox {
    right: 8px;
    top: 8px;
    width: 135px;
    padding: 6px;
  }
  #miniMap {
    width: 135px;
    height: 135px;
  }
  .map-label { font-size: 9px; }
}

/* VR 内隐藏右上角总地图和屏幕移动按钮，只保留 WebGL/VR 画面；灯箱 mesh 由 JS 隐藏，保留光照。 */
body.native-vr-active #miniMapBox,
body.native-vr-active #mobileControls,
body.phone-vr-active #miniMapBox,
body.phone-vr-active #mobileControls {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 保险：A-Frame 进入 VR 时如果浏览器没有及时给 body 加类，也不要让地图被复制到右眼画面里。 */
a-scene[vr-mode-ui] ~ #miniMapBox {
  pointer-events: none;
}