/* 전역 WebGL 캔버스 (작업 D) — 콘텐츠 뒤 고정 레이어 */
.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-slow, 320ms) var(--ease-standard, cubic-bezier(.2, 0, .2, 1));
}

/* 모바일 주소창이 접히고 펴져도 캔버스 크기가 바뀌지 않게 큰 뷰포트 높이로 고정 (world.js도 같은 높이 기준).
   주소창이 보일 때는 아래쪽 일부가 화면 밖에 있을 뿐 — 늘어남·빈 띠·재배치 없음 */
@supports (height: 100lvh) {
  .scene { bottom: auto; height: 100lvh; }
}

html.webgl-ready .scene {
  opacity: 1;
}

html.no-webgl .scene,
html.no-js .scene {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .scene {
    transition: none;
  }
}

/* ?scenedebug 전용 FPS 표시 — index.js가 디버그일 때만 요소를 만든다 */
.scene-fps {
  position: fixed;
  right: 8px;
  bottom: 8px;
  z-index: 1000;
  padding: 2px 6px;
  font: var(--fw-medium, 500) var(--web-fs-small, 13px)/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--text, #fff);
  background: var(--surface-dark, #2d2a20);
  box-shadow: var(--stroke-frame-light, inset 0 0 0 1px rgba(255, 255, 255, .1));
  pointer-events: none;
}