/* AETHERFALL 紹介サイト — docs/website-guidelines.md 準拠
   全トークンはゲーム実装の描画定数 (renderer.ts / title.ts / 各シーン) 由来 */

:root {
  /* §2.1 夜空 */
  --sky-deep: #03051a;
  --sky-mid: #101c48;
  --sky-horizon: #28386e;
  --star-bright: #e8f0ff;
  --star-dim: #8ea0e0;
  --star-faint: #4a5aa0;
  --star-glow: #7288cc;
  /* §2.2 ウィンドウ */
  --win-top: #3048c0;
  --win-bottom: #101c68;
  --win-frame: #e0e0f0;
  --win-frame-mid: #a0a8d0;
  --win-outline: #080830;
  --panel-dark: #181830;
  /* §2.3 アクセント */
  --gold: #c9ad5f;
  --gold-ui: #f8d848;
  --gold-name: #ffd870;
  --aether: #7ce8f8;
  --aether-deep: #59e0ff;
  /* §2.4 テキスト */
  --text: #f8f8f8;
  --text-dim: #b8bce0;
  --text-mute: #9aa0b8;
  --text-faint: #565c78;
  --dot: 'DotGothic16', monospace;
  --sans: 'Noto Sans JP', sans-serif;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 64px; }

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.95;
  color: var(--text);
  background: linear-gradient(180deg, var(--sky-deep) 0%, var(--sky-mid) 55%, var(--sky-horizon) 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

img { display: block; }
.px { image-rendering: pixelated; }

/* 言語の出し分け (太字やリンクを含む段落のみ両言語を並記している) */
html[lang="ja"] .i18n-en, html[lang="en"] .i18n-ja { display: none; }

a { color: var(--aether); text-decoration: none; }
a:hover { color: var(--gold-name); }

/* ---------------------------------------------------------------- 星空 */
#stars { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.star { position: absolute; background: var(--star-dim); }
.star.b { background: var(--star-bright); }
.star.f { background: var(--star-faint); }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.star.tw { animation: twinkle 4s ease-in-out infinite; }

/* エーテルの光粒 — 空へ還る歌 (§7: 12粒以下・周期14s以上・発光可) */
.mote {
  position: absolute;
  width: 2px; height: 2px;
  background: var(--aether);
  box-shadow: 0 0 6px 1px rgba(124, 232, 248, 0.7);
  border-radius: 50%;
  opacity: 0;
  animation: rise linear infinite;
}
.mote.lg { width: 3px; height: 3px; box-shadow: 0 0 8px 2px rgba(124, 232, 248, 0.7); }
@keyframes rise {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 0.8; }
  70% { opacity: 0.45; }
  100% { transform: translateY(-52vh); opacity: 0; }
}
/* 流れ星 — 堕ちる空の予感 (§7: 2本以下・周期9s以上、一瞬だけ) */
.shoot {
  position: absolute;
  width: 90px; height: 2px;
  background: linear-gradient(90deg, var(--star-bright), rgba(232, 240, 255, 0));
  box-shadow: 0 0 6px rgba(232, 240, 255, 0.5);
  opacity: 0;
  animation: shoot ease-in infinite;
}
@keyframes shoot {
  0% { transform: translate(0, 0) rotate(28deg); opacity: 0; }
  2% { opacity: 1; }
  14%, 100% { transform: translate(-300px, 160px) rotate(28deg); opacity: 0; }
}

/* ---------------------------------------------------------------- BGMトグル */
.bgm-btn {
  position: fixed; right: 16px; bottom: 16px; z-index: 20;
  font-family: var(--dot);
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--win-top), var(--win-bottom));
  border: 1px solid var(--win-frame);
  outline: 1px solid var(--win-outline);
  box-shadow: inset 0 0 0 2px var(--win-frame-mid);
  color: var(--text-dim);
  cursor: pointer;
}
.bgm-btn:hover { color: var(--gold-name); border-color: var(--gold); }
.bgm-btn:active { transform: translateY(1px); }
.bgm-btn[aria-pressed="true"] { color: var(--gold-ui); border-color: var(--gold); }
@media (max-width: 560px) {
  .bgm-btn { right: 10px; bottom: 10px; font-size: 13px; padding: 7px 12px; }
}

/* ---------------------------------------------------------------- 共通部品 */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

/* ゲームの Renderer.window() 再現 (ガイドライン §6.1) */
.af-window {
  background: linear-gradient(180deg, var(--win-top), var(--win-bottom));
  border: 1px solid var(--win-frame);
  outline: 1px solid var(--win-outline);
  box-shadow: inset 0 0 0 2px var(--win-frame-mid);
  border-radius: 4px;
  padding: 20px 24px;
  color: var(--text);
}

.cur {
  display: inline-block;
  width: 24px; height: 18px;
  background: url('img/cursor.png') no-repeat 0 0 / 24px 18px;
  image-rendering: pixelated;
  vertical-align: -2px;
  margin-right: 8px;
}
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.blink { animation: blink 1.06s steps(1) infinite; } /* 矩形波点滅 §7 */

h2 {
  font-family: var(--dot);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin: 0 0 24px;
}
h3 {
  font-family: var(--dot);
  font-size: 16px;
  font-weight: 400;
  color: var(--aether);
  letter-spacing: 0.04em;
  margin: 0 0 10px;
}

section { padding: 72px 0; }

.name-tag {
  display: inline-block;
  font-family: var(--dot);
  font-size: 16px;
  color: var(--gold-name);
  background: linear-gradient(180deg, var(--win-top), var(--win-bottom));
  border: 1px solid var(--win-frame);
  outline: 1px solid var(--win-outline);
  border-radius: 3px;
  padding: 2px 12px;
  margin-bottom: -6px;
  position: relative;
  z-index: 1;
  margin-left: 10px;
}

/* スクショ額装 (ガイドライン §5.1)
   figure の幅は必ず画像幅に固定する — キャプションの長さで figure が
   伸びると flex の折返しが不揃いに崩れる (2026-07-20 修正) */
figure.shot { margin: 0; width: 384px; }
figure.shot img {
  width: 384px; height: 336px; /* 1.5x — DPR2表示では整数3x */
  image-rendering: pixelated;
  border: 1px solid var(--win-frame);
  outline: 1px solid var(--win-outline);
}
@media (max-width: 880px) {
  figure.shot { width: 256px; }
  figure.shot img { width: 256px; height: 224px; }
}
figure.shot.x2 { width: 512px; }
figure.shot.x2 img { width: 512px; height: 448px; }
figure.shot figcaption {
  font-size: 14px;
  color: var(--text-mute);
  padding-top: 6px;
  text-align: center;
}

/* ---------------------------------------------------------------- ヘッダ */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  background: linear-gradient(180deg, rgba(16, 28, 104, 0.96), rgba(8, 8, 48, 0.96));
  border-bottom: 1px solid var(--win-frame-mid);
}
header .wrap { display: flex; align-items: center; gap: 18px; height: 52px; }
.brand { font-family: var(--dot); font-size: 16px; color: var(--gold); letter-spacing: 0.12em; }
/* ヘッダ内のナビ限定 — サイドメニュー(.drawer)も nav なので必ず header で絞る */
header nav { margin-left: auto; display: flex; gap: 16px; flex-wrap: wrap; }
header nav a { font-size: 15px; color: var(--text-dim); white-space: nowrap; }
header nav a:hover { color: var(--gold-name); }
header nav a.play { color: var(--gold-ui); font-family: var(--dot); }

/* 言語切替 */
.lang-switch {
  display: flex;
  margin-left: 14px;
  border: 1px solid var(--win-frame-mid);
  border-radius: 4px;
  overflow: hidden;
  flex: none;
}
.lang-switch button {
  font-family: var(--dot);
  font-size: 12px;
  line-height: 1;
  padding: 7px 9px;
  background: transparent;
  color: var(--text-mute);
  border: 0;
  cursor: pointer;
}
.lang-switch button:hover { color: var(--gold-name); }
.lang-switch button[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--win-top), var(--win-bottom));
  color: var(--gold-ui);
}

/* ハンバーガー (760px以下のみ表示) */
.menu-btn {
  display: none;
  margin-left: 14px;
  width: 38px; height: 32px;
  padding: 7px 8px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--win-top), var(--win-bottom));
  border: 1px solid var(--win-frame);
  outline: 1px solid var(--win-outline);
  cursor: pointer;
}
.menu-btn .bar {
  display: block;
  height: 2px;
  background: var(--gold-ui);
}
.menu-btn .bar + .bar { margin-top: 5px; }
.menu-btn[aria-expanded="true"] { border-color: var(--gold); }

/* ---------------------------------------------------------------- サイドメニュー */
.scrim {
  position: fixed; inset: 0; z-index: 25;
  background: rgba(3, 5, 26, 0.74);
  opacity: 0; visibility: hidden;
  transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}
.scrim.open { opacity: 1; visibility: visible; transition: opacity 0.22s ease; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 30;
  width: min(78vw, 288px);
  padding: 16px 18px 28px;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--win-top), var(--win-bottom));
  border-left: 1px solid var(--win-frame);
  box-shadow: inset 2px 0 0 var(--win-frame-mid);
  transform: translateX(100%);
  visibility: hidden; /* 閉状態はタブ順からも外す */
  transition: transform 0.22s ease, visibility 0s linear 0.22s;
}
.drawer.open { transform: translateX(0); visibility: visible; transition: transform 0.22s ease; }

.drawer-head { display: flex; align-items: center; margin-bottom: 10px; }
.drawer-head .brand { color: var(--gold); }
.drawer-close {
  margin-left: auto;
  width: 34px; height: 34px;
  font-size: 15px;
  color: var(--text-dim);
  background: none; border: 1px solid transparent; border-radius: 4px;
  cursor: pointer;
}
.drawer-close:hover { color: var(--gold-name); border-color: var(--win-frame-mid); }

.drawer ul { list-style: none; }
.drawer li + li { border-top: 1px solid rgba(160, 168, 208, 0.22); }
.drawer li a {
  display: block;
  position: relative;
  padding: 13px 6px 13px 34px; /* カーソル分を確保 */
  font-family: var(--dot);
  font-size: 16px;
  color: var(--text);
}
.drawer li a::before { /* ゲームのメニューカーソル (選択中のみ点灯) */
  content: '';
  position: absolute; left: 2px; top: 50%; margin-top: -9px;
  width: 24px; height: 18px;
  background: url('img/cursor.png') no-repeat 0 0 / 24px 18px;
  image-rendering: pixelated;
  opacity: 0;
}
.drawer li a:hover, .drawer li a:focus-visible { color: var(--gold-name); }
.drawer li a:hover::before, .drawer li a:focus-visible::before, .drawer li a:active::before { opacity: 1; }
.drawer .drawer-play { display: block; margin-top: 22px; text-align: center; }

body.no-scroll { overflow: hidden; }

/* 900px: ヘッダに全リンク+言語切替が並ぶ限界。以下はサイドメニューへ畳む */
@media (max-width: 900px) {
  .menu-btn { display: block; }
}
@media (min-width: 901px) { /* デスクトップでは存在ごと無効化 */
  .drawer, .scrim { display: none; }
}

/* ---------------------------------------------------------------- HERO */
#hero { padding: 140px 0 80px; text-align: center; }
#hero .logo {
  font-family: var(--dot);
  font-weight: 400;
  font-size: 48px;
  letter-spacing: 0.12em;
  color: var(--gold);
  text-shadow: 0 3px 0 var(--win-outline);
  margin-bottom: 6px;
}
#hero .logo-sub { font-size: 14px; color: var(--text-mute); letter-spacing: 0.3em; margin-bottom: 12px; }
#hero .logo-tag { font-family: var(--dot); font-size: 16px; color: var(--star-dim); margin-bottom: 38px; }
#hero .catch {
  font-size: 27px;
  color: var(--text);
  margin-bottom: 8px;
  min-height: 3.8em; /* 2行ぶん — タイプライタ中の高さ揺れを防ぐ */
  white-space: pre-line; /* 文中の \n で改行する */
}
#hero .catch-en { font-size: 14px; color: var(--star-dim); font-style: italic; margin-bottom: 6px; }
#hero .sub { font-size: 18px; color: var(--text-dim); margin-bottom: 36px; }
.cta-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 52px; }
.btn {
  display: inline-block;
  font-family: var(--dot);
  font-size: 16px;
  padding: 12px 28px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--win-top), var(--win-bottom));
  border: 1px solid var(--win-frame);
  outline: 1px solid var(--win-outline);
  box-shadow: inset 0 0 0 2px var(--win-frame-mid);
  color: var(--gold-ui);
}
.btn:hover { border-color: var(--gold); color: var(--gold-ui); }
.btn:active { transform: translateY(1px); }
.btn.sub-btn { color: var(--text); }
.btn.sub-btn:hover { color: var(--aether); border-color: var(--aether); }
#hero figure.shot { display: inline-block; }

/* 13人のシルエット (268×28 の1x素材を整数倍で。頭部8pxオフセット込み・端に余白) */
.hero-lineup {
  display: block;
  margin: 4px auto 0;
  width: 804px; height: 84px; /* 3x */
  opacity: 0.8;
}
@media (max-width: 880px) { .hero-lineup { width: 536px; height: 56px; } } /* 2x */
@media (max-width: 620px) { .hero-lineup { width: 268px; height: 28px; } } /* 1x */

/* ---------------------------------------------------------------- お知らせ */
#news { padding: 48px 0 0; }
#news .news-list ul { list-style: none; }
#news .news-list li { display: flex; gap: 16px; padding: 8px 0; font-size: 15.5px; line-height: 1.8; }
#news .news-list li + li { border-top: 1px solid rgba(160, 168, 208, 0.25); }
#news .news-list time { font-family: var(--dot); font-size: 14px; color: var(--gold-name); flex: none; padding-top: 3px; }
#news .news-list p { color: var(--text-dim); }
@media (max-width: 560px) {
  #news .news-list li { flex-direction: column; gap: 2px; }
}

/* ---------------------------------------------------------------- 物語 */
.world-window p + p { margin-top: 1em; }
.two-worlds {
  display: flex; gap: 24px; justify-content: center; flex-wrap: wrap;
  margin: 40px 0;
}
.two-worlds figure.shot figcaption b { color: var(--gold-name); font-weight: 700; display: block; }
.story-quote {
  margin-top: 40px;
}
.teaser {
  text-align: center;
  color: var(--star-dim);
  font-family: var(--dot);
  font-size: 16px;
  margin-top: 44px;
  line-height: 2.4;
}

/* ---------------------------------------------------------------- 仲間 */
.cast-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 広幅でも横3人まで */
  gap: 18px;
}
@media (max-width: 1020px) { .cast-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cast-grid { grid-template-columns: 1fr; } }
.cast-card { display: flex; gap: 14px; padding: 16px; }
.cast-card img { width: 96px; height: 96px; image-rendering: pixelated; border: 1px solid var(--win-outline); flex: none; }
.cast-card .nm { font-family: var(--dot); font-size: 16px; color: var(--gold-name); }
.cast-card .nm small { color: var(--text-mute); font-family: var(--sans); font-size: 12px; margin-left: 6px; }
.cast-card .job { font-size: 14px; color: var(--aether); margin-bottom: 6px; }
.cast-card .cls { font-size: 11px; color: var(--text-mute); margin-bottom: 6px; }
.cast-card p { font-size: 14.5px; line-height: 1.75; color: var(--text-dim); }
.cast-card .say { font-size: 13.5px; color: var(--text); margin-top: 6px; }

/* ---------------------------------------------------------------- システム */
.feature-cat { margin-bottom: 56px; }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 機能説明は 2×2 に揃える */
  gap: 4px 36px;
}
@media (max-width: 700px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-item { margin-bottom: 18px; }
.shots-row {
  display: flex; gap: 24px; flex-wrap: wrap; justify-content: center;
  margin-top: 20px;
}
/* ちょうど4枚の帯は 2×2 に整える (3+1 の不揃い回避)。
   5枚以上は全幅で 3+3 等に流す (2026-07-20 改訂) */
.shots-row:has(> :nth-child(4)):not(:has(> :nth-child(5))),
.fall-shots:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
  max-width: 816px; margin-left: auto; margin-right: auto;
}
@media (max-width: 880px) {
  .shots-row:has(> :nth-child(4)):not(:has(> :nth-child(5))),
  .fall-shots:has(> :nth-child(4)):not(:has(> :nth-child(5))) { max-width: 560px; }
}
.feature-item b { color: var(--gold-name); }
.feature-item p { color: var(--text-dim); font-size: 15.5px; }

/* ---------------------------------------------------------------- フォール */
#fall .lead p + p { margin-top: 1em; }
#fall .fall-shots { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
#fall .tease {
  text-align: center; color: var(--star-dim); font-family: var(--dot);
  font-size: 16px; margin-top: 32px; line-height: 2.2;
}
.cast-tease {
  text-align: center; color: var(--star-dim); font-family: var(--dot);
  font-size: 16px; margin-top: 30px; line-height: 2.2;
}
.so-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.so-card { display: flex; gap: 12px; padding: 14px; }
.so-card img { width: 96px; height: 96px; image-rendering: pixelated; border: 1px solid var(--win-outline); flex: none; }
.so-card .nm { font-family: var(--dot); font-size: 16px; color: var(--star-dim); }
.so-card .nm small { color: var(--text-mute); font-family: var(--sans); font-size: 12px; margin-left: 6px; }
.so-card .epi { font-size: 13.5px; color: var(--aether-deep); margin-bottom: 5px; }
.so-card p { font-size: 14px; line-height: 1.7; color: var(--text-dim); }
.so-card .say { font-size: 13px; color: var(--text); margin-top: 5px; }

/* ---------------------------------------------------------------- メディア */
.media-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }

/* ---------------------------------------------------------------- スペック/FAQ */
table.spec { border-collapse: collapse; width: 100%; }
table.spec th, table.spec td { border: 1px solid var(--win-frame-mid); padding: 9px 14px; font-size: 15.5px; text-align: left; }
table.spec th { color: var(--gold-name); font-weight: 700; white-space: nowrap; width: 9em; }
table.spec td { color: var(--text-dim); }
details { border-bottom: 1px solid var(--panel-dark); padding: 10px 0; }
details summary { cursor: pointer; color: var(--text); font-weight: 700; list-style: none; }
details summary::before { content: '▶ '; color: var(--gold-ui); font-size: 12px; }
details[open] summary::before { content: '▼ '; }
details p { color: var(--text-dim); font-size: 15.5px; padding: 8px 0 4px 1.2em; }

/* ---------------------------------------------------------------- フッタ */
footer {
  border-top: 1px solid var(--win-frame-mid);
  padding: 40px 0 60px;
  text-align: center;
  color: var(--text-mute);
  font-size: 13.5px;
  line-height: 2;
}
footer .ft-logo { font-family: var(--dot); color: var(--gold); letter-spacing: 0.12em; margin-bottom: 10px; }

/* ---------------------------------------------------------------- レスポンシブ */
@media (max-width: 900px) {
  header nav a:not(.play) { display: none; } /* 代わりにサイドメニューへ */
}
@media (max-width: 560px) { /* ヘッダを4要素そのまま1行に収めるため詰める */
  header .wrap { gap: 10px; }
  .brand { font-size: 14px; letter-spacing: 0.08em; }
  .lang-switch { margin-left: 8px; }
  .lang-switch button { padding: 6px 7px; font-size: 11px; }
  .menu-btn { margin-left: 0; }
}
@media (max-width: 560px) {
  #hero .logo { font-size: 32px; }
  #hero .catch { font-size: 18px; }
  figure.shot.x2 { width: 256px; }
  figure.shot.x2 img { width: 256px; height: 224px; }
}

/* ---------------------------------------------------------------- モーション抑制 (§7) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .star.tw, .blink { animation: none; }
  .mote, .shoot { display: none; }
  .drawer, .scrim { transition: none; }
}