* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #05070a;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
  color: #dfeef5;
}

#scene {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
  touch-action: none;
}

#overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 10;
}

#title-block {
  position: absolute;
  top: env(safe-area-inset-top, 20px);
  left: 0; right: 0;
  text-align: center;
  padding-top: 18px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.8);
}
#title-block h1 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 4px;
  color: #7fe7ff;
  text-shadow: 0 0 18px rgba(127,231,255,0.6);
}
#title-block .sub {
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(223,238,245,0.55);
}

#hint {
  position: absolute;
  bottom: 210px;
  left: 0; right: 0;
  text-align: center;
  font-size: 12px;
  color: rgba(223,238,245,0.5);
  letter-spacing: 1px;
  transition: opacity 1s ease;
}
#hint.hide { opacity: 0; }

#enter-btn, #exit-btn {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  pointer-events: auto;
  padding: 13px 34px;
  border-radius: 999px;
  border: 1px solid rgba(127,231,255,0.5);
  background: linear-gradient(135deg, rgba(30,60,80,0.55), rgba(10,20,30,0.75));
  color: #eafcff;
  font-size: 14px;
  letter-spacing: 2px;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 24px rgba(74,201,255,0.25), inset 0 0 12px rgba(127,231,255,0.08);
  transition: all 0.3s ease;
}
#enter-btn:active, #exit-btn:active {
  transform: translateX(-50%) scale(0.95);
  box-shadow: 0 0 8px rgba(74,201,255,0.15);
}

#panel {
  position: absolute;
  top: 90px;
  right: 12px;
  width: 190px;
  padding: 14px 14px 8px;
  border-radius: 14px;
  background: rgba(8,16,22,0.55);
  border: 1px solid rgba(127,231,255,0.18);
  backdrop-filter: blur(10px);
  pointer-events: auto;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
#panel.hidden {
  opacity: 0;
  transform: translateX(20px);
  pointer-events: none;
}
.panel-title {
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(127,231,255,0.8);
  margin-bottom: 10px;
}
.row {
  margin-bottom: 10px;
}
.row label {
  display: block;
  font-size: 10px;
  color: rgba(223,238,245,0.6);
  margin-bottom: 3px;
  letter-spacing: 1px;
}
.row input[type=range] {
  width: 100%;
  accent-color: #7fe7ff;
  height: 24px;
}
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.toggle-row label { margin-bottom: 0; }
.toggle-row input[type=checkbox] {
  width: 34px; height: 18px;
  accent-color: #7fe7ff;
}

#inside-label {
  position: absolute;
  top: 46%;
  left: 0; right: 0;
  text-align: center;
  transition: opacity 0.8s ease;
}
#inside-label .big {
  font-size: 17px;
  letter-spacing: 3px;
  color: #bdf4ff;
  text-shadow: 0 0 20px rgba(127,231,255,0.7);
}
#inside-label .small {
  margin-top: 8px;
  font-size: 11px;
  color: rgba(223,238,245,0.5);
  letter-spacing: 1px;
}

.hidden { opacity: 0 !important; pointer-events: none !important; }

#hud {
  position: absolute;
  top: env(safe-area-inset-top, 20px);
  left: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(8,16,22,0.5);
  border: 1px solid rgba(127,231,255,0.2);
  backdrop-filter: blur(8px);
  transition: opacity 0.5s ease;
}
.hud-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
}
.hud-label {
  color: rgba(223,238,245,0.5);
  letter-spacing: 1px;
}
.hud-value {
  color: #7fe7ff;
  font-size: 14px;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(127,231,255,0.6);
  min-width: 30px;
}

#inside-label.fade-out { opacity: 0; }


#loading {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: #05070a;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  color: rgba(127,231,255,0.7);
  font-size: 13px;
  letter-spacing: 3px;
  transition: opacity 0.6s ease;
}

/* ---- 镜像效果：闪光过渡 + 状态提示 + 对比按钮 ---- */
#flash-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: radial-gradient(circle, rgba(200,245,255,0.95) 0%, rgba(127,231,255,0.5) 45%, rgba(127,231,255,0) 75%);
  opacity: 0;
  pointer-events: none;
  z-index: 50;
}
#flash-overlay.flash-active {
  animation: mirror-flash 0.55s ease-out;
}
@keyframes mirror-flash {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  100% { opacity: 0; }
}

#mirror-status {
  position: absolute;
  top: calc(env(safe-area-inset-top, 20px) + 66px);
  left: 0; right: 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: rgba(223,238,245,0.65);
  transition: opacity 0.5s ease, color 0.5s ease;
}
#mirror-status.is-mirrored {
  color: #ffb85c;
  text-shadow: 0 0 12px rgba(255,184,92,0.6);
}

.secondary-btn {
  width: 100%;
  margin-top: 4px;
  padding: 9px 0;
  border-radius: 999px;
  border: 1px solid rgba(255,184,92,0.4);
  background: rgba(255,184,92,0.08);
  color: #ffd9a8;
  font-size: 11px;
  letter-spacing: 1px;
  pointer-events: auto;
}
.secondary-btn:active {
  transform: scale(0.96);
  background: rgba(255,184,92,0.18);
}

/* 第三人称游戏控制层 */
#game-ui{position:absolute;inset:0;pointer-events:none}
#game-state{position:absolute;top:calc(env(safe-area-inset-top,20px) + 105px);left:50%;transform:translateX(-50%);padding:7px 14px;background:rgba(7,16,21,.58);border-left:2px solid #7fe7ff;color:#dff9ff;font-size:11px;letter-spacing:1.4px;backdrop-filter:blur(8px)}
#action-prompt{position:absolute;left:50%;bottom:154px;transform:translateX(-50%);padding:10px 16px;background:rgba(6,19,25,.78);border:1px solid rgba(127,231,255,.55);color:#eaffff;font-size:12px;white-space:nowrap;box-shadow:0 0 24px rgba(66,206,240,.22);transition:.25s}
#joystick{pointer-events:auto;position:absolute;left:24px;bottom:calc(env(safe-area-inset-bottom,0px) + 28px);width:112px;height:112px;border-radius:50%;background:radial-gradient(circle,rgba(127,231,255,.12),rgba(8,22,29,.62));border:1px solid rgba(127,231,255,.32);box-shadow:inset 0 0 26px rgba(0,0,0,.4);touch-action:none}
#joystick:before,#joystick:after{content:"";position:absolute;background:rgba(127,231,255,.12)}#joystick:before{width:1px;height:72%;left:50%;top:14%}#joystick:after{height:1px;width:72%;top:50%;left:14%}
#stick{position:absolute;left:50%;top:50%;width:48px;height:48px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 35% 30%,#bff7ff,#3b9cb5);box-shadow:0 4px 18px rgba(0,0,0,.45),0 0 14px rgba(127,231,255,.35)}
#interact-btn{pointer-events:auto;position:absolute;right:24px;bottom:calc(env(safe-area-inset-bottom,0px) + 43px);width:88px;height:88px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(18,31,37,.72);color:#cae7ed;font-size:13px;letter-spacing:1px;backdrop-filter:blur(8px)}
#interact-btn.ready{border-color:#7fe7ff;color:white;box-shadow:0 0 28px rgba(127,231,255,.45);animation:readyPulse 1.5s infinite}
@keyframes readyPulse{50%{transform:scale(1.06);box-shadow:0 0 38px rgba(127,231,255,.68)}}
#key-help{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:10px;color:rgba(235,250,255,.48);letter-spacing:1px}
@media(max-width:700px){#panel{display:none}#enter-btn{display:none}#exit-btn{bottom:138px;padding:9px 18px;font-size:11px}#hint{bottom:172px}#mirror-status{top:74px}#key-help{display:none}}