/* gx.css — 3d-playable-homepage 基本設計体系
   DOM-first：生HTMLでは全文が表示状態。隠す（gx-locked）のは has-js が付いてから */

:root {
  --gx-bg: #07090E;
  --gx-ink: #E8EAF0;
  --gx-sub: #9AA3B5;
  --gx-key: #E8C87A;
  --gx-max: 1080px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--gx-bg);
  color: var(--gx-ink);
  font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
  line-height: 1.9;
  word-break: auto-phrase;
  text-wrap: pretty;
}
img { max-width: 100%; height: auto; }

/* ---- 3D舞台（固定レイヤー） ---- */
.gx-stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.gx-stage canvas { display: block; width: 100%; height: 100%; }
.no-3d .gx-stage { display: none; }
/* WebGL不可のときの静的背景（縮退の絵） */
.no-3d body, .no-3d .gx-shell {
  background:
    radial-gradient(60% 50% at 50% 30%, rgba(232, 200, 122, .18), transparent 70%),
    var(--gx-bg);
}

/* ---- 本文シェル ---- */
.gx-shell { position: relative; z-index: 1; }
.gx-station {
  min-height: 100svh;
  display: flex; align-items: center;
  padding: 12svh 6vw;
}
.gx-station__inner { max-width: var(--gx-max); margin: 0 auto; width: 100%; }
.gx-meta { font-size: .78rem; letter-spacing: .14em; color: var(--gx-sub); }
.gx-station h2 { font-size: clamp(1.6rem, 4.2vw, 2.8rem); line-height: 1.5; margin: .4em 0; }
.gx-station p { max-width: 40em; }

/* 文字の背後に暗いベール（3Dの上でも読める。webgl-quality pitfalls §8） */
.has-3d .gx-station__inner {
  position: relative;
}
.has-3d .gx-station__inner::before {
  content: "";
  position: absolute; inset: -6% -8%;
  background: radial-gradient(80% 80% at 40% 50%, rgba(4, 6, 10, .62), transparent 75%);
  z-index: -1;
  border-radius: 24px;
}

/* ---- 解錠状態（JS起動後だけ有効。生HTMLでは全文可視） ---- */
.has-js .gx-locked {
  opacity: .14;
  filter: blur(2px) grayscale(.4);
  pointer-events: none;
  user-select: none;
  transition: opacity .8s ease, filter .8s ease;
}

/* ---- ホットスポット（DOM実体。ヒット44px以上） ---- */
.gx-hotspot {
  min-width: 44px; min-height: 44px;
  padding: 10px 22px;
  border: 1px solid rgba(232, 200, 122, .55);
  border-radius: 999px;
  background: rgba(232, 200, 122, .08);
  color: var(--gx-key);
  font: inherit; font-size: .92rem; letter-spacing: .08em;
  cursor: pointer;
}
.gx-hotspot:hover, .gx-hotspot:focus-visible { background: rgba(232, 200, 122, .2); }
.gx-hotspot.is-hint { animation: gx-pulse 1.2s ease-in-out infinite; }
@keyframes gx-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 200, 122, .45); }
  50%      { box-shadow: 0 0 0 12px rgba(232, 200, 122, 0); }
}

/* ---- PLAYゲート ---- */
.gx-gate {
  position: fixed; inset: 0; z-index: 40;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.4rem;
  background: var(--gx-bg);
  transition: opacity .9s ease;
}
.gx-gate.is-gone { opacity: 0; pointer-events: none; }
.gx-gate__title { font-size: clamp(1.4rem, 3.4vw, 2.2rem); margin: 0; }
.gx-gate__enter {
  min-width: 44px; min-height: 44px;
  padding: 14px 44px;
  border: 1px solid var(--gx-key); border-radius: 999px;
  background: transparent; color: var(--gx-key);
  font: inherit; font-size: 1rem; letter-spacing: .2em;
  cursor: pointer;
}
.gx-gate__enter:hover { background: rgba(232, 200, 122, .14); }
.gx-gate__tour { background: none; border: none; color: var(--gx-sub); font: inherit; font-size: .82rem; cursor: pointer; text-decoration: underline; }
.no-3d .gx-gate { display: none; }
html.is-locked { overflow: hidden; }
.no-3d.is-locked, html.no-3d { overflow: auto; }

/* ---- HUD（v0.5 で配線。マークアップだけ先に置く） ---- */
.gx-hud {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  pointer-events: none;
  font-size: .8rem; color: var(--gx-sub);
}
.gx-hud > * { pointer-events: auto; }
.gx-hud__dots { display: flex; gap: 8px; }
.gx-hud__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(154, 163, 181, .4); border: 0; padding: 0; cursor: pointer; }
.gx-hud__dot.is-cleared { background: var(--gx-key); }
.gx-hud__dot.is-active { outline: 2px solid rgba(232, 200, 122, .6); outline-offset: 2px; }
.gx-hud__right { display: flex; gap: 14px; align-items: center; }
.gx-hud__skip {
  min-height: 44px; padding: 8px 18px;
  border: 1px solid rgba(232, 200, 122, .5); border-radius: 999px;
  background: rgba(7, 9, 14, .7); color: var(--gx-key);
  font: inherit; font-size: .82rem; cursor: pointer;
}
.no-3d .gx-hud { display: none; }

/* ---- ステルス課題（3D側が本体の操作。ボタンはDOM-first・a11y・QAの裏経路） ----
   生HTML／no-3d／tour では普通に見える。3Dが立ったときだけ視覚的に隠す。
   Tabフォーカスで現れる（キーボード操作は生きている） */
.has-3d:not(.is-tour) .gx-stealth .gx-hotspot {
  position: absolute;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
  min-width: 0; min-height: 0; padding: 0;
}
.has-3d:not(.is-tour) .gx-stealth .gx-hotspot:focus-visible {
  position: static; width: auto; height: auto;
  clip-path: none; opacity: 1; pointer-events: auto;
  min-width: 44px; min-height: 44px; padding: 10px 22px;
}
.gx-actions { position: relative; }

/* ---- 見つけると開く語り（data-reveals の開き先。生HTMLでは表示状態） ---- */
.has-js .gx-secret {
  display: none;
}
.has-js .gx-secret.is-open {
  display: block;
  animation: gx-open .9s ease both;
}
.no-3d .gx-secret, .is-tour .gx-secret { display: block !important; }
@keyframes gx-open {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---- 課題の状態 ---- */
.gx-hotspot.is-found, .gx-hotspot.is-chosen {
  background: rgba(232, 200, 122, .3);
  color: #FFF3D6;
  border-color: var(--gx-key);
  animation: none;
}
.gx-hotspot:disabled { cursor: default; opacity: .85; }

/* ---- tour（見るだけモード）：全解錠のスクロール文書 ---- */
.is-tour .gx-locked {
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
  user-select: auto !important;
}
.is-tour .gx-hud__skip { display: none; }
/* tour では課題UI（目標文）も消す。固定表示のまま本文の上を流れると読みを妨げる */
.is-tour .gx-hud__objective { display: none; }

/* ---- フッター ---- */
.gx-footer { position: relative; z-index: 1; padding: 10svh 6vw; border-top: 1px solid rgba(154, 163, 181, .2); }

/* ---- reduced-motion：最終状態に固定（「何も表示されない」を防ぐ） ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .gx-locked { opacity: 1 !important; filter: none !important; pointer-events: auto !important; }
  .gx-secret { display: block !important; }
  .gx-gate { display: none !important; }
  html.is-locked { overflow: auto !important; }
}

/* 扉が開ききったところで出す一行（第二声）。ワールドが gx:dooropen を投げたときだけ現れる。
   使うサイトは <p class="gx-openline" data-gx-openline aria-hidden="true">…</p> を body に置く */
.gx-openline {
  position: fixed; inset: 0; z-index: 6; margin: 0;
  display: grid; place-items: center; text-align: center;
  pointer-events: none; opacity: 0;
  /* 消えている間は visibility も伏せる。透明なだけだと、検品の文字重なり検査から見て
     「画面いっぱいの見えている文字」のままになり、全部と重なっていると判定される */
  visibility: hidden;
  transition: opacity 1.2s ease, visibility 0s linear 1.2s;
  color: var(--gx-ink, #F2E6CC);
  font-size: clamp(1.05rem, 2.4vw, 1.6rem); letter-spacing: .12em; line-height: 1.7;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .92), 0 0 44px rgba(0, 0, 0, .8);
}
.gx-openline.is-on { opacity: 1; visibility: visible; transition: opacity 1.1s ease .15s, visibility 0s; }
.no-3d .gx-openline, html.is-tour .gx-openline { display: none; }
/* **効き時間は素の側に書く。** is-intro の中だけに transition を書くと、クラスを外した瞬間に
   transition ごと消えて**パッと出る**（＝ふわっとしない）。実際そうなっていた */
.gx-map, .gx-fab, .gx-hud, .gx-shell { transition: opacity 1.4s ease; }
html.is-intro .gx-map,
html.is-intro .gx-fab,
html.is-intro .gx-hud,
html.is-intro .gx-shell { opacity: 0; pointer-events: none; }