/* 全画面のWebGLキャンバスと、その上に重ねるUI用のスタイル。
   レイアウトの責務のみを持ち、色や強さの調整は main 側の CONFIG に置いている。 */

:root {
  --bg: #05060a;
  --fg: #e8ecff;
  --muted: rgba(232, 236, 255, 0.62);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* スマホでのバウンス/選択を抑え、没入感を優先する */
  overflow: hidden;
  overscroll-behavior: none;
}

/* 背景に敷く全画面キャンバス。touch-action:none でドラッグ回転をブラウザに奪われない */
#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* キャンバス上の重ね表示。クリック/ドラッグを妨げないよう pointer-events は無効 */
.overlay {
  position: fixed;
  left: max(20px, env(safe-area-inset-left));
  bottom: max(20px, env(safe-area-inset-bottom));
  pointer-events: none;
  user-select: none;
}

.overlay__title {
  margin: 0 0 6px;
  font-size: clamp(20px, 5vw, 34px);
  font-weight: 700;
  letter-spacing: 0.04em;
  /* ネオン発光を薄く効かせて、パーティクルの世界観に馴染ませる */
  text-shadow: 0 0 18px rgba(34, 211, 238, 0.55), 0 0 40px rgba(168, 85, 247, 0.35);
}

.overlay__hint {
  margin: 0;
  font-size: clamp(12px, 3.4vw, 15px);
  color: var(--muted);
}

/* WebGL非対応時のフォールバック。既定では隠し、body.no-webgl のときだけ中央表示する */
.fallback {
  display: none;
}

body.no-webgl #scene,
body.no-webgl .overlay {
  display: none;
}

body.no-webgl .fallback {
  display: grid;
  place-content: center;
  height: 100%;
  margin: 0;
  padding: 0 24px;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}