/* ===== ダム観光バーチャルツアー モック（Pattern A） ===== */
:root {
  --navy: #0d2436;
  --navy-2: #16384f;
  --teal: #1f8a8a;
  --teal-bright: #2fb4b4;
  --accent: #f0a23b;
  --ink: #0d2436;
  --paper: #f4f7f9;
  --line: rgba(255, 255, 255, 0.14);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  color: var(--ink);
  background: var(--navy);
  -webkit-font-smoothing: antialiased;
}

.screen { position: fixed; inset: 0; width: 100%; height: 100%; }
.hidden { display: none !important; }

/* ============ 入口（ランディング） ============ */
#landing {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #eaf2f6;
  background:
    radial-gradient(1100px 600px at 50% -10%, rgba(47, 180, 180, 0.30), transparent 60%),
    linear-gradient(180deg, #0e2c40 0%, #0a1c2a 100%);
  padding: 24px;
  overflow: auto;
}
.landing-inner { max-width: 680px; width: 100%; }
.eyebrow {
  letter-spacing: 0.22em;
  font-size: 0.78rem;
  color: var(--teal-bright);
  margin: 0 0 14px;
}
#landing h1 {
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1.15;
  margin: 0 0 20px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.lead {
  font-size: clamp(0.95rem, 2.2vw, 1.1rem);
  line-height: 1.9;
  color: #c4d6e0;
  margin: 0 0 30px;
}

.join-box {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 26px;
}
.join-box label {
  width: 100%;
  font-size: 0.8rem;
  color: #9fb6c4;
  text-align: left;
}
.join-box input {
  flex: 1 1 180px;
  min-width: 160px;
  font-size: 1rem;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
}
#join-btn {
  flex: 0 0 auto;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 12px 26px;
  border: none;
  border-radius: 10px;
  color: #06222b;
  background: linear-gradient(135deg, var(--teal-bright), var(--teal));
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  box-shadow: 0 8px 22px rgba(47, 180, 180, 0.35);
}
#join-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(47, 180, 180, 0.45); }

.how-to {
  list-style: none;
  padding: 0;
  margin: 0 auto 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: center;
  font-size: 0.85rem;
  color: #b6cad6;
}
.how-to .key {
  display: inline-block;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 8px;
  font-weight: 700;
  margin-right: 4px;
}
.note-pc { font-size: 0.78rem; color: #8aa3b2; margin: 6px 0 0; }

.landing-foot {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 20px;
  font-size: 0.72rem;
  color: #7f97a6;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.landing-foot .sample { color: var(--accent); }

/* ============ 3D体験 ============ */
#experience { background: #1a4763; }
#scene { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
#scene:active { cursor: grabbing; }

/* 読み込み */
#loading {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px;
  background: linear-gradient(180deg, #0e2c40, #0a1c2a);
  color: #cfe0e9; z-index: 30;
}
.spinner {
  width: 46px; height: 46px;
  border: 4px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--teal-bright);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* HUD 共通 */
#hud-top, #hud-panel, #hud-hint, #hud-location, #hud-disclaimer { z-index: 20; }

#hud-top {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  padding: 14px 20px;
  color: #fff;
  background: linear-gradient(180deg, rgba(8, 24, 36, 0.78), transparent);
  pointer-events: none;
}
.hud-title { font-weight: 800; font-size: 1.05rem; letter-spacing: 0.02em; }
.hud-count { font-size: 0.9rem; }
.hud-count .muted { color: #9fb6c4; font-size: 0.8rem; }

#hud-location {
  position: absolute; top: 58px; left: 20px;
  display: flex; align-items: center; gap: 8px;
  background: rgba(8, 24, 36, 0.62);
  color: #eaf2f6;
  padding: 7px 14px; border-radius: 999px;
  font-size: 0.85rem; font-weight: 600;
  backdrop-filter: blur(4px);
}
#hud-location .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--teal-bright);
  box-shadow: 0 0 0 4px rgba(47, 180, 180, 0.25);
}

/* 右パネル */
#hud-panel {
  position: absolute; top: 58px; right: 16px;
  width: 250px;
  display: flex; flex-direction: column; gap: 12px;
  background: rgba(8, 24, 36, 0.66);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  color: #eaf2f6;
  backdrop-filter: blur(6px);
}
.panel-block h2 {
  font-size: 0.72rem; letter-spacing: 0.16em;
  color: #8fb0c0; margin: 0 0 8px; font-weight: 700;
}
#participant-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
#participant-list li { display: flex; align-items: center; gap: 9px; font-size: 0.9rem; }
.avatar-chip {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 800; color: #06222b; flex: 0 0 auto;
}
.avatar-chip.guide { background: var(--accent); }
.avatar-chip.you { background: var(--teal-bright); }
#guide-text { font-size: 0.86rem; line-height: 1.7; color: #cfe0e9; margin: 0; }

.panel-block.actions { gap: 8px; display: flex; flex-direction: column; }
.panel-block.actions button {
  font-size: 0.92rem; font-weight: 700;
  padding: 11px 12px; border-radius: 10px; border: none; cursor: pointer;
  transition: transform 0.1s ease, filter 0.1s ease;
}
.panel-block.actions button:hover { transform: translateY(-1px); filter: brightness(1.08); }
#warp-btn { background: rgba(255, 255, 255, 0.14); color: #eaf2f6; border: 1px solid var(--line) !important; }
#release-btn { background: linear-gradient(135deg, #3aa0d6, #1f6fa8); color: #fff; }

/* 操作ヒント */
#hud-hint {
  position: absolute; left: 20px; bottom: 40px;
  display: flex; gap: 14px;
  background: rgba(8, 24, 36, 0.6);
  color: #cfe0e9; font-size: 0.8rem;
  padding: 8px 14px; border-radius: 10px;
  backdrop-filter: blur(4px);
}
#hud-hint b { color: #fff; }

/* シネマティック（放流）中は通常HUDを隠して没入感を高める */
#experience.cine #hud-top,
#experience.cine #hud-panel,
#experience.cine #hud-location,
#experience.cine #hud-hint { display: none; }

/* シネマティック（放流） */
#cinematic { position: absolute; inset: 0; z-index: 25; pointer-events: none; }
#cinematic .bar {
  position: absolute; left: 0; right: 0; height: 14vh;
  background: #000; opacity: 0;
  transition: opacity 0.6s ease;
}
#cinematic:not(.hidden) .bar { opacity: 1; }
#cinematic .bar.top { top: 0; }
#cinematic .bar.bottom { bottom: 0; }
.cine-caption {
  position: absolute; left: 0; right: 0; bottom: 16vh;
  text-align: center; color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
  padding: 0 20px;
}
.cine-caption h3 { font-size: clamp(1.4rem, 4vw, 2.2rem); margin: 0 0 8px; letter-spacing: 0.1em; }
.cine-caption p { font-size: 0.8rem; color: #d8e6ef; margin: 0 auto; max-width: 560px; line-height: 1.7; }
#cine-close {
  position: absolute; top: calc(14vh + 16px); right: 20px;
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.16); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px; padding: 9px 16px; font-size: 0.9rem; font-weight: 700; cursor: pointer;
}
#cine-close:hover { background: rgba(255, 255, 255, 0.28); }

/* フッター注記 */
#hud-disclaimer {
  position: absolute; left: 0; right: 0; bottom: 0;
  text-align: center;
  font-size: 0.7rem; color: #cfe0e9;
  background: linear-gradient(0deg, rgba(8, 24, 36, 0.7), transparent);
  padding: 6px 12px 7px;
  pointer-events: none;
}

/* レスポンシブ */
@media (max-width: 640px) {
  #hud-panel { width: min(240px, 72vw); top: auto; bottom: 56px; right: 10px; padding: 12px; }
  #hud-hint { font-size: 0.72rem; bottom: 86px; left: 10px; }
  #hud-location { top: 52px; left: 10px; font-size: 0.78rem; }
  .hud-title { font-size: 0.92rem; }
}