/* MORI — 弾くほど、森になる。 */

:root {
  --ink: #f4f1ea;
  --ink-dim: rgba(244, 241, 234, 0.6);
  --accent: #8fd9a0;       /* 若葉 */
  --sakura: #f0a8cc;
  --serif: 'Shippori Mincho B1', serif;
  --sans: 'Zen Kaku Gothic New', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  background: #0a1210;
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: var(--mono); }

/* 明るいターコイズの空でも読めるよう、常時うっすら影 */
.site-header, .intro, .stage-caption, .site-footer, .dock {
  text-shadow: 0 1px 3px rgba(10, 14, 10, 0.65), 0 4px 26px rgba(10, 14, 10, 0.45);
}

#stage {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  display: block; touch-action: none;
}

/* ═══════════ ヘッダー ═══════════ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.1rem 1.6rem;
  pointer-events: none;
  z-index: 4;
  opacity: 0; transition: opacity 1.2s ease 0.4s;
}
body.is-loaded .site-header { opacity: 1; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; }
.brand__mark { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgba(10, 14, 10, 0.5)); }
.brand__name { font: 500 1.0rem/1 var(--mono); letter-spacing: 0.34em; }
.header__right { display: flex; align-items: center; gap: 1.1rem; pointer-events: auto; }
.counter { font: 300 0.78rem/1 var(--mono); letter-spacing: 0.2em; color: var(--ink-dim); }
.counter b { font-weight: 500; color: var(--ink); }
.lang-toggle {
  font: 400 0.68rem/1 var(--mono);
  letter-spacing: 0.18em;
  color: var(--ink-dim);
  text-decoration: none;
  border: 1px solid rgba(244, 241, 234, 0.3);
  border-radius: 999px;
  padding: 0.45em 0.95em;
  transition: color 0.3s, border-color 0.3s;
}
.lang-toggle:hover { color: var(--ink); border-color: var(--accent); }

/* ═══════════ タイトル（最初の一音で静かに退場） ═══════════ */
.intro {
  position: fixed;
  left: clamp(1.4rem, 6vw, 6rem);
  top: 50%; transform: translateY(-52%);
  z-index: 4;
  pointer-events: none;
  transition: opacity 1.4s ease, transform 1.4s ease;
}
body.is-played .intro { opacity: 0; transform: translateY(-56%); }

.intro__eyebrow {
  font: 300 clamp(0.62rem, 1.4vw, 0.76rem)/1.6 var(--mono);
  letter-spacing: 0.30em;
  color: var(--ink-dim);
  margin-bottom: 1.3rem;
  opacity: 0; transition: opacity 1.4s ease 0.5s;
}
body.is-loaded .intro__eyebrow { opacity: 1; }

.intro__title {
  font-weight: 600;
  font-size: clamp(2.3rem, 7.2vw, 4.6rem);
  line-height: 1.34;
  letter-spacing: 0.06em;
}
.intro__line { display: block; overflow: hidden; }
.intro__line--indent { padding-left: 1.2em; }
.intro__line-inner {
  display: block;
  transform: translateY(110%);
  transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.7s;
}
body.is-loaded .intro__line-inner { transform: translateY(0); }
.intro__line:nth-child(2) .intro__line-inner { transition-delay: 0.9s; }

.intro__lead {
  margin-top: 1.4rem;
  font: 300 clamp(0.78rem, 1.9vw, 0.95rem)/2.0 var(--sans);
  letter-spacing: 0.12em;
  color: var(--ink-dim);
  opacity: 0; transition: opacity 1.6s ease 1.5s;
}
body.is-loaded .intro__lead { opacity: 1; }

.intro__hint {
  margin-top: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  max-width: 30rem;
  opacity: 0; transition: opacity 1.6s ease 1.9s;
}
body.is-loaded .intro__hint { opacity: 1; }
.hint-chip {
  font: 300 0.68rem/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--ink);
  padding: 0.5em 0.9em;
  border: 1px solid rgba(244, 241, 234, 0.35);
  border-radius: 999px;
  background: rgba(10, 18, 14, 0.25);
  backdrop-filter: blur(3px);
}

/* ═══════════ モードドック ═══════════ */
.dock {
  position: fixed; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.8rem;
  z-index: 4;
  opacity: 0; transition: opacity 1.4s ease 2.2s;
}
body.is-loaded .dock { opacity: 1; }
.dock button {
  font: 400 0.72rem/1 var(--mono);
  letter-spacing: 0.16em;
  color: var(--ink-dim);
  background: rgba(10, 18, 14, 0.35);
  border: 1px solid rgba(244, 241, 234, 0.25);
  border-radius: 999px;
  padding: 0.62em 1.2em;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: color 0.3s, border-color 0.3s;
}
.dock button.is-on { color: var(--ink); border-color: var(--accent); }
.dock button[disabled] { opacity: 0.45; cursor: default; }
.dock .badge {
  font-size: 0.58em; letter-spacing: 0.1em;
  color: var(--sakura); margin-left: 0.6em;
}

/* ═══════════ キャプション・フッター ═══════════ */
.stage-caption {
  position: fixed; left: 50%; bottom: 3.6rem; transform: translateX(-50%);
  font: 300 0.66rem/1.9 var(--mono);
  letter-spacing: 0.18em;
  color: var(--ink-dim);
  text-align: center;
  pointer-events: none; z-index: 3;
  opacity: 0; transition: opacity 1.6s ease;
}
body.is-played .stage-caption { opacity: 1; }

.site-footer {
  position: fixed; right: 1.2rem; bottom: 0.9rem;
  max-width: 24rem;
  font: 300 0.56rem/1.7 var(--mono);
  letter-spacing: 0.1em;
  color: rgba(244, 241, 234, 0.4);
  text-align: right;
  z-index: 3;
  opacity: 0; transition: opacity 1.4s ease 0.8s;
}
body.is-loaded .site-footer { opacity: 1; }
.site-footer a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(244, 241, 234, 0.25); pointer-events: auto; }

/* ═══════════ モバイル ═══════════ */
@media (max-width: 640px) {
  .intro { left: 1.3rem; right: 1.3rem; }
  .intro__title { font-size: clamp(2.1rem, 11vw, 2.9rem); }
  .intro__hint { max-width: none; }
  .dock { bottom: 3.4rem; }
  .stage-caption { white-space: normal; max-width: 86vw; bottom: 6.6rem; }
  .site-footer { left: 1.2rem; right: 1.2rem; max-width: none; text-align: center; }
  .counter { display: none; }
}