/* 泰安 · 岱庙庙会微缩场景在主线里的挂载层。
   微缩场景本身不带任何 UI；这一层只负责"占满屏 + 一个退出方式"：
   Esc 退出，右下角一枚极淡的关闭键（触屏没有 Esc，必须有可点的地方）。 */

#taian-fair-layer {
  position: fixed;
  inset: 0;
  z-index: 60;
  background:
    radial-gradient(130% 100% at 50% 0%, #5a6a8c 0%, #3f4b66 32%, #2a3143 62%, #1b1e29 100%);
  overflow: hidden;
}

#taian-fair-layer[hidden] { display: none; }

#taian-fair-layer canvas {
  display: block;
  position: absolute;
  inset: 0;
  touch-action: none;
}

.taian-fair-close {
  position: absolute;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 2;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(232, 224, 208, .22);
  border-radius: 50%;
  background: rgba(20, 22, 30, .34);
  color: rgba(236, 230, 216, .72);
  font: 18px/1 -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: opacity .2s, border-color .2s;
}

.taian-fair-close:hover,
.taian-fair-close:focus-visible {
  border-color: rgba(232, 224, 208, .5);
  color: #f0e9da;
}

/* 进入时的一行说明，4 秒后淡出，之后画面只剩模型 */
.taian-fair-hint {
  position: absolute;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 2;
  margin: 0;
  font: 12px/1.6 -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  color: rgba(232, 226, 212, .58);
  letter-spacing: .1em;
  pointer-events: none;
  animation: taian-fair-fade 4s ease forwards;
}

@keyframes taian-fair-fade {
  0%, 62% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .taian-fair-hint { animation: none; opacity: .7; }
}