/* =============================================================================
   PATCHWORK DEAD × TapNow LP — 全体（ヘッダ・ナビ・ドロワー・フッタ・進捗）
   ========================================================================== */

/* ------------------------------ header -------------------------------------- */
/* 批評R3: ヒーローの上では不透明な黒帯が「テンプレっぽい」との指摘。
   ヒーロー区間だけ透明＋上からの柔らかいグラデーションにし、ヒーローを
   スクロールで抜けたら（core.js が data-solid を立てる）不透明バーへ切替える。 */
.site-header {
  position: sticky; top: 0; z-index: var(--z-chrome);
  display: flex; align-items: center; gap: var(--s-4);
  height: 64px; padding-inline: var(--s-5);
  background: linear-gradient(to bottom, rgba(13,10,8,.5), transparent);
  border-bottom: 1px solid transparent;
  flex-wrap: nowrap; overflow: visible;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), backdrop-filter var(--dur-base) var(--ease-out);
}
.site-header[data-solid="true"] {
  background: rgba(23,19,15,.78);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--hairline);
}
@supports not (backdrop-filter: blur(1px)) { .site-header[data-solid="true"] { background: var(--umber-900); } }
@media (max-width: 640px) { .site-header { height: 52px; padding-inline: var(--s-4); } }

/* 批評R8再指摘: text-decoration は祖先の <a> にかかると（UA既定の下線＋
   base.css の text-decoration-color）インライン子孫へ伝播し、子側で
   text-decoration:none を指定しても打ち消せない（CSS Text Decoration の
   仕様どおり）。.brand-collab 側の none だけでは効かないため、根本の
   <a class="brand"> 自体に text-decoration:none を付ける。 */
/* v24バグ修正: .nav-scrim は .site-header の「子」であり（兄弟ではない）、
   position:fixed+z-index の positioned な子孫は position:static の兄弟
   （このロゴ／BGM／トグル）より常に上へ描画される（z-index の数値に関係なく、
   static は「positioned要素より下のレイヤー」というスタッキングのルール）。
   そのため単純な z-index の数値調整では直せず、これらにも position を与えて
   z-index 比較に参加させる必要がある。 */
.brand { position: relative; z-index: var(--z-chrome); display: flex; align-items: center; gap: var(--s-3); margin-right: auto; min-width: 0; text-decoration: none; }
.brand-logo { height: 30px; width: auto; }
/* 批評R4: モバイルヘッダーのロゴが小さく読みにくい */
@media (max-width: 640px) { .brand-logo { height: 34px; } }
.brand-logo[data-broken="true"] { display: none; }
.brand-fallback {
  display: none; flex-direction: column; line-height: 1.1;
}
.brand-logo[data-broken="true"] + .brand-fallback { display: flex; }
.brand-fallback .b-jp { font-weight: 900; font-size: 1rem; letter-spacing: .04em; }
.brand-fallback .b-la { font-family: var(--font-la); font-style: italic; font-size: .6875rem; color: var(--ink-muted); letter-spacing: .06em; }

/* コラボ表記（TapNow）: ロゴは透過・白抜きなので暗いヘッダーの上でそのまま
   読める。join の .collab-lockup と同じ「PD ロゴ　×　Tapnow」の並びにし、
   区切り線は使わない（批評R8）。間隔は左右とも .brand / .brand-collab の
   gap をそろえて均等に。批評R7: 「×」が .75rem・斜体・ink-faint だと下線／
   アンダースコアに見えてしまう → 通常ウェイトの直立グリフ、ink-muted、
   1〜1.1rem に拡大し、ロゴと縦中央でそろえる。TapNow ロゴ自体も 18px 前後
   まで拡大。.brand は <a> なのでブラウザ既定の下線を継承してしまう
   （批評R8: 「×」に下線が出ていた）ため、.brand-collab に
   text-decoration:none を明示する。360〜390px のモバイルヘッダーでも表示
   （サウンド／メニューボタンとぶつからないよう、間隔とロゴをさらに
   一段階小さくする）。 */
.brand-collab {
  display: flex; align-items: center; gap: var(--s-3); flex: none;
  text-decoration: none;
}
.collab-x {
  font-size: 1.05rem; font-style: normal; font-weight: 400;
  color: var(--ink-muted); line-height: 1;
  display: inline-flex; align-items: center;
}
.collab-logo { height: 18px; width: auto; display: block; }

/* v11: 制作者ロゴ（KEIGO MATSUMARU）。白抜き2行ワードマークなので暗い
   ヘッダーの上でそのまま読める。両方の行が読める高さ（目安30〜34px）を
   デスクトップで確保し、360〜390px ではサウンド／メニューボタンとぶつから
   ない範囲で比例縮小しつつ、判読できる最低限（目安22px）は割らない。 */
.brand-keigo { display: flex; align-items: center; flex: none; }
.keigo-logo { height: 32px; width: auto; display: block; }

@media (max-width: 640px) {
  .brand { gap: var(--s-2); }
  .brand-collab { gap: var(--s-2); }
  .collab-x { font-size: .9rem; }
  .collab-logo { height: 14px; }
  .keigo-logo { height: 22px; }
}

.nav-toggle {
  /* v24バグ修正: 同上（閉じるボタンとして機能するには .nav-scrim より
     確実に上にある必要がある）。 */
  position: relative; z-index: var(--z-chrome);
  display: none; width: 40px; height: 40px; place-items: center;
  border: 1px solid var(--hairline); border-radius: var(--r-md);
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  content: ""; display: block; width: 18px; height: 2px; background: var(--ink);
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav-toggle-bars { position: relative; margin-inline: auto; }
.nav-toggle-bars::before { position: absolute; top: -6px; }
.nav-toggle-bars::after { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

/* デスクトップ幅では nav 要素そのものが横並びの行になる必要がある。
   これが抜けていると ul／nav-period／CTA ボタンがブロックとして縦に積まれ、
   ナビ全体がヘッダーの下へ折り返して見切れ、ボタンが全幅化する（1440px 実測バグ）。 */
.site-nav {
  display: flex; align-items: center; gap: var(--s-4);
  flex-wrap: nowrap; flex-shrink: 1; min-width: 0;
}
.site-nav ul { display: flex; align-items: center; gap: var(--s-4); flex: none; white-space: nowrap; }
/* v25バグ修正で判明: このルールは nav-jp/nav-la の2段リンク専用のつもりだったが
   :not(.btn) が無かったため、.site-nav 内の「参加する」ボタン（<a class="btn ...">）
   にも display:flex;flex-direction:column;padding-block:var(--s-1)=4px が
   当たってしまい、.btn 側で padding を大きくしても常に4pxに上書きされて
   小さいままだった（旧 .btn--sm の高さが26pxしか無かった原因もこれ）。 */
.site-nav a:not(.btn) {
  display: flex; flex-direction: column; line-height: 1.15; padding-block: var(--s-1);
  border-bottom: 2px solid transparent; text-decoration: none; /* 批評R3: 既定の下線が「テンプレ」に見えていた */
}
.site-nav .nav-jp { font-size: .875rem; font-weight: 700; } /* 14px 以上 */
.site-nav .nav-la { font-family: var(--font-la); font-size: .625rem; color: var(--ink-muted); font-style: italic; }
.site-nav a:not(.btn):hover, .site-nav a:not(.btn):focus-visible { border-color: var(--accent); }

.nav-period {
  display: flex; flex-direction: column; align-items: flex-end; font-size: var(--t-caption);
  color: var(--ink-muted); white-space: nowrap; flex: none;
}
.nav-period b { color: var(--ink); }
/* 1024〜1280px（インラインナビの帯）は狭いので、期間表示はヘッダーから外し
   hero の chip に任せる。860px 以下はドロワー内なので対象外（幅に余裕がある）。 */
@media (min-width: 861px) and (max-width: 1280px) { .nav-period { display: none; } }

/* ヘッダーから TapNow ピルと BGM ピルボタンを外し（批評R2）、BGM は控えめな
   アイコンひとつに縮小。ラベルは視覚的には隠し、スクリーンリーダー用に残す。 */
.bgm-icon {
  /* v24バグ修正: .brand と同じ理由で position+z-index が必要（.nav-scrim は
     子孫で position:static のままだと数値に関係なく上に描画されてしまう）。 */
  position: relative; z-index: var(--z-chrome);
  display: grid; place-items: center; width: 36px; height: 36px; flex: none;
  border: 1px solid var(--hairline); border-radius: 50%; color: var(--ink-muted);
}
.bgm-icon:hover, .bgm-icon[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
/* 批評R3: 「....」の4点アイコンが記号として読めなかった。実物のスピーカー
   アイコンに差し替え、音量波は on/off で明滅させて状態が分かるようにする。 */
.bgm-icon .bgm-wave { opacity: .3; transition: opacity var(--dur-fast) var(--ease-out); }
.bgm-icon[aria-pressed="true"] .bgm-wave { opacity: 1; }
.bgm-icon[aria-pressed="true"] .bgm-wave--2 { animation: bgm-pulse 1600ms ease-in-out infinite; }
@keyframes bgm-pulse { 0%,100% { opacity: .6; } 50% { opacity: 1; } }

@media (max-width: 860px) {
  .nav-toggle { display: grid; }
  /* 批評R9（実機バグ1件目）: 閉じた状態のドロワーを transform:translateX(100%)
     で画面外へ逃がしていたが、そのボックス自体は right:0 の位置に幅
     min(86vw,360px) で存在し続ける。html{overflow-x:clip} はデスクトップの
     scrollWidth 計測からは隠すが、Android Chrome は overflow-x:clip を
     無視してこの見えないボックスの右端（412px ビューポートで最大766px）を
     ページの最小スケール計算に含めてしまい、ページ全体が約55%にズームアウト
     される実害が出た。修正: ボックス自体を常に viewport 内（right:0）に置き、
     閉時は transform を使わず visibility+opacity+clip-path だけで見えなく
     する（clip-path はレイアウト上の位置・overflow 判定に影響しない）。 */
  .site-nav {
    position: fixed; inset: 52px 0 0 auto; width: min(86vw, 360px);
    background: var(--umber-900); border-left: 1px solid var(--hairline);
    padding: var(--s-6) var(--s-5);
    z-index: var(--z-overlay); overflow-y: auto;
    flex-direction: column; align-items: flex-start; gap: var(--s-6);
    clip-path: inset(0 0 0 100%);
    visibility: hidden; opacity: 0;
    transition: clip-path var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), visibility 0s var(--dur-base);
  }
  .site-nav[data-open="true"] {
    clip-path: inset(0);
    visibility: visible; opacity: 1;
    transition: clip-path var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), visibility 0s;
  }
  .site-nav ul { flex-direction: column; align-items: flex-start; gap: var(--s-5); }
  .nav-period { align-items: flex-start; margin: var(--s-6) 0 0; }
  /* v24バグ修正: 旧 z-index:var(--z-chrome) は .site-header と同値で、DOM順で
     scrim の方が後ろにあるため .brand／.bgm-icon／.nav-toggle（閉じるボタン）
     まで覆ってしまい、ドロワー展開中にヘッダー自身のコントロールがクリック
     できなくなっていた。var(--z-scrim) に下げ、.site-header（--z-chrome）
     より下・背景コンテンツより上にする。 */
  .nav-scrim {
    position: fixed; inset: 0; background: rgba(13,10,8,.6); z-index: var(--z-scrim);
  }
  .nav-scrim[hidden] { display: none; }
}

/* ------------------------------ progress rail -------------------------------- */
.progress-rail {
  position: fixed; right: var(--s-4); top: 50%; transform: translateY(-50%);
  z-index: var(--z-chrome); display: flex; align-items: center;
}
.pr-track { position: relative; width: 2px; height: 42vh; background: var(--hairline); border-radius: 2px; }
.pr-fill { position: absolute; top: 0; left: 0; width: 100%; height: 0%; background: var(--accent); border-radius: 2px; }
.pr-marks { position: absolute; inset: 0; }
.pr-mark {
  position: absolute; left: 50%; top: var(--at, 0%); transform: translate(-50%, -50%);
  width: 10px; height: 10px; border-radius: 50%; background: var(--umber-700); border: 1px solid var(--hairline);
}
.pr-mark span {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-size: var(--t-caption); color: var(--ink-muted);
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-out);
}
.pr-mark:hover span, .pr-mark:focus-visible span { opacity: 1; }
@media (max-width: 860px) { .progress-rail { display: none; } }

/* ------------------------------ footer --------------------------------------- */
.site-footer { border-top: 1px solid var(--hairline); padding: var(--s-8) var(--s-5); }
.footer-grid {
  max-width: 1320px; margin-inline: auto;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-7);
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: var(--s-6); } }
.footer-title { font-weight: 900; font-size: 1.05rem; margin-bottom: var(--s-3); }
.footer-line { color: var(--ink-muted); max-width: 30em; }
.footer-meta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); font-size: var(--t-caption); color: var(--ink-faint); }
.footer-meta span { padding: 2px var(--s-3); border: 1px solid var(--hairline); border-radius: var(--r-pill); }
.footer-h { font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--s-3); }
.footer-nav li { margin-bottom: var(--s-2); }
.footer-nav a:hover { color: var(--accent); }
.footer-note { color: var(--ink-muted); }
.footer-note a { color: var(--accent); }