/* 此间 · 覆盖层样式：横屏提示（T22.5 反转）、安全区调试、debug 面板 */

#rotate-hint {
  position: fixed; inset: 0;
  background: #1a1410;
  color: #d0be9c;
  display: none;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px;
  z-index: 100;
  text-align: center;
}
#rotate-hint .phone { font-size: 64px; animation: rotate-phone 2s ease infinite; }
#rotate-hint p { font-size: 16px; letter-spacing: 2px; opacity: .9; }
@keyframes rotate-phone {
  0%, 20% { transform: rotate(90deg); }
  60%, 100% { transform: rotate(0deg); }
}

/* 横屏+触屏 → 提示转回竖屏；竖屏正常游玩不遮挡 */
@media (orientation: landscape) and (pointer: coarse) {
  #rotate-hint { display: flex; }
}

#rotate-hint .skip {
  margin-top: 24px; font-size: 13px; opacity: .55;
  text-decoration: underline; cursor: pointer;
}
#rotate-hint.dismissed { display: none !important; }

/* 安全区调试边框（上线前移除） */
#safe-debug {
  position: fixed; inset: 0;
  border: 1px dashed rgba(255, 0, 0, .25);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  pointer-events: none; z-index: 99;
  display: none;
}

/* 调试面板：时段手动切换（?debug=hotspots 时显示） */
#debug-panel {
  position: fixed; left: 8px; top: 8px; z-index: 101;
  display: none;
  flex-direction: column; gap: 6px;
  background: rgba(20, 14, 8, .82);
  padding: 8px 10px; border-radius: 8px;
  font-size: 12px; color: #d0be9c;
}
body.debug-hotspots #debug-panel { display: flex; }
#debug-panel .row { display: flex; gap: 4px; flex-wrap: wrap; }
#debug-panel button {
  font: inherit; color: #d0be9c;
  background: #3a2c1c; border: 1px solid #6b5236; border-radius: 5px;
  padding: 4px 8px; cursor: pointer; touch-action: manipulation;
}
#debug-panel button.on { background: #c9884a; color: #241708; border-color: #e8b06a; font-weight: bold; }

/* 调试模式 ?debug=hotspots：显示全部热区边框与标签 */
body.debug-hotspots .hs {
  outline: 2px dashed rgba(255, 107, 107, .9);
  background: rgba(255, 107, 107, .12);
}
body.debug-hotspots .hs::before {
  content: attr(data-label);
  position: absolute; left: 0; top: -22px;
  font-size: 18px; line-height: 20px; white-space: nowrap;
  color: #fff; background: rgba(200, 60, 60, .85);
  padding: 1px 6px; border-radius: 3px;
}